:root {
    color-scheme: light dark;
    --bg: light-dark(#fff, #191c21);
    --text: light-dark(#202124, #dfe3e9);
    --surface: light-dark(#f6f7f8, #22262d);
    --hover: light-dark(#edf0f3, #303740);
    --row-hover: light-dark(#fafbfc, #252b33);
    --border: light-dark(#d9dde2, #414954);
    --row-border: light-dark(#e6e8eb, #343c47);
    --control-border: light-dark(#b9bec6, #5d6876);
    --muted: light-dark(#606771, #abb5c2);
    --heading: light-dark(#535b65, #bec7d2);
    --link: light-dark(#315e9b, #93c5fd);
    --selected: light-dark(#e5e8ec, #364250);
    --selected-border: light-dark(#aeb5be, #8495a9);
    --accent: light-dark(#303944, #aec5df);
    --primary: light-dark(#303944, #bed4ed);
    --on-primary: light-dark(#fff, #172334);
    --danger: light-dark(#8a2e2e, #ffacac);
    --warning-bg: light-dark(#fff9e8, #332e21);
    --warning-border: light-dark(#d5c69a, #948454);
    --inherited-bg: light-dark(#e7f0f7, #283e50);
    --inherited-text: light-dark(#315e72, #b3dcee);
    --chip: light-dark(#367da6, #316181);
    --chip-hover: light-dark(#28658a, #3e789c);
    --alias-bg: light-dark(#e6f2f5, #233d44);
    --alias-text: light-dark(#145c70, #b1e3ef);
    --alias-hover: light-dark(#d1e8ef, #2c4c55);
    --secret-border: light-dark(#bbc9bd, #587260);
    --secret-bg: light-dark(#f3f8f3, #233329);
    --cursor: light-dark(#68717c, #bfccdb);
    --series-0: light-dark(#2878c7, #71b7ff);
    --series-1: light-dark(#008975, #59d5b8);
    --series-2: light-dark(#b84e93, #ef92ca);
    --series-3: light-dark(#cf701a, #ffb366);
    --series-4: light-dark(#7063cc, #b1a3ff);
    --series-5: light-dark(#228baf, #72d2ed);
    --series-6: light-dark(#ae4350, #ff969f);
    --series-7: light-dark(#687b20, #c3d578);
    --series-8: light-dark(#7c8490, #b8c0cb);
    font: 14px/1.45 system-ui, sans-serif; color: var(--text); background: var(--bg);
}
:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.session-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.session-controls small { overflow-wrap: anywhere; max-width: 240px; }
.session-header { justify-content: end; }
.theme-control { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.theme-control select { width: auto; }
nav { display: flex; flex-wrap: wrap; gap: 4px; }
header nav { flex: 1; }
button, input, select, nav a, .actions a, .button, .page-current { font: inherit; border: 1px solid var(--control-border); border-radius: 3px; padding: 5px 9px; background: var(--bg); color: inherit; }
button { cursor: pointer; white-space: nowrap; }
a { color: var(--link); text-underline-offset: .2em; }
nav a, .actions a, .button, .page-current { text-decoration: none; display: inline-block; }
button:hover, nav a:hover, .actions a:hover, .button:hover { background: var(--hover); }
button:disabled { cursor: wait; color: var(--muted); background: var(--surface); }
[aria-current=page] { background: var(--selected); border-color: var(--selected-border); font-weight: 600; }
input, select { min-width: 0; }
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
main { max-width: 1120px; margin: 0 auto; padding: 20px; }
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 14px; margin: 0 0 10px; }
p { margin: 0 0 16px; }
small, .muted { color: var(--muted); }
small { font-size: 12px; }
.toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin: 16px 0 12px; }
.toolbar label { flex: 1 1 180px; max-width: 300px; }
label { display: grid; gap: 4px; font-size: 13px; }
label input, label select { width: 100%; }
.table { overflow-x: auto; border: 1px solid var(--border); margin-top: 12px; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 8px 12px; border-bottom: 1px solid var(--row-border); vertical-align: middle; }
th { background: var(--surface); font-size: 12px; font-weight: 600; color: var(--heading); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover); }
td { overflow-wrap: anywhere; }
td input:not([type=checkbox]) { width: 100%; min-width: 130px; }
td:last-child { width: 1%; white-space: nowrap; }
td small { display: block; }
.actions form { display: inline; }
.actions > * + * { margin-inline-start: 8px; }
.actions { min-width: 295px; }
.permission-table td:last-child { width: auto; }
.access-subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.access-subjects .toolbar { margin: 0; padding: 10px; border: 1px solid var(--border); background: var(--row-hover); }
.permission-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 20px; margin-top: 16px; }
.permission-heading small { display: block; margin-top: 2px; }
.bulk-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.bulk-controls button:last-child { color: var(--danger); }
.permission-table { max-height: min(62vh, 620px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.permission-table table { min-width: 520px; }
.permission-table thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px var(--border); }
.permission-table th:not(:first-child), .permission-table .grant-cell { width: 18%; text-align: center; }
.permission-table th:first-child { width: 46%; }
.grant-cell { position: relative; white-space: nowrap; }
.grant-cell input { vertical-align: middle; }
.inherited { display: inline-block; margin-left: 5px; padding: 1px 4px; border-radius: 2px; background: var(--inherited-bg); color: var(--inherited-text); font-size: 10px; line-height: 1.4; vertical-align: middle; }
#group-rows .actions { min-width: 350px; }
.alias-field { flex: 1 1 240px; max-width: 360px; }
.alias-field > label { margin-bottom: 4px; }
.alias-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; min-width: 170px; border: 1px solid var(--control-border); border-radius: 3px; background: var(--bg); }
.alias-box:focus-within { border-color: var(--link); }
.alias-box > button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px; border: 0; background: var(--chip); color: white; font-size: 12px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.alias-box > button:hover { background: var(--chip-hover); }
.alias-box > input:not([type=hidden]) { width: 6ch; min-width: 6ch; flex: 1; padding: 2px 4px; border: 0; background: transparent; }
.alias-add { display: block; width: 100%; text-align: left; border: 0; border-radius: 0 0 3px 3px; background: var(--alias-bg); color: var(--alias-text); white-space: normal; overflow-wrap: anywhere; }
.alias-add:hover { background: var(--alias-hover); }
.bottom { justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12px; }
.pagination-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
details { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 12px; }
summary { cursor: pointer; font-weight: 600; }
#notice, [role=alert]:not(:empty) { margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--warning-border); background: var(--warning-bg); }
#notice:empty, [role=alert]:empty, #workspace:has(#namespace-rows tr) #namespace-empty, #workspace:has(#group-rows tr) #group-empty, #workspace:has(#activity-rows tr) #activity-empty { display: none; }
#unsaved { position: sticky; bottom: 12px; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; padding: 12px; border: 1px solid var(--warning-border); border-radius: 3px; background: var(--warning-bg); }
#unsaved > div:first-child { flex: 1; min-width: 200px; }
#unsaved small { display: block; margin-top: 2px; }
#save-access, #leave-save, #login button { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
#leave-access { width: min(480px, calc(100% - 24px)); padding: 20px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--bg); color: var(--text); }
#leave-access::backdrop { background: rgb(0 0 0 / 25%); }
#leave-access > div { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
#login { max-width: 360px; margin: 50px auto; }
#login form { display: grid; gap: 12px; margin-top: 20px; }
[data-secret] { border: 1px solid var(--secret-border); background: var(--secret-bg); padding: 12px; margin: 16px 0; }
[data-secret] input { display: block; width: 100%; max-width: 460px; font: 13px ui-monospace, monospace; margin-bottom: 10px; }
[data-secret] button { margin-inline-end: 8px; }
.activity-filter label { flex: 1 1 145px; max-width: 220px; }
.activity-tabs { margin: 12px 0; gap: 8px; }
.activity-table table { min-width: 900px; }
.activity-table td:first-child { white-space: nowrap; }
.activity-table td:last-child { white-space: normal; width: auto; }
.activity-table time { white-space: nowrap; font-size: 12px; }
.activity-table code { overflow-wrap: anywhere; }
.audit-snapshot { margin-top: 20px; }
.audit-snapshot pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px; background: var(--surface); border: 1px solid var(--border); }
[hidden] { display: none !important; }
[inert], .htmx-request { opacity: .65; }
.metrics-layout { display: grid; grid-template-columns: minmax(0, 1fr) 235px; gap: 28px; margin-top: 20px; align-items: start; }
.metrics-filters { grid-column: 2; grid-row: 1; display: grid; gap: 12px; padding-left: 20px; border-left: 1px solid var(--border); }
.metrics-filters h2 { margin-bottom: 0; }
.metrics-content { grid-column: 1; grid-row: 1; min-width: 0; }
.metrics-actions { display: flex; gap: 8px; align-items: center; }
.metrics-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.metrics-totals dt { color: var(--muted); font-size: 12px; }
.metrics-totals dd { margin: 4px 0 0; font-size: clamp(18px, 2.5vw, 27px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metrics-chart { margin-bottom: 28px; }
.metrics-chart svg { width: 100%; display: block; overflow: visible; margin-top: 20px; }
.metrics-chart svg text { font: 12px system-ui, sans-serif; fill: var(--muted); }
.metrics-grid { stroke: var(--row-border); stroke-width: 1; }
.metrics-cursor { stroke: var(--cursor); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
[data-bucket-label] { font-size: 12px; color: var(--muted); min-height: 36px; margin: 8px 0; }
[data-bucket-controls]:not([hidden]) { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
[data-bucket-controls] label { flex: 1; }
[data-bucket-controls] input { width: 100%; padding: 0; accent-color: var(--series-0); }
.metrics-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 24px; }
.metrics-legend li { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 12px; }
.metrics-legend li::before { content: ''; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--series-color, var(--cursor)); }
.metrics-legend span { overflow-wrap: anywhere; }
.metrics-legend strong { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
[data-metrics-table] td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
[data-metrics-table] th button { border: 0; background: transparent; padding: 0; font-size: inherit; font-weight: inherit; }
.account-heading, .account-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.accounts-table table { table-layout: fixed; min-width: 600px; }
.accounts-table td:last-child, .accounts-table th:last-child { width: 40%; white-space: normal; }
.account-editor { display: grid; grid-template-columns: minmax(0,560px) minmax(220px,1fr); gap: 40px; margin-top: 24px; }
.account-form { display: grid; gap: 16px; }
.account-form fieldset { margin: 0; padding: 12px; border: 1px solid var(--border); min-width: 0; }
.account-form legend { font-weight: 600; padding: 0 6px; }
.account-form .check { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.account-form .account-actions { justify-content: start; }
.account-help { border-left: 1px solid var(--border); padding-left: 20px; color: var(--muted); }
@media (max-width: 760px) {
    .account-editor { grid-template-columns: minmax(0,1fr); gap: 24px; }
    .account-help { border-left: 0; border-top: 1px solid var(--border); padding: 16px 0 0; }
    .metrics-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .metrics-filters { grid-column: 1; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; padding: 0; }
    .metrics-filters > h2, .metrics-filters > small, .metrics-actions { grid-column: 1 / -1; }
    .metrics-content { grid-row: 2; }
    .metrics-legend { grid-template-columns: minmax(0,1fr); }
    .metrics-totals { gap: 8px; }
}
@media (max-width: 650px) { header { flex-wrap: wrap; gap: 8px; padding: 10px 12px; } main { padding: 16px 12px; } th, td { padding: 7px 9px; } .toolbar label { max-width: none; } .access-subjects { grid-template-columns: 1fr; } .permission-heading { align-items: stretch; } .bulk-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .bulk-controls button { white-space: normal; } .permission-table { max-height: 58vh; } }