:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --ink: #1d2733;
  --muted: #6b7785;
  --line: #dde2e8;
  --accent: #1f5f8b;
  --accent-ink: #ffffff;
  --danger: #b3261e;
  --row-hover: #eef3f8;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181d; --panel: #1b2027; --ink: #e6eaee; --muted: #93a0ad;
    --line: #2b333c; --accent: #5aa3d6; --accent-ink: #0d1116; --danger: #f2887f;
    --row-hover: #222a33;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); font-size: 14px; line-height: 1.4; }
h1 { font-size: 1.15rem; margin: 0; font-weight: 650; }
.muted { color: var(--muted); font-weight: 400; }

.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between;
  padding: .75rem 1.25rem; background: var(--panel); border-bottom: 1px solid var(--line);
}
.tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
form.inline { display: inline; margin: 0; }

input, textarea, button, .btn {
  font: inherit; color: inherit;
}
input[type=search], input[name=username], input[name=password], textarea {
  padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
}
input[type=search] { width: min(30rem, 100%); }
input:focus, textarea:focus, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button, .btn {
  padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { border-color: var(--accent); }
button:disabled { opacity: .55; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.ghost { border-color: transparent; background: transparent; color: var(--muted); }
button.ghost:hover { color: var(--ink); }

main { padding: 1rem 1.25rem 2rem; }
.meta { margin: 0 0 .6rem; display: flex; gap: .75rem; align-items: center; min-height: 2rem; }
.flash { margin: 0 0 .75rem; padding: .55rem .8rem; border-radius: 6px; background: #e4f0e8; color: #1c4b2b; }
.flash.err { background: #fbe5e3; color: #7a1a14; }
@media (prefers-color-scheme: dark) {
  .flash { background: #1e3a29; color: #bfe6cb; }
  .flash.err { background: #4a1f1c; color: #f6c9c5; }
}

.wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: .45rem .7rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
td:nth-child(3) { white-space: normal; min-width: 14rem; }
th { position: sticky; top: 0; background: var(--panel); font-weight: 600; font-size: .85rem; color: var(--muted); user-select: none; }
th[data-sort] { cursor: pointer; }
th[data-sort]:hover { color: var(--ink); }
th.asc::after { content: " ▲"; font-size: .7em; }
th.desc::after { content: " ▼"; font-size: .7em; }
tbody tr:hover { background: var(--row-hover); }
tbody tr:last-child td { border-bottom: 0; }
td.sku { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.zero { color: var(--danger); }
td.inc { font-variant-numeric: tabular-nums; }
td.inc .date { color: var(--muted); margin-right: .15rem; }
td.status { font-size: .8rem; white-space: normal; min-width: 8rem; }
.err { color: var(--danger); }
td.actions { text-align: right; white-space: nowrap; }
tr.loading { opacity: .5; }
button.icon { padding: .15rem .5rem; border-color: transparent; background: transparent; color: var(--muted); }
button.icon:hover { color: var(--ink); border-color: var(--line); }
button.icon.danger:hover { color: var(--danger); }
.empty { padding: 2rem; text-align: center; color: var(--muted); margin: 0; }

dialog { border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; width: min(34rem, 92vw); background: var(--panel); color: var(--ink); }
dialog::backdrop { background: rgba(10, 15, 20, .45); }
dialog h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
dialog label { display: block; }
dialog textarea { width: 100%; margin-top: .35rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
dialog .row { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }

body.login { display: grid; place-items: center; min-height: 100vh; }
body.login main { width: min(22rem, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 1.5rem; }
body.login form { display: grid; gap: .8rem; margin-top: 1rem; }
body.login label { display: grid; gap: .25rem; font-size: .85rem; color: var(--muted); }
body.login input { color: var(--ink); }