/* ==========================================================================
   Tadam — dizayn tizimi
   Sof oq/qora, soch tolasidek chegaralar, Inter + IBM Plex Mono.
   flarestamina.com bilan bir oilada.
   ========================================================================== */

:root {
  --bg:            #ffffff;
  --elev:          #ffffff;
  --surface:       #ffffff;
  --surface-2:     #fafafa;
  --fg:            #0a0a0a;
  --muted:         #5c5c5c;
  --subtle:        #6b6b6b;
  --border:        rgba(10, 10, 10, .1);
  --border:        color-mix(in oklab, #0a0a0a 10%, transparent);
  --border-strong: rgba(10, 10, 10, .18);
  --border-strong: color-mix(in oklab, #0a0a0a 18%, transparent);

  --card:       0 0 0 1px rgb(10 10 10 / .08), 0 1px 2px rgb(10 10 10 / .04);
  --card-hover: 0 0 0 1px rgb(10 10 10 / .14), 0 8px 24px -16px rgb(10 10 10 / .18);

  /* Yagona rangli urg'u — faqat kerak joyda ishlatiladi */
  --rail: linear-gradient(90deg, #2dd4bf, #38bdf8 32%, #818cf8 64%, #e879f9 100%);
  /* Tik chiziqlar uchun o'sha rang, faqat pastga qarab. */
  --rail-v: linear-gradient(180deg, #2dd4bf, #38bdf8 32%, #818cf8 64%, #e879f9 100%);

  --sans: Inter, "Inter fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 72rem;
  --pad:  clamp(20px, 5vw, 40px);

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;
  --r-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #000000;
    --elev:          #0a0a0a;
    --surface:       #111111;
    --surface-2:     #0a0a0a;
    --fg:            #f5f5f5;
    --muted:         #9a9a9a;
    --subtle:        #808080;
    --border:        rgba(245, 245, 245, .12);
    --border:        rgba(245, 245, 245, .12);
  --border:        color-mix(in oklab, #f5f5f5 12%, transparent);
    --border-strong: rgba(245, 245, 245, .22);
    --border-strong: rgba(245, 245, 245, .22);
  --border-strong: color-mix(in oklab, #f5f5f5 22%, transparent);
    --card:       0 0 0 1px rgb(255 255 255 / .1);
    --card-hover: 0 0 0 1px rgb(255 255 255 / .18);
  }
}

:root[data-theme="dark"] {
  --bg:            #000000;
  --elev:          #0a0a0a;
  --surface:       #111111;
  --surface-2:     #0a0a0a;
  --fg:            #f5f5f5;
  --muted:         #9a9a9a;
  --subtle:        #808080;
  --border:        rgba(245, 245, 245, .12);
  --border:        color-mix(in oklab, #f5f5f5 12%, transparent);
  --border-strong: rgba(245, 245, 245, .22);
  --border-strong: color-mix(in oklab, #f5f5f5 22%, transparent);
  --card:       0 0 0 1px rgb(255 255 255 / .1);
  --card-hover: 0 0 0 1px rgb(255 255 255 / .18);
}

/* --- Shriftlar -----------------------------------------------------------
   O'z domenimizdan beriladi, Google'dan emas. Avval brauzer matnni
   ko'rsatishdan oldin ikkita begona domenga ulanishi kerak edi:
   fonts.googleapis.com dan uslub fayli, keyin fonts.gstatic.com dan
   shriftning o'zi — sekin mobil tarmoqda bu yarim soniyagacha kutish.
   Endi ikkalasi ham shu serverdan, allaqachon ochiq ulanish orqali.

   Faqat `latin` qismi olingan: saytdagi 82 ta turli belgining hammasi
   shu oraliqda (tekshirilgan). Uzbekcha `oʻ` ham shu yerda — U+02BB.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-var-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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-500-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;
}

/* Inter yuklanguncha tizim shrifti ishlatiladi. `size-adjust` o'lchamlarni
   moslaydi — aks holda shrift almashganda matn "sakrab" ketadi. */
@font-face {
  font-family: "Inter fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Roboto");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* --- Asos ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
}

h1 { font-size: clamp(1.875rem, 7.5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.125rem); letter-spacing: -.025em; }
h3 { font-size: 1.0625rem; letter-spacing: -.015em; }

p { margin: 0 0 1em; color: var(--muted); }

a { color: inherit; text-decoration: none; }
a.link { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a.link:hover { text-decoration-color: currentColor; }

/* height:auto — HTML'dagi `height` atributi CSS'ning `aspect-ratio` sini
   bloklab qo'yadi va rasm cho'zilib ketadi. Bu global qoida shu toifadagi
   xatolarning oldini oladi; kerak bo'lganda alohida qoida bilan qaytariladi. */
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 44rem; }

.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }

/* Raqamlar va yorliqlar mono bilan — bu tizimning imzosi */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--subtle);
}

.rule { height: 1px; background: var(--border); border: 0; margin: 0; }

/* Ichki sahifalarning yuqorisidagi nom. Avval beshta faylda alohida
   yozilgan edi va o'lchamlari bir-biridan farq qilardi. */
.brand {
  display: inline-block;
  font-weight: 600; font-size: 1.0625rem; letter-spacing: -.03em;
  color: var(--subtle);
  /* padding + margin birgalikda avvalgi 26px bo'shliqni beradi, lekin
     bosiladigan maydonni 27px dan 41px ga chiqaradi. */
  padding: 7px 0;
  margin: -7px 0 19px;
}
.brand:hover { color: var(--fg); }

/* Klaviatura bilan yuradiganlar uchun: Tab bosilganda birinchi bo'lib
   chiqadi va menyudan sakrab o'tishga imkon beradi. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--fg); color: var(--bg);
  padding: 10px 18px; border-radius: var(--r-m);
  font-size: .875rem; font-weight: 500;
  transition: top .15s ease;
}
.skip:focus { top: 12px; }

/* Tanlangan matn ham tizimning bir qismi */
::selection { background: var(--fg); color: var(--bg); }

/* Sichqoncha bilan bosilganda halqa chiqmaydi, Tab bilan — chiqadi */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }

.rail { height: 2px; background: var(--rail); border-radius: var(--r-pill); }

/* --- Tugmalar ------------------------------------------------------------ */

.btn {
  appearance: none;
  font: inherit;
  font-weight: 500;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  padding: 12px 20px;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.99); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover:not(:disabled) { opacity: .85; }

.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--fg); }

.btn-lg { padding: 16px 28px; min-height: 54px; font-size: 1rem; }
.btn-block { width: 100%; }

/* --- Maydonlar ----------------------------------------------------------- */

.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: 8px;
}

.input {
  width: 100%;
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-m);
  padding: 13px 14px;
  min-height: 48px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
  outline: none;
  border-color: var(--fg);
  box-shadow: 0 0 0 3px rgba(128, 128, 128, .22);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--fg) 10%, transparent);
}
.input::placeholder { color: var(--subtle); opacity: .6; }

/* iOS Safari'da `input[type=date]` o'zining ichki eng kichik kengligiga ega
   bo'ladi va `width:100%` uni cheklamaydi — maydon kartochkadan chetga
   chiqib ketadi. Bundan tashqari iOS qiymatni markazga tekislaydi, natijada
   u yuqoridagi maydonlardan farq qilib turadi.
   Chromium'da bu muammo yo'q, shuning uchun stol brauzerida sezilmaydi. */
input, select, textarea { max-width: 100%; min-width: 0; }

.input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  text-align: left;
}
.input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
.input[type="date"]::-webkit-calendar-picker-indicator {
  margin-inline-start: auto;
  opacity: .55;
}

/* --- Kartochka ----------------------------------------------------------- */

.card {
  background: var(--elev);
  border-radius: var(--r-l);
  box-shadow: var(--card);
  padding: clamp(20px, 3.5vw, 30px);
}

/* --- Xabarlar ------------------------------------------------------------ */

.note {
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  background: var(--surface-2);
  padding: 13px 15px;
  font-size: .9375rem;
  color: var(--muted);
}
.note-err { border-color: rgba(220, 38, 38, .45); border-color: color-mix(in oklab, #dc2626 45%, var(--border)); color: #dc2626; }
.note-ok  { border-color: rgba(22, 163, 74, .45); border-color: color-mix(in oklab, #16a34a 45%, var(--border)); color: #16a34a; }

/* --- Holat ko'rsatkichlari ----------------------------------------------- */

.bar { height: 3px; border-radius: var(--r-pill); background: var(--border); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--fg); border-radius: inherit; transition: width .25s ease; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(128, 128, 128, .3);
  border: 2px solid color-mix(in oklab, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Animatsiyalar -------------------------------------------------------
   `.anim` klassi <html> ga faqat JS ishlaganda va foydalanuvchi harakatni
   cheklamagan bo'lsa qo'shiladi. Ya'ni JS ishlamasa yoki xato bersa,
   kontent oddiy holicha ko'rinadi — hech narsa yashirin qolmaydi. */

html.anim .reveal {
  opacity: 0;
  /* 16px dan 10px ga: uzoq siljish sekin tuyuladi va aylantirish
     paytida "ortda qolgan" his beradi. Qisqa masofa + qisqa vaqt
     harakatni sezdiradi, lekin kutdirmaydi. */
  transform: translateY(10px);
  transition: opacity .42s cubic-bezier(.22,.68,.24,1),
              transform .42s cubic-bezier(.22,.68,.24,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
html.anim .reveal.shown { opacity: 1; transform: none; }

/* Ko'rgazma tugagach `will-change` ni olib tashlaymiz — u xotirada
   qatlam ushlab turadi va uzun sahifada telefonni sekinlashtiradi. */
html.anim .reveal.shown.done { will-change: auto; transition-delay: 0ms; }

/* --- Galereya ------------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 3px;
}
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
}

.tile {
  position: relative;
  aspect-ratio: 1;
  background: var(--surface-2);
  border: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-s);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s ease;
}
.tile img.in { opacity: 1; }
.tile:hover img { opacity: .88; }

/* --- Lightbox ------------------------------------------------------------ */

/* Fon to'liq qora: yarim shaffof bo'lganda orqadagi sarlavha va
   "Rasm qo'shish" tugmasi arvohdek ko'rinib turadi va bosiladigandek
   tuyuladi. Surat ko'rish oynasi — surat uchun, boshqa hech narsa uchun emas. */
.lb {
  position: fixed; inset: 0;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  touch-action: pan-y;
}
.lb.on { display: flex; }
.lb img { max-width: 100vw; max-height: 100vh; object-fit: contain; }

/* Tugmalar oq emas, qora yarim shaffof: oq 10% yorqin suratda umuman
   ko'rinmay qoladi, qora esa ikkala holatda ham ajralib turadi. */
.lb-close, .lb-nav, .lb-save, .lb-del {
  position: absolute;
  background: rgb(0 0 0 / .42);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  width: 44px; height: 44px;
  font-size: 20px;
  cursor: pointer;
  display: grid; place-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
}
.lb-close:hover, .lb-nav:hover, .lb-save:hover { background: rgb(0 0 0 / .66); }
.lb-close { top: calc(14px + env(safe-area-inset-top)); right: 14px; }
.lb-save  { top: calc(14px + env(safe-area-inset-top)); right: 66px; }

/* O'chirish qaytarib bo'lmaydi, shuning uchun u boshqalardan farq qiladi
   va tasdiqlashsiz ishlamaydi. */
.lb-del   { top: calc(14px + env(safe-area-inset-top)); left: 14px; }
.lb-del:hover { background: rgb(220 38 38 / .85); }
.lb-del.confirm {
  width: auto; padding: 0 16px; gap: 8px;
  background: #dc2626; font-size: .8125rem; font-weight: 500;
  font-family: var(--sans); letter-spacing: -.01em;
}
.lb-del.confirm:hover { background: #b91c1c; }
.lb-nav.prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-nav.next { right: 12px; top: 50%; transform: translateY(-50%); }

/* Nechanchi suratdaligini ko'rsatadi — usiz albomda yo'nalish yo'qoladi. */
.lb-count {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  font-family: var(--mono); font-size: .75rem; letter-spacing: .12em;
  color: rgb(255 255 255 / .8);
  text-shadow: 0 1px 4px rgb(0 0 0 / .7);
  pointer-events: none;
}

/* --- Pastki qism ---------------------------------------------------------
   Avval faqat bosh sahifada bor edi va o'sha faylning ichida yozilgandi.
   Endi umumiy: qidiruvdan huquqiy sahifaga tushgan odam ham saytning
   qolgan qismiga va "Albom yaratish" ga yo'l topadi. */

footer.site { border-top: 1px solid var(--border); padding: 16px 0; }
footer.site .wrap {
  display: flex; justify-content: space-between;
  gap: 6px 16px; flex-wrap: wrap; align-items: center;
}
footer.site, footer.site a { color: var(--subtle); font-size: .8125rem; }
/* Matn 21px, bosiladigan maydon esa 41px — barmoq uchun. */
footer.site a { display: inline-block; padding: 10px 0; }
footer.site .links { display: flex; gap: 18px; flex-wrap: wrap; }
/* `display` ni ham qaytaramiz: yuqoridagi `footer.site a` qoidasi
   `.btn` ning inline-flex'ini bosib ketadi va ichidagi matn
   vertikal markazdan chiqadi. */
footer.site .btn { display: inline-flex; padding: 9px 16px; min-height: 40px; font-size: .8125rem; }

/* --- Yordamchilar -------------------------------------------------------- */

.stack-8  > * + * { margin-top: 8px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.between { justify-content: space-between; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}