/* =========================================================
   Premium neo-glass theme (dark default), responsive, Telegram-friendly
   ========================================================= */
:root{
  --bg: #0A0A0C;
  --bg2: #0C0D12;
  --card: rgba(255,255,255,.05);
  --card2: rgba(255,255,255,.07);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.14);
  --text: #FFFFFF;
  --muted: rgba(255,255,255,.68);
  --muted2: rgba(255,255,255,.55);
  --accent: #7C6A8A;
  --accent2: #6C5B7B;
  --pill: rgba(210, 200, 255, .16);
  --pillActive: rgba(210, 200, 255, .28);
  --success: #2ECC71;
  --danger: #ff5b5b;

  --radius-xl: 20px;
  --radius-2xl: 26px;

  --shadow: 0 14px 50px rgba(0,0,0,.55);
  --shadowSoft: 0 12px 32px rgba(0,0,0,.40);

  --blur: 16px;

  --container: 1080px;
  --pad: 28px;
  --padMobile: 18px;

  --navH: 74px;
  --topH: 64px;
  --tap: 44px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

[data-theme="light"]{
  --bg: #F6F7FB;
  --bg2: #FFFFFF;
  --card: rgba(0,0,0,.04);
  --card2: rgba(0,0,0,.06);
  --stroke: rgba(0,0,0,.10);
  --stroke2: rgba(0,0,0,.14);
  --text: #0B0B10;
  --muted: rgba(0,0,0,.65);
  --muted2: rgba(0,0,0,.48);
  --pill: rgba(124, 106, 138, .12);
  --pillActive: rgba(124, 106, 138, .20);
  --shadow: 0 14px 40px rgba(0,0,0,.15);
  --shadowSoft: 0 12px 28px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1100px 650px at 50% 15%, rgba(124,106,138,.23), transparent 58%),
              radial-gradient(900px 500px at 70% 60%, rgba(108,91,123,.18), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

.bg-glow{
  position:fixed; inset:0;
  pointer-events:none;
  background: radial-gradient(900px 560px at 50% 22%, rgba(255,255,255,.06), transparent 60%);
  mix-blend-mode: overlay;
  opacity:.7;
}

.app{
  min-height:100%;
  padding-bottom: calc(var(--navH) + env(safe-area-inset-bottom));
}

.topbar{
  height: calc(var(--topH) + env(safe-area-inset-top));
  padding: calc(10px + env(safe-area-inset-top)) var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:50;
  background: linear-gradient(180deg, rgba(10,10,12,.72), rgba(10,10,12,.25), transparent);
  backdrop-filter: blur(10px);
}

.topbar__left, .topbar__right{display:flex; align-items:center; gap:10px;}
.icon-btn{
  height: var(--tap);
  padding:0 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
}
.icon-btn svg{width:18px; height:18px}
.icon-btn:hover{transform: translateY(-1px); color: var(--text)}
.icon-btn--ghost:hover{background: rgba(255,255,255,.06); border-color: var(--stroke);}
.icon-btn__text{font-size:13px; font-weight:600; letter-spacing:.1px}
.hide{display:none !important}

.pill-btn{
  height: var(--tap);
  padding:0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.pill-btn--theme{
  width: var(--tap);
  padding:0;
  justify-content:center;
  background: rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.14);
}
[data-theme="light"] .pill-btn--theme{
  background: rgba(10,10,12,.92);
  border-color: rgba(0,0,0,.18);
  color: #fff;
}
.pill-btn--theme:hover{transform: translateY(-1px); filter: brightness(1.06);}

.pill-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: var(--stroke2)}
.pill-btn__text{font-weight:700; font-size:12px; letter-spacing:.5px}
.pill-btn__icon{opacity:.9; display:inline-flex; align-items:center; justify-content:center; line-height:1}

.view{
  width:min(var(--container), calc(100% - 2*var(--pad)));
  margin: 10px auto 0;
  padding-bottom: 22px;
}

@media (max-width: 720px){
  .topbar{padding-left: var(--padMobile); padding-right: var(--padMobile);}
  .view{width: calc(100% - 2*var(--padMobile));}
  .icon-btn__text{display:none}
}

/* Glass card */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadowSoft);
  backdrop-filter: blur(var(--blur));
}

.card{
  border-radius: var(--radius-2xl);
  overflow:hidden;
}
.card__body{padding:18px}

.h1{
  font-size: clamp(36px, 4vw, 56px);
  line-height:1.05;
  letter-spacing: -1.2px;
  margin: 24px 0 8px;
}
.sub{
  margin:0 0 22px;
  color: var(--muted);
  font-size: 14px;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.badge--success{
  background: rgba(46, 204, 113, .14);
  border-color: rgba(46, 204, 113, .35);
  color: #d9ffe8;
}
.badge--platform{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.86);
  font-weight: 800;
}

.kicker{
  font-size:12px;
  color: var(--muted2);
  margin:0 0 6px;
}
.row{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.stack{display:flex; flex-direction:column; gap:14px}
.grid{
  display:grid;
  gap:16px;
}

/* Catalog */
.catalog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.catalog-title{
  display:flex;
  align-items:center;
  gap:12px;
}
.counter{
  width:28px; height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  font-weight:800;
  font-size:12px;
  color: var(--text);
}

.products{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 8px;
}
@media (max-width: 1024px){
  .products{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 720px){
  .products{grid-template-columns: 1fr;}
}

.product-card{
  position:relative;
  border-radius: var(--radius-2xl);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer;
}
.product-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--stroke2);
}
.product-card__media{
  height: 180px;
  border-bottom: 1px solid var(--stroke);
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:14px;
}
.product-card__media::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(320px 160px at 50% 70%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}
.product-card__badgeL{position:absolute; top:12px; left:12px;}
.product-card__badgeR{position:absolute; top:12px; right:12px;}
.product-card__logo{
  position:relative;
  display:flex;
  gap:10px;
  align-items:center;
  z-index:2;
}
.logoMark{
  width:46px; height:46px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.logoMark svg{width:26px; height:26px; opacity:.9}
.product-card__nameBig{
  font-weight:900;
  font-size: 22px;
  letter-spacing: -.4px;
}
.product-card__body{
  padding:16px;
}
.product-card__title{
  font-weight:800;
  font-size: 16px;
  margin:0 0 10px;
}
.priceRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.price{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted2);
}
.price b{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 22px;
  letter-spacing:-.3px;
  color: var(--text);
  font-weight:900;
}

.btn{
  height: 44px;
  padding:0 14px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  text-decoration:none;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: var(--stroke2)}
.btn--primary{
  background: rgba(210, 200, 255, .22);
  border-color: rgba(210, 200, 255, .35);
}
.btn--primary:hover{background: rgba(210, 200, 255, .28)}
.btn--ghost{
  background: transparent;
  border-color: var(--stroke);
  color: var(--muted);
}
.btn--ghost:hover{color: var(--text); background: rgba(255,255,255,.06)}
.btn--full{width:100%}
.btn__icon svg{width:18px; height:18px}

/* Mobile catalog button style */
@media (max-width: 720px){
  .btn--buyText{display:none}
  .btn--buyIconOnly{
    width:44px;
    padding:0;
    border-radius:999px;
  }
}

/* Details */
.details-grid{
  display:grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 18px;
  margin-top: 8px;
}
@media (max-width: 920px){
  .details-grid{grid-template-columns:1fr;}
}
.media-big{
  height: 340px;
  border-radius: var(--radius-2xl);
  overflow:hidden;
  position:relative;
  border: 1px solid var(--stroke);
}
.media-big__inner{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size: 22px;
  opacity:.9;
}
.media-big__overlay{
  position:absolute; inset:0;
  background: radial-gradient(620px 280px at 50% 70%, rgba(255,255,255,.12), transparent 60%);
}
.details-titleRow{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.h2{
  font-size: clamp(30px, 3.2vw, 44px);
  margin:0;
  letter-spacing:-.9px;
}
.section{
  margin-top: 18px;
}
.h3{
  font-size: 16px;
  margin:0 0 10px;
}
.list{
  display:grid;
  gap:10px;
}
.list__item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
}
.list__item span{color: var(--muted)}
.list__item b{font-weight:900}

.variant{
  padding: 14px;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.variant:hover{transform: translateY(-1px); border-color: var(--stroke2)}
.variant--active{
  border-color: rgba(210, 200, 255, .45);
  background: rgba(210, 200, 255, .12);
}
.variant__left{display:flex; flex-direction:column; gap:6px}
.variant__name{font-weight:900}
.variant__price{font-family: var(--mono); font-weight:900; font-size:20px}
.variant__radio{
  width:18px; height:18px;
  border-radius:999px;
  border:1.8px solid rgba(255,255,255,.35);
  display:grid;
  place-items:center;
}
.variant--active .variant__radio{border-color: rgba(210,200,255,.75)}
.variant__radio::after{
  content:"";
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(210,200,255,.75);
  opacity:0;
}
.variant--active .variant__radio::after{opacity:1}

/* Checkout */
.checkout-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:18px;
  margin-top: 10px;
}
@media (max-width: 920px){
  .checkout-grid{grid-template-columns:1fr;}
}
.pay-methods{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 520px){
  .pay-methods{grid-template-columns:1fr;}
}
.pay-method{
  padding: 14px;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}
.pay-method--active{
  background: rgba(210, 200, 255, .10);
  border-color: rgba(210, 200, 255, .35);
}
.pay-method__left{display:flex; align-items:center; gap:10px}
.pay-method__icon{
  width:34px; height:34px;
  border-radius: 14px;
  display:grid; place-items:center;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
}
.pay-method__name{font-weight:900}
.pay-method__fee{font-size:12px; color: var(--muted2); font-family: var(--mono);}

.field{
  width:100%;
  height: 44px;
  padding:0 14px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline:none;
}

.field--sm{ padding:10px 12px; font-size:14px; }

.mod-toolbar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.mod-toolbar__left,.mod-toolbar__right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.status-chip{
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  white-space:nowrap;
}
body.light .status-chip{ border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.04); }

/* Status accents */
.status-chip[data-status="paid"]{ background: rgba(0,160,255,.12); border-color: rgba(0,160,255,.25); }
.status-chip[data-status="assigned"],.status-chip[data-status="in_progress"]{ background: rgba(255,170,0,.14); border-color: rgba(255,170,0,.28); }
.status-chip[data-status="need_info"]{ background: rgba(255,0,120,.12); border-color: rgba(255,0,120,.26); }
.status-chip[data-status="done"]{ background: rgba(0,220,120,.14); border-color: rgba(0,220,120,.28); }
.status-chip[data-status="canceled"]{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); opacity:.9; }
body.light .status-chip[data-status="canceled"]{ background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.14); }
.field::placeholder{color: rgba(255,255,255,.35)}
.field:focus{border-color: rgba(210,200,255,.45)}

.switchRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
.switch{
  width:44px; height:24px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  position:relative;
  cursor:pointer;
}
.switch::after{
  content:"";
  position:absolute;
  width:18px; height:18px;
  border-radius:999px;
  left:3px; top:2px;
  background: rgba(255,255,255,.55);
  transition: transform .14s ease, background .14s ease;
}
.switch[data-on="1"]{background: rgba(46,204,113,.12); border-color: rgba(46,204,113,.35)}
.switch[data-on="1"]::after{transform: translateX(20px); background: rgba(46,204,113,.85)}

.summary{
  padding: 16px;
  border-radius: var(--radius-2xl);
}
.summaryRow{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 8px 0;
}
.hr{
  height:1px; width:100%;
  background: var(--stroke);
  margin: 10px 0;
}
.bigMoney{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing:-.6px;
}

/* Profile */
.profile-grid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:18px;
  margin-top: 12px;
}
@media (max-width: 920px){
  .profile-grid{grid-template-columns:1fr;}
}
.avatar{
  width:66px; height:66px;
  border-radius: 22px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  overflow:hidden;
}
.avatar img{width:100%; height:100%; object-fit:cover}
.userName{font-size: 18px; font-weight: 900; margin-top: 10px}
.userHandle{color: var(--muted2); font-size: 13px; margin-top: 4px}
.stats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top: 14px;
}
.stat{
  padding: 14px;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  gap:10px;
}
.stat__icon{
  width:34px; height:34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid var(--stroke);
}
.stat__label{font-size: 11px; color: var(--muted2); text-transform:uppercase; letter-spacing:.7px}
.stat__value{font-weight:900; font-size: 18px; margin-top: 2px}
.purchasesEmpty{
  border:1px dashed rgba(255,255,255,.18);
  border-radius: var(--radius-2xl);
  padding: 26px;
  min-height: 210px;
  display:grid;
  place-items:center;
  text-align:center;
  background: rgba(255,255,255,.03);
}
.purchasesEmpty svg{width:46px; height:46px; opacity:.55}
.purchasesEmpty .btn{margin-top: 10px}
.purchaseList{display:grid; gap:12px}

/* Admin: products grid */
.adminProductsControls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.adminProductsControls .field{flex: 1 1 220px;}
.adminProdGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 820px){
  .adminProdGrid{grid-template-columns: 1fr;}
}
.adminProdCard{
  border-radius: var(--radius-2xl);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.adminProdCard__cover{
  height: 120px;
  background-size: cover;
  background-position: center;
}
.adminProdCard__body{ padding: 14px; display:flex; flex-direction:column; gap:10px; }
.adminProdCard__title{ font-weight: 900; line-height: 1.2; }
.adminProdCard__meta{ color: var(--muted2); font-size: 12px; }
.adminProdCard__actions{ display:flex; gap: 10px; flex-wrap:wrap; }

/* Admin: topups list */
.adminTopupList{ display:grid; gap: 10px; }
.adminTopupRow{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.adminTopupRow__left{ display:flex; gap: 12px; align-items:center; }
.adminTopupRow__right{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }
.purchase{
  padding: 14px;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.purchase__left{display:flex; flex-direction:column; gap:6px}
.purchase__title{font-weight:900}
.purchase__meta{color: var(--muted2); font-size: 12px}
.purchase__right{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.link{
  color: rgba(210,200,255,.95);
  font-weight:800;
  text-decoration:none;
}
.link:hover{text-decoration:underline}

/* Info tiles */
.tiles{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top: 10px;
}
@media (max-width: 820px){
  .tiles{grid-template-columns:1fr;}
}
.tile{
  padding: 18px;
  border-radius: var(--radius-2xl);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
  text-decoration:none;
  color: var(--text);
}
.tile:hover{transform: translateY(-1px); border-color: var(--stroke2); background: rgba(255,255,255,.05)}
.tile__left{display:flex; align-items:center; gap:12px}
.tile__icon{
  width:40px; height:40px;
  border-radius: 16px;
  display:grid; place-items:center;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
}
.tile__title{font-weight:900}
.tile__sub{color: var(--muted2); font-size: 12px; margin-top: 4px}
.chev{opacity:.7}
.chev svg{width:18px; height:18px}

/* Reviews */
.stars{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.starBtn{
  width: 20px; height:20px;
  background:none; border:none; padding:0; cursor:pointer;
  color: rgba(255,255,255,.28);
  touch-action: manipulation;
}

@media (max-width: 480px){
  .starBtn{ width: 32px; height: 32px; }
}
.starBtn[data-on="1"]{color: rgba(210,200,255,.95)}
.reviewBox{
  margin-top: 12px;
  padding: 16px;
  border-radius: var(--radius-2xl);
}
textarea.field{height: 110px; padding-top: 12px}

/* Bottom nav */
.bottom-nav{
  position:fixed;
  left:50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(520px, calc(100% - 2*var(--padMobile)));
  height: var(--navH);
  border-radius: 22px;
  padding: 10px;
  display:flex;
  gap: 10px;
  z-index:60;

  background: rgba(15,16,22,.62);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
}
[data-theme="light"] .bottom-nav{
  background: rgba(255,255,255,.75);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.bottom-nav__item{
  flex:1;
  border:none;
  border-radius: 18px;
  background: transparent;
  color: var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.bottom-nav__item:hover{transform: translateY(-1px); color: var(--text)}
.bottom-nav__item.is-active{
  background: var(--pillActive);
  color: var(--text);
}
.bottom-nav__icon svg{width: 18px; height:18px}
.bottom-nav__text{font-weight:900; font-size: 13px}
@media (max-width: 520px){
  .bottom-nav__text{display:none}
  .bottom-nav{width: min(420px, calc(100% - 2*var(--padMobile)));}
}

/* Toast */
.toast-host{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--navH) + 22px + env(safe-area-inset-bottom));
  z-index: 80;
  display:grid;
  gap: 10px;
  width: min(520px, calc(100% - 2*var(--padMobile)));
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.toast__text{font-weight:800}
.toast__sub{color: var(--muted2); font-size: 12px; margin-top: 4px}
.toast__x{
  width:34px; height:34px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
}

/* Bottom sheet */
.sheet{position:fixed; inset:0; z-index:100; display:none}
.sheet[aria-hidden="false"]{display:block}
.sheet__backdrop{position:absolute; inset:0; background: rgba(0,0,0,.45)}
.sheet__panel{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(520px, calc(100% - 2*var(--padMobile)));
  border-radius: 24px;
  padding: 12px 12px 14px;
}
.sheet__grab{width: 44px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.22); margin: 4px auto 10px;}
.sheet__content{padding: 6px 8px 6px}
.sheet__actions{display:grid; gap:10px; margin-top: 10px}
.muted{color: var(--muted)}
.small{font-size: 12px}

.mini-ico{ width:18px; height:18px; display:inline-block; vertical-align:-3px; opacity:.85; }

/* Utility */
.mt8{margin-top:8px}
.mt12{margin-top:12px}
.mt18{margin-top:18px}
.mt24{margin-top:24px}


/* === Product images (covers) === */
.product-card__media{
  position: relative;
  overflow: hidden;
}
.product-card__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.03);
}
.product-card__shade{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(10,10,12,0.05) 0%, rgba(10,10,12,0.55) 68%, rgba(10,10,12,0.85) 100%);
}
.product-card__badgeL, .product-card__badgeR{
  position:absolute;
  z-index:2;
}

.media-big{
  position: relative;
  overflow: hidden;
}
.media-big__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
}
.media-big__overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(60% 60% at 40% 35%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 55%),
              linear-gradient(180deg, rgba(10,10,12,0.10) 0%, rgba(10,10,12,0.45) 60%, rgba(10,10,12,0.80) 100%);
  pointer-events:none;
}



[data-theme="light"] body{
  background: radial-gradient(1100px 650px at 50% 15%, rgba(124,106,138,.10), transparent 58%),
              radial-gradient(900px 500px at 70% 60%, rgba(108,91,123,.08), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2));
}
[data-theme="light"] .bg-glow{opacity:.35; mix-blend-mode: normal; background: radial-gradient(900px 560px at 50% 22%, rgba(124,106,138,.10), transparent 60%);}


@keyframes fadeInUp{
  from{opacity:0; transform: translateY(6px);}
  to{opacity:1; transform: translateY(0);}
}
.view--fade{animation: fadeInUp .22s ease both;}

/* Light theme refinements */
[data-theme="light"] body{
  background: radial-gradient(1100px 650px at 50% 15%, rgba(124,106,138,.10), transparent 60%),
              radial-gradient(900px 500px at 70% 65%, rgba(108,91,123,.08), transparent 58%),
              linear-gradient(180deg, var(--bg), var(--bg2));
}
[data-theme="light"] .bg-glow{
  background: radial-gradient(900px 560px at 50% 22%, rgba(0,0,0,.06), transparent 62%);
  opacity:.55;
}

@keyframes viewFade{from{opacity:0; transform: translateY(6px);}to{opacity:1; transform:none;}}

/* --- Carousel (product images) --- */
.carousel{ position: relative; width:100%; height:100%; }
.carousel__img{ width:100%; height:100%; object-fit: cover; display:block; }
.carousel__img--big{ border-radius: 22px; }
.carousel__btn{
  position:absolute; top:50%; transform: translateY(-50%);
  width:34px; height:34px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,12,.35);
  color: rgba(255,255,255,.92);
  display:grid; place-items:center;
  cursor:pointer;
  backdrop-filter: blur(10px);
}
.carousel__btn--left{ left:10px; }
.carousel__btn--right{ right:10px; }
.carousel__dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; justify-content:center; gap:6px;
}
.carousel__dot{
  width:8px; height:8px; border-radius: 999px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.10);
}
.carousel__dot[data-on="1"]{ background: rgba(255,255,255,.72); }

/* Pay modal tweaks */
#payModal .sheet__content{ max-height: 72vh; overflow:auto; }

/* stars buttons */
.starBtn{
  width:34px; height:34px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,12,.35);
  color: rgba(255,255,255,.45);
  cursor:pointer;
  touch-action: manipulation;
}
.starBtn[data-on="1"]{ color: rgba(255,255,255,.95); }

@media (max-width: 520px){
  .stars{ gap: 8px; }
  .starBtn{ width: 40px; height: 40px; border-radius: 14px; }
}


/* Filter chips */
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.catRow{ display:flex; gap: 10px; flex-wrap: wrap; }
.btn--chip.is-active{ border-color: rgba(210,200,255,.55) !important; box-shadow: 0 0 0 2px rgba(210,200,255,.15) inset; }
.btn--chip{ padding:10px 14px; border-radius:999px; }
.btn--chip.is-active{ outline: 2px solid rgba(255,255,255,.25); }

/* Carousel arrows ensure visible */
.carousel__btn{ opacity: 0.92; }
.carousel__btn:hover{ opacity: 1; }


/* Filters modal */
.filters-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
  z-index: 1000;
}
.filters-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.filters-modal__card{
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  transform: translateY(12px);
  transition: transform .16s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.filters-modal.is-open .filters-modal__card{
  transform: translateY(0);
}
.filters-modal__title{
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 10px;
}
.filters-modal__row{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
}
.filters-modal__label{
  color: var(--muted);
  font-size: 13px;
}
.filters-modal__select{
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
  outline: none;
}
.filters-modal__actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

/* Reviews modal */
.reviews-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
  z-index: 1100;
}
.reviews-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.reviews-modal__card{
  width: 100%;
  max-width: 520px;
  background: rgba(15,16,22,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 14px;
  transform: translateY(14px);
  transition: transform .16s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);

  /* Prevent "jumping" on mobile when the keyboard opens.
     The card becomes a scroll container and stays within viewport height. */
  max-height: calc(100vh - 32px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
[data-theme="light"] .reviews-modal__card{
  background: rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.08);
}
.reviews-modal.is-open .reviews-modal__card{ transform: translateY(0); }
.reviews-modal__top{ display:flex; justify-content:flex-start; }
.reviewsModal__hero{ padding: 6px 6px 0 6px; }
.reviewsModal__title{ font-weight: 900; font-size: 34px; letter-spacing: -0.02em; }
.reviewsModal__sub{ color: var(--muted); margin-top: 6px; }

.reviewsStats{
  margin-top: 14px;
  border-radius: 22px;
  padding: 18px;
  display:grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items:center;
}
.reviewsStats__divider{ width:1px; height: 56px; background: rgba(255,255,255,.12); justify-self:center; }
[data-theme="light"] .reviewsStats__divider{ background: rgba(0,0,0,.08); }
.reviewsStats__big{ font-size: 34px; font-weight: 900; letter-spacing: -0.02em; }
.reviewsStats__small{ color: var(--muted); margin-top: 6px; font-size: 13px; }

.reviewsList{ margin-top: 14px; display:grid; gap: 12px; max-height: min(62vh, 520px); overflow:auto; padding-right: 4px; }
.reviewCard{ border-radius: 22px; padding: 14px; }
.reviewCard__head{ display:flex; gap: 12px; align-items:center; }
.reviewCard__avatar{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  display:grid;
  place-items:center;
  font-weight: 900;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}
[data-theme="light"] .reviewCard__avatar{ background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.08); }
.reviewAvatarImg{ width:100%; height:100%; border-radius: 50%; object-fit: cover; display:block; }
.reviewCard__name{ font-weight: 900; }
.reviewCard__date{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.reviewCard__rating{ margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap: 10px; flex-wrap: wrap; max-width: 46%; }
.rStars{ display:flex; gap: 4px; flex-wrap: nowrap; line-height: 1; }
.rStar{ color: rgba(255,255,255,.25); font-size: 12px; line-height: 1; }
.rStar.is-on{ color: rgba(210,200,255,.95); }
[data-theme="light"] .rStar{ color: rgba(0,0,0,.18); }
[data-theme="light"] .rStar.is-on{ color: rgba(99,102,241,.95); }
.reviewCard__score{ font-weight: 900; font-size: 12px; }
.reviewCard__text{ margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); line-height: 1.45; }
[data-theme="light"] .reviewCard__text{ background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.06); }

.reviewsActions{ margin-top: 14px; padding-bottom: 4px; }

@media (max-width: 420px){
  .reviewsModal__title{ font-size: 28px; }
  .reviewCard__head{ align-items:flex-start; }
  .reviewCard__rating{ margin-left: 0; max-width: none; justify-content:flex-start; }
  .reviewsList{ padding-right: 0; }
}

.reviews-modal--inner{ z-index: 1200; }
.reviews-modal__card--inner{ max-width: 520px; }

/* Lock background scroll when a modal is open */
body.modal-open{ overflow: hidden; }

/* Inner (leave review) modal behaves more like a centered dialog */
.reviews-modal.reviews-modal--inner{ align-items: center; }

/* Protection overlay (best-effort, not DRM) */


/* Admin tabs */
.admin-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 10px 0;
  backdrop-filter: blur(12px);
}
.admin-tab{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
}
.admin-tab__icon{display:inline-flex; align-items:center; justify-content:center; opacity:.95}
.admin-tab__text{font-weight:900; font-size:12px; letter-spacing:.25px}
.admin-tab.is-active{
  background: linear-gradient(180deg, rgba(167,139,250,.35), rgba(99,102,241,.25));
  border-color: rgba(167,139,250,.35);
}

@media (max-width: 520px){
  .admin-tabs{ flex-wrap: nowrap; overflow:auto; padding-bottom: 12px; }
  .admin-tab{ flex: 0 0 auto; }
}


/* line icons */
.ico-img{width:18px;height:18px;display:inline-block;vertical-align:middle;opacity:.95;flex:0 0 auto;}
.ico-img--sm{width:16px;height:16px;}
.ico-img--lg{width:20px;height:20px;}
[data-theme="dark"] .ico-img{filter: invert(1) brightness(1.05);}