/* Reference site design tokens - integrated with existing theme */
:root {
  --page-max: 1440px;
  --radius-card: 14px;
  --text-2: rgba(255,255,255,.7);
  --text-3: rgba(255,255,255,.45);
  --gold: #c9a227;
  --gold-bright: #e6c355;
  --glass-border: rgba(139,92,246,.15);
}

/* Page container — no extra padding (relies on #view) */
.page { max-width: var(--page-max); margin: 0 auto; }
.page-title { font-size: 22px; font-weight: 800; margin: 4px 0 18px; letter-spacing: .5px; }
.page-sub { font-size: 13px; color: var(--text-3); margin: -12px 0 16px; }

/* Glass card */
.glass-card {
  position:relative; background:linear-gradient(160deg,rgba(139,92,246,.1),rgba(8,8,10,.7));
  border:1px solid var(--glass-border); border-radius:14px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-card),inset 0 1px rgba(255,255,255,.04);
  transition:transform .25s ease,box-shadow .25s ease;
}
.glass-card:hover { border-color:rgba(139,92,246,.35); box-shadow:0 8px 32px rgba(0,0,0,.35); }
.glass-card::before {
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; border-radius:14px;
  background:linear-gradient(120deg,rgba(255,255,255,.04),transparent 40%); pointer-events:none;
}

/* Stat hero block */
.stat-hero { display:flex; align-items:center; gap:14px; padding:18px 20px; }
.stat-hero .icon {
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  background:linear-gradient(135deg,var(--bg-3),var(--bg-1))
  border:1px solid var(glass-border); box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.stat-hero .lbl { font-size:12px; color:var(--text-3); }
.stat-hero .val { font-size:24px; font-weight:800; line-height:1.2; }
.stat-hero .trend { font-size:12px; }

/* Section title with gold accent bar */
.section-title-s {  /* renamed to avoid conflict with existing .section-title */
  display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700;
  margin:0 0 12px; color:var(--ink);
}
.section-title-s::before {
  content:""; width:4px; height:16px; border-radius:2px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
}
.section-title-s .grad-text {
  background:linear-gradient(120deg,var(--gold-bright),#fff,var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Pills */
.pill-s {  /* renamed to avoid clash */
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 10px; border-radius:999px; font-size:12px;
  border:1px solid var(--glass-border); background:rgba(139,92,246,.08); color:var(--text-2);
}
.pill-s.active { border-color:rgba(139,92,246,.5); color:var(--blue); background:rgba(139,92,246,.15); }

/* Animations */
@keyframes fadeUp-s { 0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fade-up-s { animation:fadeUp-s .4s ease both; }

/* Change badge */
.chg-badge-s {
  display:inline-flex; align-items:center; gap:2px;
  padding:1px 8px; border-radius:6px; font-size:12px; font-weight:600;
}
.chg-badge-s.up { background:rgba(248,113,113,.15); color:var(--up); }
.chg-badge-s.down { backgound:rgba(52,211,153,.15); color:var(--down); }

/* Workbench mode buttons */
.wb-btn {
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:10px; font-size:13px; font-weight:600;
  border:1px solid var(--glass-border); cursor:pointer;
  background:rgba(255,255,255,.04); color:var(--ink);
  transition:background .2s,border-color .2s;
}
.wb-btn:hover { background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.35); }
.wb-btn .wb-icon { font-size:16px; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-thumb { background:rgba(139,92,246,.3); border-radius:3px; }
::-webkit-scrollbar-track { backgound:transparent; }

@media (max-width:768px) {
  .page { padding:12px; }
  .page-title { font-size:18px; }
  .stat-hero { padding:14px 16px; }
}