/* ═══════════════════════════════════════
   THEME.CSS  —  shared across all pages
   Drop this FIRST before any page CSS
═══════════════════════════════════════ */

/* ── DARK MODE (default) ── */
:root {
    --bg:          #080C14;
    --surface:     #0D1525;
    --surface-2:   #111D30;
    --border:      #1E293B;
    --text:        #F1F5F9;
    --muted:       #64748B;
    --muted-2:     #94A3B8;

    --cobalt:      #3B82F6;
    --cobalt-dim:  rgba(59,130,246,0.12);
    --cobalt-glow: rgba(59,130,246,0.25);

    --gold:        #F59E0B;
    --gold-dim:    rgba(245,158,11,0.12);

    --green:       #10B981;
    --green-dim:   rgba(16,185,129,0.12);

    --red:         #EF4444;
    --red-dim:     rgba(239,68,68,0.12);

    --purple:      #8B5CF6;
    --purple-dim:  rgba(139,92,246,0.12);

    /* Aurora blobs (balance card) */
    --aurora-1:    #1D4ED8;
    --aurora-2:    #7C3AED;
    --aurora-3:    #0891B2;
    --aurora-opacity: 0.45;
}

/* ── LIGHT MODE ── */
[data-theme="light"] {
    --bg:          #F1F5F9;
    --surface:     #FFFFFF;
    --surface-2:   #F8FAFC;
    --border:      #E2E8F0;
    --text:        #0F172A;
    --muted:       #64748B;   /* was #94A3B8 — too pale on white, ~2.5:1 contrast */
    --muted-2:     #475569;   /* was #64748B — bumped one step darker to keep a clear 2-tier hierarchy under the new --muted */

    --cobalt-dim:  rgba(59,130,246,0.08);
    --cobalt-glow: rgba(59,130,246,0.15);

    --gold-dim:    rgba(245,158,11,0.08);
    --green-dim:   rgba(16,185,129,0.08);
    --red-dim:     rgba(239,68,68,0.08);
    --purple-dim:  rgba(139,92,246,0.08);

    /* Softer aurora in light mode */
    --aurora-1:    #93C5FD;
    --aurora-2:    #C4B5FD;
    --aurora-3:    #67E8F9;
    --aurora-opacity: 0.3;
}

/* ── SMOOTH TRANSITION ON SWITCH ── */
*, *::before, *::after {
    transition:
        background-color 0.25s ease,
        border-color     0.25s ease,
        color            0.15s ease,
        box-shadow       0.25s ease;
}

/* Exclude animations and transforms from the blanket transition */
.aurora-blob,
.card-btn,
.service-tile,
.nav-link i {
    transition: none;
}

/* ── FOOTER NAV ── */
.footer {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    background: rgba(8,12,20,0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
}

[data-theme="light"] .footer { background: rgba(241,245,249,0.9); }

.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 16px;
    transition: color 0.15s;
}

.nav-link i { font-size: 19px; }
.nav-link.active { color: var(--cobalt); }

.crypto-qr{
    width:180px;
    height:180px;
    display:block;
    margin:0 auto;
    padding:12px;
    background:#fff;
    border-radius:18px;
}
.page-header{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:24px 20px 16px;

}

.page-header h3{

    flex:1;
    text-align:center;
    font-size:20px;
    font-weight:800;

}

.history-btn{

    display:flex;
    align-items:center;
    gap:8px;

    padding:0 14px;

    height:42px;

    border-radius:12px;

    background:var(--surface);

    border:1px solid var(--border);

    color:var(--text);

    text-decoration:none;

    font-weight:700;
}