:root { --ink:#17342b; --muted:#63736d; --paper:#f7f8f5; --line:#dfe7e1; --brand:#1f5b48; --brand-dark:#164334; --accent:#f4ba4d; --danger:#b93939; --card:#fff; font-family: ui-rounded, "PingFang TC", "Noto Sans TC", system-ui, sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:linear-gradient(150deg,#f1f7f1 0%,#f8f7f1 50%,#f4f7f5 100%); } button,input,textarea,select { font:inherit; } button { border:0; cursor:pointer; } .shell { max-width:920px; min-height:100svh; margin:auto; padding:18px 16px 86px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; font-size:20px; letter-spacing:.02em; }.brand-mark { display:grid; place-items:center; width:38px; height:38px; color:white; background:var(--brand); border-radius:13px; box-shadow:0 6px 16px #1f5b4830; }.eyebrow { margin:26px 0 4px; color:var(--brand); font-size:13px; font-weight:800; letter-spacing:.1em; }.title { margin:0; font-size:28px; letter-spacing:-.04em; }.subtitle { margin:9px 0 20px; color:var(--muted); line-height:1.5; }.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; box-shadow:0 8px 28px #1c37200a; }.login { max-width:430px; margin:8vh auto; }.login .card { padding:25px; }.field { display:grid; gap:7px; margin:16px 0; font-weight:700; font-size:14px; }.field input,.field textarea,.field select { width:100%; border:1px solid #c9d7cf; background:#fff; border-radius:12px; padding:13px; color:var(--ink); outline:none; }.field input:focus,.field textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px #1f5b4816; }.button { border-radius:12px; padding:13px 16px; font-weight:800; background:var(--brand); color:#fff; min-height:46px; }.button:hover { background:var(--brand-dark); }.button.secondary { background:#e7f0ea; color:var(--brand-dark); }.button.light { background:#fff; color:var(--brand); border:1px solid var(--line); }.button.danger { background:#fff0f0; color:var(--danger); }.wide { width:100%; }.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }.avatar { width:39px; height:39px; border-radius:50%; background:#d7e6dc; display:grid; place-items:center; font-weight:900; color:var(--brand-dark); }.userbox { display:flex; align-items:center; gap:9px; text-align:right; font-size:13px; }.userbox small { display:block; color:var(--muted); margin-top:2px; }.tabs { display:flex; gap:8px; overflow:auto; margin:6px 0 18px; padding-bottom:2px; }.tab { white-space:nowrap; background:#e9efea; color:#4f625a; padding:10px 13px; border-radius:999px; font-weight:800; }.tab.active { background:var(--brand); color:#fff; }.section-title { margin:24px 0 10px; font-size:18px; }.products { display:grid; gap:10px; }.product { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; }.product-name { font-weight:850; }.product-meta { margin-top:3px; color:var(--muted); font-size:13px; }.counter { display:flex; align-items:center; border:1px solid var(--line); border-radius:12px; overflow:hidden; }.counter button { width:37px; height:39px; background:#f1f5f1; color:var(--brand); font-size:22px; }.counter input { width:42px; height:39px; border:0; text-align:center; font-weight:800; color:var(--ink); outline:0; }.sticky { position:fixed; inset:auto 0 0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:#fffffff2; border-top:1px solid var(--line); backdrop-filter:blur(12px); }.sticky-inner { max-width:888px; margin:auto; display:flex; justify-content:space-between; gap:12px; align-items:center; }.count { color:var(--muted); font-weight:700; font-size:14px; }.orders { display:grid; gap:11px; }.order-top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }.order-no { font-weight:900; }.muted { color:var(--muted); font-size:13px; }.status { border-radius:999px; padding:5px 9px; font-size:12px; white-space:nowrap; font-weight:850; background:#fff0d3; color:#875800; }.status.揀貨中 { background:#dcefff; color:#155b8f; }.status.已出貨 { background:#ddf3e4; color:#20733d; }.status.已取消 { background:#f3e1e1; color:#9c3030; }.items { margin:12px 0 0; padding:11px 0 0; border-top:1px solid var(--line); line-height:1.7; }.order-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }.order-actions .button { min-height:38px; padding:8px 11px; font-size:13px; }.inventory { display:grid; gap:9px; }.inventory-row { display:grid; grid-template-columns:1fr 88px 88px auto; gap:7px; align-items:center; }.inventory-row input { min-width:0; padding:9px; border:1px solid var(--line); border-radius:9px; text-align:right; }.inventory-row .button { min-height:38px; padding:7px 10px; }.hint { border-left:4px solid var(--accent); background:#fff9eb; border-radius:0 12px 12px 0; padding:12px; color:#6c5726; line-height:1.5; font-size:14px; }.empty { text-align:center; padding:42px 18px; color:var(--muted); }.grid { display:grid; gap:12px; }.split { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.modal { position:fixed; inset:0; display:grid; align-items:end; background:#17342b55; padding:0; z-index:5; }.modal-box { background:var(--paper); border-radius:24px 24px 0 0; padding:22px 16px calc(22px + env(safe-area-inset-bottom)); max-height:90svh; overflow:auto; }.modal-box h2 { margin:0 0 6px; }.modal-box .button { margin-top:8px; }.small { font-size:12px; } #toast { position:fixed; z-index:10; left:50%; transform:translateX(-50%); bottom:82px; background:#17342b; color:white; border-radius:12px; padding:11px 14px; opacity:0; pointer-events:none; transition:.25s; max-width:90vw; text-align:center; }.show { opacity:1!important; }
@media (min-width:700px) { .shell { padding-top:28px; }.products { grid-template-columns:1fr 1fr; }.modal { align-items:center; padding:20px; }.modal-box { border-radius:20px; max-width:560px; width:100%; margin:auto; }.sticky { position:sticky; bottom:0; border-radius:18px; margin-top:16px; border:1px solid var(--line); } }
@media (max-width:470px) { .inventory-row { grid-template-columns:1fr 68px 68px; }.inventory-row .button { grid-column:1/-1; }.split { grid-template-columns:1fr; } }