:root{--forest:#07170f;--forest2:#123622;--leaf:#26784a;--gold:#d7b965;--cream:#f6f2e8;--paper:#fffdf8;--ink:#112b1c;--muted:#5f7065;--line:#d8e1d8;--ok:#e3f2e6;--warn:#fff1c9;--bad:#f7dddd}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit}.shell{width:min(1180px,calc(100% - 32px));margin:auto}
.top{background:var(--forest);color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}.topin{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{font-weight:950;text-decoration:none;line-height:1.05}.brand span{display:block;color:var(--gold);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}.nav{display:flex;gap:5px;flex-wrap:wrap}.nav a{padding:9px 10px;border-radius:10px;text-decoration:none;font-weight:800;color:#e8f1eb}.nav a[aria-current=page]{background:rgba(255,255,255,.09)}
.menu{display:none;min-width:44px;min-height:44px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:transparent;color:#fff;font:inherit;font-weight:900}
.hero{padding:clamp(42px,5vw,62px) 0 clamp(32px,4vw,44px);background:radial-gradient(circle at 86% 10%,rgba(215,185,101,.22),transparent 28%),linear-gradient(145deg,var(--forest),var(--forest2));color:#fff}.eyebrow{margin:0 0 8px;color:var(--gold);font-size:.72rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.hero h1{max-width:18ch;margin:.1rem 0 .8rem;font-size:clamp(2.45rem,5.2vw,4.65rem);line-height:.95;letter-spacing:-.045em;text-wrap:balance}.hero p{max-width:68ch;margin:0;color:#d5e4da;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.65}.crumbs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;font-size:.86rem;color:#c9d9ce}.crumbs a{color:#fff}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.tabs a{padding:9px 12px;border:1px solid rgba(255,255,255,.17);border-radius:11px;background:rgba(255,255,255,.06);text-decoration:none;font-weight:850}
.main{padding:clamp(26px,4vw,42px) 0 clamp(44px,6vw,70px)}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.grid2:has(> :nth-child(2):last-child){grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr)}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,2.4vw,24px);box-shadow:0 10px 26px rgba(17,43,28,.055)}.panel h2,.panel h3{margin-top:0;line-height:1.15}.panel h2{font-size:clamp(1.35rem,2vw,1.7rem);margin-bottom:16px}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-weight:850}.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 12px;border:1px solid #bfcfc3;border-radius:12px;background:#fff;color:var(--ink);font:inherit}.field textarea{min-height:110px;resize:vertical}.result{margin-top:16px;padding:16px 17px;border:1px solid #cbdacc;border-radius:14px;background:#edf5ef;overflow-wrap:anywhere}.result strong{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.2}.muted{color:var(--muted);font-size:.92rem}.callout{padding:16px;border-left:4px solid var(--gold);background:#fbf3d9;border-radius:0 13px 13px 0}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.metric{padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}.metric b{display:block;font-size:1.25rem}.metric span{font-size:.8rem;color:var(--muted)}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.toolbar>*{flex:0 1 auto}.btn{min-height:44px;padding:9px 13px;border:1px solid #bfcfc3;border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-weight:900;cursor:pointer}.btn.primary{background:var(--forest2);border-color:var(--forest2);color:#fff}.list{display:grid;gap:10px;margin-top:14px}.item{padding:14px;border:1px solid var(--line);border-radius:13px;background:#fff}.item strong{display:block}.item small{color:var(--muted)}.status-ok{background:var(--ok)}.status-warn{background:var(--warn)}.status-bad{background:var(--bad)}
table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.table-wrap{overflow:auto;max-width:100%}.table-wrap table{min-width:640px}.table-wrap th{position:sticky;top:0;z-index:2;background:var(--paper)}.table-wrap:focus-visible{outline:3px solid #7bd86f;outline-offset:3px}.section{margin-top:18px}.section h2{margin-bottom:8px}.section>p{color:var(--muted)}footer{padding:26px 0 42px;color:var(--muted)}:focus-visible{outline:3px solid #7bd86f;outline-offset:3px}
@media(max-width:840px){.grid2,.grid3,.grid2:has(> :nth-child(2):last-child){grid-template-columns:1fr}.nav{display:none}.nav.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:absolute;top:68px;left:16px;right:16px;padding:10px;background:#0b2417;border:1px solid rgba(255,255,255,.15);border-radius:14px;z-index:50}.nav.open a{text-align:center;min-height:44px}.menu{display:block}.topin{position:relative}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tabs{flex-wrap:nowrap;margin-inline:-16px;padding:0 16px 6px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-inline:contain}.tabs a{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}}
@media(max-width:560px){.shell{width:min(100% - 24px,1180px)}.fields,.metric-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.panel{padding:17px;border-radius:16px}.hero{padding:38px 0 30px}.hero h1{font-size:clamp(2.1rem,10vw,3rem);max-width:none}.crumbs{font-size:.78rem;margin-bottom:10px}.tabs{margin-top:17px}.toolbar{display:grid;grid-template-columns:1fr;width:100%}.toolbar>*{width:100%;justify-content:center;text-align:center}.btn{min-height:48px}.field input,.field select,.field textarea{min-height:50px}.result{padding:14px 15px}.section{margin-top:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}@media print{.top,.tabs,.toolbar,footer{display:none!important}.hero{background:#fff;color:#111;padding:20px 0}.hero p,.crumbs{color:#333}.panel{box-shadow:none}.shell{width:100%}}
.context-bar{margin:0 0 22px;padding:16px 18px;border:1px solid #c7d7ca;border-radius:18px;background:linear-gradient(135deg,#eef6ef,#fffdf8);box-shadow:0 8px 22px rgba(17,43,28,.05)}.context-bar-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.context-bar-head strong{display:block;margin-top:3px}.context-kicker{display:block;color:var(--leaf);font-size:.7rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.context-form{margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}.context-form[hidden]{display:none}.context-form label{display:grid;gap:6px;font-weight:850}.context-form input{width:100%;min-height:46px;padding:10px 12px;border:1px solid #bfcfc3;border-radius:12px;background:#fff;color:var(--ink);font:inherit}@media(max-width:560px){.context-bar-head{align-items:flex-start;flex-direction:column}.context-bar-head .btn{width:100%}}
.history-chart{display:flex;align-items:flex-end;gap:6px;min-height:150px;padding:14px 10px 8px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow-x:auto}.history-bar-wrap{display:grid;grid-template-rows:1fr auto;align-items:end;gap:5px;min-width:28px;height:130px}.history-bar{width:100%;min-height:3px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--leaf),var(--forest2))}.history-bar.warn{background:linear-gradient(180deg,var(--gold),#8e6c16)}.history-bar-label{font-size:.68rem;color:var(--muted);text-align:center;white-space:nowrap}.history-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:.8rem}.history-legend span::before{content:'';display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--leaf);margin-right:5px}.history-legend .warn::before{background:var(--gold)}
.live-status-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0}
.live-status-card{min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.live-status-card span{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.live-status-card strong{display:block;margin-top:3px;overflow-wrap:anywhere}
.live-status-card strong[data-state="live-data"],.live-status-card strong[data-state="fresh"]{color:var(--leaf)}
.live-status-card strong[data-state="stale"],.live-status-card strong[data-state="offline"],.live-status-card strong[data-state="invalid-packet"]{color:#8a5216}
@media(max-width:840px){.live-status-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.live-status-board{grid-template-columns:1fr}}