:root {
    --ink: #18151d;
    --muted: #77717f;
    --paper: #f5f2ed;
    --card: #fffdf9;
    --line: #ded8d1;
    /* --accent (red): emphasis / live / attention — sync progress, ranked highlights, YouTube action */
    --accent: #d62839;
    /* --violet (blue, despite the name): primary interactive color — links, buttons, active nav, focus */
    --violet: #004087;
    --violet-dark: #002b5c;
    --primary-soft: #e8f1fa;
    --accent-soft: #fbeaec;
    --primary-on-dark: #74b6ff;
    --accent-on-dark: #ff6977;
    --shadow: 0 20px 60px rgba(34, 26, 45, .09);
}

* { box-sizing: border-box; }
/* Any element carrying both `hidden` and a class that sets its own `display` (e.g. .button)
   would otherwise stay visible: same specificity as [hidden], but later in the cascade wins. */
[hidden] { display: none !important; }
html { color-scheme: light; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background:
        radial-gradient(circle at 88% 8%, rgba(214, 40, 57, .1), transparent 22rem),
        radial-gradient(circle at 5% 82%, rgba(0, 64, 135, .08), transparent 28rem),
        var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input { font: inherit; }
a { color: inherit; }
.text-link { color: var(--muted); text-decoration: none; font-weight: 700; }
.text-link:hover { color: var(--violet); }
.topbar {
    position: relative;
    height: 76px;
    padding: 0 clamp(20px, 5vw, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(24, 21, 29, .1);
    background: rgba(245, 242, 237, .82);
    backdrop-filter: blur(14px);
}
.brand { display: flex; gap: 10px; align-items: center; text-decoration: none; letter-spacing: .08em; }
.brand strong { font-weight: 850; }
.brand-mark { color: var(--violet); transform: rotate(45deg); }
.main-nav { display: flex; align-self: stretch; align-items: center; gap: 5px; margin: 0 auto; }.main-nav a { height: 100%; display: flex; align-items: center; padding: 0 12px; border-bottom: 3px solid transparent; color: var(--muted); font-size: .76rem; font-weight: 800; text-decoration: none; }.main-nav a:hover, .main-nav a.active { border-color: var(--violet); color: var(--ink); }
.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; }
.nav-toggle span { width: 18px; height: 2px; background: var(--ink); }
.nav-toggle[aria-expanded='true'] { border-color: var(--violet); }
.topbar-right { display: flex; align-items: center; gap: 22px; }
.session { display: flex; align-items: center; gap: 18px; }
.session form { margin: 0; }
.session-user { font-weight: 700; }
.text-button { border: 0; padding: 5px; background: none; color: var(--muted); cursor: pointer; }
.text-button:hover { color: var(--ink); }

main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 66px 0 80px; }
.login-hero { max-width: 850px; padding: 9vh 0 13vh; }
.eyebrow { margin: 0 0 12px; color: var(--violet); font-size: .72rem; font-weight: 850; letter-spacing: .18em; }
h1, h2 { margin: 0; letter-spacing: -.045em; line-height: .98; }
h1 { max-width: 950px; font-size: clamp(3rem, 7vw, 6.5rem); font-weight: 850; }
h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.hero-copy { max-width: 660px; margin: 30px 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.6; }
.privacy-note { margin: 18px 0; color: var(--muted); font-size: .85rem; }

.welcome { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 38px; }
.welcome h1 { font-size: clamp(2.8rem, 5vw, 5rem); }
.welcome > div > p:last-child { color: var(--muted); font-size: 1.08rem; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 21px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, opacity .16s ease;
}
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:disabled { opacity: .42; cursor: not-allowed; }
.button.primary { background: var(--violet); color: white; }
.button.primary:hover:not(:disabled) { background: var(--violet-dark); }
.button.spotify-button { border-color: #1ed760; background: #1ed760; color: #101010; }
.button.spotify-button:hover:not(:disabled) { background: #18b951; }
.button.secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.button.large { min-height: 58px; padding-inline: 28px; }
.button.full { width: 100%; }
.login-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.provider-pill { padding: 5px 8px; border-radius: 99px; background: var(--primary-soft); color: var(--violet); font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.provider-pill.spotify { background: #dcf8e6; color: #08752f; }
.provider-switch { color: var(--muted); font-size: .72rem; font-weight: 800; text-decoration: none; }
.provider-switch:hover { color: var(--violet); }
.source-badge { display: inline-flex; padding: 4px 7px; border-radius: 99px; background: var(--primary-soft); color: var(--violet); font-size: .66rem; font-weight: 850; white-space: nowrap; }

.notice { margin: -14px 0 24px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.notice.error { border-color: #d74f68; color: #9b253b; }
.sync-dialog { width: min(620px, calc(100% - 28px)); padding: 0; border: 1px solid var(--ink); background: var(--card); color: var(--ink); box-shadow: 0 28px 90px rgba(24, 21, 29, .28); }
.sync-dialog::backdrop { background: rgba(24, 21, 29, .58); backdrop-filter: blur(3px); }
.sync-dialog form { padding: clamp(24px, 5vw, 40px); }
.sync-dialog h2 { font-size: clamp(2rem, 5vw, 3.1rem); }
.sync-dialog-copy { margin: 18px 0 0; color: var(--muted); line-height: 1.55; }
.sync-options { margin-top: 24px; border-top: 1px solid var(--line); }
.sync-dialog-actions { justify-content: flex-end; margin-top: 25px; }
.selection-error { margin: 14px 0 0; color: #9b253b; font-weight: 700; }
.sync-progress { margin: -14px 0 24px; padding: 22px 24px; border: 1px solid var(--ink); background: var(--ink); color: white; }
.progress-copy { display: flex; align-items: start; justify-content: space-between; gap: 22px; }
.progress-copy strong { display: block; font-size: 1.12rem; }
.progress-copy span { display: block; min-height: 1.25em; margin-top: 5px; color: #aaa4b0; font-size: .9rem; }
.sync-progress .eyebrow { color: var(--primary-on-dark); }
.progress-copy b { color: var(--accent-on-dark); font-size: 1.8rem; letter-spacing: -.04em; }
.progress-track { height: 7px; margin-top: 20px; overflow: hidden; background: #39343f; }
.progress-track div { width: 0; height: 100%; background: var(--accent); transition: width .3s ease; }
.sync-progress > small { display: block; min-height: 1em; margin-top: 9px; color: #aaa4b0; }
.sync-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 18px 0 4px; padding: 0; list-style: none; counter-reset: sync-step; }.sync-steps li { position: relative; padding-top: 18px; color: #77717f; font-size: .68rem; text-align: center; }.sync-steps li::before { content: ''; position: absolute; z-index: 1; top: 0; left: calc(50% - 5px); width: 10px; height: 10px; border: 2px solid #5a5360; border-radius: 50%; background: var(--ink); }.sync-steps li::after { content: ''; position: absolute; top: 5px; right: 50%; width: 100%; height: 2px; background: #39343f; }.sync-steps li:first-child::after { display: none; }.sync-steps li.active { color: white; font-weight: 800; }.sync-steps li.active::before { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(214,40,57,.2); }.sync-steps li.done { color: #bfc2b7; }.sync-steps li.done::before, .sync-steps li.done::after { border-color: var(--accent); background: var(--accent); }
.sync-steps li[hidden] { display: none; }.sync-steps li.first-visible::after { display: none; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.stats article { padding: 26px; border-right: 1px solid var(--line); }
.stats article:last-child { border: 0; }
.stats span { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 850; letter-spacing: -.05em; }
.stats p { margin: 7px 0 0; color: var(--muted); }
.collection-strip { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 18px 22px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.collection-strip > div { display: flex; align-items: center; gap: 9px; white-space: nowrap; }.collection-strip > div > span:not(.collection-status-dot) { display: grid; gap: 3px; }.collection-strip > div small { color: var(--muted); font-size: .68rem; font-weight: 500; }.collection-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(0,64,135,.16); }
.collection-strip dl { display: flex; align-items: center; gap: clamp(20px, 4vw, 52px); margin: 0; }.collection-strip dl > div { display: flex; align-items: baseline; gap: 7px; }
.collection-strip dt { color: var(--muted); font-size: .76rem; display: grid; gap: 2px; }.collection-strip dt small { color: var(--accent); font-size: .58rem; font-weight: 800; white-space: nowrap; }.collection-strip dd { margin: 0; font-size: 1.25rem; font-weight: 850; letter-spacing: -.04em; }
.table-actions { display: flex; flex-wrap: wrap; gap: 8px; white-space: nowrap; }.youtube-action { color: var(--accent); }
.youtube-preview { display: grid; gap: 18px; }.youtube-summary { display: flex; align-items: end; justify-content: space-between; gap: 24px; }.youtube-summary label { min-width: min(420px, 100%); }.youtube-summary input, .youtube-match select { width: 100%; margin-top: 7px; }.youtube-match-list { display: grid; gap: 10px; }.youtube-match { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(320px, 1.3fr); align-items: center; gap: 24px; padding: 18px 22px; }.youtube-track-title span { color: var(--muted); font-size: .72rem; }.youtube-track-title h3 { margin: 3px 0 0; }.sticky-create { position: sticky; bottom: 12px; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 20px; color: white; background: var(--ink); box-shadow: var(--shadow); }
.dashboard-destinations { margin-top: 42px; }.dashboard-section-heading { margin-bottom: 20px; }.dashboard-section-heading h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.destination-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }.destination-card { min-height: 400px; display: flex; flex-direction: column; padding: 25px; overflow: hidden; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.destination-card > img { width: 100%; height: 125px; margin-bottom: 22px; object-fit: contain; object-position: left center; }.destination-card h3 { margin: 0; font-size: clamp(1.45rem, 2.3vw, 2.2rem); line-height: 1; letter-spacing: -.045em; }
.destination-card p:not(.eyebrow) { min-height: 62px; margin: 13px 0 20px; color: var(--muted); font-size: .84rem; line-height: 1.5; }.destination-card > a { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); color: var(--violet); font-weight: 850; text-decoration: none; }
.destination-card > a:hover span { transform: translateX(4px); }.destination-card > a span { transition: transform .16s ease; }
.destination-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }.destination-actions a { padding: 12px; border: 1px solid var(--line); color: var(--violet); font-size: .8rem; font-weight: 850; text-align: center; text-decoration: none; }.destination-actions a:hover { border-color: var(--violet); background: var(--primary-soft); }
.dashboard-quick-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; padding: 15px 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.dashboard-quick-actions span { margin-right: auto; color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.dashboard-quick-actions a { color: var(--ink); font-size: .8rem; font-weight: 800; text-decoration: none; }.dashboard-quick-actions a::after { content: ' →'; color: var(--violet); }.dashboard-quick-actions a:hover { color: var(--violet); }

.workspace-grid { display: grid; grid-template-columns: 1.55fr .85fr; gap: 22px; margin-top: 22px; }
.panel { padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.panel > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.step-badge { padding: 7px 10px; border-radius: 99px; background: var(--accent); color: white; font-size: .72rem; font-weight: 850; }
.dropzone {
    margin: 28px 0 18px;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1.5px dashed #aaa2b2;
    background: #faf8f4;
    cursor: pointer;
    text-align: center;
}
.dropzone:hover, .dropzone.has-file { border-color: var(--violet); background: var(--primary-soft); }
.dropzone input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.dropzone small { color: var(--muted); }
.upload-icon { font-size: 2rem; color: var(--violet); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.import-result { margin-top: 22px; }
.result-summary { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.result-summary span { padding: 7px 10px; background: #ece8e2; border-radius: 4px; font-size: .82rem; font-weight: 750; }
.result-summary .success { background: #e6f7bd; }
.result-summary .warning { background: #ffe6a8; }
.track-preview { max-height: 330px; overflow: auto; border-top: 1px solid var(--line); }
.track-line { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 12px 3px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.track-line small { display: block; margin-top: 3px; color: var(--muted); }
.track-line > span { color: var(--muted); text-align: right; }
.export-panel { background: var(--ink); color: white; }
.export-panel .eyebrow { color: var(--primary-on-dark); }
.export-panel p:not(.eyebrow) { color: #bdb7c3; }
.export-panel .button.secondary { margin-top: 24px; border-color: var(--accent-on-dark); color: var(--accent-on-dark); }
.export-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 20px; color: #918a98; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }

.playlists-panel { margin-top: 22px; }
.feature-links { display: grid; grid-template-columns: repeat(4, 1fr); margin: 22px 0; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.feature-links > a { min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 28px; border-right: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .18s ease, transform .18s ease; }
.feature-links > a:last-child { border-right: 0; }
.feature-links > a:hover { position: relative; z-index: 1; background: var(--primary-soft); transform: translateY(-3px); }
.feature-links h2 { margin: 5px 0 14px; font-size: clamp(1.35rem, 2vw, 2rem); }
.feature-links a div > span { color: var(--violet); font-size: .86rem; font-weight: 800; }
.feature-number { color: #aca4b1; font-size: .75rem; font-weight: 850; letter-spacing: .12em; }
.muted { color: var(--muted); }
.playlist-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; margin-top: 25px; }
.playlist-row { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); }
.playlist-art { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; background: var(--ink); color: var(--accent-on-dark); font-size: 1.2rem; }
.playlist-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.playlist-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-copy span { color: var(--muted); font-size: .85rem; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); text-decoration: none; font-weight: 800; }
.icon-button:hover { border-color: var(--violet); color: var(--violet); }
.empty-state { margin-top: 25px; padding: 30px; background: #f2eee8; color: var(--muted); text-align: center; }

.export-builder { padding-top: 54px; }
.builder-intro { max-width: 900px; margin-bottom: 42px; }
.builder-intro h1 { font-size: clamp(3rem, 6vw, 5.5rem); }
.builder-intro > p:last-child { max-width: 680px; color: var(--muted); font-size: 1.15rem; line-height: 1.6; }
.builder-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.option-list, .playlist-options { margin-top: 26px; border-top: 1px solid var(--line); }
.playlist-options { max-height: 480px; overflow: auto; }
.export-option { display: flex; align-items: center; gap: 15px; padding: 18px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.export-option:hover { background: #faf7f2; }
.export-option input { width: 21px; height: 21px; flex: 0 0 auto; accent-color: var(--violet); }
.export-option span { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.export-option small { color: var(--muted); line-height: 1.35; }
.export-option.compact { padding-block: 13px; }
.export-playlist-group + .export-playlist-group { margin-top: 18px; }
.export-group-heading { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px 8px; border-bottom: 2px solid var(--ink); color: var(--ink); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.export-group-heading span { min-width: 34px; padding: 6px 9px; border-radius: 99px; background: #e8e3dc; text-align: center; font-size: .75rem; }
.export-submit { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: center; gap: 24px; background: var(--ink); color: white; }
.export-submit .eyebrow { grid-column: 1 / -1; margin-bottom: -13px; }
.export-submit h2 { font-size: 2.2rem; }
.export-submit > p:not(.eyebrow) { margin: 0; color: #aaa4b0; }
.export-submit .button { min-width: 220px; }
.export-submit .notice { grid-column: 1 / -1; margin: 0; }
.legacy-link { grid-column: 1 / -1; color: #aaa4b0; font-size: .8rem; text-align: right; }

.library-page { width: min(1440px, calc(100% - 40px)); }
.library-intro { margin-bottom: 35px; }
.library-intro h1 { font-size: clamp(3rem, 6vw, 5.5rem); }
.library-intro > p:last-child { color: var(--muted); font-size: 1.1rem; }
.data-tabs { display: flex; gap: 5px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.data-tabs button { padding: 15px 18px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font-weight: 800; white-space: nowrap; cursor: pointer; }
.data-tabs button.active { border-color: var(--violet); color: var(--ink); }
.data-tabs span { margin-left: 6px; padding: 3px 7px; border-radius: 99px; background: #e8e3dc; font-size: .72rem; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0 14px; }
.search-field { width: min(520px, 100%); height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 15px; border: 1px solid var(--line); background: var(--card); }
.search-field:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(0, 64, 135, .12); }
.search-field span { color: var(--violet); font-size: 1.4rem; }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; }
.data-panel { border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.data-panel[hidden] { display: none !important; }
.type-filter { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.type-filter select { min-width: 150px; height: 48px; padding: 0 34px 0 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.type-filter[hidden] { display: none !important; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { position: sticky; top: 0; background: #eeeae4; color: #5d5663; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
th[data-sort] { padding-right: 27px; cursor: pointer; user-select: none; }
th[data-sort]::after { content: '↕'; position: absolute; right: 10px; color: #aaa2ae; }
th[data-direction='asc']::after { content: '↑'; color: var(--violet); }
th[data-direction='desc']::after { content: '↓'; color: var(--violet); }
tbody tr:hover { background: #faf7f2; }
tbody tr:last-child td { border-bottom: 0; }
.table-thumb { width: 36px; height: 36px; margin-right: 12px; border-radius: 4px; object-fit: cover; vertical-align: middle; background: var(--primary-soft); }
.table-thumb-round { border-radius: 50%; }
.table-action { color: var(--violet); font-weight: 800; text-decoration: none; }
.table-empty-state { padding: 34px; color: var(--muted); text-align: center; }
.table-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 22px; }
.table-pagination .button { min-height: 40px; }
.table-pagination span { min-width: 110px; color: var(--muted); text-align: center; }

.feature-page { width: min(1280px, calc(100% - 40px)); }
.feature-intro { max-width: 940px; margin-bottom: 38px; }
.headline-trait { max-width: 780px; margin-bottom: 34px; padding: 24px 28px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.headline-trait h2 { margin: 4px 0 8px; font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.headline-trait p:not(.eyebrow) { margin: 0; color: var(--muted); }
.feature-intro h1 { font-size: clamp(3rem, 6vw, 5.7rem); }
.feature-intro > p:last-child { max-width: 760px; color: var(--muted); font-size: 1.12rem; line-height: 1.6; }
.field-label { display: block; margin: 24px 0 8px; color: var(--muted); font-size: .76rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.seed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.seed-picker { min-width: 0; overflow: hidden; border: 1px solid var(--line); background: white; }
.seed-picker-title { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.seed-picker-title > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--violet); font-weight: 900; }
.artist-seeds .seed-picker-title > span { background: #e7f6f1; color: #08785f; }.album-seeds .seed-picker-title > span { background: #f4efda; color: #8b6b00; }
.seed-picker-title small { color: var(--muted); font-size: .7rem; }
.seed-search { width: calc(100% - 20px); height: 38px; margin: 10px; padding: 0 11px; border: 1px solid var(--line); background: #faf8f5; }
.seed-search:focus { border-color: var(--violet); outline: 2px solid rgba(0,64,135,.12); }
.seed-options { height: 160px; overflow: auto; border-top: 1px solid var(--line); }
.seed-option { display: flex; align-items: flex-start; gap: 8px; padding: 8px 11px; border-bottom: 1px solid #eeeae4; font-size: .76rem; line-height: 1.35; cursor: pointer; }
.seed-option:hover { background: var(--primary-soft); }.seed-option input { margin-top: 2px; accent-color: var(--violet); }
.seed-option:has(input:checked) { background: var(--primary-soft); color: var(--ink); font-weight: 700; }
.seed-chips { min-height: 45px; display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; border-top: 1px solid var(--line); }
.seed-chips:empty::before { content: 'Noch nichts ausgewählt'; align-self: center; color: var(--muted); font-size: .7rem; }
.seed-chip { max-width: 190px; flex: 0 0 auto; overflow: hidden; padding: 6px 9px; border: 0; border-radius: 99px; background: var(--ink); color: white; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.wizard-step { margin-bottom: 22px; }
.start-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0; }
.start-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--line); background: #f2eee8; text-align: left; cursor: pointer; }
.start-card:hover, .start-card.selected { border-color: var(--violet); background: var(--primary-soft); }
.start-card strong { font-size: 1rem; }
.start-card small { color: var(--muted); }
.extend-toggle { display: flex; align-items: flex-start; gap: 12px; padding: 18px; margin-top: 6px; border: 1px solid var(--line); background: #f2eee8; cursor: pointer; }
.extend-toggle input { margin-top: 3px; accent-color: var(--violet); }
.extend-toggle strong, .extend-toggle small { display: block; }
.extend-toggle small { margin-top: 5px; color: var(--muted); }
.wizard-nav { display: flex; gap: 12px; margin-top: 22px; }
.combo-picker { position: relative; margin: 20px 0; }
.combo-input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--line); background: white; color: var(--ink); }
.combo-input:focus { border-color: var(--violet); outline: 3px solid rgba(0, 64, 135, .12); }
.combo-results { position: absolute; z-index: 5; left: 0; right: 0; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-top: 0; background: white; box-shadow: var(--shadow); }
.combo-result { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 13px; border: 0; border-bottom: 1px solid #eeeae4; background: none; color: var(--ink); font-size: .84rem; text-align: left; cursor: pointer; }
.combo-result:last-child { border-bottom: 0; }
.combo-result:hover { background: var(--primary-soft); }
.combo-result-thumb { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 4px; object-fit: cover; background: var(--primary-soft); }
#wizard-step-1-artist .combo-result-thumb { border-radius: 50%; }
.goal-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.goal-presets .chip { padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; background: #f2eee8; color: var(--muted); font-size: .74rem; cursor: pointer; }
.goal-presets .chip:hover { border-color: var(--violet); background: var(--primary-soft); color: var(--violet); }
.insight-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 22px; border: 1px solid var(--line); background: var(--card); }
.insight-grid article { min-height: 135px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.insight-grid article:nth-child(4n) { border-right: 0; }
.insight-grid strong { font-size: clamp(1.65rem, 3vw, 2.8rem); }
.insight-grid span { color: var(--muted); font-size: .82rem; }
.analysis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
/* A trailing single item left over from an odd count (or from a sibling th:if not rendering)
   would otherwise sit alone in a half-empty row — let it span the full row instead. */
.analysis-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
.chart-panel h2 { margin-bottom: 26px; }
.bar-chart { display: grid; gap: 12px; }
.chart-row { display: grid; grid-template-columns: minmax(100px, 1fr) 2fr 42px; align-items: center; gap: 12px; font-size: .82rem; }
.chart-row > div { height: 9px; overflow: hidden; background: #e7e1da; }
.chart-row i { display: block; width: 0; height: 100%; background: var(--violet); transition: width .45s ease; }
.chart-row b { text-align: right; }
.ranked-albums-panel { margin-top: 22px; }
.profile-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 22px; border: 1px solid var(--line); background: var(--ink); color: white; }
.profile-strip article { min-height: 155px; display: flex; flex-direction: column; gap: 7px; padding: 22px; border-right: 1px solid #39333e; }
.profile-strip strong { color: var(--accent-on-dark); font-size: 1.65rem; }
.profile-strip span { color: #aaa4b0; font-size: .78rem; line-height: 1.45; }
.percentage-bars { display: grid; gap: 17px; margin-top: 25px; }
.percentage-bars > div { display: grid; grid-template-columns: 100px 1fr 55px; align-items: center; gap: 12px; font-size: .8rem; }
.percentage-bars i, .mini-percent i { display: block; width: 0; height: 100%; background: var(--violet); transition: width .45s ease; }
.percentage-bars > div::before { content: ''; display: none; }
.percentage-bars > div { position: relative; }
.percentage-bars > div > i { height: 9px; background: var(--violet); box-shadow: 200px 0 0 200px #e7e1da; clip-path: inset(0 -200px 0 0); }
.percentage-bars b { text-align: right; }
.metric-foot { margin-top: 24px; color: var(--muted); font-size: .8rem; }
.time-profile { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 25px; }
.time-profile div { padding: 20px; background: #f2eee8; }
.time-profile strong, .time-profile span { display: block; }
.time-profile strong { font-size: 2rem; }
.time-profile span { margin-top: 5px; color: var(--muted); font-size: .78rem; }
.time-profile p { grid-column: 1 / -1; color: var(--muted); }
.playlist-influence-panel, .version-panel { margin-top: 22px; }
.playlist-influence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 23px; }
.playlist-influence-grid article { padding: 20px; border: 1px solid var(--line); }
.playlist-influence-grid article > strong, .playlist-influence-grid article > b, .playlist-influence-grid article > span { display: block; }
.playlist-influence-grid article > strong { color: var(--violet); font-size: .75rem; letter-spacing: .08em; }
.playlist-influence-grid article > b { margin: 7px 0; font-size: 2rem; }
.playlist-influence-grid article > span { min-height: 35px; color: var(--muted); font-size: .75rem; }
.mini-percent { height: 8px; margin-top: 15px; background: #e7e1da; }
.detail-analysis-grid { margin-top: 22px; }
.affinity-list, .hidden-gem-list { max-height: 560px; margin-top: 20px; overflow: auto; border-top: 1px solid var(--line); }
.affinity-list > div, .hidden-gem-list > div { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 14px; padding: 12px 3px; border-bottom: 1px solid var(--line); }
.affinity-list span strong, .affinity-list span small, .hidden-gem-list span strong, .hidden-gem-list span small { display: block; }
.affinity-list small, .hidden-gem-list small { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.affinity-list > div > b, .hidden-gem-list > div > b { font-size: .78rem; }
.row-thumb { width: 36px; height: 36px; overflow: hidden; border-radius: 4px; background: var(--primary-soft); }
.row-thumb.round { border-radius: 50%; }
.row-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.affinity-list-actionable > div { grid-template-columns: 36px 1fr auto auto 32px; }
.row-action { display: flex; align-items: center; justify-content: center; }
.add-artist-button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--violet); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.add-artist-button:hover { background: var(--primary-soft); }
.missing-album-list { max-height: 400px; margin-top: 20px; overflow: auto; border-top: 1px solid var(--line); }
.missing-album-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 3px; border-bottom: 1px solid var(--line); }
.missing-album-row-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.missing-album-row small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; }
.missing-album-row .button { flex: 0 0 auto; min-height: 38px; padding-inline: 14px; font-size: .8rem; }
.quartiles { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; background: #f2eee8; }
.quartiles span { padding: 13px; color: var(--muted); font-size: .75rem; text-align: center; }
.quartiles b { display: block; margin-top: 4px; color: var(--ink); }
.version-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.version-chips span { min-width: 125px; display: flex; align-items: baseline; gap: 8px; padding: 13px 15px; background: #f2eee8; }
.version-chips b { font-size: 1.25rem; }
.version-chips small { color: var(--muted); }
.ranked-albums-panel > h2 { margin-bottom: 8px; }
.ranked-album-list { margin-top: 24px; border-top: 1px solid var(--line); }
.ranked-album { display: grid; grid-template-columns: 36px 40px minmax(160px, 1.3fr) 2fr 78px 90px; align-items: center; gap: 15px; padding: 15px 4px; border-bottom: 1px solid var(--line); }
.album-rank { color: #aaa2ae; font-size: .78rem; font-weight: 850; }
.album-ranking-copy { min-width: 0; }
.album-ranking-copy strong, .album-ranking-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-ranking-copy small, .album-total { margin-top: 4px; color: var(--muted); font-size: .76rem; }
.album-ranking-bar { height: 9px; overflow: hidden; background: #e7e1da; }
.album-ranking-bar i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .45s ease; }
.ranked-album > b { text-align: right; }
.album-total { text-align: right; }

.evolution-intro { display: flex; align-items: end; justify-content: space-between; gap: 28px; max-width: none; }
.evolution-intro > div { max-width: 900px; }
.range-select { min-width: 190px; display: grid; gap: 8px; color: var(--muted); font-size: .76rem; font-weight: 850; text-transform: uppercase; }
.range-select select { height: 48px; padding: 0 12px; border: 1px solid var(--line); background: var(--card); }
.evolution-empty { max-width: 850px; }
.debug-toolbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; margin: -14px 0 22px; padding: 16px 20px; border: 1px dashed var(--line); background: rgba(255,255,255,.45); }
.debug-toolbar strong, .debug-toolbar span { display: block; }.debug-toolbar span { margin-top: 3px; color: var(--muted); font-size: .76rem; }
.debug-toolbar .notice { grid-column: 1 / -1; margin: 0; }.debug-toolbar .notice.error { color: #a81732; border-color: #e0a4af; }
.evolution-empty h2 { margin: 8px 0 12px; }
.evolution-summary b { margin-left: 7px; color: var(--violet); }
.timeline-list { display: grid; gap: 12px; margin-top: 24px; }
.timeline-row { display: grid; grid-template-columns: 76px 1fr 45px; align-items: center; gap: 12px; font-size: .78rem; }
.timeline-row > div, .decade-shift > div { height: 9px; background: #e7e1da; overflow: hidden; }
.timeline-row i, .decade-shift i { display: block; width: 0; height: 100%; background: var(--violet); transition: width .4s ease; }
.metric-change { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.metric-change strong { font-size: 2rem; }.metric-change small { color: var(--violet); font-weight: 850; }
.evolution-section { margin-top: 22px; }
.change-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 25px; }
.change-columns h3 { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.change-columns h3 span { color: var(--violet); }.change-columns ul { max-height: 310px; padding: 0; overflow: auto; list-style: none; }
.change-columns li { padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: .8rem; }
.growth-list { margin-top: 20px; }.growth-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.growth-list strong, .growth-list small { display: block; }.growth-list small { margin-top: 3px; color: var(--muted); }.growth-list b { color: var(--violet); }
.decade-list { display: grid; gap: 13px; margin-top: 20px; }.decade-shift { display: grid; grid-template-columns: 54px 1fr 55px 58px; align-items: center; gap: 10px; font-size: .78rem; }.decade-shift small { color: var(--violet); text-align: right; }

.studio-link { display: inline-block; margin-top: 20px; }
.studio-page { max-width: 1320px; }
.studio-form { display: grid; gap: 18px; margin-top: 22px; }
.mode-fields { display: grid; gap: 18px; }
.studio-form [hidden] { display: none !important; }
.studio-form label { display: grid; gap: 8px; color: var(--muted); font-size: .8rem; }
.studio-form input, .studio-form select, .studio-form textarea, .studio-match select { width: 100%; padding: 12px; border: 1px solid var(--line); background: white; color: var(--ink); }
.studio-form textarea { resize: vertical; font: inherit; }
.studio-form fieldset { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 16px; border: 1px solid var(--line); }
.studio-form fieldset label { display: flex; align-items: center; gap: 7px; }
.studio-form fieldset input { width: auto; }
.studio-form .familiarity-control input[type="range"] { padding: 0; border: 0; accent-color: var(--violet); }
.familiarity-control small { display: flex; justify-content: space-between; color: var(--muted); }
.familiarity-control small b { color: var(--ink); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.studio-match-list { margin: 20px 0; border-top: 1px solid var(--line); }
.studio-match { display: grid; grid-template-columns: 1fr minmax(210px, .8fr); align-items: center; gap: 15px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.studio-match strong, .studio-match small { display: block; }
.studio-match small { margin-top: 4px; color: var(--muted); }
.studio-match.unresolved { opacity: .65; }
.import-mode { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; }
.import-mode label { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border: 1px solid var(--line); background: #f2eee8; font-size: .8rem; cursor: pointer; }
.import-mode input { accent-color: var(--violet); }
.import-mode small { color: var(--violet); font-weight: 750; }
.json-text-label { display: grid; gap: 8px; margin-bottom: 14px; color: var(--muted); font-size: .8rem; }
.json-text-label textarea { width: 100%; min-height: 260px; padding: 14px; resize: vertical; border: 1px solid var(--line); background: white; color: var(--ink); font: .82rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.prompt-fallback { margin-top: 14px; color: var(--muted); font-size: .8rem; }
.prompt-fallback summary { cursor: pointer; color: var(--violet); font-weight: 750; }
.prompt-fallback textarea { width: 100%; margin-top: 10px; padding: 14px; resize: vertical; border: 1px solid var(--line); background: white; color: var(--ink); font: .82rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.existing-playlist-control { display: grid; gap: 8px; margin-top: 16px; color: var(--muted); font-size: .8rem; }
.existing-playlist-control select { width: 100%; padding: 12px; border: 1px solid var(--line); background: white; }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 26px clamp(20px, 5vw, 72px); border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }

@media (max-width: 780px) {
    main { width: min(100% - 28px, 1180px); padding-top: 42px; }
    .welcome { align-items: stretch; flex-direction: column; }
    .collection-strip { align-items: stretch; flex-direction: column; }.collection-strip dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }.destination-grid { grid-template-columns: 1fr; }.destination-card { min-height: 340px; }.dashboard-quick-actions { align-items: flex-start; flex-direction: column; }.dashboard-quick-actions span { margin: 0 0 3px; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stats article:nth-child(2) { border-right: 0; }
    .stats article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .workspace-grid, .playlist-list, .form-grid { grid-template-columns: 1fr; }
    .studio-match { grid-template-columns: 1fr; }
    .feature-links, .analysis-grid { grid-template-columns: 1fr; }
    .feature-links > a { min-height: 175px; border-right: 0; border-bottom: 1px solid var(--line); }
    .feature-links > a:last-child { border-bottom: 0; }
    .insight-grid { grid-template-columns: repeat(2, 1fr); }
    .insight-grid article:nth-child(odd) { border-right: 1px solid var(--line); }
    .insight-grid article:nth-child(even) { border-right: 0; }
    .playlist-create-bar { grid-template-columns: 1fr; }
    .suggestion-row { grid-template-columns: auto 1fr; }
    .suggestion-row > span:last-child { grid-column: 2; }
    .artist-suggestion { grid-template-columns: 1fr auto; }
    .seed-grid, .start-grid { grid-template-columns: 1fr; }
    .playlist-influence-grid { grid-template-columns: 1fr; }
    .evolution-intro { align-items: stretch; flex-direction: column; }.change-columns { grid-template-columns: 1fr; }.debug-toolbar { grid-template-columns: 1fr; }
    .ranked-album { grid-template-columns: 28px 32px 1fr 70px; }
    .album-ranking-bar { grid-column: 2 / -1; grid-row: 2; }
    .album-total { display: none; }
    .builder-layout { grid-template-columns: 1fr; }
    .export-submit { grid-template-columns: 1fr; }
    .export-submit .eyebrow, .export-submit .notice, .legacy-link { grid-column: auto; }
    .topbar { height: 66px; padding-inline: 16px; }
    .nav-toggle { display: flex; }
    .main-nav {
        display: none;
        position: absolute;
        z-index: 20;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 8px 16px 16px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
    }
    .main-nav.open { display: flex; }
    .main-nav a { height: auto; padding: 14px 4px; border-bottom: 1px solid var(--line); }
    .main-nav a:last-child { border-bottom: 0; }
    .session-user { display: none; }
    footer { flex-direction: column; }
    .library-page { width: min(100% - 20px, 1440px); }
    .table-toolbar { align-items: stretch; flex-direction: column; }
    .search-field { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}