/* ============================================
   Sonify — Core Styles
   Design system, global styles, decorative
   elements, glassmorphism, typography
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Design Tokens ────────────────────────── */
:root {
    /* Purple palette */
    --purple-50:  #faf5ff;
    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-300: #d8b4fe;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7e22ce;
    --purple-800: #6b21a8;
    --purple-900: #581c87;

    /* Accent magenta/pink for decorative arcs */
    --accent-pink: #ec4899;
    --accent-magenta: #d946ef;

    /* Dark backgrounds */
    --bg-darkest: #06060b;
    --bg-dark:    #0a0a14;
    --bg-card:    #12121e;
    --bg-card-hover: #1a1a2e;
    --bg-surface: #16162a;
    --bg-sidebar: #0c0c18;

    /* Text */
    --text-primary:   #f1f1f6;
    --text-secondary:  #a0a0b8;
    --text-muted:      #9994aa;

    /* Glows */
    --glow-purple: 0 0 20px rgba(168, 85, 247, 0.3);
    --glow-purple-strong: 0 0 40px rgba(168, 85, 247, 0.5);
    --glow-pink: 0 0 20px rgba(236, 72, 153, 0.3);

    /* Layout */
    --sidebar-width: 260px;
    --player-height: 90px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ── Global Reset & Base ──────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-darkest);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--purple-800);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--purple-600);
}

/* ── Decorative Background ────────────────── */
.app-bg-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bg-arc {
    position: absolute;
    border: 1.5px solid;
    border-radius: 50%;
    opacity: 0.12;
}

.bg-arc-1 {
    width: 800px;
    height: 800px;
    border-color: var(--accent-pink);
    top: -200px;
    left: -300px;
    transform: rotate(-15deg);
}

.bg-arc-2 {
    width: 1200px;
    height: 1200px;
    border-color: var(--purple-500);
    bottom: -400px;
    right: -400px;
    transform: rotate(10deg);
}

.bg-arc-3 {
    width: 600px;
    height: 600px;
    border-color: var(--accent-magenta);
    top: 50%;
    left: 30%;
    transform: rotate(-30deg);
    opacity: 0.06;
}

.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.bg-glow-1 {
    width: 400px;
    height: 400px;
    background: var(--purple-700);
    opacity: 0.15;
    top: 10%;
    right: 10%;
}

.bg-glow-2 {
    width: 300px;
    height: 300px;
    background: var(--accent-pink);
    opacity: 0.08;
    bottom: 20%;
    left: 5%;
}

/* ── Main Layout ──────────────────────────── */
.app-wrapper {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 24px 32px;
    padding-bottom: calc(var(--player-height) + 40px);
    min-height: 100vh;
    position: relative;
}

/* ── Content Sections ─────────────────────── */
.content-section {
    display: none;
}

.content-section.active-section {
    display: block;
    animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

/* ── Section Header ───────────────────────── */
.section-greeting {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--text-primary), var(--purple-300));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    margin-top: 36px;
}

.section-title i {
    color: var(--purple-400);
    margin-right: 8px;
}

/* ── Song Cards ───────────────────────────── */
.songs-grid, .albums-grid {
    row-gap: 24px;
}

.song-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-normal);
    border: 1px solid rgba(168, 85, 247, 0.08);
    cursor: pointer;
    position: relative;
}

.song-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(168, 85, 247, 0.25);
    transform: translateY(-4px);
    box-shadow: var(--glow-purple);
}

.song-card-cover {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background: var(--bg-surface);
}

.song-card-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.song-card:hover .song-card-cover img {
    transform: scale(1.05);
}

.play-btn-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--purple-500);
    color: #fff;
    border: none;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    transition: all var(--transition-normal);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.5);
}

.play-btn-overlay:hover {
    background: var(--purple-400);
    transform: translateY(0) scale(1.08);
}

.song-card:hover .play-btn-overlay {
    opacity: 1;
    transform: translateY(0);
}

.song-card-info {
    padding: 12px 14px 4px;
}

.song-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-card-artist {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-card-artist .bi-spotify {
    color: #1db954;
}

.song-card-actions {
    padding: 4px 14px 12px;
    display: flex;
    justify-content: flex-end;
}

/* ── Album Cards ──────────────────────────── */
.album-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-normal);
    border: 1px solid rgba(168, 85, 247, 0.08);
    cursor: pointer;
    position: relative;
}

.album-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(168, 85, 247, 0.25);
    transform: translateY(-4px);
    box-shadow: var(--glow-purple);
}

.album-card-cover {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background: var(--bg-surface);
}

.album-card-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.album-card:hover .album-card-cover img {
    transform: scale(1.05);
}

.album-card-play {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--purple-500);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    opacity: 0;
    transform: translateY(8px);
    transition: all var(--transition-normal);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.5);
}

.album-card:hover .album-card-play {
    opacity: 1;
    transform: translateY(0);
}

.album-card-info {
    padding: 12px 14px;
}

.album-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.album-card-count {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* ── Album Detail ─────────────────────────── */
.album-detail-header {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
    align-items: flex-end;
    padding: 32px;
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.12), transparent);
    border-radius: var(--radius-lg);
}

.album-detail-cover {
    width: 220px;
    height: 220px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.album-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-detail-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--purple-400);
}

.album-detail-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-primary);
    margin: 8px 0;
    line-height: 1.1;
}

.album-detail-meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.album-detail-actions {
    display: flex;
    gap: 8px;
}

/* Album song rows */
.album-song-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.album-song-row:hover {
    background: var(--bg-card-hover);
}

.album-song-num {
    width: 24px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    flex-shrink: 0;
}

.album-song-cover {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.album-song-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.album-song-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-song-artist {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.album-song-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Buttons ──────────────────────────────── */
.btn-icon {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    padding: 6px;
    cursor: pointer;
    border-radius: 50%;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    color: var(--purple-400);
    background: rgba(168, 85, 247, 0.1);
}

.btn-sonify-primary {
    background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-sonify-primary:hover {
    background: linear-gradient(135deg, var(--purple-500), var(--purple-400));
    box-shadow: var(--glow-purple);
    transform: translateY(-1px);
    color: #fff;
}

.btn-sonify-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 10px 24px;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-sonify-outline:hover {
    border-color: var(--purple-400);
    color: var(--purple-300);
    background: rgba(168, 85, 247, 0.08);
}

/* ── Empty State ──────────────────────────── */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 12px;
    display: block;
    color: var(--purple-700);
}

.empty-state.small {
    padding: 24px 16px;
}

.empty-state.small i {
    font-size: 2rem;
}

/* ── Toast Notifications ──────────────────── */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sonify-toast {
    padding: 12px 20px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    min-width: 280px;
    max-width: 420px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translateX(110%);
    transition: transform var(--transition-normal);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.sonify-toast.show {
    transform: translateX(0);
}

.sonify-toast-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.sonify-toast-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.sonify-toast-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.sonify-toast-info {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: var(--purple-300);
}

/* ── Add to Album Modal Items ─────────────── */
.add-to-album-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.add-to-album-item:hover {
    background: var(--bg-card-hover);
}

.add-to-album-item.already-added {
    opacity: 0.5;
}

.badge-added {
    font-size: 0.7rem;
    background: rgba(168, 85, 247, 0.2);
    color: var(--purple-300);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ── Search Section ───────────────────────── */
.search-bar-wrapper {
    position: relative;
    max-width: 480px;
}

.search-bar-wrapper i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.1rem;
}

.search-bar {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: var(--bg-card);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-normal);
    outline: none;
}

.search-bar::placeholder {
    color: var(--text-muted);
}

.search-bar:focus {
    border-color: var(--purple-500);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
    background: var(--bg-surface);
}

.search-result-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 16px 0;
}

/* ── Mobile menu toggle ───────────────────── */
.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1100;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid rgba(168, 85, 247, 0.2);
    color: var(--purple-400);
    font-size: 1.2rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    backdrop-filter: blur(10px);
}

.mobile-menu-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--purple-400);
}

/* ── Sidebar Overlay ──────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    backdrop-filter: blur(4px);
}

.sidebar-overlay.active {
    display: block;
}

/* ── Upload Cover Preview ─────────────────── */
#uploadCoverPreview img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-top: 8px;
    border: 2px solid rgba(168, 85, 247, 0.3);
}
/* Sonify's editorial home: layered record sleeves and diagonal light. */
:root { --sidebar-width: 224px; --bg-darkest:#0e0c14; --bg-sidebar:#100e18; --bg-card:#191620; --text-secondary:#aaa4b9; }
.main-content { min-width:0; padding:28px 38px 140px; }
body { background:radial-gradient(ellipse at 80% 0%,#21112e 0,transparent 42%),#0e0c14; }
.text-secondary,.text-muted { color:var(--text-secondary)!important; }
.sidebar-logo { padding:34px 26px 37px; gap:11px; }
.sidebar-logo-text { font-size:30px; letter-spacing:-1.5px; background:none; -webkit-text-fill-color:#fff; }
.brand-dot { color:#ba8bff; -webkit-text-fill-color:#ba8bff; }
.sidebar-logo-icon { background:#a871f4; color:#160c23; border-radius:50%; box-shadow:none; width:32px; height:32px; font-size:23px; }
.sidebar-nav { padding:0 15px; }
.sidebar-nav a { padding:13px 15px; margin-bottom:4px; font-size:13px; }
.sidebar-nav a.active { background:linear-gradient(90deg,#3d2759,#21182f); color:#e3c7ff; }
.sidebar::before { display:none; }
.sidebar-note { margin:20px 18px; padding:20px 15px; border:1px solid #372444; border-radius:12px; background:linear-gradient(135deg,#241831,#18121f); }
.sidebar-note>i { color:#c397ff; display:block; font-size:25px; margin-bottom:14px; }
.sidebar-note strong { font-size:12px; }
.sidebar-note p { font-size:11px; color:#a79ab6; line-height:1.8; margin-top:6px; }
.sidebar-note button { border:0; background:none; color:#d3afff; font-size:11px; }
.sidebar-foot { font-size:9px; color:#a79ab6; padding:0 22px 115px; display:flex; gap:7px; align-items:center; }
.sidebar-empty { font-size:11px; padding:12px; color:#8e829d; line-height:1.8; }
.search-bar { background:#19151f; border-color:#302638; font-size:12px; padding-top:13px; padding-bottom:13px; }
.search-bar-wrapper { max-width:430px; }
.section-greeting { background:none; -webkit-text-fill-color:#f6f0ff; font-size:24px; letter-spacing:-.8px; font-weight:650; }
#homeSection>.mb-4>p { font-size:12px!important; }
.btn-sonify-primary { background:#aa75f3; border-radius:8px; color:#160c22; font-size:12px; font-weight:700; padding:12px 20px; }
.btn-sonify-primary:hover { background:#c392ff; color:#160c22; }
.btn-sonify-outline { border-color:#43304f; border-radius:8px; font-size:12px; padding:11px 18px; color:#e5d7f3; }
.sonify-hero { position:relative; isolation:isolate; min-height:360px; border-radius:18px; overflow:hidden; display:flex; background:linear-gradient(115deg,#251332 0%,#261736 48%,#653586 120%); border:1px solid #51305f; margin:28px 0 32px; }
.sonify-hero:before { content:''; position:absolute; width:800px; height:800px; border:1px solid #c896ec55; border-radius:50%; left:-230px; top:-630px; z-index:-1; }
.sonify-hero:after { content:''; position:absolute; background:linear-gradient(120deg,#d3a4ff20,transparent); width:300px; height:800px; transform:rotate(32deg); right:-50px; top:-180px; z-index:-1; }
.hero-copy { padding:40px 38px; position:relative; z-index:3; width:57%; }
.eyebrow { color:#c5a6dc; font-size:9px; letter-spacing:2px; font-weight:700; display:flex; gap:8px; align-items:center; }
.live-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#b38ce2; box-shadow:0 0 10px #b38ce2; flex-shrink:0; }
.hero-copy h2 { font-size:clamp(35px,4.4vw,64px); font-weight:750; letter-spacing:-3px; line-height:1.08; margin:21px 0 16px; }
.hero-copy h2 em { font-style:normal; color:#c69aff; }
.hero-copy p { color:#bdadc9; font-size:11px; line-height:1.9; }
.hero-actions { display:flex; align-items:center; gap:20px; margin-top:24px; }
.hero-actions .btn { padding:12px 17px; }
.hero-explore { color:#ecdef8; font-size:11px; background:none; border:0; display:flex; gap:10px; align-items:center; }
.hero-caption { display:flex; gap:10px; align-items:center; margin-top:26px; font-size:9px; color:#9b85aa; }
.caption-line { height:1px; width:22px; background:#846c96; }
.hero-art { position:absolute; right:0; top:0; width:46%; height:100%; }
.hero-orbit { width:440px; height:440px; border:1px solid #bd8af866; border-radius:50%; position:absolute; left:15px; top:90px; transform:rotate(-22deg) scaleY(.75); }
.vinyl { width:275px; height:275px; position:absolute; top:37px; left:98px; border-radius:50%; background:repeating-radial-gradient(circle,#191220 0 2px,#352640 3px,#1b1523 4px); box-shadow:12px 16px 30px #0b071966,inset 0 0 35px #a078aa50; transform:rotate(25deg); }
.vinyl:after { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(transparent,#d6acfa3b,transparent 35%,transparent 55%,#d6acfa30,transparent 85%); }
.vinyl-label { position:absolute; inset:87px; background:#a36bd1; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#291435; }
.vinyl-label i { font-size:30px; }.vinyl-label small { font-size:7px; text-align:center; letter-spacing:1px; }
.floating-sleeve { position:absolute; border:1px solid #c5a0e650; border-radius:11px; overflow:hidden; box-shadow:0 18px 40px #07031080; background:#251a35; }
.floating-sleeve img { width:100%; height:100%; object-fit:cover; }
.floating-sleeve>div { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,#100b20ed); padding:30px 18px 17px; }
.floating-sleeve strong,.floating-sleeve span { display:block; }.floating-sleeve small { font-size:7px; letter-spacing:2px; color:#ead5ff; }.floating-sleeve strong { font-size:15px; margin-top:5px; }.floating-sleeve span { font-size:9px; color:#d2bfdc; }
.sleeve-main { width:204px; height:242px; top:54px; left:18px; transform:rotate(-15deg); }
.sleeve-small { width:152px; height:165px; bottom:-12px; right:24px; transform:rotate(13deg); }
.sleeve-small strong { font-size:12px; }.sleeve-small>div { padding:20px 12px 12px; }
.sound-tag { position:absolute; bottom:32px; left:0; border:1px solid #ddc4ef55; background:#392449cc; backdrop-filter:blur(12px); border-radius:7px; padding:9px 13px; font-size:9px; transform:rotate(-6deg); box-shadow:0 5px 15px #14091c; }
.sound-tag i { font-size:20px; vertical-align:middle; margin-right:7px; color:#c799ff; }
.art-star { position:absolute; top:30px; right:38px; color:#d9b8ff; font-size:35px; }
.collection-heading { display:flex; justify-content:space-between; align-items:end; margin:0 0 16px; gap:12px; }
.collection-heading h2 { font-size:20px; letter-spacing:-.6px; margin:8px 0 0; font-weight:650; }.collection-heading .eyebrow { font-size:8px; }.collection-note { font-size:10px; color:#93869f; }
.mood-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:35px; }
.mood-card { min-height:110px; color:#f4eefa; border:1px solid #65456e55; border-radius:12px; display:flex; align-items:center; justify-content:space-between; padding:20px; text-align:left; overflow:hidden; position:relative; transition:transform .2s; }.mood-card:hover { transform:translateY(-3px); }
.mood-card small { display:block; font-size:7px; letter-spacing:1.8px; color:#bea5d3; }.mood-card strong { display:block; font-size:14px; margin:7px 0 3px; font-weight:600; }.mood-card span>span { font-size:9px; color:#b5a3c2; }.mood-card>i { font-size:19px; color:#ccb6e2; margin-left:10px; }
.mood-chill { background:linear-gradient(125deg,#34234a,#221a30); }.mood-gold { background:linear-gradient(125deg,#3e293b,#231a27); }.mood-upload { background:linear-gradient(125deg,#212d3d,#1e192b); }
.section-title { font-size:20px; letter-spacing:-.5px; }.section-title>i { display:none; }
.song-card { background:transparent; border:1px solid transparent; padding:0 0 8px; border-radius:10px; overflow:visible; }.song-card:hover { background:#231a2d; box-shadow:none; transform:translateY(-4px); border-color:#493156; }
.song-card-cover { border-radius:10px; aspect-ratio:1; margin:0; }.song-card-info { padding:13px 5px 0; }.song-card-title { font-size:12px; }.song-card-artist { font-size:10px; margin-top:5px; }.song-card-actions { padding:0 3px; }.song-card-actions .btn-icon { font-size:15px; }
.play-btn-overlay { background:#c298fc; color:#21102f; width:40px; height:40px; }.song-card:focus-within .play-btn-overlay { opacity:1; transform:none; }
.album-card { border-color:#382742; }.album-detail-title { overflow-wrap:anywhere; }
.upload-note { font-size:11px; color:#b7a6c7; line-height:1.7; }
.bottom-player { transform:translateY(0); background:#15101def; border-top:1px solid #3a2947; }
.player-btn-play { background:#c198f5; color:#241231; }.progress-bar-container { width:100%; accent-color:#bd8ffa; padding:0; cursor:pointer; }.player-volume[hidden] { display:none!important; }
.empty-state { width:100%; }.sonify-toast { background:#21162d; overflow-wrap:anywhere; }.song-card-artist { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
button:focus-visible,a:focus-visible,input:focus-visible,[role=button]:focus-visible { outline:2px solid #d7b0ff; outline-offset:4px; }
@media(min-width:1600px) { .main-content { padding-left:60px; padding-right:60px; }.sonify-hero { min-height:420px; }.hero-copy { padding:48px; }.hero-art { right:8%; width:38%; transform:scale(1.1); transform-origin:center; } }