:root{--red:#b3231b;--gold:#f2a007;--cream:#fff8ec;--ink:#1d1710;--paper:#fffdf8}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--paper)}
.preview-bar{background:var(--ink);color:#ffd97a;text-align:center;font-size:.82rem;padding:8px 12px}
.layout{display:flex;min-height:100vh}
.rail{width:230px;flex:0 0 230px;background:var(--cream);border-right:3px solid var(--gold);padding:18px 14px;display:flex;flex-direction:column;gap:18px}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.03em}
.brand img{width:46px;height:46px;border-radius:10px;object-fit:cover}
.brand small{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:600}
.tabs{display:flex;flex-direction:column;gap:6px}
.tabs button{all:unset;cursor:pointer;padding:11px 13px;border-radius:10px;font-weight:600;font-size:1rem}
.tabs button:hover{background:#ffeecd}
.tabs button.active{background:var(--red);color:#fff}
.rail-note{margin-top:auto;font-size:.82rem;color:#6d5c3d}
main{flex:1;padding:26px;max-width:980px}
h1{margin:0 0 18px;font-size:1.7rem}
.panel{display:none}
.panel.active{display:block}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{background:#fff;border:1px solid #f0dfba;border-top:4px solid var(--gold);border-radius:12px;padding:16px 18px}
.card h3{margin:0 0 8px}
.card .big{font-size:1.25rem;font-weight:800;margin:4px 0}
.card.warn{border-top-color:#e07b00}
.card.ok{border-top-color:#2e9e52}
.note{margin-top:18px;color:#6d5c3d;font-size:.95rem}
@media (max-width:760px){
  .layout{flex-direction:column}
  .rail{width:100%;flex:none;border-right:none;border-bottom:none;padding:12px 12px 0}
  .rail-note{display:none}
  .tabs{flex-direction:row;overflow-x:auto;padding-bottom:10px;gap:8px}
  .tabs button{white-space:nowrap;border:1px solid #f0dfba;background:#fff}
  .tabs button.active{background:var(--red)}
  main{padding:18px 16px 30px}
  .grid{grid-template-columns:1fr}
}
