/* 水水到你家 — shared styles. Phone-first single column; tokens below drive both themes. */
:root{
  --bg:#eef5f6; --surface:#ffffff; --sunk:#e3eef0; --ink:#0d2a33; --muted:#557079; --line:#cfe0e4;
  --accent:#0a7ea4; --accent-ink:#ffffff; --promo:#f2b705; --promo-ink:#3a2a00;
  --new:#c26a00; --new-bg:#fff1dc; --ok:#1f8a4c; --ok-bg:#ddf3e6; --run:#0a6d8f; --run-bg:#dcf0f7; --bad:#b3261e; --bad-bg:#fbe3e1;
  --display:"Bricolage Grotesque","Noto Sans SC",system-ui,sans-serif;
  --body:"Noto Sans SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#081519; --surface:#0f2329; --sunk:#0b1c21; --ink:#e2f0f3; --muted:#8eadb6; --line:#1f3a42;
  --accent:#3fb7dc; --accent-ink:#04212b; --promo:#f5c84a; --promo-ink:#2a1e00;
  --new:#f0a24a; --new-bg:#3a2608; --ok:#5fd08f; --ok-bg:#0d3320; --run:#6fcdee; --run-bg:#0b3140; --bad:#ff8a80; --bad-bg:#3d1210; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--body);font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:0 calc(150px + env(safe-area-inset-bottom,0px))}
header.top{padding-block:calc(18px + env(safe-area-inset-top,0px)) 6px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;line-height:1.05}
.brand small{display:block;font-family:var(--body);font-weight:500;font-size:13px;color:var(--muted);letter-spacing:0;margin-top:4px}
.meta{font-family:var(--mono);font-size:12px;color:var(--muted)}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h2{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em;margin:22px 0 10px;text-wrap:balance}
h3{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:20px 0 8px}
.muted{color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.field{display:grid;gap:4px;margin-bottom:12px}
.field label{font-size:13px;font-weight:500}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--sunk);color:var(--ink);font:inherit;min-width:0}
textarea{min-height:110px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.row2{grid-template-columns:1fr}}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.chip.new{background:var(--new-bg);color:var(--new)} .chip.run{background:var(--run-bg);color:var(--run)}
.chip.ok{background:var(--ok-bg);color:var(--ok)} .chip.bad{background:var(--bad-bg);color:var(--bad)}
.btn{border:0;border-radius:10px;padding:10px 16px;white-space:nowrap;font-weight:700;cursor:pointer;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ok{background:var(--ok);color:#fff} .btn.bad{background:transparent;color:var(--bad);border:1px solid var(--bad)}
.btn.small{padding:6px 10px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.err{color:var(--bad);font-size:13px;min-height:1.2em}
.err:empty{min-height:0}
.empty{border:1px dashed var(--line);border-radius:14px;padding:18px;text-align:center;color:var(--muted);font-size:14px}
.note{font-size:12px;color:var(--muted);margin-top:8px}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 14px;border-radius:10px;font-size:14px;z-index:30;max-width:calc(100% - 32px)}
.toast.bad{background:var(--bad);color:#fff}

/* order cards */
.ocard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px;margin-bottom:10px}
.ohead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ono{font-family:var(--mono);font-weight:700;font-size:13px}
.loc{font-weight:700;font-size:16px}
.olines{font-size:14px;display:grid;gap:2px}
.olines div{display:flex;justify-content:space-between;gap:10px}
.olines .q{font-family:var(--mono);color:var(--muted);white-space:nowrap}
.ofoot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:8px}
.sum{font-family:var(--mono);font-weight:700}
.actions{display:flex;gap:8px;flex-wrap:wrap}
pre.msg{background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;margin:0;overflow-x:auto}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.st{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.st i{display:block;height:5px;border-radius:3px;background:var(--line)}
.st.on{color:var(--ink);font-weight:500} .st.on i{background:var(--ok)}
.st small{display:block;font-size:11px;color:var(--muted);font-weight:400}

/* bottom bar */
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:var(--bg);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));z-index:10}
.bar .in{max-width:728px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bar .tot{font-family:var(--display);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.bar .sub{font-size:12px;opacity:.75}

/* login */
.login{max-width:360px;margin:10vh auto 0;display:grid;gap:14px}
.login .brand{margin-bottom:6px}
.login .field{margin:0}
.login{gap:6px}

/* tabs */
.tabs{position:sticky;top:0;z-index:5;background:var(--bg);padding-block:10px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:8px 12px;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dot{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--new);color:#fff;font-size:11px;font-family:var(--mono);margin-left:4px;text-align:center}
input[type=file]{max-width:100%;font-size:13px}
.langs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.langs button{border:0;background:none;color:var(--muted);font:inherit;font-size:12px;font-weight:700;padding:5px 10px;cursor:pointer;min-height:32px}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.topbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* spacing pass */
.langrow{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;padding-top:calc(10px + env(safe-area-inset-top,0px))}
header.top{padding-block:8px 4px}
.panel>.field:last-child,.panel>:last-child{margin-bottom:0}
.field+.field{margin-top:2px}
input[type=file]{font:inherit;font-size:13px;color:var(--muted)}
input[type=file]::file-selector-button{font:inherit;font-size:13px;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:8px 12px;margin-right:10px;cursor:pointer}
.ocard+h2,.panel+h2,.empty+h2{margin-top:28px}
.mine h2{margin-top:18px}
.mine .ocard{margin-bottom:0}
.mine .ocard+a .ocard,.mine a+a .ocard{margin-top:10px}