:root { color-scheme: light; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #16212b; background: #f2f5f7; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
header { background: #123c4a; color: #fff; padding: 1rem max(1rem, calc((100vw - 72rem) / 2)); display: flex; justify-content: space-between; align-items: baseline; }
header a { color: #fff; text-decoration: none; font-weight: 700; }
header .brand { font-size: 1.2rem; font-weight: 750; }
header span { color: #c7dce3; font-size: .9rem; }
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; margin-inline: auto; }
nav a { color: #c7dce3; }
nav a:hover { color: #fff; }
main { width: min(72rem, calc(100% - 2rem)); margin: 2.5rem auto; flex: 1; }
h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; }
h2 { margin-top: 0; }
.lead { color: #52626c; font-size: 1.2rem; margin-bottom: 2rem; }
.card, .metric { background: #fff; border: 1px solid #dce5e8; border-radius: .8rem; box-shadow: 0 8px 28px rgba(31, 55, 65, .06); padding: 1.4rem; }
dl { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: .8rem 1rem; }
dt { color: #5b6b74; }
dd { margin: 0; font-weight: 650; }
.status { display: inline-flex; align-items: center; gap: .4rem; }
.status::before { content: ""; width: .65rem; height: .65rem; border-radius: 50%; background: currentColor; }
.ok { color: #16744d; }
.warning { color: #a65d00; }
.hint, .alert, .notice { border-left: .25rem solid #e39a29; background: #fff6e7; padding: .8rem 1rem; }
.alert { color: #7b310e; margin-bottom: 1rem; }
.notice { border-color: #16815a; background: #ecfbf4; color: #105f43; margin-bottom: 1rem; }
.button, button { display: inline-block; border: 0; border-radius: .45rem; padding: .75rem 1rem; background: #14728c; color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
button.secondary { background: #e5ecef; color: #23343c; }
.form { max-width: 34rem; display: grid; gap: 1rem; }
label { display: grid; gap: .4rem; font-weight: 700; }
input { min-height: 2.8rem; border: 1px solid #aab9c0; border-radius: .4rem; padding: .6rem .7rem; font: inherit; }
select { min-height: 2.8rem; border: 1px solid #aab9c0; border-radius: .4rem; padding: .6rem .7rem; font: inherit; background: #fff; }
input:focus { outline: .18rem solid rgba(20, 114, 140, .25); border-color: #14728c; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.toolbar h1, .toolbar p { margin-bottom: .25rem; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric { display: grid; gap: .25rem; }
.metric strong { font-size: 2rem; color: #123c4a; }
.metric span { color: #5b6b74; }
.actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.form.wide { max-width: 54rem; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid #dce5e8; border-radius: .8rem; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid #e5ecef; vertical-align: top; }
th { color: #52626c; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
td small { display: block; color: #70818a; margin-top: .2rem; }
.empty { color: #70818a; text-align: center; padding: 2rem; }
.muted { color: #70818a; }
.badge { display: inline-block; padding: .15rem .45rem; border-radius: 1rem; background: #dff5eb; color: #146444; font-size: .75rem; font-weight: 750; }
.badge.urgent { background: #ffe4df; color: #9a281e; }
.stack { display: grid; gap: 1rem; margin-top: 2rem; }
.check { display: flex; grid-template-columns: none; flex-direction: row; align-items: center; gap: .65rem; }
.check.compact { font-size: .9rem; font-weight: 600; }
.check input { min-height: auto; width: 1.1rem; height: 1.1rem; }
fieldset { border: 1px solid #dce5e8; border-radius: .5rem; padding: .8rem 1rem; }
legend { padding: 0 .35rem; font-weight: 700; color: #52626c; }
.danger-zone { max-width: 54rem; margin-top: 1.5rem; padding: 1.2rem; border: 1px solid #e3b9b1; background: #fff7f5; border-radius: .8rem; }
button.danger { background: #a52e24; }
button.link { padding: 0; background: transparent; color: #14728c; }
button.danger-text { color: #a52e24; }
footer { color: #70818a; text-align: center; padding: 1rem; font-size: .85rem; }
@media (max-width: 44rem) { .metrics, .form-grid { grid-template-columns: 1fr; } .toolbar { align-items: flex-start; flex-direction: column; } header span { display: none; } }