:root {
  color-scheme: dark;
  --bg: #09090c;
  --sidebar: #050507;
  --surface: #111116;
  --surface-2: #17171d;
  --surface-3: #202027;
  --line: #292930;
  --line-soft: #202026;
  --text: #f5f5f7;
  --muted: #8d8d98;
  --subtle: #5e5e69;
  --cyan: #25f4ee;
  --cyan-soft: rgba(37, 244, 238, .13);
  --pink: #fe2c55;
  --pink-soft: rgba(254, 44, 85, .15);
  --warning: #ffbe36;
  --r-sm: 5px;
  --r-md: 10px;
  --r-lg: 18px;
  --shadow: 0 18px 60px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 0; color: var(--text); background: var(--bg); font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: 76px; display: flex; flex-direction: column; align-items: center; background: var(--sidebar); border-right: 1px solid #18181d; }
.brand { position: relative; width: 100%; height: 74px; display: grid; place-items: center; border-bottom: 1px solid #18181d; font-family: "Arial Narrow", sans-serif; font-weight: 900; font-size: 24px; font-style: italic; }
.brand span { text-shadow: -3px -2px 0 var(--cyan), 3px 2px 0 var(--pink); }
.brand i { position: absolute; right: 10px; top: 14px; width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 12px var(--cyan); }
.primary-nav { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 8px; padding-top: 20px; }
.nav-icon { position: relative; width: 56px; height: 52px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 3px; color: #777781; }
.nav-icon > span { font-size: 21px; line-height: 1; }
.nav-icon small { font-size: 10px; letter-spacing: .06em; }
.nav-icon::before { content: ""; position: absolute; left: -10px; top: 13px; width: 3px; height: 25px; background: transparent; }
.nav-icon:hover { color: var(--text); }
.nav-icon.active { color: var(--text); background: #17171c; border-radius: var(--r-sm); }
.nav-icon.active > span { color: var(--cyan); text-shadow: 3px 2px 0 var(--pink); }
.nav-icon.active::before { background: linear-gradient(var(--cyan) 50%, var(--pink) 50%); }
.nav-icon.settings { margin-bottom: 16px; }

.app-shell { min-height: 100vh; margin-left: 76px; }
.topbar { height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line-soft); background: rgba(9,9,12,.92); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 30; }
.topbar-left, .context-controls, .timezone, .profile, .breadcrumb { display: flex; align-items: center; }
.breadcrumb { gap: 9px; color: var(--muted); font-size: 13px; }
.breadcrumb b { color: #42424b; }.breadcrumb strong { color: var(--text); font-weight: 550; }
.context-controls { height: 100%; gap: 20px; }
.context-controls label { display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px; }
.context-controls label > span { color: var(--muted); font-size: 12px; }
.context-controls select { max-width: 138px; color: var(--text); background: transparent; border: 0; cursor: pointer; }
.timezone { gap: 8px; padding-left: 20px; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; }.timezone i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }.timezone time { color: var(--text); font-variant-numeric: tabular-nums; }
.profile { gap: 9px; border: 0; background: transparent; cursor: pointer; }.profile span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #050507; background: linear-gradient(135deg, var(--cyan), #b8fff9); font-weight: 800; font-size: 11px; }.profile b { font-size: 12px; }
.mobile-menu, .mobile-context { display: none; }

.workspace { display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.section-nav { min-height: calc(100vh - 74px); padding: 26px 16px; border-right: 1px solid var(--line-soft); background: #0c0c10; }
.section-title { display: flex; flex-direction: column; padding: 0 8px 22px; }.section-title span { color: var(--cyan); letter-spacing: .18em; font-size: 9px; font-weight: 800; }.section-title strong { margin-top: 4px; font-size: 19px; letter-spacing: -.03em; }
.menu-search { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-sm); color: var(--subtle); }.menu-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }.menu-search input::placeholder { color: #55555f; }
.section-nav nav { display: grid; gap: 5px; margin-top: 18px; }.nav-item { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 10px; text-decoration: none; color: var(--muted); border-radius: var(--r-sm); font-size: 12px; }.nav-item span { color: #4f4f58; font-size: 17px; }.nav-item:hover { color: var(--text); background: #141419; }.nav-item.active { color: var(--text); background: linear-gradient(90deg, var(--cyan-soft), transparent); }.nav-item.active i { position: absolute; left: 0; width: 2px; height: 18px; background: var(--cyan); }
.pulse-card { margin-top: 34px; padding: 16px; background: #111116; border: 1px solid var(--line-soft); border-radius: var(--r-md); display: flex; flex-direction: column; align-items: flex-start; }.pulse-orbit { position: relative; width: 34px; height: 34px; margin-bottom: 12px; border: 1px solid #34343c; border-radius: 50%; }.pulse-orbit::after { content:""; position:absolute; inset:6px; border:1px solid #34343c; border-radius:50%; }.pulse-orbit i { position:absolute; z-index:1; left:14px; top:14px; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow: 0 0 12px var(--cyan); }.pulse-card span { color: var(--muted); font-size: 10px; }.pulse-card strong { margin-top: 3px; font-size: 13px; }.pulse-card small { margin-top: 8px; color: var(--subtle); font-size: 9px; }

.content { min-width: 0; padding: 34px clamp(20px, 3vw, 48px) 48px; overflow: hidden; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }.eyebrow { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .17em; }.page-intro h1 { margin: 7px 0 6px; font-family: "Arial Narrow", "Segoe UI", sans-serif; font-size: clamp(32px, 3vw, 48px); letter-spacing: -.06em; line-height: 1; }.page-intro h1 span { margin-left: 10px; color: #676771; font-weight: 500; }.page-intro p { margin: 0; color: var(--muted); font-size: 12px; }.live-state { display: grid; grid-template-columns: 8px auto; align-items: center; gap: 3px 8px; padding-bottom: 3px; color: #bdbdc6; font-size: 11px; }.live-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }.live-state time { grid-column: 2; color: var(--subtle); font-variant-numeric: tabular-nums; }
.filter-strip { display: flex; align-items: flex-end; gap: 22px; margin-bottom: 18px; padding: 13px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
.quick-range { display: flex; padding: 3px; background: #09090c; border: 1px solid var(--line-soft); border-radius: 6px; }.quick-range button { height: 32px; padding: 0 12px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }.quick-range button.active { color: #060608; background: var(--text); font-weight: 700; }
.date-range { display: flex; align-items: flex-end; gap: 10px; }.date-range > i { padding-bottom: 8px; color: var(--subtle); font-style: normal; }.date-range label { display: grid; gap: 5px; }.date-range label span { color: var(--subtle); font-size: 9px; letter-spacing: .06em; }.date-range input { width: 137px; height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #0b0b0f; color: var(--text); font-size: 11px; color-scheme: dark; }
.filter-actions { display: flex; gap: 8px; margin-left: auto; }.button { height: 36px; border-radius: var(--r-sm); cursor: pointer; padding: 0 15px; border: 1px solid var(--line); background: transparent; font-size: 11px; }.button.ghost { color: var(--muted); }.button.primary { display: flex; align-items: center; gap: 18px; border-color: var(--cyan); color: #060608; background: var(--cyan); font-weight: 800; }.button.primary b { font-size: 15px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 18px; align-items: start; }.dashboard-main { min-width: 0; }.metrics { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }.metric { position: relative; min-height: 148px; padding: 17px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }.metric:first-child { border-radius: var(--r-lg) 4px 4px 4px; }.metric:last-child { border-radius: 4px var(--r-lg) 4px 4px; }.metric.featured { background: linear-gradient(145deg, #162525, #0e1215 72%); border-color: #254644; }.metric.featured::after { content:""; position:absolute; right:-35px; top:-35px; width:90px; height:90px; border: 1px solid rgba(37,244,238,.18); border-radius:50%; box-shadow: 0 0 0 18px rgba(37,244,238,.035), 0 0 0 36px rgba(37,244,238,.018); }.metric-head { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:10px; }.metric-head b { color:var(--cyan); font-size:9px; }.metric-head .pink-text { color:var(--pink); }.metric > strong { display:block; margin-top:16px; font-family:"Arial Narrow", "Segoe UI", sans-serif; font-size:29px; letter-spacing:-.04em; line-height:1; }.metric > strong em { color:var(--muted); font-size:12px; font-style:normal; margin-left:3px; }.metric > small { position:absolute; left:17px; bottom:15px; color:var(--subtle); font-size:9px; }.metric > small i { display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:5px; }.cyan-dot { background:var(--cyan); box-shadow:0 0 7px var(--cyan); }.pink-dot { background:var(--pink); box-shadow:0 0 7px var(--pink); }.mini-bars { position:absolute; right:15px; bottom:18px; display:flex; align-items:flex-end; gap:3px; height:31px; }.mini-bars i { width:4px; background:var(--cyan); opacity:.26; }.mini-bars i:nth-child(1){height:30%}.mini-bars i:nth-child(2){height:48%}.mini-bars i:nth-child(3){height:42%}.mini-bars i:nth-child(4){height:66%}.mini-bars i:nth-child(5){height:58%}.mini-bars i:nth-child(6){height:79%}.mini-bars i:nth-child(7){height:100%;opacity:1}.rate-line { height:3px; margin-top:17px; background:#27272e; }.rate-line span { display:block; width:82.8%; height:100%; background:linear-gradient(90deg,var(--cyan),var(--pink)); }

.report-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 4px 4px var(--r-lg) var(--r-lg); overflow: visible; }.report-head { min-height: 56px; display:flex; align-items:center; justify-content:space-between; padding:0 14px 0 18px; border-bottom:1px solid var(--line); }.view-tabs { display:flex; align-self:stretch; gap:22px; }.view-tabs button { position:relative; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; }.view-tabs button.active { color:var(--text); font-weight:700; }.view-tabs button.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--cyan) 55%, var(--pink) 55%); }.report-tools { display:flex; align-items:center; gap:5px; color:var(--subtle); font-size:9px; }.report-tools button { height:29px; border:1px solid var(--line); border-radius:var(--r-sm); background:#15151a; color:var(--muted); cursor:pointer; font-size:10px; }.report-tools > span { margin-right:7px; }.column-control { position:relative; }.column-menu { position:absolute; z-index:4; right:0; top:35px; width:190px; padding:13px; background:#1a1a20; border:1px solid #34343d; border-radius:var(--r-sm); box-shadow:var(--shadow); display:none; }.column-menu.open { display:block; }.column-menu label { display:flex; align-items:center; justify-content:space-between; color:var(--text); font-size:11px; }.column-menu small { display:block; margin-top:6px; color:var(--subtle); }.table-scroll { overflow-x:auto; }.table-scroll::-webkit-scrollbar { height:6px; }.table-scroll::-webkit-scrollbar-thumb { background:#33333b; }.report-panel table { width:100%; min-width:940px; border-collapse:collapse; font-size:10px; }.report-panel th { height:41px; padding:0 12px; color:#686873; font-weight:500; text-align:left; white-space:nowrap; background:#0d0d11; }.report-panel th span { color:#3f3f47; }.report-panel td { height:58px; padding:0 12px; border-top:1px solid var(--line-soft); color:#b8b8c1; white-space:nowrap; font-variant-numeric:tabular-nums; }.report-panel tbody tr { transition:background .18s ease; }.report-panel tbody tr:hover { background:#17171d; }.report-panel td strong { color:var(--text); font-weight:650; }.report-panel td .pink, .report-panel td.pink { color:#ff718d; }.date-cell { display:flex; align-items:center; gap:8px; }.date-cell span { color:var(--text); font-family:"Arial Narrow",sans-serif;font-size:13px;font-weight:700; }.date-cell small { padding:2px 4px; color:var(--cyan); background:var(--cyan-soft); border-radius:2px; font-size:7px; }.cell-trend { display:block; margin-top:3px; color:var(--cyan); font-size:8px; }.muted { display:block; margin-top:3px; color:var(--subtle); }.money-cell { color:#e2e2e7!important; }.type-chip { display:inline-flex; padding:4px 7px; color:#b6b6bf; background:#222228; border-radius:3px; }.type-chip.hot { color:#ff8098; background:var(--pink-soft); }.rate-cell { min-width:88px; display:grid; grid-template-columns:45px auto; align-items:center; gap:4px; }.rate-cell > span { grid-row:1; width:45px; height:3px; background:linear-gradient(90deg,var(--cyan) var(--rate),#2b2b32 var(--rate)); }.rate-cell b { font-size:9px; }.rate-cell small { grid-column:1/-1; color:var(--subtle);font-size:8px; }.empty-state { height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--subtle); }.empty-state span { font-size:26px; }.empty-state strong { color:var(--muted)!important; }.table-footer { min-height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; border-top:1px solid var(--line); color:var(--subtle); font-size:9px; }.table-footer div { display:flex;align-items:center;gap:7px; }.table-footer button { width:25px;height:25px;border:1px solid var(--line);background:#15151a;color:#777;border-radius:3px; }.table-footer b { color:var(--text); }.compact .report-panel td { height:40px; }

.reel-preview { position:sticky; top:92px; min-height:474px; padding:11px; background:#111116; border:1px solid #303039; border-radius:20px; box-shadow:var(--shadow); overflow:hidden; }.reel-preview::before { content:""; position:absolute; z-index:2; top:5px; left:50%; width:54px; height:4px; transform:translateX(-50%); background:#2a2a31;border-radius:9px; }.reel-top,.reel-foot { height:40px; display:flex;align-items:center;justify-content:space-between;padding:0 5px;color:#aaaab3;font-size:10px; }.reel-top span { color:var(--text);font-weight:700; }.reel-stage { position:relative; height:378px; padding:29px 18px; overflow:hidden; background:radial-gradient(circle at 50% 35%,rgba(37,244,238,.19),transparent 32%),radial-gradient(circle at 70% 66%,rgba(254,44,85,.16),transparent 34%),#08090c;border-radius:10px; }.signal-lines { position:absolute;inset:0;opacity:.24; }.signal-lines i { position:absolute;border:1px solid #45c8c4;border-radius:50%; }.signal-lines i:nth-child(1){width:260px;height:260px;left:-80px;top:-80px}.signal-lines i:nth-child(2){width:190px;height:190px;right:-90px;bottom:-40px;border-color:var(--pink)}.signal-lines i:nth-child(3){width:100%;height:1px;left:0;top:52%;border:0;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}.gift-mark { position:relative;width:58px;height:58px;display:grid;place-items:center;margin:34px auto 16px;transform:rotate(8deg);background:linear-gradient(135deg,var(--cyan),#b9fff9);box-shadow:-8px 8px 0 var(--pink); }.gift-mark span { color:#050507;font-size:25px;transform:rotate(-8deg); }.reel-stage > p { position:relative;margin:0;text-align:center;color:#a6a6af;font-size:10px; }.reel-stage > strong { position:relative;display:block;margin-top:3px;text-align:center;font-family:"Arial Narrow",sans-serif;font-size:46px;letter-spacing:-.05em;text-shadow:2px 2px 0 rgba(254,44,85,.55); }.reel-stage > small { position:relative;display:block;text-align:center;color:var(--cyan);letter-spacing:.18em;font-size:7px; }.reel-caption { position:absolute;left:14px;right:48px;bottom:16px; }.reel-caption span { color:var(--cyan);font-size:8px; }.reel-caption p { margin:3px 0 0;color:#f1f1f3;font-size:9px; }.reel-actions { position:absolute;right:9px;bottom:13px;display:flex;flex-direction:column;gap:12px; }.reel-actions button { display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;border:0;background:transparent;color:var(--text);font-size:7px; }.reel-actions i { width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(15,15,19,.75);font-style:normal;font-size:12px;backdrop-filter:blur(5px); }.reel-actions button:first-child i { color:var(--pink); }.reel-actions button:nth-child(2) i { color:var(--cyan); }.reel-foot i { display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cyan); }.reel-foot b { color:#666670;font-size:9px; }
.toast { position:fixed; z-index:100; left:50%; bottom:22px; transform:translate(-50%,20px); padding:10px 15px; color:#050507; background:var(--cyan); border-radius:4px; font-weight:700; font-size:11px; opacity:0; pointer-events:none; transition:.2s ease; box-shadow:0 10px 35px rgba(37,244,238,.22); }.toast.show { opacity:1;transform:translate(-50%,0); }

@media (max-width: 1180px) {
  .dashboard-grid { grid-template-columns:minmax(0,1fr); }.reel-preview { position:relative;top:0;display:none; }.metrics { grid-template-columns:repeat(2,1fr); }.metric:nth-child(2) { border-radius:4px var(--r-lg) 4px 4px; }.context-controls label > span,.timezone span { display:none; }
}
@media (max-width: 860px) {
  .sidebar { transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow); }.sidebar.open { transform:translateX(0); }.app-shell { margin-left:0; }.topbar { height:60px;padding:0 16px; }.mobile-menu { display:block;margin-right:10px;border:0;background:transparent;font-size:18px; }.breadcrumb span,.breadcrumb b,.context-controls { display:none; }.mobile-context { display:flex;align-items:center;gap:7px;height:30px;padding:0 16px;border-bottom:1px solid var(--line-soft);color:var(--muted);font-size:9px; }.mobile-context b { color:var(--cyan); }.workspace { grid-template-columns:1fr; }.section-nav { display:none; }.content { padding:24px 16px 36px; }.page-intro { align-items:flex-start; }.live-state { display:none; }.filter-strip { flex-wrap:wrap;align-items:center; }.filter-actions { margin-left:0; }.date-range { order:3;width:100%; }.date-range label { flex:1; }.date-range input { width:100%; }
}
@media (max-width: 560px) {
  .page-intro h1 span { display:block;margin:4px 0 0; }.page-intro p { max-width:300px;line-height:1.6; }.filter-strip { gap:12px; }.quick-range { width:100%; }.quick-range button { flex:1; }.filter-actions { width:100%; }.filter-actions .button { flex:1; }.metrics { grid-template-columns:1fr 1fr; }.metric { min-height:130px;padding:14px; }.metric > strong { font-size:24px; }.metric > small { left:14px; }.report-head { align-items:flex-start;flex-direction:column;padding:0 12px 10px; }.view-tabs { height:50px; }.report-tools { width:100%;justify-content:flex-end; }.report-tools > span { margin-right:auto; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important; } }

/* Data-first table hierarchy and issued-user drilldown */
.report-panel table { min-width:1080px; font-size:12px; }
.report-panel th { height:46px; padding:0 14px; color:#74747f; font-size:11px; font-weight:550; }
.report-panel td { height:72px; padding:0 14px; font-size:12px; }
.report-panel td strong { font-size:13px; font-weight:700; }
.date-cell span { font-size:15px; }
.date-cell small { padding:3px 5px; font-size:8px; }
.cell-trend { margin-top:4px; font-size:9px; }
.muted { margin-top:4px; font-size:9px; }
.type-chip { padding:5px 8px; font-size:11px; }
.rate-cell { min-width:92px; grid-template-columns:48px auto; gap:5px; }
.rate-cell > span { width:48px; }
.rate-cell b { font-size:11px; }
.rate-cell small { font-size:9px; }
.primary-money { min-width:150px; background:linear-gradient(90deg,rgba(37,244,238,.055),transparent); }
.primary-money small { display:block; margin-bottom:5px; color:#70707b; font-size:8px; letter-spacing:.08em; }
.primary-money strong { color:var(--cyan)!important; font-family:"Arial Narrow","Segoe UI",sans-serif; font-size:16px!important; letter-spacing:.01em; text-shadow:0 0 15px rgba(37,244,238,.14); }
.primary-money.bonus { background:linear-gradient(90deg,rgba(254,44,85,.07),transparent); }
.primary-money.bonus strong { color:#ff6d8a!important; text-shadow:0 0 15px rgba(254,44,85,.16); }
.drill-link { display:flex; align-items:center; gap:7px; padding:5px 0; border:0; border-bottom:1px dashed #4c4c57; background:transparent; color:var(--text); cursor:pointer; font-size:13px; font-weight:700; }
.drill-link span { color:var(--cyan); font-size:8px; font-weight:700; letter-spacing:.06em; }
.drill-link:hover { border-color:var(--cyan); }
.table-footer { min-height:52px; font-size:10px; }
.table-footer button { width:28px; height:28px; color:#aaa; cursor:pointer; }
.table-footer button:disabled { opacity:.35; cursor:not-allowed; }
.compact .report-panel td { height:50px; }

.drill-overlay { position:fixed; z-index:70; inset:0; background:rgba(0,0,0,.58); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .22s ease; }
.drill-overlay.open { opacity:1; pointer-events:auto; }
.drill-drawer { position:fixed; z-index:80; inset:0 0 0 auto; width:min(620px,94vw); display:flex; flex-direction:column; padding:24px; background:#0e0e13; border-left:1px solid #34343d; box-shadow:-24px 0 70px rgba(0,0,0,.5); transform:translateX(102%); transition:transform .24s ease; }
.drill-drawer.open { transform:translateX(0); }
.drill-drawer > header { display:flex; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.drill-drawer header span { color:var(--cyan); font-size:9px; font-weight:800; letter-spacing:.16em; }
.drill-drawer h2 { margin:6px 0 5px; font-family:"Arial Narrow","Segoe UI",sans-serif; font-size:28px; letter-spacing:-.04em; }
.drill-drawer header p { margin:0; color:var(--muted); font-size:11px; }
.drill-drawer header button { flex:0 0 auto; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:#17171d; color:var(--text); cursor:pointer; font-size:20px; }
.drill-summary { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:16px 0; background:var(--line); border:1px solid var(--line); }
.drill-summary div { display:grid; gap:5px; padding:13px; background:#141419; }
.drill-summary span { color:var(--subtle); font-size:9px; }
.drill-summary strong { font-size:12px; }
.drill-table-wrap { flex:1; overflow:auto; border:1px solid var(--line); }
.drill-table-wrap table { width:100%; border-collapse:collapse; font-size:11px; }
.drill-table-wrap th { position:sticky; top:0; height:38px; padding:0 10px; background:#0a0a0d; color:var(--subtle); text-align:left; font-weight:550; }
.drill-table-wrap td { height:52px; padding:0 10px; border-top:1px solid var(--line-soft); color:#bdbdc6; white-space:nowrap; }
.drill-table-wrap td strong { display:block; color:var(--text); font-size:11px; }
.drill-table-wrap td small { display:block; margin-top:3px; color:var(--subtle); font-size:8px; }
.status-chip { display:inline-flex; padding:4px 7px; color:#b0b0b8; background:#24242b; border-radius:3px; }
.status-chip.claimed { color:var(--cyan); background:var(--cyan-soft); }
.drill-drawer > footer { padding-top:14px; color:var(--subtle); font-size:9px; }

@media (max-width:560px) {
  .report-panel table { min-width:1000px; }
  .drill-drawer { width:100%; padding:18px 14px; }
  .drill-drawer h2 { font-size:23px; }
  .drill-table-wrap { overflow-x:auto; }
  .drill-table-wrap table { min-width:520px; }
}

/* Drill-through data table reuses the established prototype table verbatim. */
.drill-table-wrap { border:1px solid var(--line); background:var(--surface); }
.drill-table-wrap table { width:100%; min-width:1360px; border-collapse:collapse; font-size:12px; }
.drill-table-wrap th { position:sticky; top:0; height:46px; padding:0 14px; color:#74747f; background:#0d0d11; font-size:11px; font-weight:550; text-align:left; white-space:nowrap; }
.drill-table-wrap td { height:72px; padding:0 14px; border-top:1px solid var(--line-soft); color:#b8b8c1; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.drill-table-wrap tbody tr { transition:background .18s ease; }
.drill-table-wrap tbody tr:hover { background:#17171d; }
.drill-table-wrap td strong { display:block; color:var(--text); font-size:13px; font-weight:700; }
.drill-table-wrap td small { display:block; margin-top:4px; color:var(--subtle); font-size:9px; }
.drill-table-wrap .status-chip { padding:5px 8px; border-radius:3px; font-size:11px; }
.double-chip { display:inline-flex; min-width:28px; justify-content:center; padding:5px 8px; border-radius:3px; color:#aaaab3; background:#24242b; font-size:11px; }
.double-chip.achieved { color:var(--cyan); background:var(--cyan-soft); }
.drill-table-wrap td.negative { color:#ff718d; }

/* Drill-through hierarchy: reward amounts lead, supporting fields recede. */
.drill-table-wrap table { font-size:13px; }
.drill-table-wrap th { height:50px; color:#858590; font-size:12px; }
.drill-table-wrap td { height:78px; color:#a7a7b0; font-size:13px; font-weight:500; }
.drill-table-wrap td strong { color:#c9c9d0; font-size:13px; font-weight:650; }
.drill-table-wrap td.drill-base,
.drill-table-wrap td.drill-bonus { min-width:150px; font-family:"Arial Narrow","Segoe UI",sans-serif; font-size:17px; font-weight:800; letter-spacing:.01em; }
.drill-table-wrap td.drill-base { color:var(--cyan); background:linear-gradient(90deg,rgba(37,244,238,.055),transparent); text-shadow:0 0 15px rgba(37,244,238,.14); }
.drill-table-wrap td.drill-bonus { color:#ff6d8a; background:linear-gradient(90deg,rgba(254,44,85,.07),transparent); text-shadow:0 0 15px rgba(254,44,85,.16); }

/* Numeric columns always expose their sortable state and active direction. */
.sort-button { display:inline-flex; align-items:center; gap:6px; padding:8px 0; border:0; background:transparent; color:inherit; font:inherit; font-weight:inherit; white-space:nowrap; cursor:pointer; }
.sort-button span { min-width:10px; color:#4e4e58!important; font-size:11px; text-align:center; transition:color .18s ease, transform .18s ease; }
.sort-button:hover { color:#d8d8de; }
.sort-button:hover span { color:#a4a4ae!important; }
.sort-button.active { color:#e3e3e8; font-weight:700; }
.sort-button.active span { color:var(--cyan)!important; text-shadow:0 0 9px rgba(37,244,238,.34); }
.drill-table-wrap .sort-button.active span { color:var(--pink)!important; text-shadow:0 0 9px rgba(254,44,85,.3); }

/* Small, low-frequency reward cue for the Daily Surprise preview. */
.gift-mark { transform-origin:center; animation:surprise-gift-breathe 3.8s cubic-bezier(.4,0,.2,1) infinite; will-change:transform,box-shadow; }
.gift-mark::after { content:""; position:absolute; right:-10px; top:-9px; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:surprise-gift-spark 3.8s ease-in-out infinite; }
@keyframes surprise-gift-breathe {
  0%,100% { transform:translateY(0) rotate(8deg) scale(1); box-shadow:-8px 8px 0 var(--pink); }
  45% { transform:translateY(-5px) rotate(5deg) scale(1.035); box-shadow:-10px 11px 0 var(--pink),0 0 22px rgba(37,244,238,.16); }
  58% { transform:translateY(-4px) rotate(7deg) scale(1.02); }
}
@keyframes surprise-gift-spark {
  0%,28%,72%,100% { opacity:.2; transform:scale(.65); }
  45%,55% { opacity:1; transform:scale(1.35); }
}