:root {
  --ink: #152b42;
  --ink-2: #24425f;
  --muted: #718196;
  --line: #dce5ec;
  --paper: #f4f7f9;
  --card: #ffffff;
  --bili: #12a9db;
  --bili-soft: #e5f7fc;
  --douyin: #fe2c55;
  --douyin-soft: #ffe9ee;
  --green: #20a879;
  --amber: #e4a125;
  --violet: #7b6bc7;
  --shadow: 0 12px 38px rgba(21, 43, 66, .08);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); min-width: 1100px; }
button, select, input { font: inherit; }
button { color: inherit; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 242px 1fr; }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 28px 18px 22px;
  display: flex; flex-direction: column; color: #d9e7f2;
  background: linear-gradient(168deg, #102940 0%, #173a57 62%, #0e263b 100%);
  box-shadow: 6px 0 28px rgba(13, 35, 53, .16); z-index: 5;
}
.brand { display: flex; gap: 12px; align-items: center; padding: 0 9px 27px; border-bottom: 1px solid rgba(255,255,255,.1); color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: white; font: 800 22px/1 Georgia; background: linear-gradient(145deg, #10b9e8, #2d7fbe); box-shadow: 0 8px 20px rgba(0,161,214,.35); }
.brand strong { display: block; font-size: 16px; color: #fff; letter-spacing: .03em; }
.brand span, .sidebar-foot span { display: block; margin-top: 3px; color: #8fa7ba; font-size: 10px; letter-spacing: .08em; }
.nav { display: grid; gap: 6px; padding-top: 24px; }
.nav-item { appearance: none; border: 0; background: transparent; color: #b8cad8; display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 11px; cursor: pointer; text-align: left; transition: .18s ease; }
.nav-item span { width: 20px; color: #78b4cf; text-align: center; font-size: 17px; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(18,169,219,.32), rgba(18,169,219,.12)); box-shadow: inset 3px 0 0 #19bee9; }
.nav-item.active span { color: #4bd4fa; }
.nav-label { margin: 19px 13px 4px; color: #708b9f; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 11px; padding: 16px 11px 0; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-foot strong { font-size: 12px; color: #dbeaf4; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #45d4a0; box-shadow: 0 0 0 5px rgba(69,212,160,.1); }
.workspace { min-width: 0; }
.topbar { height: 104px; display: flex; align-items: center; justify-content: space-between; padding: 19px 35px 18px; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 4; }
.eyebrow { margin: 0 0 4px; color: var(--bili); font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.topbar h1 { margin: 0; color: var(--ink); font: 750 26px/1.2 "Microsoft YaHei"; }
.toolbar { display: flex; align-items: center; gap: 12px; }
.date-filter { min-height: 56px; display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 7px 20px rgba(21,43,66,.05); }
.date-mode-wrap, .date-field { display: grid; gap: 2px; padding: 0 8px; color: var(--muted); font-size: 9px; }
.date-mode-wrap { min-width: 82px; border-right: 1px solid var(--line); }
.date-mode-wrap select, .date-field input { height: 26px; padding: 0; border: 0; outline: none; color: var(--ink); background: white; font-size: 11px; font-weight: 700; }
.date-range-fields { display: flex; align-items: center; gap: 2px; }
.date-field input { width: 112px; }
.date-separator { color: #9aa8b5; font-size: 10px; }
[hidden] { display: none !important; }
.select-wrap { height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: white; font-size: 12px; }
.select-wrap select { border: 0; outline: none; color: var(--ink); font-weight: 700; background: white; min-width: 94px; }
.refresh-btn { height: 46px; padding: 0 17px; border: 0; border-radius: 10px; color: white; background: var(--ink); cursor: pointer; box-shadow: 0 8px 18px rgba(21,43,66,.18); }
.refresh-btn:hover { background: #1e4668; }
.refresh-btn.loading span { display: inline-block; animation: spin 1s linear infinite; }
.content { padding: 28px 34px 54px; max-width: 1680px; margin: 0 auto; }
.loading { min-height: 60vh; display: grid; place-items: center; align-content: center; color: var(--muted); }
.spinner { width: 32px; height: 32px; border: 3px solid var(--line); border-top-color: var(--bili); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-strip { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.hero-strip h2 { margin: 0 0 5px; font-size: 22px; }
.hero-strip p { margin: 0; color: var(--muted); font-size: 13px; }
.data-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 999px; color: #0f6f54; background: #e2f8ef; font-size: 11px; font-weight: 700; }
.data-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.cards { display: grid; grid-template-columns: repeat(5, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { position: relative; min-height: 124px; padding: 17px 18px; border: 1px solid rgba(220,229,236,.9); border-radius: 15px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.metric-card::after { content: ""; position: absolute; width: 80px; height: 80px; border-radius: 50%; right: -29px; top: -32px; background: var(--tone, var(--bili-soft)); }
.metric-label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.metric-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--accent, var(--bili)); background: var(--tone, var(--bili-soft)); font-weight: 800; }
.metric-value { margin: 16px 0 5px; font: 780 27px/1.1 "Microsoft YaHei"; letter-spacing: -.03em; }
.metric-note { color: var(--muted); font-size: 10px; }
.metric-note strong { color: var(--green); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr); gap: 18px; margin-bottom: 18px; }
.grid-equal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.panel { background: var(--card); border: 1px solid rgba(220,229,236,.95); border-radius: 16px; box-shadow: var(--shadow); padding: 19px 20px; min-width: 0; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.panel-head h3 { margin: 0; font-size: 15px; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.panel-action { border: 0; background: var(--paper); color: var(--ink-2); padding: 7px 10px; border-radius: 8px; font-size: 11px; cursor: pointer; }
.legend { display: flex; gap: 14px; color: var(--muted); font-size: 10px; }
.legend span { display: flex; gap: 6px; align-items: center; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.chart { width: 100%; min-height: 250px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-empty { height: 230px; display: grid; place-items: center; color: var(--muted); font-size: 12px; background: linear-gradient(135deg,#f8fafb,#fff); border-radius: 12px; }
.axis-label { fill: #8a98a8; font-size: 9px; }
.axis-line { stroke: #e3e9ee; stroke-width: 1; }
.chart-tooltip { position: fixed; pointer-events: none; z-index: 20; padding: 8px 10px; color: white; background: rgba(17,38,58,.94); border-radius: 8px; font-size: 11px; opacity: 0; transform: translate(-50%,-115%); box-shadow: var(--shadow); }

.platform-block { display: grid; gap: 13px; }
.platform-row { padding: 13px 14px; border-radius: 12px; background: #f7f9fb; }
.platform-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; font-size: 12px; }
.platform-name { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.platform-logo { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: white; font-size: 10px; }
.platform-logo.bili { background: var(--bili); }.platform-logo.douyin { background: var(--douyin); }
.progress { height: 7px; border-radius: 999px; background: #e8edf1; overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.mini-stat { padding: 10px; background: var(--paper); border-radius: 10px; }
.mini-stat span { display: block; color: var(--muted); font-size: 9px; }.mini-stat strong { display: block; margin-top: 4px; font-size: 14px; }

.table-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.filter-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: white; color: var(--muted); padding: 7px 11px; border-radius: 999px; font-size: 11px; cursor: pointer; }
.chip.active { color: white; background: var(--ink); border-color: var(--ink); }
.search { position: relative; }
.search input { width: 250px; height: 36px; padding: 0 12px 0 32px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: white; }
.search::before { content: "⌕"; position: absolute; left: 11px; top: 6px; color: var(--muted); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.data-table th { position: sticky; top: 0; padding: 10px 9px; text-align: left; color: var(--muted); background: #f6f8fa; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 700; white-space: nowrap; }
.data-table td { padding: 11px 9px; border-bottom: 1px solid #edf1f4; vertical-align: middle; }
.data-table tbody tr { cursor: pointer; transition: .15s ease; }
.data-table tbody tr:hover { background: #f3f9fc; }
.table-wrap { overflow: auto; max-height: 570px; border: 1px solid var(--line); border-radius: 11px; }
.title-cell { max-width: 360px; font-weight: 650; color: var(--ink); }
.subtle { color: var(--muted); font-size: 10px; }
.rank { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #edf2f5; font-weight: 800; }
.rank.top { color: white; background: var(--amber); }
.tag { display: inline-flex; padding: 4px 7px; border-radius: 7px; color: #446177; background: #edf3f6; font-size: 9px; margin: 1px 2px 1px 0; }
.positive { color: var(--green); font-weight: 700; }.negative { color: var(--douyin); font-weight: 700; }

.daily-toolbar { align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.72); }
.daily-schedule { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; font-weight: 700; }
.daily-platform-card { position: relative; overflow: hidden; }
.daily-platform-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg,var(--bili),var(--douyin)); }
.daily-platform-card.is-empty { min-height: 240px; background: linear-gradient(145deg,#fff,#f7fafc); }
.daily-platform-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.daily-platform-head h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; }
.daily-platform-head p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.pulse-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 999px; color: #0d7456; background: #e3f8f0; font-size: 10px; font-weight: 800; white-space: nowrap; }
.pulse-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: dataPulse 2.2s ease-out infinite; }
.pulse-pill.pending { color: #946514; background: #fff3d9; }.pulse-pill.failed { color: #b52443; background: #ffe8ed; }
@keyframes dataPulse { 0% { box-shadow: 0 0 0 0 rgba(32,168,121,.3); } 70%,100% { box-shadow: 0 0 0 7px rgba(32,168,121,0); } }
.daily-fan-number { padding: 18px 0 15px; border-top: 1px solid #edf1f4; }
.daily-fan-number span { display: block; color: var(--muted); font-size: 10px; }
.daily-fan-number strong { display: block; margin-top: 5px; font-size: 34px; letter-spacing: -.04em; }
.daily-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.daily-metrics > div { padding: 10px; border-radius: 10px; background: var(--paper); }
.daily-metrics span { display: block; color: var(--muted); font-size: 9px; }.daily-metrics strong { display: block; margin-top: 5px; font-size: 13px; }
.daily-note { margin: 14px 0 0; padding: 10px 12px; border-radius: 9px; color: var(--ink-2); background: #f4f8fa; font-size: 10px; line-height: 1.6; }
.daily-empty-copy { margin: 64px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.daily-empty-small { min-height: 120px; display: grid; place-items: center; color: var(--muted); background: linear-gradient(135deg,#f8fafb,#fff); border: 1px dashed var(--line); border-radius: 11px; font-size: 11px; }
.daily-onboarding { min-height: 430px; display: grid; grid-template-columns: 220px minmax(0,580px); align-items: center; justify-content: center; gap: 62px; padding: 56px; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(circle at 25% 50%,rgba(18,169,219,.1),transparent 36%),linear-gradient(135deg,#fff,#f5f8fa); box-shadow: var(--shadow); }
.daily-onboarding h2 { margin: 5px 0 13px; font-size: 28px; }.daily-onboarding p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.daily-orbit { position: relative; width: 190px; height: 190px; display: grid; place-items: center; border: 1px solid rgba(18,169,219,.28); border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 24px rgba(18,169,219,.04); }
.daily-orbit::before,.daily-orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(18,169,219,.17); }.daily-orbit::before { inset: 18px; }.daily-orbit::after { inset: 42px; }
.daily-orbit span { position: relative; z-index: 2; font-size: 27px; font-weight: 800; letter-spacing: -.04em; }
.daily-orbit i { position: absolute; z-index: 3; width: 13px; height: 13px; top: 21px; left: 50%; border-radius: 50%; background: var(--douyin); box-shadow: 0 0 0 8px rgba(254,44,85,.1); transform-origin: 0 74px; animation: orbit 6s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(18,169,219,.28); outline-offset: 2px; }

.rank-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin-bottom: 18px; }
.rank-toolbar .select-wrap { background: white; }
.rank-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.rank-card { background: white; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 7px 24px rgba(21,43,66,.06); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.rank-card:hover { transform: translateY(-3px); box-shadow: 0 13px 28px rgba(21,43,66,.12); }
.cover { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #dde7ed; }
.cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cover .rank-badge { position: absolute; top: 9px; left: 9px; min-width: 28px; height: 28px; display: grid; place-items: center; padding: 0 7px; border-radius: 8px; color: white; background: rgba(17,38,58,.88); font-size: 11px; font-weight: 800; backdrop-filter: blur(4px); }
.cover .duration { position: absolute; right: 7px; bottom: 7px; padding: 3px 6px; color: white; background: rgba(0,0,0,.68); border-radius: 5px; font-size: 9px; }
.rank-card-body { padding: 12px 13px 13px; }
.rank-title { height: 40px; margin: 0 0 9px; overflow: hidden; font-size: 13px; line-height: 20px; }
.rank-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; }
.rank-stats { display: flex; gap: 12px; margin-top: 10px; color: #526a7e; font-size: 9px; }
.rank-stats strong { color: var(--ink); }
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.page-btn { min-width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
.page-btn.active { color: white; background: var(--ink); border-color: var(--ink); }

.compare-head { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.compare-select { padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); }
.compare-select label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 10px; }
.compare-select select { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: white; }
.comparison-list { display: grid; gap: 10px; }
.comparison-row { display: grid; grid-template-columns: 150px 1fr 90px 1fr 90px; align-items: center; gap: 10px; }
.comparison-row > span { color: var(--muted); font-size: 10px; }
.comparison-value { text-align: right; font-size: 12px; font-weight: 750; }
.comparison-track { height: 10px; border-radius: 999px; background: #edf1f4; overflow: hidden; }
.comparison-track i { display: block; height: 100%; border-radius: inherit; }
.coverage-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.coverage-item { min-height: 112px; display: grid; align-content: center; padding: 16px; border-radius: 12px; background: var(--paper); }
.coverage-item span { color: var(--muted); font-size: 10px; }
.coverage-item strong { margin: 7px 0 4px; font-size: 24px; line-height: 1; }
.coverage-item small { color: #8997a5; font-size: 9px; }
.download-heading { align-items: center; }
.archive-kicker { display: block; margin-bottom: 12px; color: #5fd4f4; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.material-browser { margin-bottom: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow); }
.material-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.material-toolbar .archive-kicker { margin-bottom: 6px; color: var(--bili); }
.material-toolbar h3 { margin: 0; font-size: 21px; }
.material-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.material-search { width: min(360px, 40%); display: grid; gap: 6px; color: var(--muted); font-size: 9px; }
.material-search input { width: 100%; height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--ink); background: var(--paper); font-size: 11px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.material-search input:focus { border-color: var(--bili); background: white; box-shadow: 0 0 0 3px rgba(18,169,219,.12); }
.material-categories { display: flex; gap: 7px; padding-bottom: 18px; overflow-x: auto; scrollbar-width: thin; }
.material-filter { min-width: max-content; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; color: #607589; background: white; cursor: pointer; font-size: 10px; transition: .18s ease; }
.material-filter strong { display: grid; min-width: 23px; height: 20px; place-items: center; padding: 0 5px; border-radius: 6px; color: #80909f; background: var(--paper); font-size: 9px; }
.material-filter:hover { border-color: #a9dceb; color: var(--ink); }
.material-filter.active { border-color: var(--ink); color: white; background: var(--ink); box-shadow: 0 7px 16px rgba(21,43,66,.15); }
.material-filter.active strong { color: #c8edfa; background: rgba(255,255,255,.12); }
.material-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 12px; }
.material-card { position: relative; min-width: 0; border: 1px solid #e1e8ed; border-radius: 13px; background: white; cursor: zoom-in; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.material-card:hover { transform: translateY(-2px); border-color: #bfd9e5; box-shadow: 0 12px 28px rgba(21,43,66,.1); }
.material-card:focus-visible { outline: 3px solid rgba(18,169,219,.35); outline-offset: 2px; }
.material-thumb { position: relative; height: 174px; display: grid; place-items: center; padding: 10px; background-color: #f1f5f7; background-image: linear-gradient(45deg,rgba(116,139,156,.07) 25%,transparent 25%),linear-gradient(-45deg,rgba(116,139,156,.07) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(116,139,156,.07) 75%),linear-gradient(-45deg,transparent 75%,rgba(116,139,156,.07) 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; overflow: hidden; }
.material-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.material-card:hover .material-thumb img { transform: scale(1.025); }
.material-thumb span { position: absolute; left: 9px; bottom: 9px; padding: 4px 6px; border-radius: 5px; color: white; background: rgba(15,38,57,.78); backdrop-filter: blur(5px); font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.material-card-copy { min-width: 0; display: grid; gap: 4px; padding: 12px 44px 13px 12px; }
.material-card-copy strong { overflow: hidden; color: var(--ink-2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.material-card-copy small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.material-quick-download { position: absolute; right: 10px; bottom: 11px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--ink); background: var(--paper); text-decoration: none; font-size: 14px; font-weight: 800; cursor: pointer; }
.material-quick-download:hover { color: white; background: var(--bili); }
.collection-card { cursor: pointer; }
.collection-card .material-thumb::after { content: ""; position: absolute; inset: auto 12px 12px auto; width: 24px; height: 24px; border: 2px solid rgba(255,255,255,.85); border-radius: 6px; box-shadow: 4px -4px 0 rgba(255,255,255,.45); pointer-events: none; }
.collection-arrow { position: absolute; right: 12px; bottom: 14px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: white; background: var(--ink); font-size: 19px; line-height: 1; }
.material-more { display: grid; place-items: center; gap: 8px; padding-top: 22px; }
.material-more button { min-width: 160px; height: 40px; border: 0; border-radius: 10px; color: white; background: var(--ink); cursor: pointer; font-size: 11px; font-weight: 800; }
.material-more button:hover { background: #1e4668; }.material-more span,.material-end { color: var(--muted); font-size: 9px; }
.material-end { margin: 22px 0 0; text-align: center; }
.material-empty { min-height: 220px; display: grid; place-items: center; align-content: center; border: 1px dashed #cddae3; border-radius: 13px; background: var(--paper); text-align: center; }
.material-empty strong { font-size: 14px; }.material-empty p { margin: 8px 0 0; color: var(--muted); font-size: 10px; }
.package-library { margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); }
.package-library > summary { min-height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 17px 21px; cursor: pointer; list-style: none; }
.package-library > summary::-webkit-details-marker { display: none; }.package-library > summary span { display: grid; gap: 4px; }.package-library > summary strong { font-size: 14px; }.package-library > summary small { color: var(--muted); font-size: 10px; font-weight: 400; }.package-library > summary b { color: var(--bili); font-size: 10px; }.package-library[open] > summary b { font-size: 0; }.package-library[open] > summary b::after { content: "收起"; font-size: 10px; }
.package-library .download-grid { padding: 0 18px 18px; }
.download-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.download-card { min-height: 260px; display: grid; grid-template-rows: auto 1fr auto auto; gap: 16px; padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); transition: transform .18s ease,box-shadow .18s ease; }
.download-card:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(21,43,66,.11); }
.download-card-top { display: flex; align-items: center; justify-content: space-between; }
.archive-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #087ca3; background: var(--bili-soft); font-size: 17px; font-weight: 800; }
.archive-size { color: var(--ink-2); font-size: 12px; font-weight: 800; }
.download-card h3 { margin: 0 0 7px; font-size: 17px; }.download-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.archive-meta { display: flex; gap: 8px; color: #607589; font-size: 9px; }.archive-meta span { padding: 6px 8px; border-radius: 7px; background: var(--paper); }
.archive-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid #edf1f4; }
.archive-actions > a { display: inline-flex; align-items: center; justify-content: center; min-width: 105px; height: 38px; border-radius: 9px; color: white; background: var(--ink); text-decoration: none; font-size: 11px; font-weight: 800; }
.archive-actions > a:hover { background: #1e4668; }
.archive-actions details { position: relative; color: var(--muted); font-size: 9px; }.archive-actions summary { cursor: pointer; }
.archive-actions code { position: absolute; right: 0; bottom: 25px; width: 280px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); background: white; box-shadow: var(--shadow); overflow-wrap: anywhere; z-index: 2; }
.download-notice { min-height: 108px; display: grid; grid-template-columns: 145px minmax(0,1fr); align-items: stretch; gap: 18px; margin-bottom: 14px; padding: 14px 18px; border: 1px solid #d8e4eb; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(21,43,66,.05); }
.license-intro { display: grid; align-content: center; padding-right: 18px; border-right: 1px solid #e5ebef; }.license-intro h3 { margin: 0; font-size: 15px; }.license-intro p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.license-list { display: grid; align-content: center; }
.license-row { min-width: 0; display: grid; grid-template-columns: 205px minmax(0,1fr); align-items: center; gap: 14px; padding: 7px 0; }
.license-row + .license-row { border-top: 1px solid #edf1f4; }
.license-title { min-width: 0; }.license-title h4 { display: inline; margin: 0; font-size: 11px; }.license-title small { display: block; margin-top: 3px; overflow: hidden; color: #708295; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.license-scope { min-width: 0; display: flex; align-items: center; gap: 7px; margin: 0; color: #536a7c; font-size: 9px; line-height: 1.5; }.license-scope span { min-width: 0; }.rule-label { flex: 0 0 auto; display: inline-flex; padding: 4px 6px; border-radius: 5px; font-size: 8px; line-height: 1; }.rule-label.allowed { color: #0f7659; background: #ddf5eb; }.rule-label.prohibited { margin-left: 4px; color: #a34a4a; background: #fbe8e8; }
.material-path { overflow-wrap: anywhere; }
.material-preview { width: 100%; min-height: 330px; max-height: 65vh; display: grid; place-items: center; margin: 18px 0; padding: 18px; border-radius: 14px; background-color: #f1f5f7; background-image: linear-gradient(45deg,rgba(116,139,156,.08) 25%,transparent 25%),linear-gradient(-45deg,rgba(116,139,156,.08) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(116,139,156,.08) 75%),linear-gradient(-45deg,transparent 75%,rgba(116,139,156,.08) 75%); background-position: 0 0,0 10px,10px -10px,-10px 0; background-size: 20px 20px; overflow: hidden; }
.material-preview img { display: block; max-width: 100%; max-height: calc(65vh - 36px); object-fit: contain; }
.material-kpis { grid-template-columns: .7fr 1fr 1.4fr; }.material-download { margin-top: 0; background: var(--ink); }
.collection-drawer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 20px; }
.collection-drawer-grid button { min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); background: white; cursor: zoom-in; overflow: hidden; text-align: left; transition: border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.collection-drawer-grid button:hover { transform: translateY(-2px); border-color: #a9dceb; box-shadow: 0 8px 20px rgba(21,43,66,.09); }
.collection-drawer-grid button:focus-visible { outline: 3px solid rgba(18,169,219,.3); outline-offset: 2px; }
.collection-drawer-grid img { width: 100%; height: 112px; display: block; object-fit: contain; background-color: #f1f5f7; background-image: linear-gradient(45deg,rgba(116,139,156,.07) 25%,transparent 25%),linear-gradient(-45deg,rgba(116,139,156,.07) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(116,139,156,.07) 75%),linear-gradient(-45deg,transparent 75%,rgba(116,139,156,.07) 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; }
.collection-drawer-grid span { display: block; padding: 8px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.drawer-backdrop { position: fixed; inset: 0; background: rgba(10,27,42,.25); backdrop-filter: blur(2px); z-index: 10; }
.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(560px, 46vw); padding: 29px; background: white; box-shadow: -18px 0 50px rgba(12,32,48,.18); z-index: 11; transform: translateX(102%); transition: transform .25s ease; overflow-y: auto; }
.drawer.open { transform: translateX(0); }
.drawer-close { position: sticky; top: 0; float: right; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #eef3f6; font-size: 22px; cursor: pointer; z-index: 2; }
.drawer-cover { width: 100%; border-radius: 14px; margin: 12px 0 18px; aspect-ratio: 16/9; object-fit: cover; background: #e8edf1; }
.drawer h2 { margin: 18px 42px 8px 0; font-size: 21px; line-height: 1.45; }
.drawer h3 { margin: 24px 0 8px; font-size: 13px; }
.drawer p { color: #536a7c; line-height: 1.75; font-size: 12px; }
.drawer-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 18px 0; }
.drawer-kpi { padding: 10px; background: var(--paper); border-radius: 9px; }.drawer-kpi span { display:block;color:var(--muted);font-size:9px}.drawer-kpi strong{display:block;margin-top:4px;font-size:13px}
.external-link { display: inline-flex; margin-top: 12px; padding: 9px 13px; color: white; background: var(--bili); text-decoration: none; border-radius: 9px; font-size: 11px; }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 30; padding: 10px 15px; color: white; background: var(--ink); border-radius: 9px; box-shadow: var(--shadow); font-size: 11px; opacity: 0; transform: translate(-50%, 14px); transition: .2s ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Live session archive: dense enough for comparison, with clear metric groups. */
.live-detail-shell { margin-top: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.72); box-shadow: var(--shadow); }
.live-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 2px 2px 18px; border-bottom: 1px solid var(--line); }
.live-detail-head h3 { margin: 4px 0 5px; font-size: 21px; }
.live-detail-head p { margin: 0; color: var(--muted); font-size: 11px; }
.archive-kicker { color: var(--bili); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.live-switcher { display: inline-flex; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.live-switch { min-width: 58px; height: 32px; padding: 0 13px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.live-switch:hover { color: var(--ink); }
.live-switch.active { color: white; background: var(--ink); box-shadow: 0 5px 12px rgba(21,43,66,.16); }
.live-total-board { margin: 18px 0; padding: 19px 20px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.live-total-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 2px 14px; border-bottom: 1px solid var(--line); }
.live-total-head h3 { margin: 4px 0 3px; font-size: 19px; }
.live-total-head p { margin: 0; color: var(--muted); font-size: 10px; }
.live-total-list { display: grid; gap: 8px; padding-top: 10px; }
.live-total-row { position: relative; display: grid; grid-template-columns: 178px minmax(0,1fr); align-items: center; gap: 18px; min-height: 76px; padding: 10px 13px 10px 16px; border: 1px solid #e7edf1; border-radius: 11px; background: #fbfcfd; overflow: hidden; }
.live-total-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--row-accent, var(--ink)); }
.live-total-row.is-douyin { --row-accent: var(--douyin); background: linear-gradient(90deg, #fff7f8 0%, #fff 28%); }
.live-total-row.is-bili { --row-accent: var(--bili); background: linear-gradient(90deg, #f3fbfd 0%, #fff 28%); }
.live-total-row.is-all { --row-accent: var(--ink); background: linear-gradient(90deg, #f5f8fa 0%, #fff 28%); }
.live-total-label { min-width: 0; display: flex; align-items: center; gap: 10px; }
.live-total-label .live-session-mark { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
.live-total-label strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.live-total-metrics { min-width: 0; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; }
.live-total-metrics .live-metric { padding-left: 10px; border-left: 1px solid #e6edf1; }
.live-total-metrics .live-metric:first-child { padding-left: 0; border-left: 0; }
.live-total-metrics .live-metric span { font-size: 9px; }
.live-total-metrics .live-metric strong { font-size: 15px; }
.live-session-list { display: grid; gap: 14px; padding-top: 16px; }
.live-session-card { position: relative; border: 1px solid #dfe7ec; border-radius: 13px; background: white; overflow: hidden; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.live-session-card:hover { border-color: #b8d5e0; box-shadow: 0 12px 26px rgba(21,43,66,.09); transform: translateY(-1px); }
.live-session-card.is-live { border-color: #ffb4c2; box-shadow: 0 0 0 2px rgba(254,44,85,.08); }
.live-session-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 17px 19px 14px; }
.live-session-identity { min-width: 0; display: flex; align-items: flex-start; gap: 11px; }
.live-session-mark { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: white; font-size: 16px; font-weight: 900; }
.live-session-mark.bili { background: var(--bili); }.live-session-mark.douyin { background: var(--douyin); }
.live-session-kicker { margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.live-session-head h3 { margin: 0; overflow: hidden; color: var(--ink); font-size: 16px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.live-session-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.live-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 7px; color: #bd2345; background: #fff0f3; font-size: 9px; font-weight: 800; }
.live-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(254,44,85,.12); }
.live-session-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0 12px 12px; }
.live-metric-group { min-width: 0; padding: 13px 14px 11px; border-radius: 10px; background: #f7fafb; }
.live-metric-group h4 { margin: 0 0 12px; color: var(--ink-2); font-size: 11px; }
.live-metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px 9px; }
.live-metric { min-width: 0; display: grid; gap: 4px; }
.live-metric span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.live-metric strong { overflow: hidden; color: var(--ink); font-size: 16px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.live-metric strong.is-empty { color: #9aa9b3; font-size: 12px; font-weight: 600; }
.live-session-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 19px; border-top: 1px solid #edf1f4; color: var(--muted); font-size: 9px; }
.live-session-foot a { color: var(--bili); font-weight: 800; text-decoration: none; }.live-session-foot a:hover { text-decoration: underline; }

@media (max-width: 1250px) {
  body { min-width: 960px; }
  .shell { grid-template-columns: 210px 1fr; }
  .sidebar { padding-left: 13px; padding-right: 13px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .rank-grid { grid-template-columns: repeat(3, 1fr); }
  .content { padding-left: 24px; padding-right: 24px; }
  .daily-metrics { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 800px) {
  body { min-width: 0; }
  .shell { display: block; }
  .sidebar { position: relative; height: auto; padding: 12px 12px 8px; }
  .brand { padding: 0 4px 10px; border-bottom: 0; }.brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
  .nav { display: flex; gap: 5px; padding-top: 2px; overflow-x: auto; }.nav-label,.sidebar-foot { display: none; }.nav-item { min-width: max-content; padding: 9px 10px; font-size: 11px; }.nav-item span { width: auto; }
  .topbar { height: 72px; padding: 12px 16px; }.topbar h1 { font-size: 19px; }.toolbar { gap: 7px; }.refresh-btn { height: 40px; padding: 0 12px; font-size: 10px; }
  .content { padding: 20px 14px 38px; }.hero-strip { align-items: flex-start; gap: 14px; }.hero-strip h2 { font-size: 19px; }.data-badge { white-space: nowrap; }
  .cards,.rank-grid,.grid-equal,.grid-2,.download-grid { grid-template-columns: 1fr; }.panel { overflow-x: auto; }
  .download-notice { display: block; min-height: 0; padding: 13px; }.license-intro { display: flex; align-items: baseline; gap: 8px; padding: 0 0 9px; border-right: 0; border-bottom: 1px solid #e5ebef; }.license-intro p { margin: 0; }.license-row { display: block; padding: 10px 0; }.license-title small { white-space: normal; }.license-scope { flex-wrap: wrap; gap: 6px; margin-top: 7px; }.rule-label.prohibited { margin-left: 2px; }
  .material-browser { padding: 17px 13px; }.material-toolbar { display: grid; }.material-search { width: 100%; }.material-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.material-thumb { height: 140px; }.material-card-copy { padding-left: 10px; }.package-library .download-grid { padding: 0 11px 11px; }
  .drawer { width: 100vw; padding: 20px; }.material-preview { min-height: 280px; }.material-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .collection-drawer-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.collection-drawer-grid img { height: 96px; }
  .live-total-board { margin: 12px 0; padding: 14px 10px 9px; border-radius: 13px; }
  .live-total-head { padding: 0 4px 11px; }
  .live-total-head h3 { font-size: 17px; }
  .live-total-head p { font-size: 9px; }
  .live-total-list { gap: 7px; padding-top: 8px; }
  .live-total-row { grid-template-columns: 1fr; gap: 10px; min-height: 0; padding: 10px 10px 11px 13px; }
  .live-total-label .live-session-mark { width: 29px; height: 29px; font-size: 13px; }
  .live-total-label strong { font-size: 12px; }
  .live-total-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px 7px; }
  .live-total-metrics .live-metric { padding-left: 0; border-left: 0; }
  .live-total-metrics .live-metric strong { font-size: 14px; }
  .live-detail-shell { padding: 14px 10px; border-radius: 13px; }
  .live-detail-head { display: grid; align-items: start; gap: 13px; padding: 2px 4px 14px; }
  .live-detail-head h3 { font-size: 18px; }
  .live-switcher { width: 100%; }.live-switch { flex: 1; }
  .live-session-list { gap: 10px; padding-top: 10px; }
  .live-session-head { padding: 14px 12px 12px; }.live-session-head h3 { font-size: 13px; white-space: normal; }.live-session-head p { font-size: 9px; }
  .live-session-groups { grid-template-columns: 1fr; gap: 7px; padding: 0 8px 8px; }
  .live-metric-group { padding: 11px 11px 10px; }.live-metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px 7px; }
  .live-metric strong { font-size: 14px; }.live-session-foot { padding: 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}