/* Default: Dark theme */
:root {
  /* M3 Primary Color — Lavender */
  --accent:           #d0bcff;
  --accent-h:         #b89af7;
  --accent-2:         #ccc2dc;
  --accent-on:        #381e72;
  --accent-container: #4f378b;
  --accent-on-cont:   #eaddff;
  --accent-glow:      rgba(208,188,255,0.30);
  --accent-lt:        rgba(208,188,255,0.14);
  --accent-strip:     rgba(208,188,255,0.55);

  /* M3 Surfaces (Dark) */
  --bg:           #141218;
  --bg-dim:       #0f0d13;
  --bg-card:      #1d1b20;
  --bg-card-hi:   #211f26;
  --bg-sidebar:   #1c1b1f;
  --bg-header:    #1c1b1f;
  --bg-hover:     #2b2930;
  --bg-elevated:  #36343b;

  /* M3 Typography */
  --text:       #e6e1e5;
  --text-muted: #938f99;
  --text-dim:   #cac4d0;

  /* M3 Outlines */
  --border:      rgba(147,143,153,0.20);
  --border-glow: rgba(208,188,255,0.35);

  /* Elevation Shadows */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.40), 0 1px 4px rgba(0,0,0,0.20);
  --shadow-md:   0 2px 4px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.20);
  --shadow-lg:   0 4px 8px rgba(0,0,0,0.35), 0 8px 28px rgba(0,0,0,0.30);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.20);

  /* M3 Shape */
  --radius:      28px;
  --radius-sm:   16px;
  --radius-xs:   8px;
  --radius-pill: 99px;

  /* M3 Surface Containers (Elevation Tonal Offset) */
  --surface-container-low:    #1d1b20;
  --surface-container:        #211f26;
  --surface-container-high:   #2b2930;
  --surface-container-highest:#36343b;

  /* Layout Dimensions */
  --sb-width:    260px;
  --header-h:    64px;
  --bn-height:   72px; /* bottom nav height on mobile */

  /* M3 Motion Easing Curves */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decel:    cubic-bezier(0, 0, 0, 1);
  --ease-accel:    cubic-bezier(0.3, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.8,  0.64, 1);

  /* M3 Motion Durations */
  --dur-short1:  50ms;
  --dur-short2:  100ms;
  --dur-medium1: 200ms;
  --dur-medium2: 300ms;
  --dur-long1:   450ms;
  --dur-long2:   600ms;

  /* M3 State Layer Opacities */
  --state-hover:   0.08;
  --state-pressed: 0.12;
  --state-focused: 0.12;
  --state-dragged: 0.16;
}

/* Light Theme */
[data-theme="light"] {
  --accent:           #6750a4;
  --accent-h:         #4f378b;
  --accent-2:         #625b71;
  --accent-on:        #ffffff;
  --accent-container: #eaddff;
  --accent-on-cont:   #21005d;
  --accent-glow:      rgba(103,80,164,0.30);
  --accent-lt:        rgba(103,80,164,0.10);
  --accent-strip:     rgba(103,80,164,0.50);

  --bg:         #f4f4f5;
  --bg-dim:     #e8e8ea;
  --bg-card:    #ffffff;
  --bg-card-hi: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-header:  #ffffff;
  --bg-hover:   #ececee;
  --bg-elevated:#e2e2e5;

  --text:       #1c1b1f;
  --text-muted: #44404b;
  --text-dim:   #5c5870;

  --border:      rgba(73,69,79,0.18);
  --border-glow: rgba(103,80,164,0.30);

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 2px 6px rgba(0,0,0,0.10), 0 4px 14px rgba(0,0,0,0.08);
  --shadow-lg:   0 4px 10px rgba(0,0,0,0.10), 0 8px 28px rgba(0,0,0,0.10);
  --shadow-card: 0 1px 4px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.07);

  --surface-container-low:    #f4f4f5;
  --surface-container:        #eeeeef;
  --surface-container-high:   #e8e8ea;
  --surface-container-highest:#e2e2e5;
}

/* Auto theme — follows OS preference */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --accent:           #6750a4;
    --accent-h:         #4f378b;
    --accent-2:         #625b71;
    --accent-on:        #ffffff;
    --accent-container: #eaddff;
    --accent-on-cont:   #21005d;
    --accent-glow:      rgba(103,80,164,0.22);
    --accent-lt:        rgba(103,80,164,0.10);
    --bg:         #f4f4f5;
    --bg-dim:     #e8e8ea;
    --bg-card:    #ffffff;
    --bg-card-hi: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-header:  #ffffff;
    --bg-hover:   #ececee;
    --bg-elevated:#e2e2e5;
    --text:       #1c1b1f;
    --text-muted: #44404b;
    --text-dim:   #5c5870;
    --border:      rgba(73,69,79,0.18);
    --border-glow: rgba(103,80,164,0.30);
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:   0 2px 6px rgba(0,0,0,0.10), 0 4px 14px rgba(0,0,0,0.08);
    --shadow-lg:   0 4px 10px rgba(0,0,0,0.10), 0 8px 28px rgba(0,0,0,0.10);
    --shadow-card: 0 1px 4px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.07);
    /* Surface containers (M3 tonal elevation) */
    --surface-container-low:    #f4f4f5;
    --surface-container:        #eeeeef;
    --surface-container-high:   #e8e8ea;
    --surface-container-highest:#e2e2e5;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  transition: background var(--dur-medium2) var(--ease-standard),
              color     var(--dur-medium2) var(--ease-standard);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Nav links never underline */
.nav-lnk,
.nav-lnk:hover,
.bn-item,
.bn-item:hover { text-decoration: none !important; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
img { display: block; max-width: 100%; object-fit: cover; }
canvas { max-width: 100%; }
.hidden { display: none !important; }

/* Utility classes */
.w100 { width: 100%; } .w80 { width: 80%; } .w70 { width: 70%; }
.w60 { width: 60%; }  .w50 { width: 50%; } .w40 { width: 40%; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; }
.flex-bw { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@keyframes shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardIn {
  0%   { opacity: 0; transform: translateY(10px) scale(.97); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.008); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(74,222,128,.55); }
  60%  { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0   rgba(74,222,128,0); }
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .75; transform: scale(.93); }
}

/* Square → Round morph (M3 nav indicator / icon containers) */
@keyframes m3-morph-round {
  0%   { border-radius: 8px;              transform: scaleX(.55) scaleY(.75); opacity: 0; }
  45%  { border-radius: 16px;             transform: scaleX(1.04) scaleY(1.04); opacity: 1; }
  100% { border-radius: var(--radius-pill); transform: scaleX(1) scaleY(1); opacity: 1; }
}

/* Indicator container expanding (sidebar nav active bg) */
@keyframes m3-container-grow {
  0%   { transform: scaleX(.3) scaleY(.6); border-radius: 6px;               opacity: 0; }
  55%  { transform: scaleX(1.02) scaleY(1.03); border-radius: 16px;           opacity: 1; }
  100% { transform: scaleX(1) scaleY(1);   border-radius: var(--radius-pill); opacity: 1; }
}

/* Ripple ink effect */
@keyframes m3-ripple {
  0%   { transform: scale(0); opacity: .35; }
  70%  { transform: scale(2.8); opacity: .10; }
  100% { transform: scale(3);   opacity: 0; }
}

/* Logo icon morph on load */
@keyframes m3-logo-morph {
  0%   { border-radius: 8px;  transform: scale(.82) rotate(-4deg); opacity: 0; }
  55%  { border-radius: 20px; transform: scale(1.06) rotate(1deg); opacity: 1; }
  80%  { border-radius: 22px; transform: scale(.98) rotate(0deg); }
  100% { border-radius: 24px; transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Floating orbs (setup screen decoration) */
@keyframes orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(24px, -18px) scale(1.04); }
  66%       { transform: translate(-12px, 14px) scale(.97); }
}
@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(-20px, 16px) scale(1.06); }
  70%       { transform: translate(14px, -10px) scale(.96); }
}
@keyframes orb-drift-3 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(10px, -14px) scale(1.05); }
}

/* Modal entrance (sheet sliding up) */
@keyframes m3-sheet-up {
  from { transform: translateY(32px) scale(.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

/* Stat card accent strip grow-in */
@keyframes m3-strip-in {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* Spring-pop for chips/badges/tags */
@keyframes m3-spring-pop {
  0%   { transform: scale(.7);  opacity: 0; }
  55%  { transform: scale(1.08); opacity: 1; }
  80%  { transform: scale(.97); }
  100% { transform: scale(1); opacity: 1; }
}

/* Toast slide-in / slide-out */
@keyframes m3-toast-in {
  from { transform: translateX(-50%) translateY(24px) scale(.92); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0)    scale(1);   opacity: 1; }
}
@keyframes m3-toast-out {
  from { transform: translateX(-50%) translateY(0)  scale(1);   opacity: 1; }
  to   { transform: translateX(-50%) translateY(12px) scale(.92); opacity: 0; }
}

/* FAB / fetch pill bounce in */
@keyframes m3-fab-in {
  0%   { transform: scale(0) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.06) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

/* Progress bar fill */
@keyframes m3-prog-fill {
  from { width: 0%; }
  to   { width: var(--prog-target, 100%); }
}

/* Glow pulse for accent elements */
@keyframes m3-glow-pulse {
  0%, 100% { box-shadow: 0 0 0   4px var(--accent-glow); }
  50%       { box-shadow: 0 0 16px 6px var(--accent-glow); }
}

/* State layer reveal */
@keyframes m3-state-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes badgeUnlock {
  0%   { transform: scale(.8) rotate(-8deg); opacity: 0; }
  70%  { transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes badge-shine {
  0%   { left: -100%; }
  50%  { left: 150%; }
  100% { left: 150%; }
}
@keyframes fetchBarSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes fetchPillPop {
  from { transform: scale(.7) translateY(12px); opacity: 0; }
  to   { transform: scale(1)  translateY(0);    opacity: 1; }
}
@keyframes vt-slide-in-right {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes vt-slide-out-left {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-18px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* View Transitions API */
::view-transition-old(section-dashboard),
::view-transition-old(section-top-artists),
::view-transition-old(section-top-albums),
::view-transition-old(section-top-tracks),
::view-transition-old(section-charts),
::view-transition-old(section-vizplus),
::view-transition-old(section-badges),
::view-transition-old(section-obscurity),
::view-transition-old(section-wrapped),
::view-transition-old(section-advanced),
::view-transition-old(section-settings) {
  animation: vt-slide-out-left var(--dur-medium1) var(--ease-accel) both;
}
::view-transition-new(section-dashboard),
::view-transition-new(section-top-artists),
::view-transition-new(section-top-albums),
::view-transition-new(section-top-tracks),
::view-transition-new(section-charts),
::view-transition-new(section-vizplus),
::view-transition-new(section-badges),
::view-transition-new(section-obscurity),
::view-transition-new(section-wrapped),
::view-transition-new(section-advanced),
::view-transition-new(section-settings) {
  animation: vt-slide-in-right var(--dur-medium2) var(--ease-decel) both;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Bottom nav + header stay stable (no animation) during page transitions */
::view-transition-old(ls-bottom-nav), ::view-transition-new(ls-bottom-nav),
::view-transition-old(ls-app-hd),    ::view-transition-new(ls-app-hd) {
  animation: none;
  mix-blend-mode: normal;
}

.sk { position: relative; overflow: hidden; }
.sk-ln {
  height: 13px; border-radius: 6px;
  background: linear-gradient(
    105deg,
    var(--bg-card-hi) 30%,
    var(--bg-hover)   50%,
    var(--bg-card-hi) 70%
  );
  background-size: 800px 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

#setup-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; padding: 24px;
  background: var(--bg);
}

/* Decorative background orbs */
.setup-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.o1 { width: 500px; height: 500px; background: radial-gradient(circle, var(--accent-container), transparent 70%); top: -200px; right: -100px; opacity: .35; animation: orb-drift-1 14s ease-in-out infinite; }
.o2 { width: 400px; height: 400px; background: radial-gradient(circle, #332d41, transparent 70%); bottom: -150px; left: -100px; opacity: .40; animation: orb-drift-2 18s ease-in-out infinite; }
.o3 { width: 250px; height: 250px; background: radial-gradient(circle, #1e192b, transparent 70%); top: 40%; left: 40%; opacity: .50; animation: orb-drift-3 22s ease-in-out infinite; }

.setup-wrap { position: relative; z-index: 1; max-width: 500px; width: 100%; }

.setup-logo { text-align: center; margin-bottom: 32px; }
.logo-icon {
  width: 72px; height: 72px; border-radius: 24px;
  background: var(--accent-container);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; font-size: 28px; color: var(--accent-on-cont);
  box-shadow: var(--shadow-md);
  animation: m3-logo-morph var(--dur-long1) var(--ease-spring) both;
  /* Subtle continuous float */
  /* animation: m3-logo-morph .6s var(--ease-spring) both; */
}
.setup-logo h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; color: var(--text); }
.setup-logo p  { color: var(--text-muted); margin-top: 6px; font-size: .9rem; }

/* M3 Tonal Surface (replaces glassmorphism) */
.glass {
  background: var(--bg-card-hi);
  border: 1px solid var(--border);
}

.setup-card {
  background: var(--bg-card-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-lg);
}
.setup-card h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 24px; }

/* Form fields */
.field { margin-bottom: 18px; }
.field label {
  display: flex; align-items: center; gap: 6px;
  font-size: .85rem; font-weight: 500; color: var(--text-muted); margin-bottom: 8px;
}
.field label i { color: var(--accent); }
.label-link { margin-left: auto; font-size: .78rem; color: var(--accent); display: flex; align-items: center; gap: 4px; }
.field input {
  width: 100%; padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--bg-card);
  color: var(--text); font-family: inherit; font-size: .9rem;
  transition: border-color var(--dur-medium1) var(--ease-standard),
              box-shadow   var(--dur-medium1) var(--ease-standard);
  outline: none;
}
.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-lt);
}
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; }
.hint { font-size: .76rem; color: var(--text-muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.hint i { color: var(--accent); }

/* Checkbox */
.chk-label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: .875rem; color: var(--text-muted); margin-bottom: 20px; user-select: none;
}
.chk-label input { display: none; }
.chk-box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--border); background: transparent; flex-shrink: 0;
  transition: all .2s; position: relative;
}
.chk-label input:checked + .chk-box { background: var(--accent); border-color: var(--accent); }
.chk-label input:checked + .chk-box::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-on); font-size: 11px; font-weight: 700;
}

/* M3 Filled Button */
.btn-primary {
  width: 100%; padding: 14px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-on);
  font-size: .95rem; font-weight: 600;
  transition: background var(--dur-medium1) var(--ease-standard),
              box-shadow  var(--dur-medium1) var(--ease-standard),
              transform   var(--dur-short2)  var(--ease-spring),
              opacity     var(--dur-short2)  var(--ease-standard);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden; letter-spacing: .01em;
  isolation: isolate;
}
/* M3 State Layer */
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: white;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--dur-medium1) var(--ease-standard);
  pointer-events: none;
}
.btn-primary:hover::before  { opacity: var(--state-hover); }
.btn-primary:active::before { opacity: var(--state-pressed); }
.btn-primary:hover  { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-primary:disabled::before { display: none; }

/* Error block */
.err-block {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
  color: #f87171; font-size: .875rem; display: flex; align-items: flex-start; gap: 8px;
}
.err-block i { flex-shrink: 0; margin-top: 2px; }

/* Help accordion */
.help-acc { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.help-acc summary {
  cursor: pointer; font-size: .875rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px; list-style: none; user-select: none;
}
.help-acc summary::-webkit-details-marker { display: none; }
.help-acc summary i { color: var(--accent); }
.help-body { padding-top: 14px; }
.help-body ol { padding-left: 18px; }
.help-body ol li { font-size: .84rem; color: var(--text-muted); margin-bottom: 6px; line-height: 1.6; }
.help-note {
  margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--accent-lt); font-size: .8rem; color: var(--text-dim);
  display: flex; align-items: flex-start; gap: 8px;
}
.help-note i { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

#fetch-overlay {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9999; pointer-events: none;
}

/* Top Bar */
.fetch-bar {
  pointer-events: all;
  position: relative; display: flex; align-items: center; gap: 12px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-glow);
  padding: 10px 16px 10px calc(var(--sb-width) + 16px);
  box-shadow: 0 2px 16px rgba(0,0,0,.35);
  animation: fetchBarSlide .3s cubic-bezier(.4,0,.2,1) both;
}
/* No sidebar offset on mobile */
@media (max-width: 1024px) {
  .fetch-bar { padding-left: 16px; }
}

/* Progress strip at bottom of bar */
.fetch-bar-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--bg-hover); }
.fetch-prog-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width var(--dur-medium2) var(--ease-decel);
  border-radius: 0 2px 2px 0;
  position: relative; overflow: hidden;
}
.fetch-prog-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,.3) 50%, transparent 80%);
  animation: shimmer 1.6s ease-in-out infinite;
  background-size: 300px 100%;
}

/* Spinning icon */
.fetch-bar-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-lt); display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: .85rem;
}
.fetch-bar-icon i { animation: spin 2.5s linear infinite; }

/* Text block */
.fetch-bar-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fetch-bar-title { font-size: .82rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fetch-bar-msg   { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Right-side meta */
.fetch-bar-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fetch-pct-badge { font-size: .78rem; font-weight: 700; color: var(--accent); min-width: 36px; text-align: right; }
.fetch-tracks-lbl,
.fetch-sub-lbl   { font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 600px) {
  .fetch-tracks-lbl, .fetch-sub-lbl { display: none; }
}

/* Minimize button */
.fetch-min-btn {
  pointer-events: all; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-hover); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; border: 1px solid var(--border);
  transition: background .2s, color .2s, transform .2s;
}
.fetch-min-btn:hover { background: var(--accent-lt); color: var(--accent); transform: scale(1.1); }

/* Minimized Pill (hidden by default) */
.fetch-pill { display: none; }

#fetch-overlay.fetch-overlay--minimized .fetch-bar { display: none; }
#fetch-overlay.fetch-overlay--minimized {
  top: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
  left: auto; right: 16px; width: auto;
}
#fetch-overlay.fetch-overlay--minimized .fetch-pill {
  pointer-events: all; display: flex; align-items: center; gap: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border-glow);
  border-radius: var(--radius-pill); padding: 8px 14px 8px 10px;
  box-shadow: var(--shadow-lg); cursor: pointer;
  animation: m3-fab-in var(--dur-medium2) var(--ease-spring) both;
  transition: background var(--dur-medium1) var(--ease-standard),
              transform  var(--dur-medium1) var(--ease-spring),
              box-shadow var(--dur-medium1) var(--ease-standard);
}
#fetch-overlay.fetch-overlay--minimized .fetch-pill:hover {
  background: var(--bg-hover);
  transform: scale(1.04) translateY(-2px);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-glow);
}

.fetch-pill-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--bg-hover); border-top-color: var(--accent);
  animation: spin .8s linear infinite; flex-shrink: 0;
}
.fetch-pill-text { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.fetch-pill-pct  { font-size: .78rem; font-weight: 700; color: var(--accent); min-width: 30px; text-align: right; }

/* Light mode fetch */
[data-theme="light"] .fetch-bar,
[data-theme="light"] #fetch-overlay.fetch-overlay--minimized .fetch-pill {
  background: #ffffff;
  border-color: rgba(103,80,164,.25);
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
}
@media (prefers-color-scheme: light) {
  [data-theme="auto"] .fetch-bar,
  [data-theme="auto"] #fetch-overlay.fetch-overlay--minimized .fetch-pill {
    background: #ffffff;
    border-color: rgba(103,80,164,.25);
    box-shadow: 0 2px 12px rgba(0,0,0,.10);
  }
}

#app { display: flex; min-height: 100vh; position: relative; z-index: 1; background: var(--bg); }

/* Sidebar Overlay (backdrop) */
.sidebar-ov {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.50); z-index: 100;
}
.sidebar-ov.open { display: block; }

/* M3 Navigation Drawer (Sidebar) */
.sidebar {
  width: var(--sb-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 200; transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-md);
}
.sb-head {
  padding: 20px 20px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.sb-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; color: var(--text); }
.sb-logo i { color: var(--accent); font-size: 1.2rem; }
.sb-close-btn { display: none; color: var(--text-muted); padding: 6px; border-radius: var(--radius-xs); }
.sb-close-btn:hover { background: var(--bg-hover); color: var(--text); }

/* User profile block */
.sb-profile-wrap { position: relative; }
.sb-profile { padding: 16px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); width: 100%; text-align: left; background: none; cursor: pointer; transition: background var(--dur-short2) var(--ease-standard); }
.sb-profile:hover { background: var(--bg-hover); }
.sb-profile-chevron { margin-left: auto; font-size: .7rem; color: var(--text-muted); flex-shrink: 0; transition: transform var(--dur-medium1) var(--ease-standard); }
.sb-profile[aria-expanded="true"] .sb-profile-chevron { transform: rotate(90deg); }
.sb-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--accent); }
.sb-av img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 50%; }
.sb-info { display: flex; flex-direction: column; min-width: 0; }
.sb-info strong { font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.sb-info span { font-size: .75rem; color: var(--text-muted); }
.sb-country { font-size: .7rem !important; margin-top: 1px; }

/* Navigation links */
.sb-nav { flex: 1; padding: 8px 12px; overflow-y: auto; }
.nav-sep { height: 1px; background: var(--border); margin: 8px 16px; }
.nav-lnk {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-pill);
  color: var(--text-muted); font-size: .88rem; font-weight: 500;
  cursor: pointer; margin-bottom: 2px;
  position: relative; isolation: isolate;
  transition: color var(--dur-medium1) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
/* M3 State Layer behind content */
.nav-lnk::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--text);
  opacity: 0;
  transition: opacity var(--dur-medium1) var(--ease-standard);
  pointer-events: none;
}
/* M3 Active Indicator (the filled container) */
.nav-lnk::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-lt);
  opacity: 0;
  transform: scaleX(.3) scaleY(.5);
  transform-origin: center;
  transition: opacity var(--dur-medium1) var(--ease-standard),
              transform var(--dur-medium2) var(--ease-spring);
  pointer-events: none;
}
.nav-lnk:hover::before  { opacity: var(--state-hover); }
.nav-lnk:active::before { opacity: var(--state-pressed); }
.nav-lnk:hover  { color: var(--text); }
.nav-lnk.active {
  color: var(--accent); font-weight: 700;
}
/* Active indicator pill removed — colour change only */
.nav-lnk.active::after { opacity: 0; transform: scaleX(0) scaleY(0); }
/* Ensure icon and text render above the indicator layers */
.nav-lnk i, .nav-lnk span { position: relative; z-index: 1; }
.nav-lnk i { width: 18px; text-align: center; font-size: .9rem; }
.nav-lnk span:not(.nav-bdg) { flex: 1; }
.nav-bdg {
  font-size: .65rem; background: var(--accent-container);
  color: var(--accent-on-cont); padding: 2px 8px;
  border-radius: 99px; font-weight: 700; letter-spacing: .5px;
}
.nav-bdg--new {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: white; animation: pulse-badge 2s ease infinite;
}

/* Sidebar footer */
.sb-foot { padding: 16px 16px 24px; border-top: 1px solid var(--border); }
.theme-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: .82rem; color: var(--text-muted); }
.theme-btns { display: flex; gap: 4px; }
.th-btn {
  padding: 6px 12px; border-radius: var(--radius-xs); color: var(--text-muted);
  display: flex; align-items: center; gap: 6px; font-size: .8rem;
  transition: background var(--dur-medium1) var(--ease-standard),
              color      var(--dur-medium1) var(--ease-standard),
              transform  var(--dur-short2)  var(--ease-spring);
}
.th-btn:hover  { background: var(--bg-hover); color: var(--text); transform: scale(1.04); }
.th-btn.active { background: var(--accent-lt); color: var(--accent); }
/* ── Sidebar logout : masqué sur PC (disponible uniquement dans Paramètres) ── */
@media (min-width: 1025px) {
  .sb-foot { display: none; }
}

.btn-logout {
  width: 100%; padding: 10px 14px; border-radius: var(--radius-pill);
  display: flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: .85rem; font-weight: 500; transition: all .2s;
}
.btn-logout:hover { background: rgba(239,68,68,.10); color: #f87171; }

/* M3 Top App Bar (Header) */
.app-hd {
  height: var(--header-h); padding: 0 20px;
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-header); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
  view-transition-name: ls-app-hd;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  will-change: transform;
}
.burger-btn { color: var(--text-muted); padding: 8px; border-radius: var(--radius-xs); display: none; }
.burger-btn:hover { background: var(--bg-hover); color: var(--text); }
.hd-title   { font-size: 1.1rem; font-weight: 700; flex: 1; letter-spacing: -.01em; }
.hd-right   { display: flex; align-items: center; gap: 8px; }
.hd-mini-user { font-size: .82rem; color: var(--text-muted); font-weight: 500; }
.hd-mini-user img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--accent); }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-xs); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
  transition: background var(--dur-medium1) var(--ease-standard),
              color      var(--dur-medium1) var(--ease-standard),
              transform  var(--dur-medium1) var(--ease-spring);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); transform: scale(1.1); }
.icon-btn:active { transform: scale(.92); }

/* Main Content Wrapper */
.main-wrap { flex: 1; margin-left: var(--sb-width); display: flex; flex-direction: column; min-width: 0; }
.main-content {
  flex: 1; padding: 24px;
  overflow-x: hidden;
  min-height: 0;
}

.bottom-nav {
  display: none; /* hidden on desktop */
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--bn-height);
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 16px rgba(0,0,0,.22);
  view-transition-name: ls-bottom-nav;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bottom-nav::-webkit-scrollbar { display: none; }

.bottom-nav-inner {
  display: flex; align-items: stretch; height: 100%;
}
.bn-item {
  flex: 0 0 auto;
  min-width: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; padding: 8px 6px;
  color: var(--text-muted); font-size: .65rem; font-weight: 600;
  transition: color var(--dur-medium1) var(--ease-standard);
  position: relative;
  border: none; background: none; font-family: inherit;
  letter-spacing: .01em;
  /* Larger touch target */
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav.bn-fit {
  overflow-x: visible;
}
.bottom-nav.bn-fit .bottom-nav-inner {
  width: 100%;
}
.bottom-nav.bn-fit .bn-item {
  flex: 1;
  min-width: 0;
}
.bn-item i {
  font-size: 1.1rem;
  transition: transform var(--dur-medium2) var(--ease-spring);
}
.bn-item:hover { color: var(--text); }
.bn-item:hover i { transform: translateY(-2px) scale(1.08); }
.bn-item.active { color: var(--accent); }
.bn-item.active i {
  /* Pill background removed — accent colour only */
  background: none;
  transform: translateY(-2px) scale(1.12);
  animation: m3-morph-round var(--dur-medium2) var(--ease-spring) both;
}
/* Badge counter on bottom nav item */
.bn-badge {
  position: absolute; top: 6px;
  right: calc(50% - 20px);
  min-width: 16px; height: 16px; border-radius: 99px;
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: white; font-size: .58rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  animation: pulse-badge 2s ease infinite;
}

/* Mobile bottom nav — tighter on narrow screens */
@media (max-width: 480px) {
  .bn-item { font-size: .6rem; padding: 6px 4px; gap: 3px; min-width: 56px; }
  .bn-item i { font-size: 1rem; }
  .bn-item.active i { width: auto; height: auto; }
}

.app-sec { display: none; animation: vt-fade-in var(--dur-medium2) var(--ease-decel); }
.app-sec.active { display: block; animation: sectionIn var(--dur-medium2) var(--ease-decel) both; }
@keyframes sectionIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sec-hd { margin-bottom: 20px; }
.sec-hd h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; }
.sec-sub  { color: var(--text-muted); font-size: .88rem; margin-top: 4px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stat-grid .stat-card:nth-child(-n+6) {
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 22%, var(--border));
}
.stat-card {
  background: var(--surface-container-low, var(--bg-card-hi));
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring);
  cursor: default; position: relative; overflow: hidden;
  contain: layout style;
}
/* Colored accent strip on top — morphs in */
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--card-accent, var(--accent));
  border-radius: var(--radius) var(--radius) 0 0; opacity: .85;
  transform-origin: left center;
  animation: m3-strip-in var(--dur-medium2) var(--ease-decel) both;
}
/* Subtle tonal overlay on hover (M3 state layer) */
.stat-card::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent);
  opacity: 0;
  border-radius: inherit;
  transition: opacity var(--dur-medium1) var(--ease-standard);
  pointer-events: none;
}
.stat-card:hover {
  background: var(--surface-container-high, var(--bg-card-hi));
  border-color: var(--border-glow);
  box-shadow: 0 0 0 1px var(--border-glow), var(--shadow-md);
  transform: translateY(-3px);
}
.stat-card:hover::after { opacity: .03; }
.stat-card-icon  { font-size: 1.3rem; margin-bottom: 10px; }
.stat-card-value { font-size: 1.55rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 4px; }
.stat-card-label { font-size: .78rem; color: var(--text-muted); font-weight: 500; margin-bottom: 3px; }
.stat-card-sub   { font-size: .72rem; color: var(--text-muted); }

/* Listen time card — slightly smaller value for long strings */
#stat-card-listen-time { --card-accent: var(--accent); }
#stat-card-listen-time .stat-card-value { font-size: 1.3rem; }

/* Avg scrobbles per day */
#stat-card-avg-day { --card-accent: var(--accent-2); }

.btn-section-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--md-sys-color-primary, var(--accent)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-primary, var(--accent)) 28%, transparent);
  color: var(--md-sys-color-primary, var(--accent));
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background  var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring),
              box-shadow   var(--dur-medium1) var(--ease-standard);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-section-share:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary, var(--accent)) 22%, transparent);
  border-color: var(--md-sys-color-primary, var(--accent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--md-sys-color-primary, var(--accent)) 40%, transparent);
  transform: translateY(-2px) scale(1.03);
}
.btn-section-share:active { transform: translateY(0) scale(.97); }
.btn-section-share i { font-size: .82rem; }

.insights-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px; margin-bottom: 24px;
}
/* 2-column version used when Versus card is absent */
.insights-row--2col {
  grid-template-columns: repeat(2, 1fr);
}
.insight-card {
  background: var(--bg-card-hi); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  box-shadow: var(--shadow-card);
  transition: transform   var(--dur-medium1) var(--ease-spring),
              box-shadow  var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard);
}
.insight-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-glow);
}
.ic-hd {
  font-size: .82rem; font-weight: 700; color: var(--accent);
  display: flex; align-items: center; gap: 7px; margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Versus */
.vs-body { display: flex; flex-direction: column; gap: 10px; }
.vs-metric { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vs-label  { font-size: .78rem; color: var(--text-muted); flex-shrink: 0; }
.vs-values { display: flex; align-items: center; gap: 6px; }
.vs-curr   { font-size: 1rem; font-weight: 800; color: var(--text); }
.vs-arrow  { font-size: .85rem; font-weight: 700; display: flex; align-items: center; gap: 3px; }
.vs-arrow.up   { color: #4ade80; }
.vs-arrow.down { color: #f87171; }
.vs-arrow.flat { color: var(--text-muted); }
.vs-prev { font-size: .72rem; color: var(--text-muted); margin-left: auto; }

/* Mood Tags */
.mood-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mood-tag {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: .78rem; font-weight: 600;
  background: var(--accent-lt); color: var(--accent);
  border: 1px solid var(--border-glow);
  transition: transform var(--dur-medium1) var(--ease-spring),
              box-shadow var(--dur-medium1) var(--ease-standard);
  animation: m3-spring-pop var(--dur-medium2) var(--ease-spring) both;
}
.mood-tag:hover   { transform: scale(1.06) translateY(-1px); box-shadow: 0 2px 8px var(--accent-glow); }
.mood-tag.rank-1  { background: var(--accent-container); color: var(--accent-on-cont); font-size: .82rem; }
.mood-tag.rank-2  { font-size: .8rem; }

/* Streak */
.streak-body { display: flex; flex-direction: column; gap: 6px; }
.streak-nums { display: flex; align-items: center; gap: 16px; }
.streak-nums > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.streak-val  { font-size: 1.8rem; font-weight: 900; letter-spacing: -.04em; color: var(--text); line-height: 1; }
.streak-lbl  { font-size: .68rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.streak-sep  { width: 1px; height: 40px; background: var(--border); }
.streak-hint { font-size: .72rem; color: var(--text-muted); margin-top: 4px; }

.now-playing-bar {
  display: flex; align-items: center; gap: 14px;
  background: var(--accent-lt); border: 1px solid var(--border-glow);
  border-radius: var(--radius-sm); padding: 12px 16px;
  margin-bottom: 20px; position: relative; overflow: hidden;
  animation: fadeInUp var(--dur-medium2) var(--ease-decel) both;
  transition: box-shadow var(--dur-medium1) var(--ease-standard);
  will-change: opacity, transform;
}
.now-playing-bar:hover { box-shadow: 0 0 0 1px var(--border-glow), var(--shadow-md); }
.np-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: #4ade80; flex-shrink: 0;
  animation: pulse-ring 1.6s ease-in-out infinite;
}
.np-art {
  width: 38px; height: 38px; border-radius: var(--radius-xs);
  overflow: hidden; flex-shrink: 0; background: var(--bg-hover);
  transition: transform var(--dur-medium1) var(--ease-spring);
  will-change: transform;
}
.now-playing-bar:hover .np-art { transform: scale(1.06) rotate(-1deg); }
.np-art img { width: 100%; height: 100%; object-fit: cover; }
.np-info { position: relative; z-index: 1; min-width: 0; flex: 1; }
.np-live { font-size: .65rem; font-weight: 700; letter-spacing: .08em; color: #4ade80; }
.np-info strong { display: block; font-size: .92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-info span   { font-size: .8rem; color: var(--text-muted); }
.np-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.np-play-btn {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; text-decoration: none;
  transition: transform  var(--dur-medium1) var(--ease-spring),
              background var(--dur-medium1) var(--ease-standard),
              color       var(--dur-medium1) var(--ease-standard);
}
.np-play-btn:hover    { transform: scale(1.16) rotate(-3deg); text-decoration: none; }
.np-play-btn:active   { transform: scale(.92); }
.np-spotify           { background: rgba(29,185,84,.15); color: #1db954; }
.np-spotify:hover     { background: #1db954; color: white; }
.np-youtube           { background: rgba(255,0,0,.10); color: #ff0000; }
.np-youtube:hover     { background: #ff0000; color: white; }
.np-share             { background: rgba(208,188,255,.12); color: var(--accent); }
.np-share:hover       { background: var(--accent); color: var(--accent-on); }

.dash-charts  { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.charts-duo   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.chart-card {
  background: var(--surface-container-low, var(--bg-card-hi)); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-medium1) var(--ease-standard),
              box-shadow   var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring);
}
.chart-card.full { grid-column: 1 / -1; }
.chart-card:hover {
  border-color: var(--border-glow);
  box-shadow: 0 0 0 1px var(--border-glow), var(--shadow-md);
  transform: translateY(-2px);
}
/* Charts section stack with consistent gaps */
.charts-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cc-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; font-size: .85rem; font-weight: 600; color: var(--text-dim);
}
.cc-hd i   { color: var(--accent); }
.cc-hint   { font-size: .75rem; color: var(--text-muted); font-weight: 400; }

/* VizPlus generate button */
.btn-generate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid var(--border-glow);
  background: var(--accent-lt);
  color: var(--accent);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-medium1) var(--ease-standard),
              transform  var(--dur-medium1) var(--ease-spring);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-generate:hover   { background: var(--accent); color: var(--accent-on); transform: scale(1.04); }
.btn-generate:active  { transform: scale(.96); }
.btn-generate:disabled{ opacity: .5; pointer-events: none; }
.cc-btn {
  padding: 5px 14px; border-radius: var(--radius-pill);
  background: var(--accent-lt); color: var(--accent);
  border: 1px solid var(--border-glow); font-size: .78rem; font-weight: 600;
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  position: relative; overflow: hidden; isolation: isolate;
  transition: background var(--dur-medium1) var(--ease-standard),
              color      var(--dur-medium1) var(--ease-standard),
              transform  var(--dur-short2)  var(--ease-spring);
}
.cc-btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--accent); opacity: 0; border-radius: inherit;
  transition: opacity var(--dur-medium1) var(--ease-standard);
  pointer-events: none;
}
.cc-btn:hover { background: var(--accent); color: var(--accent-on); transform: translateY(-1px); }
.cc-btn:active { transform: scale(.96); }

/* Canvas heights */
.chart-card canvas { display: block; width: 100% !important; }
canvas#dash-monthly, canvas#dash-artists   { height: 220px !important; }
canvas#chart-monthly, canvas#chart-cumul   { height: 280px !important; }
canvas#chart-art-pie, canvas#chart-alb-pie { height: 260px !important; }
canvas#chart-hourly, canvas#chart-weekday  { height: 220px !important; }
canvas#w-mini { height: 60px !important; }

/* Chart placeholder (before data loads) */
.chart-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 52px 24px; color: var(--text-muted); text-align: center;
}
.chart-placeholder i { opacity: .3; color: var(--accent); }
.chart-placeholder p { font-size: .88rem; max-width: 320px; line-height: 1.6; }
.chart-wrap { position: relative; width: 100%; }

/* Progress bar (generic) */
.prog-wrap  { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.prog-bar   { flex: 1; height: 5px; border-radius: 99px; background: var(--bg-hover); overflow: hidden; }
.prog-fill  {
  height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width var(--dur-long1) var(--ease-decel);
  position: relative; overflow: hidden;
}
/* M3 shimmer on active fill */
.prog-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  animation: shimmer 2s ease-in-out infinite;
  background-size: 400px 100%;
}
.prog-wrap span { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }

.heatmap-grid   { min-height: 120px; position: relative; }
.heatmap-cells  { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; padding: 8px 0; }
.heatmap-cell {
  height: 40px; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 600; color: rgba(255,255,255,.9);
  cursor: default;
  transition: transform  var(--dur-medium1) var(--ease-spring),
              filter     var(--dur-medium1) var(--ease-standard);
  position: relative;
}
.heatmap-cell:hover {
  transform: scaleY(1.14) translateY(-2px);
  filter: brightness(1.12);
  z-index: 1;
}
.heatmap-cell .hm-hour { font-size: .58rem; opacity: .7; }
.heatmap-cell .hm-val  { font-size: .65rem; font-weight: 700; }
.heatmap-labels { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; margin-top: 4px; }
.heatmap-labels span { text-align: center; font-size: .6rem; color: var(--text-muted); }
.heatmap-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 32px; color: var(--text-muted); text-align: center; min-height: 120px;
}
.heatmap-empty-state i { font-size: 2rem; opacity: .4; }
.heatmap-empty-state p { font-size: .85rem; }

/* Small fetch button (inside chart cards) */
.btn-fetch-sm {
  padding: 8px 18px; border-radius: var(--radius-pill);
  background: var(--accent-lt); color: var(--accent);
  border: 1px solid var(--border-glow); font-size: .82rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background  var(--dur-medium1) var(--ease-standard),
              color        var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring),
              box-shadow   var(--dur-medium1) var(--ease-standard);
}
.btn-fetch-sm:hover  { background: var(--accent); color: var(--accent-on); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-fetch-sm:active { transform: translateY(0) scale(.97); }

/* Period pills (7d / 1m / 3m / 6m / 12m / All) */
.period-sel { display: flex; gap: 4px; flex-wrap: wrap; }
.prd {
  padding: 6px 12px; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 600;
  color: var(--text-muted); border: 1px solid transparent;
  position: relative; overflow: hidden; isolation: isolate;
  transition: background  var(--dur-medium1) var(--ease-standard),
              color        var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-short2)  var(--ease-spring);
}
.prd:hover  { background: var(--bg-hover); color: var(--text); transform: scale(1.04); }
.prd:active { transform: scale(.96); }
.prd.active {
  background: var(--accent-lt); color: var(--accent);
  border-color: var(--border-glow);
  animation: m3-spring-pop var(--dur-medium1) var(--ease-spring) both;
}

/* Year selector */
.yr-sel {
  padding: 6px 10px; font-size: .82rem; cursor: pointer; outline: none;
  background: var(--bg-hover); border: 1px solid var(--border);
  color: var(--text); font-family: inherit;
  border-radius: var(--radius-pill);
}
.yr-sel:focus { border-color: var(--accent); }

/* Unified section controls (Period + Layout Toggle) */
.section-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
}
.tracks-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* Layout toggle button group */
.layout-toggle {
  display: flex; border: 1.5px solid var(--border);
  border-radius: var(--radius-pill); overflow: hidden; flex-shrink: 0;
}
.layout-btn {
  width: 34px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: .82rem; background: transparent;
  transition: background  var(--dur-medium1) var(--ease-standard),
              color        var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-short2)  var(--ease-spring);
}
.layout-btn:not(:last-child) { border-right: 1px solid var(--border); }
.layout-btn:hover  { background: var(--bg-hover); color: var(--text); transform: scale(1.08); }
.layout-btn:active { transform: scale(.93); }
.layout-btn.active {
  background: var(--accent-lt); color: var(--accent);
}

/* Force layout toggles visible — always shown including mobile */
#artists-layout-toggle,
#albums-layout-toggle,
#tracks-layout-toggle {
  flex-shrink: 0;
  display: flex !important; /* override any hidden state */
}

/* Default grid */
.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

/* Layout: Grid (default) */
.music-grid.layout-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

/* Layout: List */
.music-grid.layout-list {
  display: flex; flex-direction: column; gap: 6px;
}
.music-grid.layout-list .music-card {
  display: flex; flex-direction: row; align-items: center;
  gap: 12px; border-radius: var(--radius-sm); padding: 10px 12px;
  overflow: visible;
}
.music-grid.layout-list .music-card-img   { width: 56px; min-width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-xs); aspect-ratio: 1; overflow: hidden; }
.music-grid.layout-list .music-card-body  { flex: 1; min-width: 0; padding: 0; }
.music-grid.layout-list .music-card-name  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.music-grid.layout-list .music-card:hover { transform: translateX(4px) scale(1); box-shadow: var(--shadow-sm); }

/* Layout: Compact */
.music-grid.layout-compact { display: flex; flex-direction: column; gap: 0; }
.music-grid.layout-compact .music-card {
  display: flex; flex-direction: row; align-items: center;
  gap: 12px; border-radius: 0; border-left: none; border-right: none;
  border-bottom-width: 0; border-top: 1px solid var(--border);
  background: transparent; box-shadow: none; padding: 8px 12px;
}
.music-grid.layout-compact .music-card:first-child { border-top: none; }
.music-grid.layout-compact .music-card:hover  { background: var(--bg-hover); transform: none; }
.music-grid.layout-compact .music-card-img    { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-xs); aspect-ratio: 1; }
.music-grid.layout-compact .music-card-body   { flex: 1; min-width: 0; padding: 0; }
.music-grid.layout-compact .music-card-name   { font-size: .84rem; }
.music-grid.layout-compact .music-card-artist,
.music-grid.layout-compact .music-card-plays  { font-size: .72rem; }
.music-grid.layout-compact .music-card-rank   { display: none; }

/* Music Card (base) */
.music-card {
  background: var(--bg-card-hi); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-card);
  animation: cardIn var(--dur-medium2) var(--ease-decel) both;
  transition: transform    var(--dur-medium1) var(--ease-spring),
              border-color var(--dur-medium1) var(--ease-standard);
  isolation: isolate;
  contain: layout style;
  -webkit-tap-highlight-color: transparent;
}
.music-card:hover {
  transform: translateY(-4px) scale(1.012);
  border-color: var(--border-glow);
}
.music-card:active { transform: translateY(-1px) scale(.98); }
.music-card-img { position: relative; overflow: hidden; background: var(--bg-hover); width: 100%; aspect-ratio: 1; }
.music-card-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform var(--dur-long1) var(--ease-standard);
}
.music-card:hover .music-card-img img { transform: scale(1.08); }

/* Gradient fallback cover */
.spotify-cover {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 8px; color: rgba(255,255,255,.9); text-align: center;
}
.spotify-cover .sc-letter { font-size: 2.2rem; font-weight: 900; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.spotify-cover .sc-name   { font-size: .62rem; font-weight: 600; letter-spacing: .04em; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90%; }

/* Rank badge */
.music-card-rank {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.65); color: white; font-size: .7rem; font-weight: 800;
  width: 24px; height: 24px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.15);
}
.music-card-body    { padding: 12px; }
.music-card-name    {
  font-size: .86rem; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px; line-height: 1.35;
}
.music-card-artist  { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.music-card-plays   { font-size: .74rem; color: var(--accent); font-weight: 600; }

/* Play overlay buttons on cards */
.music-card-actions {
  position: absolute; bottom: 8px; right: 8px;
  display: flex; gap: 5px; opacity: 0;
  transform: translateY(6px) scale(.9);
  transition: opacity   var(--dur-medium1) var(--ease-decel),
              transform var(--dur-medium1) var(--ease-spring);
}
.music-card:hover .music-card-actions { opacity: 1; transform: translateY(0) scale(1); }
.mc-play-btn {
  width: 28px; height: 28px; border-radius: 50%; font-size: .75rem;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.15);
  color: white;
  transition: transform  var(--dur-medium1) var(--ease-spring),
              background var(--dur-medium1) var(--ease-standard);
}
.mc-play-btn:hover { transform: scale(1.15); text-decoration: none; }
.mc-play-btn:active { transform: scale(.9); }
.mc-play-btn.sp:hover { background: #1db954; }
.mc-play-btn.yt:hover { background: #f00; }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.hero-card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--shadow-card); aspect-ratio: 1;
  border: none; background: var(--bg-hover);
  animation: cardIn var(--dur-medium2) var(--ease-decel) both;
  transition: transform   var(--dur-medium1) var(--ease-spring),
              box-shadow  var(--dur-medium1) var(--ease-standard);
}
.hero-grid.hero-grid--artists .hero-card { aspect-ratio: 3 / 4; }
.hero-card:hover { transform: translateY(-5px) scale(1.018); box-shadow: var(--shadow-lg); }
.hero-card:active { transform: translateY(-1px) scale(.99); }

.hero-card .hc-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; z-index: 1;
  transition: transform var(--dur-long1) var(--ease-standard);
  border-radius: inherit;
}
.hero-grid--artists .hero-card .hc-img { object-position: center top; }
.hero-card:hover .hc-img { transform: scale(1.09); }

.hero-card .hc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.88) 100%);
  border-radius: inherit; z-index: 2;
}
.hero-card .hc-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem; font-weight: 900; color: rgba(255,255,255,.9); z-index: 0;
}
.hero-card .hc-rank {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: rgba(0,0,0,.6); color: white; font-size: .7rem; font-weight: 800;
  width: 26px; height: 26px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.2);
}
.hero-card .hc-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 12px 12px 10px; z-index: 3;
  display: flex; flex-direction: column; gap: 2px;
}
.hero-card .hc-name {
  font-size: .88rem; font-weight: 800; color: white;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,.5); line-height: 1.3;
}
.hero-card .hc-sub {
  font-size: .72rem; color: rgba(255,255,255,.72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;
}
.hero-card .hc-plays { font-size: .68rem; color: rgba(255,255,255,.58); font-weight: 600; }
.hero-card .hc-actions {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: flex; gap: 5px; opacity: 0;
  transform: translateY(-6px) scale(.88);
  transition: opacity   var(--dur-medium1) var(--ease-decel),
              transform var(--dur-medium1) var(--ease-spring);
}
.hero-card:hover .hc-actions { opacity: 1; transform: translateY(0) scale(1); }

/* Tracks in grid view use hero card */
.tracks-list.layout-grid .hero-card { aspect-ratio: 1; }

/* Light mode hero card overlay (stronger contrast on light bg images) */
[data-theme="light"] .hero-card .hc-overlay,
[data-theme="light"] .artist-hero-card .artist-hero-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 15%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.90) 100%);
}

.tracks-list { display: flex; flex-direction: column; gap: 4px; }

/* Base track item */
.track-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--bg-card-hi); border: 1px solid var(--border);
  cursor: pointer;
  animation: cardIn var(--dur-medium2) var(--ease-decel) both;
  transition: background   var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring);
}
.track-item:hover {
  background: var(--bg-hover);
  border-color: var(--border-glow);
  transform: translateX(5px);
}
.track-item:active { transform: translateX(2px); }
.track-rank     { font-size: 1rem; min-width: 28px; text-align: center; flex-shrink: 0; font-weight: 700; color: var(--text-muted); }
.track-info     { flex: 1; min-width: 0; }
.track-name     { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-artist   { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-bar-wrap { width: 110px; flex-shrink: 0; height: 4px; border-radius: 99px; background: var(--bg-hover); overflow: hidden; }
.track-bar      { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s ease; }
.track-plays    { font-size: .8rem; font-weight: 700; color: var(--accent); min-width: 60px; text-align: right; flex-shrink: 0; }

/* Track cover artwork */
.tracks-list.layout-list .track-cover,
.tracks-list.layout-compact .track-cover {
  width: 44px; height: 44px; border-radius: var(--radius-xs); overflow: hidden;
  flex-shrink: 0; background: var(--bg-hover);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 900; color: var(--text-muted);
}
.tracks-list.layout-list .track-cover img,
.tracks-list.layout-compact .track-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tracks-list.layout-compact .track-cover { width: 32px; height: 32px; }
.tracks-list.layout-list .track-rank { min-width: 24px; flex-shrink: 0; }

/* Track play buttons (hover reveal) */
.track-play-btns {
  display: flex; gap: 4px; flex-shrink: 0; opacity: 0;
  transform: scale(.8);
  transition: opacity   var(--dur-medium1) var(--ease-decel),
              transform var(--dur-medium1) var(--ease-spring);
}
.track-item:hover .track-play-btns { opacity: 1; transform: scale(1); }
.track-play-btn {
  width: 26px; height: 26px; border-radius: 50%; font-size: .72rem;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; border: none;
  transition: transform  var(--dur-medium1) var(--ease-spring),
              background var(--dur-medium1) var(--ease-standard);
}
.track-play-btn:hover  { transform: scale(1.18); }
.track-play-btn:active { transform: scale(.9); }
.track-play-btn.sp { background: rgba(29,185,84,.15); color: #1db954; }
.track-play-btn.sp:hover { background: #1db954; color: white; }
.track-play-btn.yt { background: rgba(255,0,0,.10); color: #f00; }
.track-play-btn.yt:hover { background: #f00; color: white; }

/* Layout: List (default) */
.tracks-list.layout-list { display: flex; flex-direction: column; gap: 4px; }

/* Layout: Grid */
.tracks-list.layout-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;
}
.tracks-list.layout-grid .track-item { flex-direction: column; align-items: flex-start; padding: 14px; gap: 8px; border-radius: var(--radius); transform: none; }
.tracks-list.layout-grid .track-item:hover { transform: translateY(-3px); }
.tracks-list.layout-grid .track-rank  { font-size: .72rem; color: var(--accent); font-weight: 800; min-width: auto; }
.tracks-list.layout-grid .track-info  { width: 100%; min-width: 0; }
.tracks-list.layout-grid .track-bar-wrap { width: 100%; }
.tracks-list.layout-grid .track-plays { min-width: auto; text-align: left; font-size: .78rem; }
.tracks-list.layout-grid .track-cover { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-hover); display: block; }
.tracks-list.layout-grid .track-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Layout: Compact */
.tracks-list.layout-compact { display: flex; flex-direction: column; gap: 0; }
.tracks-list.layout-compact .track-item { padding: 8px 14px; border-radius: 0; border-bottom-width: 0; border-left: none; border-right: none; border-top: 1px solid var(--border); background: transparent; }
.tracks-list.layout-compact .track-item:first-child { border-top: none; }
.tracks-list.layout-compact .track-item:hover  { background: var(--bg-hover); transform: none; }
.tracks-list.layout-compact .track-name        { font-size: .84rem; }
.tracks-list.layout-compact .track-bar-wrap    { display: none; }

/* Light mode track cover fallback */
[data-theme="light"] .tracks-list.layout-list .track-cover,
[data-theme="light"] .tracks-list.layout-compact .track-cover { background: #e8e0f0; color: var(--text-muted); }

/* Infinite scroll */
.scroll-sentinel { height: 1px; width: 100%; pointer-events: none; }
.pagination-loader { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: var(--text-muted); font-size: .88rem; }

.w-loader     { text-align: center; padding: 48px 24px; color: var(--text-muted); }
.w-loader p   { margin-top: 14px; font-size: .9rem; }
.w-loader-sub { font-size: .82rem; margin-top: 8px; }
.spinner-lg { width: 40px; height: 40px; border-radius: 50%; margin: 0 auto; border: 3px solid var(--bg-hover); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.spinner-sm { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bg-hover); border-top-color: var(--accent); animation: spin .7s linear infinite; display: inline-block; flex-shrink: 0; }

/* Wrapped card */
.w-card {
  border-radius: 24px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, #1a0b4b 0%, #2d0e6b 30%, #1e1060 60%, #0f0030 100%);
  box-shadow: var(--shadow-lg); margin-bottom: 20px; min-height: 360px;
}
.w-decos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.w-d { position: absolute; border-radius: 50%; }
.d1  { width: 350px; height: 350px; background: radial-gradient(circle, rgba(208,188,255,.3), transparent 70%); top: -100px; right: -80px; }
.d2  { width: 250px; height: 250px; background: radial-gradient(circle, rgba(139,92,246,.2), transparent 70%); bottom: -80px; left: -60px; }
.d3  { width: 150px; height: 150px; background: radial-gradient(circle, rgba(236,72,153,.15), transparent 70%); top: 40%; left: 30%; }

.w-inner    { padding: 32px; position: relative; z-index: 1; }
.w-top-row  { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.w-yr-badge {
  font-size: 2.2rem; font-weight: 900; letter-spacing: -.04em; flex-shrink: 0;
  background: linear-gradient(135deg, #fff, rgba(255,255,255,.7));
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.w-title h2 { font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,.95); margin-bottom: 4px; }
.w-title p  { font-size: .82rem; color: rgba(255,255,255,.55); }
.w-nums     { display: flex; gap: 18px; margin-bottom: 28px; flex-wrap: wrap; }
.w-num strong { display: block; font-size: 1.35rem; font-weight: 900; color: white; letter-spacing: -.04em; }
.w-num span   { font-size: .73rem; color: rgba(255,255,255,.55); letter-spacing: .05em; text-transform: uppercase; }

/* Podium (display:table for html2canvas compatibility) */
.w-podium--table {
  display: table; width: 100%; table-layout: fixed;
  border-collapse: separate; border-spacing: 12px 0; margin-bottom: 24px;
}
.w-pod--cell { display: table-cell; vertical-align: top; text-align: center; width: 33.33%; }
.w-podium--table .w-pod-lbl  { display: block; margin-bottom: 10px; }
.w-podium--table .w-pod-img  { margin: 0 auto 10px; }
.w-podium--table .w-pod-name { display: block; }
@supports not (display: table) {
  .w-podium--table { display: flex; gap: 16px; }
  .w-pod--cell     { flex: 1; display: flex; flex-direction: column; align-items: center; }
}

.w-pod { flex: 1; min-width: 140px; text-align: center; }
.w-pod-lbl { font-size: .7rem; color: rgba(255,255,255,.5); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.w-pod-img {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; color: white;
  border: 2px solid rgba(255,255,255,.2); overflow: hidden;
}
.w-pod-img img  { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.w-pod-name { font-size: .82rem; font-weight: 700; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.w-pod-plays { font-size: .72rem; color: rgba(255,255,255,.5); }
.w-mini-chart { height: 60px; }
.w-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* M3 Filled Button */
.btn-dl {
  padding: 10px 20px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-on);
  font-size: .86rem; font-weight: 600; display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform  var(--dur-medium1) var(--ease-spring),
              box-shadow var(--dur-medium1) var(--ease-standard),
              opacity    var(--dur-short2)  var(--ease-standard);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-dl::before {
  content: ''; position: absolute; inset: 0; background: white; opacity: 0;
  border-radius: inherit;
  transition: opacity var(--dur-medium1) var(--ease-standard);
  pointer-events: none;
}
.btn-dl:hover::before { opacity: var(--state-hover); }
.btn-dl:hover  { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-dl:active { transform: translateY(0) scale(.97); }

/* M3 Tonal Button */
.btn-story-btn {
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--accent-lt); color: var(--accent);
  border: 1px solid var(--border-glow); font-size: .86rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  transition: background  var(--dur-medium1) var(--ease-standard),
              color        var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring),
              box-shadow   var(--dur-medium1) var(--ease-standard);
}
.btn-story-btn:hover  { background: var(--accent); color: var(--accent-on); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-story-btn:active { transform: translateY(0) scale(.97); }

/* M3 Outlined Button */
.btn-lnk {
  padding: 10px 18px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border); color: var(--text-dim);
  font-size: .86rem; font-weight: 600; display: flex; align-items: center; gap: 8px;
  transition: border-color var(--dur-medium1) var(--ease-standard),
              color        var(--dur-medium1) var(--ease-standard),
              background   var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring);
}
.btn-lnk:hover  { border-color: var(--accent); color: var(--accent); background: var(--accent-lt); transform: translateY(-2px); }
.btn-lnk:active { transform: translateY(0) scale(.97); }

/* Wrapped link in Settings */
.btn-wrapped-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-pill);
  background: var(--accent-container); color: var(--accent-on-cont);
  font-size: .875rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; box-shadow: var(--shadow-sm);
  transition: background  var(--dur-medium1) var(--ease-standard),
              color        var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring),
              box-shadow   var(--dur-medium1) var(--ease-standard);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-wrapped-link i { font-size: .8rem; }
.btn-wrapped-link:hover {
  background: var(--accent); color: var(--accent-on); text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-lt);
}
.btn-wrapped-link:active { transform: translateY(0) scale(.97); }

/* Export mode (stabilizes elements before html2canvas capture) */
.export-mode, .export-mode * { animation: none !important; transition: none !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none; }
.export-mode .w-card { box-shadow: none; }

/* Story cards — always dark background regardless of theme */
.story-mini-card, .story-full-card {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; contain: layout size; color-scheme: dark;
}
.story-mini-card *, .story-full-card * { box-sizing: border-box; word-break: break-word; }
.story-mini-card .fas, .story-mini-card .fab, .story-full-card .fas, .story-full-card .fab {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands' !important;
  font-style: normal !important; font-weight: 900 !important; display: inline-block; line-height: 1;
}

/* Off-screen export wrappers */
#story-mini-wrap, #story-full-wrap { contain: strict; will-change: transform; }
.html2canvas-export .w-card { box-shadow: none !important; border: none !important; }
.html2canvas-export .w-decos .w-d { filter: none !important; }

/* Story Mini (9:16 — Instagram/TikTok) */
.story-mini-card {
  width: 360px; height: 640px;
  background: linear-gradient(160deg, #1a0b4b 0%, #2d0e6b 45%, #0f0030 100%);
  display: flex; flex-direction: column; color: white; position: relative; overflow: hidden;
}

/* Decorative story background */
.story-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.story-orb { position: absolute; border-radius: 50%; }
.story-orb--1 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(208,188,255,.28), transparent 70%); top: -80px; right: -60px; }
.story-orb--2 { width: 220px; height: 220px; background: radial-gradient(circle, rgba(139,92,246,.18), transparent 70%); bottom: -60px; left: -40px; }
.story-orb--3 { width: 160px; height: 160px; background: radial-gradient(circle, rgba(236,72,153,.12), transparent 70%); top: 45%; left: 25%; }

.story-header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 28px 28px 0; }
.story-logo   { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.story-logo i { font-size: .9rem; }
.story-year   { font-size: 1.6rem; font-weight: 900; letter-spacing: -.04em; opacity: .9; }

.story-content { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 28px; gap: 14px; }
.story-username { font-size: .78rem; opacity: .55; font-weight: 600; letter-spacing: .04em; margin: 0; }
.story-headline { font-size: 1.6rem; font-weight: 900; letter-spacing: -.04em; line-height: 1.15; margin: 0; }

.story-stats    { display: flex; gap: 20px; }
.story-stat     { display: flex; flex-direction: column; gap: 2px; }
.story-stat-val { font-size: 1.5rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.story-stat-lbl { font-size: .62rem; opacity: .55; text-transform: uppercase; letter-spacing: .06em; }

.story-top-artist {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.08); border-radius: 16px; padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.12);
}
.story-artist-img { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 900; flex-shrink: 0; border: 2px solid rgba(255,255,255,.2); }
.story-artist-img img { width: 100%; height: 100%; object-fit: cover; }
.story-artist-info  { flex: 1; min-width: 0; }
.story-artist-label { display: block; font-size: .65rem; opacity: .55; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.story-artist-label i { margin-right: 3px; }
.story-artist-name  { display: block; font-size: .95rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.story-top-track  { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; background: rgba(255,255,255,.05); border-radius: 12px; border: 1px solid rgba(255,255,255,.08); }
.story-track-label { font-size: .62rem; opacity: .5; text-transform: uppercase; letter-spacing: .06em; }
.story-track-label i { margin-right: 3px; }
.story-track-name  { font-size: .88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.story-footer { position: relative; z-index: 1; text-align: center; padding: 12px 28px 22px; font-size: .68rem; font-weight: 600; letter-spacing: .06em; opacity: .35; text-transform: uppercase; }

/* Story Full (680×860 — wide card) */
.story-full-card {
  width: 680px; height: 860px;
  background: linear-gradient(150deg, #1a0b4b 0%, #2d0e6b 35%, #1e1060 65%, #0f0030 100%);
  display: flex; flex-direction: column; color: white; position: relative; overflow: hidden; padding: 0;
}
.story-full-header   { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 36px 40px 0; }
.story-full-username { display: block; font-size: .8rem; opacity: .55; font-weight: 600; letter-spacing: .04em; }
.story-full-year     { display: block; font-size: 1.4rem; font-weight: 900; letter-spacing: -.04em; opacity: .9; }
.story-full-headline { position: relative; z-index: 1; font-size: 2rem; font-weight: 900; letter-spacing: -.05em; padding: 20px 40px 0; line-height: 1.1; }
.story-full-stats { position: relative; z-index: 1; display: flex; gap: 28px; padding: 20px 40px; }
.story-full-stat  { display: flex; flex-direction: column; gap: 3px; }
.story-full-val   { font-size: 2rem; font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.story-full-lbl   { font-size: .65rem; opacity: .5; text-transform: uppercase; letter-spacing: .06em; }

/* Story full podium (table layout for html2canvas) */
.story-full-podium--table { position: relative; z-index: 1; display: table; width: calc(100% - 80px); margin: 0 40px; table-layout: fixed; border-collapse: separate; border-spacing: 10px 0; flex: 1; }
.story-full-pod--cell { display: table-cell; vertical-align: top; text-align: center; width: 33.33%; flex: none; }
.story-full-podium--table .story-full-pod-img { margin: 0 auto 8px; }
.story-full-podium--table strong { display: block; }
@supports not (display: table) {
  .story-full-podium--table { display: flex; gap: 16px; padding: 0 40px; }
  .story-full-pod--cell { flex: 1; display: flex; flex-direction: column; align-items: center; }
}

.story-full-pod { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.story-full-pod-img { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 900; border: 2px solid rgba(255,255,255,.18); flex-shrink: 0; }
.story-full-pod-img img { width: 100%; height: 100%; object-fit: cover; }
.story-full-pod-lbl { font-size: .62rem; opacity: .5; text-transform: uppercase; letter-spacing: .06em; }
.story-full-pod-lbl i { margin-right: 3px; }
.story-full-pod strong { font-size: .88rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; display: block; }
.story-full-pod-plays { font-size: .7rem; opacity: .5; }
.story-full-chart { position: relative; z-index: 1; padding: 0 40px; height: 80px; margin-top: auto; }
.story-full-chart canvas { width: 100% !important; height: 80px !important; }
.story-full-footer { position: relative; z-index: 1; text-align: center; padding: 12px 40px 28px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; opacity: .3; text-transform: uppercase; }

.btn-fetch {
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--accent-lt); border: 1px solid var(--border-glow);
  color: var(--accent); font-size: .84rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  transition: background  var(--dur-medium1) var(--ease-standard),
              color        var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring),
              box-shadow   var(--dur-medium1) var(--ease-standard);
}
.btn-fetch:hover    { background: var(--accent); color: var(--accent-on); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-fetch:active   { transform: translateY(0) scale(.97); }
.btn-fetch:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.dash-sec-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}

.dash-visuals-hd {
  display: flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent); margin: 24px 0 12px;
  padding-left: 2px;
}
.dash-visuals-hd--sub { margin-top: 28px; color: var(--text-muted); }

.adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px; margin-bottom: 24px;
}
/* Compact chip variant used in dashboard header */
.adv-grid--chips {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px; margin-bottom: 24px;
}

.adv-card {
  background: var(--surface-container-low, var(--bg-card-hi));
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-card);
  transition: transform    var(--dur-medium1) var(--ease-spring),
              border-color var(--dur-medium1) var(--ease-standard),
              box-shadow   var(--dur-medium1) var(--ease-standard);
  position: relative; overflow: hidden;
}
.adv-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--chip-accent, var(--accent)); border-radius: var(--radius) var(--radius) 0 0;
  opacity: .8;
  transform-origin: left center;
  animation: m3-strip-in var(--dur-medium2) var(--ease-decel) both;
}
.adv-card:not(.sk):hover {
  border-color: var(--border-glow);
  box-shadow: 0 0 0 1px var(--border-glow), var(--shadow-md);
  transform: translateY(-3px);
}
.adv-card:not(.sk):active { transform: translateY(-1px); }
.adv-card-icon  { font-size: 1.8rem; margin-bottom: 12px; }
.adv-card-value { font-size: 1.75rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; margin-bottom: 6px; }
.adv-card-label { font-size: .8rem; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; }
.adv-card-sub   { font-size: .74rem; color: var(--text-muted); line-height: 1.5; }

/* Chip variant (used in dashboard adv-grid--chips) */
.adv-chip { padding: 14px 16px; }
.adv-chip-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 6px;
}
.adv-chip-icon  { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.adv-chip-value { font-size: 1.2rem; font-weight: 900; letter-spacing: -.035em; line-height: 1; }
.adv-chip-label { font-size: .72rem; font-weight: 600; color: var(--text-dim); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-chip-sub   { font-size: .66rem; color: var(--text-muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-chip-sk    { padding: 14px 16px; min-height: 72px; }

/* btn-fetch small variant */
.btn-fetch--sm {
  padding: 7px 14px; font-size: .78rem;
}

/* One-hit wonders list */
.ohw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ohw-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-hover); border: 1px solid var(--border); }
.ohw-num  { font-size: .7rem; color: var(--text-muted); min-width: 20px; font-weight: 700; }
.ohw-name { font-size: .84rem; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ohw-plays{ font-size: .72rem; color: var(--accent); font-weight: 600; flex-shrink: 0; }

/* OHW tooltip */
.info-tooltip-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: var(--text-muted); font-size: .78rem; transition: all .15s; vertical-align: middle; margin-left: 4px; flex-shrink: 0; }
.info-tooltip-btn:hover { color: var(--accent); background: var(--accent-lt); }
.ohw-tooltip { display: none; width: 100%; }
.ohw-tooltip--visible { display: block; margin-bottom: 12px; animation: fadeInUp .2s ease; }
.ohw-tooltip-inner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-lt); border: 1px solid var(--border-glow); position: relative; }
.ohw-tooltip-inner > i { color: var(--accent); font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.ohw-tooltip-inner > div { flex: 1; min-width: 0; }
.ohw-tooltip-inner strong { display: block; font-size: .86rem; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.ohw-tooltip-inner p { font-size: .8rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.ohw-tooltip-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: .75rem; transition: all .15s; }
.ohw-tooltip-close:hover { background: var(--bg-hover); color: var(--text); }

.vizplus-status {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--accent-lt); border: 1px solid var(--border-glow);
  margin-bottom: 16px; font-size: .88rem; color: var(--text-dim);
}
.vizplus-card { margin-bottom: 16px; }
.vizplus-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 52px 24px; color: var(--text-muted); text-align: center;
}
.vizplus-placeholder i { opacity: .3; }
.vizplus-placeholder p { font-size: .88rem; max-width: 280px; }

/* Radar chart */
.radar-wrap { position: relative; width: 100%; padding: 12px 0; }
.radar-wrap canvas { max-height: 360px; margin: 0 auto; display: block; }

/* Treemap */
.treemap-wrap { position: relative; width: 100%; padding: 12px 0; }
.treemap-wrap canvas { max-height: 420px; }

/* Sankey */
.sankey-wrap { width: 100%; overflow-x: auto; padding: 8px 0; }
.sankey-wrap svg { display: block; min-width: 600px; }
.sankey-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 0 4px; }
.sankey-legend-item { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--text-muted); }
.sankey-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Tag legend (Radar genres) */
.tag-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.tag-legend-item { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--text-muted); padding: 3px 10px; border-radius: var(--radius-pill); background: var(--bg-hover); border: 1px solid var(--border); cursor: pointer; transition: all .15s; }
.tag-legend-item:hover { border-color: var(--border-glow); color: var(--text); }
.tag-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Sunburst D3 */
.sunburst-wrap { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.sunburst-wrap svg { display: block; max-width: 560px; width: 100%; margin: 0 auto; cursor: pointer; }
.sunburst-breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; font-size: .82rem; color: var(--text-muted); min-height: 24px; }
.sunburst-breadcrumb .sb-crumb { color: var(--accent); font-weight: 600; cursor: pointer; transition: color .15s; }
.sunburst-breadcrumb .sb-crumb:hover { color: var(--accent-h); }
.sunburst-breadcrumb .sb-sep { opacity: .4; font-size: .7rem; }
.sunburst-center-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); text-align: center; pointer-events: none; max-width: 100px; }
.sb-center-name { display: block; font-size: .8rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.sb-center-pct  { display: block; font-size: 1.2rem; font-weight: 900; color: var(--accent); letter-spacing: -.03em; margin-top: 2px; }

/* Musical Profile — tag line chart */
.chart-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 52px 24px; color: var(--text-muted); text-align: center; }
.chart-placeholder i { opacity: .3; color: var(--accent); }
.chart-placeholder p { font-size: .88rem; max-width: 320px; line-height: 1.6; }

/* Score card */
.badge-score-card {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(135deg, var(--accent-container), var(--bg-card-hi));
  border: 1px solid var(--border-glow); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 24px; flex-wrap: wrap; box-shadow: var(--shadow-md);
}
.bsc-left  { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; }
.bsc-level { font-size: 2.4rem; font-weight: 900; line-height: 1; color: var(--accent-on-cont); background: var(--accent); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px var(--accent-glow); }
.bsc-title { font-size: .72rem; font-weight: 700; color: var(--text-muted); text-align: center; max-width: 80px; }
.bsc-right { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 8px; }
.bsc-xp-row { display: flex; align-items: center; gap: 10px; }
.bsc-xp-lbl { font-size: .72rem; font-weight: 700; color: var(--text-muted); width: 22px; }
.bsc-xp-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--bg-hover); overflow: hidden; }
.bsc-xp-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1s cubic-bezier(.4,0,.2,1); }
.bsc-xp-val { font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
.bsc-stats-row { font-size: .78rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.bsc-sep { opacity: .4; }

/* Empty state */
.badges-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 64px 24px; color: var(--text-muted); text-align: center; }
.badges-empty i { opacity: .25; }
.badges-empty p { font-size: .9rem; }

/* Badge category */
.badges-container { display: flex; flex-direction: column; gap: 28px; }
.badge-cat-title  { font-size: .95rem; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; color: var(--text-dim); }
.badge-cat-title i { color: var(--accent); }
.badge-cat-desc { font-size: .78rem; color: var(--text-muted); margin-bottom: 14px; }

/* Badge grid */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }

/* Badge card */
.badge-card {
  background: var(--bg-card-hi); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 12px; text-align: center;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform    var(--dur-medium1) var(--ease-spring),
              border-color var(--dur-medium1) var(--ease-standard),
              box-shadow   var(--dur-medium1) var(--ease-standard);
}
.badge-card.unlocked {
  border-color: var(--accent); background: var(--accent-lt);
  animation: badgeUnlock var(--dur-long1) var(--ease-spring) both;
}
.badge-card.locked   { opacity: .45; filter: grayscale(.7); }
.badge-card:hover    {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--border-glow);
}
.badge-card:active   { transform: translateY(0) scale(.98); }
.badge-card.unlocked:hover { border-color: var(--accent-h); }

/* Shimmer on unlocked badges */
.badge-card.unlocked::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: badge-shine 2.5s ease infinite;
}
.badge-card-icon     { font-size: 2rem; line-height: 1; margin-bottom: 6px; }
.badge-card-name     { font-size: .74rem; font-weight: 700; color: var(--text); margin-bottom: 4px; line-height: 1.3; }
.badge-card-tier     { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; display: inline-block; }
.badge-card-progress { font-size: .62rem; color: var(--text-muted); margin-top: 5px; }

/* Tier colors */
.tier-bronze  { background: rgba(205,127,50,.2);  color: #cd7f32; border: 1px solid rgba(205,127,50,.3); }
.tier-argent  { background: rgba(192,192,192,.2); color: #c0c0c0; border: 1px solid rgba(192,192,192,.3); }
.tier-or      { background: rgba(255,215,0,.2);   color: #ffd700; border: 1px solid rgba(255,215,0,.3); }
.tier-diamant { background: rgba(185,242,255,.2); color: #7df9ff; border: 1px solid rgba(185,242,255,.3); }
.tier-elite   { background: rgba(208,188,255,.25); color: var(--accent); border: 1px solid var(--border-glow); }

/* Badge detail modal */
.badge-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.75); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.badge-modal-inner { max-width: 380px; width: 100%; background: var(--bg-elevated); border: 1px solid var(--border-glow); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-lg); position: relative; text-align: center; animation: fadeInUp .25s ease; }
.badge-modal-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; color: var(--text-muted); font-size: .8rem; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.badge-modal-close:hover { background: var(--bg-hover); color: var(--text); }
.bm-icon  { font-size: 3.5rem; margin-bottom: 12px; line-height: 1; }
.bm-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 6px; }
.bm-tier  { margin-bottom: 10px; }
.bm-desc  { font-size: .86rem; color: var(--text-muted); margin-bottom: 18px; line-height: 1.6; }
.bm-progress-wrap { margin-bottom: 14px; }
.bm-progress-bar  { height: 6px; border-radius: 99px; background: var(--bg-hover); overflow: hidden; margin-bottom: 6px; }
.bm-progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1s ease; }
.bm-progress-meta { display: flex; justify-content: space-between; font-size: .74rem; color: var(--text-muted); }
.bm-tiers-row   { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.bm-tier-chip   { font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; letter-spacing: .04em; border: 1.5px solid var(--border); color: var(--text-muted); transition: all .2s; }
.bm-tier-chip.current  { border-color: var(--accent); color: var(--accent); background: var(--accent-lt); }
.bm-tier-chip.achieved { opacity: .6; }
.bm-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.bm-share-btn, .bm-export-btn { display: flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-pill); font-size: .84rem; font-weight: 600; transition: all .2s; }
.bm-share-btn { background: var(--accent); color: var(--accent-on); box-shadow: var(--shadow-sm); }
.bm-share-btn:hover { opacity: .9; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.bm-export-btn { background: var(--accent-lt); color: var(--accent); border: 1.5px solid var(--border-glow); }
.bm-export-btn:hover { background: var(--accent); color: var(--accent-on); }

/* Persistence notice */
.badge-persist-notice {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--accent-lt); border: 1px solid var(--border-glow);
  font-size: .8rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.55;
}
.badge-persist-notice i { color: var(--accent); font-size: .85rem; flex-shrink: 0; margin-top: 1px; }

.obscurity-hero {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: var(--bg-card-hi); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 28px; margin-bottom: 24px; box-shadow: var(--shadow-card);
}
.oh-gauge-wrap { position: relative; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center; width: 200px; height: 120px; }
.oh-gauge { overflow: visible; }
.oh-gauge-val { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); text-align: center; line-height: 1; }
.oh-gauge-val span  { font-size: 2rem; font-weight: 900; color: var(--text); }
.oh-gauge-val small { font-size: .7rem; color: var(--text-muted); display: block; margin-top: 2px; }
.oh-meta  { flex: 1; min-width: 200px; }
.oh-label { font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; color: var(--text); }
.oh-desc  { font-size: .84rem; color: var(--text-muted); margin-bottom: 14px; line-height: 1.6; }
.oh-spectrum { display: flex; align-items: center; gap: 10px; }
.oh-sp-left, .oh-sp-right { font-size: .76rem; color: var(--text-muted); flex-shrink: 0; }
.oh-sp-bar { flex: 1; height: 8px; border-radius: 99px; overflow: hidden; background: linear-gradient(90deg, #f97316, #6366f1, #06b6d4); position: relative; }
.oh-sp-fill { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background: white; border-radius: 50%; box-shadow: 0 0 8px rgba(255,255,255,.8), 0 0 0 2px rgba(255,255,255,.3); transition: left 1s cubic-bezier(.4,0,.2,1); left: 50%; }

/* Empty / loading state */
.obscurity-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; text-align: center; color: var(--text-muted); }
.obscurity-empty i { opacity: .2; }

/* Sort filters */
.obs-sort-row { display: flex; gap: 4px; }
.obs-filter { padding: 4px 12px; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 600; color: var(--text-muted); border: 1px solid transparent; transition: all .2s; }
.obs-filter:hover  { background: var(--bg-hover); color: var(--text); }
.obs-filter.active { background: var(--accent-lt); color: var(--accent); border-color: var(--border-glow); }

/* Artist list */
.obscurity-items { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.obscurity-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-radius: var(--radius-sm); background: var(--bg-card-hi); border: 1px solid var(--border);
  animation: cardIn var(--dur-medium2) var(--ease-decel) both;
  transition: transform    var(--dur-medium1) var(--ease-spring),
              border-color var(--dur-medium1) var(--ease-standard),
              box-shadow   var(--dur-medium1) var(--ease-standard);
}
.obscurity-item:hover {
  transform: translateX(4px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow-sm);
}
.obscurity-item:hover { border-color: var(--border-glow); transform: translateX(3px); }
.obs-rank { font-size: .82rem; font-weight: 700; color: var(--text-muted); min-width: 24px; }
.obs-art-img { width: 42px; height: 42px; border-radius: var(--radius-xs); overflow: hidden; flex-shrink: 0; background: var(--bg-hover); }
.obs-art-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.obs-art-letter { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 900; color: white; }
.obs-info  { flex: 1; min-width: 0; }
.obs-name  { font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs-plays { font-size: .74rem; color: var(--text-muted); }
.obs-score-wrap { text-align: right; flex-shrink: 0; }
.obs-score     { font-size: 1.1rem; font-weight: 900; color: var(--accent); }
.obs-score-lbl { font-size: .64rem; color: var(--text-muted); }
.obs-bar-wrap  { width: 80px; height: 4px; border-radius: 99px; background: var(--bg-hover); overflow: hidden; flex-shrink: 0; }
.obs-bar       { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #06b6d4, var(--accent)); transition: width .8s ease; }
.obs-type-badge { font-size: .6rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; letter-spacing: .04em; flex-shrink: 0; }

/* Type badge variants */
.obs-type-mainstream, .obs-type-populaire { background: rgba(249,115,22,.15); color: #f97316; }
.obs-type-obscur,     .obs-type-pepites   { background: rgba(99,102,241,.15);  color: #6366f1; }
.obs-type-culte,      .obs-type-indie     { background: rgba(6,182,212,.15);   color: #06b6d4; }

.artist-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.78); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
@media (min-width: 640px) { .artist-modal { align-items: center; padding: 24px; } }

.artist-modal-inner {
  position: relative; width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-lg);
  animation: m3-sheet-up var(--dur-medium2) var(--ease-spring) both;
  scroll-behavior: smooth;
}
@media (min-width: 640px) { .artist-modal-inner { border-radius: var(--radius); } }
.artist-modal-inner::-webkit-scrollbar { width: 4px; }
.artist-modal-inner::-webkit-scrollbar-track { background: transparent; }
.artist-modal-inner::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 99px; }

/* Close button — flottant sur le hero */
.artist-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.48); color: #fff;
  font-size: .85rem; display: flex; align-items: center; justify-content: center;
  z-index: 20; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  transition: background var(--dur-medium1) var(--ease-standard),
              transform  var(--dur-medium1) var(--ease-spring);
}
.artist-modal-close:hover { background: rgba(0,0,0,.72); transform: scale(1.1) rotate(90deg); }

.am-hero { position: relative; display: block; padding: 0; }

.am-photo-wrap {
  width: 100%; height: 310px; overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative; background: var(--bg-hover);
  flex-shrink: 0;
}
@media (min-width: 640px) { .am-photo-wrap { height: 360px; border-radius: var(--radius) var(--radius) 0 0; } }

/* Image dans le wrapper */
.am-photo-wrap img, .am-photo-wrap > div:first-child {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  display: block;
}

/* Gradient : image → couleur exacte du modal */
.am-photo-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0)          0%,
    rgba(0,0,0,.08)        30%,
    rgba(0,0,0,.45)        62%,
    var(--bg-elevated)    100%
  );
}

/* En thème clair, on renforce l'opacité du gradient */
[data-theme="light"] .am-photo-overlay,
:root:not([data-theme="dark"]):not([data-theme="auto"]) .am-photo-overlay {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,.1)   30%,
    rgba(255,255,255,.55)  62%,
    var(--bg-elevated)    100%
  );
}

/* Infos artiste : nom + chips + liens — se positionne dans la zone gradient */
.am-hero-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0 20px 20px; z-index: 2;
}

.am-artist-name {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 900; letter-spacing: -.04em; line-height: 1.1;
  color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.55);
  margin-bottom: 12px;
}

.am-stats-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.am-stat {
  display: flex; align-items: center; gap: 5px; font-size: .75rem;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.35); padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.am-stat i { color: rgba(255,255,255,.7); font-size: .72rem; }
.am-stat--accent {
  background: var(--accent); color: var(--accent-on);
  border-color: transparent; font-weight: 700;
}

.am-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.am-tag {
  font-size: .72rem; font-weight: 600; padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform  var(--dur-medium1) var(--ease-spring),
              box-shadow var(--dur-medium1) var(--ease-standard);
  animation: m3-spring-pop var(--dur-medium1) var(--ease-spring) both;
}
.am-tag:hover { transform: scale(1.08) translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.3); }

.am-ext-links { display: flex; flex-wrap: wrap; gap: 6px; }
.am-ext-btn {
  display: flex; align-items: center; gap: 5px; padding: 5px 12px;
  border-radius: var(--radius-pill); font-size: .76rem; font-weight: 600;
  border: 1.5px solid rgba(255,255,255,.22); text-decoration: none;
  color: rgba(255,255,255,.85); background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background  var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard),
              color        var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring);
}
.am-ext-btn:hover { text-decoration: none; transform: translateY(-2px) scale(1.04); color: #fff; }
.am-lastfm:hover  { background: rgba(197,33,42,.55); border-color: #e8454d; }
.am-spotify:hover { background: rgba(29,185,84,.45);  border-color: #1db954; }
.am-youtube:hover { background: rgba(255,0,0,.40);    border-color: #f55;   }

.am-body {
  padding: 4px 20px 28px; /* pas de border-top — continuité avec le hero */
  display: flex; flex-direction: column; gap: 20px;
}
.am-bio-section, .am-tracks-section, .am-albums-section { padding-top: 4px; }
.am-section-title {
  font-size: .82rem; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
}
.am-section-title i { color: var(--accent); }
.am-loading { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-muted); padding: 8px 0; }

/* Bio collapsible */
.am-bio { font-size: .88rem; color: var(--text-muted); line-height: 1.8; }
.am-bio--collapsed { max-height: 100px; overflow: hidden; position: relative; transition: max-height .45s cubic-bezier(.4,0,.2,1); }
.am-bio--collapsed:not(.expanded)::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 44px; background: linear-gradient(to bottom, transparent, var(--bg-elevated)); pointer-events: none; }
.am-bio--collapsed.expanded { max-height: 800px; }
.am-bio--collapsed.expanded::after, .am-bio.expanded::after { display: none; }
.am-bio.expanded { max-height: 800px; }
.am-bio-toggle { margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 5px; transition: all .15s; }
.am-bio-toggle:hover { opacity: .8; }
.am-bio-toggle i { transition: transform .3s; }
.am-bio-toggle.expanded i { transform: rotate(180deg); }

/* Top tracks in modal */
.am-top-tracks { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.am-top-tracks li {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: var(--radius-sm); background: var(--bg-hover); border: 1px solid var(--border);
  transition: border-color var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring),
              background   var(--dur-medium1) var(--ease-standard);
}
.am-top-tracks li:hover { border-color: var(--border-glow); transform: translateX(4px); background: var(--surface-container-high, var(--bg-elevated)); }
.am-track-rank  { font-size: .72rem; font-weight: 800; color: var(--accent); min-width: 18px; text-align: center; }
.am-track-name  { flex: 1; font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-track-plays { font-size: .76rem; color: var(--text-muted); font-weight: 600; flex-shrink: 0; }

/* Albums grid in modal */
.am-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.am-album-card {
  display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  transition: transform var(--dur-medium1) var(--ease-spring);
}
.am-album-card:hover { transform: translateY(-4px) scale(1.02); }
.am-album-card:active { transform: translateY(-1px) scale(.98); }
.am-album-img  { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-hover); }
.am-album-img img { width: 100%; height: 100%; object-fit: cover; }
.am-album-name { font-size: .74rem; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.compare-section { background: var(--bg-card-hi); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); margin-bottom: 20px; }
.compare-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.compare-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.compare-period-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.compare-period-lbl  { font-size: .68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.compare-vs-icon { display: flex; align-items: flex-end; padding-bottom: 8px; color: var(--accent); font-size: .9rem; flex-shrink: 0; }
.compare-sel {
  padding: 8px 12px; border-radius: var(--radius-sm); font-size: .82rem;
  background: var(--bg-hover); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; cursor: pointer; outline: none;
}
.compare-sel:focus { border-color: var(--accent); }
.compare-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.55; display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-lt); border: 1px solid var(--border-glow); }
.compare-desc i { color: var(--accent); flex-shrink: 0; margin-top: 1px; font-size: .8rem; }
.compare-hint-badge { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: .82rem; cursor: help; transition: color .15s; margin-left: 4px; }
.compare-hint-badge:hover { color: var(--accent); }
.btn-compare {
  padding: 9px 18px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-on);
  font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: transform  var(--dur-medium1) var(--ease-spring),
              box-shadow var(--dur-medium1) var(--ease-standard),
              opacity    var(--dur-short2)  var(--ease-standard);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-compare::before {
  content: ''; position: absolute; inset: 0; background: white; opacity: 0;
  border-radius: inherit;
  transition: opacity var(--dur-medium1) var(--ease-standard);
  pointer-events: none;
}
.btn-compare:hover::before { opacity: var(--state-hover); }
.btn-compare:hover  { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.btn-compare:active { transform: translateY(0) scale(.97); }
.compare-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.compare-metric {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border-radius: var(--radius-sm); background: var(--bg-hover); border: 1px solid var(--border);
  transition: border-color var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring),
              box-shadow   var(--dur-medium1) var(--ease-standard);
}
.compare-metric:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.cmp-icon  { width: 36px; height: 36px; border-radius: var(--radius-xs); background: var(--accent-lt); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: .9rem; flex-shrink: 0; }
.cmp-body  { flex: 1; min-width: 0; }
.cmp-label { display: block; font-size: .72rem; color: var(--text-muted); font-weight: 500; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.cmp-vals  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-a     { font-size: 1.1rem; font-weight: 800; color: var(--text); letter-spacing: -.03em; }
.cmp-b     { font-size: .84rem; color: var(--text-muted); font-weight: 600; }
.cmp-delta { font-size: .76rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; display: flex; align-items: center; gap: 3px; }
.cmp-up    { background: rgba(74,222,128,.12); color: #4ade80; }
.cmp-down  { background: rgba(248,113,113,.12); color: #f87171; }
.cmp-flat  { background: var(--bg-hover); color: var(--text-muted); }
.cmp-sub-label { font-size: .7rem; color: var(--text-muted); margin-top: 4px; display: block; font-style: italic; }
.cmp-vals--artists { flex-direction: column; gap: 6px; }
.cmp-period-val { display: flex; align-items: center; gap: 8px; }
.cmp-period-tag { font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap; flex-shrink: 0; }
.compare-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: var(--text-muted); font-size: .88rem; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }

.settings-card {
  background: var(--bg-card-hi); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
  transition: border-color var(--dur-medium1) var(--ease-standard),
              box-shadow   var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring);
}
.settings-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--border-glow);
}
.settings-card-hd { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg-hover); }
.settings-card-hd i  { color: var(--accent); font-size: 1rem; width: 18px; text-align: center; }
.settings-card-hd h3 { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.settings-card-body  { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }

.setting-row { display: flex; flex-direction: column; gap: 8px; }
.setting-lbl { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 500; color: var(--text-muted); }
.setting-lbl i { color: var(--accent); width: 14px; text-align: center; }
.setting-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.lang-btns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 6px;
  width: 100%;
}
.lang-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: var(--radius-xs);
  font-size: .83rem; font-weight: 500; color: var(--text-muted);
  border: 1.5px solid var(--border);
  background: var(--bg-hover);
  transition: background    var(--dur-medium1) var(--ease-standard),
              border-color  var(--dur-medium1) var(--ease-standard),
              color          var(--dur-medium1) var(--ease-standard),
              transform      var(--dur-medium1) var(--ease-spring);
  text-align: left; cursor: pointer;
  font-family: inherit;
}
.lang-btn:hover {
  border-color: var(--border-glow);
  color: var(--text);
  background: var(--bg-card);
  transform: translateY(-2px) scale(1.02);
}
.lang-btn:active { transform: translateY(0) scale(.97); }
.lang-btn.active {
  background: var(--accent-lt);
  color: var(--accent);
  border-color: var(--border-glow);
  font-weight: 700;
  animation: m3-spring-pop var(--dur-medium1) var(--ease-spring) both;
}
.lang-flag { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }

.setting-input {
  flex: 1; min-width: 160px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--bg-card);
  color: var(--text); font-family: inherit; font-size: .88rem;
  transition: border-color var(--dur-medium1) var(--ease-standard),
              box-shadow   var(--dur-medium1) var(--ease-standard);
  outline: none;
}
.setting-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-lt); }
.setting-actions { padding-top: 4px; border-top: 1px solid var(--border); }
.setting-hint    { font-size: .76rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.installed-hint  { font-size: .76rem; color: #4ade80; display: flex; align-items: center; gap: 5px; }
.installed-hint i { color: #4ade80; }

/* Highlighted setting row */
.setting-row--highlight { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-lt); border: 1px solid var(--border-glow); flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px; }
.setting-lbl-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.setting-lbl-wrap .setting-lbl { color: var(--text); font-weight: 600; }
.setting-lbl-wrap .hint { margin-top: 4px; line-height: 1.55; }
.hint--accent { font-size: .76rem; color: var(--text-muted); margin-top: 4px; display: flex; align-items: flex-start; gap: 5px; line-height: 1.55; }
.hint--accent i { color: var(--accent); flex-shrink: 0; margin-top: 1px; }

/* Accent selector dots */
.accent-row  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: .82rem; color: var(--text-muted); }
.accent-btns {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 4px 0;
}
.acc-dot {
  width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid transparent;
  transition: transform  var(--dur-medium1) var(--ease-spring),
              box-shadow var(--dur-medium1) var(--ease-standard);
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.acc-dot:hover  { transform: scale(1.2) translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.acc-dot:active { transform: scale(.9); }
.acc-dot.active {
  border-color: rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 3px 12px rgba(0,0,0,.4);
  transform: scale(1.1);
  animation: m3-spring-pop var(--dur-medium1) var(--ease-spring) both;
}
.acc-dot--dynamic { background: conic-gradient(#6750a4,#0061a4,#006b66,#006e1c,#e8c84a,#9c4e00,#ba1a1a,#9c0057,#6750a4) !important; display: flex; align-items: center; justify-content: center; }
.acc-dot--custom  {
  background: var(--custom-dot-bg, #888) !important;
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer;
}
.acc-dot--custom input[type=color] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  border: none; padding: 0;
}
.acc-dot--system {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ─── Startup page buttons ──────────────────────────────────────── */
.startup-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard),
              color var(--dur-medium1) var(--ease-standard),
              transform var(--dur-medium1) var(--ease-spring);
  white-space: nowrap;
}
.startup-btn:hover {
  background: var(--accent-lt);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.startup-btn:active { transform: translateY(0) scale(.97); }
.startup-btn.active {
  background: var(--accent-lt);
  border-color: var(--border-glow);
  color: var(--accent);
  font-weight: 700;
  animation: m3-spring-pop var(--dur-medium1) var(--ease-spring) both;
}

/* Toggle switch */
.toggle-switch { display: flex; align-items: center; cursor: pointer; }
.toggle-switch input { display: none; }
.toggle-track {
  width: 46px; height: 26px; border-radius: 99px;
  background: var(--border); border: 2px solid var(--border);
  position: relative; display: flex; align-items: center;
  transition: background var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard);
}
.toggle-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-muted); position: absolute; left: 2px;
  transition: transform var(--dur-medium1) var(--ease-spring),
              background var(--dur-medium1) var(--ease-standard);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.toggle-switch input:checked + .toggle-track {
  background: var(--accent-lt);
  border-color: var(--accent);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb {
  transform: translateX(20px);
  background: var(--accent);
}

/* Export row */
.export-row  { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.export-lbl  { font-size: .78rem; color: var(--text-muted); flex: 1; }
.export-btns { display: flex; gap: 6px; }
.btn-export-sm {
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--bg-hover); border: 1px solid var(--border);
  color: var(--text-muted); font-size: .76rem; font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  transition: background  var(--dur-medium1) var(--ease-standard),
              color        var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring);
}
.btn-export-sm:hover { background: var(--accent-lt); color: var(--accent); border-color: var(--border-glow); transform: scale(1.05); }
.btn-export-sm:active { transform: scale(.95); }

/* Danger button */
.btn-danger-sm {
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.2);
  color: #f87171; font-size: .82rem; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  transition: background  var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard),
              color        var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring);
}
.btn-danger-sm:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.45); color: #ef4444; transform: translateY(-2px); }
.btn-danger-sm:active { transform: translateY(0) scale(.97); }

/* Logout in settings */
.btn-logout--settings {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-pill);
  background: rgba(239,68,68,.08); border: 1.5px solid rgba(239,68,68,.2);
  color: #f87171; font-size: .88rem; font-weight: 600; width: auto;
  transition: background  var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard),
              color        var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring),
              box-shadow   var(--dur-medium1) var(--ease-standard);
}
.btn-logout--settings:hover {
  background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.45);
  color: #ef4444; transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239,68,68,.18);
}
.btn-logout--settings:active { transform: translateY(0) scale(.97); }

/* SW update button */
.btn-update-sw {
  padding: 9px 18px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent-container), var(--accent));
  color: white; font-size: .84rem; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
  box-shadow: var(--shadow-sm); white-space: nowrap;
  transition: transform  var(--dur-medium1) var(--ease-spring),
              box-shadow var(--dur-medium1) var(--ease-standard),
              opacity    var(--dur-short2)  var(--ease-standard);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-update-sw::before {
  content: ''; position: absolute; inset: 0; background: white; opacity: 0;
  border-radius: inherit;
  transition: opacity var(--dur-medium1) var(--ease-standard);
  pointer-events: none;
}
.btn-update-sw:hover::before { opacity: var(--state-hover); }
.btn-update-sw:hover    { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-update-sw:active   { transform: translateY(0) scale(.97); }
.btn-update-sw:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Notification Wrapped button */
/* Notification enable button (reuse btn-notif-wrapped class for backward compat) */
.btn-notif-wrapped,
#btn-notif-enable {
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--bg-hover); border: 1px solid var(--border);
  color: var(--text-muted); font-size: .82rem; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  transition: background  var(--dur-medium1) var(--ease-standard),
              color        var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard),
              transform    var(--dur-medium1) var(--ease-spring);
}
.btn-notif-wrapped:hover,
#btn-notif-enable:hover        { background: var(--accent-lt); color: var(--accent); border-color: var(--border-glow); transform: scale(1.04); }
.btn-notif-wrapped:active,
#btn-notif-enable:active       { transform: scale(.96); }
.btn-notif-wrapped.active,
#btn-notif-enable.active       { background: var(--accent-lt); color: var(--accent); border-color: var(--border-glow); }
.btn-notif-wrapped.disabled,
#btn-notif-enable.disabled     { opacity: .45; cursor: not-allowed; pointer-events: none; }
@keyframes swing { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-15deg)} 75%{transform:rotate(15deg)} }

/* Notification options grid */
.notif-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  transition: opacity .2s;
}
.notif-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--bg-card); border: 1.5px solid var(--border);
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-standard),
              background   var(--dur-short) var(--ease-standard),
              transform    var(--dur-short2) var(--ease-spring);
}
.notif-opt:hover { border-color: var(--border-glow); background: var(--bg-hover); transform: translateY(-1px); }
.notif-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-lt); }
.notif-opt input[type="checkbox"] { display: none; }
.notif-opt-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.notif-opt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notif-opt-body strong { font-size: .82rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.notif-opt-body small  { font-size: .72rem; color: var(--text-muted); line-height: 1.3; }
/* Checkmark indicator */
.notif-opt::before {
  content: '';
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0; margin-top: 2px;
  transition: all var(--dur-short) var(--ease-standard);
  background: transparent;
  display: none;
}
.setting-row--full { flex-direction: column; align-items: flex-start; gap: 8px; }
@media (max-width: 640px) {
  .notif-options-grid { grid-template-columns: 1fr; }
}

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
  padding: 12px 20px; border-radius: var(--radius-pill);
  display: flex; align-items: center; gap: 10px;
  font-size: .88rem; font-weight: 500;
  box-shadow: var(--shadow-lg); z-index: 9999;
  transition: transform var(--dur-medium2) var(--ease-spring),
              opacity   var(--dur-medium1) var(--ease-standard);
  opacity: 0; pointer-events: none;
}
.toast.show {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  animation: m3-toast-in var(--dur-medium2) var(--ease-spring) both;
}
.toast i { font-size: 1rem; }

.btn-install {
  margin-top: 16px; width: 100%; padding: 11px 16px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent-container), var(--accent));
  color: white; font-weight: 600; font-size: .88rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform  var(--dur-medium1) var(--ease-spring),
              box-shadow var(--dur-medium1) var(--ease-standard);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-install::before {
  content: ''; position: absolute; inset: 0; background: white; opacity: 0;
  border-radius: inherit;
  transition: opacity var(--dur-medium1) var(--ease-standard);
  pointer-events: none;
}
.btn-install:hover::before { opacity: var(--state-hover); }
.btn-install:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-install:active { transform: translateY(0) scale(.97); }

[data-theme="light"] .stat-card,
[data-theme="light"] .insight-card,
[data-theme="light"] .chart-card,
[data-theme="light"] .adv-card,
[data-theme="light"] .compare-section,
[data-theme="light"] .obscurity-hero,
[data-theme="light"] .settings-card {
  border-color: rgba(73,69,79,0.16);
  box-shadow: var(--shadow-card);
}

[data-theme="light"] .stat-card,
[data-theme="light"] .insight-card,
[data-theme="light"] .chart-card,
[data-theme="light"] .adv-card,
[data-theme="light"] .music-card,
[data-theme="light"] .track-item,
[data-theme="light"] .obscurity-item,
[data-theme="light"] .badge-card,
[data-theme="light"] .compare-section,
[data-theme="light"] .badge-score-card { background: var(--bg-card); }

/* ── Hover states: use bg-card-hi (not surface-container-high which is dark) ── */
[data-theme="light"] .stat-card:hover   { background: var(--bg-card-hi); border-color: var(--border-glow); }
[data-theme="light"] .adv-card:hover    { background: var(--bg-card-hi); border-color: var(--border-glow); }
[data-theme="light"] .insight-card:hover{ background: var(--bg-card-hi); }

[data-theme="light"] .settings-card-hd { background: #f3edf7; border-bottom-color: rgba(73,69,79,0.15); }

[data-theme="light"] .sec-sub,
[data-theme="light"] .stat-card-label,
[data-theme="light"] .stat-card-sub,
[data-theme="light"] .track-artist,
[data-theme="light"] .music-card-artist,
[data-theme="light"] .setting-lbl,
[data-theme="light"] .cc-hd {
  color: var(--text-muted);
}

[data-theme="light"] .nav-lnk.active { background: rgba(103,80,164,.12); color: var(--accent); }
[data-theme="light"] .nav-lnk:hover  { background: rgba(103,80,164,.07); }
[data-theme="light"] .prd.active      { background: rgba(103,80,164,.10); border-color: rgba(103,80,164,.3); color: var(--accent); }

[data-theme="light"] .ohw-item,
[data-theme="light"] .obscurity-item  { background: var(--bg-card); border-color: rgba(73,69,79,0.15); }

/* Toast always dark on light mode for contrast */
[data-theme="light"] .toast { background: #1c1b1f; color: #e6e1e5; border-color: rgba(255,255,255,.10); }

[data-theme="light"] .field input:focus,
[data-theme="light"] .setting-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(103,80,164,.14); }
[data-theme="light"] .now-playing-bar     { background: rgba(103,80,164,.07); border-color: rgba(103,80,164,.25); }
[data-theme="light"] .badge-card.unlocked { background: rgba(103,80,164,.08); border-color: var(--accent); }
[data-theme="light"] .spinner-sm          { border-color: rgba(73,69,79,.15); border-top-color: var(--accent); }
[data-theme="light"] .yr-sel,
[data-theme="light"] .compare-sel         { background: var(--bg-card); border-color: rgba(73,69,79,.22); color: var(--text); }
[data-theme="light"] .stat-card::before   { opacity: .5; }
[data-theme="light"] .badge-score-card    { background: linear-gradient(135deg, rgba(103,80,164,.08), var(--bg-card)); border-color: rgba(103,80,164,.25); }
[data-theme="light"] .badge-modal-inner   { background: var(--bg-card); border-color: rgba(103,80,164,.25); }
[data-theme="light"] .compare-desc,
[data-theme="light"] .ohw-tooltip-inner,
[data-theme="light"] .setting-row--highlight,
[data-theme="light"] .badge-persist-notice,
[data-theme="light"] .vizplus-status      { background: rgba(103,80,164,.06); border-color: rgba(103,80,164,.2); }
[data-theme="light"] .hero-card .hc-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0) 15%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.90) 100%); }
[data-theme="light"] .btn-logout--settings { color: #dc2626; background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.2); }
[data-theme="light"] .btn-logout--settings:hover { background: rgba(220,38,38,.14); color: #b91c1c; }
[data-theme="light"] .btn-update-sw { background: linear-gradient(135deg, rgba(103,80,164,.15), var(--accent)); color: white; }
[data-theme="light"] .btn-wrapped-link { background: var(--accent-container); color: var(--accent-on-cont); }
[data-theme="light"] .btn-wrapped-link:hover { background: var(--accent); color: #ffffff; }
[data-theme="light"] .tracks-list.layout-list .track-cover,
[data-theme="light"] .tracks-list.layout-compact .track-cover { background: #e8e0f0; color: var(--text-muted); }
[data-theme="light"] .hero-card { background: #e8e0f0; }

/* Auto light mode — full mirror of light overrides */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] .stat-card,
  [data-theme="auto"] .insight-card,
  [data-theme="auto"] .chart-card,
  [data-theme="auto"] .adv-card,
  [data-theme="auto"] .compare-section,
  [data-theme="auto"] .obscurity-hero,
  [data-theme="auto"] .settings-card { border-color: rgba(73,69,79,0.16); box-shadow: var(--shadow-card); }

  [data-theme="auto"] .stat-card,
  [data-theme="auto"] .insight-card,
  [data-theme="auto"] .chart-card,
  [data-theme="auto"] .adv-card,
  [data-theme="auto"] .music-card,
  [data-theme="auto"] .track-item,
  [data-theme="auto"] .obscurity-item,
  [data-theme="auto"] .badge-card,
  [data-theme="auto"] .compare-section { background: var(--bg-card); }

  [data-theme="auto"] .stat-card:hover    { background: var(--bg-card-hi); border-color: var(--border-glow); }
  [data-theme="auto"] .adv-card:hover     { background: var(--bg-card-hi); border-color: var(--border-glow); }
  [data-theme="auto"] .insight-card:hover { background: var(--bg-card-hi); }

  [data-theme="auto"] .nav-lnk.active { background: rgba(103,80,164,.12); color: var(--accent); }
  [data-theme="auto"] .nav-lnk:hover  { background: rgba(103,80,164,.07); }
  [data-theme="auto"] .prd.active      { background: rgba(103,80,164,.10); border-color: rgba(103,80,164,.3); color: var(--accent); }
  [data-theme="auto"] .compare-desc,
  [data-theme="auto"] .ohw-tooltip-inner,
  [data-theme="auto"] .setting-row--highlight,
  [data-theme="auto"] .badge-persist-notice,
  [data-theme="auto"] .vizplus-status { background: rgba(103,80,164,.06); border-color: rgba(103,80,164,.2); }
  [data-theme="auto"] .hero-card { background: #e8e0f0; }
  [data-theme="auto"] .btn-wrapped-link { background: var(--accent-container); color: var(--accent-on-cont); }
  [data-theme="auto"] .btn-wrapped-link:hover { background: var(--accent); color: #ffffff; }
  [data-theme="auto"] .fetch-bar,
  [data-theme="auto"] #fetch-overlay.fetch-overlay--minimized .fetch-pill { background: #ffffff; border-color: rgba(103,80,164,.25); box-shadow: 0 2px 12px rgba(0,0,0,.10); }
  [data-theme="auto"] .badge-score-card { background: linear-gradient(135deg, rgba(103,80,164,.08), var(--bg-card)); border-color: rgba(103,80,164,.25); }
  [data-theme="auto"] .settings-card-hd { background: #f3edf7; border-bottom-color: rgba(73,69,79,0.15); }
  [data-theme="auto"] .ohw-item,
  [data-theme="auto"] .obscurity-item { background: var(--bg-card); border-color: rgba(73,69,79,0.15); }
  [data-theme="auto"] .yr-sel,
  [data-theme="auto"] .compare-sel { background: var(--bg-card); border-color: rgba(73,69,79,.22); color: var(--text); }
  [data-theme="auto"] .stat-card::before { opacity: .5; }
  [data-theme="auto"] .tracks-list.layout-list .track-cover,
  [data-theme="auto"] .tracks-list.layout-compact .track-cover { background: #e8e0f0; color: var(--text-muted); }
}

@media (max-width: 1024px) {
  /* Sidebar hidden by default, slides in when .open */
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-ov.open { display: block; }
  .sb-close-btn { display: flex; }

  /* Main content stretches to full width */
  .main-wrap { margin-left: 0; }
  .burger-btn { display: flex; }

  /* Charts stack to single column */
  .dash-charts  { grid-template-columns: 1fr; gap: 20px; }
  .charts-duo   { grid-template-columns: 1fr; gap: 20px; }

  /* Bottom nav visible */
  .bottom-nav { display: flex; }

  /* Add padding below content so bottom nav doesn't overlap */
  .main-content { padding-bottom: calc(var(--bn-height) + 12px); }

  /* Fetch pill avoids bottom nav */
  #fetch-overlay.fetch-overlay--minimized {
    bottom: calc(var(--bn-height) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* Toast avoids bottom nav */
  .toast { bottom: calc(var(--bn-height) + 16px); }

  /* Music grids */
  .music-grid.layout-grid,
  .hero-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 768px) {
  .sidebar { max-width: 300px; }
  .hd-title { font-size: .95rem; }
  .sec-hd h2 { font-size: 1.2rem; }

  /* Canvas heights reduced */
  canvas#dash-monthly, canvas#dash-artists   { height: 180px !important; }
  canvas#chart-monthly, canvas#chart-cumul   { height: 220px !important; }
  canvas#chart-art-pie, canvas#chart-alb-pie { height: 220px !important; }
  canvas#chart-hourly, canvas#chart-weekday  { height: 180px !important; }

  .insights-row { grid-template-columns: 1fr; }
  .insights-row--2col { grid-template-columns: 1fr; }
  /* Chips stack to 2 columns on small screens */
  .adv-grid--chips { grid-template-columns: repeat(2, 1fr); }
  .dash-sec-hd { flex-direction: column; gap: 8px; }
  .heatmap-cells  { grid-template-columns: repeat(12, 1fr); }
  .heatmap-labels { grid-template-columns: repeat(12, 1fr); }

  /* Section controls full-width on mobile */
  .section-controls { width: 100%; justify-content: space-between; }
  .obscurity-hero { flex-direction: column; align-items: flex-start; padding: 18px; }
  .oh-gauge-wrap  { width: 100%; justify-content: center; }
  .compare-results { grid-template-columns: 1fr; }
  .am-albums { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .sunburst-wrap svg { max-width: 100%; }
  .music-grid.layout-grid,
  .hero-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .tracks-list.layout-list .track-cover { width: 38px; height: 38px; }
  .compare-period-wrap { min-width: 140px; }
  .ohw-tooltip-inner { flex-direction: column; gap: 8px; }
  .bm-actions { flex-direction: column; }
  .bm-share-btn, .bm-export-btn { justify-content: center; }
  .story-full-headline { font-size: 1.5rem; padding: 16px 28px 0; }
  .story-full-stats    { padding: 16px 28px; gap: 18px; }
  .story-full-podium   { padding: 0 28px; }
}

@media (max-width: 640px) {
  .main-content { padding: 12px; padding-bottom: calc(var(--bn-height) + 8px); }

  /* Stat grid — 2 columns */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .adv-grid  { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Music grids — 2 columns */
  .music-grid.layout-grid,
  .hero-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* Layout toggles: always show (OVERRIDE — never hide on mobile) */
  .layout-toggle         { display: flex !important; }
  /* Hide compact button on very small screens — too narrow */
  .layout-btn[data-layout="compact"] { display: none; }

  /* Track bar hidden on mobile (save space) */
  .track-bar-wrap { display: none; }

  /* Section controls row */
  .section-controls { flex-direction: row; gap: 8px; }
  .tracks-controls  { gap: 6px; }

  /* Typography */
  .stat-card-value { font-size: 1.3rem; }
  .stat-card { padding: 14px; }
  .period-sel { gap: 3px; }
  .prd { padding: 5px 8px; font-size: .72rem; }
  .sec-hd.flex-bw { gap: 10px; }

  /* Charts */
  canvas#chart-monthly, canvas#chart-cumul { height: 180px !important; }

  /* Toast */
  .toast { font-size: .82rem; padding: 10px 16px; }

  /* Wrapped */
  .w-nums { gap: 14px; }
  .w-num strong { font-size: 1.2rem; }
  .w-actions { flex-direction: column; }
  .btn-dl, .btn-story-btn, .btn-lnk { width: 100%; justify-content: center; }
  .flex-bw { flex-direction: column; }

  /* Badge grid tighter */
  .badge-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

  /* Obscurity */
  .obscurity-item { gap: 8px; padding: 10px 12px; flex-wrap: nowrap; }
  .obs-bar-wrap { display: none; }
  .obs-score-wrap { flex-shrink: 0; }
  .obs-type-badge { flex-shrink: 0; font-size: .58rem; padding: 2px 6px; white-space: nowrap; }
  .obs-info { min-width: 0; flex: 1; overflow: hidden; }
  .badge-score-card { padding: 14px; }
  .np-actions { display: none; }

  /* Compare */
  .compare-hd  { flex-direction: column; align-items: flex-start; }
  .compare-controls { gap: 6px; }
  .compare-sel { font-size: .75rem; padding: 6px 10px; }
  .compare-controls { flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
  .compare-period-wrap { width: 100%; }
  .compare-period-wrap .compare-sel { width: 100%; }
  .compare-vs-icon { align-self: center; padding-bottom: 0; transform: rotate(90deg); }
  .btn-compare { width: 100%; justify-content: center; }

  /* Settings */
  .setting-row--highlight { flex-direction: column; }
  .btn-update-sw { width: 100%; justify-content: center; }

  /* Artist modal — keep full-bleed hero on mobile */
  .am-photo-wrap { height: 260px; }
  .am-hero-info  { padding: 0 14px 16px; }
  .am-body       { padding: 4px 14px 24px; }
  .am-albums     { grid-template-columns: repeat(3, 1fr); }

  /* Podium on mobile */
  .w-podium--table { display: flex; flex-direction: row; gap: 8px; }
  .w-pod--cell { display: flex; flex-direction: column; align-items: center; flex: 1; }

  /* Story export */
  .story-mini-card, .story-full-card { font-size: 14px; }
}

body.nav-mode-bottom .sidebar { transform: translateX(-100%) !important; }
body.nav-mode-bottom .sidebar.open { transform: translateX(0) !important; }
body.nav-mode-bottom .main-wrap { margin-left: 0 !important; }
body.nav-mode-bottom .burger-btn { display: flex !important; }
body.nav-mode-bottom .bottom-nav { display: flex !important; }

/* Spectrum bar height fix on mobile */
@media (max-width: 768px) {
  .oh-sp-bar { height: 10px; }
}

/* Hide focus ring for mouse users, show for keyboard */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* Pill-shaped elements */
button.btn-primary:focus-visible,
button.prd:focus-visible,
button.nav-lnk:focus-visible,
button.bn-item:focus-visible,
.btn-compare:focus-visible,
.cc-btn:focus-visible { border-radius: var(--radius-pill); }

/* Suppress on elements that have their own visual state */
.icon-btn:focus-visible { background: var(--bg-hover); color: var(--text); }

/* Applied to lazy-loaded images via JS */
.img-fade {
  opacity: 0;
  transition: opacity var(--dur-medium2) var(--ease-decel);
}
.img-fade.img-loaded { opacity: 1; }

/* Artist hero img: already uses display:none toggle — keep compat */
.artist-hero-card .artist-hero-img.img-fade {
  display: block !important;
  opacity: 0;
}
.artist-hero-card .artist-hero-img.img-fade.img-loaded { opacity: 1; }

/* Stat grid cards appear in sequence */
.stat-grid .stat-card:nth-child(1)  { animation-delay: .00s; }
.stat-grid .stat-card:nth-child(2)  { animation-delay: .04s; }
.stat-grid .stat-card:nth-child(3)  { animation-delay: .08s; }
.stat-grid .stat-card:nth-child(4)  { animation-delay: .12s; }
.stat-grid .stat-card:nth-child(5)  { animation-delay: .16s; }
.stat-grid .stat-card:nth-child(6)  { animation-delay: .20s; }
.stat-grid .stat-card:nth-child(7)  { animation-delay: .24s; }
.stat-grid .stat-card:nth-child(8)  { animation-delay: .28s; }
.stat-grid .stat-card:nth-child(9)  { animation-delay: .32s; }
.stat-grid .stat-card:nth-child(10) { animation-delay: .36s; }
.stat-grid .stat-card:nth-child(11) { animation-delay: .40s; }
.stat-grid .stat-card:nth-child(12) { animation-delay: .44s; }
.stat-grid .stat-card { animation: cardIn var(--dur-medium2) var(--ease-spring) both; }

.period-sel {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  gap: 0;
  background: transparent;
}
.prd {
  flex: 1;
  padding: 6px 10px; border-radius: 0; font-size: .78rem; font-weight: 600;
  color: var(--text-muted); transition: background .2s, color .2s; border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  min-width: 36px;
}
.prd:last-child { border-right: none; }
.prd:hover  { background: var(--bg-hover); color: var(--text); }
.prd.active {
  background: var(--accent-lt); color: var(--accent); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--border-glow);
}

.obs-tag { font-size: .6rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; letter-spacing: .04em; flex-shrink: 0; }
.obs-tag-popular, .obs-type-populaire { background: rgba(249,115,22,.15); color: #f97316; border: 1px solid rgba(249,115,22,.25); }
.obs-tag-indie,   .obs-type-indie     { background: rgba(6,182,212,.15); color: #06b6d4;  border: 1px solid rgba(6,182,212,.25); }
.obs-tag-gem,     .obs-type-obscur, .obs-type-pepites { background: rgba(99,102,241,.15); color: #6366f1; border: 1px solid rgba(99,102,241,.25); }

/* Better obscurity-items entries */
.obscurity-items .obscurity-item { animation: cardIn var(--dur-medium2) var(--ease-spring) both; }
.obscurity-items .obscurity-item:nth-child(odd) { animation-delay: 0ms; }
.obscurity-items .obscurity-item:nth-child(even){ animation-delay: 40ms; }

.artist-hero-card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--shadow-card); aspect-ratio: 3 / 4;
  border: none; background: var(--bg-hover);
  animation: cardIn var(--dur-medium2) var(--ease-decel) both;
  transition: transform  var(--dur-medium1) var(--ease-spring),
              box-shadow var(--dur-medium1) var(--ease-standard);
}
.artist-hero-card:hover {
  transform: translateY(-5px) scale(1.018);
  box-shadow: var(--shadow-lg);
}
.artist-hero-card:active { transform: translateY(-1px) scale(.99); }

/* Image plein-cadre */
.artist-hero-card .artist-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform var(--dur-long1) var(--ease-standard);
  border-radius: inherit;
}
.artist-hero-card:hover .artist-hero-img { transform: scale(1.09); }

/* Fallback lettre colorée */
.artist-hero-card .artist-hero-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.2rem; font-weight: 900;
  color: rgba(255,255,255,.92); z-index: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* Dégradé superposé */
.artist-hero-card .artist-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,.30) 50%,
    rgba(0,0,0,.88) 100%
  );
  border-radius: inherit; z-index: 1;
}

/* Badge rang #1 #2 … */
.artist-hero-card .artist-hero-rank {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(0,0,0,.62); color: white;
  font-size: .7rem; font-weight: 800;
  width: 26px; height: 26px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.20);
}

/* Corps bas-de-carte */
.artist-hero-card .artist-hero-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 12px 10px; z-index: 2;
  display: flex; flex-direction: column; gap: 3px;
}
.artist-hero-card .artist-hero-name {
  font-size: .88rem; font-weight: 800; color: white;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgba(0,0,0,.55); line-height: 1.3;
}
.artist-hero-card .artist-hero-plays {
  font-size: .68rem; color: rgba(255,255,255,.62); font-weight: 600;
}

/* Boutons d'action (Spotify / YouTube / Share) — révélés au survol */
.artist-hero-card .artist-hero-actions {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; gap: 5px;
  opacity: 0; transform: translateY(-6px) scale(.88);
  transition: opacity   var(--dur-medium1) var(--ease-decel),
              transform var(--dur-medium1) var(--ease-spring);
}
.artist-hero-card:hover .artist-hero-actions {
  opacity: 1; transform: translateY(0) scale(1);
}

/* Light mode — dégradé plus prononcé sur fonds clairs */
[data-theme="light"] .artist-hero-card .artist-hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 15%,
    rgba(0,0,0,.48) 55%,
    rgba(0,0,0,.92) 100%
  );
}
[data-theme="light"] .artist-hero-card { background: #e8e0f0; }

/* Responsive: ratio conservé sur mobile */
@media (max-width: 640px) {
  .artist-hero-card { aspect-ratio: 3 / 4; }
}

canvas#chart-profile { height: 280px !important; }

.obs-art-img {
  width: 46px; height: 46px;
  border-radius: var(--radius-xs); overflow: hidden;
  flex-shrink: 0; background: var(--bg-hover);
  position: relative;
}
.obs-art-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: inherit; display: block;
}
.obs-art-letter {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 900; color: white;
  position: absolute; inset: 0;
  border-radius: inherit;
}

/* En-têtes de sections — espacement cohérent */
#s-top-artists .sec-hd,
#s-top-albums  .sec-hd,
#s-top-tracks  .sec-hd { margin-bottom: 16px; }

/* Grilles artistes/albums — gap uniforme */
#artists-grid.music-grid,
#albums-grid.music-grid  { gap: 12px; }

/* Liste titres — gap cohérent avec les grilles */
#tracks-list.tracks-list { gap: 4px; }

/* Sentinel & loader — espacement uniforme */
.scroll-sentinel    { height: 2px; }
.pagination-loader  { padding: 16px; }

.m3-ripple-host { position: relative; overflow: hidden; isolation: isolate; }
.m3-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .18;
  pointer-events: none;
  transform: scale(0);
  animation: m3-ripple var(--dur-long1) var(--ease-decel) forwards;
}

*:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
  transition: outline-offset var(--dur-short2) var(--ease-standard);
}
button.btn-primary:focus-visible,
button.prd:focus-visible,
button.nav-lnk:focus-visible,
button.bn-item:focus-visible,
.btn-compare:focus-visible,
.btn-fetch:focus-visible,
.btn-fetch-sm:focus-visible,
.cc-btn:focus-visible { border-radius: var(--radius-pill); }

.sidebar {
  transition: transform var(--dur-medium2) var(--ease-spring);
}

.sb-nav::-webkit-scrollbar { width: 3px; }
.sb-nav::-webkit-scrollbar-track { background: transparent; }
.sb-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 99px;
  transition: background var(--dur-medium1) var(--ease-standard);
}
.sb-nav::-webkit-scrollbar-thumb:hover { background: var(--accent-lt); }

.sk-ln {
  background: linear-gradient(
    105deg,
    var(--bg-card-hi) 30%,
    var(--bg-hover)   50%,
    var(--bg-card-hi) 70%
  ) !important;
  background-size: 800px 100% !important;
  animation: shimmer 1.8s ease-in-out infinite !important;
}

.sec-hd h2 {
  animation: fadeInUp var(--dur-medium2) var(--ease-decel) both;
}

.burger-btn {
  transition: background var(--dur-medium1) var(--ease-standard),
              color      var(--dur-medium1) var(--ease-standard),
              transform  var(--dur-medium1) var(--ease-spring);
}
.burger-btn:hover { background: var(--bg-hover); color: var(--text); transform: scale(1.08); }
.burger-btn:active { transform: scale(.92); }

.sb-close-btn {
  transition: background var(--dur-medium1) var(--ease-standard),
              color      var(--dur-medium1) var(--ease-standard),
              transform  var(--dur-medium1) var(--ease-spring);
}
.sb-close-btn:hover { background: var(--bg-hover); color: var(--text); transform: rotate(90deg) scale(1.1); }

.nav-bdg {
  animation: m3-spring-pop var(--dur-medium1) var(--ease-spring) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .o1, .o2, .o3 { animation: none !important; }
}

.history-nav-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.hist-day-btn {
  width: 40px; height: 40px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
  transition: background var(--dur-short2) var(--ease-standard),
              border-color var(--dur-short2) var(--ease-standard),
              transform var(--dur-short2) var(--ease-spring);
}
.hist-day-btn:hover  { background: var(--bg-hover); border-color: var(--accent); transform: scale(1.08); }
.hist-day-btn:active { transform: scale(.93); }

.hist-date-wrap {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
}

.hist-date-input {
  flex: 1;
  padding: 9px 14px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-short2) var(--ease-standard);
  color-scheme: dark;
}
[data-theme="light"] .hist-date-input,
[data-theme="auto"] .hist-date-input  { color-scheme: light; }
.hist-date-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lt); }

.hist-today-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--accent);
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-short2) var(--ease-standard),
              transform  var(--dur-short2) var(--ease-spring);
}
.hist-today-btn:hover { background: var(--accent-lt); transform: scale(1.04); }

.hist-day-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
.hist-summary-date {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.hist-summary-stats {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.hist-stat-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--accent-lt);
  color: var(--accent);
  font-size: .78rem; font-weight: 600;
}

.hist-view-tabs {
  display: flex; gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.hist-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border: none; background: transparent;
  color: var(--text-muted);
  font-size: .83rem; font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-short2) var(--ease-standard),
              border-color var(--dur-short2) var(--ease-standard);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.hist-tab:hover  { color: var(--text); }
.hist-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.hist-view       { display: none; }
.hist-view.active{ display: block; animation: fadeInUp var(--dur-medium1) var(--ease-decel) both; }

.hist-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 32px;
  color: var(--text-muted);
  font-size: .88rem;
  justify-content: center;
}


.hist-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hist-hour-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 0;
}

.hist-hour-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 700;
  color: var(--accent);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 8px 14px 7px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card-hi);
}
.hist-hour-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  opacity: .5;
}

.hist-timeline-track {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  cursor: default;
  transition: background var(--dur-short2) var(--ease-standard),
              transform  var(--dur-short2) var(--ease-spring);
  border-bottom: 1px solid var(--border);
}
.hist-timeline-track:last-child { border-bottom: none; }
.hist-timeline-track:hover {
  background: var(--bg-hover);
  transform: translateX(2px);
}

.hist-track-time {
  font-size: .72rem;
  color: var(--text-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  flex-shrink: 0;
}

.hist-track-img {
  width: 38px; height: 38px;
  border-radius: var(--radius-xs);
  background: var(--bg-hover);
  flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: var(--text-muted);
}
.hist-track-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-medium1) var(--ease-standard);
}
.hist-timeline-track:hover .hist-track-img img { transform: scale(1.08); }

.hist-track-info { flex: 1; min-width: 0; }
.hist-track-name {
  font-size: .88rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
.hist-track-artist {
  font-size: .76rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.hist-track-album {
  font-size: .7rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
  opacity: .75;
}

.hist-track-ext {
  display: flex; gap: 4px; flex-shrink: 0;
}
.hist-track-ext a {
  width: 28px; height: 28px;
  border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  text-decoration: none;
  background: transparent;
  color: var(--text-muted);
  transition: background var(--dur-short2) var(--ease-standard),
              color      var(--dur-short2) var(--ease-standard);
}
.hist-track-ext a:hover { background: var(--accent-lt); color: var(--accent); }


.hist-list-wrap {
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.hist-list-header {
  display: grid;
  grid-template-columns: 36px 40px 1fr 1fr 80px;
  gap: 8px;
  padding: 6px 10px;
  font-size: .72rem; font-weight: 700; color: var(--text-muted);
  letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.hist-list-row {
  display: grid;
  grid-template-columns: 36px 40px 1fr 1fr 80px;
  gap: 8px;
  padding: 7px 10px;
  align-items: center;
  border-radius: var(--radius-xs);
  transition: background var(--dur-short2) var(--ease-standard);
  font-size: .84rem;
}
.hist-list-row { border-bottom: 1px solid var(--border); }
.hist-list-row:last-child { border-bottom: none; }
.hist-list-row:hover { background: var(--bg-hover); }

.hist-list-num  { font-size: .78rem; color: var(--text-muted); font-weight: 600; text-align: center; }
.hist-list-time { font-size: .73rem; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: center; }
.hist-list-track-cell { display: flex; flex-direction: column; min-width: 0; }
.hist-list-track-cell strong {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .84rem; font-weight: 600;
}
.hist-list-track-cell span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .73rem; color: var(--accent);
}
.hist-list-album {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .76rem; color: var(--text-muted);
}
.hist-list-actions { display: flex; gap: 4px; justify-content: flex-end; }


.hist-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.hist-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
}
.hist-stat-card-title {
  font-size: .8rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}

.hist-top-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.hist-top-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-xs);
  transition: background var(--dur-short2) var(--ease-standard);
}
.hist-top-item:hover { background: var(--bg-hover); }
.hist-top-rank {
  font-size: .75rem; font-weight: 800; color: var(--accent);
  min-width: 18px; text-align: center;
}
.hist-top-name { flex: 1; min-width: 0; font-size: .85rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-top-count {
  font-size: .76rem; font-weight: 700; color: var(--accent);
  background: var(--accent-lt); padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.hist-hour-chart-wrap {
  padding: 8px 0;
}
.hist-hour-bar-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.hist-hour-bar-label {
  font-size: .72rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 40px; text-align: right; flex-shrink: 0;
}
.hist-hour-bar-track {
  flex: 1;
  height: 14px;
  background: var(--bg-hover);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.hist-hour-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width .5s var(--ease-decel);
}
.hist-hour-bar-val {
  font-size: .7rem; color: var(--text-muted);
  min-width: 28px; text-align: left; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.hist-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 48px 20px;
  color: var(--text-muted); font-size: .9rem; text-align: center;
}
.hist-empty i { font-size: 2.2rem; color: var(--text-muted); opacity: .5; }

.nav-visibility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.nav-vis-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px;
  background: var(--bg-card-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  transition: border-color var(--dur-short2) var(--ease-standard),
              background   var(--dur-short2) var(--ease-standard);
  cursor: pointer;
  user-select: none;
}
.nav-vis-item:hover { border-color: var(--accent); background: var(--accent-lt); }
.nav-vis-item input[type=checkbox] { display: none; }
.nav-vis-chk {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  border: 2px solid var(--border);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-short2) var(--ease-standard),
              border-color var(--dur-short2) var(--ease-standard);
  font-size: .65rem; color: transparent;
}
.nav-vis-item.checked .nav-vis-chk {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.nav-vis-icon { font-size: .9rem; color: var(--accent); width: 18px; text-align: center; }
.nav-vis-label { font-size: .83rem; font-weight: 600; flex: 1; }
.nav-vis-item.disabled-item { opacity: .5; cursor: not-allowed; }

.nav-lnk.nav-hidden,
.bn-item.nav-hidden { display: none !important; }

@media (max-width: 600px) {
  .hist-list-header,
  .hist-list-row {
    grid-template-columns: 28px 1fr 80px;
  }
  .hist-list-header .hist-list-time,
  .hist-list-row   .hist-list-time,
  .hist-list-header .hist-list-album,
  .hist-list-row   .hist-list-album { display: none; }
}

/* Custom Text Selection */
::selection {
  background-color: var(--accent);
  color: var(--accent-on);
}

/* Pour Firefox */
::-moz-selection {
  background-color: var(--accent);
  color: var(--accent-on);
}

#hist-sort-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-lt); }

/* Albums in hero-grid = carré */
#albums-grid.hero-grid .hero-card { aspect-ratio: 1; }

/* Tracks in hero-grid = carré */
#tracks-list.hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 12px; }
#tracks-list.hero-grid .hero-card { aspect-ratio: 1; }

/* sec-hd flex alignment fix */
.sec-hd { display: flex; flex-direction: column; margin-bottom: 20px; }

/* ── Input group (champ API key : input + boutons dans une même boîte) ── */
.input-group {
  display: flex; align-items: center;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); overflow: hidden;
  transition: border-color var(--dur-medium1) var(--ease-standard),
              box-shadow   var(--dur-medium1) var(--ease-standard);
}
.input-group:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-lt);
}
.input-group .setting-input {
  border: none; background: transparent; box-shadow: none;
  border-radius: 0; flex: 1; min-width: 0;
  padding: 10px 12px;
}
.input-group .setting-input:focus { box-shadow: none; border-color: transparent; }
.input-group .icon-btn {
  width: 38px; height: 38px; border-left: 1px solid var(--border);
  border-radius: 0; flex-shrink: 0; color: var(--text-muted);
}
.input-group .icon-btn:hover { background: var(--bg-hover); color: var(--text); transform: none; }

/* input-group dans l'écran de login */
.setup-field .input-group,
.setup-card .input-group {
  width: 100%;
}
.setup-field .input-group .icon-btn,
.setup-card .input-group .icon-btn {
  background: transparent;
  border-left: 1px solid var(--border);
}

/* Albums layout-list : image carrée bien positionnée */
.music-grid.layout-list .music-card-img img,
.music-grid.layout-list .music-card-img .spotify-cover {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
.music-grid.layout-list .music-card-rank {
  top: 4px; left: 4px; width: 20px; height: 20px; font-size: .62rem;
}

/* ══════════════════════════════════════════════════════════════
   Calendrier d'Écoute — heatmap annuelle (inspiré GitHub)
   ══════════════════════════════════════════════════════════════ */

/* Conteneur principal — scroll horizontal sur mobile */
.listening-heatmap-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* GPU-composited scroll layer */
  will-change: scroll-position;
}
.listening-heatmap-wrap::-webkit-scrollbar { height: 4px; }
.listening-heatmap-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.cal-heatmap-inner {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: min-content;
  /* prevent the inner from collapsing the scroll container */
  padding-right: 8px;
}

/* Ligne des mois — positionnement absolu pixel-parfait */
.cal-month-row {
  position: relative;
  height: 16px;
  /* margin-left et width définis en inline via JS */
}

.cal-month-label {
  position: absolute;
  top: 0;
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  line-height: 16px;
  pointer-events: none;
}

/* Corps : labels jours + grille */
.cal-body {
  display: flex;
  gap: 4px;
  align-items: flex-start;
}

.cal-weekday-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  width: 22px;
  padding-top: 1px;
}

.cal-wd-lbl {
  font-size: .62rem;
  color: var(--text-muted);
  height: 11px;
  line-height: 11px;
  text-align: right;
  padding-right: 3px;
}

/* Grille semaines */
.cal-heatmap-grid {
  display: flex;
  gap: 2px;
}

.cal-week-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Cellule individuelle */
.cal-day-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--bg-card-hi);
  cursor: default;
  flex-shrink: 0;
  transition: transform .1s ease;
  position: relative;
}

.cal-day-cell:not(.cal-day-empty):hover {
  transform: scale(1.5);
  z-index: 10;
}

.cal-day-cell.cal-day-empty {
  background: transparent !important;
  pointer-events: none;
}

/* ── Niveaux d'intensité — progression uniforme quel que soit l'accent ── */
.cal-day-cell[data-level="0"] {
  background: var(--bg-card-hi);
}
.cal-day-cell[data-level="1"] {
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-card-hi));
}
.cal-day-cell[data-level="2"] {
  background: color-mix(in srgb, var(--accent) 45%, var(--bg-card-hi));
}
.cal-day-cell[data-level="3"] {
  background: color-mix(in srgb, var(--accent) 72%, var(--bg-card-hi));
}
.cal-day-cell[data-level="4"] {
  background: var(--accent);
}

/* Légende */
.cal-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: .68rem;
  color: var(--text-muted);
}

.cal-legend-cells {
  display: flex;
  gap: 3px;
}

/* Stats rapides */
.cal-heatmap-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: .78rem;
  color: var(--text-muted);
}

.cal-heatmap-stat {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cal-heatmap-stat strong {
  color: var(--text);
  font-weight: 600;
}

/* Mobile responsive — dynamically sized cells, proper scroll alignment */
@media (max-width: 480px) {
  .listening-heatmap-wrap {
    /* Negate card padding so the scroll bleeds edge-to-edge */
    margin: 0 -16px;
    padding: 8px 16px 16px;
  }
  .cal-heatmap-inner {
    padding-bottom: 4px;
  }
  .cal-wd-lbl {
    font-size: .52rem;
    line-height: 1;
  }
  .cal-month-label {
    font-size: .56rem;
  }
  .cal-heatmap-stats {
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 360px) {
  .listening-heatmap-wrap { margin: 0 -12px; padding: 8px 12px 16px; }
}

/* ═══════════════════════════════════════════════════════════════


/* ═══════════════════════════════════════════════════════════════
   COMPARE / VERSUS — styles v4
═══════════════════════════════════════════════════════════════ */

/* Score tokens */
:root {
  --score-high:  #4caf80;
  --score-mid:   var(--accent);
  --score-low:   #e05a5a;
  --vs-fr-color: var(--accent-2, #ccc2dc);
  --vs-fr-lt:    rgba(108,99,197,.14);
}

/* ── Search bar ── */
.vs-search-bar {
  display: flex; gap: 10px; margin-bottom: 20px; align-items: center;
}
.vs-search-input-wrap { flex: 1; position: relative; }
.vs-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; font-size: .9rem;
}
.vs-search-input {
  width: 100%; padding: 12px 16px 12px 40px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--border);
  background: var(--bg-card); color: var(--text); font-size: .93rem;
  outline: none; box-sizing: border-box;
  transition: border-color var(--dur-short) var(--ease-standard),
              box-shadow  var(--dur-short) var(--ease-standard);
}
.vs-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lt); }

/* ── Compare button (M3 btn-primary style) ── */
.btn-compare-run {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius-pill); border: none;
  background: var(--accent); color: var(--accent-on);
  font-size: .88rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-medium1) var(--ease-standard),
              box-shadow  var(--dur-medium1) var(--ease-standard),
              transform   var(--dur-short2)  var(--ease-spring);
}
.btn-compare-run::before {
  content: ''; position: absolute; inset: 0;
  background: white; border-radius: inherit; opacity: 0;
  transition: opacity var(--dur-medium1) var(--ease-standard);
  pointer-events: none;
}
.btn-compare-run:hover::before  { opacity: var(--state-hover); }
.btn-compare-run:active::before { opacity: var(--state-pressed); }
.btn-compare-run:hover  { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-compare-run:active { transform: translateY(1px); }

/* ── Friend chips ── */
.vs-friends-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; min-height: 48px; }
.vs-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text);
  font-size: .83rem; font-weight: 600; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: border-color var(--dur-short) var(--ease-standard),
              transform    var(--dur-short2) var(--ease-spring),
              box-shadow   var(--dur-short) var(--ease-standard);
}
.vs-chip:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-lt); transform: translateY(-2px); }
.vs-chip:active { transform: translateY(0) scale(.96); }
.vs-chip--history { border-color: var(--accent-lt); background: var(--accent-lt); color: var(--accent); }
.vs-chip--history:hover { border-color: var(--accent); background: var(--accent-lt); }
/* Live friend chip */
.vs-chip--live { border-color: rgba(74,222,128,.5); }
.vs-chip--live:hover { border-color: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,.18); }
.vs-chip-av {
  width: 30px; height: 30px; border-radius: 50%; overflow: visible;
  flex-shrink: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-short2) var(--ease-spring);
}
.vs-chip-av > .vs-chip-fallback,
.vs-chip-av > .vs-chip-img { border-radius: 50%; overflow: hidden; }
.vs-chip:hover .vs-chip-av { transform: scale(1.1); }
.vs-chip-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; color: #fff; border-radius: 50%;
}
.vs-chip-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block; border-radius: 50%;
}
/* Green Discord-style live dot */
.vs-chip-live-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #4ade80;
  border: 2px solid var(--bg-card);
  z-index: 2;
}
.vs-chip-name { line-height: 1; }
.vs-chip-skeleton { color: var(--text-muted); font-size: .9rem; padding: 8px 0; }
.vs-no-friend { color: var(--text-muted); font-size: .88rem; display: flex; align-items: center; gap: 8px; }

/* ── Search history ── */
.vs-history-hd {
  display: flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 700; color: var(--text-muted);
  margin-bottom: 10px;
}
.vs-history-hd i { color: var(--accent); }
.vs-history-hd span { flex: 1; }
.vs-history-clear {
  padding: 2px 6px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; border-radius: 6px;
  font-size: .72rem;
  transition: color var(--dur-short), background var(--dur-short);
}
.vs-history-clear:hover { color: #e05a5a; background: rgba(224,90,90,.1); }
.vs-history-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* ── Loading ── */
.vs-loading { display: flex; justify-content: center; padding: 48px 16px; }
.vs-loading-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vs-loading-duel { display: flex; align-items: center; gap: 16px; }
.vs-loading-av {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; color: #fff;
  animation: vs-av-pulse 1.2s ease-in-out infinite;
}
.vs-loading-av--fr { animation-delay: .3s; }
.vs-loading-bolt { font-size: 1.4rem; color: var(--accent); animation: vs-bolt-flash .8s ease-in-out infinite alternate; }
@keyframes vs-av-pulse   { 0%,100%{transform:scale(1);opacity:.9} 50%{transform:scale(1.08);opacity:1} }
@keyframes vs-bolt-flash { from{transform:scale(.85);opacity:.6} to{transform:scale(1.15);opacity:1} }
.vs-loading-msg { font-size: .9rem; color: var(--text-muted); font-weight: 600; min-height: 1.2em; }
.vs-loading-steps { display: flex; gap: 6px; }
.vs-load-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: background var(--dur-medium1); }
.vs-load-dot.active { background: var(--accent); }

/* ── Section ── */
.vs-section {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-card);
  opacity: 0; transform: translateY(12px);
  transition: box-shadow var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard);
}
.vs-section:hover { box-shadow: var(--shadow-md); }
.vs-section-in { animation: vs-section-enter var(--dur-medium2) var(--ease-decel) both; }
@keyframes vs-section-enter {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
.vs-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px;
}
.vs-section-title i { color: var(--accent); font-size: .88rem; }
.vs-section-hint { font-size: .8rem; color: var(--text-muted); margin: -6px 0 12px; }
.vs-section-subtitle {
  display: flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 700; color: var(--text-muted);
  margin-top: 14px; margin-bottom: 10px; flex-wrap: wrap;
}
.vs-section-subtitle i { color: var(--accent); }
.vs-section-subtitle--warn i { color: #e05a5a; }
.vs-subtitle-tip {
  font-size: .73rem; font-weight: 400; color: var(--text-muted);
  padding: 2px 8px; border-radius: 6px; background: var(--bg-hover);
  border: 1px solid var(--border);
}

/* ── Versus header ── */
.vs-header {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 16px; align-items: center; padding: 24px 16px; margin-bottom: 12px;
}
@media (max-width: 580px) {
  .vs-header { grid-template-columns:1fr; justify-items:center; text-align:center; gap:8px; padding:16px; }
}
.vs-player { display:flex; flex-direction:column; align-items:center; gap:8px; }
.vs-player-name { font-size:.92rem; font-weight:800; letter-spacing:-.02em; word-break:break-all; }
.vs-player-top3 { display:flex; flex-direction:column; gap:2px; align-items:center; }
.vs-top3-item { font-size:.74rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }

/* ── Avatars (fixed centering) ── */
.vs-av {
  width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid var(--accent); flex-shrink: 0; overflow: hidden; position: relative;
}
.vs-av--fr { border-color: var(--vs-fr-color); }
.vs-av-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800; color: #fff;
}
.vs-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* ── Score circle ── */
.vs-score-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
.vs-score-circle { position:relative; width:110px; height:110px; }
.vs-gauge-svg { width:110px; height:110px; transform:rotate(-90deg); }
.vs-gauge-bg { fill:none; stroke:var(--border); stroke-width:8; }
.vs-gauge-fill { fill:none; stroke-width:8; stroke-linecap:round; stroke-dasharray:0 314.159; }
.vs-score-inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.vs-score-val { display:flex; align-items:flex-end; gap:1px; }
.vs-score-num { font-size:2rem; font-weight:900; letter-spacing:-.04em; line-height:1; }
.vs-score-sfx { font-size:.9rem; font-weight:800; color:var(--text-muted); line-height:1; margin-bottom:3px; }
.vs-score-label { font-size:.85rem; font-weight:700; text-align:center; }
.vs-score-sub { font-size:.73rem; color:var(--text-muted); text-align:center; }
.vs-score-wow {
  margin-top: 4px; padding: 3px 10px; border-radius: 100px;
  background: var(--accent-lt); color: var(--accent);
  font-size: .75rem; font-weight: 800;
  animation: m3-spring-pop var(--dur-medium2) var(--ease-spring) both;
}
.vs-gauge-bar-wrap { margin-bottom: 16px; }
.vs-gauge-bar { height: 6px; background: var(--border); border-radius: 100px; overflow: hidden; }
.vs-gauge-bar-fill { height:100%; border-radius:100px; width:0; transition:width 1s cubic-bezier(.4,0,.2,1) .3s; }

/* ── Playlist ── */
.vs-playlist { display: flex; flex-direction: column; gap: 10px; }
.vs-playlist-row {
  display: grid; grid-template-columns: 40px 1fr auto;
  align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px; border-radius: 14px;
  background: var(--bg-card-hi); border: 1.5px solid var(--border);
  animation: cardIn var(--dur-medium2) var(--ease-spring) both;
  transition: border-color var(--dur-short) var(--ease-standard),
              box-shadow  var(--dur-short) var(--ease-standard);
}
.vs-playlist-row:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-lt); }
/* Art thumbnail */
.vs-playlist-art {
  width: 40px; height: 40px; border-radius: 8px; overflow: hidden;
  flex-shrink: 0; background: var(--bg-hover);
  display: flex; align-items: center; justify-content: center;
}
.vs-playlist-art-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-playlist-art-num { font-size: .82rem; font-weight: 900; color: var(--accent); }
.vs-playlist-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vs-playlist-track { font-size: .86rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-playlist-artist { font-size: .75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-playlist-counts { display: flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.vs-playlist-me { color: var(--accent); }
.vs-playlist-fr { color: var(--vs-fr-color); }
.vs-playlist-sep { color: var(--text-muted); }

/* ── Charts ── */
.vs-chart-wrap { position:relative; }
.vs-radar-wrap   { height: 260px; margin-bottom: 12px; }
.vs-journey-wrap { height: 180px; margin-bottom: 12px; }
.vs-radar-legend { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:.78rem; font-weight:600; color:var(--text-muted); }
.vs-leg-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ── Temporal ── */
.vs-temporal-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; margin-bottom:14px; }
@media (max-width:480px) { .vs-temporal-grid{grid-template-columns:1fr;justify-items:center;text-align:center} .vs-temporal-vs{transform:rotate(90deg)} }
.vs-temporal-card { display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; background:var(--bg-card-hi); border:1.5px solid var(--border); animation:cardIn var(--dur-medium2) var(--ease-spring) both; }
.vs-temporal-card--fr .vs-av { border-color:var(--vs-fr-color); }
.vs-temporal-vs { font-size:1.1rem; color:var(--text-muted); flex-shrink:0; padding:0 4px; }
.vs-temporal-info { display:flex; flex-direction:column; gap:3px; }
.vs-temporal-name { font-size:.78rem; font-weight:700; color:var(--text-muted); }
.vs-temporal-year { font-size:1.4rem; font-weight:900; letter-spacing:-.04em; color:var(--text); }
.vs-temporal-era  { font-size:.74rem; font-weight:700; color:var(--accent); }
.vs-temporal-phrase { margin:0; padding:12px 14px; border-radius:12px; background:var(--accent-lt); color:var(--text-muted); font-size:.82rem; font-style:italic; border-left:3px solid var(--accent); }
.vs-temporal-phrase i { color:var(--accent); margin-right:6px; opacity:.7; }

/* ── Peak ── */
.vs-peak-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.vs-peak-card {
  background: var(--bg-card-hi); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 16px;
  animation: cardIn var(--dur-medium2) var(--ease-spring) both;
  transition: box-shadow var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard),
              transform var(--dur-short2) var(--ease-spring);
}
.vs-peak-card:hover { box-shadow: var(--shadow-sm); border-color: var(--accent-strip); transform: translateY(-1px); }
.vs-peak-icon { font-size:1.1rem; color:var(--accent); margin-bottom:6px; }
.vs-peak-label { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:10px; }
.vs-peak-row { display:flex; flex-direction:column; gap:8px; }
.vs-peak-user { display:flex; align-items:baseline; gap:8px; }
.vs-peak-who { font-size:.74rem; font-weight:700; }
.vs-peak-who--me { color:var(--accent); }
.vs-peak-who--fr { color:var(--vs-fr-color); }
.vs-peak-val { font-size:1.3rem; font-weight:900; letter-spacing:-.03em; }

/* ── Metrics ── */
.vs-metrics-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.vs-metric-card {
  background: var(--bg-card-hi); border: 1.5px solid var(--border);
  border-radius: 16px; animation: cardIn var(--dur-medium2) var(--ease-decel) both;
  transition: box-shadow var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard),
              transform var(--dur-short2) var(--ease-spring);
}
.vs-metric-card:hover {
  box-shadow: var(--shadow-md); border-color: var(--accent-strip);
  transform: translateY(-2px);
}
.vs-metric-card > .vs-metric-hd { border-radius:14px 14px 0 0; overflow:hidden; }
.vs-metric-hd { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--bg-hover); border-bottom:1px solid var(--border); font-size:.82rem; font-weight:700; }
.vs-metric-hd i { color:var(--accent); width:14px; text-align:center; }
.vs-metric-title { flex:1; }

/* Tooltip — click-toggle (works on mobile too) */
.vs-metric-tip {
  position: static; cursor: pointer;
  background: transparent; border: none; padding: 4px;
  color: var(--text-muted); font-size: .85rem; line-height: 1; display: inline-flex;
  align-items: center; border-radius: 50%;
  transition: color var(--dur-short) var(--ease-standard),
              background var(--dur-short) var(--ease-standard),
              transform var(--dur-short2) var(--ease-spring);
}
.vs-metric-tip:hover { color: var(--accent); background: var(--accent-lt); transform: scale(1.15); }
.vs-metric-tip:active { transform: scale(.92); }
/* .vs-tip-bubble stays hidden — text moved to data-tip, rendered by .vs-global-tip */
.vs-tip-bubble { display:none !important; }

/* Global floating tooltip */
.vs-global-tip {
  display: none;
  position: fixed;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border);
  font-size: .78rem; font-weight: 500; line-height: 1.55;
  padding: 10px 14px; border-radius: 12px;
  max-width: 240px; text-align: left;
  z-index: 99999; pointer-events: none;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-medium1) var(--ease-decel),
              transform var(--dur-medium1) var(--ease-decel);
}
.vs-global-tip--visible {
  opacity: 1; transform: translateY(0);
}

/* Dual bars */
.vs-metric-bars { padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.vs-bar-row { display:grid; grid-template-columns:70px 1fr auto; gap:8px; align-items:center; }
.vs-bar-name { font-size:.75rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); }
.vs-bar-name.vs-bar-win { color:var(--text); font-weight:800; }
.vs-bar-track { height:7px; background:var(--border); border-radius:100px; overflow:hidden; }
.vs-bar-fill { height:100%; border-radius:100px; width:0; transition:width .9s cubic-bezier(.4,0,.2,1) .2s; }
.vs-bar-fill--me { background:var(--accent); }
.vs-bar-fill--fr { background:var(--vs-fr-color); }
.vs-bar-valwrap { display:inline-flex; align-items:baseline; gap:1px; justify-content:flex-end; }
.vs-bar-num { font-size:.75rem; font-weight:700; text-align:right; white-space:nowrap; }
.vs-bar-sfx { font-size:.68rem; color:var(--text-muted); white-space:nowrap; }
.vs-metric-verdict { display:flex; align-items:center; gap:6px; padding:7px 14px; border-top:1px solid var(--border); font-size:.75rem; font-weight:700; }
.vs-verdict--me { color:var(--accent); }
.vs-verdict--me i { color:var(--accent); }
.vs-verdict--fr { color:var(--vs-fr-color); }
.vs-verdict--fr i { color:var(--vs-fr-color); }

/* ── Volume ── */
.vs-volume-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.vs-vol-card {
  background: var(--bg-card-hi); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 14px 16px;
  animation: cardIn var(--dur-medium2) var(--ease-spring) both;
  transition: box-shadow var(--dur-medium1) var(--ease-standard),
              border-color var(--dur-medium1) var(--ease-standard),
              transform var(--dur-short2) var(--ease-spring);
}
.vs-vol-card:hover { box-shadow: var(--shadow-sm); border-color: var(--accent-strip); transform: translateY(-1px); }
.vs-vol-label { font-size:.74rem; font-weight:700; color:var(--text-muted); margin-bottom:10px; text-transform:uppercase; letter-spacing:.04em; }
.vs-vol-row { display:flex; flex-direction:column; gap:8px; }
.vs-vol-user { display:flex; flex-direction:column; gap:2px; }
.vs-vol-name { font-size:.72rem; font-weight:700; }
.vs-vol-user--me .vs-vol-name { color:var(--accent); }
.vs-vol-user--fr .vs-vol-name { color:var(--vs-fr-color); }
.vs-vol-num { font-size:1.1rem; font-weight:900; letter-spacing:-.03em; }

/* ── Live ── */
.vs-live-cards { display:flex; flex-direction:column; gap:10px; }
.vs-live-card { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px; background:var(--accent-lt); border:1.5px solid var(--accent-strip); }
.vs-live-card--fr { background:var(--vs-fr-lt); border-color:var(--vs-fr-color); }
.vs-live-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; background:var(--accent); animation:vs-pulse 1.4s ease infinite; }
.vs-live-dot--fr { background:var(--vs-fr-color); }
@keyframes vs-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.vs-live-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.vs-live-who { font-size:.78rem; font-weight:700; color:var(--accent); }
.vs-live-who--fr { color:var(--vs-fr-color); }
.vs-live-track { font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Tags ── */
.vs-tags-wrap { display:flex; flex-wrap:wrap; gap:8px; }
.vs-tags-wrap--col { flex-direction:column; gap:10px; }
.vs-tag-pill { display:inline-flex; align-items:center; padding:4px 12px; border-radius:100px; background:var(--accent-lt); color:var(--accent); font-size:.8rem; font-weight:600; }
.vs-tag-genre   { background:rgba(76,175,128,.12); color:#4caf80; }
.vs-tag-gem     { background:rgba(176,137,255,.12); color:#b089ff; }
.vs-tag-fire    { background:rgba(249,115,22,.12);  color:#f97316; }
.vs-tag-neutral { background:rgba(100,116,139,.12); color:#94a3b8; }

/* ── Dealbreaker ── */
.vs-breaker-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.82rem; }
.vs-breaker-badge { padding:2px 8px; border-radius:6px; background:var(--accent-lt); color:var(--accent); font-weight:700; font-size:.76rem; }
.vs-breaker-badge--fr { background:var(--vs-fr-lt); color:var(--vs-fr-color); }
.vs-breaker-arrow { color:var(--text-muted); font-size:.7rem; }
.vs-breaker-artist { font-weight:700; }

/* ── Steal ── */
.vs-steal-section { border-color:var(--accent-strip); background:var(--accent-lt); }
.vs-steal-hd { display:flex; align-items:center; gap:8px; font-weight:800; font-size:.9rem; margin-bottom:6px; color:var(--accent); }
.vs-steal-sub { font-size:.86rem; color:var(--text-muted); margin:0 0 14px; }
.vs-steal-artist { display:flex; align-items:center; gap:12px; background:var(--bg-card); border-radius:12px; padding:10px 14px; border:1px solid var(--border); }
.vs-steal-rank  { font-size:.75rem; font-weight:800; color:var(--accent); background:var(--accent-lt); padding:2px 8px; border-radius:6px; }
.vs-steal-name  { flex:1; font-weight:700; }
.vs-steal-pc    { font-size:.78rem; color:var(--text-muted); white-space:nowrap; }

/* ── Again button (M3) ── */
.vs-again-wrap { display:flex; justify-content:center; padding:8px 0 24px; }
.vs-again-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 24px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
  font-size: .88rem; font-weight: 700; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: background var(--dur-medium1) var(--ease-standard),
              transform  var(--dur-short2)  var(--ease-spring),
              box-shadow var(--dur-medium1) var(--ease-standard);
}
.vs-again-btn:hover  { background: var(--accent-lt); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.vs-again-btn:active { transform: translateY(0) scale(.97); }

/* ── Empty ── */
.vs-empty { color:var(--text-muted); font-size:.83rem; margin:0; }

/* ── Responsive ── */
@media (max-width:580px) {
  .vs-metrics-grid { grid-template-columns:1fr; }
  .vs-volume-grid  { grid-template-columns:1fr; }
  .vs-bar-row      { grid-template-columns:56px 1fr auto; gap:5px; }
  .vs-search-bar   { flex-direction:column; align-items:stretch; }
  .btn-compare-run { justify-content:center; }
  .vs-peak-grid    { grid-template-columns:1fr; }
  .vs-playlist-row { grid-template-columns:20px 1fr auto; gap:8px; }
}

/* ═══════════════════════════════════════════════════
   PROFILE BUBBLE (sidebar dropdown)
═══════════════════════════════════════════════════ */

.profile-bubble {
  position: absolute; left: 16px; right: 16px; top: calc(100% + 4px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  padding: 6px;
  transform-origin: top left;
  opacity: 0; transform: scale(.94) translateY(-6px);
  transition: opacity 180ms var(--ease-decel), transform 180ms var(--ease-decel);
  pointer-events: none;
}
.profile-bubble.pb-visible {
  opacity: 1; transform: scale(1) translateY(0);
  pointer-events: all;
}
.profile-bubble.hidden { display: none; }

.pb-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  font-size: .875rem; font-weight: 500; color: var(--text);
  cursor: pointer; background: none; text-align: left;
  transition: background var(--dur-short2) var(--ease-standard);
}
.pb-item i { color: var(--text-muted); width: 16px; text-align: center; }
.pb-item:hover { background: var(--bg-hover); }
.pb-item:hover i { color: var(--accent); }
.pb-sep { height: 1px; background: var(--border); margin: 4px 8px; }

/* ═══════════════════════════════════════════════════
   PROFILE SECTION
═══════════════════════════════════════════════════ */

/* ── Profile mobile scroll fix ── */
@media (max-width: 768px) {
  .main-content:has(#s-profile.active),
  .main-content.profile-active {
    /* On mobile the bottom-nav hides the last content — add the nav height as padding */
    padding-bottom: calc(var(--bn-height) + env(safe-area-inset-bottom, 0px) + 16px) !important;
  }
  /* Profile section itself needs overflow scroll and enough bottom room */
  #s-profile {
    padding-bottom: calc(var(--bn-height) + env(safe-area-inset-bottom, 0px) + 24px);
    min-height: 100%;
  }
  /* Tracks list – ensure last item is always visible */
  .profile-tracks-list { padding-bottom: 8px; }
}
/* Desktop: zero padding so hero bleeds edge-to-edge */
@media (min-width: 769px) {
  #s-profile { padding: 0; }
  .main-content:has(#s-profile.active) { padding: 0; }
  .main-content.profile-active { padding: 0; }
}




/* Back bar */
.profile-back-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  background: linear-gradient(to bottom, rgba(0,0,0,.50) 0%, transparent 100%);
}
.profile-back-btn {
  display: flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600; color: var(--text-muted);
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border); background: var(--bg-hover);
  cursor: pointer;
  transition: color var(--dur-short2) var(--ease-standard),
              border-color var(--dur-short2) var(--ease-standard);
}
.profile-back-btn:hover { color: var(--accent); border-color: var(--accent); }
.profile-back-label { font-size: .82rem; color: var(--text-muted); font-weight: 500; }

/* Hero */
.profile-hero {
  position: relative; height: 360px; overflow: hidden;
  display: flex; align-items: flex-end;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  background: #1a0a2e; /* dark fallback always visible */
}
.profile-hero-bg {
  position: absolute; inset: 0;
  background: #2d1b4e center/cover no-repeat; /* dark purple fallback */
  filter: blur(22px) brightness(.35) saturate(1.8);
  transform: scale(1.12);
  transition: background-image .7s var(--ease-standard);
  will-change: transform;
}
.profile-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.98) 0%,
    rgba(0,0,0,.72) 40%,
    rgba(0,0,0,.30) 75%,
    rgba(0,0,0,.10) 100%);
}
.profile-hero-content {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: 28px; gap: 6px;
  margin-top: auto;
}

/* Avatar */
.profile-av-wrap { position: relative; width: 100px; height: 100px; }
.profile-av {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 8px 40px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.6);
  background: var(--bg-hover);
}
/* Now-playing dot — Discord style with pulse ring */
.profile-now-dot {
  position: absolute; bottom: 3px; right: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #22c55e; border: 2.5px solid var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.pnd-pulse {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(34,197,94,.55);
  animation: pnd-ring 2s ease-in-out infinite;
}
@keyframes pnd-ring {
  0%,100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.45); opacity: 0; }
}

/* Username + meta */
.profile-username {
  font-size: 1.6rem; font-weight: 900; color: #fff;
  letter-spacing: -.025em; margin: 4px 0 0;
  text-shadow: 0 2px 20px rgba(0,0,0,.9);
}
.profile-meta-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: center;
}
.profile-country {
  font-size: .8rem; color: rgba(255,255,255,.75);
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.profile-country:not(:empty)::before { content: '📍 '; }
.profile-since {
  font-size: .75rem; color: rgba(255,255,255,.55);
  letter-spacing: .01em; text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* Stats row */
.profile-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; padding: 20px 24px 0;
}
.profile-stat-chip {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-short) var(--ease-standard),
              transform var(--dur-short2) var(--ease-spring);
}
.profile-stat-chip:hover { border-color: var(--border-glow); transform: translateY(-1px); }
.profile-stat-chip i      { font-size: .85rem; color: var(--accent); margin-bottom: 2px; }
.profile-stat-chip strong { font-size: 1.05rem; font-weight: 800; color: var(--text); line-height: 1; }
.profile-stat-chip span   { font-size: .68rem; color: var(--text-muted); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }

/* Period bar */
.profile-period-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.profile-period-lbl { font-size: .78rem; color: var(--text-muted); font-weight: 600; flex-shrink: 0; }

/* Now playing */
.profile-np-bar {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 24px 0; padding: 11px 14px;
  background: var(--surface-container);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  animation: fadeInUp var(--dur-medium1) var(--ease-decel);
}

/* Top 3 grid */
.profile-top3-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; padding: 16px 24px 0;
}
.profile-top-card {
  position: relative; border-radius: var(--radius-sm);
  overflow: hidden; min-height: 150px;
  box-shadow: var(--shadow-card); cursor: pointer;
  transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease-standard);
}
.profile-top-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-md); }
.profile-top-card:active { transform: translateY(0) scale(.98); }
.ptc-bg {
  position: absolute; inset: 0;
  background-color: #1a1025; /* dark fallback always, no white flash */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .5s var(--ease-standard);
  will-change: transform;
}
.profile-top-card:hover .ptc-bg { transform: scale(1.08); }
.ptc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.42) 55%, transparent 100%);
}
.ptc-lfm-hint {
  position: absolute; top: 8px; right: 8px;
  font-size: .65rem; color: rgba(255,255,255,.45);
  transition: color .15s; z-index: 3;
}
.profile-top-card:hover .ptc-lfm-hint { color: rgba(255,255,255,.9); }
.ptc-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px; height: 100%; justify-content: flex-end;
}
.ptc-label  { font-size: .62rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.ptc-name   { font-size: .9rem; font-weight: 800; color: #fff; line-height: 1.25; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.ptc-sub    { font-size: .72rem; color: rgba(255,255,255,.68); text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.ptc-plays  { font-size: .67rem; color: rgba(255,255,255,.50); font-weight: 600; }

/* Section heading */
.profile-section-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 20px 24px 10px;
  font-size: .85rem; font-weight: 700; color: var(--text);
}
.profile-section-hd i { color: var(--accent); }

/* Tracks list */
.profile-tracks-list { padding: 0 24px 32px; display: flex; flex-direction: column; gap: 6px; }
.profile-track-row {
  display: grid; grid-template-columns: 22px 38px 1fr auto;
  align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: var(--radius-xs);
  background: var(--bg-card); border: 1px solid var(--border);
  transition: background var(--dur-short2) var(--ease-standard),
              border-color var(--dur-short2) var(--ease-standard),
              transform var(--dur-short2) var(--ease-spring);
  cursor: pointer;
}
.profile-track-row:hover { background: var(--bg-hover); border-color: var(--border-glow); transform: translateX(2px); }
.profile-track-sk { height: 38px; border-radius: var(--radius-xs); padding: 9px 12px; }

.ptrack-rank { font-size: .73rem; font-weight: 700; color: var(--text-muted); text-align: center; }
.ptrack-img  { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; }
.ptrack-img-fallback {
  width: 38px; height: 38px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: .85rem;
}
.ptrack-info   { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ptrack-name   { font-size: .84rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptrack-artist { font-size: .73rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptrack-plays  { font-size: .72rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Compare profile buttons */
.vs-profile-btn {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 600; color: var(--accent);
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--accent); background: var(--accent-lt);
  cursor: pointer;
  transition: background var(--dur-short2) var(--ease-standard),
              color      var(--dur-short2) var(--ease-standard),
              transform  var(--dur-short2) var(--ease-spring);
}
.vs-profile-btn:hover  { background: var(--accent); color: var(--accent-on); transform: scale(1.04); }
.vs-profile-btn:active { transform: scale(.96); }
.vs-profile-btn--fr { color: var(--vs-fr-color); border-color: var(--vs-fr-color); background: rgba(33,150,243,.12); }
.vs-profile-btn--fr:hover { background: var(--vs-fr-color); color: #fff; }

/* Responsive */
@media (max-width: 768px) {
  .profile-stats-row  { grid-template-columns: repeat(2, 1fr); }
  .profile-top3-grid  { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .profile-top-card   { min-height: 120px; }
}
@media (max-width: 480px) {
  .profile-hero       { height: 300px; }
  .profile-av-wrap    { width: 84px; height: 84px; }
  .profile-username   { font-size: 1.3rem; }
  .profile-top3-grid  { grid-template-columns: 1fr; gap: 8px; }
  .profile-top-card   { min-height: 100px; }
  .profile-stats-row, .profile-top3-grid,
  .profile-tracks-list, .profile-period-bar,
  .profile-section-hd, .profile-back-bar,
  .profile-np-bar { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; }
  .profile-track-row { gap: 8px; padding: 7px 10px; }
  .ptrack-name   { font-size: .8rem; }
  .ptrack-artist { font-size: .7rem; }
}

/* ─── Lien Profil dans la nav (sidebar + mobile) ─────────────────────────── */
/* Le lien Profil n'a pas de section data-s matchée (c'est openProfilePage()),
   on le style identiquement aux autres liens nav. */
a.nav-lnk[data-s="profile"],
a.bn-item[data-s="profile"] { cursor: pointer; }
/* Quand le profil est actif (s-profile visible), on highlight le lien */
a.nav-lnk[data-s="profile"].active,
a.bn-item[data-s="profile"].active {
  color: var(--accent);
  background: var(--accent-lt);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL MOBILE PERFORMANCE & UX OPTIMIZATIONS
═══════════════════════════════════════════════════════════════ */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Better touch targets globally */
@media (max-width: 768px) {
  button, a, [role="button"], [tabindex="0"] {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }
  /* Prevent text selection on tap */
  .nav-lnk, .bn-item, .music-card, .stat-card, .profile-top-card {
    user-select: none;
  }
  /* Smooth momentum scroll on all scrollable areas */
  * { -webkit-overflow-scrolling: touch; }
  /* Slightly reduce animation scale on mobile for perf */
  .music-card:hover { transform: none; }
  .music-card:active { transform: scale(.97); }
  .stat-card:hover { transform: none; }
}

/* Safe area insets for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom), 6px);
  }
  @media (max-width: 768px) {
    .main-content {
      padding-bottom: calc(var(--bn-height) + env(safe-area-inset-bottom, 0px) + 16px);
    }
  }
}

/* Snap scroll for horizontal lists on mobile */
@media (max-width: 640px) {
  .vs-friends-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .vs-friends-list::-webkit-scrollbar { display: none; }
  .vs-chip { scroll-snap-align: start; flex-shrink: 0; }

  /* Stack stat chips 2×2 on smallest screens */
  .profile-stats-row { gap: 8px; }
  .profile-stat-chip { padding: 10px 8px; }
  .profile-stat-chip strong { font-size: .95rem; }

  /* Section header more compact */
  .sec-hd { margin-bottom: 14px; }
  .sec-hd h2 { font-size: 1.1rem; }
}

/* Image loading optimization */
img { loading: lazy; }
.music-card-img img,
.ptc-bg,
.profile-hero-bg { image-rendering: auto; }

/* Focus visible ring — keyboard a11y */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* ─── Chart export button ──────────────────────────────────────────── */
.cc-export-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; cursor: pointer; flex-shrink: 0;
  transition: background var(--dur-short) var(--ease-standard),
              color      var(--dur-short) var(--ease-standard),
              transform  var(--dur-short2) var(--ease-spring);
  margin-left: auto;
}
.cc-export-btn:hover  { background: var(--accent-lt); color: var(--accent); border-color: var(--border-glow); transform: scale(1.1); }
.cc-export-btn:active { transform: scale(.9); }

/* ─── Milestone notification options ──────────────────────────────── */
.notif-milestones {
  margin-top: 10px; padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.notif-milestones-hd {
  display: flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 700; color: var(--text-dim);
  margin-bottom: 10px;
}
.notif-milestones-hd i { color: var(--accent); }
.notif-milestones-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.milestone-chip {
  display: flex; align-items: center;
  cursor: pointer;
}
.milestone-chip input { display: none; }
.milestone-chip span {
  padding: 4px 10px; border-radius: 99px;
  border: 1.5px solid var(--border);
  font-size: .74rem; font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-hover);
  transition: all var(--dur-short) var(--ease-standard);
  white-space: nowrap;
  user-select: none;
}
.milestone-chip:hover span { border-color: var(--accent); color: var(--accent); }
.milestone-chip input:checked + span {
  background: var(--accent-lt);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 800;
}

/* ══════════════════════════════════════════════════════
   COMPARE — LIENS MUSICAUX CLIQUABLES
══════════════════════════════════════════════════════ */
/* Playlist rows as links */
.vs-playlist-row--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.vs-playlist-row--link:hover {
  background: var(--accent-lt);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-lt);
  transform: translateY(-1px);
  transition: border-color var(--dur-short) var(--ease-standard),
              background   var(--dur-short) var(--ease-standard),
              transform    var(--dur-short2) var(--ease-spring);
}
.vs-playlist-ext {
  font-size: .62em;
  opacity: .45;
  margin-left: 5px;
  flex-shrink: 0;
}

/* Artist pills as links */
.vs-tag-pill--link {
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--dur-short) var(--ease-standard),
              color      var(--dur-short) var(--ease-standard),
              border-color var(--dur-short) var(--ease-standard),
              transform  var(--dur-short2) var(--ease-spring);
}
.vs-tag-pill--link:hover {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
  transform: translateY(-2px) scale(1.04);
}

/* Dealbreaker artist links */
.vs-breaker-artist--link {
  text-decoration: none;
  color: var(--accent);
  font-weight: 700;
  transition: opacity var(--dur-short) var(--ease-standard);
}
.vs-breaker-artist--link:hover { opacity: .75; text-decoration: underline; }

/* ══════════════════════════════════════════════════════
   OPTIMISATIONS GÉNÉRALES PC / MOBILE
══════════════════════════════════════════════════════ */

/* ── Amélioration touch targets sur mobile ── */
@media (max-width: 768px) {
  .cc-export-btn { width: 36px; height: 36px; font-size: .82rem; }
  .startup-btn   { padding: 9px 16px; font-size: .82rem; }
  .acc-dot       { width: 32px; height: 32px; }
  .th-btn        { padding: 9px 14px; }
  .lang-btn      { padding: 8px 12px; }
  .setting-row   { padding: 12px 0; }
  /* Playlist rows plus hautes sur mobile */
  .vs-playlist-row { padding: 10px 12px 10px 10px; }
  /* Évite que les vs-tags débordent sur petit écran */
  .vs-tags-wrap  { gap: 6px; }
  .vs-tag-pill   { font-size: .76rem; padding: 4px 10px; }
}

/* ── Corrections overflow horizontal ── */
.main-content { overflow-x: hidden; }
.app-sec      { max-width: 100%; overflow-x: hidden; }

/* ── Better card hover effects on desktop ── */
@media (hover: hover) and (pointer: fine) {
  .chart-card:hover {
    box-shadow: 0 4px 24px rgba(0,0,0,.18), 0 0 0 1px var(--border-glow);
    transform: translateY(-2px);
    transition: box-shadow var(--dur-medium1) var(--ease-standard),
                transform  var(--dur-medium1) var(--ease-spring);
  }
  .music-card:hover, .hero-card:hover {
    transform: translateY(-3px) scale(1.015);
  }
}

/* ── Settings grid — 2 colonnes sur grand écran ── */
@media (min-width: 1100px) {
  .settings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .settings-card--about {
    grid-column: 1 / -1;
  }
}

/* ── Section headers — meilleur espacement PC ── */
@media (min-width: 1025px) {
  .sec-hd { padding-bottom: 20px; margin-bottom: 4px; }
  .sec-hd h2 { font-size: 1.45rem; }
  .sec-sub   { font-size: .92rem; }
}

/* ── Compare section — meilleure densité PC ── */
@media (min-width: 769px) {
  .vs-playlist { gap: 8px; }
  .vs-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .vs-volume-grid  { grid-template-columns: repeat(3, 1fr); }
  .vs-peak-grid    { grid-template-columns: repeat(2, 1fr); }
}

/* ── Focus visible amélioration accessibilité ── */
.vs-playlist-row--link:focus-visible,
.vs-tag-pill--link:focus-visible,
.vs-breaker-artist--link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Mode basique — toast de bienvenue joli ── */
.toast--info {
  background: var(--accent-container);
  color: var(--accent-on-cont);
  border-left: 3px solid var(--accent);
}

/* ══════════════════════════════════════════════════════
   SIDEBAR COLLAPSE (icônes seules, PC uniquement)
══════════════════════════════════════════════════════ */
:root { --sb-mini-width: 64px; }

/* Bouton collapse — visible uniquement sur PC */
.sb-collapse-btn {
  display: none;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-muted);
  align-items: center; justify-content: center;
  font-size: .72rem; cursor: pointer; flex-shrink: 0;
  transition: background var(--dur-short) var(--ease-standard),
              color      var(--dur-short) var(--ease-standard),
              transform  var(--dur-short2) var(--ease-spring);
}
.sb-collapse-btn:hover { background: var(--accent-lt); color: var(--accent); transform: scale(1.1); }

@media (min-width: 1025px) {
  .sb-collapse-btn { display: flex; }
}

/* État réduit */
.sidebar.sb-collapsed {
  width: var(--sb-mini-width);
  overflow: visible; /* tooltips peuvent déborder */
}

/* Masquer les textes quand réduit */
.sidebar.sb-collapsed .sb-logo-text,
.sidebar.sb-collapsed .sb-info,
.sidebar.sb-collapsed .sb-profile-chevron,
.sidebar.sb-collapsed .nav-lnk span:not(.nav-bdg),
.sidebar.sb-collapsed .nav-sep,
.sidebar.sb-collapsed .sb-foot,
.sidebar.sb-collapsed .nav-bdg {
  display: none;
}

/* Logo réduit */
.sidebar.sb-collapsed .sb-head {
  padding: 16px 0;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
.sidebar.sb-collapsed .sb-logo {
  justify-content: center;
}
.sidebar.sb-collapsed .sb-collapse-btn {
  width: 32px; height: 32px;
}

/* Profil réduit */
.sidebar.sb-collapsed .sb-profile-wrap { padding: 0; }
.sidebar.sb-collapsed .sb-profile {
  justify-content: center;
  padding: 12px 0;
}
.sidebar.sb-collapsed .sb-av { width: 36px; height: 36px; }

/* Liens réduits — icône centrée + tooltip natif */
.sidebar.sb-collapsed .sb-nav { padding: 4px 6px; }
.sidebar.sb-collapsed .nav-lnk {
  justify-content: center;
  padding: 12px 0;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}
.sidebar.sb-collapsed .nav-lnk i { width: auto; font-size: 1rem; }

/* Tooltip au hover (title= sur les nav-lnk) */
.sidebar.sb-collapsed .nav-lnk {
  position: relative;
}
.sidebar.sb-collapsed .nav-lnk::before {
  /* On ne change pas le before existant — le tooltip est via title= natif */
}

/* ══════════════════════════════════════════════════════
   EXPORT FORMAT PICKER MENU
══════════════════════════════════════════════════════ */
.export-menu-ov {
  position: fixed; inset: 0; z-index: 490;
  background: transparent;
}
.export-menu {
  position: fixed; z-index: 500;
  min-width: 240px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.14);
  padding: 10px 8px 8px;
  transform-origin: top right;
  transform: scale(.88) translateY(-8px);
  opacity: 0;
  transition: transform var(--dur-medium1) var(--ease-spring),
              opacity   var(--dur-medium1) var(--ease-standard);
  pointer-events: none;
}
.export-menu.export-menu--open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}
.export-menu-title {
  font-size: .72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 10px 8px;
  display: flex; align-items: center; gap: 6px;
}
.export-menu-title i { color: var(--accent); }

.export-menu-opt {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px;
  border-radius: 10px; cursor: pointer;
  transition: background var(--dur-short) var(--ease-standard);
  text-align: left;
}
.export-menu-opt:hover { background: var(--accent-lt); }
.export-menu-opt:active { background: var(--accent-container); }

.export-menu-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.export-menu-label {
  display: flex; flex-direction: column; gap: 1px;
}
.export-menu-label strong { font-size: .85rem; font-weight: 700; color: var(--text); }
.export-menu-label small  { font-size: .72rem; color: var(--text-muted); }

/* Mobile: menu plein bas */
@media (max-width: 600px) {
  .export-menu {
    position: fixed; left: 12px !important; right: 12px !important;
    bottom: calc(var(--bn-height) + 12px) !important;
    top: auto !important; width: auto; min-width: unset;
    transform-origin: bottom center;
  }
  .export-menu-ov { background: rgba(0,0,0,.35); }
}

/* ══════════════════════════════════════════════════════
   DASHBOARD SEARCH BAR
══════════════════════════════════════════════════════ */
.dash-search-wrap {
  position: relative;
  flex: 0 0 auto;
  width: clamp(180px, 260px, 40vw);
}
.dash-search-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-card-hi);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-short) var(--ease-standard),
              box-shadow   var(--dur-short) var(--ease-standard);
}
.dash-search-inner:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lt);
}
.dash-search-ico  { color: var(--text-muted); font-size: .82rem; flex-shrink: 0; }
.dash-search-input {
  flex: 1; border: none; background: transparent;
  color: var(--text); font-family: inherit; font-size: .84rem;
  outline: none; min-width: 0;
}
.dash-search-input::placeholder { color: var(--text-muted); }
.dash-search-clear {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-hover); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; cursor: pointer;
  transition: background var(--dur-short) var(--ease-standard);
}
.dash-search-clear:hover { background: var(--accent-lt); color: var(--accent); }

/* Results dropdown */
.dash-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 300;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.14);
  overflow: hidden;
  max-height: 420px; overflow-y: auto;
  animation: cardIn var(--dur-medium1) var(--ease-decel) both;
}
.dsr-empty {
  padding: 20px 16px; text-align: center;
  color: var(--text-muted); font-size: .84rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.dsr-row {
  display: grid; grid-template-columns: 44px 1fr auto;
  align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-standard);
  border-bottom: 1px solid var(--border);
}
.dsr-row:last-child { border-bottom: none; }
.dsr-row:hover { background: var(--accent-lt); }
.dsr-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.dsr-thumb {
  width: 44px; height: 44px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0; display: block;
  background: var(--bg-hover);
}
.dsr-thumb-ico {
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: .9rem;
}
.dsr-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dsr-name {
  font-size: .86rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dsr-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dsr-type-badge {
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 1px 6px; border-radius: 99px;
  background: var(--accent-lt); color: var(--accent);
}
.dsr-sub   { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.dsr-plays { font-size: .72rem; color: var(--text-muted); display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.dsr-plays i { font-size: .6rem; }

.dsr-actions {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.dsr-btn {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; text-decoration: none !important;
  transition: background var(--dur-short) var(--ease-standard),
              transform  var(--dur-short2) var(--ease-spring);
  color: var(--text-muted); background: var(--bg-hover);
}
.dsr-btn:hover { transform: scale(1.15); }
.dsr-btn--lfm:hover { background: rgba(208,0,0,.18); color: #d00; }
.dsr-btn--sp:hover  { background: rgba(29,185,84,.18);  color: #1db954; }
.dsr-btn--yt:hover  { background: rgba(255,0,0,.18);    color: #f00; }

/* Mobile adjustments */
@media (max-width: 640px) {
  .dash-search-wrap { width: 100%; }
  .dash-sec-hd { flex-wrap: wrap; }
  .dash-search-results { left: -8px; right: -8px; }
  .dsr-row { grid-template-columns: 36px 1fr auto; gap: 8px; padding: 8px 10px; }
  .dsr-thumb { width: 36px; height: 36px; }
  .dsr-btn { width: 26px; height: 26px; font-size: .7rem; }
}

/* ══════════════════════════════════════════════════════
   DASHBOARD HERO BANNER — full-bleed, fade into site
══════════════════════════════════════════════════════ */

/* Allow s-dashboard to let the hero overflow its own padding */
#s-dashboard { overflow: visible; padding-top: 0; }

.dash-hero {
  position: relative;
  /* Escape main-content's 24px padding on all 3 sides */
  width: calc(100% + 48px);
  margin-top: -24px;
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: 0;           /* fade merges with content below */
  height: 240px;
  overflow: hidden;
  border-radius: 0;           /* no border radius — true full bleed */
}

/* Background image layer */
.dash-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* No transform: scale — avoids repeating pattern on small images */
  transition: background-image .7s var(--ease-standard),
              background      .5s var(--ease-standard),
              filter          .4s var(--ease-standard);
  will-change: filter;
}

/* Dark mode: dark blur */
.dash-hero-bg {
  filter: blur(20px) brightness(.35) saturate(1.8);
}
/* Light mode: lighter blur */
[data-theme="light"] .dash-hero-bg {
  filter: blur(20px) brightness(.72) saturate(1.3);
}
[data-theme="auto"] .dash-hero-bg {
  filter: blur(20px) brightness(.35) saturate(1.8);
}
@media (prefers-color-scheme: light) {
  [data-theme="auto"] .dash-hero-bg {
    filter: blur(20px) brightness(.72) saturate(1.3);
  }
}

/* Overlay: dark-to-transparent from top, then fade to --bg at bottom */
.dash-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.08) 0%,
    rgba(0,0,0,.38) 45%,
    rgba(0,0,0,.62) 72%,
    var(--bg)       100%
  );
  transition: background .4s var(--ease-standard);
}
/* Light mode overlay: lighter top, still fades to --bg */
[data-theme="light"] .dash-hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.04) 0%,
    rgba(0,0,0,.18)       45%,
    rgba(0,0,0,.38)       72%,
    var(--bg)             100%
  );
}
@media (prefers-color-scheme: light) {
  [data-theme="auto"] .dash-hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,.04) 0%,
      rgba(0,0,0,.18)       45%,
      rgba(0,0,0,.38)       72%,
      var(--bg)             100%
    );
  }
}

/* Content sits at bottom of hero */
.dash-hero-content {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; align-items: flex-end;
  padding: 20px 32px 28px;
}

/* ── Text visible / hidden toggle ── */
.dash-hero--no-info .dash-hero-track,
.dash-hero--no-info .dash-hero-accent-inner { display: none; }

/* Track / Artist layout */
.dash-hero-track {
  display: flex; align-items: center; gap: 18px;
  animation: sectionIn var(--dur-medium2) var(--ease-decel) both;
}
.dash-hero-art {
  width: 84px; height: 84px;
  border-radius: 12px; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 6px 28px rgba(0,0,0,.7);
  border: 2px solid rgba(255,255,255,.18);
}
.dash-hero-art--round { border-radius: 50%; }
.dash-hero-art--ico {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-lt); color: var(--accent);
  font-size: 1.8rem;
}
.dash-hero-track-info { display: flex; flex-direction: column; gap: 4px; }
.dash-hero-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent);
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
}
.dash-hero-name {
  font-size: 1.4rem; font-weight: 900; color: #fff;
  line-height: 1.15; letter-spacing: -.02em;
  text-shadow: 0 2px 14px rgba(0,0,0,.95);
  max-width: 520px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dash-hero-sub {
  font-size: .85rem; color: rgba(255,255,255,.75);
  font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,.8);
}

/* Accent mode */
.dash-hero-accent-inner {
  display: flex; align-items: center; gap: 20px;
  animation: sectionIn var(--dur-medium2) var(--ease-decel) both;
}
.dash-hero-accent-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff;
}
.dash-hero-accent-text { display: flex; flex-direction: column; gap: 5px; }
.dash-hero-accent-text strong {
  font-size: 1.3rem; font-weight: 900; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.dash-hero-accent-text span {
  font-size: .84rem; color: rgba(255,255,255,.75);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

/* Mobile */
@media (max-width: 768px) {
  .dash-hero {
    width: calc(100% + 24px);
    margin-top: -12px;
    margin-left: -12px;
    margin-right: -12px;
    height: 180px;
  }
  .dash-hero-content { padding: 14px 16px 20px; }
  .dash-hero-art { width: 62px; height: 62px; border-radius: 9px; }
  .dash-hero-art--round { border-radius: 50%; }
  .dash-hero-name { font-size: 1.05rem; max-width: calc(100vw - 120px); }
  .dash-hero-sub  { font-size: .78rem; }
  .dash-hero-track { gap: 12px; }
  .dash-hero-accent-icon { width: 52px; height: 52px; font-size: 1.5rem; }
  .dash-hero-accent-text strong { font-size: 1.05rem; }
}

/* sec-hd sits right after the hero with no extra gap */
.dash-hero + .sec-hd,
.dash-hero + .dash-sec-hd { margin-top: 16px; }

/* ── Hero head: Dashboard title overlaid on blur when info is hidden ── */
.dash-hero-head {
  position: absolute; z-index: 3;
  top: 50%; left: 32px;
  transform: translateY(-50%);
  pointer-events: none;
}
.dash-hero-title-overlay {
  display: flex; flex-direction: column; gap: 4px;
  animation: sectionIn var(--dur-medium2) var(--ease-decel) both;
}
.dash-hero-title-overlay strong {
  font-size: 1.6rem; font-weight: 900; color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.95), 0 0 40px rgba(0,0,0,.6);
  letter-spacing: -.025em; line-height: 1;
}
.dash-hero-title-overlay span {
  font-size: .88rem; color: rgba(255,255,255,.75);
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
  font-weight: 500;
}

/* sec-hd hides its own title row when it's shown on the hero */
.dash-sec-hd--on-hero > div:first-child {
  visibility: hidden;
  height: 0; overflow: hidden; margin: 0; padding: 0;
}

/* Waiting label */
.dash-hero-waiting {
  display: flex; align-items: center; gap: 10px;
  font-size: .88rem; font-weight: 600;
  color: rgba(255,255,255,.6);
  padding: 12px 16px; border-radius: 99px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
  animation: sectionIn var(--dur-medium2) var(--ease-decel) both;
}
.dash-hero-waiting i { color: var(--accent); }

@media (max-width: 768px) {
  .dash-hero-head { left: 16px; }
  .dash-hero-title-overlay strong { font-size: 1.25rem; }
  .dash-hero-title-overlay span   { font-size: .78rem; }
}