/* ============================================================
   DBN SYSTEM — Global Design System
   Drive By Numbers Trading Operating System
   Version 2.0.0 — "Trading Environment" Visual Identity
   ============================================================ */

/* ==================== DESIGN TOKENS ==================== */
/* LOCKED — Canonical values. Do NOT override per-page.
   All pages inherit these via dbn-system.css.
   Short-name aliases (--bg, --green, etc.) defined below
   for backward-compatible page CSS. */
:root {
    /* ── Base — Deep Graphite ── */
    --sys-bg:          #0c0e13;
    --sys-bg-elevated: #111318;
    --sys-bg-surface:  #16181f;
    --sys-bg-panel:    rgba(18, 21, 28, 0.75);
    --sys-bg-glass:    rgba(18, 21, 28, 0.5);
    --sys-bg-hover:    rgba(0, 217, 159, 0.04);

    /* ── Borders ── */
    --sys-border:       rgba(255, 255, 255, 0.06);
    --sys-border-subtle:rgba(255, 255, 255, 0.03);
    --sys-border-active:rgba(0, 217, 159, 0.2);
    --sys-border-glow:  rgba(0, 217, 159, 0.3);

    /* ── Primary — DBN Green (canonical: #00d99f) ── */
    --sys-green:       #00d99f;
    --sys-green-light: #2ee8b5;
    --sys-green-dim:   #00a878;
    --sys-green-glow:  rgba(0, 217, 159, 0.35);
    --sys-green-bg:    rgba(0, 217, 159, 0.06);

    /* ── Blue — Info / Accent (canonical: #4ea1ff) ── */
    --sys-blue:        #4ea1ff;
    --sys-blue-light:  #74b5ff;
    --sys-blue-dim:    #2962ff;
    --sys-blue-glow:   rgba(78, 161, 255, 0.25);
    --sys-blue-bg:     rgba(78, 161, 255, 0.06);

    /* ── Semantic — Trading states ── */
    --sys-red:         #ff3b5c;
    --sys-red-light:   #ff6b84;
    --sys-red-dim:     #cc1e3e;
    --sys-red-bg:      rgba(255, 59, 92, 0.06);
    --sys-amber:       #ffb547;
    --sys-amber-light: #ffc870;
    --sys-amber-bg:    rgba(255, 181, 71, 0.06);
    --sys-purple:      #9d6cff;
    --sys-purple-light:#b794ff;
    --sys-purple-bg:   rgba(157, 108, 255, 0.06);
    --sys-cyan:        #22d3ee;
    --sys-cyan-bg:     rgba(34, 211, 238, 0.06);

    /* ── Gold — Premium / Value accent ── */
    --sys-gold:        #c9a84c;
    --sys-gold-light:  #dbbf6a;
    --sys-gold-bg:     rgba(201, 168, 76, 0.06);

    /* ── Text — Neutral scale ── */
    --sys-text:           #e2e6ef;
    --sys-text-primary:   #e2e6ef;
    --sys-text-secondary: #8b92a4;
    --sys-text-muted:     #8b92a4;
    --sys-text-dim:       #5a6478;
    --sys-text-bright:    #f3f4f6;

    /* ── Typography ── */
    --sys-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sys-font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* ── Spacing scale (4px base) ── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

    /* ── Radius ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* ── Shadows (deeper, more material) ── */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md:  0 4px 14px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
    --shadow-lg:  0 10px 40px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25);
    --shadow-glow:0 0 24px rgba(45,212,168,0.12);

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast: 150ms;
    --t-normal: 250ms;
    --t-slow: 400ms;

    /* ── Z-index scale ── */
    --z-base: 1;
    --z-panel: 10;
    --z-sticky: 100;
    --z-nav: 1000;
    --z-modal: 2000;
    --z-overlay: 3000;
}


/* ── Short-name aliases — backward compatibility ──
   Pages reference --bg, --green, --red etc. in their inline CSS.
   These aliases point to the canonical --sys-* tokens so all pages
   inherit consistent values. Pages MUST NOT redefine these. */
:root {
    --bg:             var(--sys-bg);
    --bg-2:           var(--sys-bg-elevated);
    --bg-3:           var(--sys-bg-surface);
    --card:           var(--sys-bg-panel);
    --surface:        var(--sys-bg-surface);
    --panel:          var(--sys-bg-panel);
    --border:         var(--sys-border);
    --green:          var(--sys-green);
    --red:            var(--sys-red);
    --blue:           var(--sys-blue);
    --purple:         var(--sys-purple);
    --amber:          var(--sys-amber);
    --yellow:         var(--sys-amber);
    --cyan:           var(--sys-cyan);
    --text:           var(--sys-text);
    --text-primary:   var(--sys-text);
    --text-secondary: var(--sys-text-muted);
    --muted:          var(--sys-text-muted);
    --dim:            var(--sys-text-dim);
    --text-dim:       var(--sys-text-dim);
    --accent:         var(--sys-green);
    --accent-2:       var(--sys-green-dim);
    --font:           var(--sys-font);
    --mono:           var(--sys-font-mono);
    /* ── Extended aliases (stripped from pages, referenced in CSS) ── */
    --bg-1:           var(--sys-bg-elevated);
    --bg-secondary:   var(--sys-bg-elevated);
    --bg-tertiary:    var(--sys-bg-surface);
    --text-2:         var(--sys-text-muted);
    --text-3:         var(--sys-text-dim);
    --text2:          var(--sys-text-muted);
    --text3:          var(--sys-text-dim);
    --surface-2:      rgba(18, 22, 30, 0.7);
    --surface-3:      rgba(26, 32, 48, 0.6);
    --text-1:         var(--sys-text);
    --green-deep:     var(--sys-green-dim);
    --red-deep:       var(--sys-red-dim);
    --green-glow:     var(--sys-green-glow);
    --accent-soft:    rgba(0, 217, 159, 0.08);
    --accent-hover:   rgba(0, 217, 159, 0.12);
    --accent-glow:    var(--sys-green-glow);
    --accent2:        var(--sys-green-dim);
    --border-2:       rgba(255, 255, 255, 0.08);
    --border2:        rgba(255, 255, 255, 0.08);
    --border-hi:      rgba(255, 255, 255, 0.12);
    --line:           var(--sys-border);
    --line-2:         rgba(255, 255, 255, 0.03);
    --card2:          rgba(22, 26, 36, 0.7);
    --bg2:            var(--sys-bg-elevated);
    --bg3:            var(--sys-bg-surface);
    --bg4:            rgba(26, 32, 48, 0.6);
    --green2:         var(--sys-green-dim);
    --green-bg:       var(--sys-green-bg);
    --green-border:   rgba(0, 217, 159, 0.2);
    --red-bg:         var(--sys-red-bg);
    --red-border:     rgba(255, 59, 92, 0.2);
    --red-glow:       rgba(255, 59, 92, 0.35);
    --yellow-glow:    rgba(255, 181, 71, 0.35);
    --blue-bg:        var(--sys-blue-bg);
    --blue-border:    rgba(78, 161, 255, 0.2);
    --purple-bg:      var(--sys-purple-bg);
    --purple-border:  rgba(157, 108, 255, 0.2);
    --amber-bg:       var(--sys-amber-bg);
    --amber-border:   rgba(255, 181, 71, 0.2);
    --cyan-bg:        var(--sys-cyan-bg);
    --muted-2:        var(--sys-text-dim);
    /* Auth page tokens */
    --ink:            var(--sys-text-bright);
    --mute:           var(--sys-text-dim);
    --green-d:        var(--sys-green-dim);
    --panel-2:        rgba(22, 26, 36, 0.7);
    /* ── Legacy DBN tokens (duplicated on many pages) ── */
    --dbn-bg:         var(--sys-bg);
    --dbn-surface-1:  var(--sys-bg-elevated);
    --dbn-surface-2:  var(--sys-bg-surface);
    --dbn-surface-3:  rgba(26, 32, 48, 1);
    --dbn-green:      var(--sys-green);
    --dbn-blue:       var(--sys-blue);
    --dbn-red:        var(--sys-red);
    --dbn-purple:     var(--sys-purple);
    --dbn-amber:      var(--sys-amber);
    --dbn-text:       var(--sys-text-bright);
    --dbn-text-sec:   var(--sys-text-muted);
    --dbn-text-muted: var(--sys-text-dim);
    --dbn-border:     var(--sys-border);
    --dbn-font:       var(--sys-font);
    --dbn-mono:       var(--sys-font-mono);
}


/* ==================== RESET & BASE ==================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--sys-font);
    background: var(--sys-bg);
    color: var(--sys-text);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

::selection {
    background: rgba(45, 212, 168, 0.25);
    color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }


/* ==================== LAYOUT ==================== */
.sys-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--sp-6);
}

.sys-container--wide  { max-width: 1440px; }
.sys-container--narrow { max-width: 860px; }

.sys-grid {
    display: grid;
    gap: var(--sp-6);
}

.sys-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sys-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sys-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .sys-grid--3, .sys-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .sys-grid--2, .sys-grid--3, .sys-grid--4 { grid-template-columns: 1fr; }
    .sys-container { padding: 0 var(--sp-4); }
}


/* ==================== TYPOGRAPHY ==================== */
.sys-h1 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--sys-text-bright);
}

.sys-h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--sys-text-bright);
}

.sys-h3 {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sys-text-bright);
}

.sys-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--sys-green);
    font-family: var(--sys-font-mono);
}

.sys-body { font-size: 0.95rem; color: var(--sys-text-muted); line-height: 1.65; }
.sys-small { font-size: 0.82rem; color: var(--sys-text-dim); }
.sys-mono { font-family: var(--sys-font-mono); }
.sys-data { font-family: var(--sys-font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }

.sys-gradient-text {
    background: linear-gradient(135deg, var(--sys-green) 0%, var(--sys-green-light) 50%, var(--sys-blue-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ==================== NAVIGATION — SYSTEM BAR ==================== */
#dbn-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--z-nav);
    height: 52px;
    background: rgba(12, 14, 19, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--sys-border);
    transition: background var(--t-normal) var(--ease-out),
                border-color var(--t-normal) var(--ease-out),
                box-shadow var(--t-normal) var(--ease-out);
}

#dbn-nav.scrolled {
    background: rgba(12, 14, 19, 0.94);
    border-bottom-color: var(--sys-border-active);
    box-shadow: 0 1px 20px rgba(0,0,0,0.5);
}

.dbn-nav-inner {
    max-width: 1440px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 var(--sp-6);
    gap: var(--sp-6);
}

.dbn-logo {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
    flex-shrink: 0;
}

.dbn-logo span {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--sys-text-bright);
    letter-spacing: -0.3px;
}

.dbn-nav-links {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    gap: 2px;
    margin-left: auto;
}

.dbn-nav-links a {
    display: block;
    padding: 6px 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sys-text-muted);
    border-radius: var(--radius-sm);
    transition: color var(--t-fast), background var(--t-fast);
    white-space: nowrap;
}

.dbn-nav-links a:hover {
    color: var(--sys-text);
    background: rgba(255,255,255,0.04);
}

.dbn-nav-links a.active {
    color: var(--sys-green-light);
    background: var(--sys-green-bg);
}

.dbn-nav-auth {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: var(--sp-4);
    flex-shrink: 0;
}

.dbn-login, .dbn-nav-login {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--sys-text-muted);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: color var(--t-fast);
}
.dbn-login:hover, .dbn-nav-login:hover { color: var(--sys-text); }

.dbn-signup, .dbn-nav-signup {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sys-bg);
    background: var(--sys-green);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    transition: background var(--t-fast), transform var(--t-fast);
}
.dbn-signup:hover, .dbn-nav-signup:hover {
    background: var(--sys-green-light);
    transform: translateY(-1px);
}

/* Mobile nav */
.dbn-mob-btn {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
}
.dbn-mob-btn span {
    width: 18px;
    height: 1.5px;
    background: var(--sys-text-muted);
    border-radius: 1px;
    transition: all var(--t-fast);
}

.dbn-mob-menu {
    display: none;
    position: fixed;
    top: 52px; left: 0; right: 0; bottom: 0;
    background: rgba(12, 14, 19, 0.97);
    backdrop-filter: blur(20px);
    z-index: calc(var(--z-nav) - 1);
    padding: var(--sp-8) var(--sp-6);
    flex-direction: column;
    gap: var(--sp-2);
    overflow-y: auto;
}
.dbn-mob-menu.open { display: flex; }

.dbn-mob-menu a {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    font-size: 1rem;
    font-weight: 500;
    color: var(--sys-text-muted);
    border-radius: var(--radius-md);
    transition: all var(--t-fast);
}
.dbn-mob-menu a:hover,
.dbn-mob-menu a.active {
    color: var(--sys-green-light);
    background: var(--sys-green-bg);
}

.dbn-mob-auth {
    margin-top: auto;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--sys-border);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.dbn-mob-auth .dbn-signup {
    text-align: center;
    padding: var(--sp-3);
    font-size: 0.95rem;
}

@media (max-width: 1080px) {
    .dbn-nav-links, .dbn-nav-auth { display: none; }
    .dbn-mob-btn { display: flex; margin-left: auto; }
}


/* ==================== PANELS & SURFACES ==================== */
.sys-panel {
    background: var(--sys-bg-panel);
    border: 1px solid var(--sys-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

.sys-panel--glass {
    background: var(--sys-bg-glass);
    border-color: var(--sys-border-subtle);
}

.sys-panel--interactive {
    transition: border-color var(--t-normal) var(--ease-out),
                box-shadow var(--t-normal) var(--ease-out),
                transform var(--t-normal) var(--ease-out);
}

.sys-panel--interactive:hover {
    border-color: var(--sys-border-active);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.sys-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--sys-border);
}

.sys-panel__head-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sys-text-dim);
    font-family: var(--sys-font-mono);
}

.sys-panel__body {
    padding: var(--sp-4);
}

/* Status indicator dot */
.sys-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sys-green);
    animation: sys-pulse 2.5s ease-in-out infinite;
}

.sys-dot--amber { background: var(--sys-amber); }
.sys-dot--red   { background: var(--sys-red);   }

@keyframes sys-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,212,168,0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(45,212,168,0); }
}


/* ==================== BUTTONS ==================== */
.sys-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease-out);
    white-space: nowrap;
    text-decoration: none;
}

.sys-btn--primary {
    background: var(--sys-green);
    color: var(--sys-bg);
    box-shadow: 0 0 20px rgba(45,212,168,0.15);
}
.sys-btn--primary:hover {
    background: var(--sys-green-light);
    box-shadow: 0 0 28px rgba(45,212,168,0.25);
    transform: translateY(-1px);
}

.sys-btn--ghost {
    background: rgba(255,255,255,0.03);
    color: var(--sys-text);
    border: 1px solid var(--sys-border);
}
.sys-btn--ghost:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-1px);
}

.sys-btn--sm { padding: 6px 14px; font-size: 0.8rem; }
.sys-btn--lg { padding: 14px 28px; font-size: 0.95rem; }


/* ==================== DATA METRICS ==================== */
.sys-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sys-metric__value {
    font-family: var(--sys-font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sys-text-bright);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.sys-metric__value--green { color: var(--sys-green-light); }
.sys-metric__value--red   { color: var(--sys-red); }

.sys-metric__label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--sys-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}


/* ==================== TAGS & BADGES ==================== */
.sys-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-radius: var(--radius-full);
    font-family: var(--sys-font-mono);
}

.sys-tag--green {
    background: var(--sys-green-bg);
    color: var(--sys-green-light);
    border: 1px solid rgba(45,212,168,0.2);
}

.sys-tag--blue {
    background: var(--sys-blue-bg);
    color: var(--sys-blue-light);
    border: 1px solid rgba(99,102,241,0.2);
}

.sys-tag--amber {
    background: var(--sys-amber-bg);
    color: var(--sys-amber);
    border: 1px solid rgba(212,168,83,0.2);
}

.sys-tag--purple {
    background: var(--sys-purple-bg);
    color: var(--sys-purple);
    border: 1px solid rgba(139,92,246,0.2);
}

.sys-tag--red {
    background: var(--sys-red-bg);
    color: var(--sys-red);
    border: 1px solid rgba(255,59,92,0.2);
}

.sys-tag--cyan {
    background: var(--sys-cyan-bg);
    color: var(--sys-cyan);
    border: 1px solid rgba(34,211,238,0.2);
}


/* ==================== DIVIDERS ==================== */
.sys-divider {
    height: 1px;
    background: var(--sys-border);
    border: none;
    margin: var(--sp-8) 0;
}

.sys-divider--subtle {
    background: var(--sys-border-subtle);
}


/* ==================== IMMERSIVE ENVIRONMENT SYSTEM ==================== */
/* Layered atmosphere: ambient gradients + grain + vignette + grid.
   These fixed-position layers create the premium "trading desk" feel
   across ALL pages, matching the landing page aesthetic.            */

/* Base environment — room gradient with monitor glow simulation */
.sys-env {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120% 60% at 50% 0%, rgba(14,16,22,0.0) 0%, var(--sys-bg) 100%),
        linear-gradient(180deg, #06070a 0%, var(--sys-bg) 25%, var(--sys-bg-elevated) 60%, #07080c 100%);
}

/* Screen glow on ceiling — cool teal from monitors */
.sys-env::before {
    content: '';
    position: absolute;
    top: -8%; left: 15%; width: 70%; height: 45%;
    background: radial-gradient(ellipse 100% 80%, rgba(20,184,166,0.025) 0%, rgba(99,102,241,0.01) 50%, transparent 70%);
    filter: blur(80px);
}

/* Desk surface — warm reflection */
.sys-env::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 35%;
    background: linear-gradient(0deg, rgba(12,13,18,0.97) 0%, rgba(14,16,22,0.4) 50%, transparent 100%);
}

/* Warm ambient spill — subtle gold from desk lamp */
.sys-env-warm {
    position: fixed;
    bottom: 10%; right: 5%;
    width: 500px; height: 400px;
    background: radial-gradient(ellipse, rgba(201,168,76,0.01) 0%, transparent 60%);
    filter: blur(100px);
    pointer-events: none;
    z-index: -3;
}

/* Ambient glow orbs — floating color depth */
.sys-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: -2;
    opacity: 0.5;
    animation: sys-orb-drift 20s ease-in-out infinite alternate;
}

.sys-orb--1 {
    width: 600px; height: 600px;
    top: -15%; left: -10%;
    background: radial-gradient(circle, rgba(20,184,166,0.06) 0%, transparent 70%);
}

.sys-orb--2 {
    width: 500px; height: 500px;
    top: 30%; right: -12%;
    background: radial-gradient(circle, rgba(99,102,241,0.05) 0%, transparent 70%);
    animation-delay: -7s;
    animation-duration: 25s;
}

.sys-orb--3 {
    width: 400px; height: 400px;
    bottom: 10%; left: 20%;
    background: radial-gradient(circle, rgba(139,92,246,0.04) 0%, transparent 70%);
    animation-delay: -12s;
    animation-duration: 22s;
}

@keyframes sys-orb-drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, -20px) scale(1.08); }
}

/* Film grain — material texture */
.sys-grain {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.014;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Vignette — cinematic framing */
.sys-vignette {
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 50% 42%, transparent 25%, rgba(4,5,8,0.5) 100%);
}

/* System grid background — technical precision */
.sys-grid-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(45,212,191,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45,212,191,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0.5) 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0.5) 0%, transparent 70%);
}

/* ==================== ATMOSPHERIC PHOTOGRAPHY ==================== */
/* Real images as environmental texture — barely visible, never competing
   with content. Adds "professional / institutional" feel. */
/* When inside a section (landing page), stay absolute to fill that section.
   When placed at body level (subpages), use fixed to cover the viewport. */
.sys-atmo {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -2;
}

/* Inside a positioned parent (section on landing page), revert to absolute */
[style*="position:relative"] > .sys-atmo,
section > .sys-atmo {
    position: absolute;
    z-index: 0;
}

.sys-atmo img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.07;
    filter: saturate(0.15) brightness(0.3);
    mix-blend-mode: luminosity;
}

.sys-atmo::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, transparent 20%, var(--sys-bg) 75%),
        linear-gradient(180deg, var(--sys-bg) 0%, transparent 20%, transparent 80%, var(--sys-bg) 100%);
}

.sys-atmo--tight::after {
    background: linear-gradient(180deg, var(--sys-bg) 0%, transparent 20%, transparent 80%, var(--sys-bg) 100%);
}

.sys-atmo--warm img {
    filter: saturate(0.25) brightness(0.4) contrast(1.1) sepia(0.12);
}

/* ==================== SECTION LABEL — Pulsing Dot ==================== */
.sys-section-label {
    font-family: var(--sys-font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--sys-green);
    margin-bottom: var(--sp-4);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sys-section-label::before {
    content: '';
    width: 5px; height: 5px;
    background: var(--sys-green-light);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--sys-green-glow);
    animation: sys-pulse 3s ease-in-out infinite;
}

/* ==================== PAGE HERO (subpage headers) ==================== */
.sys-page-hero {
    position: relative;
    padding: var(--sp-16) 0 var(--sp-12);
    overflow: hidden;
}

.sys-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(45,212,191,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45,212,191,0.02) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(0,0,0,0.3) 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(0,0,0,0.3) 0%, transparent 70%);
}

.sys-page-hero__ambient {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 85%; height: 70%;
    pointer-events: none;
    background: radial-gradient(ellipse 75% 55%, rgba(20,184,166,0.02) 0%, rgba(99,102,241,0.008) 45%, transparent 70%);
    filter: blur(80px);
}

/* ==================== MONITOR COMPONENT ==================== */
.sys-monitor {
    background: var(--sys-bg-panel);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.02) inset,
        0 24px 64px rgba(0,0,0,0.5),
        0 0 0 0.5px rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sys-monitor::after {
    content: '';
    position: absolute;
    bottom: -20px; left: 12%; right: 12%; height: 20px;
    background: radial-gradient(ellipse, rgba(20,184,166,0.03) 0%, transparent 70%);
    filter: blur(8px);
    pointer-events: none;
}

.sys-monitor__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(10,11,15,0.8);
    border-bottom: 1px solid var(--sys-border);
}

.sys-monitor__dot { width: 7px; height: 7px; border-radius: 50%; }
.sys-monitor__dot--r { background: #ff5f57; }
.sys-monitor__dot--y { background: #febc2e; }
.sys-monitor__dot--g { background: #28c840; }

.sys-monitor__title {
    margin-left: 10px;
    font-family: var(--sys-font-mono);
    font-size: 0.6rem;
    color: var(--sys-text-dim);
    letter-spacing: 0.5px;
}

/* ==================== SECTION DIVIDER (gradient) ==================== */
.sys-divider--gradient {
    height: 1px;
    border: none;
    margin: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 20%, rgba(255,255,255,0.04) 80%, transparent 100%);
}


/* ==================== REVEAL ANIMATIONS ==================== */
.sys-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.sys-reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

.sys-reveal--delay-1 { transition-delay: 0.08s; }
.sys-reveal--delay-2 { transition-delay: 0.16s; }
.sys-reveal--delay-3 { transition-delay: 0.24s; }
.sys-reveal--delay-4 { transition-delay: 0.32s; }


/* ==================== SYSTEM ENTRY ANIMATIONS ==================== */
@keyframes sys-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes sys-slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sys-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes sys-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45,212,168,0); }
    50%      { box-shadow: 0 0 20px 0 rgba(45,212,168,0.12); }
}

.sys-init-1 { opacity: 0; animation: sys-slide-up 0.7s var(--ease-out) 0.2s forwards; }
.sys-init-2 { opacity: 0; animation: sys-slide-up 0.7s var(--ease-out) 0.35s forwards; }
.sys-init-3 { opacity: 0; animation: sys-slide-up 0.7s var(--ease-out) 0.5s forwards; }
.sys-init-4 { opacity: 0; animation: sys-slide-up 0.7s var(--ease-out) 0.65s forwards; }
.sys-init-5 { opacity: 0; animation: sys-slide-up 0.7s var(--ease-out) 0.8s forwards; }


/* ==================== FOOTER ==================== */
.sys-footer {
    border-top: 1px solid var(--sys-border);
    padding: var(--sp-12) 0 var(--sp-8);
    margin-top: var(--sp-20);
}

.sys-footer__inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--sp-6);
}

.sys-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: var(--sp-8);
}

.sys-footer__brand p {
    font-size: 0.85rem;
    color: var(--sys-text-dim);
    line-height: 1.6;
    margin-top: var(--sp-3);
    max-width: 280px;
}

.sys-footer__col h4 {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sys-text-dim);
    margin-bottom: var(--sp-4);
    font-family: var(--sys-font-mono);
}

.sys-footer__col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.sys-footer__col a {
    display: block;
    font-size: 0.85rem;
    color: var(--sys-text-muted);
    transition: color var(--t-fast);
    padding: 0.2rem 0;
}
.sys-footer__col a:hover { color: var(--sys-green-light); }

.sys-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--sp-8);
    margin-top: var(--sp-8);
    border-top: 1px solid var(--sys-border-subtle);
    font-size: 0.78rem;
    color: var(--sys-text-dim);
}

@media (max-width: 900px) {
    .sys-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
    .sys-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .sys-footer__grid { grid-template-columns: 1fr; }
    .sys-footer__bottom { flex-direction: column; gap: var(--sp-3); text-align: center; }
}


/* ==================== UTILITY CLASSES ==================== */
.sys-text-center { text-align: center; }
.sys-text-left   { text-align: left;   }
.sys-flex        { display: flex; }
.sys-flex-col    { display: flex; flex-direction: column; }
.sys-items-center { align-items: center; }
.sys-justify-center { justify-content: center; }
.sys-justify-between { justify-content: space-between; }
.sys-gap-2 { gap: var(--sp-2); }
.sys-gap-3 { gap: var(--sp-3); }
.sys-gap-4 { gap: var(--sp-4); }
.sys-gap-6 { gap: var(--sp-6); }
.sys-gap-8 { gap: var(--sp-8); }
.sys-mt-4  { margin-top: var(--sp-4); }
.sys-mt-8  { margin-top: var(--sp-8); }
.sys-mt-12 { margin-top: var(--sp-12); }
.sys-mt-16 { margin-top: var(--sp-16); }
.sys-mb-4  { margin-bottom: var(--sp-4); }
.sys-mb-8  { margin-bottom: var(--sp-8); }
.sys-pt-20 { padding-top: var(--sp-20); }
.sys-pb-20 { padding-bottom: var(--sp-20); }
.sys-section { padding: var(--sp-20) 0; }

/* Nav spacer */
.sys-nav-spacer { height: 52px; }

/* ==================== PAGE BODY OVERRIDE ==================== */
/* html gets the base dark color; body is transparent so the
   position:fixed environment layers (z-index:-3) show through. */
html {
    background: var(--sys-bg) !important;
}
body.dbn-page {
    background: transparent !important;
}

/* Ensure page content sits above environment layers */
body.dbn-page > nav,
body.dbn-page > #dbn-nav,
body.dbn-page > #dbn-mob-menu,
body.dbn-page > main,
body.dbn-page > .sys-container,
body.dbn-page > .shell,
body.dbn-page > section,
body.dbn-page > div:not(.sys-env):not(.sys-env-warm):not(.sys-orb):not(.sys-grid-bg):not(.sys-grain):not(.sys-vignette):not(.sys-atmo):not([style*="height:52px"]):not([style*="height: 52px"]):not(.video-modal):not(.gloss-overlay):not(.detail-modal):not(.toast-stack) {
    position: relative;
    z-index: var(--z-base);
}

/* Fix for pages with old inline body background rules */
body.dbn-page .topbar,
body.dbn-page .nav {
    background: rgba(12, 14, 19, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


/* ============================================================
   GLOBAL GLASS MORPHISM OVERRIDES
   Force premium visual quality on ALL page content.
   These rules target common class patterns across pages
   and upgrade them from opaque flat to glass + glow.
   ============================================================ */

/* --- Card & Panel Glass Upgrade --- */
body.dbn-page .card,
body.dbn-page .mode-card,
body.dbn-page .sub-card,
body.dbn-page .scenario-card,
body.dbn-page .drill-card,
body.dbn-page .firm-card,
body.dbn-page .strat-card,
body.dbn-page .tool-card,
body.dbn-page .result-card,
body.dbn-page .quiz-card,
body.dbn-page .link-card,
body.dbn-page .insight-card,
body.dbn-page .rec-card,
body.dbn-page .dash-card,
body.dbn-page .assess-card,
body.dbn-page .feedback-card,
body.dbn-page .behaviour-card,
body.dbn-page .mp-card,
body.dbn-page .inst-card,
body.dbn-page .cfg-field,
body.dbn-page .pair-card,
body.dbn-page .faq-item,
body.dbn-page .tier-card,
body.dbn-page .compare-table,
body.dbn-page .track-card {
    background: rgba(16, 20, 28, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-color: rgba(255,255,255,0.06) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

body.dbn-page .card:hover,
body.dbn-page .mode-card:hover,
body.dbn-page .sub-card:hover,
body.dbn-page .scenario-card:hover,
body.dbn-page .drill-card:hover,
body.dbn-page .firm-card:hover,
body.dbn-page .strat-card:hover,
body.dbn-page .tool-card:hover,
body.dbn-page .link-card:hover,
body.dbn-page .rec-card:hover,
body.dbn-page .dash-card:hover,
body.dbn-page .mp-card:hover,
body.dbn-page .inst-card:hover,
body.dbn-page .pair-card:hover,
body.dbn-page .tier-card:hover,
body.dbn-page .track-card:hover {
    border-color: rgba(45, 212, 168, 0.2) !important;
    box-shadow: 0 0 24px rgba(45,212,168,0.08), 0 8px 32px rgba(0,0,0,0.3) !important;
    transform: translateY(-2px) !important;
}

/* Selected state for cards */
body.dbn-page .mode-card.selected,
body.dbn-page .sub-card.selected,
body.dbn-page .inst-card.active,
body.dbn-page .cfg-field.active,
body.dbn-page .card.active,
body.dbn-page .firm-card.active {
    border-color: rgba(45, 212, 168, 0.35) !important;
    box-shadow: 0 0 20px rgba(45,212,168,0.1), inset 0 1px 0 rgba(45,212,168,0.08) !important;
    background: rgba(20, 184, 166, 0.06) !important;
}

/* --- Panels & Containers --- */
body.dbn-page .panel,
body.dbn-page .section-panel,
body.dbn-page .sidebar,
body.dbn-page .sb-section,
body.dbn-page .tab-content,
body.dbn-page .form-section,
body.dbn-page .detail-modal,
body.dbn-page .modal-content,
body.dbn-page .settings-section,
body.dbn-page .bottom-panel,
body.dbn-page .analysis-panel,
body.dbn-page .terminal-panel {
    background: rgba(14, 18, 26, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 12px !important;
}

/* --- Input & Form Glass --- */
body.dbn-page input[type="text"],
body.dbn-page input[type="number"],
body.dbn-page input[type="email"],
body.dbn-page input[type="password"],
body.dbn-page input[type="search"],
body.dbn-page select,
body.dbn-page textarea {
    background: rgba(10, 14, 20, 0.6) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
    color: var(--sys-text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.dbn-page input:focus,
body.dbn-page select:focus,
body.dbn-page textarea:focus {
    border-color: rgba(45, 212, 168, 0.3) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 168, 0.06) !important;
    outline: none !important;
}

/* --- Tab Systems --- */
body.dbn-page .tab,
body.dbn-page .tab-btn,
body.dbn-page .btab,
body.dbn-page .nav-tab {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--sys-text-muted) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

body.dbn-page .tab:hover,
body.dbn-page .tab-btn:hover,
body.dbn-page .btab:hover,
body.dbn-page .nav-tab:hover {
    background: rgba(255,255,255,0.04) !important;
    color: var(--sys-text) !important;
}

body.dbn-page .tab.active,
body.dbn-page .tab-btn.active,
body.dbn-page .btab.active,
body.dbn-page .nav-tab.active {
    background: rgba(45, 212, 168, 0.08) !important;
    border-color: rgba(45, 212, 168, 0.2) !important;
    color: var(--sys-green-light) !important;
}

/* --- Tables --- */
body.dbn-page table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body.dbn-page th {
    background: rgba(14, 18, 26, 0.6) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: var(--sys-text-dim) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-family: var(--sys-font-mono) !important;
}

body.dbn-page td {
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}

body.dbn-page tr:hover td {
    background: rgba(255,255,255,0.02) !important;
}

/* --- Buttons (non-primary) --- */
body.dbn-page .btn-secondary,
body.dbn-page .ghost-btn,
body.dbn-page .action-btn {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: var(--sys-text) !important;
    border-radius: 8px !important;
}

body.dbn-page .btn-secondary:hover,
body.dbn-page .ghost-btn:hover,
body.dbn-page .action-btn:hover {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.14) !important;
}

/* --- Page Hero Titles (gradient text for all page headings) --- */
body.dbn-page .land-title,
body.dbn-page .page-title,
body.dbn-page .hero-title {
    background: linear-gradient(135deg, var(--sys-green) 0%, var(--sys-green-light) 50%, var(--sys-blue-light) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* --- Stat/Metric Values (monospace green) --- */
body.dbn-page .stat-val,
body.dbn-page .metric-value,
body.dbn-page .hstat-val {
    font-family: var(--sys-font-mono) !important;
    color: var(--sys-text-bright) !important;
    font-variant-numeric: tabular-nums !important;
}

/* ============================================================
   SCROLL SYSTEM — Contained-Module Scrolling
   Every section feels like a scrollable module within
   the larger trading system. Minimal, modern, performant.
   ============================================================ */

/* --- Global smooth scroll --- */
html { scroll-behavior: smooth; }

/* --- Global scrollbar theme (Webkit: Chrome, Edge, Safari) --- */
body.dbn-page ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
body.dbn-page ::-webkit-scrollbar-track {
    background: transparent;
}
body.dbn-page ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    transition: background 0.2s ease;
}
body.dbn-page ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.18);
}
body.dbn-page ::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox scrollbar */
body.dbn-page {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.07) transparent;
}

/* --- Scroll container utility classes --- */
.dbn-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.07) transparent;
}
.dbn-scroll::-webkit-scrollbar { width: 5px; }
.dbn-scroll::-webkit-scrollbar-track { background: transparent; }
.dbn-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.dbn-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

.dbn-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.07) transparent;
}
.dbn-scroll-x::-webkit-scrollbar { height: 4px; }
.dbn-scroll-x::-webkit-scrollbar-track { background: transparent; }
.dbn-scroll-x::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.dbn-scroll-x::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* --- Thin scrollbar variant (sidebar panels, small areas) ---
   Note: this utility used to set overscroll-behavior:contain. Removed so
   wheel events propagate to the page when the inner scroll hits boundary. */
.dbn-scroll-thin {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.05) transparent;
}
.dbn-scroll-thin::-webkit-scrollbar { width: 3px; }
.dbn-scroll-thin::-webkit-scrollbar-track { background: transparent; }
.dbn-scroll-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }
.dbn-scroll-thin::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* --- Scrollable data tables (wide tables that need horizontal scroll) --- */
.dbn-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
    border-radius: 8px;
}
.dbn-table-wrap::-webkit-scrollbar { height: 4px; }
.dbn-table-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 2px; }
.dbn-table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.dbn-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* --- Full-page scroll containers (main content areas) ---
   NB: overscroll-behavior was set to "contain" here, which prevented
   wheel events from propagating from inner content cards to the page.
   That made it feel like the scroll wheel "didn't work" when the cursor
   was over content boxes. Reverted to default propagation (auto). */
body.dbn-page main,
body.dbn-page .page-body,
body.dbn-page .land-body {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.07) transparent;
}

/* --- Simulation shells (100vh layouts with internal scroll) --- */
body.dbn-page .sim-shell,
body.dbn-page .sim-body {
    overscroll-behavior: contain;
}

/* --- Sidebar scroll (fixed-height sidebars in sim pages) --- */
body.dbn-page .sim-sidebar,
body.dbn-page .sidebar,
body.dbn-page .sb-section {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.05) transparent;
}
body.dbn-page .sim-sidebar::-webkit-scrollbar,
body.dbn-page .sidebar::-webkit-scrollbar {
    width: 4px;
}
body.dbn-page .sim-sidebar::-webkit-scrollbar-thumb,
body.dbn-page .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
}
body.dbn-page .sim-sidebar::-webkit-scrollbar-thumb:hover,
body.dbn-page .sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.14);
}

/* --- Bottom terminal panels (positions, history, metrics tabs) --- */
body.dbn-page .sim-bottom,
body.dbn-page .bottom-body,
body.dbn-page .terminal-panel,
body.dbn-page .bottom-panel {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.05) transparent;
}
body.dbn-page .sim-bottom::-webkit-scrollbar,
body.dbn-page .bottom-body::-webkit-scrollbar,
body.dbn-page .terminal-panel::-webkit-scrollbar,
body.dbn-page .bottom-panel::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
body.dbn-page .sim-bottom::-webkit-scrollbar-thumb,
body.dbn-page .bottom-body::-webkit-scrollbar-thumb,
body.dbn-page .terminal-panel::-webkit-scrollbar-thumb,
body.dbn-page .bottom-panel::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
}

/* --- Tab bars (horizontal scroll on overflow) --- */
body.dbn-page .tab-bar,
body.dbn-page .tabs,
body.dbn-page .bottom-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body.dbn-page .tab-bar::-webkit-scrollbar,
body.dbn-page .tabs::-webkit-scrollbar,
body.dbn-page .bottom-tabs::-webkit-scrollbar {
    display: none;
}

/* --- Modal scroll containment --- */
body.dbn-page .modal,
body.dbn-page .modal-content,
body.dbn-page .detail-modal {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
}
body.dbn-page .modal::-webkit-scrollbar,
body.dbn-page .modal-content::-webkit-scrollbar,
body.dbn-page .detail-modal::-webkit-scrollbar {
    width: 5px;
}
body.dbn-page .modal::-webkit-scrollbar-thumb,
body.dbn-page .modal-content::-webkit-scrollbar-thumb,
body.dbn-page .detail-modal::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

/* --- Nested scroll isolation (prevents parent scroll bleed) --- */
body.dbn-page .pos-table,
body.dbn-page .trade-log,
body.dbn-page .history-table,
body.dbn-page .regime-table,
body.dbn-page .session-table,
body.dbn-page .pattern-table,
body.dbn-page .breakdown-table {
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
}
body.dbn-page .pos-table::-webkit-scrollbar,
body.dbn-page .trade-log::-webkit-scrollbar,
body.dbn-page .history-table::-webkit-scrollbar {
    height: 4px;
}
body.dbn-page .pos-table::-webkit-scrollbar-thumb,
body.dbn-page .trade-log::-webkit-scrollbar-thumb,
body.dbn-page .history-table::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
}

/* --- Journal / analytics content areas ---
   These flow with the page now. The previous overscroll-behavior:contain
   trapped wheel events on tab content, so users couldn't scroll the page
   when their cursor was over a journal/analytics card. */
body.dbn-page .journal-body,
body.dbn-page .analytics-body,
body.dbn-page .content-area,
body.dbn-page .tab-panel {
    /* No internal overflow / containment — let wheel propagate to page */
}

/* --- Trade history cards (flow with page) ---
   Was: overflow-y:auto + max-height:60vh + overscroll-behavior:contain.
   That made the trade list its own scroll well, so when the user's cursor
   was over the list (most of the journal tab) the wheel scrolled the list
   internally instead of the page — and contain blocked propagation when
   the inner scroll hit its boundary. Now flows naturally. */
body.dbn-page .trade-list,
body.dbn-page .trade-cards,
body.dbn-page .tracked-trades {
    /* let it flow with the page; no internal scroll well */
}
body.dbn-page .trade-list::-webkit-scrollbar,
body.dbn-page .trade-cards::-webkit-scrollbar,
body.dbn-page .tracked-trades::-webkit-scrollbar {
    width: 4px;
}
body.dbn-page .trade-list::-webkit-scrollbar-thumb,
body.dbn-page .trade-cards::-webkit-scrollbar-thumb,
body.dbn-page .tracked-trades::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
}

/* --- Prevent body scroll when modal/overlay is open --- */
body.dbn-page.modal-open {
    overflow: hidden !important;
}

/* --- Scroll fade hints (gradient edges indicating more content) --- */
.dbn-scroll-fade {
    position: relative;
}
.dbn-scroll-fade::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: linear-gradient(to top, var(--sys-bg) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.dbn-scroll-fade.has-overflow::after {
    opacity: 1;
}

/* --- Scroll snap for card grids (optional snap alignment) --- */
.dbn-scroll-snap {
    scroll-snap-type: x mandatory;
    scroll-padding: 16px;
}
.dbn-scroll-snap > * {
    scroll-snap-align: start;
}

/* --- Header/Top Bar Glass --- */
body.dbn-page .topbar,
body.dbn-page .toolbar,
body.dbn-page .header-bar,
body.dbn-page .sim-header {
    background: rgba(10, 13, 18, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* --- Separator Lines --- */
body.dbn-page hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.06) 80%, transparent) !important;
}

/* --- Toast / Notification Glass --- */
body.dbn-page .toast {
    background: rgba(14, 18, 26, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* --- Modal Overlays --- */
body.dbn-page .modal-overlay,
body.dbn-page .overlay {
    background: rgba(4, 6, 10, 0.8) !important;
    backdrop-filter: blur(8px) !important;
}

/* --- Section Headings --- */
body.dbn-page .section-title,
body.dbn-page .section-head,
body.dbn-page .sub-title {
    font-family: var(--sys-font-mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: var(--sys-text-dim) !important;
}

/* --- Quick Link Cards --- */
body.dbn-page .quick-link,
body.dbn-page .ql-card,
body.dbn-page .integration-card {
    background: rgba(16, 20, 28, 0.5) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.25s ease !important;
}

body.dbn-page .quick-link:hover,
body.dbn-page .ql-card:hover,
body.dbn-page .integration-card:hover {
    border-color: rgba(45, 212, 168, 0.15) !important;
    box-shadow: 0 0 16px rgba(45,212,168,0.06) !important;
    transform: translateY(-1px) !important;
}

/* --- Footer Glass Override --- */
body.dbn-page footer,
body.dbn-page .sys-footer {
    position: relative !important;
    z-index: var(--z-base) !important;
}

/* --- Badge/Tag Consistency --- */
body.dbn-page .badge,
body.dbn-page .tag,
body.dbn-page .label-badge {
    font-family: var(--sys-font-mono) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.5px !important;
    border-radius: 999px !important;
}


/* ============================================================
   ACCESSIBILITY — Focus & Motion
   ============================================================ */

/* Visible focus ring for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--sys-green);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Remove outline on mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

/* Skip-nav link (add <a class="sys-skip-nav" href="#main">Skip to content</a> as first child of body) */
.sys-skip-nav {
    position: absolute;
    top: -100%;
    left: var(--sp-4);
    z-index: 10000;
    padding: var(--sp-2) var(--sp-4);
    background: var(--sys-green);
    color: var(--sys-bg);
    font-weight: 600;
    font-size: 0.88rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: top var(--t-fast);
}
.sys-skip-nav:focus {
    top: var(--sp-2);
}

/* Reduced motion — disable animations for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .sys-reveal { opacity: 1; transform: none; }
    .sys-init-1, .sys-init-2, .sys-init-3, .sys-init-4, .sys-init-5 {
        opacity: 1;
        animation: none;
    }
    .sys-orb { animation: none; }
    .sys-dot { animation: none; }
}

/* Screen-reader only utility */
.sys-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   FORM LAYOUT SYSTEM
   ============================================================ */

.sys-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.sys-form-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sys-text-dim);
    font-family: var(--sys-font-mono);
}

.sys-form-row {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-end;
}

@media (max-width: 600px) {
    .sys-form-row { flex-direction: column; align-items: stretch; }
}

.sys-input {
    background: rgba(10, 14, 20, 0.6);
    border: 1px solid var(--sys-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 0.88rem;
    color: var(--sys-text);
    font-family: var(--sys-font);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.sys-input:focus {
    border-color: var(--sys-border-active);
    box-shadow: 0 0 0 3px rgba(0, 217, 159, 0.06);
    outline: none;
}

.sys-input--mono {
    font-family: var(--sys-font-mono);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */

.sys-progress {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}

.sys-progress__bar {
    height: 100%;
    background: var(--sys-green);
    border-radius: 2px;
    transition: width var(--t-normal) var(--ease-out);
}

.sys-progress__bar--amber { background: var(--sys-amber); }
.sys-progress__bar--red   { background: var(--sys-red); }


/* ============================================================
   RESPONSIVE BREAKPOINT HELPERS
   ============================================================ */

/* Hide on mobile (below 900px) */
@media (max-width: 900px) {
    .sys-hide-mobile { display: none !important; }
}

/* Hide on desktop (above 900px) */
@media (min-width: 901px) {
    .sys-hide-desktop { display: none !important; }
}

/* Stack flex to column on mobile */
@media (max-width: 600px) {
    .sys-stack-mobile { flex-direction: column !important; }
}


/* ============================================================
   LANDING PAGE — FP Markets-inspired, broker-grade visual layer
   Section: .lp-* utility classes + WebGL liquid background
   Added: 2026-04-25 (full-site redesign Session 1)
   Additive only — no existing class touched.
   ============================================================ */

/* Liquid canvas — fills its container, sits behind content */
.lp-liquid {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: block; z-index: 0; pointer-events: none;
}

/* ───── HERO ───── */
.lp-hero {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center;
    overflow: hidden;
    background: var(--sys-bg);
    isolation: isolate;
}
.lp-hero__veil {
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(ellipse 60% 40% at 30% 30%, rgba(0,217,159,0.05), transparent 60%),
        linear-gradient(180deg, transparent 0%, rgba(12,14,19,0.55) 70%, rgba(12,14,19,0.85) 100%);
    pointer-events: none;
}
.lp-hero__inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 1280px; margin: 0 auto;
    padding: 96px 32px 64px;
}
.lp-hero__grid {
    display: grid; gap: 56px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
}
@media (max-width: 1023px) {
    .lp-hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .lp-hero__inner { padding: 80px 24px 48px; }
}

.lp-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--sys-green-bg); border: 1px solid var(--sys-border-active);
    color: var(--sys-green); font-family: var(--sys-font-mono);
    font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 20px;
}
.lp-hero__eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--sys-green); box-shadow: 0 0 10px var(--sys-green-glow);
    animation: lp-pulse 2.4s ease-in-out infinite;
}
@keyframes lp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.lp-hero h1 {
    font-family: var(--sys-font);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800; line-height: 1.05; letter-spacing: -0.03em;
    color: var(--sys-text-bright);
    margin: 0 0 24px;
}
.lp-hero h1 .lp-grad {
    background: linear-gradient(135deg, var(--sys-green) 0%, var(--sys-blue) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    display: inline-block;
}

.lp-hero__sub {
    font-size: 1.0625rem; line-height: 1.6;
    color: var(--sys-text-secondary); max-width: 52ch;
    margin: 0 0 32px;
}

.lp-hero__cta {
    display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
.lp-cta-primary, .lp-cta-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 22px; border-radius: 10px;
    font-family: var(--sys-font); font-size: 0.95rem; font-weight: 600;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: transform 180ms cubic-bezier(.2,.7,.2,1), box-shadow 180ms;
}
.lp-cta-primary {
    background: linear-gradient(135deg, var(--sys-green) 0%, var(--sys-green-dim) 100%);
    color: #061a14; box-shadow: 0 6px 20px rgba(0,217,159,0.25);
}
.lp-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,217,159,0.35); }
.lp-cta-ghost {
    background: transparent; color: var(--sys-text-bright); border-color: var(--sys-border);
}
.lp-cta-ghost:hover { transform: translateY(-2px); border-color: var(--sys-green-glow); color: var(--sys-green); }

.lp-hero__trust {
    font-family: var(--sys-font-mono); font-size: 0.78rem;
    color: var(--sys-text-dim); letter-spacing: 0.04em;
}
.lp-hero__trust span { color: var(--sys-text-secondary); }
.lp-hero__trust .sep { margin: 0 8px; opacity: 0.4; }

/* ── Hero chart frame — broker-grade HUD panel ── */
.lp-chart {
    position: relative;
    background:
        radial-gradient(ellipse 80% 50% at 30% 0%, rgba(0,217,159,0.05), transparent 70%),
        var(--sys-bg-glass);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--sys-border); border-radius: 16px;
    box-shadow:
        var(--shadow-lg),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 0 0 1px rgba(0,217,159,0.04);
    padding: 14px;
    overflow: hidden;
    --lp-mx: 0; --lp-my: 0;
}
/* Top accent — thin teal LED bar */
.lp-chart::before {
    content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(45,212,191,0.55) 35%, rgba(45,212,191,0.85) 50%, rgba(45,212,191,0.55) 65%, transparent 100%);
    box-shadow: 0 0 12px rgba(45,212,191,0.4);
    pointer-events: none; z-index: 3;
}
/* Subtle ambient glow under the chart */
.lp-chart::after {
    content: ''; position: absolute; left: 50%; bottom: -40px;
    width: 72%; height: 80px; transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0,217,159,0.10), transparent 70%);
    pointer-events: none; z-index: 0; filter: blur(20px);
}

.lp-chart__head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 4px 4px 12px; border-bottom: 1px solid var(--sys-border-subtle);
    position: relative; z-index: 1;
}
.lp-chart__pair {
    display: inline-flex; align-items: baseline; gap: 8px;
    font-family: var(--sys-font-mono); font-size: 12px; font-weight: 600;
    color: var(--sys-text); letter-spacing: 0.04em;
}
.lp-chart__pair strong { color: var(--sys-text-bright); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; }
.lp-chart__price {
    font-family: var(--sys-font-mono); font-weight: 700;
    color: var(--sys-text-bright); font-size: 14px;
    transition: color 220ms ease;
    font-variant-numeric: tabular-nums;
}
.lp-chart__price.flash-up   { color: var(--sys-green); text-shadow: 0 0 14px rgba(0,217,159,0.4); }
.lp-chart__price.flash-down { color: var(--sys-red);   text-shadow: 0 0 14px rgba(255,59,92,0.35); }
.lp-chart__delta {
    font-family: var(--sys-font-mono); font-size: 11px; font-weight: 600;
    padding: 2px 7px; border-radius: 4px;
    background: var(--sys-green-bg); color: var(--sys-green);
    letter-spacing: 0.02em;
}
.lp-chart__spark { width: 64px; height: 22px; opacity: 0.85; }
.lp-chart__spark path { fill: none; stroke: var(--sys-green); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lp-chart__spark .fill { fill: rgba(0,217,159,0.14); stroke: none; }

.lp-chart__chip {
    font-family: var(--sys-font-mono); font-size: 10px; font-weight: 600;
    padding: 3px 8px; border-radius: 999px;
    background: var(--sys-bg-elevated); color: var(--sys-text-secondary);
    border: 1px solid var(--sys-border);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.lp-chart__chip--kz { color: var(--sys-amber); border-color: var(--sys-amber-bg); background: var(--sys-amber-bg); }
.lp-chart__live {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--sys-font-mono); font-size: 10px; font-weight: 600;
    color: var(--sys-red); letter-spacing: 0.08em; text-transform: uppercase;
}
.lp-chart__live::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--sys-red); box-shadow: 0 0 8px rgba(255,59,92,0.5);
    animation: lp-pulse 1.2s ease-in-out infinite;
}

/* ── Chart body — depth-stacked SVG canvas with HUD frame ── */
.lp-chart__body {
    position: relative; height: 380px;
    border-radius: 10px; overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,217,159,0.04), transparent 70%),
        radial-gradient(ellipse 50% 40% at 30% 30%, rgba(78,161,255,0.03), transparent 80%),
        linear-gradient(180deg, rgba(255,255,255,0.012) 0%, transparent 40%, rgba(0,0,0,0.18) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 18px 36px -28px rgba(0,217,159,0.18);
    perspective: 1400px;
}
/* HUD corner brackets — subtle teal "L" notches */
.lp-chart__corner {
    position: absolute; width: 14px; height: 14px;
    pointer-events: none; z-index: 4;
    border-color: rgba(45,212,191,0.55);
    border-style: solid; border-width: 0;
}
.lp-chart__corner--tl { top: 8px;    left: 8px;    border-top-width: 1px; border-left-width: 1px; }
.lp-chart__corner--tr { top: 8px;    right: 8px;   border-top-width: 1px; border-right-width: 1px; }
.lp-chart__corner--bl { bottom: 8px; left: 8px;    border-bottom-width: 1px; border-left-width: 1px; }
.lp-chart__corner--br { bottom: 8px; right: 8px;   border-bottom-width: 1px; border-right-width: 1px; }
/* SVG fills the body */
.lp-chart__svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: block;
    transform: translateZ(0);
}
/* Floating annotation cards (HTML over SVG) */
.lp-chart__cards {
    position: absolute; inset: 0; pointer-events: none; z-index: 5;
}
.lp-anno-card {
    position: absolute;
    background: rgba(8,10,15,0.92);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;
    padding: 6px 10px;
    font-family: var(--sys-font-mono); font-size: 10px; color: var(--sys-text);
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,217,159,0.04);
    opacity: 0; transform: translateY(6px) scale(.96);
    transition: opacity 540ms cubic-bezier(.2,.7,.2,1), transform 540ms cubic-bezier(.2,.7,.2,1);
    will-change: transform, opacity;
    letter-spacing: 0.02em;
}
.lp-anno-card.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.lp-anno-card b { color: var(--sys-green); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 6px; }
.lp-anno-card.t-blue b  { color: var(--sys-blue); }
.lp-anno-card.t-amber b { color: var(--sys-amber); }
.lp-anno-card .meta { color: var(--sys-text-dim); margin-left: 4px; }

/* Layer parallax (depth via mouse position; bigger px = closer) */
.lp-l-grid    { transform: translate3d(calc(var(--lp-mx) * -3px), calc(var(--lp-my) * -2px), 0); transition: transform 240ms ease-out; }
.lp-l-zones   { transform: translate3d(calc(var(--lp-mx) *  2px), calc(var(--lp-my) *  1px), 0); transition: transform 240ms ease-out; }
.lp-l-candles { transform: translate3d(calc(var(--lp-mx) *  4px), calc(var(--lp-my) *  2px), 0); transition: transform 240ms ease-out; }
.lp-l-trade   { transform: translate3d(calc(var(--lp-mx) *  6px), calc(var(--lp-my) *  3px), 0); transition: transform 240ms ease-out; }
.lp-l-anno    { transform: translate3d(calc(var(--lp-mx) *  8px), calc(var(--lp-my) *  4px), 0); transition: transform 240ms ease-out; }
.lp-l-live    { transform: translate3d(calc(var(--lp-mx) *  6px), calc(var(--lp-my) *  3px), 0); transition: transform 240ms ease-out; }
.lp-anno-card { transition: opacity 540ms cubic-bezier(.2,.7,.2,1), transform 540ms cubic-bezier(.2,.7,.2,1); }

/* Candle entry — scale-Y from baseline */
.lp-candle-body, .lp-candle-wick {
    transform-origin: center bottom;
    transform: scaleY(0); opacity: 0;
    transition: transform 360ms cubic-bezier(.2,.85,.25,1), opacity 200ms ease-out;
    will-change: transform, opacity;
}
.lp-candle-body.on, .lp-candle-wick.on { transform: scaleY(1); opacity: 1; }
.lp-vol-bar {
    transform-origin: center bottom; transform: scaleY(0); opacity: 0;
    transition: transform 360ms cubic-bezier(.2,.85,.25,1), opacity 200ms ease-out;
}
.lp-vol-bar.on { transform: scaleY(1); opacity: 0.55; }

/* Zone reveal — flash + settle */
.lp-zone {
    opacity: 0; transition: opacity 700ms cubic-bezier(.2,.7,.2,1);
}
.lp-zone.on { opacity: 1; }
.lp-zone-flash {
    opacity: 0;
    animation: lp-flash 1100ms ease-out forwards;
    animation-play-state: paused;
}
.lp-zone.on .lp-zone-flash { animation-play-state: running; }
@keyframes lp-flash {
    0% { opacity: 0; }
    25% { opacity: 0.5; }
    100% { opacity: 0; }
}

/* OB scanning beam */
.lp-scan-line { animation: lp-scan-y 4.2s ease-in-out infinite alternate; }
@keyframes lp-scan-y {
    0%   { transform: translateY(0);  opacity: 0.55; }
    50%  { opacity: 0.95; }
    100% { transform: translateY(var(--lp-scan-h, 30px)); opacity: 0.35; }
}

/* FVG rising particles */
.lp-fvg-p {
    transform-origin: center;
    animation: lp-rise 4s linear infinite;
    will-change: transform, opacity;
}
.lp-fvg-p.p2 { animation-delay: 1.0s; }
.lp-fvg-p.p3 { animation-delay: 2.0s; }
.lp-fvg-p.p4 { animation-delay: 3.0s; }
@keyframes lp-rise {
    0%   { transform: translateY(0);    opacity: 0;   }
    15%  { opacity: 0.85; }
    85%  { opacity: 0.85; }
    100% { transform: translateY(-22px); opacity: 0; }
}

/* BOS path stroke-on */
.lp-bos-path {
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    transition: stroke-dashoffset 700ms cubic-bezier(.2,.7,.2,1);
}
.lp-bos-path.on { stroke-dashoffset: 0; }
.lp-bos-arrow { opacity: 0; transition: opacity 320ms 600ms ease-out; }
.lp-bos-arrow.on { opacity: 1; }

/* Trade trio extends from entry */
.lp-trade-line {
    stroke-dasharray: 100% 100%;
    stroke-dashoffset: 100%;
    transition: stroke-dashoffset 800ms cubic-bezier(.2,.7,.2,1);
}
.lp-trade-line.on { stroke-dashoffset: 0; }
.lp-trade-pill {
    opacity: 0; transform: translateX(8px);
    transition: opacity 420ms ease-out, transform 420ms cubic-bezier(.2,.7,.2,1);
}
.lp-trade-pill.on { opacity: 1; transform: translateX(0); }

/* Live indicator: pulse + beam */
.lp-live-dot {
    transform-origin: center;
    animation: lp-live-pulse 1.6s ease-in-out infinite;
}
@keyframes lp-live-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.35); opacity: 1; }
}
.lp-live-halo {
    transform-origin: center;
    animation: lp-live-halo 1.6s ease-out infinite;
    opacity: 0;
}
@keyframes lp-live-halo {
    0%   { transform: scale(0.6); opacity: 0.6; }
    100% { transform: scale(2.6); opacity: 0; }
}
.lp-live-beam {
    stroke-dasharray: 4 6;
    animation: lp-beam 1.2s linear infinite;
}
@keyframes lp-beam {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -20; }
}
.lp-last-wick-pulse {
    transform-origin: center;
    animation: lp-wick-breath 1.8s ease-in-out infinite;
}
@keyframes lp-wick-breath {
    0%, 100% { opacity: 0.8; }
    50%      { opacity: 1; }
}

.lp-chart__foot {
    display: flex; gap: 16px; flex-wrap: wrap;
    padding: 10px 4px 4px; margin-top: 8px;
    border-top: 1px solid var(--sys-border-subtle);
    font-family: var(--sys-font-mono); font-size: 11px; color: var(--sys-text-secondary);
    position: relative; z-index: 1;
}
.lp-chart__foot strong { color: var(--sys-text); font-weight: 600; }
.lp-chart__foot .lp-foot-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--sys-green); box-shadow: 0 0 8px var(--sys-green-glow);
    margin-right: 4px; vertical-align: middle;
    animation: lp-pulse 2.6s ease-in-out infinite;
}

/* ───── TICKER ───── */
.lp-ticker {
    position: relative; height: 72px;
    background: var(--sys-bg-elevated);
    border-top: 1px solid var(--sys-border);
    border-bottom: 1px solid var(--sys-border);
    overflow: hidden;
    display: flex; align-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.lp-ticker__track {
    display: flex; gap: 48px; white-space: nowrap;
    padding-left: 48px;
    animation: lp-ticker 60s linear infinite;
    will-change: transform;
}
.lp-ticker:hover .lp-ticker__track { animation-play-state: paused; }
.lp-ticker__item {
    font-family: var(--sys-font-mono); font-size: 13px; font-weight: 600;
    color: var(--sys-text); letter-spacing: 0.08em; text-transform: uppercase;
}
.lp-ticker__item .pipe { margin: 0 0 0 48px; color: var(--sys-text-dim); }
@keyframes lp-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ───── TRUST BAND ───── */
.lp-trust { padding: 64px 24px; background: var(--sys-bg); }
.lp-trust__inner { max-width: 1280px; margin: 0 auto; text-align: center; }
.lp-trust__label {
    font-family: var(--sys-font-mono); font-size: 11px; font-weight: 600;
    color: var(--sys-text-dim); letter-spacing: 0.18em; text-transform: uppercase;
    margin-bottom: 24px;
}
.lp-trust__row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 56px;
}
.lp-trust__mark {
    font-family: var(--sys-font); font-size: 1.05rem; font-weight: 700;
    color: var(--sys-text-secondary); letter-spacing: -0.01em;
    transition: color 200ms;
}
.lp-trust__mark:hover { color: var(--sys-text-bright); }

/* ───── FEATURE GRID — Six Systems ───── */
.lp-features { padding: 96px 24px; background: var(--sys-bg); position: relative; }
.lp-features__head { max-width: 1280px; margin: 0 auto 56px; text-align: center; }
.lp-features__head h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em;
    color: var(--sys-text-bright); margin: 0 0 12px;
}
.lp-features__head p { color: var(--sys-text-secondary); font-size: 1rem; margin: 0; }

.lp-feature-grid {
    max-width: 1280px; margin: 0 auto;
    display: grid; gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1023px) { .lp-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .lp-feature-grid { grid-template-columns: 1fr; } }

.lp-feature-card {
    background: var(--sys-bg-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--sys-border); border-radius: 14px;
    padding: 28px;
    transition: transform 200ms cubic-bezier(.2,.7,.2,1), border-color 200ms, box-shadow 200ms;
    display: flex; flex-direction: column; gap: 14px;
}
.lp-feature-card:hover {
    transform: translateY(-2px); border-color: var(--sys-border-active);
    box-shadow: 0 12px 36px rgba(0,0,0,0.35), 0 0 0 1px var(--sys-border-active);
}
.lp-feature-card__icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--sys-green-bg);
    color: var(--sys-green);
}
.lp-feature-card h3 {
    font-size: 1.25rem; font-weight: 700; line-height: 1.3;
    color: var(--sys-text-bright); margin: 0;
}
.lp-feature-card p {
    color: var(--sys-text-secondary); font-size: 0.92rem; line-height: 1.55; margin: 0;
}
.lp-feature-card__viz {
    margin-top: auto; padding-top: 14px;
    border-top: 1px solid var(--sys-border-subtle);
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px;
}
.lp-feature-card__cta {
    font-family: var(--sys-font-mono); font-size: 11px; font-weight: 600;
    color: var(--sys-green); letter-spacing: 0.08em; text-transform: uppercase;
    text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.lp-feature-card__cta:hover { color: var(--sys-green-light); }

/* Microviz — heatmap, bar, ring, pills, scatter */
.lp-mv-heat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 100%; max-width: 110px; }
.lp-mv-heat span { aspect-ratio: 1; border-radius: 2px; background: var(--sys-bg-elevated); }
.lp-mv-bar { width: 100%; max-width: 140px; height: 8px; background: var(--sys-bg-elevated); border-radius: 4px; overflow: hidden; }
.lp-mv-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--sys-green), var(--sys-blue)); }
.lp-mv-bar2 { position: relative; width: 100%; max-width: 160px; height: 6px; background: var(--sys-bg-elevated); border-radius: 3px; }
.lp-mv-bar2 > i { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--sys-green); box-shadow: 0 0 10px var(--sys-green-glow); }
.lp-mv-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.lp-mv-pills span {
    font-family: var(--sys-font-mono); font-size: 10px; padding: 2px 6px; border-radius: 4px;
    background: var(--sys-bg-elevated); color: var(--sys-text-secondary); border: 1px solid var(--sys-border);
}
.lp-mv-ring { width: 48px; height: 48px; }
.lp-mv-scatter { width: 100%; max-width: 140px; height: 56px; }

/* ───── SHOWCASE ───── */
.lp-showcase { padding: 96px 24px; background: var(--sys-bg-elevated); border-top: 1px solid var(--sys-border); border-bottom: 1px solid var(--sys-border); }
.lp-showcase__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
@media (max-width: 1023px) { .lp-showcase__inner { grid-template-columns: 1fr; gap: 40px; } }
.lp-showcase h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; color: var(--sys-text-bright); margin: 0 0 16px; }
.lp-showcase p { color: var(--sys-text-secondary); font-size: 1rem; line-height: 1.6; margin: 0 0 24px; }
.lp-showcase ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lp-showcase li { display: flex; gap: 10px; align-items: flex-start; color: var(--sys-text); font-size: 0.92rem; }
.lp-showcase li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--sys-green); margin-top: 9px; flex: 0 0 4px; }

.lp-desk {
    background: var(--sys-bg); border: 1px solid var(--sys-border); border-radius: 14px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: translate3d(0, calc(var(--lp-scroll, 0) * -0.04), 0);
    will-change: transform;
}
.lp-desk__bar {
    display: flex; align-items: center; gap: 6px; padding: 10px 14px;
    background: var(--sys-bg-elevated); border-bottom: 1px solid var(--sys-border);
}
.lp-desk__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--sys-text-dim); }
.lp-desk__bar i:nth-child(1) { background: #ff5f57; }
.lp-desk__bar i:nth-child(2) { background: #febc2e; }
.lp-desk__bar i:nth-child(3) { background: #28c840; }
.lp-desk__bar span { margin-left: 12px; font-family: var(--sys-font-mono); font-size: 11px; color: var(--sys-text-dim); }
.lp-desk__body {
    display: grid; grid-template-columns: 200px 1fr 160px;
    gap: 0; min-height: 280px;
}
@media (max-width: 640px) { .lp-desk__body { grid-template-columns: 1fr; min-height: auto; } }
.lp-desk__side { padding: 14px; border-right: 1px solid var(--sys-border); background: var(--sys-bg-elevated); display: flex; flex-direction: column; gap: 12px; }
.lp-desk__side h4 { font-family: var(--sys-font-mono); font-size: 10px; font-weight: 600; color: var(--sys-text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 4px; }
.lp-desk__side .row { display: flex; justify-content: space-between; font-family: var(--sys-font-mono); font-size: 11px; color: var(--sys-text); }
.lp-desk__side .row span:last-child { color: var(--sys-green); }
.lp-desk__chart { padding: 14px; min-height: 280px; }
.lp-desk__chart svg { width: 100%; height: 100%; }
.lp-desk__exec { padding: 14px; border-left: 1px solid var(--sys-border); background: var(--sys-bg-elevated); display: flex; flex-direction: column; gap: 8px; }
.lp-desk__exec h4 { font-family: var(--sys-font-mono); font-size: 10px; font-weight: 600; color: var(--sys-text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
.lp-desk__exec .row { font-family: var(--sys-font-mono); font-size: 11px; color: var(--sys-text); display: flex; justify-content: space-between; }
.lp-desk__exec .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.lp-desk__exec .btn-row b { display: block; text-align: center; padding: 6px; border-radius: 5px; font-family: var(--sys-font-mono); font-size: 10px; font-weight: 700; }
.lp-desk__exec .btn-row b:first-child { background: var(--sys-green-bg); color: var(--sys-green); }
.lp-desk__exec .btn-row b:last-child  { background: var(--sys-red-bg);   color: var(--sys-red); }

.lp-spine { margin-top: 56px; padding: 32px; background: var(--sys-bg-glass); border: 1px solid var(--sys-border); border-radius: 14px; max-width: 1280px; margin-left: auto; margin-right: auto; }
.lp-spine h3 { font-size: 1.1rem; font-weight: 700; color: var(--sys-text-bright); margin: 0 0 16px; text-align: center; }
.lp-spine svg { width: 100%; max-height: 140px; }

/* ───── METHODOLOGY STRIP ───── */
.lp-methodology {
    padding: 72px 24px; background: var(--sys-bg);
    border-left: 4px solid var(--sys-gold);
    margin: 0 24px; max-width: 1232px; margin-left: auto; margin-right: auto;
    border-radius: 4px 14px 14px 4px;
    background: linear-gradient(135deg, rgba(201,168,76,0.04) 0%, var(--sys-bg-glass) 100%);
}
.lp-methodology__inner { max-width: 1280px; margin: 0 auto; }
.lp-methodology h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; color: var(--sys-text-bright); margin: 0 0 8px; }
.lp-methodology > .lp-methodology__inner > p { color: var(--sys-text-secondary); margin: 0 0 32px; }
.lp-methodology__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 768px) { .lp-methodology__cols { grid-template-columns: 1fr; } }
.lp-methodology__col h3 { font-family: var(--sys-font-mono); font-size: 12px; font-weight: 600; color: var(--sys-gold); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 10px; }
.lp-methodology__col p { color: var(--sys-text-secondary); font-size: 0.9rem; line-height: 1.55; margin: 0 0 14px; }
.lp-methodology__col svg { width: 100%; max-height: 84px; }
.lp-methodology__cta { margin-top: 32px; }
.lp-methodology__cta a {
    color: var(--sys-gold); text-decoration: none;
    font-family: var(--sys-font-mono); font-size: 12px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
}
.lp-methodology__cta a:hover { color: var(--sys-gold-light); }

/* ───── RATING BAND ───── */
.lp-rating-band { padding: 96px 24px; background: var(--sys-bg-elevated); border-top: 1px solid var(--sys-border); border-bottom: 1px solid var(--sys-border); }
.lp-rating-band__inner { max-width: 1280px; margin: 0 auto; }
.lp-rating-band h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; color: var(--sys-text-bright); margin: 0 0 12px; text-align: center; }
.lp-rating-band > .lp-rating-band__inner > p { color: var(--sys-text-secondary); text-align: center; margin: 0 0 48px; }

.lp-rating-strip { position: relative; height: 64px; border-radius: 8px; background: linear-gradient(90deg, #4ea1ff 0%, #4ea1ff 28%, #9d6cff 28%, #9d6cff 50%, #ffb547 50%, #ffb547 70%, #00d99f 70%, #00d99f 100%); margin-bottom: 12px; opacity: 0.85; }
.lp-rating-strip__labels { display: grid; grid-template-columns: 28% 22% 20% 30%; font-family: var(--sys-font-mono); font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.85); letter-spacing: 0.1em; text-transform: uppercase; height: 100%; align-items: center; }
.lp-rating-strip__labels span { padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.2); }
.lp-rating-strip__labels span:first-child { border-left: 0; }
.lp-rating-strip__marker { position: absolute; left: calc(((1200 - 800) / (2800 - 800)) * 100%); top: -8px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.lp-rating-strip__marker::before { content: ''; width: 2px; height: 80px; background: var(--sys-text-bright); }
.lp-rating-strip__marker span { font-family: var(--sys-font-mono); font-size: 10px; color: var(--sys-text-bright); white-space: nowrap; margin-top: 4px; }

.lp-rating-band__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
@media (max-width: 900px) { .lp-rating-band__cards { grid-template-columns: 1fr; } }
.lp-rating-band__card {
    background: var(--sys-bg-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--sys-border); border-radius: 14px;
    padding: 24px;
    display: flex; flex-direction: column; gap: 12px;
}
.lp-rating-band__card .head { display: flex; align-items: center; gap: 12px; }
.lp-rating-band__card .head b { font-family: var(--sys-font-mono); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase; }
.lp-rating-band__card .head b.t-prac    { background: rgba(157,108,255,0.12); color: var(--sys-purple); }
.lp-rating-band__card .head b.t-cons    { background: rgba(255,181,71,0.12);  color: var(--sys-amber); }
.lp-rating-band__card .head b.t-funded  { background: rgba(0,217,159,0.12);   color: var(--sys-green); }
.lp-rating-band__card .head .range { font-family: var(--sys-font-mono); font-size: 11px; color: var(--sys-text-dim); }
.lp-rating-band__card h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--sys-text-bright); }
.lp-rating-band__card p { margin: 0; color: var(--sys-text-secondary); font-size: 0.92rem; line-height: 1.55; }
.lp-rating-band__card .meta { font-family: var(--sys-font-mono); font-size: 10px; color: var(--sys-text-dim); letter-spacing: 0.06em; text-transform: uppercase; }

/* ───── PRICING ───── */
.lp-pricing { padding: 96px 24px; background: var(--sys-bg); }
.lp-pricing__inner { max-width: 1080px; margin: 0 auto; }
.lp-pricing h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; color: var(--sys-text-bright); margin: 0 0 12px; text-align: center; }
.lp-pricing > .lp-pricing__inner > p { color: var(--sys-text-secondary); text-align: center; margin: 0 0 48px; }
.lp-pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .lp-pricing__grid { grid-template-columns: 1fr; } }

.lp-pricing__card {
    position: relative;
    background: var(--sys-bg-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--sys-border); border-radius: 16px;
    padding: 32px;
    display: flex; flex-direction: column; gap: 16px;
}
.lp-pricing__card--featured {
    border-color: var(--sys-gold); box-shadow: 0 0 0 1px var(--sys-gold-bg), 0 12px 40px rgba(201,168,76,0.08);
}
.lp-pricing__ribbon {
    position: absolute; top: 14px; right: -8px;
    background: linear-gradient(135deg, var(--sys-gold) 0%, var(--sys-gold-light) 100%);
    color: #1a1408; font-family: var(--sys-font-mono); font-size: 10px; font-weight: 700;
    padding: 5px 14px; border-radius: 4px;
    letter-spacing: 0.08em; text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(201,168,76,0.3);
}
.lp-pricing__card h3 { font-size: 1.25rem; font-weight: 700; color: var(--sys-text-bright); margin: 0; }
.lp-pricing__price { display: flex; align-items: baseline; gap: 6px; }
.lp-pricing__price b { font-size: 2.75rem; font-weight: 800; color: var(--sys-text-bright); letter-spacing: -0.03em; }
.lp-pricing__price span { color: var(--sys-text-secondary); font-size: 0.95rem; }
.lp-pricing__sub { color: var(--sys-text-secondary); font-size: 0.92rem; line-height: 1.5; margin: 0; }
.lp-pricing__list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.lp-pricing__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--sys-text); font-size: 0.92rem; }
.lp-pricing__list li::before { content: '✓'; color: var(--sys-green); font-weight: 700; flex: 0 0 14px; }
.lp-pricing__cta { margin-top: auto; }
.lp-pricing__note { text-align: center; color: var(--sys-text-secondary); font-size: 0.92rem; margin-top: 32px; }

/* ───── FINAL CTA ───── */
.lp-final-cta {
    padding: 120px 24px; background: var(--sys-bg-elevated);
    border-top: 1px solid var(--sys-border);
    text-align: center;
}
.lp-final-cta h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; color: var(--sys-text-bright); margin: 0 0 16px; }
.lp-final-cta p { color: var(--sys-text-secondary); font-size: 1.05rem; margin: 0 0 32px; max-width: 56ch; margin-left: auto; margin-right: auto; }
.lp-final-cta__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 20px 36px; border-radius: 12px;
    font-size: 1.05rem; font-weight: 600;
    background: linear-gradient(135deg, var(--sys-green) 0%, var(--sys-green-dim) 100%);
    color: #061a14; text-decoration: none;
    box-shadow: 0 12px 36px rgba(0,217,159,0.3);
    transition: transform 200ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms;
    height: 64px; box-sizing: border-box;
}
.lp-final-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 48px rgba(0,217,159,0.4); }
.lp-final-cta__foot { font-family: var(--sys-font-mono); font-size: 11px; color: var(--sys-text-dim); margin-top: 20px; letter-spacing: 0.06em; }

/* Reveal animation — IntersectionObserver target */
.lp-reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); }
.lp-reveal.is-visible { opacity: 1; transform: translateY(0); }
.lp-stagger-1 { transition-delay: 40ms; }
.lp-stagger-2 { transition-delay: 80ms; }
.lp-stagger-3 { transition-delay: 120ms; }
.lp-stagger-4 { transition-delay: 160ms; }
.lp-stagger-5 { transition-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
    .lp-reveal { opacity: 1; transform: none; transition: none; }
    .lp-ticker__track { animation: none; }
    .lp-hero__eyebrow::before, .lp-chart__live::before { animation: none; }
    .lp-l-grid, .lp-l-zones, .lp-l-candles, .lp-l-trade, .lp-l-anno, .lp-l-live { transform: none !important; transition: none; }
    .lp-candle-body, .lp-candle-wick, .lp-vol-bar { transform: scaleY(1) !important; opacity: 1 !important; transition: none; }
    .lp-zone { opacity: 1 !important; transition: none; }
    .lp-zone-flash, .lp-scan-line, .lp-fvg-p, .lp-live-dot, .lp-live-halo, .lp-live-beam, .lp-last-wick-pulse { animation: none !important; }
    .lp-bos-path { stroke-dashoffset: 0 !important; transition: none; }
    .lp-bos-arrow { opacity: 1 !important; transition: none; }
    .lp-trade-line { stroke-dashoffset: 0 !important; transition: none; }
    .lp-trade-pill { opacity: 1 !important; transform: none !important; transition: none; }
    .lp-anno-card { opacity: 1 !important; transform: none !important; transition: none; }
    .lp-foot-dot { animation: none !important; }
    .lp-chart__price { transition: none; }
}


/* ============================================================
   DBN PREMIUM COMPONENT LAYER
   Formalises the landing-page (.lp-*) visual language as
   reusable components for all internal pages.
   Added: 2026-04-27 - Site-wide premium upgrade.
   Namespace: .dbn-* (additive - never overrides .sys-* or .lp-*)
   ============================================================ */

/* Page Shell */
.dbn-shell { position: relative; min-height: 100vh; padding-bottom: 96px; isolation: isolate; }
.dbn-shell-bg {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(1200px 700px at 20% -10%, rgba(0,217,159,0.06), transparent 60%),
        radial-gradient(1000px 600px at 95% 10%, rgba(78,161,255,0.04), transparent 65%),
        radial-gradient(900px 500px at 50% 100%, rgba(157,108,255,0.04), transparent 60%);
}

/* Page Hero */
.dbn-hero { position: relative; padding: 96px 0 56px; border-bottom: 1px solid var(--sys-border); overflow: hidden; }
.dbn-hero::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
    pointer-events: none; opacity: 0.55;
}
.dbn-hero-inner {
    position: relative; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6);
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 56px; align-items: center;
}
@media (max-width: 920px) {
    .dbn-hero { padding: 72px 0 40px; }
    .dbn-hero-inner { grid-template-columns: 1fr; gap: 32px; }
}
.dbn-hero--solo .dbn-hero-inner { grid-template-columns: 1fr; max-width: 920px; text-align: center; }
.dbn-hero--solo .dbn-hero__cta { justify-content: center; }
.dbn-hero--solo .dbn-hero__meta { justify-content: center; }

.dbn-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border: 1px solid rgba(0,217,159,0.25); border-radius: 999px;
    background: rgba(0,217,159,0.06); color: var(--sys-green);
    font-family: var(--sys-font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px;
}
.dbn-hero__eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--sys-green); box-shadow: 0 0 10px var(--sys-green-glow);
    animation: dbn-pulse-dot 2.4s ease-in-out infinite;
}
@keyframes dbn-pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } }

.dbn-hero__title {
    font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.05; font-weight: 700;
    letter-spacing: -0.02em; color: var(--sys-text-bright); margin: 0 0 20px;
}
.dbn-hero__title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--sys-green) 0%, var(--sys-blue) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dbn-hero__sub { font-size: 1.05rem; line-height: 1.6; color: var(--sys-text-secondary); max-width: 560px; margin: 0 0 28px; }
.dbn-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.dbn-hero__meta {
    display: flex; flex-wrap: wrap; gap: 18px;
    color: var(--sys-text-dim); font-family: var(--sys-font-mono);
    font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.dbn-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.dbn-hero__meta span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--sys-green); }

/* Hero Visual */
.dbn-hero__visual {
    position: relative; border: 1px solid var(--sys-border); border-radius: var(--radius-lg);
    background: var(--sys-bg-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    overflow: hidden; box-shadow: var(--shadow-lg); min-height: 360px;
}
.dbn-hero__visual-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--sys-border); background: rgba(8,10,15,0.6);
}
.dbn-hero__visual-title { font-family: var(--sys-font-mono); font-size: 11px; color: var(--sys-text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.dbn-hero__visual-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sys-font-mono); font-size: 10px; color: var(--sys-green); letter-spacing: 0.08em; text-transform: uppercase; }
.dbn-hero__visual-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sys-green); animation: dbn-pulse-dot 1.6s ease-in-out infinite; box-shadow: 0 0 8px var(--sys-green-glow); }
.dbn-hero__visual-body { padding: 24px; }

/* CTA Buttons */
.dbn-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 22px; border-radius: 10px;
    font-family: var(--sys-font); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
    white-space: nowrap;
}
.dbn-cta--primary { background: linear-gradient(135deg, var(--sys-green) 0%, var(--sys-green-dim) 100%); color: #061018; box-shadow: 0 8px 24px rgba(0,217,159,0.26); }
.dbn-cta--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,217,159,0.36); color: #061018; }
.dbn-cta--ghost { background: rgba(255,255,255,0.02); color: var(--sys-text-bright); border-color: rgba(255,255,255,0.12); }
.dbn-cta--ghost:hover { transform: translateY(-2px); border-color: var(--sys-green-glow); color: var(--sys-green); }
.dbn-cta--gold { background: linear-gradient(135deg, var(--sys-gold-light) 0%, var(--sys-gold) 100%); color: #1a1410; box-shadow: 0 8px 24px rgba(201,168,76,0.28); }
.dbn-cta--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(201,168,76,0.4); color: #1a1410; }
.dbn-cta--sm { padding: 9px 16px; font-size: 0.84rem; }
.dbn-cta--lg { padding: 16px 28px; font-size: 1rem; }
.dbn-cta--block { width: 100%; }

/* Section Header */
.dbn-section-header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.dbn-section-header__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sys-font-mono); font-size: 11px; font-weight: 600; color: var(--sys-green); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
.dbn-section-header__eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sys-green); box-shadow: 0 0 8px var(--sys-green-glow); }
.dbn-section-header__title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.015em; color: var(--sys-text-bright); line-height: 1.15; margin: 0 0 14px; }
.dbn-section-header__sub { font-size: 1rem; line-height: 1.6; color: var(--sys-text-secondary); margin: 0; }

/* DBN Card */
.dbn-card {
    position: relative; padding: 24px; border-radius: var(--radius-lg);
    background: var(--sys-bg-glass); border: 1px solid var(--sys-border);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.dbn-card--interactive { cursor: pointer; }
.dbn-card--interactive:hover { transform: translateY(-3px); border-color: rgba(0,217,159,0.25); box-shadow: 0 16px 40px rgba(0,0,0,0.32), 0 0 24px rgba(0,217,159,0.08); background: rgba(20, 26, 36, 0.7); }
.dbn-card--accent { border-color: rgba(0,217,159,0.18); }
.dbn-card--warn   { border-color: rgba(255,59,92,0.22); background: rgba(40,12,18,0.4); }
.dbn-card--gold   { border-color: rgba(201,168,76,0.22); }
.dbn-card--solid  { background: var(--sys-bg-elevated); }
.dbn-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dbn-card__title { font-family: var(--sys-font-mono); font-size: 11px; font-weight: 600; color: var(--sys-text-dim); letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }

/* Metric Card */
.dbn-metric-card { padding: 20px 22px; border-radius: var(--radius-md); background: var(--sys-bg-glass); border: 1px solid var(--sys-border); backdrop-filter: blur(10px); }
.dbn-metric-card__label { font-family: var(--sys-font-mono); font-size: 10px; font-weight: 600; color: var(--sys-text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.dbn-metric-card__value { font-family: var(--sys-font-mono); font-size: 1.7rem; font-weight: 700; color: var(--sys-text-bright); line-height: 1; font-variant-numeric: tabular-nums; }
.dbn-metric-card__value--green { color: var(--sys-green); }
.dbn-metric-card__value--red   { color: var(--sys-red); }
.dbn-metric-card__value--blue  { color: var(--sys-blue); }
.dbn-metric-card__value--amber { color: var(--sys-amber); }
.dbn-metric-card__delta { display: inline-block; margin-top: 6px; font-family: var(--sys-font-mono); font-size: 10px; color: var(--sys-text-muted); letter-spacing: 0.06em; }
.dbn-metric-card__delta--up   { color: var(--sys-green); }
.dbn-metric-card__delta--down { color: var(--sys-red); }

/* Metrics Strip */
.dbn-metrics-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 32px; }

/* Terminal Panel */
.dbn-terminal-panel { border: 1px solid var(--sys-border); border-radius: var(--radius-md); background: rgba(6, 9, 14, 0.7); backdrop-filter: blur(10px); overflow: hidden; }
.dbn-terminal-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--sys-border); background: rgba(0,0,0,0.4); }
.dbn-terminal-panel__title { font-family: var(--sys-font-mono); font-size: 11px; color: var(--sys-text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.dbn-terminal-panel__body { padding: 16px; font-family: var(--sys-font-mono); font-size: 12.5px; line-height: 1.65; color: var(--sys-text); max-height: 360px; overflow-y: auto; }
.dbn-terminal-panel__body::-webkit-scrollbar { width: 6px; }
.dbn-terminal-panel__body::-webkit-scrollbar-track { background: transparent; }
.dbn-terminal-panel__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.dbn-tlog__tag { display: inline-block; padding: 1px 6px; margin-right: 6px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; }
.dbn-tlog__tag--ok    { background: rgba(0,217,159,0.12); color: var(--sys-green); }
.dbn-tlog__tag--warn  { background: rgba(255,181,71,0.12); color: var(--sys-amber); }
.dbn-tlog__tag--err   { background: rgba(255,59,92,0.12); color: var(--sys-red); }
.dbn-tlog__tag--info  { background: rgba(78,161,255,0.12); color: var(--sys-blue); }

/* Feature Card */
.dbn-feature-card {
    position: relative; padding: 28px 26px; border-radius: var(--radius-lg);
    background: var(--sys-bg-glass); border: 1px solid var(--sys-border);
    backdrop-filter: blur(12px);
    transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
    overflow: hidden; isolation: isolate;
}
.dbn-feature-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(380px 200px at 0% 0%, rgba(0,217,159,0.06), transparent 60%);
    opacity: 0; transition: opacity var(--t-normal) var(--ease-out); z-index: -1;
}
.dbn-feature-card:hover { transform: translateY(-4px); border-color: rgba(0,217,159,0.25); box-shadow: 0 22px 48px rgba(0,0,0,0.36), 0 0 32px rgba(0,217,159,0.08); }
.dbn-feature-card:hover::before { opacity: 1; }
.dbn-feature-card__icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(0,217,159,0.1); border: 1px solid rgba(0,217,159,0.18); display: flex; align-items: center; justify-content: center; color: var(--sys-green); margin-bottom: 16px; }
.dbn-feature-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--sys-text-bright); margin: 0 0 8px; line-height: 1.25; }
.dbn-feature-card p { font-size: 0.92rem; line-height: 1.6; color: var(--sys-text-secondary); margin: 0 0 14px; }
.dbn-feature-card__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--sys-green); font-family: var(--sys-font-mono); font-size: 11px; font-weight: 600; text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; }
.dbn-feature-card__cta::after { content: '→'; transition: transform 0.2s; }
.dbn-feature-card__cta:hover::after { transform: translateX(3px); }

/* Tool Card */
.dbn-tool-card {
    display: flex; flex-direction: column; gap: 10px; padding: 18px;
    border-radius: var(--radius-md); background: var(--sys-bg-glass);
    border: 1px solid var(--sys-border); text-decoration: none; color: var(--sys-text);
    transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
    cursor: pointer;
}
.dbn-tool-card:hover { transform: translateY(-3px); border-color: rgba(0,217,159,0.2); box-shadow: 0 14px 30px rgba(0,0,0,0.32); }
.dbn-tool-card__head { display: flex; align-items: center; gap: 10px; }
.dbn-tool-card__icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(0,217,159,0.08); border: 1px solid rgba(0,217,159,0.16); display: flex; align-items: center; justify-content: center; color: var(--sys-green); flex-shrink: 0; }
.dbn-tool-card__title { font-size: 0.95rem; font-weight: 600; color: var(--sys-text-bright); line-height: 1.25; margin: 0; }
.dbn-tool-card__desc { font-size: 0.84rem; line-height: 1.5; color: var(--sys-text-muted); margin: 0; }
.dbn-tool-card__cta { margin-top: auto; color: var(--sys-green); font-family: var(--sys-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* Status Badge */
.dbn-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--sys-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid transparent; }
.dbn-badge--green  { background: rgba(0,217,159,0.1);  color: var(--sys-green);  border-color: rgba(0,217,159,0.22); }
.dbn-badge--red    { background: rgba(255,59,92,0.1);  color: var(--sys-red);    border-color: rgba(255,59,92,0.22); }
.dbn-badge--blue   { background: rgba(78,161,255,0.1); color: var(--sys-blue);   border-color: rgba(78,161,255,0.22); }
.dbn-badge--amber  { background: rgba(255,181,71,0.1); color: var(--sys-amber);  border-color: rgba(255,181,71,0.22); }
.dbn-badge--purple { background: rgba(157,108,255,0.1);color: var(--sys-purple); border-color: rgba(157,108,255,0.22); }
.dbn-badge--gold   { background: rgba(201,168,76,0.1); color: var(--sys-gold);   border-color: rgba(201,168,76,0.22); }
.dbn-badge--neutral{ background: rgba(255,255,255,0.04); color: var(--sys-text-muted); border-color: rgba(255,255,255,0.1); }
.dbn-badge--dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }

/* Score Badge */
.dbn-score { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 6px 10px; border-radius: 8px; font-family: var(--sys-font-mono); font-size: 1rem; font-weight: 700; background: rgba(0,217,159,0.1); color: var(--sys-green); border: 1px solid rgba(0,217,159,0.22); letter-spacing: -0.01em; }
.dbn-score--b { background: rgba(78,161,255,0.1); color: var(--sys-blue); border-color: rgba(78,161,255,0.22); }
.dbn-score--c { background: rgba(255,181,71,0.1); color: var(--sys-amber); border-color: rgba(255,181,71,0.22); }
.dbn-score--d { background: rgba(255,59,92,0.1); color: var(--sys-red); border-color: rgba(255,59,92,0.22); }

/* Risk Badge */
.dbn-risk-low    { background: rgba(0,217,159,0.1); color: var(--sys-green); border: 1px solid rgba(0,217,159,0.22); padding: 3px 8px; border-radius: 6px; font-family: var(--sys-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.dbn-risk-med    { background: rgba(255,181,71,0.1); color: var(--sys-amber); border: 1px solid rgba(255,181,71,0.22); padding: 3px 8px; border-radius: 6px; font-family: var(--sys-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.dbn-risk-high   { background: rgba(255,59,92,0.1); color: var(--sys-red); border: 1px solid rgba(255,59,92,0.22); padding: 3px 8px; border-radius: 6px; font-family: var(--sys-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Progress Bar */
.dbn-progress { width: 100%; height: 6px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; position: relative; }
.dbn-progress__bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sys-green) 0%, var(--sys-green-light) 100%); transition: width var(--t-slow) var(--ease-out); position: relative; }
.dbn-progress__bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); animation: dbn-progress-shimmer 2s linear infinite; }
.dbn-progress--red .dbn-progress__bar  { background: linear-gradient(90deg, var(--sys-red), var(--sys-red-light)); }
.dbn-progress--amber .dbn-progress__bar{ background: linear-gradient(90deg, var(--sys-amber), var(--sys-amber-light)); }
.dbn-progress--blue .dbn-progress__bar { background: linear-gradient(90deg, var(--sys-blue), var(--sys-blue-light)); }
@keyframes dbn-progress-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Sticky CTA */
.dbn-sticky-cta {
    position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(20px);
    z-index: var(--z-sticky); display: flex; align-items: center; gap: 14px;
    padding: 10px 14px 10px 18px; border-radius: 999px;
    background: rgba(8,10,15,0.92); backdrop-filter: blur(14px);
    border: 1px solid rgba(0,217,159,0.22);
    box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 24px rgba(0,217,159,0.12);
    color: var(--sys-text); font-size: 0.86rem;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    max-width: calc(100vw - 32px);
}
.dbn-sticky-cta.visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dbn-sticky-cta__close { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.06); border: none; color: var(--sys-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dbn-sticky-cta__close:hover { background: rgba(255,255,255,0.12); color: var(--sys-text-bright); }
@media (max-width: 600px) { .dbn-sticky-cta { font-size: 0.8rem; padding: 8px 12px 8px 14px; } }

/* Empty / Loading / Error State */
.dbn-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; border: 1px dashed var(--sys-border); border-radius: var(--radius-lg); background: rgba(8,10,15,0.4); color: var(--sys-text-muted); }
.dbn-state__icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--sys-text-dim); }
.dbn-state__title { font-size: 1.05rem; font-weight: 600; color: var(--sys-text-bright); margin: 0 0 6px; }
.dbn-state__sub { font-size: 0.92rem; color: var(--sys-text-secondary); margin: 0 0 18px; max-width: 420px; }
.dbn-state--error { border-color: rgba(255,59,92,0.3); }
.dbn-state--error .dbn-state__icon { background: rgba(255,59,92,0.08); color: var(--sys-red); }
.dbn-spinner { width: 28px; height: 28px; border: 2px solid rgba(255,255,255,0.08); border-top-color: var(--sys-green); border-radius: 50%; animation: dbn-spin 0.9s linear infinite; }
@keyframes dbn-spin { to { transform: rotate(360deg); } }

/* Workflow Pill - cross-page CTAs */
.dbn-workflow-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(0,217,159,0.06); border: 1px solid rgba(0,217,159,0.22); color: var(--sys-green); font-family: var(--sys-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.dbn-workflow-pill:hover { background: rgba(0,217,159,0.12); transform: translateX(2px); color: var(--sys-green-light); }
.dbn-workflow-pill::before { content: '→'; }

/* Sections + container + grid */
.dbn-section { padding: 80px 0; }
.dbn-section--tight { padding: 56px 0; }
.dbn-section--loose { padding: 112px 0; }
.dbn-section--bordered { border-top: 1px solid var(--sys-border); }
.dbn-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); }
.dbn-container--narrow { max-width: 920px; }
.dbn-container--wide { max-width: 1440px; }
.dbn-grid       { display: grid; gap: 20px; }
.dbn-grid--2    { grid-template-columns: repeat(2, 1fr); }
.dbn-grid--3    { grid-template-columns: repeat(3, 1fr); }
.dbn-grid--4    { grid-template-columns: repeat(4, 1fr); }
.dbn-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 900px) { .dbn-grid--3, .dbn-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dbn-grid--2, .dbn-grid--3, .dbn-grid--4 { grid-template-columns: 1fr; } }

/* Split layout */
.dbn-split { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; }
.dbn-split--right { grid-template-columns: minmax(0, 1fr) 280px; }
@media (max-width: 920px) { .dbn-split, .dbn-split--right { grid-template-columns: 1fr; } }

/* Quiet text */
.dbn-eyebrow { display: inline-block; font-family: var(--sys-font-mono); font-size: 10px; font-weight: 700; color: var(--sys-text-dim); letter-spacing: 0.12em; text-transform: uppercase; }
.dbn-label { font-family: var(--sys-font-mono); font-size: 10px; font-weight: 600; color: var(--sys-text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.dbn-mono { font-family: var(--sys-font-mono); font-variant-numeric: tabular-nums; }

/* Outcome Tag */
.dbn-outcome-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0,217,159,0.08); border: 1px solid rgba(0,217,159,0.22); color: var(--sys-green); font-family: var(--sys-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.dbn-outcome-tag::before { content: '✓'; font-weight: 700; }

/* Reveal animation */
.dbn-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.dbn-reveal.is-visible { opacity: 1; transform: translateY(0); }
.dbn-stagger-1 { transition-delay: 0.05s; }
.dbn-stagger-2 { transition-delay: 0.10s; }
.dbn-stagger-3 { transition-delay: 0.15s; }
.dbn-stagger-4 { transition-delay: 0.20s; }
.dbn-stagger-5 { transition-delay: 0.25s; }

/* Page-hero data viz */
.dbn-spark { display: block; width: 100%; height: 80px; }
.dbn-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; padding: 14px 18px; border-top: 1px solid var(--sys-border); background: rgba(8,10,15,0.4); }
.dbn-stat-row__cell { display: flex; flex-direction: column; gap: 4px; }
.dbn-stat-row__label { font-family: var(--sys-font-mono); font-size: 9px; color: var(--sys-text-dim); letter-spacing: 0.1em; text-transform: uppercase; }
.dbn-stat-row__value { font-family: var(--sys-font-mono); font-size: 0.95rem; font-weight: 700; color: var(--sys-text-bright); }
.dbn-stat-row__value--green { color: var(--sys-green); }
.dbn-stat-row__value--red   { color: var(--sys-red); }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
    .dbn-progress__bar::after { animation: none; }
    .dbn-hero__eyebrow::before, .dbn-section-header__eyebrow::before, .dbn-hero__visual-live::before { animation: none; }
    .dbn-reveal { opacity: 1; transform: none; transition: none; }
    .dbn-card--interactive:hover, .dbn-feature-card:hover, .dbn-tool-card:hover, .dbn-workflow-pill:hover, .dbn-cta:hover { transform: none; }
    .dbn-spinner { animation: none; border-top-color: rgba(255,255,255,0.2); }
}

/* Cross-page connectors strip - sits right under a page hero */
.dbn-connectors {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px var(--sp-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--sys-border);
    background: rgba(8,10,15,0.4);
}
.dbn-connectors__label {
    font-family: var(--sys-font-mono);
    font-size: 10px;
    color: var(--sys-text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 6px;
}
@media (max-width: 600px) {
    .dbn-connectors { padding: 12px 16px; gap: 8px; }
    .dbn-connectors__label { width: 100%; margin-bottom: 4px; }
}

/* Premium grid background fix when nested under .dbn-page (works alongside sys-grid-bg) */
body.dbn-page .dbn-hero { background: transparent; }

/* Slim status bar variant (above-page-hero) */
.dbn-status-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px var(--sp-6);
    background: rgba(8,10,15,0.55);
    border-bottom: 1px solid var(--sys-border);
    font-family: var(--sys-font-mono);
    font-size: 10px;
    color: var(--sys-text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.dbn-status-bar__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--sys-green);
    box-shadow: 0 0 8px rgba(0,217,159,0.4);
    animation: dbn-pulse-dot 2.4s ease-in-out infinite;
}
.dbn-status-bar__sep {
    width: 1px; height: 12px; background: var(--sys-border);
}
@media (prefers-reduced-motion: reduce) {
    .dbn-status-bar__dot { animation: none; }
}

/* =================================================================
   LESSON BODY (lb-*) — Phase 0 of Academy Upgrade Spec
   18-section structured lesson template. Coexists with legacy
   inline academy.html styles (legacy uses div.lb-mistakes with
   .lb-mistake-item children; new uses ul.lb-mistakes with <li>).
   ================================================================= */

.lb-meta {
    font-family: var(--sys-font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sys-text-secondary);
    margin: 0 0 0.5rem;
}

.lb-outcome {
    background: var(--sys-bg-glass);
    border-left: 3px solid var(--sys-green);
    padding: 0.85rem 1rem;
    border-radius: 0 var(--sys-radius-sm) var(--sys-radius-sm) 0;
    color: var(--sys-text);
    font-size: 0.95rem;
    margin: 0.75rem 0 1.25rem;
}
.lb-outcome strong { color: var(--sys-green); }

.lb-checklist,
.lb-confirm,
.lb-invalid,
ul.lb-mistakes,
.lb-exec {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0 1.25rem;
}
.lb-checklist > li,
.lb-confirm > li,
.lb-invalid > li,
ul.lb-mistakes > li,
.lb-exec > li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.75rem;
    border-bottom: 1px solid var(--sys-border);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--sys-text);
}
.lb-checklist > li:last-child,
.lb-confirm > li:last-child,
.lb-invalid > li:last-child,
ul.lb-mistakes > li:last-child,
.lb-exec > li:last-child { border-bottom: none; }

.lb-checklist > li::before {
    content: "▸";
    position: absolute;
    left: 0.4rem;
    color: var(--sys-blue);
    font-weight: bold;
}
.lb-confirm > li::before {
    content: "✓";
    position: absolute;
    left: 0.4rem;
    color: var(--sys-green);
    font-weight: bold;
}
.lb-invalid > li::before {
    content: "✗";
    position: absolute;
    left: 0.4rem;
    color: var(--sys-red);
    font-weight: bold;
}
ul.lb-mistakes > li::before {
    content: "⚠";
    position: absolute;
    left: 0.3rem;
    color: var(--sys-amber);
}
.lb-exec > li::before {
    content: "→";
    position: absolute;
    left: 0.3rem;
    color: var(--sys-text-secondary);
    font-weight: bold;
}

.lb-steps,
.lb-drill {
    counter-reset: lb-step;
    list-style: none;
    padding-left: 0;
    margin: 0.75rem 0 1.25rem;
}
.lb-steps > li,
.lb-drill > li {
    counter-increment: lb-step;
    position: relative;
    padding: 0.6rem 0 0.6rem 2.5rem;
    border-bottom: 1px solid var(--sys-border);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--sys-text);
}
.lb-steps > li::before,
.lb-drill > li::before {
    content: counter(lb-step);
    position: absolute;
    left: 0;
    top: 0.65rem;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--sys-bg-glass);
    border: 1px solid var(--sys-border-active);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sys-font-mono);
    font-size: 0.78rem;
    color: var(--sys-green);
    font-weight: 600;
}
.lb-steps > li:last-child,
.lb-drill > li:last-child { border-bottom: none; }

.lb-example {
    border: 1px solid var(--sys-border);
    border-radius: var(--sys-radius-md);
    padding: 1rem;
    margin: 0.75rem 0 1.25rem;
    background: var(--sys-bg-glass);
}
.lb-example--valid {
    border-color: rgba(0, 217, 159, 0.35);
    background: rgba(0, 217, 159, 0.04);
}
.lb-example--invalid {
    border-color: rgba(255, 59, 92, 0.35);
    background: rgba(255, 59, 92, 0.04);
}
.lb-example svg {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0.75rem;
}
.lb-cap {
    font-size: 0.85rem;
    color: var(--sys-text-secondary);
    line-height: 1.55;
    margin: 0.5rem 0 0;
}

.lb-takeaway {
    background: linear-gradient(135deg, rgba(0, 217, 159, 0.08), rgba(78, 161, 255, 0.04));
    border: 1px solid var(--sys-border-active);
    border-radius: var(--sys-radius-md);
    padding: 1rem 1.15rem;
    margin: 1rem 0;
    font-size: 0.95rem;
    color: var(--sys-text);
    line-height: 1.55;
}
.lb-takeaway strong { color: var(--sys-green); }

details.lb-pro {
    background: var(--sys-bg-glass);
    border: 1px solid var(--sys-border);
    border-radius: var(--sys-radius-md);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}
details.lb-pro > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--sys-text);
    font-size: 0.92rem;
    list-style: none;
    padding: 0.25rem 0;
    user-select: none;
}
details.lb-pro > summary::-webkit-details-marker { display: none; }
details.lb-pro > summary::before {
    content: "▸ ";
    color: var(--sys-text-secondary);
    transition: transform 0.2s ease;
    display: inline-block;
}
details.lb-pro[open] > summary::before {
    transform: rotate(90deg);
}
details.lb-pro > p {
    margin-top: 0.65rem;
    font-size: 0.9rem;
    color: var(--sys-text-secondary);
    line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
    details.lb-pro > summary::before { transition: none; }
}


/* ============================================================
   ROUND 2 — PREMIUM POLISH OVERRIDES
   Extends glass morphism + premium feel to legacy class names
   that still appear inline on individual pages. Additive only.
   Added: 2026-04-27 (round 2 of site-wide premium upgrade)
   ============================================================ */

/* Stat / metric cards across the site */
body.dbn-page .stat-card,
body.dbn-page .sb-card,
body.dbn-page .stat,
body.dbn-page .id-hstat,
body.dbn-page .ls-hstat,
body.dbn-page .stat-box,
body.dbn-page .hstat,
body.dbn-page .pp-stat,
body.dbn-page .au-stat,
body.dbn-page .inst-stat,
body.dbn-page .summary-card,
body.dbn-page .metric-card {
    background: rgba(18, 21, 28, 0.55) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: var(--radius-md) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}
body.dbn-page .stat-card:hover,
body.dbn-page .sb-card:hover,
body.dbn-page .stat:hover,
body.dbn-page .stat-box:hover,
body.dbn-page .pp-stat:hover {
    border-color: rgba(0,217,159,0.18) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.32), 0 0 16px rgba(0,217,159,0.04) !important;
    transform: translateY(-1px);
}

/* Generic form input upgrade — glass + green focus ring */
body.dbn-page input[type="text"]:not(.dbn-skip),
body.dbn-page input[type="email"]:not(.dbn-skip),
body.dbn-page input[type="password"]:not(.dbn-skip),
body.dbn-page input[type="number"]:not(.dbn-skip),
body.dbn-page input[type="search"]:not(.dbn-skip),
body.dbn-page input[type="tel"]:not(.dbn-skip),
body.dbn-page input[type="url"]:not(.dbn-skip),
body.dbn-page input[type="date"]:not(.dbn-skip),
body.dbn-page select:not(.dbn-skip),
body.dbn-page textarea:not(.dbn-skip) {
    background: rgba(8, 12, 18, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-md) !important;
    color: var(--sys-text-bright) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
body.dbn-page input[type="text"]:focus,
body.dbn-page input[type="email"]:focus,
body.dbn-page input[type="password"]:focus,
body.dbn-page input[type="number"]:focus,
body.dbn-page input[type="search"]:focus,
body.dbn-page input[type="tel"]:focus,
body.dbn-page input[type="url"]:focus,
body.dbn-page input[type="date"]:focus,
body.dbn-page select:focus,
body.dbn-page textarea:focus {
    outline: none !important;
    border-color: rgba(0, 217, 159, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(0, 217, 159, 0.12) !important;
    background: rgba(8, 12, 18, 0.85) !important;
}

/* Tabs — premium look */
body.dbn-page .tab,
body.dbn-page .ot-btn,
body.dbn-page .pp-tab,
body.dbn-page .ap-tab,
body.dbn-page .miles-tab {
    background: rgba(18, 21, 28, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--sys-text-secondary) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.2s ease !important;
}
body.dbn-page .tab:hover,
body.dbn-page .pp-tab:hover,
body.dbn-page .ap-tab:hover {
    border-color: rgba(0, 217, 159, 0.2) !important;
    color: var(--sys-text-bright) !important;
}
body.dbn-page .tab.active,
body.dbn-page .pp-tab.active,
body.dbn-page .ap-tab.active {
    background: rgba(0, 217, 159, 0.08) !important;
    border-color: rgba(0, 217, 159, 0.3) !important;
    color: var(--sys-green) !important;
}

/* Tables — premium polish */
body.dbn-page table:not(.dbn-skip):not(.tradingview-widget-container *) {
    background: rgba(18, 21, 28, 0.4) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}
body.dbn-page table:not(.dbn-skip) th {
    background: rgba(0, 0, 0, 0.35) !important;
    border-bottom: 1px solid var(--sys-border) !important;
    font-family: var(--sys-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--sys-text-dim) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 14px !important;
    text-align: left;
}
body.dbn-page table:not(.dbn-skip) td {
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: var(--sys-text) !important;
}

/* Modals — glass surface */
body.dbn-page .modal:not(.dbn-skip),
body.dbn-page .modal-overlay > *:not(.dbn-skip),
body.dbn-page .dialog:not(.dbn-skip) {
    background: rgba(18, 21, 28, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 32px rgba(0, 217, 159, 0.04) !important;
}

/* Empty states — sharper */
body.dbn-page .empty,
body.dbn-page .empty-state,
body.dbn-page .no-data {
    background: rgba(8, 10, 15, 0.4) !important;
    border: 1px dashed var(--sys-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 32px 20px !important;
    color: var(--sys-text-muted) !important;
    text-align: center;
}

/* Soft glow on .dbn-hero__visual when used inside dashboards */
body.dbn-page .dbn-hero__visual { box-shadow: var(--shadow-lg), 0 0 32px rgba(0,217,159,0.06); }

/* Mobile — page hero sweep */
@media (max-width: 600px) {
    .dbn-hero { padding: 56px 0 32px !important; }
    .dbn-hero__title { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
    .dbn-hero__sub { font-size: 0.95rem !important; }
    .dbn-hero__cta { gap: 8px !important; }
    .dbn-cta { padding: 11px 18px !important; font-size: 0.85rem !important; }
    .dbn-hero__meta { gap: 12px !important; font-size: 10px !important; }
    .dbn-connectors { padding: 10px 16px !important; gap: 6px !important; }
    .dbn-workflow-pill { font-size: 10px !important; padding: 6px 10px !important; }
}

/* Make sure body.dbn-page uses transparent bg so environment shows */
body.dbn-page { background: transparent !important; }


/* ============================================================
   GLOBAL MARKET TICKER (#dbn-global-ticker)
   Drop-in ticker injected by dbn-ticker.js on every internal page.
   Sticks to the bottom of the viewport. Pages that need their own
   bottom dock (workspace, prop-challenge sim, paper-trade sim,
   AI assistant, live-session, institutional-dashboard) opt out via
   <html data-dbn-ticker="off"> or window.__DBN_NO_TICKER = true.
   Reuses .lp-tk-* item styles already in dbn-system.css; only the
   container variants live here.
   ============================================================ */
#dbn-global-ticker.lp-ticker {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 44px;
    z-index: 50;
    background: rgba(6, 9, 16, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--sys-border);
    border-bottom: none;
    overflow: hidden;
    display: flex;
}
#dbn-global-ticker .lp-ticker__status {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 0 16px;
    background: rgba(0, 217, 159, 0.06);
    border-right: 1px solid rgba(0, 217, 159, 0.2);
    font: 700 10px/1 var(--sys-font-mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sys-green);
}
#dbn-global-ticker .lp-ticker__status::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--sys-green);
    box-shadow: 0 0 8px rgba(0, 217, 159, 0.6);
    animation: dbn-tk-pulse 1.8s ease-in-out infinite;
}
@keyframes dbn-tk-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
}
#dbn-global-ticker .lp-ticker__viewport { flex: 1; overflow: hidden; position: relative; }
#dbn-global-ticker .lp-ticker__track {
    display: flex; height: 100%;
    width: max-content;
    animation: dbn-tk-scroll 90s linear infinite;
}
#dbn-global-ticker:hover .lp-ticker__track { animation-play-state: paused; }
@keyframes dbn-tk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#dbn-global-ticker .lp-ticker__set { display: flex; align-items: center; gap: 0; }
#dbn-global-ticker .lp-tk-item {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 0 22px; height: 44px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    font: 500 12px/1 var(--sys-font-mono);
    transition: background 180ms;
    flex-shrink: 0;
}
#dbn-global-ticker .lp-tk-sym { color: var(--sys-text-dim); font-weight: 600; letter-spacing: 0.06em; }
#dbn-global-ticker .lp-tk-val { color: var(--sys-text-bright); font-weight: 600; font-variant-numeric: tabular-nums; }
#dbn-global-ticker .lp-tk-chg { font-size: 11px; font-weight: 600; }
#dbn-global-ticker .lp-tk-chg.up   { color: var(--sys-green); }
#dbn-global-ticker .lp-tk-chg.down { color: var(--sys-red); }
#dbn-global-ticker .lp-tk-chg.flat { color: var(--sys-text-dim); }
#dbn-global-ticker .lp-tk-flash { background: rgba(0,217,159,0.08); }
#dbn-global-ticker .lp-tk-flash.down { background: rgba(255,59,92,0.08); }

/* Body bottom-padding for the fixed ticker (only when ticker is rendered) */
body.dbn-page:has(#dbn-global-ticker) { padding-bottom: 44px; }
@media (max-width: 720px) {
    #dbn-global-ticker.lp-ticker { height: 38px; }
    #dbn-global-ticker .lp-tk-item { padding: 0 16px; height: 38px; }
    body.dbn-page:has(#dbn-global-ticker) { padding-bottom: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    #dbn-global-ticker .lp-ticker__track { animation: none !important; }
    #dbn-global-ticker .lp-ticker__status::before { animation: none !important; }
}
/* Pages that opt out of the ticker (working trading interfaces) */
html[data-dbn-ticker="off"] #dbn-global-ticker { display: none !important; }


/* ============================================================
   STICKY CTA (.dbn-sticky-trial)
   Shown on internal content pages for non-logged-in visitors.
   Auto-injected by dbn-sticky-cta.js when DBNAuth reports unauthed.
   ============================================================ */
.dbn-sticky-trial {
    position: fixed;
    right: 24px;
    bottom: 60px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 16px;
    background: rgba(8, 10, 15, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 217, 159, 0.3);
    border-radius: 999px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 217, 159, 0.15);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    visibility: hidden;
    max-width: calc(100vw - 48px);
    color: var(--sys-text);
    font-size: 0.86rem;
}
.dbn-sticky-trial.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.dbn-sticky-trial__copy {
    color: var(--sys-text-secondary);
    white-space: nowrap;
}
.dbn-sticky-trial__copy strong { color: var(--sys-text-bright); }
.dbn-sticky-trial__cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--sys-green) 0%, var(--sys-green-dim) 100%);
    color: #061018;
    font-weight: 700;
    font-size: 0.84rem;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 217, 159, 0.28);
    transition: transform 0.18s, box-shadow 0.18s;
}
.dbn-sticky-trial__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 217, 159, 0.4);
    color: #061018;
}
.dbn-sticky-trial__close {
    width: 24px; height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--sys-text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    line-height: 1;
}
.dbn-sticky-trial__close:hover { background: rgba(255, 255, 255, 0.12); color: var(--sys-text-bright); }
/* Hard clip: pill content can never overflow its container */
.dbn-sticky-trial { overflow: hidden; min-width: 0; }

/* Round-4 (2026-05-08): copy text kept clipping the leading character across
   multiple viewport widths despite breakpoint + flex-shrink defenses (rounds
   1-3). Cleanest fix is to drop the copy span entirely on every viewport —
   the green "Start free →" CTA carries the conversion message on its own,
   the × button handles dismiss. No copy = nothing to clip, ever. */
.dbn-sticky-trial__copy { display: none !important; }
.dbn-sticky-trial__cta,
.dbn-sticky-trial__close { flex: 0 0 auto; }
@media (max-width: 600px) {
    .dbn-sticky-trial {
        right: 12px; bottom: 56px;
        padding: 8px 12px 8px 14px;
        font-size: 0.78rem;
    }
    .dbn-sticky-trial__cta { padding: 7px 12px; font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Stage 4A — Listen Bar v3 (TTS Player)
   Drop-in player rendered by dbn-tts-player.js. Token-compliant.
   44px touch targets for mobile. See .claude/STAGE-4A-TTS-UPGRADE.md.
   ═══════════════════════════════════════════════════════════════════ */
.lb3 {
  font-family: var(--sys-font);
  background: var(--sys-bg-glass, rgba(18,21,28,0.5));
  border: 1px solid var(--sys-border);
  border-radius: var(--sys-radius-lg);
  padding: 16px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  outline: none;
}
.lb3:focus-visible { box-shadow: 0 0 0 2px var(--sys-green); }
.lb3[data-state="error"] { border-color: var(--sys-red); }

.lb3-modebar { display: flex; gap: 4px; }
.lb3-mode {
  flex: 1;
  min-height: 44px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--sys-border);
  color: var(--sys-text-secondary);
  border-radius: var(--sys-radius-md);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.lb3-mode:hover { background: var(--sys-bg-surface, rgba(255,255,255,0.04)); }
.lb3-mode--active {
  background: var(--sys-green-bg, rgba(0,217,159,0.12));
  border-color: var(--sys-green);
  color: var(--sys-green);
}
.lb3-mode--disabled, .lb3-mode:disabled {
  opacity: 0.4; cursor: not-allowed;
}

.lb3-controls { display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lb3-btn {
  min-width: 64px; min-height: 44px;
  background: transparent;
  border: 1px solid var(--sys-border);
  color: var(--sys-text);
  border-radius: var(--sys-radius-md);
  font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--sys-font-mono);
}
.lb3-btn:hover { background: var(--sys-green-bg, rgba(0,217,159,0.12)); border-color: var(--sys-green); }
.lb3-speed {
  min-width: 64px; min-height: 44px;
  background: transparent;
  border: 1px solid var(--sys-border);
  color: var(--sys-text-secondary);
  border-radius: var(--sys-radius-md);
  font: inherit; font-weight: 600;
  font-family: var(--sys-font-mono);
  cursor: pointer;
}
.lb3-speed:hover { color: var(--sys-text); border-color: var(--sys-green); }

.lb3-progress-row { display: flex; align-items: center; gap: 12px; }
.lb3-time {
  font-family: var(--sys-font-mono);
  font-size: 12px;
  color: var(--sys-text-muted);
  min-width: 40px;
  text-align: center;
}
.lb3-progress {
  flex: 1;
  height: 6px;
  background: var(--sys-bg-surface, rgba(255,255,255,0.06));
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  outline: none;
}
.lb3-progress:focus-visible { box-shadow: 0 0 0 2px var(--sys-green); }
.lb3-progress-fill {
  height: 100%;
  background: var(--sys-green);
  border-radius: 3px;
  width: 0%;
  transition: width .1s linear;
}

.lb3-status {
  display: flex; justify-content: space-between;
  font-size: 12px;
  color: var(--sys-text-muted);
}
.lb3-section {
  font-family: var(--sys-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sys-text-secondary);
}
.lb3-state { font-style: italic; }
.lb3[data-state="playing"] .lb3-state { color: var(--sys-green); }
.lb3[data-state="error"] .lb3-state { color: var(--sys-red); }

.lb3-transcript {
  max-height: 320px;
  overflow-y: auto;
  padding: 12px;
  background: var(--sys-bg-surface, rgba(255,255,255,0.03));
  border: 1px solid var(--sys-border);
  border-radius: var(--sys-radius-md);
  line-height: 1.6;
}
.lb3-tx-section {
  font-family: var(--sys-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  color: var(--sys-text-muted);
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sys-border);
  position: sticky;
  top: 0;
  background: var(--sys-bg-surface, rgba(8,10,16,0.95));
}
.lb3-tx-section:first-child { margin-top: 0; }
.lb3-tx-p {
  font-size: 14px;
  color: var(--sys-text);
  margin: 0 0 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background .2s;
}
.lb3-tx-p--current {
  background: var(--sys-green-bg, rgba(0,217,159,0.12));
  border-left: 3px solid var(--sys-green);
  padding-left: 13px;
}

.lb3-written, .lb3-video {
  padding: 12px;
  background: var(--sys-bg-surface, rgba(255,255,255,0.03));
  border-radius: var(--sys-radius-md);
}
.lb3-written[hidden], .lb3-video[hidden], .lb3-transcript[hidden],
.lb3-controls[hidden], .lb3-progress-row[hidden], .lb3-status[hidden] {
  display: none;
}

.lb3-error {
  color: var(--sys-red);
  font-size: 14px;
  padding: 12px;
  text-align: center;
}
.lb3-download {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--sys-text-secondary);
  text-decoration: none;
  border: 1px solid var(--sys-border);
  border-radius: var(--sys-radius-sm);
  margin-left: auto;
}
.lb3-download:hover { color: var(--sys-green); border-color: var(--sys-green); }

@media (max-width: 600px) {
  .lb3-controls { flex-wrap: wrap; }
  .lb3-btn, .lb3-speed { flex: 1 1 48%; }
  .lb3-time { font-size: 11px; min-width: 32px; }
  .lb3-transcript { max-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb3-progress-fill { transition: none; }
  .lb3-tx-p { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Stage 4B — Storyboard / Practice / Chapter UI extensions to Listen Bar v3
   See .claude/STAGE-4B-STORYBOARD.md for spec.
   ═══════════════════════════════════════════════════════════════════ */

/* Chapter markers along the progress bar */
.lb3-chapters {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lb3-chapter-tick {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 10px;
  background: var(--sys-gold, #c9a84c);
  border-radius: 1px;
  cursor: pointer;
  pointer-events: auto;
  transform: translateX(-1px);
  transition: width 0.15s, background 0.15s;
}
.lb3-chapter-tick:hover {
  width: 3px;
  background: var(--sys-green);
}

/* Storyboard scenes in Watch pane */
.lb3-sb-scenes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px;
}
.lb3-sb-heading {
  font-family: var(--sys-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  color: var(--sys-text-muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sys-border);
}
.lb3-sb-scene {
  background: var(--sys-bg-glass, rgba(255,255,255,0.02));
  border: 1px solid var(--sys-border);
  border-radius: var(--sys-radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lb3-sb-scene-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lb3-sb-scene-num {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--sys-green-bg, rgba(0,217,159,0.12));
  color: var(--sys-green);
  font-family: var(--sys-font-mono);
  font-weight: 700;
  font-size: 12px;
}
.lb3-sb-scene-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--sys-text);
  flex: 1;
}
.lb3-sb-scene-time {
  font-family: var(--sys-font-mono);
  font-size: 11px;
  color: var(--sys-text-muted);
}
.lb3-sb-canvas-wrap {
  width: 100%;
  height: 220px;
  background: #ffffff;
  border-radius: var(--sys-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
}
.lb3-sb-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.lb3-sb-scene-narr {
  font-size: 13px;
  line-height: 1.55;
  color: var(--sys-text-secondary);
  margin: 0;
}
.lb3-sb-scene-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lb3-btn--sm {
  min-width: 0;
  min-height: 32px;
  padding: 4px 12px;
  font-size: 12px;
}

/* Practice pane */
.lb3-practice {
  padding: 16px;
  background: var(--sys-bg-surface, rgba(255,255,255,0.03));
  border-radius: var(--sys-radius-md);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lb3-practice-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--sys-text);
}
.lb3-practice-subhead {
  font-family: var(--sys-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  color: var(--sys-text-muted);
}
.lb3-practice-drills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lb3-practice-drill {
  padding: 10px 14px;
  background: var(--sys-bg-glass, rgba(255,255,255,0.02));
  border: 1px solid var(--sys-border);
  border-radius: var(--sys-radius-sm);
  font-size: 13px;
  color: var(--sys-text);
  line-height: 1.5;
}
.lb3-practice-sim {
  padding: 12px;
  background: var(--sys-green-bg, rgba(0,217,159,0.06));
  border: 1px solid var(--sys-green);
  border-radius: var(--sys-radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lb3-practice-goal {
  margin: 0;
  font-size: 13px;
  color: var(--sys-text-secondary);
}
.lb3-practice-cta {
  display: inline-block;
  padding: 10px 16px;
  background: var(--sys-green);
  color: #062018;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--sys-radius-sm);
  text-align: center;
  align-self: flex-start;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.lb3-practice-cta:hover {
  background: #00c490;
}
.lb3-practice-done {
  align-self: flex-start;
  margin-top: 8px;
}
.lb3-practice-done:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.lb3-practice-done--complete {
  background: var(--sys-green-bg, rgba(0,217,159,0.12));
  border-color: var(--sys-green);
  color: var(--sys-green);
}

@media (max-width: 600px) {
  .lb3-sb-canvas-wrap { height: 180px; }
  .lb3-sb-scene-name { font-size: 13px; }
}