:root { color-scheme:dark; --bg:#030a06; --panel:#07120b; --panel-2:#0a1810; --line:rgba(84,255,134,.17); --green:#39ff70; --bright:#baffca; --text:#ecfff1; --muted:#8ca597; --danger:#ff6673; --shadow:0 24px 70px rgba(0,0,0,.48); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:radial-gradient(circle at 78% 4%,rgba(35,181,79,.11),transparent 30%),linear-gradient(145deg,#020704,#06110a 55%,#020704); color:var(--text); font:15px/1.65 Inter,Segoe UI,Arial,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.12; background-image:linear-gradient(rgba(81,255,137,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(81,255,137,.08) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,#000,transparent 72%); }
button,input { font:inherit; }
a { color:inherit; }
.wiki-shell { position:relative; z-index:1; width:min(100vw - 28px,1580px); min-height:calc(100vh - 28px); margin:14px auto; overflow:clip; border:1px solid var(--line); border-radius:18px; background:rgba(5,12,8,.93); box-shadow:0 30px 90px rgba(0,0,0,.5); }
.topbar { position:sticky; z-index:30; top:0; min-height:112px; display:grid; grid-template-columns:270px minmax(0,1fr); align-items:center; gap:24px; padding:12px 14px; border-bottom:1px solid var(--line); background:rgba(3,10,6,.86); box-shadow:0 15px 36px rgba(0,0,0,.28); backdrop-filter:blur(20px) saturate(145%); }
.brand { position:relative; isolation:isolate; min-height:86px; display:flex; align-items:center; gap:14px; overflow:hidden; padding:10px 13px; border:1px solid rgba(91,255,139,.22); border-radius:17px; background:linear-gradient(135deg,rgba(19,50,31,.72),rgba(4,17,10,.9) 58%,rgba(20,70,36,.36)); box-shadow:inset 0 1px rgba(210,255,223,.09),inset 0 -1px rgba(0,0,0,.5),0 0 28px rgba(39,255,103,.11),0 17px 32px rgba(0,0,0,.3); text-decoration:none; backdrop-filter:blur(18px) saturate(145%); }
.brand::before { content:""; position:absolute; z-index:-1; width:150px; height:150px; left:-56px; top:-55px; border-radius:50%; background:radial-gradient(circle,rgba(80,255,132,.24),rgba(39,194,92,.06) 46%,transparent 72%); filter:blur(3px); animation:wiki-brand-glow 4.8s ease-in-out infinite; }
.brand::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(115deg,rgba(255,255,255,.075),transparent 25%,transparent 72%,rgba(71,255,126,.045)); }
.brand img { width:62px; height:62px; flex:0 0 62px; border:1px solid rgba(184,255,205,.24); border-radius:50%; box-shadow:0 0 0 5px rgba(114,245,154,.045),0 0 24px rgba(57,255,112,.2),0 10px 26px rgba(0,0,0,.48); }
.brand span { position:relative; z-index:1; min-width:0; display:grid; gap:6px; }
.brand b { color:#caffd8; font:800 .88rem/1.05 ui-monospace,monospace; letter-spacing:.045em; text-shadow:0 0 7px rgba(101,255,147,.7),0 0 18px rgba(39,194,92,.3); }
.brand small { color:#91bea0; font-size:.62rem; }
@keyframes wiki-brand-glow { 0%,100% { opacity:.76; transform:scale(.95); } 50% { opacity:1; transform:scale(1.08); } }
.top-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-right:14px; }
.search { width:min(360px,34vw); min-height:44px; display:grid; grid-template-columns:28px 1fr; align-items:center; padding:0 12px; border:1px solid var(--line); border-radius:12px; background:rgba(8,23,14,.8); }
.search span { color:var(--green); font-size:1.15rem; }
.search input { min-width:0; border:0; outline:0; background:transparent; color:var(--text); }
.languages { display:flex; padding:4px; border:1px solid var(--line); border-radius:11px; background:rgba(5,16,10,.9); }
.languages button { min-width:38px; height:34px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:.7rem; font-weight:800; cursor:pointer; }
.languages button.active { background:linear-gradient(180deg,#0c6f2a,#074419); color:#eaffef; box-shadow:inset 0 1px rgba(255,255,255,.14),0 0 17px rgba(57,255,112,.16); }
.portal-link { min-height:44px; display:flex; align-items:center; gap:9px; padding:0 15px; border:1px solid rgba(57,255,112,.35); border-radius:11px; background:linear-gradient(180deg,rgba(11,100,37,.82),rgba(4,52,19,.95)); color:var(--bright); text-decoration:none; font-weight:750; }
.layout { position:relative; z-index:1; width:100%; min-height:calc(100vh - 140px); display:grid; grid-template-columns:270px minmax(0,1fr); }
.side-panel { position:sticky; top:112px; height:calc(100vh - 140px); display:flex; flex-direction:column; padding:26px 14px 18px; border-right:1px solid var(--line); background:linear-gradient(180deg,rgba(10,25,16,.98),rgba(4,10,7,.98)); }
.side-title { display:flex; align-items:center; justify-content:space-between; padding:0 11px 16px; color:#658371; font:700 .62rem/1 ui-monospace,monospace; letter-spacing:.18em; }
#nav-toggle { display:none; border:0; background:transparent; color:var(--green); }
#section-nav { display:grid; gap:4px; overflow:auto; padding-right:4px; }
#section-nav a { min-height:42px; display:grid; grid-template-columns:28px 1fr; align-items:center; padding:0 11px; border:1px solid transparent; border-radius:9px; color:#92a99b; text-decoration:none; font-size:.76rem; font-weight:650; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; }
#section-nav a span { color:#49705a; font:600 .58rem/1 ui-monospace,monospace; }
#section-nav a:hover { border-color:rgba(114,245,154,.2); background:linear-gradient(90deg,rgba(66,210,108,.15),rgba(66,210,108,.025)); color:var(--bright); box-shadow:inset 3px 0 var(--green); transform:translateX(2px); }
.support { margin-top:auto; display:flex; align-items:center; gap:10px; padding:14px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(8,25,14,.72); }
.support .pulse { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 14px var(--green); }
.support div { display:grid; }
.support b { font-size:.7rem; }
.support a { color:#86ad94; font-size:.65rem; }
main { min-width:0; padding:44px clamp(22px,5vw,76px) 20px; }
.hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:34px; overflow:hidden; padding:clamp(25px,4vw,50px); border:1px solid rgba(72,255,127,.22); border-radius:20px; background:linear-gradient(130deg,rgba(14,50,26,.78),rgba(4,16,9,.92) 62%,rgba(19,84,39,.3)); box-shadow:inset 0 1px rgba(230,255,237,.08),0 0 38px rgba(57,255,112,.08),var(--shadow); }
.hero::before { content:""; position:absolute; z-index:-1; width:460px; height:460px; right:-160px; top:-230px; border-radius:50%; background:radial-gradient(circle,rgba(57,255,112,.23),transparent 68%); animation:wiki-glow 5.5s ease-in-out infinite; }
@keyframes wiki-glow { 50% { opacity:.65; transform:scale(1.1); } }
.eyebrow,.doc-section header p { margin:0 0 10px; color:var(--green); font:750 .65rem/1 ui-monospace,monospace; letter-spacing:.18em; }
.hero h1 { max-width:760px; margin:0; font-size:clamp(2rem,4vw,4rem); line-height:1.02; letter-spacing:-.04em; }
.hero p { max-width:700px; margin:20px 0 0; color:#9bb0a3; font-size:clamp(.95rem,1.4vw,1.08rem); }
.hero-status { min-width:210px; display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:13px; background:rgba(3,14,7,.66); backdrop-filter:blur(12px); }
.hero-status i { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 16px var(--green); }
.hero-status span { display:grid; }
.hero-status b { font-size:.7rem; }
.hero-status small { color:var(--muted); }
#articles { display:grid; gap:22px; padding:28px 0; }
.doc-section { scroll-margin-top:98px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:linear-gradient(145deg,rgba(8,23,13,.92),rgba(4,13,8,.94)); box-shadow:0 15px 38px rgba(0,0,0,.22); }
.doc-section > header { display:grid; grid-template-columns:48px 1fr; gap:14px; padding:25px 28px 20px; border-bottom:1px solid rgba(84,255,134,.1); }
.doc-section > header > span { color:rgba(83,255,136,.24); font:800 1.7rem/1 ui-monospace,monospace; }
.doc-section h2 { margin:0; font-size:1.45rem; }
.doc-section header em { display:block; max-width:850px; margin-top:8px; color:var(--muted); font-style:normal; }
.role-strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 28px; border-bottom:1px solid rgba(84,255,134,.08); background:rgba(57,255,112,.025); }
.role-strip b { margin-right:6px; color:#6e8979; font-size:.67rem; text-transform:uppercase; letter-spacing:.08em; }
.role-strip span { padding:3px 8px; border:1px solid rgba(84,255,134,.15); border-radius:999px; color:#b7d5c0; font-size:.65rem; }
.doc-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr); gap:30px; padding:26px 28px 30px; }
.doc-grid h3 { margin:0 0 16px; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }
.doc-grid ol,.doc-grid ul { display:grid; gap:12px; margin:0; padding-left:22px; color:#b7c9be; }
.doc-grid li::marker { color:var(--green); font-weight:800; }
.doc-grid aside { padding:18px 20px; border:1px solid rgba(255,202,102,.17); border-radius:13px; background:rgba(78,54,16,.09); }
.doc-grid aside h3 { color:#f2d18a; }
.empty { margin:28px 0; padding:34px; border:1px solid rgba(255,102,115,.25); border-radius:14px; background:rgba(78,11,19,.15); }
.empty span { display:block; margin-top:7px; color:var(--muted); }
footer { display:flex; justify-content:space-between; gap:20px; padding:22px 2px 8px; color:#607368; font-size:.7rem; }
@media (max-width:900px) { .wiki-shell { width:100%; min-height:100dvh; margin:0; border:0; border-radius:0; } .topbar { position:relative; grid-template-columns:1fr; align-items:stretch; gap:9px; padding:max(8px,env(safe-area-inset-top)) 14px 9px; } .brand { min-height:68px; padding:9px 11px; } .brand img { width:48px; height:48px; flex-basis:48px; } .brand b { font-size:.8rem; } .brand small { font-size:.6rem; } .top-actions { padding:0; } .search { width:100%; } .portal-link { display:none; } .layout { grid-template-columns:1fr; min-height:0; } .side-panel { position:sticky; z-index:25; top:0; height:auto; padding:8px 12px; border-right:0; border-bottom:1px solid var(--line); } .side-title { min-height:42px; padding:0 5px; } #nav-toggle { display:block; } #section-nav,.support { display:none; } .side-panel.open #section-nav { display:grid; max-height:60vh; } main { padding:22px 14px; } .hero { grid-template-columns:1fr; } .hero-status { min-width:0; width:fit-content; } }
@media (max-width:620px) { .top-actions { width:100%; display:grid; grid-template-columns:1fr auto; } .search { width:auto; } .hero { padding:26px 21px; border-radius:15px; } .hero h1 { font-size:2rem; } .doc-section > header { grid-template-columns:35px 1fr; padding:22px 18px 17px; } .role-strip { padding:11px 18px; } .doc-grid { grid-template-columns:1fr; gap:18px; padding:22px 18px 25px; } footer { flex-direction:column; gap:3px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .hero::before,.brand::before { animation:none; } }