@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg-1: #f7f7f9;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f7f7f9;
  --surface-raised: #ffffff;
  --text: #0f0f13;
  --text-muted: #6b6b80;
  --text-subtle: #9898aa;
  --border: rgba(0,0,0,0.07);
  --border-strong: rgba(0,0,0,0.12);
  --accent: #6d28d9;
  --accent-soft: rgba(109,40,217,0.10);
  --accent-text: #6d28d9;
  --app-bg: #f7f7f9;
  --beat-pulse: 0;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.07),0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.10),0 4px 12px rgba(0,0,0,0.06);
}

*,*::before,*::after{box-sizing:border-box;}
html{overflow:hidden;height:100%;}
html,body{font-family:'DM Sans',system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{overflow:hidden;height:100%;background:var(--app-bg);color:var(--text);transition:background 0.4s ease,color 0.2s ease;}

/* ── Accessibility: visible focus ring for keyboard users ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm);}

/* ── Touch targets: all interactive elements min 44×44px on mobile ── */
@media(max-width:767px){
  button,a,[role="button"]{min-height:44px;min-width:44px;}
  .ym-btn{min-height:44px;}
  .ym-btn-sm{min-height:38px;}
  .ym-btn-icon{min-height:44px;min-width:44px;width:44px;height:44px;}
}

.ym-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.ym-card-raised{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);}
.ym-label{font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-subtle);}
.ym-heading-xl{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-0.02em;line-height:1.1;color:var(--text);}
.ym-heading-lg{font-size:clamp(20px,3vw,26px);font-weight:700;letter-spacing:-0.015em;line-height:1.2;color:var(--text);}
.ym-heading-md{font-size:18px;font-weight:700;letter-spacing:-0.01em;color:var(--text);}
.ym-heading-sm{font-size:15px;font-weight:600;letter-spacing:-0.005em;color:var(--text);}
.ym-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--radius-md);font-size:13px;font-weight:700;letter-spacing:0.01em;border:none;cursor:pointer;transition:transform 0.12s,opacity 0.15s,background 0.15s,box-shadow 0.15s;white-space:nowrap;-webkit-tap-highlight-color:transparent;font-family:inherit;position:relative;overflow:hidden;user-select:none;}
.ym-btn:active{transform:scale(0.96);}
.ym-btn:disabled{opacity:0.45;cursor:not-allowed;pointer-events:none;}
.ym-btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(109,40,217,0.25);}
.ym-btn-primary:hover{opacity:0.88;box-shadow:0 4px 14px rgba(109,40,217,0.35);}
.ym-btn-ghost{background:var(--surface-alt);color:var(--text);border:1px solid var(--border);}
.ym-btn-ghost:hover{background:var(--surface);border-color:var(--border-strong);}
.ym-btn-danger{background:#ef4444;color:#fff;box-shadow:0 2px 8px rgba(239,68,68,0.25);}
.ym-btn-danger:hover{opacity:0.88;}
.ym-btn-sm{padding:7px 14px;font-size:12px;border-radius:var(--radius-sm);}
.ym-btn-icon{width:36px;height:36px;padding:0;border-radius:var(--radius-sm);}
.ym-btn-icon-lg{width:44px;height:44px;padding:0;border-radius:var(--radius-md);}
.ym-btn-icon-round{border-radius:50%;}
.ym-input{width:100%;background:var(--surface-alt);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:12px 16px;font-size:14px;font-weight:500;color:var(--text);font-family:inherit;outline:none;transition:border-color 0.15s,box-shadow 0.15s,background 0.15s;-webkit-appearance:none;}
.ym-input::placeholder{color:var(--text-subtle);}
.ym-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--surface);}
.ym-input:disabled{opacity:0.5;cursor:not-allowed;}
.ym-input.error{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,0.12);}
.ym-input.success{border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,0.12);}
.ym-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:0.04em;}
.ym-badge-accent{background:var(--accent-soft);color:var(--accent-text);}
.ym-badge-danger{background:rgba(239,68,68,0.1);color:#dc2626;}
.ym-badge-warning{background:rgba(245,158,11,0.1);color:#d97706;}
.ym-badge-success{background:rgba(34,197,94,0.1);color:#16a34a;}
.ym-badge-neutral{background:var(--surface-alt);color:var(--text-muted);border:1px solid var(--border);}
.ym-divider{height:1px;background:var(--border);margin:0;}
.ym-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.ym-see-all{font-size:12px;font-weight:700;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:6px 10px;border-radius:var(--radius-sm);transition:color 0.15s,background 0.15s;}
.ym-see-all:hover{color:var(--accent);background:var(--accent-soft);}
.ym-dropdown{position:absolute;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:6px;z-index:8000;min-width:200px;}
.ym-dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text);cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:background 0.1s;font-family:inherit;}
.ym-dropdown-item:hover{background:var(--surface-alt);}
.ym-dropdown-item.danger{color:#ef4444;}
.ym-dropdown-item.danger:hover{background:rgba(239,68,68,0.08);}
.ym-dropdown-item.success{color:#16a34a;}
.ym-dropdown-item.success:hover{background:rgba(34,197,94,0.08);}
.ym-stat-block{text-align:center;}
.ym-stat-num{font-size:22px;font-weight:800;letter-spacing:-0.02em;color:var(--text);line-height:1;}
.ym-stat-label{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-subtle);margin-top:4px;}
.ym-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px;text-align:center;gap:12px;}
.ym-empty-icon{width:52px;height:52px;border-radius:var(--radius-md);background:var(--surface-alt);display:flex;align-items:center;justify-content:center;color:var(--text-subtle);margin-bottom:4px;}
.ym-empty-title{font-size:16px;font-weight:700;color:var(--text);}
.ym-empty-sub{font-size:13px;font-weight:500;color:var(--text-muted);max-width:260px;}
.ym-skeleton{background:linear-gradient(90deg,var(--surface-alt) 25%,var(--border) 50%,var(--surface-alt) 75%);background-size:200% 100%;animation:ym-shimmer 1.4s ease infinite;border-radius:var(--radius-sm);}
@keyframes ym-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.ym-art{border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-alt);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-subtle);}
.ym-art img{width:100%;height:100%;object-fit:cover;display:block;}
.ym-play-btn{width:40px;height:40px;border-radius:50%;background:var(--text);color:var(--bg-1);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;flex-shrink:0;transition:transform 0.15s,background 0.15s;}
.ym-play-btn:hover{background:var(--accent);transform:scale(1.06);}
.ym-play-btn.playing{background:var(--accent);}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{transition:none!important;animation:none!important;}

/* ── Card improvements ── */
.ym-card{transition:box-shadow 0.2s;}
.ym-card-interactive{cursor:pointer;}
.ym-card-interactive:hover{box-shadow:var(--shadow-md);}

/* ── Mobile typography ── */
@media(max-width:767px){
  .ym-heading-xl{font-size:clamp(22px,6vw,32px);}
  .ym-heading-lg{font-size:clamp(18px,5vw,22px);}
  .ym-heading-md{font-size:16px;}
  html,body{font-size:15px;}
}

/* ── Password strength bar ── */
.pw-strength-bar{height:3px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:6px;}
.pw-strength-fill{height:100%;border-radius:2px;transition:width 0.3s,background 0.3s;}

/* ── Rate-limit feedback ── */
.ym-rate-limit-msg{font-size:12px;font-weight:600;color:#d97706;text-align:center;padding:6px 12px;background:rgba(245,158,11,0.08);border-radius:var(--radius-sm);border:1px solid rgba(245,158,11,0.2);}

/* ── Improved scrollbar (desktop) ── */
@media(min-width:768px){
  ::-webkit-scrollbar{width:6px;height:6px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--text-subtle);}
}

/* ── Liquid glass components ── */
.ym-glass{background:rgba(255,255,255,0.08);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-lg);}
.ym-glass-light{background:rgba(255,255,255,0.65);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,0.55);border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,0.07),inset 0 1px 0 rgba(255,255,255,0.8);}
.ym-glass-dark{background:rgba(0,0,0,0.22);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.06);}
.ym-glass-card{background:rgba(255,255,255,0.72);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);border:1px solid rgba(255,255,255,0.6);border-radius:var(--radius-xl);box-shadow:0 12px 48px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.9);}
.dark .ym-glass-card{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.10);box-shadow:0 12px 48px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.06);}
.ym-frosted{background:var(--surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius-lg);}
/* Apply glass to player bar in dynamic dark mode */
.theme-dynamic #global-player-bar{backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);}
.theme-dynamic .ym-card{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.theme-dynamic .ep-uploader-card{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}

/* ═══════════════════════════════════════════════════════
   MOBILE — comprehensive responsive improvements
   ═══════════════════════════════════════════════════════ */

/* ── Smooth scroll on every scrollable element ── */
html{scroll-behavior:smooth;}
#main-scroll,#sidebar,.overflow-y-auto,[class*="overflow-y"]{-webkit-overflow-scrolling:touch;}

/* ── Touch devices: show hover-only controls ──
   Track rows hide action buttons behind :hover.
   On touch screens there is no hover, so force them visible. */
@media (hover:none) and (pointer:coarse){
  .group-hover\:flex{display:flex!important;}
  .group-hover\:block{display:block!important;}
  /* Hide the track-number span that swaps out for the play button on hover */
  .group-hover\:hidden{display:none!important;}
  /* Shrink action icon buttons slightly so they don't crowd the row */
  .act-play,.act-queue,.act-share,[class*="act-"]{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;}
}

/* ── Mobile layout ── */
@media (max-width:767px){
  /* App content: tighter padding on small screens */
  #app-content{padding:1rem 1rem 5rem!important;}

  /* Hero card: reduce padding so content isn't squeezed */
  .lg-hero{padding:22px 18px!important;}

  /* Section header: tighter spacing */
  .ym-section-header{margin-bottom:12px;}

  /* Cards: slightly smaller radius on mobile */
  .ym-card,.ym-card-raised{border-radius:var(--radius-md);}

  /* Dropdowns: prevent overflow; clamp to viewport width */
  .ym-dropdown{
    min-width:min(220px,calc(100vw - 32px))!important;
    max-width:calc(100vw - 32px)!important;
  }
  /* Taller dropdown items for easier tapping */
  .ym-dropdown-item{padding:13px 14px;min-height:44px;}

  /* Tab bars: allow horizontal scroll if tabs overflow */
  .ym-tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap!important;-ms-overflow-style:none;}
  .ym-tab-bar::-webkit-scrollbar{display:none;}

  /* Stat blocks: reduce number size */
  .ym-stat-num{font-size:18px;}

  /* Toast: clear the player bar at bottom */
  .toast-pill{bottom:calc(var(--player-h,90px) + var(--nav-h,56px) + 8px);}

  /* Skip/back buttons in mobile player: larger hit area via padding */
  #global-player-bar .w-9{min-width:44px;min-height:44px;width:44px;height:44px;}

  /* Headings a touch smaller on very narrow screens */
  .ym-heading-xl{font-size:clamp(24px,7vw,34px);}
  .ym-heading-lg{font-size:clamp(19px,5.5vw,24px);}

  /* Period selector pills: allow horizontal scroll */
  .top-period-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;}
  .top-period-wrap::-webkit-scrollbar{display:none;}

  /* Ensure grid cards don't shrink text to illegible sizes */
  .grid .text-sm{font-size:12px;}
  .grid .text-xs{font-size:11px;}

  /* Section spacing */
  .space-y-12>*+*{margin-top:2.5rem!important;}
}

/* ── Touch: disable hover-triggered scale (profile/artist cards) ── */
@media (hover:none) and (pointer:coarse){
  .group-hover\:scale-\[1\.03\]{transform:none!important;}
  /* Active state still gives feedback */
  .group:active .group-hover\:scale-\[1\.03\]{transform:scale(1.02)!important;}
  /* Avatar images in cards: always full-cover, never squish */
  .aspect-square img{width:100%!important;height:100%!important;object-fit:cover!important;}
}

/* ── Mobile (≤767px) ── */
@media (max-width:767px){
  /* Page headings: don't let sort bars push title off screen */
  .flex.items-end.justify-between.gap-4.flex-wrap{flex-direction:column;align-items:flex-start;}

  /* Profile header: stack avatar + name + actions neatly */
  #profile-actions{flex-wrap:wrap;gap:8px;}

  /* Sort/filter rows: wrap instead of overflow */
  .ym-tab-bar{flex-wrap:wrap;}
  .sort-btn,.alb-sort,.req-filter-btn{flex-shrink:0;}

  /* Cards in rows (track lists): prevent text overflow */
  .track-entry{padding:14px!important;}

  /* Upload cover card: full width below track form */
  #cover-card{margin-top:0;}

  /* Player bar touch targets: don't let min-height rule inflate the bar */
  #global-player-bar button{min-height:unset;min-width:unset;}
  #global-player-bar a{min-height:unset;min-width:unset;}

  /* Queue sheet: nice height */
  #queue-sheet{max-height:75vh;}

  /* Modals: full width on small screens */
  .ym-card.p-5.space-y-4.w-full.max-w-md{max-width:100%;margin:0 12px;}
}

/* ── Tablet and below (≤639px) ── */
@media (max-width:639px){
  /* Library header */
  #library-count{display:block;text-align:center;}
  #lib-sort-bar{justify-content:center;flex-wrap:wrap;gap:6px;}

  /* Upload form: single column */
  .meta-bar{grid-template-columns:1fr!important;}

  /* Page headers: centre the label+title block */
  .ym-heading-xl{font-size:clamp(22px,6vw,32px);}

  /* Users/Artists/Albums page header: request button + sort wrap to new line */
  .flex.items-center.gap-3.flex-wrap{justify-content:flex-start;}

  /* Stat bars (profile metrics) */
  #metrics-section .grid{grid-template-columns:repeat(2,1fr)!important;}

  /* Edit track: single column on mobile */
  #et-main .grid.grid-cols-1.lg\\:grid-cols-3{grid-template-columns:1fr!important;}
}

/* ── Very small screens (≤360px) ── */
@media (max-width:360px){
  #app-content{padding:0.75rem 0.75rem 5rem!important;}
  .lg-hero{padding:18px 14px!important;}
  .ym-btn{padding:9px 14px;font-size:12px;}
  .ym-btn-sm{min-height:36px;padding:7px 12px;font-size:11px;}
  /* Grids stay 2-col even at 320px */
  .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  /* Headings */
  .ym-heading-xl{font-size:22px!important;}
  .ym-heading-lg{font-size:18px!important;}
  /* Player bar buttons: tighten up */
  #global-player-bar .w-10{width:36px!important;height:36px!important;}
  #global-player-bar .w-11{width:38px!important;height:38px!important;}
  /* Crop / request modals: tighter padding */
  #et-crop-modal .ym-card,#crop-modal .ym-card,#global-request-modal>div{padding:16px!important;}
}

/* ════════════════════════════════════════════════════════════════
   MOBILE PASS v2 — additional responsive fixes
   ════════════════════════════════════════════════════════════════ */

/* Prevent horizontal scroll from stray overflow */
html,body{max-width:100vw;overflow-x:hidden;}

/* Smooth momentum scroll + remove tap flash */
html{-webkit-tap-highlight-color:transparent;}

/* ── iOS: prevent input zoom on focus (inputs < 16px trigger auto-zoom) ── */
@media (max-width:767px){
  .ym-input,
  input[type="text"],input[type="email"],input[type="password"],
  input[type="search"],input[type="tel"],input[type="url"],
  input[type="number"],input[type="date"],textarea,select{
    font-size:16px!important;
  }
  .ym-input{padding:12px 14px;}
}

/* ── Profile header: full-width split buttons on small phones ── */
@media (max-width:639px){
  #profile-actions{width:100%;justify-content:stretch;flex-wrap:wrap;}
  #profile-actions .ym-btn{flex:1 1 calc(50% - 4px);min-width:0;justify-content:center;}
}

/* ── Modals → bottom sheets on phones ── */
@media (max-width:639px){
  #alb-modal,#ar-modal,#crop-modal,
  #alb-crop-modal,#ar-crop-modal,#et-crop-modal,#req-action-modal{
    align-items:flex-end!important;
    padding:0!important;
  }
  #alb-modal>.ym-card,
  #ar-modal>.ym-card,
  #crop-modal>.ym-card,
  #alb-crop-modal>.ym-card,
  #ar-crop-modal>.ym-card,
  #et-crop-modal>.ym-card{
    max-width:100%!important;
    width:100%!important;
    margin:0!important;
    border-radius:24px 24px 0 0!important;
    max-height:92vh!important;
    overflow-y:auto;
    padding-bottom:max(24px,env(safe-area-inset-bottom))!important;
    animation:ym-sheet-up 0.22s ease-out;
  }
}
@keyframes ym-sheet-up{from{transform:translateY(100%);}to{transform:translateY(0);}}

/* ── Lightbox modals: tighter padding on phones ── */
@media (max-width:639px){
  #lightbox-modal,#avatar-viewer-modal,#share-lightbox-modal{padding:12px!important;}
}

/* ── Settings: tighten card padding on phones ── */
@media (max-width:639px){
  .set-card{padding:18px!important;border-radius:20px!important;}
  .set-head-icon{width:34px!important;height:34px!important;}
  .preview-box{padding:16px!important;gap:10px!important;}
  .preview-art{width:56px!important;height:56px!important;}
  .mode-btn{padding:12px 6px!important;}
  .mode-swatch{width:36px!important;height:36px!important;}
  .preset-card{padding:12px 10px!important;}
  .color-row{flex-wrap:wrap;}
}

/* ── Library tab bar: scroll horizontally on phones ── */
@media (max-width:639px){
  .ym-tab-bar{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%;}
  .ym-tab-bar::-webkit-scrollbar{display:none;}
  .ym-tab-bar .tab-btn{flex-shrink:0;}
}

/* ── Upload: tighter dropzone and type cards ── */
@media (max-width:639px){
  .dropzone{padding:24px 16px!important;}
  .type-card{padding:18px 12px!important;}
  .type-icon{width:42px!important;height:42px!important;}
  .icon-mode-btn{font-size:10px!important;padding:9px 6px!important;}
}

/* ── Mobile tweaks: bigger tap targets, no horizontal overflow, native
   tap highlight off, smoother momentum scroll. ─────────────────────── */
@media (max-width:767px){
  html, body { max-width:100vw; overflow-x:hidden; }
  button, .ym-btn, [role="button"] { min-height:38px; }
  /* Tighten inline-style 32px icon buttons up to 40 so they're reachable. */
  .ym-btn-icon[style*="width:30px"],
  .ym-btn-icon[style*="width:32px"] { min-width:40px!important; min-height:40px!important; }
  input, textarea, select { font-size:16px; }  /* iOS won't zoom on focus when ≥16 */
}

/* ── Reveal animations ─ list/grid items fade-up the first time they
   enter the viewport.  Triggered by an IntersectionObserver that adds
   the .ym-revealed class.  Stagger via :nth-child delays.  Skipped
   under .reduce-motion for accessibility. */
.ym-reveal{opacity:0;transform:translateY(12px);transition:opacity 0.45s cubic-bezier(.32,.72,.36,1), transform 0.45s cubic-bezier(.32,.72,.36,1);}
.ym-reveal.ym-revealed{opacity:1;transform:none;}
.ym-reveal:nth-child(2){transition-delay:.04s;}
.ym-reveal:nth-child(3){transition-delay:.08s;}
.ym-reveal:nth-child(4){transition-delay:.12s;}
.ym-reveal:nth-child(5){transition-delay:.16s;}
.ym-reveal:nth-child(6){transition-delay:.20s;}
.ym-reveal:nth-child(7){transition-delay:.24s;}
.ym-reveal:nth-child(8){transition-delay:.28s;}
.ym-reveal:nth-child(n+9){transition-delay:.32s;}
.reduce-motion .ym-reveal{opacity:1!important;transform:none!important;transition:none!important;}

/* ── Skeleton shimmer loaders ───────────────────────────────────────
   Use .ym-skel as the base; .ym-skel-row for a row layout that mirrors
   a library/profile track card.  Reduce-motion disables the animation. */
@keyframes ym-shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
.ym-shimmer{background:linear-gradient(90deg,var(--surface-alt) 0%,var(--surface-raised) 50%,var(--surface-alt) 100%);background-size:200% 100%;animation:ym-shimmer 1.4s linear infinite;}
.ym-skel{border-radius:6px;background:linear-gradient(90deg,var(--surface-alt) 0%,var(--surface-raised) 50%,var(--surface-alt) 100%);background-size:200% 100%;animation:ym-shimmer 1.4s linear infinite;}
.reduce-motion .ym-skel,.reduce-motion .ym-shimmer{animation:none;}
.ym-skel-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-lg);background:var(--surface-alt);border:1px solid var(--border);}
.ym-skel-row .a{width:40px;height:40px;border-radius:10px;flex-shrink:0;}
.ym-skel-row .t{flex:1;display:flex;flex-direction:column;gap:6px;}
.ym-skel-row .t .l1{height:12px;width:60%;}
.ym-skel-row .t .l2{height:10px;width:40%;}
.ym-skel-card{aspect-ratio:1/1;border-radius:var(--radius-lg);}
/* Helper: window.ymRenderSkeleton(container, count, 'row'|'card') paints
   N placeholders into `container`.  Defined in index.html. */

/* Page transition fade — applied to #app-content during loadView. */
.ym-page-fade-out{opacity:0;transform:translateY(-4px);transition:opacity 0.18s ease-out,transform 0.18s ease-out;}
.ym-page-fade-in{animation:ym-page-in 0.32s cubic-bezier(.32,.72,.36,1);}
@keyframes ym-page-in{0%{opacity:0;transform:translateY(8px);}100%{opacity:1;transform:none;}}

/* ── Dynamic-mode contrast.  In dynamic mode every surface is a deep
   album tint, so any element painted with accent-soft bg + accent text
   collapses into a near-invisible blob (accent-on-accent).  These
   overrides repaint every common "active pill" pattern with a SOLID
   accent fill + pure-white text so labels stay legible on every
   album-tinted background. ───────────────────────────────────────── */
.theme-dynamic .ym-btn-primary,
.theme-dynamic .lib-tab.active,
.theme-dynamic .alb-sort[style*="accent-soft"],
.theme-dynamic .ar-sort[style*="accent-soft"],
.theme-dynamic [class*="bg-[var(--accent-soft)]"],
.theme-dynamic [style*="background:var(--accent-soft)"]:not(.ym-card):not(.ym-input):not(input):not(textarea),
.theme-dynamic .ym-tab.active,
.theme-dynamic .nav-btn.active{
  background:var(--accent)!important;
  color:#fff!important;
  border-color:var(--accent)!important;
}
.theme-dynamic .ym-btn-primary i,
.theme-dynamic .lib-tab.active i{color:inherit!important;}
.theme-dynamic .ym-dropdown-item{color:#f5f5fa!important;}
.theme-dynamic .ym-dropdown-item.danger{color:#fda4a4!important;}

/* Play button in dynamic mode: --text often collapses into the album tint.
   Force a high-contrast white pill with a dark icon so it's always visible
   on any background, and accent on hover/playing for the obvious affordance. */
.theme-dynamic .ym-play-btn,
.theme-dynamic .library-play-btn{background:#fff!important;color:#0a0a0c!important;box-shadow:0 2px 10px rgba(0,0,0,0.35)!important;}
.theme-dynamic .ym-play-btn:hover,
.theme-dynamic .library-play-btn:hover{background:var(--accent)!important;color:#fff!important;}
.theme-dynamic .ym-play-btn.playing,
.theme-dynamic .library-play-btn.playing{background:var(--accent)!important;color:#fff!important;}

/* Sidebar avatar tile + profile-page avatar can land on a background that
   matches --accent-soft, making the picture invisible.  Give them a solid
   dark border + slight shadow so they're always framed. */
.theme-dynamic #sidebar-username-card,
.theme-dynamic [id^="profile-avatar"],
.theme-dynamic .ym-art{box-shadow:0 0 0 1px rgba(0,0,0,0.35),0 4px 12px rgba(0,0,0,0.25)!important;}
/* Star/like icons rendered with accent colour disappear over album-tint
   too — force a saturated yellow so liked = clearly visible. */
.theme-dynamic .act-like[style*="color: rgb(245, 158, 11)"],
.theme-dynamic [data-like-id][style*="color: rgb(245, 158, 11)"]{color:#fbbf24!important;}

/* ── Critical Tailwind utilities — fallback so the layout doesn't collapse
   if cdn.tailwindcss.com is slow / blocked / JIT misses dynamically
   inserted classes (the "everything stacked on top of each other"
   bug on Home + Search was this). ─────────────────────────────────── */
.grid{display:grid;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}
.aspect-square{aspect-ratio:1/1;}
.aspect-video{aspect-ratio:16/9;}
.gap-1{gap:0.25rem;}.gap-2{gap:0.5rem;}.gap-3{gap:0.75rem;}.gap-4{gap:1rem;}.gap-5{gap:1.25rem;}.gap-6{gap:1.5rem;}
@media (min-width:480px){.\[\@media\(min-width\:440px\)\]\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (min-width:768px){
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
}
@media (min-width:1024px){
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}
}

/* ── Dropdowns → fixed bottom sheet on phones so they can't be clipped ── */
@media (max-width:767px){
  /* Keep .hidden working: our mobile rule below uses `display:flex !important`
     which would otherwise beat Tailwind's `.hidden{display:none}`. */
  .ym-dropdown.hidden{display:none!important;}
  .ym-dropdown{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    top:auto!important;
    bottom:calc(150px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    max-width:none!important;
    /* Constrain vertical size so long menus don't get cut off at the
       top — they scroll internally instead. */
    max-height:min(60vh, calc(100vh - 230px))!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:20px!important;
    padding:8px!important;
    box-shadow:0 -8px 32px rgba(0,0,0,0.35),0 8px 28px rgba(0,0,0,0.18)!important;
    z-index:9500!important;
    /* Items always laid out as a column with full-width hit targets,
       regardless of whatever utility classes they came in with. */
    display:flex!important;
    flex-direction:column!important;
    gap:1px;
  }
  .ym-dropdown:not(.hidden)::before{
    content:"";position:sticky;top:4px;align-self:center;
    width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,0.35);
    pointer-events:none;flex-shrink:0;margin-bottom:6px;
  }
  /* Make every direct-child item full-width and tappable; clear any
     inline width/right/top set by the desktop popover code. */
  .ym-dropdown > .ym-dropdown-item,
  .ym-dropdown > button.ym-dropdown-item{
    width:100%!important;
    padding:15px 16px!important;
    font-size:14px!important;
    min-height:48px!important;
    border-radius:12px!important;
    text-align:left!important;
    flex-shrink:0;
  }
  /* Dividers inside dropdown */
  .ym-dropdown .ym-divider{margin:4px 6px!important;flex-shrink:0;}
  /* Backdrop — added by JS when any ym-dropdown opens; tap closes everything. */
  .ym-dropdown-backdrop{
    position:fixed;inset:0;z-index:9400;background:rgba(0,0,0,0.45);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  }
  /* Bump 3-dot toggle buttons up to 44x44 minimum on mobile. */
  .act-menu-toggle, [class*="ym-btn-icon"]{min-width:38px!important;min-height:38px!important;}
}

/* ── Home hero: stack buttons full-width on phones ── */
@media (max-width:639px){
  .lg-hero{padding:24px 18px!important;}
  .lg-hero h1{font-size:clamp(28px,8vw,40px)!important;}
  .lg-hero p{font-size:14px!important;}
  .lg-hero .ym-btn{flex:1 1 100%!important;justify-content:center;}
}

/* ── Card grids: tighter gap on phones ── */
@media (max-width:639px){
  .grid.gap-4{gap:12px!important;}
  .grid.gap-6{gap:16px!important;}
  .ym-card .truncate{max-width:100%;}
}

/* ── Tap targets: 44×44 minimum on icon buttons ── */
@media (max-width:767px){
  .ym-btn-icon{min-width:44px;min-height:44px;}
  .act-menu-toggle{min-width:44px;min-height:44px;}
}

/* ── Share view: stat blocks wrap on small screens ── */
@media (max-width:639px){
  #share-card .flex.items-center.gap-6{gap:14px!important;flex-wrap:wrap;}
  #share-card .ym-stat-block{flex:1 0 calc(50% - 12px);min-width:0;}
}

/* ── iOS safe-area: extend player bar background into home-indicator zone ── */
@supports (padding-bottom: env(safe-area-inset-bottom)){
  @media (max-width:767px){
    #bottom-stack{padding-bottom:env(safe-area-inset-bottom,0px);}
  }
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}