/* 藏宝阁价格库 · 新增页面（登录 / 成交统计 / 运行日志）专用样式
   只补充 style.css 未覆盖的类；颜色 / 圆角 / 阴影全部复用 :root 变量。
   ★ 不修改 style.css，本文件须在 style.css 之后引入。 */

/* ============================================================ 顶部导航 */
/* 由 auth.js 注入：页面内已有 header.topbar 时插到 .topbar-actions 之前，
   没有 topbar 时自建一条。整体与现有 .topbar 视觉一致。 */
.page-tabs{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.page-tab{
  display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;
  font-size:13px;color:var(--text-2);text-decoration:none;white-space:nowrap;
  border:1px solid transparent;transition:.15s;
}
.page-tab:hover{background:#f0f4fb;color:var(--brand)}
.page-tab.active{background:#eaf1ff;color:var(--brand);font-weight:650;border-color:#d8e4ff}
.page-tabs-spacer{flex:1;min-width:8px}
.nav-user{color:var(--text-3);font-size:12.5px;white-space:nowrap}
.nav-user b{color:var(--text);font-weight:650}

/* ============================================================ 登录页 */
.login-body{display:block}
.login-wrap{
  min-height:100vh;display:grid;place-items:center;
  background:linear-gradient(160deg,#eef3fb 0%,#f4f6f9 46%,#eef1f7 100%);
}
.login-card{
  width:360px;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:30px 30px 26px;
}
.login-logo{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,#2f6df6,#7aa5ff);color:#fff;
  display:grid;place-items:center;font-size:22px;font-weight:700;margin-bottom:14px;
}
.login-card h1{font-size:20px;font-weight:700;letter-spacing:.3px}
.login-sub{color:var(--text-3);font-size:12.5px;margin:6px 0 22px}
.login-card .field{margin-bottom:14px}
.login-card .field>label{font-size:12.5px}
.login-card input{height:38px}
.login-card .btn{height:38px}
.login-err{margin:0 0 12px}

/* ============================================================ 通用页面容器 */
.page-wrap{padding:14px 22px 40px}

/* 筛选条：白卡片，字段横排（复用 .field 但去掉下间距、固定控件宽度） */
.filterbar{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;
  padding:12px 16px;margin-bottom:14px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.filterbar .field{margin-bottom:0;width:auto}
.filterbar .field>label{font-size:12px;margin-bottom:5px}
.filterbar input{width:150px}
.filterbar select{width:180px}
.filterbar .filter-grow{flex:1}
.filterbar .filter-actions{display:flex;align-items:flex-end;gap:8px;margin-left:auto}

/* ============================================================ KPI 卡片 */
.kpi-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.kpi-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 18px;
}
.kpi-label{font-size:12px;color:var(--text-3)}
.kpi-value{
  font-size:24px;font-weight:700;color:var(--text);margin-top:7px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.kpi-value.accent{color:var(--brand)}
.kpi-sub{font-size:11.5px;color:var(--text-3);margin-top:4px}

/* ============================================================ 横向条形图（纯 CSS） */
.bar-chart{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 18px;margin-bottom:14px;
}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.chart-head h2{font-size:14px;font-weight:650}
.bar-row{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:12px;padding:4px 0}
.bar-label{
  font-size:12.5px;color:var(--text-2);text-align:right;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.bar-track{position:relative;height:20px;background:#f0f3f8;border-radius:6px;overflow:hidden}
.bar-fill{
  height:100%;border-radius:6px;min-width:3px;transition:width .3s ease;
  background:linear-gradient(90deg,#5b8def,#7a6ff0);
}
.bar-val{
  font-size:12px;color:var(--text-2);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.bar-val b{color:var(--text);font-weight:650}
.bar-empty{color:var(--text-3);font-size:12.5px;padding:14px 0;text-align:center}

/* 口径说明 */
.caliber{
  color:var(--text-3);font-size:12px;line-height:1.7;margin:0 2px 14px;
}

/* ============================================================ 运行日志页 */
.log-layout{display:flex;gap:14px;padding:14px 22px 40px;align-items:flex-start}
.log-side{
  width:220px;flex:none;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:8px;
  position:sticky;top:73px;max-height:calc(100vh - 90px);overflow-y:auto;
}
.log-side h2{font-size:12px;font-weight:650;color:var(--text-3);padding:6px 8px;letter-spacing:.3px}
.log-side-item{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;
  color:var(--text);transition:.12s;
}
.log-side-item:hover{background:#f5f8fd}
.log-side-item.active{background:#eaf1ff;color:var(--brand);font-weight:650}
.log-side-item .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log-side-item .n{font-size:11.5px;color:var(--text-3);flex:none}
.log-side-item.active .n{color:var(--brand)}
.log-main{flex:1;min-width:0}

.day-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;
}
.day-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 16px;background:#fafbfd;border-bottom:1px solid var(--line);
}
.day-title{font-size:14px;font-weight:650}
.day-sum{display:flex;gap:16px;font-size:12px;color:var(--text-2);flex-wrap:wrap}
.day-sum span{white-space:nowrap}
.day-sum b{color:var(--text);font-weight:650}
.day-sum .sn b{color:var(--green)}
.day-sum .su b{color:var(--brand)}

.run-row{
  display:flex;gap:14px;align-items:flex-start;
  padding:12px 16px;border-bottom:1px solid #f0f3f8;
}
.run-row:last-child{border-bottom:0}
.run-row:hover{background:#fafbfe}
.run-main{flex:1;min-width:0}
.run-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.run-name{font-weight:600;font-size:13px}
.run-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--text-3);font-size:12px;margin-top:5px}
.run-meta b{color:var(--text);font-weight:650}
.stat-new b{color:var(--green)}
.stat-upd b{color:var(--brand)}
.run-actions{flex:none;padding-top:2px}

.badge-status{display:inline-block;padding:1px 8px;border-radius:4px;font-size:11.5px;white-space:nowrap}
.badge-status.ok{background:#eafaf1;color:#12a150}
.badge-status.info{background:#eaf2fd;color:#1a6fd4}      /* 预算用完：正常收工，不是告警 */
.badge-status.risk{background:#fdeaea;color:#c0392b}      /* 风控中止：要人看 */
.badge-status.fail{background:#fdeeee;color:#d1382f}
.badge-status.partial{background:var(--orange-bg);color:#b45309}
.badge-status.other{background:#eef1f6;color:var(--text-2)}

.log-note{
  margin-top:6px;font-size:12px;color:var(--text-2);line-height:1.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
}
.log-note.open{white-space:normal;overflow:visible;cursor:default}
.log-note .toggle{color:var(--brand);margin-left:6px;font-size:11.5px;white-space:nowrap}
.log-extra{margin-top:4px;font-size:11.5px;color:var(--text-3);display:flex;gap:10px;flex-wrap:wrap}

/* 文本日志模态框（等宽、保留原始顺序、默认滚到底部） */
.modal.log-modal{width:780px}
.modal.log-modal .modal-body{display:block;grid-template-columns:none;padding:16px 18px}
.modal.log-modal .modal-head h2{font-size:14px}
.modal.log-modal .modal-head .meta{font-size:11.5px;color:var(--text-3);font-weight:400;margin-left:10px}
.logbox{
  background:#fbfcfe;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;max-height:60vh;overflow:auto;white-space:pre-wrap;word-break:break-all;
  font:12px/1.7 ui-monospace,Menlo,Consolas,"Courier New",monospace;color:var(--text-2);
}

/* 修改密码模态框：窄、单列 */
.modal.narrow{width:380px}
.modal.narrow .modal-body{display:block;grid-template-columns:none;padding:18px 20px}
.modal.narrow .field{margin-bottom:13px}

/* ============================================================ 性价比排行页 */
/* 配色含义：划算/便宜 = 绿（省钱），贵 = 橙→红（买亏），无结论 = 灰。
   这是「买得值不值」的判断，不是行情涨跌，因此不套用 A 股红涨绿跌。 */

/* KPI 四列 */
.kpi-cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}

/* 结论分布条：一排可点的胶囊 */
.verdict-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:10px 16px;border-bottom:1px solid var(--line);background:#fafbfd;
}
.vs-chip{
  display:inline-flex;align-items:baseline;gap:6px;height:28px;padding:0 11px;
  border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-size:12.5px;color:var(--text-2);transition:.12s;
}
.vs-chip:hover{border-color:var(--brand);color:var(--brand)}
.vs-chip b{font-size:13px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.vs-chip .vs-pct{font-size:11px;color:var(--text-3)}
.vs-chip.v-best{background:#e7f8ee;border-color:#c3ecd5}
.vs-chip.v-best b{color:#0d8a45}
.vs-chip.v-good{background:#f0faf4;border-color:#d3efdf}
.vs-chip.v-good b{color:#12a150}
.vs-chip.v-high{background:#fff6ec;border-color:#ffe2c4}
.vs-chip.v-high b{color:#c2701a}
.vs-chip.v-worst{background:#fdeeee;border-color:#f7d4d3}
.vs-chip.v-worst b{color:var(--red)}
.vs-chip.v-none{background:#f2f4f8}
.vs-hint{margin-left:auto;font-size:11.5px;white-space:nowrap}

/* 结论徽章 */
.vtag{
  display:inline-block;padding:1px 8px;border-radius:4px;font-size:11.5px;
  white-space:nowrap;background:#eef1f6;color:var(--text-2);
}
.vtag.v-best{background:#e7f8ee;color:#0d8a45;font-weight:650}
.vtag.v-good{background:#eafaf1;color:#12a150}
.vtag.v-mid{background:#eef2f7;color:#4a5568}
.vtag.v-high{background:var(--orange-bg);color:#b45309}
.vtag.v-worst{background:#fdeeee;color:var(--red)}
.vtag.v-none{background:#f2f4f8;color:var(--text-3)}

/* 置信度：小圆点 + 字 */
.conf{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap;
  color:var(--text-2);
}
.conf::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-3)}
.conf-high{color:var(--text)}
.conf-high::before{background:#12a150}
.conf-mid::before{background:#e8a33d}
.conf-low::before{background:#c2cbda}

/* 溢价：负=便宜（绿），正=贵（橙/红） */
.prem{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.prem-good{color:#0d8a45}
.prem-slight{color:#12a150}
.prem-ok{color:var(--text-2)}
.prem-bad{color:var(--red)}

/* 「比多少同款便宜」：细进度条 + 数值 */
.pct-wrap{display:flex;align-items:center;gap:7px;min-width:104px}
.pct-track{
  flex:1;height:6px;border-radius:4px;background:#eef1f6;overflow:hidden;min-width:44px;
}
.pct-track i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#5fd39a,#12a150)}
.pct-num{font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}

td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* 替代品：行内按钮 + 展开行 */
.alt-chip{
  height:22px;padding:0 9px;border-radius:6px;border:1px solid #c9dbfa;background:#f2f7ff;
  color:var(--brand);font-size:11.5px;cursor:pointer;white-space:nowrap;transition:.12s;
}
.alt-chip:hover{background:#e4eefe}
tr.alt-row td.alt-body{background:#fafcff;padding:10px 16px 12px;cursor:default}
tr.alt-row:hover td{background:#fafcff}
.alt-head{font-size:12px;color:var(--text-2);margin-bottom:8px}
.alt-list{display:flex;flex-wrap:wrap;gap:8px}
.alt-item{
  display:flex;align-items:baseline;gap:9px;padding:6px 11px;border-radius:8px;
  background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--text);
  font-size:12.5px;transition:.12s;
}
.alt-item:hover{border-color:var(--brand);box-shadow:0 2px 8px rgba(47,109,246,.10)}
.alt-name{font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alt-sn{color:var(--text-3);font-size:11px}
.alt-price{color:var(--red);font-weight:700;font-variant-numeric:tabular-nums}
.alt-save{color:#0d8a45;font-size:11.5px}
.alt-sim{color:var(--text-3);font-size:11.5px}

/* 详情抽屉里的「同类在售比价」区块 */
.rank-box{
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fafcff;
}
.rank-box.none{background:#f7f8fa}
.rank-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.rank-verdict{font-size:17px;font-weight:700}
.rank-verdict.v-best,.rank-verdict.v-good{color:#0d8a45}
.rank-verdict.v-mid{color:var(--text)}
.rank-verdict.v-high{color:#c2701a}
.rank-verdict.v-worst{color:var(--red)}
.rank-verdict.v-none{color:var(--text-3);font-size:15px}
.rank-quant{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 4px}
.rank-quant>div{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.rank-quant .k{font-size:11.5px;color:var(--text-3)}
.rank-quant .v{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}
.rank-box .alt-list{margin-top:6px}
.rank-note{font-size:11.5px;color:var(--text-3);margin-top:8px;line-height:1.65}


/* ---------- 性价比列表：缩略图 / 悬停详情卡片 / 同款对比 ---------- */
table.list td.c-item{min-width:250px}
.rt-thumb{
  width:46px;height:46px;flex:none;border-radius:8px;object-fit:cover;
  background:#f2f4f8;border:1px solid var(--line);
}
.peer-chip{
  display:inline-block;padding:2px 8px;border-radius:6px;border:1px solid var(--line);
  background:#fff;color:var(--brand);font-size:12px;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:.12s;
}
.peer-chip:hover{border-color:var(--brand);background:#f3f7ff}

/* 悬停详情卡片（复用 .gpanel-tip 的浮层定位） */
.gpanel-tip.rt-tip{width:420px;max-width:min(420px,94vw)}
.rt-tip-card{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(20,30,48,.16);padding:12px 14px;
  max-height:76vh;overflow:auto;
}
.rt-tip-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.rt-tip-title{flex:1;min-width:0}
.rt-tip-price{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rt-tip-price b{color:var(--red);font-size:15px;display:block}
.rt-tip-rank{font-size:12.5px;margin-bottom:8px}
.rt-tip-tags{margin-top:8px}
.rt-tip-foot{margin-top:8px;color:var(--text-3);font-size:11.5px}
.rt-tip-load{color:var(--text-3);font-size:12.5px;padding:8px 2px}

/* 抽屉头部的商品卡 */
.rt-d-head{display:flex;gap:12px;align-items:flex-start}
.rt-d-img{
  width:64px;height:64px;flex:none;border-radius:10px;object-fit:cover;
  background:#f2f4f8;border:1px solid var(--line);
}
.rt-d-title{flex:1;min-width:0}
.rt-d-name{font-size:15px;font-weight:650}
.rt-d-price{text-align:right;white-space:nowrap}
.rt-d-price b{color:var(--red);font-size:16px}

/* 同款对比列表 */
.peer-head{margin-bottom:10px;font-size:12.5px;line-height:1.9}
.peer-head .btn{margin-left:8px}
.peer-list td{font-size:12.5px}
.peer-list tr.peer-self{background:#f3f7ff}
.peer-list tr.peer-self:hover{background:#eef3ff}
.peer-meflag{
  display:inline-block;margin-left:6px;padding:0 5px;border-radius:4px;
  background:var(--brand);color:#fff;font-size:10.5px;
}
.peer-up{color:var(--red)}
.peer-down{color:color-mix(in srgb, var(--green) 85%, #000)}

/* 同款对比：耐久度 / 修理失败（对齐官网面板的「耐久度 295 修理失败 3次」） */
.peer-repair{color:var(--red);font-weight:600;margin-left:4px}

/* 成交统计页：成交来源徽标（把「公示期免费渠道」与「非公示期详情巡检」分开看） */
.src-badge{
  display:inline-block;padding:1px 8px;border-radius:4px;font-size:11.5px;
  white-space:nowrap;background:#eef1f6;color:var(--text-2);
}
.src-badge.src-list{background:#eaf3ff;color:var(--brand)}
.src-badge.src-detail{background:#fff4e8;color:#b45309}
table.list td.c-time,table.list th.c-time{white-space:nowrap;font-variant-numeric:tabular-nums}
table.list td.c-price,table.list th.c-price{white-space:nowrap;font-variant-numeric:tabular-nums}

/* ============ 梦幻币页（coin.html / coin.js）：双 Y 轴折线图 ============ */
/* 图是自绘 SVG（不引 CDN），这里只负责容器/图例/悬停浮层 */
.coin-chart-wrap{position:relative;width:100%}
.coin-legend{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 8px 2px;font-size:12px;color:var(--text-2)}
.coin-legend .lg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.coin-legend .lg i{display:inline-block;width:12px;height:3px;border-radius:2px}
.coin-chart{display:block;width:100%;overflow:visible}
.coin-tip{
  position:absolute;display:none;pointer-events:none;z-index:5;min-width:172px;
  padding:8px 10px;border-radius:8px;background:#fff;border:1px solid #e2e8f2;
  box-shadow:0 6px 20px rgba(20,40,80,.14);font-size:12px;line-height:1.75;color:var(--text);
}
.coin-tip .t{font-weight:650;margin-bottom:3px;font-variant-numeric:tabular-nums;color:var(--text)}
.coin-tip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:1px}
.coin-tip b,.coin-tip .muted{font-variant-numeric:tabular-nums}
.coin-tip .muted{display:block;font-size:11.5px;color:var(--text-3)}
/* 涨红跌绿（国内习惯）：单价涨了要让用户一眼看出来 */
.coin-chg{font-variant-numeric:tabular-nums;font-weight:650}
.coin-chg.up{color:var(--red)}
.coin-chg.down{color:var(--green)}