/* =====================================================================
   OZON — base: reset, tipografiya, fokus, sahna (fon), yordamchi klasslar
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  background: var(--bg);
  font-family: var(--font);
  font-size: 100%;
  font-feature-settings: "cv11", "ss03";
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background: transparent;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: -0.006em;
  overflow-x: hidden;
}

html.has-overlay { overflow: hidden; }
/* Mavzu almashganda ranglar bir zumda o'zgaradi (o'rtadagi xira kadrlar bo'lmaydi) */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

img, svg, video, canvas { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--ink); text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
hr { border: 0; height: 1px; background: var(--line); margin: var(--s-4) 0; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: .92em; }
::selection { background: var(--selection); color: inherit; }
[hidden] { display: none !important; }

/* ---------- Fokus: aniq va brendga mos ------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halo);
  border-radius: var(--r-xs);
}
.glass:focus-visible, .glass-thin:focus-visible, .glass-thick:focus-visible, .glass-tint:focus-visible,
.btn:focus-visible, .icon-btn:focus-visible { border-radius: inherit; }

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: var(--z-tooltip);
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand); font-weight: 600;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { top: calc(12px + var(--safe-top)); }

/* ---------- Tipografiya ------------------------------------------------ */
.display { font-size: var(--fs-display); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-display); line-height: 1.02; }
.h1, .t-h1 { font-size: var(--fs-4xl); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-display); line-height: 1.06; }
.h2, .t-h2 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-title); line-height: 1.12; }
.h3, .t-h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-title); line-height: 1.2; }
.h4, .t-h4 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: 1.3; }
.t-lead { font-size: var(--fs-md); line-height: 1.6; color: var(--ink-2); }
.t-body { font-size: var(--fs-base); line-height: var(--lh-base); }
.t-sm { font-size: var(--fs-sm); line-height: 1.5; }
.t-xs { font-size: var(--fs-xs); line-height: 1.45; }
.eyebrow {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink-3);
}
.muted { color: var(--ink-3); }
.soft { color: var(--ink-2); }
.strong { font-weight: var(--fw-semibold); color: var(--ink); }
.brand-text { color: var(--brand-ink); }
.num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv11"; }
.mono { font-family: var(--font-mono); font-size: .9em; letter-spacing: 0; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prose { max-width: 72ch; color: var(--ink-2); line-height: 1.65; text-wrap: pretty; }
.prose p + p { margin-top: .8em; }
.link { color: var(--brand-ink); font-weight: var(--fw-semibold); text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: 3px; }
.link:hover { text-decoration-color: currentColor; }
.ok-text { color: var(--ok-ink); } .warn-text { color: var(--warn-ink); } .crit-text { color: var(--crit-ink); } .info-text { color: var(--info-ink); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Sticky topbar ostida qolmasligi uchun (#anchor, scrollIntoView) */
[id], .section { scroll-margin-top: calc(var(--topbar-h) + var(--shell-gap) * 2 + 16px); }

/* ---------- Ikonka ------------------------------------------------------ */
.ic { display: inline-block; vertical-align: middle; flex: none; }

/* ---------- Sahna (fon) ------------------------------------------------- */
.scene {
  position: fixed; inset: 0; z-index: var(--z-scene);
  overflow: hidden; pointer-events: none;
  background: var(--scene-base);
  contain: strict;
}
.scene-blob {
  position: absolute; border-radius: 50%;
  will-change: transform;
  animation: blob-drift 46s var(--ease-in-out) infinite alternate;
}
.scene-blob--1 { width: 62vmax; height: 62vmax; right: -18vmax; top: -24vmax; background: radial-gradient(closest-side, var(--blob-1), transparent 72%); animation-duration: 52s; }
.scene-blob--2 { width: 54vmax; height: 54vmax; left: -20vmax; top: 6vh; background: radial-gradient(closest-side, var(--blob-2), transparent 70%); animation-duration: 64s; animation-delay: -12s; }
.scene-blob--3 { width: 46vmax; height: 46vmax; left: 26vw; top: 30vh; background: radial-gradient(closest-side, var(--blob-3), transparent 70%); animation-duration: 58s; animation-delay: -30s; }
.scene-blob--4 { width: 40vmax; height: 40vmax; left: -10vmax; bottom: -22vmax; background: radial-gradient(closest-side, var(--blob-4), transparent 70%); animation-duration: 70s; animation-delay: -20s; }
.scene-blob--5 { width: 38vmax; height: 38vmax; right: -8vmax; bottom: -16vmax; background: radial-gradient(closest-side, var(--blob-5), transparent 70%); animation-duration: 60s; animation-delay: -40s; }

@keyframes blob-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(4vw, 3vh, 0) scale(1.08); }
  66%  { transform: translate3d(-3vw, 6vh, 0) scale(.94); }
  100% { transform: translate3d(2vw, -4vh, 0) scale(1.04); }
}

/* Logotipdagi halqa — juda nozik, faqat chuqurlik uchun */
.scene-ring {
  position: absolute; width: 76vmin; height: 76vmin; right: -14vmin; top: 50%;
  transform: translateY(-46%);
  border-radius: 50%;
  border: 11vmin solid var(--scene-ring);
  box-shadow: inset 0 0 0 1px var(--scene-ring-edge), 0 0 0 1px var(--scene-ring-edge);
  opacity: .9;
  transition: opacity var(--dur-4) var(--ease-out), transform 900ms var(--ease-out);
}
/* "O3" — logotipdagi uchta nuqta, bokeh sifatida */
.scene-o3 { position: absolute; right: 6vmin; bottom: 6vmin; width: 34vmin; height: 34vmin; }
.scene-o3 i {
  position: absolute; border-radius: 50%; display: block;
  animation: o3-float 18s var(--ease-in-out) infinite alternate;
}
.scene-o3 i:nth-child(1) { width: 26%; height: 26%; left: 2%; top: 2%; background: radial-gradient(circle at 35% 30%, var(--o3-1), transparent 72%); box-shadow: inset 0 0 0 1px var(--o3-3); }
.scene-o3 i:nth-child(2) { width: 34%; height: 34%; left: 28%; top: 28%; background: radial-gradient(circle at 35% 30%, var(--o3-2), transparent 75%); box-shadow: inset 0 0 0 1px var(--o3-3); animation-delay: -6s; }
.scene-o3 i:nth-child(3) { width: 32%; height: 32%; left: 64%; top: 64%; background: radial-gradient(circle at 35% 30%, var(--o3-1), transparent 72%); box-shadow: inset 0 0 0 1px var(--o3-3); animation-delay: -12s; }
@keyframes o3-float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-1.2vmin, -1.8vmin, 0); }
}
.scene-noise {
  position: absolute; inset: -50%;
  opacity: var(--noise-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* Login sahnasi: halqa markazga keladi va kattalashadi */
body.is-login .scene-ring { right: 50%; top: 50%; transform: translate(50%, -50%) scale(1.25); opacity: 1; }
body.is-login .scene-o3 { right: 12vmin; bottom: 10vmin; width: 40vmin; height: 40vmin; }

/* Hujjat ko'rinmasa — animatsiya to'xtaydi */
html.is-hidden .scene-blob, html.is-hidden .scene-o3 i { animation-play-state: paused; }

/* ---------- Boot va noscript ------------------------------------------ */
.app { position: relative; z-index: var(--z-content); min-height: 100vh; min-height: 100dvh; }
.boot {
  min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 16px;
  color: var(--ink-3); font-size: var(--fs-sm); font-weight: 500;
}
.noscript { position: fixed; z-index: 200; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 20px 24px; max-width: 360px; text-align: center; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---------- Skrollbar -------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Harakatni kamaytirish -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .scene-blob, .scene-o3 i { animation: none !important; }
}