:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0b1020; color: #e7edf9; }
* { box-sizing: border-box; } body { margin: 0; } .app-shell { max-width: 960px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } h1, h2 { margin: 0; } h2 { font-size: 1.1rem; } .eyebrow { color: #8fb7ff; font-weight: 700; letter-spacing: .1em; font-size: .75rem; margin: 0 0 .25rem; }
.panel, .status { background: #141c31; border: 1px solid #293756; border-radius: .75rem; padding: 1.25rem; margin: 1rem 0; } .status { min-height: 2.8rem; } .status.error { border-color: #ff7272; color: #ffd2d2; } .hint, .unavailable { color: #aab7cf; }
form { display: grid; gap: 1rem; max-width: 34rem; } label { display: grid; gap: .4rem; font-weight: 600; } input { border: 1px solid #465879; background: #0b1020; color: inherit; border-radius: .4rem; padding: .65rem; font: inherit; } input[type="checkbox"] { width: 1rem; height: 1rem; padding: 0; } fieldset { border: 1px solid #465879; border-radius: .5rem; display: grid; gap: .7rem; } fieldset label { display: flex; align-items: center; gap: .5rem; }
button { border: 0; border-radius: .4rem; padding: .65rem 1rem; background: #4f83ff; color: white; cursor: pointer; font: inherit; font-weight: 700; width: fit-content; } button:disabled { cursor: not-allowed; opacity: .55; } button.quiet { background: transparent; border: 1px solid #465879; }
.user-list { display: grid; gap: .6rem; margin-top: 1rem; } .user-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid #293756; border-radius: .5rem; padding: .75rem; } .user-row p { margin: .2rem 0 0; color: #aab7cf; font-size: .9rem; } .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem; }
@media (max-width: 520px) { .app-header, .user-row { align-items: flex-start; flex-direction: column; } }