:root { --bg: #f7f7f5; --fg: #1d1d1b; --muted: #66665f; --line: #d9d9d2; --accent: #1f5f8b; --warn: #8b3a1f; --ok: #2f6b2f; }
@media (prefers-color-scheme: dark) { :root { --bg: #171716; --fg: #ececea; --muted: #a3a39b; --line: #3a3a36; --accent: #7db4dc; --warn: #e39a7b; --ok: #8fcf8f; } }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
header { display: flex; gap: 1rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
header h1 { font-size: 1.1rem; margin: 0; flex: 1; }
main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
form { display: grid; gap: .6rem; max-width: 32rem; }
label { display: grid; gap: .2rem; }
input, button { font: inherit; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: inherit; }
button { cursor: pointer; background: var(--accent); color: var(--bg); border-color: var(--accent); }
button.secondary { background: transparent; color: var(--accent); }
button.danger { background: transparent; color: var(--warn); border-color: var(--warn); }
fieldset { border: 1px solid var(--line); border-radius: 4px; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
fieldset label { display: flex; gap: .35rem; align-items: center; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
td .mods { display: flex; flex-wrap: wrap; gap: .2rem .7rem; }
td .mods label { display: flex; gap: .25rem; align-items: center; font-size: .9rem; }
.status-ACTIVE { color: var(--ok); } .status-SUSPENDED, .status-TERMINATED { color: var(--warn); }
.muted { color: var(--muted); font-size: .9rem; }
.notice { border: 1px solid var(--accent); padding: .75rem; border-radius: 4px; margin: .75rem 0; }
.actions { display: grid; gap: .3rem; }
code { font-size: .95rem; }