:root{
  --bg:#f5f4ef;--card:#fff;--ink:#16201c;--muted:#66706b;--line:#e3e1d8;
  --accent:#0b7a5a;--accent-ink:#fff;--accent-soft:#e1f2ec;
  --warn:#8a5a00;--warn-bg:#fdf1d6;--paid:#0a5aa8;--paid-bg:#dfeefc;
  --proc:#5b3fa8;--proc-bg:#ece6fa;--ok:#0b6b3d;--ok-bg:#dcf3e5;--bad:#8a2a1f;--bad-bg:#fbe4e0;
  --off:#5d6560;--off-bg:#ecebe5;--radius:14px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1512;--card:#17201b;--ink:#e8efe9;--muted:#93a199;--line:#26332c;
  --accent:#3fcf9d;--accent-ink:#06261b;--accent-soft:#163227;
  --warn:#f0c46a;--warn-bg:#35290e;--paid:#7db8f5;--paid-bg:#14263b;
  --proc:#b9a4f2;--proc-bg:#271f40;--ok:#6fdc9f;--ok-bg:#123324;--bad:#f2998d;--bad-bg:#3a1a16;
  --off:#a3aea8;--off-bg:#212b26;}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
.wrap{max-width:880px;margin:0 auto;padding:20px 16px 48px}
.wide{max-width:1100px}
h1{font-size:1.55rem;line-height:1.2;margin:.2rem 0 .3rem;letter-spacing:-.01em}
h2{font-size:1.1rem;margin:1.6rem 0 .6rem}
.muted{color:var(--muted)}.small{font-size:.86rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{font-weight:700;letter-spacing:-.01em}
.ref{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ref .code{font:700 2rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}
button,.btn{font:inherit;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:9px 14px;border-radius:10px;cursor:pointer;text-decoration:none;display:inline-block}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button.danger{color:var(--bad)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.notice{border-radius:var(--radius);padding:14px 16px;margin:14px 0;background:var(--warn-bg);color:var(--warn)}
.notice strong{color:inherit}
.flash{padding:10px 14px;border-radius:10px;margin:0 0 12px;background:var(--ok-bg);color:var(--ok)}
.flash.error{background:var(--bad-bg);color:var(--bad)}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.8rem;font-weight:600;white-space:nowrap}
.s-waiting-for-payment{background:var(--warn-bg);color:var(--warn)}
.s-paid{background:var(--paid-bg);color:var(--paid)}
.s-processing{background:var(--proc-bg);color:var(--proc)}
.s-delivered{background:var(--ok-bg);color:var(--ok)}
.s-cancelled,.s-closed{background:var(--off-bg);color:var(--off)}
.s-open{background:var(--bad-bg);color:var(--bad)}
.orders{display:grid;gap:10px}
.order{display:grid;grid-template-columns:1fr auto;gap:4px 12px}
.order .what{font-weight:650}
.order .price{font-weight:700;text-align:right}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.tablewrap table{min-width:640px}
tr:last-child td{border-bottom:0}
form.inline{display:inline}
label{display:block;font-size:.85rem;font-weight:600;margin:12px 0 4px}
input,select,textarea{font:inherit;width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
textarea{min-height:100px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.stat{padding:14px 16px}
.stat b{display:block;font-size:1.6rem;letter-spacing:-.02em}
nav.admin{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
nav.admin a{padding:7px 12px;border-radius:10px;text-decoration:none;color:var(--ink);border:1px solid transparent}
nav.admin a.on,nav.admin a:hover{background:var(--card);border-color:var(--line)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.row>*{flex:1 1 140px}.row>button,.row>.btn{flex:0 0 auto}
pre.tx{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:.85rem;margin:6px 0 0}
.center{min-height:70vh;display:grid;place-items:center;text-align:center}
.login{max-width:380px;margin:12vh auto 0}
@media (max-width:520px){.ref .code{font-size:1.6rem}}
.tablewrap td select{width:auto;min-width:80px}