/* ═══════════════════════════════════════════════
   ELJOE UEFN v3 — Orange accent, dark/light theme,
   improved cards, Uiverse-inspired login
   ═══════════════════════════════════════════════ */

/* ── Theme Variables ── */
[data-theme="dark"], :root {
  /* ── Accent ── */
  --accent: #FF9F1C;
  --accent-hi: #FFB347;
  --accent-lo: #FF7D00;
  --accent-grad: linear-gradient(135deg, #FF9F1C 0%, #FFB347 100%);
  --accent-dim: rgba(255,159,28,0.12);
  --accent-glow: rgba(255,159,28,0.35);
  --accent-soft: rgba(255,159,28,0.06);
  --accent-gradient: linear-gradient(135deg, #FF9F1C 0%, #FFB347 100%);
  --accent-gradient-btn: linear-gradient(to bottom right, #FF9F1C 0%, rgba(255,159,28,0) 30%);
  /* ── Semantic ── */
  --success: #00e676;
  --danger: #F53844;
  --secondary: #00F5D4;
  --secondary-dim: rgba(0,245,212,0.10);
  --star: #FFB347;
  /* ── Foreground ── */
  --fg-1: #f0f0f0;
  --fg-2: #999999;
  --fg-3: #555555;
  --text: #f0f0f0;
  --text-secondary: #999;
  --text-tertiary: #555;
  /* ── Background ── */
  --bg-base: #080808;
  --bg-raised: #0e0e0e;
  --bg-card: #131313;
  --bg-card-hover: #1a1a1a;
  --bg-surface: #1c1c1c;
  --bg-input: #161616;
  /* ── Borders ── */
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --border-accent: rgba(255,159,28,0.2);
  /* ── Typography ── */
  --nav-bg: rgba(18,18,18,0.75);
  --modal-bg: #111;
  --font-heading: 'DM Sans', -apple-system, sans-serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', Menlo, monospace;
  /* ── Radii ── */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 100px;
  --radius-modal: 24px;
  /* ── Motion ── */
  --dur: 0.2s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  /* ── Shadows & Glass ── */
  --shadow-card: 0 16px 48px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 40px rgba(255,159,28,0.12);
  --glass-bg: rgba(255,255,255,0.03);
  --glass-bg-hover: rgba(255,255,255,0.055);
  --glass-border: rgba(255,255,255,0.07);
  --glass-border-strong: rgba(255,255,255,0.13);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.08);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  --glass-blur: blur(24px) saturate(1.4);
}

[data-theme="light"] {
  --accent-dim: rgba(255,159,28,0.10);
  --accent-glow: rgba(255,159,28,0.25);
  --accent-soft: rgba(255,159,28,0.05);
  --bg-base: #f4f4f6;
  --bg-raised: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f9f9fb;
  --bg-surface: #eeeef2;
  --bg-input: #f0f0f4;
  --border: rgba(0,0,0,0.07);
  --border-hover: rgba(0,0,0,0.14);
  --border-accent: rgba(255,159,28,0.28);
  --text: #0d0d0d;
  --text-secondary: #5a5a6a;
  --text-tertiary: #a0a0b0;
  --nav-bg: rgba(244,244,246,0.85);
  --modal-bg: #ffffff;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-glow: 0 0 30px rgba(255,159,28,0.12);
  --star: #e08800;
  --glass-bg: rgba(0,0,0,0.02);
  --glass-bg-hover: rgba(0,0,0,0.04);
  --glass-border: rgba(0,0,0,0.07);
  --glass-border-strong: rgba(0,0,0,0.12);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.9);
  --glass-shadow: 0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: blur(24px) saturate(1.2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.35s, color 0.35s;
  padding-top: 76px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: rgba(255,159,28,0.15); border-radius: 3px; }

/* ── Particles Background ── */
.particles-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  transition: opacity 0.4s;
}
[data-theme="light"] .particles-bg { opacity: 0.75; }

[data-theme="light"] .main-nav {
  background: none;
}
[data-theme="light"] .nav-inner {
  background: rgba(255,255,255,0.75);
  border-color: rgba(0,0,0,0.09);
  border-top-color: rgba(255,255,255,0.95);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 8px 32px rgba(0,0,0,0.10);
}
[data-theme="light"] .nav-link { color: #444; }
[data-theme="light"] .hud-frame {
  background: rgba(255,255,255,0.7);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .product-card {
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
[data-theme="light"] .modal-box {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 8px 40px rgba(0,0,0,0.12), rgba(255,159,28,0.08) 0px 20px 20px -15px;
}
[data-theme="light"] .modal-tabs {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .modal-tab.active { background: #fff; }
[data-theme="light"] .form-input {
  background: rgba(0,0,0,0.04);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.04);
}
[data-theme="light"] .social-button {
  background: linear-gradient(45deg, #e8e8ec 0%, #f5f5f8 100%);
  border-color: #d0d0d8;
}
[data-theme="light"] .social-button svg { fill: #333; }
[data-theme="light"] .announcement-bar {
  background: rgba(255,159,28,0.06);
  border-bottom-color: rgba(255,159,28,0.14);
}
[data-theme="light"] .site-footer {
  background: #eaeaee;
  border-top-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .btn-login-inner { background: #fff; }
[data-theme="light"] .discord-float { box-shadow: 0 4px 20px rgba(0,0,0,0.14); }

[data-theme="light"] .btn-secondary {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.13);
  border-top-color: rgba(0,0,0,0.13);
  color: #444;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .btn-secondary:hover {
  background: rgba(255,159,28,0.06);
  border-color: rgba(255,159,28,0.4);
  color: var(--accent);
  box-shadow: 0 2px 12px rgba(255,159,28,0.12);
}

[data-theme="light"] .admin-sidebar {
  background: rgba(235,235,240,0.85);
  border-right-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .sidebar-link { color: #555; }
[data-theme="light"] .sidebar-link:hover { color: #111; background: rgba(0,0,0,0.04); }
[data-theme="light"] .sidebar-link.active { color: var(--accent); background: var(--accent-dim); }
[data-theme="light"] .sidebar-footer { border-top-color: rgba(0,0,0,0.08); }

/* ── Announcement Bar ── */
.announcement-bar {
  position: relative; z-index: 100;
  background: rgba(255,159,28,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,159,28,0.12);
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 20px;
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary); letter-spacing: 0.2px;
}
.announcement-bar span { color: var(--accent); }
.announcement-close {
  background: none; border: none; color: var(--text-tertiary); font-size: 18px; cursor: pointer;
  line-height: 1; padding: 0 4px; transition: color 0.2s;
}
.announcement-close:hover { color: var(--text); }

/* ═══ NAVIGATION — Floating Centered Pill ═══ */
.main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 8px 24px 0;
  background: none; border-bottom: none;
}
.nav-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 8px 0 12px; height: 56px;
  background: rgba(10,10,10,0.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-strong);
  border-top: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-pill);
  box-shadow: var(--glass-highlight), 0 8px 32px rgba(0,0,0,0.4);
  transition: background 0.35s, border-color 0.35s;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0;
  justify-self: start;
}
.logo-text { font-size: 17px; font-weight: 700; letter-spacing: 0.3px; }
.logo-avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  object-position: top center;
  border: 2px solid var(--accent);
  background: var(--bg-card);
  box-shadow: 0 0 12px rgba(255,159,28,0.2);
}
.logo-avatar-sm { width: 32px; height: 32px; }
.logo-el { color: var(--text); }
.logo-uefn { color: var(--accent); }
/* Glass Radio Nav — Uiverse-inspired, works on <a> tags */
.nav-links {
  display: flex; position: relative;
  background: none; box-shadow: none;
  width: fit-content; gap: 2px; padding: 0;
  justify-self: center;
  height: 40px; align-items: center;
}
.nav-link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%; padding: 0 18px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
  cursor: pointer;
  color: var(--text-secondary); text-decoration: none;
  position: relative; z-index: 2;
  transition: color 0.3s ease-in-out;
  white-space: nowrap;
  background: none; border: none;
}
.nav-link:hover { color: #fff; }
.nav-link.is-checked { color: #fff; }

.glass-glider {
  position: absolute;
  top: 4px; bottom: 4px;
  left: 0; width: 0;
  border-radius: 100px;
  z-index: 1; opacity: 0;
  background: linear-gradient(135deg, rgba(255,159,28,0.45), rgba(255,179,71,0.95));
  box-shadow:
    0 0 18px rgba(255,159,28,0.55),
    0 0 10px rgba(255,210,140,0.45) inset;
  transform: translateX(0);
  transition:
    transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56),
    width 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56),
    opacity 0.25s ease,
    background 0.4s ease-in-out,
    box-shadow 0.4s ease-in-out;
  pointer-events: none;
}
.glass-glider.is-on { opacity: 1; }

[data-theme="light"] .nav-links { background: none; box-shadow: none; }
[data-theme="light"] .nav-link { color: #444; }
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.is-checked { color: #fff; }

.nav-admin { color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 8px; justify-self: end; }

/* ── Login Button ── */
.btn-login {
  display: flex; align-items: center; justify-content: center;
  padding: 1.5px; border-radius: var(--radius-pill); cursor: pointer;
  background: linear-gradient(to bottom right, var(--accent) 0%, rgba(255,159,28,0) 35%);
  background-color: rgba(255,159,28,0.18);
  border: none; transition: background-color 0.3s, box-shadow 0.3s; outline: none;
}
.btn-login:hover, .btn-login:focus {
  background-color: rgba(255,159,28,0.35);
  box-shadow: 0 0 16px var(--accent-glow);
  outline: none;
}
.btn-login-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 18px; border-radius: var(--radius-pill);
  background: var(--bg-raised);
  color: var(--text); font-weight: 600; font-size: 13px;
  white-space: nowrap; transition: background 0.35s;
  min-width: 95px;
}
.btn-login-inner svg { width: 17px; height: 17px; fill: var(--accent); flex-shrink: 0; }

.btn-logout {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 8px 18px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.25s;
}
.btn-logout:hover { color: #ff6b6b; border-color: rgba(255,107,107,0.2); }

/* Theme Toggle */
.theme-toggle {
  background: none; border: 1px solid var(--border); border-radius: 50%;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary); transition: all 0.25s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--border-accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-icon-sun, .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="light"] .theme-icon-moon { display: block; }

/* ── Account Menu Dropdown ── */
.account-wrap { position: relative; display: inline-flex; }
.account-chevron {
  margin-left: 2px;
  transition: transform 0.25s ease;
  color: var(--text-secondary);
}
.account-wrap:has(.account-menu.open) .account-chevron {
  transform: rotate(180deg);
}

.account-menu {
  position: absolute; top: calc(100% + 14px); right: -4px;
  width: 260px;
  background: #131313;
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 20px 50px rgba(0,0,0,0.55);
  z-index: 200;
  opacity: 0; transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.22,1.2,.36,1);
}
.account-menu.open {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.account-menu::before {
  content: '';
  position: absolute; top: -7px; right: 28px;
  width: 13px; height: 13px;
  background: #131313;
  border-left: 1px solid rgba(255,255,255,0.18);
  border-top: 1px solid rgba(255,255,255,0.18);
  border-top-left-radius: 3px;
  transform: rotate(45deg);
  z-index: -1;
}
[data-theme="light"] .account-menu::before {
  background: #ffffff;
  border-left-color: rgba(0,0,0,0.10);
  border-top-color: rgba(0,0,0,0.10);
}

.account-menu-header {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  border-radius: 13px 13px 0 0;
}
[data-theme="light"] .account-menu-header {
  background: rgba(0,0,0,0.03);
  border-bottom-color: rgba(0,0,0,0.06);
}
.account-menu-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-gradient);
  color: #000; font-weight: 800; font-size: 17px;
  display: grid; place-content: center;
  box-shadow:
    0 2px 10px rgba(255,159,28,0.4),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.account-menu-userinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.account-menu-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.1px;
}
.account-menu-email {
  font-size: 11.5px; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-menu-items {
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.account-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px; border-radius: 8px;
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.account-menu-item svg { flex-shrink: 0; color: var(--text-tertiary); transition: color 0.15s; }
.account-menu-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.account-menu-item:hover svg { color: var(--accent); }
.account-menu-divider {
  height: 1px; background: rgba(255,255,255,0.06);
  margin: 4px 6px;
}
.account-menu-logout { color: #ff6b6b; }
.account-menu-logout svg { color: #ff6b6b; }
.account-menu-logout:hover { background: rgba(255,107,107,0.08); color: #ff8585; }
.account-menu-logout:hover svg { color: #ff8585; }

/* Light mode */
[data-theme="light"] .account-menu {
  background: #ffffff;
  border-color: rgba(0,0,0,0.10);
  border-top-color: rgba(0,0,0,0.12);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
[data-theme="light"] .account-menu::before {
  border-left-color: rgba(0,0,0,0.10);
  border-top-color: rgba(0,0,0,0.10);
}
[data-theme="light"] .account-menu-header { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .account-menu-divider { background: rgba(0,0,0,0.06); }
[data-theme="light"] .account-menu-item:hover { background: rgba(0,0,0,0.04); }

/* ── Notification Button ── */
.notification-btn {
  position: relative;
  width: 36px; height: 36px; border-radius: 50%;
  background: none; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.25s;
  color: var(--text-secondary);
}
.notification-btn:hover {
  color: var(--accent);
  border-color: var(--border-accent);
  background: var(--accent-soft);
}
.notification-btn .bell {
  width: 16px; height: 16px;
  fill: currentColor;
  transform-origin: top center;
}
.notification-btn.has-notifications .bell {
  animation: bellRingPeriodic 4.5s ease-in-out infinite;
}
.notification-btn:hover .bell {
  animation: bellRing 0.9s both;
}
@keyframes bellRingPeriodic {
  0%, 82%, 100% { transform: rotateZ(0); }
  84% { transform: rotateZ(14deg); }
  86% { transform: rotateZ(-14deg); }
  88% { transform: rotateZ(10deg); }
  90% { transform: rotateZ(-10deg); }
  92% { transform: rotateZ(6deg); }
  94% { transform: rotateZ(-6deg); }
  96% { transform: rotateZ(3deg); }
  98% { transform: rotateZ(-3deg); }
}
.notification-btn.has-notifications .notification-dot {
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,159,28,0.6); }
  50%      { box-shadow: 0 0 14px rgba(255,159,28,1), 0 0 22px rgba(255,159,28,0.5); }
}
.notification-btn:active { transform: scale(0.9); }
.notification-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-raised);
  box-shadow: 0 0 8px rgba(255,159,28,0.6);
}
@keyframes bellRing {
  0%, 100% { transform: rotateZ(0); }
  15%      { transform: rotateZ(12deg); }
  30%      { transform: rotateZ(-12deg); }
  45%      { transform: rotateZ(6deg); }
  60%      { transform: rotateZ(-6deg); }
  75%      { transform: rotateZ(2deg); }
}

/* ── Notification Panel ── */
.notification-wrap { position: relative; display: inline-flex; }

.notification-backdrop {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.notification-backdrop.open { opacity: 1; pointer-events: auto; }

.notification-panel {
  position: absolute; top: calc(100% + 14px); left: -8px;
  width: 340px; max-height: 460px;
  background: rgba(14,14,14,0.85);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 24px 60px rgba(0,0,0,0.6),
    0 0 40px rgba(255,159,28,0.08);
  z-index: 200;
  opacity: 0; transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.22,1.2,.36,1);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.notification-panel.open {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.notification-panel::before {
  content: ''; position: absolute; top: -7px; left: 18px;
  width: 12px; height: 12px;
  background: inherit;
  border-left: 1px solid rgba(255,255,255,0.18);
  border-top: 1px solid rgba(255,255,255,0.18);
  transform: rotate(45deg);
}

.notification-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.notification-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  font-family: var(--font-heading);
}
.notification-mark-read {
  background: none; border: none; color: var(--accent);
  font-size: 11px; font-weight: 600; cursor: pointer;
  font-family: var(--font-body); padding: 4px 8px; border-radius: 6px;
  transition: background 0.2s;
}
.notification-mark-read:hover { background: var(--accent-soft); }

.notification-prefs {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,159,28,0.03);
}
.notification-pref-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer;
}
.notification-pref-info { display: flex; flex-direction: column; gap: 2px; }
.notification-pref-title { font-size: 13px; font-weight: 600; color: var(--text); }
.notification-pref-sub   { font-size: 11px; color: var(--text-tertiary); }

.notification-list {
  flex: 1; overflow-y: auto;
  padding: 4px 0;
}
.notification-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s;
  cursor: pointer;
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: rgba(255,255,255,0.03); }
.notification-item-icon {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  background: var(--accent-dim); color: var(--accent);
  display: grid; place-content: center;
}
.notification-item-body { flex: 1; min-width: 0; }
.notification-item-text {
  font-size: 12.5px; color: var(--text); line-height: 1.45;
  margin: 0;
}
.notification-item-text strong { color: var(--accent); font-weight: 700; }
.notification-item-time {
  display: block; font-size: 10.5px; color: var(--text-tertiary);
  margin-top: 4px;
}

.notification-empty {
  padding: 32px 18px; text-align: center;
  color: var(--text-tertiary); font-size: 12px;
}

/* Light mode tweaks */
[data-theme="light"] .notification-backdrop { background: rgba(0,0,0,0.25); }
[data-theme="light"] .notification-panel {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.08);
  border-top-color: rgba(0,0,0,0.10);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 0 30px rgba(255,159,28,0.06);
}
[data-theme="light"] .notification-panel::before {
  border-left-color: rgba(0,0,0,0.10);
  border-top-color: rgba(0,0,0,0.10);
}
[data-theme="light"] .notification-header,
[data-theme="light"] .notification-prefs,
[data-theme="light"] .notification-item {
  border-bottom-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .notification-item:hover { background: rgba(0,0,0,0.03); }

/* ══ Custom Orders Page ══ */
.co-container {
  max-width: 1200px; margin: 0 auto; padding: 40px 24px 100px;
  position: relative;
}
.co-ambient {
  position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 500px; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(255,159,28,0.18), transparent 70%);
  filter: blur(50px);
}

/* Hero */
.co-hero {
  position: relative; z-index: 1;
  text-align: center; padding: 40px 20px 56px;
}
.co-eyebrow-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: var(--accent);
  background: rgba(255,159,28,0.1); border: 1px solid rgba(255,159,28,0.25);
  border-radius: 100px; padding: 7px 14px; margin-bottom: 20px;
}
.co-title {
  font-family: var(--font-heading); font-size: 64px; font-weight: 800;
  letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 18px;
  background: linear-gradient(135deg, #fff, #b0b0b0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.co-title-accent {
  background: linear-gradient(135deg, var(--accent), #FFB347);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 60px rgba(255,159,28,0.4);
}
.co-sub {
  font-size: 17px; line-height: 1.7; color: var(--text-secondary);
  max-width: 680px; margin: 0 auto;
}
.co-sub strong { color: var(--text); font-weight: 700; }
[data-theme="light"] .co-title { background: linear-gradient(135deg, #0d0d0d, #4a4a4a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Services */
.co-services {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-bottom: 60px;
}
.co-service {
  position: relative; overflow: hidden;
  padding: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s;
}
.co-service:hover {
  transform: translateY(-4px);
  border-color: rgba(255,159,28,0.25);
}
.co-service-glow {
  position: absolute; top: -50%; right: -20%;
  width: 400px; height: 400px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,159,28,0.12), transparent 70%);
  filter: blur(30px);
}
.co-service-icon {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,159,28,0.18), rgba(255,159,28,0.05));
  border: 1px solid rgba(255,159,28,0.3);
  color: var(--accent); margin-bottom: 22px;
  box-shadow: 0 8px 24px rgba(255,159,28,0.18);
}
.co-service-tag {
  position: relative; z-index: 1;
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 1.8px;
  color: var(--accent); margin-bottom: 8px;
}
.co-service-title {
  position: relative; z-index: 1;
  font-family: var(--font-heading); font-size: 26px; font-weight: 800;
  letter-spacing: -0.5px; margin-bottom: 14px; color: var(--text);
}
.co-service-desc {
  position: relative; z-index: 1;
  font-size: 14px; line-height: 1.7; color: var(--text-secondary);
  margin-bottom: 20px;
}
.co-feature-list {
  position: relative; z-index: 1;
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.co-feature-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--text-secondary);
}
.co-arrow {
  color: var(--accent); font-weight: 700; flex-shrink: 0;
}
.co-examples {
  position: relative; z-index: 1;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06);
}
.co-examples-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--text-tertiary); margin-bottom: 10px;
}
.co-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.co-chip {
  font-size: 11px; font-weight: 600;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(255,159,28,0.08); border: 1px solid rgba(255,159,28,0.2);
  color: var(--accent);
}

/* Process */
.co-process { position: relative; z-index: 1; margin-bottom: 60px; }
.co-process-header { text-align: center; margin-bottom: 36px; }
.co-section-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: var(--accent); margin-bottom: 8px;
}
.co-section-title {
  font-family: var(--font-heading); font-size: 32px; font-weight: 800;
  letter-spacing: -0.5px; color: var(--text);
}
.co-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.co-step {
  position: relative;
  padding: 24px 22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s;
}
.co-step:hover { transform: translateY(-3px); border-color: rgba(255,159,28,0.25); }
.co-step-num {
  display: inline-block;
  font-family: var(--font-heading); font-size: 32px; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), #FFB347);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.65; margin-bottom: 8px; letter-spacing: -1px;
}
.co-step-title {
  font-family: var(--font-heading); font-size: 16px; font-weight: 700;
  color: var(--text); margin-bottom: 8px;
}
.co-step-text { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

/* Trust bar */
.co-trust {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 22px; margin-bottom: 50px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
}
.co-trust-item { display: flex; align-items: center; gap: 12px; }
.co-trust-item svg { flex-shrink: 0; }
.co-trust-item strong { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.co-trust-item span { font-size: 11px; color: var(--text-tertiary); }

/* CTA */
.co-cta {
  position: relative; z-index: 1; overflow: hidden; text-align: center;
  padding: 56px 32px;
  background: linear-gradient(135deg, rgba(255,159,28,0.08), rgba(255,159,28,0.01));
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,159,28,0.2);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
.co-cta-glow {
  position: absolute; bottom: -200px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 400px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,159,28,0.3), transparent 70%);
  filter: blur(40px);
}
.co-cta-title {
  position: relative; z-index: 1;
  font-family: var(--font-heading); font-size: 38px; font-weight: 800;
  letter-spacing: -0.8px; margin: 16px 0 12px; color: var(--text);
}
.co-cta-sub {
  position: relative; z-index: 1;
  font-size: 15px; line-height: 1.7; color: var(--text-secondary);
  max-width: 500px; margin: 0 auto 28px;
}
.co-cta-actions {
  position: relative; z-index: 1;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* Light mode */
[data-theme="light"] .co-service,
[data-theme="light"] .co-step,
[data-theme="light"] .co-trust,
[data-theme="light"] .co-cta {
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4));
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 28px rgba(0,0,0,0.06);
}

/* Responsive */
@media (max-width: 900px) {
  .co-title { font-size: 48px; }
  .co-services { grid-template-columns: 1fr; }
  .co-steps { grid-template-columns: 1fr 1fr; }
  .co-trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .co-title { font-size: 36px; }
  .co-cta-title { font-size: 28px; }
  .co-steps { grid-template-columns: 1fr; }
  .co-trust { grid-template-columns: 1fr; }
  .co-cta { padding: 40px 24px; }
}

/* ── Placeholder "Coming Soon" Pages ── */
.soon-page {
  min-height: calc(100vh - 200px);
  display: flex; align-items: center; justify-content: center;
  padding: 60px 24px;
  position: relative; z-index: 1;
}
.soon-card {
  max-width: 620px; width: 100%; text-align: center;
  padding: 48px 40px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
}
.soon-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,159,28,0.2), rgba(255,159,28,0.05));
  border: 1px solid rgba(255,159,28,0.3);
  color: var(--accent); margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(255,159,28,0.2);
}
.soon-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: var(--accent); margin-bottom: 8px;
}
.soon-title {
  font-family: var(--font-heading); font-size: 38px; font-weight: 800;
  letter-spacing: -0.8px; line-height: 1.1; margin-bottom: 16px;
  background: linear-gradient(135deg, #fff, #c0c0c0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .soon-title {
  background: linear-gradient(135deg, #0d0d0d, #4a4a4a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.soon-sub { color: var(--text-secondary); font-size: 15px; line-height: 1.7; max-width: 480px; margin: 0 auto 12px; }
.soon-status {
  display: inline-block; margin-top: 8px; margin-bottom: 28px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--accent);
  background: rgba(255,159,28,0.1); border: 1px solid rgba(255,159,28,0.25);
  border-radius: 100px; padding: 6px 14px;
}
.soon-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.soon-contacts {
  margin-top: 24px; display: flex; flex-direction: column; gap: 10px;
}
.soon-contact {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 20px; border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text); text-decoration: none;
  transition: all 0.22s cubic-bezier(.2,.8,.2,1);
}
.soon-contact:hover {
  transform: translateY(-2px);
  border-color: rgba(255,159,28,0.35);
  background: rgba(255,159,28,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.soon-contact svg { color: var(--accent); flex-shrink: 0; }
.soon-contact strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.soon-contact span { font-size: 12px; color: var(--text-tertiary); }

[data-theme="light"] .soon-card { background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4)); border-color: rgba(0,0,0,0.08); box-shadow: 0 8px 28px rgba(0,0,0,0.06); }
[data-theme="light"] .soon-contact { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }

@media (max-width: 600px) {
  .soon-card { padding: 32px 24px; }
  .soon-title { font-size: 28px; }
  .soon-actions .pd-cta { flex: 1; }
}

/* Mobile */
@media (max-width: 480px) {
  .notification-panel {
    width: calc(100vw - 32px);
    left: auto; right: -50px;
  }
  .notification-panel::before { left: auto; right: 68px; }
}

/* Mobile */
.mobile-menu-toggle {
  display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 4px;
}
.mobile-menu {
  display: none; flex-direction: column;
  padding: 8px 24px 16px;
  max-width: 1100px; margin: 8px auto 0;
  background: var(--nav-bg);
  backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.mobile-menu.open { display: flex; }
.mobile-link {
  color: var(--text-secondary); text-decoration: none; padding: 14px 0;
  border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 500;
}
.mobile-link:last-child { border-bottom: none; }
.mobile-link:hover { color: var(--accent); }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .mobile-menu-toggle { display: block; }
}

/* ═══ PAGE SECTIONS ═══ */
.page-section { display: none; position: relative; z-index: 1; min-height: calc(100vh - 64px); }
.page-section.active { display: block; }

/* ═══ HERO — Centered, Cosmic ═══ */
.hero {
  max-width: 800px; margin: 0 auto; padding: 100px 24px 80px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
/* Animated sparkle loader for hero badge */
.star-loader {
  position: relative;
  width: 26px;
  height: 16px;
  flex-shrink: 0;
}
.star-loader svg {
  position: absolute;
  width: 8px; height: 8px;
  overflow: visible;
}
.star-loader svg path { fill: #FF9F1C; }
.star-loader #pegtopone   { top: 4px; left: 9px;  animation: sparkle-pop 1.8s ease-in-out infinite 0s;    }
.star-loader #pegtoptwo   { top: 4px; left: 0px;  animation: sparkle-pop 1.8s ease-in-out infinite 0.6s;  }
.star-loader #pegtopthree { top: 4px; left: 18px; animation: sparkle-pop 1.8s ease-in-out infinite 1.2s;  }
@keyframes sparkle-pop {
  0%   { transform: scale(0) translateY(4px);  opacity: 0; }
  25%  { transform: scale(1) translateY(0px);  opacity: 1; }
  65%  { transform: scale(0.7) translateY(-4px); opacity: 0.7; }
  100% { transform: scale(0) translateY(-7px); opacity: 0; }
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,159,28,0.07);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,159,28,0.2);
  border-top: 1px solid rgba(255,159,28,0.35);
  box-shadow: inset 0 1px 0 rgba(255,159,28,0.12);
  color: var(--accent); font-size: 13px; font-weight: 600;
  padding: 7px 18px; border-radius: var(--radius-pill);
  letter-spacing: 0.3px; cursor: default;
}
.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700; line-height: 1.08; margin-top: 28px;
  letter-spacing: -1.5px;
}
.accent { color: var(--accent); }
.hero-sub {
  font-size: 18px; color: var(--text-secondary); margin-top: 20px;
  max-width: 480px; line-height: 1.7;
}
.hero-ctas {
  display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; justify-content: center;
}

/* HUD Frame — soft glowing stats card */
.hero-hud { margin-top: 60px; width: 100%; max-width: 560px; }
.hud-frame {
  position: relative; padding: 32px 24px;
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-top: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-highlight), 0 8px 40px rgba(0,0,0,0.4);
  overflow: hidden;
}
.hud-frame::before {
  content: ''; position: absolute;
  top: -60%; left: 20%; width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(255,159,28,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.hud-content {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center;
}
.hud-stat-val {
  display: block; font-family: var(--font-heading); font-size: 36px; font-weight: 700;
  color: var(--text);
}
.hud-stat-label {
  display: block; font-size: 13px; color: var(--text-tertiary);
  letter-spacing: 0.5px; margin-top: 6px;
}

@media (max-width: 860px) {
  .hero { padding-top: 60px; }
  .hero-hud { max-width: 100%; }
}

/* ═══ BUTTONS ═══ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #000;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  padding: 13px 30px; border: none; border-radius: var(--radius-pill); cursor: pointer;
  transition: all 0.3s;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn-glow { box-shadow: var(--shadow-glow); }
.btn-glow:hover { box-shadow: 0 0 50px rgba(255,159,28,0.25); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text-secondary);
  border: 1px solid var(--glass-border-strong);
  border-top: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-pill);
  padding: 13px 30px; font-family: var(--font-body); font-size: 15px; font-weight: 500;
  cursor: pointer; transition: all 0.3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.btn-secondary:hover {
  background: rgba(255,159,28,0.08);
  border-color: rgba(255,159,28,0.35);
  border-top-color: rgba(255,159,28,0.5);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,159,28,0.15), 0 0 20px rgba(255,159,28,0.08);
}
.btn-sm { padding: 9px 20px; font-size: 13px; }

/* ═══ SECTIONS ═══ */
.section-title {
  font-family: var(--font-heading); font-size: 36px; font-weight: 700;
  text-align: center; letter-spacing: -0.5px;
}
.section-sub {
  color: var(--text-secondary); text-align: center; font-size: 16px; margin-top: 10px;
}
.featured-section {
  max-width: 1100px; margin: 0 auto; padding: 20px 24px 100px;
}
.featured-grid, .related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px; margin-top: 36px;
  perspective: 1400px;
}

.product-card-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform:
    rotateX(var(--tx, 0deg))
    rotateY(var(--ty, 0deg))
    translateY(var(--lift, 0px));
  transition:
    transform 0.6s cubic-bezier(.22,1.4,.36,1),
    box-shadow 0.4s ease;
  will-change: transform;
}
.product-card-wrap:hover {
  --lift: -8px;
  transition:
    transform 0.15s cubic-bezier(.2,.8,.3,1),
    box-shadow 0.3s ease;
}

/* Animated outline trace */
.card-trace-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}
.card-trace-svg rect {
  fill: none;
  stroke: #FF9F1C;
  stroke-width: 2;
  stroke-dasharray: 25 75;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.product-card-wrap:hover .card-trace-svg rect {
  opacity: 1;
  animation: card-run 1.8s linear infinite;
}
@keyframes card-run {
  to { stroke-dashoffset: -100; }
}

/* ═══ PRODUCT CARDS — Improved ═══ */
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-top: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-xl); overflow: hidden; cursor: pointer;
  box-shadow: var(--glass-highlight), 0 8px 32px rgba(0,0,0,0.4);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  position: relative;
}
.product-card-wrap:hover .product-card {
  background: var(--bg-card-hover);
  border-color: rgba(255,159,28,0.25);
  border-top-color: rgba(255,159,28,0.35);
  box-shadow:
    var(--glass-highlight),
    0 30px 80px rgba(0,0,0,0.55),
    0 0 50px rgba(255,159,28,0.14);
}

/* Inner parallax — gentle counter-movement for depth */
.product-card-img img,
.product-badge,
.product-price,
.btn-buy {
  transition: transform 0.45s cubic-bezier(.22,1.4,.36,1);
}
.product-card-wrap:hover .product-card-img img {
  transform: translate3d(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -4px), 0);
  transition: transform 0.2s ease-out;
}
.product-card-wrap:hover .product-badge {
  transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px), 20px);
  transition: transform 0.2s ease-out;
}
.product-card-wrap:hover .product-price {
  transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * -8px), 20px);
  transition: transform 0.2s ease-out;
}
.product-card-wrap:hover .product-card-body .btn-buy {
  transform: translate3d(calc(var(--px, 0) * 4px), calc(var(--py, 0) * 3px), 15px);
  transition: transform 0.2s ease-out;
}
.product-card-wrap:hover .product-card-title {
  transform: translateZ(10px);
  transition: transform 0.2s ease-out;
}
/* ── Card glint sweep ── */
@keyframes glint-sweep {
  0%        { left: -70%; opacity: 0; }
  5%        { opacity: 1; }
  45%       { left: 130%; opacity: 1; }
  46%, 100% { left: -70%; opacity: 0; }
}
.card-glint {
  position: absolute; top: -50%; left: -70%;
  width: 35%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: skewX(-18deg);
  z-index: 4; pointer-events: none; opacity: 0;
}
.product-card-wrap:hover .card-glint {
  animation: glint-sweep 2.2s ease-in-out infinite;
}

.product-card-img {
  position: relative; overflow: hidden; aspect-ratio: 16/9;
  background: linear-gradient(135deg, #0e0e0e 0%, #1a1a1a 100%);
}
.product-card-img::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255,159,28,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(0,245,212,0.04) 0%, transparent 50%);
  pointer-events: none;
}
.product-card-img img {
  position: absolute; inset: -10px; z-index: 1;
  width: calc(100% + 20px); height: calc(100% + 20px);
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(.2,.8,.3,1);
}
.product-card-img img[data-broken] {
  display: none;
}

/* Gradient overlay on image bottom */
.product-card-img::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to top, var(--bg-card), transparent);
  pointer-events: none;
}

.product-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 13px; font-weight: 700;
  padding: 6px 16px; border-radius: var(--radius-pill); letter-spacing: 0.8px;
  display: inline-flex; align-items: center; gap: 4px;
  text-transform: uppercase;
}
.product-badge.asset {
  background: rgba(255,159,28,0.9); color: #000;
  box-shadow: 0 2px 12px rgba(255,159,28,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.product-price {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-family: var(--font-heading); font-size: 15px; font-weight: 700;
  color: #00e676;
  background: rgba(6, 52, 24, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 200, 90, 0.25);
  border-top: 1px solid rgba(0, 220, 100, 0.4);
  box-shadow: inset 0 1px 0 rgba(0,220,100,0.15), 0 4px 14px rgba(0,0,0,0.5);
  letter-spacing: 0.3px;
}
.product-card-body {
  padding: 18px 18px 20px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
}
.product-card-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 220px at var(--mx, 50%) var(--my, 50%),
    var(--card-glow-color, rgba(255,255,255,0.11)),
    var(--card-glow-fade,  rgba(255,255,255,0.04)) 30%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}
.product-card-body:hover::before { opacity: 1; }
[data-theme="light"] .product-card-body {
  --card-glow-color: rgba(0,0,0,0.10);
  --card-glow-fade:  rgba(0,0,0,0.04);
}
.product-card-title {
  font-family: var(--font-heading); font-size: 16px; font-weight: 600;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-card-meta {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 13px;
}
.product-rating { display: flex; align-items: center; gap: 4px; color: var(--star); }

/* ── Interactive Rating Stars ── */
.rating {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 3px;
  --star-size: 16px;
}
.rating input { display: none; }
.rating label {
  cursor: pointer; line-height: 0;
  padding: 2px;
  transition: transform 0.15s ease;
}
.rating label svg {
  width: var(--star-size);
  height: var(--star-size);
  fill: var(--text-tertiary);
  transition: fill 0.2s ease, filter 0.2s ease;
}
.rating input:checked ~ label svg,
.rating label:hover ~ label svg,
.rating label:hover svg {
  fill: var(--accent);
}
.rating label:hover svg {
  filter: drop-shadow(0 0 4px rgba(255,159,28,0.5));
}
.rating label:active { transform: scale(0.85); }
[data-theme="light"] .rating label svg { fill: rgba(0,0,0,0.18); }

/* ── Reviews Column (left column, under product image) ── */
.reviews-col {
  margin-top: 20px;
  display: flex; flex-direction: column; gap: 0;
}
.reviews-col-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.reviews-col-title {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-heading); font-size: 15px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--text); text-transform: uppercase;
}
.reviews-col-count {
  font-size: 11px; font-weight: 600; color: var(--text-tertiary);
  letter-spacing: 0.5px; text-transform: uppercase;
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border);
  border-radius: 20px; padding: 3px 10px;
}

/* ── Review Cards ── */
.rc-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.rc-empty {
  font-size: 13px; color: var(--text-tertiary); text-align: center;
  padding: 24px 0; letter-spacing: 0.2px;
}
.rc-loading {
  display: flex; gap: 6px; justify-content: center; padding: 20px 0;
}
.rc-loading span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: 0.4;
  animation: rc-pulse 1s ease-in-out infinite;
}
.rc-loading span:nth-child(2) { animation-delay: .15s; }
.rc-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes rc-pulse { 0%,100%{opacity:.2;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }

.rc {
  display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(245,165,36,0.12);
  border-left: 2px solid var(--accent);
  border-radius: 10px; padding: 14px 16px;
  transition: border-color .2s, background .2s;
}
.rc:hover { border-color: rgba(245,165,36,0.35); background: rgba(245,165,36,0.04); }
.rc-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(245,165,36,0.25), rgba(245,165,36,0.08));
  border: 1px solid rgba(245,165,36,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: 0.5px;
}
.rc-content { flex: 1; min-width: 0; }
.rc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.rc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-name { font-size: 13px; font-weight: 700; color: var(--text); }
.rc-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  color: var(--accent); background: rgba(245,165,36,0.1);
  border: 1px solid rgba(245,165,36,0.25); border-radius: 4px;
  padding: 2px 6px;
}
.rc-stars { display: flex; gap: 2px; flex-shrink: 0; }
.rc-body {
  font-size: 13px; color: var(--text-secondary); line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
}
.rc-date { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; display: block; }

/* ── Review Form ── */
.rf-form {
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(245,165,36,0.18);
  border-radius: 12px; padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 4px;
}
.rf-form-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--text-tertiary);
}
.rf-stars {
  display: flex; gap: 6px; align-items: center;
}
.rf-star-label { cursor: pointer; display: flex; }
.rf-star-svg {
  fill: rgba(255,255,255,0.08); stroke: rgba(255,255,255,0.15); stroke-width: 1.5;
  transition: fill .15s, stroke .15s, transform .12s;
}
.rf-star-label:hover .rf-star-svg,
.rf-star--active .rf-star-svg {
  fill: var(--accent); stroke: var(--accent); transform: scale(1.15);
}
.rf-textarea {
  width: 100%; background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
  padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 13px;
  line-height: 1.6; resize: none; outline: none; min-height: 90px;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.rf-textarea::placeholder { color: var(--text-tertiary); }
.rf-textarea:focus {
  border-color: rgba(245,165,36,0.5);
  box-shadow: 0 0 0 3px rgba(245,165,36,0.08);
}
.rf-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px; background: var(--accent); border: none;
  color: #000; font-family: var(--font-body); font-size: 13px; font-weight: 800;
  letter-spacing: 0.5px; border-radius: 8px; cursor: pointer;
  transition: opacity .15s, transform .12s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(245,165,36,0.25);
}
.rf-submit:hover { opacity: .9; box-shadow: 0 6px 24px rgba(245,165,36,0.4); }
.rf-submit:active { transform: scale(.98); }
.rf-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Gate states */
.rf-gate {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 10px; padding: 14px 16px; margin-top: 4px;
}
.rf-gate--locked { border-color: rgba(245,165,36,0.15); }
.rf-gate-text { flex: 1; }
.rf-gate-title { font-size: 13px; font-weight: 700; color: var(--text); }
.rf-gate-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.rf-signin-btn {
  padding: 8px 16px; background: transparent;
  border: 1px solid rgba(245,165,36,0.4); border-radius: 6px;
  color: var(--accent); font-family: var(--font-body); font-size: 12px;
  font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.rf-signin-btn:hover { background: rgba(245,165,36,0.1); border-color: var(--accent); }

/* Light mode overrides */
[data-theme="light"] .rc { background: rgba(0,0,0,0.02); border-left-color: var(--accent); }
[data-theme="light"] .rc:hover { background: rgba(245,165,36,0.04); }
[data-theme="light"] .rf-form { background: rgba(0,0,0,0.02); }
[data-theme="light"] .rf-textarea { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .rf-gate { background: rgba(0,0,0,0.02); }
[data-theme="light"] .rc-avatar { background: rgba(245,165,36,0.12); }

/* Legacy stubs (keep for any old refs) */
.star-icon { flex-shrink: 0; }
.product-review-count { color: var(--text-tertiary); font-size: 12px; }

.btn-buy {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 14px; padding: 11px;
  background: var(--accent); border: none; color: #000;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.3px; border-radius: var(--radius-pill); cursor: pointer;
  transition: all 0.3s;
}
.btn-buy:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(255,159,28,0.3);
}

/* ═══ SHOP PAGE ═══ */
.shop-container { max-width: 1100px; margin: 0 auto; padding: 48px 24px 100px; }
.shop-title {
  font-family: var(--font-heading); font-size: 40px; font-weight: 700; text-align: center;
  letter-spacing: -0.5px;
}
.shop-sub {
  color: var(--text-secondary); text-align: center; margin-top: 10px; font-size: 16px;
}
.shop-controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 40px; flex-wrap: wrap;
}
.search-wrap {
  position: relative; width: 100%; max-width: 500px;
}
.search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--text-secondary); pointer-events: none; z-index: 1;
}
.shop-search {
  width: 100%; padding: 13px 18px 13px 44px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border-strong);
  border-top: 1px solid rgba(255,255,255,0.12);
  color: var(--text); font-size: 14px; border-radius: var(--radius-pill);
  font-family: var(--font-body);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.shop-search:focus {
  outline: none;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,159,28,0.4);
  box-shadow: inset 0 1px 0 rgba(255,159,28,0.1), 0 0 0 4px rgba(255,159,28,0.08);
}
.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 22px; margin-top: 28px;
  perspective: 1400px;
}
.empty-state {
  grid-column: 1 / -1; text-align: center; padding: 80px 20px;
  color: var(--text-tertiary); font-size: 16px;
}

/* ═══ PRODUCT DETAIL (Glassmorphism Redesign) ═══ */
.product-detail-container {
  max-width: 1200px; margin: 0 auto; padding: 32px 24px 100px;
  position: relative;
}

/* Ambient accent glow blob behind everything */
.pd-ambient {
  position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 500px; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(255,159,28,0.18), transparent 70%);
  filter: blur(40px);
}

.back-link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-secondary); background: none; border: none;
  font-size: 14px; cursor: pointer; margin-bottom: 24px; font-family: var(--font-body);
  transition: color 0.2s, transform 0.2s;
}
.back-link:hover { color: var(--accent); transform: translateX(-3px); }

/* ── HERO ── */
.pd-hero {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: hidden;
}
.pd-hero-glow {
  position: absolute; top: -50%; right: -20%; width: 500px; height: 500px;
  background: radial-gradient(closest-side, rgba(255,159,28,0.15), transparent 70%);
  pointer-events: none; filter: blur(30px);
}

.pd-hero-left {
  display: flex; flex-direction: column; gap: 16px;
}

.pd-hero-image {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 16/10; background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
}
.pd-hero-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.pd-hero-image:hover img { transform: scale(1.04); }

/* Corner brackets */
.pd-corner {
  position: absolute; width: 22px; height: 22px; z-index: 2;
  border: 2px solid var(--accent); opacity: 0.6;
}
.pd-corner--tl { top: 10px; left: 10px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.pd-corner--tr { top: 10px; right: 10px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.pd-corner--bl { bottom: 10px; left: 10px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.pd-corner--br { bottom: 10px; right: 10px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

.pd-image-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.06) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: pd-shine 6s ease-in-out infinite;
}
@keyframes pd-shine {
  0%, 100% { background-position: -100% 0; }
  50% { background-position: 200% 0; }
}

/* ── HERO INFO ── */
.pd-hero-info {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
}
.pd-tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pd-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 100px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
}
.pd-tag--asset {
  background: linear-gradient(135deg, var(--accent), #FFB347);
  color: #000;
}
.pd-tag-dot {
  width: 5px; height: 5px; border-radius: 50%; background: #000;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
}
.pd-tag--owned {
  background: rgba(76,175,80,0.15);
  border: 1px solid rgba(76,175,80,0.4);
  color: #6bcf6f;
}

.pd-title {
  font-family: var(--font-heading); font-size: 36px; font-weight: 800;
  letter-spacing: -0.8px; line-height: 1.1; color: var(--text);
  background: linear-gradient(135deg, #fff, #c0c0c0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .pd-title {
  background: linear-gradient(135deg, #0d0d0d, #4a4a4a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.pd-rating-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 13px; color: var(--text-secondary);
}
.pd-rating-stars { display: flex; gap: 2px; }
.pd-rating-num { font-weight: 700; color: var(--text); }
.pd-rating-sep { color: var(--text-tertiary); }
.pd-rating-count { color: var(--text-tertiary); }

.pd-price {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 52px; line-height: 1; letter-spacing: -1.5px;
  color: var(--accent); margin-top: 20px;
  text-shadow: 0 0 40px rgba(255,159,28,0.3);
}
.pd-price-currency { font-size: 28px; vertical-align: super; margin-right: 4px; opacity: 0.85; }
.pd-price-cents { font-size: 36px; vertical-align: baseline; opacity: 0.85; letter-spacing: 0; }

.pd-title-accent {
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
  background: none;
}

.pd-desc-block { margin-top: 20px; }
.pd-desc-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--accent); margin-bottom: 6px; text-transform: uppercase;
}
.pd-desc {
  font-size: 14px; line-height: 1.7;
  color: var(--text-secondary);
}

.pd-features { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; padding: 0; }
.pd-feature {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-secondary);
}
.pd-feature-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%; background: rgba(255,159,28,0.15);
  border: 1px solid rgba(255,159,28,0.3); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}

.pd-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.pd-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 100px;
  font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0.3px;
  cursor: pointer; transition: all 0.25s;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.pd-cta--primary {
  background: linear-gradient(135deg, #FF9F1C, #FFB347);
  color: #fff; border: 2px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 14px -2px rgba(255,159,28,0.45);
}
.pd-cta--primary:hover {
  border-color: #fff;
  box-shadow: 0 0.6em 1.6em -0.4em #BF5800, 0 0 0 4px rgba(255,159,28,0.15), inset 0 1px 0 rgba(255,255,255,0.3);
  transform: translateY(-2px);
}
.pd-cta--ghost {
  background: rgba(255,255,255,0.04); color: var(--text);
  border-color: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
  text-decoration: none;
}
.pd-cta--ghost:hover {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}
.pd-cta.in-cart {
  background: rgba(255,159,28,0.12); border-color: rgba(255,159,28,0.4); color: var(--accent);
}
.pd-cta.in-cart svg { fill: var(--accent); }

/* Download Button — Uiverse-style, adapted to site palette */
.pd-download-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  height: 48px; padding: 0 1.6em 0 1.3em; box-sizing: border-box;
  color: #fff; cursor: pointer; text-decoration: none;
  background: #FF9F1C;
  background: linear-gradient(0deg, #FF7D00 0%, #FFB347 100%);
  border: 2px solid #FF9F1C;
  border-radius: 20em;
  box-shadow: 0 0.4em 1.2em -0.4em rgba(255,125,0,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.18s;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.pd-download-btn svg { margin-right: 8px; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); }
.pd-download-btn:hover {
  border-color: #fff;
  box-shadow: 0 0.6em 1.6em -0.4em #BF5800, 0 0 0 4px rgba(255,159,28,0.15), inset 0 1px 0 rgba(255,255,255,0.3);
  transform: translateY(-2px);
}
.pd-download-btn:active {
  transform: translateY(0);
  box-shadow: 0 0.3em 0.9em -0.4em #BF5800, inset 0 1px 0 rgba(255,255,255,0.25);
}
[data-theme="light"] .pd-download-btn { color: #fff; }

/* ── REVIEWS SECTION ── */
.pd-reviews {
  position: relative; z-index: 1;
  margin-top: 40px;
}
.pd-reviews-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 24px;
}
.pd-section-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: var(--accent); margin-bottom: 6px;
}
.pd-section-title {
  font-family: var(--font-heading); font-size: 28px; font-weight: 800;
  letter-spacing: -0.5px;
}

.pd-reviews-grid {
  display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start;
}

/* ── SUMMARY CARD (left) ── */
.pd-summary {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  position: sticky; top: 24px;
}
.pd-summary-avg { text-align: center; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.pd-summary-ring {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 8px 18px; border-radius: 100px;
  background: rgba(255,159,28,0.08); border: 1px solid rgba(255,159,28,0.25);
  margin-bottom: 12px;
}
.pd-summary-num {
  font-family: var(--font-heading); font-size: 38px; font-weight: 800;
  color: var(--accent); letter-spacing: -1px; line-height: 1;
}
.pd-summary-of {
  font-size: 13px; font-weight: 600; color: var(--text-tertiary);
}
.pd-summary-stars { display: flex; gap: 3px; justify-content: center; margin-bottom: 8px; }
.pd-summary-stars .star-icon { width: 16px; height: 16px; }
.pd-summary-total { font-size: 12px; color: var(--text-tertiary); }

.pd-bars { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.pd-bar-row { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 10px; }
.pd-bar-label {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
}
.pd-bar-track {
  height: 6px; border-radius: 100px; background: rgba(255,255,255,0.05);
  overflow: hidden; position: relative;
}
.pd-bar-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--accent), #FFB347);
  box-shadow: 0 0 12px rgba(255,159,28,0.5);
  transition: width 0.8s cubic-bezier(.2,.8,.2,1);
}
.pd-bar-count {
  font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-align: right;
}

/* ── REVIEWS MAIN (right) ── */
.pd-reviews-main {
  display: flex; flex-direction: column; gap: 14px;
}
.rc-list { display: flex; flex-direction: column; gap: 12px; }

.rc-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px; gap: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px); border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 16px;
}
.rc-empty p { font-size: 14px; font-weight: 700; color: var(--text); }
.rc-empty span { font-size: 12px; color: var(--text-tertiary); }

.rc-loading { display: flex; gap: 6px; justify-content: center; padding: 24px 0; }
.rc-loading span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: 0.4;
  animation: rc-pulse 1s ease-in-out infinite;
}
.rc-loading span:nth-child(2) { animation-delay: .15s; }
.rc-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes rc-pulse { 0%,100%{opacity:.2;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }

.rc {
  display: flex; gap: 14px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: all 0.25s cubic-bezier(.2,.8,.2,1);
  position: relative; overflow: hidden;
}
.rc::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: 0; transition: opacity 0.25s;
}
.rc:hover {
  transform: translateY(-2px);
  border-color: rgba(255,159,28,0.25);
  box-shadow: 0 12px 36px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,159,28,0.15);
}
.rc:hover::before { opacity: 1; }

.rc-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255,159,28,0.3), rgba(255,159,28,0.08));
  border: 1px solid rgba(255,159,28,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(255,159,28,0.2);
}
.rc-content { flex: 1; min-width: 0; }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.rc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-name { font-size: 14px; font-weight: 700; color: var(--text); }
.rc-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  color: var(--accent);
  background: linear-gradient(135deg, rgba(255,159,28,0.18), rgba(255,159,28,0.06));
  border: 1px solid rgba(255,159,28,0.3); border-radius: 5px;
  padding: 2px 7px;
}
.rc-stars { display: flex; gap: 2px; flex-shrink: 0; }
.rc-body {
  font-size: 13.5px; color: var(--text-secondary); line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
}
.rc-date { font-size: 11px; color: var(--text-tertiary); margin-top: 8px; display: block; letter-spacing: 0.3px; }

/* ── REVIEW FORM ── */
.rf-form {
  background: linear-gradient(135deg, rgba(255,159,28,0.06), rgba(255,159,28,0.01));
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,159,28,0.2);
  border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 4px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
}
.rf-form-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1.8px;
  color: var(--accent);
}
.rf-stars { display: flex; gap: 8px; align-items: center; }
.rf-star-label { cursor: pointer; display: flex; }
.rf-star-svg {
  fill: rgba(255,255,255,0.08); stroke: rgba(255,255,255,0.18); stroke-width: 1.5;
  transition: fill .18s, stroke .18s, transform .14s, filter .18s;
}
.rf-star-label:hover .rf-star-svg {
  fill: var(--accent); stroke: var(--accent); transform: scale(1.18);
  filter: drop-shadow(0 0 6px rgba(255,159,28,0.6));
}
.rf-star--active .rf-star-svg {
  fill: var(--accent); stroke: var(--accent);
  filter: drop-shadow(0 0 4px rgba(255,159,28,0.5));
}

.rf-textarea {
  width: 100%; background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
  padding: 14px 16px; color: var(--text); font-family: var(--font-body); font-size: 13px;
  line-height: 1.6; resize: none; outline: none; min-height: 90px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-sizing: border-box;
}
.rf-textarea::placeholder { color: var(--text-tertiary); }
.rf-textarea:focus {
  border-color: rgba(255,159,28,0.5);
  background: rgba(0,0,0,0.4);
  box-shadow: 0 0 0 4px rgba(255,159,28,0.1), 0 0 24px rgba(255,159,28,0.15);
}

.rf-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px; border: none;
  background: linear-gradient(135deg, var(--accent), #FFB347);
  color: #000; font-family: var(--font-body); font-size: 13px; font-weight: 800;
  letter-spacing: 0.5px; border-radius: 10px; cursor: pointer;
  transition: all 0.2s; box-shadow: 0 8px 24px rgba(255,159,28,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.rf-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,159,28,0.5), inset 0 1px 0 rgba(255,255,255,0.4); }
.rf-submit:active { transform: scale(.98); }
.rf-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Gate states */
.rf-gate {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px);
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 14px; padding: 16px 18px; margin-top: 4px;
}
.rf-gate--locked { border-color: rgba(255,159,28,0.18); background: linear-gradient(135deg, rgba(255,159,28,0.04), rgba(255,159,28,0.01)); }
.rf-gate-text { flex: 1; }
.rf-gate-title { font-size: 13px; font-weight: 700; color: var(--text); }
.rf-gate-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.rf-signin-btn {
  padding: 9px 18px; background: transparent;
  border: 1px solid rgba(255,159,28,0.4); border-radius: 100px;
  color: var(--accent); font-family: var(--font-body); font-size: 12px;
  font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all .18s;
}
.rf-signin-btn:hover { background: rgba(255,159,28,0.12); border-color: var(--accent); transform: translateY(-1px); }

/* Related */
.related-section { margin-top: 80px; position: relative; z-index: 1; }

/* Light mode */
[data-theme="light"] .pd-hero,
[data-theme="light"] .pd-summary,
[data-theme="light"] .rc,
[data-theme="light"] .rf-form {
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4));
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 28px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="light"] .rc-avatar { background: linear-gradient(135deg, rgba(255,159,28,0.18), rgba(255,159,28,0.05)); }
[data-theme="light"] .rf-textarea { background: rgba(255,255,255,0.5); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .rf-textarea:focus { background: rgba(255,255,255,0.8); }
[data-theme="light"] .pd-bar-track { background: rgba(0,0,0,0.06); }

/* Responsive */
@media (max-width: 980px) {
  .pd-hero { grid-template-columns: 1fr; padding: 24px; }
  .pd-reviews-grid { grid-template-columns: 1fr; }
  .pd-summary { position: static; }
}
@media (max-width: 600px) {
  .pd-title { font-size: 28px; }
  .pd-price { font-size: 42px; }
  .pd-section-title { font-size: 22px; }
  .pd-hero { padding: 18px; }
  .pd-cta { flex: 1; }
}

/* Legacy stubs */
.star-icon { flex-shrink: 0; }
.product-review-count { color: var(--text-tertiary); font-size: 12px; }

/* ═══ ADMIN DASHBOARD — Redesign ═══ */
.admin-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-base);
  position: fixed; inset: 0; z-index: 100;
}

/* ── Sidebar ── */
.admin-sidebar {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.02);
  border-right: 1px solid rgba(255,255,255,0.07);
  padding: 20px 12px 16px;
  position: relative; overflow: hidden;
}
.admin-sidebar::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 40%, transparent 100%);
  pointer-events: none;
}
/* New sidebar elements from prototype */
.sb-logo-row { display: flex; align-items: center; gap: 10px; padding: 20px 16px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sb-logo-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid #FF9F1C; box-shadow: 0 0 14px rgba(255,159,28,0.3); flex-shrink: 0; }
.sb-logo-text { font-size: 16px; font-weight: 700; color: #f0f0f0; }
.sb-logo-text span { color: #FF9F1C; }
.sb-sec { padding: 12px 10px 4px; }
.sb-lbl { font-size: 9px; font-weight: 800; letter-spacing: 1.8px; color: #444; text-transform: uppercase; padding: 0 8px; margin-bottom: 4px; display: block; }
.sb-div { height: 1px; background: rgba(255,255,255,0.06); margin: 8px 10px; }
.sb-bot { margin-top: auto; padding: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.sb-admin-badge { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: rgba(255,159,28,0.06); border: 1px solid rgba(255,159,28,0.14); }
.sb-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, rgba(255,159,28,0.35), rgba(255,159,28,0.1)); border: 1px solid rgba(255,159,28,0.4); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #FF9F1C; flex-shrink: 0; }
.sb-name { font-size: 12px; font-weight: 700; color: #f0f0f0; }
.sb-role { font-size: 10px; color: #FF9F1C; font-weight: 600; }
.nb { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; font-size: 10px; font-weight: 800; border-radius: 100px; padding: 1px 7px; }
.nb:empty { display: none; }
.nb-green { background: rgba(0,230,118,0.12); color: #00e676; }
.nb-orange { background: rgba(255,159,28,0.15); color: #FF9F1C; }
/* Top Products widget */
.tp-item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.tp-item:last-child { border-bottom: none; }
.tp-thumb { width: 42px; height: 30px; border-radius: 6px; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.07); }
.tp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tp-name { font-size: 13px; font-weight: 600; color: #f0f0f0; flex: 1; }
.tp-rev { font-size: 12px; font-weight: 700; color: #FF9F1C; }
/* Activity feed */
.act-feed { display: flex; flex-direction: column; padding: 4px 0; }
.act-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.act-item:last-child { border-bottom: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.dot.g { background: #00e676; box-shadow: 0 0 8px rgba(0,230,118,0.5); }
.dot.o { background: #FF9F1C; box-shadow: 0 0 8px rgba(255,159,28,0.5); }
.dot.r { background: #ff6b6b; box-shadow: 0 0 8px rgba(255,107,107,0.5); }
.act-text { font-size: 12.5px; color: #999; line-height: 1.5; }
.act-text strong { color: #f0f0f0; }
.act-time { font-size: 10px; color: #444; margin-top: 2px; }
/* Dashboard bottom 2-col */
.dash-bot { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sec-mini-title { font-size: 16px; font-weight: 700; color: #f0f0f0; }
/* legacy — keep for compat */
.sb-logo { display: flex; align-items: center; gap: 8px; padding: 0 6px 20px; }
.sb-section-label {
  font-size: 9px; font-weight: 800; letter-spacing: 1.8px;
  color: #444; text-transform: uppercase;
  padding: 0 8px; margin-bottom: 4px;
}
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 10px;
  background: none; border: none; border-left: 2px solid transparent;
  color: #777; font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left; text-decoration: none;
  font-family: var(--font-body); transition: background .15s, color .15s;
  width: 100%;
}
.sidebar-link:hover { background: rgba(255,255,255,0.05); color: #ccc; }
.sidebar-link.active {
  background: rgba(255,159,28,0.08); color: #FF9F1C;
  font-weight: 700; border-left-color: #FF9F1C;
}
.sb-badge {
  margin-left: auto; font-size: 10px; font-weight: 800;
  background: rgba(0,230,118,0.12); color: #00e676;
  border-radius: 100px; padding: 1px 7px;
}
.sb-badge:empty { display: none; }
.sb-spacer { flex: 1; }
.sb-footer {
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 12px; margin-top: 12px;
}
.sb-admin-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 10px; margin-bottom: 4px;
  background: rgba(255,159,28,0.06);
  border: 1px solid rgba(255,159,28,0.14);
}
.sb-admin-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #FF9F1C, #FFB347);
  color: #1a0e00; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sb-admin-info { min-width: 0; }
.sb-admin-name {
  font-size: 13px; font-weight: 700; color: #f0f0f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-admin-role { font-size: 10px; color: #FF9F1C; font-weight: 600; letter-spacing: 0.5px; }

/* ── Admin Main ── */
.admin-main {
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(8,8,8,0.8);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  flex-shrink: 0; position: relative; z-index: 5;
}
.admin-topbar-title {
  font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: #f0f0f0;
}
.admin-topbar-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: #FF9F1C;
  background: rgba(255,159,28,0.08); border: 1px solid rgba(255,159,28,0.2);
  border-radius: 100px; padding: 4px 12px;
}
.admin-content {
  flex: 1; overflow-y: auto; padding: 28px;
  position: relative; z-index: 1;
}

/* ── Page Header ── */
.admin-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px;
}
.page-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  color: #FF9F1C; text-transform: uppercase; margin-bottom: 4px;
}
.page-title {
  font-family: var(--font-heading); font-size: 26px; font-weight: 900;
  color: #f0f0f0; letter-spacing: -0.5px;
}
.page-title span { color: #FF9F1C; }
/* compat shim */
.admin-page-title {
  font-family: var(--font-heading); font-size: 26px; font-weight: 700;
  margin-bottom: 24px; letter-spacing: -0.3px;
}
.admin-header-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
.admin-header-row .admin-page-title { margin-bottom: 0; }

/* ── Stat Cards ── */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
}
.stat-card {
  padding: 20px 22px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.4);
  transition: border-color .2s, transform .2s;
}
.stat-card:hover { border-color: rgba(255,159,28,0.2); transform: translateY(-2px); }
.stat-card::after {
  content: ''; position: absolute; top: -40%; right: -20%; width: 80%; height: 160%;
  background: radial-gradient(ellipse, rgba(255,159,28,0.04), transparent 70%);
  pointer-events: none;
}
.stat-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,159,28,0.1); border: 1px solid rgba(255,159,28,0.2);
  box-shadow: 0 0 16px rgba(255,159,28,0.12);
  display: flex; align-items: center; justify-content: center;
  color: #FF9F1C; margin-bottom: 14px; flex-shrink: 0;
}
.stat-label {
  font-size: 10px; font-weight: 700; color: #555;
  text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 6px;
}
.stat-value {
  font-family: var(--font-heading); font-size: 28px; font-weight: 800;
  color: #f0f0f0; display: block; letter-spacing: -0.5px;
}
.stat-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: #00e676;
  background: rgba(0,230,118,0.08); border: 1px solid rgba(0,230,118,0.18);
  border-radius: 100px; padding: 2px 8px; margin-top: 8px;
}
.stat-delta.down { color: #ff6b6b; background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.18); }

/* ── Revenue Chart ── */
.admin-chart-section { margin-bottom: 24px; }
.revenue-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.4);
  padding: 24px 24px 0;
}
.revenue-card-glow {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 320px; height: 160px; border-radius: 50%;
  background: rgba(255,159,28,0.07); filter: blur(48px); pointer-events: none;
}
.revenue-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 4px;
}
.revenue-card-title-wrap { display: flex; align-items: center; gap: 12px; }
.revenue-card-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,159,28,0.1); color: #FF9F1C;
  display: grid; place-content: center; flex-shrink: 0;
}
.revenue-card-title { font-size: 14px; font-weight: 600; color: #f0f0f0; }
.revenue-card-sub { font-size: 11px; color: #555; margin-top: 2px; }
.ch-total { font-size: 24px; font-weight: 800; color: #FF9F1C; }
.revenue-chart-wrap { padding: 8px 32px 18px; }
.revenue-chart-outer { display: flex; height: 160px; }
.revenue-yaxis { width: 50px; flex-shrink: 0; position: relative; }
.revenue-ylabel {
  position: absolute; right: 8px; transform: translateY(-50%);
  font-size: 10px; color: #555; font-family: var(--font-body); white-space: nowrap;
}
.revenue-chart-area { flex: 1; position: relative; }
.revenue-svg { width: 100%; height: 100%; display: block; }
.revenue-xaxis { position: relative; height: 22px; margin-left: 50px; margin-top: 4px; }
.revenue-xlabel {
  position: absolute; transform: translateX(-50%);
  font-size: 10px; color: #555; font-family: var(--font-body); white-space: nowrap; top: 4px;
}
.revenue-xlabel:first-child { transform: none; }
.revenue-xlabel:last-child { transform: translateX(-100%); }
.revenue-data-point {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: #FF9F1C; border: 2px solid #0a0a0a;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 1; opacity: 0.85;
}
.revenue-hover-overlay { position: absolute; inset: 0; z-index: 4; cursor: crosshair; }
.revenue-crosshair {
  display: none; position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255,159,28,0.25); pointer-events: none; z-index: 2; transform: translateX(-50%);
}
.revenue-hover-point {
  display: none; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: #FF9F1C; border: 2px solid #0a0a0a;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 3;
  box-shadow: 0 0 8px rgba(255,159,28,0.6);
}
.revenue-tooltip {
  display: none; position: absolute; z-index: 5; pointer-events: none;
  background: #0e0e0e; border: 1px solid rgba(255,159,28,0.3);
  color: #FF9F1C; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 8px;
  transform: translate(-50%, calc(-100% - 10px));
  white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.revenue-dot-wrap { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.revenue-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #FF9F1C;
  box-shadow: 0 0 10px rgba(255,159,28,0.6); position: relative; z-index: 1;
}
.revenue-dot-pulse {
  position: absolute; inset: -6px; border-radius: 50%;
  background: rgba(255,159,28,0.22); animation: rev-pulse 2s ease-in-out infinite;
}
@keyframes rev-pulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.6);opacity:0} }

/* ── Glass Tables ── */
.admin-table-section { margin-bottom: 24px; }
.admin-section-title {
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  color: #444; text-transform: uppercase; margin-bottom: 12px;
}
.glass-table-wrap {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.35);
  overflow: hidden;
}
.glass-table-head {
  display: grid; padding: 11px 18px;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  color: #444; text-transform: uppercase; align-items: center;
}
.glass-table-row {
  display: grid; padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: center; font-size: 13px;
  transition: background .15s; color: #999;
}
.glass-table-row:hover { background: rgba(255,255,255,0.035); }
.glass-table-row:last-child { border-bottom: none; }
.glass-table-row strong, .glass-table-row b { color: #f0f0f0; }

/* keep old <table> styles for modal forms */
.table-wrap {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.35);
  border-radius: 18px; overflow: auto;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  text-align: left; padding: 11px 18px; font-weight: 800; font-size: 10px;
  text-transform: uppercase; letter-spacing: 1.5px; color: #444;
  background: rgba(255,255,255,0.025); border-bottom: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
}
.admin-table td { padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,0.04); color: #999; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255,255,255,0.035); }
.admin-table strong { color: #f0f0f0; }
.mono { font-size: 12px; color: #555; font-family: var(--font-mono); }
.table-thumb { width: 48px; height: 32px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,0.07); }
.table-thumb img { width: 100%; height: 100%; object-fit: cover; }
.action-cell { display: flex; gap: 6px; }
.btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: #777; cursor: pointer; transition: all .18s;
}
.btn-icon:hover { color: #f0f0f0; background: rgba(255,255,255,0.1); }
.btn-icon.danger:hover { color: #ff6b6b; background: rgba(255,107,107,0.12); border-color: rgba(255,107,107,0.25); }

/* ── Status Badges ── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: 0.8px;
  padding: 3px 10px; border-radius: 100px; text-transform: uppercase;
}
.badge-paid     { color:#00e676; background:rgba(0,230,118,0.1);   border:1px solid rgba(0,230,118,0.25); }
.badge-pending  { color:#FF9F1C; background:rgba(255,159,28,0.1);  border:1px solid rgba(255,159,28,0.25); }
.badge-refund   { color:#ff6b6b; background:rgba(255,107,107,0.1); border:1px solid rgba(255,107,107,0.25); }
.badge-active   { color:#00e676; background:rgba(0,230,118,0.1);   border:1px solid rgba(0,230,118,0.25); }
.badge-inactive { color:#555;    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1); }
.badge-asset    { color:#FF9F1C; background:rgba(255,159,28,0.12); border:1px solid rgba(255,159,28,0.3); }
.badge-admin    { color:#FF9F1C; background:rgba(255,159,28,0.1);  border:1px solid rgba(255,159,28,0.25); }
.badge-user     { color:#999;    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1); }
/* compat */
.status-pill {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
}
.status-pill.paid     { color:#00e676; background:rgba(0,230,118,0.1);   border:1px solid rgba(0,230,118,0.25); }
.status-pill.pending  { color:#FF9F1C; background:rgba(255,159,28,0.1);  border:1px solid rgba(255,159,28,0.25); }
.status-pill.refunded { color:#ff6b6b; background:rgba(255,107,107,0.1); border:1px solid rgba(255,107,107,0.25); }
.role-badge {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-size: 10px; font-weight: 800;
}
.role-badge.admin { color:#FF9F1C; background:rgba(255,159,28,0.1);  border:1px solid rgba(255,159,28,0.25); }
.role-badge.user  { color:#999;    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1); }

/* ── Dashboard bottom ── */
.dash-bottom { display: grid; grid-template-columns: 1fr 290px; gap: 20px; margin-top: 24px; }
.activity-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px; padding: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.4);
}
.activity-title { font-size: 13px; font-weight: 700; color: #f0f0f0; margin-bottom: 16px; }
.activity-item { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.activity-dot.green  { background:#00e676; box-shadow:0 0 8px rgba(0,230,118,0.5); }
.activity-dot.orange { background:#FF9F1C; box-shadow:0 0 8px rgba(255,159,28,0.5); }
.activity-dot.red    { background:#ff6b6b; box-shadow:0 0 8px rgba(255,107,107,0.5); }
.activity-text { font-size: 12px; color: #777; line-height: 1.5; }
.activity-time { font-size: 11px; color: #444; margin-top: 2px; }

/* ── Search / Input ── */
.admin-search-bar { margin-bottom: 16px; }
.admin-input {
  padding: 11px 16px; background: #161616;
  border: 1px solid rgba(255,255,255,0.07); border-radius: 10px;
  color: #f0f0f0; font-size: 13px; font-family: var(--font-body);
  transition: border-color .2s, box-shadow .2s;
}
.admin-input:focus { outline: none; border-color: #FF9F1C; box-shadow: 0 0 0 3px rgba(255,159,28,0.1); }
.admin-input.full { width: 100%; box-sizing: border-box; }
.admin-textarea { min-height: 80px; resize: vertical; }

/* ── Settings ── */
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.settings-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.4);
  border-radius: 18px; padding: 22px;
}
.settings-card.danger {
  border-color: rgba(255,107,107,0.18);
  border-top-color: rgba(255,107,107,0.3);
}
.settings-card h3, .settings-card-title {
  font-size: 13px; font-weight: 700; color: #f0f0f0;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.settings-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: #777; margin-bottom: 14px;
}
.settings-toggle-label {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; font-size: 13px; color: #999;
}
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; border-radius: 12px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer; transition: all 0.25s;
}
.toggle-slider::before {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #666; transition: all 0.25s;
}
.toggle input:checked + .toggle-slider { background: rgba(255,159,28,0.85); border-color: #FF9F1C; }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.file-upload-zone, .upload-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 28px; border: 2px dashed rgba(255,255,255,0.1); border-radius: 12px;
  cursor: pointer; transition: border-color .2s, background .2s;
  color: #555; font-size: 13px; text-align: center;
}
.file-upload-zone:hover, .upload-box:hover {
  border-color: rgba(255,159,28,0.4); background: rgba(255,159,28,0.04);
}

/* Misc */
.admin-loading { padding: 32px; text-align: center; color: #555; font-size: 13px; }
.admin-empty   { padding: 32px; text-align: center; color: #555; font-size: 13px; }

/* ═══ MODALS — Uiverse-inspired dark sign-in ═══ */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay.open { display: flex; }

/* Sign-in card */
.modal-box {
  background: rgba(8,8,8,0.65);
  backdrop-filter: blur(48px) saturate(1.6);
  -webkit-backdrop-filter: blur(48px) saturate(1.6);
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 40px; padding: 32px 28px; width: 100%; max-width: 380px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), rgba(255,159,28,0.12) 0px 30px 30px -20px, 0 40px 80px rgba(0,0,0,0.7);
}

.modal-wide { max-width: 560px; }
.modal-close {
  position: absolute; top: 18px; right: 18px;
  background: none; border: none; color: var(--text-tertiary); font-size: 22px;
  cursor: pointer; line-height: 1; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; transition: all 0.2s;
}
.modal-close:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.modal-title {
  font-family: var(--font-heading); font-size: 30px; font-weight: 900;
  text-align: center; color: var(--accent);
}
.modal-sub { color: var(--text-secondary); font-size: 14px; margin-top: 6px; margin-bottom: 24px; text-align: center; }
.modal-hint { color: var(--text-tertiary); font-size: 12px; text-align: center; margin-top: 18px; }

/* ── Modal Tabs ── */
.modal-tabs {
  display: flex; gap: 4px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-top: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-pill);
  padding: 4px; margin-top: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.modal-tab {
  flex: 1; padding: 9px; border-radius: var(--radius-pill);
  background: none; border: none; color: var(--text-secondary);
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: var(--font-body); transition: all 0.25s;
}
.modal-tab.active { background: var(--bg-raised); color: var(--accent); }
.modal-tab:not(.active):hover { color: var(--text); }

.modal-form { display: flex; flex-direction: column; gap: 0; margin-top: 20px; }

/* ── Password reveal ── */
.input-wrap { position: relative; }
.input-wrap .form-input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 14px; top: calc(50% + 7px); transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--text-tertiary); padding: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s;
}
.pw-toggle:hover { color: var(--accent); }
.pw-toggle svg { width: 17px; height: 17px; }
.form-label {
  display: flex; flex-direction: column; gap: 0; font-size: 13px; color: var(--text-secondary); font-weight: 500;
}
.form-input {
  width: 100%; padding: 15px 20px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: none; border-inline: 2px solid transparent;
  border-radius: 20px; color: var(--text); font-size: 14px; font-family: var(--font-body);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), rgba(255,159,28,0.06) 0px 10px 10px -5px;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  margin-top: 15px;
}
.form-input:focus {
  outline: none;
  border-inline: 2px solid var(--accent);
  box-shadow: rgba(255,159,28,0.12) 0px 10px 10px -5px;
}
.form-input::placeholder { color: var(--text-tertiary); }
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition:
    background-color 600000s 0s ease-in-out,
    color           600000s 0s ease-in-out;
}
.form-textarea { min-height: 80px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-input option { background: var(--bg-card); color: var(--text); }
.form-error { color: #ff6b6b; font-size: 13px; margin: 8px 0 0 10px; min-height: 18px; }

/* Login button inside modal */
.modal-login-btn {
  display: block; width: 100%;
  font-weight: 700; font-size: 15px; font-family: var(--font-body);
  background: var(--accent-gradient);
  color: #000; padding: 15px;
  margin: 20px auto 0; border-radius: 20px;
  box-shadow: rgba(255,159,28,0.5) 0px 20px 10px -15px;
  border: none; cursor: pointer; transition: all 0.2s;
  letter-spacing: 0.3px;
}
.modal-login-btn:hover { transform: scale(1.03); box-shadow: rgba(255,159,28,0.5) 0px 23px 10px -20px; }
.modal-login-btn:active { transform: scale(0.97); }

/* Social accounts inside modal */
.social-account-container {
  margin-top: 25px;
  display: flex; flex-direction: column; align-items: center;
}
.social-title { display: block; text-align: center; font-size: 11px; color: var(--text-tertiary); margin-bottom: 10px; }
.social-accounts { display: flex; justify-content: center; align-items: center; gap: 15px; }
.social-button {
  background: linear-gradient(45deg, #1a1a1a 0%, #333 100%);
  border: 5px solid var(--modal-bg);
  padding: 5px; border-radius: 50%; width: 42px; height: 42px;
  display: grid; place-content: center;
  box-shadow: rgba(255,159,28,0.12) 0px 12px 10px -8px;
  cursor: pointer; transition: all 0.2s;
}
.social-button svg { fill: #fff; width: 16px; height: 16px; }
.social-button:hover { transform: scale(1.2); }
.social-button:active { transform: scale(0.9); }
.modal-agreement { display: block; text-align: center; margin-top: 15px; }
.modal-agreement a { text-decoration: none; color: var(--accent); font-size: 10px; }

/* ═══ TOAST ═══ */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border-accent);
  padding: 13px 28px; border-radius: var(--radius-pill); font-size: 14px;
  box-shadow: var(--shadow-card);
  z-index: 300; opacity: 0; transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══ DISCORD FLOATING BUTTON ═══ */
.discord-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  padding: 16px 20px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(135deg, rgba(79,70,229,0.4) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.8) 100%);
  border: 2px solid rgba(99,102,241,0.3);
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transition: all 0.5s ease; text-decoration: none; overflow: hidden;
}
.discord-float:hover {
  border-color: rgba(129,140,248,0.6);
  box-shadow: 0 25px 50px rgba(99,102,241,0.3);
  transform: scale(1.02) translateY(-4px);
}
.discord-float:active { transform: scale(0.95); }

/* shimmer sweep */
.discord-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(129,140,248,0.3), transparent);
  transform: translateX(-100%);
  transition: transform 1s ease-out;
  pointer-events: none;
}
.discord-float:hover .discord-shimmer { transform: translateX(100%); }

/* inner glow overlay */
.discord-glow {
  position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(90deg, rgba(99,102,241,0.1), rgba(129,140,248,0.2), rgba(99,102,241,0.1));
  opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
.discord-float:hover .discord-glow { opacity: 1; }

.discord-float-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 0;
  transition: gap 0.45s ease;
}
.discord-float:hover .discord-float-inner { gap: 16px; }

.discord-icon-wrap {
  padding: 12px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(99,102,241,0.1));
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.discord-float:hover .discord-icon-wrap {
  background: linear-gradient(135deg, rgba(129,140,248,0.4), rgba(99,102,241,0.2));
}
.discord-icon-wrap svg { width: 28px; height: 28px; fill: #818cf8; transition: all 0.3s; }
.discord-float:hover .discord-icon-wrap svg { fill: #a5b4fc; transform: scale(1.1); }

.discord-float-text {
  flex: 1; text-align: left; display: flex; flex-direction: column;
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width 0.45s ease, opacity 0.3s ease 0.1s;
}
.discord-float:hover .discord-float-text { max-width: 180px; opacity: 1; }
.discord-float-title { color: #818cf8; font-weight: 700; font-size: 17px; line-height: 1.2; transition: color 0.3s; }
.discord-float:hover .discord-float-title { color: #a5b4fc; }
.discord-float-sub { color: rgba(165,180,252,0.6); font-size: 13px; margin-top: 2px; transition: color 0.3s; }
.discord-float:hover .discord-float-sub { color: rgba(165,180,252,0.8); }

.discord-float-arrow-wrap {
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width 0.45s ease, opacity 0.3s ease 0.15s, transform 0.3s ease;
}
.discord-float:hover .discord-float-arrow-wrap { max-width: 32px; opacity: 1; transform: translateX(4px); }
.discord-float-arrow { color: #818cf8; }

/* ═══ Forgot Password ═══ */
.forgot-password { display: block; margin: 10px 0 0 10px; }
.forgot-password a { font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 500; }
.forgot-password a:hover { text-decoration: underline; }

/* ═══ FOOTER ═══ */
.site-footer {
  position: relative; z-index: 1;
  background: rgba(6,6,6,0.7);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--glass-border-strong);
  padding: 56px 24px 0; transition: background 0.35s;
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.6fr; gap: 40px;
}
.footer-desc { color: var(--text-secondary); font-size: 13.5px; margin-top: 10px; max-width: 240px; line-height: 1.75; }
.footer-socials { display: flex; gap: 8px; margin-top: 16px; margin-bottom: 14px; }
.footer-social-btn {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--bg-surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); text-decoration: none;
  transition: all 0.2s;
}
.footer-social-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.footer-email {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-secondary); font-size: 13px; text-decoration: none;
  transition: color 0.2s;
}
.footer-email:hover { color: var(--accent); }
.footer-col h4 {
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  margin-bottom: 18px; text-transform: uppercase; letter-spacing: 1.5px;
  display: flex; align-items: center; gap: 6px;
}
.footer-col a {
  display: block; color: var(--text-secondary); text-decoration: none;
  font-size: 14px; margin-bottom: 11px; transition: all 0.2s;
  position: relative; padding-left: 0;
}
.footer-col a:hover { color: var(--text); padding-left: 6px; }
.footer-col-trust {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  align-self: start;
}
.footer-col-trust h4 { color: var(--accent); }
.footer-col-trust .footer-trust-text {
  color: var(--text-secondary); font-size: 13px; line-height: 1.7; margin-bottom: 16px;
}
.footer-trust-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-dim); border: 1px solid rgba(255,159,28,0.25);
  color: var(--accent); font-size: 12px; font-weight: 600;
  text-decoration: none; padding: 7px 14px; border-radius: 100px;
  transition: all 0.2s;
}
.footer-trust-link:hover { background: rgba(255,159,28,0.18); }
.footer-bottom {
  max-width: 1200px; margin: 48px auto 0; padding: 20px 0;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text-tertiary); font-size: 13px;
}
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { color: var(--text-tertiary); text-decoration: none; font-size: 13px; transition: color 0.2s; }
.footer-bottom-links a:hover { color: var(--accent); }

@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .admin-sidebar { width: 64px; padding: 12px 6px; overflow: hidden; }
  .admin-sidebar .logo-text { display: none; }
  .sidebar-link { justify-content: center; padding: 10px; }
  .sidebar-logo { justify-content: center; }
  .admin-main { padding: 20px 16px; }
}

/* ═══ SCROLL REVEAL ═══ */
.scroll-reveal {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.scroll-reveal.in-view, .page-section.active .scroll-reveal { opacity: 1; }
/* Keep transform-based slide for non-card reveals only */
.scroll-reveal:not(.product-card-wrap) { transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.scroll-reveal:not(.product-card-wrap).in-view,
.page-section.active .scroll-reveal:not(.product-card-wrap) { transform: translateY(0); }
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══ CONFIRM DELETE MODAL ═══ */
.confirm-modal-box {
  max-width: 400px;
  text-align: center;
  align-items: center;
  gap: 16px;
  padding: 40px 32px 36px;
}
.confirm-trash-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(245, 56, 68, 0.1);
  border: 1.5px solid rgba(245, 56, 68, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
  color: #F53844;
}
.confirm-trash-icon svg { width: 32px; height: 32px; }
.confirm-msg {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
  line-height: 1.6;
  max-width: 300px;
}
.confirm-delete-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px;
  background-color: #212121;
  border: none;
  font: inherit;
  color: #e8e8e8;
  font-size: 18px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease cubic-bezier(0.23, 1, 0.32, 1);
  margin-top: 8px;
}
.confirm-delete-btn span {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.confirm-delete-btn::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  translate: 0 105%;
  background-color: #F53844;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.confirm-delete-btn svg {
  width: 22px;
  height: 22px;
  fill: #F53844;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.confirm-delete-btn:hover { animation: confirmShake 0.2s linear 1; }
.confirm-delete-btn:hover::before { translate: 0 0; }
.confirm-delete-btn:hover svg { fill: #e8e8e8; }
@keyframes confirmShake {
  0%   { rotate: 0deg; }
  33%  { rotate: 10deg; }
  66%  { rotate: -10deg; }
  100% { rotate: 10deg; }
}

/* ═══ CONFIRM MODAL UPDATES ═══ */
.confirm-red-title {
  color: #F53844 !important;
}
.confirm-modal-box {
  position: relative;
}
.confirm-delete-btn {
  align-self: center !important;
  margin-left: auto;
  margin-right: auto;
}
/* Close button — Uiverse press style */
.confirm-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  cursor: pointer;
  color: #aaa;
  box-shadow: 0px 4px 0px #111;
  transition: all 0.1s;
  padding: 0;
}
.confirm-close-btn svg {
  width: 16px;
  height: 16px;
}
.confirm-close-btn:hover {
  color: #fff;
  background-color: #333;
}
.confirm-close-btn:active {
  box-shadow: 0px 1px 0px #111;
  position: relative;
  top: 3px;
}

/* ═══ CONFIRM CLOSE BTN FIX ═══ */
.confirm-close-btn:active {
  box-shadow: 0px 1px 0px #111 !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  transform: translateY(3px);
}

/* ═══ DELETE BTN LOWER ═══ */
.confirm-delete-btn {
  margin-top: 20px !important;
}

/* ═══ PRODUCT FORM (pf-*) — Labeled modal fields ═══ */
.modal-form.pf {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.pf-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  user-select: none;
}
.pf-required {
  color: var(--accent);
  font-size: 12px;
}
.pf-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-tertiary, rgba(255,255,255,0.3));
  font-size: 10.5px;
  opacity: 0.8;
}
.pf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
.pf-toggle-row {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  border: 1px solid var(--border);
}
[data-theme="light"] .pf-toggle-row {
  background: rgba(0,0,0,0.03);
}
.pf-toggle-row .pf-label {
  margin-bottom: 0;
}

/* ── Toggle switch (Active status) ── */
.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
[data-theme="light"] .toggle-track {
  background: rgba(0,0,0,0.12);
  border-color: rgba(0,0,0,0.1);
}
.toggle-switch input:checked + .toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.toggle-switch input:checked ~ .toggle-track .toggle-thumb,
.toggle-switch input:checked + .toggle-track .toggle-thumb {
  transform: translateX(20px);
}

/* pf-field inputs stretch full width */
.pf-field .form-input,
.pf-field textarea.form-input {
  width: 100%;
  box-sizing: border-box;
}
/* Smaller textarea height for the two small fields */
.pf-field textarea.form-input[rows="3"] {
  min-height: 80px;
  resize: vertical;
}
.pf-field textarea.form-input[rows="4"] {
  min-height: 100px;
  resize: vertical;
}
/* Upload label inside pf-field */
.pf-field .upload-label {
  width: 100%;
  box-sizing: border-box;
}

/* ═══ MODAL & FORM SIZING FIXES ═══ */

/* Make product modals scrollable so nothing is cut off at any zoom level */
.modal-wide {
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,159,28,0.3) transparent;
}
.modal-wide::-webkit-scrollbar { width: 5px; }
.modal-wide::-webkit-scrollbar-track { background: transparent; }
.modal-wide::-webkit-scrollbar-thumb { background: rgba(255,159,28,0.3); border-radius: 99px; }

/* Remove the default margin-top on form-input inside labeled pf-fields
   (the label+gap already provides the spacing) */
.pf-field .form-input {
  margin-top: 0 !important;
}

/* Textarea: clip scrollbar inside rounded corners + padding so text
   never touches the resize handle or right border */
.pf-field textarea.form-input,
textarea.form-input {
  overflow: hidden auto;          /* hidden on x, auto on y — clips scrollbar to border-radius */
  border-radius: 16px;            /* slightly tighter radius clips the native scrollbar cleaner */
  padding-right: 14px;            /* breathing room before the scrollbar track */
  padding-top: 14px;
  padding-bottom: 14px;
  line-height: 1.6;
  min-height: 90px;
  resize: vertical;
}

/* pf-row on small screens: stack to single column */
@media (max-width: 500px) {
  .pf-row { grid-template-columns: 1fr; }
}

/* ═══ SCROLLBAR & RESIZE HANDLE POLISH ═══ */

/* Fix: modal card scrollbar bleeds outside border-radius —
   contain:paint forces the browser to clip everything (incl. scrollbar) to the box */
.modal-wide {
  contain: paint;
}

/* Brighter but not dominant orange scrollbar on the modal card */
.modal-wide::-webkit-scrollbar { width: 4px; }
.modal-wide::-webkit-scrollbar-track { background: transparent; }
.modal-wide::-webkit-scrollbar-thumb {
  background: rgba(255,159,28,0.55);
  border-radius: 99px;
}
.modal-wide::-webkit-scrollbar-thumb:hover {
  background: rgba(255,159,28,0.75);
}
.modal-wide { scrollbar-width: thin; scrollbar-color: rgba(255,159,28,0.55) transparent; }

/* Textarea internal scrollbar — smaller and same orange tint */
.pf-field textarea.form-input::-webkit-scrollbar,
textarea.form-input::-webkit-scrollbar { width: 3px; }
.pf-field textarea.form-input::-webkit-scrollbar-track,
textarea.form-input::-webkit-scrollbar-track { background: transparent; }
.pf-field textarea.form-input::-webkit-scrollbar-thumb,
textarea.form-input::-webkit-scrollbar-thumb {
  background: rgba(255,159,28,0.45);
  border-radius: 99px;
}
.pf-field textarea.form-input,
textarea.form-input {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,159,28,0.45) transparent;
}

/* Resize handle — match accent color, no visible box */
textarea.form-input::-webkit-resizer {
  background: transparent;
  /* Draw a small custom chevron using a border trick */
  border-style: solid;
  border-width: 0 0 8px 8px;
  border-color: transparent transparent rgba(255,159,28,0.5) transparent;
}

/* Remove the grey box background from the resize corner */
.pf-field textarea.form-input,
textarea.form-input {
  background-clip: padding-box; /* ensures bg doesn't leak into resize zone */
}
/* The resize handle uses the element's own background — we make a small
   transparent-cornered version via a box shadow trick on the resizer area */
.pf-field textarea.form-input::-webkit-resizer,
textarea.form-input::-webkit-resizer {
  background-color: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  /* 3-dot diagonal dots in accent color */
  background: radial-gradient(circle, rgba(255,159,28,0.55) 1.5px, transparent 1.5px) 0 0 / 4px 4px,
              radial-gradient(circle, rgba(255,159,28,0.35) 1.5px, transparent 1.5px) 4px 4px / 8px 8px,
              transparent;
}

/* Dashboard loading / empty states */
.admin-loading, .admin-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
  letter-spacing: 0.03em;
}
.admin-loading::before {
  content: '';
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,159,28,0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 10px;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ CHECKOUT MODAL ═══ */
.checkout-modal-box {
  max-width: 420px;
  padding: 32px 28px;
}
.checkout-product-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.checkout-product-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}
.checkout-product-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.checkout-product-price {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
}
.checkout-choose-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}
.checkout-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  border: none;
}
.checkout-btn-ls {
  background: var(--accent);
  color: #000;
}
.checkout-btn-ls:hover {
  background: #ffb347;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,159,28,0.35);
}
.checkout-btn-paypal {
  background: #FFC439;
  color: #003087;
}
.checkout-btn-paypal:hover {
  background: #f0b429;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,196,57,0.35);
}

/* Checkout payment icons row */
.checkout-payment-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 11px;
  flex-wrap: wrap;
}

/* ═══ LEMON SQUEEZY OVERLAY CONSTRAIN ═══ */
.lemonsqueezy-overlay {
  padding: 40px 0 !important;
}
.lemonsqueezy-overlay .lemonsqueezy-overlay-iframe,
.lemonsqueezy-overlay iframe {
  max-height: 80vh !important;
  max-width: 460px !important;
  border-radius: 16px !important;
  margin: auto !important;
}

/* ═══════════════════════════════════════════════
   MOBILE RESPONSIVE — Full mobile layout fixes
   ═══════════════════════════════════════════════ */

/* ── Small tablets / large phones (≤768px) ── */
@media (max-width: 768px) {
  /* Hero */
  .hero { padding: 48px 20px 40px; }
  .hero-title { font-size: clamp(28px, 8vw, 42px); letter-spacing: -0.8px; }
  .hero-sub { font-size: 15px; max-width: 340px; }
  .hero-ctas { flex-direction: column; width: 100%; align-items: stretch; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary { width: 100%; justify-content: center; }
  .hero-hud { margin-top: 36px; }
  .hud-frame { padding: 20px 16px; }
  .hud-content { gap: 12px; }
  .hud-stat-val { font-size: 24px; }
  .hud-stat-label { font-size: 11px; }

  /* Section titles */
  .section-title { font-size: clamp(22px, 5vw, 32px); padding: 0 16px; }

  /* Featured / Shop grids — 2 columns on tablets, 1 on phones */
  .featured-grid, .related-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 24px; padding: 0 16px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 20px; }

  /* Product cards — smaller */
  .product-card { border-radius: 16px; }
  .product-card-body { padding: 14px 16px 16px; }
  .product-card-title { font-size: 14px; }
  .product-price { font-size: 13px; padding: 5px 10px; }

  /* Product detail */
  .product-detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .product-detail-title { font-size: 22px; }
  .product-detail-price { font-size: 28px; }
  .product-detail-actions { flex-direction: column; }
  .product-detail-actions .btn-primary,
  .product-detail-actions .btn-secondary { width: 100%; justify-content: center; }
  .product-features { padding-left: 0; }
  .product-features li { font-size: 13px; }

  /* Shop page */
  .shop-header { padding: 60px 20px 24px; }
  .shop-header h1 { font-size: 28px; }
  .shop-container { padding: 0 16px 60px; }
  #shop-search { font-size: 14px; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-col-trust { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  /* Modal */
  .modal-box { border-radius: 24px; padding: 24px 20px; margin: 16px; max-width: calc(100vw - 32px); }
  .modal-wide { max-width: calc(100vw - 32px); }
  .modal-title { font-size: 24px; }

  /* Discord float — slightly smaller on tablet */
  .discord-float { bottom: 16px; right: 16px; padding: 12px 16px; }

  /* Nav — prevent clipping */
  .nav-inner { overflow: visible; padding: 0 6px 0 10px; }

  /* Checkout modal */
  .checkout-modal-box { max-width: calc(100vw - 32px); padding: 24px 20px; }
  .checkout-product-img { width: 56px; height: 56px; }
  .checkout-product-name { font-size: 14px; }
  .checkout-product-price { font-size: 18px; }

  /* Nav — wider bar, smaller elements */
  .main-nav { padding: 8px 8px 0; }
  .nav-inner { padding: 0 8px; height: 48px; border-radius: 16px; }
  .nav-actions { gap: 2px; }
  .logo-avatar { width: 30px; height: 30px; }
  .logo-text { font-size: 14px; }
  .theme-toggle, .notification-btn { width: 34px; height: 34px; min-height: 34px; min-width: 34px; }
  .theme-toggle svg, .notification-btn svg { width: 16px; height: 16px; }
  .btn-login { padding: 1px; }
  .btn-login-inner { padding: 5px 10px; font-size: 11px; gap: 5px; min-width: auto; }
  .btn-login-inner svg { width: 14px; height: 14px; }
  .account-chevron { width: 10px; height: 10px; }
  .mobile-menu-toggle svg { width: 22px; height: 22px; }

  /* Admin on mobile */
  .sidebar-link span { display: none; }
  .sidebar-footer span { display: none; }
  .admin-main { padding: 16px 12px; }
  .admin-page-title { font-size: 22px; }
  .stat-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 20px; }
  .stat-label { font-size: 11px; }
  .admin-table { font-size: 12px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Confirm modal */
  .confirm-modal-box { max-width: calc(100vw - 32px); padding: 28px 20px 24px; }
}

/* ── Phones (≤480px) ── */
@media (max-width: 480px) {
  /* Hero — compact */
  .hero { padding: 36px 16px 32px; }
  .hero-badge { font-size: 11px; padding: 5px 14px; }
  .hero-title { margin-top: 20px; }
  .hud-content { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hud-stat-val { font-size: 20px; }

  /* Grids — single column on small phones */
  .featured-grid, .related-grid { grid-template-columns: 1fr; padding: 0 12px; }
  .shop-grid { grid-template-columns: 1fr; }

  /* Footer — single column */
  .footer-inner { grid-template-columns: 1fr; gap: 20px; }

  /* Nav — compact logo */
  .logo-text { font-size: 14px; }
  .logo-avatar { width: 28px; height: 28px; }

  /* Account menu */
  .account-menu { right: -8px; min-width: 240px; }

  /* Notification panel — full width */
  .notification-panel { width: calc(100vw - 24px); right: -12px; }
  .notification-panel::before { right: 28px; }

  /* Discord float — smaller on phones but keep original shape & text */
  .discord-float { padding: 10px 14px; bottom: 12px; right: 12px; border-radius: 14px; }
  .discord-float-inner { gap: 10px; }
  .discord-icon-wrap { padding: 8px; }
  .discord-icon-wrap svg { width: 20px; height: 20px; }
  .discord-float-title { font-size: 14px; }
  .discord-float-sub { font-size: 11px; }

  /* Nav — even smaller on tiny phones */
  .nav-inner { padding: 0 6px; height: 44px; }
  .logo-avatar { width: 26px; height: 26px; }
  .logo-text { font-size: 13px; }
  .theme-toggle, .notification-btn { width: 30px; height: 30px; min-height: 30px; min-width: 30px; }
  .theme-toggle svg, .notification-btn svg { width: 14px; height: 14px; }
  .btn-login-inner { padding: 4px 8px; font-size: 10px; gap: 4px; }
  .btn-login-inner svg { width: 12px; height: 12px; }

  /* Modals — full width */
  .modal-box { margin: 8px; max-width: calc(100vw - 16px); border-radius: 20px; padding: 20px 16px; }
  .modal-wide { max-width: calc(100vw - 16px); }
  .pf-row { grid-template-columns: 1fr; }

  /* Admin sidebar — very thin icon-only */
  .admin-sidebar { width: 48px; padding: 8px 4px; }
  .sidebar-logo { padding: 0 0 16px; }
  .sidebar-logo .logo-avatar { width: 28px; height: 28px; }
  .sidebar-link { padding: 8px; }
  .sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
  .admin-main { padding: 12px 8px; }
  .stat-cards { grid-template-columns: 1fr; }
  .revenue-card { padding: 16px 12px 0; }

  /* Back link */
  .back-link { font-size: 13px; }
}

/* ── Ensure touch targets are 44px+ ── */
@media (max-width: 860px) {
  .nav-link, .mobile-link { min-height: 44px; display: flex; align-items: center; }
  .btn-buy { min-height: 44px; }
  .sidebar-link { min-height: 44px; }
  .theme-toggle, .notification-btn { min-height: 36px; min-width: 36px; }
}

/* ── Prevent horizontal scroll globally ── */
html, body { overflow-x: hidden; }

/* ═══ MOBILE DISCORD BUTTON — Keep collapsed icon-only ═══ */
@media (hover: none), (max-width: 768px) {
  .discord-float-inner { gap: 0 !important; }
  .discord-float-text { max-width: 0 !important; opacity: 0 !important; }
  .discord-float-arrow-wrap { max-width: 0 !important; opacity: 0 !important; }
  .discord-icon-wrap svg { width: 22px; height: 22px; }
  .discord-icon-wrap { padding: 6px; }
  .discord-float { padding: 10px !important; }
}

/* ═══ ADMIN SIDEBAR — Clean icon-only on mobile ═══ */
@media (max-width: 860px) {
  /* Hide all text in sidebar, show only icons */
  .admin-sidebar { width: 56px !important; padding: 12px 6px !important; overflow: hidden !important; }
  .admin-sidebar .logo-text { display: none !important; }
  .sidebar-link { 
    justify-content: center !important; 
    padding: 12px 0 !important;
    gap: 0 !important;
    font-size: 0 !important; /* hide text */
  }
  .sidebar-link svg { width: 20px; height: 20px; flex-shrink: 0; }
  .sidebar-logo { justify-content: center; padding: 0 0 16px; }
  .sidebar-logo .logo-avatar { width: 32px; height: 32px; }
  /* Hide section labels in sidebar */
  .admin-sidebar h4, .sidebar-section-label { display: none; }
}

/* ═══ CART SYSTEM ═══ */
.cart-wrap { position: relative; }
.cart-btn {
  position: relative;
  width: 36px; height: 36px; border-radius: 50%;
  background: none; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.25s;
  color: var(--text-secondary);
}
.cart-btn:hover { color: var(--accent); border-color: var(--border-accent); }
.cart-btn svg { width: 18px; height: 18px; }
.cart-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--accent); color: #000;
  border-radius: 100px; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-base);
}
@media (max-width: 860px) {
  .cart-btn { min-height: 36px; min-width: 36px; }
}
@media (max-width: 768px) {
  .cart-btn { width: 34px; height: 34px; min-height: 34px; min-width: 34px; }
  .cart-btn svg { width: 16px; height: 16px; }
}
@media (max-width: 480px) {
  .cart-btn { width: 30px; height: 30px; min-height: 30px; min-width: 30px; }
  .cart-btn svg { width: 14px; height: 14px; }
}

.cart-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  z-index: 998; opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.cart-backdrop.open { opacity: 1; pointer-events: auto; }

.cart-panel {
  position: fixed; top: 0; right: 0;
  width: 100%; max-width: 400px;
  height: 100vh; height: 100dvh;
  background: var(--bg-raised);
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 60px rgba(0,0,0,0.4);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cart-panel.open { transform: translateX(0); }
.cart-list {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.cart-header {
  padding: 20px 22px 14px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.cart-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0; }
.cart-subheader {
  padding: 0 22px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-header-count { font-size: 13px; color: var(--text-secondary); }
.cart-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); cursor: pointer;
  transition: all 0.2s;
}
.cart-close:hover { color: var(--accent); border-color: var(--border-accent); }

.cart-list {
  flex: 1; overflow-y: auto; padding: 12px 16px;
}
.cart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 24px; color: var(--text-secondary);
  height: 100%;
}
.cart-empty svg { color: var(--accent); margin-bottom: 16px; }
.cart-empty p { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.cart-empty span { font-size: 13px; color: var(--text-tertiary); }

.cart-item {
  display: flex; gap: 12px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
  position: relative;
}
.cart-item:hover { border-color: var(--border-hover); }
.cart-item-img {
  width: 64px; height: 64px;
  border-radius: 8px; object-fit: cover; flex-shrink: 0;
  background: var(--bg-surface);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin: 0 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 24px;
}
.cart-item-price { font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.cart-item-qty {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-surface); border-radius: 100px;
  padding: 3px;
}
.cart-qty-btn {
  width: 22px; height: 22px;
  background: var(--bg-raised); border: none;
  border-radius: 50%;
  color: var(--text-secondary); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.cart-qty-btn:hover { background: var(--accent); color: #000; }
.cart-qty-val { font-size: 12px; font-weight: 600; min-width: 16px; text-align: center; }
.cart-item-remove {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  background: transparent; border: none;
  color: var(--text-tertiary); cursor: pointer;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.cart-item-remove:hover { color: #ff5252; background: rgba(255,82,82,0.1); }

.cart-footer {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
  flex-shrink: 0;
}
.cart-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
  font-size: 14px; color: var(--text-secondary);
}
.cart-total { font-size: 20px; font-weight: 700; color: var(--text); }
.cart-checkout-btn {
  width: 100%; padding: 12px 20px;
  background: var(--accent-gradient);
  color: #000; border: none; border-radius: 12px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.15s, box-shadow 0.2s;
  margin-bottom: 8px;
}
.cart-checkout-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,159,28,0.3); }
.cart-clear-btn {
  width: 100%; padding: 8px;
  background: transparent; color: var(--text-tertiary);
  border: none; cursor: pointer;
  font-size: 12px; font-weight: 500;
  transition: color 0.2s;
}
.cart-clear-btn:hover { color: #ff5252; }

@media (max-width: 768px) {
  .cart-panel { max-width: 100%; }
}

/* ── Add to Cart button "in-cart" state ── */
.btn-buy.in-cart,
.btn-secondary.in-cart {
  background: rgba(34,197,94,0.12) !important;
  border-color: rgba(34,197,94,0.4) !important;
  color: #4ade80 !important;
}
.btn-buy.in-cart:hover,
.btn-secondary.in-cart:hover {
  background: rgba(34,197,94,0.18) !important;
}

/* ═══ MY ORDERS / MY LIBRARY ═══ */
.library-container {
  max-width: 1100px; margin: 0 auto;
  padding: 80px 24px 96px;
}
.library-header { margin-bottom: 36px; }
.library-title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700; margin: 12px 0 8px; color: var(--text);
}
.library-sub { color: var(--text-secondary); font-size: 15px; margin: 0; }

/* Orders list */
.orders-list { display: flex; flex-direction: column; gap: 12px; }
.order-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.2s, transform 0.2s;
}
.order-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.order-card-img {
  width: 72px; height: 72px; border-radius: 10px;
  object-fit: cover; flex-shrink: 0;
  background: var(--bg-surface);
}
.order-card-info { flex: 1; min-width: 0; }
.order-card-name { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: var(--text); }
.order-card-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-secondary);
}
.order-meta-item { color: var(--text-tertiary); }
.order-status {
  text-transform: uppercase; font-weight: 600; font-size: 11px;
  padding: 3px 10px; border-radius: 100px;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
}
.order-status.paid { background: rgba(34,197,94,0.12); color: #4ade80; }
.order-status.pending { background: rgba(255,159,28,0.12); color: var(--accent); }
.order-card-amount { font-size: 18px; font-weight: 700; color: var(--accent); flex-shrink: 0; }

/* Library grid */
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.library-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.library-card:hover { transform: translateY(-3px); border-color: var(--border-accent); }
.library-card-img {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--bg-surface); overflow: hidden;
}
.library-card-img img { width: 100%; height: 100%; object-fit: cover; }
.library-card-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  color: #00e676;
  background: rgba(6, 52, 24, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 200, 90, 0.25);
  box-shadow: 0 4px 12px rgba(0, 230, 118, 0.18);
  letter-spacing: 1px;
}
.library-card-body { padding: 18px; }
.library-card-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--text); }
.library-card-desc {
  font-size: 13px; color: var(--text-secondary);
  margin: 0 0 14px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.library-card .btn-primary { width: 100%; justify-content: center; }

/* Wishlist card */
.wishlist-card-actions { display: flex; gap: 8px; align-items: center; }
.wishlist-remove-btn { padding: 0 14px !important; flex-shrink: 0; }
.pd-cta--ghost.wishlisted { background: rgba(255,159,28,0.12); border-color: rgba(255,159,28,0.4); color: var(--accent); }
.pd-cta--ghost.wishlisted svg { fill: currentColor; }

@media (max-width: 600px) {
  .order-card { flex-wrap: wrap; }
  .order-card-amount { width: 100%; text-align: right; }
}

/* ═══ ACCOUNT PAGES ═══ */
.acct-page-container { max-width: 1100px; margin: 0 auto; padding: 40px 24px 100px; position: relative; z-index: 1; }
.acct-page-section { padding: 40px 24px 100px; }
.acct-layout { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 220px 1fr; gap: 28px; }
@media (max-width: 768px) { .acct-layout { grid-template-columns: 1fr; } .acct-sidebar { display: none; } }

/* Sidebar */
.acct-sidebar { display: flex; flex-direction: column; gap: 0; }
.acct-avatar-wrap { display: flex; align-items: center; gap: 12px; padding: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-top-color: rgba(255,255,255,0.14); border-radius: 16px; margin-bottom: 10px; }
.acct-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg,rgba(255,159,28,0.35),rgba(255,159,28,0.1)); border: 1px solid rgba(255,159,28,0.4); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #FF9F1C; box-shadow: 0 0 16px rgba(255,159,28,0.2); }
.acct-name { font-size: 14px; font-weight: 700; color: var(--text); }
.acct-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.acct-nav { display: flex; flex-direction: column; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; overflow: hidden; }
.acct-nav-link { display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background .15s, color .15s; border-left: 2px solid transparent; border: none; border-left: 2px solid transparent; background: none; width: 100%; text-align: left; font-family: var(--font-body); text-decoration: none; }
.acct-nav-link:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.acct-nav-link.active { background: rgba(255,159,28,0.08); color: #FF9F1C; border-left-color: #FF9F1C; font-weight: 700; }
.acct-nav-link.active svg { stroke: #FF9F1C; }
.acct-nav-link--danger { color: #ff6b6b; }
.acct-nav-link--danger:hover { background: rgba(255,107,107,0.08); color: #ff6b6b; }
.acct-nav-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0; }
[data-theme="light"] .acct-nav-link:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .acct-avatar-wrap { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .acct-nav { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); }

/* Content */
.acct-content { display: flex; flex-direction: column; gap: 20px; }
.acct-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.acct-title { font-family: var(--font-heading); font-size: 28px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
.acct-title span { color: var(--accent); }
.acct-count { font-size: 12px; color: var(--text-tertiary); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; padding: 3px 10px; }

/* Account buttons */
.acct-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 100px; font-size: 12px; font-weight: 700; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: all .18s; font-family: var(--font-body); }
.acct-btn--primary { background: linear-gradient(135deg,#FF9F1C,#FFB347); color: #fff; border: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 3px 10px -2px rgba(255,159,28,0.4); }
.acct-btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.acct-btn--ghost { background: rgba(255,255,255,0.04); color: var(--text-secondary); border-color: rgba(255,255,255,0.1); }
.acct-btn--ghost:hover { background: rgba(255,255,255,0.08); color: var(--text); }

/* Order rows */
.acct-order-row { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 16px; padding: 14px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-top-color: rgba(255,255,255,0.11); border-radius: 14px; transition: background .18s; }
.acct-order-row:hover { background: rgba(255,255,255,0.05); }
.acct-order-thumb { width: 56px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.07); }
.acct-order-thumb img { width: 100%; height: 100%; object-fit: cover; }
.acct-order-name { font-size: 14px; font-weight: 700; color: var(--text); }
.acct-order-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; display: flex; gap: 10px; }
.acct-order-amount { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--text); }
.acct-order-status { font-size: 10px; font-weight: 800; letter-spacing: 1px; border-radius: 100px; padding: 3px 10px; margin-top: 6px; display: inline-block; }
.acct-order-status.completed { color: #00e676; background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.25); }
.acct-order-status.paid { color: #00e676; background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.25); }
.acct-order-status.processing { color: #FF9F1C; background: rgba(255,159,28,0.1); border: 1px solid rgba(255,159,28,0.25); }
.acct-order-actions { display: flex; gap: 8px; align-items: center; }

/* Filter pills */
.acct-filter { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--text-secondary); border-radius: 100px; padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-body); transition: all .18s; }
.acct-filter:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.acct-filter.active { background: rgba(255,159,28,0.12); border-color: rgba(255,159,28,0.35); color: #FF9F1C; }
.acct-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Library card (new design) */
.acct-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.acct-lib-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-top-color: rgba(255,255,255,0.11); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s; }
.acct-lib-card:hover { border-color: rgba(255,159,28,0.2); }
.acct-lib-card-img { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.acct-lib-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.acct-lib-card:hover .acct-lib-card-img img { transform: scale(1.04); }
.acct-lib-card-version { position: absolute; bottom: 10px; left: 10px; font-size: 10px; font-weight: 800; letter-spacing: 1px; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 3px 8px; color: var(--text-secondary); }
.acct-lib-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.acct-lib-card-name { font-size: 14px; font-weight: 700; color: var(--text); }
.acct-lib-card-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.acct-lib-card-actions { display: flex; gap: 8px; margin-top: auto; }
.acct-lib-card-actions .acct-btn--ghost { padding: 7px 10px; }

/* Wishlist card */
.acct-wish-remove { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .18s; }
.acct-wish-remove:hover { background: rgba(255,107,107,0.2); border-color: rgba(255,107,107,0.4); }
.acct-wish-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.acct-wish-price { font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: #FF9F1C; }
.acct-wish-stars { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.acct-wish-stars span { font-size: 11px; color: var(--text-tertiary); margin-left: 3px; }

/* Settings cards */
.s-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-top-color: rgba(255,255,255,0.13); border-radius: 16px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.s-card-head { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
.s-card-head-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,159,28,0.1); border: 1px solid rgba(255,159,28,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.s-card-head-icon svg { stroke: #FF9F1C; }
.s-card-title { font-size: 13px; font-weight: 800; letter-spacing: 0.3px; color: var(--text); }
.s-card-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.s-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.s-row:last-child { border-bottom: none; }
.s-row-label { font-size: 13px; font-weight: 600; color: var(--text); }
.s-row-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.s-input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 8px 12px; color: var(--text); font-size: 13px; font-family: var(--font-body); outline: none; transition: border-color .2s; width: 220px; }
.s-input:focus { border-color: rgba(255,159,28,0.5); }
.s-input:disabled { opacity: 0.4; cursor: not-allowed; }
.s-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.s-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.s-toggle-track { position: absolute; inset: 0; border-radius: 100px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); cursor: pointer; transition: background .2s, border-color .2s; }
.s-toggle input:checked + .s-toggle-track { background: rgba(255,159,28,0.85); border-color: rgba(255,159,28,0.9); }
.s-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.4); transition: transform .2s; }
.s-toggle input:checked + .s-toggle-track::after { transform: translateX(18px); }
.s-select { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 8px 28px 8px 12px; color: var(--text); font-size: 13px; font-family: var(--font-body); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: border-color .2s; }
.s-select:focus { border-color: rgba(255,159,28,0.5); }
.s-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; }
.s-btn-danger { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 100px; font-size: 12px; font-weight: 700; font-family: var(--font-body); border: 1px solid rgba(255,107,107,0.3); background: rgba(255,107,107,0.06); color: #ff6b6b; cursor: pointer; transition: all .18s; }
.s-btn-danger:hover { background: rgba(255,107,107,0.14); border-color: rgba(255,107,107,0.5); }
.s-btn-save { display: inline-flex; align-items: center; gap: 6px; padding: 9px 22px; border-radius: 100px; font-size: 13px; font-weight: 700; font-family: var(--font-body); border: none; background: linear-gradient(135deg,#FF9F1C,#FFB347); color: #fff; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 3px 10px -2px rgba(255,159,28,0.4); transition: filter .18s, transform .15s; }
.s-btn-save:hover { filter: brightness(1.07); transform: translateY(-1px); }
.s-card-footer { padding: 14px 20px; display: flex; justify-content: flex-end; }

/* Owned button state */
.btn-buy.owned {
  background: rgba(0,230,118,0.12) !important;
  border-color: rgba(0,230,118,0.35) !important;
  color: #00e676 !important;
}
.btn-buy.owned:hover {
  background: rgba(0,230,118,0.2) !important;
}