/* ═══════════════════════════════════════════
   IDX Trading Lab — Premium Dashboard CSS
   Dark Theme with Glassmorphism
   ═══════════════════════════════════════════ */

/* ─── Design Tokens ─────────────────────── */
:root {
  --bg-base: #06080f;
  --bg-primary: #0b0f1a;
  --bg-secondary: #111827;
  --bg-card: rgba(17, 24, 39, 0.7);
  --bg-card-solid: #141c2b;
  --bg-card-hover: #1a2332;
  --bg-glass: rgba(255,255,255,0.025);
  --bg-input: rgba(255,255,255,0.05);
  --bg-overlay: rgba(0,0,0,0.6);

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-dim: #475569;

  --accent: #6366f1;
  --accent-hover: #818cf8;
  --accent-glow: rgba(99,102,241,0.25);
  --success: #10b981;
  --success-dim: rgba(16,185,129,0.15);
  --danger: #ef4444;
  --danger-dim: rgba(239,68,68,0.15);
  --warning: #f59e0b;
  --warning-dim: rgba(245,158,11,0.15);
  --info: #3b82f6;
  --info-dim: rgba(59,130,246,0.15);

  --border: rgba(255,255,255,0.06);
  --border-light: rgba(255,255,255,0.1);
  --border-accent: rgba(99,102,241,0.3);

  --sidebar-w: 260px;
  --topbar-h: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --shadow-card: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 30px rgba(99,102,241,0.1);

  --ease: cubic-bezier(0.4,0,0.2,1);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ─── Reset ──────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg-base);color:var(--text-primary);min-height:100vh;display:flex;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%}

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

/* ═══ SIDEBAR ════════════════════════════ */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;
  width:var(--sidebar-w);
  background:var(--bg-secondary);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  z-index:100;
  transition:transform 0.3s var(--ease);
}
.sidebar-brand{
  display:flex;align-items:center;gap:12px;
  padding:20px 20px 16px;
  border-bottom:1px solid var(--border);
}
.brand-icon{flex-shrink:0}
.brand-name{font-weight:700;font-size:1.15rem;display:block;letter-spacing:-0.02em}
.brand-sub{font-size:0.7rem;color:var(--text-muted);display:block;margin-top:1px;text-transform:uppercase;letter-spacing:0.08em}
.sidebar-section-label{
  font-size:0.68rem;font-weight:600;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:0.1em;
  padding:20px 20px 6px;
}
.sidebar-nav{display:flex;flex-direction:column;padding:4px 8px;flex:1;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:var(--radius-sm);
  color:var(--text-secondary);font-weight:500;font-size:0.92rem;
  transition:all 0.2s var(--ease);
  position:relative;margin-bottom:2px;
}
.nav-item:hover{color:var(--text-primary);background:rgba(255,255,255,0.04)}
.nav-item.active{
  color:var(--accent-hover);
  background:var(--accent-glow);
}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:60%;border-radius:0 3px 3px 0;
  background:var(--accent);
}
.sidebar-footer{
  padding:16px 20px;border-top:1px solid var(--border);
  margin-top:auto;
}
.system-status{display:flex;align-items:center;gap:8px;font-size:0.8rem;color:var(--text-secondary)}
.status-dot{
  width:8px;height:8px;border-radius:50%;background:var(--success);
  flex-shrink:0;
}
.status-dot.pulse{animation:pulse 2s ease-in-out infinite}
.status-dot.offline{background:var(--danger)}
.sidebar-version{font-size:0.68rem;color:var(--text-dim);margin-top:8px}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* ═══ MAIN CONTENT ═══════════════════════ */
.main-content{
  margin-left:var(--sidebar-w);flex:1;min-width:0;
  width:calc(100% - var(--sidebar-w));
  display:flex;flex-direction:column;min-height:100vh;
  background:var(--bg-base);
}
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--topbar-h);
  padding:0 28px;
  background:rgba(6,8,15,0.85);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.topbar-left{display:flex;align-items:center;gap:16px;min-width:0;flex:1}
.topbar-title-group{min-width:0}
.menu-toggle{display:none;padding:8px;border-radius:var(--radius-sm);color:var(--text-secondary)}
.menu-toggle:hover{background:rgba(255,255,255,0.05)}
.page-title{font-size:1.25rem;font-weight:700;letter-spacing:-0.02em}
.page-subtitle{font-size:0.75rem;color:var(--text-muted);display:block;margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.data-freshness{
  display:flex;align-items:center;gap:8px;min-width:0;
  padding:6px 14px;border-radius:var(--radius-full);
  background:rgba(255,255,255,0.04);border:1px solid var(--border);
  font-size:0.78rem;color:var(--text-secondary);white-space:nowrap;
}
.freshness-copy{display:grid;gap:1px;line-height:1.25}
.freshness-copy span{display:block}
.freshness-copy strong{margin-right:4px;color:var(--text-muted);font-weight:600}
.freshness-dot{width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0}
.btn-icon{
  padding:8px;border-radius:var(--radius-sm);
  color:var(--text-secondary);transition:all 0.2s;
}
.btn-icon:hover{background:rgba(255,255,255,0.06);color:var(--text-primary)}

/* Content Area */
.content-area{
  flex:1;padding:24px 28px 40px;
  animation:fadeIn 0.35s var(--ease);
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ─── Loading Screen ─────────────────────── */
.loading-screen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:60vh;gap:20px;color:var(--text-muted);
}
.loader-spinner{
  width:40px;height:40px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--accent);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ CARDS & GRID ═══════════════════════ */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

.card{
  background:var(--bg-card-solid);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  min-width:0;
  transition:all 0.25s var(--ease);
  animation:slideUp 0.4s var(--ease) both;
}
.card:hover{
  border-color:var(--border-light);
  box-shadow:var(--shadow-card);
}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.card-title{font-size:0.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.06em}
.card-icon{
  width:36px;height:36px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
}
.card-value{font-size:2rem;font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.card-change{font-size:0.78rem;margin-top:6px;display:flex;align-items:center;gap:4px}

/* KPI Card Variants */
.kpi-card{position:relative;overflow:hidden}
.kpi-card::after{
  content:'';position:absolute;top:-40%;right:-20%;
  width:180px;height:180px;border-radius:50%;
  opacity:0.04;pointer-events:none;
}
.kpi-card.accent::after{background:var(--accent)}
.kpi-card.success::after{background:var(--success)}
.kpi-card.danger::after{background:var(--danger)}
.kpi-card.warning::after{background:var(--warning)}

.kpi-card .card-icon.accent{background:var(--accent-glow);color:var(--accent)}
.kpi-card .card-icon.success{background:var(--success-dim);color:var(--success)}
.kpi-card .card-icon.danger{background:var(--danger-dim);color:var(--danger)}
.kpi-card .card-icon.warning{background:var(--warning-dim);color:var(--warning)}
.kpi-card .card-icon.info{background:var(--info-dim);color:var(--info)}

/* ═══ STATUS BADGES ══════════════════════ */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:var(--radius-full);
  font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;
}
.badge-success{background:var(--success-dim);color:var(--success)}
.badge-danger{background:var(--danger-dim);color:var(--danger)}
.badge-warning{background:var(--warning-dim);color:var(--warning)}
.badge-info{background:var(--info-dim);color:var(--info)}
.badge-neutral{background:rgba(255,255,255,0.06);color:var(--text-secondary)}
.badge-accent{background:var(--accent-glow);color:var(--accent-hover)}

.badge-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.badge-success .badge-dot{background:var(--success)}
.badge-danger .badge-dot{background:var(--danger)}
.badge-warning .badge-dot{background:var(--warning)}

/* ═══ SIGNAL CARDS ═══════════════════════ */
.signal-card{
  position:relative;overflow:hidden;
  border-left:4px solid var(--accent);
  padding:20px 24px;
}
.signal-card.score-high{border-left-color:var(--success)}
.signal-card.score-mid{border-left-color:var(--warning)}
.signal-card.score-low{border-left-color:var(--danger)}
.signal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.signal-ticker{font-size:1.5rem;font-weight:800;letter-spacing:-0.02em}
.signal-score{
  font-size:1.6rem;font-weight:800;font-family:var(--mono);
}
.signal-score.high{color:var(--success)}
.signal-score.mid{color:var(--warning)}
.signal-score.low{color:var(--danger)}
.signal-meta{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.signal-prices{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin-bottom:14px;
}
.price-item label{font-size:0.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;display:block;margin-bottom:3px}
.price-item .price-val{font-family:var(--mono);font-weight:600;font-size:0.95rem}
.price-item .price-val.entry{color:var(--info)}
.price-item .price-val.stop{color:var(--danger)}
.price-item .price-val.tp{color:var(--success)}
.signal-details{display:flex;flex-wrap:wrap;gap:16px;font-size:0.82rem;color:var(--text-secondary)}
.signal-detail{display:flex;flex-direction:column;gap:2px}
.signal-detail .detail-label{font-size:0.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em}
.signal-reason{
  margin-top:12px;padding:10px 14px;
  background:rgba(255,255,255,0.03);border-radius:var(--radius-sm);
  font-size:0.82rem;color:var(--text-secondary);
  border-left:2px solid var(--accent);
}

/* ═══ TABLES ═════════════════════════════ */
.table-wrapper{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--border)}
.data-table{width:100%;border-collapse:collapse;font-size:0.85rem}
.data-table th{
  background:rgba(255,255,255,0.03);
  padding:12px 16px;text-align:left;
  font-size:0.72rem;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.06em;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;
}
.data-table td{
  padding:12px 16px;border-bottom:1px solid var(--border);
  color:var(--text-secondary);
}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:rgba(255,255,255,0.02)}
.data-table .mono{font-family:var(--mono);font-size:0.82rem}
.data-table .text-success{color:var(--success)}
.data-table .text-danger{color:var(--danger)}
.data-table .text-warning{color:var(--warning)}

/* ═══ CHARTS ═════════════════════════════ */
/* Model V2 Accuracy Audit */
.audit-meta{
  margin-top:-6px;
  margin-bottom:16px;
  color:var(--text-muted);
  font-size:0.78rem;
  font-family:var(--mono);
}
.audit-metric-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.audit-metric{
  min-height:100px;
  padding:14px;
  border:1px solid var(--border);
  border-left:3px solid var(--text-dim);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.025);
}
.audit-metric.success{border-left-color:var(--success);background:rgba(16,185,129,0.06)}
.audit-metric.warning{border-left-color:var(--warning);background:rgba(245,158,11,0.06)}
.audit-metric.danger{border-left-color:var(--danger);background:rgba(239,68,68,0.06)}
.audit-metric.neutral{border-left-color:var(--text-dim)}
.audit-label{
  color:var(--text-muted);
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.audit-value{
  margin-top:8px;
  color:var(--text-primary);
  font-family:var(--mono);
  font-size:1.25rem;
  font-weight:800;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.audit-sub{
  margin-top:6px;
  color:var(--text-secondary);
  font-size:0.76rem;
  line-height:1.35;
}
.audit-panel{
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.02);
  min-width:0;
}
.audit-panel-title{
  margin-bottom:12px;
  color:var(--text-secondary);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.audit-table .data-table{font-size:0.8rem}
.audit-table .data-table th,
.audit-table .data-table td{padding:10px 12px}

.chart-container{position:relative;width:100%;height:280px}
.chart-container.tall{height:360px}

/* ═══ SECTION HEADERS ════════════════════ */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
}
.section-title{font-size:1.15rem;font-weight:700;letter-spacing:-0.01em}
.section-subtitle{font-size:0.82rem;color:var(--text-muted);margin-top:2px}

/* ═══ REGIME / STATUS PANELS ═════════════ */
.status-panel{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;border-radius:var(--radius-md);
  border:1px solid var(--border);
}
.status-panel.risk-on{background:var(--success-dim);border-color:rgba(16,185,129,0.2)}
.status-panel.risk-off{background:var(--danger-dim);border-color:rgba(239,68,68,0.2)}
.status-panel.cooldown{background:var(--warning-dim);border-color:rgba(245,158,11,0.2)}
.status-icon{font-size:1.5rem}
.status-label{font-weight:700;font-size:0.95rem}
.status-desc{font-size:0.78rem;color:var(--text-secondary);margin-top:2px}

/* ─── Regime Checks Grid ──────────────── */
.checks-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.check-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.02);border:1px solid var(--border);
  font-size:0.82rem;
}
.check-item .check-icon{font-size:1rem;flex-shrink:0}
.check-item .check-value{margin-left:auto;font-family:var(--mono);font-weight:600;font-size:0.85rem}
.check-item.pass{border-color:rgba(16,185,129,0.2)}
.check-item.pass .check-icon{color:var(--success)}
.check-item.pass .check-value{color:var(--success)}
.check-item.fail{border-color:rgba(239,68,68,0.15)}
.check-item.fail .check-icon{color:var(--danger)}
.check-item.fail .check-value{color:var(--danger)}

/* ═══ PROGRESS BAR ═══════════════════════ */
.progress-bar{
  height:8px;border-radius:4px;background:rgba(255,255,255,0.06);overflow:hidden;
}
.progress-fill{height:100%;border-radius:4px;transition:width 0.6s var(--ease)}
.progress-fill.accent{background:linear-gradient(90deg,var(--accent),var(--accent-hover))}
.progress-fill.success{background:var(--success)}
.progress-fill.danger{background:var(--danger)}
.progress-fill.warning{background:var(--warning)}

.rollout-progress{margin-bottom:18px}
.rollout-progress-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;font-size:0.82rem;color:var(--text-secondary);
}
.rollout-progress-meta strong{font-family:var(--mono);color:var(--text-primary)}
.rollout-detail-grid{gap:32px}
.rollout-detail-grid>div{min-width:0}
.rollout-detail-grid .metric-row{gap:16px;min-width:0}
.rollout-detail-grid .metric-value{
  min-width:0;max-width:60%;text-align:right;white-space:normal;overflow-wrap:anywhere;
}
.rollout-note{
  margin-top:16px;padding:12px 14px;border:1px solid transparent;
  border-radius:var(--radius-sm);font-size:0.82rem;line-height:1.5;
}
.rollout-note.warning{background:var(--warning-dim);border-color:rgba(245,158,11,0.2);color:var(--warning)}
.rollout-note.success{background:var(--success-dim);border-color:rgba(16,185,129,0.2);color:var(--success)}

/* ═══ METRIC ROW ═════════════════════════ */
.metric-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--border);
  font-size:0.85rem;
}
.metric-row:last-child{border-bottom:none}
.metric-label{color:var(--text-secondary)}
.metric-value{font-family:var(--mono);font-weight:600}

/* ═══ FUNNEL ═════════════════════════════ */
.funnel-step{
  display:flex;align-items:center;gap:14px;
  padding:10px 0;
}
.funnel-bar{flex:1;height:28px;border-radius:6px;position:relative;overflow:hidden;background:rgba(255,255,255,0.04)}
.funnel-fill{
  height:100%;border-radius:6px;
  display:flex;align-items:center;padding:0 12px;
  font-size:0.75rem;font-weight:600;color:white;
  transition:width 0.6s var(--ease);
  min-width:fit-content;
}
.funnel-label{width:140px;font-size:0.82rem;color:var(--text-secondary);flex-shrink:0}
.funnel-count{width:40px;text-align:right;font-family:var(--mono);font-weight:600;font-size:0.9rem;flex-shrink:0}

/* ═══ TOAST ══════════════════════════════ */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{
  padding:14px 20px;border-radius:var(--radius-md);
  background:var(--bg-secondary);border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  font-size:0.85rem;
  animation:toastIn 0.3s var(--ease);
  display:flex;align-items:center;gap:10px;
  max-width:380px;
}
.toast.success{border-left:3px solid var(--success)}
.toast.error{border-left:3px solid var(--danger)}
.toast.info{border-left:3px solid var(--info)}
.toast-exit{animation:toastOut 0.25s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{to{opacity:0;transform:translateX(40px)}}

/* ═══ EMPTY STATE ════════════════════════ */
.empty-state{
  text-align:center;padding:48px 24px;color:var(--text-muted);
}
.empty-state .empty-icon{font-size:3rem;margin-bottom:12px;opacity:0.3}
.empty-state p{font-size:0.9rem}

/* ═══ TABS ═══════════════════════════════ */
.tabs{display:flex;gap:4px;margin-bottom:20px;background:rgba(255,255,255,0.03);padding:4px;border-radius:var(--radius-md)}
.tab{
  padding:8px 18px;border-radius:var(--radius-sm);
  font-size:0.82rem;font-weight:500;color:var(--text-muted);
  transition:all 0.2s;cursor:pointer;
}
.tab:hover{color:var(--text-primary)}
.tab.active{background:var(--accent);color:white}

/* ═══ ANIMATION DELAYS ═══════════════════ */
.delay-1{animation-delay:0.05s}
.delay-2{animation-delay:0.1s}
.delay-3{animation-delay:0.15s}
.delay-4{animation-delay:0.2s}
.delay-5{animation-delay:0.25s}
.delay-6{animation-delay:0.3s}

/* ═══ UTILITIES ══════════════════════════ */
.text-success{color:var(--success)!important}
.text-danger{color:var(--danger)!important}
.text-warning{color:var(--warning)!important}
.text-info{color:var(--info)!important}
.text-accent{color:var(--accent-hover)!important}
.text-muted{color:var(--text-muted)!important}
.text-mono{font-family:var(--mono)}
.fw-700{font-weight:700}
.fw-800{font-weight:800}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}
.mb-16{margin-bottom:16px}
.mb-24{margin-bottom:24px}
.gap-12{gap:12px}
.gap-20{gap:20px}
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.flex-wrap{flex-wrap:wrap}

/* ═══ RESPONSIVE ═════════════════════════ */
@media(max-width:1200px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .audit-metric-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main-content{margin-left:0;width:100%;min-width:0}
  .menu-toggle{display:flex}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .signal-prices{grid-template-columns:repeat(2,1fr)}
  .checks-grid{grid-template-columns:1fr}
  .audit-metric-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .content-area{padding:16px}
  .topbar{padding:0 10px;gap:8px}
  .topbar-left{gap:6px}
  .menu-toggle,.btn-icon{padding:6px;flex-shrink:0}
  .page-title{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .page-subtitle,.pipeline-time,.freshness-copy strong{display:none!important}
  .data-freshness{padding:6px 9px;font-size:0.7rem;max-width:105px;overflow:hidden}
  .topbar-right{gap:4px}
  .grid-4{grid-template-columns:1fr}
  .audit-metric-grid{grid-template-columns:1fr}
}

/* ═══ DATA FRESHNESS WARNING ═════════════ */
.stale-banner{
  padding:14px 24px;
  font-size:0.88rem;
  font-weight:500;
  line-height:1.5;
  overflow-wrap:anywhere;
  border-bottom:1px solid transparent;
  animation:slideDown 0.3s var(--ease);
  position:relative;
  z-index:40;
}
.stale-warning-bg{
  background:linear-gradient(90deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05));
  border-bottom-color:rgba(245,158,11,0.2);
  color:var(--warning);
}
.stale-critical-bg{
  background:linear-gradient(90deg, rgba(239,68,68,0.18), rgba(239,68,68,0.06));
  border-bottom-color:rgba(239,68,68,0.25);
  color:var(--danger);
}
.stale-banner strong{font-weight:700}
@media(max-width:600px){.stale-banner{padding:12px 16px}}
.freshness-dot.stale-warning{background:var(--warning);animation:pulse 1.5s ease-in-out infinite}
.freshness-dot.stale-critical{background:var(--danger);animation:pulse 1s ease-in-out infinite}
@keyframes slideDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}