:root {
    --bg: #EDEAE4; --surface: #E4E1DA; --group: #F3F1EC; --border: #D6D2C9;
    --ink: #33363A; --secondary: #585C54; --tertiary: #767A72;
    --accent: #476074; --band: #6B8A9E; --button: #9BB0BA; --danger: #A43B32;
    --selected: #DDDEDC; --warn-bg: #F1E6CF;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #1B1A18; --surface: #262420; --group: #262420; --border: #3A3833;
      --ink: #EDEAE4; --secondary: #9DA198; --tertiary: #8C9088;
      --accent: #9BB0BA; --band: #9BB0BA; --button: #9BB0BA; --danger: #E2867C;
      --selected: #2B3338; --warn-bg: #3A3326;
    }
  }
  :root[data-theme="dark"] {
    --bg: #1B1A18; --surface: #262420; --group: #262420; --border: #3A3833;
    --ink: #EDEAE4; --secondary: #9DA198; --tertiary: #8C9088;
    --accent: #9BB0BA; --band: #9BB0BA; --button: #9BB0BA; --danger: #E2867C;
    --selected: #2B3338; --warn-bg: #3A3326;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 Outfit, -apple-system, Helvetica, sans-serif; }
  .banner { background: var(--warn-bg); color: var(--ink); padding: 8px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
  .shell { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 37px); }
  nav { border-right: 1px solid var(--border); padding: 20px 12px; }
  nav .mark { font-weight: 300; letter-spacing: .45em; font-size: 18px; padding: 0 8px 18px; }
  nav button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--ink); font: inherit; padding: 9px 10px; border-radius: 8px; cursor: pointer; min-height: 40px; }
  nav button[aria-current="page"] { background: var(--selected); }
  nav .who { margin-top: 24px; font-size: 13px; color: var(--secondary); padding: 0 10px; }
  main { padding: 24px 28px 60px; max-width: 1100px; }
  h1 { font: 600 26px Outfit; margin: 0 0 4px; }
  h2 { font: 500 17px Outfit; margin: 28px 0 10px; }
  .lede { font: 300 17px/1.5 Fraunces, Georgia, serif; color: var(--secondary); margin: 0 0 18px; max-width: 720px; }
  .eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tertiary); font-weight: 500; }
  table { width: 100%; border-collapse: collapse; background: var(--group); border-radius: 12px; overflow: hidden; }
  th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
  th { font-weight: 500; font-size: 13px; color: var(--secondary); }
  tr:last-child td { border-bottom: 0; }
  tr.click { cursor: pointer; } tr.click:hover td { background: var(--selected); }
  .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  input[type=search], input[type=text], input[type=email], input[type=date], textarea, select {
    font: inherit; color: var(--ink); background: var(--group); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; min-height: 40px; }
  textarea { width: 100%; min-height: 160px; font: 14px/1.5 ui-monospace, Menlo, monospace; }
  .btn { font: 500 15px Outfit; border: 0; border-radius: 10px; padding: 9px 16px; min-height: 40px; cursor: pointer; background: var(--button); color: #33363A; }
  .btn.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
  .btn.danger { background: none; color: var(--danger); border: 1px solid var(--border); }
  .btn[disabled] { opacity: .5; cursor: not-allowed; }
  .card { background: var(--group); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--secondary); border: 1px solid var(--border); }
  .tag.flag { color: var(--danger); }
  .muted { color: var(--secondary); } .small { font-size: 13px; }
  .note { font: 400 16px Outfit; } .quote::before { content: "\201C"; } .quote::after { content: "\201D"; }
  .audit { border-left: 3px solid var(--band); padding: 8px 12px; background: var(--surface); border-radius: 0 8px 8px 0; font-size: 13px; }
  .state { margin-left: auto; font-size: 13px; color: var(--secondary); }
  .empty, .error, .denied, .loading { padding: 40px; text-align: center; color: var(--secondary); }
  .prose { font: 300 17px/1.6 Fraunces, Georgia, serif; white-space: pre-wrap; }
  dialog { border: 1px solid var(--border); border-radius: 14px; background: var(--bg); color: var(--ink); max-width: 520px; width: 92vw; }
  dialog::backdrop { background: rgba(0,0,0,.35); }
  .bar { height: 8px; border-radius: 4px; background: var(--band); }
  @media (max-width: 760px) { .shell { grid-template-columns: 1fr; } nav { border-right: 0; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; } nav .who, nav .mark { display: none; } .grid2 { grid-template-columns: 1fr; } main { padding: 16px; } }

[hidden]{display:none!important}input{max-width:100%}label{display:block;margin:10px 0}.table-scroll{overflow-x:auto}.notice{padding:12px;border:1px solid var(--border);border-radius:10px;margin:12px 0}.error{color:var(--danger)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.btn{min-height:44px}.field{width:100%}.actions{margin-top:16px}pre{white-space:pre-wrap;overflow-wrap:anywhere}.list{display:grid;gap:12px}.signin{max-width:440px;margin:8vh auto;padding:24px}.signin input{width:100%}.status{margin:12px 0}footer{padding:12px;font-size:12px;color:var(--secondary)}@media(max-width:760px){nav button{width:auto}nav{gap:4px}.shell main{width:100%;min-width:0}}
@font-face{font-family:Outfit;src:url('./fonts/Outfit.ttf') format('truetype');font-display:swap}@font-face{font-family:Fraunces;src:url('./fonts/Fraunces.ttf') format('truetype');font-display:swap}