:root { --ink:#1d1d1f; --muted:#6b7280; --line:#e5e7eb; --bg:#fafafa; --accent:#d01012;
        --ok:#0f7b3f; --err:#b3221f; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       color:var(--ink); background:var(--bg); }
.topbar { display:flex; gap:24px; align-items:baseline; padding:12px 20px;
          border-bottom:1px solid var(--line); background:#fff; }
.brand { font-weight:700; color:var(--accent); text-decoration:none; }
.topbar nav a { color:var(--muted); text-decoration:none; margin-right:14px; }
.topbar nav a:hover { color:var(--ink); }
main { max-width:1100px; margin:0 auto; padding:24px 20px 64px; }
h1 { font-size:22px; margin:0 0 20px; }
h2 { font-size:16px; margin:0 0 12px; }
a { color:var(--accent); }
.panel { background:#fff; border:1px solid var(--line); border-radius:10px;
         padding:16px 18px; margin-bottom:18px; }
.panel-head { display:flex; justify-content:space-between; align-items:center;
              gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.panel-head h2 { margin:0; }
.page-head { display:flex; justify-content:space-between; align-items:flex-start;
             gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.page-head h1 { margin:0; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; }
.right { text-align:right; }
.center { text-align:center; }
.empty { color:var(--muted); background:#fff; border:1px dashed var(--line);
         border-radius:10px; padding:20px; }
.summary { background:#fff; border:1px solid var(--line); border-radius:10px;
           padding:12px 16px; margin:0 0 18px; }

/* tables */
table.grid { border-collapse:collapse; width:100%; font-size:14px; background:#fff; }
table.grid th, table.grid td { text-align:left; padding:7px 10px;
                               border-bottom:1px solid var(--line); vertical-align:middle; }
table.grid th { color:var(--muted); font-weight:600; font-size:12px;
                text-transform:uppercase; letter-spacing:.04em; }
table.grid tbody tr:hover { background:#fcfcfd; }
table.grid th.num, table.grid td.num { text-align:right; }
table.grid tfoot th { border-top:2px solid var(--line); text-transform:none;
                      font-size:14px; color:var(--ink); }
td.qty { font-weight:700; font-variant-numeric:tabular-nums; }
td.thumb { width:52px; }
td.thumb img { display:block; max-width:40px; max-height:40px; }

/* colour swatch */
.swatch { display:inline-block; width:14px; height:14px; border-radius:3px;
          border:1px solid rgba(0,0,0,.25); margin-right:7px; vertical-align:-2px; }
.swatch.trans { border-style:dashed; }

/* forms */
button { font:inherit; padding:7px 13px; border-radius:8px; border:1px solid var(--accent);
         background:var(--accent); color:#fff; cursor:pointer; }
button:hover { filter:brightness(1.07); }
button.small { padding:4px 9px; font-size:13px; }
button.danger { background:#fff; color:var(--err); border-color:#e6b6b5; }
button.danger:hover { background:#fdf2f2; }
input[type=text], input[type=search], input[type=number], select, textarea {
  font:inherit; padding:6px 8px; border:1px solid #d3d6db; border-radius:8px; background:#fff; }
input[type=number] { width:74px; }
textarea { width:100%; resize:vertical; }
.inline-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0; }
.inline-form input[type=text], .inline-form input[type=search] { min-width:220px; }
.add-set { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.check { display:inline-flex; gap:6px; align-items:center; font-size:14px; color:var(--muted); }
.stack { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.stack label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
details.edit { border:1px solid var(--line); border-radius:10px; background:#fff;
               padding:8px 14px; }
details.edit summary { cursor:pointer; color:var(--muted); font-size:14px; }
details.edit[open] { width:min(420px, 100%); }

/* toolbar buttons and links styled as buttons */
a.button { display:inline-block; text-decoration:none; font-size:14px;
           padding:6px 12px; border-radius:8px; border:1px solid var(--accent);
           background:var(--accent); color:#fff; }
a.button:hover { filter:brightness(1.07); }
.toolbar { display:flex; gap:8px; align-items:center; margin:0; }
button.ghost { background:#fff; color:var(--muted); border-color:var(--line); }
button.ghost:hover:not(:disabled) { color:var(--ink); background:#f3f4f6; }
button.ghost:disabled { opacity:.35; cursor:default; }
.nowrap { white-space:nowrap; }
td.right form { display:inline-block; margin-left:4px; }

/* per-set breakdown, expandable without JS */
td.breakdown { width:96px; font-size:13px; }
td.breakdown details summary { cursor:pointer; color:var(--muted);
                               list-style:none; padding:2px 0; }
td.breakdown details summary::-webkit-details-marker { display:none; }
td.breakdown details summary::after { content:" ▾"; font-size:10px; }
td.breakdown details[open] summary::after { content:" ▴"; }
td.breakdown details summary:hover { color:var(--ink); }
td.breakdown ul { list-style:none; margin:4px 0 0; padding:0; }
td.breakdown li { padding:1px 0; color:var(--muted); }

/* flash messages */
.flash { padding:10px 14px; border-radius:8px; margin:0 0 14px; font-size:14px;
         background:#eefaf1; border:1px solid #bce3c8; color:#14532d; }
.flash.error { background:#fdf2f2; border-color:#f0c2c1; color:#7f1d1d; }

@media (max-width: 720px) {
  .page-head { flex-direction:column; align-items:stretch; }
  table.grid { font-size:13px; }
  table.grid th, table.grid td { padding:6px 6px; }
}

/* dark mode, following the OS */
@media (prefers-color-scheme: dark) {
  :root { --ink:#e8e8ea; --muted:#9aa0aa; --line:#33363d; --bg:#16171a; --accent:#e8524f; }
  body { background:var(--bg); color:var(--ink); }
  .topbar, .panel, .summary, .empty, details.edit, table.grid,
  .flash, .toolbar, .sheet-head { background:#1d1f23; }
  .topbar { border-bottom-color:var(--line); }
  table.grid tbody tr:hover { background:#22252a; }
  input[type=text], input[type=search], input[type=number], select, textarea {
    background:#15161a; color:var(--ink); border-color:#3a3d44; }
  button.ghost, button.danger { background:#1d1f23; }
  button.ghost:hover:not(:disabled) { background:#2a2d33; }
  .flash { background:#17281c; border-color:#2d5a3c; color:#c7efd3; }
  .flash.error { background:#2a1717; border-color:#5c2b2b; color:#f3c9c8; }
  a.button, button { color:#fff; }
}
@media print {
  body { background:#fff !important; color:#000 !important; }
}