/* ============================================================
 * AI 使用实时看板 v4 · 全站样式
 * （自 index.html 内联迁出 + v4 视觉体系：卡片规范、部门专区、
 *   涨红跌绿全站翻转、金额琥珀金、1366×768 / 1920×1080 双断点）
 * ============================================================ */
:root{
  --bg:#f6f7f9; --surface:#fff; --text:#1f2329; --muted:#6b7280; --border:#e5e7eb;
  --primary:#185fa5; --primary-light:#e6f1fb; --teal:#0f6e56; --teal-light:#e1f5ee;
  --coral:#993c1d; --coral-light:#faece7; --amber:#854f0b; --amber-light:#faeeda; --radius:12px;
  --gap:12px; /* v4：区块间距收敛 14→12 */
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}
.wrap{max-width:1520px;margin:0 auto;padding:18px 20px 48px}

/* ---------------- 顶栏 ---------------- */
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.topbar h1{font-size:20px;font-weight:600}
.badge{font-size:12px;padding:2px 10px;border-radius:999px;border:1px solid}
.badge.idle{background:#eef0f3;color:var(--muted)}
.badge.launching,.badge.awaiting-login{background:var(--amber-light);color:var(--amber);border-color:#f0d9ad}
.badge.logged-in,.badge.ready{background:var(--teal-light);color:var(--teal);border-color:#bfe6d6}
.badge.error{background:var(--coral-light);color:var(--coral)}
.meta{font-size:12px;color:var(--muted)}
.spacer{flex:1}
.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ¥ 单价按钮（v4） */
.price-btn{border-color:#e8cf9a;background:var(--amber-light);color:var(--amber);font-weight:500}
.price-btn:hover{border-color:var(--amber);color:var(--amber)}

/* ---------------- 表单 ---------------- */
select,button{font:inherit;color:var(--text)}
select{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 10px;outline:none}
select:focus{border-color:var(--primary)}
button{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 14px;cursor:pointer}
button:hover{border-color:var(--primary);color:var(--primary)}
button.primary{background:var(--primary);border-color:var(--primary);color:#fff}
button.primary:hover{opacity:.9;color:#fff}
button:disabled{opacity:.45;cursor:not-allowed}

/* 登录卡（紧凑） */
#loginCard .status-line{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;margin-bottom:12px}
#loginCard .status-line b{font-weight:500}
#loginCard .actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------------- 筛选条 ---------------- */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:var(--gap);box-shadow:0 1px 2px rgba(31,35,41,.04)}
.filters .fg{display:flex;align-items:center;gap:6px}
.filters .fg span{font-size:13px;color:var(--muted)}
/* 积分⇄金额 分段开关（v4） */
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.seg button{border:none;border-radius:0;padding:5px 14px;background:var(--surface);color:var(--muted);font-size:13px}
.seg button.on{background:var(--primary);color:#fff}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.seg button:not(:disabled):not(.on):hover{color:var(--primary)}
/* ---- v6：时间范围（7 档分段控件 + 自定义区间） ----
 * 注意：选择器一律带上 .filters 前缀以提高优先级。dashboard-v2.css 里的
 * `.dashboard-v2 button{border-color:...}` / `:hover{color:...}` 与这里同为 (0,1,1)/(0,2,1)，
 * 仅靠源码顺序会反被覆盖，导致「应用」按钮边框与悬停文字色失配、对比度过低。 */
#rangeSeg button{padding:5px 10px;white-space:nowrap}
.filters .range-picker{display:inline-flex;align-items:center;gap:6px}
.filters .range-picker input[type=date]{
  padding:4px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);
  color:var(--text);font-size:13px;font-family:inherit;line-height:1.4
}
.filters .range-picker input[type=date]:focus{outline:none;border-color:var(--primary)}
.filters .range-picker em{color:var(--muted);font-style:normal;font-size:12px}
.filters .range-picker button{
  padding:5px 12px;border:1px solid var(--primary);border-radius:8px;background:var(--surface);
  color:var(--primary);font-size:13px;cursor:pointer
}
.filters .range-picker button:hover,
.filters .range-picker button:focus{
  background:var(--primary);border-color:var(--primary);color:#fff
}
.filters .fg .range-hint{font-size:12px}
.range-hint.warn{color:var(--amber)}

/* ---------------- 布局 / 卡片体系（v4 统一） ---------------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin-bottom:var(--gap)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:0 1px 2px rgba(31,35,41,.04);margin-bottom:0}
.card h2{font-size:15px;font-weight:600;margin-bottom:4px}
.card .sub{font-size:12px;color:var(--muted);margin-bottom:12px}
.span4{grid-column:span 4}.span5{grid-column:span 5}.span7{grid-column:span 7}.span8{grid-column:span 8}.span12{grid-column:span 12}

/* ---------------- KPI 卡（v4：7 卡一行） ---------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap);margin-bottom:var(--gap)}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px;box-shadow:0 1px 2px rgba(31,35,41,.04)}
.metric .label{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric .value{font-size:24px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.metric .unit{font-size:12px;color:var(--muted);font-weight:400}
/* 不可断行的 token（日期等）：整段换行，不从连字符中间拆开
 * （窄卡下曾出现「到期 2027-09-」/「24」把日期劈成两半） */
.nb{white-space:nowrap}
/* 组合值「已用 / 总额」的分母：降一档字号并置灰，左侧留出与主数的间距。
 * em 会跟着 .value 的最终字号一起缩放，因此与「数值自适应缩字号」天然兼容。 */
.metric .value .v-sub{font-size:.62em;font-weight:500;color:var(--muted);margin-left:.26em}
.metric .delta{font-size:12px;margin-top:4px}
/* v4：涨红跌绿（全站统一翻转，原有涨绿跌红作废） */
.delta.up{color:var(--coral)} .delta.down{color:var(--teal)} .delta.flat{color:var(--muted)}
/* v4：金额（估算）强调色 —— 琥珀金，区别于积分数值 */
.money{color:var(--amber);font-variant-numeric:tabular-nums}
.est{font-size:11px;color:var(--muted)}
sup.est-tag{font-size:10px;color:var(--amber);font-weight:500;margin-left:2px}
.cfg-link{color:var(--primary);cursor:pointer;text-decoration:underline}

/* ---------------- 图表 ---------------- */
.chart{width:100%}
#trendChart{height:360px}
#structureChart{height:300px}
#deptShareChart{height:300px}
#treemapChart{height:300px}
#deptStackChart{height:330px}

/* ---------------- 排行（v4：序号徽标） ---------------- */
.rank-item{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid #f1f2f4;cursor:pointer}
.rank-item:hover{background:#f8fafc}
.rank-item:last-child{border-bottom:none}
.rank-item.active{background:var(--primary-light)}
.rank-no{width:22px;height:22px;line-height:22px;font-size:12px;color:var(--muted);text-align:center;font-weight:600;border-radius:50%;background:#f1f2f4}
.rank-no.top1{background:var(--amber);color:#fff}
.rank-no.top2{background:#b98336;color:#fff}
.rank-no.top3{background:#8a8f99;color:#fff}
.rank-bar-wrap{position:relative;height:18px;background:#f1f2f4;border-radius:4px;overflow:hidden}
.rank-bar{position:absolute;left:0;top:0;bottom:0;background:#378add;border-radius:4px}
.rank-name{position:absolute;left:8px;top:0;line-height:18px;font-size:12px;color:var(--text);z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 10px)}
.rank-val{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}

/* ---------------- 表格 ---------------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 10px;text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{color:var(--muted);font-weight:500;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
thead th:hover{color:var(--primary)}
thead th .arr{font-size:10px;margin-left:2px}
thead th.no-sort{cursor:default}
thead th.no-sort:hover{color:var(--muted)}
tbody tr{border-bottom:1px solid #f1f2f4;cursor:pointer}
tbody tr:hover{background:#f8fafc}
tbody tr.active{background:var(--primary-light)}
td.num{font-variant-numeric:tabular-nums}
.empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px}

/* ---------------- 部门 AI 费用统计专区（v4 新增） ---------------- */
.dept-card{margin-bottom:var(--gap)}
.dept-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border);font-size:13px}
.dept-head .dh-item{color:var(--muted)}
.dept-head .dh-item b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.dept-head .dh-meta{font-size:12px;color:var(--muted)}
.dept-head .dh-ctrl{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dept-head .dh-ctrl .seg button{padding:3px 10px;font-size:12px}
.dept-head .dh-ctrl button{padding:4px 12px;font-size:12.5px}
.dept-body{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:var(--gap)}
.dept-chart h2{font-size:14px}
.dept-chart .sub{margin-bottom:8px}
/* 下钻表格层级样式：中心行加粗+浅底色，部行缩进，组行弱化 */
#deptTable tbody tr{cursor:default}
#deptTable tr.d0 td{font-weight:600;background:#fafbfc}
#deptTable tr.d0 td:first-child{border-left:3px solid var(--primary)}
#deptTable tr.d1 td:first-child{padding-left:26px}
#deptTable tr.d2 td:first-child{padding-left:44px}
#deptTable tr.d2{color:var(--muted);font-size:12.5px}
.dept-toggle{display:inline-block;width:18px;font-size:11px;color:var(--muted);cursor:pointer;user-select:none}
.dept-toggle.leaf{cursor:default;color:#d1d5db}
.dept-pts-sub{font-size:11.5px;color:var(--muted)}

/* ---------------- ¥ 单价配置弹层（v4） ---------------- */
.modal-mask{position:fixed;inset:0;background:rgba(31,35,41,.42);display:flex;align-items:center;justify-content:center;z-index:100}
.modal{background:var(--surface);border-radius:14px;box-shadow:0 12px 40px rgba(31,35,41,.18);width:min(460px,92vw);padding:22px 24px}
.modal h3{font-size:16px;font-weight:600;margin-bottom:8px}
.modal .modal-tip{font-size:12.5px;color:var(--muted);line-height:1.7;margin-bottom:14px;background:#fafbfc;border-radius:8px;padding:10px 12px}
.modal .modal-tip strong{color:var(--amber)}
.modal-label{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:6px}
.modal-label input{flex:1;font:inherit;border:1px solid var(--border);border-radius:8px;padding:7px 10px;outline:none}
.modal-label input:focus{border-color:var(--primary)}
.modal-err{font-size:12px;color:var(--coral);min-height:18px;margin-bottom:6px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ---------------- toast ---------------- */
#toast{position:fixed;top:18px;left:50%;transform:translateX(-50%) translateY(-80px);background:#1f2329;color:#fff;font-size:13px;padding:9px 20px;border-radius:999px;transition:transform .3s;z-index:99}
#toast.show{transform:translateX(-50%) translateY(0)}
footer{margin-top:22px;font-size:12px;color:var(--muted);line-height:1.8}

/* ---------------- v5：ROI 概览专区 ---------------- */
.roi-card{margin-bottom:var(--gap)}
.roi-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:4px}
.roi-head h2{font-size:15px;font-weight:600}
.roi-ctrl{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.roi-ctrl .dh-meta{font-size:12px;color:var(--muted)}
.roi-ctrl select{font-size:13px;padding:4px 8px}
.roi-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--gap);margin:8px 0 6px}
.roi-cards .metric{border-color:#e8cf9a;background:linear-gradient(180deg,#fffdf7,#fff)}
.roi-cards .metric .value{font-size:26px}
.roi-cards .metric .coef{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.55}
.roi-note{font-size:12px;color:var(--muted);line-height:1.7;border-top:1px dashed var(--border);padding-top:8px;margin-top:6px}
.roi-note .warn{color:var(--coral)}
.roi-note .mono,code.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;background:#f4f5f7;border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:#374151}
.roi-good{color:var(--teal)} .roi-bad{color:var(--coral)}
.roi-up{color:var(--coral)} .roi-down{color:var(--teal)}

/* ---------------- v5：Link AI 专区 ---------------- */

/* ---------------- v5：Link AI 平台用量（多账号合并总账） ---------------- */
#lpTrendChart{height:280px}
/* v7：按模型 / 按密钥的半栏环形图（与 WorkBuddy「使用结构」「部门费用占比」同款视觉） */
.lp-chart{height:230px;margin:2px 0 10px}
/* v7：账号总览表 —— 数字列不换行，账号列固定宽，避免半栏里被挤爆 */
#lpAccountTable td,#lpAccountTable th{white-space:nowrap;padding:7px 10px}
#lpAccountTable td.acc-name{white-space:normal;min-width:120px}
.lp-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:14px}
.lp-two h2{margin-bottom:6px}
.lp-warn{color:var(--coral);font-weight:600}
.lp-two .metric .value{font-size:22px}
/* 窄屏时半栏图表/表格纵向堆叠（v2 同名规则在 dashboard-v2.css 覆盖，这里给 index.html 用） */
@media (max-width:1000px){
  .lp-two{grid-template-columns:1fr}
  .lp-chart{height:200px}
}

/* ---------------- v5：信息架构分区（WorkBuddy / Link AI 明确分离） ---------------- */
.zonenav{display:flex;gap:6px;flex-wrap:wrap;margin-left:12px}
.zonenav a{font-size:12.5px;color:var(--primary);text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:2px 10px;background:var(--surface)}
.zonenav a:hover{border-color:var(--primary);background:var(--primary-light)}
.zone{margin-top:18px;padding:14px 16px 10px;border-radius:14px}
.zone-wb{background:#fbfcfe;border:1px solid #e3e9f2;border-left:5px solid var(--primary)}
.zone-lp{background:#fbfaf6;border:1px solid #efe6d4;border-left:5px solid var(--amber)}
.zone-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.zone-title{font-size:19px;font-weight:700;margin:0}
.zone-wb .zone-title{color:var(--primary)}
.zone-lp .zone-title{color:var(--amber)}
.zone-badge{font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:999px;padding:2px 10px}
section.zone{scroll-margin-top:14px}
.lp-warnbox{color:var(--coral);font-size:12px;line-height:1.7;border-top:1px dashed var(--border);padding-top:6px;margin-top:6px}

/* ---------------- v5：产出指标专区 ---------------- */
.outcome-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--gap);margin-top:8px}
.outcome-box{border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.outcome-box h3{font-size:13.5px;font-weight:600;margin-bottom:8px;color:var(--text)}
.outcome-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;border-bottom:1px solid #f4f5f7}
.outcome-line:last-child{border-bottom:none}
.outcome-line .k{color:var(--muted)}
.outcome-line .v{font-weight:600;font-variant-numeric:tabular-nums}
.outcome-line .d{font-size:12px;margin-left:6px}

/* ---------------- v5：参数量弹层扩展 ---------------- */
.modal-wide{width:min(560px,94vw)}
.modal-sec{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.modal-sec-t{font-size:12.5px;color:var(--muted);margin-bottom:8px;font-weight:500}
.chk-line{font-size:13px;color:var(--text)}

/* ---------------- 断点 ---------------- */
/* 1366×768：压缩留量，避免溢出/换行错位 */
@media (max-width:1450px){
  .wrap{padding:14px 14px 40px}
  .dept-body{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
}
@media (max-width:1100px){
  .dept-body{grid-template-columns:1fr}
  .metric .value{font-size:21px}
}
@media (max-width:960px){
  .span4,.span5,.span7,.span8{grid-column:span 12}
  .topbar h1{font-size:18px}
  th,td{padding:7px 6px}
  .dept-head .dh-ctrl{margin-left:0}
}

/* v7：账号总览表的状态小徽章（index.html 用；v2 页面由 dashboard-v2.css 覆盖配色） */
.acc-chip{display:inline-block;font-size:11px;padding:1px 8px;border-radius:999px;margin-left:6px;vertical-align:1px;border:1px solid var(--border)}
.acc-chip.warn{background:#fdecec;color:var(--coral);border-color:#f6cdca}
.acc-chip.ok{background:#e8f6f0;color:#1a7f66;border-color:#cbeadd}
#lpModelChart,#lpKeyChart{height:230px}