:root {
  --bg: #fbf8f1; --surface: #fff; --surface-alt: #f4efe3; --text: #1c1912; --muted: #6b6455; --faint: #a39b89;
  --border: #e9e2d2; --accent: #f7b31e; --accent-pressed: #e5a00f; --accent-soft: #fdf0cf; --on-accent: #1c1912;
  --link: #9a6a00; --danger: #c2341b; --danger-soft: #fbe3dd; --ok: #2f7d32; --ok-soft: #e0f1df; --info-soft: #e6eefb; --info: #2556a8;
  --shadow: 0 1px 2px rgba(40,30,10,.06), 0 10px 30px rgba(40,30,10,.08);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12100c; --surface: #1b1813; --surface-alt: #24201a; --text: #f3eee3; --muted: #a8a08f; --faint: #6f675a;
    --border: #2d2820; --accent-soft: #3a2f14; --link: #f7b31e; --danger: #ff7a62; --danger-soft: #3d1c15;
    --ok: #7fcf83; --ok-soft: #1b3320; --info-soft: #18243a; --info: #8db4f5;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.4);
  }
}
* { box-sizing: border-box }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif }
a { color: var(--link); text-decoration: none } a:hover { text-decoration: underline }
h1 { font-size: 22px; margin: 0 } h2 { font-size: 15px; margin: 0 0 12px } h3 { font-size: 14px; margin: 0 }
.boot { padding: 40px; color: var(--muted) }
.muted { color: var(--muted) } .small { font-size: 12px } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap } .grow { flex: 1 } .right { margin-left: auto }

/* Layout */
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh }
.side { background: var(--surface); border-right: 1px solid var(--border); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; padding: 4px 8px 18px }
.brand img { width: 28px; height: 28px }
.brand span { font-weight: 500; color: var(--muted) }
.side a.nav { display: block; padding: 8px 10px; border-radius: 9px; color: var(--text); font-weight: 500 }
.side a.nav:hover { background: var(--surface-alt); text-decoration: none }
.side a.nav.on { background: var(--accent-soft) }
.side .who { margin-top: auto; padding: 10px; border-top: 1px solid var(--border); font-size: 12px }
.side .who b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis }
main { padding: 26px 30px 60px; max-width: 1180px; width: 100% }
.head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px }
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--border) }
  .brand { padding: 0 8px 0 0 } .side .who { margin: 0 0 0 auto; border: 0; padding: 0 }
  main { padding: 18px 16px 50px }
}

/* Cards, tiles, tables */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 18px }
.card.flush { padding: 0; overflow: hidden }
.card.flush > h2, .card.flush > .row.pad { padding: 16px 18px 0 }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px }
.tile .n { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums } .tile .l { color: var(--muted); font-size: 12px }
.table-wrap { overflow-x: auto }
table { width: 100%; border-collapse: collapse }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap }
td.wrap { white-space: normal }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; background: var(--surface-alt) }
tr:last-child td { border-bottom: 0 }
tr.click { cursor: pointer } tr.click:hover td { background: var(--surface-alt) }
.empty { padding: 22px; color: var(--muted); text-align: center }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 }
.kv dt { color: var(--muted) } .kv dd { margin: 0 }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px } @media (max-width: 900px) { .grid2 { grid-template-columns: 1fr } }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin-top: 8px }
.bars div { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px }
.bars div.zero { background: var(--border) }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 650; background: var(--surface-alt); color: var(--muted); margin-right: 4px }
.badge.pro { background: var(--accent-soft); color: var(--text) } .badge.team { background: var(--info-soft); color: var(--info) }
.badge.danger { background: var(--danger-soft); color: var(--danger) } .badge.ok { background: var(--ok-soft); color: var(--ok) }
.badge.staff { background: var(--text); color: var(--bg) }

/* Forms */
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; min-width: 0 }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px }
textarea { width: 100%; min-height: 64px; resize: vertical }
label.f { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 12px }
label.f input, label.f select { width: 100%; font-size: 14px; font-weight: 400 }
button, .btn { font: inherit; font-weight: 600; border-radius: 9px; padding: 8px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer }
button:hover { background: var(--surface-alt) } button:disabled { opacity: .5; cursor: default }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent) } button.primary:hover { background: var(--accent-pressed) }
button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)) } button.danger:hover { background: var(--danger-soft) }
button.danger.solid { background: var(--danger); color: #fff; border-color: var(--danger) }
button.link { border: 0; background: none; padding: 4px 6px; color: var(--link) }
.search { width: 300px; max-width: 100% }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px }
.login .card { width: 360px; max-width: 100%; padding: 28px }
.login .brand { justify-content: center; padding-bottom: 20px; font-size: 18px }
.login button { width: 100%; padding: 11px }
.error { color: var(--danger); font-size: 13px; margin: 0 0 12px }

/* Dialog + toast */
dialog { border: 1px solid var(--border); border-radius: 16px; padding: 22px; width: 440px; max-width: calc(100vw - 32px); background: var(--surface); color: var(--text); box-shadow: var(--shadow) }
dialog::backdrop { background: rgba(20,15,5,.45) }
dialog h2 { font-size: 17px; margin-bottom: 14px }
dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px;
  font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100vw - 32px) }
#toast.on { opacity: 1 } #toast.bad { background: var(--danger); color: #fff }