/*
 * Rentora — umumiy dizayn tizimi: ranglar, shriftlar, sarlavha (nav), tugmalar.
 * Bosh sahifa, katalog, hujjatlar va huquqiy sahifalar shu faylni ulaydi.
 *
 * Ranglar:
 *   tun     #17112E — qorong'i bandlar (hero, dasturchilar), bot bannerlari bilan bir oila
 *   qog'oz  #F6F3FC — asosiy och fon
 *   siyoh   #1C1633 — och fondagi matn
 *   amber   #FFB547 — logotipdagi nuqta; asosiy harakat va kalit birkasi
 *   yalpiz  #2FBF8F — FAQAT "bo'sh" holati
 * Shriftlar: Bricolage Grotesque (sarlavha, username'lar — ensiz), Onest (matn), JetBrains Mono (faqat kod).
 */
:root {
  --night: #17112E;
  --night-2: #211944;
  --night-line: rgba(246, 243, 252, 0.12);
  --paper: #F6F3FC;
  --paper-2: #ECE6F8;
  --ink-d: #1C1633;
  --slate: #625984;
  --haze: #B7ADD8;
  --amber: #FFB547;
  --amber-ink: #3A2400;
  --mint: #2FBF8F;
  --mint-d: #74E8C6;
  --rose: #E5547A;
  --paper-line: rgba(28, 22, 51, 0.12);
  --display: "Bricolage Grotesque", "Onest", system-ui, sans-serif;
  --text: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --nav-h: 66px;
}

/* ---------- sarlavha (har doim tepada) ---------- */
.sh {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(23, 17, 46, 0.93);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  font-family: var(--text);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.sh.scrolled { background: rgba(23, 17, 46, 0.94); border-bottom-color: var(--night-line); }
.sh-in {
  display: flex; align-items: center; gap: 28px;
  max-width: 1200px; height: var(--nav-h); margin-inline: auto;
  padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px));
}
.sh-in.wide { max-width: 1320px; }
.sh-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--paper); font-family: var(--display); font-weight: 800; font-size: 1.22rem; letter-spacing: -0.02em; text-decoration: none; }
.sh-brand svg { width: 25px; height: 25px; color: var(--paper); }
.sh-nav { display: flex; gap: 2px; margin-inline: auto; }
.sh-nav a { padding: 8px 12px; border-radius: 9px; text-decoration: none; color: var(--haze); font-weight: 500; font-size: 0.94rem; transition: color 0.15s ease; }
.sh-nav a:hover { color: var(--paper); }
.sh-nav a[aria-current="page"] { color: var(--paper); box-shadow: inset 0 -2px 0 var(--amber); border-radius: 0; }
.sh-act { display: flex; align-items: center; gap: 16px; }
.sh-link { text-decoration: none; font-weight: 500; font-size: 0.94rem; color: var(--haze); }
.sh-link:hover { color: var(--paper); }
.sh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 10px;
  font: 600 0.92rem/1 var(--text); white-space: nowrap;
  color: var(--amber-ink); text-decoration: none; background: var(--amber);
  transition: background 0.15s ease;
}
.sh-btn:hover { background: #FFC56E; }
.sh-space { height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }

/* ---------- tugmalar (barcha sahifalar) ---------- */
.b {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 12px; border: 1px solid transparent;
  font: 600 1rem/1.1 var(--text); text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.b-amber { background: var(--amber); color: var(--amber-ink); }
.b-amber:hover { background: #FFC56E; }
.b-line-d { border-color: var(--night-line); color: var(--paper); background: transparent; }
.b-line-d:hover { border-color: rgba(246, 243, 252, 0.4); }
.b-ink { background: var(--ink-d); color: var(--paper); }
.b-ink:hover { background: #2D2550; }
.b-line { border-color: var(--paper-line); color: var(--ink-d); background: transparent; }
.b-line:hover { border-color: var(--ink-d); }

@media (max-width: 940px) {
  .sh-nav { display: none; }
  .sh-act { margin-left: auto; }
}
@media (max-width: 560px) { .sh-link { display: none; } }
@media (prefers-reduced-motion: reduce) { .sh, .b, .sh-btn { transition: none; } }