/* Parvoz — huquqiy hujjatlar va 404 sahifasi uchun umumiy uslub.
   Palitra va shriftlar bosh sahifa (index.html) bilan bir xil. */
:root{
  --ink:#060B16; --ink2:#0C1526; --line:#9DB8E8; --blue:#2F7BF5; --blue2:#8FB8FF;
  --text:#F2F6FF; --body:#CDD6E6; --mute:#8FA3C4; --red:#FF4D5E; --border:rgba(157,184,232,.16);
  --disp:'Unbounded','Arial Black',system-ui,sans-serif;
  --sans:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--ink); -webkit-text-size-adjust:100%; scroll-padding-top:84px; }
body{ margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--ink); color:var(--text);
  font-family:var(--sans); font-size:16.5px; line-height:1.7; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body::before{ content:""; position:fixed; z-index:0; left:50%; top:-260px; width:760px; height:620px; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(closest-side,rgba(47,123,245,.18),rgba(47,123,245,0)); }
a{ color:var(--blue2); text-decoration:underline; text-decoration-color:rgba(143,184,255,.35); text-underline-offset:3px; }
a:hover{ text-decoration-color:currentColor; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }

/* top bar */
.top{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) max(20px,calc((100% - 840px)/2)) 14px;
  background:rgba(6,11,22,.82); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--border); }
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-family:var(--disp); font-weight:500; font-size:17px; letter-spacing:.01em; }
.brand img{ width:28px; height:28px; border-radius:8px; display:block; }
.home{ color:var(--mute); text-decoration:none; font-size:14px; border:1px solid rgba(157,184,232,.3); border-radius:999px; padding:7px 14px; white-space:nowrap; }
.home:hover{ color:var(--text); border-color:var(--blue); }

/* layout */
.wrap{ position:relative; z-index:1; width:100%; max-width:840px; margin:0 auto; padding:0 20px; flex:1; }
.docs{ display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; }
.docs a{ color:var(--mute); text-decoration:none; font-size:13.5px; padding:7px 13px; border-radius:999px; border:1px solid var(--border); background:rgba(12,21,38,.6); }
.docs a:hover{ color:var(--text); border-color:rgba(157,184,232,.4); }
.docs a[aria-current="page"]{ color:#fff; background:var(--blue); border-color:var(--blue); }

/* document */
.doc{ padding:36px 0 72px; }
.doc h1{ font-family:var(--disp); font-weight:500; font-size:clamp(28px,5vw,40px); line-height:1.12; letter-spacing:-.022em; margin:0 0 10px; text-wrap:balance; }
.updated{ color:var(--mute); font-size:14px; margin:0 0 28px; }
.doc h2{ font-family:var(--disp); font-weight:500; font-size:clamp(17px,2.4vw,20px); line-height:1.3; letter-spacing:-.01em; color:#fff; margin:44px 0 12px; padding-top:20px; border-top:1px solid var(--border); }
.doc p{ margin:0 0 14px; color:var(--body); }
.doc strong{ color:#fff; font-weight:600; }
.doc ul,.doc ol{ margin:0 0 18px; padding-left:22px; color:var(--body); }
.doc li{ margin-bottom:7px; }
.doc li::marker{ color:var(--blue); }
.doc li ul{ margin:8px 0 6px; }
.doc code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em; color:var(--blue2); background:rgba(47,123,245,.1); border:1px solid rgba(47,123,245,.22); border-radius:6px; padding:1px 6px; overflow-wrap:anywhere; }
.muted,.note{ color:var(--mute) !important; }
.note{ font-size:14.5px; }
.pill{ display:block; color:var(--text) !important; background:rgba(47,123,245,.1); border:1px solid rgba(47,123,245,.32); border-left:3px solid var(--blue); border-radius:12px; padding:12px 16px; font-size:14.5px; font-weight:500; }
.card{ background:linear-gradient(180deg,rgba(12,21,38,.95),rgba(8,14,27,.95)); border:1px solid var(--border); border-radius:16px; padding:18px 20px; margin:22px 0; }
.card p:last-child{ margin-bottom:0; }
.danger-card{ border-color:rgba(255,77,94,.4); background:rgba(255,77,94,.07); }
.fill{ color:#FFC24B; background:rgba(255,194,75,.1); border:1px dashed rgba(255,194,75,.45); border-radius:6px; padding:1px 7px; font-size:13px; }

/* table (narrow screens scroll inside, page does not) */
.table{ overflow-x:auto; margin:16px 0 22px; border:1px solid var(--border); border-radius:14px; }
.doc table{ width:100%; border-collapse:collapse; min-width:420px; }
.doc th,.doc td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--border); font-size:14.5px; color:var(--body); }
.doc tr:last-child td{ border-bottom:0; }
.doc th{ color:#fff; font-weight:600; background:rgba(12,21,38,.8); }

/* numbered steps */
.doc ol.steps{ list-style:none; counter-reset:step; padding:0; }
.doc ol.steps li{ position:relative; counter-increment:step; padding:2px 0 14px 44px; margin:0; }
.doc ol.steps li::before{ content:counter(step); position:absolute; left:0; top:1px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-size:13px; font-weight:500; color:#fff; background:var(--blue); }

/* table of contents */
.toc{ margin:0 0 8px; padding:16px 20px; border:1px solid var(--border); border-radius:16px; background:rgba(12,21,38,.55); }
.toc b{ display:block; font-family:var(--disp); font-weight:500; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--line); margin-bottom:8px; }
.toc ul{ list-style:none; margin:0; padding:0; columns:2 260px; column-gap:28px; font-size:14.5px; }
.toc li{ margin:0 0 5px; break-inside:avoid; }
.toc a{ color:var(--body); text-decoration:none; } .toc a:hover{ color:#fff; text-decoration:underline; }

/* footer */
.foot{ position:relative; z-index:1; border-top:1px solid var(--border); padding:28px max(20px,calc((100% - 840px)/2)) calc(env(safe-area-inset-bottom,0px) + 32px); color:var(--mute); font-size:14px; }
.foot nav{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:14px; }
.foot nav a{ color:var(--mute); text-decoration:none; } .foot nav a:hover{ color:var(--text); }
.foot p{ margin:0 0 4px; }

/* 404 */
.nf{ text-align:center; padding:12vh 0 80px; }
.nf .code{ font-family:var(--disp); font-weight:500; font-size:clamp(64px,16vw,120px); line-height:1; letter-spacing:.04em; margin:0;
  background:linear-gradient(180deg,#fff,#6fa8ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nf h1{ font-family:var(--disp); font-weight:500; font-size:clamp(22px,4vw,30px); margin:18px 0 10px; }
.nf p{ color:var(--mute); margin:0 auto 26px; max-width:40ch; }
.btn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; border-radius:12px; padding:12px 18px; font-weight:500; font-size:15px; background:var(--blue); color:#fff; }
.btn:hover{ filter:brightness(1.12); }

@media (max-width:560px){
  body{ font-size:16px; }
  .doc{ padding-top:28px; }
  .doc h2{ margin-top:36px; }
}
@media print{
  :root{ color-scheme:light; }
  html,body{ background:#fff; color:#000; }
  body::before,.top .home,.docs,.toc{ display:none; }
  .top{ position:static; background:none; border:0; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .brand,.doc h1,.doc h2,.doc strong,.doc th{ color:#000; }
  .doc p,.doc li,.doc td,.muted,.note,.foot,.pill{ color:#222 !important; }
  .card,.pill,.table,.doc th{ background:none; border-color:#bbb; }
  a{ color:#000; }
}