/* ==========================================================================
   Bot5ka Web UI — «Soft Rose-White Pyaterochka»
   Чистый белый фон, постельный pastel-rose акцент, фирменный красный для CTA.
   - Все имена селекторов сохранены (HTML-шаблоны не правятся).
   - Все CSS-переменные старого API сохранены — inline-стили в шаблонах
     ссылаются на --green/--red/--text3/--x5-red — ломать нельзя.
   - color-scheme: light принудительно — чтобы Telegram-клиенты на тёмной
     теме НЕ инвертировали страницу и не подменяли user-agent колоры
     (form controls, autofill, scrollbars).
   ========================================================================== */

/* ===== ДИЗАЙН-ТОКЕНЫ ===================================================== */
:root {
  color-scheme: light only;

  /* — Brand —
     Канонический красный Пятёрочки + жёлтая «5». Бренд CTA остаётся
     насыщенным, чтобы покупательский «тыкаю красное» рефлекс работал.
     Для второстепенных акцентов — постельный rose-pastel. */
  --x5-red:        #E5193D;   /* primary brand — для CTA, badges, prices */
  --x5-red-deep:   #BD0E2C;   /* hover / gradient end */
  --x5-red-pastel: #F4778A;   /* постельный — для иконок-акцентов и thin lines */
  --x5-red-soft:   #FFE0E5;   /* tinted bg — chips, selection, soft surface */
  --x5-red-tint:   #FFF3F5;   /* нежнейший pink — hover row, address-bar */
  --x5-rose-blush: #FFF8FA;   /* almost white с rose hint — separators, secondary */
  --x5-yellow:     #FFD200;
  --x5-yellow-deep:#FFB400;

  /* — Surfaces —
     БАЗА — чистый белый. Tints — едва заметный rose-pink (НЕ beige).
     Это делает фон визуально светлым, не утомляет, гармонирует с brand red. */
  --bg:           #FFFFFF;   /* основной фон страницы — pure white */
  --bg2:          #FFF8FA;   /* secondary surface — еле розоватый, для разделителей */
  --bg3:          #FFEDF1;   /* deeper rose tint — для skeleton shimmer, focus tint */
  --surface:      #FFFFFF;   /* elevated cards — pure white */

  /* — Text —
     Мягкий тёплый чёрный (не #000 — режет глаза на белом).
     Слегка винный подтон гармонирует с red. */
  --text:         #1A0F12;   /* primary */
  --text2:        #5C4C50;   /* secondary, чуть тёплый */
  --text3:        #A89DA0;   /* muted, hint */
  --text-on-red:  #FFFFFF;

  /* — Action / status (UX-привычки grocery, статусы заказов) — */
  --green:        #1F8A3D;
  --green-hover:  #156B2D;
  --green-light:  #E3F4E7;
  --green-pale:   #F1F9F3;

  /* — Системные статусы — */
  --red:          #DC2626;   /* error / destructive */
  --red-light:    #FEE7E7;
  --orange:       #D97706;
  --orange-light: #FEF3DC;
  --blue:         #2563EB;
  --blue-light:   #E0EBFF;

  /* — Borders & dividers (pink, очень тонкие) —
     Замена бежево-кремовых на rose-pink: на белом фоне граница «дышит». */
  --border:        #FFE4E8;   /* primary — еле заметная rose линия */
  --border-strong: #FFCDD4;   /* stronger — inputs, focus rings */

  /* — Радиусы (щедрые, мягкие) — */
  --rxs: 8px;
  --rs:  12px;
  --r:   16px;
  --rl:  20px;
  --rxl: 24px;

  /* — Тени (мягкие, с red-tint) —
     Чтобы card-elevation выглядела «фирменно». Opacity снижен чтобы
     не давать «грязного» rim вокруг карточек на белом. */
  --shadow-xs:   0 1px 2px rgba(229,25,61,0.04);
  --shadow-sm:   0 2px 6px rgba(229,25,61,0.05), 0 1px 2px rgba(20,5,10,0.02);
  --shadow:      0 4px 12px rgba(229,25,61,0.06), 0 2px 4px rgba(20,5,10,0.02);
  --shadow-md:   0 8px 22px rgba(229,25,61,0.08), 0 2px 6px rgba(20,5,10,0.03);
  --shadow-lg:   0 16px 36px rgba(229,25,61,0.11), 0 4px 12px rgba(20,5,10,0.04);
  --shadow-red:  0 6px 18px rgba(229,25,61,0.28);
  --shadow-red-lg:0 10px 26px rgba(229,25,61,0.36);
  --shadow-green:0 4px 14px rgba(31,138,61,0.22);

  /* — Easing — */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* — Layout — */
  --max-w: 480px;
}

/* ===== RESET ============================================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;
  font-size:13.5px;
  line-height:1.45;
  color:var(--text);
  /* Page gutter (за пределами 480px viewport) — нежно-розовый, чтобы
     не было резкого «серого края» вокруг центрированного app. */
  background:var(--bg2);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv11','ss01';
  color-scheme:light only;
}
body{
  max-width:var(--max-w);
  margin:0 auto;
  background:var(--bg);
  min-height:100vh;
  padding-bottom:72px;
  overflow-x:hidden;
  position:relative;
}
/* Едва заметный rose accent сверху — без жёлтого, без «warm cream» —
   чтобы фон оставался визуально белым, но имел лёгкое фирменное «дыхание». */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% -10%, rgba(229,25,61,0.025), transparent 55%);
  z-index:-1;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--x5-red-soft);color:var(--x5-red-deep)}

/* Глобальный focus-ring для клавиатурной навигации */
:focus-visible{outline:2px solid var(--x5-red);outline-offset:2px;border-radius:6px}


/* ===== HEADER ============================================================ */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,0.88);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  padding:9px 14px 10px;
  border-bottom:1px solid var(--border);
}
.hdr-row{display:flex;align-items:center;margin-bottom:9px;gap:8px}

/* Логотип: красный rounded-square с жёлтой «5» — канонический бренд-маркер */
.logo{
  font-size:17px;font-weight:800;letter-spacing:-0.02em;
  color:var(--text);
  display:inline-flex;align-items:center;gap:7px;
  transition:transform .2s var(--ease);
}
.logo:active{transform:scale(0.97)}
.logo .logo-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--x5-red),var(--x5-red-deep));
  color:var(--x5-yellow);
  font-size:15px;font-weight:900;line-height:1;
  font-family:'Inter',sans-serif;
  box-shadow:0 3px 10px rgba(229,25,61,0.32), inset 0 -1px 0 rgba(0,0,0,0.1);
  letter-spacing:-0.04em;
}
.logo b{color:var(--x5-red)}

/* Header buttons (back, cart, profile, admin) */
.hdr-btns{display:flex;align-items:center;gap:6px;margin-left:auto}
.hb{
  width:34px;height:34px;border-radius:50%;
  background:var(--x5-red-tint);
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0;
  transition:background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.hb:hover{background:var(--x5-red-soft);box-shadow:var(--shadow-xs)}
.hb:hover svg{color:var(--x5-red-deep)}
.hb:active{transform:scale(0.93)}
.hb svg{width:17px;height:17px;color:var(--text);transition:color .15s var(--ease)}

/* «Назад»: круглая кнопка слева в шапке, KuperAuto-style.
   Hover-сдвиг влево даёт явный «back-affordance». */
.hb-back svg{color:var(--x5-red);stroke-width:2.2}
.hb-back:hover{transform:translateX(-2px)}
.hb-back:active{transform:translateX(-2px) scale(0.93)}

.hb-admin{
  width:auto;border-radius:999px;padding:0 11px;gap:5px;
  background:var(--green-light);height:34px;
}
.hb-admin:hover{background:#D2EBD8}
.hb-admin svg{width:14px;height:14px;color:var(--green-hover)}
.hb-admin span{font-size:11px;font-weight:700;color:var(--green-hover);white-space:nowrap;letter-spacing:0.01em}
.hb .dot{
  position:absolute;top:5px;right:5px;
  width:7px;height:7px;border-radius:50%;
  background:var(--x5-red);
  border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--x5-red-soft);
}

/* ===== SEARCH ============================================================ */
.srch{
  display:flex;align-items:center;gap:8px;
  background:var(--x5-rose-blush);
  border:1px solid var(--border);
  border-radius:12px;
  padding:9px 12px;
  cursor:text;
  transition:background .15s var(--ease), border-color .15s var(--ease), box-shadow .2s var(--ease);
}
.srch:hover{border-color:var(--border-strong);background:var(--x5-red-tint)}
.srch:focus-within{
  background:var(--surface);
  border-color:var(--x5-red);
  box-shadow:0 0 0 4px rgba(229,25,61,0.10);
}
.srch svg{width:16px;height:16px;color:var(--text3);flex-shrink:0;transition:color .15s var(--ease)}
.srch:focus-within svg{color:var(--x5-red)}
.srch input{
  border:none;outline:none;background:transparent;
  font-size:13px;font-weight:500;
  width:100%;color:var(--text);
}
.srch input::placeholder{color:var(--text3);font-weight:400}

/* ===== ADDRESS BAR ======================================================= */
.addr{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  user-select:none;-webkit-user-select:none;
  transition:background .15s var(--ease);
}
.addr:hover{background:var(--x5-red-tint)}
.addr:active{background:var(--x5-red-soft)}
.addr > svg:first-child{
  width:17px;height:17px;color:var(--x5-red);flex-shrink:0;
  filter:drop-shadow(0 1px 2px rgba(229,25,61,0.2));
}
.addr-t{flex:1;font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr-t span{color:var(--text);font-weight:600;font-size:13px;display:block;margin-bottom:1px}
.addr-arrow{
  width:14px!important;height:14px!important;
  color:var(--text3)!important;flex-shrink:0;
  transition:transform .2s var(--ease), color .2s var(--ease);
}
.addr:hover .addr-arrow{color:var(--x5-red)!important;transform:translateX(3px)}

/* ===== HERO BANNER ======================================================= */
.bnr{
  margin:12px 14px;padding:18px 18px 20px;
  border-radius:var(--rl);
  background:
    radial-gradient(circle at 100% 0%, rgba(255,210,0,0.18), transparent 50%),
    linear-gradient(135deg, var(--x5-red) 0%, var(--x5-red-deep) 100%);
  color:#fff;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-red);
  isolation:isolate;
}
/* Декоративный круг + прозрачные кольца — тонкий бренд-паттерн */
.bnr::before{
  content:'';position:absolute;
  right:-30px;top:-50px;
  width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,0.10);
  z-index:-1;
}
.bnr::after{
  content:'';position:absolute;
  right:-60px;bottom:-80px;
  width:200px;height:200px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.12);
  z-index:-1;
}
.bnr-sub{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--x5-yellow);
  margin-bottom:6px;
  display:inline-flex;align-items:center;gap:5px;
}
.bnr-sub::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--x5-yellow);
  box-shadow:0 0 8px var(--x5-yellow);
}
.bnr h3{
  font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-0.01em;
  margin-bottom:11px;
  text-shadow:0 1px 2px rgba(0,0,0,0.1);
  max-width:80%;
}
.bnr-code{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:9px;
  font-size:12px;font-weight:700;
  letter-spacing:0.02em;
  color:#fff;
  transition:background .15s var(--ease), transform .15s var(--ease);
}
.bnr-code:hover{background:rgba(255,255,255,0.28);transform:translateX(2px)}

/* ===== SECTION HEADER ==================================================== */
.sh{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 8px;gap:10px}
.sh h2{font-size:16px;font-weight:700;letter-spacing:-0.01em;color:var(--text)}
.sh a{
  font-size:12px;font-weight:600;color:var(--x5-red);
  display:inline-flex;align-items:center;gap:2px;
  transition:gap .2s var(--ease);
}
.sh a:hover{gap:6px;color:var(--x5-red-deep)}

/* ===== CATEGORY GRID (главная + /catalog) ================================ */
/*
 * Сетка плиток категорий — основная навигация по каталогу.
 * 3 колонки на мобильном, 4 на широких экранах. Плитка =
 * квадратная подложка (картинка/градиент из 5ka API) + подпись снизу.
 */
.cats-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px 6px;
  padding:0 14px 14px;
}
@media (min-width:480px){
  .cats-grid{grid-template-columns:repeat(4, 1fr);gap:10px 8px}
}
.cat-tile{
  display:flex;flex-direction:column;align-items:stretch;gap:5px;
  text-decoration:none;color:var(--text);
  cursor:pointer;
  transition:transform .2s var(--ease);
}
.cat-tile:active{transform:scale(0.96)}
.cat-tile-img{
  aspect-ratio:1/1;
  border-radius:14px;
  background:var(--surface);
  overflow:hidden;position:relative;
  box-shadow:var(--shadow-xs);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.cat-tile:hover .cat-tile-img{
  box-shadow:var(--shadow-sm);
  transform:translateY(-2px);
}
.cat-tile-img img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.cat-tile span{
  font-size:11px;font-weight:600;color:var(--text);
  text-align:center;line-height:1.25;letter-spacing:-0.005em;
  padding:0 2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
  min-height:26px;
}
.skeleton-cat{
  aspect-ratio:1/1;border-radius:14px;
}

/* /catalog: разделы по группам витрин (5ka type=category_list) */
.cat-section{margin:0 0 14px}
.cat-section:last-child{margin-bottom:6px}
.cat-section-title{
  font-size:14px;font-weight:700;color:var(--text);
  letter-spacing:-0.01em;
  margin:5px 14px 8px;
}

/* ===== FILTER CHIPS ====================================================== */
.flts{display:flex;gap:6px;padding:0 14px 12px;overflow-x:auto;scrollbar-width:none}
.flts::-webkit-scrollbar{display:none}
.ch{
  flex-shrink:0;
  padding:6px 13px;
  border-radius:9px;
  font-size:12px;font-weight:600;
  cursor:pointer;
  border:1.5px solid var(--border);
  background:var(--surface);color:var(--text2);
  transition:all .15s var(--ease);
  user-select:none;
}
.ch:hover:not(.on){border-color:var(--x5-red);color:var(--x5-red);background:var(--x5-red-tint)}
.ch.on{
  background:linear-gradient(135deg,var(--x5-red),var(--x5-red-deep));
  color:#fff;border-color:transparent;
  box-shadow:var(--shadow-red);
}

/* ===== PRODUCT GRID ====================================================== */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 14px 20px}
.pc{
  background:var(--surface);
  border-radius:14px;
  border:1px solid var(--border);
  overflow:hidden;
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
  position:relative;
  display:flex;flex-direction:column;
}
.pc:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--border-strong)}
.pc:active{transform:scale(0.98)}

.pi{
  position:relative;width:100%;aspect-ratio:1;
  background:linear-gradient(135deg, var(--bg2) 0%, var(--bg) 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pi img{width:78%;height:78%;object-fit:contain;margin:auto;transition:transform .3s var(--ease)}
.pc:hover .pi img{transform:scale(1.05)}
.pi .no-img{
  color:var(--text3);font-size:11px;font-weight:600;letter-spacing:0.03em;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.pi .no-img::before{
  content:'5';font-size:28px;font-weight:900;color:var(--x5-red);
  opacity:0.25;line-height:1;
}

.badge{
  position:absolute;top:8px;left:8px;
  padding:3px 7px;
  border-radius:7px;
  font-size:10px;font-weight:800;letter-spacing:0.02em;
  background:var(--x5-red);color:#fff;
  box-shadow:0 2px 6px rgba(229,25,61,0.35);
}

.fav{
  position:absolute;top:8px;right:8px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .15s var(--ease), background .15s var(--ease);
  box-shadow:var(--shadow-xs);
}
.fav:hover{transform:scale(1.1);background:#fff}
.fav svg{width:14px;height:14px;color:var(--text3);transition:color .15s var(--ease)}
.fav:hover svg{color:var(--x5-red)}
.fav.liked svg{color:var(--x5-red);fill:var(--x5-red)}

.pb{padding:10px 10px 11px;display:flex;flex-direction:column;flex:1}
.pn{
  font-size:12px;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:calc(12px * 1.35 * 2);
}
.pw{font-size:10px;color:var(--text3);margin-bottom:8px;font-weight:500}
.pf{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;margin-top:auto}
.pp{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-0.02em;line-height:1}
.po{font-size:11px;color:var(--text3);text-decoration:line-through;margin-top:2px;font-weight:500}

/* «+» button — основная add-to-cart кнопка на карточке */
.pa{
  width:32px;height:32px;border-radius:10px;
  background:linear-gradient(135deg,var(--x5-red),var(--x5-red-deep));
  color:#fff;
  font-size:21px;line-height:1;font-weight:300;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
  box-shadow:var(--shadow-red);
}
.pa:hover{transform:translateY(-2px) scale(1.06);box-shadow:var(--shadow-red-lg)}
.pa:active{transform:scale(0.92)}
.pa.ok{
  background:var(--green-light);color:var(--green);
  box-shadow:none;font-size:16px;
}

/* qty controls (− 1 +) на карточке после добавления */
.product-qty-controls{
  display:flex;align-items:center;gap:3px;
  background:linear-gradient(135deg,var(--x5-red),var(--x5-red-deep));
  border-radius:10px;
  padding:2px;
  box-shadow:var(--shadow-red);
}
.product-qty-controls .qty-btn{
  width:26px;height:26px;
  border-radius:7px;border:none;
  background:rgba(255,255,255,0.15);
  color:#fff;
  font-size:16px;font-weight:600;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .15s var(--ease), transform .12s var(--ease);
}
.product-qty-controls .qty-btn:hover{background:rgba(255,255,255,0.25)}
.product-qty-controls .qty-btn:active{transform:scale(0.88)}
.product-qty-controls .qty-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none!important}
.product-qty-controls .qty-val{
  font-size:12px;font-weight:700;
  min-width:18px;text-align:center;
  color:#fff;
}

/* ===== BOTTOM NAV (3 items: Главная / Категории / Профиль) =============== */
.nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--max-w);
  background:rgba(255,255,255,0.96);
  backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-top:1px solid var(--border);
  display:flex;
  z-index:100;
  padding:6px 10px calc(8px + env(safe-area-inset-bottom));
  gap:3px;
}
.ni{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 3px 5px;
  cursor:pointer;
  background:none;border:none;
  color:var(--text3);
  font-size:10px;font-weight:600;
  text-decoration:none;
  border-radius:12px;
  transition:color .15s var(--ease), background .15s var(--ease);
  position:relative;
}
.ni:hover{color:var(--text2)}
.ni.on{color:var(--x5-red);background:var(--x5-red-tint)}
.ni.on::before{
  content:'';position:absolute;
  top:-6px;left:50%;transform:translateX(-50%);
  width:20px;height:2px;
  background:var(--x5-red);
  border-radius:0 0 2px 2px;
}
.ni svg{width:21px;height:21px;transition:transform .2s var(--ease)}
.ni.on svg{transform:scale(1.06)}

/* Cart badge: .cw оборачивает иконку корзины в .ni — бейдж позиционируется
   относительно SVG (а не всей колонки .ni), как в KuperAuto/маркетплейсах. */
.cw{display:inline-flex;position:relative;line-height:0}
.cb{
  position:absolute;top:-5px;right:-9px;
  min-width:16px;height:16px;
  border-radius:8px;
  background:var(--x5-red);color:#fff;
  font-size:9px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;
  border:2px solid var(--bg);
  box-shadow:0 2px 6px rgba(229,25,61,0.4);
  letter-spacing:0;
}

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

/* ===== ANIMATIONS ======================================================== */
@keyframes up{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.pc{animation:up .4s var(--ease-out) both}
.pc:nth-child(1){animation-delay:.02s} .pc:nth-child(2){animation-delay:.05s}
.pc:nth-child(3){animation-delay:.08s} .pc:nth-child(4){animation-delay:.11s}
.pc:nth-child(5){animation-delay:.14s} .pc:nth-child(6){animation-delay:.17s}
.pc:nth-child(7){animation-delay:.20s} .pc:nth-child(8){animation-delay:.23s}
.order-card{animation:up .4s var(--ease-out) both}
.order-card:nth-child(1){animation-delay:.02s} .order-card:nth-child(2){animation-delay:.05s}
.order-card:nth-child(3){animation-delay:.08s} .order-card:nth-child(4){animation-delay:.11s}
.order-card:nth-child(5){animation-delay:.14s} .order-card:nth-child(6){animation-delay:.17s}
.order-card:nth-child(7){animation-delay:.20s} .order-card:nth-child(8){animation-delay:.23s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
}

/* ===== SKELETON / LOADING ================================================ */
.skeleton{
  background:linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
  border-radius:var(--rs);
}
.skeleton-card{height:240px;border-radius:14px}
.skeleton-line{height:12px;margin-bottom:7px;border-radius:5px}
.skeleton-line.short{width:60%}

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

.empty-state{
  text-align:center;
  padding:48px 20px;
  color:var(--text3);
  animation:fadeIn .4s var(--ease-out);
}
.empty-state svg{
  width:58px;height:58px;
  margin-bottom:14px;
  color:var(--x5-red);
  opacity:0.35;
  filter:drop-shadow(0 4px 12px rgba(229,25,61,0.15));
}
.empty-state h3{
  font-size:15px;font-weight:700;color:var(--text);
  margin-bottom:5px;letter-spacing:-0.01em;
}
.empty-state p{font-size:13px;line-height:1.55;color:var(--text2)}

/* ===== TOAST ============================================================= */
.toast-container{
  position:fixed;
  top:max(16px, env(safe-area-inset-top, 16px));
  left:50%;transform:translateX(-50%);
  z-index:9999;
  max-width:calc(var(--max-w) - 24px);
  width:calc(100% - 32px);
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  padding:11px 14px;
  border-radius:12px;
  font-size:13px;font-weight:600;
  margin-bottom:7px;
  display:flex;align-items:center;gap:9px;
  box-shadow:var(--shadow-lg);
  animation:slideDown .3s var(--ease-out);
  border:1px solid transparent;
}
.toast > span:first-child{
  flex-shrink:0;
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;
}
.toast-success{
  background:var(--green);color:#fff;
  box-shadow:var(--shadow-green), var(--shadow-md);
}
.toast-success > span:first-child{background:rgba(255,255,255,0.22)}
.toast-error{
  background:var(--x5-red);color:#fff;
  box-shadow:var(--shadow-red-lg), var(--shadow-md);
}
.toast-error > span:first-child{background:rgba(255,255,255,0.22)}
.toast-info{
  background:var(--surface);color:var(--text);
  border-color:var(--border-strong);
}
.toast-info > span:first-child{background:var(--x5-red-soft);color:var(--x5-red)}

/* ===== CART PAGE ========================================================= */
.cart-list{display:flex;flex-direction:column;background:var(--surface);margin:0 14px;border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-xs)}
.cart-store-header{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:var(--bg2);
  font-size:12px;font-weight:700;color:var(--text);
  letter-spacing:-0.005em;
  border-bottom:1px solid var(--border);
}
.cart-item{
  display:flex;gap:10px;
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  align-items:center;
  transition:background .15s var(--ease);
}
.cart-item:last-child{border-bottom:none}
.cart-item:hover{background:var(--x5-red-tint)}

.cart-item-img{
  width:52px;height:52px;
  border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg, var(--bg2), var(--bg));
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-img .no-img{font-size:10px;color:var(--x5-red);font-weight:800;opacity:0.4}

.cart-item-info{flex:1;min-width:0}
.cart-item-name{
  font-size:12px;font-weight:600;color:var(--text);
  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:10px;color:var(--text3);font-weight:500}
.cart-item-actions{display:flex;align-items:center;gap:5px;margin-top:6px}
.cart-item-price{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.cart-item-price .pp{font-size:13px;font-weight:800;letter-spacing:-0.02em}
.cart-item-price .po{font-size:10px;font-weight:500}

/* qty button — outline вариант (для cart, vs solid red на карточке) */
.qty-btn{
  width:26px;height:26px;border-radius:7px;
  border:1.5px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:14px;font-weight:600;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:all .15s var(--ease);
}
.qty-btn:hover{border-color:var(--x5-red);color:var(--x5-red);background:var(--x5-red-tint)}
.qty-btn:active{transform:scale(0.92)}
.qty-btn:disabled{opacity:0.5;cursor:not-allowed}
.qty-val{font-size:12px;font-weight:700;min-width:18px;text-align:center;color:var(--text)}

/* Cart summary */
.cart-summary{
  padding:14px 16px;
  margin:12px 14px 0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
}
.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:800;color:var(--text);
  letter-spacing:-0.02em;
  padding-top:10px;margin-top:6px;
  border-top:1px solid var(--border);
}
.cart-summary-row.total > span:last-child{color:var(--x5-red)}

.cart-actions{padding:12px 14px;display:flex;gap:8px}

/* ===== BUTTONS =========================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 18px;
  border-radius:12px;
  font-size:13px;font-weight:700;
  letter-spacing:-0.005em;
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  user-select:none;
}
.btn:active{transform:scale(0.97)}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none!important;filter:saturate(0.6)}
.btn-full{width:100%}
.btn-sm{padding:8px 13px;font-size:12px;border-radius:9px}

.btn-primary{
  background:linear-gradient(135deg, var(--x5-red), var(--x5-red-deep));
  color:#fff;
  box-shadow:var(--shadow-red);
}
.btn-primary:hover:not(:disabled){
  box-shadow:var(--shadow-red-lg);
  transform:translateY(-2px);
}
.btn-primary:hover:active{transform:scale(0.97)}

.btn-secondary{
  background:var(--surface);color:var(--text);
  border:1.5px solid var(--border-strong);
}
.btn-secondary:hover:not(:disabled){border-color:var(--x5-red);color:var(--x5-red);background:var(--x5-red-tint)}

.btn-danger{background:var(--red-light);color:var(--red);border:1.5px solid transparent}
.btn-danger:hover:not(:disabled){background:var(--red);color:#fff;box-shadow:0 4px 14px rgba(220,38,38,0.30)}

/* ===== CHECKOUT ========================================================== */
.checkout-section{
  padding:14px 14px;
  background:var(--surface);
  margin:8px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.checkout-section:first-of-type{margin-top:12px}
.checkout-section h3{
  font-size:14px;font-weight:700;color:var(--text);
  margin-bottom:11px;letter-spacing:-0.01em;
  display:flex;align-items:center;gap:7px;
}
.checkout-row{
  display:flex;justify-content:space-between;
  padding:5px 0;
  font-size:13px;color:var(--text2);
}
.checkout-row.discount{color:var(--green);font-weight:600}
.checkout-row.total{
  font-size:16px;font-weight:800;color:var(--text);
  letter-spacing:-0.02em;
  padding-top:10px;margin-top:6px;
  border-top:1px solid var(--border);
}
.checkout-row.total > span:last-child{color:var(--x5-red)}

.promo-input{display:flex;gap:7px;margin-top:10px}
.promo-input input{
  flex:1;
  padding:9px 12px;
  border:1.5px solid var(--border-strong);
  border-radius:10px;
  font-size:13px;font-weight:500;
  background:var(--surface);
  outline:none;
  transition:border-color .15s var(--ease), box-shadow .2s var(--ease);
  text-transform:uppercase;letter-spacing:0.05em;
}
.promo-input input::placeholder{text-transform:none;letter-spacing:0;font-weight:400;color:var(--text3)}
.promo-input input:focus{border-color:var(--x5-red);box-shadow:0 0 0 4px rgba(229,25,61,0.10)}

/* Slot / payment cards (radio-style) */
.slot-card,
.payment-card{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 12px;
  border:1.5px solid var(--border);
  border-radius:10px;
  margin-bottom:6px;
  cursor:pointer;
  background:var(--surface);
  transition:all .15s var(--ease);
  position:relative;
}
.slot-card:hover,
.payment-card:hover{border-color:var(--x5-red);background:var(--x5-red-tint)}
.slot-card.selected,
.payment-card.selected{
  border-color:var(--x5-red);
  background:var(--x5-red-tint);
  box-shadow:0 0 0 4px rgba(229,25,61,0.10);
}
.slot-card.selected::after,
.payment-card.selected::after{
  content:'';position:absolute;top:50%;right:12px;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;
  background:linear-gradient(135deg,var(--x5-red),var(--x5-red-deep));
  box-shadow:inset 0 0 0 3px var(--surface);
}
.slot-card .slot-time{font-size:13px;font-weight:600;color:var(--text)}
.slot-card .slot-price{font-size:12px;color:var(--green);font-weight:700;margin-right:28px}
.payment-card{gap:9px}
.payment-card .card-icon{font-size:19px}
.payment-card .card-name{font-size:13px;font-weight:600;color:var(--text);flex:1}
.payment-card input[type="radio"]{display:none}

/* Address form */
.address-form{padding:0;margin-top:6px}
.address-form .form-group{margin-bottom:11px}
.address-form .form-group:last-child{margin-bottom:0}
.address-form label{
  display:block;
  font-size:10px;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:0.05em;
  margin-bottom:6px;
}
.address-form input,
.address-form textarea{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--border-strong);
  border-radius:10px;
  font-size:13px;font-weight:500;color:var(--text);
  background:var(--surface);
  outline:none;
  transition:border-color .15s var(--ease), box-shadow .2s var(--ease);
  resize:none;
}
.address-form input::placeholder,
.address-form textarea::placeholder{color:var(--text3);font-weight:400}
.address-form input:focus,
.address-form textarea:focus{border-color:var(--x5-red);box-shadow:0 0 0 4px rgba(229,25,61,0.10)}

/* Toggle switch */
.toggle-group{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;gap:12px;
  border-top:1px solid var(--border);
}
.toggle-group:first-of-type{border-top:none;padding-top:14px}
.toggle-label{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.toggle-label .tgl-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.3}
.toggle-label .tgl-desc{font-size:11px;color:var(--text3);line-height:1.4}
.toggle-switch{position:relative;width:44px;height:26px;flex-shrink:0;cursor:pointer}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;inset:0;
  background:var(--bg3);
  border-radius:13px;
  transition:background .25s var(--ease);
}
.toggle-slider::before{
  content:'';position:absolute;left:3px;top:3px;
  width:20px;height:20px;
  background:#fff;border-radius:50%;
  transition:transform .25s var(--ease-out);
  box-shadow:0 2px 6px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
}
.toggle-switch input:checked + .toggle-slider{
  background:linear-gradient(135deg,var(--x5-red),var(--x5-red-deep));
  box-shadow:inset 0 1px 3px rgba(189,14,44,0.2);
}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px)}

/* ===== ORDERS ============================================================ */
.orders-container{padding:6px 14px 20px;display:flex;flex-direction:column;gap:8px}
.order-card{
  display:block;
  padding:13px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .15s var(--ease);
  overflow:hidden;
  position:relative;
}
.order-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--border-strong)}
.order-card:active{transform:scale(0.99)}
.order-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:7px}
.order-card-top-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1;overflow:hidden}
.order-number{font-size:13px;font-weight:800;color:var(--text);letter-spacing:-0.01em;white-space:nowrap;flex-shrink:0}
.order-date{font-size:11px;color:var(--text3);white-space:nowrap;flex-shrink:0;font-weight:500}
.order-card-mid{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:7px}
.order-store{
  font-size:12px;color:var(--text2);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.order-items-count{font-size:11px;color:var(--text3);white-space:nowrap;flex-shrink:0;font-weight:500}
.order-card-bottom{display:flex;align-items:center;justify-content:space-between}
.order-total{font-size:16px;font-weight:800;color:var(--x5-red);letter-spacing:-0.02em}
.order-arrow{
  width:16px;height:16px;color:var(--text3);flex-shrink:0;
  transition:transform .2s var(--ease), color .2s var(--ease);
}
.order-card:hover .order-arrow{transform:translateX(3px);color:var(--x5-red)}

/* Status badges */
.order-status{
  font-size:10px;font-weight:700;letter-spacing:0.02em;
  padding:3px 8px;
  border-radius:7px;
  white-space:nowrap;flex-shrink:0;
  text-transform:uppercase;
}
.status-paid,
.status-delivered,
.status-completed{background:var(--green-light);color:var(--green-hover)}
.status-shipped,
.status-delivering,
.status-on_the_way{background:var(--blue-light);color:var(--blue)}
.status-collecting,
.status-assembling,
.status-processing,
.status-pending,
.status-new,
.status-waiting_payment{background:var(--orange-light);color:var(--orange)}
.status-canceled,
.status-cancelled,
.status-failed{background:var(--red-light);color:var(--red)}

/* ===== ORDER DETAIL ====================================================== */
.order-detail-header{
  padding:14px 14px;
  background:linear-gradient(135deg, var(--x5-red-tint), var(--bg));
  border-bottom:1px solid var(--border);
}
.order-detail-header h2{font-size:17px;font-weight:800;color:var(--text);margin-bottom:5px;letter-spacing:-0.02em}
.order-detail-header .meta{font-size:12px;color:var(--text2);font-weight:500}

.detail-section{
  padding:13px;
  background:var(--surface);
  margin:8px 14px;
  border-radius:14px;
  border:1px solid var(--border);
}
.detail-section h3{
  font-size:12px;font-weight:700;
  color:var(--text2);
  text-transform:uppercase;letter-spacing:0.05em;
  margin-bottom:10px;
}
.detail-item{display:flex;gap:10px;padding:7px 0;align-items:center}
.detail-item-img{
  width:42px;height:42px;border-radius:9px;
  overflow:hidden;background:var(--bg2);flex-shrink:0;
  border:1px solid var(--border);
}
.detail-item-img img{width:100%;height:100%;object-fit:cover}
.detail-item-info{flex:1;min-width:0}
.detail-item-name{font-size:12px;font-weight:600;line-height:1.3;color:var(--text)}
.detail-item-qty{font-size:10px;color:var(--text3);margin-top:2px;font-weight:500}
.detail-item-price{font-size:13px;font-weight:700;flex-shrink:0;color:var(--text);letter-spacing:-0.01em}

/* ===== PROFILE (KuperAuto-clean layout, Pyaterochka palette) ============= */
/* Чистая карточка без градиентов: avatar = monotone red-soft пилюля,
   stat-cards = плоские bg2-карточки, menu = list-style без border'ов
   на каждом item — всё как в KuperAuto, только в красной гамме. */
.profile-card{
  padding:20px 14px 18px;
  text-align:center;
  border-bottom:1px solid var(--border);
}
.profile-avatar{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--x5-red-soft);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;
  font-size:24px;font-weight:800;
  color:var(--x5-red);
  letter-spacing:-0.02em;
  line-height:1;
}
.profile-name{font-size:16px;font-weight:700;color:var(--text);margin-bottom:3px;letter-spacing:-0.01em}
.profile-phone{font-size:13px;color:var(--text2);font-weight:500}

.profile-stats{
  display:flex;gap:10px;
  padding:14px;
  border-bottom:1px solid var(--border);
}
.stat-card{
  flex:1;text-align:center;
  padding:12px 10px;
  background:var(--bg2);
  border-radius:13px;
}
.stat-value{
  font-size:19px;font-weight:800;
  color:var(--x5-red);
  margin-bottom:3px;letter-spacing:-0.02em;line-height:1;
}
.stat-label{
  font-size:10px;font-weight:600;color:var(--text3);
  text-transform:uppercase;letter-spacing:0.04em;
}

.profile-menu{padding:6px 0 20px}
.profile-menu-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;
  cursor:pointer;
  transition:background .15s var(--ease);
  color:var(--text);
}
.profile-menu-item:hover{background:var(--bg2)}
.profile-menu-item:active{background:var(--x5-red-tint)}
.profile-menu-item svg{width:19px;height:19px;color:var(--text2);flex-shrink:0}
.profile-menu-item:hover svg{color:var(--x5-red)}
.profile-menu-item span{font-size:13px;font-weight:500;color:var(--text);flex:1}
.profile-menu-item::after{
  content:'';
  width:6px;height:6px;
  border-right:1.5px solid var(--text3);
  border-top:1.5px solid var(--text3);
  transform:rotate(45deg);
  transition:transform .2s var(--ease), border-color .15s var(--ease);
  flex-shrink:0;
}
.profile-menu-item:hover::after{transform:rotate(45deg) translate(2px,-2px);border-color:var(--x5-red)}

/* ===== PROMO CARDS ======================================================= */
.promo-card{
  margin:6px 14px;
  padding:13px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  transition:box-shadow .2s var(--ease), transform .15s var(--ease), border-color .15s var(--ease);
  position:relative;overflow:hidden;
}
.promo-card::before{
  content:'';position:absolute;top:0;left:0;
  width:4px;height:100%;
  background:linear-gradient(180deg, var(--x5-red), var(--x5-red-deep));
  border-radius:2px 0 0 2px;
}
.promo-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--border-strong)}
.promo-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:5px;letter-spacing:-0.01em;padding-left:7px}
.promo-desc{font-size:12px;color:var(--text2);margin-bottom:8px;line-height:1.5;padding-left:7px}
.promo-footer{display:flex;justify-content:space-between;align-items:center;padding-left:7px}
.promo-code{
  font-size:12px;font-weight:800;letter-spacing:0.03em;
  color:var(--x5-red);
  background:var(--x5-red-soft);
  padding:4px 10px;border-radius:7px;
  cursor:pointer;
  font-family:'Inter',monospace;
  transition:background .15s var(--ease), transform .12s var(--ease);
}
.promo-code:hover{background:var(--x5-red);color:#fff;transform:scale(1.02)}
.promo-meta{font-size:10px;color:var(--text3);font-weight:500}

/* ===== ADDRESS CARDS ===================================================== */
.address-card{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background .15s var(--ease);
}
.address-card:hover{background:var(--x5-red-tint)}
.address-card:active{background:var(--x5-red-soft)}
.address-icon{
  width:38px;height:38px;border-radius:10px;
  background:var(--x5-red-soft);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.address-icon svg{width:18px;height:18px;color:var(--x5-red)}
.address-text{flex:1;min-width:0}
.address-main{font-size:13px;font-weight:600;color:var(--text);margin-bottom:1px;letter-spacing:-0.005em}
.address-sub{font-size:11px;color:var(--text3);font-weight:500}

/* ===== MODAL ============================================================= */
.modal-overlay{
  position:fixed;inset:0;
  /* Rose-tinted glass: вместо тяжёлого тёмного overlay даём светлый
     приглушённый pink wash — сохраняет «light feel» приложения. */
  background:rgba(46,18,24,0.36);
  backdrop-filter:blur(8px) saturate(140%);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  z-index:200;
  display:none;align-items:flex-end;justify-content:center;
  animation:fadeIn .2s var(--ease-out);
}
.modal-overlay.active{display:flex}
.modal{
  background:var(--surface);
  border-radius:var(--rxl) var(--rxl) 0 0;
  width:100%;max-width:var(--max-w);
  max-height:88vh;overflow-y:auto;
  animation:slideUp .35s var(--ease-out);
  padding-bottom:env(safe-area-inset-bottom);
  /* Тень — pink-toned, чтобы не было «грязно-серого» rim под bottom-sheet. */
  box-shadow:0 -8px 36px rgba(229,25,61,0.14), 0 -2px 8px rgba(20,5,10,0.04);
  position:relative;
}
.modal::before{
  content:'';
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:40px;height:4px;
  background:var(--border-strong);border-radius:2px;
  opacity:0.75;
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 14px 12px;
  position:sticky;top:0;
  background:var(--surface);
  z-index:1;
  border-bottom:1px solid var(--border);
}
.modal-header h3{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-0.01em}
.modal-close{
  width:30px;height:30px;border-radius:50%;
  background:var(--bg2);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--text2);
  transition:background .15s var(--ease), color .15s var(--ease);
}
.modal-close:hover{background:var(--x5-red-soft);color:var(--x5-red)}
.modal-body{padding:14px}

/* ===== PAGE TITLE / BACK ================================================= */
.page-title{
  padding:16px 14px 8px;
  font-size:18px;font-weight:800;color:var(--text);
  letter-spacing:-0.02em;line-height:1.2;
}
.back-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 14px;
  font-size:12px;font-weight:600;color:var(--text2);
  transition:color .15s var(--ease), transform .15s var(--ease);
}
.back-btn:hover{color:var(--x5-red);transform:translateX(-2px)}
.back-btn svg{width:16px;height:16px}

/* ===== LOGOUT ITEM (отделяем визуально от обычных пунктов) =============== */
.logout-item{
  margin-top:6px;
  border-top:1px solid var(--border);
}
.logout-item span{color:var(--red)!important}
.logout-item svg{color:var(--red)!important}
.logout-item:hover{background:var(--red-light)!important}
.logout-item:hover svg{color:var(--red)!important}
.logout-item::after{border-color:var(--red)!important}

/* ============================================================================
   ADMIN PANEL
   Те же brand-правила, но slightly muted: чтобы admin визуально отличался
   от user-зоны без потери единства. Используем green как primary (а не red),
   чтобы предупредить случайные клики на user-кнопках по привычке.
   ============================================================================ */

.adm-header{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}
.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 var(--ease);
}
.adm-back:hover{background:var(--x5-red-soft)}
.adm-back:hover svg{color:var(--x5-red)}
.adm-back svg{width:16px;height:16px;color:var(--text2);transition:color .15s var(--ease)}
.adm-title{font-size:15px;font-weight:800;flex:1;color:var(--text);letter-spacing:-0.01em}

.adm-nav{
  display:flex;justify-content:space-around;
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--max-w);
  background:rgba(255,255,255,0.94);
  backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-top:1px solid var(--border);
  padding:6px 0 calc(6px + env(safe-area-inset-bottom));
  z-index:100;
}
.adm-ni{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10px;font-weight:600;color:var(--text3);
  padding:5px 12px;border-radius:9px;
  transition:color .15s var(--ease), background .15s var(--ease);
}
.adm-ni svg{width:19px;height:19px}
.adm-ni.on{color:var(--green-hover);background:var(--green-light)}
.adm-ni.on svg{color:var(--green-hover)}

.adm-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:14px}
.adm-stat{
  text-align:center;
  padding:14px 10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:13px;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.adm-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.adm-stat:active{transform:scale(0.97)}
.adm-stat-val{
  font-size:22px;font-weight:800;
  background:linear-gradient(135deg, var(--green), var(--green-hover));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:4px;letter-spacing:-0.03em;line-height:1;
}
.adm-stat-lbl{font-size:9px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:0.05em}

.adm-section{padding:0 14px 14px}
.adm-section-title{
  font-size:10px;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:0.06em;
  margin-bottom:8px;padding-top:14px;
}

.adm-quick{
  display:flex;flex-direction:column;gap:1px;
  background:var(--bg2);
  border-radius:13px;overflow:hidden;
  border:1px solid var(--border);
}
.adm-quick-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;background:var(--surface);
  cursor:pointer;
  transition:background .15s var(--ease);
}
.adm-quick-item:hover{background:var(--bg2)}
.adm-quick-item svg{width:18px;height:18px;color:var(--green);flex-shrink:0}
.adm-quick-item span{font-size:13px;font-weight:600;flex:1;color:var(--text)}
.adm-quick-item .adm-arrow{width:14px;height:14px;color:var(--text3)}
.adm-quick-item:hover .adm-arrow{color:var(--green-hover)}

.adm-recent{display:flex;flex-direction:column;gap:5px}
.adm-recent-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--surface);
  border-radius:10px;border:1px solid var(--border);
  transition:background .15s var(--ease);
}
.adm-recent-item:hover{background:var(--bg2)}
.adm-recent-info{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.adm-recent-id{font-size:12px;font-weight:700;font-family:'JetBrains Mono','SF Mono','Courier New',monospace;color:var(--text);letter-spacing:-0.02em}
.adm-recent-phone{font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.adm-recent-time{font-size:10px;color:var(--text3);flex-shrink:0;font-weight:500}

.adm-user-card{
  display:flex;flex-direction:column;gap:5px;
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background .15s var(--ease);
}
.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;gap:7px}
.adm-user-id{font-size:13px;font-weight:700;font-family:'JetBrains Mono','SF Mono','Courier New',monospace;letter-spacing:-0.02em;color:var(--text)}
.adm-user-mid{font-size:12px;color:var(--text2);font-weight:500}
.adm-user-bot{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text3);font-weight:500}

.adm-role{
  font-size:9px;font-weight:700;
  padding:2px 7px;border-radius:5px;
  text-transform:uppercase;letter-spacing:0.05em;
}
.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:5px;flex-shrink:0}
.adm-dot-on{background:var(--green);box-shadow:0 0 0 2px var(--green-light)}
.adm-dot-off{background:var(--text3);opacity:0.5}

.adm-user-header{
  text-align:center;
  padding:22px 14px;
  background:linear-gradient(180deg, var(--green-light), var(--bg));
  border-bottom:1px solid var(--border);
}
.adm-user-avatar{
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg, var(--green), var(--green-hover));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;
  font-size:20px;font-weight:800;color:#fff;
  font-family:'JetBrains Mono','SF Mono','Courier New',monospace;
  letter-spacing:-0.03em;
  box-shadow:var(--shadow-green);
}
.adm-user-header .adm-user-id{font-size:14px;margin-bottom:5px;font-weight:800}

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

.adm-actions{padding:14px;display:flex;flex-direction:column;gap:8px}
.adm-actions .btn{width:100%}

.adm-owner-card{
  display:flex;align-items:center;gap:12px;
  padding:13px;
  background:linear-gradient(135deg, var(--orange-light), #FFF8E1);
  border:1px solid var(--orange);border-color:rgba(217,119,6,0.25);
  border-radius:13px;
  margin:14px;
}
.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:14px;font-weight:800;font-family:'JetBrains Mono','SF Mono',monospace;color:var(--text);letter-spacing:-0.02em}
.adm-owner-card .adm-owner-lbl{font-size:10px;color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:0.06em}

.adm-admin-card{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--border);
}
.adm-admin-card .adm-admin-icon{font-size:19px;flex-shrink:0}
.adm-admin-card .adm-admin-info{flex:1}
.adm-admin-card .adm-admin-id{font-size:13px;font-weight:700;font-family:'JetBrains Mono','SF Mono',monospace;color:var(--text)}
.adm-admin-card .adm-admin-date{font-size:11px;color:var(--text3);font-weight:500}
.adm-admin-remove{
  padding:6px 10px;
  border-radius:7px;
  font-size:11px;font-weight:700;
  background:var(--red-light);color:var(--red);
  transition:all .15s var(--ease);
}
.adm-admin-remove:hover{background:var(--red);color:#fff;transform:scale(1.04)}

.adm-add-form{
  margin:14px;
  padding:14px;
  border:1.5px dashed var(--border-strong);
  border-radius:13px;
  background:var(--bg2);
}
.adm-add-form label{
  font-size:10px;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:0.05em;
  display:block;margin-bottom:6px;
}
.adm-add-form input{
  width:100%;
  padding:9px 12px;
  border:1.5px solid var(--border-strong);
  border-radius:10px;
  font-size:13px;font-weight:500;background:var(--surface);
  outline:none;
  transition:border-color .15s var(--ease), box-shadow .2s var(--ease);
}
.adm-add-form input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(31,138,61,0.10)}
.adm-add-form button{
  width:100%;margin-top:10px;
  padding:10px;border-radius:10px;
  font-size:13px;font-weight:700;
  background:linear-gradient(135deg, var(--green), var(--green-hover));
  color:#fff;
  box-shadow:var(--shadow-green);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.adm-add-form button:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(31,138,61,0.30)}

.adm-empty{
  text-align:center;padding:30px 14px;
  color:var(--text3);font-size:13px;font-weight:500;
}

.adm-search{padding:10px 14px 6px}
.adm-filters{padding:0 14px 10px}
.adm-count{padding:0 14px 6px;font-size:11px;color:var(--text3);font-weight:500}
.adm-load-more{padding:12px 14px;text-align:center}
.adm-load-more button{
  padding:9px 22px;
  border:1.5px solid var(--border-strong);
  border-radius:10px;
  font-size:12px;font-weight:600;
  background:var(--surface);color:var(--text2);
  transition:all .15s var(--ease);
}
.adm-load-more button:hover{border-color:var(--green);color:var(--green);background:var(--green-pale)}

.adm-avatar{
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg, var(--green), var(--green-hover));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;
  font-size:20px;font-weight:800;color:#fff;
  font-family:'JetBrains Mono','SF Mono',monospace;
  letter-spacing:-0.03em;
  box-shadow:var(--shadow-green);
}
.adm-user-id-large{
  font-size:14px;font-weight:800;
  font-family:'JetBrains Mono','SF Mono',monospace;
  letter-spacing:-0.02em;color:var(--text);
  margin-bottom:5px;
}

/* ===== ADMIN KEYS PAGE =================================================== */
.ak-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 14px}
.ak-stat{
  text-align:center;padding:11px 6px;
  background:var(--surface);
  border:1px solid var(--border);border-radius:10px;
}
.ak-stat-val{
  font-size:18px;font-weight:800;
  background:linear-gradient(135deg, var(--green), var(--green-hover));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:2px;letter-spacing:-0.03em;line-height:1;
}
.ak-stat-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;font-weight:700}
.ak-gen-form{padding:10px 14px;display:flex;flex-direction:column;gap:7px}
.ak-select,
.ak-input{
  padding:9px 12px;
  border:1.5px solid var(--border-strong);
  border-radius:10px;
  font-size:13px;font-weight:500;
  background:var(--surface);outline:none;
  transition:border-color .15s var(--ease), box-shadow .2s var(--ease);
}
.ak-select:focus,
.ak-input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(31,138,61,0.10)}
.ak-result{
  margin:0 14px 12px;padding:12px;
  background:var(--green-pale);
  border:1px solid var(--green-light);
  border-radius:10px;
}
.ak-key-code{
  font-family:'JetBrains Mono','SF Mono','Courier New',monospace;
  font-size:12px;font-weight:700;
  user-select:all;word-break:break-all;cursor:pointer;
  color:var(--green-hover);
  letter-spacing:-0.02em;
}
.ak-card{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border)}
.ak-card-info{flex:1;min-width:0}
.ak-card-id{font-family:'JetBrains Mono','SF Mono',monospace;font-size:11px;color:var(--text2);word-break:break-all;font-weight:600}
.ak-card-meta{font-size:10px;color:var(--text3);margin-top:2px;font-weight:500}
.ak-badge{
  font-size:9px;font-weight:700;
  padding:2px 7px;border-radius:5px;
  text-transform:uppercase;letter-spacing:0.05em;
  flex-shrink:0;
}
.ak-badge-active{background:var(--green-light);color:var(--green-hover)}
.ak-badge-used{background:var(--blue-light);color:var(--blue)}
.ak-badge-expired{background:var(--bg2);color:var(--text3)}
.ak-badge-revoked{background:var(--red-light);color:var(--red)}
.ak-revoke-btn,
.ak-copy-btn{
  padding:5px 9px;
  border-radius:6px;
  font-size:10px;font-weight:700;
  transition:all .15s var(--ease);
}
.ak-revoke-btn{background:var(--red-light);color:var(--red)}
.ak-revoke-btn:hover{background:var(--red);color:#fff}
.ak-copy-btn{background:var(--bg2);color:var(--text2)}
.ak-copy-btn:hover{background:var(--green-light);color:var(--green-hover)}

/* ===== ADMIN SUBSCRIPTIONS =============================================== */
.sub-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:12px 14px}
.sub-stat{
  text-align:center;padding:10px 5px;
  background:var(--surface);
  border:1px solid var(--border);border-radius:9px;
}
.sub-stat-val{
  font-size:16px;font-weight:800;
  background:linear-gradient(135deg, var(--green), var(--green-hover));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:2px;letter-spacing:-0.02em;line-height:1;
}
.sub-stat-lbl{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:0.04em;font-weight:700}
.sub-grant-form{padding:12px 14px;display:flex;flex-direction:column;gap:7px}
.sub-input{
  padding:9px 12px;
  border:1.5px solid var(--border-strong);
  border-radius:10px;
  font-size:13px;font-weight:500;
  background:var(--surface);outline:none;width:100%;
  transition:border-color .15s var(--ease), box-shadow .2s var(--ease);
}
.sub-input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(31,138,61,0.10)}
.sub-input-sm{max-width:140px}
.sub-dur-btns{display:flex;flex-wrap:wrap;gap:5px}
.sub-dur-btn{
  padding:6px 11px;
  border:1.5px solid var(--border);
  border-radius:8px;
  font-size:11px;font-weight:700;
  background:var(--surface);color:var(--text2);
  transition:all .15s var(--ease);
}
.sub-dur-btn:hover:not(.active){border-color:var(--green);color:var(--green)}
.sub-dur-btn.active{
  background:linear-gradient(135deg, var(--green), var(--green-hover));
  color:#fff;border-color:transparent;
  box-shadow:var(--shadow-green);
}
.sub-custom-row{display:flex;gap:7px;align-items:center}
.sub-card{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border)}
.sub-card-info{flex:1;min-width:0}
.sub-card-name{font-size:13px;font-weight:700;color:var(--text)}
.sub-card-meta{font-size:10px;color:var(--text3);margin-top:2px;font-weight:500}
.sub-badge{
  font-size:9px;font-weight:700;
  padding:2px 7px;border-radius:5px;
  text-transform:uppercase;letter-spacing:0.05em;flex-shrink:0;
}
.sub-badge-active{background:var(--green-light);color:var(--green-hover)}
.sub-badge-permanent{background:var(--orange-light);color:var(--orange)}
.sub-badge-expired{background:var(--bg2);color:var(--text3)}
.sub-extend-btn,
.sub-revoke-btn{
  padding:5px 9px;
  border-radius:6px;
  font-size:10px;font-weight:700;
  transition:all .15s var(--ease);
}
.sub-extend-btn{background:var(--bg2);color:var(--text2)}
.sub-extend-btn:hover{background:var(--green-light);color:var(--green-hover)}
.sub-revoke-btn{background:var(--red-light);color:var(--red)}
.sub-revoke-btn:hover{background:var(--red);color:#fff}

/* ===== UTILITY / EDGE CASES ============================================= */
/* iOS форма не зумится при тапе на input если font-size >= 16px;
   мы используем 14px, но устанавливаем `text-size-adjust: 100%` чтобы
   браузер не подменял scale. */
@media (max-width: 480px){
  html{text-size-adjust:100%;-webkit-text-size-adjust:100%}
  /* Inputs: на iOS чтобы не зумилось при focus, поднимаем font-size */
  input,textarea,select{font-size:16px!important}
}

/* Длинные имена товаров: гарантированный wrap */
.pn,.cart-item-name,.detail-item-name,.order-store{overflow-wrap:anywhere}

/* Цифры — табличные, чтобы не «прыгали» при изменении qty */
.pp,.po,.cart-summary-row,.order-total,.stat-value,.qty-val,.detail-item-price{
  font-variant-numeric:tabular-nums;
}

/* Ленивая загрузка картинок: placeholder warm tint вместо серого */
img[loading="lazy"]{background:var(--bg2)}