/* OGBEX kabinet. Umumiy poydevor: font, tokenlar, asosiy komponentlar.
   Ikkala sahifa shu fayldan oziqlanadi, shuning uchun ular hech qachon ajralib ketmaydi. */

@font-face{
  font-family:'Geist'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/fonts/geist-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Geist'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/fonts/geist-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Geist'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/fonts/geist-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---- Tokenlar. Bitta aksent, bitta radius shkalasi, bitta kulrang oila ---- */
:root{
  --bg:#f4f5f4;
  --surface:#fcfcfb;
  --surface-2:#eceeec;
  --line:#dedfdc;
  --line-strong:#c6c8c4;
  --text:#1b1d1c;
  --muted:#65706a;
  --accent:#05674a;
  --accent-hover:#045840;
  --accent-soft:#e4efe9;
  --on-accent:#f6fbf9;
  --danger:#8f2626;
  --danger-bg:#fbeeee;
  --danger-line:#e6c4c4;

  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px;

  /* Soyalar fon rangiga bo'yalgan, sof qora emas */
  --shadow-sm:0 1px 2px rgba(27,45,38,.05);
  --shadow-md:0 1px 2px rgba(27,45,38,.05), 0 10px 28px -14px rgba(27,45,38,.18);

  --ease:cubic-bezier(.32,.72,0,1);
  --z-nav:10; --z-overlay:20;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#101211;
    --surface:#181b1a;
    --surface-2:#141716;
    --line:#272b29;
    --line-strong:#39403c;
    --text:#e7eae8;
    --muted:#98a09b;
    --accent:#2fbe8a;
    --accent-hover:#45cf9c;
    --accent-soft:#16261f;
    --on-accent:#06140e;
    --danger:#ef9d9d;
    --danger-bg:#2a1919;
    --danger-line:#4d2b2b;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html{ scroll-behavior:smooth }
body{
  margin:0; min-height:100dvh;
  background:var(--bg); color:var(--text);
  font-family:'Geist', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric:tabular-nums;   /* kod va raqamlar ustun boʻylab tekis tursin */
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
h1,h2,h3{ text-wrap:balance }

/* Klaviatura bilan yuruvchilar uchun */
.skip{
  position:absolute; left:12px; top:-48px; z-index:var(--z-overlay);
  padding:9px 14px; border-radius:var(--r-md);
  background:var(--accent); color:var(--on-accent);
  font-size:.875rem; font-weight:500; text-decoration:none;
  transition:top .18s var(--ease);
}
.skip:focus{ top:12px }

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---- Tugmalar ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; font:inherit; font-size:.9375rem; font-weight:500;
  white-space:nowrap; border-radius:var(--r-md); cursor:pointer;
  border:1px solid transparent; background:none; color:var(--text);
  transition:background-color .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease), transform .08s var(--ease);
}
.btn:active:not(:disabled){ transform:translateY(1px) }
.btn-primary{
  background:var(--accent); color:var(--on-accent); font-weight:600;
}
.btn-primary:hover:not(:disabled){ background:var(--accent-hover) }
.btn-primary:disabled{ opacity:.6; cursor:progress }
.btn-quiet{ border-color:var(--line-strong); color:var(--muted) }
.btn-quiet:hover{ color:var(--text); border-color:var(--muted); background:var(--surface) }

/* ---- Sirt: tashqi qobiq + ichki yadro (konsentrik radiuslar) ---- */
.shell{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:5px;
}
.core{
  background:var(--surface);
  border-radius:calc(var(--r-xl) - 5px);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

/* ---- Bosqichma-bosqich paydo boʻlish ---- */
.rise{ opacity:0; transform:translateY(14px) }
.rise.in{
  opacity:1; transform:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ transition:none !important; animation:none !important }
  .rise{ opacity:1; transform:none }
}