/* ═══════════════════════════════════════════════════════════════════════════
   STEPS — ASOS: reset, tipografiya, sahna (telefon ramkasi), ekran konteyneri.
   Rang, soya, radius — faqat tokens.css dan (var(--…)). Bu yerda yangi rang yo'q.
   Qatlamlar: tokens.css → base.css → components.css → art3d.css → motion.css → screens/*.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───── Reset ───── */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none}   /* viewport'ga shu (html) dan o'tadi: gorizontal surish "orqaga" sahifaga ketmasin */
body{margin:0;background:var(--page,var(--bg));color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.35;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;
     overscroll-behavior:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;
       transition:transform .4s var(--spring),background-color .2s ease,color .2s ease,opacity .2s ease,box-shadow .2s ease}
/* Bosilish: tez siqiladi (80 ms), qo'yib yuborilganda prujina bilan qaytadi (motion.css ham boyitadi) */
button:active:not(:disabled){transform:scale(.96);transition-duration:.08s,.2s,.2s,.2s,.2s}
button:disabled{cursor:default}
input,textarea,select{font-size:16px}          /* iOS/Android kattalashtirmasin */
a{color:var(--brand-ink)}
[hidden]{display:none!important}
::selection{background:var(--brand-soft)}

/* Klaviatura fokusi — har doim ko'rinadi */
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus,var(--brand));outline-offset:2px;border-radius:6px}

/* ───── Asosiy yordamchilar ───── */
svg.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.sm{width:15px;height:15px;stroke-width:2.6}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}

/* ───── Tipografiya (DIZAYN.md §3) ───── */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.title{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:4px}
.sec{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:28px 0 12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sec small{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:0}
.lead{font-size:16px;font-weight:600;color:var(--muted);line-height:1.45}
.caption{font-size:13px;font-weight:600;color:var(--muted)}
.overline{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:22px 4px 8px}

/* ───── Sahna: kompyuterda telefon ramkasi, telefonda to'liq ekran ───── */
:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}   /* --page — tokens.css */

.stage{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.phone{position:relative;width:390px;max-width:100%;height:min(844px,calc(100dvh - 48px));
       background:radial-gradient(120% 40% at 50% -4%,var(--aura),transparent 72%),var(--bg);
       border-radius:52px;overflow:hidden;isolation:isolate;
       box-shadow:0 0 0 1px var(--edge-strong),0 0 0 10px var(--page),0 0 0 11px var(--edge),0 40px 90px -20px rgba(0,0,0,.35)}
/* ramkadagi soxta status bar (faqat kompyuterda) */
.statusbar{position:absolute;top:0;left:0;right:0;height:50px;z-index:70;display:flex;align-items:center;justify-content:space-between;
           padding:6px 34px 0;font-weight:700;font-size:15px;pointer-events:none;color:var(--fg);transition:color .2s}
.statusbar .sb-r{display:flex;gap:6px;align-items:center}
.statusbar.light{color:#fff}
/* ramka ichidagi yuqori bo'shliq: kompyuterda soxta status bar, telefonda — haqiqiy safe-area */
.phone{--top:56px}

/* Telefon (tor ekran) yoki Android ilova — to'liq ekran */
@media (max-width:520px){
  .stage{padding:0;display:block;height:100%}
  .phone{width:100%;height:100%;border-radius:0;box-shadow:none;--top:calc(12px + var(--sat))}
  .statusbar{display:none}
}
.is-native .stage{padding:0;display:block;height:100%}
.is-native .phone{width:100%;height:100%;border-radius:0;box-shadow:none;--top:calc(12px + var(--sat))}
.is-native .statusbar{display:none}

/* ───── Ekran konteyneri (tab va 'page' overlay'lar) ─────
   Router har bir tab uchun <section class="screen"> yaratadi — scroll shu yerda. */
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
        padding:var(--top) var(--gutter) calc(var(--tab-h) + var(--sab) + 40px);
        scrollbar-width:none;-webkit-overflow-scrolling:touch}
.screen::-webkit-scrollbar{display:none}
/* overlay ochiq — fon ekrani scroll bo'lmaydi */
.phone[data-top] #view > .screen{overflow:hidden}

#view{position:absolute;inset:0}
#layer{position:absolute;inset:0;z-index:30;pointer-events:none}
#layer > *{pointer-events:auto}

/* JavaScript o'chiq */
.noscript{position:fixed;inset:auto 16px 16px;padding:14px 16px;border-radius:14px;background:var(--surface);box-shadow:var(--e2);font-weight:700}

/* ───── Harakatni kamaytirish: ilova sozlamasi (tizimdagisi tokens.css da) ───── */
:root[data-motion="reduce"] *,:root[data-motion="reduce"] *::before,:root[data-motion="reduce"] *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}