*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#F0F2F5;color:#1F2C34;}
#app{position:fixed;inset:0;overflow:hidden;}

/* SCREEN SYSTEM */
.screen{position:absolute;inset:0;background:#F0F2F5;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;}
.screen.active{transform:translateX(0);}
.screen.behind{transform:translateX(-30%);}

/* HEADER */
.hdr{background:#128C7E;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px;min-height:56px;flex-shrink:0;}
.hdr h1{font-size:18px;font-weight:700;flex:1;}
.hdr-btn{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:4px 6px;line-height:1;}

/* SCROLL AREA */
.body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* WELCOME */
#sw{background:linear-gradient(160deg,#0D6E63 0%,#128C7E 50%,#1AAD99 100%);justify-content:center;align-items:center;}
.wlc{text-align:center;padding:32px;}
.wlc-icon{font-size:72px;margin-bottom:20px;}
.wlc h1{color:#fff;font-size:34px;font-weight:800;letter-spacing:-0.5px;}
.wlc p{color:rgba(255,255,255,.75);font-size:15px;margin-top:6px;margin-bottom:56px;}
.wlc-sub{color:rgba(255,255,255,.55);font-size:13px;margin-top:20px;}

/* BUTTONS */
.btn{border:none;cursor:pointer;font-size:16px;font-weight:600;border-radius:24px;padding:15px 28px;display:block;width:100%;text-align:center;transition:opacity .15s;}
.btn:active{opacity:.8;}
.btn-g{background:#25D366;color:#fff;}
.btn-w{background:#fff;color:#128C7E;}
.btn-d{background:#128C7E;color:#fff;}
.btn-outline{background:none;border:2px solid #128C7E;color:#128C7E;}
.btn-danger{background:#FF3B30;color:#fff;}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:16px;display:inline-flex;align-items:center;gap:6px;}
.btn-ghost{background:none;border:none;color:#128C7E;font-size:15px;cursor:pointer;text-decoration:underline;padding:4px;}

/* INPUT */
.inp{width:100%;padding:14px 16px;border:2px solid #E8E8E8;border-radius:12px;font-size:16px;outline:none;background:#fff;transition:border-color .2s;font-family:inherit;}
.inp:focus{border-color:#128C7E;}
.inp-label{font-size:13px;color:#667781;margin-bottom:6px;display:block;}
select.inp{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23667781'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;}

/* GREETING */
.greet{background:#128C7E;padding:20px 16px 24px;color:#fff;flex-shrink:0;}
.greet h2{font-size:22px;font-weight:800;}
.greet p{font-size:13px;opacity:.75;margin-top:3px;}

/* MENU */
.menu-list{padding:12px 16px;display:flex;flex-direction:column;gap:10px;}
.mi{background:#fff;border-radius:14px;padding:18px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.07);}
.mi:active{background:#F5F5F5;}
.mi-icon{font-size:28px;width:40px;text-align:center;flex-shrink:0;}
.mi-label{font-size:17px;font-weight:700;}
.mi-sub{font-size:12px;color:#667781;margin-top:2px;}
.mi-arrow{margin-left:auto;color:#B0BEC5;font-size:20px;}

/* WIZARD */
.wiz{padding:20px 16px;flex:1;overflow-y:auto;}
.wiz-step{font-size:13px;color:#128C7E;font-weight:700;margin-bottom:6px;}
.wiz-q{font-size:22px;font-weight:800;color:#1F2C34;line-height:1.3;margin-bottom:4px;}
.wiz-hint{font-size:13px;color:#667781;margin-bottom:20px;}
.wiz-bar{background:#fff;border-top:1px solid #E8E8E8;padding:12px 16px;display:flex;gap:10px;flex-shrink:0;}
.btn-back-wiz{background:#F0F2F5;color:#1F2C34;border:none;border-radius:24px;padding:14px;font-size:15px;cursor:pointer;flex:1;font-weight:600;}
.btn-next-wiz{background:#128C7E;color:#fff;border:none;border-radius:24px;padding:14px;font-size:16px;font-weight:700;cursor:pointer;flex:2;}
.btn-next-wiz.green{background:#25D366;}

/* OPTIONS */
.opts{display:flex;flex-direction:column;gap:10px;}
.opt{background:#fff;border:2px solid #E8E8E8;border-radius:12px;padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;}
.opt.sel{border-color:#128C7E;background:#E8F5E9;}
.opt:active{background:#F5F5F5;}
.opt-icon{font-size:22px;flex-shrink:0;}
.opt-label{font-size:16px;font-weight:700;flex:1;}
.opt-desc{font-size:12px;color:#667781;margin-top:2px;}
.opt-check{color:#128C7E;font-size:20px;margin-left:auto;display:none;}
.opt.sel .opt-check{display:block;}

/* SUGGESTIONS */
.sugg-list{background:#fff;border-radius:12px;border:2px solid #E8E8E8;overflow:hidden;margin-top:8px;}
.sugg-item{padding:14px 16px;border-bottom:1px solid #F0F2F5;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:16px;}
.sugg-item:last-child{border-bottom:none;}
.sugg-item:active{background:#F5F5F5;}

/* LOADING */
.loading-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:40px;}
.spin{width:52px;height:52px;border:4px solid #E8E8E8;border-top-color:#128C7E;border-radius:50%;animation:spin .85s linear infinite;margin-bottom:20px;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-txt{font-size:16px;color:#667781;text-align:center;line-height:1.5;}

/* RESULT CARDS */
.r-card{background:#fff;border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.07);}
.r-card.top{border-left:5px solid #25D366;}
.r-rank{font-size:11px;font-weight:700;color:#667781;text-transform:uppercase;letter-spacing:.5px;}
.r-shop{font-size:19px;font-weight:800;color:#1F2C34;margin:4px 0 2px;}
.r-loc{font-size:13px;color:#667781;}
.r-price{font-size:28px;font-weight:900;color:#128C7E;margin-top:10px;}
.r-price-lbl{font-size:12px;color:#667781;}
.r-bulk{font-size:13px;color:#667781;margin-top:3px;}
.r-div{border:none;border-top:1px solid #F0F2F5;margin:12px 0;}
.r-acts{display:flex;gap:8px;flex-wrap:wrap;}
.btn-call{background:#25D366;color:#fff;border:none;border-radius:20px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;}
.btn-call:active{opacity:.8;}
.btn-db{background:#E8F5E9;color:#128C7E;border:none;border-radius:20px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;}
.btn-bought{background:#128C7E;color:#fff;border:none;border-radius:20px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;}
.badge-cheap{background:#E8F5E9;color:#128C7E;font-size:11px;font-weight:800;padding:3px 10px;border-radius:10px;display:inline-block;margin-bottom:4px;}
.badge-db{background:#E3F2FD;color:#1565C0;font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;}

/* TREND */
.trend-box{background:#FFF8E1;border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:12px;border-left:3px solid #FFC107;}
.t-up{color:#E53935;font-weight:700;}
.t-dn{color:#43A047;font-weight:700;}

/* SHOPPING LIST */
.sl-item{background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:8px;display:flex;align-items:center;gap:12px;}
.sl-name{font-size:16px;font-weight:700;flex:1;}
.sl-spec{font-size:12px;color:#667781;margin-top:2px;}
.sl-del{background:none;border:none;color:#FF3B30;font-size:22px;cursor:pointer;padding:4px;}

/* BASKET */
.basket-total{background:linear-gradient(135deg,#128C7E,#0D6E63);color:#fff;border-radius:14px;padding:18px;margin-bottom:14px;}
.basket-lbl{font-size:13px;opacity:.8;}
.basket-amt{font-size:36px;font-weight:900;margin-top:4px;}
.basket-meta{font-size:12px;opacity:.7;margin-top:4px;}
.basket-item{background:#fff;border-radius:12px;padding:14px;margin-bottom:8px;}
.basket-item-name{font-size:16px;font-weight:700;}
.basket-item-shop{font-size:13px;color:#667781;margin-top:2px;}
.basket-item-price{font-size:20px;font-weight:800;color:#128C7E;margin-top:6px;}

/* DATABASE */
.db-card{background:#fff;border-radius:12px;padding:16px;margin-bottom:10px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.07);}
.db-card:active{background:#F5F5F5;}
.db-name{font-size:17px;font-weight:800;}
.db-meta{font-size:13px;color:#667781;margin-top:2px;}
.db-best{font-size:14px;color:#128C7E;font-weight:700;margin-top:6px;}
.db-sup{background:#F8F9FA;border-radius:10px;padding:14px;margin-bottom:8px;}

/* HISTORY */
.hist-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #F0F2F5;}
.hist-date{font-size:12px;color:#667781;width:85px;flex-shrink:0;}
.hist-price{font-size:17px;font-weight:800;color:#128C7E;}
.hist-src{font-size:12px;color:#667781;flex:1;text-align:right;}

/* LEADERBOARD */
.lb-item{background:#fff;border-radius:12px;padding:16px;margin-bottom:10px;display:flex;align-items:center;gap:14px;box-shadow:0 1px 4px rgba(0,0,0,.07);}
.lb-rank{font-size:24px;font-weight:900;width:36px;text-align:center;flex-shrink:0;}
.lb-name{font-size:17px;font-weight:700;flex:1;}
.lb-pts{font-size:15px;color:#128C7E;font-weight:800;}
.lb-searches{font-size:12px;color:#667781;margin-top:2px;}

/* SETTINGS */
.s-section{margin-bottom:22px;}
.s-title{font-size:12px;font-weight:800;color:#128C7E;text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;padding:0 4px;}
.s-card{background:#fff;border-radius:14px;overflow:hidden;}
.s-row{padding:15px 16px;border-bottom:1px solid #F0F2F5;display:flex;align-items:center;gap:12px;}
.s-row:last-child{border-bottom:none;}
.s-row-label{flex:1;font-size:16px;font-weight:500;}
.s-row-val{font-size:13px;color:#667781;}
.toggle{width:52px;height:30px;background:#E8E8E8;border-radius:15px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;}
.toggle.on{background:#128C7E;}
.t-thumb{width:26px;height:26px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.toggle.on .t-thumb{left:24px;}

/* SEARCH BAR */
.srch-bar{background:#fff;border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:10px;border:2px solid #E8E8E8;margin-bottom:12px;}
.srch-bar input{flex:1;border:none;outline:none;font-size:16px;font-family:inherit;}

/* TOAST */
#toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#1F2C34;color:#fff;padding:12px 22px;border-radius:24px;font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;z-index:9999;max-width:90vw;text-align:center;}
#toast.show{opacity:1;}

/* EMPTY STATE */
.empty{text-align:center;padding:48px 24px;color:#667781;}
.empty-icon{font-size:52px;margin-bottom:12px;}
.empty h3{font-size:19px;font-weight:700;color:#1F2C34;margin-bottom:6px;}
.empty p{font-size:14px;line-height:1.5;}

/* CHIP */
.chip{background:#E8F5E9;color:#128C7E;padding:3px 10px;border-radius:10px;font-size:12px;font-weight:700;display:inline-block;}

/* SECTION DIVIDER */
.content{padding:16px;}
.mt{margin-top:12px;}
.mb{margin-bottom:12px;}
.row{display:flex;gap:10px;align-items:center;}
.f1{flex:1;}

/* PHOTO PREVIEW */
.photo-prev{width:100%;height:160px;object-fit:cover;border-radius:12px;margin-top:8px;display:none;}
.photo-prev.show{display:block;}

/* RATE TABLE */
.rate-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #F0F2F5;}
.rate-row:last-child{border-bottom:none;}

/* STICKY BOTTOM */
.sticky-bottom{padding:12px 16px;background:#F0F2F5;border-top:1px solid #E8E8E8;flex-shrink:0;}

/* ALERT BOX */
.alert{border-radius:10px;padding:12px 14px;margin-bottom:12px;font-size:14px;line-height:1.5;}
.alert-warn{background:#FFF3E0;color:#E65100;border-left:3px solid #FF9800;}
.alert-info{background:#E3F2FD;color:#0D47A1;border-left:3px solid #2196F3;}
.alert-success{background:#E8F5E9;color:#1B5E20;border-left:3px solid #4CAF50;}

/* MODAL */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9998;display:none;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s;}
.modal-backdrop.show{display:flex;opacity:1;}
.modal{background:#fff;border-radius:14px 14px 0 0;width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow:hidden;}
.modal-backdrop.show .modal{transform:translateY(0);}
.modal-hdr{padding:16px 18px;background:#128C7E;color:#fff;display:flex;align-items:center;gap:10px;}
.modal-hdr h3{font-size:17px;font-weight:800;flex:1;}
.modal-body{flex:1;overflow-y:auto;padding:16px 18px;}
.modal-footer{padding:12px 16px;border-top:1px solid #F0F2F5;display:flex;gap:10px;background:#fff;}
.modal-preview-to{font-size:13px;color:#667781;padding:10px 14px;background:#F8F9FA;border-radius:10px;margin-bottom:12px;}
.modal-preview-to strong{color:#1F2C34;}
textarea.inp{font-family:inherit;resize:vertical;line-height:1.5;}

/* PRICE TAG */
.price-tag{background:linear-gradient(135deg,#128C7E,#0D6E63);color:#fff;border-radius:12px;padding:14px 16px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;}
.price-tag-label{font-size:13px;opacity:.8;}
.price-tag-val{font-size:24px;font-weight:900;}