:root { font: 14px/1.45 system-ui, sans-serif; color: #202124; background: #fff; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 20px; border-bottom: 1px solid #d9dde2; background: #f6f7f8; }
nav { display: flex; flex-wrap: wrap; gap: 4px; }
header nav { flex: 1; }
button, input, select, nav a, .actions a { font: inherit; border: 1px solid #b9bec6; border-radius: 3px; padding: 5px 9px; background: #fff; color: inherit; }
button { cursor: pointer; white-space: nowrap; }
a { color: #315e9b; text-underline-offset: .2em; }
nav a, .actions a { text-decoration: none; display: inline-block; }
button:hover, nav a:hover, .actions a:hover { background: #edf0f3; }
button:disabled { cursor: wait; color: #777; background: #f6f7f8; }
[aria-current=page] { background: #e5e8ec; border-color: #aeb5be; font-weight: 600; }
input, select { min-width: 0; }
input[type=checkbox] { accent-color: #303944; width: 16px; height: 16px; }
:focus-visible { outline: 2px solid #315e9b; 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: #606771; }
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 #d9dde2; margin-top: 12px; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 8px 12px; border-bottom: 1px solid #e6e8eb; vertical-align: middle; }
th { background: #f6f7f8; font-size: 12px; font-weight: 600; color: #535b65; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfc; }
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; }
#grant-rows td:last-child { width: auto; }
.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 #b9bec6; border-radius: 3px; background: white; }
.alias-box:focus-within { border-color: #315e9b; }
.alias-box > button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px; border: 0; background: #367da6; color: white; font-size: 12px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.alias-box > button:hover { background: #28658a; }
.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: #e6f2f5; color: #145c70; white-space: normal; overflow-wrap: anywhere; }
.alias-add:hover { background: #d1e8ef; }
.bottom { justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12px; }
details { border-top: 1px solid #d9dde2; 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 #d5c69a; background: #fff9e8; }
#notice:empty, [role=alert]:empty, #workspace:has(#namespace-rows tr) #namespace-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 #d5c69a; border-radius: 3px; background: #fff9e8; }
#unsaved > div:first-child { flex: 1; min-width: 200px; }
#unsaved small { display: block; margin-top: 2px; }
#save-access, #leave-save, #login button { background: #303944; color: white; border-color: #303944; }
#leave-access { width: min(480px, calc(100% - 24px)); padding: 20px; border: 1px solid #b9bec6; border-radius: 4px; }
#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 #bbc9bd; background: #f3f8f3; 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: #f6f7f8; border: 1px solid #d9dde2; }
[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 #d9dde2; }
.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 #d9dde2; }
.metrics-totals dt { color: #606771; 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: #606771; }
.metrics-grid { stroke: #e6e8eb; stroke-width: 1; }
.metrics-cursor { stroke: #68717c; stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
[data-bucket-label] { font-size: 12px; color: #606771; 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: #2878c7; }
.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, #68717c); }
.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; }
@media (max-width: 760px) {
    .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; } }