/* VAFOX Store Goods OS — V1
   遵循 6 站统一标准：主色 #C2410C / 顶栏 56px / 侧栏 220px / 内容 1300px / 圆角 12-8-8-20 */
:root{
  --vf-orange:#C2410C;
  --vf-orange-soft:#FFF1E9;
  --bg:#F7F7F8;
  --card:#fff;
  --line:#E7E5E4;
  --text:#1C1917;
  --muted:#78716C;
  --ok:#15803D;
  --watch:#A16207;
  --act:#C2410C;
  --urgent:#B91C1C;
  --gap:#92400E;
  --r-lg:12px; --r-md:8px; --r-sm:8px; --r-xl:20px;
  --font:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
/* hidden 属性必须真正生效。
   坑：UA 样式表的 [hidden]{display:none} 是「UA 来源」，作者样式里的
   .login-wrap{display:flex} 会把它整体压掉 ⇒ 登录成功后登录卡片不消失、
   min-height:100vh 把应用内容推到首屏之外（等于登录无效）。
   2026-09-22 由真实浏览器验收发现（此前只读 .hidden 属性，读不出这个问题）。*/
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}

/* ---- 登录 ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:340px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:32px 28px;box-shadow:0 8px 32px rgba(28,25,23,.06)}
.login-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;margin-bottom:6px}
.login-sub{margin:0 0 20px;color:var(--muted);font-size:13px}
.login-card input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-md);font-size:14px;outline:none}
.login-card input:focus{border-color:var(--vf-orange)}
.login-card button{width:100%;margin-top:12px;padding:11px;background:var(--vf-orange);color:#fff;border:0;border-radius:var(--r-md);font-size:14px;font-weight:600}
.login-card button:disabled{opacity:.6}
.login-err{margin:12px 0 0;color:var(--urgent);font-size:13px}

.dot{width:10px;height:10px;border-radius:50%;background:var(--vf-orange);display:inline-block;flex:none}

/* ---- 顶栏 ---- */
.vf-top{height:56px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.vf-top-inner{max-width:1300px;margin:0 auto;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.vf-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.vf-meta{display:flex;align-items:center;gap:14px}
.vf-chip{background:var(--vf-orange-soft);color:var(--vf-orange);border-radius:var(--r-sm);padding:4px 10px;font-size:12px;font-weight:600}
.vf-link{background:none;border:0;color:var(--muted);font-size:13px}

/* ---- 主体 ---- */
.vf-body{max-width:1300px;margin:0 auto;display:flex;gap:20px;padding:20px}
.vf-side{width:220px;flex:none}
.vf-nav{display:block;padding:9px 14px;border-radius:var(--r-md);color:var(--muted);font-size:14px;margin-bottom:2px}
.vf-nav:hover{background:#F1F0EF}
.vf-nav.active{background:var(--vf-orange);color:#fff;font-weight:600}
.vf-main{flex:1;min-width:0}

/* ---- 卡片 ---- */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.card h3{margin:0 0 12px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.card h3 .hint{font-weight:400;font-size:12px;color:var(--muted)}
.kpi{font-size:24px;font-weight:700;line-height:1.25}
.kpi-sub{color:var(--muted);font-size:12px;margin-top:2px}

/* ---- 状态四色 ---- */
.st{display:flex;align-items:baseline;gap:8px}
.st .n{font-size:22px;font-weight:700}
.st-必须处理{color:var(--urgent)}
.st-需要行动{color:var(--act)}
.st-关注{color:var(--watch)}
.st-正常{color:var(--ok)}

/* ---- 表 ---- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:600;font-size:12px}
td.num,th.num{text-align:right}
.tw{overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}

/* ---- 标签 ---- */
.tag{display:inline-block;padding:2px 8px;border-radius:var(--r-sm);font-size:11px;font-weight:700;color:#fff}
.t-URGENT_CLEARANCE{background:var(--urgent)}
.t-CLEARANCE{background:#DC2626}
.t-STOP_PURCHASE{background:var(--watch)}
.t-REPLENISH{background:var(--act)}
.t-SIZE_REPLENISH{background:#EA580C}
.t-WATCH{background:var(--watch)}
.t-KEEP_SELLING{background:var(--ok)}

.gap{color:var(--gap);font-style:normal;font-size:12px}
.muted{color:var(--muted)}
.why{color:var(--muted);font-size:12px;white-space:normal;min-width:280px}

/* ---- 页脚 ---- */
.vf-foot{max-width:1300px;margin:0 auto;padding:12px 20px 32px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}

.empty{padding:28px;text-align:center;color:var(--muted)}
.loading{padding:28px;text-align:center;color:var(--muted)}

@media (max-width:1000px){
  .vf-body{flex-direction:column;padding:12px}
  .vf-side{width:100%;display:flex;overflow:auto;gap:6px}
  .vf-nav{margin:0;white-space:nowrap}
  .g4,.g3,.g2{grid-template-columns:repeat(2,1fr)}
}

/* =====================================================================
   每日链路：数据状态条 / 搜索 / 行动卡 / 手机卡片
   ===================================================================== */

/* ---- 顶栏改为多段（品牌行仍 56px，符合 6 站统一标准） ---- */
.vf-top{height:auto;padding-bottom:8px}
.vf-top-inner{height:56px}

/* ---- 数据状态条 ---- */
.vf-status{max-width:1300px;margin:0 auto;padding:0 20px 8px}
.vf-status-line{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.vf-sdot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:none}
.vf-status[data-status="green"]  .vf-sdot{background:#16A34A}
.vf-status[data-status="green"]  .vf-stext{color:#15803D}
.vf-status[data-status="yellow"] .vf-sdot{background:#EAB308}
.vf-status[data-status="yellow"] .vf-stext{color:#A16207}
.vf-status[data-status="red"]    .vf-sdot{background:#DC2626}
.vf-status[data-status="red"]    .vf-stext{color:#B91C1C}
.vf-status-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:2px}
.vf-sm{color:var(--muted);font-size:12px}
.vf-sm b{color:var(--text);font-weight:700}
.vf-smsg{margin-top:6px;padding:7px 11px;border-radius:var(--r-md);font-size:12px;
         background:#FEF9C3;color:#854D0E;border:1px solid #FDE68A}
.vf-status[data-status="red"] .vf-smsg{background:#FEE2E2;color:#991B1B;border-color:#FECACA}
.stale-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:6px;
           background:#FEF9C3;color:#854D0E;font-size:11px;font-weight:700}

/* ---- 搜索 ---- */
.vf-search{max-width:1300px;margin:0 auto;padding:0 20px;display:flex;gap:8px;align-items:center}
.vf-search input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);
                 border-radius:var(--r-md);font-size:14px;font-family:inherit;outline:none}
.vf-search input:focus{border-color:var(--vf-orange)}
.vf-qbtn{background:none;border:1px solid var(--line);border-radius:var(--r-md);
         padding:8px 12px;font-size:13px;color:var(--muted);flex:none}

/* ---- 行动卡 ---- */
.act-grid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.act-card{display:block;background:var(--card);border:1px solid var(--line);
          border-radius:var(--r-lg);padding:14px 16px;transition:border-color .15s}
.act-card:hover{border-color:var(--vf-orange)}
.act-k{font-size:13px;font-weight:700;color:var(--text)}
.act-v{font-size:26px;font-weight:800;line-height:1.2;margin-top:4px;color:var(--vf-orange)}
.act-v.money{font-size:22px;color:var(--act)}
.act-card.zero .act-v{color:var(--urgent)}
.act-v .unit{font-size:12px;font-weight:600;color:var(--muted);margin-left:4px}
.act-s{font-size:12px;color:var(--muted);margin-top:2px}
.act-go{font-size:12px;color:var(--vf-orange);margin-top:8px;font-weight:600}

/* ---- 手机卡片 ---- */
/* 陷阱（2026-09-22 真实缺陷）：.only-mobile 与 .icards 若是**同一个元素**，
   两者同权重，靠源顺序决胜负 —— .icards{display:flex} 在后面就会盖掉
   .only-mobile{display:none}，导致桌面端手机卡片照样渲染、与宽表重复。
   现在标记已改成 .only-mobile > .icards 嵌套，二者不再互相覆盖。 */
.only-mobile{display:none}
.icards{display:flex;flex-direction:column;gap:12px}
.icard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.icard-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.icard-t{font-weight:700;font-size:15px;line-height:1.35}
.icard-ids{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;color:var(--muted);font-size:12px}
.icard-ids b{color:var(--text);font-weight:600}
.icard-g{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px;margin-top:10px;
         padding-top:10px;border-top:1px dashed var(--line)}
.icard-g>div{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.icard-g .k{color:var(--muted)}
.icard-g .v{font-weight:700}
.icard-why{margin-top:10px;padding:8px 10px;background:var(--vf-orange-soft);
           border-radius:var(--r-md);font-size:12px;color:#7C2D12;line-height:1.5}
.icard-why b{color:var(--vf-orange)}

@media (max-width:768px){
  .only-mobile{display:block}
  .only-desktop{display:none}
  .vf-top-inner{padding:0 12px}
  .vf-status{padding:0 12px 8px}
  .vf-search{padding:0 12px}
  .act-grid{grid-template-columns:1fr;gap:10px}
  .vf-body{padding:12px}
  .icard-g{grid-template-columns:1fr}
  .icard-g>div{border-bottom:1px solid var(--line);padding-bottom:6px}
  .icard-g>div:last-child{border-bottom:0;padding-bottom:0}
}
@media (max-width:430px){
  .act-v{font-size:23px}
  .vf-status-line{font-size:13px}
}