:root {
    --ink: #05070a;
    --panel: #0d1119;
    --steel: #1c2433;
    --steel-soft: rgba(28, 36, 51, 0.6);
    --brass: #c9a668;
    --brass-light: #f2dfb0;
    --brass-dim: rgba(201, 166, 104, 0.35);
    --verdigris: #3ddba0;
    --verdigris-dim: rgba(61, 219, 160, 0.3);
    --alarm: #ff5470;
    --bg-card: rgba(13, 17, 25, 0.66);
    --border-soft: rgba(28, 36, 51, 0.75);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--ink);
    position: relative;
}

/* Ambient grain + vignette so the black reads as depth, not a flat void */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -20;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: 0.5;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -19;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201,166,104,0.05), transparent 60%),
                radial-gradient(ellipse 60% 40% at 100% 100%, rgba(61,219,160,0.04), transparent 60%);
}

.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

/* --- Vault plates: the two main cards read as riveted steel panels --- */
.premium-shadow-gold,
.premium-shadow-emerald {
    position: relative;
    background: var(--bg-card);
    box-shadow:
        0 30px 60px -15px rgba(0,0,0,0.9),
        inset 0 1px 0 rgba(255,255,255,0.03),
        inset 0 0 0 1px rgba(255,255,255,0.02);
}
.premium-shadow-gold {
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.03), 0 0 60px -20px rgba(201,166,104,0.09);
    border-top: 1px solid rgba(201,166,104,0.14) !important;
}
.premium-shadow-emerald {
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.03), 0 0 60px -20px rgba(61,219,160,0.08);
    border-top: 1px solid rgba(61,219,160,0.14) !important;
}

.premium-shadow-gold::before,
.premium-shadow-emerald::before,
.premium-shadow-gold::after,
.premium-shadow-emerald::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    top: 16px;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.35), rgba(0,0,0,0.6) 70%);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
    pointer-events: none;
    z-index: 2;
}
.premium-shadow-gold::before,
.premium-shadow-emerald::before { left: 16px; }
.premium-shadow-gold::after,
.premium-shadow-emerald::after { right: 16px; }

.custom-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.custom-scroll::-webkit-scrollbar-track { background: #030407; border-radius: 8px; }
.custom-scroll::-webkit-scrollbar-thumb { background: var(--steel); border-radius: 99px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: var(--brass-dim); }

.radial-glow-hover { position: relative; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
.radial-glow-hover::after {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(180deg, rgba(201,166,104,0.14) 0%, transparent 60%);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}
@media (min-width: 1024px) {
    .radial-glow-hover:hover::after { opacity: 1; }
    .radial-glow-hover:hover { transform: translateY(-2px); }
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes dialTurn { to { transform: rotate(360deg); } }
@keyframes ledFlicker {
    0%, 100% { text-shadow: 0 0 18px rgba(242,223,176,0.35), 0 0 2px rgba(242,223,176,0.5); }
    50% { text-shadow: 0 0 24px rgba(242,223,176,0.5), 0 0 4px rgba(242,223,176,0.7); }
}
@keyframes softPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

.surface-shimmer { position: relative; overflow: hidden; }
.surface-shimmer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.015) 30%, rgba(201,166,104,0.035) 50%, rgba(255,255,255,0.015) 70%, transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 15s linear infinite;
    pointer-events: none;
}

/* --- Signature element: the network badge reads as a slow-turning vault dial --- */
.status-ring { position: relative; isolation: isolate; }
.status-ring::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 11px;
    background: conic-gradient(from 0deg,
        var(--brass-dim) 0deg 4deg, transparent 4deg 40deg,
        var(--brass-dim) 40deg 44deg, transparent 44deg 80deg,
        var(--brass-dim) 80deg 84deg, transparent 84deg 120deg,
        var(--brass-dim) 120deg 124deg, transparent 124deg 160deg,
        var(--brass-dim) 160deg 164deg, transparent 164deg 200deg,
        var(--brass-dim) 200deg 204deg, transparent 204deg 240deg,
        var(--brass-dim) 240deg 244deg, transparent 244deg 280deg,
        var(--brass-dim) 280deg 284deg, transparent 284deg 320deg,
        var(--brass-dim) 320deg 324deg, transparent 324deg 360deg);
    mask: radial-gradient(circle, transparent 60%, black 62%, black 100%);
    -webkit-mask: radial-gradient(circle, transparent 60%, black 62%, black 100%);
    animation: dialTurn 22s linear infinite;
    z-index: -1;
    opacity: 0.7;
}

.shortcut-kbd {
    border: 1px solid var(--steel);
    background: linear-gradient(180deg, rgba(23,30,42,0.9), rgba(10,13,19,0.9));
    padding: 0.2rem 0.45rem;
    border-radius: 0.375rem;
    font-size: 10px;
    line-height: 1;
    color: rgb(180, 190, 205);
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.4);
}

.drag-active {
    border-color: var(--brass-dim) !important;
    box-shadow: 0 0 0 1px rgba(201,166,104,0.18) inset, 0 0 70px -12px rgba(201,166,104,0.18);
}

.glass-badge {
    background: rgba(9, 12, 18, 0.8);
    border: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
}

.history-card { transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; }
.history-card:hover {
    border-color: var(--brass-dim);
    transform: translateY(-2px);
    background: rgba(17, 22, 33, 0.7);
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6);
}

.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meter-bar { transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 0 12px -2px currentColor; }

.live-dot { box-shadow: 0 0 0 0 rgba(61,219,160,0.4); animation: internalPing 2.5s infinite; }
@keyframes internalPing {
    0% { box-shadow: 0 0 0 0 rgba(61,219,160,0.45); }
    70% { box-shadow: 0 0 0 8px rgba(61,219,160,0); }
    100% { box-shadow: 0 0 0 0 rgba(61,219,160,0); }
}

.focus-ring:focus-visible {
    outline: 2px solid var(--brass-dim);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(201,166,104,0.12);
}

/* --- LED-style access code readout --- */
#generatedCode {
    animation: ledFlicker 4s ease-in-out infinite;
    letter-spacing: 0.14em;
}

/* --- Keypad-style scan texture on active input surfaces --- */
#dropZone, #jsonPreview {
    background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0.008) 0px, rgba(255,255,255,0.008) 1px, transparent 1px, transparent 3px);
}

/* --- Give the primary action real hardware weight --- */
#broadcastBtn {
    background: linear-gradient(180deg, #232b3c 0%, #161d2b 45%, #0a0f1a 100%);
    border: 1px solid rgba(201,166,104,0.25);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 -1px 0 rgba(0,0,0,0.5) inset,
        0 14px 30px -12px rgba(0,0,0,0.7);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.2s ease;
}
#broadcastBtn:hover:not(:disabled) {
    border-color: rgba(201,166,104,0.45);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 -1px 0 rgba(0,0,0,0.5) inset,
        0 16px 34px -12px rgba(201,166,104,0.18);
}
#broadcastBtn:active:not(:disabled) { transform: translateY(1px); }

#pullStreamBtn {
    background: linear-gradient(180deg, rgba(8,41,32,0.9) 0%, rgba(5,28,22,0.95) 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 26px -12px rgba(0,0,0,0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.2s ease;
}
#pullStreamBtn:hover:not(:disabled) {
    border-color: rgba(61,219,160,0.4);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 14px 30px -12px rgba(61,219,160,0.16);
}
#pullStreamBtn:active:not(:disabled) { transform: translateY(1px); }

#copyTokenBtn, #pasteCodeBtn, #exportBtn, #resetSessionBtn {
    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}
#copyTokenBtn:active, #pasteCodeBtn:active { transform: translateY(1px); }

/* --- Access code display card: give it a locked-vault presence --- */
#codeDisplay {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 30px 60px -20px rgba(0,0,0,0.9);
}
#codeDisplay .group\/token > div:first-child {
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(201,166,104,0.08);
}

/* --- Encryption toggle: subtle mechanical click feel --- */
#encryptToggle {
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.2s ease;
}
#encryptKnob {
    box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.2);
}

/* --- Countdown ring on active sessions: quiet ambient pulse near expiry --- */
#codeDisplay .live-dot {
    animation: internalPing 2.5s infinite, softPulse 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .live-dot, .status-ring::before, #generatedCode, .surface-shimmer::before,
    #codeDisplay .live-dot, [class*="animate-"] {
        animation: none !important;
    }
    .radial-glow-hover:hover, #broadcastBtn:active, #pullStreamBtn:active,
    #copyTokenBtn:active, #pasteCodeBtn:active {
        transform: none;
    }
}

@media (max-width: 640px) {
    .premium-shadow-gold::before,
    .premium-shadow-emerald::before,
    .premium-shadow-gold::after,
    .premium-shadow-emerald::after {
        top: 12px;
    }
    }