/* ============================================================
   60Soniya — base.css
   Token tizimi + reset + tipografiya + layout asoslari.
   Yo'nalish (TZ): qoramtir "studiya" foni, neon yashil #b8ff2c,
   sariq urg'u. O'ziga xoslik — 60s aylanma taymer (live.css).
   ============================================================ */

:root {
  /* Surfaces — toza qora emas, efir-studiya tusida */
  --bg:        #0a0e0f;
  --bg-grad:   radial-gradient(120% 80% at 50% -10%, #0f1719 0%, #0a0e0f 60%);
  --surface:   #121819;
  --surface-2: #18211f;
  --surface-3: #1f2a28;
  --line:      #25302e;
  --line-soft: #1b2422;

  /* Brand (TZ majburiy) */
  --lime:       #b8ff2c;
  --lime-press: #a3e625;
  --lime-dim:   #6f8f2a;
  --amber:      #ffd23e;   /* sariq urg'u: reserved / ogohlantirish */
  --red:        #ff5468;   /* outbid / xavf */
  --cyan:       #54e0ff;   /* ma'lumot urg'usi */

  /* Ink */
  --ink:    #e9f3ec;
  --ink-2:  #b6c7c0;
  --muted:  #7e938c;
  --on-lime:#06140a;

  /* Radii / shadow / spacing rhythm */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --sh-1: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.45);
  --sh-2: 0 18px 50px rgba(0,0,0,.55);
  --gap: 14px;
  --pad: 16px;
  --maxw: 720px;

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg-grad), var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.45;
  font-size: 16px;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--lime); color: var(--on-lime); }

/* Numerals: jonli "ticker" hissi — har joyda tabular */
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Headings */
h1 { font-size: clamp(22px, 6vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
h2 { font-size: 19px; font-weight: 750; letter-spacing: -.01em; }
h3 { font-size: 15px; font-weight: 700; }
small, .cap { font-size: 12px; color: var(--muted); }

/* Eyebrow / label */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime-dim);
}

/* App frame — mobil birinchi, markazlashtirilgan ustun */
#app { min-height: 100%; }
.screen {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--safe-top) + 8px) var(--pad) calc(96px + var(--safe-bot));
  min-height: 100%;
}
.screen--flush { padding-left: 0; padding-right: 0; }

.stack > * + * { margin-top: var(--gap); }
.row { display: flex; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.right { margin-left: auto; }
.center { text-align: center; }
.hide { display: none !important; }
.muted { color: var(--muted); }
.dim { color: var(--ink-2); }
.lime { color: var(--lime); }
.amber { color: var(--amber); }
.red { color: var(--red); }
.section-gap { margin-top: 26px; }

/* Divider with optional label */
.hr { height: 1px; background: var(--line-soft); border: 0; margin: 18px 0; }

/* ---- Boot splash ---- */
.boot {
  position: fixed; inset: 0; display: grid; place-content: center; gap: 22px;
  background: var(--bg-grad), var(--bg); z-index: 50;
}
.boot__mark { display: flex; align-items: baseline; gap: 10px; }
.boot__sec {
  font-family: var(--mono); font-weight: 800; font-size: 64px; color: var(--lime);
  letter-spacing: -.04em; text-shadow: 0 0 28px rgba(184,255,44,.35);
}
.boot__word { font-weight: 800; letter-spacing: .42em; font-size: 18px; color: var(--ink-2); }
.boot__bar { width: 168px; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 0 auto; }
.boot__bar span { display: block; height: 100%; width: 40%; border-radius: 4px; background: var(--lime);
  animation: bootslide 1.1s ease-in-out infinite; }
@keyframes bootslide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* Focus — klaviatura uchun ko'rinadigan */
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 6px; }

/* Scrollbars (web) */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}