/* ═══════════════════════════════════
   SUBSTORE — CSS
   Dark + Light theme, no emojis
═══════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── TOKENS ── */
:root {
  --accent:    #6C63FF;
  --accent2:   #FF6584;
  --price:     #22D3A0;
  --card-r:    16px;
  --trans:     0.22s ease;

  /* DARK */
  --bg:        #0E0E12;
  --bg2:       #161620;
  --bg3:       #1E1E2C;
  --surface:   #1A1A28;
  --border:    rgba(255,255,255,0.07);
  --text:      #F0F0F8;
  --text2:     #9090B8;
  --text3:     #6060A0;
  --chip-bg:   #1E1E2C;
  --chip-text: #9090B8;
  --chip-act:  #6C63FF;
  --chip-act-t:#fff;
  --shadow:    rgba(0,0,0,0.5);
  --header-bg: rgba(14,14,18,0.92);
  --nav-bg:    rgba(14,14,18,0.96);
}

body.light {
  --bg:        #F2F2F7;
  --bg2:       #FFFFFF;
  --bg3:       #E8E8F0;
  --surface:   #FFFFFF;
  --border:    rgba(0,0,0,0.08);
  --text:      #0E0E1A;
  --text2:     #6060A0;
  --text3:     #A0A0C0;
  --chip-bg:   #E8E8F0;
  --chip-text: #6060A0;
  --shadow:    rgba(100,100,150,0.12);
  --header-bg: rgba(242,242,247,0.92);
  --nav-bg:    rgba(242,242,247,0.96);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { display:block; width:100%; height:100%; object-fit:cover; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* ── HEADER ── */
.header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--header-bg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.header-inner {
  max-width:480px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
}
.logo { display:flex; align-items:center; gap:10px; }
.logo-mark {
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:900; color:#fff;
  flex-shrink:0;
}
.logo-text { display:flex; flex-direction:column; line-height:1.1; }
.logo-name { font-size:15px; font-weight:800; color:var(--text); }
.logo-tag  { font-size:11px; font-weight:500; color:var(--text2); }
.header-right { display:flex; align-items:center; gap:8px; }
.theme-toggle {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text2); background:var(--bg3);
  transition:var(--trans);
}
.theme-toggle:hover { background:var(--accent); color:#fff; }
.live-badge {
  padding:5px 10px; border-radius:20px; font-size:11px; font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; letter-spacing:0.2px;
}

/* ── MAIN ── */
.main { padding-top:64px; }

/* ── HERO ── */
.hero {
  position:relative; overflow:hidden;
  padding:32px 16px 28px;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
}
.hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% -20%, rgba(108,99,255,0.18), transparent),
             radial-gradient(ellipse 60% 40% at 90% 100%, rgba(255,101,132,0.1), transparent);
}
.hero-content { position:relative; max-width:480px; margin:0 auto; }
.hero-label {
  display:inline-block; margin-bottom:12px;
  padding:5px 12px; border-radius:20px;
  border:1px solid rgba(108,99,255,0.35);
  font-size:12px; font-weight:600; color:var(--accent);
  background:rgba(108,99,255,0.08);
}
.hero-title {
  font-size:clamp(28px,8vw,40px); font-weight:900; line-height:1.1;
  color:var(--text); margin-bottom:10px;
}
.hero-accent {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { font-size:14px; color:var(--text2); margin-bottom:22px; line-height:1.5; }

/* TIMER */
.timer-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:14px; padding:14px 16px; margin-bottom:20px;
}
.timer-label { font-size:11px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
.timer-row { display:flex; align-items:center; gap:6px; }
.timer-unit { flex:1; text-align:center; }
.timer-unit span {
  display:block; font-size:clamp(22px,6vw,32px); font-weight:900;
  color:var(--text); line-height:1;
  font-variant-numeric:tabular-nums;
}
.timer-unit small { font-size:10px; color:var(--text3); font-weight:500; }
.timer-dot { font-size:24px; font-weight:900; color:var(--accent); line-height:1; padding-bottom:14px; }

/* STATS */
.hero-stats {
  display:flex; align-items:center; justify-content:space-around;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:14px; padding:14px;
}
.hero-stat { text-align:center; }
.stat-val { font-size:22px; font-weight:900; color:var(--text); }
.stat-key { font-size:11px; color:var(--text2); font-weight:500; margin-top:2px; }
.stat-sep { width:1px; height:32px; background:var(--border); }

/* ── FILTERS ── */
.filters-wrap { background:var(--bg2); border-bottom:1px solid var(--border); sticky: top; position:sticky; top:64px; z-index:90; }
.filters { display:flex; gap:8px; padding:10px 16px; overflow-x:auto; scrollbar-width:none; }
.filters::-webkit-scrollbar { display:none; }
.chip {
  flex-shrink:0; padding:7px 16px; border-radius:20px;
  font-size:13px; font-weight:600;
  background:var(--chip-bg); color:var(--chip-text);
  border:1px solid var(--border);
  transition:var(--trans);
}
.chip.active { background:var(--chip-act); color:var(--chip-act-t); border-color:var(--chip-act); }

/* ── CATALOG ── */
.catalog { max-width:480px; margin:0 auto; padding:16px 12px; }
.catalog-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding:0 4px; }
.catalog-title { font-size:18px; font-weight:800; color:var(--text); }
.catalog-count { font-size:12px; font-weight:600; color:var(--text3); }

/* ── GRID ── */
.grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ── CARD ── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--card-r); overflow:hidden;
  position:relative; cursor:pointer;
  transition:transform var(--trans), box-shadow var(--trans);
  box-shadow:0 2px 12px var(--shadow);
  will-change:transform;
}
.card:active { transform:scale(0.97); }
.card.hidden { display:none; }

.card-badge {
  position:absolute; top:8px; left:8px; z-index:3;
  padding:3px 8px; border-radius:8px;
  font-size:10px; font-weight:700; letter-spacing:0.2px;
  backdrop-filter:blur(8px);
}
.card-badge.new   { background:rgba(108,99,255,0.85); color:#fff; }
.card-badge.pop   { background:rgba(255,101,132,0.85); color:#fff; }
.card-badge.hot   { background:rgba(255,160,50,0.9);   color:#fff; }
.card-badge.low   { background:rgba(255,80,80,0.85);   color:#fff; }
.card-badge.today { background:rgba(34,211,160,0.9);   color:#000; }

.card-img { position:relative; height:110px; overflow:hidden; }
.card-img img { transition:transform 0.4s ease; }
.card:hover .card-img img { transform:scale(1.05); }
.card-img-fade {
  position:absolute; bottom:0; left:0; right:0; height:50%;
  background:linear-gradient(to top, var(--surface), transparent);
}

.card-info { padding:10px 10px 12px; }
.card-head { margin-bottom:3px; }
.card-svc { font-size:13px; font-weight:700; color:var(--text); display:block; }
.card-desc { font-size:11px; color:var(--text2); line-height:1.4; margin-bottom:10px; }
.card-bottom { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.price-block { display:flex; flex-direction:column; gap:1px; }
.price-old { font-size:10px; color:var(--text3); text-decoration:line-through; }
.price-new { font-size:16px; font-weight:900; color:var(--price); }
.card-cta {
  padding:7px 12px; border-radius:10px; font-size:12px; font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; white-space:nowrap; flex-shrink:0;
  transition:opacity var(--trans);
}
.card-cta:active { opacity:0.8; }

/* ── BOTTOM NAV ── */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:var(--nav-bg); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
  display:flex; align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; padding:10px 0;
  color:var(--text3); font-size:11px; font-weight:500;
  transition:color var(--trans);
  position:relative;
}
.nav-item.active { color:var(--accent); }
.nav-item svg { transition:transform var(--trans); }
.nav-item.active svg { transform:scale(1.1); }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0); backdrop-filter:blur(0px);
  pointer-events:none; transition:background 0.3s, backdrop-filter 0.3s;
}
.modal-overlay.open {
  background:rgba(0,0,0,0.65); backdrop-filter:blur(6px);
  pointer-events:all;
}
.modal {
  position:absolute; bottom:0; left:0; right:0;
  max-width:480px; margin:0 auto;
  background:var(--bg2); border-radius:24px 24px 0 0;
  overflow:hidden; box-shadow:0 -8px 40px rgba(0,0,0,0.4);
  transform:translateY(100%); transition:transform 0.38s cubic-bezier(.32,.72,0,1);
  max-height:92vh; overflow-y:auto;
}
.modal-overlay.open .modal { transform:translateY(0); }
.modal-drag {
  width:40px; height:4px; border-radius:2px; background:var(--border);
  margin:12px auto 0; flex-shrink:0;
}
.modal-img-wrap { position:relative; height:200px; overflow:hidden; flex-shrink:0; }
.modal-img { width:100%; height:100%; object-fit:cover; }
.modal-img-fade {
  position:absolute; bottom:0; left:0; right:0; height:70%;
  background:linear-gradient(to top, var(--bg2), transparent);
}
.modal-price-pill {
  position:absolute; bottom:14px; right:14px;
  background:rgba(34,211,160,0.15); border:1px solid var(--price);
  color:var(--price); border-radius:20px; padding:5px 12px;
  font-size:13px; font-weight:700;
}
.modal-body { padding:16px 20px 24px; }
.modal-title { font-size:22px; font-weight:900; color:var(--text); margin-bottom:8px; }
.modal-desc { font-size:14px; color:var(--text2); line-height:1.6; margin-bottom:14px; }
.modal-was { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.modal-was-label { font-size:13px; color:var(--text3); font-weight:500; }
.modal-was-val { font-size:13px; color:var(--text3); text-decoration:line-through; }
.modal-feats { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.modal-feat {
  padding:6px 12px; border-radius:20px; font-size:12px; font-weight:600;
  background:var(--bg3); color:var(--text2); border:1px solid var(--border);
}
.modal-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:16px; border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-size:16px; font-weight:800;
  margin-bottom:10px; transition:opacity var(--trans);
  box-shadow:0 4px 24px rgba(108,99,255,0.35);
}
.modal-btn:active { opacity:0.85; }
.modal-close {
  display:block; width:100%; padding:12px;
  background:var(--bg3); border-radius:14px;
  color:var(--text2); font-size:14px; font-weight:600;
  border:1px solid var(--border); transition:var(--trans);
}
.modal-close:active { background:var(--border); }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.card { animation:fadeUp 0.4s ease both; }
.card:nth-child(2) { animation-delay:0.05s; }
.card:nth-child(3) { animation-delay:0.1s; }
.card:nth-child(4) { animation-delay:0.15s; }
.card:nth-child(5) { animation-delay:0.2s; }
.card:nth-child(6) { animation-delay:0.25s; }
.card:nth-child(n+7) { animation-delay:0.3s; }