/* tokens:begin  Design tokens, the Lightwell design language (docs/design.md). This is the only place raw colors and sizes are defined. */
  :root {
    --accent:#1f5c5c; --accent-contrast:#ffffff;
    --bg:#f6f5f3; --surface:#ffffff; --surface-2:#efede9; --border:#e0ddd7; --border-strong:#c4c0b8;
    --text:#1d1c1a; --text-muted:#5f5b54; --text-faint:#7a766e;
    --accent-text:var(--accent);
    --accent-soft:color-mix(in srgb, var(--accent) 9%, var(--surface));
    --accent-hover:color-mix(in srgb, var(--accent) 88%, #000000);
    --focus:color-mix(in srgb, var(--accent) 70%, #ffffff);
    --success:#1c6b3a; --success-bg:#e3f1e8; --warning:#85560a; --warning-bg:#f9eed6; --danger:#a3271e; --danger-bg:#f9e6e3; --neutral-bg:#eceae6;
    --overlay:rgb(20 19 17 / 0.55); --shadow:0 8px 24px rgb(20 19 17 / 0.14);
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
    --radius:6px; --radius-lg:10px; --border-w:1px;
    --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --text-xs:12px; --text-sm:13px; --text-base:15px; --text-lg:18px; --text-xl:22px; --text-2xl:28px; --leading:1.5;
    --sidebar-w:232px; --content-max:1120px; --touch:44px; --control-h:38px;
    --z-sticky:20; --z-overlay:100; --z-toast:200; --ease:140ms ease;
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --bg:#131312; --surface:#1b1b19; --surface-2:#252523; --border:#33322e; --border-strong:#4a4943;
    --text:#ecebe7; --text-muted:#adaaa2; --text-faint:#8f8c84;
    --accent-text:color-mix(in srgb, var(--accent) 45%, #ffffff);
    --accent-soft:color-mix(in srgb, var(--accent) 22%, var(--surface));
    --accent-hover:color-mix(in srgb, var(--accent) 85%, #ffffff);
    --success:#86d3a0; --success-bg:#17301f; --warning:#e8bd6b; --warning-bg:#33280f; --danger:#f19a92; --danger-bg:#3a1b18; --neutral-bg:#2b2a27;
    --overlay:rgb(0 0 0 / 0.65); --shadow:0 8px 24px rgb(0 0 0 / 0.5); color-scheme:dark;
  } }
  :root[data-theme="dark"] {
    --bg:#131312; --surface:#1b1b19; --surface-2:#252523; --border:#33322e; --border-strong:#4a4943;
    --text:#ecebe7; --text-muted:#adaaa2; --text-faint:#8f8c84;
    --accent-text:color-mix(in srgb, var(--accent) 45%, #ffffff);
    --accent-soft:color-mix(in srgb, var(--accent) 22%, var(--surface));
    --accent-hover:color-mix(in srgb, var(--accent) 85%, #ffffff);
    --success:#86d3a0; --success-bg:#17301f; --warning:#e8bd6b; --warning-bg:#33280f; --danger:#f19a92; --danger-bg:#3a1b18; --neutral-bg:#2b2a27;
    --overlay:rgb(0 0 0 / 0.65); --shadow:0 8px 24px rgb(0 0 0 / 0.5); color-scheme:dark;
  }
  /* tokens:end */

  *, *::before, *::after { box-sizing:border-box; }
  html, body { height:100%; }
  html { -webkit-text-size-adjust:100%; }
  body { margin:0; background:var(--bg); color:var(--text); font:var(--text-base)/var(--leading) var(--font); -webkit-font-smoothing:antialiased; }
  h1, h2, h3, h4 { margin:0; line-height:1.25; font-weight:600; letter-spacing:-.01em; }
  h1 { font-size:var(--text-2xl); } h2 { font-size:var(--text-xl); } h3 { font-size:var(--text-lg); }
  p { margin:0 0 var(--s3); }
  a { color:var(--accent-text); text-underline-offset:2px; }
  a:hover { text-decoration-thickness:2px; }
  :focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--radius); }
  [hidden] { display:none !important; }
  .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .skip { position:absolute; left:var(--s3); top:-100px; z-index:var(--z-toast); background:var(--surface); border:var(--border-w) solid var(--border-strong); border-radius:var(--radius); padding:var(--s2) var(--s3); }
  .skip:focus { top:var(--s3); }
  .dim { color:var(--text-muted); } .err { color:var(--danger); } .small { font-size:var(--text-sm); }
  .num { font-variant-numeric:tabular-nums; }
  .clip { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; max-width:340px; }
  code, .mono { font-family:var(--font-mono); font-size:var(--text-sm); }
  .icon { width:18px; height:18px; flex:none; stroke-width:1.75; }
  .inline-icon { display:inline-flex; }

  /* shell */
  .shell { display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); min-height:100vh; }
  .sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5) var(--s3); background:var(--surface); border-right:var(--border-w) solid var(--border); overflow-y:auto; }
  .sidebar-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
  .sidebar button.sidebar-close { display:none; }
  .brand { display:flex; align-items:center; gap:var(--s2); font-size:var(--text-lg); font-weight:700; letter-spacing:-.02em; padding:0 var(--s3); color:var(--text); text-decoration:none; }
  .brand .icon { color:var(--accent-text); }
  .navsec { font-size:var(--text-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); padding:var(--s4) var(--s3) var(--s1); }
  .nav { display:flex; flex-direction:column; gap:2px; }
  .navitem { display:flex; align-items:center; gap:var(--s3); width:100%; min-height:36px; padding:var(--s2) var(--s3); border-radius:var(--radius); color:var(--text-muted); text-decoration:none; font:inherit; font-weight:500; background:none; border:0; cursor:pointer; text-align:left; }
  .navitem:hover { background:var(--surface-2); color:var(--text); }
  .navitem.on { background:var(--accent-soft); color:var(--accent-text); }
  .navitem .label { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .navitem .state { font-size:var(--text-xs); font-weight:600; }
  .navitem .state.up { color:var(--success); } .navitem .state.down { color:var(--danger); }
  .grow { flex:1 1 auto; min-width:0; }
  .userbox { border-top:var(--border-w) solid var(--border); padding-top:var(--s3); }
  .userbox .who { padding:var(--s1) var(--s3) var(--s2); font-size:var(--text-sm); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .content { min-width:0; }
  main { max-width:var(--content-max); margin:0 auto; padding:var(--s6) var(--s5) var(--s8); }
  main:focus { outline:none; }
  .topbar, .backdrop { display:none; }
  .page-h { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s5); flex-wrap:wrap; }
  .page-h h1 { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
  .page-h p { margin:var(--s1) 0 0; color:var(--text-muted); max-width:70ch; }
  .page-h .btn { white-space:nowrap; }
  .back { display:inline-block; margin-bottom:var(--s3); font-size:var(--text-sm); }

  /* cards, layout */
  .card { background:var(--surface); border:var(--border-w) solid var(--border); border-radius:var(--radius-lg); padding:var(--s5); margin-bottom:var(--s4); overflow-x:auto; }
  .card.flush { padding:0; overflow:hidden; }
  .card > h2 { font-size:var(--text-lg); margin:0 0 var(--s3); }
  .card-h { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3); flex-wrap:wrap; }
  .card-h h2 { font-size:var(--text-lg); margin:0; }
  .cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--s4); margin-bottom:var(--s4); }
  .cards > .card { margin:0; display:flex; flex-direction:column; gap:var(--s2); }
  .cards h3 { font-size:var(--text-lg); }
  .cards h3 a { color:var(--text); text-decoration:none; } .cards h3 a:hover { text-decoration:underline; }
  .meta { color:var(--text-muted); font-size:var(--text-sm); }
  .stack { display:flex; flex-direction:column; gap:var(--s4); }
  .scroll { overflow-x:auto; }
  .actions { display:flex; gap:var(--s2); flex-wrap:wrap; }
  td.actions-cell { text-align:right; white-space:nowrap; }
  td.actions-cell button + button { margin-left:var(--s2); }
  .form-actions { justify-content:flex-end; margin-top:var(--s2); }
  .toolbar { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3); flex-wrap:wrap; }
  .toolbar input[type=search], .toolbar input[type=text], .toolbar select { max-width:320px; }
  .toolbar .push { margin-left:auto; }
  .center { max-width:440px; margin:var(--s8) auto; padding:0 var(--s4); }
  .center .brand { justify-content:center; font-size:var(--text-xl); padding-bottom:var(--s4); }
  .spark { width:100%; height:48px; display:block; }
  .sendrow { display:flex; gap:var(--s2); margin-top:var(--s3); flex-wrap:wrap; }
  .sendrow input { flex:1 1 220px; width:auto; }

  /* forms */
  label { display:flex; flex-direction:column; gap:var(--s1); font-size:var(--text-sm); font-weight:600; color:var(--text); }
  label.chk { flex-direction:row; align-items:flex-start; gap:var(--s2); font-size:var(--text-base); font-weight:400; }
  input, select, textarea { background:var(--surface); color:var(--text); border:var(--border-w) solid var(--border-strong); border-radius:var(--radius); padding:var(--s2) var(--s3); min-height:var(--control-h); font:inherit; font-weight:400; min-width:0; width:100%; }
  textarea { min-height:96px; resize:vertical; font-family:var(--font-mono); font-size:var(--text-sm); }
  input[type=checkbox] { width:16px; height:16px; min-height:0; padding:0; margin-top:3px; accent-color:var(--accent); }
  input:focus, select:focus, textarea:focus { outline:2px solid var(--focus); outline-offset:0; border-color:var(--accent); }
  input:disabled, select:disabled { opacity:.6; }
  input[aria-invalid="true"] { border-color:var(--danger); }
  .sub { color:var(--text-muted); font-size:var(--text-sm); font-weight:400; }
  fieldset { border:var(--border-w) solid var(--border); border-radius:var(--radius-lg); padding:var(--s4); margin:0; min-width:0; }
  legend { font-size:var(--text-sm); font-weight:600; color:var(--text-muted); padding:0 var(--s2); }
  .pillrow { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); }

  /* buttons: btn is the primary action, ghost the default, danger and quiet the others */
  button.btn, button.ghost { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:var(--control-h); padding:0 var(--s4); border-radius:var(--radius); font:inherit; font-weight:500; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background var(--ease), border-color var(--ease); }
  button.btn { background:var(--accent); color:var(--accent-contrast); border:var(--border-w) solid var(--accent); }
  button.btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
  button.ghost { background:var(--surface); border:var(--border-w) solid var(--border-strong); color:var(--text); }
  button.ghost:hover { background:var(--surface-2); }
  button.quiet { background:transparent; border-color:transparent; }
  button.danger { color:var(--danger); border-color:var(--danger); }
  button.danger:hover { background:var(--danger-bg); }
  button.btn-icon { width:var(--control-h); padding:0; }
  td button.ghost, .actions button.ghost { min-height:30px; padding:0 var(--s3); font-size:var(--text-sm); }
  button:disabled { opacity:.55; cursor:not-allowed; }

  /* tables */
  table { width:100%; border-collapse:collapse; }
  th { text-align:left; font-size:var(--text-sm); color:var(--text-muted); font-weight:600; padding:var(--s3) var(--s4); border-bottom:var(--border-w) solid var(--border); white-space:nowrap; background:var(--surface); }
  td { padding:var(--s3) var(--s4); border-bottom:var(--border-w) solid var(--border); vertical-align:middle; }
  tbody tr:hover td { background:var(--surface-2); }
  tr:last-child td { border-bottom:0; }
  td.wrap { overflow-wrap:anywhere; min-width:150px; max-width:320px; }

  /* badges: status always carries a text label, never color alone */
  .badge { display:inline-flex; align-items:center; gap:var(--s1); padding:2px var(--s2); border-radius:999px; font-size:var(--text-xs); font-weight:600; background:var(--neutral-bg); color:var(--text-muted); white-space:nowrap; }
  .badge-success { background:var(--success-bg); color:var(--success); }
  .badge-warning { background:var(--warning-bg); color:var(--warning); }
  .badge-danger { background:var(--danger-bg); color:var(--danger); }
  .badge-accent { background:var(--accent-soft); color:var(--accent-text); }
  .tag { display:inline-block; padding:1px var(--s2); border:var(--border-w) solid var(--border); border-radius:var(--radius); font-size:var(--text-xs); color:var(--text-muted); }
  .logbox { margin:0; background:var(--bg); border:var(--border-w) solid var(--border); border-radius:var(--radius); padding:var(--s3); font:var(--text-sm)/1.6 var(--font-mono); height:320px; overflow:auto; white-space:pre-wrap; word-break:break-word; }
  .logbox .cmd { color:var(--accent-text); } .logbox .bad { color:var(--danger); }

  /* the event and chat feed */
  .feed { max-height:60vh; overflow-y:auto; }
  .ev { display:grid; grid-template-columns:5.5rem 6rem minmax(0,1fr); gap:var(--s3); align-items:baseline; padding:var(--s2) 0; border-bottom:var(--border-w) solid var(--border); font-size:var(--text-sm); }
  .ev:last-child { border-bottom:0; }
  .ev time { color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .ev .txt { overflow-wrap:anywhere; }
  .ev .txt strong { font-weight:600; }
  .ev.chat { grid-template-columns:5.5rem minmax(0,1fr); }
  .ev .srv { color:var(--text-muted); }

  /* empty state, notice, loading */
  .empty { text-align:center; padding:var(--s7) var(--s5); color:var(--text-muted); border:var(--border-w) dashed var(--border-strong); border-radius:var(--radius-lg); margin:var(--s3); }
  .empty h3 { color:var(--text); margin-bottom:var(--s1); }
  .empty p { margin:0 auto var(--s3); max-width:56ch; }
  .empty .icon { width:28px; height:28px; margin:0 auto var(--s3); color:var(--text-faint); display:block; }
  .card > .empty { margin:0; }
  .notice { padding:var(--s3) var(--s4); border-radius:var(--radius); border:var(--border-w) solid var(--border); background:var(--surface-2); font-size:var(--text-sm); margin-bottom:var(--s4); display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }
  .notice-warning { background:var(--warning-bg); border-color:var(--warning); color:var(--warning); }
  .notice-danger { background:var(--danger-bg); border-color:var(--danger); color:var(--danger); }
  .skeleton { background:linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size:200% 100%; animation:shimmer 1.3s infinite; border-radius:var(--radius); height:16px; margin-bottom:14px; }
  .w60 { width:60%; } .w75 { width:75%; } .w90 { width:90%; } .w100 { width:100%; }
  @keyframes shimmer { to { background-position:-200% 0; } }

  /* dialogs, tabs, toasts */
  .shade { position:fixed; inset:0; background:var(--overlay); display:grid; grid-template-columns:minmax(0,1fr); place-items:start center; padding:var(--s7) var(--s4); overflow:auto; z-index:var(--z-overlay); }
  .modal { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:var(--s5); width:min(480px,100%); }
  .modal.wide { width:min(640px,100%); }
  .modal h2 { margin:0 0 var(--s3); font-size:var(--text-lg); }
  .tabs2 { display:inline-flex; margin-bottom:var(--s4); border:var(--border-w) solid var(--border-strong); border-radius:var(--radius); overflow:hidden; max-width:100%; flex-wrap:wrap; background:var(--surface); }
  .tabs2 a { background:var(--surface); color:var(--text-muted); padding:0 var(--s4); min-height:var(--control-h); display:inline-flex; align-items:center; text-decoration:none; font-weight:500; }
  .tabs2 a + a { border-left:var(--border-w) solid var(--border-strong); }
  .tabs2 a:hover { background:var(--surface-2); }
  .tabs2 a.on { background:var(--accent-soft); color:var(--accent-text); }
  .toasts { position:fixed; right:var(--s4); bottom:var(--s4); z-index:var(--z-toast); display:flex; flex-direction:column; gap:var(--s2); max-width:min(360px, calc(100vw - 32px)); }
  .toast { background:var(--text); color:var(--bg); padding:var(--s3) var(--s4); border-radius:var(--radius); box-shadow:var(--shadow); font-size:var(--text-sm); overflow-wrap:anywhere; }
  .toast-error { background:var(--danger); color:var(--accent-contrast); }

  @media (prefers-reduced-motion: reduce) { .skeleton { animation:none; } * { transition:none !important; } html { scroll-behavior:auto; } }
  @media (pointer: coarse) {
    button.btn, button.ghost, .navitem, input, select, .tabs2 a { min-height:var(--touch); }
    td button.ghost, .actions button.ghost { min-height:36px; }
    input, select, textarea { font-size:16px; }
  }
  @media (max-width:860px) {
    .shell { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
    .sidebar { display:none; }
    .sidebar.open { display:flex; position:fixed; inset:0 auto 0 0; width:min(280px,85vw); height:100dvh; z-index:var(--z-overlay); box-shadow:var(--shadow); }
    .sidebar button.sidebar-close { display:inline-flex; }
    .topbar { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:var(--s2) var(--s4); background:var(--surface); border-bottom:var(--border-w) solid var(--border); position:sticky; top:0; z-index:var(--z-sticky); }
    .backdrop.open { display:block; position:fixed; inset:0; background:var(--overlay); z-index:calc(var(--z-overlay) - 1); }
    main { padding:var(--s5) var(--s4) var(--s7); }
    .ev { grid-template-columns:4.5rem minmax(0,1fr); } .ev .badge { display:none; }
  }
  @media (max-width:640px) {
    .modal { padding:var(--s4); }
    .shade { padding:var(--s4) var(--s3); }
    .toasts { left:var(--s3); right:var(--s3); bottom:var(--s3); max-width:none; }
    .page-h > .btn { width:100%; }
  }
  .icon-16 { width:16px; height:16px; } .icon-22 { width:22px; height:22px; }