/* ==========================================================================
   InMusic - Front-End Theme · Core Stylesheet v1.0.0
   Bootstrap 5.3 · Bootstrap Icons · Inter + Bricolage Grotesque · CDN-only
   Bridges to ClearAdmin v1.1.0 design tokens (--ca-*).

   TABLE OF CONTENTS
    1.  CSS Custom Properties
    2.  Dark Mode Overrides
    3.  Base / Typography
    4.  Layout primitives
    5.  Buttons
    6.  Cards
    7.  Navbar
    8.  Footer
    9.  Forms / Inputs
   10.  Badges & Chips
   11.  Avatars
   12.  Section blocks (eyebrow / titles)
   13.  Track card (grid + list)
   14.  Album card
   15.  Artist card
   16.  Hero (home)
   17.  Track / Album hero (Spotify-style)
   18.  Artist profile hero (cinematic)
   19.  Tabs
   20.  Pricing
   21.  Pagination
   22.  Empty states
   23.  Modals
   24.  Toast / Alert
   25.  Skeleton
   26.  Scroll progress + back-to-top
   27.  Utilities
   28.  Responsive
   ========================================================================== */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */
:root {
  /* Tells the browser which palette to draw its own controls in (date and
     time picker icons, select arrows, scrollbars, autofill). */
  color-scheme: light;

  /* === Brand (mirrors ClearAdmin) === */
  --ca-primary:        #3F72AF;
  --ca-primary-rgb:    63, 114, 175;
  --ca-primary-dark:   #2e5c96;
  --ca-primary-mid:    #4a85c4;
  --ca-primary-light:  rgba(63, 114, 175, 0.10);
  /* Light theme: the accent doubles as a text colour, so it is a deeper teal
     (5:1 on white). The bright brand teal stays on buttons via --im-accent-bright. */
  --ca-accent:         #007c82;
  --ca-accent-rgb:     0, 124, 130;
  --ca-accent-light:   rgba(0, 124, 130, 0.10);
  --im-accent-bright:  #00ADB5;

  /* One colour (D64). The public site is teal on ink or paper and nothing else; the former
     magenta, violet, pink and cyan names stay so older rules keep working, but they all
     resolve to the accent of the current theme. Amber and emerald are status colours only. */
  --im-magenta:        var(--ca-accent);
  --im-magenta-rgb:    var(--ca-accent-rgb);
  --im-violet:         var(--ca-accent);
  --im-pink:           var(--ca-accent);
  --im-cyan:           var(--ca-accent);
  --im-cyan-rgb:       var(--ca-accent-rgb);
  --im-amber:          #f59e0b;
  --im-emerald:        #10b981;

  /* "Gradients" are flat now (D64), kept as images so two-layer backgrounds still work.
     The primary fill is the deep teal the buttons use, so white text on it stays above 5:1. */
  --im-grad-primary:   linear-gradient(0deg, #006d73, #006d73);
  --im-grad-primary-bold: linear-gradient(0deg, #006d73, #006d73);
  --im-grad-accent:    linear-gradient(0deg, #00ADB5, #00ADB5);
  --im-grad-hero:      linear-gradient(0deg, #006d73, #006d73);
  --im-grad-warm:      linear-gradient(0deg, #006d73, #006d73);

  /* === Surfaces === */
  --ca-bg:             #f1f5f9;
  --ca-surface:        #ffffff;
  --ca-surface-2:      #f8fafc;
  --ca-surface-3:      #eef2f7;
  --ca-border:         rgba(15, 23, 42, 0.08);
  --ca-border-strong:  rgba(15, 23, 42, 0.14);
  --im-glass:          rgba(255, 255, 255, 0.65);
  --im-glass-border:   rgba(15, 23, 42, 0.08);

  /* === Text === */
  --ca-text:           #0f172a;
  --ca-text-2:         #475569;
  --ca-text-3:         #5b6678; /* 5.3:1 on the light page background */
  --ca-text-muted:     #64748b; /* was 2.3:1 */
  --ca-text-primary:   var(--ca-text);

  /* === Semantic === */
  --ca-success:    #16a34a;
  --ca-warning:    #d97706;
  --ca-danger:     #dc2626;
  --ca-info:       #0284c7;

  /* Text on the brand teal (buttons, badges): dark ink, 7:1 on #00ADB5 */
  --im-on-accent:      #04181a;

  /* === Header / Navbar === */
  --im-nav-h:          72px;
  --im-nav-bg:         rgba(255, 255, 255, 0.78);
  --im-nav-bg-solid:   #ffffff;
  --im-nav-border:     rgba(15, 23, 42, 0.06);

  /* === Radius === */
  --ca-radius-xs:   0.25rem;
  --ca-radius-sm:   0.375rem;
  --ca-radius:      0.5rem;
  --ca-radius-lg:   0.75rem;
  --ca-radius-xl:   1rem;
  --ca-radius-2xl:  1.5rem;
  --ca-radius-3xl:  2rem;
  --ca-radius-full: 9999px;

  /* === Shadows === */
  --ca-shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --ca-shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --ca-shadow:     0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --ca-shadow-md:  0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --ca-shadow-lg:  0 16px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
  --ca-shadow-xl:  0 24px 60px rgba(0,0,0,0.14), 0 12px 24px rgba(0,0,0,0.10);
  --im-shadow-glow: 0 8px 32px rgba(var(--ca-accent-rgb), 0.25), 0 0 0 1px rgba(var(--ca-accent-rgb), 0.15);
  --im-shadow-cover: 0 12px 32px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.10);

  /* === Z scale === */
  --im-z-nav:        1020;
  --im-z-overlay:    1029;
  --im-z-modal:      1050;
  --im-z-player:     1060;
  --im-z-toast:      1090;
  --im-z-skipnav:    9999;

  /* === Transitions === */
  --ca-t-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --ca-t:      0.20s cubic-bezier(0.4, 0, 0.2, 1);
  --ca-t-base: var(--ca-t);
  --ca-t-slow: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  --ca-t-bounce: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Typography === */
  --ca-font:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Headlines and the wordmark (D66). Playfair Display is the chosen backup, so it stays in the stack. */
  --im-font-display:'Bricolage Grotesque', 'Playfair Display', 'Inter', sans-serif;
  --ca-font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  /* === Player bar === */
  --im-player-h: 88px;
}

/* ==========================================================================
   2. DARK MODE
   ========================================================================== */
[data-theme="dark"] {
  /* Without this the native date picker icon stays black on dark fields. */
  color-scheme: dark;

  --ca-primary:        #5b8fd4;
  --ca-primary-rgb:    91, 143, 212;
  --ca-primary-dark:   #3F72AF;
  --ca-primary-light:  rgba(91, 143, 212, 0.16);
  --ca-accent:         #22d3db;
  --ca-accent-rgb:     34, 211, 219;
  --ca-accent-light:   rgba(34, 211, 219, 0.14);

  --ca-bg:             #0f1117;
  --ca-surface:        #1a1e2a;
  --ca-surface-2:      #1f2433;
  --ca-surface-3:      #232a3d;
  --ca-border:         rgba(255, 255, 255, 0.07);
  --ca-border-strong:  rgba(255, 255, 255, 0.13);
  --im-glass:          rgba(26, 30, 42, 0.72);
  --im-glass-border:   rgba(255, 255, 255, 0.06);

  --ca-text:           #e2e8f0;
  --ca-text-2:         #94a3b8;
  --ca-text-3:         #8a9bb8; /* 5.5:1 on dark surfaces */
  --ca-text-muted:     #7a8fae; /* was 3.6:1 */

  --ca-success:        #22c55e;
  --ca-warning:        #f59e0b;
  --ca-danger:         #f87171;
  --ca-info:           #38bdf8;

  --im-nav-bg:         rgba(15, 17, 23, 0.78);
  --im-nav-bg-solid:   rgb(15, 17, 23);
  --im-nav-border:     rgba(255, 255, 255, 0.06);

  --ca-shadow-xs:  0 1px 3px rgba(0,0,0,0.40);
  --ca-shadow-sm:  0 2px 6px rgba(0,0,0,0.45);
  --ca-shadow:     0 4px 14px rgba(0,0,0,0.55);
  --ca-shadow-md:  0 12px 28px -8px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
  --ca-shadow-lg:  0 24px 48px -16px rgba(0,0,0,0.65), 0 8px 20px rgba(0,0,0,0.40), 0 0 0 1px rgba(var(--ca-accent-rgb), 0.08);
  --ca-shadow-xl:  0 40px 80px -24px rgba(0,0,0,0.75), 0 12px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--ca-accent-rgb), 0.10);
  --im-shadow-glow: 0 8px 32px rgba(var(--ca-accent-rgb), 0.35), 0 0 0 1px rgba(var(--ca-accent-rgb), 0.20);

  /* Bootstrap dark overrides */
  --bs-body-color:     #e2e8f0;
  --bs-body-bg:        #0f1117;
  --bs-secondary-bg:   #1f2433;
  --bs-tertiary-bg:    #1a1e2a;
  --bs-border-color:   rgba(255,255,255,0.08);
}

/* ==========================================================================
   3. BASE / TYPOGRAPHY
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ca-font);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ca-text);
  background: var(--ca-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Decorative atmospheric background - fixed, dark default. Kept very subtle so it never bleeds onto cards. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 1400px 700px at 50% -30%, rgba(var(--ca-accent-rgb), 0.09), transparent 65%),
    radial-gradient(ellipse 1000px 600px at 50% 120%, rgba(var(--ca-primary-rgb), 0.06), transparent 70%);
  pointer-events: none;
}

[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 1400px 800px at 50% -30%, rgba(var(--ca-accent-rgb), 0.06), transparent 70%);
}

a { color: var(--ca-accent); text-decoration: none; transition: color var(--ca-t-fast); }
a:hover { color: var(--ca-accent); filter: brightness(1.15); }

/* Animated underline for inline text links (paragraph / prose / list copy) */
:where(p, li, dt, dd, blockquote, .im-prose, .im-text-link, .im-muted) a:not(.im-btn):not(.im-tag-pill):not(.im-chip):not(.im-page-link):not(.im-nav-link):not(.im-nav-dropdown-item):not(.im-mobile-link),
a.im-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  background-position: 0 100%;
  transition: background-size var(--ca-t), color var(--ca-t-fast);
  padding-bottom: 1px;
}
:where(p, li, dt, dd, blockquote, .im-prose, .im-text-link, .im-muted) a:not(.im-btn):not(.im-tag-pill):not(.im-chip):not(.im-page-link):not(.im-nav-link):not(.im-nav-dropdown-item):not(.im-mobile-link):hover,
a.im-link:hover {
  background-size: 100% 1.5px;
  filter: none;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  color: var(--ca-text);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.im-display {
  font-family: var(--im-font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.im-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ca-accent);
}
.im-eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.im-eyebrow:has(i)::before,
.im-eyebrow--no-line::before { display: none; }

/* Highlighted words in headings: flat accent, no gradient (D64). */
.im-text-gradient,
.im-text-gradient-warm { color: var(--ca-accent); }

.im-muted   { color: var(--ca-text-2); }
.im-muted-2 { color: var(--ca-text-3); }
.im-small   { font-size: 0.8125rem; }
.im-tiny    { font-size: 0.75rem; }

::selection {
  background: rgba(var(--ca-accent-rgb), 0.30);
  color: var(--ca-text);
}

/* Theme transition guard */
.im-theme-transitioning,
.im-theme-transitioning *,
.im-theme-transitioning *::before,
.im-theme-transitioning *::after {
  transition: background-color var(--ca-t-slow), color var(--ca-t-slow),
              border-color var(--ca-t-slow), box-shadow var(--ca-t-slow) !important;
}

/* Skip nav */
.im-skip-nav {
  position: absolute;
  left: -10000px;
  top: auto; width: 1px; height: 1px; overflow: hidden;
}
.im-skip-nav:focus {
  position: fixed; left: 1rem; top: 1rem;
  width: auto; height: auto; padding: .5rem 1rem;
  background: var(--im-accent-bright); color: var(--im-on-accent); z-index: var(--im-z-skipnav);
  border-radius: var(--ca-radius);
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */
.im-page { padding-top: var(--im-nav-h); }
.im-main { min-height: calc(100vh - var(--im-nav-h)); padding-bottom: 4rem; }
.im-section { padding: 4rem 0; position: relative; }
.im-section-sm { padding: 2.5rem 0; }
.im-section-lg { padding: 6rem 0; }

.im-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ca-border-strong), transparent);
  border: 0;
  margin: 2.5rem 0;
}

/* Container with extra breathing room on big screens */
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.im-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  border: 1px solid transparent;
  border-radius: var(--ca-radius-full);
  cursor: pointer;
  text-decoration: none;
  background-image: none;
  transition: transform var(--ca-t-fast), box-shadow var(--ca-t),
              background var(--ca-t), color var(--ca-t), border-color var(--ca-t);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.im-btn:active { transform: translateY(1px); }
.im-btn:focus-visible {
  outline: 2px solid var(--ca-accent);
  outline-offset: 2px;
}

/* Disabled: never lift, glow or look clickable (applies to every variant) */
.im-btn:disabled,
.im-btn.disabled,
.im-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* Variants
   Filled buttons use a flat deep teal so their text can be white (5.3:1; white
   on the bright brand teal #00ADB5 is only 2.7:1). The bright teal lives on in
   the glow and the animated border. */
.im-btn-primary,
.im-btn-accent {
  background: #006d73;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 1px 3px rgba(0,0,0,0.32),
    0 4px 14px rgba(0, 173, 181, 0.16),
    0 10px 32px rgba(0,0,0,0.10);
}
.im-btn-primary::after,
.im-btn-accent::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, transparent 55%);
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
}
/* Hover shine: a soft light band sweeps across once */
.im-btn-primary::before,
.im-btn-accent::before,
.im-btn-glow::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-130%);
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
}
.im-btn-primary:hover::before,
.im-btn-accent:hover::before,
.im-btn-glow:hover::before {
  transform: translateX(130%);
  transition: transform 0.75s cubic-bezier(.2,.7,.3,1);
}
.im-btn-primary:hover,
.im-btn-accent:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.16),
    0 0 0 1px rgba(0, 173, 181, 0.35),
    0 8px 22px rgba(0, 173, 181, 0.32),
    0 18px 44px rgba(0,0,0,0.22);
}
/* Press: sinks in */
.im-btn-primary:active,
.im-btn-accent:active,
.im-btn-glow:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.35),
    0 1px 2px rgba(0,0,0,0.28);
}

/* Key calls to action (Get Started, Start Listening, Become an Artist, ...):
   a light trail circles the border slowly, faster on hover. The border is a
   conic gradient painted under the fill (padding-box over border-box), so
   it works inside the button's rounded, clipped box. */
@property --im-spin {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes im-spin-border {
  to { --im-spin: 360deg; }
}
.im-btn-glow {
  --im-glow-fill: linear-gradient(#006d73, #006d73);
  --im-glow-ring: conic-gradient(from var(--im-spin),
      rgba(0, 173, 181, 0.22) 0deg,
      rgba(0, 173, 181, 0.22) 200deg,
      #00ADB5 270deg,
      #c4fcff 320deg,
      #00ADB5 345deg,
      rgba(0, 173, 181, 0.22) 360deg);
  border: 2px solid transparent;
  background: var(--im-glow-fill) padding-box, var(--im-glow-ring) border-box;
  animation: im-spin-border 6s linear infinite;
}
.im-btn-glow:hover {
  animation-duration: 2.4s;
}
/* Outline version: surface fill, same moving border. Repeated with two
   classes because .im-btn-outline (declared later) sets its own. */
.im-btn-outline.im-btn-glow,
.im-btn-outline.im-btn-glow:hover {
  --im-glow-fill: linear-gradient(var(--ca-surface), var(--ca-surface));
  border-color: transparent;
  background: var(--im-glow-fill) padding-box, var(--im-glow-ring) border-box;
}
.im-btn-outline.im-btn-glow:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(0, 173, 181, 0.25),
    0 8px 22px rgba(0, 173, 181, 0.22),
    0 18px 44px rgba(0,0,0,0.20);
}

@media (prefers-reduced-motion: reduce) {
  .im-btn-glow { animation: none; }
  .im-btn-primary::before,
  .im-btn-accent::before,
  .im-btn-glow::before { display: none; }
  .im-btn-primary:hover,
  .im-btn-accent:hover,
  .im-btn-outline.im-btn-glow:hover { transform: none; }
}

.im-btn-outline {
  background: rgba(255,255,255,0.04);
  color: var(--ca-text);
  border-color: var(--ca-border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 3px rgba(0,0,0,0.18),
    0 3px 10px rgba(0,0,0,0.10);
}
.im-btn-outline:hover {
  color: var(--ca-text);
  border-color: var(--ca-accent);
  background: var(--ca-accent-light);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 3px 8px rgba(0,0,0,0.20),
    0 8px 24px rgba(0,0,0,0.12);
}
.im-btn-outline:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.14),
    0 1px 2px rgba(0,0,0,0.14);
}

.im-btn-ghost {
  background: transparent;
  color: var(--ca-text-2);
}
.im-btn-ghost:hover {
  color: var(--ca-text);
  background: var(--ca-surface-2);
}

.im-btn-danger {
  background: #dc2626; /* fixed: the dark theme's lighter red fails contrast with white */
  color: #fff;
}
.im-btn-danger:hover { color: #fff; background: #b91c1c; transform: translateY(-2px); }

.im-btn-warn {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.35);
  color: var(--ca-warning);
}
.im-btn-warn:hover { color: var(--ca-warning); background: rgba(217, 119, 6, 0.2); }

/* Full-width helper for stacked mobile actions */
.im-btn-block { display: flex; width: 100%; }

/* Sizes */
.im-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8125rem; }
.im-btn-lg { padding: 0.85rem 1.75rem; font-size: 1rem; }
.im-btn-xl { padding: 1.05rem 2.25rem; font-size: 1.0625rem; }

.im-btn-icon {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 50%;
}
.im-btn-icon.im-btn-sm { width: 34px; height: 34px; }
.im-btn-icon.im-btn-lg { width: 48px; height: 48px; }

/* Bootstrap .btn-* on public pages: map Bootstrap's own variables onto the
   theme so any .btn markup is on-brand (Bootstrap's defaults are blue/grey). */
.btn-primary {
  --bs-btn-color: var(--im-on-accent);
  --bs-btn-bg: #00ADB5;
  --bs-btn-border-color: #00ADB5;
  --bs-btn-hover-color: var(--im-on-accent);
  --bs-btn-hover-bg: #22c4cc;
  --bs-btn-hover-border-color: #22c4cc;
  --bs-btn-active-color: var(--im-on-accent);
  --bs-btn-active-bg: #009099;
  --bs-btn-active-border-color: #009099;
  --bs-btn-disabled-color: var(--im-on-accent);
  --bs-btn-disabled-bg: #00ADB5;
  --bs-btn-disabled-border-color: #00ADB5;
  --bs-btn-focus-shadow-rgb: var(--ca-accent-rgb);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--ca-accent);
  --bs-btn-border-color: rgba(var(--ca-accent-rgb), 0.5);
  --bs-btn-hover-color: var(--im-on-accent);
  --bs-btn-hover-bg: #00ADB5;
  --bs-btn-hover-border-color: #00ADB5;
  --bs-btn-active-color: var(--im-on-accent);
  --bs-btn-active-bg: #009099;
  --bs-btn-active-border-color: #009099;
  --bs-btn-focus-shadow-rgb: var(--ca-accent-rgb);
}
.btn-outline-secondary,
.btn-soft-secondary {
  --bs-btn-color: var(--ca-text-2);
  --bs-btn-border-color: var(--ca-border-strong);
  --bs-btn-hover-color: var(--ca-text);
  --bs-btn-hover-bg: var(--ca-surface-2);
  --bs-btn-hover-border-color: var(--ca-border-strong);
  --bs-btn-active-color: var(--ca-text);
  --bs-btn-active-bg: var(--ca-surface-2);
  --bs-btn-active-border-color: var(--ca-border-strong);
}
.btn-soft-secondary { --bs-btn-bg: var(--ca-surface-2); }
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc2626;
  --bs-btn-border-color: #dc2626;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
  --bs-btn-active-bg: #991b1b;
  --bs-btn-active-border-color: #991b1b;
}
.btn-outline-danger {
  --bs-btn-color: var(--ca-danger);
  --bs-btn-border-color: rgba(220, 38, 38, 0.5);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #dc2626;
  --bs-btn-hover-border-color: #dc2626;
  --bs-btn-active-bg: #b91c1c;
}
.btn-link {
  --bs-btn-color: var(--ca-accent);
  --bs-btn-hover-color: var(--ca-accent);
}
.btn:focus-visible {
  outline: 2px solid var(--ca-accent);
  outline-offset: 2px;
}
.btn:disabled, .btn.disabled { cursor: not-allowed; }

/* Pill chip - used for filter chips */
.im-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--ca-text-2);
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-full);
  transition: all var(--ca-t-fast);
  cursor: pointer;
}
.im-chip:hover {
  border-color: var(--ca-accent);
  color: var(--ca-text);
}
.im-chip.is-active {
  background: var(--ca-accent-light);
  /* Body text colour, not the accent: accent on its own 10% tint is about 4.4:1 in light mode
     (WCAG AA needs 4.5:1 for this size). The accent stays on the border and the tint. */
  color: var(--ca-text);
  border-color: var(--ca-accent);
  font-weight: 600;
}

/* ==========================================================================
   6. CARDS
   ========================================================================== */
.im-card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-xl);
  box-shadow: var(--ca-shadow-sm);
  transition: transform var(--ca-t), box-shadow var(--ca-t), border-color var(--ca-t);
  position: relative;
  overflow: hidden;
}

.im-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--ca-shadow-lg);
  border-color: rgba(var(--ca-accent-rgb), 0.3);
}

.im-card-body { padding: 1.25rem; }
.im-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ca-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
}
.im-card-title {
  font-size: 1rem; font-weight: 700;
  margin: 0;
}

/* Glass card variant */
.im-card-glass {
  background: var(--im-glass);
  border: 1px solid var(--im-glass-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Stat card */
.im-stat {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1.25rem;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  transition: all var(--ca-t);
}
.im-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--ca-shadow-md);
  border-color: rgba(var(--ca-accent-rgb), 0.4);
}
.im-stat-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--ca-accent-light);
  color: var(--ca-accent);
  font-size: 1.25rem;
}
.im-stat-val { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.im-stat-lbl { font-size: 0.78rem; color: var(--ca-text-3); text-transform: uppercase; letter-spacing: 0.05em; }

/* ==========================================================================
   7. NAVBAR
   ========================================================================== */
.im-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--im-nav-h);
  z-index: var(--im-z-nav);
  background: var(--im-nav-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--im-nav-border);
  transition: box-shadow var(--ca-t), background var(--ca-t);
}
.im-nav.is-scrolled {
  box-shadow: var(--ca-shadow);
}
.im-nav-inner {
  height: 100%;
  display: flex; align-items: center; gap: 1.25rem;
}
.im-nav-brand {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--ca-text);
  letter-spacing: -0.025em;
}
.im-nav-brand:hover { color: var(--ca-text); }
/* The mark (D65): the bare glyph in teal, no tile, no gradient. It is an inline SVG in currentColor. */
.im-nav-brand-icon {
  width: 28px; height: 28px; flex: none;
  color: var(--ca-accent);
}
/* The wordmark is one weight and one colour (D64); nothing highlights "stem" any more. */
.im-nav-brand b,
.im-footer-brand b {
  font-weight: 800;
}

.im-nav-menu {
  display: flex; align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0; padding: 0;
}
.im-nav-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  white-space: nowrap; /* "For Artists" on one line, never stacked */
  font-size: 0.875rem; font-weight: 500;
  color: var(--ca-text-2);
  border-radius: var(--ca-radius-full);
  transition: all var(--ca-t-fast);
  position: relative;
}
.im-nav-link:hover { color: var(--ca-text); background: var(--ca-surface-2); }
.im-nav-link.is-active { color: var(--ca-accent); }
.im-nav-link.is-active::after {
  content: ""; position: absolute;
  left: 50%; bottom: -2px; transform: translateX(-50%);
  width: 18px; height: 2px;
  background: var(--ca-accent);
  border-radius: 2px;
}
.im-nav-link i { font-size: 0.95rem; }

.im-nav-dropdown { position: relative; }
.im-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem); left: 0;
  min-width: 240px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-lg);
  padding: 0.5rem;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--ca-t);
}
.im-nav-dropdown:hover .im-nav-dropdown-menu,
.im-nav-dropdown.is-open .im-nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.im-nav-dropdown-item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--ca-text-2);
  border-radius: var(--ca-radius);
  transition: all var(--ca-t-fast);
}
.im-nav-dropdown-item:hover {
  background: var(--ca-accent-light);
  color: var(--ca-accent);
}
.im-nav-dropdown-item i { width: 18px; color: var(--ca-text-3); }
.im-nav-dropdown-item:hover i { color: var(--ca-accent); }

.im-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

.im-nav-search-btn,
.im-nav-icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--ca-border);
  border-radius: 50%;
  color: var(--ca-text-2);
  cursor: pointer;
  transition: all var(--ca-t-fast);
  position: relative;
}
.im-nav-icon-btn:hover {
  border-color: var(--ca-accent);
  color: var(--ca-accent);
  transform: translateY(-1px);
}
.im-nav-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--ca-danger);
  color: #fff;
  font-size: 0.65rem; font-weight: 700;
  border-radius: 9px;
  display: grid; place-items: center;
  border: 2px solid var(--ca-surface);
}

.im-nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--ca-text);
  font-size: 1.25rem;
  cursor: pointer;
}

/* Mobile drawer */
.im-mobile-drawer {
  position: fixed;
  top: 0; right: -360px;
  width: 320px; max-width: 85vw;
  height: 100vh;
  background: var(--ca-surface);
  border-left: 1px solid var(--ca-border);
  box-shadow: var(--ca-shadow-xl);
  z-index: 1031;
  display: flex; flex-direction: column;
  transition: right var(--ca-t);
}
.im-mobile-drawer.is-open { right: 0; }
.im-mobile-drawer-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ca-border);
  display: flex; align-items: center; justify-content: space-between;
}
.im-mobile-drawer-body { flex: 1; padding: 1rem; overflow-y: auto; }
.im-mobile-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.95rem; font-weight: 500;
  color: var(--ca-text);
  border-radius: var(--ca-radius);
}
.im-mobile-link:hover { background: var(--ca-surface-2); color: var(--ca-text); }
.im-mobile-link i { font-size: 1.05rem; color: var(--ca-text-3); }

.im-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 1030;
  opacity: 0; visibility: hidden;
  transition: all var(--ca-t);
}
.im-overlay.is-open { opacity: 1; visibility: visible; }

/* Below 1200px the links move into the drawer: at 1024px they no longer fit beside the buttons. */
@media (max-width: 1199.98px) {
  .im-nav-menu { display: none; }
  .im-nav-toggle { display: inline-flex; }
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.im-footer {
  margin-top: 6rem;
  padding-top: 4rem;
  background:
    linear-gradient(180deg, transparent, rgba(var(--ca-accent-rgb), 0.04) 30%, transparent);
  border-top: 1px solid var(--ca-border);
  position: relative;
  padding-bottom: 1rem;
}
.im-footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ca-accent), transparent);
  opacity: 0.4;
}
.im-footer-brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 800; font-size: 1.25rem;
  color: var(--ca-text);
  margin-bottom: 1rem;
}
.im-footer-desc {
  color: var(--ca-text-2);
  font-size: 0.875rem;
  max-width: 36ch;
  margin-bottom: 1.25rem;
}
.im-footer-heading {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ca-text);
  margin-bottom: 1rem;
}
.im-footer-links { list-style: none; padding: 0; margin: 0; }
.im-footer-links li { margin-bottom: 0.55rem; }
.im-footer-links a {
  font-size: 0.875rem;
  color: var(--ca-text-2);
}
.im-footer-links a:hover { color: var(--ca-accent); }
.im-footer-social {
  display: flex; gap: 0.5rem; margin-top: 1rem;
}
.im-footer-social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--ca-border);
  border-radius: 50%;
  color: var(--ca-text-2);
  transition: all var(--ca-t-fast);
}
.im-footer-social a:hover {
  color: #fff;
  background: var(--im-grad-primary);
  border-color: transparent;
  transform: translateY(-2px);
}
.im-footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ca-border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8125rem; color: var(--ca-text-3);
  flex-wrap: wrap; gap: 0.75rem;
}

/* CTA section */
.im-cta {
  position: relative;
  padding: 5rem 0 4rem;
  text-align: center;
  overflow: hidden;
}
.im-cta::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 80%; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--ca-accent), transparent);
}
.im-newsletter {
  display: flex; align-items: center;
  max-width: 520px; margin: 0 auto;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-full);
  padding: 0.4rem;
  box-shadow: var(--ca-shadow-sm);
  transition: all var(--ca-t);
}
.im-newsletter:focus-within {
  border-color: var(--ca-accent);
  box-shadow: 0 0 0 4px rgba(var(--ca-accent-rgb), 0.12);
}
.im-newsletter input {
  flex: 1;
  border: 0; background: transparent;
  padding: 0.55rem 1rem;
  color: var(--ca-text);
  outline: none;
  font-size: 0.9rem;
}
.im-newsletter input::placeholder { color: var(--ca-text-3); }

/* ==========================================================================
   9. FORMS
   ========================================================================== */
.im-form-control,
.im-form-select {
  display: block;
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ca-text);
  background: var(--ca-surface);
  border: 1px solid var(--ca-border-strong);
  border-radius: var(--ca-radius);
  transition: all var(--ca-t-fast);
}
.im-form-control::placeholder { color: var(--ca-text-3); }
.im-form-control:focus,
.im-form-select:focus {
  outline: 0;
  border-color: var(--ca-accent);
  box-shadow: 0 0 0 4px rgba(var(--ca-accent-rgb), 0.14);
  background: var(--ca-surface);
}
.im-form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ca-text-2);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}

/* Search input with icon */
.im-search-wrap {
  position: relative;
}
.im-search-wrap .im-form-control {
  padding-left: 2.6rem;
  border-radius: var(--ca-radius-full);
}
.im-search-wrap > i {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  color: var(--ca-text-3);
  pointer-events: none;
}

/* Checkbox + Radio */
.im-check {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
}
.im-check input[type="checkbox"],
.im-check input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--ca-accent);
  cursor: pointer;
}

/* ==========================================================================
   10. BADGES
   ========================================================================== */
.im-badge {
  position: relative;
  isolation: isolate;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--ca-radius-full);
  background: var(--ca-surface-2);
  color: var(--ca-text-2);
  border: 1px solid var(--ca-border);
  box-shadow: none;
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
}
.im-badge > i,
.im-badge > .bi { font-size: 0.82em; }
.im-badge-xs { padding: 0.18rem 0.45rem; font-size: 0.58rem; letter-spacing: 0.08em; }
.im-badge-sm { padding: 0.22rem 0.56rem; font-size: 0.64rem; }
.im-badge-lg { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.im-badge-xl { padding: 0.52rem 1.05rem; font-size: 0.9rem; }
.im-badge-pill { border-radius: var(--ca-radius-full); }
.im-badge-square { border-radius: 0.85rem; }
.im-badge-outline { background: transparent; }
.im-badge-solid { border-color: transparent; color: #fff; }
.im-badge-glass {
  background: rgba(11, 14, 22, 0.72);
  color: #fff;
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 8px 20px rgba(0,0,0,0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.im-badge-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
.im-badge-neutral  { background: var(--ca-surface-2); color: var(--ca-text-2); border-color: var(--ca-border); }
.im-badge-primary { background: var(--ca-primary-light); color: var(--ca-primary); border-color: rgba(var(--ca-primary-rgb), 0.25); }
.im-badge-accent  { background: var(--ca-accent-light);  color: var(--ca-accent);  border-color: rgba(var(--ca-accent-rgb), 0.30); }
.im-badge-success { background: rgba(22,163,74,0.10);    color: var(--ca-success); border-color: rgba(22,163,74,0.25); }
.im-badge-warning { background: rgba(217,119,6,0.10);    color: var(--ca-warning); border-color: rgba(217,119,6,0.25); }
.im-badge-danger  { background: rgba(220,38,38,0.10);    color: var(--ca-danger);  border-color: rgba(220,38,38,0.25); }
.im-badge-magenta { background: rgba(var(--im-magenta-rgb), 0.10); color: var(--im-magenta); border-color: rgba(var(--im-magenta-rgb), 0.30); }

.im-badge-solid.im-badge-primary {
  background: var(--ca-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--ca-primary-rgb), 0.24);
}
.im-badge-solid.im-badge-accent  {
  background: var(--im-accent-bright);
  color: var(--im-on-accent);
  box-shadow: 0 6px 16px rgba(var(--ca-accent-rgb), 0.24);
}
.im-badge-solid.im-badge-success {
  background: var(--ca-success);
  color: #fff;
  box-shadow: 0 6px 16px rgba(34,197,94,0.24);
}
.im-badge-solid.im-badge-warning {
  background: var(--ca-warning);
  color: #281700;
  box-shadow: 0 6px 16px rgba(245,158,11,0.22);
}
.im-badge-solid.im-badge-danger  {
  background: var(--ca-danger);
  color: #fff;
  box-shadow: 0 6px 16px rgba(248,113,113,0.2);
}
/* The former magenta badge (the Pro plan): since D64 it is the accent, so it takes the
   accent badge's ink text; white on the bright teal fails contrast. */
.im-badge-solid.im-badge-magenta {
  background: var(--im-accent-bright);
  color: var(--im-on-accent);
  box-shadow: 0 6px 16px rgba(var(--ca-accent-rgb), 0.24);
}

.im-badge-glow {
  background: var(--im-grad-primary);
  color: #fff;
  border: 0;
  box-shadow: 0 4px 12px rgba(var(--ca-accent-rgb), 0.35);
}

.im-badge-status-new {
  background: linear-gradient(135deg, #0f9f76, #0b9ab4);
  color: #fff;
  border: 0;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
  box-shadow: 0 6px 18px rgba(16,185,129,0.24);
}
.im-badge-status-new::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.65);
}
.im-badge-status-live {
  background: rgba(34,197,94,0.14);
  color: #86efac;
  border-color: rgba(34,197,94,0.3);
}
.im-badge-status-trending {
  background: rgba(var(--ca-accent-rgb), 0.12);
  color: #7be9f5;
  border-color: rgba(var(--ca-accent-rgb), 0.3);
}
.im-badge-status-hot {
  background: rgba(245,158,11,0.14);
  color: #ffd28c;
  border-color: rgba(245,158,11,0.3);
}
.im-badge-status-premium {
  background: linear-gradient(135deg, #ffd76a, #f59e0b 58%, #d97706 100%);
  color: #3a1f00;
  border: 0;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.22);
  box-shadow: 0 8px 18px rgba(245,158,11,0.24), inset 0 1px 0 rgba(255,255,255,0.28);
}
.im-badge-status-verified {
  background: rgba(var(--ca-primary-rgb), 0.12);
  color: #a9d1ff;
  border-color: rgba(var(--ca-primary-rgb), 0.3);
}
.im-badge-status-limited {
  background: rgba(var(--im-magenta-rgb), 0.12);
  color: #f1a6ff;
  border-color: rgba(var(--im-magenta-rgb), 0.3);
}
.im-badge-status-picked {
  background: rgba(168,85,247,0.14);
  color: #dcc1ff;
  border-color: rgba(168,85,247,0.3);
}

.im-badge-motion-hover {
  transition: transform var(--ca-t-fast), box-shadow var(--ca-t-fast), border-color var(--ca-t-fast);
}
.im-badge-motion-hover:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}
.im-badge-motion-breathe {
  animation: imBadgeBreathe 2.8s ease-in-out infinite;
}
.im-badge-motion-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.18) 50%, transparent 80%);
  transform: translateX(-140%);
  animation: imBadgeSheen 2.8s ease-in-out infinite;
  pointer-events: none;
}
.im-badge-motion-pulse::before {
  animation: imBadgeDotPulse 1.8s infinite;
}

@keyframes imBadgeDotPulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  75%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

@keyframes imBadgeBreathe {
  0%, 100% { transform: translateY(0); box-shadow: none; }
  50%      { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.18); }
}

@keyframes imBadgeSheen {
  0%, 100% { transform: translateX(-140%); }
  55%, 70% { transform: translateX(140%); }
}

[data-theme="light"] .im-badge-status-live {
  background: rgba(34,197,94,0.12);
  color: #15803d;
  border-color: rgba(34,197,94,0.24);
}

[data-theme="light"] .im-badge-status-trending {
  background: rgba(0,173,181,0.12);
  color: #0f7c85;
  border-color: rgba(0,173,181,0.26);
}

[data-theme="light"] .im-badge-status-hot {
  background: rgba(217,119,6,0.12);
  color: #a04d00;
  border-color: rgba(217,119,6,0.24);
}

[data-theme="light"] .im-badge-status-verified {
  background: rgba(63,114,175,0.12);
  color: #2e5c96;
  border-color: rgba(63,114,175,0.24);
}

[data-theme="light"] .im-badge-status-limited {
  background: rgba(var(--im-magenta-rgb), 0.12);
  color: #9529a6;
  border-color: rgba(var(--im-magenta-rgb), 0.26);
}

[data-theme="light"] .im-badge-status-picked {
  background: rgba(124,58,237,0.10);
  color: #6d28d9;
  border-color: rgba(124,58,237,0.22);
}

[data-theme="light"] .im-badge-status-premium {
  color: #3a1f00;
  box-shadow: 0 8px 18px rgba(245,158,11,0.16), inset 0 1px 0 rgba(255,255,255,0.35);
}

[data-theme="dark"] .im-badge-status-new {
  color: #f8fffe;
  text-shadow: 0 1px 1px rgba(0,0,0,0.28);
}

[data-theme="dark"] .im-badge-status-premium {
  color: #2b1600;
  text-shadow: 0 1px 0 rgba(255,255,255,0.16);
}

.im-verified-tick {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  background: var(--ca-accent);
  color: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  vertical-align: middle;
  margin-left: 0.4rem;
}

/* ==========================================================================
   11. AVATARS
   ========================================================================== */
.im-avatar {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ca-surface-2);
  color: var(--ca-text);
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.im-avatar img { width: 100%; height: 100%; object-fit: cover; }
.im-avatar-sm { width: 28px; height: 28px; font-size: 0.75rem; }
.im-avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }
.im-avatar-xl { width: 96px; height: 96px; font-size: 1.85rem; }
.im-avatar-2xl { width: 144px; height: 144px; font-size: 2.5rem; }

.im-avatar-ring {
  padding: 3px;
  background: var(--im-grad-primary);
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.im-avatar-ring .im-avatar { border: 2px solid var(--ca-surface); }

.im-avatar-status {
  position: absolute;
  bottom: 4%; right: 4%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ca-text-3);
  border: 2px solid var(--ca-surface);
}
.im-avatar-status.is-online { background: var(--ca-success); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }

/* ==========================================================================
   12. SECTION BLOCKS
   ========================================================================== */
.im-section-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.im-section-title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0.4rem 0 0;
}
.im-section-title-display {
  font-family: var(--im-font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
  margin: 0.4rem 0 0;
}
.im-section-sub {
  color: var(--ca-text-2);
  font-size: 0.95rem;
  margin: 0.4rem 0 0;
}

.im-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.im-badge-row-center {
  justify-content: center;
}

.im-badge-row-tight {
  gap: 0.35rem;
}

/* ==========================================================================
   13. TRACK CARD (grid + list)
   ========================================================================== */
.im-track-card {
  position: relative;
  border-radius: var(--ca-radius-xl);
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  overflow: hidden;
  transition: all var(--ca-t);
}
.im-track-card.is-menu-open { overflow: visible; }
.im-track-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ca-shadow-lg);
  border-color: rgba(var(--ca-accent-rgb), 0.3);
}
.im-track-cover {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ca-surface-3);
}
.im-track-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--ca-t-slow);
}
.im-track-card:hover .im-track-cover img { transform: scale(1.06); }

.im-track-cover-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(var(--ca-accent-rgb), 0.12), rgba(var(--ca-accent-rgb), 0.26));
  color: var(--ca-text-3);
  font-size: 2.5rem;
}

.im-track-play {
  position: absolute;
  bottom: 12px; right: 12px;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--im-accent-bright);
  color: var(--im-on-accent);
  border: 0; border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  box-shadow: 0 8px 20px rgba(var(--ca-accent-rgb), 0.5);
  transform: translateY(8px) scale(0.9);
  opacity: 0;
  transition: all var(--ca-t-bounce);
}
.im-track-card:hover .im-track-play {
  opacity: 1; transform: translateY(0) scale(1);
}
.im-track-play:hover { filter: brightness(1.08); transform: scale(1.05); }
.im-track-play:active { transform: scale(0.95); }

.im-track-cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55));
  opacity: 0;
  transition: opacity var(--ca-t);
}
.im-track-card:hover .im-track-cover-overlay { opacity: 1; }

.im-track-meta {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; flex-direction: column; gap: 4px;
}

.im-track-grid[data-view="grid"] .im-track-cover {
  aspect-ratio: 4 / 3;
}

.im-track-grid[data-view="grid"] .im-track-info {
  padding: 0.75rem 0.9rem 0.85rem;
}

.im-track-grid[data-view="grid"] .im-track-title {
  font-size: 0.92rem;
}

.im-track-grid[data-view="grid"] .im-track-artist {
  margin-top: 0.15rem;
}

.im-track-grid[data-view="grid"] .im-track-stats {
  margin-top: 0.45rem;
  gap: 0.7rem;
}

.im-track-grid[data-view="grid"] .im-track-play {
  width: 42px;
  height: 42px;
  bottom: 10px;
  right: 10px;
}

.im-track-grid[data-view="grid"] .im-track-meta {
  top: 12px;
  left: 12px;
  z-index: 2;
}

.im-track-grid[data-view="grid"] .im-track-meta .im-badge {
  background: rgba(11, 14, 22, 0.78);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.28);
}

.im-track-grid[data-view="grid"] .im-track-meta .im-badge.im-badge-success {
  color: #8ff6d0;
}

.im-track-grid[data-view="grid"] .im-track-meta .im-badge.im-badge-warning {
  color: #ffd28c;
}

.im-track-grid[data-view="grid"] .im-track-meta .im-badge.im-badge-accent {
  color: #6ee7f5;
}

.im-track-info {
  padding: 0.85rem 1rem 1rem;
}
.im-track-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: var(--ca-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.im-track-title a { color: inherit; }
.im-track-title a:hover { color: var(--ca-accent); }
.im-track-artist {
  font-size: 0.8125rem;
  color: var(--ca-text-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 2px;
}
.im-track-artist a { color: inherit; }
.im-track-artist a:hover { color: var(--ca-accent); }

.im-track-stats {
  display: flex; align-items: center; gap: 0.85rem;
  margin-top: 0.55rem;
  font-size: 0.75rem;
  color: var(--ca-text-3);
}
.im-track-stats span { display: inline-flex; align-items: center; gap: 0.25rem; }

/* List variant */
.im-track-list-card {
  display: grid;
  grid-template-columns: 40px 64px 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--ca-radius-lg);
  background: transparent;
  border: 1px solid transparent;
  transition: all var(--ca-t-fast);
}
.im-track-list-card:hover {
  background: var(--ca-surface);
  border-color: var(--ca-border);
}
.im-track-list-rank {
  font-size: 0.95rem; font-weight: 700;
  color: var(--ca-text-3);
  text-align: center;
}
.im-track-list-cover {
  width: 56px; height: 56px;
  border-radius: var(--ca-radius);
  background: var(--ca-surface-2);
  overflow: hidden;
  position: relative;
}
.im-track-list-cover img { width: 100%; height: 100%; object-fit: cover; }
.im-track-list-cover .im-track-list-play {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  display: grid; place-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity var(--ca-t-fast);
  cursor: pointer;
}
.im-track-list-card:hover .im-track-list-play { opacity: 1; }
.im-track-list-meta { min-width: 0; }
.im-track-list-time { font-size: 0.8125rem; color: var(--ca-text-3); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   14. ALBUM CARD
   ========================================================================== */
.im-album-card { /* shares style with track card */
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  border-radius: var(--ca-radius-xl);
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  overflow: hidden;
  transition: all var(--ca-t);
}
.im-album-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ca-shadow-lg);
  border-color: rgba(var(--ca-accent-rgb), 0.3);
}
.im-album-cover {
  position: relative; aspect-ratio: 1;
  overflow: hidden;
  background: var(--ca-surface-3);
}
.im-album-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ca-t-slow); }
.im-album-card:hover .im-album-cover img { transform: scale(1.05); }
.im-album-cover > i {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
}
.im-album-tag {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: var(--ca-radius-full);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.im-album-info { padding: 0.85rem 1rem 1rem; }

/* ==========================================================================
   15. ARTIST CARD
   ========================================================================== */
.im-artist-card {
  display: block;
  text-decoration: none;
  color: inherit;
  text-align: center;
  padding: 1.25rem 1rem;
  border-radius: var(--ca-radius-xl);
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  transition: all var(--ca-t);
  position: relative;
  overflow: hidden;
}
.im-artist-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 60%;
  background: radial-gradient(circle at 50% 0%, rgba(var(--ca-accent-rgb), 0.16), transparent 65%);
  opacity: 0;
  transition: opacity var(--ca-t);
  pointer-events: none;
}
.im-artist-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ca-shadow-lg);
  border-color: rgba(var(--ca-accent-rgb), 0.3);
}
.im-artist-card:hover::before { opacity: 1; }
.im-artist-card .im-avatar { margin-bottom: 0.85rem; }
.im-artist-card-name {
  font-weight: 700; font-size: 0.95rem;
  margin-bottom: 0.25rem;
  position: relative;
}
.im-artist-card-stats {
  font-size: 0.78rem;
  color: var(--ca-text-3);
  position: relative;
}

/* ==========================================================================
   16. HERO (Home)
   ========================================================================== */
.im-hero {
  position: relative;
  padding: 7rem 0 5rem;
  overflow-x: clip;
}
.im-hero-eyebrow { color: var(--ca-accent); }
.im-hero-title {
  font-family: var(--im-font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 1rem 0 1.25rem;
}
.im-hero-sub {
  font-size: 1.0625rem;
  color: var(--ca-text-2);
  max-width: 50ch;
  margin-bottom: 2rem;
}
.im-hero-cta { display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* Cover mosaic - right column */
.im-mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
  aspect-ratio: 1;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
}
.im-mosaic-cell {
  position: relative;
  border-radius: var(--ca-radius-2xl);
  overflow: hidden;
  background: var(--ca-surface-2);
  box-shadow: var(--im-shadow-cover);
  transition: transform var(--ca-t);
}
.im-mosaic-cell:hover { transform: scale(1.03); z-index: 2; }
.im-mosaic-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.im-mosaic-cell--ph {
  display: grid; place-items: center;
  color: var(--ca-accent);
  font-size: 2rem;
  background: linear-gradient(135deg, rgba(var(--ca-accent-rgb), 0.10), rgba(var(--ca-accent-rgb), 0.22));
}
.im-mosaic-cell:nth-child(1) { animation: imFloat 6s ease-in-out infinite; }
.im-mosaic-cell:nth-child(2) { animation: imFloat 6s ease-in-out infinite 1.5s; }
.im-mosaic-cell:nth-child(3) { animation: imFloat 6s ease-in-out infinite 3s; }
.im-mosaic-cell:nth-child(4) { animation: imFloat 6s ease-in-out infinite 4.5s; }

@keyframes imFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Hero glow orbs */
.im-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}
.im-hero-orb--a {
  width: 480px; height: 480px;
  top: -120px; left: -120px;
  background: rgba(var(--ca-accent-rgb), 0.30);
  animation: imOrb 16s ease-in-out infinite;
}
.im-hero-orb--b {
  width: 420px; height: 420px;
  bottom: -150px; right: -100px;
  background: rgba(var(--im-magenta-rgb), 0.26);
  animation: imOrb 20s ease-in-out infinite reverse;
}
@keyframes imOrb {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(30px, -25px); }
}

/* ==========================================================================
   17. TRACK / ALBUM HERO (Spotify-style)
   ========================================================================== */
.im-detail-hero {
  position: relative;
  padding: 6.5rem 0 3rem;
  overflow: hidden;
  margin-bottom: 2rem;
}
.im-detail-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(70px) saturate(1.4) brightness(0.55);
  transform: scale(1.2);
  z-index: -2;
  opacity: 0.85;
}
.im-detail-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,9,15,0.10) 0%, var(--ca-bg) 100%);
  z-index: -1;
}
[data-theme="light"] .im-detail-hero-bg { filter: blur(70px) saturate(1.3) brightness(0.95); }

.im-detail-hero-inner {
  display: flex;
  gap: 2rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.im-detail-cover {
  width: 240px; height: 240px;
  border-radius: var(--ca-radius-xl);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ca-surface-2);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.im-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.im-detail-cover-ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #10252b 0%, #006d73 100%); /* placeholderArt tone (D64) */
  color: #fff; font-size: 4rem;
}

.im-detail-info { min-width: 0; flex: 1; }
.im-detail-type {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ca-text-2);
}
.im-detail-title {
  font-family: var(--im-font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 1rem;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
[data-theme="light"] .im-detail-title { color: var(--ca-text); text-shadow: none; }

.im-detail-artist {
  display: inline-flex; align-items: center; gap: 0.65rem;
  margin-bottom: 1rem;
  color: var(--ca-text);
  font-weight: 600;
}
.im-detail-artist .im-avatar { width: 32px; height: 32px; }
.im-detail-artist,
.im-detail-artist a { color: var(--ca-text); font-size: 1rem; }
.im-detail-artist:hover,
.im-detail-artist a:hover { color: var(--ca-accent); }
.im-detail-artist > i { color: var(--ca-accent); }

.im-detail-summary {
  color: var(--ca-text-2);
  max-width: 56ch;
  margin-top: 0.5rem;
}
[data-theme="dark"] .im-detail-summary { color: rgba(229, 237, 247, 0.78); }

.im-detail-meta {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.im-detail-actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  align-items: center;
}

/* ==========================================================================
   18. ARTIST PROFILE HERO (cinematic)
   ========================================================================== */
/* Artist and label pages pull .im-ap-hero up behind the fixed navbar (see
   margin-top below) so the cover art runs full-bleed. The nav's default 78%
   translucency then disappears against the darkened cover image, leaving
   visitors no visible way back. Make the nav opaque on these pages only. */
body:has(.im-ap-hero) .im-nav {
  background: var(--im-nav-bg-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--ca-border-strong, var(--im-nav-border));
  box-shadow: var(--ca-shadow);
}

.im-ap-hero {
  position: relative;
  min-height: 480px;
  display: flex; align-items: flex-end;
  padding: 8rem 0 2.5rem;
  margin-top: calc(-1 * var(--im-nav-h));
  margin-bottom: 0;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--ca-border);
}
.im-ap-cover {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transform: scale(1.05);
  filter: brightness(0.55) saturate(1.15);
}
.im-ap-cover-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--ca-accent-rgb), 0.30), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(var(--im-magenta-rgb), 0.30), transparent 55%),
    linear-gradient(180deg, rgba(7,9,15,0.4) 0%, rgba(7,9,15,0.95) 100%);
  z-index: -1;
}
.im-ap-orb {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(110px);
  z-index: -1;
  pointer-events: none;
}
.im-ap-orb--a { top: -160px; left: -120px; background: rgba(var(--ca-accent-rgb), 0.28); animation: imOrb 14s ease-in-out infinite; }
.im-ap-orb--b { bottom: -160px; right: -120px; background: rgba(var(--im-magenta-rgb), 0.26); animation: imOrb 18s ease-in-out infinite reverse; }

.im-ap-hero-content { width: 100%; position: relative; }
.im-ap-genre-tag {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ca-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1rem 0 0.5rem;
}
.im-ap-name {
  font-family: var(--im-font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 1rem;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.im-ap-stats {
  display: flex; gap: 1.75rem;
  margin-bottom: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.im-ap-stats > div { display: flex; flex-direction: column; gap: 0.1rem; }
.im-ap-stat-val { font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.im-ap-stat-lbl { font-size: 0.72rem; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.1em; }
.im-ap-stat-divider { width: 1px; height: 32px; background: rgba(255,255,255,0.18); }
.im-ap-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.im-ap-follow-error { font-size: 0.8rem; color: #f87171; margin-top: 0.4rem; }

[data-theme="light"] .im-ap-name { color: #fff; }

/* Artist hero avatar */
.im-ap-avatar {
  width: 132px; height: 132px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 6px rgba(var(--ca-accent-rgb), 0.18);
  overflow: hidden;
  background: var(--ca-surface-2);
  margin-bottom: 1rem;
  position: relative;
}
.im-ap-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   19. TABS
   ========================================================================== */
.im-tabs-bar {
  border-bottom: 1px solid var(--ca-border);
  margin-bottom: 2rem;
  background: var(--ca-surface);
  position: sticky;
  top: var(--im-nav-h);
  z-index: 5;
  backdrop-filter: blur(12px);
}
.im-tabs {
  display: flex;
  gap: 0;
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.im-tabs::-webkit-scrollbar { display: none; }
.im-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-full);
  background: var(--ca-surface-2);
  color: var(--ca-text-2);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ca-t-fast), color var(--ca-t-fast), border-color var(--ca-t-fast), box-shadow var(--ca-t-fast);
}
.im-tab:hover {
  border-color: rgba(var(--ca-accent-rgb), 0.35);
  color: var(--ca-text);
}
.im-tab.is-active {
  background: var(--im-grad-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 16px rgba(var(--ca-accent-rgb), 0.24);
}
.im-tab .im-badge { margin-left: 0.1rem; }
.im-tab.is-active .im-badge {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}
.im-tab-pane:not(.is-active) { display: none; }
.im-tab-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 1rem 1.25rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--ca-text-2);
  border: 0; background: transparent;
  border-bottom: 2px solid transparent;
  transition: all var(--ca-t-fast);
  cursor: pointer;
  white-space: nowrap;
}
.im-tab-link:hover { color: var(--ca-text); }
.im-tab-link.is-active {
  color: var(--ca-accent);
  border-bottom-color: var(--ca-accent);
}
.im-tab-link .badge,
.im-tab-link .im-badge { margin-left: 0.25rem; }

/* ==========================================================================
   20. PRICING
   ========================================================================== */
.im-pricing-hero {
  position: relative;
  padding: 6rem 0 3rem;
  text-align: center;
  overflow: hidden;
}
.im-pricing-hero-orb {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  filter: blur(110px);
  z-index: -1;
}
.im-pricing-hero-orb--a { top: -120px; left: 10%; background: rgba(var(--ca-accent-rgb), 0.26); }
.im-pricing-hero-orb--b { top: 50px; right: 10%; background: rgba(var(--im-magenta-rgb), 0.20); }
.im-pricing-hero-title {
  font-family: var(--im-font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
.im-pricing-hero-sub {
  font-size: 1.0625rem;
  color: var(--ca-text-2);
  max-width: 56ch; margin: 0 auto 2rem;
}

.im-pricing-toggle {
  display: inline-flex;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-full);
  padding: 0.3rem;
  gap: 0.2rem;
}
.im-pricing-toggle button {
  background: transparent;
  border: 0;
  padding: 0.5rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ca-text-2);
  border-radius: var(--ca-radius-full);
  cursor: pointer;
  transition: all var(--ca-t-fast);
}
.im-pricing-toggle button.is-active {
  background: var(--im-grad-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--ca-accent-rgb), 0.3);
}

.im-pricing-card {
  display: flex; flex-direction: column;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-2xl);
  padding: 2rem 1.75rem;
  height: 100%;
  position: relative;
  transition: all var(--ca-t);
}
.im-pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ca-shadow-xl);
  border-color: rgba(var(--ca-accent-rgb), 0.30);
}
.im-pricing-card.is-featured {
  border-color: var(--ca-accent);
  background: linear-gradient(180deg, var(--ca-accent-light), var(--ca-surface) 60%);
  box-shadow: var(--ca-shadow-lg), 0 0 0 1px rgba(var(--ca-accent-rgb), 0.30);
  transform: scale(1.02);
}
.im-pricing-card.is-featured:hover { transform: translateY(-6px) scale(1.02); }
.im-pricing-popular {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--im-grad-primary);
  color: #fff;
  font-size: 0.7rem; font-weight: 700;
  padding: 0.3rem 0.85rem;
  border-radius: var(--ca-radius-full);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(var(--ca-accent-rgb), 0.40);
}
.im-pricing-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--ca-accent-light);
  color: var(--ca-accent);
  border-radius: var(--ca-radius-lg);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.im-pricing-card.is-featured .im-pricing-icon {
  background: var(--im-grad-primary);
  color: #fff;
}
.im-pricing-name { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.25rem; }
.im-pricing-price { font-size: 3rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1; margin: 1rem 0 0.25rem; }
.im-pricing-price sup { font-size: 1.1rem; font-weight: 600; vertical-align: top; margin-right: 0.2rem; }
.im-pricing-period { font-size: 0.875rem; color: var(--ca-text-3); }
.im-pricing-desc { color: var(--ca-text-2); font-size: 0.875rem; margin: 0.85rem 0 1.5rem; }
.im-pricing-features { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.im-pricing-features li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.45rem 0;
  font-size: 0.9rem;
  color: var(--ca-text);
}
.im-pricing-features li i {
  color: var(--ca-accent);
  margin-top: 0.2rem;
}
.im-pricing-features li.is-disabled { color: var(--ca-text-3); }
.im-pricing-features li.is-disabled i { color: var(--ca-text-3); }
.im-pricing-card .im-btn { margin-top: auto; }

/* ==========================================================================
   21. PAGINATION
   ========================================================================== */
.im-pagination {
  display: inline-flex; align-items: center; gap: 0.25rem;
  list-style: none; margin: 0; padding: 0;
}
.im-pagination a, .im-pagination span {
  display: grid; place-items: center;
  min-width: 38px; height: 38px;
  padding: 0 0.55rem;
  border-radius: var(--ca-radius);
  font-size: 0.875rem; font-weight: 600;
  color: var(--ca-text-2);
  border: 1px solid var(--ca-border);
  transition: all var(--ca-t-fast);
}
.im-pagination a:hover {
  border-color: var(--ca-accent);
  color: var(--ca-accent);
  background: var(--ca-accent-light);
}
.im-pagination .is-active {
  background: var(--im-grad-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(var(--ca-accent-rgb), 0.3);
}
.im-pagination .is-disabled { opacity: 0.4; pointer-events: none; }

/* ==========================================================================
   22. EMPTY STATES
   ========================================================================== */
.im-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ca-text-3);
}
.im-empty-icon {
  width: 80px; height: 80px;
  display: grid; place-items: center;
  margin: 0 auto 1rem;
  background: var(--ca-surface-2);
  border-radius: 50%;
  font-size: 2rem;
  color: var(--ca-text-3);
}
.im-empty-title { font-size: 1.1rem; font-weight: 700; color: var(--ca-text); margin-bottom: 0.4rem; }
.im-empty-sub { color: var(--ca-text-2); margin-bottom: 1.25rem; max-width: 36ch; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   23. MODALS / DIALOGS
   ========================================================================== */
.im-dialog-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  z-index: var(--im-z-modal);
  display: none;
  align-items: center; justify-content: center;
  padding: 1rem;
}
.im-dialog-backdrop.is-open { display: flex; animation: imFadeIn 0.2s ease-out; }
.im-dialog {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-xl);
  box-shadow: var(--ca-shadow-xl);
  max-width: 480px; width: 100%;
  overflow: hidden;
  animation: imScaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.im-dialog-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--ca-border); display: flex; justify-content: space-between; align-items: center; }
.im-dialog-body { padding: 1.5rem; }
.im-dialog-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--ca-border); display: flex; gap: 0.5rem; justify-content: flex-end; }

@keyframes imFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes imScaleIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ==========================================================================
   24. TOASTS
   ========================================================================== */
.im-toast-region {
  position: fixed;
  top: calc(var(--im-nav-h) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--im-z-toast);
  display: flex; flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.im-toast {
  pointer-events: auto;
  padding: 0.85rem 1rem;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-lg);
  display: flex; align-items: center; gap: 0.65rem;
  min-width: 280px; max-width: 420px;
  font-size: 0.875rem;
  animation: imSlideDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.im-toast--success { border-left: 3px solid var(--ca-success); }
.im-toast--info    { border-left: 3px solid var(--ca-info); }
.im-toast--warning { border-left: 3px solid var(--ca-warning); }
.im-toast--danger  { border-left: 3px solid var(--ca-danger); }
@keyframes imSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.im-alert {
  padding: 0.9rem 1rem;
  border-radius: var(--ca-radius);
  border: 1px solid var(--ca-border);
  background: var(--ca-surface);
  font-size: 0.875rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.im-alert i { font-size: 1.1rem; flex-shrink: 0; }
.im-alert-success { border-left: 3px solid var(--ca-success); background: rgba(22,163,74,0.06); }
.im-alert-info    { border-left: 3px solid var(--ca-info); background: rgba(2,132,199,0.06); }
.im-alert-warning { border-left: 3px solid var(--ca-warning); background: rgba(217,119,6,0.06); }
.im-alert-danger  { border-left: 3px solid var(--ca-danger); background: rgba(220,38,38,0.06); }

/* ==========================================================================
   25. SKELETON
   ========================================================================== */
.im-skeleton {
  background: linear-gradient(90deg, var(--ca-surface-2), var(--ca-surface-3), var(--ca-surface-2));
  background-size: 200% 100%;
  border-radius: var(--ca-radius);
  animation: imShimmer 1.5s ease-in-out infinite;
}
@keyframes imShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ==========================================================================
   26. SCROLL PROGRESS + BACK TO TOP
   Both live in their own components (Components/ScrollProgress.vue and
   Components/BackToTop.vue), styled there.
   ========================================================================== */

/* ==========================================================================
   27. UTILITIES
   ========================================================================== */
.im-bg-surface  { background: var(--ca-surface); }
.im-bg-surface-2 { background: var(--ca-surface-2); }
.im-bg-grad      { background: var(--im-grad-primary); }
.im-bg-grad-warm { background: var(--im-grad-warm); }

.im-text-accent  { color: var(--ca-accent) !important; }
.im-text-primary { color: var(--ca-primary) !important; }
.im-text-success { color: var(--ca-success) !important; }
.im-text-danger  { color: var(--ca-danger) !important; }
.im-text-warning { color: var(--ca-warning) !important; }

.im-border-top    { border-top: 1px solid var(--ca-border); }
.im-border-bottom { border-bottom: 1px solid var(--ca-border); }

.im-rounded { border-radius: var(--ca-radius); }
.im-rounded-lg { border-radius: var(--ca-radius-lg); }
.im-rounded-xl { border-radius: var(--ca-radius-xl); }
.im-rounded-2xl { border-radius: var(--ca-radius-2xl); }
.im-rounded-pill { border-radius: var(--ca-radius-full); }

.im-shadow-sm { box-shadow: var(--ca-shadow-sm); }
.im-shadow    { box-shadow: var(--ca-shadow); }
.im-shadow-md { box-shadow: var(--ca-shadow-md); }
.im-shadow-lg { box-shadow: var(--ca-shadow-lg); }

.im-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.im-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.im-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Prose (article body) */
.im-prose { color: var(--ca-text); font-size: 1rem; line-height: 1.75; }
.im-prose h2 { font-family: var(--im-font-display); font-size: 1.75rem; margin-top: 2rem; margin-bottom: 1rem; }
.im-prose h3 { font-size: 1.25rem; margin-top: 1.75rem; margin-bottom: 0.75rem; }
.im-prose p { margin-bottom: 1.25rem; color: var(--ca-text); }
.im-prose img { border-radius: var(--ca-radius-lg); margin: 1.5rem 0; }
.im-prose a { color: var(--ca-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.im-prose blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-left: 3px solid var(--ca-accent);
  color: var(--ca-text-2);
  font-style: italic;
}
.im-prose ul, .im-prose ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.im-prose li { margin-bottom: 0.4rem; }
.im-prose code { background: var(--ca-surface-2); padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.875em; }

/* Page header (static / catalog pages) */
.im-page-header {
  position: relative;
  padding: 5rem 0 2rem;
  margin-bottom: 2rem;
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(var(--im-cyan-rgb), 0.08), transparent 60%),
    radial-gradient(800px 400px at 100% 100%, rgba(var(--im-magenta-rgb), 0.08), transparent 60%);
  border-bottom: 1px solid var(--ca-border);
}
.im-page-header h1, .im-page-header .im-section-title-display {
  font-family: var(--im-font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin-bottom: 0.5rem;
}
.im-page-header .im-eyebrow { margin-bottom: 0.85rem; }
.im-page-header-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-sm);
}
.im-page-header-bar .im-search-wrap { flex: 1 1 280px; }
.im-page-header-bar .im-form-control { min-width: 0; }

/* View toggle (grid/list) */
.im-view-toggle {
  display: inline-flex;
  background: var(--ca-surface-2);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  padding: 3px;
}
.im-view-toggle button {
  border: 0; background: transparent;
  width: 36px; height: 32px;
  display: grid; place-items: center;
  border-radius: calc(var(--ca-radius) - 3px);
  color: var(--ca-text-2);
  cursor: pointer; transition: all var(--ca-t-fast);
}
.im-view-toggle button.is-active {
  background: var(--im-grad-primary); color: #fff;
  box-shadow: 0 2px 6px rgba(var(--ca-accent-rgb), 0.3);
}

/* Sticky card (sidebars on browse / detail pages) */
.im-card-sticky {
  position: sticky;
  top: calc(var(--im-nav-h, 72px) + 1rem);
}

/* Page link helper - same style as .im-pagination a/span (also accepts an extra .im-page-link class) */
.im-page-link {
  display: grid; place-items: center;
  min-width: 38px; height: 38px;
  padding: 0 0.55rem;
  border-radius: var(--ca-radius);
  font-size: 0.875rem; font-weight: 600;
  color: var(--ca-text-2);
  border: 1px solid var(--ca-border);
  text-decoration: none;
  transition: all var(--ca-t-fast);
}
.im-page-link:hover:not(.is-disabled):not(.is-active) {
  border-color: var(--ca-accent); color: var(--ca-accent);
  background: var(--ca-accent-light);
}
.im-page-link.is-active {
  background: var(--im-grad-primary); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(var(--ca-accent-rgb), 0.3);
}
.im-page-link.is-disabled { opacity: 0.4; pointer-events: none; }

/* Compact form-control (filter sidebar) */
.im-form-control-sm {
  padding: 0.4rem 0.65rem !important;
  font-size: 0.85rem !important;
  height: auto !important;
}

/* Playlist mosaic cover (4 quadrants) */
.im-playlist-mosaic {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border-radius: var(--ca-radius-lg) var(--ca-radius-lg) 0 0;
  overflow: hidden;
}
.im-playlist-mosaic > span {
  display: block;
}

.im-artist-name {
  display: block;
  color: var(--ca-text);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.im-artist-name:hover { color: var(--ca-accent); }
.im-artist-meta {
  display: block;
  color: var(--ca-text-2);
  font-size: 0.8125rem;
  line-height: 1.35;
  margin-top: 0.2rem;
  text-decoration: none;
}

.im-track-list-fav {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ca-text-3);
  cursor: pointer;
  transition: background var(--ca-t-fast), color var(--ca-t-fast), transform var(--ca-t-fast);
}
.im-track-list-fav:hover {
  background: var(--ca-surface-2);
  color: var(--ca-danger);
  transform: scale(1.05);
}

.im-notif-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ca-border);
  color: var(--ca-text);
}
.im-notif-row:last-of-type { border-bottom: 0; }
.im-notif-row.is-unread {
  background: linear-gradient(90deg, var(--ca-accent-light), transparent 72%);
}
.im-notif-row a { color: var(--ca-text); }
.im-notif-row a:hover { color: var(--ca-accent); }
.im-notif-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--ca-radius-lg);
  color: #fff;
  box-shadow: var(--ca-shadow-sm);
}

/* Big page-level search input */
.im-search-big {
  position: relative;
  display: flex; align-items: center; gap: 0.5rem;
  max-width: 720px;
  margin: 1.5rem auto 0;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 999px;
  box-shadow: var(--ca-shadow-md);
  transition: border-color var(--ca-t-fast), box-shadow var(--ca-t-fast);
}
.im-search-big:focus-within {
  border-color: var(--ca-accent);
  box-shadow: 0 0 0 4px var(--ca-accent-light), var(--ca-shadow-lg);
}
.im-search-big > i {
  color: var(--ca-text-3);
  font-size: 1.15rem;
}
.im-search-big .im-form-control {
  border: 0; background: transparent; flex: 1; box-shadow: none !important;
  font-size: 1.1rem; padding: 0.5rem 0.25rem;
}
.im-search-big .im-btn { border-radius: 999px; padding: 0.6rem 1.5rem; }

/* Show / event date block */
.im-show-date {
  flex-shrink: 0;
  width: 56px;
  text-align: center;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  overflow: hidden;
  background: var(--ca-surface-2);
}
.im-show-date .im-show-month {
  background: var(--im-grad-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0;
}
.im-show-date .im-show-day {
  font-family: var(--im-font-display);
  font-size: 1.5rem; font-weight: 700;
  line-height: 1.4;
  color: var(--ca-text-primary);
}

/* Account sidebar nav */
.im-account-link {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--ca-radius);
  color: var(--ca-text-2);
  text-decoration: none;
  font-weight: 500; font-size: 0.95rem;
  transition: all var(--ca-t-fast);
}
.im-account-link:hover {
  background: var(--ca-surface-2);
  color: var(--ca-text-primary);
}
.im-account-link i { font-size: 1.05rem; opacity: 0.85; }
.im-account-link.is-current {
  background: var(--ca-accent-light);
  color: var(--ca-accent);
}
.im-account-link.is-current i { opacity: 1; }

/* Genre card */
.im-genre-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 160px;
  padding: 1.5rem 1.25rem;
  border-radius: var(--ca-radius-lg);
  color: #fff !important;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--ca-shadow-md);
  transition: transform var(--ca-t-base), box-shadow var(--ca-t-base);
}
.im-genre-card::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 100% 100%, rgba(0,0,0,0.45), transparent 60%);
  z-index: -1;
}
.im-genre-card:hover { transform: translateY(-4px); box-shadow: var(--ca-shadow-lg); }
.im-genre-card .im-genre-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  font-size: 1.4rem;
  align-self: flex-start;
}
.im-genre-card .im-genre-name {
  font-family: var(--im-font-display);
  font-size: 1.5rem; font-weight: 700;
  line-height: 1.1;
  margin-top: auto;
}
.im-genre-card .im-genre-count {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
  margin-top: 0.25rem;
}

/* Inline checkbox (filters / consent) */
.im-check {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ca-text-2);
  margin-bottom: 0.4rem;
  cursor: pointer;
}
.im-check input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--ca-accent);
  cursor: pointer;
}

/* ==========================================================================
   29. POLISH PASS
   ========================================================================== */


/* Bootstrap input-group text alignment with our form control */
.input-group > .im-form-control,
.input-group > .form-control {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group .input-group-text {
  display: flex; align-items: center;
  white-space: nowrap;
  background: var(--ca-surface-2);
  border: 1px solid var(--ca-border);
  color: var(--ca-text-3);
}
.input-group > :not(:first-child) { margin-left: -1px; }
.input-group > :first-child:not(:last-child) {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.input-group > :last-child:not(:first-child) {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}

/* Card hover - modern colored ambient shadow */
.im-card-hover { transition: transform var(--ca-t), box-shadow var(--ca-t), border-color var(--ca-t); }
.im-card-hover:hover {
  transform: translateY(-6px);
  box-shadow:
    0 28px 60px -20px rgba(0,0,0,0.65),
    0 12px 24px -8px rgba(var(--ca-accent-rgb), 0.18),
    0 0 0 1px rgba(var(--ca-accent-rgb), 0.22);
  border-color: rgba(var(--ca-accent-rgb), 0.30);
}
.im-track-card,
.im-album-card,
.im-artist-card,
.im-pricing-card,
.im-genre-card { transition: transform var(--ca-t), box-shadow var(--ca-t), border-color var(--ca-t); }
.im-track-card:hover,
.im-album-card:hover,
.im-artist-card:hover,
.im-genre-card:hover {
  box-shadow:
    0 28px 60px -20px rgba(0,0,0,0.65),
    0 12px 24px -8px rgba(var(--ca-accent-rgb), 0.20),
    0 0 0 1px rgba(var(--ca-accent-rgb), 0.25);
}

/* Card "..." action menu shown in top-right of cards */
.im-card-actions {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  z-index: 5;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--ca-t-fast), transform var(--ca-t-fast);
}
.im-track-card:hover .im-card-actions,
.im-album-card:hover .im-card-actions,
.im-track-card:focus-within .im-card-actions,
.im-card-actions.is-open {
  opacity: 1; transform: translateY(0);
}
.im-card-actions-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(11, 14, 22, 0.78);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: background var(--ca-t-fast), transform var(--ca-t-fast);
}
.im-card-actions-btn:hover { background: rgba(0,173,181,0.92); transform: scale(1.06); }

.im-card-actions-menu {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  min-width: 200px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-xl);
  padding: 0.4rem;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 80;
}
.im-card-actions.is-open .im-card-actions-menu { display: flex; }
.im-card-actions-menu button,
.im-card-actions-menu a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  color: var(--ca-text-2);
  background: transparent;
  border: 0;
  border-radius: var(--ca-radius);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ca-t-fast), color var(--ca-t-fast);
}
.im-card-actions-menu button:hover,
.im-card-actions-menu a:hover {
  background: var(--ca-surface-2);
  color: var(--ca-text-primary);
}
.im-card-actions-menu .im-menu-buy { color: var(--ca-accent); }
.im-card-actions-menu .im-menu-danger { color: var(--ca-danger); }
.im-card-actions-menu hr {
  border: 0;
  border-top: 1px solid var(--ca-border);
  margin: 0.25rem 0;
}

/* ----- Track grid <-> list view ----- */
.im-track-cover-link { display: block; color: inherit; text-decoration: none; }
.im-track-cover-link:hover { color: inherit; text-decoration: none; }
.im-track-grid[data-view="list"] { display: block; margin: 0; }
.im-track-grid[data-view="list"] > [class*="col-"] {
  width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; margin-top: 0; margin-bottom: 0.75rem;
  position: relative;
}
.im-track-grid[data-view="list"] > [class*="col-"].is-menu-open { z-index: 40; }
.im-track-grid > [class*="col-"].is-menu-open { position: relative; z-index: 40; }

/* Rich horizontal "sound card" row */
.im-track-grid[data-view="list"] .im-track-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-xl);
  overflow: visible;
  isolation: isolate;
  z-index: 1;
}
.im-track-grid[data-view="list"] .im-track-card:hover { transform: none; }
.im-track-grid[data-view="list"] .im-track-card:hover,
.im-track-grid[data-view="list"] .im-track-card:focus-within,
.im-track-grid[data-view="list"] .im-track-card.is-menu-open {
  z-index: 20;
}

/* Column ordering (DOM order: actions, cover, info, [wave], [plays], [fav]) */
.im-track-grid[data-view="list"] .im-track-card > .im-card-actions {
  order: 6;
  position: relative;
  top: auto;
  right: auto;
  opacity: 1;
  transform: none;
  margin-left: 0.25rem;
  align-self: center;
  z-index: 30;
}
.im-track-grid[data-view="list"] .im-track-card > .im-track-cover-link { order: 1; flex: 0 0 76px; }
.im-track-grid[data-view="list"] .im-track-card > .im-track-info {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  column-gap: 0.55rem;
  row-gap: 0.28rem;
}
.im-track-grid[data-view="list"] .im-track-card > .im-mini-wave { order: 3; flex: 0 0 160px; width: 160px; overflow: hidden; }
.im-track-grid[data-view="list"] .im-track-card > .im-row-plays { order: 4; flex: 0 0 auto; }
.im-track-grid[data-view="list"] .im-track-card > .im-row-fav { order: 5; flex: 0 0 auto; }

.im-track-grid[data-view="list"] .im-track-card .im-track-cover,
.im-track-grid[data-view="list"] .im-track-card .im-track-cover-link {
  width: 76px; height: 76px;
  border-radius: var(--ca-radius);
  aspect-ratio: 1;
}
.im-track-grid[data-view="list"] .im-track-card .im-track-title {
  flex: 0 0 100%;
  font-size: 1rem;
}
.im-track-grid[data-view="list"] .im-track-card .im-track-row-head {
  flex: 0 0 100%;
  margin-top: 0.05rem;
}
.im-track-grid[data-view="list"] .im-track-card .im-track-artist {
  margin-top: 0;
  flex: 0 1 auto;
  max-width: 220px;
}
.im-track-grid[data-view="list"] .im-track-card .im-track-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
}
.im-track-grid[data-view="list"] .im-track-card .im-track-play {
  position: absolute;
  right: 6px; bottom: 6px;
  width: 28px; height: 28px;
  font-size: 0.8rem;
  opacity: 1;
  transform: none;
}
.im-track-grid[data-view="list"] .im-card-actions-btn {
  background: transparent; color: var(--ca-text-3); box-shadow: none;
}
.im-track-grid[data-view="list"] .im-card-actions-btn:hover { background: var(--ca-surface-2); color: var(--ca-text-primary); transform: none; }

@media (max-width: 991.98px) {
  .im-track-grid[data-view="list"] .im-track-card > .im-mini-wave { display: none; }
}
@media (max-width: 575.98px) {
  .im-track-grid[data-view="list"] .im-track-card { gap: 0.75rem; padding: 0.6rem 0.75rem; }
  .im-track-grid[data-view="list"] .im-track-card > .im-track-cover-link,
  .im-track-grid[data-view="list"] .im-track-card .im-track-cover { width: 56px; height: 56px; flex-basis: 56px; }
  .im-track-grid[data-view="list"] .im-track-card > .im-row-plays { display: none; }
}

/* ----- Track row meta components (used in list-view) ----- */
.im-track-row-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.im-track-row-meta {
  display: none;
}
.im-badge-new {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(16,185,129,0.25);
}
.im-badge-new::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: imBadgePulse 1.6s infinite;
}
@keyframes imBadgePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.65); }
  70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.im-pill-genre {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem; font-weight: 600;
  color: var(--ca-accent);
  background: rgba(var(--ca-accent-rgb), 0.10);
  border: 1px solid rgba(var(--ca-accent-rgb), 0.40);
  border-radius: 999px;
  white-space: nowrap;
}
.im-meta-chip {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  font-size: 0.72rem; font-weight: 600;
  color: var(--ca-text-2);
  background: var(--ca-surface-2);
  border: 1px solid var(--ca-border);
  border-radius: 6px;
  white-space: nowrap;
}

/* Mini waveform - equalizer bars */
.im-mini-wave {
  display: flex; align-items: flex-end; gap: 2px;
  height: 28px; flex-shrink: 0;
}
.im-mini-wave span {
  display: block;
  flex: 1 0 0;
  min-width: 3px;
  background: var(--ca-border-strong);
  border-radius: 2px;
  transform-origin: bottom;
  transition: background 0.2s;
}
.im-mini-wave.is-playing span {
  background: var(--ca-accent);
  animation: imEqBounce 0.9s ease-in-out infinite;
}
.im-mini-wave span:nth-child(1)  { animation-duration: 0.80s; animation-delay: 0.00s; }
.im-mini-wave span:nth-child(2)  { animation-duration: 0.70s; animation-delay: 0.15s; }
.im-mini-wave span:nth-child(3)  { animation-duration: 0.90s; animation-delay: 0.30s; }
.im-mini-wave span:nth-child(4)  { animation-duration: 0.75s; animation-delay: 0.10s; }
.im-mini-wave span:nth-child(5)  { animation-duration: 0.85s; animation-delay: 0.25s; }
.im-mini-wave span:nth-child(6)  { animation-duration: 0.70s; animation-delay: 0.05s; }
.im-mini-wave span:nth-child(7)  { animation-duration: 0.95s; animation-delay: 0.20s; }
.im-mini-wave span:nth-child(8)  { animation-duration: 0.80s; animation-delay: 0.35s; }
.im-mini-wave span:nth-child(9)  { animation-duration: 0.65s; animation-delay: 0.12s; }
.im-mini-wave span:nth-child(10) { animation-duration: 0.88s; animation-delay: 0.28s; }
@keyframes imEqBounce {
  0%, 100% { transform: scaleY(1.0); }
  50%      { transform: scaleY(0.2); }
}

/* Plays count + fav (row) */
.im-row-plays {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--ca-text-3);
  font-size: 0.8rem;
  white-space: nowrap;
}
.im-row-fav {
  background: transparent; border: 0;
  color: var(--ca-text-3); cursor: pointer;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: color var(--ca-t-fast), background var(--ca-t-fast), transform var(--ca-t-fast);
}
.im-row-fav:hover { color: var(--ca-danger); background: var(--ca-surface-2); transform: scale(1.08); }
.im-row-fav.is-on { color: var(--ca-danger); }

.im-results-toolbar {
  margin-bottom: 1.5rem;
  row-gap: 0.75rem;
}

.im-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.35rem;
}

.im-results-toolbar + .im-track-grid { margin-top: 0.35rem; }

/* Show row-only meta in list view, hide in grid view */
.im-track-grid:not([data-view="list"]) .im-track-card > .im-mini-wave,
.im-track-grid:not([data-view="list"]) .im-track-card > .im-row-plays,
.im-track-grid:not([data-view="list"]) .im-track-card > .im-row-fav,
.im-track-grid:not([data-view="list"]) .im-track-card .im-track-row-head { display: none; }
.im-track-grid[data-view="list"] .im-track-meta { display: none; }
.im-track-grid[data-view="list"] .im-track-card .im-track-stats { display: none; }

/* Apply-artist & similar split-screen pages: pull content closer to navbar */
.im-page--compact { padding-top: 1.25rem; }
.im-page--compact .im-section { padding-top: 2rem; }

/* Anchor-as-button: prevent link underline on hover */
a.im-btn { text-decoration: none !important; }


/* ==========================================================================
   28. RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
  .im-section { padding: 3rem 0; }
  .im-hero { padding: 5rem 0 3.5rem; }
  .im-detail-cover { width: 180px; height: 180px; }
}

@media (max-width: 575.98px) {
  .im-section { padding: 2.5rem 0; }
  .im-detail-cover { width: 140px; height: 140px; }
  .im-detail-actions .im-btn-lg { width: 100%; }
  .im-track-list-card { grid-template-columns: 30px 48px 1fr auto; gap: 0.65rem; padding: 0.6rem; }
  .im-track-list-card > :nth-child(4) { display: none; } /* hide one column on tiny */
  .im-notif-row { align-items: flex-start; padding: 0.9rem; gap: 0.75rem; }
  .im-notif-row .im-btn { flex-shrink: 0; }
  .im-pricing-card.is-featured { transform: none; }
  .im-mosaic { max-width: 320px; }
  .im-results-toolbar { margin-bottom: 1.2rem; }
}

/* ==========================================================================
   30. GENERIC ORB (decorative background blur blobs, used outside hero)
   ========================================================================== */
.im-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.im-orb-violet { background: rgba(124, 58, 237, 0.28); }
.im-orb-pink   { background: rgba(236, 72, 153, 0.24); }
.im-orb-cyan   { background: rgba(6, 182, 212, 0.24); }

/* ==========================================================================
   31. LIGHT THEME BUTTON FIXES
   ========================================================================== */


/* Hero outline buttons: white-on-dark in cinematic hero sections,
   theme-adaptive so they stay visible when the hero is bright in light mode */
.im-detail-hero .im-btn-outline,
.im-ap-hero .im-btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.30);
}
.im-detail-hero .im-btn-outline:hover,
.im-ap-hero .im-btn-outline:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.10);
  transform: translateY(-2px);
}
/* Hero outline buttons keep white text/border in both themes - hero is always dark */
[data-theme="light"] .im-detail-hero .im-btn-outline,
[data-theme="light"] .im-ap-hero .im-btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}
[data-theme="light"] .im-detail-hero .im-btn-outline:hover,
[data-theme="light"] .im-ap-hero .im-btn-outline:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.70);
  background: rgba(255,255,255,0.12);
}

/* ==========================================================================
   32. ANIMATED BACKGROUND CANVAS
   ========================================================================== */

#im-bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.im-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
}

/* --- Dark theme orbs (default) --- */
.im-bg-orb-1 {
  width: clamp(420px, 58vw, 860px);
  height: clamp(420px, 58vw, 860px);
  top: -18%; left: -12%;
  background: radial-gradient(circle at center, rgba(124,58,237,0.28) 0%, transparent 70%);
  animation: imBg1 18s ease-in-out infinite;
}
.im-bg-orb-2 {
  width: clamp(360px, 52vw, 780px);
  height: clamp(360px, 52vw, 780px);
  top: -12%; right: -8%;
  background: radial-gradient(circle at center, rgba(0,173,181,0.22) 0%, transparent 70%);
  animation: imBg2 23s ease-in-out infinite;
}
.im-bg-orb-3 {
  width: clamp(320px, 48vw, 700px);
  height: clamp(320px, 48vw, 700px);
  bottom: -12%; left: 12%;
  background: radial-gradient(circle at center, rgba(192,38,211,0.20) 0%, transparent 70%);
  animation: imBg3 27s ease-in-out infinite;
}
.im-bg-orb-4 {
  width: clamp(280px, 42vw, 620px);
  height: clamp(280px, 42vw, 620px);
  bottom: 8%; right: -4%;
  background: radial-gradient(circle at center, rgba(63,114,175,0.18) 0%, transparent 70%);
  animation: imBg4 21s ease-in-out infinite;
}

@keyframes imBg1 {
  0%,100% { transform: translate(0,   0)   scale(1);    }
  33%      { transform: translate(70px, 55px) scale(1.10); }
  66%      { transform: translate(25px,-45px) scale(0.94); }
}
@keyframes imBg2 {
  0%,100% { transform: translate(0,    0)    scale(1);    }
  33%      { transform: translate(-65px, 70px) scale(0.91); }
  66%      { transform: translate(-15px, 85px) scale(1.07); }
}
@keyframes imBg3 {
  0%,100% { transform: translate(0,    0)    scale(1);    }
  33%      { transform: translate(55px,-75px) scale(1.09); }
  66%      { transform: translate(-45px,-25px) scale(0.94);}
}
@keyframes imBg4 {
  0%,100% { transform: translate(0,    0)    scale(1);    }
  33%      { transform: translate(-45px,-55px) scale(1.05);}
  66%      { transform: translate(35px,-80px) scale(0.96); }
}

/* --- Light theme - pastel, low-opacity variant --- */
[data-theme="light"] .im-bg-orb-1 {
  background: radial-gradient(circle at center, rgba(63,114,175,0.10) 0%, transparent 70%);
}
[data-theme="light"] .im-bg-orb-2 {
  background: radial-gradient(circle at center, rgba(0,173,181,0.09) 0%, transparent 70%);
}
[data-theme="light"] .im-bg-orb-3 {
  background: radial-gradient(circle at center, rgba(124,58,237,0.07) 0%, transparent 70%);
}
[data-theme="light"] .im-bg-orb-4 {
  background: radial-gradient(circle at center, rgba(192,38,211,0.06) 0%, transparent 70%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .im-bg-orb { animation: none !important; }
}


/* ==========================================================================
   UTILITIES - Account pages, credit packs, artist card links
   ========================================================================== */

/* Smaller header variant for account pages */
.im-page-header--sm {
  padding: 3rem 0;
}
.im-page-header--sm h1,
.im-page-header--sm .im-section-title-display {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

/* Section heading inside cards */
.im-card-heading {
  font-family: var(--im-font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Artist card inner link (when card container is a div) */
.im-artist-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Credit pack cards */
.im-pack-card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-xl);
  padding: 1.5rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  transition: all var(--ca-t);
}
.im-pack-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ca-shadow-md);
  border-color: rgba(var(--ca-accent-rgb), 0.35);
}
.im-pack-card.is-popular {
  background: var(--im-grad-primary);
  border-color: transparent;
  color: #fff;
}
.im-pack-badge {
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: var(--ca-radius-full);
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.25rem;
}
.im-pack-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--ca-accent-light);
  color: var(--ca-accent);
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-bottom: 0.25rem;
}
.im-pack-card.is-popular .im-pack-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.im-pack-amount {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1;
}
.im-pack-credits-label {
  font-size: 0.8rem;
  color: var(--ca-text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.im-pack-card.is-popular .im-pack-credits-label {
  color: rgba(255, 255, 255, 0.7);
}
.im-pack-price {
  font-size: 1.5rem;
  font-weight: 800;
  margin-top: 0.25rem;
}
.im-pack-bonus {
  background: rgba(16, 185, 129, 0.15);
  color: var(--ca-success);
  border-radius: var(--ca-radius-full);
  padding: 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.im-pack-card.is-popular .im-pack-bonus {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Circular (round) variant of .im-stat-icon for transaction lists */
.im-stat-icon--round {
  border-radius: 50%;
  width: 36px;
  height: 36px;
}

/* ==========================================================================
   AUTH SHELL (sign in, sign up, password reset)
   A focused page that still always leads back to the site: slim header with
   the logo, Explore and the other way in; legal links in a slim footer.
   ========================================================================== */
.im-auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.im-auth-header {
  position: sticky; top: 0;
  z-index: var(--im-z-nav, 1030);
  height: 64px;
  display: flex; align-items: center;
  background: var(--im-nav-bg);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--im-nav-border);
}
.im-auth-main {
  flex: 1;
  display: flex;
  align-items: center;
}
.im-auth-title { font-size: 1.75rem; }
.im-auth-footer {
  padding: 1.25rem 0;
  border-top: 1px solid var(--ca-border);
  font-size: 0.8125rem;
  color: var(--ca-text-2);
}
.im-auth-footer a { color: var(--ca-text-2); text-decoration: none; }
.im-auth-footer a:hover { color: var(--ca-text); }
@media (max-width: 575.98px) {
  .im-auth-main > .container { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}

/* Bootstrap's .g-5 gutter (3rem) is wider than the container's phone padding,
   so every .row.g-5 made pages scroll sideways by 12px. Use the standard
   gutter on phones. */
@media (max-width: 575.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* ==========================================================================
   LICENSE TIERS (track page)
   Name, terms and rights on the left; price and action on the right.
   On phones the action drops below at full width so it is easy to tap.
   ========================================================================== */
.im-license-tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--ca-radius);
  background: var(--ca-surface-2);
  border: 1px solid var(--ca-border);
  transition: border-color var(--ca-t-fast);
}
.im-license-tier:hover { border-color: rgba(var(--ca-accent-rgb), 0.45); }
.im-license-buy { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.im-license-price { font-size: 1.05rem; }
.im-license-right {
  display: inline-flex; align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: var(--ca-radius-full);
  font-size: 0.7rem; font-weight: 600;
  background: rgba(var(--ca-accent-rgb), 0.12);
  color: var(--ca-accent);
}
.im-license-flag {
  display: inline-flex; align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: var(--ca-radius-full);
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--im-amber, #f59e0b);
  color: #1a1205;
}
.im-license-owned {
  border-radius: var(--ca-radius);
  background: rgba(var(--ca-accent-rgb), 0.10);
  border: 1px solid rgba(var(--ca-accent-rgb), 0.35);
}
@media (max-width: 575.98px) {
  .im-license-tier { grid-template-columns: 1fr; }
  .im-license-buy { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  .im-license-buy .im-btn { min-width: 112px; min-height: 44px; }
}

/* Favourite toggle: filled red heart when active, in both themes */
.im-fav-btn.is-active,
.im-fav-btn.is-active:hover {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
}

/* Favourite heart in the grid card's stats row (list view uses .im-row-fav) */
.im-track-stats { justify-content: space-between; }
.im-stat-fav {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  margin: -6px -6px -6px 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--ca-text-2);
  cursor: pointer;
  transition: color var(--ca-t-fast), background var(--ca-t-fast), transform var(--ca-t-fast);
}
.im-stat-fav:hover { color: #dc2626; background: var(--ca-surface-2); }
.im-stat-fav.is-on { color: #dc2626; }
.im-stat-fav:focus-visible { outline: 2px solid var(--ca-accent); outline-offset: 2px; }

/* Shared account components (e.g. DangerZone) use the Studio card classes;
   give them the public theme's card look on listener pages. */
.ca-card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  overflow: hidden;
}
.ca-card.border-danger { border-color: rgba(220, 38, 38, 0.45) !important; }
.ca-card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--ca-border); }
.ca-card-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ca-text); }
.ca-card-body { padding: 1.25rem; }
.ca-muted { color: var(--ca-text-2) !important; }

/* ==========================================================================
   ACCOUNT NAV (listener /account pages)
   Desktop: sidebar card. Phones: one row of swipeable tabs.
   ========================================================================== */
.im-account-nav { padding: 1rem; }
.im-account-nav-user {
  display: flex; align-items: center; gap: 0.75rem;
  padding-bottom: 1rem; margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--ca-border);
}
.im-account-nav-links { display: flex; flex-direction: column; gap: 0.25rem; }
.im-account-nav-link {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--ca-radius);
  color: var(--ca-text-2);
  font-weight: 600; font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ca-t-fast), color var(--ca-t-fast);
}
.im-account-nav-link:hover { background: var(--ca-surface-2); color: var(--ca-text); }
.im-account-nav-link.is-active {
  background: var(--ca-accent-light);
  /* The page's own text colour, marked by the accent bar: teal text on the teal tint was 4.2:1 in light mode. */
  color: var(--ca-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--ca-accent);
}

/* Phones and tablets: the sidebar becomes one "section switcher" row that
   opens a bottom sheet with every account section (AccountNav.vue). */
.im-account-switcher { display: none; }
@media (max-width: 991.98px) {
  .im-account-nav { padding: 0; }
  .im-account-nav-user,
  .im-account-nav-links { display: none; }
  .im-account-switcher {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%;
    min-height: 60px;
    padding: 0.6rem 0.9rem;
    border: 0;
    border-radius: inherit;
    background: none;
    color: var(--ca-text);
    text-align: left;
    cursor: pointer;
  }
  .im-account-switcher:focus-visible { outline: 2px solid var(--ca-accent); outline-offset: 2px; }
}
.im-account-switcher-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--ca-radius);
  background: var(--ca-accent-light);
  color: var(--ca-accent);
  font-size: 1.1rem;
}
.im-account-switcher-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.im-account-switcher-text small {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ca-text-3);
}
.im-account-switcher-text strong { font-size: 1rem; }
.im-account-switcher-hint {
  display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--ca-border-strong);
  border-radius: var(--ca-radius-full);
  font-size: 0.8rem; font-weight: 600;
  color: var(--ca-text-2);
}

/* Bottom sheet (above the player; a modal, so it covers it) */
.im-sheet-open, .im-sheet-open body { overflow: hidden; }
.im-sheet-layer { position: fixed; inset: 0; z-index: 1070; }
.im-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(2px);
}
.im-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: min(85vh, 640px);
  display: flex; flex-direction: column;
  background: var(--ca-surface);
  border-top: 1px solid var(--ca-border-strong);
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
}
.im-sheet-header {
  padding: 0.6rem 1rem 0.9rem;
  border-bottom: 1px solid var(--ca-border);
  touch-action: none;
}
.im-sheet-handle {
  display: block;
  width: 40px; height: 4px;
  margin: 0 auto 0.75rem;
  border-radius: 2px;
  background: var(--ca-border-strong);
}
.im-sheet-close {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: 0; border-radius: 50%;
  background: var(--ca-surface-2);
  color: var(--ca-text);
}
.im-sheet-close:focus-visible { outline: 2px solid var(--ca-accent); outline-offset: 2px; }
.im-sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem 0.75rem 1rem;
}
.im-sheet-group + .im-sheet-group { margin-top: 0.5rem; }
.im-sheet-group-title {
  margin: 0.75rem 0.5rem 0.35rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ca-text-3);
}
.im-sheet-link {
  display: flex; align-items: center; gap: 0.85rem;
  min-height: 52px;
  padding: 0.4rem 0.5rem;
  border-radius: var(--ca-radius-lg);
  color: var(--ca-text);
  font-weight: 600;
  text-decoration: none;
}
.im-sheet-link:hover { background: var(--ca-surface-2); color: var(--ca-text); }
.im-sheet-link:focus-visible { outline: 2px solid var(--ca-accent); outline-offset: -2px; }
.im-sheet-link-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--ca-radius);
  background: var(--ca-surface-2);
  color: var(--ca-text-2);
  font-size: 1.05rem;
}
.im-sheet-link.is-active { background: var(--ca-accent-light); color: var(--ca-accent); }
.im-sheet-link.is-active .im-sheet-link-icon { background: var(--ca-accent); color: #fff; }
[data-theme="dark"] .im-sheet-link.is-active .im-sheet-link-icon { color: var(--im-on-accent); }
.im-sheet-link-check { font-size: 1.25rem; }
.im-sheet-link-chevron { color: var(--ca-text-3); }

.im-sheet-enter-active, .im-sheet-leave-active { transition: opacity 0.25s ease; }
.im-sheet-enter-active .im-sheet, .im-sheet-leave-active .im-sheet { transition: transform 0.28s cubic-bezier(.2,.8,.2,1); }
.im-sheet-enter-from, .im-sheet-leave-to { opacity: 0; }
.im-sheet-enter-from .im-sheet, .im-sheet-leave-to .im-sheet { transform: translateY(100%); }
@media (prefers-reduced-motion: reduce) {
  .im-sheet-enter-from .im-sheet, .im-sheet-leave-to .im-sheet { transform: none; }
}

/* Bootstrap's own colour variables follow the brand on public pages too. */
:root,
[data-theme="dark"] {
  --bs-primary: var(--ca-accent);
  --bs-primary-rgb: var(--ca-accent-rgb);
  --bs-link-color: var(--ca-accent);
  --bs-link-color-rgb: var(--ca-accent-rgb);
  --bs-link-hover-color: var(--ca-accent);
  --bs-link-hover-color-rgb: var(--ca-accent-rgb);
  --bs-focus-ring-color: rgba(var(--ca-accent-rgb), 0.25);
}
.form-check-input:checked { background-color: var(--im-accent-bright, #00ADB5); border-color: var(--im-accent-bright, #00ADB5); }

/* Touch screens: small buttons still get a comfortable tap target. */
@media (pointer: coarse) {
  .im-btn-sm { min-height: 40px; }
  .im-btn-icon.im-btn-sm { width: 40px; height: 40px; }
  .im-track-grid[data-view="list"] .im-track-card .im-track-play { width: 40px; height: 40px; }
}

/* Icon buttons on the teal gradient: dark ink like the primary buttons
   (white on the gradient was 2.1-3:1). */
.im-view-toggle button.is-active {
  color: var(--im-on-accent);
}

/* ==========================================================================
   BROWSE TRACKS (catalog explorer)
   Full-width catalog: a hero with instant search, a sticky glass filter bar
   (genre rail, mood picker, sort, layout), and a column tracklist in list view.
   Scoped to .im-browse so the shared TrackCard keeps its look on other pages.
   ========================================================================== */

/* ----- Hero ----- */
.im-browse-hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 3rem;
  isolation: isolate;
}
.im-browse-hero-aura {
  position: absolute; inset: -20% -10% -10%;
  z-index: -1;
  background:
    radial-gradient(40% 55% at 12% 20%, rgba(var(--im-cyan-rgb), 0.18), transparent 70%),
    radial-gradient(35% 50% at 88% 30%, rgba(var(--im-magenta-rgb), 0.14), transparent 70%),
    radial-gradient(45% 60% at 60% 110%, rgba(var(--ca-primary-rgb), 0.16), transparent 70%);
  filter: blur(8px);
  animation: imBrowseAura 18s ease-in-out infinite alternate;
}
/* Faint dotted grid that fades out towards the edges. */
.im-browse-hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(15, 23, 42, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 30%, transparent 80%);
}
[data-theme="dark"] .im-browse-hero::after {
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}
@keyframes imBrowseAura {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(3%, -4%, 0) scale(1.08); }
}

.im-browse-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.im-browse-hero-copy .im-eyebrow { margin-bottom: 1rem; }
.im-browse-hero h1 {
  font-family: var(--im-font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
}
.im-browse-hero-lead {
  max-width: 34rem;
  font-size: 1.075rem;
  line-height: 1.6;
  color: var(--ca-text-2);
  margin: 0 0 2rem;
}

/* Command-style search */
.im-browse-search {
  position: relative;
  display: flex; align-items: center;
  max-width: 40rem;
  height: 60px;
  padding: 0 0.75rem 0 3.25rem;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border-strong);
  border-radius: var(--ca-radius-full);
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: border-color var(--ca-t), box-shadow var(--ca-t);
}
.im-browse-search:focus-within {
  border-color: rgba(var(--ca-accent-rgb), 0.55);
  box-shadow: 0 18px 40px -18px rgba(var(--ca-accent-rgb), 0.45), 0 0 0 4px rgba(var(--ca-accent-rgb), 0.14);
}
.im-browse-search > .bi-search {
  position: absolute; left: 1.35rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--ca-text-3);
  pointer-events: none;
}
.im-browse-search input {
  flex: 1 1 auto; min-width: 0;
  height: 100%;
  border: 0; outline: 0;
  background: transparent;
  font-size: 1.02rem;
  color: var(--ca-text);
}
.im-browse-search input::placeholder { color: var(--ca-text-3); }
.im-browse-kbd {
  display: grid; place-items: center;
  min-width: 28px; height: 28px;
  padding: 0 0.4rem;
  font: 600 0.8rem/1 var(--ca-font);
  color: var(--ca-text-3);
  background: var(--ca-surface-2);
  border: 1px solid var(--ca-border-strong);
  border-bottom-width: 2px;
  border-radius: 7px;
}
.im-browse-search-clear {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: var(--ca-surface-2);
  color: var(--ca-text-2);
  cursor: pointer;
  transition: background var(--ca-t-fast), color var(--ca-t-fast);
}
.im-browse-search-clear:hover { background: var(--ca-surface-3); color: var(--ca-text); }

/* Live counts */
.im-browse-stats {
  display: flex; flex-wrap: wrap;
  gap: 0;
  margin: 2rem 0 0;
}
.im-browse-stats > div {
  display: flex; flex-direction: column-reverse;
  padding: 0 1.75rem;
  border-left: 1px solid var(--ca-border-strong);
}
.im-browse-stats > div:first-child { padding-left: 0; border-left: 0; }
.im-browse-stats dd {
  margin: 0;
  font-family: var(--im-font-display);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ca-text);
  font-variant-numeric: tabular-nums;
}
.im-browse-stats dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-text-3);
}

/* Fanned covers + equalizer */
.im-browse-hero-art {
  position: relative;
  height: 340px;
}
.im-browse-hero-cover {
  position: absolute;
  top: 50%; left: 50%;
  width: 210px; height: 210px;
  object-fit: cover;
  border-radius: var(--ca-radius-2xl);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.45), 0 10px 20px -10px rgba(15, 23, 42, 0.25);
  transform: translate(var(--im-x), -58%) rotate(var(--im-r));
  animation: imBrowseFloat 7s ease-in-out infinite;
}
.im-browse-hero-cover.is-1 { --im-r: -2deg; --im-x: -50%; z-index: 3; }
.im-browse-hero-cover.is-2 { --im-r: -12deg; --im-x: -105%; z-index: 2; width: 180px; height: 180px; opacity: 0.9; animation-delay: -2.3s; }
.im-browse-hero-cover.is-3 { --im-r: 11deg; --im-x: 5%; z-index: 1; width: 180px; height: 180px; opacity: 0.9; animation-delay: -4.6s; }
@keyframes imBrowseFloat {
  0%, 100% { transform: translate(var(--im-x), -58%) rotate(var(--im-r)); }
  50%      { transform: translate(var(--im-x), -64%) rotate(var(--im-r)); }
}
.im-browse-hero-eq {
  position: absolute;
  left: 8%; right: 8%; bottom: 0;
  height: 64px;
  display: flex; align-items: flex-end; gap: 5px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.im-browse-hero-eq span {
  flex: 1 1 0;
  border-radius: 3px;
  background: var(--im-grad-accent);
  opacity: 0.55;
  transform-origin: bottom;
  animation: imEqBounce 1.1s ease-in-out infinite;
}
/* With no covers yet, the equalizer is the whole picture. */
.im-browse-hero-eq:only-child { top: 40%; height: auto; }

/* ----- Sticky filter bar ----- */
.im-browse-bar {
  position: sticky;
  top: var(--im-nav-h);
  z-index: 60;
  padding: 0.7rem 0;
  background: var(--im-nav-bg);
  border-top: 1px solid var(--ca-border);
  border-bottom: 1px solid var(--ca-border);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
          backdrop-filter: saturate(180%) blur(16px);
}
.im-browse-bar-inner {
  display: flex; align-items: center;
  gap: 1rem;
}

.im-browse-rail-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.im-browse-rail {
  display: flex; gap: 0.4rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2px;
}
.im-browse-rail::-webkit-scrollbar { display: none; }
.im-browse-rail-wrap.can-left .im-browse-rail {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px);
}
.im-browse-rail-wrap.can-right .im-browse-rail {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%);
}
.im-browse-rail-wrap.can-left.can-right .im-browse-rail {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.im-browse-rail-arrow {
  position: absolute; top: 50%;
  z-index: 2;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  transform: translateY(-50%);
  border: 1px solid var(--ca-border);
  border-radius: 50%;
  background: var(--ca-surface);
  color: var(--ca-text);
  box-shadow: var(--ca-shadow);
  cursor: pointer;
}
.im-browse-rail-arrow.is-left { left: -4px; }
.im-browse-rail-arrow.is-right { right: -4px; }

/* Pills: ink-inverted when active, in both themes */
.im-browse-pill {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 1rem;
  scroll-snap-align: start;
  font-size: 0.84rem; font-weight: 500;
  white-space: nowrap;
  color: var(--ca-text-2);
  background: var(--ca-surface);
  border: 1px solid var(--ca-border-strong);
  border-radius: var(--ca-radius-full);
  cursor: pointer;
  transition: background var(--ca-t-fast), color var(--ca-t-fast), border-color var(--ca-t-fast), transform var(--ca-t-fast);
}
.im-browse-pill:hover { color: var(--ca-text); border-color: var(--ca-text-3); }
.im-browse-pill:active { transform: scale(0.97); }
.im-browse-pill.is-active {
  color: var(--ca-surface);
  background: var(--ca-text);
  border-color: var(--ca-text);
  font-weight: 600;
}
.im-browse-pill:focus-visible,
.im-browse-control:focus-visible,
.im-browse-seg button:focus-visible,
.im-browse-rail-arrow:focus-visible {
  outline: 2px solid var(--ca-accent);
  outline-offset: 2px;
}

.im-browse-controls {
  flex: 0 0 auto;
  display: flex; align-items: center;
  gap: 0.6rem;
}

/* Mood picker */
.im-browse-mood { position: relative; }
.im-browse-control {
  display: inline-flex; align-items: center; gap: 0.45rem;
  height: 36px;
  padding: 0 0.9rem;
  font-size: 0.84rem; font-weight: 500;
  color: var(--ca-text-2);
  background: var(--ca-surface);
  border: 1px solid var(--ca-border-strong);
  border-radius: var(--ca-radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--ca-t-fast), color var(--ca-t-fast), background var(--ca-t-fast);
}
.im-browse-control:hover { color: var(--ca-text); border-color: var(--ca-text-3); }
.im-browse-control.is-set {
  color: var(--ca-accent);
  background: var(--ca-accent-light);
  border-color: rgba(var(--ca-accent-rgb), 0.45);
  font-weight: 600;
}
.im-browse-caret { font-size: 0.7rem; transition: transform var(--ca-t-fast); }
.im-browse-mood.is-open .im-browse-caret { transform: rotate(180deg); }
.im-browse-pop {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  z-index: 70;
  width: min(340px, calc(100vw - 2rem));
  padding: 1rem;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-xl);
  box-shadow: var(--ca-shadow-xl);
  animation: imBrowsePop 0.16s ease-out;
}
@keyframes imBrowsePop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.im-browse-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}
.im-browse-pop-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.im-browse-pop-grid .im-browse-pill { height: 32px; padding: 0 0.8rem; font-size: 0.8rem; }

/* Segmented controls (sort, layout) */
.im-browse-seg {
  display: inline-flex;
  padding: 3px;
  background: var(--ca-surface-3);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-full);
}
.im-browse-seg button {
  display: inline-flex; align-items: center; gap: 0.4rem;
  height: 30px;
  padding: 0 0.85rem;
  font-size: 0.8rem; font-weight: 500;
  color: var(--ca-text-2);
  background: transparent;
  border: 0;
  border-radius: var(--ca-radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ca-t-fast), color var(--ca-t-fast), box-shadow var(--ca-t-fast);
}
.im-browse-seg button:hover { color: var(--ca-text); }
.im-browse-seg button.is-active {
  color: var(--ca-text);
  background: var(--ca-surface);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--ca-border);
}
.im-browse-seg button i { font-size: 0.85rem; }
.im-browse-seg.is-icons button { width: 34px; padding: 0; justify-content: center; }

/* ----- Results ----- */
.im-browse-results { padding: 1.75rem 0 2rem; }
.im-browse-summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.im-browse-count { margin: 0; font-size: 0.92rem; color: var(--ca-text-2); }
.im-browse-count strong { color: var(--ca-text); font-variant-numeric: tabular-nums; }
.im-browse-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.im-browse-token {
  display: inline-flex; align-items: center; gap: 0.25rem;
  height: 30px;
  padding: 0 0.5rem 0 0.8rem;
  font-size: 0.8rem; font-weight: 600;
  color: var(--ca-accent);
  background: var(--ca-accent-light);
  border: 1px solid rgba(var(--ca-accent-rgb), 0.35);
  border-radius: var(--ca-radius-full);
  cursor: pointer;
}
.im-browse-token:hover { background: rgba(var(--ca-accent-rgb), 0.18); }
.im-browse-link {
  padding: 0.25rem 0.4rem;
  font-size: 0.8rem; font-weight: 600;
  color: var(--ca-accent);
  background: none; border: 0;
  cursor: pointer;
}
.im-browse-link:hover { text-decoration: underline; }

/* ----- Tracklist (list view) ----- */
.im-browse {
  --im-tl-cols: 56px minmax(0, 1fr) 140px 64px 56px 72px 36px 36px;
  --im-tl-areas-1: "cover title genre bpm time plays fav menu";
  --im-tl-areas-2: "cover artist genre bpm time plays fav menu";
}
.im-browse-thead {
  display: grid;
  grid-template-columns: var(--im-tl-cols);
  column-gap: 1rem;
  align-items: center;
  padding: 0.7rem 1.25rem;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-text-3);
  background: var(--ca-surface-2);
  border: 1px solid var(--ca-border);
  border-bottom: 0;
  border-radius: var(--ca-radius-xl) var(--ca-radius-xl) 0 0;
}
.im-browse-thead + .im-browse-grid[data-view="list"]:has(.im-track-card) {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 0 0 var(--ca-radius-xl) var(--ca-radius-xl);
  box-shadow: 0 20px 40px -28px rgba(15, 23, 42, 0.25);
}
.im-browse .im-browse-grid[data-view="list"] > [class*="col-"] { margin-bottom: 0; }
.im-browse .im-browse-grid[data-view="list"] .im-track-card {
  display: grid;
  grid-template-columns: var(--im-tl-cols);
  grid-template-areas: var(--im-tl-areas-1) var(--im-tl-areas-2);
  column-gap: 1rem;
  row-gap: 0.15rem;
  align-items: center;
  padding: 0.65rem 1.25rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ca-border);
  border-radius: 0;
  box-shadow: none;
  transition: background var(--ca-t-fast);
}
.im-browse .im-browse-grid[data-view="list"] > [class*="col-"]:last-child .im-track-card {
  border-bottom: 0;
  border-radius: 0 0 var(--ca-radius-xl) var(--ca-radius-xl);
}
.im-browse .im-browse-grid[data-view="list"] .im-track-card:hover,
.im-browse .im-browse-grid[data-view="list"] .im-track-card:focus-within {
  background: var(--ca-surface-2);
  box-shadow: none;
}
.im-browse .im-browse-grid[data-view="list"] .im-track-card > .im-track-info,
.im-browse .im-browse-grid[data-view="list"] .im-track-card .im-track-row-meta { display: contents; }
.im-browse .im-browse-grid[data-view="list"] .im-track-card .im-track-stats { display: none; }

.im-browse .im-browse-grid[data-view="list"] .im-track-card > .im-track-cover-link { grid-area: cover; }
.im-browse .im-browse-grid[data-view="list"] .im-track-card .im-track-cover,
.im-browse .im-browse-grid[data-view="list"] .im-track-card > .im-track-cover-link {
  width: 56px; height: 56px;
  border-radius: 10px;
}
.im-browse .im-browse-grid[data-view="list"] .im-track-card .im-track-title {
  grid-area: title;
  align-self: end;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.95rem; font-weight: 600;
}
.im-browse .im-browse-grid[data-view="list"] .im-track-card .im-track-artist {
  grid-area: artist;
  align-self: start;
  min-width: 0; max-width: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.84rem;
  color: var(--ca-text-3);
}
.im-browse .im-browse-grid[data-view="list"] .im-track-card .im-meta-chip {
  padding: 0;
  font-size: 0.84rem; font-weight: 500;
  color: var(--ca-text-2);
  background: none; border: 0;
  font-variant-numeric: tabular-nums;
}
.im-browse .im-browse-grid[data-view="list"] .im-track-card .im-meta-chip.is-genre {
  grid-area: genre;
  justify-self: start;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
  padding: 0.2rem 0.65rem;
  font-size: 0.76rem; font-weight: 600;
  background: var(--ca-surface-3);
  border-radius: var(--ca-radius-full);
}
.im-browse .im-browse-grid[data-view="list"] .im-track-card .im-meta-chip.is-bpm { grid-area: bpm; }
/* The column heading already says BPM. */
.im-browse .im-browse-grid[data-view="list"] .im-track-card .im-meta-chip.is-bpm .im-meta-unit { display: none; }
.im-browse .im-browse-grid[data-view="list"] .im-track-card .im-meta-chip.is-duration { grid-area: time; }
.im-browse .im-browse-grid[data-view="list"] .im-track-card > .im-row-plays {
  grid-area: plays;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
.im-browse .im-browse-grid[data-view="list"] .im-track-card > .im-row-plays i { display: none; }
.im-browse .im-browse-grid[data-view="list"] .im-track-card > .im-row-fav { grid-area: fav; }
.im-browse .im-browse-grid[data-view="list"] .im-track-card > .im-card-actions { grid-area: menu; margin: 0; }

/* Play sits centred on the cover and appears on hover or keyboard focus. */
.im-browse .im-browse-grid[data-view="list"] .im-track-card .im-track-cover-overlay { background: rgba(4, 24, 26, 0.45); }
.im-browse .im-browse-grid[data-view="list"] .im-track-card:hover .im-track-cover img { transform: none; }
.im-browse .im-browse-grid[data-view="list"] .im-track-card .im-track-play {
  top: 50%; left: 50%; right: auto; bottom: auto;
  width: 32px; height: 32px;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}
.im-browse .im-browse-grid[data-view="list"] .im-track-card:hover .im-track-play,
.im-browse .im-browse-grid[data-view="list"] .im-track-card:focus-within .im-track-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.im-browse .im-browse-grid[data-view="list"] .im-track-card:focus-within .im-track-cover-overlay { opacity: 1; }
@media (pointer: coarse) {
  .im-browse .im-browse-grid[data-view="list"] .im-track-card .im-track-play {
    width: 32px; height: 32px;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Grid view: a little more air with the full-width layout */
.im-browse .im-browse-grid[data-view="grid"] .im-track-card { border-radius: var(--ca-radius-2xl); }

/* ----- Responsive ----- */
@media (max-width: 1199.98px) {
  .im-browse {
    --im-tl-cols: 56px minmax(0, 1fr) 120px 56px 72px 36px 36px;
    --im-tl-areas-1: "cover title genre time plays fav menu";
    --im-tl-areas-2: "cover artist genre time plays fav menu";
  }
  .im-browse-thead > :nth-child(4),
  .im-browse .im-browse-grid[data-view="list"] .im-track-card .im-meta-chip.is-bpm { display: none; }
}
@media (max-width: 991.98px) {
  .im-browse-hero { padding: 3rem 0 2.25rem; }
  .im-browse-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .im-browse-hero-art { display: none; }
  .im-browse-bar-inner { flex-wrap: wrap; gap: 0.6rem; }
  .im-browse-rail-wrap { flex-basis: 100%; }
  .im-browse-controls { flex-basis: 100%; }
  .im-browse-controls .im-browse-seg:last-child { margin-left: auto; }
  .im-browse-pop { right: auto; left: 0; }
}
@media (max-width: 767.98px) {
  .im-browse {
    --im-tl-cols: 48px minmax(0, 1fr) 44px 36px 36px;
    --im-tl-areas-1: "cover title time fav menu";
    --im-tl-areas-2: "cover artist time fav menu";
  }
  .im-browse-thead { display: none; }
  .im-browse-thead + .im-browse-grid[data-view="list"]:has(.im-track-card) { border-radius: var(--ca-radius-xl); }
  .im-browse .im-browse-grid[data-view="list"] .im-track-card { column-gap: 0.75rem; padding: 0.6rem 0.85rem; }
  .im-browse .im-browse-grid[data-view="list"] .im-track-card .im-track-cover,
  .im-browse .im-browse-grid[data-view="list"] .im-track-card > .im-track-cover-link { width: 48px; height: 48px; }
  .im-browse .im-browse-grid[data-view="list"] .im-track-card .im-meta-chip.is-genre,
  .im-browse .im-browse-grid[data-view="list"] .im-track-card > .im-row-plays { display: none; }
  .im-browse-stats > div { padding: 0 1.1rem; }
  .im-browse-stats dd { font-size: 1.5rem; }
}
@media (max-width: 575.98px) {
  .im-browse-search { height: 54px; }
  .im-browse-kbd { display: none; }
  /* Sort shows icons only; the label stays for screen readers. */
  .im-browse-seg:not(.is-icons) button { width: 34px; padding: 0; justify-content: center; }
  .im-browse-seg:not(.is-icons) button span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .im-browse-hero-aura,
  .im-browse-hero-cover,
  .im-browse-hero-eq span,
  .im-browse-pop { animation: none; }
}

/* ----- Discover pages: shared bits beyond the track list ----- */
.im-browse-results.has-rule { border-top: 1px solid var(--ca-border); }
.im-browse-count-note { color: var(--ca-text-3); margin-left: 0.25rem; }
.im-browse-hero-art.is-round .im-browse-hero-cover { border-radius: 50%; }

/* Release cards (albums, playlists) */
.im-browse-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2rem 1.5rem;
}
.im-browse-release {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.im-browse-release:hover { color: inherit; }
.im-browse-release-art {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  margin-bottom: 0.85rem;
  overflow: hidden;
  border-radius: var(--ca-radius-xl);
  color: rgba(255, 255, 255, 0.85);
  font-size: 2.75rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 14px 30px -18px rgba(15, 23, 42, 0.5);
  transition: transform var(--ca-t), box-shadow var(--ca-t);
}
.im-browse-release-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--ca-t-slow);
}
/* Playlists: two offset "sleeves" behind the cover read as a collection. */
.im-browse-release-art.is-stack { overflow: visible; margin-top: 10px; }
.im-browse-release-art.is-stack img { border-radius: inherit; }
.im-browse-release-art.is-stack::before,
.im-browse-release-art.is-stack::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  border-radius: var(--ca-radius-xl) var(--ca-radius-xl) 0 0;
  background: inherit;
  z-index: -1;
}
.im-browse-release-art.is-stack::before { top: -6px; opacity: 0.55; transform: scaleX(0.94); }
.im-browse-release-art.is-stack::after  { top: -11px; opacity: 0.3; transform: scaleX(0.86); }
.im-browse-release-go {
  position: absolute; right: 12px; bottom: 12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 1rem;
  color: var(--im-on-accent);
  background: var(--im-accent-bright);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition: opacity var(--ca-t), transform var(--ca-t-bounce);
}
.im-browse-release:hover .im-browse-release-art,
.im-browse-release:focus-visible .im-browse-release-art {
  transform: translateY(-4px);
  box-shadow: 0 26px 44px -22px rgba(15, 23, 42, 0.6), 0 0 0 1px rgba(var(--ca-accent-rgb), 0.3);
}
.im-browse-release:hover .im-browse-release-art:not(.is-stack) img { transform: scale(1.05); }
.im-browse-release:hover .im-browse-release-go,
.im-browse-release:focus-visible .im-browse-release-go { opacity: 1; transform: none; }
.im-browse-release:focus-visible { outline: none; }
.im-browse-release:focus-visible .im-browse-release-art { outline: 2px solid var(--ca-accent); outline-offset: 3px; }
.im-browse-release-title {
  font-size: 0.95rem; font-weight: 600;
  color: var(--ca-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-browse-release-sub {
  margin-top: 0.1rem;
  font-size: 0.84rem;
  color: var(--ca-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-browse-release-meta {
  display: flex; gap: 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.76rem;
  color: var(--ca-text-3);
  font-variant-numeric: tabular-nums;
}
.im-browse-release-meta span + span::before { content: "·"; margin-right: 0.5rem; }

/* Artist cards */
.im-browse-cards.is-people { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.5rem; }
.im-browse-person {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.75rem 1.25rem 1.25rem;
  text-align: center;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-2xl);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--ca-t), box-shadow var(--ca-t), border-color var(--ca-t);
}
/* Soft wash of the avatar colour behind the top of the card */
.im-browse-person::before {
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 45%;
  z-index: -1;
  background: radial-gradient(70% 100% at 50% 0%, rgba(var(--ca-accent-rgb), 0.14), transparent 75%);
}
.im-browse-person:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--ca-accent-rgb), 0.3);
  box-shadow: 0 26px 44px -26px rgba(15, 23, 42, 0.45);
}
.im-browse-person-link {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.im-browse-person-link:hover { color: inherit; }
.im-browse-person-avatar {
  position: relative;
  width: 112px; height: 112px;
  display: grid; place-items: center;
  margin-bottom: 1rem;
  border-radius: 50%;
  overflow: hidden;
  font: 700 2rem/1 var(--im-font-display);
  color: #fff;
  box-shadow: 0 0 0 4px var(--ca-surface), 0 0 0 5px var(--ca-border-strong), 0 16px 30px -14px rgba(15, 23, 42, 0.5);
  transition: box-shadow var(--ca-t);
}
.im-browse-person:hover .im-browse-person-avatar {
  box-shadow: 0 0 0 4px var(--ca-surface), 0 0 0 6px var(--im-accent-bright), 0 16px 30px -14px rgba(var(--ca-accent-rgb), 0.6);
}
.im-browse-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.im-browse-person-name {
  max-width: 100%;
  font-size: 1rem; font-weight: 700;
  color: var(--ca-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-browse-person-meta {
  display: flex; justify-content: center; gap: 0.75rem;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--ca-text-3);
  font-variant-numeric: tabular-nums;
}
.im-browse-follow {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  width: 100%;
  height: 38px;
  margin-top: 1.1rem;
  font-size: 0.84rem; font-weight: 600;
  color: var(--ca-text);
  background: var(--ca-surface-2);
  border: 1px solid var(--ca-border-strong);
  border-radius: var(--ca-radius-full);
  cursor: pointer;
  transition: background var(--ca-t-fast), color var(--ca-t-fast), border-color var(--ca-t-fast);
}
.im-browse-follow:hover { border-color: var(--ca-text-3); background: var(--ca-surface-3); }
.im-browse-follow.is-on {
  color: var(--ca-accent);
  background: var(--ca-accent-light);
  border-color: rgba(var(--ca-accent-rgb), 0.4);
}
.im-browse-follow:focus-visible,
.im-browse-tile:focus-visible { outline: 2px solid var(--ca-accent); outline-offset: 3px; }
.im-browse-follow:disabled { opacity: 0.7; cursor: progress; }

/* Genre / mood tiles: a bento grid, the two busiest tiles twice as wide */
.im-browse-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 168px;
  grid-auto-flow: dense;
  gap: 1rem;
}
.im-browse-tile {
  position: relative;
  display: flex; align-items: flex-end;
  padding: 1.25rem;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-decoration: none;
  background: var(--im-tile-bg);
  border-radius: var(--ca-radius-2xl);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 16px 34px -22px rgba(15, 23, 42, 0.6);
  transition: transform var(--ca-t), box-shadow var(--ca-t);
}
.im-browse-tile.is-feature { grid-column: span 2; grid-row: span 2; padding: 1.75rem; }
/* Grain + a dark floor so white text always reads */
.im-browse-tile::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.38)),
    radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%);
}
.im-browse-tile:hover {
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 28px 50px -24px rgba(15, 23, 42, 0.7);
}
.im-browse-tile-icon {
  position: absolute; right: -0.1em; top: -0.12em;
  z-index: -1;
  font-size: 6.5rem;
  line-height: 1;
  opacity: 0.22;
  transform: rotate(-12deg);
  transition: transform var(--ca-t-slow), opacity var(--ca-t);
}
.im-browse-tile.is-feature .im-browse-tile-icon { font-size: 13rem; }
.im-browse-tile:hover .im-browse-tile-icon { transform: rotate(-4deg) scale(1.08); opacity: 0.32; }
.im-browse-tile-body { display: flex; flex-direction: column; min-width: 0; }
.im-browse-tile-name {
  font-family: var(--im-font-display);
  font-size: 1.45rem; font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.im-browse-tile.is-feature .im-browse-tile-name { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.im-browse-tile-count {
  margin-top: 0.3rem;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.88;
  font-variant-numeric: tabular-nums;
}
.im-browse-tile-go {
  position: absolute; right: 1rem; bottom: 1rem;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--ca-t), transform var(--ca-t);
}
.im-browse-tile:hover .im-browse-tile-go,
.im-browse-tile:focus-visible .im-browse-tile-go { opacity: 1; transform: none; }

/* "Nothing matches" for the in-page genre / mood finder */
.im-browse-none { padding: 3rem 1rem; text-align: center; color: var(--ca-text-2); }
.im-browse-none > i { display: block; font-size: 2.5rem; opacity: 0.35; margin-bottom: 0.75rem; }

@media (max-width: 991.98px) {
  .im-browse-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; }
  .im-browse-tile.is-feature { grid-row: span 1; }
  .im-browse-tile.is-feature .im-browse-tile-icon { font-size: 8rem; }
}
@media (max-width: 575.98px) {
  .im-browse-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .im-browse-cards.is-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .im-browse-person { padding: 1.25rem 0.75rem 0.85rem; }
  .im-browse-person-avatar { width: 80px; height: 80px; font-size: 1.5rem; }
  .im-browse-person-meta { flex-direction: column; gap: 0.1rem; }
  .im-browse-tiles { gap: 0.75rem; }
  .im-browse-tile { padding: 1rem; }
  .im-browse-tile-name { font-size: 1.2rem; }
  .im-browse-tile-go { display: none; }
}
@media (hover: none) {
  .im-browse-release-go { opacity: 1; transform: none; width: 34px; height: 34px; }
}

/* ==========================================================================
   HEADER SEARCH + SEARCH OVERLAY
   The header button is a "command bar" pill (icon-only on smaller screens);
   it opens a full-screen overlay with live results (SearchPalette.vue).
   ========================================================================== */
.im-nav-search {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.55rem;
  height: 40px;
  padding: 0 0.45rem 0 0.95rem;
  min-width: 210px;
  font-size: 0.85rem; font-weight: 500;
  color: var(--ca-text-3);
  text-decoration: none;
  background: var(--ca-surface-2);
  border: 1px solid var(--ca-border-strong);
  border-radius: var(--ca-radius-full);
  isolation: isolate;
  overflow: hidden;
  transition: color var(--ca-t-fast), border-color var(--ca-t-fast), box-shadow var(--ca-t), background var(--ca-t-fast);
}
/* A slow light sweep across the pill on hover */
.im-nav-search::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(var(--ca-accent-rgb), 0.16) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
}
.im-nav-search:hover {
  color: var(--ca-text);
  background: var(--ca-surface);
  border-color: rgba(var(--ca-accent-rgb), 0.5);
  box-shadow: 0 0 0 4px rgba(var(--ca-accent-rgb), 0.1), 0 8px 24px -12px rgba(var(--ca-accent-rgb), 0.5);
}
.im-nav-search:hover::after { transform: translateX(100%); }
.im-nav-search:focus-visible { outline: 2px solid var(--ca-accent); outline-offset: 2px; }
.im-nav-search > .bi-search { font-size: 0.95rem; color: var(--ca-accent); }
.im-nav-search-label { flex: 1 1 auto; }
.im-nav-search-kbd {
  padding: 0.2rem 0.45rem;
  font: 600 0.7rem/1.2 var(--ca-font);
  color: var(--ca-text-3);
  background: var(--ca-surface);
  border: 1px solid var(--ca-border-strong);
  border-bottom-width: 2px;
  border-radius: 7px;
}
/* Laptop widths: the search becomes an icon and the links drop their icons, so the menu fits on one line
   (at 1280px the links wrapped onto two lines and "Ctrl K" broke in half). */
@media (max-width: 1399.98px) {
  .im-nav-search { min-width: 0; width: 40px; padding: 0; justify-content: center; }
  .im-nav-search-label,
  .im-nav-search-kbd { display: none; }
  .im-nav-link { padding: 0.5rem 0.7rem; }
  .im-nav-link > i:first-child { display: none; }
}

/* ----- Overlay ----- */
html.im-search-locked { overflow: hidden; }
.im-search-overlay {
  position: fixed; inset: 0;
  z-index: var(--im-z-modal);
  display: flex; justify-content: center; align-items: flex-start;
  padding: max(8vh, 1rem) 1rem 1rem;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(var(--ca-accent-rgb), 0.22), transparent 70%),
    rgba(6, 10, 18, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}
.im-search-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(78vh, 760px);
  display: flex; flex-direction: column;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border-strong);
  border-radius: var(--ca-radius-2xl);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
/* Thin brand line along the top edge */
.im-search-panel::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--im-accent-bright), rgba(var(--im-magenta-rgb), 0.8), transparent);
}
.im-search-field {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1.1rem 1.25rem;
}
.im-search-field > .bi-search { font-size: 1.3rem; color: var(--ca-accent); }
.im-search-field input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0;
  background: transparent;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ca-text);
}
.im-search-field input::placeholder { color: var(--ca-text-3); font-weight: 400; }
.im-search-esc {
  padding: 0.3rem 0.55rem;
  font: 600 0.72rem/1 var(--ca-font);
  color: var(--ca-text-3);
  background: var(--ca-surface-2);
  border: 1px solid var(--ca-border-strong);
  border-bottom-width: 2px;
  border-radius: 7px;
  cursor: pointer;
}
.im-search-esc:hover { color: var(--ca-text); }
.im-search-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(var(--ca-accent-rgb), 0.25);
  border-top-color: var(--ca-accent);
  border-radius: 50%;
  animation: imSearchSpin 0.7s linear infinite;
}
@keyframes imSearchSpin { to { transform: rotate(360deg); } }
.im-search-progress {
  height: 1px;
  background: var(--ca-border);
  position: relative;
  overflow: hidden;
}
.im-search-progress.is-on::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 30%;
  background: linear-gradient(90deg, transparent, var(--im-accent-bright), transparent);
  animation: imSearchSlide 0.9s ease-in-out infinite;
}
@keyframes imSearchSlide { from { left: -30%; } to { left: 100%; } }

.im-search-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem 0.6rem 0.6rem;
}
.im-search-group + .im-search-group { margin-top: 0.4rem; }
.im-search-group-label {
  margin: 0;
  padding: 0.7rem 0.75rem 0.4rem;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-text-3);
}
.im-search-item {
  position: relative;
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--ca-radius-lg);
  cursor: pointer;
  transition: background var(--ca-t-fast);
}
.im-search-item[data-active="true"] {
  background: linear-gradient(90deg, rgba(var(--ca-accent-rgb), 0.12), rgba(var(--ca-accent-rgb), 0.04));
}
.im-search-item[data-active="true"]::before {
  content: "";
  position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background: var(--im-accent-bright);
}
.im-search-thumb {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ca-surface-3);
  color: var(--ca-text-2);
  font-size: 1.05rem;
}
.im-search-thumb.is-round { border-radius: 50%; }
.im-search-thumb.is-icon { width: 36px; height: 36px; border-radius: 10px; }
.im-search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.is-recent .im-search-thumb, .is-all .im-search-thumb { background: transparent; color: var(--ca-text-3); }
.im-search-item[data-active="true"] .im-search-thumb.is-icon { color: var(--ca-accent); }
.im-search-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.im-search-title {
  font-size: 0.92rem; font-weight: 600;
  color: var(--ca-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-search-sub {
  font-size: 0.78rem;
  color: var(--ca-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-recent .im-search-title, .is-all .im-search-title { font-weight: 500; }
.im-search-plays {
  display: inline-flex; align-items: center; gap: 0.15rem;
  font-size: 0.76rem;
  color: var(--ca-text-3);
  font-variant-numeric: tabular-nums;
}
.im-search-play {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  color: var(--im-on-accent);
  background: var(--im-accent-bright);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--ca-t-fast), transform var(--ca-t-fast);
}
.im-search-item[data-active="true"] .im-search-play,
.im-search-play:focus-visible { opacity: 1; transform: none; }
.im-search-forget {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--ca-text-3);
  cursor: pointer;
}
.im-search-forget:hover { background: var(--ca-surface-3); color: var(--ca-text); }
.im-search-enter {
  font-size: 0.85rem;
  color: var(--ca-text-3);
  opacity: 0;
  transition: opacity var(--ca-t-fast);
}
.im-search-item[data-active="true"] .im-search-enter { opacity: 1; }
.im-search-item.is-all { margin-top: 0.35rem; border-top: 1px solid var(--ca-border); border-radius: 0 0 var(--ca-radius-lg) var(--ca-radius-lg); }
.im-search-empty { padding: 2.25rem 1rem 1.5rem; text-align: center; color: var(--ca-text-2); }
.im-search-empty > i { display: block; font-size: 2rem; margin-bottom: 0.6rem; color: var(--ca-text-3); }
.im-search-empty p { margin: 0 0 0.25rem; }
.im-search-empty span { font-size: 0.84rem; color: var(--ca-text-3); }
.im-search-foot {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.74rem;
  color: var(--ca-text-3);
  background: var(--ca-surface-2);
  border-top: 1px solid var(--ca-border);
}
.im-search-foot kbd {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px;
  margin-right: 0.2rem;
  padding: 0 0.3rem;
  font: 600 0.68rem/1 var(--ca-font);
  color: var(--ca-text-2);
  background: var(--ca-surface);
  border: 1px solid var(--ca-border-strong);
  border-radius: 5px;
}

.im-search-enter-active, .im-search-leave-active { transition: opacity 0.18s ease; }
.im-search-enter-active .im-search-panel, .im-search-leave-active .im-search-panel { transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.18s ease; }
.im-search-enter-from, .im-search-leave-to { opacity: 0; }
.im-search-enter-from .im-search-panel, .im-search-leave-to .im-search-panel { opacity: 0; transform: translateY(-12px) scale(0.98); }

@media (max-width: 575.98px) {
  .im-search-overlay { padding: 0; }
  .im-search-panel { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .im-search-field { padding-top: calc(0.9rem + env(safe-area-inset-top, 0px)); }
  .im-search-field input { font-size: 1.1rem; }
  .im-search-foot { display: none; }
  .im-search-plays { display: none; }
  .im-search-play { opacity: 1; transform: none; }
}
@media (hover: none) {
  .im-search-play { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .im-search-enter-active, .im-search-leave-active,
  .im-search-enter-active .im-search-panel, .im-search-leave-active .im-search-panel { transition: none; }
  .im-search-progress.is-on::after, .im-search-spinner { animation: none; }
}

/* ----- Search results page (Search.vue) ----- */
.im-browse-seg.is-tabs { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.im-browse-seg.is-tabs::-webkit-scrollbar { display: none; }
.im-browse-seg.is-tabs button { height: 34px; padding: 0 1rem; font-size: 0.85rem; }
.im-sr-count {
  margin-left: 0.15rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem; font-weight: 700;
  color: var(--ca-text-3);
  background: var(--ca-surface-3);
  border-radius: var(--ca-radius-full);
  font-variant-numeric: tabular-nums;
}
.im-browse-seg button.is-active .im-sr-count { color: var(--ca-accent); background: var(--ca-accent-light); }

.im-sr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 1.75rem; }
.im-sr-tags-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ca-text-3); margin-right: 0.25rem; }
.im-sr-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  height: 34px; padding: 0 0.9rem;
  font-size: 0.84rem; font-weight: 600;
  color: var(--ca-text);
  text-decoration: none;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border-strong);
  border-radius: var(--ca-radius-full);
  transition: border-color var(--ca-t-fast), color var(--ca-t-fast);
}
.im-sr-tag:hover { color: var(--ca-accent); border-color: rgba(var(--ca-accent-rgb), 0.5); }
.im-sr-tag i { color: var(--ca-accent); }
.im-sr-tag small { font-size: 0.7rem; font-weight: 500; color: var(--ca-text-3); }

.im-sr-section { margin-bottom: 2.75rem; min-width: 0; }
.im-sr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.im-sr-head:empty { display: none; }
.im-sr-head h2 { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }

/* Top result + tracks */
.im-sr-lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.75rem; }
.im-sr-lead > .im-sr-section:only-child { grid-column: 1 / -1; max-width: 520px; }
.im-sr-top {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px;
  padding: 1.5rem;
  background:
    radial-gradient(90% 90% at 0% 0%, rgba(var(--ca-accent-rgb), 0.16), transparent 60%),
    var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-2xl);
  transition: background var(--ca-t), box-shadow var(--ca-t), border-color var(--ca-t);
}
.im-sr-top:hover { border-color: rgba(var(--ca-accent-rgb), 0.35); box-shadow: 0 26px 50px -28px rgba(15, 23, 42, 0.45); }
.im-sr-top-art {
  width: 104px; height: 104px;
  display: grid; place-items: center;
  margin-bottom: 1.25rem;
  overflow: hidden;
  border-radius: var(--ca-radius-xl);
  background: var(--ca-surface-3);
  color: #fff;
  font: 700 2rem/1 var(--im-font-display);
  box-shadow: 0 18px 36px -16px rgba(15, 23, 42, 0.55);
}
.im-sr-top-art.is-round { border-radius: 50%; }
.im-sr-top-art img { width: 100%; height: 100%; object-fit: cover; }
.im-sr-top-art > i { color: var(--ca-text-3); }
.im-sr-top-title {
  font-family: var(--im-font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700;
  line-height: 1.1;
  color: var(--ca-text);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-sr-top-title:hover { color: var(--ca-text); }
/* The title link covers the whole card; the play button sits above it. */
.im-sr-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.im-sr-top:has(.im-sr-stretch:focus-visible) { outline: 2px solid var(--ca-accent); outline-offset: 3px; }
.im-sr-top-meta { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; font-size: 0.9rem; color: var(--ca-text-2); }
.im-sr-pill {
  padding: 0.2rem 0.65rem;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ca-text);
  background: var(--ca-surface-3);
  border-radius: var(--ca-radius-full);
}
.im-sr-top-play {
  position: absolute; right: 1.5rem; bottom: 1.5rem;
  z-index: 1;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  font-size: 1.4rem;
  color: var(--im-on-accent);
  background: var(--im-accent-bright);
  border: 0; border-radius: 50%;
  box-shadow: 0 12px 28px -8px rgba(var(--ca-accent-rgb), 0.7);
  cursor: pointer;
  transition: transform var(--ca-t-bounce);
}
.im-sr-top-play:hover { transform: scale(1.06); }
.im-sr-top-play:focus-visible { outline: 2px solid var(--ca-text); outline-offset: 3px; }

/* Track rows */
.im-sr-tracks {
  list-style: none;
  margin: 0; padding: 0.35rem;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-xl);
}
.im-sr-track {
  display: grid;
  grid-template-columns: 28px 48px minmax(0, 1fr) 140px 72px 56px 64px;
  align-items: center;
  column-gap: 1rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--ca-radius-lg);
  transition: background var(--ca-t-fast);
}
.im-sr-track:hover, .im-sr-track:focus-within { background: var(--ca-surface-2); }
.im-sr-tracks.is-compact .im-sr-track { grid-template-columns: 48px minmax(0, 1fr) 56px; }
/* Trending list has no BPM column */
.im-sr-tracks.is-trending .im-sr-track { grid-template-columns: 28px 48px minmax(0, 1fr) 140px 56px 64px; }
.im-sr-index { font-size: 0.85rem; color: var(--ca-text-3); text-align: center; font-variant-numeric: tabular-nums; }
.im-sr-track.is-playing .im-sr-index, .im-sr-track.is-playing .im-sr-title { color: var(--ca-accent); }
.im-sr-cover {
  position: relative;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--ca-surface-3);
  color: var(--ca-text-3);
  cursor: pointer;
}
.im-sr-cover img { width: 100%; height: 100%; object-fit: cover; }
.im-sr-cover-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 1.2rem;
  color: #fff;
  background: rgba(4, 24, 26, 0.5);
  opacity: 0;
  transition: opacity var(--ca-t-fast);
}
.im-sr-track:hover .im-sr-cover-play,
.im-sr-cover:focus-visible .im-sr-cover-play,
.im-sr-track.is-playing .im-sr-cover-play { opacity: 1; }
.im-sr-cover:focus-visible { outline: 2px solid var(--ca-accent); outline-offset: 2px; }
.im-sr-main { display: flex; flex-direction: column; min-width: 0; }
.im-sr-title, .im-sr-sub {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none;
}
.im-sr-title { font-size: 0.93rem; font-weight: 600; color: var(--ca-text); }
.im-sr-sub { font-size: 0.82rem; color: var(--ca-text-3); }
.im-sr-title:hover, .im-sr-sub:hover { text-decoration: underline; color: inherit; }
.im-sr-sub:hover { color: var(--ca-text-2); }
.im-sr-genre {
  justify-self: start;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.8rem;
  color: var(--ca-text-2);
  text-decoration: none;
}
a.im-sr-genre:hover { color: var(--ca-accent); }
.im-sr-num { font-size: 0.84rem; color: var(--ca-text-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.im-sr-num.is-plays { color: var(--ca-text-3); }
.im-sr-num.is-plays i { font-size: 0.7rem; margin-right: 0.15rem; }

/* "Browse the catalog" tiles on an empty search */
.im-sr-jumps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 120px; gap: 1rem; }
.im-sr-jumps .im-browse-tile-icon { font-size: 5rem; }

@media (max-width: 991.98px) {
  .im-sr-lead { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .im-sr-top { min-height: 220px; }
  .im-sr-jumps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .im-sr-track,
  .im-sr-tracks.is-trending .im-sr-track { grid-template-columns: 22px 44px minmax(0, 1fr) 48px; column-gap: 0.75rem; }
  .im-sr-tracks:not(.is-compact) .im-sr-genre,
  .im-sr-tracks:not(.is-compact) .im-sr-num:not(:nth-last-child(2)) { display: none; }
  .im-sr-cover { width: 44px; height: 44px; }
  .im-sr-cover-play { opacity: 1; background: rgba(4, 24, 26, 0.35); font-size: 1rem; }
}
.im-sr-more {
  margin: -1.5rem 0 2rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
  color: var(--ca-text-2);
  background: var(--ca-surface-2);
  border: 1px dashed var(--ca-border-strong);
  border-radius: var(--ca-radius-lg);
}

/* Track page: the version after the title, and the credits list (ROADMAP M9). */
.im-track-version {
  font-weight: 400;
  color: var(--ca-text-2);
}
.im-credits {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: 0.35rem;
  font-size: 0.9rem;
}
.im-credits dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   D64: the brand is one teal on ink or paper. The blurred orbs and auras that
   floated behind the hero, the pricing page, the artist page, the browse
   pages and the big CTA are switched off here rather than deleted, so a
   page that still renders them shows nothing.
   ========================================================================== */
.im-hero-orb,
.im-bg-orb-1, .im-bg-orb-2, .im-bg-orb-3, .im-bg-orb-4,
.im-ap-orb,
.im-pricing-hero-orb,
.im-browse-hero-aura { display: none; }

/* The payout receipt on the home page (D63): the promise drawn as a thing. Paper in both
   themes, tabular figures, the split as a two-segment bar. */
.im-receipt {
  background: #f6f8fa; color: #0f1117;
  border-radius: var(--ca-radius-lg);
  padding: 1.1rem 1.2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  display: grid; gap: 0.55rem;
  max-width: 24rem; margin-inline: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.im-receipt-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-family: var(--im-font-body, Inter, sans-serif); font-weight: 600; font-size: 0.95rem; }
.im-receipt-head small { font-family: inherit; font-weight: 400; font-size: 0.7rem; color: #66707f; }
.im-receipt-row { display: flex; justify-content: space-between; gap: 1rem; }
.im-receipt-total { border-top: 1px dashed #c6ccd6; padding-top: 0.55rem; }
.im-receipt-row b { color: #1a7f4b; font-weight: 500; }
.im-receipt-bar { display: flex; gap: 3px; height: 8px; border-radius: 4px; overflow: hidden; }
.im-receipt-bar i { display: block; height: 100%; background: #00ADB5; }
.im-receipt-bar i:last-child { background: #0f1117; }
.im-receipt-foot { font-size: 0.7rem; color: #66707f; }