/* ========================================
   KuperAuto Web UI — Стили
   На основе 6_clean_green.html + расширения
   ======================================== */

/* ===== ПЕРЕМЕННЫЕ ===== */
:root {
  --bg: #FFFFFF;
  --bg2: #F7F8FA;
  --text: #1A1D24;
  --text2: #6C7380;
  --text3: #A0A5B0;
  --green: #52B788;
  --green-hover: #40916C;
  --green-light: #E9F5EF;
  --green-pale: #F2FAF6;
  --red: #E8453C;
  --red-light: #FFF0EF;
  --orange: #F59E0B;
  --orange-light: #FFF7ED;
  --blue: #3B82F6;
  --blue-light: #EFF6FF;
  --border: #EEEEF2;
  --r: 14px;
  --rs: 10px;
  --shadow: 0 4px 20px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.10);
}

/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg2);color:var(--text);-webkit-font-smoothing:antialiased}
body{max-width:480px;margin:0 auto;background:var(--bg);min-height:100vh;padding-bottom:76px;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* ===== HEADER ===== */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:12px 16px;border-bottom:1px solid var(--border)}
.hdr-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.logo{font-size:21px;font-weight:800;letter-spacing:-.5px;color:var(--text)}
.logo b{color:var(--green)}
.hdr-btns{display:flex;gap:6px}
.hb{width:36px;height:36px;border-radius:50%;border:none;background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;position:relative}
.hb:hover{background:#EAEBED}
.hb svg{width:20px;height:20px;color:var(--text)}
.hb-admin{width:auto;border-radius:999px;padding:0 12px;gap:6px;background:var(--green-light)}
.hb-admin:hover{background:#DDF1E6}
.hb-admin svg{width:18px;height:18px;color:var(--green)}
.hb-admin span{font-size:12px;font-weight:700;color:var(--green);white-space:nowrap}
.hb .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--green);border:1.5px solid #fff}
.srch{display:flex;align-items:center;gap:10px;background:var(--bg2);border-radius:var(--rs);padding:10px 14px;transition:box-shadow .2s;cursor:text}
.srch:focus-within{box-shadow:0 0 0 2px rgba(82,183,136,.2)}
.srch svg{width:18px;height:18px;color:var(--text3);flex-shrink:0}
.srch input{border:none;outline:none;font-size:14px;width:100%;background:transparent;color:var(--text);font-family:inherit}
.srch input::placeholder{color:var(--text3)}

/* ===== ADDRESS ===== */
.addr{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s,box-shadow .15s;user-select:none;-webkit-user-select:none}
.addr:hover{background:var(--green-pale)}
.addr:active{background:var(--green-light);transform:scale(.99)}
.addr svg{width:18px;height:18px;color:var(--green);flex-shrink:0}
.addr-t{flex:1;font-size:13px;color:var(--text2)}
.addr-t span{color:var(--text);font-weight:600}
.addr-arrow{width:16px!important;height:16px!important;color:var(--text3)!important;flex-shrink:0;transition:transform .2s,color .2s}
.addr:hover .addr-arrow{color:var(--green)!important;transform:translateX(2px)}
.addr-warning{display:flex;align-items:center;gap:10px;margin:12px 16px 0;padding:12px 14px;border-radius:var(--rs);background:var(--red);color:#fff;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(232,69,60,.32);animation:addr-warn-pulse 1.6s ease-in-out infinite}
.addr-warning svg{width:20px;height:20px;flex-shrink:0;color:#fff}
.addr-warning:active{transform:scale(.99)}
@keyframes addr-warn-pulse{0%,100%{box-shadow:0 4px 14px rgba(232,69,60,.32)}50%{box-shadow:0 4px 22px rgba(232,69,60,.55)}}

/* ===== BANNER ===== */
.bnr{margin:14px 16px;padding:20px;border-radius:var(--r);background:linear-gradient(135deg,#5EC492,#40916C);color:#fff;position:relative;overflow:hidden}
.bnr::after{content:'';position:absolute;right:-20px;top:-20px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.1)}
.bnr-sub{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;opacity:.8;margin-bottom:6px}
.bnr h3{font-size:17px;font-weight:700;line-height:1.3;margin-bottom:12px;position:relative;z-index:1}
.bnr-code{display:inline-block;padding:6px 14px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border-radius:8px;font-size:13px;font-weight:700;letter-spacing:1px;position:relative;z-index:1}

/* ===== SECTIONS ===== */
.sh{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 10px}
.sh h2{font-size:17px;font-weight:700}
.sh a{font-size:13px;color:var(--green);text-decoration:none;font-weight:600}

/* ===== CATEGORIES ===== */
.cats{display:flex;gap:8px;padding:0 16px 14px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.cats::-webkit-scrollbar{display:none}
.cat{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;width:70px;cursor:pointer}
.cat-img{width:56px;height:56px;border-radius:14px;background:var(--bg2);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .15s;border:1px solid var(--border)}
.cat:hover .cat-img{transform:scale(1.06);border-color:var(--green)}
.cat-img img{width:100%;height:100%;object-fit:cover;border-radius:13px}
.cat span{font-size:11px;font-weight:500;color:var(--text2);text-align:center;line-height:1.2}

/* ===== STORE BRAND CARDS (главная, горизонтальный карусель) ===== */
.store-carousel{display:flex;gap:10px;padding:0 16px 14px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;position:relative}
.store-carousel::-webkit-scrollbar{display:none}
.store-brand-card{flex-shrink:0;width:130px;height:80px;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s,background .3s;text-decoration:none;padding:12px}
.store-brand-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.store-brand-card:active{transform:scale(.96)}
.store-brand-card img{max-width:100%;max-height:100%;object-fit:contain}
.store-brand-card .brand-letter{font-size:28px;font-weight:800;color:#fff}

/* ===== FILTERS ===== */
.flts{display:flex;gap:6px;padding:2px 16px 14px;overflow-x:auto;scrollbar-width:none}
.flts::-webkit-scrollbar{display:none}
.ch{flex-shrink:0;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;border:1.5px solid var(--border);background:var(--bg);color:var(--text2)}
.ch.on{background:var(--green);color:#fff;border-color:var(--green)}
.ch:hover:not(.on){border-color:#ccc}

/* ===== PRODUCTS GRID ===== */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 16px 20px}
.pc{background:var(--bg);border-radius:var(--r);border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:box-shadow .2s,transform .2s}
.pc:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pc:active{transform:scale(.98)}
.pi{position:relative;width:100%;aspect-ratio:1;background:var(--bg2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pi img{width:80%;height:80%;object-fit:contain;margin:auto}
.pi .no-img{color:var(--text3);font-size:12px}
.badge{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700;background:var(--red-light);color:var(--red)}
.fav{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.85);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);transition:all .15s}
.fav svg{width:16px;height:16px;color:#D1D5DB;transition:color .15s}
.fav:hover svg{color:#F87171}
.fav.liked svg{color:#E8453C;fill:#E8453C}
.pb{padding:10px 12px 12px}
.pn{font-size:13px;font-weight:500;color:var(--text);line-height:1.35;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:36px}
.pw{font-size:12px;color:var(--text3);margin-bottom:8px}
.pf{display:flex;align-items:flex-end;justify-content:space-between}
.pp{font-size:16px;font-weight:700;color:var(--text)}
.po{font-size:12px;color:var(--text3);text-decoration:line-through}
.pa{width:34px;height:34px;border-radius:var(--rs);border:none;background:var(--green);color:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;box-shadow:0 2px 8px rgba(82,183,136,.25)}
.pa:hover{background:var(--green-hover);transform:scale(1.06)}
.pa:active{transform:scale(.93)}
.pa.ok{background:var(--green-light);color:var(--green);box-shadow:none;font-size:16px}

/* Счётчик количества на карточке товара */
.product-qty-controls{display:flex;align-items:center;gap:4px}
.product-qty-controls .qty-btn{width:30px;height:30px;border-radius:var(--rs);border:none;background:var(--green);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;box-shadow:0 2px 8px rgba(82,183,136,.25)}
.product-qty-controls .qty-btn:hover{background:var(--green-hover);transform:scale(1.06)}
.product-qty-controls .qty-btn:active{transform:scale(.93)}
.product-qty-controls .qty-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.product-qty-controls .qty-val{font-size:14px;font-weight:700;min-width:22px;text-align:center;color:var(--text)}

/* ===== NAV ===== */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-top:1px solid var(--border);display:flex;z-index:100;padding:4px 4px 8px}
.ni{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;cursor:pointer;border:none;background:none;color:var(--text3);font-size:10px;font-weight:600;font-family:inherit;transition:color .15s;text-decoration:none}
.ni.on{color:var(--green)}
.ni svg{width:22px;height:22px}
.cw{position:relative}
.cb{position:absolute;top:-4px;right:-9px;min-width:15px;height:15px;border-radius:8px;background:var(--green);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:1.5px solid #fff}

/* ===== MISC ===== */
.sep{height:6px;background:var(--bg2)}

/* ===== ANIMATIONS ===== */
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.pc{animation:up .35s ease both}
.pc:nth-child(1){animation-delay:.03s}.pc:nth-child(2){animation-delay:.06s}
.pc:nth-child(3){animation-delay:.09s}.pc:nth-child(4){animation-delay:.12s}
.pc:nth-child(5){animation-delay:.15s}.pc:nth-child(6){animation-delay:.18s}
.order-card{animation:up .35s ease both}
.order-card:nth-child(1){animation-delay:.03s}.order-card:nth-child(2){animation-delay:.06s}
.order-card:nth-child(3){animation-delay:.09s}.order-card:nth-child(4){animation-delay:.12s}
.order-card:nth-child(5){animation-delay:.15s}.order-card:nth-child(6){animation-delay:.18s}
.order-card:nth-child(7){animation-delay:.21s}.order-card:nth-child(8){animation-delay:.24s}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== LOADING / SKELETON ===== */
.skeleton{background:linear-gradient(90deg,var(--bg2) 25%,#e8e8ec 50%,var(--bg2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--rs)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-card{height:280px;border-radius:var(--r)}
.skeleton-line{height:14px;margin-bottom:8px;border-radius:4px}
.skeleton-line.short{width:60%}

.loading-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin .6s linear infinite;margin:40px auto}

.empty-state{text-align:center;padding:60px 20px;color:var(--text3)}
.empty-state svg{width:64px;height:64px;margin-bottom:16px;opacity:.4}
.empty-state h3{font-size:16px;font-weight:600;color:var(--text2);margin-bottom:6px}
.empty-state p{font-size:13px;line-height:1.5}

/* ===== TOAST ===== */
.toast-container{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9999;max-width:400px;width:calc(100% - 32px)}
.toast{padding:12px 16px;border-radius:var(--rs);font-size:13px;font-weight:500;margin-bottom:8px;animation:slideUp .3s ease;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-lg)}
.toast-success{background:var(--green);color:#fff}
.toast-error{background:var(--red);color:#fff}
.toast-info{background:var(--text);color:#fff}

/* ===== STORE CARDS ===== */
.store-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.store-card:hover{background:var(--bg2)}
.store-card:active{background:var(--green-pale)}
.store-logo{width:56px;height:56px;border-radius:12px;background:var(--bg2);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--border);flex-shrink:0;transition:background .3s}
.store-logo img{width:100%;height:100%;object-fit:contain;padding:6px}
.store-logo .logo-placeholder{font-size:18px;font-weight:700;color:var(--green)}
.store-info{flex:1;min-width:0}
.store-name{font-size:15px;font-weight:600;margin-bottom:3px}
.store-meta{font-size:12px;color:var(--text2);display:flex;gap:8px;flex-wrap:wrap}
.store-meta span{display:flex;align-items:center;gap:3px}
.store-unavailable{opacity:.5}

/* ===== CART PAGE ===== */
.cart-group{margin-bottom:16px}
.cart-group-header{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--bg2);font-size:13px;font-weight:600;color:var(--text2)}
.cart-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);align-items:center}
.cart-item-img{width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--bg2);flex-shrink:0}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:13px;font-weight:500;line-height:1.35;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cart-item-volume{font-size:11px;color:var(--text3)}
.cart-item-price{text-align:right;flex-shrink:0}
.cart-item-price .pp{font-size:14px}
.cart-item-price .po{font-size:11px}
.cart-item-actions{display:flex;align-items:center;gap:6px;margin-top:4px}

.qty-btn{width:28px;height:28px;border-radius:8px;border:1.5px solid var(--border);background:var(--bg);color:var(--text);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.qty-btn:hover{border-color:var(--green);color:var(--green)}
.qty-val{font-size:14px;font-weight:600;min-width:20px;text-align:center}

.cart-summary{padding:16px;background:var(--bg);border-top:2px solid var(--green-light)}
.cart-summary-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;color:var(--text2)}
.cart-summary-row.total{font-size:16px;font-weight:700;color:var(--text);padding-top:10px;margin-top:6px;border-top:1px solid var(--border)}

.cart-actions{padding:12px 16px;display:flex;gap:10px}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px;border-radius:var(--rs);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s;border:none}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(82,183,136,.25)}
.btn-primary:hover{background:var(--green-hover);transform:translateY(-1px)}
.btn-primary:active{transform:scale(.97)}
.btn-secondary{background:var(--bg2);color:var(--text);border:1.5px solid var(--border)}
.btn-secondary:hover{border-color:#ccc}
.btn-danger{background:var(--red-light);color:var(--red)}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-full{width:100%}
.btn-sm{padding:8px 14px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* ===== BUTTON BUSY STATE ===== */
.btn-busy{cursor:wait;opacity:.85}
.btn-busy:hover{transform:none!important}
.btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}
.btn-busy-label{vertical-align:middle}
/* .add-card — это div, не button: блокируем клик через pointer-events */
.payment-card.add-card.btn-busy{pointer-events:none;border-style:solid;background:var(--green-pale)}

/* ===== PROMO CHIP ===== */
.promo-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--green-light);border:1.5px solid var(--green);border-radius:var(--rs);margin-bottom:10px;font-size:13px;animation:slideUp .25s ease}
.promo-chip-icon{color:var(--green);font-weight:700;font-size:14px;flex-shrink:0}
.promo-chip-code{flex:1;font-weight:600;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.3px;word-break:break-all}
.promo-chip-savings{color:var(--green);font-weight:700;flex-shrink:0}

/* ===== SUBMIT PROGRESS OVERLAY ===== */
.sp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .2s ease;height:100dvh;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.sp-card{width:100%;max-width:360px;background:var(--bg);border-radius:18px;padding:28px 24px;box-shadow:var(--shadow-lg);text-align:center;animation:slideUp .3s ease}
.sp-spinner{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px;position:relative;box-sizing:border-box}
.sp-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px}
.sp-step{font-size:13px;color:var(--text2);min-height:18px;transition:opacity .25s;margin-bottom:16px}
.sp-bar{height:6px;background:var(--bg2);border-radius:3px;overflow:hidden}
.sp-fill{height:100%;background:var(--green);width:0;transition:width .35s ease;border-radius:3px}
.sp-success .sp-spinner{border:4px solid var(--green);animation:none}
.sp-success .sp-spinner::after{content:'\2713';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--green);font-size:24px;font-weight:700}
.sp-error .sp-spinner{border:4px solid var(--red);animation:none}
.sp-error .sp-spinner::after{content:'\2715';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--red);font-size:22px;font-weight:700}
.sp-error .sp-fill{background:var(--red)}

/* ===== CHECKOUT PAGE ===== */
.checkout-section{padding:16px;border-bottom:1px solid var(--border)}
.checkout-section h3{font-size:15px;font-weight:600;margin-bottom:12px}

.checkout-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;color:var(--text2)}
.checkout-row.discount{color:var(--green)}
.checkout-row.total{font-size:17px;font-weight:700;color:var(--text);padding-top:10px;margin-top:6px;border-top:1.5px solid var(--border)}

.promo-input{display:flex;gap:8px;margin-top:10px}
.promo-input input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--rs);font-size:14px;font-family:inherit;outline:none;transition:border-color .15s}
.promo-input input:focus{border-color:var(--green)}

.slot-card{padding:12px;border:1.5px solid var(--border);border-radius:var(--rs);margin-bottom:8px;cursor:pointer;transition:all .15s;display:flex;justify-content:space-between;align-items:center}
.slot-card:hover{border-color:var(--green)}
.slot-card.selected{border-color:var(--green);background:var(--green-pale)}
.slot-card .slot-time{font-size:14px;font-weight:500}
.slot-card .slot-price{font-size:13px;color:var(--green);font-weight:600}

.payment-card{display:flex;align-items:center;gap:10px;padding:12px;border:1.5px solid var(--border);border-radius:var(--rs);margin-bottom:8px;cursor:pointer;transition:all .15s}
.payment-card:hover{border-color:var(--green)}
.payment-card.selected{border-color:var(--green);background:var(--green-pale)}
.payment-card .card-icon{font-size:20px}
.payment-card .card-name{font-size:14px;font-weight:500}
.payment-card.add-card{border-style:dashed;color:var(--green);justify-content:center}
.payment-card.add-card:hover{background:var(--green-pale)}
.payment-card.add-card .card-icon{font-size:18px;font-weight:700}
.payment-card.add-card .card-name{color:var(--green)}

.address-form{padding:16px}
.address-form .form-group{margin-bottom:12px}
.address-form label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
.address-form input,.address-form textarea{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--rs);font-size:14px;font-family:inherit;outline:none;transition:border-color .15s;resize:none}
.address-form input:focus,.address-form textarea:focus{border-color:var(--green)}

/* Toggle switch */
.toggle-group{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.toggle-label{display:flex;flex-direction:column;gap:2px}
.toggle-label .tgl-title{font-size:14px;font-weight:500;color:var(--text)}
.toggle-label .tgl-desc{font-size:12px;color:var(--text3)}
.toggle-switch{position:relative;width:48px;height:28px;flex-shrink:0;cursor:pointer}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:14px;transition:background .25s}
.toggle-slider::before{content:'';position:absolute;left:3px;top:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:transform .25s;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.toggle-switch input:checked+.toggle-slider{background:var(--green)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px)}

/* ===== ORDERS PAGE ===== */
.orders-container{padding:4px 16px 20px;display:flex;flex-direction:column;gap:10px}
.order-card{display:block;padding:14px 16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:box-shadow .2s,transform .2s;overflow:hidden}
.order-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.order-card:active{transform:scale(.985)}
.order-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.order-card-top-left{display:flex;align-items:center;gap:8px;min-width:0;flex-shrink:1;overflow:hidden}
.order-number{font-size:14px;font-weight:700;white-space:nowrap;flex-shrink:0}
.order-date{font-size:12px;color:var(--text3);white-space:nowrap;flex-shrink:0}
.order-card-mid{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.order-store{font-size:13px;color:var(--text2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.order-items-count{font-size:12px;color:var(--text3);white-space:nowrap;flex-shrink:0}
.order-card-bottom{display:flex;align-items:center;justify-content:space-between}
.order-total{font-size:17px;font-weight:700;color:var(--text)}
.order-arrow{width:18px;height:18px;color:var(--text3);flex-shrink:0;transition:transform .2s}
.order-card:hover .order-arrow{transform:translateX(2px);color:var(--green)}
.order-status{font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px;white-space:nowrap;flex-shrink:0}
.status-delivered,.status-completed{background:var(--green-light);color:var(--green-hover)}
.status-shipped,.status-delivering{background:var(--blue-light);color:var(--blue)}
.status-collecting,.status-assembling,.status-processing,.status-pending{background:var(--orange-light);color:var(--orange)}
.status-canceled,.status-cancelled{background:var(--red-light);color:var(--red)}
.status-complete{background:var(--green-light);color:var(--green-hover)}

/* ===== ORDER DETAIL PAGE ===== */
.order-detail-header{padding:16px;border-bottom:1px solid var(--border)}
.order-detail-header h2{font-size:18px;font-weight:700;margin-bottom:4px}
.order-detail-header .meta{font-size:13px;color:var(--text2)}

.detail-section{padding:14px 16px;border-bottom:1px solid var(--border)}
.detail-section h3{font-size:14px;font-weight:600;margin-bottom:10px;color:var(--text2)}

.detail-item{display:flex;gap:10px;padding:8px 0;align-items:center}
.detail-item-img{width:44px;height:44px;border-radius:8px;overflow:hidden;background:var(--bg2);flex-shrink:0}
.detail-item-img img{width:100%;height:100%;object-fit:cover}
.detail-item-info{flex:1;min-width:0}
.detail-item-name{font-size:13px;font-weight:500;line-height:1.3}
.detail-item-qty{font-size:11px;color:var(--text3);margin-top:1px}
.detail-item-price{font-size:13px;font-weight:600;flex-shrink:0}
.detail-item-not-found{opacity:.85}
.detail-item-not-found .detail-item-name{color:var(--text3)}

.courier-card{display:flex;align-items:center;gap:12px;padding:10px;background:var(--bg2);border-radius:var(--rs);margin-top:8px}
.courier-avatar{width:40px;height:40px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.courier-name{font-size:14px;font-weight:600}
.courier-role{font-size:12px;color:var(--text2)}

/* ===== PROFILE PAGE ===== */
.profile-card{padding:24px 16px;text-align:center;border-bottom:1px solid var(--border)}
.profile-avatar{width:72px;height:72px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:28px;font-weight:700;color:var(--green)}
.profile-name{font-size:18px;font-weight:700;margin-bottom:4px}
.profile-phone{font-size:14px;color:var(--text2)}

.profile-stats{display:flex;gap:12px;padding:16px;border-bottom:1px solid var(--border)}
.stat-card{flex:1;text-align:center;padding:14px;background:var(--bg2);border-radius:var(--r)}
.stat-value{font-size:20px;font-weight:700;color:var(--green);margin-bottom:4px}
.stat-label{font-size:11px;color:var(--text3);font-weight:500}

.profile-menu{padding:8px 0}
.profile-menu-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .15s}
.profile-menu-item:hover{background:var(--bg2)}
.profile-menu-item svg{width:20px;height:20px;color:var(--text2)}
.profile-menu-item span{font-size:14px;font-weight:500}

/* ===== PROMO CARDS ===== */
.promo-card{margin:8px 16px;padding:16px;border-radius:var(--r);border:1.5px solid var(--border);transition:box-shadow .15s}
.promo-card:hover{box-shadow:var(--shadow)}
.promo-title{font-size:14px;font-weight:600;margin-bottom:6px}
.promo-desc{font-size:12px;color:var(--text2);margin-bottom:8px;line-height:1.4}
.promo-footer{display:flex;justify-content:space-between;align-items:center}
.promo-code{font-size:13px;font-weight:700;color:var(--green);background:var(--green-light);padding:4px 10px;border-radius:6px;cursor:pointer}
.promo-meta{font-size:11px;color:var(--text3)}

/* ===== ADDRESS CARDS ===== */
.address-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s,transform .15s}
.address-card:hover{background:var(--green-pale)}
.address-card:active{background:var(--green-light);transform:scale(.98)}
.address-icon{width:40px;height:40px;border-radius:10px;background:var(--green-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.address-icon svg{width:20px;height:20px;color:var(--green)}
.address-text{flex:1;min-width:0}
.address-main{font-size:14px;font-weight:500;margin-bottom:2px}
.address-sub{font-size:12px;color:var(--text3)}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:none;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease}
.modal-overlay.active{display:flex}
.modal{background:var(--bg);border-radius:16px 16px 0 0;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;animation:slideUp .3s ease;padding-bottom:env(safe-area-inset-bottom)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1}
.modal-header h3{font-size:16px;font-weight:700}
.modal-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text2)}
.modal-body{padding:16px}

/* ===== PAGE TITLE ===== */
.page-title{padding:18px 16px 12px;font-size:20px;font-weight:700}

/* ===== BACK BUTTON ===== */
.back-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;background:none;border:none;font-family:inherit}
.back-btn:hover{color:var(--green)}
.back-btn svg{width:18px;height:18px}

/* ===== LOGIN / ADMIN PANEL ===== */
.login-body{max-width:100%;background:var(--bg);padding-bottom:0;overflow-x:hidden;overflow-y:auto;min-height:100vh}

.login-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.login-bg-circle{position:absolute;border-radius:50%;opacity:.07}
.login-bg-circle.c1{width:400px;height:400px;background:var(--green);top:-120px;right:-100px;animation:floatBg 20s ease-in-out infinite}
.login-bg-circle.c2{width:300px;height:300px;background:var(--green);bottom:-80px;left:-80px;animation:floatBg 25s ease-in-out infinite reverse}
.login-bg-circle.c3{width:200px;height:200px;background:var(--blue);top:40%;left:60%;animation:floatBg 18s ease-in-out infinite 5s}
@keyframes floatBg{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(20px,-30px) scale(1.05)}50%{transform:translate(-15px,20px) scale(.95)}75%{transform:translate(10px,15px) scale(1.02)}}

.login-container{position:relative;z-index:1;max-width:420px;margin:0 auto;padding:40px 24px 30px;min-height:calc(100vh - 40px)}

/* Логотип */
.login-logo{text-align:center;margin-bottom:36px;animation:slideUp .5s ease}
.login-logo-icon{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,var(--green),var(--green-hover));display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 8px 24px rgba(82,183,136,.3)}
.login-logo-icon svg{width:32px;height:32px;color:#fff}
.login-title{font-size:28px;font-weight:800;letter-spacing:-.5px;color:var(--text);margin-bottom:4px}
.login-title b{color:var(--green)}
.login-subtitle{font-size:14px;color:var(--text3);font-weight:500}

/* Секция */
.login-step{animation:slideUp .4s ease}
.login-section-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;padding:0 4px}
.login-section-dot{width:6px;height:6px;border-radius:50%;background:var(--green)}

/* Список аккаунтов */
.accounts-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}

.account-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;cursor:pointer;transition:all .2s ease;animation:up .35s ease both}
.account-card:hover{border-color:var(--green);background:var(--green-pale);box-shadow:0 4px 16px rgba(82,183,136,.12);transform:translateY(-1px)}
.account-card:active{transform:scale(.98);box-shadow:none}

.account-avatar{width:44px;height:44px;border-radius:12px;background:var(--green-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}
.account-card:hover .account-avatar{background:var(--green);color:#fff}
.account-avatar svg{width:22px;height:22px;color:var(--green);transition:color .2s}
.account-card:hover .account-avatar svg{color:#fff}

.account-info{flex:1;min-width:0}
.account-phone{font-size:16px;font-weight:600;color:var(--text);letter-spacing:.2px}
.account-status{font-size:12px;color:var(--text3);margin-top:2px}

.account-arrow{flex-shrink:0;transition:transform .2s}
.account-arrow svg{width:18px;height:18px;color:var(--text3);transition:color .2s}
.account-card:hover .account-arrow{transform:translateX(3px)}
.account-card:hover .account-arrow svg{color:var(--green)}

.no-accounts{text-align:center;padding:32px 16px;color:var(--text2);font-size:14px}

/* Разделитель */
.login-divider{display:flex;align-items:center;gap:12px;margin:16px 0;padding:0 4px}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.login-divider span{font-size:12px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:.5px}

/* Карточка нового номера */
.new-phone-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px dashed var(--border);border-radius:14px;cursor:pointer;transition:all .2s}
.new-phone-card:hover{border-color:var(--green);background:var(--green-pale)}
.new-phone-icon{width:44px;height:44px;border-radius:12px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}
.new-phone-card:hover .new-phone-icon{background:var(--green-light)}
.new-phone-icon svg{width:22px;height:22px;color:var(--text3);transition:color .2s}
.new-phone-card:hover .new-phone-icon svg{color:var(--green)}
.new-phone-title{font-size:15px;font-weight:600;color:var(--text)}
.new-phone-desc{font-size:12px;color:var(--text3);margin-top:1px}

/* Форма нового номера */
.new-phone-form{animation:slideUp .3s ease;margin-top:16px}
.login-input-group{margin-bottom:14px}
.login-input-group label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}
.login-input-wrap{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s;background:var(--bg)}
.login-input-wrap:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(82,183,136,.12)}
.login-input-prefix{padding:12px 0 12px 14px;font-size:16px;font-weight:600;color:var(--text);user-select:none;flex-shrink:0}
.login-input-wrap input{flex:1;border:none;outline:none;padding:12px 14px 12px 8px;font-size:16px;font-family:inherit;background:transparent;color:var(--text);letter-spacing:.5px}
.login-input-wrap input::placeholder{color:var(--text3);letter-spacing:0}

.login-btn{padding:14px 20px;font-size:15px;border-radius:12px;margin-top:4px}

/* SMS шаг */
.sms-info{text-align:center;margin-bottom:24px}
.sms-phone{font-size:20px;font-weight:700;color:var(--text);margin-bottom:6px;letter-spacing:.3px}
.sms-hint{font-size:13px;color:var(--text3)}

.sms-code-inputs{display:flex;justify-content:center;gap:10px;margin-bottom:20px}
.sms-digit{width:56px;height:64px;border:2px solid var(--border);border-radius:14px;text-align:center;font-size:24px;font-weight:700;font-family:inherit;outline:none;color:var(--text);background:var(--bg);transition:all .2s;caret-color:var(--green)}
.sms-digit:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(82,183,136,.15);background:var(--green-pale)}

.sms-error{text-align:center;font-size:13px;color:var(--red);font-weight:500;margin-bottom:14px;animation:slideUp .3s ease}

/* Loading */
.login-loading-card{text-align:center;padding:60px 20px}
.login-spinner{width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 20px}
.login-loading-text{font-size:15px;color:var(--text2);font-weight:500}

/* Footer */
.login-footer{text-align:center;padding:16px;font-size:12px;color:var(--text3);position:relative;z-index:1}

/* ===== LOGOUT BUTTON (Profile) ===== */
.logout-item{color:var(--red)!important}
.logout-item svg{color:var(--red)!important}
.logout-item:hover{background:var(--red-light)!important}

/* ===== CHAT (Support) ===== */
.chat-page{display:flex;flex-direction:column;height:calc(100vh - 56px);overflow:hidden}
.chat-messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.chat-empty{text-align:center;color:var(--text3);font-size:14px;margin-top:40px}

/* Bubbles */
.chat-bubble{max-width:80%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.4;word-break:break-word;position:relative}
.chat-bubble-user{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:4px}
.chat-bubble-support{align-self:flex-start;background:var(--bg2);color:var(--text);border-bottom-left-radius:4px}
.chat-text a{color:inherit;text-decoration:underline}
.chat-time{font-size:10px;margin-top:4px;opacity:.6}
.chat-bubble-user .chat-time{text-align:right}
.chat-sending{opacity:.6}
.chat-failed{opacity:.8;border:1.5px dashed var(--red)}
.chat-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chat-option-btn{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:12px;padding:8px 12px;font-size:13px;line-height:1.3;cursor:pointer;transition:all .15s}
.chat-option-btn:hover:not(:disabled){border-color:var(--green);color:var(--green-hover)}
.chat-option-btn:disabled{opacity:.6;cursor:default}
.chat-options-locked{gap:6px}
.chat-option-chip{display:inline-flex;align-items:center;max-width:100%;padding:6px 10px;border-radius:999px;background:rgba(33,160,56,.12);color:var(--green-hover);font-size:12px;font-weight:600}

/* Attachments */
.chat-attach-img{max-width:100%;border-radius:8px;margin-top:6px;display:block}
.chat-attach-file{display:inline-block;margin-top:6px;font-size:13px;text-decoration:underline}

/* Date separator */
.chat-date-sep{text-align:center;font-size:11px;color:var(--text3);padding:8px 0;font-weight:500}

/* Status bar */
.chat-status{display:flex;align-items:center;gap:6px;padding:6px 16px;font-size:11px;font-weight:500;transition:all .3s}
.chat-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.chat-status-connected{background:var(--green-light);color:var(--green-hover)}
.chat-status-connected .chat-status-dot{background:var(--green)}
.chat-status-connecting{background:var(--orange-light);color:var(--orange)}
.chat-status-connecting .chat-status-dot{background:var(--orange);animation:pulse 1.2s infinite}
.chat-status-offline{background:var(--red-light);color:var(--red)}
.chat-status-offline .chat-status-dot{background:var(--red)}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Input area */
.chat-input-area{flex-shrink:0;border-top:1px solid var(--border);padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));background:var(--bg)}
.chat-input-wrap{display:flex;align-items:flex-end;background:var(--bg2);border-radius:20px;padding:4px 4px 4px 14px}
.chat-input-wrap textarea{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--text);resize:none;max-height:120px;padding:6px 0;line-height:1.4}
.chat-input-wrap textarea::placeholder{color:var(--text3)}
.chat-input-disabled{opacity:.7}
.chat-send-btn{width:34px;height:34px;border-radius:50%;border:none;background:var(--green);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.chat-send-btn:disabled{background:var(--border);cursor:default}
.chat-send-btn:not(:disabled):hover{background:var(--green-hover)}
.chat-send-btn svg{width:16px;height:16px}

/* Typing indicator */
.chat-typing{padding:4px 16px;font-size:12px;color:var(--text3)}
.typing-dots{display:flex;gap:3px;align-items:center;height:20px}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:bounce .6s infinite alternate}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes bounce{to{opacity:.3;transform:translateY(-4px)}}

/* ===== ADMIN PANEL ===== */
.adm-header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:100}
.adm-back{width:32px;height:32px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.adm-back:hover{background:var(--border)}
.adm-back svg{width:18px;height:18px;color:var(--text2)}
.adm-title{font-size:17px;font-weight:700;flex:1}

.adm-nav{display:flex;gap:0;position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:100}
.adm-ni{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:500;color:var(--text3);padding:5px 2px;border-radius:8px;transition:color .15s,background .15s;text-decoration:none;line-height:1.15}
.adm-ni svg{width:21px;height:21px;flex-shrink:0}
.adm-ni span{display:block;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-ni:active{background:var(--bg2)}
.adm-ni.on{color:var(--green)}
.adm-ni.on svg{color:var(--green)}

/* Admin layout: один админ-хедер вместо двух (kuper-логотип скрыт) */
body.adm-page .hdr{display:none}
body.adm-page{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

.adm-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:16px}
.adm-stat{text-align:center;padding:16px 12px;background:var(--bg2);border-radius:var(--r);transition:transform .15s}
.adm-stat:active{transform:scale(.97)}
.adm-stat-val{font-size:24px;font-weight:700;color:var(--green);margin-bottom:4px}
.adm-stat-lbl{font-size:11px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:.3px}

.adm-section{padding:0 16px 16px}
.adm-section-title{font-size:13px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;padding-top:16px}

.adm-quick{display:flex;flex-direction:column;gap:2px;background:var(--bg);border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.adm-quick-item{display:flex;align-items:center;gap:12px;padding:13px 16px;transition:background .15s;cursor:pointer}
.adm-quick-item:hover{background:var(--bg2)}
.adm-quick-item svg{width:20px;height:20px;color:var(--text2);flex-shrink:0}
.adm-quick-item span{font-size:14px;font-weight:500;flex:1}
.adm-quick-item .adm-arrow{width:16px;height:16px;color:var(--text3)}

.adm-recent{display:flex;flex-direction:column;gap:2px}
.adm-recent-item{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bg);border-radius:var(--rs);border:1px solid var(--border);transition:background .15s}
.adm-recent-item:hover{background:var(--bg2)}

.adm-user-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.adm-user-card:hover{background:var(--bg2)}
.adm-user-card:active{background:var(--green-pale)}
.adm-user-top{display:flex;align-items:center;justify-content:space-between}
.adm-user-id{font-size:14px;font-weight:600;font-family:'Courier New',monospace;letter-spacing:-.3px}
.adm-user-mid{font-size:13px;color:var(--text2)}
.adm-user-bot{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text3)}

.adm-role{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.3px}
.adm-role-owner{background:var(--orange-light);color:var(--orange)}
.adm-role-admin{background:var(--blue-light);color:var(--blue)}
.adm-role-user{background:var(--bg2);color:var(--text3)}

.adm-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px;flex-shrink:0}
.adm-dot-on{background:var(--green)}
.adm-dot-off{background:var(--text3)}

.adm-user-header{text-align:center;padding:24px 16px;border-bottom:1px solid var(--border)}
.adm-user-avatar{width:64px;height:64px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:22px;font-weight:700;color:var(--green);font-family:'Courier New',monospace}
.adm-user-header .adm-user-id{font-size:16px;margin-bottom:6px}

.adm-detail-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.adm-detail-row:last-child{border-bottom:none}
.adm-detail-key{font-size:13px;color:var(--text2)}
.adm-detail-val{font-size:14px;font-weight:500;text-align:right;max-width:60%;word-break:break-all}

.adm-phone-list{list-style:none;padding:0}
.adm-phone-list li{padding:8px 0;border-bottom:1px solid var(--border);font-size:14px;display:flex;align-items:center;gap:8px}
.adm-phone-list li:last-child{border-bottom:none}
.adm-phone-current{font-size:11px;color:var(--green);font-weight:600}

.adm-actions{padding:16px;display:flex;flex-direction:column;gap:10px}
.adm-actions .btn{width:100%;padding:12px;border:none;border-radius:var(--rs);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.adm-actions .btn-primary{background:var(--green);color:#fff}
.adm-actions .btn-primary:hover{background:var(--green-hover)}
.adm-actions .btn-secondary{background:var(--bg2);color:var(--text)}
.adm-actions .btn-secondary:hover{background:var(--border)}
.adm-actions .btn-danger{background:var(--red-light);color:var(--red)}
.adm-actions .btn-danger:hover{background:var(--red);color:#fff}

.adm-owner-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--orange-light);border-radius:var(--r);margin:16px}
.adm-owner-card .adm-owner-icon{font-size:24px}
.adm-owner-card .adm-owner-info{flex:1}
.adm-owner-card .adm-owner-id{font-size:15px;font-weight:600;font-family:'Courier New',monospace}
.adm-owner-card .adm-owner-lbl{font-size:12px;color:var(--orange);font-weight:500}

.adm-admin-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.adm-admin-card .adm-admin-icon{font-size:20px;flex-shrink:0}
.adm-admin-card .adm-admin-info{flex:1}
.adm-admin-card .adm-admin-id{font-size:14px;font-weight:600;font-family:'Courier New',monospace}
.adm-admin-card .adm-admin-date{font-size:12px;color:var(--text3)}
.adm-admin-remove{padding:6px 12px;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:var(--red-light);color:var(--red);font-family:inherit;transition:all .15s}
.adm-admin-remove:hover{background:var(--red);color:#fff}

.adm-add-form{margin:16px;padding:16px;border:1.5px dashed var(--border);border-radius:var(--r)}
.adm-add-form label{font-size:13px;font-weight:600;color:var(--text2);display:block;margin-bottom:8px}
.adm-add-form input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--rs);font-size:14px;font-family:inherit;outline:none;transition:border-color .2s;background:var(--bg)}
.adm-add-form input:focus{border-color:var(--green)}
.adm-add-form button{width:100%;margin-top:10px;padding:11px;border:none;border-radius:var(--rs);font-size:14px;font-weight:600;cursor:pointer;background:var(--green);color:#fff;font-family:inherit;transition:background .15s}
.adm-add-form button:hover{background:var(--green-hover)}

.adm-empty{text-align:center;padding:32px 16px;color:var(--text3);font-size:14px}

.adm-search{padding:12px 16px 8px}
.adm-filters{padding:0 16px 12px}
.adm-count{padding:0 16px 8px;font-size:12px;color:var(--text3)}
.adm-load-more{padding:12px 16px;text-align:center}
.adm-load-more button{padding:10px 24px;border:1.5px solid var(--border);border-radius:var(--rs);font-size:13px;font-weight:500;cursor:pointer;background:var(--bg);color:var(--text2);font-family:inherit;transition:all .15s}
.adm-load-more button:hover{border-color:var(--green);color:var(--green)}

.adm-avatar{width:64px;height:64px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:22px;font-weight:700;color:var(--green);font-family:'Courier New',monospace}
.adm-user-id-large{font-size:16px;font-weight:600;font-family:'Courier New',monospace;margin-bottom:6px}
.adm-recent-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.adm-recent-id{font-size:13px;font-weight:600;font-family:'Courier New',monospace}
.adm-recent-phone{font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-recent-time{font-size:11px;color:var(--text3);flex-shrink:0}
.adm-owner-sub{font-size:12px;color:var(--orange);font-weight:500}

/* ============================================================
   PROXY ADMIN — расширенный UI (admin_proxy / admin_proxy_market)
   ============================================================ */

/* Sticky toolbar поверх контента, под .adm-header */
.adm-toolbar{position:sticky;top:61px;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);margin-bottom:14px}
.adm-toolbar-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.adm-tb-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text)}
.adm-tb-status .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text3);transition:background .25s,box-shadow .25s}
.adm-tb-status .dot.on{background:var(--green);box-shadow:0 0 0 3px rgba(82,183,136,.18)}
.adm-tb-status .dot.warn{background:var(--orange);box-shadow:0 0 0 3px rgba(245,158,11,.20)}
.adm-tb-status .dot.err{background:var(--red);box-shadow:0 0 0 3px rgba(232,69,60,.18)}
.adm-tb-status .dot.live{animation:pulseDot 1.6s ease-in-out infinite}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 3px rgba(82,183,136,.18)}50%{box-shadow:0 0 0 6px rgba(82,183,136,.10)}}
.adm-tb-meta{font-size:11px;color:var(--text3);font-weight:500;font-variant-numeric:tabular-nums}
.adm-tb-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}

/* Чипы интервалов авто-обновления */
.adm-chips{display:inline-flex;gap:0;background:var(--bg2);border-radius:999px;padding:3px}
.adm-chips button{padding:5px 11px;font-size:11px;font-weight:700;border-radius:999px;background:transparent;color:var(--text2);border:none;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.adm-chips button:hover{color:var(--text)}
.adm-chips button.on{background:var(--green);color:#fff;box-shadow:0 1px 4px rgba(82,183,136,.35)}

/* Иконочные кнопки */
.btn-icon{width:38px;height:38px;border-radius:50%;border:none;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .15s,box-shadow .2s;flex-shrink:0;box-shadow:0 2px 10px rgba(82,183,136,.30)}
.btn-icon:hover{background:var(--green-hover);box-shadow:0 4px 14px rgba(82,183,136,.45)}
.btn-icon:active{transform:scale(.92)}
.btn-icon svg{width:18px;height:18px}
.btn-icon.spinning svg{animation:spin .85s linear infinite}
.btn-icon.ghost{background:var(--bg2);color:var(--text);box-shadow:none}
.btn-icon.ghost:hover{background:var(--border);box-shadow:none}

/* Pro stat cards с иконкой и сабтекстом */
.adm-stats-pro{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px 16px}
.adm-stat-pro{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);transition:transform .15s,box-shadow .2s,border-color .2s}
.adm-stat-pro:hover{box-shadow:var(--shadow);border-color:var(--green-light);transform:translateY(-1px)}
.adm-stat-pro:active{transform:scale(.98)}
.adm-stat-pro-head{display:flex;align-items:center;gap:8px}
.adm-stat-pro-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--green-light);color:var(--green)}
.adm-stat-pro-icon svg{width:16px;height:16px}
.adm-stat-pro-icon.warn{background:var(--orange-light);color:var(--orange)}
.adm-stat-pro-icon.danger{background:var(--red-light);color:var(--red)}
.adm-stat-pro-icon.info{background:var(--blue-light);color:var(--blue)}
.adm-stat-pro-icon.mute{background:var(--bg2);color:var(--text2)}
.adm-stat-pro-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-weight:700;line-height:1.2}
.adm-stat-pro-val{font-size:22px;font-weight:800;color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.adm-stat-pro-sub{font-size:11px;color:var(--text3);font-weight:500;line-height:1.3}
.adm-stat-pro.danger .adm-stat-pro-val{color:var(--red)}
.adm-stat-pro.warn .adm-stat-pro-val{color:var(--orange)}
.adm-stat-pro.ok .adm-stat-pro-val{color:var(--green)}

/* Карточка-секция (заголовок + тело) */
.adm-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin:0 16px 12px}
.adm-card-head{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--border)}
.adm-card-head-icon{width:30px;height:30px;border-radius:8px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.adm-card-head-icon svg{width:16px;height:16px;color:var(--text2)}
.adm-card-head-icon.green{background:var(--green-light)}
.adm-card-head-icon.green svg{color:var(--green)}
.adm-card-head-icon.warn{background:var(--orange-light)}
.adm-card-head-icon.warn svg{color:var(--orange)}
.adm-card-head-icon.danger{background:var(--red-light)}
.adm-card-head-icon.danger svg{color:var(--red)}
.adm-card-head-icon.info{background:var(--blue-light)}
.adm-card-head-icon.info svg{color:var(--blue)}
.adm-card-title{font-size:14px;font-weight:700;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-card-sub{font-size:11px;color:var(--text3);font-weight:600;flex-shrink:0}
.adm-card-body{padding:6px 0}
.adm-card-body.padded{padding:12px 14px}

/* Key:value строка */
.adm-row{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;gap:12px;font-size:13px;border-bottom:1px dashed var(--border)}
.adm-row:last-child{border-bottom:none}
.adm-row-k{color:var(--text2);flex-shrink:0;font-weight:500}
.adm-row-v{color:var(--text);font-weight:600;text-align:right;word-break:break-word;min-width:0;display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:wrap}

/* Mono-пилюля */
.mono{font-family:'SF Mono','Menlo','Monaco','Courier New',monospace;font-size:11.5px;background:var(--bg2);padding:2px 7px;border-radius:5px;color:var(--text);font-weight:600;letter-spacing:.1px}

/* Бейдж статуса */
.bdg{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap;text-transform:uppercase}
.bdg-ok{background:var(--green-light);color:var(--green-hover)}
.bdg-warn{background:var(--orange-light);color:var(--orange)}
.bdg-err{background:var(--red-light);color:var(--red)}
.bdg-info{background:var(--blue-light);color:var(--blue)}
.bdg-mute{background:var(--bg2);color:var(--text3)}

/* Чипы причин/тегов */
.chips-wrap{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:var(--bg2);color:var(--text2);border-radius:999px;font-size:11px;font-weight:600;line-height:1.3}
.chip b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
.chip-warn{background:var(--orange-light);color:var(--orange)} .chip-warn b{color:var(--orange)}
.chip-danger{background:var(--red-light);color:var(--red)} .chip-danger b{color:var(--red)}
.chip-info{background:var(--blue-light);color:var(--blue)} .chip-info b{color:var(--blue)}
.chip-ok{background:var(--green-light);color:var(--green-hover)} .chip-ok b{color:var(--green-hover)}

/* Pretty list-item (бронь / сжигание / sub-user / событие) */
.adm-list{display:flex;flex-direction:column;gap:6px;padding:6px 14px 12px}
.adm-li{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);transition:border-color .15s,background .15s,transform .15s}
.adm-li:hover{border-color:var(--green-light);background:var(--bg2)}
.adm-li-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.adm-li-id{font-size:13px;font-weight:700;color:var(--text);font-family:'SF Mono','Menlo',monospace;letter-spacing:-.2px}
.adm-li-time{font-size:11px;color:var(--text3);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.adm-li-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);flex-wrap:wrap;line-height:1.4}
.adm-li-meta .mono{font-size:11px}
.adm-li-actions{display:flex;gap:6px;margin-top:6px}

/* Tiny-кнопки действий */
.btn-tiny{padding:5px 10px;font-size:11px;font-weight:700;border-radius:6px;border:none;cursor:pointer;font-family:inherit;transition:background .15s,color .15s,transform .12s;display:inline-flex;align-items:center;gap:4px;line-height:1}
.btn-tiny:active{transform:scale(.94)}
.btn-tiny svg{width:11px;height:11px}
.btn-tiny.danger{background:var(--red-light);color:var(--red)}
.btn-tiny.danger:hover{background:var(--red);color:#fff}
.btn-tiny.warn{background:var(--orange-light);color:var(--orange)}
.btn-tiny.warn:hover{background:var(--orange);color:#fff}
.btn-tiny.ok{background:var(--green-light);color:var(--green-hover)}
.btn-tiny.ok:hover{background:var(--green);color:#fff}
.btn-tiny.ghost{background:var(--bg2);color:var(--text2)}
.btn-tiny.ghost:hover{background:var(--border);color:var(--text)}

/* Бар-чарт (ASN / города / домены) */
.adm-bars{display:flex;flex-direction:column;gap:6px;padding:8px 14px 12px}
.bar-row{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;row-gap:4px;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs)}
.bar-row-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);font-size:12px;font-weight:600}
.bar-row-val{font-weight:800;color:var(--text);font-size:12px;font-variant-numeric:tabular-nums;text-align:right}
.bar-row-bar{height:5px;background:var(--bg2);border-radius:3px;overflow:hidden;grid-column:1/-1}
.bar-row-bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--green-hover));border-radius:3px;transition:width .35s ease}

/* Прогресс (раскатка) */
.prog{height:8px;background:var(--bg2);border-radius:4px;overflow:hidden;position:relative}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--green-hover));border-radius:4px;transition:width .35s ease;width:0}
.prog-fill.warn{background:linear-gradient(90deg,#fbbf24,var(--orange))}
.prog-fill.danger{background:linear-gradient(90deg,#f87171,var(--red))}
.prog-fill.off{background:var(--text3)}

/* Контролы раскатки (range + number + кнопки) */
.adm-rollout-ctrl{display:flex;align-items:center;gap:10px;padding:0 14px 14px;flex-wrap:wrap}
.adm-rollout-ctrl input[type=range]{flex:1;min-width:120px;accent-color:var(--green);height:32px}
.adm-rollout-ctrl input[type=number]{width:80px;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--rs);font-size:13px;font-family:inherit;font-weight:700;text-align:center;outline:none;transition:border-color .15s;background:var(--bg);font-variant-numeric:tabular-nums;color:var(--text)}
.adm-rollout-ctrl input[type=number]:focus{border-color:var(--green)}

/* Pretty empty-state */
.adm-empty-pro{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 16px;color:var(--text3);text-align:center}
.adm-empty-pro svg{width:36px;height:36px;color:var(--text3);opacity:.45}
.adm-empty-pro-title{font-size:13px;font-weight:700;color:var(--text2)}
.adm-empty-pro-sub{font-size:12px;line-height:1.45;max-width:300px}

/* Skeleton-строки */
.adm-skel{padding:8px 14px 12px;display:flex;flex-direction:column;gap:6px}
.adm-skel-row{height:48px;background:linear-gradient(90deg,var(--bg2) 25%,#e8e8ec 50%,var(--bg2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--rs)}

/* Severity для алертов */
.sev{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.3px}
.sev-crit{color:var(--red)}
.sev-warn{color:var(--orange)}
.sev-info{color:var(--blue)}

/* Скрытие резервной .adm-actions у наших страниц прокси (на всякий) */
.adm-bottom-actions{display:flex;gap:10px;padding:0 16px 24px;flex-wrap:wrap}

/* Тёмная тема (TMA) */
body.tma .adm-toolbar{background:var(--tg-bg,var(--bg));backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--tg-secondary-bg,var(--border))}
body.tma .adm-card{background:var(--tg-bg,var(--bg));border-color:var(--tg-secondary-bg,var(--border))}
body.tma .adm-card-head{border-color:var(--tg-secondary-bg,var(--border))}
body.tma .adm-card-head-icon{background:var(--tg-secondary-bg,var(--bg2))}
body.tma .adm-stat-pro{background:var(--tg-bg,var(--bg));border-color:var(--tg-secondary-bg,var(--border))}
body.tma .adm-li{background:var(--tg-bg,var(--bg));border-color:var(--tg-secondary-bg,var(--border))}
body.tma .adm-li:hover{background:var(--tg-secondary-bg,var(--bg2))}
body.tma .adm-chips{background:var(--tg-secondary-bg,var(--bg2))}
body.tma .mono{background:var(--tg-secondary-bg,var(--bg2))}
body.tma .chip{background:var(--tg-secondary-bg,var(--bg2))}
body.tma .prog{background:var(--tg-secondary-bg,var(--bg2))}
body.tma .bar-row{background:var(--tg-bg,var(--bg));border-color:var(--tg-secondary-bg,var(--border))}
body.tma .bar-row-bar{background:var(--tg-secondary-bg,var(--bg2))}
body.tma .adm-rollout-ctrl input[type=number]{background:var(--tg-secondary-bg,var(--bg2));border-color:var(--tg-secondary-bg,var(--border));color:var(--tg-text,var(--text))}
body.tma .adm-skel-row{background:var(--tg-secondary-bg,var(--bg2))}
body.tma .adm-row{border-color:var(--tg-secondary-bg,var(--border))}
body.tma .btn-icon.ghost{background:var(--tg-secondary-bg,var(--bg2));color:var(--tg-text,var(--text))}

/* Адаптив (узкие экраны) */
@media (max-width:380px){
  .adm-stats-pro{grid-template-columns:1fr}
  .adm-stat-pro-val{font-size:20px}
  /* flex-wrap нужен, чтобы .adm-toolbar-info с flex:1 1 100% реально перетёк
     на новую строку, а не сжимался под действия (кнопка + чипы вылезали из вьюпорта). */
  .adm-toolbar{padding:8px 12px;gap:6px;flex-wrap:wrap}
  .adm-toolbar-info{flex:1 1 100%;order:1}
  .adm-tb-actions{flex:0 1 auto;order:2;margin-left:auto}
  .adm-chips button{padding:5px 8px}
}