/* ── BUZZ PROTOCOL DASHBOARD — SHARED STYLES ── */
:root {
  --bg: #0c0f14;
  --bg-elevated: #11151c;
  --surface: #161b24;
  --surface-hover: #1a2030;
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.1);
  --positive: #34d399;
  --positive-bg: rgba(52,211,153,0.08);
  --negative: #f87171;
  --negative-bg: rgba(248,113,113,0.08);
  --warning: #fbbf24;
  --warning-bg: rgba(251,191,36,0.08);
  --info: #60a5fa;
  --info-bg: rgba(96,165,250,0.08);
  --purple: #a78bfa;
  --purple-bg: rgba(167,139,250,0.08);
  --orange: #f97316;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #475569;
  --font-sans: 'Plus Jakarta Sans',-apple-system,sans-serif;
  --font-mono: 'JetBrains Mono',monospace;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 4px 16px rgba(0,0,0,0.25);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text-primary); font-family:var(--font-sans); font-size:14px; min-height:100vh; -webkit-font-smoothing:antialiased; }

/* ── HEADER/NAV ── */
.header { display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:56px; background:var(--bg-elevated); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.header-brand { font-weight:700; font-size:15px; letter-spacing:0.5px; color:var(--positive); }
.nav-links { display:flex; gap:4px; }
.nav-link { padding:6px 14px; border-radius:var(--radius-sm); color:var(--text-secondary); text-decoration:none; font-size:13px; font-weight:500; transition:all .15s; }
.nav-link:hover { color:var(--text-primary); background:var(--surface); }
.nav-link.active { color:var(--positive); background:var(--positive-bg); }
.header-meta { font-size:12px; color:var(--text-muted); font-family:var(--font-mono); }

/* ── LAYOUT ── */
.page { max-width:1400px; margin:0 auto; padding:20px 24px 60px; }
.section { margin-bottom:28px; }
.section-title { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:12px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

/* ── CARDS ── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.card-positive { border-color:rgba(52,211,153,0.2); }
.card-negative { border-color:rgba(248,113,113,0.2); }
.card-header { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.card-value { font-size:24px; font-weight:700; font-family:var(--font-mono); }
.card-sub { font-size:12px; color:var(--text-secondary); margin-top:4px; }
.card-row { display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:12px; }
.card-label { color:var(--text-muted); }

/* ── SYSTEM CARDS (3-column) ── */
.system-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; border-left:3px solid var(--text-muted); }
.system-card.profitable { border-left-color:var(--positive); }
.system-card.losing { border-left-color:var(--negative); }
.system-card .system-name { font-size:15px; font-weight:700; margin-bottom:2px; }
.system-card .strategy-tag { font-size:11px; color:var(--text-muted); font-family:var(--font-mono); }
.system-card .stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; }
.system-card .stat { font-size:12px; }
.system-card .stat-value { font-weight:600; font-family:var(--font-mono); }

/* ── TABLE ── */
.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { background:var(--bg-elevated); padding:10px 12px; text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:9px 12px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:12px; white-space:nowrap; }
tr:hover { background:var(--surface-hover); }
.positive { color:var(--positive); }
.negative { color:var(--negative); }

/* ── BADGES ── */
.badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:600; font-family:var(--font-mono); text-transform:uppercase; }
.badge-tp { background:var(--positive-bg); color:var(--positive); }
.badge-sl { background:var(--negative-bg); color:var(--negative); }
.badge-aged { background:var(--warning-bg); color:var(--warning); }
.badge-trail { background:var(--purple-bg); color:var(--purple); }
.badge-info { background:var(--info-bg); color:var(--info); }
.badge-long { background:rgba(52,211,153,0.12); color:var(--positive); }
.badge-short { background:rgba(248,113,113,0.12); color:var(--negative); }
.badge-lean-long { background:rgba(52,211,153,0.06); color:#86efac; }
.badge-lean-short { background:rgba(248,113,113,0.06); color:#fca5a5; }
.badge-neutral { background:rgba(148,163,184,0.1); color:var(--text-secondary); }
.badge-default { background:rgba(255,255,255,0.05); color:var(--text-secondary); }
.badge-legacy { background:rgba(255,255,255,0.03); color:var(--text-muted); font-style:italic; }
.badge-warning-text { background:var(--warning-bg); color:var(--warning); }

/* ── PROGRESS BAR ── */
.progress-bar { position:relative; height:20px; background:rgba(255,255,255,0.04); border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; border-radius:4px; transition:width .5s; }
.progress-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:11px; font-weight:600; font-family:var(--font-mono); }

/* ── SESSION CLOCK ── */
.session-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.session-block { padding:14px; text-align:center; border-radius:var(--radius); border:1px solid var(--border); }
.session-block.active { border-color:var(--positive); background:var(--positive-bg); }
.session-label { font-size:12px; font-weight:600; text-transform:uppercase; margin-bottom:6px; }
.session-range { font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); }

/* ── FUNDING GRID ── */
.funding-card { text-align:center; padding:16px; }
.funding-rate { font-size:20px; font-weight:700; font-family:var(--font-mono); }
.funding-low { color:var(--positive); }
.funding-mid { color:var(--warning); }
.funding-high { color:var(--negative); }

/* ── SKELETON ── */
.skeleton { background:linear-gradient(90deg, #1a1a2e 25%, #2a2a3e 50%, #1a1a2e 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:4px; height:1em; display:inline-block; vertical-align:middle; }
.skeleton-block { display:block; width:100%; }
.skeleton-card { height:120px; }
.skeleton-chart { height:200px; display:block; width:100%; }
.skeleton-row td { padding:12px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── LOADING BAR ── */
.loading-bar { position:fixed; top:0; left:0; height:2px; background:var(--positive); z-index:200; transition:width .3s; }
.loading-bar.hidden { opacity:0; transition:opacity .3s; }

/* ── SPLASH ── */
.splash { position:fixed; inset:0; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:500; transition:opacity .4s; }
.splash.fade-out { opacity:0; pointer-events:none; }
.splash-brand { font-size:28px; font-weight:800; color:var(--positive); letter-spacing:1px; margin-bottom:12px; }
.splash-sub { font-size:13px; color:var(--text-muted); }
.splash-dots { display:inline-flex; gap:4px; margin-top:16px; }
.splash-dots span { width:6px; height:6px; border-radius:50%; background:var(--positive); animation:pulse-dot 1s infinite; }
.splash-dots span:nth-child(2) { animation-delay:.15s; }
.splash-dots span:nth-child(3) { animation-delay:.3s; }
@keyframes pulse-dot { 0%,80%,100%{opacity:.3;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }

/* ── HEALTH PANEL ── */
.health-item { display:flex; align-items:center; justify-content:space-between; padding:9px 16px; border-bottom:1px solid var(--border); font-size:12px; }
.health-item:last-child { border-bottom:none; }
.health-name { display:flex; align-items:center; gap:8px; color:var(--text-secondary); }
.health-name::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--text-muted); flex-shrink:0; }
.health-item.ok .health-name::before { background:var(--positive); box-shadow:0 0 6px var(--positive); animation:healthPulse 2s ease-in-out infinite; }
.health-item.warn .health-name::before { background:var(--warning); box-shadow:0 0 4px var(--warning); }
.health-item.error .health-name::before { background:var(--negative); box-shadow:0 0 4px var(--negative); }
.health-item.unknown .health-name::before { background:var(--text-muted); }
.health-value { font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--text-muted); }
.health-item.ok .health-value { color:var(--positive); }
.health-item.warn .health-value { color:var(--warning); }
.health-item.error .health-value { color:var(--negative); }
@keyframes healthPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ── PRIVACY MODE ── */
body.privacy-mode .card-value,
body.privacy-mode .stat-value,
body.privacy-mode .stat-val,
body.privacy-mode .kpi-value,
body.privacy-mode .positive,
body.privacy-mode .negative,
body.privacy-mode td:nth-child(5),
body.privacy-mode td:nth-child(6) { filter:blur(8px); user-select:none; }

/* ── ERROR STATE ── */
.error-state { text-align:center; padding:24px; color:var(--text-muted); font-size:13px; }

/* ── PANEL (Original Dashboard Pattern) ── */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .2s; }
.panel:hover { border-color:var(--border-hover); }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); background:rgba(255,255,255,0.01); }
.panel-title { font-size:13px; font-weight:600; color:var(--text-secondary); letter-spacing:0.02em; }
.panel-subtitle { font-size:11px; color:var(--text-muted); font-family:var(--font-mono); margin-left:8px; }
.panel-badge { font-size:11px; font-family:var(--font-mono); padding:3px 10px; border-radius:20px; border:1px solid var(--border); color:var(--text-muted); font-weight:500; }
.panel-badge.badge-warning { border-color:rgba(251,191,36,0.3); color:var(--warning); }
.panel-body { padding:20px; }
.section-label { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px; margin-top:0; }

/* ── PERPS GRID (Original stat boxes) ── */
.perps-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
.perps-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.perps-grid.cols-4 { grid-template-columns:1fr 1fr 1fr 1fr; }
.perps-stat { background:rgba(255,255,255,0.015); padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); }
.perps-stat .stat-label { font-size:10px; font-weight:600; color:var(--text-muted); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px; }
.perps-stat .stat-val { font-family:var(--font-mono); font-size:20px; font-weight:600; }
.perps-stat .stat-val.sm { font-size:14px; }
.empty { color:var(--text-muted); font-size:12px; font-family:var(--font-mono); }

/* ── POSITION ROWS (Expandable) ── */
.pos-row { padding:10px 16px; border-bottom:1px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:12px; transition:background .15s; }
.pos-row:hover { background:var(--surface-hover); }
.pos-row:last-child { border-bottom:none; }
.pos-row .pos-left { display:flex; align-items:center; gap:8px; flex:1; }
.pos-row .pos-right { display:flex; align-items:center; gap:12px; }
.pos-row .pos-chevron { color:var(--text-muted); font-size:10px; transition:transform .2s; }
.pos-row .pos-chevron.open { transform:rotate(180deg); }
.pos-detail { display:none; padding:12px 16px 16px; border-bottom:1px solid var(--border); background:rgba(0,0,0,0.15); }
.pos-detail.open { display:block; }
.pos-detail .detail-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:10px; }
.pos-detail .detail-grid.cols-4 { grid-template-columns:1fr 1fr 1fr 1fr; }
.pos-detail .detail-box { background:rgba(255,255,255,0.02); padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--border); }
.pos-detail .detail-box .dl { font-size:9px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px; }
.pos-detail .detail-box .dv { font-family:var(--font-mono); font-size:13px; font-weight:600; }
.pos-detail .info-row { display:flex; gap:16px; font-size:11px; color:var(--text-secondary); font-family:var(--font-mono); margin-bottom:10px; }
.pos-detail .close-btns { display:flex; gap:6px; margin-top:8px; }
.pos-detail .close-btn { padding:4px 12px; border-radius:4px; border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--text-secondary); font-size:11px; font-family:var(--font-mono); font-weight:600; cursor:pointer; transition:all .15s; }
.pos-detail .close-btn:hover { background:var(--negative-bg); border-color:var(--negative); color:var(--negative); }

/* ── PAGE TRANSITION ── */
.page-transition { position:fixed; inset:0; background:rgba(12,15,20,0.85); z-index:600; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; backdrop-filter:blur(4px); }
.page-transition.active { opacity:1; }
.pt-spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--positive); border-radius:50%; animation:pt-spin .6s linear infinite; }
@keyframes pt-spin { to { transform:rotate(360deg); } }

/* ── HIGH PROB / R:R BADGE ── */
.badge-highprob { background:rgba(52,211,153,0.15); color:var(--positive); border:1px solid rgba(52,211,153,0.3); font-size:10px; padding:2px 8px; border-radius:4px; font-family:var(--font-mono); font-weight:700; }

/* ── RESPONSIVE ── */
@media (max-width:1200px) {
  #portfolio-cards { grid-template-columns:1fr 1fr !important; }
}
@media (max-width:768px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  #portfolio-cards { grid-template-columns:1fr !important; }
  .session-grid { grid-template-columns:1fr 1fr; }
  .header { padding:0 12px; }
  .page { padding:12px; }
}