:root{ --bg:#ffffff; --secbg:#f2f2f7; --card:#ffffff; --text:#0f1116; --hint:#8b8d97; --sep:#e7e7ec; --btn:#2b7fe0; --blue:#2b7fe0; --blue-light:#E8F1FF; --green:#33c26a; --grad:linear-gradient(135deg,var(--blue),var(--green)); --hot1:#ff7a3d; --hot2:#ff4d67; --top1:#ffb238; --top2:#ff8a3d; --r-card:16px; --r-btn:12px; --r-modal:20px; }
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;background:var(--bg);color:var(--text);overflow:hidden;}
.screen{position:fixed;inset:0;display:none;flex-direction:column;background:var(--bg);z-index:1;}
.screen.active{display:flex;}
.hidden{display:none !important;}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px;}
.scroll::-webkit-scrollbar{display:none;}
.content{padding:16px;display:flex;flex-direction:column;gap:14px;}
#screen-home .content{padding-top:6px;}
.hhead{padding:14px 16px 12px;flex-shrink:0;background:var(--bg);}
.hhead-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.logo{font-size:22px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.3px;}
.icnbtn{width:38px;height:38px;border-radius:50%;background:var(--secbg);display:flex;align-items:center;justify-content:center;color:var(--text);position:relative;border:none;cursor:pointer;}
.searchrow{display:flex;gap:8px;margin-bottom:12px;}
.search{flex:1;background:var(--secbg);border-radius:var(--r-btn);height:46px;display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--hint);font-size:15px;}
.search input{ border:none !important; background:transparent !important; outline:none; flex:1; font-size:15px; color:var(--text); padding:0 !important; margin:0 !important; width:auto !important; height:auto !important; border-radius:0 !important; box-shadow:none !important; transition:none !important; }
.sqbtn{width:46px;height:46px;border-radius:var(--r-btn);background:var(--btn);border:none;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;cursor:pointer;}
.chiprow{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;margin:0 -16px;padding:0 16px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color: rgba(43,127,224,.45) transparent;}
.chiprow::-webkit-scrollbar{height:4px;}
.chiprow::-webkit-scrollbar-track{background:transparent;margin:0 16px;}
.chiprow::-webkit-scrollbar-thumb{background:rgba(43,127,224,.45);border-radius:4px;transition:background .2s;}
.chiprow::-webkit-scrollbar-thumb:hover{background:rgba(43,127,224,.75);}
.chip{flex-shrink:0;height:36px;padding:0 16px;border-radius:20px;border:1px solid var(--sep);background:var(--card);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s;}
.chip.active{background:var(--btn);color:#fff;border-color:var(--btn);}
.topbar{display:flex;align-items:center;gap:10px;padding:14px 16px;flex-shrink:0;background:var(--bg);}
.topbar h2{font-size:22px;font-weight:800;flex:1;}
.backbtn{width:38px;height:38px;border-radius:50%;background:var(--secbg);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);font-size:18px;flex-shrink:0;}
.filterbtn{background:var(--btn);color:#fff;border:none;border-radius:20px;padding:9px 14px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;cursor:pointer;}
.card{background:var(--card);border-radius:var(--r-card);padding:16px;border:1px solid var(--sep);}
.card h3{font-size:16px;margin-bottom:6px;}
.card p{font-size:14px;color:var(--hint);line-height:1.45;}
.pill{display:inline-block;background:#ffd23d;color:#111;font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;float:right;}
.sec-head{display:flex;align-items:center;justify-content:space-between;}
.sec-title{font-size:17px;font-weight:800;letter-spacing:-.2px;}
.home-section{ display:flex; flex-direction:column; gap:8px; }
#cats-section{ padding-top:0; margin-bottom:18px; }
#cats-section:empty, #cats-section .sec-head:only-child{ display:none; }
#featured-cats{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
#featured-cats:empty{display:none;}
.featured-cat{ position:relative; border-radius:var(--r-card); overflow:hidden; aspect-ratio:1/1; cursor:pointer; background:linear-gradient(135deg,#4A8BFF,#2b7fe0); display:flex; align-items:flex-end; transition:transform .2s ease; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.featured-cat:active{transform:scale(.97);}
.featured-cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.featured-cat .fc-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.7) 100%); }
.featured-cat .fc-title{ position:relative; padding:14px; color:#fff; font-weight:800; font-size:16px; letter-spacing:-.2px; text-shadow:0 1px 4px rgba(0,0,0,.3); z-index:1; line-height:1.2; }
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.prod{background:var(--card);border:1px solid var(--sep);border-radius:var(--r-card);overflow:hidden;cursor:pointer;transition:transform .15s;}
.prod:active{transform:scale(.98);}
.prod .ph{height:158px;position:relative;overflow:hidden;background:var(--secbg);}
.ph-track{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-behavior:smooth; overscroll-behavior-x:contain; }
.ph-track::-webkit-scrollbar{display:none;}
.ph-slide{flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;font-size:56px;}
.ph-slide img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .5s cubic-bezier(.25,.8,.25,1); }
.prod:active .ph-slide img{transform:scale(1.03);}
.pcorner{position:absolute;top:8px;right:8px;background:rgba(255,255,255,0.95);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;color:#666;box-shadow:0 2px 6px rgba(0,0,0,.08);z-index:2;padding:0;}
.pcorner.on{color:#ff4d67;}
.tagbadge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;color:#fff;padding:3px 8px;border-radius:8px;background:linear-gradient(90deg,var(--hot1),var(--hot2));z-index:2;}
.ph-dotsrow{display:flex;justify-content:center;align-items:center;gap:5px;padding:8px 0 0;transition:gap .2s;}
.pdot{ width:6px; height:6px; border-radius:3px; background:rgba(0,0,0,.15); flex-shrink:0; transition: width .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, box-shadow .3s ease; cursor:pointer; position:relative; display:inline-block; }
.pdot::before{ content:''; position:absolute; inset:-8px -4px; }
.pdot.active{ width:20px; background:var(--blue); box-shadow:0 0 0 3px rgba(43,127,224,.15); }
.prod .pinfo{padding:10px 12px 12px;}
.prod .price{font-weight:800;font-size:15px;letter-spacing:-.2px;}
.prod .pname{font-size:12px;color:var(--hint);margin-top:3px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.list-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--sep);cursor:pointer;}
.list-row:last-child{border-bottom:none;}
.list-row .avatar{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;background:var(--secbg);overflow:hidden;}
.list-row .avatar img{width:100%;height:100%;object-fit:cover;}
.list-row .meta{flex:1;min-width:0;}
.list-row .meta b{font-size:14px;display:block;font-weight:700;}
.list-row .meta span{font-size:12px;color:var(--hint);}
.chev{color:var(--hint);font-size:20px;}
.heart-ic{background:none;border:none;padding:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--hint);}
.tabbar{display:flex;justify-content:space-around;align-items:center;height:66px;background:var(--card);border-top:1px solid var(--sep);flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0);}
.tabbtn{background:none;border:none;color:var(--hint);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;position:relative;padding:6px 10px;transition:color .2s;}
.tabbtn svg{display:block;}
.tabbtn span{font-size:10.5px;font-weight:600;line-height:1;}
.tabbtn.active{color:var(--btn);}
.navicon{position:relative;display:inline-flex;}
.navdot{position:absolute;top:-5px;right:-7px;background:#ff4d67;color:#fff;font-size:10px;font-weight:700;line-height:1;border-radius:8px;min-width:16px;height:16px;padding:0 3px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--card);}
.overlay{position:fixed;inset:0;background:var(--bg);transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;z-index:100;}
.overlay.show{transform:translateX(0);}
.sort-modal{position:fixed;inset:0;z-index:210;display:flex;flex-direction:column;justify-content:flex-end;}
.sort-modal.hidden{display:none;}
.sort-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4);}
.sort-modal-content{background:var(--card);border-top-left-radius:var(--r-modal);border-top-right-radius:var(--r-modal);padding:20px 20px 40px;position:relative;animation:slideUp .25s ease;z-index:1;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.grabber{width:36px;height:4px;background:var(--sep);border-radius:2px;margin:0 auto 16px;}
.sort-option{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--sep);cursor:pointer;font-size:16px;font-weight:500;}
.sort-option:last-child{border-bottom:none;}
.radio-btn{width:22px;height:22px;border:2px solid var(--sep);border-radius:50%;transition:all .2s;}
.sort-option.active .radio-btn{border-color:var(--btn);background:radial-gradient(circle,var(--btn) 50%,transparent 50%);}
.seg{display:flex;gap:8px;padding:0 16px 12px;}
.seg button{flex:1;height:44px;border-radius:var(--r-btn);border:1px solid var(--sep);background:var(--card);color:var(--text);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all .15s;}
.seg button.active{background:var(--btn);color:#fff;border-color:var(--btn);}
.count{background:rgba(0,0,0,.08);border-radius:10px;padding:1px 7px;font-size:11px;}
.seg button.active .count{background:rgba(255,255,255,.25);}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:50px 30px;text-align:center;}
.empty .em-ic{font-size:38px;opacity:.4;}
.empty b{font-size:15px;}
.empty span{font-size:13px;color:var(--hint);}
.pf-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--sep);border-radius:var(--r-card);padding:16px;}
.pf-avatar{width:56px;height:56px;border-radius:16px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px;object-fit:cover;flex-shrink:0;}
.pf-name{font-weight:800;font-size:17px;}
.tgpill{display:inline-flex;align-items:center;gap:4px;background:#e8f3ff;color:var(--blue);font-size:11px;font-weight:700;padding:3px 8px;border-radius:10px;margin-right:6px;}
.menu-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--sep);cursor:pointer;}
.menu-row:last-child{border-bottom:none;}
.menu-ic{width:38px;height:38px;border-radius:10px;background:var(--secbg);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.menu-row .meta b{font-size:14px;display:block;font-weight:700;}
.menu-row .meta span{font-size:12px;color:var(--hint);}
.pd-photo{height:360px;border-radius:var(--r-card);overflow:hidden;background:var(--secbg);margin-bottom:14px;}
.pd-dots{display:flex;justify-content:center;gap:5px;padding:8px 0 16px;}
.pd-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;}
.pd-price{font-size:28px;font-weight:800;letter-spacing:-.5px;}
.pd-old{font-size:16px;color:var(--hint);text-decoration:line-through;}
.pd-name{font-size:17px;font-weight:700;margin-bottom:14px;}
.pd-supplier{display:flex;align-items:center;gap:12px;padding:14px;background:var(--card);border:1px solid var(--sep);border-radius:var(--r-card);margin-bottom:14px;}
.pd-supplier .avatar{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;flex-shrink:0;overflow:hidden;background:var(--secbg);}
.pd-supplier .avatar img{width:100%;height:100%;object-fit:cover;}
.pd-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pd-actions button{background:var(--secbg);border:none;border-radius:var(--r-btn);padding:13px;font-size:14px;font-weight:700;cursor:pointer;color:var(--text);}
.notice{display:flex;gap:8px;background:var(--secbg);border-radius:var(--r-card);padding:12px 14px;font-size:12px;color:var(--hint);line-height:1.5;}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;justify-content:center;align-items:center;padding:20px;}
.modal.hidden{display:none;}
.modal-content{background:#fff;border-radius:var(--r-modal);padding:22px;width:100%;max-width:400px;}
.input-field, textarea, select, input[type=text], input[type=number]{ width:100%;padding:13px 14px;border-radius:var(--r-btn);border:1px solid var(--sep);background:var(--card);color:var(--text);font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s;margin-bottom:10px;font-family:inherit; }
.input-field:focus, textarea:focus, select:focus, input[type=text]:focus, input[type=number]:focus{border-color:var(--btn);box-shadow:0 0 0 3px rgba(43,127,224,.1);}
.upload-area{display:block;background:var(--secbg);border-radius:var(--r-btn);padding:16px;text-align:center;cursor:pointer;margin-bottom:14px;border:2px dashed var(--sep);transition:.2s;}
.upload-area:hover{border-color:var(--btn);background:var(--blue-light);}
.upload-area input{display:none;}
.upload-area span{color:var(--hint);font-weight:600;font-size:14px;}
.admin-big-btn{width:100%;padding:15px;background:var(--secbg);border:none;border-radius:var(--r-btn);margin-bottom:10px;font-size:15px;font-weight:700;cursor:pointer;color:var(--text);transition:transform .1s,background .15s;}
.admin-big-btn:active{transform:scale(.98);}
.admin-big-btn:hover{background:#e2e2e7;}
.faq-item{border-bottom:1px solid var(--sep);padding:14px 0;cursor:pointer;}
.faq-item:last-child{border-bottom:none;}
.faq-q{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-weight:700;font-size:14px;}
.faq-a{font-size:13px;color:var(--hint);line-height:1.5;margin-top:8px;display:none;}
.faq-item.open .faq-a{display:block;}
.chevron{transition:transform .2s;color:var(--btn);flex-shrink:0;font-size:16px;}
.faq-item.open .chevron{transform:rotate(180deg);}
.preview-wrap{position:relative;display:inline-block;}
.preview-wrap img{width:80px;height:80px;object-fit:cover;border-radius:12px;display:block;}
.preview-delete{position:absolute;top:-5px;right:-5px;background:#ff3b30;color:#fff;border-radius:50%;width:22px;height:22px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:bold;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,.3);}
.bigprice{font-size:22px;font-weight:800;margin-top:4px;}
.paidpill{background:#e3f8ea;color:#1fa956;font-size:11px;font-weight:800;padding:5px 10px;border-radius:10px;}
.modal-category-item{background:var(--secbg);border-radius:12px;padding:14px;font-size:14px;font-weight:600;text-align:center;cursor:pointer;border:2px solid transparent;transition:all .15s;}
.modal-category-item.selected{background:var(--blue-light);border-color:var(--btn);color:var(--btn);}
.contact-row{display:flex;gap:8px;margin-bottom:10px;align-items:center;}
.contact-row select{width:35%;padding:11px;border-radius:10px;border:1px solid var(--sep);background:#fff;font-size:13px;margin-bottom:0;}
.contact-row input{flex:1;padding:11px;border-radius:10px;border:1px solid var(--sep);margin-bottom:0;}
.remove-contact-btn{background:#ff3b30;color:#fff;border:none;border-radius:50%;width:34px;height:34px;cursor:pointer;font-weight:bold;font-size:16px;flex-shrink:0;}
.foot{text-align:center;font-size:11px;color:var(--hint);padding:10px 0 4px;}
#__supabase_err{position:fixed;top:0;left:0;right:0;background:#ff3b30;color:#fff;padding:8px 12px;font-size:11px;z-index:99999;font-family:monospace;word-break:break-all;line-height:1.3;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.curr-toggle{ position:relative; display:inline-flex; background:var(--secbg); border-radius:10px; padding:3px; overflow:hidden; user-select:none; }
.curr-indicator{ position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); background:#ffffff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.1); transition:transform .4s cubic-bezier(.34,1.4,.64,1); pointer-events:none; will-change:transform; }
.curr-toggle[data-active="KZT"] .curr-indicator{ transform:translateX(100%); }
.curr-toggle button{ position:relative; z-index:1; flex:1; border:none !important; background:transparent !important; font-size:13px; font-weight:700; padding:8px 14px; border-radius:8px; color:var(--hint); cursor:pointer; font-family:inherit; box-shadow:none !important; transition:color .35s ease; white-space:nowrap; }
.curr-toggle button.active{ color:var(--text); }