/* ============================================================
   抖音运营工作台 — 基础设计系统
   深色高级数据看板 / 双端主题
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root{
  /* 背景层次：越靠上层越亮，形成纵深 */
  --bg:            #07080B;
  --bg-2:          #0A0C11;
  --surface:       #111319;
  --surface-2:     #161922;
  --surface-3:     #1C2029;
  --surface-4:     #232834;

  --line:          rgba(255,255,255,.065);
  --line-2:        rgba(255,255,255,.11);
  --line-3:        rgba(255,255,255,.18);

  --text:          #EDEFF5;
  --text-2:        #98A0B3;
  --text-3:        #6A7286;
  --text-4:        #4A5163;

  --brand:         #FE2C55;
  --brand-2:       #FF5C7A;
  --brand-dim:     rgba(254,44,85,.14);
  --brand-line:    rgba(254,44,85,.28);
  --cyan:          #25F4EE;
  --cyan-dim:      rgba(37,244,238,.12);

  /* 中国股市/数据惯例：涨红跌绿 */
  --up:            #FF4D6A;
  --up-dim:        rgba(255,77,106,.12);
  --down:          #22D39B;
  --down-dim:      rgba(34,211,155,.12);
  --warn:          #FFB020;
  --warn-dim:      rgba(255,176,32,.12);
  --info:          #5B8CFF;

  --r-xs: 8px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 24px;

  --shadow-1: 0 1px 0 rgba(255,255,255,.035) inset, 0 6px 18px rgba(0,0,0,.28);
  --shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 46px rgba(0,0,0,.5);
  --shadow-pop: 0 24px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);

  --sidebar-w: 236px;
  --rail-w: 76px;
  --topbar-h: 66px;
  --tabbar-h: 60px;

  --font: "Inter", "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Consolas, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:"tnum" 1,"ss01" 1;
}
h1,h2,h3,h4,h5,p,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; padding:0; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; }
::selection{ background:rgba(254,44,85,.32); color:#fff; }

/* 滚动条 */
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); background-clip:content-box; }

/* 背景光晕 + 细噪点，避免大面积纯黑的廉价感 */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 480px at 78% -12%, rgba(254,44,85,.10), transparent 62%),
    radial-gradient(760px 420px at 12% 4%, rgba(37,244,238,.055), transparent 60%),
    radial-gradient(1100px 700px at 50% 118%, rgba(91,140,255,.05), transparent 65%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.app{ position:relative; z-index:1; min-height:100%; }

/* ---------- 3. 图标 ---------- */
.ic{ width:18px; height:18px; flex:0 0 auto; }
.ic-sm{ width:14px; height:14px; }
.ic-lg{ width:22px; height:22px; }

/* ---------- 4. 桌面外壳 ---------- */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  padding:18px 12px 14px;
  background:linear-gradient(180deg, rgba(14,16,22,.96), rgba(7,8,11,.98));
  border-right:1px solid var(--line);
  z-index:40;
}
.brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 16px; }
.brand-mark{
  width:34px; height:34px; border-radius:11px; flex:0 0 auto;
  display:grid; place-items:center;
  background:linear-gradient(145deg, #2A1220, #140A11);
  border:1px solid rgba(254,44,85,.32);
  box-shadow:0 0 22px rgba(254,44,85,.18), 0 1px 0 rgba(255,255,255,.06) inset;
}
.brand-mark svg{ width:19px; height:19px; }
.brand-txt{ min-width:0; }
.brand-name{ font-size:14px; font-weight:650; letter-spacing:.2px; white-space:nowrap; }
.brand-sub{ font-size:10.5px; color:var(--text-3); letter-spacing:.9px; text-transform:uppercase; }

.nav{ flex:1; overflow-y:auto; overflow-x:hidden; padding-bottom:8px; }
.nav-group{ margin-top:16px; }
.nav-group:first-child{ margin-top:2px; }
.nav-label{
  font-size:10px; color:var(--text-4); letter-spacing:1.4px;
  padding:0 12px 7px; text-transform:uppercase; font-weight:600;
}
.nav-item{
  display:flex; align-items:center; gap:11px;
  height:40px; padding:0 11px; margin-bottom:2px;
  border-radius:11px; color:var(--text-2);
  font-size:13.5px; font-weight:500; letter-spacing:.1px;
  border:1px solid transparent; position:relative;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  width:100%; text-align:left;
}
.nav-item .ic{ color:var(--text-3); transition:color .18s var(--ease); }
.nav-item:hover{ background:rgba(255,255,255,.045); color:var(--text); }
.nav-item:hover .ic{ color:var(--text-2); }
.nav-item.on{
  background:linear-gradient(90deg, rgba(254,44,85,.17), rgba(254,44,85,.03));
  border-color:rgba(254,44,85,.22);
  color:#fff; font-weight:600;
}
.nav-item.on .ic{ color:var(--brand-2); }
.nav-item.on::before{
  content:""; position:absolute; left:-12px; top:11px; bottom:11px; width:3px;
  border-radius:0 3px 3px 0; background:var(--brand);
  box-shadow:0 0 12px rgba(254,44,85,.8);
}
.nav-badge{
  margin-left:auto; font-size:10px; font-weight:700; line-height:1;
  padding:3px 5px; border-radius:6px; background:var(--brand); color:#fff;
  box-shadow:0 0 12px rgba(254,44,85,.5);
}

.side-foot{ border-top:1px solid var(--line); padding-top:12px; margin-top:6px; }
.acct{
  display:flex; align-items:center; gap:10px; padding:9px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.025);
  transition:border-color .18s var(--ease), background .18s var(--ease);
  width:100%; text-align:left;
}
.acct:hover{ border-color:var(--line-2); background:rgba(255,255,255,.045); }
.acct-meta{ min-width:0; flex:1; }
.acct-name{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-fans{ font-size:10.5px; color:var(--text-3); }

/* 头像 */
.av{
  width:32px; height:32px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:15px; line-height:1;
  background:linear-gradient(145deg, #2B1A22, #171018);
  border:1px solid rgba(255,255,255,.12);
  position:relative; overflow:hidden;
}
.av::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,.16), transparent 55%);
}
.av-28{ width:28px; height:28px; font-size:13px; }
.av-36{ width:36px; height:36px; font-size:16px; }
.av-44{ width:44px; height:44px; font-size:20px; }
.av-56{ width:56px; height:56px; font-size:26px; }
.av-brand{ background:linear-gradient(145deg, rgba(254,44,85,.35), rgba(37,244,238,.16)); }
.av-live{ position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; background:var(--down); border:2px solid var(--bg); z-index:2; }

/* 主区 */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  height:var(--topbar-h); flex:0 0 var(--topbar-h);
  display:flex; align-items:center; gap:16px;
  padding:0 24px;
  position:sticky; top:0; z-index:30;
  background:rgba(7,8,11,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.tb-left{ min-width:0; flex:1; display:flex; align-items:center; gap:12px; }
.tb-title{ font-size:17px; font-weight:650; letter-spacing:-.2px; white-space:nowrap; }
.tb-sub{ font-size:11.5px; color:var(--text-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-right{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }

.live-pill{
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 10px; border-radius:99px;
  font-size:11px; color:var(--text-2);
  background:rgba(34,211,155,.07); border:1px solid rgba(34,211,155,.2);
}
.live-dot{ width:6px; height:6px; border-radius:50%; background:var(--down); box-shadow:0 0 8px var(--down); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.82)} }

.icon-btn{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  color:var(--text-2); border:1px solid transparent;
  transition:background .16s, color .16s, border-color .16s;
  position:relative;
}
.icon-btn:hover{ background:rgba(255,255,255,.06); color:var(--text); border-color:var(--line); }
.icon-btn .dot{ position:absolute; top:7px; right:8px; width:6px; height:6px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 2px var(--bg); }

.content{ flex:1; padding:22px 24px 40px; width:100%; max-width:1560px; margin:0 auto; }

/* 移动端顶栏 / 底部 Tab（桌面隐藏） */
.mbar{ display:none; }
.tb-brand{ display:none; }
.tabbar{ display:none; }

/* ---------- 5. 页面头部 ---------- */
.view-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.vh-title{ font-size:20px; font-weight:650; letter-spacing:-.3px; }
.vh-sub{ font-size:12px; color:var(--text-3); margin-top:3px; }
.vh-actions{ display:flex; align-items:center; gap:8px; }

/* ---------- 6. 卡片 ---------- */
.card{
  background:linear-gradient(180deg, #14161E 0%, #101219 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.09) 30%, rgba(255,255,255,.09) 70%, transparent);
  pointer-events:none;
}
.card-pad{ padding:18px 20px; }
.card-hd{ display:flex; align-items:center; gap:12px; padding:16px 20px 0; }
.card-hd.bordered{ padding-bottom:14px; border-bottom:1px solid var(--line); }
.card-title{ font-size:14px; font-weight:620; letter-spacing:-.1px; display:flex; align-items:center; gap:7px; }
.card-sub{ font-size:11.5px; color:var(--text-3); margin-top:2px; }
.card-hd-r{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.card-body{ padding:16px 20px 20px; }
.card-foot{ padding:12px 20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; }

/* 卡片顶部强调色 */
.card-accent::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--brand), rgba(254,44,85,0));
  opacity:.9;
}

/* ---------- 7. 网格 ---------- */
.grid{ display:grid; gap:16px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-2-1{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.g-1-2{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.g-3-2{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
.span2{ grid-column:span 2; }
.stack{ display:flex; flex-direction:column; gap:16px; }

/* ---------- 8. KPI ---------- */
.kpi{ padding:16px 18px 14px; position:relative; overflow:hidden; }
.kpi-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kpi-label{ font-size:11.5px; color:var(--text-2); display:flex; align-items:center; gap:5px; white-space:nowrap; }
.kpi-ico{
  width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,255,255,.045); color:var(--text-3); border:1px solid var(--line);
}
.kpi-val{
  font-size:27px; font-weight:660; letter-spacing:-1px; line-height:1.15;
  margin-top:9px; display:flex; align-items:baseline; gap:3px;
  font-variant-numeric:tabular-nums;
}
.kpi-val .unit{ font-size:12px; font-weight:500; color:var(--text-3); letter-spacing:0; }
.kpi-bot{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:8px; min-height:30px; }
.kpi-delta{ display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:600; }
.kpi-delta.up{ color:var(--up); }
.kpi-delta.down{ color:var(--down); }
.kpi-delta.flat{ color:var(--text-3); }
.kpi-delta .ic{ width:12px; height:12px; }
.kpi-note{ font-size:10.5px; color:var(--text-4); }
.kpi-spark{ margin-bottom:1px; opacity:.9; }
.kpi-glow{
  position:absolute; width:150px; height:150px; border-radius:50%;
  right:-60px; top:-70px; pointer-events:none;
  background:radial-gradient(circle, rgba(254,44,85,.22), transparent 68%);
}
.kpi-glow.cy{ background:radial-gradient(circle, rgba(37,244,238,.16), transparent 68%); }
.kpi-glow.bl{ background:radial-gradient(circle, rgba(91,140,255,.18), transparent 68%); }

/* ---------- 9. 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 14px; border-radius:10px;
  font-size:12.5px; font-weight:560; white-space:nowrap;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:var(--text);
  transition:background .16s var(--ease), border-color .16s, transform .1s, box-shadow .16s;
}
.btn:hover{ background:rgba(255,255,255,.08); border-color:var(--line-3); }
.btn:active{ transform:translateY(1px); }
.btn .ic{ width:15px; height:15px; }
.btn-primary{
  background:linear-gradient(135deg, #FF3D63, #E01742);
  border-color:rgba(255,90,120,.55); color:#fff; font-weight:600;
  box-shadow:0 6px 20px rgba(254,44,85,.28), 0 1px 0 rgba(255,255,255,.18) inset;
}
.btn-primary:hover{ background:linear-gradient(135deg, #FF5273, #EE1E4B); box-shadow:0 8px 26px rgba(254,44,85,.4); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--text-2); }
.btn-ghost:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.btn-sm{ height:28px; padding:0 10px; font-size:11.5px; border-radius:8px; }
.btn-sm .ic{ width:13px; height:13px; }
.btn-lg{ height:40px; padding:0 18px; font-size:13.5px; border-radius:11px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.45; pointer-events:none; }
.btn-danger{ color:#FF7A93; border-color:rgba(254,44,85,.3); background:rgba(254,44,85,.09); }

/* 分段控件 */
.seg{
  display:inline-flex; padding:3px; gap:2px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.seg button{
  height:26px; padding:0 11px; border-radius:7px; font-size:11.5px;
  color:var(--text-3); font-weight:550; transition:all .16s var(--ease);
  display:inline-flex; align-items:center; gap:5px;
}
.seg button:hover{ color:var(--text-2); }
.seg button.on{
  background:rgba(255,255,255,.1); color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08) inset;
}
.seg.brand button.on{ background:rgba(254,44,85,.2); color:#fff; box-shadow:0 0 0 1px rgba(254,44,85,.28) inset; }

/* 标签 / 徽标 */
.tag{
  display:inline-flex; align-items:center; gap:4px;
  height:22px; padding:0 8px; border-radius:6px;
  font-size:10.5px; font-weight:500; color:var(--text-2);
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  white-space:nowrap;
}
.tag-brand{ color:#FF8FA3; background:rgba(254,44,85,.1); border-color:rgba(254,44,85,.22); }
.tag-cy{ color:#8FF9F5; background:rgba(37,244,238,.08); border-color:rgba(37,244,238,.2); }
.tag-warn{ color:#FFC95C; background:rgba(255,176,32,.1); border-color:rgba(255,176,32,.22); }
.tag-up{ color:#FF8FA3; background:rgba(255,77,106,.1); border-color:rgba(255,77,106,.2); }
.tag-down{ color:#6EE9C4; background:rgba(34,211,155,.1); border-color:rgba(34,211,155,.2); }
.tag-mute{ color:var(--text-3); }

.badge{
  display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px;
  border-radius:5px; font-size:10px; font-weight:600; letter-spacing:.2px;
  border:1px solid transparent;
}
.badge::before{ content:""; width:4px; height:4px; border-radius:50%; background:currentColor; }
.badge-red{ color:#FF7D95; background:rgba(254,44,85,.11); border-color:rgba(254,44,85,.22); }
.badge-green{ color:#5FE3BC; background:rgba(34,211,155,.1); border-color:rgba(34,211,155,.2); }
.badge-warn{ color:#FFC95C; background:rgba(255,176,32,.1); border-color:rgba(255,176,32,.2); }
.badge-blue{ color:#8FB0FF; background:rgba(91,140,255,.1); border-color:rgba(91,140,255,.2); }
.badge-mute{ color:var(--text-3); background:rgba(255,255,255,.05); border-color:var(--line); }

/* ---------- 10. 表格 ---------- */
.tbl-wrap{ width:100%; overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
.tbl thead th{
  position:sticky; top:0; z-index:1;
  text-align:right; font-weight:550; font-size:10.5px; letter-spacing:.5px;
  color:var(--text-3); padding:10px 14px; white-space:nowrap;
  background:#101219; border-bottom:1px solid var(--line);
}
.tbl thead th:first-child{ text-align:left; padding-left:20px; }
.tbl thead th:last-child{ padding-right:20px; }
.tbl thead th.sortable{ cursor:pointer; user-select:none; transition:color .15s; }
.tbl thead th.sortable:hover{ color:var(--text); }
.tbl thead th .sort-ind{ display:inline-block; margin-left:3px; opacity:.5; font-size:9px; }
.tbl thead th.on{ color:var(--text); }
.tbl thead th.on .sort-ind{ opacity:1; color:var(--brand-2); }
.tbl tbody td{
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.045);
  text-align:right; vertical-align:middle; font-variant-numeric:tabular-nums;
  color:var(--text);
}
.tbl tbody td:first-child{ text-align:left; padding-left:20px; }
.tbl tbody td:last-child{ padding-right:20px; }
.tbl tbody tr{ transition:background .14s; cursor:pointer; }
.tbl tbody tr:hover{ background:rgba(255,255,255,.032); }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl .num{ font-weight:560; }
.tbl .muted{ color:var(--text-3); font-size:11.5px; }
.tbl-empty{ padding:40px; text-align:center; color:var(--text-3); font-size:12.5px; }

.work-cell{ display:flex; align-items:center; gap:11px; min-width:0; }
.cover{
  width:46px; height:60px; border-radius:8px; flex:0 0 auto; position:relative;
  display:grid; place-items:center; font-size:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.1), transparent 45%, rgba(0,0,0,.35)); }
.cover .dur{
  position:absolute; bottom:3px; right:3px; z-index:2;
  font-size:8.5px; font-weight:600; padding:1px 3px; border-radius:3px;
  background:rgba(0,0,0,.62); color:#fff; backdrop-filter:blur(4px);
}
.work-txt{ min-width:0; }
.work-title{
  font-size:12.5px; font-weight:550; line-height:1.4; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  max-width:300px;
}
.work-meta{ display:flex; align-items:center; gap:6px; margin-top:4px; font-size:10.5px; color:var(--text-3); }

/* 封面配色（模拟图） */
.cov1{ background:linear-gradient(145deg,#3A1B24,#7A2138 55%,#2A1018); }
.cov2{ background:linear-gradient(145deg,#132B2A,#1B5E52 55%,#0E1F1E); }
.cov3{ background:linear-gradient(145deg,#2A2214,#6B4E1C 55%,#221A0E); }
.cov4{ background:linear-gradient(145deg,#1B1F33,#33406E 55%,#141727); }
.cov5{ background:linear-gradient(145deg,#2B1730,#5C2A63 55%,#1F1023); }
.cov6{ background:linear-gradient(145deg,#1D2A1C,#3D6136 55%,#162015); }

/* ---------- 11. 进度条 ---------- */
.bar{ display:block; height:5px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--brand), var(--brand-2)); transition:width .5s var(--ease-out); }
.bar.cy > i{ background:linear-gradient(90deg, #17C9C4, var(--cyan)); }
.bar.up > i{ background:linear-gradient(90deg, #C4233D, var(--up)); }
.bar.down > i{ background:linear-gradient(90deg, #15996F, var(--down)); }
.bar.warn > i{ background:linear-gradient(90deg, #C48412, var(--warn)); }
.bar.thin{ height:3px; }

/* ---------- 12. 列表行 ---------- */
.row{
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.045);
}
.row:last-child{ border-bottom:0; }
.row-main{ flex:1; min-width:0; }
.row-title{ font-size:12.5px; font-weight:550; }
.row-sub{ font-size:10.5px; color:var(--text-3); margin-top:2px; }
.row-val{ font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.row-val small{ display:block; font-size:10px; font-weight:400; color:var(--text-3); }

/* 排名 */
.rank{
  width:20px; height:20px; border-radius:6px; display:grid; place-items:center;
  font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.05); color:var(--text-3); flex:0 0 auto;
}
.rank.top1{ background:linear-gradient(135deg,#FF3D63,#B01232); color:#fff; box-shadow:0 0 14px rgba(254,44,85,.4); }
.rank.top2{ background:rgba(254,44,85,.18); color:#FF8FA3; }
.rank.top3{ background:rgba(254,44,85,.1); color:#E2708A; }

/* ---------- 13. 开关 ---------- */
.switch{
  width:38px; height:22px; border-radius:99px; flex:0 0 auto;
  background:rgba(255,255,255,.12); border:1px solid var(--line-2);
  position:relative; transition:background .22s var(--ease), border-color .22s;
  cursor:pointer;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:#B9C0CE; transition:transform .24s var(--ease-out), background .22s;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.switch.on{ background:rgba(254,44,85,.9); border-color:rgba(254,44,85,.9); box-shadow:0 0 16px rgba(254,44,85,.35); }
.switch.on::after{ transform:translateX(16px); background:#fff; }

/* 复选 */
.check{
  width:18px; height:18px; border-radius:5px; flex:0 0 auto;
  border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  display:grid; place-items:center; transition:all .16s;
}
.check .ic{ width:11px; height:11px; opacity:0; color:#fff; }
.check.on{ background:var(--brand); border-color:var(--brand); }
.check.on .ic{ opacity:1; }

/* ---------- 14. 骨架屏 ---------- */
.sk{
  background:linear-gradient(90deg, rgba(255,255,255,.045) 25%, rgba(255,255,255,.085) 37%, rgba(255,255,255,.045) 63%);
  background-size:400% 100%; border-radius:6px;
  animation:shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.sk-line{ height:11px; margin-bottom:8px; }
.sk-line.w40{ width:40%; } .sk-line.w60{ width:60%; } .sk-line.w80{ width:80%; }
.sk-kpi{ height:118px; border-radius:var(--r-lg); }
.sk-card{ height:260px; border-radius:var(--r-lg); }
.sk-row{ height:64px; border-radius:8px; margin-bottom:8px; }

/* ---------- 15. 空态 / 异常态 ---------- */
.state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:52px 24px; gap:4px;
  min-height:280px;
}
.state-art{
  width:76px; height:76px; border-radius:22px; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 25%, rgba(254,44,85,.16), rgba(255,255,255,.03));
  border:1px solid var(--line-2); margin-bottom:12px; color:var(--text-2);
  box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.state-art .ic{ width:30px; height:30px; opacity:.8; }
.state-title{ font-size:14px; font-weight:600; }
.state-desc{ font-size:12px; color:var(--text-3); max-width:340px; line-height:1.7; margin-top:3px; }
.state-actions{ margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.state.err .state-art{ background:radial-gradient(circle at 30% 25%, rgba(255,176,32,.16), rgba(255,255,255,.03)); color:var(--warn); }
/* 整页级空态 / 异常态：垂直居中，避免大片留白 */
#view > .state{ min-height:calc(100vh - var(--topbar-h) - 90px); }

/* ---------- 16. 浮层 ---------- */
.layer-root{ position:fixed; inset:0; z-index:100; pointer-events:none; }
.layer-root > *{ pointer-events:auto; }

.scrim{
  position:fixed; inset:0; background:rgba(3,4,7,.68);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation:fade .22s var(--ease);
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
@keyframes slideIn{ from{opacity:0; transform:translateX(28px)} to{opacity:1; transform:none} }
@keyframes popIn{ from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none} }

.modal{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(520px, calc(100vw - 32px)); max-height:86vh; overflow:auto;
  background:linear-gradient(180deg,#171A23,#101219);
  border:1px solid var(--line-2); border-radius:20px;
  box-shadow:var(--shadow-pop); animation:popIn .26s var(--ease-out);
}
.modal.wide{ width:min(760px, calc(100vw - 32px)); }
.modal-hd{ display:flex; align-items:center; gap:10px; padding:18px 20px 14px; border-bottom:1px solid var(--line); }
.modal-title{ font-size:15px; font-weight:620; }
.modal-body{ padding:18px 20px; }
.modal-ft{ display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--line); background:rgba(0,0,0,.2); }

.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(720px, 100vw);
  background:linear-gradient(180deg,#0E1016,#0A0B10);
  border-left:1px solid var(--line-2);
  box-shadow:-30px 0 80px rgba(0,0,0,.6);
  animation:slideIn .3s var(--ease-out);
  display:flex; flex-direction:column;
}
.drawer-hd{
  display:flex; align-items:flex-start; gap:12px; padding:18px 22px 14px;
  border-bottom:1px solid var(--line); flex:0 0 auto;
  background:rgba(10,11,16,.9); backdrop-filter:blur(12px);
}
.drawer-body{ flex:1; overflow-y:auto; padding:20px 22px 40px; }

.sheet{
  position:fixed; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,#171A23,#0E1016);
  border-top:1px solid var(--line-2); border-radius:22px 22px 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,.6);
  animation:sheetUp .3s var(--ease-out); padding-bottom:env(safe-area-inset-bottom);
  max-height:82vh; overflow:auto;
}
@keyframes sheetUp{ from{transform:translateY(100%)} to{transform:none} }
.sheet-hd{ display:flex; align-items:center; padding:16px 18px 8px; }
.sheet-grab{ width:36px; height:4px; border-radius:99px; background:rgba(255,255,255,.18); margin:8px auto 0; }

/* Toast */
.toast-root{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:200; display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; width:max-content; max-width:calc(100vw - 32px);
}
.toast{
  display:flex; align-items:center; gap:8px;
  padding:10px 15px; border-radius:11px; font-size:12.5px;
  background:rgba(26,29,38,.96); border:1px solid var(--line-2);
  box-shadow:0 16px 40px rgba(0,0,0,.55); color:var(--text);
  animation:toastIn .28s var(--ease-out);
  backdrop-filter:blur(12px);
}
.toast .ic{ width:15px; height:15px; }
.toast.ok .ic{ color:var(--down); }
.toast.err .ic{ color:var(--brand-2); }
.toast.warn .ic{ color:var(--warn); }
@keyframes toastIn{ from{opacity:0; transform:translateY(12px) scale(.96)} to{opacity:1; transform:none} }
.toast.out{ animation:toastOut .22s var(--ease) forwards; }
@keyframes toastOut{ to{opacity:0; transform:translateY(8px)} }

/* ---------- 17. 图表容器 ---------- */
.chart{ width:100%; position:relative; }
.chart svg{ width:100%; height:auto; display:block; overflow:visible; }
.chart-tip{
  position:absolute; z-index:20; pointer-events:none;
  padding:7px 10px; border-radius:9px; font-size:11px; line-height:1.6;
  background:rgba(22,25,34,.97); border:1px solid var(--line-2);
  box-shadow:0 10px 28px rgba(0,0,0,.55); color:var(--text);
  white-space:nowrap; transform:translate(-50%,-100%);
  transition:opacity .12s; opacity:0;
}
.chart-tip.show{ opacity:1; }
.chart-tip b{ font-weight:600; }
.chart-tip .t-row{ display:flex; align-items:center; gap:6px; justify-content:space-between; }
.chart-tip .t-dot{ width:6px; height:6px; border-radius:50%; }
.chart-tip .t-date{ color:var(--text-3); font-size:10px; margin-bottom:2px; }

.legend{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.legend-item{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--text-2); cursor:default; }
.legend-dot{ width:7px; height:7px; border-radius:2px; }

/* ---------- 18. 工具类 ---------- */
.flex{ display:flex; } .ac{ align-items:center; } .jb{ justify-content:space-between; } .je{ justify-content:flex-end; }
.g4px{ gap:4px } .g6{ gap:6px } .g8{ gap:8px } .g10{ gap:10px } .g12{ gap:12px } .g16{ gap:16px }
.wrap{ flex-wrap:wrap }
.mt2{ margin-top:2px } .mt4{ margin-top:4px } .mt6{ margin-top:6px } .mt8{ margin-top:8px }
.mt12{ margin-top:12px } .mt16{ margin-top:16px } .mt20{ margin-top:20px } .mt24{ margin-top:24px }
.mb8{ margin-bottom:8px } .mb12{ margin-bottom:12px } .mb16{ margin-bottom:16px }
.ml-auto{ margin-left:auto }
.t2{ color:var(--text-2) } .t3{ color:var(--text-3) } .t4{ color:var(--text-4) }
.f11{ font-size:11px } .f12{ font-size:12px } .f13{ font-size:13px }
.fw5{ font-weight:500 } .fw6{ font-weight:600 } .fw7{ font-weight:700 }
.num{ font-variant-numeric:tabular-nums; letter-spacing:-.2px; }
.up{ color:var(--up) } .down{ color:var(--down) } .warn{ color:var(--warn) }
.hide{ display:none !important; }
.truncate{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.center{ text-align:center; }
.divider{ height:1px; background:var(--line); margin:14px 0; }
.dot-sep{ width:3px; height:3px; border-radius:50%; background:var(--text-4); flex:0 0 auto; }
.hairline{ border-top:1px solid var(--line); }
.scroll-x{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.scroll-x::-webkit-scrollbar{ display:none; }

/* 可复制文本 */
.copyable{ cursor:pointer; transition:color .15s; }
.copyable:hover{ color:var(--brand-2); }

/* 打字机光标 */
.typing::after{ content:"▍"; color:var(--brand-2); animation:blink .9s steps(1) infinite; margin-left:1px; }
@keyframes blink{ 50%{opacity:0} }