/* ── Asos ───────────────────────────────────────────── */
:root{
  --bg:#0b0d10;
  --bg-2:#11141a;
  --card:#151920;
  --card-2:#1a1f28;
  --line:#242b36;
  --line-2:#2f3846;
  --txt:#e8ecf2;
  --txt-2:#a3adbb;
  --txt-3:#6d7887;
  --t:#f0a02a;        /* Terrorist — sariq/to‘q sariq */
  --t-dim:#f0a02a22;
  --ct:#4a9eff;       /* Counter-Terrorist — moviy */
  --ct-dim:#4a9eff22;
  --pro:#3ddc84;      /* PRO — yashil */
  --pro-dim:#3ddc8422;
  --ok:#3ddc84;
  --warn:#ff6b5a;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono","Courier New",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:14px;
  --accent:var(--t);
  --accent-dim:var(--t-dim);
}
body[data-mode="guest"]{ --accent:var(--ct); --accent-dim:var(--ct-dim); }
body[data-mode="pro"]{ --accent:var(--pro); --accent-dim:var(--pro-dim); }

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:130px}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 500px at 15% -10%, #f0a02a14, transparent 60%),
    radial-gradient(900px 500px at 85% 0%, #4a9eff12, transparent 60%);
}
.wrap{width:min(1120px,100% - 40px); margin-inline:auto; position:relative; z-index:1}
h1,h2,h3{margin:0; line-height:1.2; font-weight:700; letter-spacing:-.02em}
p{margin:0}
kbd{
  font-family:var(--mono); font-size:.85em; background:var(--card-2);
  border:1px solid var(--line-2); border-bottom-width:2px;
  border-radius:6px; padding:1px 7px; color:var(--txt);
}

/* ── Yuqori panel ───────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:50;
  background:#0b0d10e6; backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; gap:20px; height:66px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--txt); flex-shrink:0}
.brand-mark{
  display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:linear-gradient(140deg,var(--t),#c47a12);
  color:#1a1204; font-weight:800; font-size:14px; letter-spacing:-.03em;
}
.brand-txt{font-size:17px; color:var(--txt-2); letter-spacing:-.01em}
.brand-txt b{color:var(--txt)}

.search-box{position:relative; flex:1; max-width:440px; margin-left:auto}
.search-box input{
  width:100%; height:40px; padding:0 40px 0 40px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  color:var(--txt); font-family:inherit; font-size:14.5px; outline:none;
  transition:border-color .16s, background .16s;
}
.search-box input::placeholder{color:var(--txt-3)}
.search-box input:focus{border-color:var(--accent); background:var(--card-2)}
.search-ico{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; fill:none; stroke:var(--txt-3); stroke-width:2;
  stroke-linecap:round; pointer-events:none;
}
.kbd-hint{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:11px; color:var(--txt-3); pointer-events:none;
}
.search-box input:focus ~ .kbd-hint{opacity:0}

/* ── Hero ───────────────────────────────────────────── */
.hero{padding:72px 0 56px; text-align:center}
.eyebrow{
  display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--t);
  background:var(--t-dim); border:1px solid #f0a02a33;
  padding:5px 13px; border-radius:99px; margin-bottom:22px;
}
h1{font-size:clamp(34px,6vw,58px)}
.grad{
  background:linear-gradient(100deg,var(--t) 10%,#ffd280 45%,var(--ct) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead{
  max-width:640px; margin:22px auto 0; color:var(--txt-2); font-size:17px;
}
.hero-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px}
.btn{
  display:inline-block; padding:13px 26px; border-radius:11px; text-decoration:none;
  font-weight:650; font-size:15px; border:1px solid transparent;
  transition:transform .14s, box-shadow .14s, background .14s;
}
.btn:hover{transform:translateY(-2px)}
.btn-t{background:linear-gradient(140deg,var(--t),#d8871a); color:#1a1204; box-shadow:0 6px 22px #f0a02a33}
.btn-t:hover{box-shadow:0 10px 30px #f0a02a4d}
.btn-ct{background:var(--card); color:var(--ct); border-color:#4a9eff44}
.btn-ct:hover{background:var(--ct-dim); border-color:var(--ct)}
.btn-pro{background:var(--card); color:var(--pro); border-color:#3ddc8444}
.btn-pro:hover{background:var(--pro-dim); border-color:var(--pro)}

.hero-stats{display:flex; gap:36px; justify-content:center; margin-top:44px; flex-wrap:wrap}
.hero-stats div{display:flex; flex-direction:column; gap:2px}
.hero-stats b{font-size:26px; color:var(--txt); font-variant-numeric:tabular-nums}
.hero-stats span{font-size:12.5px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.07em}

/* ── Umumiy sarlavhalar ─────────────────────────────── */
.sec-h{font-size:clamp(23px,3.4vw,30px); margin-bottom:10px}
.sec-p{color:var(--txt-2); max-width:640px; margin-bottom:26px}

/* ── Konsolni yoqish ────────────────────────────────── */
.start{padding:44px 0 8px}
.steps{list-style:none; padding:0; margin:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.steps li{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 20px; position:relative; transition:border-color .18s;
}
.steps li:hover{border-color:var(--line-2)}
.step-n{
  display:grid; place-items:center; width:28px; height:28px; border-radius:8px;
  background:var(--accent-dim); color:var(--accent); font-weight:700; font-size:14px;
  margin-bottom:13px;
}
.steps h3{font-size:16.5px; margin-bottom:6px}
.steps p{color:var(--txt-2); font-size:14.5px}
.tip{
  margin-top:16px; padding:14px 17px; border-radius:11px;
  background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--accent); color:var(--txt-2); font-size:14.5px;
}
.tip b{color:var(--txt)}
.inline-code{
  font-family:var(--mono); font-size:.9em; background:var(--card-2);
  border:1px solid var(--line-2); border-radius:6px; padding:2px 7px;
  color:var(--accent); cursor:pointer; transition:background .15s;
}
.inline-code:hover{background:var(--accent-dim)}

/* ── Tablar ─────────────────────────────────────────── */
.tabs{
  position:sticky; top:66px; z-index:40; margin-top:52px;
  background:#0b0d10e6; backdrop-filter:blur(14px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.tabs-in{display:flex; gap:8px; padding:9px 0; overflow-x:auto; scrollbar-width:none}
.tabs-in::-webkit-scrollbar{display:none}
.tab{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:10px 18px; border-radius:10px; cursor:pointer;
  background:transparent; border:1px solid transparent;
  color:var(--txt-2); font-family:inherit; font-size:14.5px; font-weight:600;
  transition:background .16s, color .16s, border-color .16s;
}
.tab:hover{background:var(--card); color:var(--txt)}
.tab.is-active{background:var(--card); border-color:var(--line-2); color:var(--txt)}
.tab-tag{
  display:grid; place-items:center; min-width:26px; height:21px; padding:0 6px;
  border-radius:6px; font-size:11px; font-weight:800; letter-spacing:.02em;
}
.tab-tag.t{background:var(--t-dim); color:var(--t)}
.tab-tag.ct{background:var(--ct-dim); color:var(--ct)}
.tab-tag.pro{background:var(--pro-dim); color:var(--pro)}
.tab.is-active .tab-tag.t{background:var(--t); color:#1a1204}
.tab.is-active .tab-tag.ct{background:var(--ct); color:#04121f}
.tab.is-active .tab-tag.pro{background:var(--pro); color:#04180d}

/* ── Bo‘lim boshi ───────────────────────────────────── */
.panel{padding:46px 0 10px; animation:fade .28s ease}
@keyframes fade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.panel-head{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:30px 28px; margin-bottom:34px; position:relative; overflow:hidden;
}
.panel-head::after{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
.panel-head h2{font-size:clamp(24px,4vw,34px); margin-bottom:12px}
.panel-lead{color:var(--txt-2); max-width:720px; font-size:16px}
.panel-lead b{color:var(--txt)}
.ability-h{
  font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--txt-3); margin:26px 0 12px;
}
.abilities{list-style:none; padding:0; margin:0; display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.abilities li{
  display:flex; gap:10px; align-items:flex-start;
  color:var(--txt-2); font-size:14.5px; line-height:1.5;
}
.abilities li::before{
  content:""; flex-shrink:0; width:6px; height:6px; margin-top:8px;
  border-radius:2px; background:var(--accent);
}
.panel-note{
  margin-top:24px; padding:13px 16px; border-radius:10px; font-size:14.5px;
  background:var(--accent-dim); border:1px solid var(--line-2); color:var(--txt-2);
}

/* ── Guruh (kategoriya) ─────────────────────────────── */
.group{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:16px; overflow:hidden;
}
.group-head{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:19px 22px; cursor:pointer; text-align:left;
  background:transparent; border:0; color:inherit; font-family:inherit;
  transition:background .16s;
}
.group-head:hover{background:var(--card-2)}
.group-titles{flex:1; min-width:0}
.group-titles h3{font-size:17.5px; margin-bottom:3px}
.group-titles p{color:var(--txt-3); font-size:13.5px; line-height:1.45}
.group-count{
  flex-shrink:0; font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px;
  background:var(--accent-dim); color:var(--accent); font-variant-numeric:tabular-nums;
}
.chev{
  flex-shrink:0; width:18px; height:18px; fill:none; stroke:var(--txt-3);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .22s, stroke .16s;
}
.group.open .chev{transform:rotate(180deg); stroke:var(--accent)}
.group-body{display:none; border-top:1px solid var(--line); padding:6px 0 0}
.group.open .group-body{display:block}

.group-warn{
  margin:14px 22px 4px; padding:12px 15px; border-radius:10px; font-size:14px;
  background:#ff6b5a14; border:1px solid #ff6b5a33; color:#ffb3a9;
}
.group-how{
  margin:14px 22px 4px; padding:12px 15px; border-radius:10px; font-size:14px;
  background:var(--accent-dim); border:1px solid var(--line-2); color:var(--txt-2);
}
.group-how b{color:var(--txt)}

/* Katta konfiguratsiya bloki */
.block-row{padding:16px 22px 4px}
.cfg-block{
  margin:0; padding:18px 20px; border-radius:11px; overflow-x:auto;
  background:#0a0c0f; border:1px solid var(--line);
  font-family:var(--mono); font-size:13px; line-height:1.75; color:var(--txt);
  white-space:pre; tab-size:2;
}
.cfg-block::-webkit-scrollbar{height:7px}
.cfg-block::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:9px}
.copy-block{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin-top:12px;
  padding:10px 18px; border-radius:9px; font-family:inherit; font-size:13.5px; font-weight:650;
  background:var(--accent-dim); border:1px solid var(--accent); color:var(--accent);
  transition:background .15s, transform .14s;
}
.copy-block:hover{background:var(--accent); color:#04180d; transform:translateY(-1px)}
.copy-block svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* Maslahatlar ro‘yxati */
.tips-list{margin:8px 0 6px; padding:0 22px 0 44px; display:grid; gap:14px}
.tips-list li{padding-left:4px}
.tips-list li::marker{color:var(--accent); font-weight:700}
.tips-list b{display:block; font-size:15.5px; margin-bottom:3px; color:var(--txt)}
.tips-list span{color:var(--txt-2); font-size:14.5px; line-height:1.55}
.tips-list code{
  font-family:var(--mono); font-size:.9em; background:var(--card-2);
  border-radius:5px; padding:1px 5px; color:var(--accent);
}

.group-foot{
  margin:6px 22px 20px; padding:13px 16px; border-radius:10px; font-size:13.5px;
  background:var(--bg-2); border:1px solid var(--line); color:var(--txt-2); line-height:1.9;
}
.group-foot code{
  font-family:var(--mono); font-size:.92em; background:var(--card-2);
  border:1px solid var(--line-2); border-radius:5px; padding:2px 6px; color:var(--accent);
}

/* ── Kod qatori ─────────────────────────────────────── */
.cmd{
  display:flex; align-items:center; gap:16px; padding:12px 22px;
  border-bottom:1px solid #1c222b; transition:background .14s;
}
.cmd:last-of-type{border-bottom:0}
.cmd:hover{background:var(--card-2)}
.cmd-main{flex:1; min-width:0}
.cmd-code{
  display:inline-flex; align-items:center; max-width:100%;
  font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:-.01em;
  color:var(--accent); background:var(--bg-2); border:1px solid var(--line);
  border-radius:8px; padding:6px 11px; cursor:pointer;
  overflow-x:auto; white-space:nowrap; scrollbar-width:thin;
  transition:border-color .15s, background .15s;
}
.cmd-code::-webkit-scrollbar{height:4px}
.cmd-code::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:9px}
.cmd-code:hover{border-color:var(--accent); background:var(--accent-dim)}
.cmd-desc{color:var(--txt-2); font-size:14.5px; margin-top:7px; line-height:1.5}
.cmd-desc code{
  font-family:var(--mono); font-size:.9em; background:var(--card-2);
  border-radius:5px; padding:1px 5px; color:var(--txt);
}
.copy{
  flex-shrink:0; display:grid; place-items:center; width:36px; height:36px;
  border-radius:9px; cursor:pointer; align-self:flex-start; margin-top:2px;
  background:var(--bg-2); border:1px solid var(--line); transition:all .15s;
}
.copy svg{width:16px; height:16px; fill:none; stroke:var(--txt-3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .15s}
.copy:hover{border-color:var(--accent); background:var(--accent-dim)}
.copy:hover svg{stroke:var(--accent)}
.copy.done{border-color:var(--ok); background:#3ddc8419}
.copy.done svg{stroke:var(--ok)}

.group-actions{padding:14px 22px 18px; border-top:1px solid #1c222b}
.copy-all{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 16px; border-radius:9px; font-family:inherit; font-size:13.5px; font-weight:600;
  background:var(--bg-2); border:1px solid var(--line); color:var(--txt-2);
  transition:all .15s;
}
.copy-all:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-dim)}
.copy-all svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ── Qidiruv natijasi yo‘q ──────────────────────────── */
.empty{
  text-align:center; padding:60px 20px; color:var(--txt-3);
  background:var(--card); border:1px dashed var(--line-2); border-radius:var(--r);
}
.empty b{display:block; color:var(--txt-2); font-size:17px; margin-bottom:6px}
mark{background:#f0a02a33; color:var(--txt); border-radius:3px; padding:0 2px}

/* ── cfg bo‘limi ────────────────────────────────────── */
.cfg{padding:56px 0 70px}
.cfg-steps{margin:0; padding-left:22px; color:var(--txt-2); display:grid; gap:9px}
.cfg-steps b{color:var(--txt)}
.cfg-steps::marker{color:var(--accent)}

/* ── Footer ─────────────────────────────────────────── */
.footer{border-top:1px solid var(--line); background:var(--bg-2); padding:30px 0}
.footer-in{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.footer p{font-size:14px; color:var(--txt-2)}
.footer b{color:var(--txt)}
.muted{color:var(--txt-3) !important; font-family:var(--mono); font-size:13px !important}

/* ── Toast va tepaga tugmasi ────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,80px);
  background:var(--card-2); border:1px solid var(--ok); color:var(--ok);
  padding:11px 22px; border-radius:11px; font-size:14px; font-weight:600;
  z-index:100; opacity:0; pointer-events:none; transition:all .24s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 10px 34px #0009;
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.to-top{
  position:fixed; right:22px; bottom:24px; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; cursor:pointer; z-index:45;
  background:var(--card-2); border:1px solid var(--line-2);
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s, border-color .16s;
}
.to-top.show{opacity:1; pointer-events:auto}
.to-top:hover{border-color:var(--accent); transform:translateY(-3px)}
.to-top svg{width:19px; height:19px; fill:none; stroke:var(--txt-2); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.to-top:hover svg{stroke:var(--accent)}

/* ── Mobil ──────────────────────────────────────────── */
@media (max-width:720px){
  html{scroll-padding-top:118px}
  .topbar-in{height:auto; padding:11px 0; flex-wrap:wrap; gap:10px}
  .search-box{max-width:none; flex-basis:100%; margin-left:0}
  .tabs{top:0}
  .hero{padding:46px 0 38px}
  .hero-btns .btn{flex:1 1 100%; text-align:center}
  .hero-stats{gap:26px}
  .panel-head{padding:24px 20px}
  .group-head{padding:16px 17px; gap:11px}
  .group-titles p{display:none}
  .cmd{padding:12px 17px; gap:11px}
  .cmd-code{font-size:13px}
  .cmd-desc{font-size:14px}
  .group-warn,.group-how,.group-foot{margin-inline:17px; padding-inline:14px}
  .group-actions{margin-inline:0; padding-inline:17px}
  .block-row{padding:14px 17px 4px}
  .cfg-block{font-size:12px; padding:15px 16px}
  .tips-list{padding:0 17px 0 36px}
  .to-top{right:14px; bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}