:root{--bg:#04070d;--panel:#0a111b;--line:#16222f;--tx:#e6edf5;--mut:#8b9bb0;--ac:#35d0ff;--ok:#3ddc97;--bad:#ff6b6b;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;background:var(--bg)}
body{color:var(--tx);font:16px/1.75 "Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif;min-height:100vh;background-image:radial-gradient(60rem 28rem at 50% -8rem,#0d2c3d,transparent 70%);background-repeat:no-repeat}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.4;-webkit-mask-image:linear-gradient(#000,transparent 65%);mask-image:linear-gradient(#000,transparent 65%)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.narrow{width:min(820px,100% - 2.5rem)}
.mut{color:var(--mut)}
/* header */
.top{position:sticky;top:0;z-index:5;background:rgba(4,7,13,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:1.5rem;min-height:64px;flex-wrap:wrap}
.logo{font:700 1.15rem var(--mono);letter-spacing:.12em;display:inline-flex;align-items:center;gap:.7rem}
.logo i{width:12px;height:12px;border:2px solid var(--ac);border-radius:3px;transform:rotate(45deg)}
.bar nav{display:flex;gap:1.4rem;color:var(--mut);margin-inline-end:auto}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--tx)}
.acts{display:flex;gap:.9rem;align-items:center}
.lang{color:var(--mut);font-size:.9rem}
.lang:hover{color:var(--tx)}
/* buttons */
.btn{display:inline-block;background:var(--ac);color:#021018;font:700 1rem/1.4 inherit;font-family:inherit;padding:.75rem 1.5rem;border-radius:8px;border:1px solid var(--ac);cursor:pointer;transition:box-shadow .2s}
.btn:hover{box-shadow:0 0 0 4px rgba(53,208,255,.18)}
.btn.ghost{background:transparent;color:var(--tx);border-color:var(--line)}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn.sm{padding:.4rem 1rem;font-size:.9rem}
/* type */
h1{font-size:clamp(2rem,5vw,3.3rem);line-height:1.3;font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.4;margin-bottom:1.6rem;max-width:40rem}
h3{font-size:1.2rem;line-height:1.5}
.lead{color:var(--mut);font-size:1.12rem;max-width:42rem;margin-top:1.2rem}
.eyebrow,.k{color:var(--ac);font-size:.92rem;margin-bottom:.8rem}
/* hero */
.hero{display:grid;gap:3rem;padding:5rem 0 4.5rem;align-items:center}
@media(min-width:900px){.hero{grid-template-columns:1.3fr 1fr}}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.console{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 0 70px rgba(53,208,255,.09)}
.chead{display:flex;gap:.4rem;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--line);font:.8rem var(--mono);color:var(--mut)}
.chead i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.chead b{font-weight:400;margin-inline-start:auto}
.crow{display:grid;grid-template-columns:auto 7.5rem 1fr;gap:1rem;align-items:center;padding:1.05rem 1rem;border-bottom:1px solid var(--line)}
.crow:last-child{border:0}
.crow .v{font:700 1.2rem var(--mono);color:var(--ac)}
.crow .l{color:var(--mut);font-size:.92rem;line-height:1.5}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:p 2.4s infinite}
@keyframes p{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.dot{animation:none}}
/* sections */
.pagehead{padding:4.5rem 0 3rem}
.sec{padding:4.5rem 0;border-top:1px solid var(--line)}
.rows{border-top:1px solid var(--line);list-style:none}
.row{display:grid;gap:.6rem 2.5rem;padding:1.6rem 0;border-bottom:1px solid var(--line)}
@media(min-width:800px){.row{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
.row p{color:var(--mut)}
.plain .row{display:block}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;list-style:none}
.tags li{border:1px solid var(--line);border-radius:6px;padding:.1rem .7rem;font-size:.88rem;color:var(--mut)}
.steps{list-style:none;counter-reset:s;margin-top:2rem;border-inline-start:1px solid var(--line)}
.steps li{counter-increment:s;position:relative;padding:0 2rem 2rem}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:-.85rem;top:0;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--bg);border:1px solid var(--ac);color:var(--ac);font:700 .8rem/1.55rem var(--mono);text-align:center}
.steps p{color:var(--mut);max-width:38rem}
.cta-band{display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{margin:0 0 .4rem}
/* forms */
.split{display:grid;gap:3rem;padding-bottom:5rem}
@media(min-width:900px){.split{grid-template-columns:2fr 1fr}}
.side{border:1px solid var(--line);border-radius:12px;padding:1.5rem;background:var(--panel);align-self:start}
.side h3{margin-bottom:1rem}.side p{margin-bottom:1rem}
.form{display:grid;gap:1.1rem;margin-top:1.6rem}
.two{display:grid;gap:1.1rem}
@media(min-width:640px){.two{grid-template-columns:1fr 1fr}}
label{display:grid;gap:.4rem;font-size:.92rem;color:var(--mut)}
input,select,textarea{width:100%;background:var(--panel);color:var(--tx);border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem;font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(53,208,255,.15)}
textarea{resize:vertical}
.form .btn{justify-self:start}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.note{padding:.8rem 1rem;border-radius:8px;border:1px solid;margin-top:1.2rem}
.note.ok{color:var(--ok);border-color:var(--ok)}.note.bad{color:var(--bad);border-color:var(--bad)}
/* footer */
.foot{border-top:1px solid var(--line);padding:3rem 0 2rem;margin-top:2rem}
.fgrid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.fgrid nav{display:flex;gap:1.4rem;color:var(--mut)}
.fgrid p{margin-top:.6rem}
.fbar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;color:var(--mut);font-size:.88rem}
.flinks{display:flex;gap:1.2rem;flex-wrap:wrap}
.flinks a:hover,.fgrid nav a:hover{color:var(--tx)}
/* admin */
.adm{padding:2rem 0 4rem}
.admh{font-size:1.6rem;margin-bottom:1.5rem}
.admbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.admbar .admh{margin:0}
.tabs{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:.8rem;margin-bottom:1rem}
.tabs a{color:var(--mut)}.tabs a[aria-current]{color:var(--ac)}.tabs .mut{margin-inline-start:auto;font-size:.88rem}
.inbox{list-style:none}
.inbox a{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;padding:.9rem .6rem;border-bottom:1px solid var(--line)}
.inbox a:hover{background:var(--panel)}
.inbox .unread a{border-inline-start:3px solid var(--ac)}
.inbox .unread b{color:var(--ac)}
.inbox .prev{flex-basis:100%;color:var(--mut);font-size:.92rem;overflow-wrap:anywhere}
.badge{font-size:.78rem;border:1px solid var(--line);border-radius:5px;padding:0 .5rem;color:var(--mut)}
.pager{display:flex;gap:1.5rem;align-items:center;justify-content:center;margin-top:1.5rem}
.meta{display:grid;grid-template-columns:7rem 1fr;gap:.5rem 1rem;margin:1.2rem 0;padding:1.2rem;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.meta dt{color:var(--mut)}.meta a{color:var(--ac)}
.msgbody{white-space:pre-wrap;overflow-wrap:anywhere;padding:1.2rem;border:1px solid var(--line);border-radius:10px;min-height:6rem}
.actions{display:flex;gap:.8rem;margin-top:1.2rem}
.tabs.nob{border:0;padding:0;margin:0}
.subh{font-size:1.15rem;margin:2.2rem 0 .8rem}
.arow{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:.8rem .4rem;border-bottom:1px solid var(--line)}
.inl{display:flex;gap:.6rem;align-items:center}
.inl input{width:14rem}
.admbar{flex-wrap:wrap}