:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #17231d; background: #f3f6f4; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 16px max(24px, calc((100% - 1200px)/2)); background: #123d2d; color: #fff; }
main { width: min(1200px, calc(100% - 32px)); margin: 42px auto; }
h1 { margin-bottom: 6px; } h2 { margin-top: 0; font-size: 1.1rem; }
.subtitle, small, .muted { color: #637269; } small { display: block; margin-top: 4px; }
.card { background: #fff; border: 1px solid #dae2dd; border-radius: 10px; padding: 22px; margin: 22px 0; box-shadow: 0 3px 12px rgba(21,45,34,.05); }
.narrow { max-width: 480px; margin: 80px auto; }
form { margin: 0; } .stack, .grid-form { display: grid; gap: 16px; } .grid-form { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); margin-top: 20px; }
.inline { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; }
label { display: grid; gap: 6px; font-size: .9rem; font-weight: 650; }
input, select { min-width: 220px; padding: 10px 11px; border: 1px solid #aebbb4; border-radius: 6px; font: inherit; background: #fff; }
button, .button { border: 0; border-radius: 6px; background: #19734a; color: #fff; padding: 9px 13px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
button:hover, .button:hover { background: #115c3a; } .secondary { background: #405f51; } .danger { background: #9a3030; }
.link { background: transparent; padding: 0; text-decoration: underline; } .user { display: flex; gap: 12px; align-items: center; font-size: .86rem; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px 10px; text-align: left; border-bottom: 1px solid #e2e8e4; vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #56665d; }
.actions { display: flex; flex-wrap: wrap; gap: 7px; min-width: 300px; }
.status { display: inline-block; border-radius: 999px; padding: 4px 9px; font-size: .8rem; font-weight: 750; text-transform: capitalize; }
.status.good { background: #dcefe4; color: #12623b; } .status.warn { background: #fff1c7; color: #735400; } .status.muted { background: #e9edeb; color: #536159; }
.notice { padding: 12px; background: #e1f0ff; border-radius: 6px; } .error { padding: 12px; background: #fde8e8; color: #8b2020; border-radius: 6px; }
dl { display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px; } dd { margin: 0; font-weight: 650; }
summary { cursor: pointer; font-weight: 750; }
@media (max-width: 700px) { header { align-items: flex-start; } .user { display: grid; } .actions { min-width: 220px; } }