:root { color-scheme: light; font-family: system-ui, sans-serif; color: #172b47; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 72rem; padding: 2rem clamp(1rem, 4vw, 3rem); margin: auto; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #cad6e4; }
h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); margin: 2rem 0 .5rem; }
p { color: #415570; margin: 0 0 1.5rem; }
.login { max-width: 26rem; margin: auto; }
label { display: block; margin: 1rem 0 .4rem; font-weight: 600; }
input:not([type=hidden]) { width: 100%; border: 1px solid #8c9eb6; padding: .7rem; border-radius: .4rem; font: inherit; }
.login button { margin-top: 1.25rem; }
button { font: inherit; font-weight: 600; padding: .55rem .85rem; color: white; background: #164e88; border: 1px solid #164e88; border-radius: .4rem; cursor: pointer; }
button:hover { background: #103864; }
.secondary { background: white; color: #164e88; }
.secondary:hover { background: #e4eef9; }
:focus-visible { outline: 3px solid #1669ad; outline-offset: 3px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { padding: .85rem; border-bottom: 1px solid #d9e2ed; text-align: left; overflow-wrap: anywhere; }
th { background: #e6eef7; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.state { font-weight: 600; }
.approved { color: #146346; }
.revoked, .denied, .error { color: #932a31; }
.pending { color: #745212; }
.empty { padding: 1.25rem; border: 1px dashed #8c9eb6; }
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 1.5rem; margin-bottom: 1.25rem; }
.toolbar label { margin-top: 0; }
.create-group { flex-basis: 100%; }
.create-group form { margin-top: .75rem; }
.create-group input:not([type=hidden]) { width: min(17rem, 100%); }
select, textarea { border: 1px solid #8c9eb6; border-radius: .4rem; background: white; color: inherit; padding: .55rem; font: inherit; max-width: 100%; }
textarea { display: block; width: 100%; margin-bottom: .65rem; resize: vertical; }
summary { cursor: pointer; color: #164e88; }
.edit-device { margin-top: .65rem; }
.edit-device form { min-width: 13rem; }
.device-comment { margin: .45rem 0 0; font-size: .9rem; white-space: pre-wrap; }
.notice { padding: .75rem 1rem; margin-top: 1rem; background: #e6eef7; border-radius: .4rem; }
.action-link { display: inline-block; text-decoration: none; border: 1px solid #164e88; border-radius: .4rem; padding: .55rem .85rem; font-weight: 600; }
.danger { background: #932a31; color: white; border-color: #932a31; }
.danger:hover { background: #701f26; }
.confirmation { max-width: 38rem; }