/* QIMA 家族设计语言：青绿 #3FB39F 品牌色，金 #D4A24C 只给唯一主操作。
   眯眼看，最跳的必须是「分析当前数据」那个金色按钮。 */
:root{
  --green:#3FB39F; --green-soft:#EAF6F4; --gold:#D4A24C;
  --text:#1D1D1F; --text-2:#86868B; --text-3:#C7C7CC;
  --bg:#fff; --bg-soft:#F5F5F7; --line:#E5E7EB;
  --bad:#D9534F; --warn:#C8862B; --good:#2E9E7E;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg-soft); color:var(--text);
  font-family:-apple-system,"SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif;
  font-size:14px; line-height:1.5;
}
.wrap{max-width:1240px; margin:0 auto; padding:0 20px}

/* ---- 顶栏 ---- */
.topbar{background:var(--green); color:#fff; padding:14px 0; margin-bottom:20px}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px}
.topbar h1{margin:0; font-size:18px; font-weight:600; letter-spacing:.3px}
.topbar .sub{font-weight:400; opacity:.75; font-size:13px; margin-left:6px}
.quota{display:flex; gap:6px; flex-wrap:wrap; font-size:11px}
.quota span{background:rgba(255,255,255,.16); padding:3px 8px; border-radius:20px; white-space:nowrap}
.quota span.low{background:rgba(255,255,255,.32); font-weight:600}

/* ---- 卡片 ---- */
.card{background:#fff; border-radius:12px; padding:18px 20px; margin-bottom:16px;
      box-shadow:0 1px 2px rgba(0,0,0,.04)}
.chd{display:flex; align-items:center; justify-content:space-between; gap:12px;
     margin-bottom:14px; flex-wrap:wrap}
.chd h2{margin:0; font-size:15px; font-weight:600}
.chd-r{display:flex; align-items:center; gap:12px}
.hint{color:var(--text-2); font-size:12px}
.hint .q{display:inline-block; width:14px; height:14px; line-height:13px; text-align:center;
  border:1px solid var(--text-3); border-radius:50%; font-style:normal; font-size:10px; cursor:help}
.btn-ghost.sm{padding:4px 11px; font-size:12px}
tr.tail td{color:var(--text-2)}

/* ---- 筛选 ---- */
.filters{padding:16px 20px}
.frow{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.frow+.frow{margin-top:12px}
.fgroup{display:flex; align-items:center; gap:9px}
.fgroup.grow{flex:1}
.fgroup>label{color:var(--text-2); font-size:12px; white-space:nowrap}
.fgroup>label em{display:inline-block; width:14px; height:14px; line-height:14px; text-align:center;
  border:1px solid var(--text-3); border-radius:50%; font-style:normal; font-size:10px; cursor:help}
.segs{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.segs button{border:0; background:#fff; padding:6px 12px; font:inherit; font-size:13px;
  color:var(--text-2); cursor:pointer; border-right:1px solid var(--line)}
.segs button:last-child{border-right:0}
.segs button:hover{background:var(--bg-soft)}
.segs button.on{background:var(--green-soft); color:var(--green); font-weight:600}
.segs.sm button{padding:4px 10px; font-size:12px}
.dates{display:flex; align-items:center; gap:6px}
.dates input{border:1px solid var(--line); border-radius:8px; padding:5px 8px; font:inherit; font-size:13px}
.tilde{color:var(--text-3)}
.chk{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-2); cursor:pointer}
.sel{border:1px solid var(--line); border-radius:8px; padding:5px 8px; font:inherit; font-size:13px; background:#fff}

.btn-primary{background:var(--gold); color:#fff; border:0; border-radius:9px;
  padding:8px 18px; font:inherit; font-size:13px; font-weight:600; cursor:pointer}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:disabled{opacity:.55; cursor:default}
.btn-ghost{background:#fff; color:var(--green); border:1px solid var(--green);
  border-radius:9px; padding:6px 16px; font:inherit; font-size:13px; cursor:pointer}
.btn-ghost:hover{background:var(--green-soft)}

/* ---- KPI ---- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px}
.kpi{background:#fff; border-radius:12px; padding:14px 16px; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.kpi .k{color:var(--text-2); font-size:12px}
.kpi .v{font-size:26px; font-weight:600; letter-spacing:-.5px; margin-top:2px}
.kpi .r{font-size:12px; color:var(--green); margin-top:2px}
.kpi .r.mute{color:var(--text-3)}

/* ---- 表格 ---- */
.tbwrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums}
th,td{padding:8px 10px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line)}
th{color:var(--text-2); font-weight:500; font-size:12px; cursor:pointer; user-select:none;
   position:sticky; top:0; background:#fff}
th:hover{color:var(--green)}
th.asc::after{content:" ▲"; font-size:9px} th.desc::after{content:" ▼"; font-size:9px}
th:first-child,td:first-child{text-align:left}
tbody tr:hover{background:var(--bg-soft)}
tr.organic td{color:var(--text-2); font-style:italic}
tfoot td{font-weight:600; border-top:2px solid var(--line); border-bottom:0}
.pid{font-weight:600}
.tag{display:inline-block; padding:1px 7px; border-radius:20px; font-size:11px; margin-left:5px; font-weight:500}
.tag.bad{background:#FBEAEA; color:var(--bad)}
.tag.warn{background:#FBF2E3; color:var(--warn)}
.tag.good{background:#E6F5F0; color:var(--good)}
.score{display:inline-block; min-width:34px; padding:2px 7px; border-radius:6px; font-weight:600; font-size:12px}
.score.s1{background:#E6F5F0; color:var(--good)}
.score.s2{background:var(--green-soft); color:var(--green)}
.score.s3{background:#FBF2E3; color:var(--warn)}
.score.s4{background:#FBEAEA; color:var(--bad)}
.score.na{background:var(--bg-soft); color:var(--text-3); font-weight:400}
.dim{color:var(--text-3)}
.bar{display:inline-block; height:4px; background:var(--green); border-radius:2px; vertical-align:middle; margin-right:6px}

/* ---- 图表 ---- */
#chart{overflow-x:auto}
#chart svg{display:block}
.gl{stroke:var(--line); stroke-width:1}
.gt{fill:var(--text-3); font-size:10px}
.gb{fill:var(--green); rx:2}
.gb:hover{fill:#2E9E8A}

/* ---- 提示 ---- */
.warn-box{background:#FBF2E3; border:1px solid #EBD9AE; color:#7A5A16; border-radius:10px;
  padding:10px 14px; margin-bottom:14px; font-size:13px}
.warn-box b{font-weight:600}


.foot{color:var(--text-3); font-size:12px; text-align:center; padding:8px 0 28px}

/* 占比基数说明：跟在「账号漏斗」标题后面，说清分母是什么 */
.tkbase{font-weight:400; font-size:12px; color:var(--text-2); margin-left:8px}

/* 数据口径说明：给面板观众看的，不是警告，所以用中性灰底而不是黄色告警色 */
.note{font-size:12px; line-height:1.6; color:var(--text-2); margin:-6px 0 12px}
.note b{color:var(--text-2); font-weight:600}
.note em{display:inline-block; width:14px; height:14px; line-height:13px; text-align:center;
  border:1px solid var(--text-3); border-radius:50%; font-style:normal; font-size:10px;
  cursor:help; margin-left:3px}

/* 留存率：唯一的真·留存指标（「打开3次」是累计口径，不看时间窗） */
.ret{font-weight:600}
.ret.good{color:var(--good)}
.ret.mid{color:var(--text)}
.ret.bad{color:var(--bad)}

/* 账号名下面的小字 pid —— 运营认 @账号名，技术认 qimaXX，两个都要显示 */
.sub2{display:block; font-size:11px; color:var(--text-3); font-weight:400}

/* 账号代号旁边的昵称备注 */
.nick{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:20px;
  background:var(--bg-soft); color:var(--text-2); font-size:11px; font-weight:500}

/* 跳 aiclawd.com 的链接 */
.lnk{color:var(--green); text-decoration:none; border-bottom:1px dotted var(--green)}
.lnk:hover{background:var(--green-soft)}

/* 顶栏右侧：刷新节奏与上次刷新时间 */
.refresh-info{font-size:12px; color:#fff; opacity:.85; white-space:nowrap}

/* ===== 层级体系（2026-07-29 重构）=====
   一眼看到的：下载/注册/订阅（漏斗结果，key 列）—— 加重、放大、青绿底色带。
   二眼再看的：点击、占比、账号名。
   退到底的：各级转化率（rate 列，小号灰字）—— 是解释，不是结论。 */
th.key{color:var(--green); font-weight:700}
td.key{font-weight:700; font-size:14.5px; background:rgba(63,179,159,.07)}
tr.organic td.key{font-weight:600}
tfoot td.key{background:rgba(63,179,159,.14)}
th.rate{font-weight:400}
td.rate{color:var(--text-2); font-size:12px}
thead th{border-bottom:2px solid var(--line); padding-top:4px}
tbody td{padding-top:10px; padding-bottom:10px}
tfoot td{padding-top:11px}

/* KPI：漏斗结果卡带青绿强调边，数字更大；点击是过程量，保持中性 */
.kpi.key{border-left:3px solid var(--green)}
.kpi.key .v{font-size:30px}