/* ═══════════════════════════════════════════════════════════════════════
   ETH SNIPER — Modern Admin Design System (DS)
   Vercel-inspired tokens. Dark, dense, premium-by-restraint.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ─── Surfaces (near-black with subtle elevation) ─── */
    --ds-bg:           #0a0a0b;
    --ds-bg-elevated:  #111113;
    --ds-bg-hover:     #18181b;
    --ds-bg-active:    #1f1f23;
    --ds-bg-input:     #0f0f11;

    /* ─── Borders (subtle, no shadows) ─── */
    --ds-border:        rgba(255, 255, 255, 0.08);
    --ds-border-strong: rgba(255, 255, 255, 0.14);
    --ds-border-active: rgba(255, 255, 255, 0.22);

    /* ─── Text (zinc ramp) ─── */
    --ds-text:         #ededed;
    --ds-text-bright:  #ffffff;
    --ds-text-muted:   #a1a1aa;
    --ds-text-dim:     #71717a;
    --ds-text-faint:   #52525b;

    /* ─── Accent: single primary (Vercel blue) ─── */
    --ds-accent:       #0070f3;
    --ds-accent-hover: #1a85ff;
    --ds-accent-bg:    rgba(0, 112, 243, 0.12);
    --ds-accent-bg-strong: rgba(0, 112, 243, 0.20);

    /* ─── Semantic ─── */
    --ds-green:    #00d986;
    --ds-green-bg: rgba(0, 217, 134, 0.10);
    --ds-red:      #ff4757;
    --ds-red-bg:   rgba(255, 71, 87, 0.10);
    --ds-amber:    #ffa726;
    --ds-amber-bg: rgba(255, 167, 38, 0.10);
    --ds-violet:   #a855f7;
    --ds-violet-bg: rgba(168, 85, 247, 0.10);
    --ds-cyan:     #06b6d4;

    /* ─── Spacing (8px base) ─── */
    --ds-s-1: 4px;
    --ds-s-2: 8px;
    --ds-s-3: 12px;
    --ds-s-4: 16px;
    --ds-s-5: 24px;
    --ds-s-6: 32px;
    --ds-s-7: 48px;
    --ds-s-8: 64px;

    /* ─── Radii (sharp) ─── */
    --ds-r-sm: 4px;
    --ds-r-md: 6px;
    --ds-r-lg: 8px;

    /* ─── Layout ─── */
    --ds-sidebar-w:  240px;
    --ds-topbar-h:   56px;

    /* ─── Typography ─── */
    --ds-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto,
               'Helvetica Neue', sans-serif;
    --ds-font-mono: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL RESET (only when .ds-app is on body)
   ═══════════════════════════════════════════════════════════════════════ */

body.ds-app {
    margin: 0;
    background: var(--ds-bg);
    color: var(--ds-text);
    font-family: var(--ds-font);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

body.ds-app * { box-sizing: border-box; }

body.ds-app a { color: inherit; text-decoration: none; }

body.ds-app h1, body.ds-app h2, body.ds-app h3, body.ds-app h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ds-text-bright);
}

body.ds-app code { font-family: var(--ds-font-mono); font-size: 0.92em; }

/* Scrollbar (subtle, dark) */
body.ds-app ::-webkit-scrollbar { width: 8px; height: 8px; }
body.ds-app ::-webkit-scrollbar-track { background: transparent; }
body.ds-app ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; }
body.ds-app ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ═══════════════════════════════════════════════════════════════════════
   APP SHELL — sidebar + topbar + main content
   ═══════════════════════════════════════════════════════════════════════ */

.ds-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--ds-sidebar-w);
    background: var(--ds-bg);
    border-right: 1px solid var(--ds-border);
    display: flex; flex-direction: column;
    z-index: 50;
}

.ds-sidebar__brand {
    display: flex; align-items: center; gap: 10px;
    padding: 0 var(--ds-s-4);
    height: var(--ds-topbar-h);
    border-bottom: 1px solid var(--ds-border);
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-text-bright);
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.ds-sidebar__brand-mark {
    width: 24px; height: 24px;
    border-radius: var(--ds-r-sm);
    background: linear-gradient(135deg, var(--ds-accent), var(--ds-violet));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 13px; font-weight: 700;
}

.ds-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--ds-s-3) var(--ds-s-2);
}

.ds-sidebar__group {
    margin-bottom: var(--ds-s-3);
}
.ds-sidebar__group-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--ds-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--ds-s-2) var(--ds-s-3) var(--ds-s-1);
}

.ds-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px var(--ds-s-3);
    height: 36px;
    border-radius: var(--ds-r-md);
    color: var(--ds-text-muted);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    position: relative;
}
.ds-nav-item:hover {
    background: var(--ds-bg-hover);
    color: var(--ds-text-bright);
}
.ds-nav-item.is-active {
    background: var(--ds-accent-bg);
    color: var(--ds-text-bright);
}
.ds-nav-item.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    background: var(--ds-accent);
    border-radius: 0 2px 2px 0;
}
.ds-nav-item__icon {
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    opacity: 0.85;
}

.ds-sidebar__footer {
    padding: var(--ds-s-3);
    border-top: 1px solid var(--ds-border);
    flex-shrink: 0;
}

/* ─── Topbar ─── */
.ds-topbar {
    position: fixed;
    top: 0;
    left: var(--ds-sidebar-w);
    right: 0;
    height: var(--ds-topbar-h);
    background: rgba(10, 10, 11, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ds-border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--ds-s-5);
    z-index: 40;
}

.ds-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 13.5px;
    color: var(--ds-text-muted);
    font-weight: 500;
}
.ds-breadcrumb__current {
    color: var(--ds-text-bright);
    font-weight: 600;
}
.ds-breadcrumb__sep { color: var(--ds-text-faint); margin: 0 4px; }

.ds-topbar__actions {
    display: flex; align-items: center; gap: var(--ds-s-3);
}

.ds-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-text-muted);
}
.ds-status-pill__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ds-text-faint);
}
.ds-status-pill--ok    .ds-status-pill__dot { background: var(--ds-green); box-shadow: 0 0 6px var(--ds-green); }
.ds-status-pill--warn  .ds-status-pill__dot { background: var(--ds-amber); }
.ds-status-pill--bad   .ds-status-pill__dot { background: var(--ds-red); }

/* ─── Main content ─── */
.ds-main {
    margin-left: var(--ds-sidebar-w);
    padding-top: var(--ds-topbar-h);
    min-height: 100vh;
}
.ds-content {
    padding: var(--ds-s-5) var(--ds-s-6);
    max-width: 1400px;
}

/* Page title block */
.ds-page-header {
    margin-bottom: var(--ds-s-5);
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: var(--ds-s-4); flex-wrap: wrap;
}
.ds-page-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0 0 4px;
}
.ds-page-subtitle {
    font-size: 14px;
    color: var(--ds-text-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   KPI CARDS — Stripe-inspired
   ═══════════════════════════════════════════════════════════════════════ */

.ds-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ds-s-3);
    margin-bottom: var(--ds-s-5);
}

.ds-kpi {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    padding: var(--ds-s-4);
    transition: border-color 0.12s;
    position: relative;
    overflow: hidden;
}
.ds-kpi:hover { border-color: var(--ds-border-strong); }

.ds-kpi__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-text-muted);
    margin-bottom: var(--ds-s-2);
    letter-spacing: 0;
}
.ds-kpi__value {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ds-text-bright);
    font-variant-numeric: tabular-nums;
}
.ds-kpi__value--green  { color: var(--ds-green); }
.ds-kpi__value--red    { color: var(--ds-red); }
.ds-kpi__value--amber  { color: var(--ds-amber); }
.ds-kpi__value--accent { color: var(--ds-accent); }
.ds-kpi__value--violet { color: var(--ds-violet); }

.ds-kpi__delta {
    display: flex; align-items: center; gap: 4px;
    margin-top: var(--ds-s-2);
    font-size: 12px;
    color: var(--ds-text-muted);
}
.ds-kpi__delta--up   { color: var(--ds-green); }
.ds-kpi__delta--down { color: var(--ds-red); }

.ds-kpi__sparkline {
    margin-top: var(--ds-s-3);
    width: 100%;
    height: 28px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PANELS — content cards
   ═══════════════════════════════════════════════════════════════════════ */

.ds-panel {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    overflow: hidden;
    margin-bottom: var(--ds-s-4);
}

.ds-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--ds-s-3) var(--ds-s-4);
    border-bottom: 1px solid var(--ds-border);
    gap: var(--ds-s-3);
}
.ds-panel__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ds-text-bright);
}
.ds-panel__subtitle {
    font-size: 13px;
    color: var(--ds-text-muted);
    margin-top: 2px;
}
.ds-panel__body {
    padding: var(--ds-s-4);
}
.ds-panel__body--flush { padding: 0; }

/* Section title (between panels) */
.ds-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: var(--ds-s-6) 0 var(--ds-s-3);
}

/* ═══════════════════════════════════════════════════════════════════════
   LIVE/RECENT ROWS — feed item pattern (replaces bad recent results)
   ═══════════════════════════════════════════════════════════════════════ */

.ds-feed { display: flex; flex-direction: column; }

.ds-feed-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: var(--ds-s-3);
    align-items: center;
    padding: var(--ds-s-3) var(--ds-s-4);
    border-bottom: 1px solid var(--ds-border);
    transition: background 0.12s;
}
.ds-feed-item:last-child { border-bottom: none; }
.ds-feed-item:hover { background: var(--ds-bg-hover); }

.ds-feed-item__icon {
    width: 32px; height: 32px;
    border-radius: var(--ds-r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    background: var(--ds-bg-active);
}
.ds-feed-item__icon--ok    { background: var(--ds-green-bg);  color: var(--ds-green); }
.ds-feed-item__icon--bad   { background: var(--ds-red-bg);    color: var(--ds-red); }
.ds-feed-item__icon--info  { background: var(--ds-accent-bg); color: var(--ds-accent); }

.ds-feed-item__main {
    min-width: 0;
}
.ds-feed-item__title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ds-text);
    line-height: 1.3;
}
.ds-feed-item__title strong {
    color: var(--ds-text-bright);
    font-weight: 600;
}
.ds-feed-item__sub {
    font-size: 12px;
    color: var(--ds-text-dim);
    margin-top: 2px;
}

.ds-feed-item__meta {
    text-align: right;
    font-size: 12px;
    color: var(--ds-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ds-feed-item__meta strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-text-bright);
    margin-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLES (Linear-style, dense, no borders between cells)
   ═══════════════════════════════════════════════════════════════════════ */

.ds-table-wrap { overflow-x: auto; }

.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.ds-table thead th {
    text-align: left;
    padding: 10px var(--ds-s-4);
    background: var(--ds-bg);
    color: var(--ds-text-muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--ds-border);
    position: sticky; top: 0; z-index: 1;
}

.ds-table tbody td {
    padding: 10px var(--ds-s-4);
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-text);
    height: 44px;
}
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table tbody tr:hover td { background: var(--ds-bg-hover); }
.ds-table .num { text-align: right; }
.ds-table .center { text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════
   BADGES, BUTTONS, INPUTS
   ═══════════════════════════════════════════════════════════════════════ */

.ds-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: var(--ds-r-sm);
    font-size: 11px;
    font-weight: 500;
    background: var(--ds-bg-active);
    color: var(--ds-text-muted);
    border: 1px solid var(--ds-border);
}
.ds-badge--green   { background: var(--ds-green-bg); color: var(--ds-green); border-color: rgba(0,217,134,0.18); }
.ds-badge--red     { background: var(--ds-red-bg); color: var(--ds-red); border-color: rgba(255,71,87,0.18); }
.ds-badge--amber   { background: var(--ds-amber-bg); color: var(--ds-amber); border-color: rgba(255,167,38,0.18); }
.ds-badge--accent  { background: var(--ds-accent-bg); color: var(--ds-accent); border-color: rgba(0,112,243,0.20); }
.ds-badge--violet  { background: var(--ds-violet-bg); color: var(--ds-violet); border-color: rgba(168,85,247,0.20); }
.ds-badge--lg      { padding: 4px 10px; font-size: 12px; }

.ds-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 14px;
    background: var(--ds-bg-elevated);
    color: var(--ds-text-bright);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-r-md);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--ds-font);
    cursor: pointer;
    transition: all 0.12s;
    text-decoration: none;
    line-height: 1.2;
}
.ds-btn:hover {
    background: var(--ds-bg-hover);
    border-color: var(--ds-border-active);
}
.ds-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ds-btn--primary {
    background: var(--ds-accent);
    border-color: var(--ds-accent);
    color: white;
}
.ds-btn--primary:hover {
    background: var(--ds-accent-hover);
    border-color: var(--ds-accent-hover);
}
.ds-btn--success { background: var(--ds-green); border-color: var(--ds-green); color: #000; }
.ds-btn--danger  { background: var(--ds-red);   border-color: var(--ds-red);   color: white; }
.ds-btn--sm      { padding: 5px 10px; font-size: 12px; }
.ds-btn--ghost   { background: transparent; border-color: transparent; color: var(--ds-text-muted); }
.ds-btn--ghost:hover { background: var(--ds-bg-hover); color: var(--ds-text-bright); border-color: transparent; }

.ds-input, .ds-select, .ds-textarea {
    display: block;
    width: 100%;
    padding: 8px var(--ds-s-3);
    background: var(--ds-bg-input);
    color: var(--ds-text-bright);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-md);
    font-size: 13.5px;
    font-family: var(--ds-font);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
    outline: none;
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 3px var(--ds-accent-bg);
}

.ds-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-text-muted);
    margin-bottom: 6px;
}
.ds-help {
    font-size: 12px;
    color: var(--ds-text-dim);
    margin-top: 6px;
    line-height: 1.4;
}
.ds-field { margin-bottom: var(--ds-s-4); }

.ds-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--ds-s-4);
}
.ds-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ds-s-3);
}
.ds-grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--ds-s-4);
}

/* Switch/toggle */
.ds-switch { display: inline-flex; align-items: center; gap: var(--ds-s-3); cursor: pointer; user-select: none; }
.ds-switch__input { display: none; }
.ds-switch__track {
    width: 32px; height: 18px;
    background: var(--ds-bg-active);
    border-radius: 99px;
    position: relative;
    transition: background 0.15s;
    flex-shrink: 0;
}
.ds-switch__track::after {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px;
    background: var(--ds-text-muted);
    border-radius: 50%;
    transition: transform 0.15s, background 0.15s;
}
.ds-switch__input:checked + .ds-switch__track { background: var(--ds-accent); }
.ds-switch__input:checked + .ds-switch__track::after {
    transform: translateX(14px);
    background: white;
}

/* ═══════════════════════════════════════════════════════════════════════
   ALERTS / TOASTS
   ═══════════════════════════════════════════════════════════════════════ */

.ds-alert {
    display: flex; gap: 10px;
    padding: var(--ds-s-3) var(--ds-s-4);
    border-radius: var(--ds-r-md);
    border: 1px solid var(--ds-border-strong);
    background: var(--ds-bg-elevated);
    font-size: 13px;
    margin-bottom: var(--ds-s-3);
    align-items: flex-start;
}
.ds-alert__icon { flex-shrink: 0; margin-top: 1px; font-size: 14px; }
.ds-alert--success { background: var(--ds-green-bg); border-color: rgba(0,217,134,0.22); color: var(--ds-green); }
.ds-alert--danger  { background: var(--ds-red-bg);   border-color: rgba(255,71,87,0.22); color: var(--ds-red); }
.ds-alert--warn    { background: var(--ds-amber-bg); border-color: rgba(255,167,38,0.22); color: var(--ds-amber); }
.ds-alert--info    { background: var(--ds-accent-bg); border-color: rgba(0,112,243,0.22); color: var(--ds-accent); }

/* ═══════════════════════════════════════════════════════════════════════
   PROGRESS / METERS
   ═══════════════════════════════════════════════════════════════════════ */

.ds-progress {
    width: 100%; height: 6px;
    background: var(--ds-bg-active);
    border-radius: 99px;
    overflow: hidden;
}
.ds-progress__fill {
    height: 100%;
    background: var(--ds-accent);
    border-radius: 99px;
    transition: width 0.3s;
}
.ds-progress__fill--green { background: var(--ds-green); }
.ds-progress__fill--amber { background: var(--ds-amber); }
.ds-progress__fill--red   { background: var(--ds-red); }

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════ */

.ds-empty {
    text-align: center;
    padding: var(--ds-s-7) var(--ds-s-5);
    color: var(--ds-text-muted);
}
.ds-empty__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-text-bright);
    margin-bottom: 4px;
}
.ds-empty__hint {
    font-size: 13px;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */

.ds-mono       { font-family: var(--ds-font-mono); font-size: 12.5px; }
.ds-tabular    { font-variant-numeric: tabular-nums; }
.ds-muted      { color: var(--ds-text-muted); }
.ds-dim        { color: var(--ds-text-dim); }
.ds-bright     { color: var(--ds-text-bright); }
.ds-tiny       { font-size: 11px; }
.ds-small      { font-size: 12.5px; }
.ds-bold       { font-weight: 600; }
.ds-semibold   { font-weight: 500; }
.ds-text-right { text-align: right; }
.ds-text-center{ text-align: center; }
.ds-flex       { display: flex; }
.ds-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ds-flex-center  { display: flex; align-items: center; justify-content: center; }
.ds-gap-1      { gap: var(--ds-s-1); }
.ds-gap-2      { gap: var(--ds-s-2); }
.ds-gap-3      { gap: var(--ds-s-3); }
.ds-mt-3       { margin-top: var(--ds-s-3); }
.ds-mt-4       { margin-top: var(--ds-s-4); }
.ds-mb-3       { margin-bottom: var(--ds-s-3); }
.ds-mb-4       { margin-bottom: var(--ds-s-4); }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — collapse sidebar on narrow screens
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    body.ds-app .ds-sidebar { transform: translateX(-100%); transition: transform 0.2s; }
    body.ds-app.is-sidebar-open .ds-sidebar { transform: translateX(0); }
    body.ds-app .ds-topbar { left: 0; }
    body.ds-app .ds-main { margin-left: 0; }
    body.ds-app .ds-content { padding: var(--ds-s-4); }
}

/* ═══════════════════════════════════════════════════════════════════════
   ORACLE-SPECIFIC COMPONENTS
   ═══════════════════════════════════════════════════════════════════════ */

/* Macro context strip (above tabs) */
.ds-context-strip {
    display: flex; align-items: center; gap: var(--ds-s-3);
    padding: var(--ds-s-3) var(--ds-s-4);
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    margin-bottom: var(--ds-s-4);
    flex-wrap: wrap;
}
.ds-context-strip__icon { font-size: 24px; }
.ds-context-strip__main { flex: 1; min-width: 200px; }
.ds-context-strip__title { font-size: 14px; font-weight: 600; color: var(--ds-text-bright); }
.ds-context-strip__sub { font-size: 12.5px; color: var(--ds-text-muted); margin-top: 2px; }
.ds-context-strip__divider {
    width: 1px; height: 36px; background: var(--ds-border);
}
.ds-context-strip__stat {
    display: flex; flex-direction: column; gap: 2px;
}
.ds-context-strip__stat-label {
    font-size: 11px; color: var(--ds-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.ds-context-strip__stat-value {
    font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Source toggle (Live/Backtest/Both) */
.ds-source-toggle {
    display: inline-flex; gap: 0;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-md);
    padding: 3px;
    margin-bottom: var(--ds-s-4);
}
.ds-source-toggle__btn {
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ds-text-muted);
    border-radius: var(--ds-r-sm);
    text-decoration: none;
    transition: all 0.12s;
    cursor: pointer;
}
.ds-source-toggle__btn:hover { color: var(--ds-text-bright); }
.ds-source-toggle__btn.is-active {
    background: var(--ds-bg-active);
    color: var(--ds-text-bright);
}

/* Tabs (segmented) */
.ds-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-md);
    margin-bottom: var(--ds-s-5);
    overflow-x: auto;
    width: fit-content;
}
.ds-tab {
    padding: 7px 14px;
    border-radius: var(--ds-r-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.12s;
    cursor: pointer;
}
.ds-tab:hover { color: var(--ds-text-bright); }
.ds-tab.is-active {
    background: var(--ds-bg);
    color: var(--ds-text-bright);
    box-shadow: 0 0 0 1px var(--ds-border-strong);
}

/* Oracle prediction cards (the BIG ones) */
.ds-pred-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--ds-s-4);
    margin-bottom: var(--ds-s-5);
}
.ds-pred-card {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    overflow: hidden;
    position: relative;
}
.ds-pred-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--ds-text-faint);
}
.ds-pred-card--up::before    { background: var(--ds-green); }
.ds-pred-card--down::before  { background: var(--ds-red); }
.ds-pred-card--flat::before  { background: var(--ds-text-faint); }

.ds-pred-card__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--ds-s-3) var(--ds-s-4);
    border-bottom: 1px solid var(--ds-border);
}
.ds-pred-card__horizon {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-bright);
    letter-spacing: -0.02em;
}
.ds-pred-card__horizon span {
    font-size: 11px;
    color: var(--ds-text-muted);
    font-weight: 400;
    margin-left: 4px;
    letter-spacing: 0;
}

.ds-pred-card__body {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--ds-s-4);
    padding: var(--ds-s-5) var(--ds-s-4);
    align-items: center;
}

.ds-pred-card__direction {
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 6px;
}
.ds-pred-card__direction--up    { color: var(--ds-green); }
.ds-pred-card__direction--down  { color: var(--ds-red); }
.ds-pred-card__direction--flat  { color: var(--ds-text-faint); }

.ds-pred-card__label {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
}
.ds-pred-card__label--up    { color: var(--ds-green); }
.ds-pred-card__label--down  { color: var(--ds-red); }
.ds-pred-card__label--flat  { color: var(--ds-text-muted); }

.ds-pred-card__bucket {
    font-size: 14px;
    font-weight: 500;
    color: var(--ds-text);
    margin-top: 4px;
}
.ds-pred-card__pct {
    font-size: 12px;
    color: var(--ds-text-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.ds-pred-card__foot {
    padding: var(--ds-s-3) var(--ds-s-4);
    border-top: 1px solid var(--ds-border);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px;
    color: var(--ds-text-muted);
}

/* Confidence donut (smaller, refined) */
.ds-donut {
    display: block;
}
.ds-donut__num {
    fill: var(--ds-text-bright);
    font-weight: 700;
    font-family: var(--ds-font);
}

/* Trader's note / narrative */
.ds-narrative {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    overflow: hidden;
    margin-bottom: var(--ds-s-4);
}
.ds-narrative__head {
    padding: var(--ds-s-3) var(--ds-s-4);
    border-bottom: 1px solid var(--ds-border);
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
}
.ds-narrative__head:hover { background: var(--ds-bg-hover); }
.ds-narrative__title {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px;
    font-weight: 600;
}
.ds-narrative__chip {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--ds-bg-active);
    border-radius: var(--ds-r-sm);
    color: var(--ds-text-muted);
    font-weight: 500;
}
.ds-narrative__body {
    padding: var(--ds-s-4);
    font-size: 14px;
    line-height: 1.7;
    color: var(--ds-text);
}
.ds-narrative__body p {
    margin: 0 0 12px;
}
.ds-narrative__body p:last-child { margin-bottom: 0; }
.ds-narrative__body p strong { color: var(--ds-text-bright); }

.ds-narrative-section {
    border-left: 2px solid var(--ds-border);
    padding-left: 12px;
    margin: var(--ds-s-3) 0;
}
.ds-narrative-section__label {
    font-size: 10px;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 4px;
}
.ds-narrative-section__text {
    color: var(--ds-text);
    line-height: 1.6;
}

/* Pattern card (calibration top/bottom) */
.ds-pattern-card {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-left: 3px solid var(--ds-text-faint);
    border-radius: var(--ds-r-md);
    padding: var(--ds-s-3) var(--ds-s-4);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--ds-s-3);
    align-items: center;
    margin-bottom: 8px;
    transition: border-color 0.12s;
}
.ds-pattern-card:hover { border-color: var(--ds-border-strong); }
.ds-pattern-card--good { border-left-color: var(--ds-green); }
.ds-pattern-card--bad  { border-left-color: var(--ds-red); }

.ds-pattern-card__main { min-width: 0; }
.ds-pattern-card__title {
    font-size: 13.5px; font-weight: 500; color: var(--ds-text);
    margin-bottom: 2px;
}
.ds-pattern-card__meta {
    font-size: 11.5px;
    color: var(--ds-text-dim);
    font-family: var(--ds-font-mono);
    word-break: break-all;
}
.ds-pattern-card__rate {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ds-pattern-card__rate-num {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}
.ds-pattern-card__rate-num--good { color: var(--ds-green); }
.ds-pattern-card__rate-num--bad  { color: var(--ds-red); }
.ds-pattern-card__rate-sub {
    font-size: 11px;
    color: var(--ds-text-muted);
    margin-top: 2px;
}

/* Stripe-style headline number (for Track Record) */
.ds-headline-stat {
    text-align: center;
    padding: var(--ds-s-7) var(--ds-s-5);
    background: linear-gradient(180deg, var(--ds-bg-elevated) 0%, var(--ds-bg) 100%);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    margin-bottom: var(--ds-s-5);
}
.ds-headline-stat__value {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, var(--ds-accent), var(--ds-violet));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ds-headline-stat__label {
    font-size: 14px;
    color: var(--ds-text-muted);
    margin-top: var(--ds-s-2);
}
.ds-headline-stat__hint {
    font-size: 12px;
    color: var(--ds-text-dim);
    margin-top: var(--ds-s-2);
}

/* Direction arrow chip (used in feed) */
.ds-dir-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: var(--ds-r-sm);
    font-size: 12px;
    font-weight: 600;
    background: var(--ds-bg-active);
    color: var(--ds-text-muted);
}
.ds-dir-chip--up    { background: var(--ds-green-bg); color: var(--ds-green); }
.ds-dir-chip--down  { background: var(--ds-red-bg);   color: var(--ds-red); }
.ds-dir-chip--flat  { background: var(--ds-bg-active); color: var(--ds-text-muted); }

/* Timeline (for regime history) */
.ds-timeline { position: relative; padding-left: 36px; }
.ds-timeline::before {
    content: ''; position: absolute; left: 14px; top: 8px; bottom: 8px;
    width: 1px; background: var(--ds-border);
}
.ds-timeline__item { position: relative; margin-bottom: var(--ds-s-4); }
.ds-timeline__dot {
    position: absolute; left: -29px; top: 16px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--ds-text-faint);
    border: 3px solid var(--ds-bg);
    box-sizing: content-box;
}
.ds-timeline__dot--bull       { background: var(--ds-green); }
.ds-timeline__dot--bear       { background: var(--ds-red); }
.ds-timeline__dot--transition { background: var(--ds-amber); }

/* ─── EXPLANATORY PREDICTION CARDS (v2) ────────────────────────── */

.ds-pred-v2 {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    overflow: hidden;
    position: relative;
    display: flex; flex-direction: column;
}
.ds-pred-v2::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.ds-pred-v2--up::before    { background: var(--ds-green); }
.ds-pred-v2--down::before  { background: var(--ds-red); }
.ds-pred-v2--flat::before  { background: var(--ds-text-faint); }

.ds-pred-v2__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ds-border);
    flex-shrink: 0;
}
.ds-pred-v2__horizon {
    font-size: 13px; font-weight: 600;
    color: var(--ds-text-bright);
    letter-spacing: -0.02em;
}
.ds-pred-v2__horizon span { font-size: 11px; color: var(--ds-text-muted); margin-left: 4px; font-weight: 400; }

/* Hero direction statement */
.ds-pred-v2__hero {
    padding: 18px 16px 12px;
    text-align: center;
}
.ds-pred-v2__arrow {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.04em;
}
.ds-pred-v2__arrow--up    { color: var(--ds-green); }
.ds-pred-v2__arrow--down  { color: var(--ds-red); }
.ds-pred-v2__arrow--flat  { color: var(--ds-text-faint); }

.ds-pred-v2__verdict {
    font-size: 16px;
    font-weight: 600;
    color: var(--ds-text-bright);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.ds-pred-v2__verdict-sub {
    font-size: 12.5px;
    color: var(--ds-text-muted);
    line-height: 1.4;
}

/* Price journey block */
.ds-journey {
    padding: 12px 16px;
    background: var(--ds-bg);
    border-top: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
}
.ds-journey__label {
    font-size: 10px;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 8px;
}
.ds-journey__prices {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.ds-journey__price {
    text-align: center;
}
.ds-journey__price-label {
    font-size: 10px;
    color: var(--ds-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.ds-journey__price-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-text-bright);
    font-variant-numeric: tabular-nums;
}
.ds-journey__price-value--target { color: var(--ds-accent); }
.ds-journey__price-value--target.is-up { color: var(--ds-green); }
.ds-journey__price-value--target.is-down { color: var(--ds-red); }
.ds-journey__arrow {
    color: var(--ds-text-faint);
    font-size: 18px;
}
.ds-journey__progress {
    margin-top: 8px;
}
.ds-journey__progress-bar {
    width: 100%; height: 4px;
    background: var(--ds-bg-active);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}
.ds-journey__progress-fill {
    height: 100%;
    background: var(--ds-accent);
    border-radius: 99px;
    transition: width 0.3s;
}
.ds-journey__progress-fill--up   { background: var(--ds-green); }
.ds-journey__progress-fill--down { background: var(--ds-red); }
.ds-journey__progress-text {
    font-size: 11px;
    color: var(--ds-text-muted);
    margin-top: 6px;
    display: flex; justify-content: space-between;
}

/* Time countdown block */
.ds-countdown {
    padding: 12px 16px;
}
.ds-countdown__label {
    font-size: 10px;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 6px;
    display: flex; justify-content: space-between;
}
.ds-countdown__bar {
    width: 100%; height: 4px;
    background: var(--ds-bg-active);
    border-radius: 99px;
    overflow: hidden;
}
.ds-countdown__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ds-accent), var(--ds-violet));
    border-radius: 99px;
    transition: width 1s;
}
.ds-countdown__fill--evaluated { background: var(--ds-text-faint); }
.ds-countdown__fill--expired { background: var(--ds-amber); }

.ds-countdown__times {
    display: flex; justify-content: space-between;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--ds-text-muted);
}
.ds-countdown__times strong { color: var(--ds-text-bright); font-weight: 500; }

/* Confidence inline (smaller, embedded in card) */
.ds-pred-v2__conf {
    padding: 10px 16px;
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--ds-border);
    font-size: 12px;
}
.ds-pred-v2__conf-label { color: var(--ds-text-muted); }
.ds-pred-v2__conf-bar {
    flex: 1;
    margin: 0 12px;
    height: 4px;
    background: var(--ds-bg-active);
    border-radius: 99px;
    overflow: hidden;
}
.ds-pred-v2__conf-fill { height: 100%; border-radius: 99px; transition: width 0.3s; }
.ds-pred-v2__conf-num {
    font-weight: 600;
    color: var(--ds-text-bright);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
}

/* ─── EXPLANATORY RECENT RESULT CARDS (v2) ──────────────────────── */

.ds-result-v2 {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-left: 4px solid var(--ds-text-faint);
    border-radius: var(--ds-r-md);
    padding: 14px 18px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
}
.ds-result-v2--ok  { border-left-color: var(--ds-green); }
.ds-result-v2--bad { border-left-color: var(--ds-red); }

.ds-result-v2__main { min-width: 0; }
.ds-result-v2__verdict {
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-text-bright);
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
}
.ds-result-v2__verdict-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
}
.ds-result-v2__verdict-icon--ok { background: var(--ds-green-bg); color: var(--ds-green); }
.ds-result-v2__verdict-icon--bad { background: var(--ds-red-bg); color: var(--ds-red); }

.ds-result-v2__story {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 13px;
    color: var(--ds-text);
    line-height: 1.5;
}
.ds-result-v2__line {
    display: flex; align-items: baseline; gap: 8px;
}
.ds-result-v2__line-label {
    font-size: 11px;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    width: 60px;
    flex-shrink: 0;
}
.ds-result-v2__line strong { color: var(--ds-text-bright); }
.ds-result-v2__line .price { font-variant-numeric: tabular-nums; }

.ds-result-v2__meta {
    display: flex; gap: 10px; align-items: center;
    font-size: 11.5px;
    color: var(--ds-text-dim);
    margin-top: 8px;
    flex-wrap: wrap;
}

.ds-result-v2__score {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 2px;
    padding: 0 4px;
    flex-shrink: 0;
}
.ds-result-v2__score-num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.ds-result-v2__score-num--good { color: var(--ds-green); }
.ds-result-v2__score-num--mid  { color: var(--ds-amber); }
.ds-result-v2__score-num--bad  { color: var(--ds-red); }
.ds-result-v2__score-label {
    font-size: 10px;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Position simulator */
.ds-sim {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    overflow: hidden;
    margin-bottom: var(--ds-s-4);
}
.ds-sim__head {
    padding: var(--ds-s-3) var(--ds-s-4);
    border-bottom: 1px solid var(--ds-border);
}
.ds-sim__body {
    padding: var(--ds-s-4);
}
.ds-sim__inputs {
    display: flex; gap: var(--ds-s-3); align-items: end;
    margin-bottom: var(--ds-s-4);
    flex-wrap: wrap;
}
.ds-sim__inputs > div { display: flex; flex-direction: column; gap: 4px; }
.ds-sim__inputs input,
.ds-sim__inputs select {
    width: 140px;
    padding: 8px 12px;
    background: var(--ds-bg-input);
    color: var(--ds-text-bright);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-md);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.ds-sim__results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--ds-s-3);
}
.ds-sim__result {
    padding: var(--ds-s-3);
    background: var(--ds-bg);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-md);
}
.ds-sim__result-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.ds-sim__result-horizon { font-size: 12px; font-weight: 600; color: var(--ds-text-muted); }
.ds-sim__result-profit {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.ds-sim__result-range {
    font-size: 11px;
    color: var(--ds-text-dim);
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN PAGE (special, no sidebar)
   ═══════════════════════════════════════════════════════════════════════ */

.ds-login-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: var(--ds-s-5);
    background: radial-gradient(ellipse at top, rgba(0,112,243,0.08) 0%, transparent 50%), var(--ds-bg);
}
.ds-login-card {
    width: 100%; max-width: 380px;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    padding: var(--ds-s-6);
}