/* === Tailwind CDN fallback: 本页用到的最小类集合,防止 jsdelivr 抽风时整页崩 === */
  .hidden{display:none!important}
  .block{display:block}.inline-flex{display:inline-flex}.flex{display:flex}.grid{display:grid}
  .items-center{align-items:center}.items-baseline{align-items:baseline}.items-start{align-items:flex-start}
  .justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
  .text-center{text-align:center}.text-right{text-align:right}
  .flex-wrap{flex-wrap:wrap}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-x-3{column-gap:.75rem}
  .space-y-3>*+*{margin-top:.75rem}
  .mx-auto{margin-left:auto;margin-right:auto}
  .m-0{margin:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
  .mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.ml-2{margin-left:.5rem}
  .mb-1\.5{margin-bottom:.375rem}
  .p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}
  .px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
  .pt-3{padding-top:.75rem}
  .text-xs{font-size:12px}.text-sm{font-size:14px}.text-lg{font-size:18px}.text-xl{font-size:20px}.text-2xl{font-size:24px}
  .leading-none{line-height:1}
  .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
  .rounded-lg{border-radius:.5rem}.border{border:1px solid var(--line)}
  .underline{text-decoration:underline}
  .overflow-x-auto{overflow-x:auto}.resize-none{resize:none}
  .fixed{position:fixed}.inset-0{top:0;right:0;bottom:0;left:0;position:fixed}.z-50{z-index:50}
  .max-w-\[1400px\]{max-width:1400px}.w-\[480px\]{width:480px}.max-w-\[90vw\]{max-width:90vw}
  .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  @media(min-width:768px){
    .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  }
  @media(min-width:1024px){
    .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .lg\:col-span-2{grid-column:span 2/span 2}
  }

  :root {
    --ink: #0f172a;
    --ink-2: #475569;
    --ink-3: #94a3b8;
    --line: #e2e8f0;
    --line-2: #cbd5e1;
    --bg: #f8fafc;
    --card: #ffffff;
    --primary: #0f766e;     /* teal 700 */
    --primary-soft: #ccfbf1;
    --good: #059669;
    --good-soft: #d1fae5;
    --warn: #d97706;
    --warn-soft: #fed7aa;
    --bad: #dc2626;
    --bad-soft: #fecaca;
    --accent: #4338ca;
  }
  body {
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Inter", sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-feature-settings: "tnum","cv11";
  }
  .num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
  .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.02);
  }
  .card-tight { padding: 14px 16px; }
  .stat-label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
  .stat-num { font-size: 22px; font-weight: 600; line-height: 1.1; }
  .stat-num-lg { font-size: 28px; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
  .stat-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
  /* 角色门:viewer 模式仍能看到 admin-only 元素(通用 UI),但改动不持久化
     viewer 的 localStorage.setItem 被劫持到 sessionStorage 暂存(本次会话有效,刷新失效)
     仅 admin 的改动写真实 localStorage */
  body[data-role="viewer"] .admin-only { position: relative; }
  body[data-role="viewer"] .admin-only::after {
    content: "仅查看 · 改动本次有效";
    position: absolute; top: 2px; right: 2px;
    font-size: 9px; color: #92400e; background: #fef3c7;
    padding: 1px 4px; border-radius: 3px; pointer-events: none; opacity: 0.85;
  }
  /* button / input 元素自身的 ::after 不渲染,改用 outline 提示 */
  body[data-role="viewer"] button.admin-only,
  body[data-role="viewer"] input.admin-only {
    box-shadow: 0 0 0 1px #fde68a;
  }
  body[data-role="viewer"] button.admin-only::after,
  body[data-role="viewer"] input.admin-only::after { display: none; }

  /* ===== 📱 手机自适应(≤640px)===== */
  @media (max-width: 640px) {
    /* 整体外边距收紧 */
    body { font-size: 14px; }
    .max-w-7xl { max-width: 100%; padding-left: 10px !important; padding-right: 10px !important; }
    /* 标题缩小 */
    .text-2xl { font-size: 18px; }
    .text-xl { font-size: 16px; }
    .text-lg { font-size: 15px; }
    /* card 内边距小一点 */
    .card { padding: 12px; }
    .card-tight { padding: 10px 12px; }
    .p-5 { padding: 12px !important; }
    .p-4 { padding: 10px !important; }
    .p-6 { padding: 14px !important; }
    /* KPI 网格强制 2 列(原 4 列) */
    .grid.grid-cols-2.md\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .grid.md\:grid-cols-5 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    /* 主数字字号收一档 */
    .stat-num-lg { font-size: 22px !important; }
    .num-dual .num-usd, .num-dual .num-cny { font-size: 17px !important; }
    .cap-pct { font-size: 20px !important; }
    .stat-label { font-size: 10px; }
    .stat-sub { font-size: 10px; }
    /* 头部按钮换行,刷新/退出更紧凑 */
    header { gap: 6px !important; }
    header .btn, header .btn-ghost { padding: 6px 10px; font-size: 12px; }
    /* 过滤悬浮 chip 紧凑 */
    .filter-chip { font-size: 11px; padding: 5px 9px; }
    #filter-fab { right: 8px !important; bottom: 8px !important; gap: 4px !important; }
    /* 表格横滚 */
    table.data-table { font-size: 12px; }
    table.data-table th, table.data-table td { padding: 6px 6px !important; }
    /* 模态框宽度撑满屏 */
    .card.w-\[640px\], .card.w-\[720px\], .card.w-\[480px\] { width: 95vw !important; max-width: 95vw !important; padding: 14px !important; }
    /* 燃烧速率 / 图表降高 */
    canvas { max-height: 160px !important; }
    /* fx-pill 缩短换行 */
    #fx-pill { font-size: 11px; }
    #fx-formula { display: none; }   /* 手机隐藏长公式说明 */
    /* 号商性价比 + 用户回购卡 单列 */
    .grid.grid-cols-2.md\:grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 380px) {
    .grid.grid-cols-2.md\:grid-cols-4 { grid-template-columns: 1fr !important; }
    .grid.md\:grid-cols-5 { grid-template-columns: 1fr !important; }
  }
  /* 角色徽章:加在 KPI 区右上角 */
  .role-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 500; }
  .role-badge.admin  { background:#dbeafe; color:#1e40af; }
  .role-badge.viewer { background:#f1f5f9; color:#475569; }

  /* 双货币:$/¥ 两行都大字平等,无主次 */
  .num-dual { display:flex; flex-direction:column; gap:2px; line-height:1.05; letter-spacing:-0.01em; }
  .num-dual .num-usd, .num-dual .num-cny {
    font-size: 22px; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  /* 紧凑版(卡片格子较窄时) */
  .num-dual.compact .num-usd, .num-dual.compact .num-cny { font-size: 19px; }
  /* 容量卡:headline = 双数 + 大字百分比并排;红黄绿水位 */
  .cap-headline { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .cap-pct { font-size: 26px; font-weight: 800; line-height:1; font-variant-numeric: tabular-nums; }
  .cap-card[data-level="green"]  { background:#E8F7EF; border-color:#86efac; }
  .cap-card[data-level="green"]  .cap-pct { color:#137333; }
  .cap-card[data-level="yellow"] { background:#FFF4D6; border-color:#fcd34d; }
  .cap-card[data-level="yellow"] .cap-pct { color:#8A5A00; }
  .cap-card[data-level="red"]    { background:#FDECEC; border-color:#fca5a5; }
  .cap-card[data-level="red"]    .cap-pct { color:#B42318; }
  .pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 500;
  }
  .pill-good { background: var(--good-soft); color: var(--good); }
  .pill-warn { background: var(--warn-soft); color: var(--warn); }
  .pill-bad  { background: var(--bad-soft);  color: var(--bad); }
  .pill-info { background: var(--primary-soft); color: var(--primary); }
  .pill-mute { background: var(--line); color: var(--ink-2); }
  .progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
  .progress > div { height: 100%; transition: width .4s ease; }
  .divider-h { border-top: 1px solid var(--line); }
  table.data-table { width: 100%; font-size: 13px; }
  table.data-table th { font-size: 11px; color: var(--ink-3); font-weight: 500; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .04em; }
  table.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  table.data-table tr:last-child td { border-bottom: none; }
  table.data-table tr:hover td { background: #f8fafc; }
  input, select, button { font-family: inherit; }
  .ipt {
    width: 100%; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 6px;
    font-size: 13px; background: white; color: var(--ink); outline: none; transition: border-color .15s;
  }
  .ipt:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
  .btn {
    padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 500;
    background: var(--primary); color: white; border: none; cursor: pointer; transition: background .15s;
  }
  .btn:hover { background: #115e59; }
  .btn-ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); }
  .btn-ghost:hover { background: var(--line); }
  .demo-banner {
    background: #fef3c7; border: 1px solid #fcd34d; color: #92400e;
    padding: 8px 14px; border-radius: 8px; font-size: 13px; display: flex; gap: 8px; align-items: center;
  }
  .section-title {
    font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
  }
  .section-title svg { width: 16px; height: 16px; color: var(--primary); }
  .micro-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 12px; }
  .micro-stat .k { color: var(--ink-3); }
  .micro-stat .v { color: var(--ink); font-weight: 500; }
  details summary { cursor: pointer; user-select: none; outline: none; }
  details summary::-webkit-details-marker { display: none; }
  .batch-card {
    border-left: 3px solid var(--primary);
    background: white;
    transition: box-shadow .2s;
  }
  .batch-card:hover { box-shadow: 0 4px 12px rgba(15,23,42,.08); }