/* =====================================================
   3DShawn — site.css
   Dark blue gaming-style theme for a 3D file/print
   showcase platform.

   TABLE OF CONTENTS:
   1.  CSS Custom Properties (Design Tokens)
   2.  CSS Reset & Base Styles
   3.  Layout Shell (Sidebar + Main)
   4.  Sidebar
   5.  Top Bar / Header
   6.  Buttons
   7.  Hero Section
   8.  Content Sections & Section Headers
   9.  Model Cards (grid cards with hover overlay)
   10. Designer Row (avatar circles)
   11. Categories Grid
   12. Collections Row
   13. CTA Banner
   14. Toast Notification
   15. Download Modal
   16. Scrollbar Styling
   17. Animations & Keyframes
   18. Responsive (tablet / mobile)
====================================================== */


/* =====================================================
   1. CSS Custom Properties (Design Tokens)
   All colours, spacing, and radii are defined here so
   every component stays visually consistent and is easy
   to retheme by editing a single block.
====================================================== */
:root {
  /* --- Colour palette --- */
  --col-bg:           #07090f;   /* Deepest background (almost black-blue) */
  --col-surface-1:    #0d1120;   /* Sidebar, card backgrounds */
  --col-surface-2:    #111827;   /* Elevated surfaces (hero, modals) */
  --col-surface-3:    #1a2540;   /* Hover states, borders */
  --col-border:       #1e2d4a;   /* Subtle borders */

  --col-accent:       #2563eb;   /* Primary interactive blue */
  --col-accent-glow:  #3b82f680; /* Glow / shadow version of accent */
  --col-accent-bright:#60a5fa;   /* Hover / highlight blue */
  --col-accent-deep:  #1d4ed8;   /* Pressed / active blue */

  --col-cyan:         #06b6d4;   /* Secondary accent (badges, highlights) */
  --col-cyan-dim:     #0e7490;

  --col-text-primary: #e2e8f0;   /* Main body text */
  --col-text-secondary:#8fa3c0;  /* Muted / secondary text */
  --col-text-dim:     #4a6080;   /* Very muted — labels, dividers */

  --col-white:        #ffffff;
  --col-free:         #22c55e;   /* "Free" badge green */
  --col-premium:      #f59e0b;   /* "Premium" badge amber */

  /* --- Typography --- */
  --font-display: 'Bebas Neue', sans-serif;
  --font-ui:      'Rajdhani', sans-serif;
  --font-mono:    'Source Code Pro', monospace;

  /* --- Spacing scale --- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* --- Border radii --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;

  /* --- Sidebar width --- */
  --sidebar-width: 220px;

  /* --- Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-med:  0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =====================================================
   2. CSS Reset & Base Styles
   Minimal normalization — keeps browser quirks away
   without pulling in a heavy library.
====================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background-color: var(--col-bg);
  color: var(--col-text-primary);
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100vw;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font-ui);
  cursor: pointer;
  border: none;
  background: none;
}

img {
  max-width: 100%;
  display: block;
}

ul, ol {
  list-style: none;
}


/* =====================================================
   3. Layout Shell
   Single-column layout: full-width main content with
   a sticky top navigation bar.
====================================================== */
.main-content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


/* =====================================================
   4. Topbar Logo & Dropdown Navigation
   Logo lockup in the topbar, plus the hover-reveal
   dropdown menus for browsing 3D print content.
====================================================== */

/* Logo lockup (inside topbar) — floats below topbar as its own badge */
.topbar-logo {
  position: absolute;
  left: var(--space-xl);
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-decoration: none;
  background: linear-gradient(180deg, #0d1120 0%, #07090f 100%);
  border: 1px solid var(--col-border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 8px 47px 20px 47px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 24px rgba(37,99,235,0.18), inset 0 -1px 0 var(--col-accent-glow);
}

.logo-icon {
  font-size: 42px;
  color: var(--col-accent-bright);
  line-height: 1;
  filter: drop-shadow(0 0 14px var(--col-accent-glow));
}

.logo-text {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 3px;
  color: var(--col-white);
  white-space: nowrap;
  line-height: 1;
}

.logo-text em {
  font-style: normal;
  color: var(--col-accent-bright);
}

/* Horizontal nav bar inside topbar */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Each dropdown group wrapper */
.nav-menu {
  position: relative;
}

/* The trigger button for each menu */
.nav-menu-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--col-text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast),
              background var(--transition-fast);
}

.nav-menu:hover .nav-menu-trigger,
.nav-menu-trigger:focus-visible {
  color: var(--col-text-primary);
  background: var(--col-surface-3);
}

/* Accent trigger for Makers / Sellers */
.nav-trigger-makers {
  color: var(--col-cyan);
}

.nav-menu:hover .nav-trigger-makers {
  color: var(--col-cyan);
  background: rgba(6, 182, 212, 0.1);
}

.nav-caret {
  font-size: 10px;
  opacity: 0.6;
  transition: transform var(--transition-fast);
}

.nav-menu:hover .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown panel */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: 6px 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(37, 99, 235, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast),
              transform var(--transition-fast),
              visibility var(--transition-fast);
  z-index: 200;
}

.nav-menu:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Individual dropdown links */
.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--col-text-secondary);
  letter-spacing: 0.3px;
  transition: color var(--transition-fast),
              background var(--transition-fast);
  cursor: pointer;
}

.nav-dropdown a:hover {
  color: var(--col-accent-bright);
  background: var(--col-surface-3);
}

/* Two-level category flyout */
.nav-sub-group {
  position: relative;
}

.nav-sub-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--col-text-secondary);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}

.nav-sub-trigger:hover {
  color: var(--col-accent-bright);
  background: var(--col-surface-3);
}

.nav-sub-arrow {
  font-size: 11px;
  color: var(--col-text-dim);
  margin-left: var(--space-sm);
  transition: color var(--transition-fast);
}

.nav-sub-trigger:hover .nav-sub-arrow {
  color: var(--col-accent-bright);
}

.nav-subdropdown {
  position: absolute;
  left: 100%;
  top: -6px;
  min-width: 210px;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: 6px 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(37,99,235,0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateX(4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 201;
}

.nav-sub-group:hover .nav-subdropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.nav-subdropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--col-text-secondary);
  letter-spacing: 0.3px;
  transition: color var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
}

.nav-subdropdown a:hover {
  color: var(--col-accent-bright);
  background: var(--col-surface-3);
}


/* =====================================================
   5. Top Bar / Header
   Sticky full-width nav bar with logo, dropdown menus,
   search input, and user action buttons.
====================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-xl) 10px 280px; /* left space for floating logo */
  background: rgba(7, 9, 15, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--col-border);
  overflow: visible; /* allow logo to hang below topbar */
}

/* Search */
.search-wrap {
  position: relative;
  flex-shrink: 0;
  width: 260px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--col-text-dim);
  font-size: 18px;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 8px 14px 8px 36px;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-xl);
  color: var(--col-text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.search-input::placeholder {
  color: var(--col-text-dim);
}

.search-input:focus {
  border-color: var(--col-accent);
  box-shadow: 0 0 0 3px var(--col-accent-glow);
}

/* User avatar circle */
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--col-accent), var(--col-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow var(--transition-fast);
}

.avatar:hover {
  box-shadow: 0 0 0 3px var(--col-accent-glow);
}

/* Unread message badge on avatar */
.profile-menu {
  position: relative;
}

.avatar-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--col-bg);
  pointer-events: none;
  line-height: 1;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}

/* Profile menu (avatar + dropdown) */
.profile-menu {
  position: relative;
  flex-shrink: 0;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: 6px 0;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65),
              0 0 0 1px rgba(37,99,235,0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast),
              transform var(--transition-fast),
              visibility var(--transition-fast);
  z-index: 200;
}

.profile-menu:hover .profile-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 14px;
}

.profile-dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--col-accent), var(--col-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--col-white);
  flex-shrink: 0;
}

.profile-dropdown-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--col-white);
  line-height: 1.3;
}

.profile-dropdown-email {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--col-text-dim);
  line-height: 1.3;
}

.profile-dropdown-divider {
  height: 1px;
  background: var(--col-border);
  margin: 4px 0;
}

.profile-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--col-text-secondary);
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: color var(--transition-fast),
              background var(--transition-fast);
}

.profile-dropdown a:hover {
  color: var(--col-accent-bright);
  background: var(--col-surface-3);
}

.profile-signout {
  color: #f87171 !important;
}

.profile-signout:hover {
  color: #fca5a5 !important;
  background: rgba(248, 113, 113, 0.08) !important;
}

/* ── Sign-out overlay ── */
.signout-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--col-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.signout-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.signout-overlay-logo {
  font-family: var(--font-display);
  font-size: 48px;
  letter-spacing: 4px;
  color: var(--col-text-primary);
}

.signout-overlay-logo em {
  font-style: normal;
  color: var(--col-accent-bright);
}

.signout-overlay-msg {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--col-text-secondary);
  letter-spacing: 0.5px;
}

.signout-overlay-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--col-border);
  border-top-color: var(--col-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* =====================================================
   6. Buttons
   Three variants: accent (filled), ghost (outlined),
   outline (thin border). Two sizes: default and sm.
====================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Primary call-to-action button */
.btn-accent {
  background: var(--col-accent);
  color: var(--col-white);
  border-color: var(--col-accent);
  box-shadow: 0 0 16px var(--col-accent-glow);
}

.btn-accent:hover {
  background: var(--col-accent-bright);
  border-color: var(--col-accent-bright);
  box-shadow: 0 0 24px var(--col-accent-glow);
  transform: translateY(-1px);
}

.btn-accent:active {
  transform: translateY(0);
  background: var(--col-accent-deep);
}

/* Ghost / outline-only button */
.btn-ghost {
  background: transparent;
  color: var(--col-text-primary);
  border-color: var(--col-border);
}

.btn-ghost:hover {
  border-color: var(--col-accent);
  color: var(--col-accent-bright);
}

/* Thin outline (used in sidebar and cards) */
.btn-outline {
  background: transparent;
  color: var(--col-accent-bright);
  border-color: var(--col-accent);
}

.btn-outline:hover {
  background: var(--col-accent);
  color: var(--col-white);
}

/* Small size modifier */
.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}


/* =====================================================
   7. Hero Section
   Large featured model showcase at the top of the page
   with a decorative animated grid background, glowing
   spotlight, and a vertical thumbnail strip on the right.
====================================================== */
.hero-section {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  padding: var(--space-xl);
  gap: var(--space-xl);
  overflow: hidden;
  background: linear-gradient(135deg, #0a0f1e 0%, #0e1a35 50%, #071428 100%);
}

/* Animated dot-grid overlay for depth */
.hero-video-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Faded background photo — sits beneath the grid and glow layers */
.hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.18;
  mix-blend-mode: luminosity;
  filter: brightness(0.45) saturate(0.35) hue-rotate(200deg);
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, #1e3a6e44 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.6;
  animation: gridDrift 20s linear infinite;
}

.hero-glow {
  /* Large soft spotlight behind the hero content */
  position: absolute;
  top: -100px;
  left: 200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse, #2563eb22 0%, transparent 70%);
  animation: glowPulse 4s ease-in-out infinite alternate;
}

/* Text / content side of hero */
.hero-content {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  max-width: 520px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--col-accent);
  border-radius: var(--radius-xl);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--col-white);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  box-shadow: 0 0 20px var(--col-accent-glow);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 80px);
  line-height: 0.95;
  color: var(--col-white);
  margin-bottom: var(--space-md);
  letter-spacing: 2px;
}

.hero-accent {
  color: var(--col-accent-bright);
  /* Subtle text glow */
  text-shadow: 0 0 40px var(--col-accent-glow);
}

.hero-desc {
  font-size: 15px;
  color: var(--col-text-secondary);
  max-width: 400px;
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}

/* Meta info row (designer name, downloads, rating) */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: 13px;
  color: var(--col-text-secondary);
}

.hero-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Hero action buttons */
.hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Vertical thumbnail carousel strip */
.hero-thumbs {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Clipping window — shows 5 thumbs at a time.
   Overflow is intentionally visible so the 200% hover
   scale is not clipped; the hero-section's own
   overflow:hidden acts as the outer boundary. */
.hero-thumbs-viewport {
  width: 100px;
  height: 472px; /* 5 × 88px card + 4 × 8px gap */
  position: relative;
  overflow: visible;
}

/* Sliding inner track */
.hero-thumbs-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Individual thumbnail card */
.hero-thumb {
  width: 100px;
  height: 88px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--col-border);
  position: relative;
  z-index: 1;
  transform-origin: center right;
  transition: border-color 0.3s ease,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              z-index 0s;
}

.hero-thumb img {
  width: 100%;
  height: 64px;
  object-fit: cover;
  display: block;
}

/* Active state */
.hero-thumb.active {
  border-color: var(--col-accent-bright);
}

/* Hover — grow to 200%, expand leftward from right edge */
.hero-thumb:hover {
  transform: scale(2);
  border-color: var(--col-accent-bright);
  z-index: 20;
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.4);
}

.thumb-label {
  display: block;
  background: rgba(0, 0, 0, 0.78);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  padding: 4px 3px;
  color: var(--col-text-secondary);
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================================
   Hero Showcase — 5-card perspective fan
   Five cards fanning outward from center. Center card
   is raised with an accent glow; outer cards recede
   in perspective and dim progressively.
====================================================== */
.hero-showcase {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 430px;
  perspective: 1100px;
  margin-right: 120px;
  transform: translateX(-150px);
  z-index: 3;
}

.showcase-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 255px;
  height: 345px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.4s ease,
              border-color 0.4s ease;
}

.showcase-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Outer-left — furthest back, barely visible */
.sc-outer-left {
  transform: translate(calc(-50% - 455px), -50%) rotateY(54deg) scale(0.48);
  filter: brightness(0.18) saturate(0.3);
  z-index: 1;
}

/* Far-left — second from edge */
.sc-far-left {
  transform: translate(calc(-50% - 380px), -50%) rotateY(42deg) scale(0.62);
  filter: brightness(0.32) saturate(0.4);
  z-index: 2;
}

/* Left — one step back */
.sc-left {
  transform: translate(calc(-50% - 240px), -50%) rotateY(26deg) scale(0.82);
  filter: brightness(0.52) saturate(0.55);
  z-index: 3;
}

/* Center — front and centre, dark blue border */
.sc-center {
  transform: translate(-50%, -50%) rotateY(0deg) scale(1.12);
  border-color: #1e3a6e;
  box-shadow: 0 24px 60px rgba(15, 30, 80, 0.7),
              0 0 0 2px #1e3a6e,
              0 0 40px rgba(30, 58, 110, 0.3);
  z-index: 5;
}

/* Right — mirror of left */
.sc-right {
  transform: translate(calc(-50% + 240px), -50%) rotateY(-26deg) scale(0.82);
  filter: brightness(0.52) saturate(0.55);
  z-index: 3;
}

/* Far-right — mirror of far-left */
.sc-far-right {
  transform: translate(calc(-50% + 380px), -50%) rotateY(-42deg) scale(0.62);
  filter: brightness(0.32) saturate(0.4);
  z-index: 2;
}

/* Outer-right — mirror of outer-left */
.sc-outer-right {
  transform: translate(calc(-50% + 455px), -50%) rotateY(-54deg) scale(0.48);
  filter: brightness(0.18) saturate(0.3);
  z-index: 1;
}

/* Small label badge on the center card */
.sc-badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--col-accent);
  color: var(--col-white);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: var(--radius-xl);
  white-space: nowrap;
  box-shadow: 0 0 12px var(--col-accent-glow);
}


/* =====================================================
   8. Content Sections & Section Headers
   Reusable wrapper for each horizontal content section.
====================================================== */
.content-section {
  padding: var(--space-xl) var(--space-xl) 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.section-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 1.5px;
  color: var(--col-white);
}

.section-controls {
  display: flex;
  gap: var(--space-xs);
}

/* Carousel navigation arrows */
.carousel-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--col-border);
  background: var(--col-surface-2);
  color: var(--col-text-secondary);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.carousel-btn:hover {
  border-color: var(--col-accent);
  color: var(--col-accent-bright);
  background: var(--col-surface-3);
}

/* Dot — used for live indicator and separators */
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-blue {
  background: var(--col-accent-bright);
  box-shadow: 0 0 6px var(--col-accent-glow);
  animation: dotPulse 2s ease-in-out infinite;
}


/* =====================================================
   9. Model Cards
   Horizontal scrollable row of model preview cards.
   Each card has a coloured thumbnail placeholder, a
   hover overlay with a download button, and metadata.
====================================================== */
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
}

.model-card {
  background: var(--col-surface-1);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex: 1 1 200px;
  max-width: 240px;
  transition: border-color var(--transition-fast),
              transform var(--transition-med),
              box-shadow var(--transition-med);
}

.model-card:hover {
  border-color: var(--col-accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.2);
}

/* Thumbnail area with overlay */
.card-thumb {
  position: relative;
  height: 140px;
  overflow: hidden;
}

/* Hover overlay (appears on card hover via parent hover) */
.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 9, 15, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-med);
}

.model-card:hover .card-overlay {
  opacity: 1;
}

/* Colour-coded thumbnail placeholder gradients */
.card-thumb-a { background: linear-gradient(135deg, #1a3a7a, #0c2050); }
.card-thumb-b { background: linear-gradient(135deg, #0e2d6a, #071a42); }
.card-thumb-c { background: linear-gradient(135deg, #102460, #060f30); }
.card-thumb-d { background: linear-gradient(135deg, #163070, #0a1d4a); }
.card-thumb-e { background: linear-gradient(135deg, #0c2860, #050d30); }
.card-thumb-f { background: linear-gradient(135deg, #1a2f6a, #2d1060); }
.card-thumb-g { background: linear-gradient(135deg, #0e3060, #103a20); }
.card-thumb-h { background: linear-gradient(135deg, #2a1a5a, #0c1040); }
.card-thumb-i { background: linear-gradient(135deg, #1e3a4a, #062030); }
.card-thumb-j { background: linear-gradient(135deg, #0a2850, #1a0e40); }
.card-thumb-k { background: linear-gradient(135deg, #0f3560, #2a1250); }
.card-thumb-l { background: linear-gradient(135deg, #142060, #06103a); }
.card-thumb-m { background: linear-gradient(135deg, #1a1060, #0e2a50); }
.card-thumb-n { background: linear-gradient(135deg, #0c3050, #1a2000); }
.card-thumb-o { background: linear-gradient(135deg, #201060, #0a2840); }
.card-thumb-p { background: linear-gradient(135deg, #0e1a60, #2a0a30); }
.card-thumb-q { background: linear-gradient(135deg, #1a2a40, #0a1060); }
.card-thumb-r { background: linear-gradient(135deg, #0c2040, #201a60); }
.card-thumb-s { background: linear-gradient(135deg, #162050, #0a3020); }
.card-thumb-t { background: linear-gradient(135deg, #2a1050, #0e2060); }
.card-thumb-u { background: linear-gradient(135deg, #0e2a60, #1a0a50); }
.card-thumb-v { background: linear-gradient(135deg, #1a0a60, #0c2a40); }
.card-thumb-w { background: linear-gradient(135deg, #102060, #2a1a40); }
.card-thumb-x { background: linear-gradient(135deg, #0a1a50, #1a2a60); }
.card-thumb-y { background: linear-gradient(135deg, #1e1060, #0a3050); }

/* Actual image inside the thumbnail area */
.card-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* FREE / PRO badge over thumbnail */
.card-live-badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--col-free);
  color: var(--col-white);
  z-index: 1;
}

.card-badge-premium {
  background: var(--col-premium);
}

/* Card text body */
.card-body {
  padding: var(--space-md);
}

.card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--col-text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-sub {
  font-size: 12px;
  color: var(--col-text-dim);
  margin-bottom: var(--space-sm);
}

/* Tag pills inside card */
.card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.tag {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: var(--col-surface-3);
  color: var(--col-text-secondary);
  border: 1px solid var(--col-border);
}

.tag-free {
  color: var(--col-free);
  border-color: var(--col-free);
  background: rgba(34, 197, 94, 0.1);
}

.tag-premium {
  color: var(--col-premium);
  border-color: var(--col-premium);
  background: rgba(245, 158, 11, 0.1);
}

/* Rating + download count row */
.card-stats {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 11px;
  color: var(--col-text-dim);
  font-family: var(--font-mono);
}


/* =====================================================
   10. Category Gradient Bar
   Full-width accent stripe below the section title —
   gradients from deep navy through indigo and purple
   into forest green, with a soft colour glow.
====================================================== */
.category-gradient-bar {
  flex: 1;
  min-width: 0;
  height: 22px;
  margin-left: var(--space-xl);
  border-radius: 4px;
  position: relative;
  background: linear-gradient(to right,
    #020a1c 0%,
    #071540 20%,
    #1a3caa 45%,
    #2563eb 50%,
    #1a3caa 55%,
    #071540 80%,
    #020a1c 100%
  );
}

.category-gradient-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(10px);
  transform: scaleY(3);
  opacity: 0.4;
  z-index: -1;
  border-radius: 4px;
}


/* =====================================================
   11. Categories Grid
   Masonry-style grid with one large card on the left
   and four smaller cards in a 2×2 on the right.
====================================================== */
.categories-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-md);
  padding-bottom: var(--space-xl);
}

.cat-card {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--col-border);
  transition: transform var(--transition-med),
              border-color var(--transition-fast);
  min-height: 160px;
  justify-content: flex-end;
}

.cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--col-accent);
}

/* The large card spans two rows on the left */
.cat-large {
  grid-row: 1 / span 2;
  min-height: 340px;
}

/* Background gradients for each category card */
.cat-bg-1 { background: linear-gradient(160deg, #0e2357, #071630 60%, #050d20); }
.cat-bg-2 { background: linear-gradient(135deg, #0c1e4a, #071228); }
.cat-bg-3 { background: linear-gradient(135deg, #0d2050, #060f2a); }
.cat-bg-4 { background: linear-gradient(135deg, #101e50, #080e28); }
.cat-bg-5 { background: linear-gradient(135deg, #0e1c48, #060c26); }

/* Decorative background shape per card */
.cat-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.cat-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--col-surface-3);
  color: var(--col-text-secondary);
  margin-bottom: var(--space-xs);
  align-self: flex-start;
  border: 1px solid var(--col-border);
}

/* "LIVE UPLOADS" badge gets accent colour */
.cat-live-badge {
  background: var(--col-accent);
  border-color: var(--col-accent);
  color: var(--col-white);
  box-shadow: 0 0 12px var(--col-accent-glow);
  animation: glowPulse 2s ease-in-out infinite alternate;
}

.cat-title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--col-white);
}

.cat-large .cat-title {
  font-size: 36px;
}

.cat-sub {
  font-size: 13px;
  color: var(--col-text-secondary);
  margin-bottom: var(--space-sm);
}


/* =====================================================
   12. Collections Row
   Horizontal scrollable row of collection cards,
   similar to "streamer teams" in the reference design.
====================================================== */
.collections-row {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-xl);
  scroll-snap-type: x mandatory;
}

.collections-row::-webkit-scrollbar { height: 4px; }
.collections-row::-webkit-scrollbar-track { background: var(--col-surface-1); }
.collections-row::-webkit-scrollbar-thumb { background: var(--col-surface-3); border-radius: 2px; }

.collection-card {
  background: var(--col-surface-1);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 220px;
  scroll-snap-align: start;
  flex-shrink: 0;
  transition: border-color var(--transition-fast),
              transform var(--transition-med);
}

.collection-card:hover {
  border-color: var(--col-accent);
  transform: translateY(-3px);
}

/* Featured collection gets a glowing accent border */
.collection-card-featured {
  border-color: var(--col-accent);
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.25);
}

.col-img {
  height: 120px;
  width: 100%;
}

/* Placeholder gradients for collection thumbnails */
.col-img-1 { background: linear-gradient(135deg, #112860, #060e30); }
.col-img-2 { background: linear-gradient(135deg, #0d2258, #050b28); }
.col-img-3 { background: linear-gradient(135deg, #0f2668, #071435); }
.col-img-4 { background: linear-gradient(135deg, #0c2050, #040c25); }

.col-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.col-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--col-cyan);
}

.col-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--col-text-primary);
}

.col-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--col-text-dim);
}

.col-rating {
  font-size: 12px;
  color: var(--col-accent-bright);
  font-family: var(--font-mono);
}


/* =====================================================
   13. CTA Banner
   Full-width banner at the bottom of the page that
   encourages users to create an account and upload.
====================================================== */
.cta-banner {
  position: relative;
  margin: var(--space-xl);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, #0f2460 0%, #071535 50%, #050e25 100%);
  border: 1px solid var(--col-accent);
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  box-shadow: 0 0 60px rgba(37, 99, 235, 0.2);
}

/* Dot-grid overlay matching the hero */
.cta-bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #2563eb33 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.5;
  pointer-events: none;
}

/* Decorative geometric shape on the right side */
.cta-shape {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(37, 99, 235, 0.25), transparent 70%);
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 2;
}

.cta-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--col-cyan);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 0.95;
  color: var(--col-white);
  margin-bottom: var(--space-md);
  letter-spacing: 2px;
}

.cta-accent {
  color: var(--col-accent-bright);
}

.cta-sub {
  font-size: 15px;
  color: var(--col-text-secondary);
  max-width: 420px;
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}


/* =====================================================
   14. Toast Notification
   Lightweight animated message bar that appears in the
   bottom-right corner for non-blocking feedback.
====================================================== */
.toast {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  background: var(--col-surface-2);
  border: 1px solid var(--col-accent);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--col-text-primary);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              0 0 20px var(--col-accent-glow);
  z-index: 999;
  /* Hidden by default */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--transition-med),
              transform var(--transition-med);
  max-width: 300px;
}

/* Class added by JS to show the toast */
.toast.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* =====================================================
   15. Download Modal
   Centered modal overlay with a simulated download
   progress bar and confirmation button.
====================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 9, 15, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-med);
}

/* Class added by JS to show the modal */
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  max-width: 400px;
  width: 90%;
  text-align: center;
  position: relative;
  transform: scale(0.9);
  transition: transform var(--transition-med);
  box-shadow: 0 0 60px rgba(37, 99, 235, 0.3);
}

.modal-overlay.open .modal {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--col-surface-3);
  color: var(--col-text-secondary);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.modal-close:hover {
  background: var(--col-border);
  color: var(--col-white);
}

.modal-icon {
  font-size: 40px;
  color: var(--col-accent-bright);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.15);
  margin-left: auto;
  margin-right: auto;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--col-white);
  margin-bottom: var(--space-sm);
}

.modal-desc {
  font-size: 14px;
  color: var(--col-text-secondary);
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}

/* Simulated download progress bar */
.modal-progress {
  height: 6px;
  background: var(--col-surface-3);
  border-radius: 3px;
  margin-bottom: var(--space-lg);
  overflow: hidden;
}

.modal-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--col-accent), var(--col-cyan));
  border-radius: 3px;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px var(--col-accent-glow);
}


/* =====================================================
   16. Scrollbar Styling
   Custom scrollbar for the overall page on browsers
   that support it (Chrome, Edge, Safari).
====================================================== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--col-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--col-surface-3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--col-accent-deep);
}


/* =====================================================
   17. Animations & Keyframes
   Reusable keyframe animations referenced throughout.
====================================================== */

/* Slow drift of the dot grid — creates a subtle depth effect */
@keyframes gridDrift {
  from { background-position: 0 0; }
  to   { background-position: 32px 32px; }
}

/* Breathing glow for accent elements */
@keyframes glowPulse {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* Live indicator dot pulse */
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.7; }
}

/* Slide in from below — used for cards and sections */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Staggered entry animation applied by JS to rows */
.animate-in {
  animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}


/* =====================================================
   18. Responsive (tablet / mobile)
   Collapses the sidebar into a hidden drawer that the
   hamburger button reveals.
====================================================== */
/* Wide-ish desktop: the 7-card fan spans ~1165px, plus 520px hero content —
   below 1400px it starts crowding the title, so scale it down. */
@media (max-width: 1400px) {
  .hero-showcase {
    transform: translateX(-80px) scale(0.85);
    margin-right: 80px;
  }
}

@media (max-width: 1200px) {
  .hero-showcase {
    transform: translateX(-30px) scale(0.68);
    margin-right: 30px;
    min-height: 340px;
  }
  .hero-thumbs {
    transform: translateY(-50%) scale(0.78);
    right: 8px;
  }
}

@media (max-width: 1024px) {
  /* Reduce side padding on medium screens */
  .content-section,
  .topbar {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  .topbar-nav {
    gap: 0;
  }

  .nav-menu-trigger {
    padding: 7px 9px;
    font-size: 12px;
  }

  .hero-showcase {
    transform: translateX(0) scale(0.55);
    margin-right: 0;
    min-height: 280px;
  }
  .hero-thumbs {
    transform: translateY(-50%) scale(0.65);
    right: 2px;
  }
}

/* Topbar overflow guard — the floating logo reserves 280px of left padding and
   the dropdown nav is ~450px wide. On tablet/phone widths that pushes the
   sticky topbar past the viewport and forces horizontal scroll. Below 1100px:
   hide the dropdowns, shrink the hanging logo badge, pull the padding in,
   and let the search flex to fill remaining space. */
@media (max-width: 1100px) {
  .topbar-nav {
    display: none;
  }
  .topbar {
    padding-left: 160px;
    padding-right: var(--space-lg);
    gap: var(--space-sm);
  }
  .topbar-logo {
    padding: 6px 22px 12px 22px;
  }
  .logo-icon {
    font-size: 26px;
  }
  .logo-text {
    font-size: 22px;
    letter-spacing: 2px;
  }
  .search-wrap {
    width: auto;
    flex: 1;
    min-width: 0;
  }
}

/* Below ~900px the fan and vertical strip can't fit alongside the hero copy
   without overlap — hide them so the title/description own the header. */
@media (max-width: 900px) {
  .hero-showcase,
  .hero-thumbs {
    display: none;
  }
  .hero-section {
    padding: var(--space-lg);
  }
}

@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    padding: var(--space-lg);
  }

  /* Categories become a single column on mobile */
  .categories-grid {
    grid-template-columns: 1fr;
  }

  .cat-large {
    grid-row: auto;
    min-height: 200px;
  }

  /* CTA stacks vertically */
  .cta-banner {
    margin: var(--space-md);
    padding: var(--space-lg);
    flex-direction: column;
  }

  /* Topbar actions — collapse upload button */
  .topbar-actions .btn-ghost {
    display: none;
  }
}


/* =====================================================
   Detail Page — Slim Hero Banner
   Same visual language as the index hero but capped at
   175px so the focus stays on the product viewer below.
====================================================== */
.detail-hero {
  position: relative;
  height: 70px;
  min-height: 70px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--col-surface-2);
  border-bottom: 1px solid var(--col-border);
  padding: 0;
}

.detail-hero .hero-bg-image {
  opacity: 0.14;
}

.detail-hero-content {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.details-hero-content {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Smaller title for the compact banner — single line */
.detail-hero-title {
  font-size: 3rem !important;
  line-height: 1 !important;
  margin: 0 0 8px !important;
  white-space: nowrap;
}

.detail-hero-desc {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--col-text-secondary);
  margin: 0 0 10px;
  max-width: 100%;
  line-height: 1.65;
}
.detail-hero-desc:last-child { margin-bottom: 0; }


/* =====================================================
   Detail Page — Body Layout
   Left/center column (viewer + CTA) beside right column
   (info panel) so the info panel stretches past the viewer.
====================================================== */
.detail-body {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 32px 40px 40px;
  background: var(--col-bg);
}

.detail-body-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.detail-body-aside {
  flex: 0 0 360px;
}

/* =====================================================
   Detail Page — Image Viewer (inside detail-body-main)
====================================================== */
.detail-viewer-section {
  display: flex;
  gap: 28px;
  padding: 0;
  background: transparent;
  align-items: flex-start;
}

/* Left thumbnail strip */
.detail-thumbs {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

.detail-thumbs-viewport {
  width: 96px;
  height: 632px;   /* 10 × 56px + 9 × 8px gap */
  position: relative;
  overflow: visible;
}

.detail-thumbs-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.detail-thumb {
  width: 96px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--col-border);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-thumb:hover,
.detail-thumb.active {
  border-color: var(--col-accent-bright);
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.35);
}

.detail-thumb:hover {
  transform: scale(2);
  transform-origin: left center;
  z-index: 20;
}

/* Middle preview panel — height follows the image so nothing is clipped */
.detail-preview-wrap {
  flex: 1;
  padding: 10px;
  background: var(--col-surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--col-border);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.detail-preview-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: none;
  transition: opacity 0.15s ease;
  border-radius: 0;
}


/* =====================================================
   Detail Page — Info Panel (right column)
====================================================== */
.detail-info-panel {
  width: 100%;
  background: var(--col-surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--col-border);
  padding: 28px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Price + rating header */
.dip-header {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--col-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dip-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dip-price {
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--col-text-primary);
  line-height: 1;
}

.dip-price-badge {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--col-accent);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.dip-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dip-stars {
  color: #fbbf24;
  font-size: 1.05rem;
  letter-spacing: 2px;
}

.dip-rating-text {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--col-text-secondary);
}

.dip-dl-count {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--col-text-dim);
}

.dip-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

/* Specs grid — 3 columns of stat tiles */
.dip-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.dip-spec-tile {
  background: var(--col-surface-3);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dip-spec-icon {
  font-size: 1.1rem;
  color: var(--col-accent-bright);
  line-height: 1;
}

.dip-spec-label {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--col-text-dim);
}

.dip-spec-value {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--col-text-primary);
}

/* Section header label */
.dip-section-title {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--col-accent-bright);
  margin: 0 0 10px;
}

/* Print settings key/value list */
.dip-print-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dip-print-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--col-border);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.dip-print-list li:last-child { border-bottom: none; }

.dip-pl-key { color: var(--col-text-secondary); font-weight: 500; }
.dip-pl-val {
  color: var(--col-text-primary);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

/* Feature highlight pills */
.dip-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dip-feat {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--radius-md);
  border-left: 3px solid;
}

.dip-feat-cyan   { background: rgba(6,182,212,0.10);   border-color: #06b6d4; color: #67e8f9; }
.dip-feat-blue   { background: rgba(37,99,235,0.14);   border-color: #3b82f6; color: #93c5fd; }
.dip-feat-purple { background: rgba(139,92,246,0.12);  border-color: #7c3aed; color: #c4b5fd; }
.dip-feat-green  { background: rgba(16,185,129,0.12);  border-color: #10b981; color: #6ee7b7; }
.dip-feat-amber  { background: rgba(245,158,11,0.12);  border-color: #f59e0b; color: #fcd34d; }

/* Designer credit strip */
.dip-designer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--col-surface-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--col-border);
  margin-top: auto;
}

.dip-designer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--col-accent), var(--col-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
}

.dip-designer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dip-designer-name {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--col-text-primary);
}

.dip-designer-sub {
  font-family: var(--font-ui);
  font-size: 0.73rem;
  color: var(--col-text-secondary);
}

/* Description body text inside info panel */
.dip-desc-text {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--col-text-secondary);
  line-height: 1.7;
  margin: 0 0 10px;
}
.dip-desc-text:last-child { margin-bottom: 0; }

/* Review cards */
.dip-reviews {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dip-review {
  background: var(--col-surface-3);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.dip-review-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.dip-review-stars { color: #fbbf24; font-size: 0.85rem; }
.dip-review-author {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--col-text-primary);
}
.dip-review-date {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--col-text-dim);
  margin-left: auto;
}
.dip-review-body {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--col-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* What's included tag list */
.dip-included {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dip-included li {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--col-text-secondary);
  padding: 7px 12px;
  background: var(--col-surface-3);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--col-accent-bright);
}
.dip-included li strong { color: var(--col-text-primary); }

/* Designer "more from" panel inside the detail page column */
.detail-designer-section {
  background: var(--col-surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--col-border);
  padding: 28px;
}

.detail-designer-header {
  margin-bottom: 20px;
}

.detail-designer-header .cta-eyebrow {
  margin-bottom: 4px;
}

.detail-designer-header .section-title {
  margin: 0;
  font-size: 1.4rem;
}


/* =====================================================
   Zoom Modal — fullscreen image viewer for detail page
====================================================== */
.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(4, 6, 14, 0.97);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.zoom-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.zoom-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--col-surface-2);
  border-bottom: 1px solid var(--col-accent-bright);
  flex-shrink: 0;
  box-shadow: 0 0 24px rgba(37, 99, 235, 0.25);
}

.zoom-toolbar-title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2.5px;
  color: var(--col-text-secondary);
}

.zoom-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--col-text-secondary);
  opacity: 0.6;
}

.zoom-close {
  background: none;
  border: 1px solid var(--col-border);
  color: var(--col-text-primary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.zoom-close:hover {
  border-color: var(--col-accent-bright);
  color: var(--col-accent-bright);
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
}

.zoom-frame {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
  cursor: zoom-in;
}

.zoom-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
  border: 1px solid var(--col-border);
  box-shadow: 0 0 0 1px var(--col-accent-bright),
              0 0 60px rgba(37, 99, 235, 0.35);
  transform-origin: center center;
  transition: transform 0.12s ease;
  user-select: none;
  pointer-events: none;
}

/* CTA section fitted inside the detail page column — not full width */
.detail-page-cta {
  border-radius: var(--radius-lg);
  margin: 0;
  overflow: hidden;
}

.detail-page-cta .cta-content {
  width: 100%;
}

.detail-page-cta .cta-title {
  white-space: nowrap;
}


/* =====================================================
   Upload Page
   Two-column form layout: file/media drop zones on the
   left, metadata/settings panel on the right.
====================================================== */

/* Upload hero — taller than the detail hero */
.upload-hero {
  height: 150px;
  min-height: 150px;
}

.upload-hero-content {
  gap: 2px;
  padding-top: 50px;
}

.upload-hero-title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--col-white);
  margin: 0;
}

/* Details hero — matches upload hero */
.details-hero {
  height: 150px;
  min-height: 150px;
}

.details-hero-content {
  gap: 2px;
  padding-top: 50px;
}

.details-hero-title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--col-white);
  margin: 0;
}

/* Step progress bar */
.upload-steps {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 16px var(--space-xl);
  background: var(--col-surface-1);
  border-bottom: 1px solid var(--col-border);
}

.upload-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}

.upload-step-active {
  opacity: 1;
  background: var(--col-surface-3);
  border: 1px solid var(--col-accent);
}

.upload-step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--col-accent-bright);
  font-weight: 600;
}

.upload-step-label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--col-text-primary);
  letter-spacing: 0.5px;
}

.upload-step-arrow {
  font-size: 20px;
  color: var(--col-text-dim);
  padding: 0 4px;
  line-height: 1;
}

/* Body layout */
.upload-body {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: var(--space-xl);
}

.upload-body-main { padding-right: var(--space-lg); }
.upload-body-aside { padding-left: var(--space-lg); border-left: 1px solid var(--col-border); }

.upload-body-main {
  flex: 0 0 50%;
  width: 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.upload-body-aside {
  flex: 0 0 50%;
  width: 50%;
  min-width: 0;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.upload-body-aside::-webkit-scrollbar { width: 4px; }
.upload-body-aside::-webkit-scrollbar-track { background: transparent; }
.upload-body-aside::-webkit-scrollbar-thumb { background: var(--col-surface-3); border-radius: 2px; }

/* Each upload section card */
.upload-section {
  background: var(--col-surface-1);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.upload-section-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.upload-section-num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--col-accent);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.upload-section-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--col-white);
  margin-bottom: 2px;
}

.upload-section-sub {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--col-text-secondary);
  line-height: 1.5;
}

/* Drop zone */
.drop-zone {
  border: 2px dashed var(--col-border);
  border-radius: var(--radius-lg);
  background: var(--col-surface-2);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              box-shadow var(--transition-fast);
}

.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--col-accent);
  background: var(--col-surface-3);
  box-shadow: 0 0 24px rgba(37, 99, 235, 0.18);
}

.drop-zone-icon {
  font-size: 36px;
  color: var(--col-accent);
  line-height: 1;
  margin-bottom: 4px;
}

.drop-zone-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--col-text-primary);
}

.drop-zone-sub {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--col-text-secondary);
}

.drop-zone-browse {
  color: var(--col-accent-bright);
  text-decoration: underline;
  cursor: pointer;
}

.drop-zone-browse:hover {
  color: var(--col-white);
}

.drop-zone-types {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--col-text-dim);
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Uploaded file list */
.file-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.file-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}

.file-item-icon {
  font-size: 18px;
  color: var(--col-accent-bright);
  flex-shrink: 0;
}

.file-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.file-item-name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--col-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-item-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--col-text-dim);
}

.file-item-remove {
  flex-shrink: 0;
  color: var(--col-text-dim) !important;
}

.file-item-remove:hover {
  color: #f87171 !important;
  border-color: #f87171 !important;
}

/* Supports row */
.upload-supports-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
}

/* Image preview grid */
.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-sm);
  min-height: 60px;
}

.image-preview-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--space-lg);
  color: var(--col-text-dim);
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: center;
}

.image-preview-empty span {
  font-size: 28px;
  color: var(--col-surface-3);
}

.image-preview-thumb {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--col-border);
  aspect-ratio: 1;
  background: var(--col-surface-2);
}

.image-preview-cover {
  border-color: var(--col-accent);
  box-shadow: 0 0 0 2px var(--col-accent), 0 0 16px rgba(37, 99, 235, 0.3);
}

.image-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-cover-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: var(--col-accent);
  color: var(--col-white);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

.image-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: rgba(7, 9, 15, 0.85);
  border: 1px solid var(--col-border);
  border-radius: 50%;
  color: var(--col-text-secondary);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.image-preview-thumb:hover .image-remove-btn {
  opacity: 1;
}

.image-remove-btn:hover {
  color: #f87171;
  border-color: #f87171;
}

/* Video link rows */
.video-link-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.video-link-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.video-link-icon {
  font-size: 16px;
  color: var(--col-accent-bright);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.video-remove {
  flex-shrink: 0;
  color: var(--col-text-dim) !important;
}

.video-remove:hover:not(:disabled) {
  color: #f87171 !important;
  border-color: #f87171 !important;
}

/* Dynamic add/remove rows (highlights & included) */
.dynamic-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.dynamic-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.dynamic-row-icon {
  font-size: 14px;
  color: var(--col-accent-bright);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.dynamic-remove {
  flex-shrink: 0;
  color: var(--col-text-dim) !important;
}

.dynamic-remove:hover:not(:disabled) {
  color: #f87171 !important;
  border-color: #f87171 !important;
}

/* Add item button */
.upload-add-btn {
  align-self: flex-start;
  background: none;
  border: 1px dashed var(--col-border);
  border-radius: var(--radius-md);
  color: var(--col-text-secondary);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 7px 16px;
  cursor: pointer;
  transition: color var(--transition-fast),
              border-color var(--transition-fast);
}

.upload-add-btn:hover {
  color: var(--col-accent-bright);
  border-color: var(--col-accent);
}

/* Right panel */
.upload-panel {
  background: var(--col-surface-1);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.upload-panel-section {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upload-panel-title {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--col-accent-bright);
  margin-bottom: 2px;
}

.upload-panel-divider {
  height: 1px;
  background: var(--col-border);
}

/* Form elements */
.upload-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--col-text-secondary);
  letter-spacing: 0.4px;
  display: block;
  margin-bottom: -4px;
}

.upload-hint-inline {
  font-weight: 400;
  color: var(--col-text-dim);
}

.upload-required {
  color: #f87171;
}

.upload-input {
  width: 100%;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--col-text-primary);
  outline: none;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.upload-input::placeholder {
  color: var(--col-text-dim);
}

.upload-input:focus {
  border-color: var(--col-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.upload-textarea {
  width: 100%;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--col-text-primary);
  outline: none;
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.upload-textarea::placeholder { color: var(--col-text-dim); }
.upload-textarea:focus {
  border-color: var(--col-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.upload-select {
  width: 100%;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--col-text-primary);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238fa3c0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.upload-select:focus { border-color: var(--col-accent); }
.upload-select option { background: var(--col-surface-2); }

.upload-hint {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--col-text-dim);
  line-height: 1.5;
}

/* Pricing toggle */
.pricing-toggle {
  display: flex;
  gap: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--col-border);
  width: fit-content;
}

.pricing-btn {
  background: var(--col-surface-2);
  border: none;
  padding: 8px 24px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--col-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast);
}

.pricing-btn-active {
  background: var(--col-accent);
  color: var(--col-white);
}

.pricing-btn:hover:not(.pricing-btn-active) {
  background: var(--col-surface-3);
  color: var(--col-text-primary);
}

.price-input-wrap {
  display: none;
  align-items: center;
  gap: 6px;
}

.price-currency {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--col-accent-bright);
  line-height: 1;
}

.price-input {
  max-width: 140px;
}

/* Specs 2-col grid */
.upload-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.upload-spec-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Print settings 2-col grid */
.upload-print-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.upload-print-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Checkboxes */
.upload-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upload-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--col-text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.upload-check:hover { color: var(--col-text-primary); }

.upload-check input[type="checkbox"],
.upload-check input[type="radio"] {
  accent-color: var(--col-accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Publish action buttons */
.upload-actions {
  gap: var(--space-sm) !important;
}

.upload-publish-btn {
  width: 100%;
  justify-content: center;
  font-size: 15px;
  padding: 12px;
}

.upload-action-btn {
  width: 100%;
  justify-content: center;
}

.upload-terms {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--col-text-dim);
  text-align: center;
  padding: 0 var(--space-lg) var(--space-md);
  line-height: 1.6;
}

.upload-terms a {
  color: var(--col-accent-bright);
  text-decoration: none;
}

.upload-terms a:hover {
  text-decoration: underline;
}

.detail-page-cta .cta-sub {
  max-width: 100%;
}


/* =====================================================
   My Models — Designer Dashboard
   Two-column layout: groups sidebar + model card grid.
   Includes publish settings, move-to-group, and
   new/edit group modals.
====================================================== */

/* Hero */
.models-hero {
  height: 150px;
  min-height: 150px;
}

.models-hero-content {
  padding-top: 50px !important;
}

.models-hero-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: 0 var(--space-xl);
}

.models-hero-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.models-hero-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--col-white);
  margin: 0;
}

.models-hero-stats {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: 1;
  justify-content: center;
}

.models-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 16px;
  background: rgba(13, 17, 32, 0.6);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
}

.models-stat-pill-revenue {
  border-color: rgba(52, 211, 153, 0.25);
}

.models-stat-val {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  color: var(--col-white);
}

.models-stat-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--col-text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.models-hero-upload {
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
}

/* Toolbar */
.models-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--space-xl);
  background: var(--col-surface-1);
  border-bottom: 1px solid var(--col-border);
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.models-filter-tabs {
  display: flex;
  gap: 4px;
}

.mgt-tab {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 6px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--col-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.3px;
}

.mgt-tab:hover { color: var(--col-text-primary); background: var(--col-surface-3); }

.mgt-tab-active {
  color: var(--col-accent-bright) !important;
  border-color: var(--col-accent) !important;
  background: var(--col-surface-3) !important;
}

.models-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.mgt-bulk-select {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--col-text-secondary);
  cursor: pointer;
}

.mgt-bulk-select input { accent-color: var(--col-accent); }

.mgt-bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.mgt-sort-dd {
  width: auto;
  font-size: 12px;
  padding: 6px 28px 6px 10px;
}

.mgt-bulk-select-dd {
  width: auto;
  font-size: 12px;
  padding: 6px 28px 6px 10px;
}

.mgt-delete-btn { color: #f87171 !important; }
.mgt-delete-btn:hover { border-color: #f87171 !important; }

/* Page body */
.models-page-body {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 200px);
}

/* Sidebar */
.models-sidebar {
  width: 360px;
  flex-shrink: 0;
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: visible;
  border-right: 1px solid var(--col-border);
  background: var(--col-surface-1);
  z-index: 10;
}

.models-sidebar::-webkit-scrollbar { width: 3px; }
.models-sidebar::-webkit-scrollbar-thumb { background: var(--col-surface-3); }

.models-sidebar-inner {
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.models-sidebar-heading {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--col-text-dim);
  letter-spacing: 1px;
  padding: var(--space-sm) var(--space-sm) 2px;
  margin-top: var(--space-sm);
}

.sidebar-group-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all var(--transition-fast);
}

.sidebar-group:hover {
  background: var(--col-surface-3);
  color: var(--col-text-primary);
}

.sidebar-group-active {
  background: var(--col-surface-3) !important;
  border-color: var(--col-accent) !important;
}

.sidebar-group-icon {
  font-size: 14px;
  flex-shrink: 0;
  color: var(--col-accent-bright);
}

.sidebar-group-name {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--col-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-group-active .sidebar-group-name { color: var(--col-white); }

.sidebar-group-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--col-text-dim);
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: 10px;
  padding: 1px 7px;
  flex-shrink: 0;
}

.models-new-group-btn {
  background: none;
  border: 1px dashed var(--col-border);
  border-radius: var(--radius-md);
  padding: 7px var(--space-sm);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--col-text-dim);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: 4px;
}

.models-new-group-btn:hover { color: var(--col-accent-bright); border-color: var(--col-accent); }

.models-sidebar-divider {
  height: 1px;
  background: var(--col-border);
  margin: var(--space-sm) 0;
}

.sidebar-quick-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px var(--space-sm);
}

.sidebar-stat-label {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--col-text-dim);
}

.sidebar-stat-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--col-text-primary);
}

/* Main models area */
.models-main {
  flex: 1;
  min-width: 0;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* Group section */
.models-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.models-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--col-border);
}

.models-group-header-left {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.models-group-icon {
  font-size: 28px;
  color: var(--col-accent-bright);
  line-height: 1;
  margin-top: 2px;
  flex-shrink: 0;
}

.models-group-name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--col-white);
  margin-bottom: 4px;
}

.models-group-desc {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--col-text-secondary);
  line-height: 1.5;
}

.models-group-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Management card grid */
.mgt-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
}

/* Management card */
.mgt-card {
  background: var(--col-surface-1);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  position: relative;
}

.mgt-card:hover {
  border-color: var(--col-accent);
  box-shadow: 0 4px 24px rgba(37, 99, 235, 0.15);
}

.mgt-card-draft {
  opacity: 0.75;
}

.mgt-card-draft:hover { opacity: 1; }

/* Select checkbox overlay */
.mgt-card-select {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
}

.mgt-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--col-accent);
  cursor: pointer;
  background: var(--col-surface-2);
}

/* Thumbnail */
.mgt-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--col-surface-2);
}

.mgt-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-med);
}

.mgt-card:hover .mgt-card-thumb img { transform: scale(1.04); }

/* Status badge */
.mgt-status-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.mgt-status-live {
  background: rgba(34, 197, 94, 0.18);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.mgt-status-draft {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.mgt-status-scheduled {
  background: rgba(96, 165, 250, 0.15);
  color: var(--col-accent-bright);
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.mgt-status-unlisted {
  background: rgba(74, 96, 128, 0.2);
  color: var(--col-text-secondary);
  border: 1px solid var(--col-border);
}

/* Price badge on thumbnail */
.mgt-price-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(7, 9, 15, 0.85);
  color: var(--col-premium);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.mgt-price-free {
  color: var(--col-free);
  border-color: rgba(34, 197, 94, 0.3);
}

/* Card body */
.mgt-card-body {
  padding: 12px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.mgt-card-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--col-white);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mgt-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.mgt-card-stats {
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--col-text-secondary);
  flex-wrap: wrap;
}

.mgt-card-publish-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.mgt-publish-info {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--col-text-dim);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mgt-pub-live { color: rgba(34, 197, 94, 0.7); }
.mgt-pub-scheduled { color: var(--col-accent-bright); }

.mgt-audience-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--col-surface-3);
  color: var(--col-text-dim);
  border: 1px solid var(--col-border);
  white-space: nowrap;
  flex-shrink: 0;
}

.mgt-audience-tier {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.25);
}

/* Card action bar */
.mgt-card-actions {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-top: 1px solid var(--col-border);
  background: var(--col-surface-2);
  flex-wrap: wrap;
}

.mgt-card-actions .btn {
  flex: 1;
  justify-content: center;
  min-width: 0;
  font-size: 11px;
  padding: 5px 6px;
  text-decoration: none;
}

.mgt-more-btn {
  flex: 0 0 auto !important;
  padding: 5px 10px !important;
  font-size: 14px !important;
}

/* ── MODALS ── */
.mgt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 10, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.mgt-modal-open {
  opacity: 1 !important;
  visibility: visible !important;
}

.mgt-modal {
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(37, 99, 235, 0.12);
  transform: translateY(8px);
  transition: transform var(--transition-fast);
}

.mgt-modal-open .mgt-modal { transform: translateY(0); }

.mgt-modal-sm { max-width: 400px; }

.mgt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--col-border);
}

.mgt-modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--col-white);
}

.mgt-modal-close {
  background: none;
  border: none;
  color: var(--col-text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  transition: color var(--transition-fast);
}

.mgt-modal-close:hover { color: #f87171; }

.mgt-modal-body {
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mgt-modal-model-name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--col-accent-bright);
  margin-bottom: 4px;
}

.mgt-modal-footer {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--col-border);
}

/* Publish status radio options */
.mgt-status-options,
.mgt-group-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mgt-status-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--col-border);
  background: var(--col-surface-1);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--col-text-secondary);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.mgt-status-option:hover {
  background: var(--col-surface-3);
  border-color: var(--col-accent);
  color: var(--col-text-primary);
}

.mgt-status-option input[type="radio"] {
  accent-color: var(--col-accent);
  flex-shrink: 0;
}

/* Icon picker for group modal */
.mgt-icon-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mgt-icon-opt {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  background: var(--col-surface-1);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mgt-icon-opt:hover { border-color: var(--col-accent); background: var(--col-surface-3); }

.mgt-icon-selected {
  border-color: var(--col-accent) !important;
  background: var(--col-surface-3) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}


/* ── Sidebar group wrapper with drag + gear ── */
.sgw {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--radius-md);
  transition: opacity var(--transition-fast);
}

.sgw:hover .sgw-drag { opacity: 1; }
.sgw:hover .sgw-gear { opacity: 1; }

/* Drag handle */
.sgw-drag {
  font-size: 14px;
  color: var(--col-text-dim);
  cursor: grab;
  padding: 0 2px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}

.sgw-drag:active { cursor: grabbing; }

/* Gear settings button */
.sgw-gear {
  flex-shrink: 0;
  background: none;
  border: 1px solid transparent;
  font-size: 18px;
  color: var(--col-text-secondary);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  opacity: 0;
  position: relative;
  z-index: 50;
  transition: opacity var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  line-height: 1;
}

/* tooltip rendered via JS on body — no ::after needed */

.sgw-gear:hover {
  color: var(--col-accent-bright);
  background: var(--col-surface-3);
  border-color: var(--col-accent);
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.35);
}

.sgw-gear-active {
  opacity: 1 !important;
  color: var(--col-accent-bright) !important;
  background: var(--col-surface-3) !important;
  border-color: var(--col-accent) !important;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.35) !important;
}

.sgw:hover .sgw-gear { opacity: 1; color: var(--col-accent-bright); }

/* Make the sidebar-group inside sgw flex-grow */
.sgw .sidebar-group {
  flex: 1;
  min-width: 0;
}

/* Drag states */
.sgw-dragging {
  opacity: 0.4;
}

.sgw-drag-over {
  outline: 1px dashed var(--col-accent);
  outline-offset: 2px;
}

/* Inline settings popover */
.sgp {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--col-surface-2);
  border: 1px solid var(--col-accent);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(37, 99, 235, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast),
              transform var(--transition-fast),
              visibility var(--transition-fast);
}

.sgp-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sgp-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--col-accent-bright);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.sgp-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--col-text-dim);
  letter-spacing: 0.3px;
}

.sgp-rename-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.sgp-input {
  flex: 1;
  background: var(--col-surface-1);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--col-text-primary);
  outline: none;
  min-width: 0;
}

.sgp-input:focus { border-color: var(--col-accent); }

.sgp-action {
  background: none;
  border: 1px solid var(--col-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--col-text-secondary);
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              background var(--transition-fast);
}

.sgp-action:hover { color: var(--col-text-primary); background: var(--col-surface-3); border-color: var(--col-border); }

.sgp-action-delete { color: #f87171 !important; }
.sgp-action-delete:hover { border-color: #f87171 !important; background: rgba(248,113,113,0.08) !important; }


/* =====================================================
   Search Page Styles
====================================================== */

/* Search Hero */
.search-hero {
  position: relative;
  height: 200px;
  min-height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.search-hero-content {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2xl);
  padding: 60px var(--space-xl) 0;
  width: 100%;
  height: 100%;
}

.search-hero-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  max-width: 520px;
}

.search-hero-title {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  color: var(--col-white);
  letter-spacing: 2px;
  margin: 0;
}

.search-hero-desc {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: var(--col-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.4;
}

.search-hero-form {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
  white-space: nowrap;
}

.search-form-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.search-main-input {
  flex: 0 0 400px;
  width: 400px;
  padding: 12px 16px;
  border: 2px solid var(--col-border);
  border-radius: var(--radius-md);
  background: var(--col-surface-1);
  color: var(--col-text-primary);
  font-family: var(--font-ui);
  font-size: 1rem;
  outline: none;
  transition: border-color var(--transition-fast);
}

.search-main-input:focus {
  border-color: var(--col-accent);
}

.search-btn {
  padding: 12px 24px;
  background: var(--col-accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-btn:hover {
  background: var(--col-accent-bright);
}

.search-quick-filters {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: nowrap;
}

.search-filter-label {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--col-text-dim);
  font-weight: 600;
}

.search-filter-tag {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-sm);
  color: var(--col-text-secondary);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.search-filter-tag:hover {
  background: var(--col-accent);
  color: white;
  border-color: var(--col-accent);
}

/* Search Filters Bar */
.search-filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  background: var(--col-surface-1);
  border-bottom: 1px solid var(--col-border);
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.search-filters-left {
  display: flex;
  align-items: center;
}

.search-results-count {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--col-text-primary);
}

.search-filters-center {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.search-filters-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.search-filter-label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--col-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--col-border);
  border-radius: var(--radius-sm);
  background: var(--col-surface-2);
  color: var(--col-text-primary);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
}

.search-filter-select:focus {
  border-color: var(--col-accent);
}

/* Search Results Container */
.search-results-container {
  padding: var(--space-xl);
  background: var(--col-bg);
}

/* Pagination */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl);
  background: var(--col-surface-1);
  border-top: 1px solid var(--col-border);
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pagination-btn {
  padding: 8px 16px;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-sm);
  color: var(--col-text-primary);
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination-btn:hover:not(:disabled) {
  background: var(--col-accent);
  color: white;
  border-color: var(--col-accent);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-info {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--col-text-secondary);
  margin: 0 var(--space-sm);
}

.pagination-jump {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pagination-jump span {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--col-text-dim);
  font-weight: 600;
}

.pagination-jump input {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid var(--col-border);
  border-radius: var(--radius-sm);
  background: var(--col-surface-2);
  color: var(--col-text-primary);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  text-align: center;
  outline: none;
}

.pagination-jump input:focus {
  border-color: var(--col-accent);
}

/* Search Tags Cloud */
.search-popular-section {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.search-popular-section .section-title {
  flex-shrink: 0;
}

.search-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: flex-start;
  margin-top: 0;
}

.search-suggestion-tag {
  padding: 8px 16px;
  background: var(--col-surface-2);
  border: 1px solid var(--col-border);
  border-radius: var(--radius-md);
  color: var(--col-text-secondary);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  display: inline-block;
}

.search-suggestion-tag:hover {
  background: var(--col-accent);
  color: white;
  border-color: var(--col-accent);
  transform: translateY(-1px);
}