/* markazi.uz Telegram Mini App — dizayn tizimi */
:root{
    --accent:#F5871F;
    --accent-ink:#ffffff;
    --pos:#1EA672;
    --neg:#E1483B;
    /* Telegram temasidan (fallback bilan) */
    --bg: var(--tg-theme-secondary-bg-color, #EFEFF3);
    --card: var(--tg-theme-bg-color, #ffffff);
    --text: var(--tg-theme-text-color, #14161A);
    --hint: var(--tg-theme-hint-color, #8A8F98);
    --link: var(--tg-theme-link-color, #2E7CD6);
    --header: var(--tg-theme-header-bg-color, var(--card));
    --hair: rgba(128,128,128,.18);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
    background:var(--bg); color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
    font-size:15px; line-height:1.45;
    -webkit-font-smoothing:antialiased;
    padding-bottom:env(safe-area-inset-bottom);
}
#app{max-width:640px; margin:0 auto; min-height:100vh}
#screen{padding:12px 12px 78px}
img{max-width:100%; display:block}
a{color:var(--link); text-decoration:none}
button{font-family:inherit}

/* ------- utility ------- */
.row{display:flex; align-items:center; gap:10px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.muted{color:var(--hint)}
.small{font-size:12px}
.b{font-weight:700}
.center{text-align:center}
.mt{margin-top:12px}
.tabnum{font-variant-numeric:tabular-nums}
.hidden{display:none !important}

/* ------- header ------- */
.head{
    position:sticky; top:0; z-index:5; background:var(--header);
    padding:10px 12px; margin:-12px -12px 12px; border-bottom:1px solid var(--hair);
    display:flex; align-items:center; gap:10px;
}
.head h1{font-size:17px; font-weight:800; margin:0; letter-spacing:-.01em}
.head .sub{font-size:11px; color:var(--hint)}
.head .back{font-size:22px; line-height:1; color:var(--text); background:none; border:0; padding:0 4px}

/* ------- search ------- */
.search{
    display:flex; align-items:center; gap:8px; background:var(--card);
    border-radius:11px; padding:0 12px; height:40px; color:var(--hint); border:1px solid var(--hair);
}
.search input{border:0; outline:0; background:transparent; flex:1; font-size:14px; color:var(--text)}

/* ------- section titles ------- */
.sec{display:flex; align-items:center; justify-content:space-between; margin:16px 2px 8px}
.sec h2{font-size:16px; font-weight:800; margin:0; letter-spacing:-.01em}
.sec a{font-size:13px; font-weight:700}

/* ------- categories row ------- */
.cats{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto; width:76px; text-align:center}
.cat .thumb{width:76px; height:76px; border-radius:16px; background:var(--card); border:1px solid var(--hair); overflow:hidden; display:grid; place-items:center}
.cat .thumb img{width:100%; height:100%; object-fit:cover}
.cat span{display:block; font-size:11px; font-weight:600; margin-top:5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ------- promo ------- */
.promo{border-radius:16px; overflow:hidden; background:var(--card); border:1px solid var(--hair)}
.promo img{width:100%; height:auto}

/* ------- product grid ------- */
.pgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pcard{background:var(--card); border-radius:14px; border:1px solid var(--hair); overflow:hidden; display:flex; flex-direction:column}
.pcard .img{aspect-ratio:1/1; background:#f2f2f5; position:relative}
.pcard .img img{width:100%; height:100%; object-fit:cover}
.pcard .fav{position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.9); border:0; display:grid; place-items:center; font-size:15px; color:var(--accent)}
.pcard .body{padding:8px 9px 10px; display:flex; flex-direction:column; gap:6px; flex:1}
.pcard .nm{font-size:12.5px; font-weight:600; line-height:1.25; min-height:31px}
.pcard .pf{display:flex; align-items:center; justify-content:space-between; margin-top:auto}
.pcard .price{font-weight:800; font-size:13.5px}
.pcard .old{font-size:11px; color:var(--hint); text-decoration:line-through}
.badge-off{background:var(--accent); color:#fff; font-size:10px; font-weight:800; padding:2px 6px; border-radius:8px; position:absolute; top:6px; left:6px}
.plus{width:30px; height:30px; border-radius:9px; background:var(--accent); color:#fff; border:0; font-size:18px; font-weight:700; display:grid; place-items:center; flex:none}

/* ------- list rows ------- */
.list{display:flex; flex-direction:column; gap:8px}
.lrow{background:var(--card); border:1px solid var(--hair); border-radius:13px; padding:10px; display:flex; align-items:center; gap:11px}
.lrow .th{width:52px; height:52px; border-radius:10px; background:#f2f2f5; overflow:hidden; flex:none}
.lrow .th img{width:100%; height:100%; object-fit:cover}
.lrow .info{flex:1; min-width:0}
.lrow .info .nm{font-size:13px; font-weight:600; line-height:1.25}
.lrow .info .meta{font-size:11.5px; color:var(--hint); margin-top:2px}

/* ------- generic card ------- */
.card{background:var(--card); border:1px solid var(--hair); border-radius:14px; padding:14px}
.divider{height:1px; background:var(--hair); margin:8px 0}
.kv{display:flex; justify-content:space-between; align-items:center; font-size:14px; padding:3px 0}
.kv .k{color:var(--hint)}
.kv .v{font-weight:700}

/* ------- qty stepper ------- */
.qty{display:inline-flex; align-items:center; border:1px solid var(--hair); border-radius:10px; overflow:hidden; background:var(--card)}
.qty button{width:34px; height:34px; border:0; background:transparent; color:var(--text); font-size:18px; font-weight:700}
.qty span{min-width:38px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}

/* ------- buttons ------- */
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:48px; border:0; border-radius:12px; font-size:15px; font-weight:800; background:var(--accent); color:#fff}
.btn.sec{background:var(--card); color:var(--text); border:1px solid var(--hair)}
.btn.green{background:var(--pos)}
.btn:disabled{opacity:.6}
.btn-sm{height:38px; border-radius:10px; font-size:13px; width:auto; padding:0 14px}

/* pills / badges */
.pill{font-size:11px; font-weight:800; padding:4px 9px; border-radius:20px}
.pill.new{background:rgba(225,72,59,.13); color:var(--neg)}
.pill.agr{background:rgba(46,124,214,.13); color:var(--link)}
.pill.fin{background:rgba(30,166,114,.14); color:var(--pos)}
.pill.wait{background:rgba(245,135,31,.15); color:var(--accent)}

/* ------- balance card ------- */
.balance{border-radius:16px; padding:16px; background:linear-gradient(140deg,#20242e,#171b23); color:#fff}
.balance .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.6); font-weight:700}
.balance .amt{font-size:26px; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums}
.balance .amt.debt{color:#FF7A6D}
.balance .amt.ok{color:#5FD0A0}

/* ------- onboarding ------- */
.ob{text-align:center; padding:40px 24px}
.ob .logo{width:80px; height:80px; border-radius:22px; background:linear-gradient(150deg,var(--accent),#c85f0a); margin:0 auto; display:grid; place-items:center; color:#fff; font-size:34px}
.ob h2{margin:22px 0 0; font-size:22px; font-weight:800}
.ob p{margin:10px auto 0; color:var(--hint); max-width:280px}

/* copy card number */
.copy{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--link); background:rgba(46,124,214,.12); padding:7px 11px; border-radius:9px; border:0}
.cardnum{font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:.04em; font-size:15px}

/* upload */
.upload{border:1.5px dashed var(--hair); border-radius:12px; padding:16px; text-align:center; color:var(--hint); font-weight:600; font-size:13px}
.upload input{display:none}
.upload.has{border-color:var(--pos); color:var(--pos)}

/* input */
.field{display:block; width:100%; height:44px; border:1px solid var(--hair); border-radius:11px; padding:0 12px; font-size:15px; background:var(--card); color:var(--text); outline:0}
textarea.field{height:auto; padding:10px 12px; resize:vertical}
label.lbl{display:block; font-size:12px; font-weight:700; color:var(--hint); margin:12px 2px 6px}

/* delivery toggle */
.toggle{display:flex; gap:8px}
.toggle button{flex:1; height:44px; border-radius:11px; border:1px solid var(--hair); background:var(--card); color:var(--text); font-weight:700; font-size:13px}
.toggle button.on{background:var(--accent); color:#fff; border-color:var(--accent)}

/* ------- tab bar ------- */
.tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:10;
    max-width:640px; margin:0 auto;
    background:var(--header); border-top:1px solid var(--hair);
    display:flex; padding:6px 2px calc(6px + env(safe-area-inset-bottom));
}
.tabbar button{flex:1; background:none; border:0; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--hint); position:relative; padding:4px 0}
.tabbar button.on{color:var(--accent)}
.tabbar .ic{font-size:20px; line-height:1}
.tabbar .lb{font-size:10px; font-weight:700}
.tabbar .cbadge{position:absolute; top:0; left:calc(50% + 6px); background:var(--neg); color:#fff; font-size:9px; font-weight:800; min-width:15px; height:15px; border-radius:8px; display:grid; place-items:center; padding:0 3px}

/* ------- toast + loader ------- */
.toast{position:fixed; left:50%; bottom:80px; transform:translateX(-50%); background:#20242e; color:#fff; padding:11px 16px; border-radius:12px; font-size:13px; font-weight:600; z-index:50; max-width:88%; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.3)}
.loader{position:fixed; inset:0; background:rgba(0,0,0,.15); display:grid; place-items:center; z-index:60}
.spinner{width:34px; height:34px; border:3px solid rgba(255,255,255,.4); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.empty{text-align:center; color:var(--hint); padding:40px 20px}
.skeleton{background:linear-gradient(90deg,var(--hair),transparent,var(--hair)); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:10px}
@keyframes sk{to{background-position:-200% 0}}