:root{
  --ground:#f1f3ef; --surface:#ffffff; --surface-2:#e9ece6; --ink:#181c1e; --ink-2:#4f5a5f; --muted:#7a868c;
  --line:#d6dbd4; --line-2:#c3cac1; --accent:#b45309; --bar:#4b6a88; --ok:#1f7a4d; --warn:#b45309; --crit:#b42318; --chip:#eef1ec; --focus:#1d4ed8;
  --seg1:#4b6a88; --seg3:#a9bfd0; --seg7:#6f8f7c;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ground:#101416; --surface:#181d20; --surface-2:#1f2629; --ink:#e6e9e4; --ink-2:#b4bcb6; --muted:#8a958f;
  --line:#2a3236; --line-2:#3a444a; --accent:#f2a33a; --bar:#7ea1c4; --ok:#5cc08a; --warn:#f2a33a; --crit:#f07167; --chip:#232b2f; --focus:#93b4ff;
  --seg1:#7ea1c4; --seg3:#456280; --seg7:#6f9a83;
}}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0 auto;max-width:1240px;padding:0 clamp(16px,3vw,40px) 48px;background:var(--ground);color:var(--ink);font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.45}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-weight:600;font-size:clamp(24px,3vw,32px);letter-spacing:-.01em}
h2{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-weight:600;font-size:19px}
h3{font-size:15px;font-weight:600}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.muted{color:var(--muted)} .small{font-size:12.5px}
header.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:14px 0;border-bottom:1px solid var(--line)}
header.top .brand{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:600;font-size:18px;text-decoration:none}
header.top .brand span{color:var(--accent)}
header.top nav{display:flex;gap:2px;flex-wrap:wrap}
header.top nav a{text-decoration:none;color:var(--ink-2);padding:6px 10px;border-radius:4px}
header.top nav a.on,header.top nav a:hover{background:var(--surface-2);color:var(--ink)}
header.top form.inline{margin-left:auto;display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12.5px}
.flash{margin:14px 0 0;padding:9px 12px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 4px 4px 0}
main{margin-top:22px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 20px;margin-bottom:14px}
.head p{margin:4px 0 0;color:var(--ink-2);max-width:70ch}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:14px;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px 18px;min-width:0}
.card h2,.card h3{margin-bottom:10px}
.narrow{max-width:440px;margin:48px auto 0}
form.stack{display:flex;flex-direction:column;gap:10px}
label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2)}
label.row{flex-direction:row;align-items:center;gap:8px}
input,select{padding:8px 10px;border:1px solid var(--line-2);border-radius:4px;background:var(--surface);color:var(--ink);font:inherit;min-width:0;max-width:100%}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button,.btn{padding:8px 14px;border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--ground);font:inherit;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block}
button.secondary,.btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
button.link{background:none;border:0;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;padding:0;font-weight:400}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.error{color:var(--crit);font-size:13px}
table{width:100%;border-collapse:collapse;font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--surface)}
tr:last-child td{border-bottom:0}
td.login,td.mono{font-family:"IBM Plex Mono",monospace;font-size:12px}
.badge{display:inline-block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;background:var(--chip);color:var(--ink-2);white-space:nowrap}
.badge.ok{background:color-mix(in srgb,var(--ok) 18%,var(--chip));color:var(--ok)}
.badge.warn{background:color-mix(in srgb,var(--warn) 20%,var(--chip));color:var(--warn)}
.badge.crit{background:color-mix(in srgb,var(--crit) 16%,var(--chip));color:var(--crit)}
.badge.personal{background:color-mix(in srgb,var(--seg1) 22%,var(--chip))}
.badge.shared{background:color-mix(in srgb,var(--warn) 22%,var(--chip));color:var(--warn)}
.badge.station{background:color-mix(in srgb,var(--seg7) 30%,var(--chip))}
.badge.loginadmin{background:color-mix(in srgb,var(--accent) 20%,var(--chip));color:var(--accent)}
.invite{border:1px dashed var(--accent);border-radius:6px;padding:12px 14px;background:color-mix(in srgb,var(--accent) 6%,var(--surface));margin-bottom:14px}
.invite code{display:block;font-family:"IBM Plex Mono",monospace;font-size:12.5px;overflow-wrap:anywhere;margin-top:6px;user-select:all}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px}
.dot.off{background:var(--muted)}
.launch{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px}
.launch .tile{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.launch .tile b{font-size:15px}
.launch .tile .as{font-size:12.5px;color:var(--ink-2)}
.launch .tile .as code{font-family:"IBM Plex Mono",monospace;font-size:12px}
.launch .tile .btn{align-self:flex-start;margin-top:auto;padding:5px 10px;font-size:12.5px}
.launch .tile.none{opacity:.6}
footer{margin-top:40px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);padding-top:10px}
@media (max-width:640px){ th:nth-child(n+5),td:nth-child(n+5){display:none} }