/* ============================================================================
   Indah 订货 App - 样式表(逐字搬自旧码)
   来源: C:\Users\USER\Documents\mcp-zetpy\_order_sheet_appsscript.gs
         APP_HTML 字串常数里的 <style>...</style> 区块,约第 2631~2749 行
         (2631 行是 '<style>' + 本身,2749 行是 '</style></head><body>' + 本身;
          实际样式内容在 2632~2748 行)。
   搬运日期: 2026-09-05
   搬运方式: 逐行去掉 JS 字串拼接的包装(开头的单引号 + 结尾的 ' +),
             规则本身一个字都没有改、顺序完全按原档。
             原档里穿插在字串行之间的那些 JS 区块注解(约 8 处,讲的是
             这段 CSS 为什么这样写,例如「查不到实时库存」「欠款查不到」那几段)
             一并保留成 CSS 注解 —— 这是我(Sonnet)做的唯一一个搬运判断:
             这些注解虽然技术上不属于 <style> 字串本身,但删掉会丢失重要的
             业务背景,而 CSS 本来就支援区块注解,保留不影响任何渲染结果。
             ⚠️ 2026-09-06 Opus 修:这段原本在注解里写了两处**字面的注解符号**,
             而 CSS 注解**不能嵌套** —— 遇到第一个结束符就收尾,後面整段中文会被当成
             选择器,把紧接着的 :root 那条整个吞掉 ⇒ 全部色票变数消失、配色垮掉。
             症状是零(档案看起来正常,没有任何工具会报错)。
             守着它的是 tests/check_css_parse.js。**注解里永远不要写注解符号。**
             详见同目录 PORT-NOTES.md。
   未做的改动: 没有发现任何因为字串拼接产生的转义(例如 \\' ),所以没有
             做任何「还原转义」的动作 —— 原档这段本来就没有单引号需要转义。
   ============================================================================ */
:root{--brand:#0f766e;--brand-d:#0b5b54;--brand-2:#0d9488;--ink:#0f172a;--ink2:#475569;--muted:#64748b;--bg:#eef2f6;--surface:#fff;--line:#e2e8f0;--danger:#dc2626;--r:14px;--r-sm:11px;--r-lg:20px;--sh:0 1px 2px rgba(15,23,42,.04),0 4px 14px rgba(15,23,42,.05)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Microsoft YaHei",sans-serif;font-optical-sizing:auto;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,.row,.del,.chip{touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#hdr{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:linear-gradient(120deg,rgba(15,118,110,.86),rgba(13,148,136,.86));-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);color:#fff;padding:14px 16px;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 2px 14px rgba(15,118,110,.22)}
#hdr .logo{width:32px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);border-radius:9px}
#hdr .ttl{font-weight:800;font-size:18px;letter-spacing:-0.01em}
#hcust{font-weight:500;font-size:13px;opacity:.92;margin-left:auto;text-align:right;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrap{padding:14px;max-width:680px;margin:0 auto}
input{width:100%;padding:14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-size:16px;background:var(--surface);color:var(--ink);font-family:inherit;transition:border-color .15s,box-shadow .15s}
input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,118,110,.15)}
input::placeholder{color:#94a3b8}
.search{position:relative;margin-bottom:12px}
.search input{padding-left:44px}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none}
.search.stick{position:sticky;top:59px;z-index:4;background:rgba(238,242,246,.72);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);margin:0 -2px 12px;padding:2px 2px 0;box-shadow:0 6px 12px -8px rgba(15,23,42,.15)}
.row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:9px 0;display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:var(--sh);transition:transform .1s ease-out,box-shadow .15s ease-out;cursor:pointer}
.row.bought{background:#fffbeb;border-color:#fcd34d}
.stkbox{margin:10px 0 2px;padding:10px 12px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:12px}
.stkhd{font-size:12px;font-weight:800;color:#047857;letter-spacing:.2px;margin-bottom:6px}
.srow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:3px 0;font-size:13.5px}
.srow .sn{color:#334155;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .sv{font-weight:800;font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.srow .sv.ok{color:#15803d}.srow .sv.no{color:#b91c1c}.srow .sv.zero{color:#94a3b8}
/* 查不到实时库存 → 整块转琥珀色 + 可点重试,绝不再悄悄消失。
   ⚠️ 消失会被业务员读成「这货没库存」,和「现在查不到」是两回事 ——
   2026-08-05 实测:实时库存的后端是老板 PC 上的 console(经 VPS 反向隧道),
   PC 一关机这块就全线查不到,旧写法会让整个 App 看起来像所有货都没库存资料。 */
/* 三档,一眼分得出来:绿=实时 / 黄=快照(数字是真的,只是旧的) / 红=真的没有数字 */
.stkbox.snap{background:#fffbeb;border-color:#fcd34d;cursor:pointer}
.stkbox.snap .stkhd{color:#b45309}
.stkbox.bad{background:#fef2f2;border-color:#fecaca;cursor:pointer}
.stkbox.bad .stkhd{color:#b91c1c}
.stkbox.bad .srow .sn{color:#991b1b}
.stkwait{color:#64748b;font-size:13px}
#hbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 14px;background:#f8fafc;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
#hbar.hide{display:none}
#hclock{font-weight:700;color:var(--ink2)}
#hfresh{text-align:right}
#hfresh.warn{color:#b45309;font-weight:700} /* 超过 2 小时没更新 */
#hfresh.bad{color:#b91c1c;font-weight:800} /* 超过 6 小时 = 八成有东西坏了 */
.histbox{margin:10px 0 2px;padding:10px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px}
.histhd{font-size:12px;font-weight:800;color:#0f766e;letter-spacing:.2px;margin-bottom:6px}
.hrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:4px 0;border-top:1px solid #eef2f7;font-size:13.5px}
.hrow:first-child{border-top:0}
.hrow .hd{color:#64748b;min-width:44px}
.hrow .hq{color:#334155;flex:1;text-align:center}
.hrow .hp{font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums}
.hrow.up .hp{color:#15803d}.hrow.dn .hp{color:#b91c1c}
/* 逐行的「跟 Xilnex 核实过」勾勾。刻意做小、做绿,不抢价钱的视线。 */
.hchk{color:#15803d;font-weight:800;font-size:11px}
.row:active{transform:scale(.985);background:#f8fafc}
.nm{font-weight:600;line-height:1.25;color:var(--ink)}
.sub{color:var(--muted);font-size:13px;margin-top:3px}
.cost{color:var(--brand);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;line-height:1.35}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;border:0;border-radius:var(--r);background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;font-size:17px;font-weight:700;font-family:inherit;margin-top:12px;box-shadow:0 4px 14px rgba(15,118,110,.3);transition:transform .08s,opacity .15s;cursor:pointer}
.btn:active{transform:scale(.98);opacity:.94}
.btn:disabled{opacity:.55;box-shadow:none}
.btn.gray{background:#fff;color:var(--ink2);border:1.5px solid var(--line);box-shadow:none}
.btn.red{background:var(--danger);box-shadow:0 4px 14px rgba(220,38,38,.28)}
.draftbar{background:#fffbeb;border:1.5px solid #fcd34d;border-radius:12px;padding:11px 13px;margin-bottom:12px}
.draftbar .dtxt{font-size:14px;color:#78350f;line-height:1.4}
.draftbar .dbtns{display:flex;gap:8px;margin-top:9px}
.dbtn{flex:1;padding:9px 12px;border-radius:9px;border:0;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer}
.dbtn.go{background:#0f766e;color:#fff}.dbtn.no{background:#fff;color:#78350f;border:1.5px solid #fcd34d}
.chip{background:#fff;border:1.5px solid var(--line);color:var(--ink2);font-weight:600;font-size:13px;padding:8px 13px;border-radius:99px;cursor:pointer;font-family:inherit;transition:transform .1s ease-out}
.chip:active{background:#f1f5f9;transform:scale(.95)}
.chip.owe{background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c;font-weight:700;font-size:11px;padding:4px 9px}
#oweChip{display:inline-block;margin-top:7px}
.mkrow{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0}
.mk{background:#f8fafc;border:1.5px solid var(--line);color:var(--ink2);font-weight:700;font-size:12.5px;padding:7px 11px;border-radius:99px;cursor:pointer;font-variant-numeric:tabular-nums;transition:transform .1s ease-out}
.mk:active{transform:scale(.95)}
.mk.b{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}
.mk.o{background:#fff7ed;border-color:#fdba74;color:#c2410c}
.mk.c{background:#ecfeff;border-color:#67e8f9;color:#0e7490}
.mk.y{background:#fefce8;border-color:#fde047;color:#a16207}
#toTop{position:fixed;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:15;width:44px;height:44px;border-radius:50%;border:1px solid rgba(15,23,42,.08);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:0 4px 16px rgba(15,23,42,.16);display:flex;align-items:center;justify-content:center;color:var(--brand-d);cursor:pointer;opacity:0;transform:translateY(8px) scale(.9);pointer-events:none;transition:opacity .18s ease-out,transform .18s ease-out}
#toTop.on{opacity:1;transform:none;pointer-events:auto}
#toTop.on:active{transform:scale(.92)}
#oweMsgTxt{width:100%;min-height:210px;margin-top:12px;padding:12px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-size:14px;line-height:1.5;font-family:inherit;background:#f8fafc;color:var(--ink);resize:vertical}
@media(prefers-reduced-transparency:reduce){#toTop{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
.chip.oweok{color:var(--muted);font-size:11px;padding:4px 9px}
/* 2026-08-04:欠款「查不到」必须看得见。原本查不到就把标签藏起来,和「还在载入」长得一样,
   业务员等不到红字就当客户没欠钱 → 继续给货。黄色 = 我不知道,不是没欠。点一下重查。 */
.chip.owebad{background:#fffbeb;border:1px solid #fcd34d;color:#b45309;font-weight:700;font-size:11px;padding:4px 9px}
.bar{background:linear-gradient(120deg,rgba(15,118,110,.10),rgba(13,148,136,.06));border:1px solid rgba(15,118,110,.20);border-radius:var(--r);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.bar b{color:var(--brand-d)}
.hide{display:none!important}
#modal{position:fixed;inset:0;background:rgba(2,6,23,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-end;z-index:20;animation:fade .2s ease}
.sheet{background:var(--surface);width:100%;max-width:680px;margin:0 auto;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -10px 44px rgba(15,23,42,.22);animation:up .28s cubic-bezier(.2,.8,.2,1)}
.grab{width:40px;height:4px;border-radius:99px;background:#cbd5e1;margin:-4px auto 14px}
.ppanel{display:flex;gap:10px;margin:14px 0 4px}
.tile{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px}
.tile .k{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.tile .v{font-size:13.5px;font-weight:600;color:var(--ink2);margin-top:4px;font-variant-numeric:tabular-nums}
.tile.alt .v{font-size:13.5px;font-weight:600;color:var(--ink2);line-height:1.35}
.hls{color:var(--brand);font-weight:700}
.lab{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;margin:14px 0 5px}
.grid2{display:flex;gap:12px}.grid2>div{flex:1}
.sec{display:flex;align-items:center;gap:8px;margin:20px 4px 8px;font-size:15px;font-weight:800;color:var(--ink)}
.sec svg{color:var(--brand)}
.cartline{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:8px 0;box-shadow:var(--sh)}
#total{font-size:19px;font-weight:800;text-align:right;padding:10px 4px;color:var(--ink);font-variant-numeric:tabular-nums}
.del{color:var(--danger);font-weight:700;padding:6px 10px;cursor:pointer;border-radius:8px}
.del:active{background:#fef2f2}
#scrPin{min-height:calc(100vh - 130px);min-height:calc(100dvh - 130px);display:flex;align-items:center;justify-content:center}
.pincard{width:100%;max-width:300px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 22px;box-shadow:var(--sh)}
.pinlock{width:58px;height:58px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg,var(--brand),var(--brand-2));border-radius:16px;color:#fff;box-shadow:0 8px 20px rgba(15,118,110,.35)}
#pinInput{text-align:center;letter-spacing:8px;font-size:22px;font-weight:700;margin:16px 0 4px}
#toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(10px);background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;opacity:0;transition:.25s;z-index:40;max-width:90%;text-align:center;font-weight:500;box-shadow:0 10px 34px rgba(0,0,0,.32);pointer-events:none}
#toast.show{opacity:.97;transform:translateX(-50%) translateY(0)}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(prefers-reduced-transparency:reduce){#hdr{background:linear-gradient(120deg,var(--brand),var(--brand-2));-webkit-backdrop-filter:none;backdrop-filter:none}.search.stick{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}#modal{-webkit-backdrop-filter:none;backdrop-filter:none}}
