/* ============================================================
   RF TELEMETRY DESIGN SYSTEM v2
   Live signal monitor — cyan primary, mono telemetry voice
   ============================================================ */

:root {
    --bg: #05060a;
    --surface: #0c0e14;
    --surface-hi: #11141c;
    --border: #1f2430;
    --border-hi: #2a3142;
    --text-1: #fafafa;
    --text-2: #a1a1a1;
    --text-3: #666;
    --text-4: #444;
    --rf-primary: #22d3ee;          /* electric cyan */
    --rf-primary-dim: #0891b2;
    --rf-secondary: #a78bfa;        /* violet */
    --rf-warn: #fbbf24;             /* amber */
    --rf-ok: #34d399;               /* emerald */
    --rf-danger: #f87171;
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    background-color: var(--bg);
    color: var(--text-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Inter', system-ui, sans-serif;
    position: relative;
    min-height: 100vh;
}

/* Engineering-grid paper background — fixed, very faint */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle, rgba(34, 211, 238, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
}

::selection {
    background-color: var(--rf-primary);
    color: var(--bg);
}

/* ============================================================
   AMBIENT GLOW (kept, recolored to cyan)
   ============================================================ */
.ambient-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ambient-glow::before {
    content: '';
    position: absolute;
    top: -25%;
    right: -15%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.10) 0%, transparent 65%);
    border-radius: 50%;
    animation: float-glow 12s ease-in-out infinite;
}

.ambient-glow::after {
    content: '';
    position: absolute;
    bottom: -25%;
    left: -15%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.07) 0%, transparent 65%);
    border-radius: 50%;
    animation: float-glow 14s ease-in-out infinite reverse;
}

@keyframes float-glow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -25px) scale(1.15); }
}

/* ============================================================
   NAV
   ============================================================ */
#main-nav.scrolled {
    background: rgba(5, 6, 10, 0.85);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--border);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.card:hover {
    border-color: var(--border-hi);
    box-shadow: 0 24px 50px rgba(0,0,0,0.4), 0 0 80px rgba(34, 211, 238, 0.08);
}

.card:hover::before { opacity: 1; }

[data-tilt] {
    transition: transform .4s ease;
    will-change: transform;
    transform-style: preserve-3d;
}

[data-tilt] > * { transform-style: preserve-3d; }

/* ============================================================
   SECTION LABELS — mono telemetry voice
   ============================================================ */
.section-label {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--rf-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.section-label::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--rf-primary);
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
}

/* Section heading underline-sweep — fires on enter via JS */
.section-heading {
    position: relative;
    display: inline-block;
}

.section-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--rf-primary), transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}

.section-heading.is-active::after { transform: scaleX(1); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.85rem;
    background: #fff;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
    border: 0;
    cursor: pointer;
}

.btn-primary:hover {
    background: #e8e8e8;
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(255,255,255,.12);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.85rem;
    border: 1px solid var(--border-hi);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9999px;
    transition: all .3s ease;
    background: transparent;
    cursor: pointer;
}

.btn-ghost:hover {
    background: var(--surface-hi);
    border-color: var(--rf-primary);
    color: var(--rf-primary);
    transform: translateY(-1px);
}

/* ============================================================
   FORMS
   ============================================================ */
.form-input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    color: var(--text-1);
    font-size: 0.875rem;
    font-family: 'JetBrains Mono', monospace;
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
    position: relative;
}

.form-input::placeholder { color: var(--text-4); }

.form-input:focus {
    border-color: var(--rf-primary);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15), inset 0 0 20px rgba(34, 211, 238, 0.06);
    background: rgba(34, 211, 238, 0.02);
}

/* Field with scan-line sweep wrapper */
.field-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.field-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.15), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}

.field-wrap:focus-within::after {
    opacity: 1;
    animation: field-scan 1.4s ease-in-out infinite;
}

@keyframes field-scan {
    0%   { left: -40%; }
    100% { left: 110%; }
}

/* ============================================================
   PROSE
   ============================================================ */
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--text-1); font-weight: 600; margin-top: 2rem; margin-bottom: 1rem; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose p  { margin-bottom: 1.5rem; line-height: 1.8; color: var(--text-2); }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1.5rem; color: var(--text-2); }
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin-bottom: .5rem; line-height: 1.7; }
.prose strong { color: var(--text-1); font-weight: 600; }
.prose a { color: var(--rf-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(34,211,238,.4); transition: text-decoration-color .2s; }
.prose a:hover { text-decoration-color: var(--rf-primary); color: #67e8f9; }
.prose blockquote { border-left: 3px solid var(--rf-primary); padding-left: 1rem; margin: 1.5rem 0; color: var(--text-3); font-style: italic; }
.prose code { background: var(--surface-hi); border: 1px solid var(--border); border-radius: 4px; padding: .125rem .375rem; font-family: 'JetBrains Mono', monospace; font-size: .85em; color: #67e8f9; }
.prose pre { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; overflow-x: auto; margin: 1.5rem 0; }
.prose pre code { background: none; border: none; padding: 0; }
.prose img { border-radius: 12px; margin: 1.5rem 0; }

/* ============================================================
   TIMELINE — sliding progress dot + cyan gradient line
   ============================================================ */
.timeline-line {
    position: relative;
    padding-left: 2rem;
}

.timeline-line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom,
        var(--rf-primary) 0%,
        rgba(34, 211, 238, 0.3) 30%,
        var(--border) 60%,
        transparent 100%);
}

/* Glowing progress dot that slides down via JS-driven --progress (0..1) */
.timeline-line::after {
    content: '';
    position: absolute;
    left: -4px;
    top: calc(var(--progress, 0) * 100%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--rf-primary);
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.9), 0 0 4px rgba(34, 211, 238, 1);
    transform: translateY(-50%);
    transition: top 0.05s linear;
    pointer-events: none;
}

.timeline-entry {
    padding-left: 0.85rem;
}

.timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    left: -5px;
    top: 6px;
    background: var(--surface-hi);
    border: 2px solid var(--bg);
    box-shadow: 0 0 0 1px var(--border);
    transition: all .3s ease;
}

.timeline-dot.active {
    background: var(--rf-primary);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.7), 0 0 0 1px var(--rf-primary);
}

/* Timeline entry [ACTIVE] / [ARCHIVED] tag */
.tx-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 0.5rem;
    vertical-align: 0.12em;
}

.tx-tag.tx-active {
    color: var(--rf-primary);
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.4);
    animation: tag-blink 2.4s ease-in-out infinite;
}

.tx-tag.tx-archived {
    color: var(--text-4);
    background: transparent;
    border: 1px solid var(--border);
}

@keyframes tag-blink {
    0%, 100% { opacity: 1; }
    60% { opacity: 0.55; }
}

/* ============================================================
   HERO CANVAS — full-bleed wave field behind text
   ============================================================ */
#hero-canvas-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

#hero-canvas-wrap::after {
    /* fade out top + bottom of canvas to blend into page */
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%),
        linear-gradient(to right, var(--bg) 0%, transparent 8%, transparent 92%, var(--bg) 100%);
    pointer-events: none;
}

#hero-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.canvas-fallback {
    background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.08) 0%, transparent 70%);
}

/* Frequency readout overlay */
.frequency-readout {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 5;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: rgba(34, 211, 238, 0.55);
    text-align: right;
    line-height: 1.6;
    letter-spacing: 0.05em;
    pointer-events: none;
}

.frequency-readout .row { display: flex; gap: 0.6rem; justify-content: flex-end; }
.frequency-readout .label { color: var(--text-4); }
.frequency-readout .val { color: var(--rf-primary); }

/* Glitch-text initial state */
.glitch-text {
    position: relative;
    display: inline-block;
    color: var(--text-1);
}

/* Typewriter caret */
.typewriter::after {
    content: '_';
    color: var(--rf-primary);
    animation: caret-blink 0.7s steps(1) infinite;
    margin-left: 2px;
}

.typewriter.is-done::after { content: ''; }

@keyframes caret-blink {
    50% { opacity: 0; }
}

/* ============================================================
   SKILL PILLS
   ============================================================ */
.skill-pill {
    padding: 0.4rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    border-radius: 9999px;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}

.skill-pill:hover {
    border-color: var(--rf-primary);
    color: var(--rf-primary);
    background: rgba(34, 211, 238, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.2);
}

.skill-pill.flicker {
    animation: pill-flicker .35s ease-out 1;
}

@keyframes pill-flicker {
    0%  { background: rgba(34, 211, 238, 0.4); color: #fff; }
    40% { background: rgba(34, 211, 238, 0.05); color: var(--text-2); }
    60% { background: rgba(34, 211, 238, 0.25); }
    100% { background: var(--surface); color: var(--text-2); }
}

/* ============================================================
   PROJECTS — divider list
   ============================================================ */
.project-item {
    border-bottom: 1px solid var(--border);
    padding: 1.75rem 1rem;
    transition: all .3s ease;
    border-radius: 8px;
    margin: 0 -1rem;
    position: relative;
}

.project-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--rf-primary);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.project-item:hover {
    background-color: rgba(34, 211, 238, 0.025);
    border-color: var(--border-hi);
}

.project-item:hover::before { transform: scaleY(1); }

.project-item:last-child { border-bottom: none; }

/* ============================================================
   PROFILE IMAGE
   ============================================================ */
.profile-image-wrapper {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.profile-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    border: 1px solid rgba(34, 211, 238, 0.25);
    box-shadow: inset 0 0 60px rgba(34, 211, 238, 0.05);
    pointer-events: none;
}

.profile-image-wrapper img { transition: transform .6s ease; }
.profile-image-wrapper:hover img { transform: scale(1.04); }

/* ============================================================
   STATUS BADGE
   ============================================================ */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.85rem;
    border-radius: 9999px;
    text-transform: uppercase;
}

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.9); }
}

/* ============================================================
   GRADIENT TEXT (kept, recolored cyan→violet)
   ============================================================ */
.gradient-text {
    background: linear-gradient(135deg, var(--rf-primary) 0%, #818cf8 50%, var(--rf-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   SIGNAL TRACE — fixed SVG overlay drawing down the page
   ============================================================ */
.signal-trace {
    position: fixed;
    left: 16px;
    top: 0;
    height: 100vh;
    width: 60px;
    pointer-events: none;
    z-index: 5;
    opacity: 1;
}

.signal-trace .trace-path {
    fill: none;
    stroke: var(--rf-primary);
    stroke-width: 1.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.8));
    stroke-dasharray: var(--trace-len, 1000);
    stroke-dashoffset: var(--trace-offset, 1000);
}

.signal-trace .trace-node {
    fill: var(--rf-primary);
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.9));
    transform-origin: center;
    transform-box: fill-box;
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}

.signal-trace .trace-node.is-on {
    transform: scale(1);
    animation: node-pulse 1.6s ease-in-out infinite;
}

@keyframes node-pulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.9)); }
    50%      { filter: drop-shadow(0 0 14px rgba(34, 211, 238, 1)); }
}

@media (max-width: 900px) { .signal-trace { display: none; } }

/* ============================================================
   SERVICE CARD — SDR MODULE
   ============================================================ */
.module-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.85rem;
    margin: -2rem -2rem 1.5rem -2rem;
    background: rgba(10, 12, 18, 0.6);
    border-bottom: 1px solid var(--border);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: var(--text-3);
    text-transform: uppercase;
    transition: color .25s, background .25s, border-color .25s;
}

.module-strip .ms-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-4);
    margin-right: 0.4rem;
    box-shadow: 0 0 0 transparent;
    transition: background .25s, box-shadow .25s;
    vertical-align: 0.5px;
}

.card:hover .module-strip {
    color: var(--rf-primary);
    border-color: rgba(34, 211, 238, 0.4);
    background: rgba(34, 211, 238, 0.04);
}

.card:hover .module-strip .ms-dot {
    background: var(--rf-primary);
    box-shadow: 0 0 8px var(--rf-primary);
    animation: pulse-dot 1.6s ease-in-out infinite;
}

.card:hover .ms-status::before { content: 'ACTIVE'; }
.ms-status::before { content: 'STANDBY'; }

/* Radar sweep — conic gradient rotating overlay, masked to fade from center */
.radar-sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 270deg,
        rgba(34, 211, 238, 0.18) 340deg,
        rgba(34, 211, 238, 0.35) 358deg,
        transparent 360deg
    );
    -webkit-mask-image: radial-gradient(circle at center, black 0%, black 30%, transparent 75%);
            mask-image: radial-gradient(circle at center, black 0%, black 30%, transparent 75%);
    opacity: 0;
    transition: opacity .35s ease;
    border-radius: 16px;
}

.card:hover .radar-sweep {
    opacity: 1;
    animation: radar-rotate 4s linear infinite;
}

@keyframes radar-rotate {
    to { transform: rotate(360deg); }
}

/* Spectrum bars — frequency analyzer at card bottom */
.spectrum-bars {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.7rem;
    height: 18px;
    display: flex;
    gap: 3px;
    align-items: flex-end;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
}

.spectrum-bars > i {
    flex: 1;
    background: linear-gradient(to top, var(--rf-primary) 0%, var(--rf-primary) 60%, var(--rf-warn) 100%);
    border-radius: 1px;
    height: 20%;
    transform-origin: bottom;
    box-shadow: 0 0 6px rgba(34, 211, 238, 0.5);
}

.card:hover .spectrum-bars { opacity: 0.85; }
.card:hover .spectrum-bars > i { animation: bar-dance 1.1s ease-in-out infinite; }
.card:hover .spectrum-bars > i:nth-child(1)  { animation-delay: 0.00s; }
.card:hover .spectrum-bars > i:nth-child(2)  { animation-delay: 0.07s; }
.card:hover .spectrum-bars > i:nth-child(3)  { animation-delay: 0.13s; }
.card:hover .spectrum-bars > i:nth-child(4)  { animation-delay: 0.20s; }
.card:hover .spectrum-bars > i:nth-child(5)  { animation-delay: 0.27s; }
.card:hover .spectrum-bars > i:nth-child(6)  { animation-delay: 0.33s; }
.card:hover .spectrum-bars > i:nth-child(7)  { animation-delay: 0.40s; }
.card:hover .spectrum-bars > i:nth-child(8)  { animation-delay: 0.47s; }
.card:hover .spectrum-bars > i:nth-child(9)  { animation-delay: 0.53s; }
.card:hover .spectrum-bars > i:nth-child(10) { animation-delay: 0.60s; }
.card:hover .spectrum-bars > i:nth-child(11) { animation-delay: 0.67s; }
.card:hover .spectrum-bars > i:nth-child(12) { animation-delay: 0.73s; }

@keyframes bar-dance {
    0%, 100% { transform: scaleY(0.25); }
    20%      { transform: scaleY(0.7); }
    40%      { transform: scaleY(1); }
    60%      { transform: scaleY(0.5); }
    80%      { transform: scaleY(0.85); }
}

/* Service icon — number badge with cyan glow on hover */
.service-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.12) 0%, rgba(167, 139, 250, 0.06) 100%);
    border: 1px solid rgba(34, 211, 238, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rf-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    transition: box-shadow .3s ease, border-color .3s ease;
}

.card:hover .service-icon {
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.35), inset 0 0 12px rgba(34, 211, 238, 0.1);
    border-color: var(--rf-primary);
}

/* ============================================================
   RF PROPAGATION BG — career parallax layer
   ============================================================ */
.rf-propagation-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.5;
    will-change: transform;
}

.rf-propagation-bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================================
   TERMINAL FRAME — Secure Transmission
   ============================================================ */
.terminal-frame {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: border-color .35s ease, box-shadow .35s ease;
}

.terminal-frame.is-success {
    border-color: rgba(52, 211, 153, 0.5);
    box-shadow: 0 0 40px rgba(52, 211, 153, 0.15);
}

.terminal-frame.is-failed {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 0 40px rgba(251, 191, 36, 0.15);
}

.terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(34, 211, 238, 0.025);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-3);
}

.terminal-header .left { display: flex; align-items: center; gap: 0.5rem; color: var(--rf-primary); }

.terminal-header .left::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rf-primary);
    box-shadow: 0 0 8px var(--rf-primary);
    animation: pulse-dot 1.8s ease-in-out infinite;
}

.terminal-header .right { color: var(--text-4); font-size: 0.6rem; }

.field-label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: var(--text-3);
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}

.field-label::before {
    content: '> ';
    color: var(--rf-primary);
    opacity: 0.7;
}

/* Uplink button — breathing pulse + state machine */
.btn-uplink {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.08) 100%);
    border: 1px solid var(--rf-primary);
    color: var(--rf-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    transition: background .3s, color .3s, border-color .3s;
    animation: uplink-breathe 2.4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes uplink-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.5), inset 0 0 20px rgba(34,211,238,0.05); }
    50%      { box-shadow: 0 0 0 6px rgba(34,211,238,0), inset 0 0 30px rgba(34,211,238,0.18); }
}

.btn-uplink:hover {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.25) 0%, rgba(34, 211, 238, 0.12) 100%);
    color: #fff;
}

.btn-uplink.is-encrypting {
    color: var(--rf-warn);
    border-color: var(--rf-warn);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0.08) 100%);
    cursor: wait;
}

.btn-uplink.is-success {
    color: var(--rf-ok);
    border-color: var(--rf-ok);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.18) 0%, rgba(52, 211, 153, 0.08) 100%);
    animation: none;
    box-shadow: 0 0 30px rgba(52, 211, 153, 0.25);
}

.btn-uplink.is-failed {
    color: var(--rf-warn);
    border-color: var(--rf-warn);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0.08) 100%);
    animation: none;
}

.btn-uplink .uplink-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: none;
}

.btn-uplink.is-encrypting .uplink-spinner { display: inline-block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   EDU CARDS
   ============================================================ */
.edu-card {
    border-left: 2px solid var(--rf-primary);
    background: var(--surface);
    border-radius: 0 12px 12px 0;
    transition: border-left-color .3s ease, transform .3s ease;
}

.edu-card:hover {
    border-left-color: #67e8f9;
    transform: translateX(4px);
}

/* ============================================================
   SIGNAL HANDSHAKE  —  hero → about transition band
   ============================================================ */
.signal-handshake {
    position: relative;
    width: 100%;
    height: 240px;
    margin-top: -2rem;
    margin-bottom: -1rem;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
}

/* faint engineering-grid backdrop */
.sh-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(34, 211, 238, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(34, 211, 238, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
}

/* slow sweeping cyan scan-line */
.sh-scanline {
    position: absolute; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(34, 211, 238, 0.55), transparent);
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.55);
    top: 0;
    animation: sh-scan 5.6s ease-in-out infinite;
    opacity: 0;
}
@keyframes sh-scan {
    0%   { top: 8%;  opacity: 0; }
    20%  { opacity: 0.8; }
    80%  { opacity: 0.8; }
    100% { top: 92%; opacity: 0; }
}

/* telemetry chips row */
.sh-telemetry {
    position: absolute; top: 28px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 1.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 3;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .6s ease, transform .6s ease;
}
.signal-handshake.is-on .sh-telemetry { opacity: 1; transform: translateY(0); }

.sh-chip {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.32rem 0.65rem;
    border: 1px solid rgba(34, 211, 238, 0.25);
    background: rgba(12, 14, 20, 0.65);
    backdrop-filter: blur(4px);
    border-radius: 999px;
    color: var(--text-3);
}
.sh-chip .sh-k { color: rgba(255, 255, 255, 0.55); font-size: 0.6rem; }
.sh-chip .sh-v { color: var(--rf-primary); font-variant-numeric: tabular-nums; }
.sh-chip .sh-u { color: rgba(255, 255, 255, 0.35); font-size: 0.6rem; }

.sh-lock {
    position: relative;
    padding-left: 0.85rem !important;
    color: var(--rf-warn) !important;
}
.sh-lock::before {
    content: '';
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--rf-warn);
    box-shadow: 0 0 8px var(--rf-warn);
    animation: sh-lock-pulse 1.4s ease-in-out infinite;
}
@keyframes sh-lock-pulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50%      { opacity: 0.4; transform: translateY(-50%) scale(0.8); }
}

/* the oscilloscope SVG */
.sh-wave {
    position: absolute;
    top: 50%; left: 0; right: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 120px;
    z-index: 2;
}
.sh-wave-path {
    stroke-dasharray: var(--sh-len, 2400);
    stroke-dashoffset: var(--sh-len, 2400);
    transition: stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1);
}
.signal-handshake.is-on .sh-wave-path { stroke-dashoffset: 0; }

.sh-wave-ghost {
    transform: translateY(-3px);
    animation: sh-ghost-shift 6s ease-in-out infinite;
    opacity: 0;
}
.signal-handshake.is-on .sh-wave-ghost { opacity: 1; }
@keyframes sh-ghost-shift {
    0%, 100% { transform: translateY(-3px); }
    50%      { transform: translateY(3px); }
}

.sh-playhead, .sh-playhead-ring {
    opacity: 0;
    transition: opacity .5s ease;
}
.signal-handshake.is-on .sh-playhead { opacity: 1; }
.signal-handshake.is-on .sh-playhead-ring {
    opacity: 0.7;
    animation: sh-ring-pulse 2s ease-out infinite;
}
@keyframes sh-ring-pulse {
    0%   { r: 5;  opacity: 0.8; }
    100% { r: 22; opacity: 0;   }
}

/* center status pill */
.sh-status {
    position: absolute;
    bottom: 36px; left: 0; right: 0;
    display: flex; justify-content: center; align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rf-primary);
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
    z-index: 3;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .8s ease .4s, transform .8s ease .4s;
}
.signal-handshake.is-on .sh-status { opacity: 1; transform: translateY(0); }
.sh-bracket { color: rgba(34, 211, 238, 0.45); font-weight: 600; }
.sh-status-text { font-weight: 600; }

/* spectrum analyzer floor */
.sh-spectrum {
    position: absolute;
    bottom: 8px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 4px;
    width: min(640px, 90%);
    height: 14px;
    align-items: flex-end;
    z-index: 2;
    opacity: 0;
    transition: opacity .8s ease .6s;
}
.signal-handshake.is-on .sh-spectrum { opacity: 1; }
.sh-spectrum i {
    flex: 1;
    background: linear-gradient(to top, var(--rf-primary), rgba(34, 211, 238, 0.35) 60%, var(--rf-warn) 100%);
    border-radius: 1px;
    height: 30%;
    animation: sh-bar 1.2s ease-in-out infinite;
    transform-origin: bottom;
}
.sh-spectrum i:nth-child(2n)   { animation-delay: 0.10s; animation-duration: 1.05s; }
.sh-spectrum i:nth-child(3n)   { animation-delay: 0.22s; animation-duration: 0.95s; }
.sh-spectrum i:nth-child(4n)   { animation-delay: 0.35s; animation-duration: 1.35s; }
.sh-spectrum i:nth-child(5n)   { animation-delay: 0.48s; animation-duration: 1.10s; }
.sh-spectrum i:nth-child(7n)   { animation-delay: 0.62s; animation-duration: 0.85s; }
@keyframes sh-bar {
    0%, 100% { transform: scaleY(0.25); }
    35%      { transform: scaleY(1); }
    65%      { transform: scaleY(0.55); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .signal-trace { display: none; }
    .radar-sweep, .spectrum-bars { display: none; }
    .sh-scanline, .sh-spectrum, .sh-playhead-ring, .sh-wave-ghost { display: none; }
    .signal-handshake .sh-wave-path { stroke-dashoffset: 0 !important; transition: none !important; }
    .signal-handshake .sh-telemetry,
    .signal-handshake .sh-status,
    .signal-handshake .sh-playhead { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
    .module-strip { font-size: 0.55rem; padding: 0.4rem 0.65rem; margin: -1.5rem -1.5rem 1rem -1.5rem; }
    .spectrum-bars { display: none; }
    .frequency-readout { font-size: 0.6rem; bottom: 0.75rem; right: 0.75rem; }

    .signal-handshake { height: 200px; }
    .sh-telemetry { gap: 0.5rem; flex-wrap: wrap; padding: 0 0.5rem; font-size: 0.55rem; }
    .sh-chip { padding: 0.25rem 0.5rem; }
    .sh-chip .sh-k, .sh-chip .sh-u { font-size: 0.5rem; }
    .sh-status { font-size: 0.62rem; letter-spacing: 0.12em; padding: 0 0.5rem; bottom: 30px; }
    .sh-spectrum { width: 80%; height: 10px; }
}

/* ============================================================
   OPERATOR CONSOLE — admin CRUD UI
   ============================================================ */
.console-body { background: var(--bg); }

.cn-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.cn-callsign {
    color: var(--rf-primary);
    margin-left: 0.4rem;
}
.cn-flash {
    transition: opacity .6s ease, transform .6s ease;
    margin-bottom: 1rem;
}
.cn-flash.cn-flash-fade { opacity: 0; transform: translateY(-6px); }

.cn-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .cn-layout { grid-template-columns: 240px 1fr; align-items: start; }
}

/* Sidebar */
.cn-sidebar {
    position: sticky;
    top: 84px;
    align-self: start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.6rem;
    z-index: 20;
}
.cn-tabs { display: flex; flex-direction: column; gap: 0.25rem; }
.cn-tab {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 7px;
    color: var(--text-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background .2s, color .2s;
    border: 1px solid transparent;
}
.cn-tab:hover { background: rgba(34, 211, 238, 0.05); color: var(--rf-primary); }
.cn-tab.is-active {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(34, 211, 238, 0.04));
    color: var(--rf-primary);
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: inset 2px 0 0 var(--rf-primary);
}
.cn-tab-id    { font-size: 0.55rem; color: var(--text-4); letter-spacing: 0.18em; }
.cn-tab.is-active .cn-tab-id { color: var(--rf-primary); }
.cn-tab-label { color: inherit; font-size: 0.7rem; }
.cn-tab-count {
    color: var(--text-4);
    font-size: 0.55rem;
    padding: 0.12rem 0.45rem;
    background: rgba(5, 6, 10, 0.6);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.cn-tab.is-active .cn-tab-count { color: var(--rf-primary); border-color: rgba(34, 211, 238, 0.4); }

.cn-help {
    margin-top: 0.85rem;
    padding: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    line-height: 1.55;
    color: var(--text-3);
    background: rgba(34, 211, 238, 0.025);
    border: 1px solid var(--border);
    border-radius: 7px;
    border-left: 2px solid var(--rf-secondary);
}
.cn-help strong { color: var(--rf-primary); }

/* Content panels */
.cn-content { display: flex; flex-direction: column; gap: 1.5rem; }

.cn-panel {
    scroll-margin-top: 90px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.cn-panel-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(34, 211, 238, 0.025);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.cn-panel-head .th-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--rf-primary);
    box-shadow: 0 0 8px var(--rf-primary);
    animation: pulse-dot 1.8s ease-in-out infinite;
    flex: 0 0 auto;
}
.cn-panel-head .th-title { color: var(--rf-primary); flex: 1 1 auto; letter-spacing: 0.08em; }
.cn-panel-head .th-meta  { color: var(--text-4); font-size: 0.6rem; }

.cn-panel-body { padding: 1.1rem 1.1rem 1.4rem; }

.cn-sub-head {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    color: var(--text-3);
    text-transform: uppercase;
    margin: 1.4rem 0 0.7rem;
    display: flex; align-items: center; gap: 0.55rem;
}
.cn-sub-head:first-child { margin-top: 0; }
.cn-sub-head::after {
    content: '';
    flex: 1 1 auto; height: 1px;
    background: linear-gradient(to right, rgba(34, 211, 238, 0.18), transparent 70%);
}

.cn-empty {
    text-align: center;
    color: var(--text-4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 1.5rem 0;
}

/* Row layout — display + edit toggle + delete */
.cn-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.85rem;
    align-items: start;
    padding: 0.85rem 0;
    border-bottom: 1px dashed rgba(31, 36, 48, 0.7);
}
.cn-row:last-of-type { border-bottom: none; }
.cn-row-main { min-width: 0; }
.cn-row-title {
    color: var(--text-1);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.35;
}
.cn-row-sub { color: var(--rf-primary); font-weight: 400; font-size: 0.78rem; }
.cn-row-desc {
    color: var(--text-2);
    font-size: 0.78rem;
    line-height: 1.5;
    margin-top: 0.2rem;
    word-break: break-word;
}
.cn-row-desc-2 { color: var(--text-3); }
.cn-row-meta {
    margin-top: 0.4rem;
    display: flex; flex-wrap: wrap; gap: 0.45rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
    align-items: center;
}
.cn-row-meta a { color: var(--rf-primary); }
.cn-row-meta a:hover { color: #67e8f9; }
.cn-row-bullets {
    margin-top: 0.45rem;
    padding-left: 1.1rem;
    color: var(--text-2);
    font-size: 0.75rem;
    line-height: 1.55;
}
.cn-row-bullets li { margin-bottom: 0.18rem; list-style: disc; }
.cn-row-bullets li.cn-row-more { color: var(--text-4); font-style: italic; list-style: none; margin-left: -1rem; }
.cn-row-message {
    margin-top: 0.4rem;
    padding: 0.55rem 0.7rem;
    background: rgba(5, 6, 10, 0.5);
    border-left: 2px solid var(--rf-secondary);
    color: var(--text-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 0 6px 6px 0;
}

.cn-row-delete { align-self: start; }

/* Inline forms via <details> */
.cn-edit { align-self: start; }
.cn-edit summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.cn-edit summary::-webkit-details-marker { display: none; }
.cn-edit[open] summary { background: var(--rf-primary); color: var(--bg); border-color: var(--rf-primary); }
.cn-edit[open] {
    grid-column: 1 / -1;
    width: 100%;
}
.cn-edit[open] .cn-form-edit {
    margin-top: 0.85rem;
    padding: 1rem;
    background: rgba(5, 6, 10, 0.4);
    border: 1px dashed var(--border);
    border-radius: 8px;
}

/* When details opens, the row layout collapses — give it a clean wrap */
.cn-row:has(.cn-edit[open]) { grid-template-columns: 1fr; }
.cn-row:has(.cn-edit[open]) .cn-row-delete { justify-self: end; }

/* Add new */
.cn-add {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    background: rgba(34, 211, 238, 0.025);
    border: 1px dashed rgba(34, 211, 238, 0.25);
    border-radius: 8px;
}
.cn-add[open] { padding-bottom: 1rem; }
.cn-add-summary {
    cursor: pointer;
    list-style: none;
    color: var(--rf-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.cn-add-summary::-webkit-details-marker { display: none; }
.cn-add[open] .cn-add-summary { color: var(--rf-warn); margin-bottom: 0.85rem; }

/* Form grid */
.cn-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}
@media (min-width: 768px) {
    .cn-form-grid { grid-template-columns: 1fr 1fr; }
    .cn-form-grid > textarea, .cn-form-grid > .cn-field:has(textarea), .cn-form-grid > .cn-actions { grid-column: 1 / -1; }
}

.cn-field { display: flex; flex-direction: column; gap: 0.3rem; }
.cn-field-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    color: var(--text-3);
    text-transform: uppercase;
}
.cn-input {
    width: 100%;
    background: rgba(5, 6, 10, 0.6);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    color: var(--text-1);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    resize: vertical;
}
.cn-input:focus {
    border-color: var(--rf-primary);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15), inset 0 0 14px rgba(34, 211, 238, 0.04);
    background: rgba(5, 6, 10, 0.85);
}
.cn-input[data-mono="true"] { font-size: 0.78rem; line-height: 1.5; }

.cn-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.cn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--rf-primary);
    color: var(--rf-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
}
.cn-btn:hover {
    background: var(--rf-primary);
    color: var(--bg);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
}
.cn-btn-mini {
    padding: 0.3rem 0.7rem;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
}
.cn-btn-ok {
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.5);
    color: var(--rf-ok);
}
.cn-btn-ok:hover {
    background: var(--rf-ok);
    color: var(--bg);
    box-shadow: 0 0 18px rgba(52, 211, 153, 0.4);
}
.cn-btn-no {
    background: rgba(248, 113, 113, 0.05);
    border-color: rgba(248, 113, 113, 0.4);
    color: var(--rf-danger);
}
.cn-btn-no:hover {
    background: var(--rf-danger);
    color: var(--bg);
    box-shadow: 0 0 16px rgba(248, 113, 113, 0.4);
}

/* Status tags */
.cn-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid;
}
.cn-tag::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.85;
}
.cn-tag-active     { color: var(--rf-ok);     border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.06); }
.cn-tag-published  { color: var(--rf-ok);     border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.06); }
.cn-tag-inactive   { color: var(--text-3);    border-color: rgba(102, 102, 102, 0.4); background: rgba(102, 102, 102, 0.05); }
.cn-tag-archived   { color: var(--text-3);    border-color: rgba(102, 102, 102, 0.4); background: rgba(102, 102, 102, 0.05); }
.cn-tag-draft      { color: var(--rf-warn);   border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.06); }

/* Skill pill (deletable chips) */
.cn-skill-group { margin-bottom: 1rem; }
.cn-skill-cat {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    color: var(--text-3);
    margin-bottom: 0.4rem;
}
.cn-skill-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cn-skill-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    background: rgba(5, 6, 10, 0.6);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    transition: border-color .2s, color .2s;
}
.cn-skill-pill:hover { border-color: rgba(34, 211, 238, 0.4); color: var(--rf-primary); }
.cn-skill-pill button {
    background: transparent;
    border: none;
    color: var(--rf-danger);
    cursor: pointer;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity .2s, transform .2s;
}
.cn-skill-pill button:hover { opacity: 1; transform: scale(1.15); }
.cn-skill-add-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }

.cn-self {
    color: var(--text-4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ============================================================
   RF TOOLS PAGE — calculator suite
   ============================================================ */

/* Tab nav */
.tools-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 2rem 0 2.5rem;
    padding: 0.45rem;
    background: rgba(12, 14, 20, 0.6);
    border: 1px solid var(--border);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    position: sticky;
    top: 80px;
    z-index: 30;
}
.tools-tab {
    flex: 1 1 auto;
    padding: 0.55rem 1rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--text-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
    text-align: center;
}
.tools-tab:hover { color: var(--rf-primary); background: rgba(34, 211, 238, 0.04); }
.tools-tab.is-active {
    color: var(--bg);
    background: var(--rf-primary);
    border-color: var(--rf-primary);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
}

/* Tool grid + card */
.tool-section { display: none; }
.tool-section.is-active { display: block; }

.tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .tool-grid { grid-template-columns: 1fr 1fr; }
    .tool-grid .tool-card.full { grid-column: 1 / -1; }
}

.tool-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.tool-card:hover {
    border-color: rgba(34, 211, 238, 0.2);
    box-shadow: 0 0 28px rgba(34, 211, 238, 0.05);
}

.tool-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(34, 211, 238, 0.025);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.tool-card-head .tc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rf-primary);
    box-shadow: 0 0 8px var(--rf-primary);
}
.tool-card-head .tc-id { color: var(--rf-primary); flex: 0 0 auto; }
.tool-card-head .tc-title { color: var(--text-1); flex: 1 1 auto; letter-spacing: 0.08em; }
.tool-card-head .tc-meta { color: var(--text-4); font-size: 0.6rem; }

.tool-card-body { padding: 1.1rem; }

.tool-tagline {
    color: var(--text-2);
    font-size: 0.78rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.tool-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}
.tool-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}
.tool-row-grid .tool-row { margin-bottom: 0; }

.tool-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.tool-label .lbl-unit { color: var(--text-4); font-size: 0.55rem; }

.tool-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}
.tool-input {
    flex: 1 1 auto;
    background: rgba(5, 6, 10, 0.6);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    color: var(--text-1);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    min-width: 0;
    width: 100%;
}
.tool-input:focus {
    border-color: var(--rf-primary);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15), inset 0 0 14px rgba(34, 211, 238, 0.04);
    background: rgba(5, 6, 10, 0.85);
}
.tool-input.is-output {
    cursor: not-allowed;
    color: var(--rf-primary);
    background: rgba(34, 211, 238, 0.04);
    border-color: rgba(34, 211, 238, 0.18);
}

.tool-input-suffix {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 0.7rem;
    margin-left: 0.4rem;
    background: rgba(34, 211, 238, 0.06);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--rf-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}

/* Select inline with input */
.tool-input-select {
    flex: 0 0 auto;
    width: auto;
    padding: 0.55rem 0.6rem;
    margin-left: 0.4rem;
    background: rgba(34, 211, 238, 0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--rf-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    outline: none;
}
.tool-input-select:focus { border-color: var(--rf-primary); }

/* Pill toggle row */
.tool-pills {
    display: inline-flex;
    gap: 0;
    padding: 0.18rem;
    background: rgba(5, 6, 10, 0.6);
    border: 1px solid var(--border);
    border-radius: 7px;
    margin-bottom: 0.85rem;
}
.tool-pill {
    padding: 0.3rem 0.7rem;
    background: transparent;
    border: none;
    color: var(--text-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 5px;
    transition: background .2s, color .2s;
}
.tool-pill:hover { color: var(--rf-primary); }
.tool-pill.is-active {
    color: var(--bg);
    background: var(--rf-primary);
}

/* Output banner */
.tool-output-banner {
    margin-top: 0.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(34, 211, 238, 0.25);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.06), rgba(34, 211, 238, 0.015));
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.tool-output-banner .out-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3);
}
.tool-output-banner .out-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--rf-primary);
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    word-break: break-all;
}
.tool-output-banner .out-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-2);
    letter-spacing: 0.08em;
}

/* Multi-output stack */
.tool-output-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 0.7rem;
}
.tool-output-stack .out-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0.75rem;
    background: rgba(5, 6, 10, 0.5);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
}
.tool-output-stack .out-line .ol-key {
    color: var(--text-3);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.tool-output-stack .out-line .ol-val {
    color: var(--rf-primary);
    font-size: 0.95rem;
    font-weight: 600;
}

.tool-eq {
    margin-top: 0.85rem;
    padding: 0.6rem 0.8rem;
    border-left: 2px solid var(--rf-secondary);
    background: rgba(167, 139, 250, 0.05);
    color: var(--text-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    border-radius: 0 6px 6px 0;
    word-break: break-word;
}
.tool-eq strong { color: var(--rf-secondary); font-weight: 600; }

.tool-note {
    margin-top: 0.7rem;
    color: var(--text-3);
    font-size: 0.7rem;
    line-height: 1.5;
    font-style: italic;
}
.tool-note a { color: var(--rf-primary); }

/* Comparison table */
.tool-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}
.tool-table thead th {
    text-align: left;
    padding: 0.5rem 0.6rem;
    color: var(--text-3);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.55rem;
    border-bottom: 1px solid var(--border);
    background: rgba(34, 211, 238, 0.025);
}
.tool-table thead th.r-fcc  { color: var(--rf-primary); }
.tool-table thead th.r-ised { color: var(--rf-secondary); }
.tool-table tbody td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid rgba(31, 36, 48, 0.6);
}
.tool-table tbody tr:last-child td { border-bottom: none; }
.tool-table tbody td.t-key { color: var(--text-2); }
.tool-table tbody td.t-fcc  { color: var(--rf-primary); font-weight: 600; }
.tool-table tbody td.t-ised { color: var(--rf-secondary); font-weight: 600; }

/* Tools hero */
.tools-hero {
    text-align: left;
    padding-bottom: 1.5rem;
}

/* Landing-page tools teaser */
.tools-teaser {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.04) 0%, rgba(167, 139, 250, 0.03) 100%);
    position: relative;
    overflow: hidden;
}
.tools-teaser::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(34, 211, 238, 0.08), transparent 50%);
    pointer-events: none;
}
.tools-teaser-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    position: relative;
}
@media (min-width: 768px) {
    .tools-teaser-grid { grid-template-columns: 1.4fr 1fr; align-items: center; gap: 2.5rem; }
}
.tools-teaser-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}
.tools-teaser-pill {
    padding: 0.5rem 0.75rem;
    background: rgba(5, 6, 10, 0.5);
    border: 1px solid var(--border);
    border-radius: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rf-primary);
    transition: background .2s, border-color .2s, transform .2s;
    text-align: center;
}
.tools-teaser-pill:hover {
    background: rgba(34, 211, 238, 0.08);
    border-color: rgba(34, 211, 238, 0.4);
    transform: translateY(-2px);
}

/* ============================================================
   CERTIFICATIONS — credential cards
   ============================================================ */
.cert-card {
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    border-left: 2px solid var(--rf-ok);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}

.cert-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.04) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}

.cert-card:hover {
    border-left-color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.25);
    transform: translateX(2px);
    box-shadow: 0 0 24px rgba(52, 211, 153, 0.07);
}
.cert-card:hover::before { opacity: 1; }

.cert-card-glyph {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(52, 211, 153, 0.08);
    color: var(--rf-ok);
    border: 1px solid rgba(52, 211, 153, 0.25);
    margin-top: 2px;
}
.cert-card-glyph svg { width: 18px; height: 18px; }

.cert-card-body { flex: 1 1 auto; min-width: 0; }

.cert-card-title {
    color: var(--text-1);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.cert-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}
.cert-card-meta .cert-issuer { color: var(--rf-ok); }
.cert-card-meta .cert-year   { color: var(--text-2); }
.cert-card-meta .cert-id     { color: var(--text-3); }
.cert-card-meta .cert-dot    { color: var(--text-4); }

.cert-card-desc {
    margin-top: 0.55rem;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-2);
}

.cert-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rf-primary);
    transition: color .2s, transform .2s;
}
.cert-card-link:hover { color: #67e8f9; transform: translateX(2px); }

/* Skill group labels */
.skill-group-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    color: var(--text-3);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.skill-group-label::before {
    content: '';
    width: 6px;
    height: 1px;
    background: var(--rf-warn);
    opacity: 0.7;
}
.skill-group-label::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(to right, rgba(251, 191, 36, 0.18), transparent 70%);
}

/* ============================================================
   AUTH SCREENS — alerts, tables, tags, mini buttons, terminal hdr spans
   ============================================================ */

/* Terminal-frame body padding for auth pages (the form sections) */
.terminal-frame > .auth-alert,
.terminal-frame > form,
.terminal-frame > p,
.terminal-frame > dl,
.terminal-frame > .overflow-x-auto {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.terminal-frame > form,
.terminal-frame > dl,
.terminal-frame > p:last-child {
    padding-bottom: 1.4rem;
}

.terminal-frame > .overflow-x-auto {
    padding-bottom: 0.75rem;
}

/* Header inner spans (alt structure used by auth pages) */
.terminal-header .th-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rf-primary);
    box-shadow: 0 0 8px var(--rf-primary);
    animation: pulse-dot 1.8s ease-in-out infinite;
    flex: 0 0 auto;
    margin-right: 0.55rem;
}
.terminal-header .th-title {
    color: var(--rf-primary);
    flex: 1 1 auto;
}
.terminal-header .th-meta {
    color: var(--text-4);
    font-size: 0.6rem;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 8px var(--rf-primary); opacity: 1; }
    50%      { box-shadow: 0 0 16px var(--rf-primary); opacity: 0.65; }
}

/* Alerts (success / error) */
.auth-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 1.25rem 0.5rem;
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    border: 1px solid;
}
.terminal-frame > .auth-alert { padding-left: 0.9rem; padding-right: 0.9rem; }

.auth-alert .aa-bracket {
    color: currentColor;
    opacity: 0.55;
    font-weight: 600;
}
.auth-alert .aa-text {
    flex: 1 1 auto;
    color: currentColor;
}

.auth-alert--err {
    color: var(--rf-warn);
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: inset 0 0 18px rgba(251, 191, 36, 0.06);
}
.auth-alert--ok {
    color: var(--rf-ok);
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.35);
    box-shadow: inset 0 0 18px rgba(52, 211, 153, 0.06);
}

/* Tables (admin roster + pending queue) */
.auth-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}
.auth-table thead th {
    text-align: left;
    padding: 0.7rem 0.9rem;
    color: var(--text-3);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.6rem;
    border-bottom: 1px solid var(--border);
    background: rgba(34, 211, 238, 0.025);
    white-space: nowrap;
}
.auth-table tbody td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid rgba(31, 36, 48, 0.6);
    vertical-align: middle;
    white-space: nowrap;
}
.auth-table tbody tr:last-child td { border-bottom: none; }
.auth-table tbody tr:hover { background: rgba(34, 211, 238, 0.03); }

/* Tags (role / status badges) */
.auth-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid;
    line-height: 1;
}
.auth-tag::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}
.auth-tag--admin    { color: var(--rf-secondary); border-color: rgba(167, 139, 250, 0.35); background: rgba(167, 139, 250, 0.06); }
.auth-tag--user     { color: var(--text-2);      border-color: rgba(161, 161, 161, 0.25); background: rgba(161, 161, 161, 0.05); }
.auth-tag--approved { color: var(--rf-ok);       border-color: rgba(52, 211, 153, 0.4);  background: rgba(52, 211, 153, 0.08); }
.auth-tag--pending  { color: var(--rf-warn);     border-color: rgba(251, 191, 36, 0.4);  background: rgba(251, 191, 36, 0.08); }
.auth-tag--rejected { color: var(--rf-danger);   border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.08); }

/* Mini buttons (approve / reject in admin queue) */
.btn-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.32rem 0.7rem;
    border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
    background: transparent;
}
.btn-mini--ok {
    color: var(--rf-ok);
    border-color: rgba(52, 211, 153, 0.45);
}
.btn-mini--ok:hover {
    background: rgba(52, 211, 153, 0.12);
    border-color: var(--rf-ok);
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.3);
}
.btn-mini--no {
    color: var(--rf-warn);
    border-color: rgba(251, 191, 36, 0.45);
}
.btn-mini--no:hover {
    background: rgba(251, 191, 36, 0.1);
    border-color: var(--rf-warn);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}

/* RF telemetry tokens used by account.php inline highlights */
.text-rf-primary { color: var(--rf-primary); }
.text-rf-ok      { color: var(--rf-ok); }
.text-rf-warn    { color: var(--rf-warn); }

/* ============================================================
   BG-FIELD — global telemetry canvas (drifting cyan/violet field)
   ============================================================ */
canvas#bg-field {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
    /* Soft mask so the field fades at the very top + bottom edges */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* Make sure body content sits above the bg field */
body > main, body > nav, body > footer, body > #mobile-menu, body > .ambient-glow {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    canvas#bg-field { opacity: 0.55; }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--rf-primary-dim), var(--border-hi));
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--rf-primary); }