/* Wallet page styles. Extracted from the page so its Content-Security-
   Policy can forbid inline styles outright. */
/* Deliberately NO third-party CSS or fonts on this page.
           Every other page pulls Font Awesome and Google Fonts from a CDN,
           which is fine for a dashboard. This page is the one that will later
           hold keys, so it loads nothing it does not serve itself - the habit
           is worth starting before there is anything to steal. */
        html, body { max-width: 100%; overflow-x: hidden; }
        .w-wrap { max-width: 900px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
        .w-nav { display: inline-block; color: var(--text-secondary); text-decoration: none;
                 font-size: 0.9rem; margin-bottom: 1.5rem; }
        .w-nav:hover { color: var(--accent); }
        h2.w-title { font-size: 1.5rem; margin: 0 0 1.5rem; color: var(--text-primary); }

        .addr-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1.5rem; }
        .addr-row input {
            flex: 1 1 340px; min-width: 0; padding: 0.8rem 1rem; font: inherit; font-size: 0.92rem;
            color: var(--text-primary); background: var(--bg-card);
            border: 1px solid var(--border); border-radius: 12px;
        }
        .addr-row input:focus { outline: none; border-color: var(--accent); }
        .addr-row button {
            padding: 0.8rem 1.4rem; font: inherit; font-weight: 600; color: #fff;
            background: var(--accent); border: none; border-radius: 12px; cursor: pointer;
        }

        .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                 gap: 1rem; margin-bottom: 1.5rem; }
        .c { background: var(--bg-card); border: 1px solid var(--border);
             border-radius: 14px; padding: 1.1rem 1.25rem; }
        .c h4 { margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
                text-transform: uppercase; color: var(--text-secondary); }
        .c .v { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); word-break: break-word; }
        .c .s { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.2rem; }
        .c.warn { border-color: #d97706; }

        table.u { width: 100%; border-collapse: collapse; background: var(--bg-card);
                  border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
        table.u th { text-align: left; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
                     text-transform: uppercase; color: var(--text-secondary);
                     padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); }
        table.u td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
                     font-size: 0.86rem; color: var(--text-primary); }
        table.u tr:last-child td { border-bottom: none; }
        .mono { font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.8rem; }
        .tag { font-size: 0.66rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 999px;
               margin-left: 0.4rem; }
        .tag.mat { background: rgba(217,119,6,0.18); color: #d97706; }
        .num { white-space: nowrap; }
        .note { color: var(--text-secondary); font-size: 0.84rem; line-height: 1.65; margin: 1.5rem 0 0; }
        .msg { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
               padding: 2rem; text-align: center; color: var(--text-secondary); }
        a.ex { color: var(--accent); text-decoration: none; }
        a.ex:hover { text-decoration: underline; }
        .tabs { display: flex; gap: 0.3rem; margin-bottom: 1.5rem; }
        .tab {
            appearance: none; border: 1px solid var(--border); background: transparent;
            color: var(--text-secondary); font: inherit; font-size: 0.86rem; font-weight: 600;
            padding: 0.5rem 1.1rem; border-radius: 10px; cursor: pointer;
        }
        .tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
        .panel { background: var(--bg-card); border: 1px solid var(--border);
                 border-radius: 14px; padding: 1.4rem; }
        .field { margin-bottom: 1rem; }
        .field label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em;
                       text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.4rem; }
        .field input[type=text], .field input[type=password] {
            width: 100%; box-sizing: border-box; padding: 0.7rem 0.9rem; font: inherit; font-size: 0.9rem;
            color: var(--text-primary); background: var(--bg-secondary);
            border: 1px solid var(--border); border-radius: 10px;
        }
        .field input:focus { outline: none; border-color: var(--accent); }
        .field .hint { font-size: 0.76rem; color: var(--text-secondary); margin-top: 0.3rem; }
        .btn { padding: 0.7rem 1.2rem; font: inherit; font-weight: 600; color: #fff;
               background: var(--accent); border: none; border-radius: 10px; cursor: pointer; }
        .btn.ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
        .btn.danger { background: #dc2626; }
        .btn[disabled] { opacity: 0.6; cursor: default; }
        .row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
        .msg-line { margin-top: 1rem; font-size: 0.86rem; color: var(--text-secondary); word-break: break-word; }
        .msg-line.bad { color: #dc2626; }
        .msg-line.good { color: #16a34a; }
        .warn-box { border: 1px solid #d97706; background: rgba(217,119,6,0.08);
                    border-radius: 10px; padding: 0.9rem 1rem; font-size: 0.84rem;
                    color: var(--text-primary); line-height: 1.6; margin-bottom: 1.25rem; }
        .confirm { border: 1px solid var(--accent); border-radius: 12px; padding: 1.1rem;
                   margin-top: 1.25rem; }
        .confirm dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.2rem; margin: 0 0 1rem; }
        .confirm dt { color: var(--text-secondary); font-size: 0.8rem; }
        .confirm dd { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
                      word-break: break-all; }
        .keyout { background: var(--bg-secondary); border: 1px solid var(--border);
                  border-radius: 10px; padding: 0.9rem; margin-top: 0.9rem; }
        .keyout div { word-break: break-all; font-size: 0.82rem; }
        .keyout .k { font-family: 'Monaco','Menlo',monospace; color: var(--text-primary); }
        .keyout .lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
                       color: var(--text-secondary); margin-top: 0.6rem; }

        @media (max-width: 640px) {
            table.u thead { display: none; }
            table.u tr { display: block; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
            table.u td { display: flex; justify-content: space-between; gap: 1rem; border: none; padding: 0.18rem 0; }
            table.u td::before { content: attr(data-label); color: var(--text-secondary); font-size: 0.72rem;
                                 text-transform: uppercase; letter-spacing: 0.04em; }
        }

/* Replacements for the inline style attributes the CSP blocks. */
.addr-mono { word-break: break-all; font-size: 0.85rem; }
.bal-big { font-size: 1.3rem; font-weight: 700; }
.inline-label { text-transform: none; letter-spacing: 0; display: inline; font-size: 0.8rem; }