/* ==========================================================================
   m0p store — premium dark theme v3
   ========================================================================== */
:root {
  --bg:         #06080f;
  --bg-2:       #090c16;
  --surface:    #0e1120;
  --surface-2:  #141829;
  --surface-3:  #1a1f33;
  --surface-4:  #202540;
  --border:     rgba(255,255,255,.06);
  --border-2:   rgba(255,255,255,.11);
  --border-3:   rgba(255,255,255,.18);
  --text:       #e8ecf7;
  --text-2:     #c5cde8;
  --muted:      #7a87af;
  --primary:    #5b4be0;
  --primary-2:  #7c6ef7;
  --primary-3:  #a99cff;
  --accent:     #00c8be;
  --accent-2:   #00a8f5;
  --danger:     #f0416a;
  --success:    #22d47a;
  --warn:       #ffca2c;
  --sidebar-w:  310px;
  --topbar-h:   64px;
  --radius:     18px;
  --radius-sm:  11px;
  --radius-xs:  8px;
  --shadow-card: 0 4px 24px -8px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-3d:  0 24px 60px -20px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.05) inset;
  --glow-primary: 0 0 0 1px rgba(91,75,224,.5), 0 8px 32px -8px rgba(91,75,224,.7);
  --glow-accent:  0 0 0 1px rgba(0,200,190,.3), 0 6px 24px -6px rgba(0,200,190,.5);
  --transition:  .2s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1,h2,h3,h4,.brand-text { font-family: 'Sora', 'Inter', sans-serif; letter-spacing: -.025em; }
h1 { font-size: 2.1rem; line-height: 1.15; }
h2 { font-size: 1.45rem; line-height: 1.25; }
h3 { font-size: 1.1rem; }
a  { color: var(--primary-2); text-decoration: none; transition: color var(--transition); }
a:hover { color: #fff; }
code {
  background: var(--surface-3); padding: 2px 8px; border-radius: 6px;
  font-size: .86em; font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  color: var(--primary-3); border: 1px solid var(--border-2);
}
p { color: var(--text-2); }

.container { width: min(1140px, 93vw); margin: 0 auto; }
.muted  { color: var(--muted); }
.small  { font-size: .82rem; }
.xs     { font-size: .75rem; }
.center { text-align: center; }
.grow   { flex: 1; }

.grad {
  background: linear-gradient(100deg, var(--primary-2), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-2 {
  background: linear-gradient(100deg, var(--primary-3), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Animated bg ──────────────────────────────────────────── */
.bg-orbs {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.bg-orbs span {
  position: absolute; border-radius: 50%; filter: blur(100px); opacity: .22;
  animation: float 22s ease-in-out infinite;
}
.bg-orbs span:nth-child(1){ width:600px;height:600px;left:-150px;top:-100px;background:radial-gradient(circle,rgba(91,75,224,1),transparent 70%);}
.bg-orbs span:nth-child(2){ width:500px;height:500px;right:-120px;top:20%;background:radial-gradient(circle,rgba(0,168,245,1),transparent 70%);animation-delay:-8s;}
.bg-orbs span:nth-child(3){ width:450px;height:450px;left:35%;bottom:-120px;background:radial-gradient(circle,rgba(0,200,190,1),transparent 70%);animation-delay:-16s;}
@keyframes float {
  0%,100% { transform: translateY(0) translateX(0) scale(1); }
  33%      { transform: translateY(-50px) translateX(20px) scale(1.05); }
  66%      { transform: translateY(30px) translateX(-15px) scale(.97); }
}

/* ── Grid dot overlay ─────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ==========================================================================
   Glass card base
   ========================================================================== */
.card-3d {
  background: linear-gradient(145deg, rgba(20,24,41,.95), rgba(14,17,32,.98));
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  position: relative;
  backdrop-filter: blur(12px);
}
.card-3d::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(145deg, rgba(255,255,255,.045) 0%, transparent 50%);
}

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 60;
  backdrop-filter: blur(24px) saturate(180%);
  background: linear-gradient(180deg, rgba(6,8,15,.96) 0%, rgba(6,8,15,.82) 100%);
  border-bottom: 1px solid var(--border-2);
  box-shadow: 0 1px 40px -10px rgba(0,0,0,.8);
}
.topbar-inner {
  height: 100%; display: flex; align-items: center; gap: 14px; padding: 0 22px;
}
.hamburger {
  display: flex; flex-direction: column; justify-content: center; gap: 4.5px;
  width: 40px; height: 40px; background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 11px; cursor: pointer; padding: 11px; flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.hamburger span {
  display: block; height: 1.5px; background: var(--text-2); border-radius: 2px;
  transition: transform .22s, opacity .22s;
}
.hamburger:hover { background: var(--surface-3); border-color: var(--border-3); transform: scale(1.05); }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; color: #fff; }
.brand-cube {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--primary-2), var(--accent-2));
  box-shadow: 0 6px 20px -4px rgba(91,75,224,.9), inset 0 1px 3px rgba(255,255,255,.4);
  transform: rotate(8deg);
  animation: spin3d 10s linear infinite;
}
@keyframes spin3d { 0%{transform:rotateY(0) rotate(8deg)} 100%{transform:rotateY(360deg) rotate(8deg)} }

/* Topbar search */
.topbar-search {
  flex: 1; max-width: 380px; position: relative;
}
.topbar-search input {
  width: 100%; padding: 9px 14px 9px 38px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 11px; color: var(--text); font-size: .88rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.topbar-search input:focus {
  border-color: var(--primary); background: var(--surface-3);
  box-shadow: 0 0 0 3px rgba(91,75,224,.2);
}
.topbar-search input::placeholder { color: var(--muted); }
.topbar-search-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: .9rem; color: var(--muted); pointer-events: none;
}
.search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-3d);
  z-index: 200; display: none; max-height: 380px; overflow-y: auto;
}
.search-dropdown.open { display: block; }
.search-result-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-bottom: 1px solid var(--border); cursor: pointer; text-decoration: none;
  color: var(--text); transition: background var(--transition);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--surface-3); }
.search-result-emoji { font-size: 1.4rem; flex-shrink: 0; }
.search-result-info strong { display: block; font-size: .9rem; }
.search-result-info span { font-size: .78rem; color: var(--muted); }
.search-result-price {
  margin-left: auto; font-weight: 700; font-size: .9rem; color: var(--success);
  font-family: 'Sora', sans-serif;
}
.search-empty { padding: 20px; text-align: center; color: var(--muted); font-size: .88rem; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.balance-pill {
  background: linear-gradient(145deg, rgba(34,212,122,.15), rgba(34,212,122,.05));
  color: var(--success); border: 1px solid rgba(34,212,122,.25);
  padding: 5px 13px; border-radius: 999px; font-weight: 700; font-size: .8rem;
  letter-spacing: .01em;
}
.user-chip { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--primary), var(--accent-2));
  font-weight: 700; color: #fff; font-size: .84rem; flex-shrink: 0;
  box-shadow: inset 0 1px 3px rgba(255,255,255,.3), 0 4px 12px -4px rgba(91,75,224,.6);
}
.avatar.lg { width: 44px; height: 44px; border-radius: 13px; font-size: 1.15rem; }
.avatar.sm { width: 26px; height: 26px; border-radius: 7px; font-size: .72rem; }
.uname { font-weight: 600; font-size: .9rem; }

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(2,4,12,.8); backdrop-filter: blur(6px); z-index: 70;
}
.sidebar-backdrop.open { display: block; }

.sidebar {
  position: fixed; top: 0; left: calc(-1 * var(--sidebar-w));
  width: var(--sidebar-w); height: 100vh; z-index: 80;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg-2) 100%);
  border-right: 1px solid var(--border-2);
  box-shadow: 12px 0 60px rgba(0,0,0,.7);
  overflow-y: auto; overflow-x: hidden;
  transition: left .32s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.sidebar.open { left: 0; }
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 3px; }

.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 0;
}
.sidebar-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.05rem; color: #fff; }
.sidebar-brand .brand-cube { width: 22px; height: 22px; border-radius: 6px; animation: none; }
.sidebar-close {
  width: 32px; height: 32px; border-radius: 9px; background: var(--surface-3);
  border: 1px solid var(--border-2); color: var(--muted); font-size: .9rem;
  cursor: pointer; display: grid; place-items: center; transition: var(--transition);
}
.sidebar-close:hover { color: #fff; border-color: var(--border-3); background: var(--surface-4); }

.sidebar-user {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 14px 6px; padding: 14px 16px;
  background: var(--surface-3); border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
}
.sidebar-user strong { display: block; font-size: .95rem; }
.sidebar-user .bal { font-size: .78rem; color: var(--success); margin-top: 2px; font-weight: 600; }

.sidebar-section-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); padding: 16px 22px 4px; opacity: .7;
}

.sidebar-nav { flex: 1; padding: 4px 10px 24px; display: flex; flex-direction: column; gap: 1px; }

.snav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 10px; color: var(--muted);
  font-weight: 500; font-size: .91rem; cursor: pointer;
  transition: background var(--transition), color var(--transition); text-decoration: none; border: none;
  background: transparent; position: relative;
}
.snav-item:hover { background: var(--surface-3); color: var(--text); }
.snav-item.active {
  background: linear-gradient(145deg, rgba(91,75,224,.2), rgba(91,75,224,.08));
  color: var(--primary-3); box-shadow: inset 0 0 0 1px rgba(91,75,224,.25);
}
.snav-item.active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 3px; background: var(--primary-2);
}
.snav-ico { font-size: .95rem; width: 20px; text-align: center; flex-shrink: 0; }
.snav-logout { color: var(--danger) !important; margin-top: 6px; }
.snav-logout:hover { background: rgba(240,65,106,.1) !important; color: #ff7a94 !important; }

.snav-group-toggle, .snav-cat-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 13px; border-radius: 10px; color: var(--muted);
  font-weight: 500; font-size: .91rem; cursor: pointer;
  transition: var(--transition); background: transparent; border: none; text-align: left;
}
.snav-group-toggle:hover, .snav-cat-toggle:hover { background: var(--surface-3); color: var(--text); }
.snav-arrow { margin-left: auto; font-size: .78rem; color: var(--muted); transition: transform .2s; }
.snav-group-body, .snav-cat-body { display: none; padding-left: 14px; flex-direction: column; gap: 1px; }
.snav-group-body.open, .snav-cat-body.open { display: flex; }
.snav-sub {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 9px; color: var(--muted);
  font-size: .87rem; font-weight: 500; transition: var(--transition); text-decoration: none;
}
.snav-sub:hover { background: var(--surface-3); color: var(--text); }
.snav-sub.active { color: var(--accent); background: rgba(0,200,190,.08); }
.snav-cat-toggle { font-size: .88rem; padding: 8px 13px; }

.sidebar-divider {
  height: 1px; background: var(--border); margin: 8px 14px;
}

/* ==========================================================================
   Main content
   ========================================================================== */
.main-content { padding-top: calc(var(--topbar-h) + 28px); padding-bottom: 80px; }
.site-footer {
  border-top: 1px solid var(--border); padding: 24px 0;
  background: rgba(0,0,0,.25);
}
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .82rem; color: var(--muted); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 11px; border: 1px solid transparent;
  font-weight: 600; font-size: .88rem; cursor: pointer; font-family: inherit;
  transition: transform .15s, box-shadow .2s, background .15s, border-color .15s;
  white-space: nowrap; text-decoration: none; position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 50%);
  pointer-events: none;
}
.btn:active { transform: translateY(1px) scale(.99) !important; }
.btn-primary {
  color: #fff;
  background: linear-gradient(145deg, var(--primary-2), var(--primary));
  box-shadow: 0 8px 24px -10px rgba(91,75,224,.9), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover {
  box-shadow: 0 12px 32px -8px rgba(91,75,224,1), 0 0 0 1px rgba(124,110,247,.5);
  transform: translateY(-2px); color: #fff;
}
.btn-accent {
  color: #fff;
  background: linear-gradient(145deg, var(--accent), #009990);
  box-shadow: 0 8px 24px -10px rgba(0,200,190,.7);
}
.btn-accent:hover { box-shadow: 0 12px 32px -8px rgba(0,200,190,.9); transform: translateY(-2px); color: #fff; }
.btn-buy {
  color: #fff;
  background: linear-gradient(145deg, #00d8cc, #00b8ae);
  box-shadow: 0 6px 18px -8px rgba(0,200,190,.8);
  border-radius: 999px;
  font-weight: 700;
  padding: 8px 16px;
}
.btn-buy:hover {
  box-shadow: 0 10px 26px -6px rgba(0,200,190,1);
  transform: translateY(-2px);
  color: #fff;
}
.btn-ghost {
  background: var(--surface-2); color: var(--text-2); border-color: var(--border-2);
}
.btn-ghost:hover { background: var(--surface-3); border-color: var(--border-3); color: #fff; }
.btn-danger {
  background: linear-gradient(145deg, #ff6585, var(--danger)); color: #fff;
  box-shadow: 0 6px 18px -8px rgba(240,65,106,.8);
}
.btn-danger:hover { transform: translateY(-2px); color: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }
.btn-lg  { padding: 13px 24px; font-size: .96rem; border-radius: 13px; }
.btn-sm  { padding: 6px 12px; font-size: .78rem; border-radius: 9px; }
.btn-xs  { padding: 4px 10px; font-size: .74rem; border-radius: 7px; }
.btn.block { display: flex; width: 100%; }
.btn.block + .btn.block { margin-top: 10px; }

/* ==========================================================================
   Flash / alerts
   ========================================================================== */
.flash {
  background: linear-gradient(145deg, rgba(91,75,224,.16), rgba(91,75,224,.06));
  border: 1px solid rgba(91,75,224,.35); color: #c8bfff;
  padding: 13px 18px; border-radius: 13px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.flash::before { content: 'ℹ'; font-size: 1rem; flex-shrink: 0; }
.alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: .87rem; display: flex; align-items: center; gap: 9px; }
.alert.error { background: rgba(240,65,106,.12); border: 1px solid rgba(240,65,106,.35); color: #ffaabf; }
.alert.error::before { content: '✕'; font-weight: 700; flex-shrink: 0; }
.alert.ok    { background: rgba(34,212,122,.1); border: 1px solid rgba(34,212,122,.35); color: #8effc5; }
.alert.ok::before { content: '✓'; font-weight: 700; flex-shrink: 0; }
.alert.warn  { background: rgba(255,202,44,.1); border: 1px solid rgba(255,202,44,.3); color: #ffe08a; }

.empty {
  text-align: center; color: var(--muted); padding: 60px 20px;
  border: 1px dashed var(--border-2); border-radius: var(--radius);
  background: rgba(255,255,255,.012);
}
.empty .empty-icon { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: .5; }

.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 24px 0 18px; flex-wrap: wrap;
}
.section-title { margin: 36px 0 16px; }

/* ==========================================================================
   Toast notifications
   ========================================================================== */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px; min-width: 280px;
  padding: 13px 18px; border-radius: 13px; border: 1px solid var(--border-2);
  background: var(--surface-3); box-shadow: var(--shadow-3d);
  backdrop-filter: blur(20px);
  transform: translateX(110%); transition: transform .35s cubic-bezier(.2,.8,.3,1);
  pointer-events: auto; font-size: .88rem; font-weight: 500;
}
.toast.show { transform: translateX(0); }
.toast.success { border-color: rgba(34,212,122,.35); color: #8effc5; }
.toast.error   { border-color: rgba(240,65,106,.35); color: #ffaabf; }
.toast.info    { border-color: rgba(91,75,224,.35); color: #c8bfff; }
.toast-icon { font-size: 1rem; flex-shrink: 0; }

/* ==========================================================================
   Homepage hero
   ========================================================================== */
.hero-section {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px;
  padding: 44px 48px; overflow: hidden; margin-bottom: 32px; align-items: center;
  position: relative;
}
.hero-section::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(91,75,224,.1), transparent 70%);
}
.hero-left { max-width: 580px; position: relative; z-index: 1; }
.announce-bar {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(91,75,224,.12); border: 1px solid rgba(91,75,224,.28);
  color: var(--primary-3); padding: 6px 16px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; margin-bottom: 18px; letter-spacing: .02em;
  text-transform: uppercase;
}
.announce-bar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-2); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.hero-left h1 { font-size: 2.7rem; margin-bottom: 14px; line-height: 1.1; }
.hero-left p { color: var(--muted); max-width: 46ch; margin-bottom: 26px; font-size: 1rem; }
.hero-stats { display: flex; gap: 28px; margin-bottom: 26px; }
.hero-stats > div { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 1.6rem; font-family: 'Sora'; color: #fff; }
.hero-stats span { color: var(--muted); font-size: .78rem; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-art { position: relative; height: 220px; z-index: 1; }
.float-cube {
  position: absolute; border-radius: 20px;
  box-shadow: 0 24px 50px -14px rgba(91,75,224,.8), inset 0 1px 4px rgba(255,255,255,.25);
  animation: bob 6s ease-in-out infinite;
}
.float-cube.c1 { width:110px;height:110px;top:20px;left:10px; background:linear-gradient(145deg,var(--primary-2),#4a38c5); animation-delay: 0s; }
.float-cube.c2 { width:74px;height:74px;top:110px;left:140px; background:linear-gradient(145deg,var(--accent),#007a74); box-shadow: 0 16px 36px -10px rgba(0,200,190,.7); animation-delay:-2.2s; }
.float-cube.c3 { width:54px;height:54px;top:10px;left:192px; background:linear-gradient(145deg,#ff8fa8,var(--danger)); box-shadow: 0 12px 28px -8px rgba(240,65,106,.7); animation-delay:-4.5s; }
.float-cube.c4 { width:40px;height:40px;top:56px;left:264px; background:linear-gradient(145deg,var(--warn),#e5a800); box-shadow: 0 8px 20px -6px rgba(255,202,44,.6); animation-delay:-3s; }
@keyframes bob {
  0%,100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-22px) rotate(8deg); }
}

/* Featured products strip */
.featured-strip {
  margin-bottom: 36px;
}
.featured-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.featured-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--warn); background: rgba(255,202,44,.1); border: 1px solid rgba(255,202,44,.25);
  padding: 4px 12px; border-radius: 999px;
}
.featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.featured-card {
  display: flex; flex-direction: column; padding: 20px; gap: 10px;
  cursor: pointer; text-decoration: none; color: var(--text);
  transition: transform .22s, box-shadow .22s, border-color .22s;
  border-left: 3px solid rgba(255,202,44,.4);
}
.featured-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-3d), var(--glow-primary);
  border-left-color: var(--warn);
  color: var(--text);
}
.featured-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  color: var(--warn); letter-spacing: .06em;
}
.featured-emoji { font-size: 2.4rem; }
.featured-card h3 { font-size: .95rem; margin: 0; }
.featured-card .cat-tag { font-size: .7rem; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.featured-card .price { font-size: 1.1rem; margin-top: auto; color: var(--success); }

/* Category grid */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(155px,1fr)); gap: 12px; margin-bottom: 12px; }
.cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 14px; text-align: center; cursor: pointer; text-decoration: none;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-3d), var(--glow-primary); border-color: rgba(91,75,224,.4); }
.cat-emoji { font-size: 2.4rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.cat-name  { font-weight: 700; color: var(--text); font-size: .9rem; }
.cat-count { font-size: .75rem; color: var(--muted); }

/* ==========================================================================
   Product grid + cards
   ========================================================================== */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 18px; }
.product-card {
  display: flex; flex-direction: column; overflow: hidden;
  padding: 0; transition: transform .22s, box-shadow .22s, border-color .22s;
  text-decoration: none; color: var(--text);
}
.product-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-3d), var(--glow-primary);
  border-color: rgba(91,75,224,.4);
  color: var(--text);
}
.product-img-wrap {
  position: relative; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0;
  background: radial-gradient(circle at 50% 40%, rgba(91,75,224,.18), transparent 70%);
  aspect-ratio: 16/10;
}
.product-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s; border-radius: 0;
}
.product-card:hover .product-img-wrap img { transform: scale(1.06); }
.product-emoji-wrap {
  display: flex; align-items: center; justify-content: center; padding: 32px 20px;
  background: radial-gradient(circle at 50% 40%, rgba(91,75,224,.18), transparent 70%);
}
.product-emoji { font-size: 3.2rem; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.product-featured-tag {
  position: absolute; top: 10px; right: 10px;
  background: linear-gradient(145deg, var(--warn), #c89200);
  color: #000; font-size: .65rem; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .05em; text-transform: uppercase;
}
.product-body { padding: 14px 18px; flex: 1; }
.product-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.product-cat  { font-size: .7rem; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.product-sub  { font-size: .7rem; color: var(--muted); }
.product-body h3 { margin: 0 0 6px; font-size: .98rem; line-height: 1.35; }
.product-desc { font-size: .82rem; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--border);
  background: rgba(0,0,0,.18);
}
.price { display: block; font-size: 1.2rem; font-weight: 800; font-family: 'Sora'; color: var(--success); }
.price-original { font-size: .78rem; color: var(--muted); text-decoration: line-through; }
.stock { display: block; font-size: .72rem; color: var(--success); font-weight: 600; }
.stock.out { color: var(--danger); }

/* ==========================================================================
   Product detail page
   ========================================================================== */
.product-detail-grid {
  display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start;
}
.product-detail-media {
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3;
  background: radial-gradient(circle at 50% 40%, rgba(91,75,224,.2), transparent 70%);
  display: flex; align-items: center; justify-content: center;
}
.product-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.product-detail-emoji { font-size: 6rem; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.product-detail-info { padding: 0; }
.product-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); margin-bottom: 14px; flex-wrap: wrap; }
.product-breadcrumb a { color: var(--muted); }
.product-breadcrumb a:hover { color: var(--text); }
.product-breadcrumb span { opacity: .5; }
.product-detail-title { font-size: 1.8rem; margin: 8px 0 12px; }
.product-detail-price { font-size: 2.2rem; font-family: 'Sora'; font-weight: 800; color: var(--success); margin-bottom: 8px; }
.product-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.meta-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--surface-3); border: 1px solid var(--border-2); color: var(--text-2);
}
.meta-pill.green { background: rgba(34,212,122,.1); border-color: rgba(34,212,122,.3); color: var(--success); }
.meta-pill.red   { background: rgba(240,65,106,.1); border-color: rgba(240,65,106,.3); color: var(--danger); }
.meta-pill.blue  { background: rgba(0,168,245,.1); border-color: rgba(0,168,245,.3); color: var(--accent-2); }
.product-detail-desc { color: var(--muted); line-height: 1.7; margin-bottom: 24px; font-size: .94rem; }
.product-detail-cols { margin-bottom: 24px; }
.product-detail-cols table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.product-detail-cols td { padding: 9px 14px; border-bottom: 1px solid var(--border); }
.product-detail-cols td:first-child { color: var(--muted); font-weight: 600; width: 40%; }
.product-detail-cols tr:last-child td { border-bottom: none; }
.buy-box { padding: 24px; }
.buy-box h3 { margin-bottom: 16px; }
.qty-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.qty-btn {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border-2);
  background: var(--surface-3); color: var(--text); font-size: 1.1rem;
  cursor: pointer; display: grid; place-items: center; transition: var(--transition);
}
.qty-btn:hover { background: var(--surface-4); border-color: var(--border-3); }
.qty-display { min-width: 48px; text-align: center; font-weight: 700; font-size: 1.05rem; }
.buy-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.buy-total-val { font-size: 1.4rem; font-family: 'Sora'; font-weight: 800; color: var(--success); }

/* ==========================================================================
   Forms
   ========================================================================== */
input, select, textarea {
  width: 100%; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text);
  font-family: inherit; font-size: .91rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91,75,224,.18); background: var(--surface);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
label { display: block; font-size: .8rem; color: var(--muted); font-weight: 600; margin-bottom: 14px; letter-spacing: .01em; }
label input, label select, label textarea { margin-top: 6px; }
label.check { display: flex; align-items: center; gap: 9px; }
label.check input { width: auto; margin: 0; }
.stack-form { display: flex; flex-direction: column; }
.stack-form .form-row { display: flex; gap: 10px; }
.stack-form .form-row label { flex: 1; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form.mb { margin-bottom: 14px; }
.inline-form input, .inline-form select { width: auto; }
.mini-input { width: 84px !important; padding: 7px 9px !important; }
.grow-input { flex: 1; }
.form-hint { font-size: .76rem; color: var(--muted); margin-top: 5px; }

/* ==========================================================================
   Auth pages
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.auth-card { width: min(440px,100%); padding: 40px 36px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; text-decoration: none; }
.auth-brand h1 { margin: 0; font-size: 1.5rem; color: var(--text); }
.auth-form { margin-top: 22px; }
.auth-alt  { text-align: center; margin-top: 18px; color: var(--muted); font-size: .86rem; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.auth-divider hr { flex: 1; border: none; border-top: 1px solid var(--border-2); }
.auth-divider span { font-size: .78rem; color: var(--muted); }

/* Installer */
.install-log { list-style: none; margin: 20px 0; }
.install-log li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .87rem; }
.install-log .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.install-log .ok  .dot { background: var(--success); box-shadow: 0 0 8px var(--success); }
.install-log .err { color: #ffaabf; }
.install-log .err .dot { background: var(--danger); }
.install-done { text-align: center; padding-top: 10px; }

/* ==========================================================================
   Stats
   ========================================================================== */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; }
.stat { padding: 22px; display: flex; flex-direction: column; gap: 4px; transition: .2s; position: relative; overflow: hidden; }
.stat::after { content: ''; position: absolute; bottom: -20px; right: -20px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.02); }
.stat:hover { transform: translateY(-4px); border-color: rgba(91,75,224,.3); }
.stat-ico { font-size: 1.6rem; margin-bottom: 6px; }
.stat strong { font-size: 1.75rem; font-family: 'Sora'; color: #fff; }
.stat span:last-child { color: var(--muted); font-size: .8rem; }
.stat-trend { font-size: .74rem; font-weight: 700; }
.stat-trend.up { color: var(--success); }
.stat-trend.down { color: var(--danger); }

/* Sub-navigation */
.subnav {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 12px;
  padding: 6px; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 15px;
}
.subnav a {
  padding: 8px 16px; border-radius: 11px; color: var(--muted);
  font-weight: 500; font-size: .86rem; transition: var(--transition);
}
.subnav a:hover { color: #fff; background: var(--surface-3); }
.subnav a.active {
  color: #fff; background: linear-gradient(145deg,var(--primary),var(--primary-2));
  box-shadow: 0 6px 20px -8px rgba(91,75,224,.9);
}
.badge-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: .68rem;
  background: var(--danger); color: #fff; font-weight: 700; vertical-align: middle; margin-left: 4px;
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table-card { padding: 6px; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.data-table th {
  text-align: left; padding: 12px 16px; color: var(--muted);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--border-2); font-weight: 700;
  background: rgba(255,255,255,.014);
}
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--transition); }
.data-table tbody tr:hover { background: rgba(255,255,255,.022); }
.user-cell { display: flex; align-items: center; gap: 9px; }
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row-actions form { margin: 0; }
.addr-cell { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amt-pos { color: var(--success); font-weight: 700; }
.amt-neg { color: var(--danger); font-weight: 700; }

/* Badges */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.badge-new, .badge-pending { background: rgba(0,168,245,.13); color: #7fd4ff; border: 1px solid rgba(0,168,245,.28); }
.badge-paid, .badge-delivered, .badge-approved { background: rgba(34,212,122,.12); color: var(--success); border: 1px solid rgba(34,212,122,.28); }
.badge-cancelled, .badge-rejected, .badge-banned { background: rgba(240,65,106,.12); color: #ffaabf; border: 1px solid rgba(240,65,106,.28); }
.badge-reseller { background: rgba(91,75,224,.16); color: var(--primary-3); border: 1px solid rgba(91,75,224,.32); }
.badge-admin    { background: rgba(255,202,44,.12); color: var(--warn); border: 1px solid rgba(255,202,44,.28); }

/* ==========================================================================
   Admin / Reseller layouts
   ========================================================================== */
.admin-split { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start; }
.form-card { padding: 24px; }
.form-card.narrow { max-width: 560px; }
.form-card h3 { margin-bottom: 18px; }
.info-banner { display: flex; gap: 14px; align-items: center; padding: 16px 20px; margin-top: 18px; }
.info-banner span { font-size: 1.5rem; flex-shrink: 0; }
.info-banner p { margin: 0; color: var(--muted); }

/* Categories tree */
.cat-tree { padding: 8px; }
.cat-tree-item { margin-bottom: 4px; }
.cat-tree-row, .cat-tree-sub-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  transition: background var(--transition);
}
.cat-tree-row { background: var(--surface-3); }
.cat-tree-sub-row { padding-left: 30px; }
.cat-tree-sub-row:hover, .cat-tree-row:hover { background: var(--surface-4); }
.cat-tree-label { font-weight: 600; }
.cat-tree-sublabel { color: var(--muted); font-size: .9rem; }

/* Reseller application cards */
.app-card { padding: 22px; margin-bottom: 14px; }
.app-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.app-answers { display: grid; gap: 10px; margin-bottom: 14px; }
.app-qa { background: var(--surface-3); border-radius: 10px; padding: 13px; }
.app-q { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
.app-a { display: block; font-weight: 500; }
.app-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.app-stats { margin-top: 10px; }

/* ==========================================================================
   Wallet
   ========================================================================== */
.wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.balance-card {
  padding: 32px; display: flex; flex-direction: column; gap: 12px; justify-content: center;
  background: linear-gradient(145deg, rgba(91,75,224,.2), rgba(91,75,224,.06));
  border-color: rgba(91,75,224,.25);
  position: relative; overflow: hidden;
}
.balance-card::after {
  content: ''; position: absolute; right: -30px; bottom: -30px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(91,75,224,.3), transparent 70%);
}
.big-balance { font-size: 2.8rem; font-family: 'Sora'; font-weight: 800; }
.topup-card { padding: 24px; }
.topup-card h3 { margin-bottom: 16px; }
.quick-amts { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
.chip {
  padding: 7px 14px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border-2); color: var(--muted); font-size: .83rem;
  font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit;
}
.chip:hover, .chip.active {
  color: #fff; background: linear-gradient(145deg,var(--primary),var(--primary-2));
  border-color: transparent; box-shadow: 0 4px 14px -4px rgba(91,75,224,.7);
}
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

/* ==========================================================================
   Checkout
   ========================================================================== */
.checkout-summary, .checkout-pay { display: grid; place-items: center; padding: 10px 0; }
.summary-card, .pay-card { width: min(560px,100%); padding: 32px; }
.summary-product {
  display: flex; gap: 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--border); margin-bottom: 18px;
}
.summary-totals { margin: 18px 0; }
.pay-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pay-row.col { flex-direction: column; gap: 5px; align-items: flex-start; }
.pay-row.total { border: none; font-size: 1.15rem; }
.pay-row.total strong { font-family: 'Sora'; font-size: 1.35rem; }
.qty-field { max-width: 160px; }
.pay-grid { display: grid; grid-template-columns: 220px 1fr; gap: 22px; margin: 22px 0; align-items: start; }
.qr-box { background: #fff; padding: 10px; border-radius: 12px; }
.qr-box img { display: block; border-radius: 6px; }
.pay-info { display: flex; flex-direction: column; }
.addr { display: block; background: var(--bg-2); border: 1px solid var(--border-2); padding: 9px 12px; border-radius: 9px; font-size: .79rem; word-break: break-all; color: var(--accent); }
.pay-success { text-align: center; padding: 20px 0; }
.big-check {
  width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
  font-size: 2.2rem; color: #fff;
  background: linear-gradient(145deg, var(--success), #19b366);
  box-shadow: 0 14px 32px -10px rgba(34,212,122,.8);
  animation: pop .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop { 0%{transform:scale(0)} 100%{transform:scale(1)} }

/* ==========================================================================
   Checkout — credits-based
   ========================================================================== */
.checkout-balance-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface-3); border-radius: 13px; padding: 18px;
  margin: 18px 0; border: 1px solid var(--border-2);
}
.checkout-bal-item { flex: 1; text-align: center; min-width: 80px; }
.checkout-bal-item span { display: block; margin-bottom: 4px; font-size: .78rem; color: var(--muted); }
.checkout-bal-item strong { font-size: 1.18rem; font-family: 'Sora'; }
.checkout-bal-sep { color: var(--muted); font-size: 1.4rem; }

/* ==========================================================================
   Account / Profile
   ========================================================================== */
.account-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.profile-card { padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.profile-avatar {
  width: 78px; height: 78px; border-radius: 20px; display: grid; place-items: center;
  font-size: 2.2rem; font-weight: 800; color: #fff; margin-bottom: 4px;
  background: linear-gradient(145deg, var(--primary), var(--accent-2));
  box-shadow: 0 14px 32px -10px rgba(91,75,224,.8), inset 0 2px 6px rgba(255,255,255,.3);
}
.profile-stats { display: flex; gap: 16px; margin-top: 8px; padding: 16px; background: var(--surface-3); border-radius: 13px; width: 100%; }
.profile-stats > div { flex: 1; text-align: center; }
.profile-stats strong { display: block; font-size: 1.1rem; font-family: 'Sora'; }
.profile-stats span { display: block; font-size: .72rem; color: var(--muted); }

/* ==========================================================================
   Orders list (row style)
   ========================================================================== */
.orders-list { display: flex; flex-direction: column; gap: 10px; }
.order-row {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  cursor: pointer; text-decoration: none; color: var(--text);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.order-row:hover { transform: translateX(5px); border-color: rgba(91,75,224,.35); color: var(--text); }
.order-emoji { font-size: 1.8rem; flex-shrink: 0; }
.order-row-info { flex: 1; }
.order-row-info strong { display: block; }
.order-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.order-arrow { color: var(--muted); font-size: 1.3rem; }

/* ==========================================================================
   Order detail
   ========================================================================== */
.order-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.order-info-card { padding: 24px; }
.order-product-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.order-big-emoji { font-size: 2.6rem; flex-shrink: 0; }
.order-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.order-meta-grid > div { display: flex; flex-direction: column; gap: 2px; }
.order-meta-grid span { font-size: .74rem; color: var(--muted); }
.order-meta-grid strong { font-size: .94rem; }
.delivery-card { padding: 22px; }
.delivery-header { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.delivery-icon { font-size: 1.8rem; }
.delivery-pre {
  background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: 11px; padding: 16px; font-family: 'JetBrains Mono','Fira Code','Courier New',monospace;
  font-size: .86rem; white-space: pre-wrap; word-break: break-all;
  color: var(--accent); line-height: 1.7; margin-bottom: 12px;
  max-height: 340px; overflow-y: auto;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.3);
}
.delivery-locked { opacity: .6; }

/* Admin product form */
.admin-split-wide {
  display: grid; grid-template-columns: 380px 300px 1fr; gap: 20px; align-items: start;
}

/* ==========================================================================
   Support tickets
   ========================================================================== */
.support-grid { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start; }
.ticket-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; max-width: 740px; }
.ticket-msg { border-radius: 14px; overflow: hidden; }
.msg-user  { background: var(--surface-2); border: 1px solid var(--border-2); }
.msg-admin { background: linear-gradient(145deg, rgba(91,75,224,.16), var(--surface-2)); border: 1px solid rgba(91,75,224,.28); }
.msg-meta  { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: .8rem; }
.msg-admin .msg-meta { border-bottom-color: rgba(91,75,224,.2); }
.msg-body { padding: 14px 16px; line-height: 1.68; font-size: .91rem; white-space: pre-wrap; }

/* ==========================================================================
   Store sections
   ========================================================================== */
.store-section {
  margin-top: 44px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.store-section:last-child { border-bottom: none; }
.store-section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.store-section-title { display: flex; align-items: center; gap: 12px; }
.store-section-icon { font-size: 1.7rem; line-height: 1; }
.store-section-title h2 { margin: 0; font-size: 1.3rem; font-weight: 800; }
.store-section-count {
  background: var(--surface-3); border: 1px solid var(--border-2);
  border-radius: 999px; padding: 2px 11px; font-size: .72rem; color: var(--muted); font-weight: 600;
}

/* Subcategory pills */
.sub-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sub-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 15px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--muted);
  text-decoration: none; transition: var(--transition); white-space: nowrap;
}
.sub-pill:hover { background: var(--surface-3); color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.sub-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 3px 12px rgba(0,200,190,.35); }

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.site-announce {
  background: linear-gradient(90deg, rgba(91,75,224,.15), rgba(0,200,190,.12), rgba(91,75,224,.15));
  border-bottom: 1px solid rgba(91,75,224,.22);
  padding: 10px 20px; text-align: center;
  font-size: .83rem; color: var(--primary-3); font-weight: 600; letter-spacing: .02em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .hero-section { grid-template-columns: 1fr; padding: 32px 28px; }
  .hero-art { display: none; }
  .admin-split { grid-template-columns: 1fr; }
  .admin-split-wide { grid-template-columns: 1fr; }
  .wallet-grid { grid-template-columns: 1fr; }
  .account-grid { grid-template-columns: 1fr; }
  .pay-grid { grid-template-columns: 1fr; justify-items: center; }
  .order-detail-grid { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr; }
  .product-detail-grid { grid-template-columns: 1fr; }
  .featured-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 600px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.2rem; }
  .hero-left h1 { font-size: 2rem; }
  .uname { display: none; }
  .balance-pill { display: none; }
  .topbar-inner { padding: 0 14px; }
  .topbar-search { display: none; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .hero-stats { gap: 16px; }
  .hero-stats strong { font-size: 1.3rem; }
  .sub-pills { gap: 6px; }
  .sub-pill { padding: 4px 11px; font-size: .76rem; }
  .store-section-header { gap: 8px; }
  .store-section-title h2 { font-size: 1.05rem; }
}
@media (max-width: 400px) {
  .container { width: 95vw; }
  .auth-card { padding: 28px 20px; }
}