/* ============================================================
   TABRIK Mini App — uslub. Rang tizimi: to'q siyoh fon + OLTIN urg'u (bayram). «AI» binafsha gradient YO'Q.
   Qoidalar: tugma :active belgisi (scale .97 + to'qlashish), tap-highlight o'chiq, shrift ≥16px maydonlarda
   (iOS zoom), ekran balandligi 100dvh (vh sakramasin), pastki CTA sticky (fixed emas — iOS klaviatura).
   ============================================================ */
:root{
  --fon:#0E0B1F; --karta:#1A1631; --karta2:#241E42; --chegara:rgba(255,255,255,.09);
  --matn:#F6F2FF; --xira:#B9B2CF; --xira2:#7F7898;
  --oltin:#F5B84B; --oltin2:#D99A2B; --oltin-matn:#1A1033; --marjon:#FF6B6B; --yashil:#5CD68A;
  --r:18px; --r2:14px; --soya:0 10px 30px rgba(0,0,0,.35);
  --shrift:"Noto Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--fon);color:var(--matn);font-family:var(--shrift);font-size:16px;line-height:1.4;
  display:flex;flex-direction:column;overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit;touch-action:manipulation}
input,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
.yashirin{display:none!important}

/* ---------- sarlavha ---------- */
.tepa{display:flex;align-items:center;gap:10px;padding:14px 16px 8px;padding-top:calc(14px + env(safe-area-inset-top))}
.tepa img{width:32px;height:32px;border-radius:50%}
.tepa b{font-weight:800;letter-spacing:.2px}
.tepa .qadam-yozuv{margin-left:auto;color:var(--xira);font-size:14px;font-variant-numeric:tabular-nums}
.chiziq{height:4px;margin:0 16px 4px;background:var(--karta2);border-radius:4px;overflow:hidden}
.chiziq i{display:block;height:100%;width:0;background:var(--oltin);border-radius:4px;transition:width .35s cubic-bezier(.4,0,.2,1)}

/* ---------- ekranlar ---------- */
main{flex:1;display:flex;flex-direction:column;padding:8px 16px 12px}
.ekran{display:none;flex-direction:column;gap:14px;animation:kir .22s ease-out}
.ekran.faol{display:flex}
@keyframes kir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ekran{animation:none}}
.h1{font-size:26px;line-height:1.2;font-weight:900;letter-spacing:-.3px}
.h2{font-size:18px;font-weight:800;margin-top:6px}
.izoh{color:var(--xira);font-size:15px}
.izoh-kichik{color:var(--xira2);font-size:13px}

/* bosh ekran */
.bosh-hero{position:relative;padding:28px 20px 24px;border-radius:24px;background:linear-gradient(160deg,#2A1F4D 0%,#1A1631 55%,#120E29 100%);border:1px solid var(--chegara);overflow:hidden}
.bosh-hero::before{content:"";position:absolute;inset:auto -40px -60px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(245,184,75,.35),transparent 65%)}
.bosh-hero .h1{font-size:30px;position:relative}
.bosh-hero .izoh{margin-top:10px;position:relative}
.bosh-narx{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px;border-radius:999px;background:rgba(245,184,75,.14);color:var(--oltin);font-weight:700;font-size:15px;position:relative}
.bosh-nuqta{display:flex;flex-direction:column;gap:10px}
.bosh-nuqta div{display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--karta);border-radius:var(--r2);border:1px solid var(--chegara)}
.bosh-nuqta span{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--karta2);font-size:18px}

/* tanlov to'ri — teng grid (flex-wrap EMAS, xotira: chiplar teng tor) */
.tor{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tor-3{grid-template-columns:1fr 1fr 1fr}
.tanlov{position:relative;display:flex;flex-direction:column;gap:4px;min-height:74px;padding:14px 14px 12px;border-radius:var(--r2);background:var(--karta);border:1.5px solid var(--chegara);
  transition:transform .12s,background .12s,border-color .12s}
.tanlov .belgi{font-size:22px;line-height:1}
.tanlov .nom{font-weight:700;font-size:16px;line-height:1.25}
.tanlov .izoh-kichik{line-height:1.3}
.tanlov:active{transform:scale(.97);background:var(--karta2)}
.tanlov.tanlangan{border-color:var(--oltin);background:rgba(245,184,75,.10)}
.tanlov.tanlangan::after{content:"";position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;background:var(--oltin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%231A1033' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.tanlov .namuna{margin-top:6px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--karta2);color:var(--xira);font-size:13px;font-weight:600}
.tanlov .namuna:active{background:var(--chegara)}
.tanlov .namuna.oynayapti{background:var(--oltin);color:var(--oltin-matn)}
.tanlov .namuna[disabled]{opacity:.55}

/* chiplar — teng grid */
.chiplar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.chip{padding:9px 10px;border-radius:999px;background:var(--karta);border:1.5px solid var(--chegara);font-size:14px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .12s}
#chip-kim{grid-template-columns:1fr 1fr}
#chip-kim .chip{white-space:normal;line-height:1.2}
.chip:active{transform:scale(.96);background:var(--karta2)}
.chip.tanlangan{border-color:var(--oltin);color:var(--oltin);background:rgba(245,184,75,.10)}
.maslahat-chiplar{grid-template-columns:1fr 1fr}
.maslahat-chiplar .chip{white-space:normal;line-height:1.25;font-weight:500;color:var(--xira)}

/* maydonlar */
.maydon{display:flex;flex-direction:column;gap:6px}
.maydon label{font-size:14px;color:var(--xira);font-weight:600}
.maydon input,.maydon textarea{width:100%;padding:14px 14px;border-radius:var(--r2);background:var(--karta);border:1.5px solid var(--chegara);color:var(--matn);font-size:17px;outline:none;transition:border-color .12s}
.maydon input:focus,.maydon textarea:focus{border-color:var(--oltin)}
.maydon textarea{min-height:120px;resize:none;line-height:1.4}
.maydon .hisob{align-self:flex-end;font-size:12px;color:var(--xira2);font-variant-numeric:tabular-nums}
.maydon.xato input,.maydon.xato textarea{border-color:var(--marjon)}
.xato-yozuv{color:var(--marjon);font-size:13px;min-height:18px}

/* surat */
.surat-quti{display:flex;gap:14px;align-items:center;padding:12px;border-radius:var(--r2);background:var(--karta);border:1.5px dashed var(--chegara)}
.surat-quti img{width:72px;height:96px;object-fit:cover;border-radius:10px;background:var(--karta2)}
.surat-quti .bosh-surat{width:72px;height:96px;border-radius:10px;background:var(--karta2);display:grid;place-items:center;font-size:28px}
.surat-quti .ich{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.surat-quti input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* matn */
.matn-karta{padding:18px 16px;border-radius:var(--r);background:var(--karta);border:1px solid var(--chegara);box-shadow:var(--soya)}
.matn-karta .bolim{color:var(--oltin);font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;margin:14px 0 6px}
.matn-karta .bolim:first-child{margin-top:0}
.matn-karta .qator{font-size:17px;line-height:1.5}
.matn-karta .qator b{color:var(--oltin);font-weight:800}
.matn-karta textarea{width:100%;min-height:360px;padding:12px;border-radius:12px;background:var(--fon);border:1.5px solid var(--chegara);color:var(--matn);font-size:16px;line-height:1.5;resize:vertical;outline:none}
.matn-karta textarea:focus{border-color:var(--oltin)}
.kutish{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 16px;text-align:center}
.kutish .aylana{width:56px;height:56px;border-radius:50%;border:4px solid var(--karta2);border-top-color:var(--oltin);animation:ayl .9s linear infinite}
@keyframes ayl{to{transform:rotate(360deg)}}
.kutish .h2{margin:0}
.kutish-nota{font-size:40px;animation:sakra 1.6s ease-in-out infinite}
@keyframes sakra{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.kutish-nota{animation:none}}

/* to'lov */
.tolov-karta{padding:18px;border-radius:var(--r);background:linear-gradient(160deg,#2A1F4D,#1A1631);border:1px solid var(--chegara)}
.tolov-summa{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tolov-summa b{font-size:28px;font-weight:900;color:var(--oltin);font-variant-numeric:tabular-nums}
.tolov-karta .raqam{margin-top:14px;display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;border-radius:12px;background:rgba(0,0,0,.25);font-size:18px;letter-spacing:.6px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tolov-karta .raqam span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tolov-karta .raqam button{margin-left:auto;padding:8px 12px;border-radius:10px;background:var(--karta2);font-size:13px;font-weight:700;letter-spacing:0;white-space:nowrap}
.tolov-karta .raqam button:active{transform:scale(.96);background:var(--chegara)}
.tolov-karta .raqam button.ok{background:var(--yashil);color:#0B2A17}
.tolov-ega{margin-top:8px;color:var(--xira);font-size:14px}

/* holat kartasi */
.holat{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r);background:var(--karta);border:1px solid var(--chegara)}
.holat .qadamlar{display:flex;flex-direction:column;gap:8px}
.holat .q{display:flex;gap:10px;align-items:center;color:var(--xira2);font-size:15px}
.holat .q i{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--karta2);display:grid;place-items:center;font-size:12px;font-style:normal}
.holat .q.otdi{color:var(--xira)}.holat .q.otdi i{background:var(--yashil);border-color:var(--yashil);color:#0B2A17}
.holat .q.hozir{color:var(--matn);font-weight:700}.holat .q.hozir i{border-color:var(--oltin);animation:puls 1.2s ease-in-out infinite}
@keyframes puls{0%,100%{box-shadow:0 0 0 0 rgba(245,184,75,.5)}50%{box-shadow:0 0 0 6px rgba(245,184,75,0)}}
.tayyor-media video{width:100%;aspect-ratio:9/16;max-height:60dvh;border-radius:var(--r);background:#000;object-fit:cover}
.tayyor-media audio{width:100%;margin-top:10px}
.havola-quti{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--karta2);font-size:14px;color:var(--xira);overflow:hidden}
.havola-quti span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ro'yxat */
.royxat{display:flex;flex-direction:column;gap:10px}
.royxat-el{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r2);background:var(--karta);border:1px solid var(--chegara)}
.royxat-el:active{background:var(--karta2);transform:scale(.99)}
.royxat-el .belgi{font-size:22px}
.royxat-el .ich{flex:1;min-width:0}
.royxat-el .ism{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.royxat-el .h{font-size:13px;color:var(--xira)}
.royxat-el .h.tayyor{color:var(--yashil)}.royxat-el .h.xato{color:var(--marjon)}

/* ---------- pastki CTA (sticky, fixed emas) ---------- */
.past{position:sticky;bottom:0;display:flex;gap:10px;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--fon) 70%,rgba(14,11,31,0))}
.tugma{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:12px 18px;border-radius:16px;font-size:17px;font-weight:800;text-decoration:none;
  transition:transform .12s,filter .12s,opacity .12s;user-select:none}
.tugma-oltin{background:var(--oltin);color:var(--oltin-matn);box-shadow:0 8px 24px rgba(245,184,75,.25)}
.tugma-oltin:active{transform:scale(.97);filter:brightness(.9)}
.tugma-oltin[disabled]{opacity:.45;box-shadow:none;transform:none;filter:none}
.tugma-kul{background:var(--karta);color:var(--matn);flex:0 0 auto;min-width:54px;padding:12px 16px;border:1px solid var(--chegara)}
.tugma-kul:active{transform:scale(.97);background:var(--karta2)}
.tugma-qator{display:flex;flex-direction:column;gap:10px}
.tugma-ikkilamchi{min-height:48px;background:var(--karta);border:1.5px solid var(--chegara);color:var(--matn);font-size:15px;border-radius:14px}
.tugma-ikkilamchi:active{transform:scale(.97);background:var(--karta2)}
.tugma-ikkilamchi[disabled]{opacity:.45}

/* toast */
.toast{position:fixed;left:16px;right:16px;bottom:calc(90px + env(safe-area-inset-bottom));padding:12px 14px;border-radius:12px;background:#2C2650;color:var(--matn);font-size:15px;box-shadow:var(--soya);
  opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:9}
.toast.korin{opacity:1;transform:none}
.toast.xato{background:#4A2030}

/* ---------- sovg'a sahifasi ---------- */
body.sovga{align-items:center}
.sovga-ich{width:100%;max-width:560px;padding:20px 16px 40px;display:flex;flex-direction:column;gap:14px}
.logo-qator{display:flex;align-items:center;gap:10px;font-weight:800}
.logo-qator img{border-radius:50%}
.sovga-yorliq{color:var(--oltin);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:13px;margin-top:10px}
.sovga-h1{font-size:40px;font-weight:900;line-height:1.1;letter-spacing:-.5px;word-break:break-word}
.sovga-izoh{color:var(--xira)}
.karta{padding:16px;border-radius:var(--r);background:var(--karta);border:1px solid var(--chegara)}
.karta h2{font-size:14px;color:var(--xira);font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:10px}
.sovga-video{padding:0;overflow:hidden}
.sovga-video video{display:block;width:100%;aspect-ratio:9/16;background:#000}
.karta audio{width:100%}
.havola{display:inline-block;margin-top:8px;color:var(--oltin);font-weight:700;text-decoration:none}
.havola:active{opacity:.6}
.sovga-sozlar{font-size:17px;line-height:1.55}
.sovga-sozlar .bosh{height:14px}
.sovga-cta{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;padding:24px 16px;border-radius:var(--r);background:linear-gradient(160deg,#2A1F4D,#1A1631);border:1px solid var(--chegara)}
.sovga-cta .tugma{width:100%}