/* KiOVO Mini App.
Brend: logotipdagi qizil (#AB0A0C) va och yashil (#BDDB7D), iliq
krem fon. Asosiy tokenlar, shrift va harakat `/umumiy/brend.css`
dan keladi — sayt, skaner va admin panel bilan BIR XIL. Bu yerda
faqat ilovaning o'z o'zgaruvchilari. --urgu ni admin tanlagan
mavzudan JS qo'yishi mumkin.
Ikkinchi darajali matn (--och) ham kamida 4.5:1 kontrastda —
ilgari #9a9aa3 oq fonda 2.7:1 edi va mayda yozuv o'qilmasdi. */
:root{
--fon:#fbf8f3; --panel:#fff; --matn:#1d1514; --kul:#5e5451; --och:#766b67;
--chiziq:#ece5dc; --chiziq-och:#f5f0e9;
--urgu:#ab0a0c; --urgu-och:#fbe9e9; --urgu-tim:#860709;
/* Sarlavha (shapka) foni — brend qizili. Admin mavzusidagi «asosiy» rang */
--asosiy:#ab0a0c; --asosiy-matn:#fff;
--qidiruv-fon:#fff; --qidiruv-matn:#1d1514; --qidiruv-och:#766b67;
/* Och yashil — logotip rangi. OQ fonda MATN bo'la olmaydi (1.5:1),
shuning uchun matn uchun --lime-tim, fon uchun --lime-och */
--lime:#bddb7d; --lime-och:#f0f7df; --lime-tim:#4f6e1f;
--yashil:#4f6e1f; --yashil-och:#eef6dc; --qizil:#c0161b; --qizil-och:#fbe9e9;
--sariq:#8a5f08; --sariq-och:#fbf2dd;
--kok:#2563c9; --kok-och:#e8f0fd;
/* Baho shkalasi — qizildan yashilgacha BESHTA boshqa-boshqa rang.
Ilgari `alo` bilan `yaxshi` ikkalasi --yashil, `past` bilan
`zaif` ikkalasi --qizil edi: yettita qatordan uchtasi bir xil
bo'lib chiqar va shkala hech narsa ko'rsatmasdi. */
--baho-zaif:#d81f26; --baho-past:#e8720f; --baho-orta:#b07d16;
--baho-yaxshi:#6f9c1f; --baho-alo:#2e7d55;
--r:16px; --r-katta:20px; --r-kichik:11px;
--sh:0 1px 2px rgba(59,3,4,.04), 0 4px 14px -6px rgba(59,3,4,.08);
--sh-katta:0 12px 32px -12px rgba(59,3,4,.28);
--past:76px;
/* Bitta shrift — logotip ham geometrik sans. Ilgari natija balli
«Instrument Serif» da yozilardi va brenddan ajralib turardi. */
--sans:var(--k-shrift);
--serif:var(--k-shrift);
}
/* Tungi rejim: sof qora emas — qizilga moyil to'q fon. Brend tungida
ham tanilsin. Och yashil qora fonda 11:1 — eng yorqin urg'u. */
@media (prefers-color-scheme:dark){:root:not([data-mavzu="kunduzgi"]){
--fon:#120b0b; --panel:#1c1414; --matn:#f6efed; --kul:#b6aaa7; --och:#8f8380;
--chiziq:#2f2423; --chiziq-och:#251b1b;
--urgu:#f0575a; --urgu-och:#2c1516; --urgu-tim:#f58a8c;
--asosiy:#5a0607; --asosiy-matn:#fff;
--qidiruv-fon:#2a1c1c; --qidiruv-matn:#f6efed; --qidiruv-och:#a89b98;
--lime:#bddb7d; --lime-och:#1f2614; --lime-tim:#bddb7d;
--yashil:#bddb7d; --yashil-och:#1d2414; --qizil:#f0575a; --qizil-och:#2c1516;
--sariq:#e0b45a; --sariq-och:#2a2112;
--kok:#6b9df0; --kok-och:#141d2b;
--baho-zaif:#ef5057; --baho-past:#ff8a3d; --baho-orta:#d9ab4a;
--baho-yaxshi:#a8d84b; --baho-alo:#5cbb8b;
--sh:0 1px 2px rgba(0,0,0,.3); --sh-katta:0 12px 32px -12px rgba(0,0,0,.6);
}}
:root[data-mavzu="tungi"]{
--fon:#120b0b; --panel:#1c1414; --matn:#f6efed; --kul:#b6aaa7; --och:#8f8380;
--chiziq:#2f2423; --chiziq-och:#251b1b;
--urgu:#f0575a; --urgu-och:#2c1516; --urgu-tim:#f58a8c;
--asosiy:#5a0607; --asosiy-matn:#fff;
--qidiruv-fon:#2a1c1c; --qidiruv-matn:#f6efed; --qidiruv-och:#a89b98;
--lime:#bddb7d; --lime-och:#1f2614; --lime-tim:#bddb7d;
--yashil:#bddb7d; --yashil-och:#1d2414; --qizil:#f0575a; --qizil-och:#2c1516;
--sariq:#e0b45a; --sariq-och:#2a2112;
--kok:#6b9df0; --kok-och:#141d2b;
--baho-zaif:#ef5057; --baho-past:#ff8a3d; --baho-orta:#d9ab4a;
--baho-yaxshi:#a8d84b; --baho-alo:#5cbb8b;
--sh:0 1px 2px rgba(0,0,0,.3); --sh-katta:0 12px 32px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Chizma ikon: rangni matndan oladi, o'lchamda sakramaydi */
.ik{display:block;flex:0 0 auto}
i[data-ik]{display:inline-flex;align-items:center;justify-content:center;
flex:0 0 auto;color:inherit;font-style:normal}
html,body{margin:0;padding:0}
body{
background:var(--fon);color:var(--matn);
font:15.5px/1.55 var(--sans);
padding-bottom:calc(var(--past) + env(safe-area-inset-bottom));
overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;
}
h1{font-family:var(--sans);font-size:29px;line-height:1.1;margin:0;
font-weight:800;letter-spacing:-.03em}
h2{font-family:var(--sans);font-size:21px;margin:0;font-weight:800;letter-spacing:-.025em}
h3{font-size:15.5px;margin:0;font-weight:700;letter-spacing:-.005em}
p{margin:0 0 12px}
a{color:var(--urgu)}
.yashirin{display:none!important}
.mayda{font-size:14px;color:var(--kul)}
.ozgina{font-size:13px;color:var(--och)}
/* ---------- Tuzilma: edge-to-edge ---------- */
.ekran{max-width:640px;margin:0 auto}
.ichki{padding:0 16px} /* faqat matn uchun chekka bo'shliq */
.bosh{padding:20px 16px 12px}
.bosh .brend{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--och);
font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.bosh .brend i[data-ik]{color:var(--urgu)}
.bosh h1{margin-top:8px}
.bosh .izoh{color:var(--kul);font-size:14px;margin-top:5px}
/* ---------- Karta ---------- */
.karta{background:var(--panel);border:1px solid var(--chiziq);border-radius:var(--r-katta);
padding:18px;margin:0 16px 14px;box-shadow:var(--sh)}
.karta.tekis{margin:0 0 14px;border-radius:0;border-left:0;border-right:0}
.karta-bosh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
/* ---------- Qidiruv ---------- */
.qidiruv-quti{position:sticky;top:0;z-index:30;background:var(--fon);
padding:10px 16px 12px;border-bottom:1px solid transparent;transition:border-color .2s}
.qidiruv-quti.suzuvchi{border-bottom-color:var(--chiziq)}
.qidiruv{display:flex;align-items:center;gap:10px;background:var(--panel);
border:1px solid var(--chiziq);border-radius:14px;padding:0 14px}
.qidiruv i[data-ik]{color:var(--och)}
.qidiruv input{flex:1;border:0;background:none;color:var(--matn);font:inherit;
font-size:15.5px;padding:14px 0;outline:none;min-width:0;
/* Brauzerning o'z bezagini o'chiramiz: Android'da ichki ramka va
IKKINCHI tozalash tugmasi chiqib qolardi */
-webkit-appearance:none;appearance:none;border-radius:0;box-shadow:none}
.qidiruv input::-webkit-search-cancel-button,
.qidiruv input::-webkit-search-decoration,
.qidiruv input::-webkit-search-results-button{-webkit-appearance:none;display:none}
.qidiruv:focus-within{border-color:var(--urgu)}
.qidiruv input::placeholder{color:var(--och)}
.qidiruv .tozala{border:0;background:none;color:var(--och);font-size:19px;
cursor:pointer;padding:6px 2px;line-height:1;flex:0 0 auto}
/* ---------- Skaner chaqirig'i (full-bleed) ---------- */
.chaqiriq{display:flex;align-items:center;gap:14px;width:calc(100% - 32px);margin:4px 16px 16px;
text-align:left;background:linear-gradient(135deg,var(--urgu),var(--urgu-tim));
color:#fff;border:0;border-radius:var(--r);padding:18px;box-shadow:var(--sh);cursor:pointer}
.chaqiriq .belgi{flex:0 0 auto;width:44px;height:44px;border-radius:13px;
background:rgba(255,255,255,.14);display:grid;place-items:center}
.chaqiriq b{display:block;font-size:18px;font-weight:650;margin-bottom:2px}
.chaqiriq span{font-size:14.5px;opacity:.9;line-height:1.35}
.chaqiriq .oq{margin-left:auto;opacity:.7;display:grid;place-items:center}
/* ---------- Lenta (kategoriya / filtr) ---------- */
.lenta{display:flex;gap:8px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none}
.lenta::-webkit-scrollbar{display:none}
.lenta button{flex:0 0 auto;background:var(--panel);border:1px solid var(--chiziq);
color:var(--kul);padding:0 15px;height:34px;border-radius:99px;
font:600 13.5px/1 inherit;display:flex;align-items:center;cursor:pointer}
.lenta button.tanlangan{background:var(--matn);color:var(--fon);border-color:var(--matn)}
.lenta.mayda-lenta button{padding:8px 13px;font-size:14px}
/* ---------- Mahsulot to'ri (edge-to-edge) ---------- */
.tor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 16px}
@media (min-width:560px){.tor{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mahsulot{background:var(--panel);border:1px solid var(--chiziq);border-radius:var(--r);
overflow:hidden;display:flex;flex-direction:column;cursor:pointer;
padding:0;text-align:left;font:inherit;color:inherit;box-shadow:var(--sh)}
.rasm{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;position:relative;
background:linear-gradient(160deg,var(--chiziq-och),var(--chiziq));color:var(--och)}
.rasm img{width:100%;height:100%;object-fit:cover;display:block}
.rasm .nishonlar{position:absolute;top:8px;left:8px;display:flex;gap:5px;flex-wrap:wrap}
.nishon-kichik{background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:700;
padding:3px 8px;border-radius:99px;backdrop-filter:blur(4px)}
.nishon-kichik.yoq{background:var(--qizil)}
.mtan{padding:11px 12px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.mbrend{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--och);font-weight:700}
.mnom{font-size:13.5px;font-weight:500;line-height:1.35;flex:1;margin:4px 0 9px}
.mnarx{font-weight:700;font-size:15px}
.mnarx s{color:var(--och);font-weight:400;font-size:13px;margin-left:5px}
/* ---------- Ro'yxat qatori (savat, buyurtma) ---------- */
.qtr{display:flex;justify-content:space-between;gap:14px;padding:12px 0;
border-bottom:1px solid var(--chiziq)}
.qtr:last-child{border-bottom:0}
.qtr .k{color:var(--kul)}
.qtr .v{text-align:right;font-weight:600}
.qtr.jami{border-bottom:0;padding-top:14px;margin-top:2px;border-top:1px solid var(--chiziq)}
.qtr.jami .k{font-weight:650;color:var(--matn)}
.qtr.jami .v{font-size:20px;font-weight:700}
.qtr .chegirma{color:var(--yashil)}
/* ---------- Savat elementi (jadval emas!) ---------- */
.savat-qator{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--chiziq);align-items:flex-start}
.savat-qator:last-child{border-bottom:0}
.savat-rasm{flex:0 0 62px;height:62px;border-radius:12px;overflow:hidden;display:grid;
place-items:center;background:linear-gradient(160deg,var(--chiziq-och),var(--chiziq));
color:var(--och)}
.savat-rasm img{width:100%;height:100%;object-fit:cover}
.savat-tan{flex:1;min-width:0}
.savat-nom{font-weight:600;font-size:15.5px;line-height:1.3}
.savat-brend{font-size:13px;color:var(--och);margin-top:1px}
.savat-past{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.soni{display:inline-flex;align-items:center;gap:2px;background:var(--fon);
border:1.5px solid var(--chiziq);border-radius:10px;overflow:hidden}
.soni button{width:36px;height:34px;border:0;background:none;color:var(--matn);
font-size:19px;line-height:1;cursor:pointer}
.soni span{min-width:26px;text-align:center;font-weight:650;font-size:15px}
.savat-narx{font-weight:700;font-size:16px;white-space:nowrap}
/* ---------- Tugmalar ---------- */
button,.tugma{font:inherit;border:0;cursor:pointer;border-radius:14px;font-weight:700}
.asosiy,.ikkilamchi{width:100%;padding:15px;font-size:16px;min-height:54px;
display:flex;align-items:center;justify-content:center;gap:9px;letter-spacing:-.005em}
.asosiy{background:var(--urgu);color:#fff}
.ikkilamchi{background:var(--panel);color:var(--matn);border:1.5px solid var(--chiziq)}
button:active{transform:scale(.985);opacity:.85}
button:disabled{opacity:.45;transform:none}
/* ---------- Yopishqoq pastki panel (savat/checkout) ---------- */
.yopishqoq{position:fixed;left:0;right:0;bottom:calc(var(--past) + env(safe-area-inset-bottom));
z-index:35;background:var(--panel);border-top:1px solid var(--chiziq);
padding:12px 16px calc(12px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto}
.yopishqoq .satr{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.yopishqoq .satr b{font-size:20px}
/* ---------- Forma ---------- */
label{display:block;font-size:15px;color:var(--matn);margin:18px 0 7px;font-weight:600}
label .yordam{display:block;font-weight:400;font-size:13.5px;color:var(--och);margin-top:2px}
input,textarea,select{width:100%;font:inherit;font-size:17px;padding:14px;color:var(--matn);
background:var(--fon);border:1.5px solid var(--chiziq);border-radius:12px}
/* Odatiy maydonlar fokus halqasini oladi. Qidiruv esa YO'Q: u ramkali
qutining ICHIDA turadi va halqa quti ichida ikkinchi ramka bo'lib
ko'rinardi — konteyner o'zi :focus-within da rang o'zgartiradi. */
input:focus,textarea:focus{outline:2.5px solid var(--urgu);outline-offset:-1px}
.qidiruv input:focus{outline:none}
textarea{resize:vertical;min-height:86px}
.xato-matn{color:var(--qizil);font-size:15px;margin-top:10px;font-weight:500}
/* ---------- Tanlov (to'lov usuli) ---------- */
.tanlov{display:flex;flex-direction:column;gap:9px;margin-top:8px}
.tanlov button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
padding:15px;border:1.5px solid var(--chiziq);background:var(--panel);border-radius:13px;
color:var(--matn);font-weight:500;font-size:16px}
.tanlov button.tanlangan{border-color:var(--urgu);background:var(--urgu-och);border-width:2px}
.tanlov .belgi{display:grid;place-items:center;color:var(--kul)}
.tanlov b{display:block;font-weight:650}
.tanlov small{color:var(--kul);font-size:13.5px}
/* ---------- Karta raqami ---------- */
.karta-raqam{background:linear-gradient(135deg,var(--urgu),var(--urgu-tim));color:#fff;
border-radius:var(--r);padding:18px;margin-top:12px}
.karta-raqam .raqam{font-size:22px;font-weight:700;letter-spacing:.06em;margin:8px 0 4px;
font-variant-numeric:tabular-nums}
.karta-raqam .egasi{font-size:14px;opacity:.85}
.karta-raqam button{margin-top:12px;width:100%;background:rgba(255,255,255,.18);color:#fff;
padding:11px;border-radius:10px;font-size:15px}
/* ---------- Yorliqlar ---------- */
.yorliq{display:inline-block;padding:4px 11px;border-radius:99px;font-size:13px;
font-weight:650;background:var(--urgu-och);color:var(--urgu)}
.yorliq.yengil{background:var(--yashil-och);color:var(--yashil)}
.yorliq.ortacha{background:var(--sariq-och);color:var(--sariq)}
.yorliq.kuchli{background:var(--qizil-och);color:var(--qizil)}
/* ---------- Tahlil ---------- */
.shkala{height:10px;background:var(--chiziq);border-radius:99px;overflow:hidden;margin-top:12px}
.shkala i{display:block;height:100%;background:var(--urgu);border-radius:99px;transition:width .6s}
.ball{font-family:var(--serif);font-size:44px;font-weight:400;letter-spacing:-.01em;line-height:1}
.ball small{font-size:17px;color:var(--och);font-weight:400}
.muammo-blok{padding:15px 0;border-bottom:1px solid var(--chiziq)}
.muammo-blok:last-of-type{border-bottom:0}
.muammo-bosh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.muammo-bosh .nuqta{font-size:15px}
.muammo-bosh .nom{font-weight:650;font-size:16.5px}
.olchov{display:flex;align-items:center;gap:10px;margin:9px 0 10px}
.olchov-chiziq{flex:1;height:9px;background:var(--chiziq);border-radius:99px;overflow:hidden}
.olchov-chiziq i{display:block;height:100%;border-radius:99px;transition:width .6s ease}
.olchov-chiziq i.d1{background:var(--yashil)}
.olchov-chiziq i.d2{background:var(--sariq)}
.olchov-chiziq i.d3{background:var(--qizil)}
.olchov-chiziq i.prognoz-rang{background:var(--sariq)}
.olchov-foiz{font-weight:700;font-size:15px;min-width:42px;text-align:right;
font-variant-numeric:tabular-nums}
.satr-izoh{display:flex;gap:8px;font-size:14.5px;color:var(--kul);line-height:1.5;margin-top:5px}
.satr-izoh b{color:var(--matn);font-weight:650}
.yechim{display:flex;gap:8px;font-size:14.5px;line-height:1.5;margin-top:9px;
background:var(--yashil-och);color:var(--yashil);padding:11px 13px;border-radius:11px}
.yechim b{font-weight:700}
.diqqat{display:flex;gap:8px;font-size:14px;line-height:1.5;margin-top:7px;
background:var(--sariq-och);color:var(--sariq);padding:10px 13px;border-radius:11px}
.bosqich{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--chiziq)}
.bosqich:last-of-type{border-bottom:0}
.raqam{flex:0 0 34px;height:34px;border-radius:50%;background:var(--urgu);color:#fff;
display:grid;place-items:center;font-size:16px;font-weight:700}
.qadam{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--och);font-weight:700}
.bnom{font-weight:650;font-size:16.5px;margin-top:3px}
.bbrend{color:var(--kul);font-size:15px;margin-top:2px}
.nega{margin-top:11px;padding:13px 15px;background:var(--urgu-och);border-radius:12px;font-size:15.5px}
.nega b{color:var(--urgu)}
.qollash{margin-top:9px;font-size:14.5px;color:var(--kul)}
/* ---------- Pastki menyu ----------
Faol bo'lim ikonkasi orqasida OCH YASHIL «kapsula» — Android'ning
o'z ilovalaridagi kabi, qayerdaligingiz bir qarashda ko'rinadi. */
.menyu{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;background:var(--panel);
border-top:1px solid var(--chiziq);padding-bottom:env(safe-area-inset-bottom);
max-width:640px;margin:0 auto;box-shadow:0 -6px 24px -18px rgba(59,3,4,.4)}
.menyu button{flex:1;background:none;border:0;padding:8px 2px 9px;border-radius:0;
color:var(--och);font-size:12px;font-weight:650;display:grid;gap:4px;justify-items:center;
position:relative;min-height:var(--past)}
.menyu button .ikon{display:grid;place-items:center;width:58px;height:32px;line-height:0;
border-radius:99px;transition:background var(--k-orta) var(--k-egri),transform var(--k-tez)}
.menyu button.tanlangan{color:var(--urgu);font-weight:800}
.menyu button.tanlangan .ikon{background:var(--lime);color:#3b0304;
animation:k-kattalash var(--k-orta) var(--k-sakra)}
.menyu button:active .ikon{transform:scale(.9)}
.menyu .nishon{position:absolute;top:4px;left:50%;margin-left:6px;background:var(--urgu);
color:#fff;font-size:12px;font-weight:800;min-width:20px;height:20px;border-radius:99px;
display:grid;place-items:center;padding:0 5px;font-style:normal;
border:2px solid var(--panel)}
/* ---------- Modal ----------
Oyna pastdan SIRG'ALIB chiqadi, parda sekin qorayadi — keskin
paydo bo'lish ko'zni charchatardi. */
.modal{position:fixed;inset:0;z-index:60;display:grid;align-items:end}
.modal .parda{position:absolute;inset:0;background:rgba(20,6,6,.52);
backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal:not(.yashirin) .parda{animation:k-sochil var(--k-orta) ease both}
.modal .oyna{position:relative;background:var(--panel);border-radius:26px 26px 0 0;
max-height:92vh;overflow-y:auto;max-width:640px;margin:0 auto;width:100%;
padding-bottom:calc(24px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.modal:not(.yashirin) .oyna{animation:k-pastdan var(--k-sekin) var(--k-egri) both}
.modal .dasta{position:absolute;left:50%;top:8px;z-index:6;transform:translateX(-50%);
width:42px;height:5px;background:rgba(255,255,255,.75);border-radius:99px;
box-shadow:0 0 0 1px rgba(0,0,0,.06)}
/* Yopish tugmasi oynaning ustida suzib turadi — rasm ustida ham ko'rinsin */
.modal .oyna-yop{position:absolute;top:14px;right:14px;z-index:5;
width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
background:rgba(20,6,6,.5);color:#fff;font-size:17px;line-height:1;
display:grid;place-items:center;backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px)}
.modal .oyna-yop:active{background:rgba(20,6,6,.7)}
/* Mahsulot rasmi — katta kvadrat, butunligicha (kesilmaydi) */
.oyna-rasm{position:relative;width:100%;aspect-ratio:1;max-height:48vh;
display:grid;place-items:center;background:var(--chiziq-och);color:var(--och);
border-radius:26px 26px 0 0;overflow:hidden}
.oyna-rasm img{width:100%;height:100%;object-fit:contain;display:block;
animation:k-sochil var(--k-sekin) ease both}
.oyna-rasm.bosh{aspect-ratio:4/3;color:color-mix(in srgb,var(--urgu) 45%,transparent)}
.oyna-rasm .yurak{top:14px;left:14px;right:auto}
/* ---------- Skaner ---------- */
.tushirish{border:2.5px dashed var(--chiziq);border-radius:var(--r);padding:36px 20px;
text-align:center;background:var(--panel);cursor:pointer}
.tushirish .belgi{display:grid;place-items:center;margin:0 auto;width:60px;height:60px;
border-radius:50%;background:var(--urgu-och);color:var(--urgu)}
.tushirish b{display:block;font-size:18px;margin-top:10px}
.tushirish p{color:var(--kul);font-size:15px;margin:6px 0 0}
.oldindan{width:100%;border-radius:var(--r);display:block}
.talab{display:flex;gap:11px;padding:9px 0;font-size:16px;color:var(--kul);align-items:flex-start}
.talab .b{flex:0 0 auto;display:grid;place-items:center;margin-top:1px;color:var(--matn)}
.talab b{color:var(--matn);font-weight:600}
.yuklanmoqda{text-align:center;padding:52px 20px;color:var(--kul)}
.aylana{width:38px;height:38px;border:3px solid var(--chiziq);border-top-color:var(--urgu);
border-radius:50%;margin:0 auto 18px;animation:ayl .8s linear infinite}
@keyframes ayl{to{transform:rotate(360deg)}}
.bosh-holat{text-align:center;padding:56px 24px;color:var(--kul);font-size:16px}
.bosh-holat .belgi{display:grid;place-items:center;margin:0 auto 14px;color:var(--och)}
.ogoh{font-size:14.5px;color:var(--kul);background:var(--urgu-och);padding:14px 16px;
border-radius:12px;line-height:1.55}
.ogoh.yashil{background:var(--yashil-och);color:var(--yashil)}
/* ---------- Filtr menyusi (3 nuqta) ---------- */
.qidiruv-satr{display:flex;gap:9px;align-items:stretch}
.qidiruv-satr .qidiruv{flex:1;min-width:0}
.uch-nuqta{flex:0 0 auto;width:52px;background:var(--panel);border:1px solid var(--chiziq);
border-radius:14px;color:var(--matn);display:grid;place-items:center;position:relative}
.uch-nuqta.faol{border-color:var(--urgu);color:var(--urgu)}
.uch-nuqta .belgi-nuqta{position:absolute;top:8px;right:9px;width:8px;height:8px;
border-radius:50%;background:var(--urgu)}
.filtr-satr{display:flex;gap:7px;flex-wrap:wrap;padding:0 16px 12px}
.filtr-yorliq{display:inline-flex;align-items:center;gap:6px;background:var(--urgu-och);
color:var(--urgu);padding:6px 10px 6px 12px;border-radius:99px;font-size:13.5px;font-weight:600}
.filtr-yorliq button{background:none;border:0;color:inherit;font-size:15px;line-height:1;
padding:0;cursor:pointer;opacity:.7}
/* ---------- Tavsiya mahsuloti bosiladigan ---------- */
.bosqich-mahsulot{display:flex;gap:12px;align-items:center;width:100%;text-align:left;
background:var(--fon);border:1px solid var(--chiziq);border-radius:12px;padding:10px;
margin-top:9px;color:inherit;font:inherit;cursor:pointer}
.bosqich-mahsulot .kichik-rasm{flex:0 0 52px;height:52px;border-radius:10px;overflow:hidden;
display:grid;place-items:center;background:linear-gradient(160deg,var(--chiziq-och),var(--chiziq));
color:var(--och)}
.bosqich-mahsulot .kichik-rasm img{width:100%;height:100%;object-fit:cover}
.bosqich-mahsulot .oq{margin-left:auto;color:var(--och);flex:0 0 auto;display:grid;place-items:center}
/* ---------- Limit ko'rsatkichi ---------- */
.limit-satr{display:flex;align-items:center;gap:9px;background:var(--panel);
border:1px solid var(--chiziq);border-radius:12px;padding:11px 14px;margin:0 16px 14px;
font-size:14.5px;color:var(--kul)}
.limit-satr b{color:var(--matn)}
.limit-satr.tugadi{background:var(--sariq-och);border-color:transparent;color:var(--sariq)}
/* ---------- Ulashish rasmi ---------- */
/* Uzun ro'yxatlarda chizishni tejash */
.karta{content-visibility:auto;contain-intrinsic-size:auto 200px}
/* ---------- Ro'yxatdan tanlash ---------- */
.tanlov-tugma{display:flex;align-items:center;justify-content:space-between;width:100%;
padding:14px;background:var(--fon);border:1.5px solid var(--chiziq);border-radius:12px;
color:var(--matn);font:inherit;font-size:17px;text-align:left}
.tanlov-tugma:disabled{opacity:.5}
.tanlov-tugma .oq{color:var(--och);font-size:20px}
.royxat{max-height:56vh;overflow-y:auto;margin:0 -4px}
.royxat-qator{display:flex;align-items:center;justify-content:space-between;width:100%;
padding:15px 12px;background:none;border:0;border-bottom:1px solid var(--chiziq);
color:var(--matn);font:inherit;font-size:16.5px;text-align:left;border-radius:0}
.royxat-qator:last-child{border-bottom:0}
.royxat-qator.tanlangan{color:var(--urgu);font-weight:650}
.royxat-qator .belgi-ok{color:var(--urgu);font-size:18px}
/* ---------- Yetkazish tanlovi ---------- */
.tanlov-qator{width:100%;display:flex;align-items:center;justify-content:space-between;
gap:12px;background:var(--panel);border:1.5px solid var(--chiziq);border-radius:14px;
padding:13px 15px;margin-top:9px;text-align:left;cursor:pointer;color:var(--matn);font:inherit}
.tanlov-qator.tanlangan{border-color:var(--urgu);background:var(--urgu-och)}
.tanlov-qator .yt-chap{display:flex;flex-direction:column;gap:3px;min-width:0}
.tanlov-qator .yt-nom{font-weight:600;font-size:15.5px}
.tanlov-qator .yt-izoh{font-size:13px;color:var(--och)}
.tanlov-qator .yt-narx{font-weight:700;font-size:15.5px;white-space:nowrap}
.tanlov-qator.tanlangan .yt-narx{color:var(--urgu)}
/* ---------- Savat sarlavhasi ---------- */
.satr-bosh{display:flex;align-items:center;justify-content:space-between;
padding:0 4px 10px;gap:12px}
.matn-tugma{border:0;background:none;color:var(--qizil);font:inherit;font-size:14px;
cursor:pointer;padding:6px 2px;font-weight:500}
.matn-tugma:active{opacity:.55}
/* ---------- Bosishga darhol javob ---------- */
/* Tarmoq javobini kutmasdan, bosgan zahoti ko'rinadigan reaksiya. */
button,.mahsulot,.savat-qator .soni button,.tanlov-tugma,.tanlov-qator{
-webkit-tap-highlight-color:transparent;
transition:transform .09s ease, opacity .09s ease, background-color .15s ease}
button:active,.tanlov-tugma:active,.tanlov-qator:active{transform:scale(.97)}
.mahsulot:active{transform:scale(.985)}
.soni button:active{transform:scale(.88)}
/* Savat soni o'zgarganda nishon sakraydi */
@keyframes nishon-sakra{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.menyu .nishon{animation:nishon-sakra .28s ease}
/* Ekran almashganda yumshoq paydo bo'lish */
@keyframes ekran-kir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ekran:not(.yashirin){animation:ekran-kir .18s ease}
/* MASLAHAT bo'limi — transformsiz.
Sabab: ichida `position:fixed` yozish paneli bor. Ota-elementda
`transform` (hatto animatsiya davomida ham) ishlatilsa, `fixed`
element EKRANGA emas, o'sha ota-elementga nisbatan joylashadi.
Natijada panel bo'lim qutisining o'rtasida paydo bo'lib, animatsiya
tugagach pastga sakrardi — «centerda paydo bo'lib pastga tushdi»
degan holat aynan shu. Bu yerda faqat shaffoflik o'zgaradi. */
@keyframes ekran-kir-shaffof{from{opacity:0}to{opacity:1}}
#tab-maslahat.ekran:not(.yashirin){animation:ekran-kir-shaffof .18s ease}
@media (prefers-reduced-motion: reduce){
button,.mahsulot,.tanlov-tugma,.tanlov-qator{transition:none}
.menyu .nishon,.ekran:not(.yashirin){animation:none}
}
/* ---------- Bosqichma-bosqich yuklash ---------- */
.yana-nishon{grid-column:1/-1;display:grid;place-items:center;padding:22px 0}
.aylana.kichik{width:24px;height:24px;border-width:2.5px}
/* ---------- Profil ---------- */
.profil-raqamlar{display:flex;text-align:center}
.profil-raqamlar>div{flex:1;min-width:0;padding:2px 4px;border-right:1px solid var(--chiziq)}
.profil-raqamlar>div:last-child{border-right:0}
.profil-raqamlar b{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profil-raqamlar span{display:block;font-size:12.5px;color:var(--och);margin-top:3px}
/* Profildagi qatorlar tugma ham, havola ham bo'ladi — ko'rinishi bir xil */
#profil-tan .tanlov-tugma{margin-bottom:9px;text-decoration:none;color:var(--matn);
text-align:left;gap:12px}
#profil-tan .tanlov-tugma>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* ---------- Tahlil qilingan surat ---------- */
/* Suratga doira chizilmaydi: belgi qayerdaligi ro'yxatdagi «📍 zona»
matnida yozilgan, doira esa suratni bulg'ardi. */
.yuz-quti{position:relative;border-radius:14px;overflow:hidden;background:var(--fon);
aspect-ratio:1;display:block}
.yuz-quti img{width:100%;height:100%;object-fit:cover;display:block}
/* Ro'yxatdagi raqam — suratdagi doira raqami bilan bir xil */
.muammo-raqam{flex:0 0 auto;width:26px;height:26px;border-radius:13px;color:#fff;
font-size:14px;font-weight:700;line-height:26px;text-align:center;background:var(--och)}
.muammo-raqam.d1{background:var(--yashil)}
.muammo-raqam.d2{background:var(--sariq)}
.muammo-raqam.d3{background:var(--qizil)}
/* Skaner namunasi */
.namuna{width:100%;border-radius:12px;display:block}
/* ---------- Tavsiya lentasi ---------- */
.tavsiya-lenta{display:flex;gap:12px;overflow-x:auto;padding:2px 16px 14px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.tavsiya-lenta::-webkit-scrollbar{display:none}
.tavsiya-karta{flex:0 0 152px;scroll-snap-align:start;display:flex;flex-direction:column;
gap:2px;background:var(--panel);border:1px solid var(--chiziq);border-radius:var(--r);
box-shadow:var(--sh);padding:0 0 12px;text-align:left;overflow:hidden;color:var(--matn)}
.tk-rasm{position:relative;display:grid;place-items:center;aspect-ratio:1;font-size:40px;
overflow:hidden;margin-bottom:9px}
.tk-rasm img{width:100%;height:100%;object-fit:cover;display:block}
.tk-raqam{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:12px;
background:var(--urgu);color:#fff;font-style:normal;font-size:13px;font-weight:700;
line-height:24px;text-align:center}
.tk-bosqich{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--urgu);
padding:0 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-nom{font-size:14px;font-weight:600;line-height:1.3;padding:2px 11px 0;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-brend{font-size:12px;color:var(--och);padding:1px 11px 0}
.tk-narx{font-size:15px;font-weight:700;padding:5px 11px 0}
/* «Nega aynan shu» qatorlari */
.nega-satr{display:flex;gap:10px;align-items:flex-start;padding:11px 0;
border-bottom:1px solid var(--chiziq);font-size:14.5px;line-height:1.45;color:var(--kul)}
.nega-satr:last-of-type{border-bottom:0}
.nega-raqam{flex:0 0 auto;width:22px;height:22px;border-radius:11px;background:var(--urgu);
color:#fff;font-size:12.5px;font-weight:700;line-height:22px;text-align:center}
/* ---------- Bosh sahifadagi karusel ---------- */
/* Rasm o'zi gapiradi — ustiga matn yozilmaydi. Faqat kichik tugma
pastki o'ng chetda: rasmning asosiy qismini to'smaydi. */
/* Karusel butun kenglikni egallaydi: ilgari ikki chetida 16px oq yo'l
qolib, rasm "yopishmagan" bo'lib ko'rinardi. */
.karusel{position:relative;margin:14px 16px 0;border-radius:18px;
overflow:hidden;background:var(--chiziq-och);aspect-ratio:16/9}
.karusel-lenta{display:flex;height:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.karusel-tugma{position:absolute;right:14px;bottom:14px;display:inline-flex;
align-items:center;gap:6px;background:var(--urgu);color:#fff;border-radius:10px;
padding:0 13px;height:36px;font-size:13px;font-weight:700;
box-shadow:0 4px 14px rgba(0,0,0,.28)}
.karusel-nuqtalar{position:absolute;left:18px;bottom:14px;display:flex;gap:5px}
.karusel-nuqtalar i{width:5px;height:5px;border-radius:99px;background:rgba(255,255,255,.55)}
.karusel-nuqtalar i.faol{width:16px;background:#fff}
/* Muammo darajasi — emoji nuqta o'rniga */
.daraja{display:inline-block;width:9px;height:9px;border-radius:99px;flex:0 0 auto}
.daraja.d1{background:var(--yashil)} .daraja.d2{background:var(--sariq)}
.daraja.d3{background:var(--qizil)}
.muammo-bosh .nuqta{display:inline-flex;align-items:center}
/* Ikon va matn bir chiziqda tursin */
.qtr .k,.satr-izoh,.yechim,.diqqat,.ogoh,.talab,.limit-satr{align-items:center}
.ogoh .ik,.satr-izoh .ik,.yechim .ik,.diqqat .ik{display:inline-block;vertical-align:-3px}
/* ---------- Mahsulot oynasi ---------- */
/* Har ma'lumot alohida rangli plitka: muhimi ko'zga tashlanadi */
.narx-satr{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.narx-katta{font-size:24px;font-weight:800;letter-spacing:-.02em}
.narx-satr s{font-size:14px;color:var(--och);font-weight:400}
.chegirma-nishon{background:var(--qizil-och);color:var(--qizil);font-size:12px;
font-weight:700;padding:4px 9px;border-radius:99px}
.tavsif{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--kul)}
.plitkalar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.plitka{border-radius:14px;padding:11px 13px;display:flex;flex-direction:column;gap:3px}
.plitka-bosh{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.plitka-qiymat{font-size:14.5px;font-weight:700;line-height:1.3}
.plitka.urgu{background:var(--urgu-och);color:var(--urgu)}
.plitka.yashil{background:var(--yashil-och);color:var(--yashil)}
.plitka.qizil{background:var(--qizil-och);color:var(--qizil)}
.plitka.sariq{background:var(--sariq-och);color:var(--sariq)}
.plitka.kul{background:var(--chiziq-och);color:var(--kul)}
.bolim{margin-top:14px}
.bolim-bosh{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
letter-spacing:.02em;margin-bottom:7px}
.bolim p{margin:0;font-size:14.5px;line-height:1.55}
.bolim.quti-urgu,.bolim.quti-yashil,.bolim.quti-qizil{border-radius:14px;padding:13px 15px}
.bolim.quti-urgu{background:var(--urgu-och)}
.bolim.quti-urgu .bolim-bosh{color:var(--urgu)}
.bolim.quti-yashil{background:var(--yashil-och)}
.bolim.quti-yashil .bolim-bosh{color:var(--yashil)}
.bolim.quti-yashil p{color:var(--yashil)}
.bolim.quti-qizil{background:var(--qizil-och)}
.bolim.quti-qizil .bolim-bosh,.bolim.quti-qizil p{color:var(--qizil)}
.teglar{display:flex;flex-wrap:wrap;gap:6px}
.teg{background:var(--panel);border:1px solid var(--chiziq);border-radius:99px;
padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--kul)}
/* ================= AI MASLAHATCHI =================
Suhbat ekrani: yuqorida sarlavha, o'rtada xabarlar, pastda yozish paneli.
Yozish paneli menyu USTIDA turadi; input bosilganda menyu pastga
sirg'alib ketadi va panel ekran chetiga tushadi (klaviatura tepasiga). */
.suhbat-bosh{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:11px;
padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--chiziq)}
.suhbat-avatar{width:38px;height:38px;border-radius:99px;display:grid;place-items:center;
background:var(--urgu-och);color:var(--urgu);flex:0 0 auto}
.suhbat-nom{font-weight:750;font-size:15px;letter-spacing:-.01em}
.suhbat-holat{font-size:12.5px;color:var(--och);display:flex;align-items:center;gap:5px}
.suhbat-holat::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--yashil)}
.suhbat-holat.oylanmoqda::before{background:var(--sariq);animation:puls 1s infinite}
@keyframes puls{50%{opacity:.25}}
.suhbat-tozala{margin-left:auto;background:none;border:0;color:var(--och);padding:8px;
display:grid;place-items:center;border-radius:99px}
.suhbat{padding:16px 16px 8px;display:flex;flex-direction:column;gap:14px}
/* --- Xabar pufaklari --- */
.xabar{max-width:86%;display:flex;flex-direction:column;gap:9px;animation:xabar-kir .22s ease}
@keyframes xabar-kir{from{opacity:0;transform:translateY(8px)}}
.xabar.men{align-self:flex-end;align-items:flex-end}
.xabar.ai{align-self:flex-start;width:100%;max-width:100%}
.pufak{padding:12px 15px;font-size:15.5px;line-height:1.5;white-space:pre-wrap;
border-radius:18px}
.xabar.men .pufak{background:var(--urgu);color:#fff;border-bottom-right-radius:6px}
.xabar.ai .pufak{background:var(--panel);border:1px solid var(--chiziq);
border-bottom-left-radius:6px;max-width:86%}
/* Ogohlantiruvchi javob (tibbiy savol) — boshqa rangda, e'tibor tortsin */
.xabar.ai .pufak.tibbiy{background:var(--sariq-och);border-color:transparent}
.xabar.ai .pufak.tibbiy::before{content:"";display:block}
.pufak-belgi{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:750;
letter-spacing:.16em;text-transform:uppercase;color:var(--sariq);margin-bottom:6px}
/* --- «Yozmoqda» nuqtalari --- */
.nuqtalar{display:flex;gap:5px;padding:15px}
.nuqtalar span{width:7px;height:7px;border-radius:99px;background:var(--och);
animation:nuq .9s infinite}
.nuqtalar span:nth-child(2){animation-delay:.15s}
.nuqtalar span:nth-child(3){animation-delay:.3s}
@keyframes nuq{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* --- Tavsiya qilingan mahsulot kartasi --- */
.tavsiyalar{display:flex;flex-direction:column;gap:9px}
.tavsiya-bosh{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:750;
letter-spacing:.16em;text-transform:uppercase;color:var(--och);padding-left:2px}
.tavsiya-bosh i[data-ik]{color:var(--urgu)}
.t-karta{display:flex;gap:12px;padding:11px;background:var(--panel);
border:1px solid var(--chiziq);border-radius:16px;align-items:flex-start;
text-align:left;width:100%;color:inherit;font:inherit;position:relative}
.t-karta:active{background:var(--chiziq-och)}
.t-karta .rasm{width:70px;height:70px;flex:0 0 auto;border-radius:12px;overflow:hidden;
background:var(--chiziq-och);display:grid;place-items:center;color:var(--och);
border:0;aspect-ratio:auto}
.t-karta .rasm img{width:100%;height:100%;object-fit:cover;display:block}
.t-ich{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.t-brend{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--och)}
.t-nom{font-weight:650;font-size:14.5px;line-height:1.3;letter-spacing:-.01em}
.t-sabab{font-size:13.5px;line-height:1.45;color:var(--kul);background:var(--urgu-och);
border-radius:10px;padding:7px 9px;margin-top:4px}
.t-past{display:flex;align-items:center;gap:10px;margin-top:6px}
.t-narx{font-weight:800;font-size:15px;letter-spacing:-.01em}
.t-narx s{font-weight:500;font-size:12.5px;color:var(--och);margin-left:6px}
.t-qosh{margin-left:auto;flex:0 0 auto;width:36px;height:36px;border-radius:99px;
background:var(--urgu);color:#fff;border:0;display:grid;place-items:center}
.t-qosh:disabled{background:var(--chiziq);color:var(--och)}
.t-qosh.qoshildi{background:var(--yashil)}
.t-yoq{font-size:12.5px;color:var(--qizil);font-weight:650;margin-left:auto}
/* --- Taklif chiplari --- */
.takliflar{display:flex;gap:8px;padding:4px 16px 12px;overflow-x:auto;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.takliflar::-webkit-scrollbar{display:none}
.takliflar button{flex:0 0 auto;background:var(--panel);border:1px solid var(--chiziq);
border-radius:99px;padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--matn);
white-space:nowrap}
.takliflar button:active{background:var(--urgu-och);border-color:var(--urgu)}
/* --- Bo'sh ekran (birinchi kirish) --- */
/* Ilovani qo'shish oynasi: ikki xil yorliqni ajratib ko'rsatamiz */
.ornat-tanlov{border:1px solid var(--chiziq);border-radius:var(--r);padding:14px;
margin-bottom:12px;background:var(--panel)}
/* Faqat BEVOSITA farzand — aks holda izoh ichidagi Chrome ham
blok bo'lib, matn bo'laklarga bo'linib ketadi */
.ornat-tanlov > b{display:block;font-size:15px;margin-bottom:5px}
.ornat-tanlov > span{display:block;font-size:13.5px;line-height:1.55;color:var(--kul);
margin-bottom:12px}
.ornat-tanlov > span b{color:var(--matn)}
.ornat-tanlov.ikkilamchi-quti{background:var(--fon)}
.ornat-havola{font-size:12.5px;font-family:ui-monospace,monospace;color:var(--matn);
background:var(--fon);border:1px solid var(--chiziq);border-radius:9px;
padding:9px 11px;margin-bottom:10px;overflow-wrap:anywhere;user-select:all}
.ornat-tanlov button{width:100%}
/* Chatdagi tizim eslatmasi (rasm chegarasi kabi) — javob emas,
shuning uchun pufaksiz, markazda va so'niqroq. */
.chat-eslatma{margin:10px auto;max-width:88%;text-align:center;font-size:13px;
line-height:1.5;color:var(--kul);background:var(--fon);border:1px solid var(--chiziq);
border-radius:12px;padding:9px 13px}
.suhbat-bosh-ekran{text-align:center;padding:26px 20px 10px}
.suhbat-bosh-ekran .halqa{width:74px;height:74px;margin:0 auto 16px;border-radius:99px;
display:grid;place-items:center;background:var(--urgu-och);color:var(--urgu)}
.suhbat-bosh-ekran h2{margin-bottom:8px}
.suhbat-bosh-ekran p{color:var(--kul);font-size:14.5px;max-width:300px;margin:0 auto}
/* Namuna savol bitta qatorda: matn o'ralmasin, aks holda tugmalar
ikki barobar balandlashib ekranni to'ldiradi */
.namunalar button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.namunalar{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.namunalar button{display:flex;align-items:center;gap:10px;background:var(--panel);
border:1px solid var(--chiziq);border-radius:14px;padding:13px 15px;font-size:14.5px;
font-weight:600;color:var(--matn);text-align:left;width:100%}
.namunalar button i[data-ik]{color:var(--urgu)}
.namunalar button .strelka{margin-left:auto;color:var(--och)}
.namunalar button:active{border-color:var(--urgu)}
/* --- Yozish paneli --- */
.yozish{position:fixed;left:0;right:0;bottom:calc(var(--past) + env(safe-area-inset-bottom));
z-index:45;max-width:640px;margin:0 auto;padding:9px 12px 10px;background:var(--panel);
border-top:1px solid var(--chiziq);transition:bottom .22s ease}
.yozish-ich{display:flex;align-items:flex-end;gap:7px;background:var(--fon);
border:1px solid var(--chiziq);border-radius:22px;padding:5px 5px 5px 12px}
/* Umumiy textarea qoidasi (min-height:86px) shu yerda bekor qilinadi —
suhbat inputi bitta qatordan boshlanib, yozgan sari o'sadi */
.yozish textarea{flex:1;width:auto;border:0;background:none;resize:none;color:var(--matn);
font:15.5px/1.45 var(--sans);font-size:15.5px;padding:9px 0;
min-height:0;height:40px;max-height:120px;outline:none;border-radius:0}
.yozish textarea:focus{outline:none}
.yozish textarea::placeholder{color:var(--och)}
.yozish-tugma{flex:0 0 auto;width:38px;height:38px;border-radius:99px;background:var(--urgu);
color:#fff;border:0;display:grid;place-items:center;transition:opacity .15s}
.yozish-tugma:disabled{opacity:.35}
/* Suhbat oxirgi xabari yozish paneli ostida qolmasin */
#tab-maslahat{padding-bottom:64px}
/* Klaviatura ochilganda: menyu pastga sirg'aladi, panel chetga tushadi */
.menyu{transition:transform .22s ease}
body.yozilmoqda .menyu{transform:translateY(105%)}
body.yozilmoqda .yozish{bottom:env(safe-area-inset-bottom)}
/* Tab almashganda animatsiya bo'lmasin: panel bo'sh joyda sirg'alib
miltillab ko'rinardi. JS bir kadrga shu sinfni qo'yadi. */
body.tez .menyu,body.tez .yozish{transition:none!important}
/* Panelga alohida animatsiya QO'YILMAYDI: u bo'lim bilan birga
ko'rinadi. Ortiqcha animatsiya yana sakrash beradi. */
@media (prefers-reduced-motion:reduce){
.menyu,.yozish{transition:none}
.xabar,.nuqtalar span,.suhbat-holat.oylanmoqda::before{animation:none}
}
/* ============================================================
BOSH SAHIFA — qizil shapka, toifa kartalari, bo'limlar
============================================================ */
/* ---------- Shapka: BREND QIZILI, logotip och yashil ----------
Logotipning o'zi qanday bo'lsa, ilova ham shunday boshlanadi:
qizil fonda och yashil tabassum. Pastki burchaklari yumaloq —
sarlavha sahifadan «chiqib» turadi. */
.shapka{position:sticky;top:0;z-index:35;background:var(--asosiy);color:var(--asosiy-matn);
padding:calc(8px + env(safe-area-inset-top)) 16px 14px;
border-radius:0 0 24px 24px;box-shadow:var(--sh-katta)}
.shapka-tepa{display:flex;align-items:center;justify-content:space-between;
padding:2px 0 12px}
.logo{display:flex;align-items:center;line-height:0;color:var(--lime)}
.logo .logo-svg{height:36px;width:auto;display:block}
/* Ochilganda tabassum chizilib chiqadi, ko'zlar vaqti-vaqti bilan
pirpiraydi — jonli, lekin chalg'itmaydigan darajada */
.logo .logo-svg path[stroke]{stroke-dasharray:700;
animation:k-tabassum .9s var(--k-egri) .15s both}
.logo .logo-svg circle:nth-of-type(-n+2){transform-box:fill-box;transform-origin:center;
animation:k-kipriq 5s ease-in-out 2.2s infinite}
.shapka-amal{display:flex;gap:2px}
.shapka-amal button{position:relative;background:none;border:0;color:var(--asosiy-matn);
width:44px;height:44px;padding:0;border-radius:99px;display:grid;place-items:center}
.shapka-amal button:active{background:rgba(255,255,255,.16)}
.shapka-amal .nishon{position:absolute;top:3px;right:2px;background:var(--lime);color:#3b0304;
font-size:12px;font-weight:800;min-width:20px;height:20px;border-radius:99px;
display:grid;place-items:center;padding:0 5px;font-style:normal;
border:2px solid var(--asosiy);animation:k-urish .3s var(--k-sakra)}
.shapka .qidiruv-satr{display:flex;gap:9px;align-items:center}
.shapka .qidiruv{flex:1;display:flex;align-items:center;gap:9px;background:var(--qidiruv-fon);
border:0;border-radius:14px;padding:0 4px 0 14px;height:48px;color:var(--qidiruv-matn);
box-shadow:0 1px 0 rgba(0,0,0,.04);transition:box-shadow var(--k-orta) var(--k-egri)}
.shapka .qidiruv:focus-within{box-shadow:0 0 0 3px var(--lime)}
.shapka .qidiruv i[data-ik]{color:var(--qidiruv-och)}
.shapka .qidiruv input{flex:1;width:auto;border:0;background:none;outline:none;padding:0;
font:15px var(--sans);color:var(--qidiruv-matn);min-height:0;border-radius:0}
.shapka .qidiruv input:focus{outline:none}
.shapka .qidiruv input::placeholder{color:var(--qidiruv-och)}
.shapka .qidiruv .tozala{background:none;border:0;color:var(--qidiruv-och);width:40px;height:40px;
padding:0;display:grid;place-items:center;border-radius:99px}
.shapka .qid-skaner{background:none;border:0;color:var(--urgu);width:40px;height:40px;padding:0;
display:grid;place-items:center;border-radius:11px}
.shapka .qid-skaner:active{background:var(--urgu-och)}
.shapka .uch-nuqta{width:48px;height:48px;flex:0 0 auto;background:rgba(255,255,255,.14);
border:0;border-radius:14px;color:var(--asosiy-matn);
display:grid;place-items:center;position:relative}
.shapka .uch-nuqta.faol{background:var(--lime);color:#3b0304}
.shapka .uch-nuqta .belgi-nuqta{position:absolute;top:10px;right:10px;width:8px;height:8px;
border-radius:99px;background:var(--lime);box-shadow:0 0 0 2px var(--asosiy)}
/* ---------- AI banner: OCH YASHIL karta ----------
Sarlavha qizil, banner esa och yashil — logotipning ikki rangi
yonma-yon. To'q qizil matn och yashilda 11:1 kontrastda. */
.slayd{flex:0 0 100%;width:100%;height:100%;position:relative}
.slayd img{width:100%;height:100%;object-fit:cover;display:block}
.ai-slayd{padding:18px 128px 18px 18px;text-align:left;color:#3b0304;
display:flex;flex-direction:column;justify-content:center;
background:
radial-gradient(90% 120% at 92% 10%, rgba(255,255,255,.55), transparent 60%),
linear-gradient(140deg, #d4eba3, var(--k-lime) 60%, #a9cc62)}
.ai-teg{display:inline-flex;align-self:flex-start;align-items:center;gap:5px;
font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--k-qizil);
background:rgba(255,255,255,.6);border-radius:99px;padding:5px 10px 5px 8px}
.ai-sarlavha{display:block;margin-top:9px;font-size:20px;font-weight:800;
line-height:1.2;letter-spacing:-.025em}
.ai-sarlavha em{font-style:normal;color:var(--k-qizil)}
.ai-tugma{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin-top:13px;
background:var(--k-qizil);color:#fff;border-radius:99px;padding:0 16px;min-height:44px;
font-size:14px;font-weight:800;box-shadow:0 8px 18px -10px rgba(171,10,12,.9)}
.ai-belgi{position:absolute;right:14px;top:50%;width:108px;margin-top:-34px;
color:var(--k-qizil);line-height:0}
.ai-belgi svg{width:100%;height:auto;display:block;overflow:visible}
.ai-belgi path{stroke-dasharray:700;animation:k-tabassum 1.1s var(--k-egri) .3s both}
.ai-belgi circle{transform-box:fill-box;transform-origin:center;
animation:k-kipriq 4.5s ease-in-out 1.8s infinite}
/* ---------- Toifa doiralari ----------
Barchasi BIR XIL: oq quti, qizil chizma ikon. Tanlangani to'liq
qizil. Ilgari har biri o'z pastel rangida edi (ko'k, binafsha,
sariq) va brend ranglari kamalak ichida yo'qolib ketardi. */
.toifalar{display:flex;gap:12px;overflow-x:auto;padding:18px 16px 6px;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.toifalar::-webkit-scrollbar{display:none}
.toifalar button{flex:0 0 auto;width:66px;background:none;border:0;padding:0;
display:grid;justify-items:center;gap:7px;font-size:12.5px;font-weight:650;
color:var(--kul);line-height:1.2;text-align:center}
.toifalar .doira{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
background:var(--panel);color:var(--urgu);border:1px solid var(--chiziq);box-shadow:var(--sh);
transition:transform var(--k-tez) var(--k-egri),background var(--k-orta),color var(--k-orta)}
.toifalar button:active .doira{transform:scale(.92)}
.toifalar button.tanlangan{color:var(--urgu);font-weight:800}
.toifalar button.tanlangan .doira{background:var(--urgu);color:#fff;border-color:var(--urgu);
box-shadow:0 8px 18px -10px rgba(171,10,12,.8)}
/* Ko'rinish tanlovi (kunduzgi / tungi) — profil bo'limida */
.korinish-tanlov{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.korinish-tanlov button{display:flex;flex-direction:column;align-items:center;gap:6px;
padding:14px 6px;border:1px solid var(--chiziq);border-radius:var(--r);
background:var(--panel);color:var(--kul);font-size:13px;font-weight:600;cursor:pointer}
.korinish-tanlov button.tanlangan{border-color:var(--urgu);color:var(--urgu);
background:var(--urgu-och)}
/* ---------- Bo'lim sarlavhasi ---------- */
.bolim-satr{display:flex;align-items:baseline;justify-content:space-between;
padding:22px 16px 12px;gap:12px}
.bolim-satr h2{font-family:var(--sans);font-size:19px;font-weight:800;
letter-spacing:-.02em}
.bolim-satr button{background:none;border:0;color:var(--kul);font-size:13.5px;
font-weight:650;display:flex;align-items:center;gap:3px;padding:0;flex:0 0 auto}
/* ---------- Gorizontal lenta ---------- */
/* Bo'lim ichidagi gorizontal mahsulot lentasi. Ataylab .lenta emas:
u filtr chiplarini pill qilib bo'yaydigan eski qoida. */
.qator{display:flex;gap:11px;overflow-x:auto;padding:0 16px 4px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.qator::-webkit-scrollbar{display:none}
.qator .mahsulot{flex:0 0 152px;width:152px;scroll-snap-align:start}
/* Vertikal to'r bo'lim ichida */
.bolim-tor{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:0 16px}
/* ---------- Skaner: sodda ---------- */
/* ══════════ TAHLIL NATIJASI ══════════
Bitta uzun sahifa, bo'limlarga ajratilgan. Har bo'limning FONI
boshqa: ovqat yashil/qizil, parvarish ko'k, prognoz sariq —
shundan odam qayerdaligini rang bilan biladi, sarlavha o'qimay
ham. Matn ikki darajali: asosiysi oq (--matn), ikkinchi
darajalisi kulrang (--kul). Uchinchi daraja YO'Q — ilgari ekran
mayda izohlarga to'lib ketgan va hech kim o'qimasdi.
O'lcham va rang mavzudan keladi, shuning uchun kunduzgi va tungi
rejimda ham bir xil uyg'un turadi. */
/* Natija tanasining chetki bo'shlig'i SHU YERDA. Mahsulot lentasi
undan «chiqib» ketadi (margin:0 -16px), shuning uchun u aniq
16px bo'lishi kerak. */
#natija-tan{padding:0 16px}
/* Sarlavha: brend belgisi va sana. Ism bo'lsa o'ng tomonda. */
.n-shapka{display:flex;align-items:center;justify-content:space-between;
gap:10px;padding:16px 0 12px}
.n-logo{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--matn)}
.n-logo i{font-style:normal;color:var(--urgu)}
.n-logo small{display:block;font-size:12px;font-weight:600;color:var(--och);
letter-spacing:0;margin-top:2px}
.n-salom{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--urgu);
background:var(--urgu-och);border-radius:99px;padding:6px 12px;white-space:nowrap}
.n-karta{background:var(--panel);border:1px solid var(--chiziq);border-radius:var(--r);
padding:14px;margin:0 0 10px}
.n-karta-bosh{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;
letter-spacing:-.02em;color:var(--matn);margin:0 0 14px}
.n-izoh{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--och)}
.n-oyoq{margin:12px 0 0;font-size:12px;color:var(--och);line-height:1.5}
/* ══ QAHRAMON KARTA ══
Surat, ball va yorliqlar BITTA kartada: sahifa shu bilan qisqaradi
va birinchi ekranda odamning o'z yuzi bilan bahosi birga turadi. */
.n-hero{background:var(--panel);border:1px solid var(--chiziq);
border-radius:var(--r-katta);padding:12px;margin:0 0 10px}
/* Surat 4:3 — namunadagidek keng. Filtrlar faqat rasmga tushadi,
nishonlarga emas, shuning uchun rasm alohida qatlamda. */
.n-yuz{position:relative;border-radius:14px;overflow:hidden;
background:var(--chiziq-och);aspect-ratio:4/3}
.n-yuz-media{position:absolute;inset:0;transition:filter .35s ease}
.n-yuz-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Raqamli nishon — rasm ustidagi tugma. Bosilganda pastdagi o'sha
muammo ochiladi, shuning uchun u haqiqiy tugma (pointer-events
bor) va tanlanganda kattalashadi. */
.n-nishon{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;
border-radius:50%;border:2px solid rgba(255,255,255,.92);padding:0;
display:grid;place-items:center;cursor:pointer;
font-family:inherit;font-size:12px;font-weight:800;line-height:1;
color:#fff;background:var(--och);
box-shadow:0 2px 10px rgba(0,0,0,.5);transition:transform .2s ease}
.n-nishon.d1{background:var(--yashil)}
.n-nishon.d2{background:var(--sariq)}
.n-nishon.d3{background:var(--qizil)}
.n-nishon.tanlangan{transform:translate(-50%,-50%) scale(1.22);
box-shadow:0 0 0 4px color-mix(in srgb,var(--urgu) 45%,transparent),
0 2px 10px rgba(0,0,0,.5)}
.n-nishon:active{transform:translate(-50%,-50%) scale(1.1)}
/* Qaysi qatlam yoqilgani — rasmning o'zida yozilib turadi */
.n-qatlam-teg{position:absolute;right:8px;bottom:8px;border-radius:99px;
padding:5px 11px;font-size:12px;font-weight:800;color:#fff;
background:rgba(8,8,10,.62);backdrop-filter:blur(6px);pointer-events:none}
.n-qatlam-teg span{font-weight:600;color:rgba(255,255,255,.7)}
/* Ball: halqa + bitta qalin sarlavha + bitta izoh. Uchinchi daraja
matn YO'Q — ilgari bu joy mayda yozuvlarga to'lib ketgandi. */
.n-ball{display:flex;align-items:center;gap:14px;margin:12px 0 0}
.n-ball>div{min-width:0}
.n-ball h2{margin:0;font-size:clamp(19px,5.6vw,23px);line-height:1.15;
letter-spacing:-.03em}
.n-ball h2.yaxshi{color:var(--yashil)}.n-ball h2.orta{color:var(--sariq)}
.n-ball h2.yomon{color:var(--qizil)}
.n-ball p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--kul)}
.n-halqa{flex:0 0 auto;width:92px;height:92px}
.n-halqa-fon{fill:none;stroke:var(--chiziq);stroke-width:9}
.n-halqa-yoy{fill:none;stroke-width:9;stroke-linecap:round}
.n-halqa-yoy.yaxshi{stroke:var(--yashil)}.n-halqa-yoy.orta{stroke:var(--sariq)}
.n-halqa-yoy.yomon{stroke:var(--qizil)}
.n-halqa-son{font-size:36px;font-weight:800;text-anchor:middle;fill:var(--matn)}
.n-halqa-mayda{font-size:12px;text-anchor:middle;fill:var(--och)}
/* Yorliqlar RANGLI: yosh, jins, teri turi — har biri ko'rinsin.
Kulrang bo'lsa ular bir-biriga qo'shilib ketardi. */
.n-teglar{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.n-teglar span{border-radius:99px;padding:6px 11px;font-size:12px;font-weight:700;
line-height:1;background:var(--chiziq-och);color:var(--kul)}
.n-teglar span:nth-child(1){background:var(--kok-och);color:var(--kok)}
.n-teglar span:nth-child(2){background:var(--yashil-och);color:var(--yashil)}
.n-teglar span:nth-child(4){background:var(--sariq-och);color:var(--sariq)}
.n-teglar span.hot{background:var(--urgu);color:#fff}
.n-tavsif{display:flex;gap:9px;margin:0 0 10px;padding:11px 12px;border-radius:12px;
background:var(--chiziq-och);font-size:12.5px;line-height:1.5;color:var(--kul)}
.n-tavsif i{flex:0 0 auto;color:var(--och);line-height:0;margin-top:2px}
/* ══ BO'LIM: sarlavha + tarkib ══ */
.n-bolim{margin:0 0 14px}
/* Sarlavha + izoh + tugma tor ekranda BIR QATORGA sig'masligi
mumkin — o'ralsin, aks holda sahifa yon tomonga suriladi. */
.n-bolim-bosh{display:flex;align-items:baseline;gap:4px 10px;
flex-wrap:wrap;margin:0 0 9px}
/* `flex:1` (asosi 0) sarlavhani SIQAR va «Aniqlangan muammolar»
ikki qatorga bo'linib ketardi. `auto` asos bilan sarlavha butun
qoladi, sig'magani esa keyingi qatorga tushadi. */
.n-bolim-bosh h3{flex:1 1 auto;margin:0;font-size:15px;font-weight:800;
letter-spacing:-.02em;color:var(--matn)}
.n-bolim-izoh{font-size:12px;font-weight:600;color:var(--och)}
.n-bolim-bosh button{flex:0 0 auto;margin-left:auto;background:none;border:0;padding:0;
font-family:inherit;font-size:12.5px;font-weight:700;line-height:1;
white-space:nowrap;color:var(--urgu);cursor:pointer}
/* ── Tahlil qatlamlari: bitta suratning olti ko'rinishi ──
Bu haqiqiy filtr: rang kanallari qayta aralashtiriladi, xuddi
dermatolog lampasi ostida ko'rgandek. Yon tomonga siriladi. */
.n-qatlamlar{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 4px;
margin:0 -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.n-qatlamlar::-webkit-scrollbar{display:none}
.n-qatlam{flex:0 0 auto;width:76px;padding:0;border:0;background:none;
display:flex;flex-direction:column;gap:5px;cursor:pointer;font:inherit}
.n-qatlam-rasm{display:block;height:88px;border-radius:12px;overflow:hidden;
border:2px solid var(--chiziq);background:var(--chiziq-och);
transition:border-color .2s ease}
.n-qatlam-rasm img{width:100%;height:100%;object-fit:cover;display:block}
.n-qatlam b{font-size:12px;font-weight:700;color:var(--och);text-align:center}
.n-qatlam.tanlangan .n-qatlam-rasm{border-color:var(--urgu)}
.n-qatlam.tanlangan b{color:var(--urgu)}
.n-qatlam:active{transform:scale(.97)}
/* ── Ko'rsatkichlar: ikki ustun ──
To'rt ustunda 21px raqam va ikki qatorli nom sig'masdi. Ikki
ustunda har katak keng: nom bir qatorda, shkala esa uzun. */
.n-olchamlar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.n-olch{display:flex;flex-direction:column;gap:7px;padding:11px 12px 12px;
border-radius:14px;background:var(--panel);border:1px solid var(--chiziq);min-width:0}
.n-olch-tepa{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.n-olch-tepa span{font-size:12.5px;font-weight:600;color:var(--kul);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-olch-tepa b{flex:0 0 auto;font-size:17px;font-weight:800;letter-spacing:-.03em;
color:var(--matn);font-variant-numeric:tabular-nums}
.n-olch-tepa b i{font-style:normal;font-size:12px;font-weight:600;color:var(--och)}
/* Raqamning tagida O'ZBEKCHA baho: «72» ni hamma ham darrov
tushunmaydi, «Yaxshi» esa tushuntirishsiz o'qiladi. */
.n-olch>em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.01em}
.n-olch>em.zaif{color:var(--baho-zaif)} .n-olch>em.past{color:var(--baho-past)}
.n-olch>em.orta{color:var(--baho-orta)} .n-olch>em.yaxshi{color:var(--baho-yaxshi)}
.n-olch>em.alo{color:var(--baho-alo)}
/* ── Muammolar: ochiladigan qatorlar ──
ishlatiladi — JS o'chib qolsa ham ochiladi, va ekran
o'qigich uni «ochiq/yopiq» deb o'qiydi. */
.n-raqam{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;
place-items:center;font-size:12.5px;font-weight:800;color:#fff;background:var(--och)}
.n-raqam.d1{background:var(--yashil)}.n-raqam.d2{background:var(--sariq)}
.n-raqam.d3{background:var(--qizil)}
details.n-muammo{background:var(--panel);border:1px solid var(--chiziq);
border-radius:14px;margin:0 0 7px;overflow:hidden}
details.n-muammo[open]{border-color:color-mix(in srgb,var(--urgu) 40%,transparent)}
details.n-muammo>summary{display:grid;grid-template-columns:24px 1fr auto 16px;
gap:6px 12px;align-items:center;padding:12px;cursor:pointer;list-style:none}
/* Ochilishini BILDIRIB turadigan strelka. Ilgari yopiq muammo
oddiy qatorga o'xshab turardi va odam uni bosish mumkinligini
bilmasdi — sabab bilan tavsiyani umuman ko'rmasdi. */
.n-ochish{width:16px;height:16px;position:relative;display:block}
.n-ochish::before{content:'';position:absolute;left:3px;top:4px;
width:8px;height:8px;border-right:2px solid var(--och);
border-bottom:2px solid var(--och);border-radius:1px;
transform:rotate(45deg);transition:transform .2s ease}
details.n-muammo[open] .n-ochish::before{transform:rotate(225deg) translate(-3px,-3px);
border-color:var(--urgu)}
details.n-muammo>summary::-webkit-details-marker{display:none}
details.n-muammo>summary::marker{content:''}
.n-muammo-nom{font-size:14.5px;font-weight:700;line-height:1.3;min-width:0;
color:var(--matn)}
.n-muammo-nom em{display:block;font-style:normal;font-size:12px;font-weight:500;
color:var(--kul);margin-top:2px}
.n-muammo-foiz{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.n-muammo-foiz.yaxshi{color:var(--yashil)}.n-muammo-foiz.orta{color:var(--sariq)}
.n-muammo-foiz.yomon{color:var(--qizil)}
details.n-muammo[open] .n-muammo-nom{color:var(--urgu)}
.n-muammo-ich{padding:0 12px 13px 48px;display:flex;flex-direction:column;gap:9px}
/* Yuzning kattalashtirilgan bo'lagi — «qayerini aytyapti?» degan
savolga javob. Rasm o'zgarmaydi, faqat fon joyi suriladi. */
.n-kesim{display:block;width:64px;height:64px;border-radius:12px;background-size:420%;
background-repeat:no-repeat;border:1px solid var(--chiziq)}
.n-satr span{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--och);margin-bottom:3px}
.n-satr p{margin:0;font-size:13.5px;line-height:1.55;color:var(--kul)}
/* Ogohlantirish — umumiy `.diqqat` sariq qutisidan foydalanadi.
Qizil emas: bu taqiq emas, eslatma. */
.n-satr.diqqat{align-items:flex-start;margin-top:0}
.n-satr.diqqat span{flex:0 0 auto;color:var(--sariq);margin:3px 0 0}
.n-satr.diqqat p{color:var(--matn);font-size:13px}
.n-chiziq{height:6px;border-radius:3px;overflow:hidden;display:block;
background:color-mix(in srgb,var(--matn) 12%,transparent)}
.n-chiziq i{display:block;height:100%;border-radius:3px;transition:width .4s ease}
.n-chiziq i.yomon{background:var(--qizil)}
/* BESH bosqich — beshtasi ham BOSHQA rang. Chegaralar `olchov.js`
dagi DARAJALAR bilan bir xil: 35 / 50 / 65 / 80. */
.n-chiziq i.zaif{background:var(--baho-zaif)}
.n-chiziq i.past{background:var(--baho-past)}
.n-chiziq i.orta{background:var(--baho-orta)}
.n-chiziq i.yaxshi{background:var(--baho-yaxshi)}
.n-chiziq i.alo{background:var(--baho-alo)}
.n-toza{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--yashil)}
.n-toza b{font-size:16px}
.n-toza span{flex:1 1 100%;font-size:13.5px;color:var(--kul)}
/* ── Ovqat: ikki qarama-qarshi panel ── */
.n-panellar{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin:0 0 12px}
.n-panel{border-radius:var(--r);padding:13px 12px 14px;border:1px solid;min-width:0}
.n-panel h3{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:15px;
font-weight:800;letter-spacing:-.02em}
.n-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.n-panel li{display:flex;gap:7px;align-items:flex-start;font-size:13px;line-height:1.35;
color:var(--matn);overflow-wrap:anywhere}
.n-panel li i{flex:0 0 auto;width:19px;height:19px;border-radius:50%;display:grid;
place-items:center;line-height:0;margin-top:1px}
.n-panel.yaxshi{background:var(--yashil-och);border-color:color-mix(in srgb,var(--yashil) 26%,transparent)}
.n-panel.yaxshi h3{color:var(--yashil)}
.n-panel.yaxshi li i{background:var(--yashil);color:#fff}
.n-panel.yomon{background:var(--qizil-och);border-color:color-mix(in srgb,var(--qizil) 26%,transparent)}
.n-panel.yomon h3{color:var(--qizil)}
.n-panel.yomon li i{background:var(--qizil);color:#fff}
/* ── Mahsulotlar: yon tomonga siriladi ── */
.n-mahsulotlar{display:flex;gap:10px;overflow-x:auto;padding:2px 16px 6px;
margin:0 -16px;scroll-snap-type:x mandatory;scrollbar-width:none;
-webkit-overflow-scrolling:touch}
.n-mahsulotlar::-webkit-scrollbar{display:none}
.n-mahsulotlar>*{flex:0 0 clamp(144px,44vw,172px);scroll-snap-align:start}
.n-mahsulot{position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;
padding:0 0 12px;border:1px solid var(--chiziq);border-radius:16px;
background:var(--panel);overflow:hidden;cursor:pointer;color:var(--matn);font:inherit}
.n-mahsulot:active{transform:scale(.98)}
.n-raqam.bosqich{position:absolute;left:9px;top:9px;z-index:1;background:var(--urgu);
box-shadow:0 2px 8px rgba(0,0,0,.3)}
.nm-rasm{display:flex;align-items:center;justify-content:center;aspect-ratio:1;
background:var(--chiziq-och);color:var(--och);margin-bottom:9px}
.nm-rasm img{width:100%;height:100%;object-fit:cover}
.nm-bosqich{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--urgu);padding:0 12px}
.nm-nom{font-size:13px;font-weight:600;line-height:1.32;padding:0 12px;color:var(--kul);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nm-narx{font-size:14.5px;font-weight:800;padding:4px 12px 0;color:var(--matn)}
.n-jami{display:flex;align-items:baseline;justify-content:space-between;
margin:14px 0 0;padding:13px 0 0;border-top:1px solid var(--chiziq);
font-size:14px;color:var(--kul)}
.n-jami b{font-size:18px;color:var(--matn)}
.n-tejash{display:flex;gap:7px;align-items:center;margin:9px 0 0;font-size:13px;
color:var(--yashil)}
/* ── Kundalik tartib: ko'k panel ── */
.n-kok{background:var(--kok-och);border-color:color-mix(in srgb,var(--kok) 24%,transparent)}
.n-kok .n-karta-bosh{color:var(--kok)}
.n-vaqtlar{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.n-vaqt h4{display:flex;align-items:center;gap:7px;margin:0 0 9px;font-size:13px;
font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--kok)}
.n-vaqt ol{list-style:none;counter-reset:qadam;margin:0;padding:0;
display:flex;flex-direction:column;gap:8px}
.n-vaqt li{counter-increment:qadam;display:flex;flex-direction:column;gap:1px;
font-size:12.5px;line-height:1.35;position:relative;padding-left:27px}
.n-vaqt li::before{content:counter(qadam);position:absolute;left:0;top:0;
width:20px;height:20px;border-radius:50%;
display:grid;place-items:center;font-size:12px;font-weight:800;
background:var(--kok);color:#fff}
.n-vaqt li b{flex:0 0 auto;color:var(--matn)}
.n-vaqt li span{color:var(--kul);min-width:0}
/* ── Prognoz: sariq panel ── */
.n-sariq{background:var(--sariq-och);border-color:color-mix(in srgb,var(--sariq) 26%,transparent)}
.n-sariq .n-karta-bosh{color:var(--sariq)}
.n-prognoz{display:grid;grid-template-columns:1fr auto;gap:5px 10px;margin:0 0 13px}
.n-prognoz-nom{font-size:14.5px;font-weight:700;color:var(--matn)}
.n-prognoz b{font-size:15px;font-weight:800;color:var(--qizil);
font-variant-numeric:tabular-nums}
.n-prognoz .n-chiziq{grid-column:1/-1}
.n-prognoz em{grid-column:1/-1;font-style:normal;font-size:12.5px;line-height:1.45;
color:var(--kul)}
/* ── Pastki chaqiriq ── */
.n-chaqiriq{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
background:var(--urgu);color:#fff;border-radius:var(--r);padding:16px;margin:4px 0 12px}
.n-chaqiriq b{display:block;font-size:15px;line-height:1.35}
.n-chaqiriq span{display:block;font-size:13px;opacity:.85;margin-top:3px}
/* Tugma oq TO'LDIRILMAYDI: urg'u rangi admin panelidan o'zgaradi va
och rangda oq tugma ustidagi yozuv o'qilmay qolardi. */
.n-chaqiriq button{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:7px;
background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.5);
border-radius:99px;padding:11px 18px;
font-size:14px;font-weight:700;cursor:pointer}
.n-chaqiriq button:active{transform:scale(.97)}
.n-oxir{margin-top:0}
.n-eslatma{margin:0 0 18px;text-align:center;font-size:12px;line-height:1.7;
color:var(--och)}
/* ── JONLI KAMERA VA O'LCHOV TO'RI ──
To'r bezak emas: har katak o'sha joydagi tiniqlikni ko'rsatadi
(yashil — tiniq, qizil — xira), tugunlar esa yorug'lik bo'yicha
siljiydi. Brauzerda chuqurlik sensori yo'q — bu haqiqiy o'lchov
ko'rinishi, lidar emas. */
/* ── HALQA CHIROQ ──
Old kamera yonida chiroq yo'q, lekin ekranning o'zi chiroq.
Skaner ochilganda butun sahifa oqaradi, kadr atrofida esa keng
oq halqa qoladi — yuzga tushadigan nur shundan keladi. Qorong'i
xonada bu bir necha barobar farq qiladi. */
.kam-nur{position:fixed;inset:0;z-index:0;pointer-events:none;background:#fff;
opacity:0;transition:opacity .45s ease}
body.kam-yorug{background:#fff}
body.kam-yorug .kam-nur{opacity:1}
body.kam-yorug #tab-skaner{position:relative;z-index:1}
body.kam-yorug .menyu{background:#fff;border-top-color:#e8e8ea}
body.kam-yorug .menyu button{color:#8a8a92}
/* Yuz uzoq yoki qorong'i bo'lsa — kadr kichrayadi, oq maydon
kengayadi va halqa nafas oladi: odam beixtiyor yaqinroq keladi */
body.kam-yorug.kam-nur-kuchli .kam-quti{max-height:50vh}
body.kam-yorug.kam-nur-kuchli .kam-nur{animation:kam-nafas 2.2s ease-in-out infinite}
@keyframes kam-nafas{0%,100%{opacity:1}50%{opacity:.86}}
.kam-quti{position:relative;border-radius:var(--r-katta);overflow:hidden;
background:#0b0b0d;aspect-ratio:3/4;max-height:62vh;margin:0 auto;
transition:max-height .45s ease,box-shadow .45s ease}
body.kam-yorug .kam-quti{box-shadow:0 0 0 12px #fff,0 0 72px 26px rgba(255,255,255,.98)}
/* Avtomatik surat sanog'i */
.kam-sanoq{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:6px;pointer-events:none;
background:radial-gradient(60% 50% at 50% 50%,rgba(0,0,0,.34),transparent 72%)}
.kam-sanoq b{font-size:clamp(64px,22vw,104px);line-height:1;color:#fff;font-weight:800;
letter-spacing:-.04em;text-shadow:0 4px 26px rgba(0,0,0,.55);
animation:kam-sanoq-pat .62s ease-out}
.kam-sanoq span{font-size:14px;font-weight:700;color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,.6)}
@keyframes kam-sanoq-pat{from{transform:scale(1.5);opacity:.2}to{transform:scale(1);opacity:1}}
.kam-quti video{width:100%;height:100%;object-fit:cover;display:block;
transform:scaleX(-1)} /* selfi ko'zguda ko'ringani tabiiy */
.kam-quti canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kam-holat{position:absolute;left:10px;right:10px;top:10px;display:flex;gap:8px;
align-items:center;padding:9px 13px;border-radius:99px;font-size:13.5px;
font-weight:600;color:#fff;background:rgba(10,10,12,.62);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.kam-nuqta{width:9px;height:9px;border-radius:50%;background:#ebaa3c;flex:0 0 auto;
animation:kam-puls 1.4s infinite}
.kam-holat[data-holat="yaxshi"] .kam-nuqta{background:var(--yashil);animation:none}
.kam-holat[data-holat="yoq"] .kam-nuqta{background:#9a9aa3}
@keyframes kam-puls{0%,100%{opacity:1}50%{opacity:.3}}
.kam-olchov{position:absolute;left:10px;right:10px;bottom:10px;display:flex;
flex-direction:column;gap:6px;padding:11px 13px;border-radius:14px;
background:rgba(10,10,12,.62);backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px)}
.kam-satr{display:flex;align-items:center;gap:10px;font-size:12px;color:#d8d8de}
.kam-satr span{flex:0 0 84px}
.kam-chiziq{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.16);
overflow:hidden;display:block}
.kam-chiziq b{display:block;height:100%;border-radius:3px;width:3%;
transition:width .18s linear,background .18s linear}
.kam-chiziq b.yaxshi{background:var(--yashil)}
.kam-chiziq b.orta{background:#ebaa3c}
.kam-chiziq b.yomon{background:#eb5050}
.kam-ogoh{margin:12px 0 0;padding:12px 14px;border-radius:14px;
background:var(--sariq-och);color:var(--sariq);font-size:13px;line-height:1.45;
display:flex;flex-direction:column;gap:4px}
.kam-ogoh b{font-size:14px}
.kam-ogoh button{margin-top:6px}
/* Tanlangan rasm ustidagi xulosa: yuborishdan OLDIN aytiladi */
.oldindan-ogoh{margin:12px 0 0;padding:12px 14px;border-radius:14px;
display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.45}
.oldindan-ogoh b{font-size:14px}
.oldindan-ogoh.yaxshi{background:var(--yashil-och);color:var(--yashil)}
.oldindan-ogoh.yomon{background:var(--qizil-och);color:var(--qizil)}
.skaner-namuna{position:relative;margin:18px auto 16px;border-radius:20px;overflow:hidden;
background:var(--chiziq-och);aspect-ratio:3/4;max-width:calc(100% - 32px);
display:grid;place-items:center}
.skaner-namuna img{width:100%;height:100%;object-fit:cover;display:block}
/* Keng namunada (ikki yuz) yuz ramkasi chalg'itadi */
.skaner-namuna.ramkasiz .yuz-ramka{display:none}
.skaner-namuna .namuna-yoq{color:var(--och);display:grid;place-items:center}
.namuna-teg{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.55);color:#fff;
font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
padding:6px 11px;border-radius:99px;backdrop-filter:blur(6px)}
.skaner-maslahat{text-align:center;color:var(--kul);font-size:14.5px;
padding:0 28px;margin:0 0 16px}
/* ---------- Profil: avatar va akkordeon ---------- */
.profil-bosh{text-align:center;padding:26px 16px 20px}
.avatar{width:82px;height:82px;border-radius:99px;margin:0 auto 12px;
background:var(--urgu-och);color:var(--urgu);display:grid;place-items:center;
font-size:30px;font-weight:800;overflow:hidden;border:1px solid var(--chiziq)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profil-ism{font-size:20px;font-weight:800;letter-spacing:-.02em}
.profil-tel{color:var(--kul);font-size:14px;margin-top:3px}
.profil-stat{display:flex;justify-content:center;gap:26px;margin-top:16px}
.profil-stat div{text-align:center}
.profil-stat b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.profil-stat span{font-size:12px;color:var(--och);font-weight:650;
letter-spacing:.07em;text-transform:uppercase}
.yigma{margin:0 16px 9px;background:var(--panel);border:1px solid var(--chiziq);
border-radius:15px;overflow:hidden}
.yigma>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
padding:15px 15px;font-weight:650;font-size:15px}
.yigma>summary::-webkit-details-marker{display:none}
.yigma>summary .b{width:34px;height:34px;border-radius:10px;background:var(--urgu-och);
color:var(--urgu);display:grid;place-items:center;flex:0 0 auto}
.yigma>summary .oq{margin-left:auto;color:var(--och);transition:transform .18s ease;
display:grid;place-items:center}
.yigma[open]>summary .oq{transform:rotate(180deg)}
.yigma>summary>span:not(.b):not(.oq):not(.qiy),.yigma>summary{min-width:0}
.yigma>summary{gap:11px;padding:15px 14px;font-size:14.5px}
.yigma>summary .nom{flex:2 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yigma>summary .qiy{margin-left:auto;color:var(--och);font-size:13px;font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:118px;flex:0 1 auto}
.yigma>summary .qiy+.oq{margin-left:8px}
.yigma-ich{padding:2px 15px 15px;border-top:1px solid var(--chiziq-och)}
.yigma-ich label{display:block;font-size:12.5px;font-weight:700;color:var(--kul);
margin:14px 0 6px;letter-spacing:.02em}
.yigma-ich input,.yigma-ich textarea,.yigma-ich select{font-size:15px;padding:11px 13px;
min-height:0;border-radius:11px}
.yigma-ich textarea{min-height:72px}
/* Ilovani o'rnatish */
.ornat{margin:6px 16px 0;display:flex;align-items:center;gap:12px;width:calc(100% - 32px);
background:var(--urgu);color:#fff;border:0;border-radius:15px;padding:15px;
font-size:15px;font-weight:700;text-align:left}
.ornat .b{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);
display:grid;place-items:center;flex:0 0 auto}
.ornat span{flex:1}
.ornat small{display:block;font-weight:500;font-size:12.5px;opacity:.8;margin-top:2px}
/* Karusel: admin rasm yuklamagan holat — brend fon */
.karusel-bosh{width:100%;height:100%;background:
radial-gradient(120% 90% at 78% 22%, rgba(255,255,255,.16), transparent 60%),
linear-gradient(150deg, var(--urgu-tim), var(--urgu))}
/* Profil: chip tanlovi (teri turi) */
.tanlov-chiplar{display:flex;flex-wrap:wrap;gap:7px}
.tanlov-chiplar button{background:var(--fon);border:1px solid var(--chiziq);
border-radius:99px;padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--matn)}
.tanlov-chiplar button.tanlangan{background:var(--urgu);border-color:var(--urgu);color:#fff}
.yigma-ich .tanlov-tugma{margin-top:8px}
/* O'rnatish yo'riqnomasi qadamlari (`.qadam` band — u bosqich yorlig'i) */
.ornat-qadam{display:flex;gap:12px;align-items:flex-start;margin-bottom:13px;
font-size:15px;line-height:1.5;text-transform:none;letter-spacing:0;
color:var(--matn);font-weight:400}
.ornat-qadam>span{flex:1;min-width:0}
.ornat-qadam>span b{font-weight:750}
.ornat-qadam>i{flex:0 0 auto;width:26px;height:26px;border-radius:99px;
background:var(--urgu-och);color:var(--urgu);display:grid;place-items:center;
font-size:13.5px;font-weight:800;font-style:normal}
/* ============================================================
AI CHAT — formatlangan javob, savol, to'plam
============================================================ */
/* Pufak ichidagi format: kichik sarlavha, ro'yxat, qalin */
.pufak h4{font-size:14px;font-weight:800;letter-spacing:-.01em;margin:14px 0 6px;
color:var(--urgu)}
.pufak h4:first-child{margin-top:0}
.pufak p{margin:0 0 8px}
.pufak p:last-child{margin-bottom:0}
.pufak ul{margin:0 0 8px;padding-left:0;list-style:none}
.pufak li{position:relative;padding-left:17px;margin-bottom:5px}
.pufak li::before{content:"";position:absolute;left:4px;top:9px;width:5px;height:5px;
border-radius:99px;background:var(--urgu)}
.pufak li:last-child{margin-bottom:0}
.pufak b{font-weight:750}
.xabar.ai .pufak{white-space:normal}
/* Odam yuborgan surat */
.men-rasm{max-width:190px;border-radius:16px 16px 6px 16px;display:block;
border:1px solid var(--chiziq)}
/* --- Aniqlashtiruvchi savol --- */
.savol-quti{background:var(--panel);border:1px solid var(--chiziq);border-radius:16px;
padding:14px;margin-top:2px}
.savol-matn{display:flex;gap:8px;align-items:flex-start;font-weight:650;font-size:14.5px;
line-height:1.4;margin-bottom:11px}
.savol-matn i[data-ik]{color:var(--urgu);margin-top:2px}
.savol-variantlar{display:flex;flex-wrap:wrap;gap:7px}
.savol-variantlar button{background:var(--fon);border:1px solid var(--chiziq);
border-radius:99px;padding:9px 15px;font-size:13.5px;font-weight:650;color:var(--matn)}
.savol-variantlar button:active{background:var(--urgu);border-color:var(--urgu);color:#fff}
.savol-variantlar .rasmli{display:flex;align-items:center;gap:6px;
background:var(--urgu-och);border-color:transparent;color:var(--urgu)}
/* --- To'plam --- */
.toplam{background:var(--panel);border:1px solid var(--chiziq);border-radius:18px;
overflow:hidden;margin-top:2px}
.toplam-bosh{padding:15px 15px 12px;background:var(--urgu-och)}
.toplam-teg{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;
letter-spacing:.16em;text-transform:uppercase;color:var(--urgu);margin-bottom:7px}
.toplam-bosh h4{font-size:16.5px;font-weight:800;letter-spacing:-.015em;margin:0}
.toplam-bosh p{margin:5px 0 0;font-size:13.5px;color:var(--kul);line-height:1.45}
.toplam-royxat{padding:10px 10px 4px;display:flex;flex-direction:column;gap:8px}
.toplam-royxat .t-karta{border:0;background:none;padding:2px}
.toplam-royxat .t-karta+.t-karta{border-top:1px solid var(--chiziq-och);padding-top:11px}
.t-tartib{position:absolute;left:-5px;top:-5px;width:21px;height:21px;border-radius:99px;
background:var(--urgu);color:#fff;font-size:12px;font-weight:800;
display:grid;place-items:center;border:2px solid var(--panel)}
.t-karta .rasm{position:relative;overflow:visible}
.t-karta .rasm img{border-radius:12px}
.t-bosqich{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--urgu)}
.t-qanday{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;color:var(--och);
line-height:1.4;margin-top:5px}
.t-qanday i[data-ik]{margin-top:2px;flex:0 0 auto}
.toplam-past{display:flex;align-items:center;gap:12px;padding:12px 14px 14px;
border-top:1px solid var(--chiziq-och)}
.toplam-past b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em}
.toplam-tugma{width:auto;flex:1;margin:0;padding:13px 16px;font-size:14.5px}
.toplam-tugma.qoshildi{background:var(--yashil)}
/* --- Yozish paneli: rasm biriktirish --- */
.yozish-biriktir{flex:0 0 auto;width:36px;height:36px;margin-left:-9px;border-radius:99px;
background:none;border:0;color:var(--kul);display:grid;place-items:center}
.yozish-biriktir:active{background:var(--chiziq-och)}
.chat-rasm{display:flex;align-items:center;gap:10px;padding:8px 10px 10px}
.chat-rasm img{width:44px;height:44px;border-radius:11px;object-fit:cover;
border:1px solid var(--chiziq)}
.chat-rasm span{flex:1;font-size:13.5px;font-weight:600;color:var(--kul)}
.chat-rasm button{background:none;border:0;color:var(--och);padding:8px;
display:grid;place-items:center}
/* Arzonroq variantda tejaladigan summa */
.tejash{display:flex;align-items:center;gap:7px;margin-top:10px;padding:10px 12px;
background:var(--yashil-och);color:var(--yashil);border-radius:11px;
font-size:13.5px;font-weight:650}
.tejash i[data-ik]{flex:0 0 auto}
/* Skaner ekrani statusbar ostiga yopishmasin */
#tab-skaner{padding-top:calc(10px + env(safe-area-inset-top))}
#tab-savat,#tab-profil,#tab-natija{padding-top:calc(6px + env(safe-area-inset-top))}
/* ============================================================
MAHSULOT KARTASI
Oq karta, krem fonda yumshoq soya. Bosilganda biroz kichrayadi,
ro'yxat chizilganda kartalar navbatma-navbat paydo bo'ladi.
============================================================ */
.mahsulot{position:relative;background:var(--panel);border:1px solid var(--chiziq);
border-radius:18px;overflow:hidden;padding:0;text-align:left;color:inherit;
display:flex;flex-direction:column;box-shadow:var(--sh);
transition:transform var(--k-tez) var(--k-egri),box-shadow var(--k-orta)}
.mahsulot:active{transform:scale(.975)}
.qator .mahsulot,.tor .mahsulot,.bolim-tor .mahsulot{animation:k-paydo var(--k-sekin) var(--k-egri) both}
.qator .mahsulot:nth-child(2),.tor .mahsulot:nth-child(2){animation-delay:40ms}
.qator .mahsulot:nth-child(3),.tor .mahsulot:nth-child(3){animation-delay:80ms}
.qator .mahsulot:nth-child(4),.tor .mahsulot:nth-child(4){animation-delay:120ms}
.qator .mahsulot:nth-child(5),.tor .mahsulot:nth-child(5){animation-delay:160ms}
.qator .mahsulot:nth-child(6),.tor .mahsulot:nth-child(6){animation-delay:200ms}
.mahsulot .rasm{aspect-ratio:1/1;background:var(--chiziq-och);border:0;border-radius:0;
color:color-mix(in srgb,var(--urgu) 35%,transparent)}
.mahsulot .rasm img{animation:k-sochil var(--k-sekin) ease both}
.mahsulot .mtan{padding:11px 12px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.mahsulot .mnom{font-family:var(--sans);font-weight:700;font-size:14px;
line-height:1.3;letter-spacing:-.01em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mahsulot .mnarx{font-family:var(--sans);font-weight:800;font-size:16px;
letter-spacing:-.02em;margin-top:2px}
.mahsulot .mnarx s{font-weight:500;font-size:12.5px;color:var(--och);margin-left:6px}
.mahsulot .mbrend{font-size:12px;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:var(--och)}
/* ★ reyting — faqat haqiqiy son bo'lganda chiqadi */
.mreyting{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;
color:var(--matn)}
.mreyting i[data-ik]{color:#e8a01e}
.mreyting .soni{color:var(--och);font-weight:500;background:none;padding:0;border:0}
/* Yurakcha — rasm ustida. Ko'rinishi 34px, bosiladigan joyi esa 46px:
barmoq bilan nishonga olish oson bo'lsin (Play talabi — 48dp). */
.yurak{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:99px;
background:rgba(255,255,255,.94);color:var(--och);display:grid;place-items:center;
z-index:2;box-shadow:0 2px 8px rgba(59,3,4,.12)}
.yurak::after{content:'';position:absolute;inset:-6px;border-radius:99px}
.yurak.faol{color:var(--urgu);animation:k-urish .38s var(--k-sakra)}
.yurak.faol svg path{fill:currentColor}
@media (prefers-color-scheme:dark){html:not([data-mavzu="kunduzgi"]) .yurak{background:rgba(36,24,24,.92)}}
html[data-mavzu="tungi"] .yurak{background:rgba(36,24,24,.92)}
/* Pastki qator: moslik yorlig'i va «+» */
.mpast{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:7px}
.teg-mos{font-size:12px;font-weight:750;padding:4px 9px;border-radius:8px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.teg-yashil{background:var(--lime-och);color:var(--lime-tim)}
.teg-qizil{background:var(--urgu-och);color:var(--urgu)}
.karta-qosh{position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:99px;
background:var(--urgu);color:#fff;display:grid;place-items:center;
box-shadow:0 6px 14px -8px rgba(171,10,12,.9);
transition:background var(--k-orta),color var(--k-orta),transform var(--k-tez)}
.karta-qosh::after{content:'';position:absolute;inset:-4px;border-radius:99px}
.karta-qosh:active{transform:scale(.88)}
/* Savatga tushdi — och yashil, «urib» tasdiqlaydi */
.karta-qosh.qoshildi{background:var(--lime);color:#3b0304;box-shadow:none;
animation:k-urish .38s var(--k-sakra)}
.nishon-kichik.chegirma{background:var(--urgu)}
/* Karta ichidagi nishonlar chapda qolsin (yurakcha o'ngda) */
.rasm .nishonlar{max-width:calc(100% - 50px)}
/* Katalog kelguncha — skelet */
.skelet-bolim{padding:22px 0 4px}
.skelet-sarlavha{height:22px;width:140px;margin:0 16px 14px}
.skelet-karta{flex:0 0 160px;display:flex;flex-direction:column;gap:9px}
.skelet-rasm{aspect-ratio:1;border-radius:18px}
.skelet-satr{height:13px}
.skelet-satr.qisqa{width:60%}
/* ============================================================
SKANER — namunadagidek: qadam, yuz ramkasi, belgilar
============================================================ */
.ekran-bosh{text-align:center;padding:20px 26px 4px}
.ekran-bosh h2{font-size:21px;font-weight:800;letter-spacing:-.025em;margin-bottom:7px}
.ekran-bosh p{color:var(--kul);font-size:14.5px;line-height:1.5;margin:0}
.qadam-holat{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.qadam-holat span:first-child{flex:0 0 auto;width:38px;height:38px;border-radius:99px;
border:2px solid var(--urgu);color:var(--urgu);display:grid;place-items:center;
font-size:12.5px;font-weight:800}
.qadam-chiziq{flex:1;height:5px;border-radius:99px;background:var(--chiziq);overflow:hidden}
.qadam-chiziq i{display:block;height:100%;background:var(--yashil);border-radius:99px}
/* Yuz ramkasi — namunadagi burchakli kadr */
.yuz-ramka{position:absolute;inset:12% 14%;border-radius:46% 46% 42% 42%;
border:2px solid rgba(255,255,255,.75);pointer-events:none}
/* Nimalarni aniqlaymiz */
.skan-belgilar{display:flex;justify-content:space-between;gap:6px;padding:14px 18px 4px}
.skan-belgilar div{flex:1;display:grid;justify-items:center;gap:6px;font-size:12px;
font-weight:600;color:var(--kul);text-align:center}
.skan-belgilar .b{width:44px;height:44px;border-radius:99px;display:grid;place-items:center}
.skan-belgilar .b-qizil{background:var(--urgu-och);color:var(--urgu)}
.skan-belgilar .b-kok{background:var(--kok-och);color:var(--kok)}
.skan-belgilar .b-sariq{background:var(--sariq-och);color:var(--sariq)}
.skan-belgilar .b-yashil{background:var(--yashil-och);color:var(--yashil)}
.skan-belgilar .b-binafsha{background:#f2ecfb;color:#6b46c1}
@media (prefers-color-scheme:dark){html:not([data-mavzu="kunduzgi"]) .skan-belgilar .b-binafsha{background:#1d1729;color:#a98ae0}}
html[data-mavzu="tungi"] .skan-belgilar .b-binafsha{background:#1d1729;color:#a98ae0}
/* ============================================================
SAVAT — namunadagidek
============================================================ */
.ekran-satr{display:flex;align-items:center;justify-content:space-between;
padding:18px 16px 12px}
.ekran-satr h2{font-size:22px;font-weight:800;letter-spacing:-.03em}
.belgi-tugma{background:none;border:0;color:var(--och);padding:8px;
display:grid;place-items:center;border-radius:99px}
.belgi-tugma:active{background:var(--chiziq-och)}
.urgu-rang{color:var(--urgu)}
.qtr.jami .v{font-size:19px;font-weight:800;letter-spacing:-.02em}
/* AI taklifi savat ostida */
.ai-taklif{border:1px solid var(--urgu-och);background:var(--panel)}
.ai-taklif-bosh{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:var(--urgu);margin-bottom:8px}
.ai-taklif p{margin:0 0 12px;font-size:14px;color:var(--kul);line-height:1.45}
.ai-taklif-qator{display:flex;align-items:center;gap:12px}
.ai-taklif-qator .savat-rasm{width:52px;height:52px;flex:0 0 auto;border-radius:12px;
overflow:hidden;background:var(--chiziq-och);display:grid;place-items:center;color:var(--och)}
.ai-taklif-qator .savat-rasm img{width:100%;height:100%;object-fit:cover}
.ai-taklif-qator .savat-tan{flex:1;min-width:0}
.ai-taklif-qator .savat-nom{font-weight:650;font-size:14px;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ai-taklif-qator .savat-brend{font-size:12px;font-weight:750;letter-spacing:.12em;
text-transform:uppercase;color:var(--och)}
.ai-taklif-qator .savat-narx{font-weight:800;font-size:14.5px;margin-top:3px}
.ai-taklif-qator .karta-qosh{width:34px;height:34px}
/* Savatdagi mahsulot rasmi — neytral fon (ilgari to'q gradient edi) */
.savat-rasm{background:var(--chiziq-och);color:var(--och);display:grid;place-items:center}
/* Skaner ekrani: tugma pastki menyu ostida qolmasin */
#tab-skaner{padding-bottom:24px}
.skaner-namuna{max-height:38vh;width:auto}
.skaner-namuna img{width:auto;height:100%;max-width:100%}
/* Mahsulot sahifasi: reyting, sotuv soni, moslik yorliqlari */
.oyna-baho{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.oyna-baho .mreyting{font-size:13.5px}
.oyna-teglar{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.oyna-teglar .teg-mos{font-size:12px;padding:6px 11px;border-radius:9px}
/* Profil statistikasi: sevimlilar bosiladigan */
.profil-stat div[data-sevimli]{cursor:pointer}
.profil-stat b{font-size:20px}
#sevimli-tan .mahsulot{border-radius:13px}
/* ---------- Buyurtma yo'li (4 bosqich) ---------- */
.yol{display:flex;align-items:flex-start;margin:14px 0 4px;padding:0 2px}
.yol-qadam{flex:1;position:relative;display:grid;justify-items:center;gap:6px;
font-size:12px;font-weight:600;color:var(--och);text-align:center;line-height:1.25}
.yol-qadam .d{width:32px;height:32px;border-radius:99px;display:grid;place-items:center;
background:var(--chiziq-och);color:var(--och);border:2px solid transparent;z-index:1}
/* Bosqichlarni bog'lovchi chiziq */
.yol-qadam::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;
background:var(--chiziq)}
.yol-qadam:first-child::before{display:none}
.yol-qadam.otdi .d{background:var(--yashil-och);color:var(--yashil)}
.yol-qadam.otdi{color:var(--kul)}
.yol-qadam.otdi::before{background:var(--yashil)}
.yol-qadam.joriy .d{background:var(--urgu);color:#fff}
.yol-qadam.joriy{color:var(--urgu);font-weight:750}
.yol-qadam.joriy::before{background:var(--yashil)}
/* ============================================================
SHARHLAR — haqiqiy mijoz bahosi
============================================================ */
.mreyting.manba{color:var(--kul)}
.mreyting.manba i[data-ik]{color:var(--och)}
.yulduzlar{display:inline-flex;gap:2px;line-height:0}
.yld{color:var(--chiziq);display:inline-flex}
.yld.faol{color:#f0a92a}
.yld.faol svg path{fill:currentColor}
.mreyting i[data-ik] svg path{fill:currentColor}
.sharh{padding:13px 0;border-bottom:1px solid var(--chiziq-och)}
.sharh:last-child{border-bottom:0;padding-bottom:0}
.sharh.meniki{background:var(--urgu-och);border:0;border-radius:13px;
padding:13px 14px;margin-bottom:12px}
.sharh-bosh{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.sharh-bosh b{font-size:14px;font-weight:700}
.sharh p{margin:0;font-size:14.5px;line-height:1.5;color:var(--kul)}
.sharh-amal{display:flex;gap:14px;margin-top:10px}
.matn-tugma.xavf{color:var(--qizil)}
/* Baho tanlash */
.baho-tanlov{display:flex;justify-content:center;gap:8px;margin:4px 0 6px}
.baho-tanlov button{background:none;border:0;padding:4px;color:var(--chiziq);
display:grid;place-items:center;border-radius:8px}
.baho-tanlov button.faol{color:#f0a92a}
.baho-tanlov button.faol svg path{fill:currentColor}
.baho-matn{text-align:center;font-size:14px;font-weight:700;color:var(--kul);
min-height:20px;margin-bottom:14px}
/* ============================================================
AI CHAT — formatlangan javob va yig'iladigan tavsiya
============================================================ */
.pufak h4{display:flex;align-items:center;gap:7px}
.pufak .h4-belgi{font-size:15px;line-height:1}
.pufak ol{margin:0 0 8px;padding-left:0;list-style:none;counter-reset:qadam}
.pufak ol li{position:relative;padding-left:26px;margin-bottom:6px;counter-increment:qadam}
.pufak ol li::before{content:counter(qadam);position:absolute;left:0;top:1px;
width:18px;height:18px;border-radius:99px;background:var(--urgu-och);color:var(--urgu);
font-size:12px;font-weight:800;display:grid;place-items:center}
.diqqat-satr{display:flex;gap:8px;align-items:flex-start;margin:10px 0 4px;
padding:10px 12px;background:var(--sariq-och);color:var(--sariq);
border-radius:11px;font-size:13.5px;line-height:1.45;font-weight:600}
.diqqat-satr i[data-ik]{flex:0 0 auto;margin-top:1px}
.diqqat-satr span{color:var(--matn);font-weight:500}
/* Tavsiyalar yig'ilgan holda */
.tavsiya-yigma{background:var(--panel);border:1px solid var(--chiziq);
border-radius:16px;overflow:hidden;margin-top:2px}
.tavsiya-yigma>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
gap:11px;padding:13px 14px}
.tavsiya-yigma>summary::-webkit-details-marker{display:none}
.tav-belgi{width:36px;height:36px;border-radius:11px;background:var(--urgu-och);
color:var(--urgu);display:grid;place-items:center;flex:0 0 auto}
.tav-matn{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tav-matn b{font-size:14.5px;font-weight:750;letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tav-matn span{font-size:12.5px;color:var(--och);font-weight:600}
.tav-oq{color:var(--och);transition:transform .18s ease;display:grid;place-items:center}
.tavsiya-yigma[open] .tav-oq{transform:rotate(180deg)}
.tavsiya-ich{border-top:1px solid var(--chiziq-och);padding:4px 0 0}
.tavsiya-ich .toplam{border:0;border-radius:0;margin:0}
.tavsiya-ich .tavsiyalar{padding:8px 10px 10px;gap:8px}
.tavsiya-ich .t-karta{border:0;padding:2px}
.tavsiya-ich .t-karta+.t-karta{border-top:1px solid var(--chiziq-och);padding-top:11px}
/* ══════════ KIRISH EKRANI ══════════
Brend qizili fonida och yashil logotip (tabassum chizilib chiqadi),
pastdan oq panel ko'tariladi. Ilova Play'dan birinchi marta
ochilganda odam AYNAN shu ekranni ko'radi — u do'konning yuzi. */
.kirish-fon{min-height:100dvh;display:flex;flex-direction:column;
background:radial-gradient(120% 60% at 50% 0%, #c41418, var(--k-qizil) 55%, var(--k-qizil-tim));
color:#fff}
.kirish-tepa{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:14px;padding:calc(36px + env(safe-area-inset-top)) 24px 30px;min-height:34dvh}
.kirish-logo{color:var(--k-lime);line-height:0;animation:k-kattalash var(--k-sekin) var(--k-sakra) both}
.kirish-logo svg{width:min(200px,52vw);height:auto;overflow:visible}
.kirish-logo path[stroke]{stroke-dasharray:700;animation:k-tabassum 1.1s var(--k-egri) .25s both}
.kirish-logo circle:nth-of-type(-n+2){transform-box:fill-box;transform-origin:center;
animation:k-kipriq 4.8s ease-in-out 2s infinite}
.kirish-shior{margin:0;font-size:15px;font-weight:650;color:rgba(255,255,255,.86);
letter-spacing:.01em;animation:k-paydo var(--k-sekin) var(--k-egri) .35s both}
.kirish-quti{background:var(--panel);color:var(--matn);border-radius:28px 28px 0 0;
padding:28px 22px calc(26px + env(safe-area-inset-bottom));width:100%;max-width:520px;
margin:0 auto;text-align:center;box-shadow:0 -18px 40px -24px rgba(0,0,0,.5);
animation:k-pastdan var(--k-sekin) var(--k-egri) .1s both}
.kirish-quti h1{font-size:25px;margin:0 0 6px}
.kirish-izoh{color:var(--kul);font-size:15px;line-height:1.5;margin:0 0 18px}
.kirish-usullar{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.g-tugma{min-height:44px;display:flex;justify-content:center}
.kirish-usul{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
min-height:48px;border-radius:99px;border:1.5px solid var(--chiziq);background:var(--panel);
color:var(--matn);font-size:15.5px;font-weight:700}
.kirish-usul:active{background:var(--chiziq-och);transform:scale(.98)}
.kirish-usul-belgi{width:28px;height:28px;border-radius:99px;display:grid;place-items:center}
.kirish-usul-belgi.tg{background:#229ed9;color:#fff}
.kirish-ajratgich{display:flex;align-items:center;gap:12px;margin:20px 0 14px;
color:var(--och);font-size:13px;font-weight:650}
.kirish-ajratgich::before,.kirish-ajratgich::after{content:'';flex:1;height:1px;background:var(--chiziq)}
.yashirin-yorliq{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
.kirish-quti input{width:100%;padding:15px 16px;font-size:18px;font-weight:700;
text-align:center;letter-spacing:.5px;border:1.5px solid var(--chiziq);
border-radius:16px;background:var(--fon);color:var(--matn)}
.kirish-quti input:focus{outline:none;border-color:var(--urgu);box-shadow:0 0 0 4px var(--urgu-och)}
.kirish-kod-maydon{font-size:28px!important;letter-spacing:.45em!important;padding-left:.45em!important}
.kirish-mayda{font-size:13px;color:var(--och);margin:8px 0 14px;line-height:1.5}
.kirish-mayda b{color:var(--kul)}
.kirish-quti .asosiy{width:100%;margin-top:6px}
.tugma-havola{text-decoration:none}
.kirish-quti .matnli{width:100%;margin-top:6px;background:none;border:0;min-height:44px;
color:var(--kul);font:inherit;font-size:15px;font-weight:650;cursor:pointer}
.kirish-quti .matnli:disabled{opacity:.55}
.kirish-shart{margin:18px 0 0;font-size:12.5px;color:var(--och);line-height:1.55}
.kirish-shart a{color:var(--urgu);font-weight:650}
.kirish-xato{background:var(--qizil-och);color:var(--qizil);font-size:14px;font-weight:600;
border-radius:12px;padding:10px 12px;margin:0 0 14px;line-height:1.45;
animation:k-paydo var(--k-orta) var(--k-egri)}
.kirish-belgi-katta{width:68px;height:68px;margin:0 auto 14px;border-radius:99px;display:grid;
place-items:center;background:var(--urgu-och);color:var(--urgu);
animation:k-kattalash var(--k-sekin) var(--k-sakra)}
.kirish-belgi-katta.tg{background:#229ed9;color:#fff}
/* Kod: brauzerdagi va botdagi kod MOS kelishi kerak — shu tekshiruv
begonaning so'rovini adashib tasdiqlashdan saqlaydi. */
.kirish-kod{background:var(--fon);border:1.5px solid var(--chiziq);
border-radius:16px;padding:16px;margin-bottom:8px}
.kirish-kod span{display:block;font-size:12px;text-transform:uppercase;
letter-spacing:.06em;color:var(--och);font-weight:700}
.kirish-kod b{display:block;font-size:38px;font-weight:800;letter-spacing:7px;
color:var(--urgu);margin-top:6px}
.kirish-kutish{display:flex;align-items:center;justify-content:center;gap:10px;
color:var(--kul);font-size:14.5px;font-weight:600;margin-top:14px}
.kirish-kutish .aylana{width:18px;height:18px;border:2.5px solid var(--chiziq);margin:0;
border-top-color:var(--urgu);border-radius:50%;animation:k-aylan .8s linear infinite}
/* ============================================================
BREND QATLAMI — tugmalar, skaner, maslahatchi, profil
============================================================ */
/* ── Tugmalar ──
Asosiy — brend qizili, bosilganda to'qlashadi va biroz kichrayadi.
Ikkinchi darajali — oq, ingichka ramka. */
.asosiy,.ikkilamchi{border-radius:16px;transition:transform var(--k-tez) var(--k-egri),
background-color var(--k-orta),box-shadow var(--k-orta),opacity var(--k-tez)}
.asosiy{background:var(--urgu);color:#fff;box-shadow:0 10px 22px -14px rgba(171,10,12,.95)}
.asosiy:active{background:var(--urgu-tim);transform:scale(.975);opacity:1}
.ikkilamchi{background:var(--panel);color:var(--matn);border:1.5px solid var(--chiziq)}
.ikkilamchi:active{background:var(--chiziq-och);transform:scale(.975);opacity:1}
button:active{opacity:1}
.tugma-juft{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}
.tugma-juft .ikkilamchi{min-height:50px;padding:10px 8px;font-size:14.5px;gap:7px}
/* ── Ekranlar almashganda ── */
.ekran:not(.yashirin){animation:k-paydo var(--k-orta) var(--k-egri)}
#tab-maslahat.ekran:not(.yashirin){animation:k-sochil var(--k-orta) ease}
/* ── Bosiladigan joy kamida 44px ──
Ko'rinishi kichik bo'lsa ham barmoq tegadigan maydon kattaroq:
Google Play tekshiruvi 48dp dan kichik nishonni xato deb belgilaydi. */
.soni button{width:44px;height:40px}
.t-qosh{width:40px;height:40px;position:relative}
.t-qosh::after,.yozish-biriktir::after,.yozish-tugma::after{content:'';position:absolute;inset:-4px}
.yozish-tugma{position:relative;width:42px;height:42px}
.yozish-biriktir{position:relative;width:42px;height:42px}
.suhbat-tozala,.belgi-tugma,.chat-rasm button,.qidiruv .tozala{min-width:44px;min-height:44px;
display:grid;place-items:center}
.matn-tugma{min-height:44px;padding:10px 4px}
.bolim-satr button{min-height:44px;color:var(--urgu)}
.n-bolim-bosh button{min-height:44px;padding:0 2px}
.filtr-yorliq button{min-width:32px;min-height:32px}
/* ── Bo'lim sarlavhasi ── */
.bolim-satr h2{font-size:20px}
/* ── Skaner ── */
.limit-satr{justify-content:space-between;border-radius:14px}
.limit-nuqtalar{display:flex;gap:5px;flex:0 0 auto}
.limit-nuqtalar i{width:9px;height:9px;border-radius:99px;background:var(--lime);
box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--lime-tim) 40%,transparent)}
.limit-nuqtalar i.ishlatildi{background:var(--chiziq);box-shadow:none}
.qadam-holat span:first-child{border-color:var(--urgu);color:var(--urgu)}
.qadam-chiziq i{background:var(--urgu)}
/* Namunasiz quti: brend tabassumi va «nafas oluvchi» yuz ramkasi */
.skaner-namuna:not(.rasmli){background:
radial-gradient(70% 55% at 50% 45%, var(--lime-och), transparent 72%), var(--chiziq-och)}
.skaner-namuna .namuna-yoq{width:46%;color:var(--urgu);line-height:0}
.skaner-namuna .namuna-yoq svg{width:100%;height:auto;overflow:visible}
.skaner-namuna .namuna-yoq path{stroke-dasharray:700;animation:k-tabassum 1.2s var(--k-egri) .2s both}
.skaner-namuna:not(.rasmli) .yuz-ramka{border:2px dashed color-mix(in srgb,var(--urgu) 55%,transparent);
animation:k-nafas 2.8s ease-in-out infinite}
/* Aniqlanadigan belgilar — qizil va och yashil navbatma-navbat */
.skan-belgilar .b{background:var(--urgu-och);color:var(--urgu)}
.skan-belgilar div:nth-child(even) .b{background:var(--lime-och);color:var(--lime-tim)}
/* ── AI maslahatchi ── */
.suhbat-avatar{background:var(--urgu);color:var(--lime);width:40px;height:40px}
.suhbat-avatar svg{width:26px;height:auto}
.suhbat-bosh-ekran .halqa{background:var(--lime);color:var(--k-qizil);width:84px;height:84px}
.suhbat-bosh-ekran .halqa svg{width:56px;height:auto;overflow:visible}
.suhbat-bosh-ekran .halqa path{stroke-dasharray:700;animation:k-tabassum 1s var(--k-egri) .1s both}
.suhbat-holat::before{background:var(--lime-tim)}
.xabar.men .pufak{background:var(--urgu)}
/* ── Profil ── */
.avatar{background:var(--lime);color:var(--k-qizil);border:3px solid var(--panel);
box-shadow:0 0 0 2px var(--lime),var(--sh-katta)}
.profil-stat{background:var(--panel);border:1px solid var(--chiziq);border-radius:18px;
padding:14px 8px;margin:18px 0 0;gap:0;box-shadow:var(--sh)}
.profil-stat div{flex:1;border-right:1px solid var(--chiziq-och)}
.profil-stat div:last-child{border-right:0}
.profil-stat span{text-transform:none;letter-spacing:0;font-size:12.5px}
.yigma{border-radius:18px;box-shadow:var(--sh)}
.yigma>summary .b{border-radius:12px}
.yigma:nth-of-type(even)>summary .b{background:var(--lime-och);color:var(--lime-tim)}
/* ── Savat va checkout ── */
.yopishqoq{box-shadow:0 -8px 26px -18px rgba(59,3,4,.45)}
/* Skaner: asosiy va ikkinchi darajali tugmalar BIRINCHI ekranga sig'sin.
Namuna qutisi pastroq — telefon kichik bo'lsa ham tugmalar menyu
ostida qolib ketmaydi. */
.skaner-namuna{max-height:31vh;margin:12px auto 10px}
.ekran-bosh{padding:12px 26px 0}
.qadam-holat{margin-bottom:12px}
.skan-belgilar{padding:8px 18px 2px}
#skaner-boshlash .ichki{margin-top:10px}
.filtr-satr:empty{display:none}
.oyna-rasm.bosh{aspect-ratio:16/10}
/* Ro'yxatdan o'tish — logotip qizil (krem fonda och yashil ko'rinmaydi) */
.royxat-bosh{text-align:center;padding-top:calc(26px + env(safe-area-inset-top))}
.royxat-logo{color:var(--urgu);line-height:0;margin-bottom:14px}
.royxat-logo svg{width:116px;height:auto;overflow:visible}
.royxat-logo path[stroke]{stroke-dasharray:700;animation:k-tabassum 1s var(--k-egri) .1s both}
#ekran-royxat .karta{animation:k-paydo var(--k-sekin) var(--k-egri) .1s both}
/* ── Hisob: o'chirish oynasi ── */
.tanlov-tugma.xavfli,.tanlov-tugma.xavfli .oq{color:var(--qizil)}
.asosiy.xavfli{background:var(--qizil)}
.ochir-oyna{padding:30px 20px 4px;text-align:center}
.ochir-oyna h2{margin:0 0 12px}
.ochir-belgi{width:64px;height:64px;margin:0 auto 14px;border-radius:99px;display:grid;
place-items:center;background:var(--qizil-och);color:var(--qizil)}
.ochir-royxat{text-align:left;margin:0 0 16px;padding:0 0 0 18px;font-size:14.5px;
line-height:1.55;color:var(--kul)}
.ochir-royxat li{margin-bottom:8px}
.ochir-royxat b{color:var(--matn)}
.ochir-tasdiq{display:flex;align-items:center;gap:10px;text-align:left;font-size:15px;
font-weight:650;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--fon);
border:1.5px solid var(--chiziq);cursor:pointer}
.ochir-tasdiq input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--qizil);margin:0}
/* Oflayn: oxirgi saqlangan ma'lumot ko'rsatilmoqda */
.oflayn-banner{position:fixed;left:12px;right:12px;bottom:calc(var(--past) + 10px + env(safe-area-inset-bottom));
z-index:50;display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:14px;
background:#2a1c1c;color:#fff;font-size:13.5px;font-weight:650;box-shadow:var(--sh-katta);
max-width:600px;margin:0 auto;animation:k-paydo var(--k-orta) var(--k-egri)}
.oflayn-banner i{color:var(--k-lime)}
/* Buyurtmadan keyin: bildirishnomani yoqish taklifi */
.push-taklif{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 12px 12px 14px;
border-radius:16px;background:var(--lime-och,#f0f7df);text-align:left;animation:k-paydo var(--k-orta) var(--k-egri) both}
.push-taklif .b{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
background:var(--k-qizil);color:var(--k-lime)}
.push-taklif>span:nth-child(2){flex:1;min-width:0;font-size:14px;line-height:1.35;color:var(--matn)}
.push-taklif small{display:block;font-size:12.5px;color:var(--och);margin-top:2px}
.push-taklif .ikkilamchi{width:auto;min-height:44px;padding:0 16px;font-size:14px;flex:0 0 auto}