:root { --ink:#2f2227; --muted:#74686d; --paper:#fbf6ef; --line:#eaded8; --brand:#642348; --brand-dark:#43152f; --accent:#d99a32; --danger:#b63c35; --card:#fffdfa; 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:radial-gradient(circle at 92% 5%,#f1c57b2e 0 12%,transparent 31%),linear-gradient(150deg,#fbf2e7 0%,#fffaf4 48%,#f7eee9 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; letter-spacing:.02em; }.brand-mark { position:relative; display:grid; place-items:center; flex:0 0 auto; width:43px; height:43px; color:#fff8ec; background:linear-gradient(145deg,var(--brand),var(--brand-dark)); border:1px solid #ffffff42; border-radius:14px; box-shadow:0 7px 20px #6423482e; font-family:"DFKai-SB","BiauKai","Noto Serif TC",serif; font-size:24px; font-weight:900; }.brand-mark::after { content:""; position:absolute; right:-3px; bottom:-3px; width:11px; height:11px; border:3px solid var(--paper); border-radius:50%; background:#c44537; }.brand-copy { display:grid; gap:1px; }.brand-copy strong { color:var(--brand-dark); font-family:"DFKai-SB","BiauKai","Noto Serif TC",serif; font-size:22px; letter-spacing:.08em; }.brand-copy small { color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.03em; }.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 10px 30px #5522390b; }.login { max-width:430px; margin:7vh auto; }.login .card { padding:25px; border-top:4px solid var(--brand); }.login-brand { margin-bottom:34px; }.login-welcome { margin-bottom:4px; }.privacy-note { text-align:center; margin-top:18px; }.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 #d8c9c4; 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 #64234816; }.button { border-radius:12px; padding:13px 16px; font-weight:800; background:linear-gradient(145deg,var(--brand),var(--brand-dark)); color:#fff; min-height:46px; box-shadow:0 5px 14px #6423481c; }.button:hover { background:var(--brand-dark); }.button.secondary { background:#f2e6eb; color:var(--brand-dark); box-shadow:none; }.button.light { background:#fff; color:var(--brand); border:1px solid var(--line); box-shadow:none; }.button.danger { background:#fff0f0; color:var(--danger); box-shadow:none; }.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:#f0dfe6; 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:#f1e8e8; color:#67565d; 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:#f8efec; 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:#fffdfaf2; 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:#e5e7f5; color:#494f8b; }.status.已出貨 { background:#e4eee6; color:#32613f; }.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:#fff6df; border-radius:0 12px 12px 0; padding:12px; color:#735522; 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:#32152366; 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:var(--brand-dark); 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; } }
.product-price { margin-top:5px; color:var(--ink); font-size:14px; }.product-subtotal { margin-top:4px; color:var(--brand); font-size:14px; font-weight:850; }.sticky-summary { display:grid; gap:3px; }.cart-total { color:var(--brand-dark); font-size:16px; white-space:nowrap; }.review-item { display:flex; justify-content:space-between; gap:16px; align-items:center; }.review-item strong { white-space:nowrap; color:var(--brand-dark); }.review-total { display:flex; justify-content:space-between; gap:16px; margin:18px 0; padding:15px; border-radius:13px; background:#e7f0ea; font-weight:800; }.review-total strong { color:var(--brand-dark); font-size:19px; white-space:nowrap; }
.order-card { padding:18px; }.order-branch { color:var(--brand-dark); font-size:20px; font-weight:900; }.order-no { margin-top:3px; font-size:13px; font-weight:750; color:var(--muted); }.order-lines { margin-top:16px; border-top:1px solid var(--line); }.order-line { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }.order-line div { display:grid; gap:3px; }.order-line span { color:var(--muted); font-size:13px; }.order-line strong { white-space:nowrap; color:var(--ink); }.order-total { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-top:13px; padding:13px 14px; border-radius:12px; background:#f4e8ec; font-weight:850; }.order-total strong { color:var(--brand-dark); font-size:20px; white-space:nowrap; }.order-note { margin-top:12px; color:var(--muted); font-size:13px; }
.month-picker { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:0 0 14px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:#fff; font-weight:850; }.month-picker input { min-width:150px; border:1px solid #c9d7cf; border-radius:10px; padding:9px 11px; color:var(--ink); background:#fff; }.billing-grid { display:grid; gap:11px; }.billing-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; }.billing-total { display:grid; gap:3px; text-align:right; }.billing-total span { color:var(--muted); font-size:13px; }.billing-total strong { color:var(--brand-dark); font-size:22px; white-space:nowrap; }
.install-button { width:100%; display:flex; align-items:center; gap:13px; margin:0 0 16px; padding:15px 17px; border:1px solid #d9ad5d; border-radius:16px; background:linear-gradient(135deg,#fff4d7,#f8e4b9); color:#57331b; text-align:left; box-shadow:0 8px 24px #9a682719; }.install-button.ready { border-color:var(--accent); box-shadow:0 8px 26px #9a68272b; }.install-button:hover { background:#fbe8bd; }.install-button span:last-child { display:grid; gap:2px; }.install-button strong { font-size:16px; }.install-button small { color:#7d654b; font-size:12px; }.install-icon { display:grid; place-items:center; flex:0 0 auto; width:40px; height:40px; border-radius:12px; background:var(--brand); color:#fff; font-size:24px; font-weight:900; }
@media (max-width:470px) { .billing-card { grid-template-columns:1fr; }.billing-total { padding-top:12px; border-top:1px solid var(--line); text-align:left; }.month-picker { align-items:flex-start; flex-direction:column; }.month-picker input { width:100%; } }