:root{
 --bg:#101219;--panel:#171a23;--panel2:#1e222d;--text:#e8edf5;--muted:#9ba6b5;
 --pink:#e967a7;--blue:#74b9ff;--line:rgba(255,255,255,.08);--shadow:0 14px 40px rgba(0,0,0,.28);
 --radius:16px;--sidebar:245px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 80% -10%,rgba(116,185,255,.08),transparent 35%),var(--bg);color:var(--text);font:15px/1.65 Inter,Segoe UI,Arial,sans-serif}
a{color:var(--blue);text-decoration:none}
code{font-family:Consolas,monospace;background:#0d1016;border:1px solid var(--line);padding:.18rem .42rem;border-radius:7px;color:#ffd1e8}
.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:20px 14px;background:rgba(20,22,30,.96);border-right:1px solid var(--line);backdrop-filter:blur(14px);z-index:20}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);padding:7px 10px 20px}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,rgba(233,103,167,.18),rgba(116,185,255,.14));font-size:23px;box-shadow:inset 0 0 0 1px var(--line)}
.brand strong{display:block;font-size:18px;letter-spacing:.2px}
.brand small{display:block;color:var(--muted);font-size:11px;margin-top:-2px}
.nav{display:grid;gap:4px}
.nav a{display:flex;gap:11px;align-items:center;color:#b9c3cf;padding:9px 11px;border-radius:10px;transition:.18s}
.nav a:hover{background:rgba(255,255,255,.045);color:white}
.nav a.active{background:linear-gradient(90deg,rgba(233,103,167,.14),rgba(116,185,255,.08));color:white;box-shadow:inset 3px 0 0 var(--pink)}
.nav a span{width:20px;text-align:center}
.sidebar-foot{position:absolute;left:24px;bottom:18px;color:#677384;font-size:11px}
.main{margin-left:var(--sidebar);min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:10;height:66px;display:flex;align-items:center;gap:14px;padding:0 28px;border-bottom:1px solid var(--line);background:rgba(16,18,25,.82);backdrop-filter:blur(16px)}
.menu-btn{display:none;border:0;background:transparent;color:white;font-size:22px}
.search-wrap{position:relative;display:flex;align-items:center;gap:8px;max-width:560px;flex:1;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:12px;padding:0 12px}
.search-wrap input{width:100%;height:38px;background:none;border:0;outline:0;color:white}
.search-wrap input::placeholder{color:#758191}
.search-results{position:absolute;top:46px;left:0;right:0;background:#1b1e28;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:7px;max-height:360px;overflow:auto}
.search-results a{display:block;padding:9px 10px;border-radius:8px;color:var(--text)}
.search-results a:hover{background:rgba(255,255,255,.055)}
.search-results small{display:block;color:var(--muted)}
.top-link{margin-left:auto;padding:7px 11px;border:1px solid var(--line);border-radius:10px;color:#cbd5df}
.content{width:min(100%,1030px);margin:0 auto;padding:48px 34px 70px;flex:1;outline:0}
article{animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
h1{font-size:clamp(29px,4vw,43px);line-height:1.12;margin:0 0 16px;letter-spacing:-1px}
h1:after{content:"";display:block;width:52px;height:3px;border-radius:9px;margin-top:14px;background:linear-gradient(90deg,var(--pink),var(--blue))}
h2{font-size:19px;margin:28px 0 10px}
.lead{font-size:18px;color:#bcc7d4;max-width:800px}
.grid{display:grid;gap:14px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));margin:28px 0}
.card{display:block;padding:20px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.022));border:1px solid var(--line);border-radius:var(--radius);color:var(--text);box-shadow:0 6px 22px rgba(0,0,0,.14);transition:.18s}
.card:hover{transform:translateY(-2px);border-color:rgba(233,103,167,.28);box-shadow:0 10px 28px rgba(0,0,0,.2)}
.card span{font-size:24px}.card h2{margin:5px 0 3px}.card p{margin:0;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:10px;border:1px solid var(--line);color:white;background:rgba(255,255,255,.04)}
.btn.primary{background:linear-gradient(135deg,rgba(233,103,167,.9),rgba(195,78,137,.9));border-color:rgba(255,255,255,.1)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}
.note,.tip{margin:24px 0;padding:16px 18px;border-radius:12px;border:1px solid rgba(116,185,255,.18);background:rgba(116,185,255,.06)}
.tip{border-color:rgba(233,103,167,.19);background:rgba(233,103,167,.055)}
.command-box{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:25px 0;padding:17px 20px;border-radius:14px;background:linear-gradient(135deg,rgba(233,103,167,.10),rgba(116,185,255,.08));border:1px solid var(--line)}
.command-box span{color:#b8c2cf}.command-box code{font-size:21px;padding:4px 10px}
ul{padding-left:22px}li{margin:6px 0;color:#c9d2dc}
.faq details{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);padding:13px 15px;margin:9px 0}
.faq summary{cursor:pointer;font-weight:600}.faq p{color:#b8c2cf}
footer{text-align:center;padding:20px;color:#657181;font-size:12px;border-top:1px solid var(--line)}
.loading{color:var(--muted)}
.error{padding:20px;border:1px solid rgba(255,100,100,.2);background:rgba(255,100,100,.05);border-radius:12px}
@media(max-width:820px){
 .sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none;box-shadow:var(--shadow)}
 .main{margin-left:0}.menu-btn{display:block}.topbar{padding:0 14px}.top-link{display:none}
 .content{padding:32px 18px 55px}.cards{grid-template-columns:1fr}
}