:root{
  --ground:#F4F4F1; --surface:#FFFFFF; --surface2:#ECECE8; --line:#DBDBD5;
  --ink:#1F3864; --text:#33383F; --muted:#71767E;
  --accent:#1F3864; --gold:#8A6D3B; --red:#B42318; --red-bg:#FBEAE7; --amber:#8A6116; --amber-bg:#FAF0DC; --green:#1E7A46; --green-bg:#E6F2EA;
  --sel:#1F3864; --sel-bg:#E9EEF6;
  --shadow:0 1px 2px rgba(31,56,100,.06),0 4px 14px rgba(31,56,100,.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#14171D; --surface:#1D2129; --surface2:#262B34; --line:#343A45;
    --ink:#AFC4E8; --text:#D4D7DC; --muted:#8B919B;
    --accent:#8FB0E0; --gold:#CBB37E; --red:#F1948A; --red-bg:#3A2320; --amber:#D9B36A; --amber-bg:#332A18; --green:#7CC79A; --green-bg:#1D2E24;
    --sel:#8FB0E0; --sel-bg:#222B3A;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --ground:#14171D; --surface:#1D2129; --surface2:#262B34; --line:#343A45;
  --ink:#AFC4E8; --text:#D4D7DC; --muted:#8B919B;
  --accent:#8FB0E0; --gold:#CBB37E; --red:#F1948A; --red-bg:#3A2320; --amber:#D9B36A; --amber-bg:#332A18; --green:#7CC79A; --green-bg:#1D2E24;
  --sel:#8FB0E0; --sel-bg:#222B3A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif;font-size:14px;line-height:1.55}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
header{background:var(--surface);border-bottom:1px solid var(--line);padding:16px 26px;position:sticky;top:0;z-index:30;box-shadow:var(--shadow)}
.hrow{display:flex;align-items:center;gap:14px;max-width:1360px;margin:0 auto;flex-wrap:wrap}
h1{font-family:'Noto Serif TC',serif;font-size:21px;color:var(--ink);margin:0}
.sub{color:var(--muted);font-size:12px}
.hspace{margin-left:auto;display:flex;gap:8px;align-items:center}
.mode{font-size:11.5px;padding:3px 10px;border-radius:999px;letter-spacing:.03em}
.mode.local{color:var(--amber);background:var(--amber-bg)}
.mode.live{color:var(--green);background:var(--green-bg)}
.topbtn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;padding:5px 12px;cursor:pointer;font-family:inherit;font-size:12.5px;text-decoration:none}
.qbar{max-width:1360px;margin:12px auto 0;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.f{display:flex;flex-direction:column;gap:4px}
.f label{font-size:11px;color:var(--muted);letter-spacing:.05em}
.f input,.f select{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;padding:7px 10px;font-size:14px;font-family:inherit;width:130px}
.f input.wide{width:200px}
.f input:focus,.f select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cats{max-width:1360px;margin:10px auto 0;display:flex;flex-wrap:wrap;gap:7px}
.cat{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:4px 12px;cursor:pointer;font-size:12.5px;font-family:inherit}
.cat.on{background:var(--sel-bg);border-color:var(--sel);color:var(--sel);font-weight:700}
main{max-width:1360px;margin:20px auto 80px;padding:0 26px;display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start}
.rescount{grid-column:1/-1;color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.card.sel{border-color:var(--sel);box-shadow:0 0 0 2px var(--sel-bg),var(--shadow)}
.card .im{height:140px;background:#FFFFFF;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--line)}
:root[data-theme="dark"] .card .im{background:#23272F}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .card .im{background:#23272F}}
.card .im img{max-width:100%;max-height:100%;object-fit:contain}
.card .im .noimg{color:var(--muted);font-size:11px}
.bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.rowline{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pill{font-size:10.5px;padding:1px 8px;border-radius:999px;background:var(--surface2);color:var(--muted)}
.pill.cat{color:var(--gold);border:1px solid var(--gold);background:transparent}
.pname{font-weight:700;color:var(--ink);font-size:13.5px;line-height:1.35}
.vend{font-size:11.5px;color:var(--muted)}
.price{display:flex;align-items:baseline;gap:8px}
.price .now{font-size:17px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.price .old{color:var(--muted);text-decoration:line-through;font-size:11.5px}
.meta{font-size:11.5px;color:var(--muted)}
.warn{font-size:11px;color:var(--red);background:var(--red-bg);border-radius:6px;padding:2px 8px}
.warn.amber{color:var(--amber);background:var(--amber-bg)}
.addbtn{margin-top:auto;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:8px;padding:7px 0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500}
.card.sel .addbtn{background:var(--sel);border-color:var(--sel);color:#fff;font-weight:700}
:root[data-theme="dark"] .card.sel .addbtn{color:#14171D}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .card.sel .addbtn{color:#14171D}}
aside{position:sticky;top:150px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
aside h2{font-size:15px;color:var(--ink);margin:0}
.bk{font-size:12.5px;border-bottom:1px dashed var(--line);padding:6px 0;display:flex;justify-content:space-between;gap:8px}
.bk .x{cursor:pointer;color:var(--red);border:0;background:none;font-family:inherit;font-size:12.5px}
.gen{border:0;background:var(--accent);color:#fff;border-radius:9px;padding:10px 0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700}
:root[data-theme="dark"] .gen{color:#14171D}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .gen{color:#14171D}}
.gen:disabled{opacity:.4;cursor:default}
.hint{font-size:11.5px;color:var(--muted)}
.saved{display:none;font-size:11.5px;color:var(--green);background:var(--green-bg);border-radius:6px;padding:4px 8px}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);max-width:760px;width:92vw;padding:0;box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(20,23,29,.55)}
.dhead{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}
.dhead b{color:var(--ink)}
.dbody{padding:14px 20px 20px;max-height:70vh;overflow:auto}
.letter{background:var(--surface2);border:1px solid var(--line);border-radius:10px;margin-bottom:16px}
.lh{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.lh b{color:var(--ink);font-size:13.5px}
.lh .em{font-size:12px;color:var(--muted)}
.lbtn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:7px;padding:5px 12px;cursor:pointer;font-family:inherit;font-size:12.5px}
.letter textarea{width:100%;border:0;background:transparent;color:var(--text);padding:12px 14px;font-family:inherit;font-size:12.8px;line-height:1.6;min-height:230px;resize:vertical}
.letter textarea:focus{outline:none}
.close{border:0;background:none;color:var(--muted);font-size:20px;cursor:pointer;font-family:inherit}
/* 登入框 */
.login-body{padding:22px 24px;display:flex;flex-direction:column;gap:10px;min-width:300px}
.login-body input{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;padding:9px 12px;font-size:14px;font-family:inherit}
.login-body .err{display:none;color:var(--red);font-size:12.5px}
.login-body .err.ok{color:var(--green)}
.linkbtn{background:none;border:0;color:var(--accent);font-size:12.5px;cursor:pointer;font-family:inherit;text-decoration:underline;padding:0}
@media (max-width:900px){ main{grid-template-columns:1fr} aside{position:static} }