:root {
            --bg: #eeece6;
            --surface: #ffffff;
            --border: #c8c5bc;
            --border-dark: #aaa89e;
            --text: #111110;
            --text-muted: #6b6b65;
            --text-dim: #9c9b92;
            --accent: #f08e19;
    --sweep-color: rgba(240,142,25,0.7);
    --accent-link: #a3610a;
            --accent-hover: #d67a0d;
            --accent-text: #111110;
            --accent-copied: var(--accent);
            --accent-faded: #f08e191f;
            --accent-faded-hover: #f08e1933;
            --red: #98404a;
            --green: #46724e;
            --footer-bg: #111110;
            --r: 0px;
            --font: 'DM Sans', sans-serif;
            --mono: 'JetBrains Mono', monospace;
        }

        html.eth-mode {
            --accent: #4a4a82;
    --sweep-color: rgba(74,74,130,0.7);
    --accent-link: #4a4a82;
            --accent-hover: #3d3d70;
            --accent-text: #ffffff;
            --accent-copied: #8a8ae6;
            --accent-faded: #4a4a821f;
            --accent-faded-hover: #4a4a8233;
        }

        html {
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: var(--font);
            background-color: var(--bg);
            background-image:
                linear-gradient(rgba(0,0,0,0.09) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,0,0,0.09) 1px, transparent 1px);
            background-size: 16px 16px;
            color: var(--text);
            min-height: 100vh;
        }

        .page-wrapper {
            max-width: 1440px;
            width: 100%;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .card { 
            background: var(--surface); 
            border: 1px solid var(--border); 
            border-top: none; 
            border-bottom: none;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        /* ── COIN SWITCHER ── */
        .coin-switcher { display: flex; background: #111110; }
        .coin-btn {
            flex: 1;
            padding: 18px 20px;
            font-size: 20px;
            font-weight: 800;
            cursor: pointer;
            border: none;
            background: none;
            color: #6b6b65;
            transition: none;
            font-family: var(--font);
            display: flex;
            justify-content: center;
            align-items: center;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            user-select: none;
        }
        .coin-btn.active { color: var(--accent-text); background: var(--accent); }
        .coin-btn:hover:not(.active) { color: #bbb; }

        /* ── TABS + RESET ── */
        .nav-tabs {
            display: flex;
            align-items: stretch;
            border-bottom: 1px solid var(--border);
            background: var(--surface);
            overflow-x: auto;
            overflow-y: hidden;
            touch-action: pan-x;
        }
        .nav-tab {
            padding: 18px 26px;
            font-size: 24px;
            font-weight: 800;
            text-decoration: none;
            color: var(--text-muted);
            border-bottom: 3px solid transparent;
            margin-bottom: -1px;
            transition: color 0.15s, border-color 0.15s;
            white-space: nowrap;
            font-family: var(--font);
            font-variant-caps: all-small-caps;
            letter-spacing: 0.04em;
        }
        .nav-tab:hover { color: var(--text); }
        .nav-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
        .nav-spacer { flex: 1; }
        .nav-reset {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            width: 85px;
            flex: 0 0 85px;
            font-size: 12px;
            font-weight: 700;
            text-decoration: none;
            color: var(--text-muted);
            border-left: 1px solid var(--border);
            transition: none;
            white-space: normal;
            font-family: var(--font);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            text-align: center;
            padding: 0 4px;
        }
        .btn-clear { background-color: var(--accent-faded); }
        .btn-reset-all { background-color: #f2f0ea; }
        .nav-reset span {
            order: 1;
            line-height: 1.3;
        }
        .nav-reset svg {
            order: 2;
            width: 15px !important;
            height: 15px !important;
        }

        .lang-switcher {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            width: 64px;
            flex: 0 0 64px;
            padding: 0;
            border-left: 1px solid var(--border);
            align-self: stretch;
        }
        .lang-btn {
            display: block;
            width: 44px;
            height: 25px;
            opacity: 0.4;
            transition: opacity 0.15s;
            border: none;
            overflow: hidden;
            background-image: url('/static/flags.png');
            background-size: 44px 51px;
            user-select: none;
        }
        .lang-btn-en {
            background-position: top;
        }
        .lang-btn-hu {
            background-position: bottom;
        }
        .lang-btn.active {
            opacity: 1;
        }
        .lang-btn:hover {
            opacity: 0.85;
        }

        /* ── CARD BODY ── */
        .card-body { padding: 32px; flex: 1; }

        .page-title { font-size: 34px; font-weight: 800; letter-spacing: 0.02em; margin-bottom: 8px; text-align: center; font-variant-caps: all-small-caps; }
        .page-subtitle { font-size: 16px; color: var(--text-muted); margin-bottom: 30px; line-height: 1.5; text-align: center; }

        /* ── FORMS ── */
        .form-group { margin-bottom: 20px; }
        .form-group:last-child { margin-bottom: 0; }

        label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            color: var(--text-muted);
            margin-bottom: 8px;
            font-family: var(--font);
        }

        input[type="text"], textarea {
            width: 100%;
            padding: 12px 16px;
            background: #eeece6;
            border: 2px solid var(--border-dark);
            color: var(--text);
            font-family: var(--mono);
            font-size: 14px;
            outline: none;
            transition: border-color 0.15s, background 0.15s;
            border-radius: 0;
        }
        input[type="text"]::placeholder, textarea::placeholder { color: var(--text-dim); opacity: 0.6; font-family: inherit; font-size: inherit; }
        input[type="text"]:focus, textarea:focus { border-color: #111; background: #fff; }
        textarea { resize: none; height: 92px; line-height: 1.6; }

        /* ── BUTTONS ── */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.075s;
            white-space: nowrap;
            font-family: var(--font);
            font-variant-caps: all-small-caps;
            border-radius: 0;
            line-height: 1.2;
        }
        .btn-primary {
            padding: 12px 28px;
            font-size: 24px;
            font-weight: 900;
            background: var(--accent);
            color: var(--accent-text);
            border-color: #111110;
            width: 100%;
        }
        
        .btn-outline {
            padding: 10px 24px;
            font-size: 20px;
            font-weight: 800;
            background: var(--surface);
            color: var(--text);
            border-color: #111110;
            transition: all 0.075s;
}
        .btn-outline:hover { background: #f4f2eb; border-color: #111110; }
        
        .btn-path { transition: none; }
        .btn-path.active-path { background: #111110; color: #fff; border-color: #111110; }


        

        /* ── COPY BTN ── */
        .copy-btn {
            background: none; border: none; cursor: pointer; padding: 2px; margin-left: 3px;
            color: var(--text-dim); transition: color 0.12s, transform 0.1s;
            display: inline-flex; align-items: center; width: auto; vertical-align: middle; flex-shrink: 0;
        }
        .copy-btn:hover { color: var(--text); transform: scale(1.15); }
        .copy-btn.copied { color: var(--accent-copied, var(--accent)); }

        /* ── RESULTS TABLE ── */
        .result-box { margin-top: 24px; border: 1px solid var(--border); background: #fafaf7; animation: fadeIn 0.25s ease; }
        .result-box.outdated { opacity: 0.35; transition: opacity 0.15s ease; }
        .result-header { padding: 12px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; background: #f4f2ec; }
        .result-header h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-family: var(--font); }
        .result-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; flex-shrink: 0; }
        .error-box { margin-top: 22px; border: 1px solid var(--red); background: #f4eaeb; padding: 15px; color: var(--red); animation: fadeIn 0.25s ease; }

        table { width: 100%; border-collapse: collapse; }
        th { text-align: left; padding: 10px 6px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); border-bottom: 1px solid var(--border); background: #f4f2ec; white-space: nowrap; font-family: var(--font); }
        td { padding: 10px 6px; border-bottom: 1px solid #e8e6df; color: var(--text); font-family: var(--mono); vertical-align: middle; font-size: 14px; white-space: nowrap; }
        td a { font-size: inherit; font-family: inherit; }
        th:first-child, td:first-child { padding-left: 14px; }
        th:last-child, td:last-child { padding-right: 14px; }
        tr:last-child td { border-bottom: none; }
        tr:hover td { background: #f9f8f4; }
        td a { color: var(--accent-link); text-decoration: none; }
        td a:hover { color: var(--text); text-decoration: underline; }
        .wif-cell { display: inline-flex; align-items: center; gap: 4px; }

        /* ── VISIBILITY ── */
        .eth-only { display: none !important; }
        html.eth-mode .eth-only { display: block !important; }
        html.eth-mode span.eth-only { display: inline !important; }
        html.eth-mode label.eth-only { display: flex !important; }
        html.eth-mode div.quick-paths.eth-only { display: flex !important; }
        html.eth-mode th.eth-only, html.eth-mode td.eth-only { display: table-cell !important; }
        html.btc-only { display: block !important; }
        html.eth-mode .btc-only { display: none !important; }

        /* ── FOOTER BOX ── */
        .footer-box {
            background: var(--footer-bg);
            margin-top: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            width: 100%;
            overflow: hidden;
        }
        .footer-brand {
            width: 100%;
            user-select: none;
            overflow: hidden;
        }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 700px) {
    .card-body { padding: 20px 16px; }
    .page-title { font-size: 26px; }
    .nav-tab { font-size: 18px; padding: 14px 14px; }
    .coin-btn { font-size: 16px; padding: 14px 10px; }
}

/* ── PRESS STATES (§2) ── */
.coin-btn:active, .nav-tab:active, .nav-reset:active { transform: translateY(1px); }
.btn:active { transform: translateY(2px); }
.btn-primary:active { transform: translateY(2px); }
.btn-path:active { background: #111110; color: #ffffff; transform: translateY(0); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── COPY BTN FEEDBACK (§4) ── */
@keyframes cdPopA { 0% { color: inherit; } 40% { color: #111110; } 100% { color: inherit; } }
@keyframes cdPopB { 0% { color: inherit; } 40% { color: #111110; } 100% { color: inherit; } }
.copy-btn.pop-a svg { animation: cdPopA 0.35s ease; }
.copy-btn.pop-b svg { animation: cdPopB 0.35s ease; }

/* ── FOOTER HAIRLINE (§6) ── */
.footer-hairline { height: 3px; background: var(--accent); }

/* ── GRID SWEEP (§7) ── */
.page-wrapper { position: relative; z-index: 1; }
@keyframes cdSweep {
    from { transform: translateY(0); opacity: 0.9; }
    to   { transform: translateY(calc(100vh + 300px)); opacity: 0; }
}
.grid-sweep { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.grid-sweep > div {
    position: absolute; left: 0; right: 0; height: 300px; top: -300px;
    background-image:
        linear-gradient(var(--sweep-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--sweep-color) 1px, transparent 1px);
    background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 35%, black 65%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 35%, black 65%, transparent);
    animation: cdSweep 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}
#toggleBip38Btn:active { transform: translateY(0) !important; }