:root {
  --ink:#17201c; --muted:#647069; --paper:#f5f7f3; --panel:#fff;
  --line:#dfe6df; --brand:#0b6b4d; --brand2:#094c39; --accent:#d9f2e7;
  --danger:#a82b32; --warn:#b26400; --radius:16px;
  --shadow:0 14px 38px rgba(25,52,41,.09);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--ink); background:var(--paper); overflow-x:hidden;
}
* { box-sizing:border-box }
[hidden] { display:none !important }
html, body { margin:0; min-height:100vh; max-width:100%; overflow-x:hidden }
body.menu-open { overflow:hidden }
.skip { position:fixed; left:12px; top:-60px; background:#fff; padding:10px; z-index:40 }
.skip:focus { top:12px }
.topbar { height:68px; background:var(--panel); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:24px; padding:0 28px; position:sticky; top:0; z-index:30 }
.brand { display:flex; align-items:center; gap:10px; color:var(--brand2); font-size:21px; font-weight:750; text-decoration:none }
.brand-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; background:var(--brand); color:#fff }
.data-status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; margin-left:auto; min-width:0 }
.dot { flex:none; width:9px; height:9px; border-radius:50%; background:#df9a23 }
.profile,.menu-button { border:1px solid var(--line); background:#fff; padding:9px 14px; border-radius:10px; color:var(--ink) }
.menu-button { display:none; align-items:center; gap:7px; font-weight:650 }
.shell { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:calc(100vh - 68px); max-width:100% }
.nav { padding:24px 14px; border-right:1px solid var(--line); background:#fbfcfa; display:flex; flex-direction:column; gap:4px }
.nav a { color:#33423b; text-decoration:none; padding:11px 14px; border-radius:10px }
.nav a:hover,.nav a.active { background:var(--accent); color:var(--brand2); font-weight:650 }
.nav-backdrop { display:none; position:fixed; inset:68px 0 0; z-index:19; padding:0; border:0; border-radius:0; background:rgba(23,32,28,.38) }
main { padding:34px; max-width:1480px; min-width:0; width:100%; margin:0 auto; overflow-wrap:anywhere }
.eyebrow { text-transform:uppercase; letter-spacing:.08em; color:var(--brand); font-weight:700; font-size:12px }
h1 { font-size:clamp(28px,4vw,42px); letter-spacing:-.035em; margin:6px 0 8px }
h2 { font-size:20px; margin:0 }
.lede { color:var(--muted); max-width:760px; line-height:1.55; margin:0 0 26px }
.toolbar { display:flex; gap:10px; align-items:center; justify-content:space-between; margin:20px 0; flex-wrap:wrap }
.button,button { font:inherit; cursor:pointer }
.button { display:inline-flex; align-items:center; justify-content:center; border-radius:11px; border:1px solid var(--brand); background:var(--brand); color:#fff; text-decoration:none; padding:10px 15px; font-weight:650 }
.button.secondary { color:var(--brand); background:#fff }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); min-width:0 }
.card h3 { font-size:16px; margin:0 0 14px }
.metric { font-size:30px; font-weight:760; letter-spacing:-.03em }
.metric-set { min-width:0 }
.meta,.state { font-size:13px; color:var(--muted); margin-top:8px }
.state { display:inline-block; padding:5px 9px; border-radius:999px; background:#eef2ee }
.state.red { background:#fee8e8; color:var(--danger) }
.state.yellow { background:#fff2d7; color:var(--warn) }
.list { display:flex; flex-direction:column; gap:10px; min-width:0 }
.row { background:#fff; border:1px solid var(--line); border-radius:12px; padding:15px; display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:14px; align-items:center; min-width:0 }
.row a { color:var(--brand2); font-weight:650; text-decoration:none }
.form { max-width:520px; width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); display:grid; gap:16px }
.field { display:grid; gap:7px; min-width:0 }
.field label { font-size:14px; font-weight:650 }
.field input,.field select,.field textarea { width:100%; min-width:0; border:1px solid #bfc9c1; border-radius:10px; padding:11px 12px; font:inherit; background:#fff }
.field input:focus,.profile:focus,.menu-button:focus,.nav a:focus,.button:focus { outline:3px solid rgba(11,107,77,.24); outline-offset:2px }
.error { background:#feecef; color:#7e1d26; padding:12px; border-radius:10px }
.empty { border:1px dashed #bac7be; border-radius:var(--radius); padding:35px; text-align:center; color:var(--muted) }
.loading { color:var(--muted) }
.toast { position:fixed; right:20px; bottom:20px; background:#17201c; color:#fff; padding:12px 16px; border-radius:10px; opacity:0; transform:translateY(8px); transition:.2s; pointer-events:none; max-width:calc(100vw - 40px) }
.toast.show { opacity:1; transform:none }
.module-shell { padding:40px; background:linear-gradient(135deg,#fff,#edf5ef); border-radius:22px; border:1px solid var(--line) }
code,pre { font-family:"Cascadia Code",monospace; font-size:.9em }
pre { overflow:auto; max-width:100% }
table { width:100%; table-layout:fixed; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden }
th,td { text-align:left; padding:12px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere }
th { width:34%; font-size:13px; color:var(--muted) }

@media(max-width:900px) {
  .topbar { gap:12px }
  .menu-button { display:inline-flex }
  .shell { grid-template-columns:1fr }
  .nav { position:fixed; top:68px; bottom:0; left:0; z-index:20; width:min(320px,86vw); max-width:100%; border-right:1px solid var(--line); border-bottom:0; padding:18px 14px; overflow-y:auto; overflow-x:hidden; transform:translateX(-105%); transition:transform .2s ease; box-shadow:var(--shadow) }
  .nav.open { transform:translateX(0) }
  .nav-backdrop.open { display:block }
  .nav a { white-space:normal }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  main { padding:24px 18px }
  .data-status span:last-child { display:none }
}

@media(max-width:560px) {
  .topbar { padding:0 14px }
  .data-status { margin-left:auto }
  .profile { display:none }
  .menu-button { padding:9px 11px }
  .grid { grid-template-columns:minmax(0,1fr) }
  .row { grid-template-columns:minmax(0,1fr) }
  .form { padding:20px }
  main { padding:20px 14px }
  h1 { font-size:30px }
  .metric { font-size:26px }
}