@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root { --ink:#17201d; --muted:#707973; --line:#d6dbd5; --paper:#f6f6f2; --panel:#ffffff; --acid:#d8ff46; --green:#14784b; --red:#bd3c2e; --yellow:#f3b53f; --sidebar:#17201d; --sidebar-muted:#a2aaa3; }
* { box-sizing:border-box; }
/* The hidden attribute is only a UA rule ([hidden]{display:none}) and any author
   display declaration outranks it regardless of specificity. .terminal sets
   display:grid, so the signed-out workbench kept rendering below the login form.
   This rule makes hidden authoritative for every element. */
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope, sans-serif; font-size:14px; letter-spacing:0; }
button, input, select { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.app-shell { min-height:100vh; }
.login-screen { width:min(100%, 560px); margin:0 auto; min-height:100vh; padding:clamp(36px, 11vh, 120px) 28px; background:var(--paper); position:relative; overflow:hidden; }
.login-screen::after { content:""; position:absolute; width:360px; height:360px; border-radius:50%; border:1px solid #c9cec7; top:-195px; right:-170px; box-shadow:0 0 0 32px #edf0ea, 0 0 0 33px #c9cec7; }
.login-mark { display:grid; place-items:center; width:45px; height:45px; background:var(--ink); color:var(--acid); font-family:DM Mono, monospace; font-weight:500; margin-bottom:78px; position:relative; z-index:1; }
.eyebrow { margin:0 0 8px; color:var(--muted); font:500 11px/1.2 DM Mono, monospace; letter-spacing:1.1px; }
.login-screen h1 { font:600 clamp(54px, 9vw, 76px)/.86 "Playfair Display", serif; margin:0; letter-spacing:0; }
.login-copy { color:var(--muted); max-width:270px; margin:28px 0 44px; line-height:1.7; }
.login-form { display:grid; gap:18px; position:relative; z-index:1; }
.login-form label { font:500 11px DM Mono, monospace; color:var(--muted); letter-spacing:.5px; display:grid; gap:7px; }
.login-form input { height:46px; border:1px solid var(--line); background:#fff; padding:0 12px; color:var(--ink); outline:none; border-radius:0; }
.login-form input:focus { border-color:var(--ink); box-shadow:inset 3px 0 var(--acid); }
.login-form button { border:0; background:var(--ink); color:#fff; height:48px; text-align:left; padding:0 16px; display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
.login-form button span { color:var(--acid); font-size:20px; }.login-form button:hover { background:#28332e; }.login-form p { color:var(--red); margin:0; min-height:18px; }
.terminal { min-height:100vh; display:grid; grid-template-columns:240px minmax(0, 1fr); }
.sidebar { background:var(--sidebar); color:#f5f6f2; padding:24px 18px; display:flex; flex-direction:column; min-height:100vh; }
.brand { display:flex; align-items:center; gap:11px; font:500 12px/.94 DM Mono, monospace; letter-spacing:1px; margin-bottom:58px; }.brand-mark { width:31px; height:31px; display:grid; place-items:center; background:var(--acid); color:var(--ink); }
.sidebar nav { display:grid; gap:4px; }.nav-item { border:0; background:transparent; color:var(--sidebar-muted); height:43px; padding:0 8px; text-align:left; display:flex; gap:11px; align-items:center; font-weight:600; border-left:2px solid transparent; }.nav-item:hover { color:#fff; }.nav-item.is-active { color:#fff; border-color:var(--acid); background:#26312c; }.nav-index { color:#78847b; font:400 10px DM Mono, monospace; }.is-active .nav-index { color:var(--acid); }
.sidebar-bottom { margin-top:auto; display:grid; gap:14px; color:var(--sidebar-muted); font:400 11px DM Mono, monospace; }.live-dot { display:inline-block; width:7px; height:7px; background:var(--acid); border-radius:50%; margin-right:7px; box-shadow:0 0 0 4px rgba(216,255,70,.1); }.text-button { border:0; padding:0; background:transparent; color:var(--sidebar-muted); text-align:left; font:inherit; }.text-button:hover { color:#fff; }
.content { min-width:0; }.topbar { min-height:112px; padding:26px 38px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; background:#fbfbf8; }.topbar h2 { margin:0; font:700 29px/1 "Playfair Display", serif; }.topbar-actions { display:flex; align-items:center; gap:16px; }.generated-at { font:400 11px DM Mono, monospace; color:var(--muted); }.refresh-button { height:38px; border:1px solid var(--ink); color:var(--ink); background:var(--acid); display:flex; align-items:center; gap:7px; padding:0 12px; font-weight:700; }.refresh-button:hover { background:#e6ff82; }.refresh-button:disabled { opacity:.6; cursor:wait; }
.view { display:none; padding:30px 38px 42px; }.view.is-active { display:block; }.stats-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border:1px solid var(--line); background:var(--panel); }.stat-card { min-height:118px; padding:18px; border-right:1px solid var(--line); display:flex; flex-direction:column; }.stat-card:last-child { border:0; }.stat-card span,.stat-card small { color:var(--muted); font:400 10px DM Mono, monospace; }.stat-card strong { font:800 32px/1 Manrope, sans-serif; margin:auto 0 8px; }.stat-1 strong { color:var(--green); }.stat-2 strong { color:#9b6212; }.stat-3 strong { color:#1d5084; }
.filter-row { display:flex; gap:12px; align-items:end; margin:28px 0 14px; }.filter-row label { display:grid; gap:6px; color:var(--muted); font:400 10px DM Mono, monospace; }.filter-row select { height:36px; min-width:145px; background:#fff; color:var(--ink); border:1px solid var(--line); padding:0 30px 0 9px; border-radius:0; }.clear-button { height:36px; border:0; background:transparent; color:var(--muted); text-decoration:underline; text-underline-offset:3px; font-size:12px; }
.table-frame { border:1px solid var(--line); background:var(--panel); }.table-note { min-height:42px; display:flex; justify-content:space-between; align-items:center; padding:0 15px; border-bottom:1px solid var(--line); color:var(--muted); font:400 10px DM Mono, monospace; }.offer-table-wrap { width:100%; overflow:auto; }.offer-table { border-collapse:collapse; width:100%; min-width:850px; font-size:12px; }.offer-table th { color:var(--muted); font:400 10px DM Mono, monospace; letter-spacing:.2px; background:#f5f6f2; text-align:left; height:36px; padding:0 14px; border-bottom:1px solid var(--line); white-space:nowrap; }.offer-table td { padding:13px 14px; border-bottom:1px solid #e9ece8; vertical-align:middle; }.offer-table tbody tr:last-child td { border:0; }.offer-table tbody tr:hover { background:#fbfcf7; }.offer-table tr.is-best { background:#f7ffe0; }.offer-name { display:grid; gap:4px; min-width:270px; }.offer-name a { font-weight:700; text-decoration:none; line-height:1.4; }.offer-name a:hover { text-decoration:underline; }.offer-name span,.review-source { color:var(--muted); font-size:10px; }.source-name { font-weight:600; }.price { white-space:nowrap; font:500 13px DM Mono, monospace; }.best-tag { display:inline-block; margin-right:5px; padding:2px 4px; background:var(--acid); color:var(--ink); font:500 9px DM Mono, monospace; }.stock { font:500 11px DM Mono, monospace; white-space:nowrap; }.in-stock { color:var(--green); }.out-stock { color:var(--red); }.unknown { color:#9b6212; }.channel { display:inline-block; max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }.time { color:var(--muted); white-space:nowrap; font:400 10px DM Mono, monospace; }.empty-cell { color:var(--muted); text-align:center; padding:42px !important; }
.section-intro { padding:1px 0 18px; color:var(--muted); line-height:1.7; }.sources-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }.source-card { min-height:210px; border:1px solid var(--line); padding:18px; background:#fff; display:flex; flex-direction:column; }.source-head { display:grid; grid-template-columns:8px 1fr auto; gap:10px; align-items:start; }.source-state { width:8px; height:8px; margin-top:5px; border-radius:50%; background:#aaa; }.source-state.healthy { background:var(--green); }.source-state.blocked { background:var(--yellow); }.source-state.error { background:var(--red); }.source-head h3 { margin:0; font-size:14px; }.source-head p { margin:3px 0 0; color:var(--muted); font:400 10px DM Mono, monospace; }.source-head strong { font:700 22px Manrope, sans-serif; }.source-meta { display:grid; grid-template-columns:1fr auto; gap:8px; margin:23px 0 15px; font:400 10px DM Mono, monospace; color:var(--muted); }.source-meta b { color:var(--ink); font-weight:500; }.source-error { color:var(--red); font-size:11px; line-height:1.5; margin:0 0 12px; }.source-card a { margin-top:auto; color:var(--green); font:600 11px DM Mono, monospace; text-decoration:none; }.source-card a:hover { text-decoration:underline; }.review-table a { font-weight:700; text-decoration:none; }.review-note { color:#8a5912; max-width:250px; line-height:1.5; }
@media (max-width: 920px) { .terminal { grid-template-columns:1fr; }.sidebar { min-height:auto; padding:14px 18px; position:sticky; top:0; z-index:5; }.brand { margin:0; }.sidebar nav { display:flex; overflow:auto; margin-top:16px; }.nav-item { white-space:nowrap; }.sidebar-bottom { display:none; }.topbar,.view { padding-left:22px; padding-right:22px; }.stats-grid { grid-template-columns:repeat(2, 1fr); }.stat-card:nth-child(2) { border-right:0; }.stat-card:nth-child(-n+2) { border-bottom:1px solid var(--line); }.sources-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px) { .topbar { min-height:100px; padding-top:20px; }.topbar h2 { font-size:25px; }.generated-at { display:none; }.view { padding:22px 14px 32px; }.topbar { padding-left:14px; padding-right:14px; }.stats-grid { grid-template-columns:1fr 1fr; }.stat-card { min-height:100px; padding:13px; }.stat-card strong { font-size:26px; }.filter-row { display:grid; grid-template-columns:1fr 1fr; }.filter-row select { width:100%; min-width:0; }.filter-row label:last-of-type { grid-column:span 2; }.clear-button { text-align:left; }.sources-grid { grid-template-columns:1fr; }.refresh-button span { display:none; }.refresh-button { width:38px; justify-content:center; padding:0; font-size:21px; } }

.stock.stale { color:#9b6212; }
.offer-table tr.is-stale { background:#fffaf0; }

/* ── 选择区：按四原则重排 ──────────────────────────────────────────
   亲密性 — 产品与套餐是层层下钻的父子关系，装进同一个描边框；库存与范围
     是互不相干的独立开关，移到框外、压低权重，用 22px 的组间距把两组分开。
   对比   — 产品 38px / 套餐 30px / 修饰项 26px，三级字号让下钻层级一眼可见。
   对齐   — 标签改为置于控件上方而非左侧，所有元素共用同一条左边缘。
   重复   — 库存原本是原生 select，与相邻三组控件形状不一，改为同一套 .chip。 */
.catalog-nav { display:grid; gap:22px; margin:28px 0 16px; }
.picker { border:1px solid var(--line); background:var(--panel); padding:14px 16px 16px; display:grid; gap:10px; }
.picker-label { margin:0; color:var(--muted); font:500 10px DM Mono, monospace; letter-spacing:1.1px; text-transform:uppercase; }
.refine { display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center; }
.refine-group { display:flex; align-items:center; gap:9px; min-width:0; }
.refine-label { flex:0 0 auto; color:var(--muted); font:400 10px DM Mono, monospace; letter-spacing:.5px; }
.chip-scroll { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin; }
.chip { flex:0 0 auto; height:34px; padding:0 12px; border:1px solid var(--line); background:#fff; color:var(--ink); display:flex; align-items:center; gap:7px; font-weight:600; white-space:nowrap; }
.chip em { font:500 10px DM Mono, monospace; font-style:normal; color:var(--muted); }
.chip:hover { border-color:var(--ink); }
.chip.is-active { background:var(--ink); color:#fff; border-color:var(--ink); }
.chip.is-active em { color:var(--acid); }
.chip-plan { height:30px; font-size:12px; }
.chip-empty { color:var(--muted); font:400 11px DM Mono, monospace; }
@media (max-width: 560px) { }

/* All-products mode mixes review rows into the board. They must read as "shown, not
   ranked", so they get their own tint instead of inheriting the .is-stale warning. */
.offer-table tr.is-review { background:#fdf7e6; }
.review-tag { display:inline-block; margin-left:6px; padding:1px 5px; border:1px solid var(--yellow); background:var(--panel); color:var(--ink); font:500 9px DM Mono, monospace; font-style:normal; }

/* ── 排版层级：对比原则 ────────────────────────────────────────────
   下钻三级用字号区分，而不是让四组控件长得一模一样。 */
.chip-product { height:38px; padding:0 14px; font-size:14px; }
.chip-product em { font-size:11px; }
.chip-plan { height:30px; padding:0 11px; font-size:12.5px; }
.chip-quiet { height:26px; padding:0 10px; font-size:11.5px; font-weight:500; }

/* 价格是这张表唯一要回答的问题，所以它是全表最大的字。
   tabular-nums + 右对齐让 ¥0.40 / ¥12.00 / ¥1,194.00 的小数点成列，
   否则位数一变就错位，眼睛没法扫量级。 */
.offer-table th.th-price { text-align:right; }
.offer-table { font-size:13px; min-width:900px; }
.offer-table th { font-size:11px; height:40px; }
.offer-table td { padding:15px 16px; }
.price { text-align:right; white-space:nowrap; }
.price-cell { display:inline-flex; align-items:baseline; gap:7px; justify-content:flex-end; }
.price-cell b { font:600 17px/1.2 DM Mono, monospace; font-variant-numeric:tabular-nums; letter-spacing:-.2px; }
.best-tag { padding:3px 5px; font-size:9.5px; align-self:center; }
.offer-name { gap:5px; }
.offer-name a { font-size:13.5px; }
.offer-name span { font-size:11px; }
.source-name { font-size:12.5px; }
.stock { font-size:12px; }
.channel { font-size:12px; }
.time { font-size:11px; }
/* 全表唯一的强调：最低那行的左侧实心线。别处不再抢眼。 */
.offer-table tr.is-best td:first-child { box-shadow:inset 3px 0 var(--acid); }

@media (max-width: 560px) {
  .picker { padding:12px 12px 14px; }
  .refine { gap:10px 18px; }
  .price-cell b { font-size:15.5px; }
}