:root{
  --bg:#0b1013;--panel:#11191d;--panel-2:#172227;--line:#26353b;
  --text:#edf5f2;--muted:#9fb0ad;--accent:#d9b45b;--green:#70b28c;
  --red:#d66b61;--blue:#67a8cc;--radius:18px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
radial-gradient(circle at 10% 0%,rgba(112,178,140,.1),transparent 28rem),
radial-gradient(circle at 95% 10%,rgba(217,180,91,.08),transparent 30rem),
var(--bg);color:var(--text);font:16px/1.65 Inter,Segoe UI,Arial,sans-serif}
button,input{font:inherit}
.app{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;border-right:1px solid var(--line);
background:rgba(10,15,18,.94);backdrop-filter:blur(15px);overflow:auto;z-index:30}
.brand{display:flex;gap:12px;align-items:center;padding:5px 8px 22px}
.brand__logo{width:48px;height:48px;border:1px solid #806d3b;border-radius:14px;display:grid;place-items:center;
background:linear-gradient(145deg,#26352e,#121a17);font-size:24px}
.brand strong,.brand small{display:block}.brand small{font-size:12px;color:var(--muted)}
.nav{display:grid;gap:5px}
.nav button{border:0;text-align:left;border-radius:12px;padding:11px 12px;color:var(--muted);
background:transparent;cursor:pointer}
.nav button:hover,.nav button.active{color:var(--text);background:var(--panel-2)}
.nav button.active{box-shadow:inset 3px 0 var(--accent)}
.sidebar__note{margin-top:22px;padding:13px;border:1px solid var(--line);border-radius:14px;color:var(--muted);font-size:12px}
.main{min-width:0}
.topbar{position:sticky;top:0;z-index:20;display:flex;gap:12px;padding:14px clamp(18px,4vw,54px);
background:rgba(11,16,19,.84);backdrop-filter:blur(17px);border-bottom:1px solid rgba(38,53,59,.7)}
.menu-btn{display:none}
.search{flex:1;position:relative}.search span{position:absolute;left:14px;top:2px;font-size:28px;color:var(--muted)}
.search input{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 15px 12px 42px;
color:var(--text);background:var(--panel);outline:none}.search input:focus{border-color:#527b67}
.content{max-width:1200px;margin:auto;padding:34px clamp(18px,4vw,54px) 70px}
.hero{position:relative;overflow:hidden;padding:clamp(28px,5vw,60px);border:1px solid var(--line);border-radius:28px;
background:linear-gradient(135deg,rgba(30,49,41,.96),rgba(15,22,25,.94) 55%,rgba(40,33,20,.8))}
.hero:after{content:"☣";position:absolute;right:4%;top:-48px;font-size:230px;color:rgba(217,180,91,.05)}
.hero__eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:800}
h1{max-width:800px;margin:.3em 0;font-size:clamp(35px,6vw,68px);line-height:1.03;letter-spacing:-.045em}
.hero p{max-width:760px;color:#c3d0cd;font-size:clamp(16px,2vw,20px)}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}
.btn{border:1px solid #756333;border-radius:12px;padding:11px 15px;background:var(--accent);color:#17140c;font-weight:800;cursor:pointer}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.page{display:none}.page.active{display:block}
.section-head{margin:38px 0 18px}.section-head h2{font-size:clamp(28px,4vw,44px);margin:0;letter-spacing:-.03em}
.section-head p{max-width:820px;color:var(--muted);margin:7px 0 0}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 6;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.card.wide{grid-column:1/-1}.card.third{grid-column:span 4}
.card h3{margin:0 0 8px;font-size:21px}.card p,.card li{color:#bdcac7}
.card ul,.card ol{padding-left:21px}
.tag{display:inline-flex;margin:0 5px 5px 0;padding:4px 9px;border-radius:999px;background:#1e2d29;color:#a9d5bc;font-size:12px}
.tag.warn{background:#33271a;color:#e3c580}.tag.red{background:#321e1d;color:#efa59e}
.callout{margin:16px 0;padding:15px 17px;border-left:4px solid var(--accent);border-radius:0 12px 12px 0;background:#1b211e}
.callout.info{border-color:var(--blue);background:#17242b}.callout.danger{border-color:var(--red);background:#291c1c}
.steps{counter-reset:step;display:grid;gap:12px}
.step{position:relative;padding:17px 18px 17px 58px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}
.step:before{counter-increment:step;content:counter(step);position:absolute;left:17px;top:16px;width:28px;height:28px;
display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#17140c;font-weight:900}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px}
table{width:100%;border-collapse:collapse;min-width:680px;background:var(--panel)}
th,td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#172227;font-size:13px}td{color:#bdcac7}
.checklist{display:grid;gap:8px}.check{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);
border-radius:12px;background:#121b1f}.check input{margin-top:5px;accent-color:var(--accent)}
.check.done span{text-decoration:line-through;color:#71817e}
details{border:1px solid var(--line);border-radius:13px;background:var(--panel);margin:8px 0;padding:13px 15px}
summary{cursor:pointer;font-weight:750}details p{color:var(--muted)}
.notice{margin:20px 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--muted)}
.search-hit{outline:2px solid var(--accent);outline-offset:3px}
footer{margin-top:45px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
@media(max-width:900px){
.app{grid-template-columns:1fr}.sidebar{position:fixed;left:-300px;width:280px;transition:.22s;box-shadow:20px 0 50px #000}
.sidebar.open{left:0}.menu-btn{display:block;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:11px;padding:9px 12px}
.card,.card.third{grid-column:1/-1}}
@media(max-width:520px){.hero{border-radius:20px}.topbar{padding:10px 14px}}