/* ============================================================================
   Music Archive — design system
   ----------------------------------------------------------------------------
   Ported from the Claude Design canvas. One token set drives both themes:
   `:root` carries dark (the default), `[data-ma-theme="light"]` overrides only
   the values that change. Nothing below reads a Tailwind utility, so the whole
   look can be retuned from the token block alone.

   Tailwind is still loaded for the older modal markup in Shell.js; the `ma-*`
   classes here own every surface that was redesigned.
   ========================================================================== */

:root {
    --size-400: 400px;
    --size-260: 260px;
    --size-380: 380px;
    --spotify: #1DB954;
    --youtube: #FF0000;
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-36: 36px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-72: 72px;
    --space-96: 96px;
    --space-104: 104px;
    --text-10: 10px;
    --text-11: 11px;
    --text-12: 12px;
    --text-13: 13px;
    --text-14: 14px;
    --text-15: 15px;
    --text-17: 17px;
    --text-20: 20px;
    --text-24: 24px;
    --text-26: 26px;
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-full: 999px;
    --touch: 44px;
    --hairline: 1px;
    --text-display-1: clamp(2.25rem, 6vw, 4.5rem);
    --text-display-2: clamp(1.75rem, 4.5vw, 3.25rem);
    --text-display-3: clamp(1.5rem, 3vw, 2.125rem);
    --glow-violet-lg: 0 0 48px -12px rgba(139, 92, 246, .5);
    --glow-pink-sm: 0 0 32px -8px rgba(244, 114, 182, .18);
    --scrim: rgba(10, 10, 11, .66);
    --scrim-strong: rgba(10, 10, 11, .72);
    --size-2: 2px;
    --size-6: 6px;
    --size-24: 24px;
    --size-10: 10px;
    --size-1: 1px;
    --text-34: 34px;
    --size-60: 60px;
    --size-26: 26px;
    --size-9: 9px;
    --size-32: 32px;
    --size-40: 40px;
    --size-46: 46px;
    --size-34: 34px;
    --size-30: 30px;
    --size-38: 38px;
    --space-5: 5px;
    --size-104: 104px;
    --space-14: 14px;
    --space-38: 38px;
    --size-208: 208px;
    --size-36: 36px;
    --size-44: 44px;
    --size-72: 72px;
    --text-30: 30px;
    --text-28: 28px;
    --size-22: 22px;
    --size-76: 76px;
    --text-22: 22px;
    --size-80: 80px;
    --size-168: 168px;
    --text-52: 52px;
    --space-1: 1px;
    --size-180: 180px;
    --text-72: 72px;
    --text-40: 40px;
    --space-80: 80px;
    --size-420: 420px;
    --size-64: 64px;
    --text-16: 16px;
    --size-8: 8px;
    --size-4: 4px;
    --size-16: 16px;
    --size-3: 3px;
    --size-70: 70px;
    --size-74: 74px;
    --size-460: 460px;
    --size-320: 320px;
    --size-132: 132px;
    --text-56: 56px;
    --size-112: 112px;
    --text-36: 36px;
    --text-64: 64px;
    --size-220: 220px;
    --space-44: 44px;
    --text-48: 48px;
    --size-300: 300px;
    --size-28: 28px;
    --size-52: 52px;
    --text-42: 42px;
    --text-44: 44px;
    --size-440: 440px;
    --size-820: 820px;
    --size-96: 96px;
    --size-128: 128px;
    --space-11: 11px;

    --page: #0A0A0B;
    --surface: #121214;
    --card: #1A1A20;
    --elev: #1E1E24;
    --hover: #2A2A32;
    --border: #27272A;
    --rule: #3F3F46;
    --ink: #FAFAFA;
    --ink2: #A1A1AA;
    --ink3: #A1A1AA;

    --violet: #8B5CF6;
    --violet-d: #7C3AED;
    --violet-l: #A78BFA;
    --pink: #F472B6;
    --pink-d: #EC4899;
    --cyan: #22D3EE;
    --ok: #10B981;
    --err: #EF4444;
    --warn: #F59E0B;
    --info: #3B82F6;

    --grad: linear-gradient(90deg, #8B5CF6, #F472B6);
    --grad-135: linear-gradient(135deg, #8B5CF6, #F472B6);
    --hero-grad: linear-gradient(90deg, #A78BFA, #F472B6);

    /* Ink variants of the accents: the raw hues fail contrast as text on the
       light theme, so text always uses these and never --violet/--pink. */
    --violet-ink: #A78BFA;
    --pink-ink: #F472B6;
    --cyan-ink: #22D3EE;
    --ok-ink: #10B981;
    --err-ink: #F87171;
    --warn-ink: #F59E0B;

    --on-accent: #0A0A0B;

    --shadow-menu: 0 20px 40px -16px rgba(0, 0, 0, .6);
    --glow-violet: 0 0 32px -8px rgba(139, 92, 246, .45);
    --glow-pink: 0 0 32px -8px rgba(244, 114, 182, .45);

    --container: 1240px;
    --gutter: 24px;
}

[data-ma-theme="light"] {
    --page: #FAFAFA;
    --surface: #FFFFFF;
    --card: #FFFFFF;
    --elev: #FFFFFF;
    --hover: #F4F4F5;
    --border: #E4E4E7;
    --rule: #A1A1AA;
    --ink: #18181B;
    --ink2: #52525B;
    --ink3: #656570;

    --hero-grad: linear-gradient(90deg, #6D28D9, #DB2777);
    --violet-ink: #6D28D9;
    --pink-ink: #BE185D;
    --cyan-ink: #0E7490;
    --ok-ink: #047857;
    --err-ink: #B91C1C;
    --warn-ink: #B45309;

    --on-accent: #0A0A0B;
    --shadow-menu: 0 20px 40px -16px rgba(24, 24, 27, .18);
}

/* ── base ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--page);
}

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
    font-family: Inter, system-ui, sans-serif;
}

a {
    color: var(--violet-ink);
    text-decoration: none;
}

a:hover {
    color: var(--pink-ink);
}

input,
textarea,
button,
select {
    font-family: inherit;
}

textarea {
    resize: vertical;
}

::selection {
    background: color-mix(in srgb, var(--violet) 35%, transparent);
}

:focus-visible {
    outline: var(--size-2) solid var(--violet-l);
    outline-offset: var(--space-2);
}

@keyframes ma-shim {
    0% { opacity: .35 }
    50% { opacity: .8 }
    100% { opacity: .35 }
}

@keyframes ma-in {
    from { opacity: 0; transform: translateY(var(--size-6)) }
    to { opacity: 1; transform: none }
}

@keyframes ma-slide-in {
    from { transform: translateX(var(--size-24)); opacity: 0 }
    to { transform: none; opacity: 1 }
}

@keyframes ma-toast-in {
    from { opacity: 0; transform: translate(-50%, var(--size-10)) }
    to { opacity: 1; transform: translate(-50%, 0) }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ── layout ───────────────────────────────────────────────────────────── */

.ma-app {
    min-height: 100vh;
    background: var(--page);
    color: var(--ink);
    padding-bottom: var(--space-96);
}

.ma-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.ma-main {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-36) var(--gutter) 0;
}

.ma-rule {
    height: var(--size-2);
    background: var(--rule);
    border: 0;
    margin: 0;
}

.ma-hair {
    height: var(--size-1);
    background: var(--border);
    border: 0;
    margin: 0;
}

.ma-kicker {
    font-size: var(--text-11);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink3);
}

.ma-page-title {
    margin: var(--space-8) 0 0;
    font-size: var(--text-34);
    letter-spacing: -0.03em;
    font-weight: 700;
    line-height: 1.1;
}

.ma-muted {
    color: var(--ink2);
}

.ma-dim {
    color: var(--ink3);
}

.ma-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-gradient-text {
    background: var(--hero-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── header ───────────────────────────────────────────────────────────── */

.ma-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--surface);
    border-bottom: var(--space-2) solid var(--rule);
}

.ma-header-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    min-height: var(--size-60);
    display: flex;
    align-items: center;
    gap: var(--space-24);
}

.ma-brand {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    cursor: pointer;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
}

.ma-mark {
    width: var(--size-26);
    height: var(--size-26);
    background: var(--grad-135);
    display: flex;
    align-items: flex-end;
    padding: var(--space-4);
    flex: 0 0 auto;
}

.ma-mark::after {
    content: "";
    width: 100%;
    height: var(--size-9);
    background: var(--surface);
}

.ma-brand-name {
    font-size: var(--text-15);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.ma-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.ma-nav::-webkit-scrollbar {
    display: none;
}

.ma-navbtn {
    border: 0;
    background: transparent;
    color: var(--ink2);
    height: var(--size-32);
    padding: 0 var(--space-12);
    font-size: var(--text-13);
    font-weight: 500;
    border-radius: var(--radius-6);
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.ma-navbtn:hover {
    background: var(--hover);
    color: var(--ink);
}

.ma-navbtn.is-active {
    background: var(--hover);
    color: var(--ink);
}

.ma-header-tools {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 0 0 auto;
}

/* ── controls ─────────────────────────────────────────────────────────── */

.ma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    height: var(--size-40);
    padding: 0 var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    font-size: var(--text-14);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, filter .15s ease;
}

.ma-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.ma-btn-primary {
    background: var(--grad);
    color: var(--on-accent);
    font-weight: 600;
    box-shadow: var(--glow-violet);
}

.ma-btn-primary:hover:not(:disabled) {
    filter: brightness(1.06);
}

.ma-btn-secondary {
    border-color: var(--rule);
}

.ma-btn-secondary:hover:not(:disabled) {
    background: var(--hover);
}

.ma-btn-ghost {
    color: var(--violet-ink);
    padding: 0 var(--space-10);
}

.ma-btn-ghost:hover:not(:disabled) {
    color: var(--pink-ink);
}

.ma-btn-danger {
    border-color: color-mix(in srgb, var(--err) 40%, transparent);
    color: var(--err-ink);
}

.ma-btn-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--err) 10%, transparent);
}

.ma-btn-lg {
    height: var(--size-46);
    padding: 0 var(--space-20);
    font-size: var(--text-15);
}

.ma-btn-sm {
    height: var(--size-32);
    padding: 0 var(--space-12);
    font-size: var(--text-12);
    border-radius: var(--radius-6);
}

.ma-iconbtn {
    width: var(--size-32);
    height: var(--size-32);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink2);
    border-radius: var(--radius-6);
    font-size: var(--text-13);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ma-iconbtn:hover {
    background: var(--hover);
    color: var(--ink);
}

.ma-iconbtn.is-on {
    color: var(--pink-ink);
    border-color: var(--pink-ink);
}

.ma-seg {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-6);
    overflow: hidden;
}

.ma-segbtn {
    border: 0;
    background: transparent;
    color: var(--ink3);
    min-width: var(--size-34);
    height: var(--size-30);
    padding: 0 var(--space-6);
    font-size: var(--text-11);
    font-weight: 600;
    letter-spacing: .06em;
    cursor: pointer;
}

.ma-segbtn:hover {
    background: var(--hover);
    color: var(--ink);
}

.ma-segbtn.is-active {
    background: var(--grad);
    color: var(--on-accent);
}

.ma-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    height: var(--size-38);
    padding: 0 var(--space-20);
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink2);
    font-size: var(--text-13);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.ma-pill:hover {
    border-color: var(--rule);
    color: var(--ink);
}

.ma-pill.is-active {
    background: var(--grad);
    border-color: transparent;
    color: var(--on-accent);
    font-weight: 600;
}

.ma-pill-count {
    font-size: var(--text-11);
    opacity: .8;
}

.ma-tag {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-11);
    color: var(--ink2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: var(--space-4) var(--space-10);
    background: transparent;
    cursor: default;
}

button.ma-tag {
    cursor: pointer;
}

button.ma-tag:hover {
    border-color: var(--rule);
    color: var(--ink);
}

button.ma-tag.is-on {
    background: var(--grad);
    border-color: transparent;
    color: var(--on-accent);
    font-weight: 600;
}

.ma-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: var(--space-5) var(--space-12);
    font-size: var(--text-11);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink2);
}

.ma-badge-dot {
    width: var(--size-6);
    height: var(--size-6);
    border-radius: var(--radius-full);
    background: var(--pink);
}

.ma-input,
.ma-textarea {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-8);
    color: var(--ink);
    font-size: var(--text-14);
    padding: var(--space-10) var(--space-12);
    outline: none;
}

.ma-input::placeholder,
.ma-textarea::placeholder {
    color: var(--ink3);
}

.ma-input:focus,
.ma-textarea:focus {
    border-color: var(--violet-l);
}

.ma-textarea {
    min-height: var(--size-104);
    font-size: var(--text-13);
    line-height: 1.65;
}

.ma-searchfield {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--space-10);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-8);
    padding: 0 var(--space-14);
    height: var(--size-46);
    min-width: 0;
}

.ma-searchfield:focus-within {
    border-color: var(--violet-l);
}

.ma-searchfield input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: var(--text-15);
    outline: none;
}

.ma-searchfield input::placeholder {
    color: var(--ink3);
}

/* ── surfaces ─────────────────────────────────────────────────────────── */

.ma-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-16);
    padding: var(--space-20);
}

.ma-card-flush {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-16);
    overflow: hidden;
}

.ma-card-head {
    padding: var(--space-16) var(--space-20);
    border-bottom: var(--space-2) solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
}

button.ma-card,
.ma-card-click {
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
}

button.ma-card:hover,
.ma-card-click:hover {
    background: var(--elev);
    border-color: var(--rule);
}

.ma-menu {
    position: absolute;
    right: 0;
    top: var(--space-38);
    width: var(--size-208);
    background: var(--elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-12);
    padding: var(--space-6);
    box-shadow: var(--shadow-menu);
    z-index: 50;
}

.ma-menu-head {
    padding: var(--space-8) var(--space-10) var(--space-10);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-6);
}

.ma-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: var(--text-13);
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-6);
    cursor: pointer;
}

.ma-menu-item:hover {
    background: var(--hover);
}

.ma-menu-item.is-danger {
    color: var(--err-ink);
}

/* ── covers and avatars ───────────────────────────────────────────────── */

.ma-cover {
    display: flex;
    align-items: flex-end;
    padding: var(--space-4);
    flex: 0 0 auto;
    color: var(--on-accent);
    font-weight: 700;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.ma-cover-xs { width: var(--size-32); height: var(--size-32); font-size: var(--text-10); padding: var(--space-4) }
.ma-cover-sm { width: var(--size-36); height: var(--size-36); font-size: var(--text-11); padding: var(--space-4) }
.ma-cover-md { width: var(--size-44); height: var(--size-44); font-size: var(--text-12); padding: var(--space-4) }
.ma-cover-lg { width: var(--size-72); height: var(--size-72); font-size: var(--text-20); padding: var(--space-8) }
.ma-cover-xl { width: var(--size-104); height: var(--size-104); font-size: var(--text-30); padding: var(--space-10) }

.ma-cover-fill {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    font-size: var(--text-28);
    padding: var(--space-12);
}

.ma-avatar {
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--on-accent);
    font-weight: 700;
    flex: 0 0 auto;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.ma-avatar-xs { width: var(--size-22); height: var(--size-22); font-size: var(--text-10) }
.ma-avatar-sm { width: var(--size-40); height: var(--size-40); font-size: var(--text-12) }
.ma-avatar-md { width: var(--size-76); height: var(--size-76); font-size: var(--text-22) }
.ma-avatar-lg { width: var(--size-80); height: var(--size-80); font-size: var(--text-24) }
.ma-avatar-xl {
    width: var(--size-168);
    height: var(--size-168);
    font-size: var(--text-52);
    box-shadow: var(--glow-violet-lg);
}

.ma-avatar-brand {
    background: var(--grad-135);
    color: var(--on-accent);
}

/* ── rows ─────────────────────────────────────────────────────────────── */

.ma-rows {
    border-top: 1px solid var(--border);
}

.ma-row {
    display: flex;
    align-items: center;
    gap: var(--space-14);
    padding: var(--space-10) var(--space-8);
    border-bottom: 1px solid var(--border);
    width: 100%;
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    color: inherit;
    text-align: left;
    font: inherit;
}

.ma-row:hover {
    background: var(--hover);
}

.ma-row-head {
    display: flex;
    align-items: center;
    gap: var(--space-14);
    padding: var(--space-12) var(--space-8);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-11);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink3);
}

.ma-row-main {
    min-width: 0;
    flex: 1 1 auto;
    cursor: pointer;
}

.ma-row-title {
    /* Rows build these as spans in some views and divs in others; without an
       explicit box the title and the subtitle ran together on one line, and
       the ellipsis below could not apply to an inline element either. */
    display: block;
    font-size: var(--text-14);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-row-sub {
    display: block;
    font-size: var(--text-12);
    color: var(--ink3);
    margin-top: var(--space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-row-inset {
    padding-left: var(--space-20);
    padding-right: var(--space-20);
}

.ma-col-mood { width: var(--size-180); flex: 0 0 auto; display: flex; gap: var(--space-4); flex-wrap: wrap }
.ma-col-stars { width: var(--size-76); flex: 0 0 auto }
.ma-col-dur { width: var(--size-44); flex: 0 0 auto; font-size: var(--text-12); color: var(--ink3) }
.ma-col-actions { width: var(--size-72); flex: 0 0 auto; display: flex; gap: var(--space-6); justify-content: flex-end }

.ma-stars {
    font-size: var(--text-13);
    letter-spacing: .06em;
    color: var(--pink-ink);
    white-space: nowrap;
}

.ma-stars-dim {
    color: var(--ink3);
}

.ma-starbtn {
    border: 0;
    background: transparent;
    font-size: var(--text-26);
    line-height: 1;
    cursor: pointer;
    padding: 0;
    color: var(--ink3);
}

.ma-starbtn.is-on {
    color: var(--pink-ink);
}

/* ── grids ────────────────────────────────────────────────────────────── */

.ma-grid {
    display: grid;
    gap: var(--space-16);
}

.ma-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.ma-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.ma-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.ma-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }

.ma-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-16);
}

.ma-bento-hero {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    padding: var(--space-24);
    box-shadow: var(--glow-pink-sm);
}

.ma-bento-wide {
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
}

.ma-stat-label {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ma-stat-big {
    font-size: var(--text-72);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
    margin-top: var(--space-20);
}

.ma-stat {
    font-size: var(--text-40);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-top: var(--space-10);
}

/* ── states ───────────────────────────────────────────────────────────── */

.ma-empty {
    padding: var(--space-80) 0;
    text-align: center;
    max-width: var(--size-420);
    margin: 0 auto;
}

.ma-empty-mark {
    width: var(--size-64);
    height: var(--size-64);
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-24);
    color: var(--ink3);
}

.ma-empty-title {
    font-size: var(--text-20);
    font-weight: 600;
    margin-top: var(--space-20);
}

.ma-empty-body {
    font-size: var(--text-14);
    line-height: 1.6;
    color: var(--ink2);
    margin-top: var(--space-8);
}

.ma-skel-row {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-8) 0;
    animation: ma-shim 1.4s ease-in-out infinite;
}

.ma-skel {
    background: var(--hover);
    border-radius: var(--radius-4);
}

.ma-notice {
    display: flex;
    gap: var(--space-14);
    align-items: flex-start;
    padding: var(--space-24);
}

.ma-notice-mark {
    width: var(--size-34);
    height: var(--size-34);
    border-radius: var(--radius-8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-16);
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--err) 14%, transparent);
    color: var(--err-ink);
}

/* ── progress ─────────────────────────────────────────────────────────── */

.ma-meter {
    height: var(--size-8);
    background: var(--hover);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.ma-meter-fill {
    height: 100%;
    background: var(--grad);
    border-radius: var(--radius-full);
    transition: width .4s ease;
}

.ma-ticks {
    display: flex;
    gap: var(--space-4);
}

.ma-tick {
    flex: 1 1 0;
    height: var(--size-4);
    background: var(--hover);
}

.ma-tick.is-on {
    background: var(--pink);
}

/* ── drawer ───────────────────────────────────────────────────────────── */

.ma-scrim {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    z-index: 60;
}

.ma-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--size-420);
    max-width: 92vw;
    background: var(--surface);
    border-left: var(--space-2) solid var(--rule);
    z-index: 61;
    overflow-y: auto;
    animation: ma-slide-in .2s ease;
}

.ma-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-16) var(--space-20);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}

.ma-drawer-body {
    padding: var(--space-20);
}

.ma-check {
    width: var(--size-16);
    height: var(--size-16);
    border: 1px solid var(--border);
    border-radius: var(--radius-4);
    color: var(--on-accent);
    font-size: var(--text-10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ma-check.is-on {
    background: var(--grad);
    border-color: transparent;
}

/* ── mini player ──────────────────────────────────────────────────────── */

.mini-player {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--surface);
    border-top: var(--space-2) solid var(--rule);
    transform: translateY(100%);
    transition: transform .3s ease;
}

.mini-player.active {
    transform: translateY(0);
}

.mini-player-progress {
    height: var(--size-3);
    background: var(--border);
    cursor: pointer;
}

.mini-player-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--grad);
    transition: width .1s linear;
}

.mini-player-body {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    height: var(--size-70);
    display: flex;
    align-items: center;
    gap: var(--space-16);
}

.mini-player-play {
    width: var(--size-38);
    height: var(--size-38);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--grad-135);
    color: var(--on-accent);
    font-size: var(--text-14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.mini-player-time {
    font-size: var(--text-11);
    color: var(--ink3);
    font-variant-numeric: tabular-nums;
    width: var(--size-74);
    flex: 0 0 auto;
}

.playing-row {
    background: color-mix(in srgb, var(--violet) 12%, transparent);
    box-shadow: inset var(--size-3) 0 0 var(--violet);
}

/* ── toast ────────────────────────────────────────────────────────────── */

.ma-toast-host {
    position: fixed;
    left: 50%;
    bottom: var(--space-96);
    transform: translateX(-50%);
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    align-items: center;
    pointer-events: none;
    max-width: min(92vw, var(--size-460));
}

.ma-toast {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    background: var(--elev);
    border: 1px solid var(--border);
    border-left: var(--space-2) solid var(--ink3);
    border-radius: var(--radius-8);
    padding: var(--space-12) var(--space-16);
    box-shadow: var(--shadow-menu);
    animation: ma-in .18s ease;
    pointer-events: auto;
    font-size: var(--text-13);
    color: var(--ink);
    transition: opacity .2s ease, transform .2s ease;
}

.ma-toast.is-success { border-left-color: var(--ok) }
.ma-toast.is-error { border-left-color: var(--err) }
.ma-toast.is-warning { border-left-color: var(--warn) }
.ma-toast.is-info { border-left-color: var(--info) }

.ma-toast-icon { flex: 0 0 auto; font-size: var(--text-13) }
.ma-toast.is-success .ma-toast-icon { color: var(--ok-ink) }
.ma-toast.is-error .ma-toast-icon { color: var(--err-ink) }
.ma-toast.is-warning .ma-toast-icon { color: var(--warn-ink) }
.ma-toast.is-info .ma-toast-icon { color: var(--violet-ink) }

.ma-toast.is-leaving {
    opacity: 0;
    transform: translateY(var(--size-8));
}

/* ── autocomplete ─────────────────────────────────────────────────────── */

.autocomplete-list {
    position: absolute;
    top: calc(100% + var(--space-6));
    left: 0;
    right: 0;
    background: var(--elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-menu);
    z-index: 45;
    max-height: var(--size-320);
    overflow-y: auto;
    padding: var(--space-6);
}

.autocomplete-item {
    border-radius: var(--radius-8);
}

.autocomplete-item:hover {
    background: var(--hover);
}

/* ── legacy Tailwind-era hooks, repointed at the tokens ───────────────── */

.spotify-green {
    background-image: var(--grad-135);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bg-spotify {
    background-color: var(--violet);
}

.btn-spotify {
    background-image: var(--grad);
    color: var(--on-accent);
    box-shadow: var(--glow-violet);
    transition: filter .15s ease;
}

.btn-spotify:hover:not(:disabled) {
    filter: brightness(1.06);
}

.modal {
    transition: opacity .3s ease-in-out;
}

.modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.star-rating {
    display: inline-flex;
    gap: var(--space-4);
}

.star-rating .star {
    cursor: pointer;
    font-size: var(--text-26);
    line-height: 1;
    color: var(--ink3);
    transition: color .15s ease;
}

.star-rating .star.filled,
.star-rating .star.half-filled {
    color: var(--pink-ink);
}

.star-rating.readonly .star {
    cursor: default;
}

/* ── scrollbars ───────────────────────────────────────────────────────── */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
}

::-webkit-scrollbar {
    width: var(--size-10);
    height: var(--size-10);
}

::-webkit-scrollbar-thumb {
    background: var(--rule);
    border-radius: var(--radius-full);
    border: var(--size-3) solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--violet);
    background-clip: content-box;
}

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .ma-grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
    .ma-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    .ma-col-mood { width: var(--size-132) }
}

@media (max-width: 900px) {
    :root { --gutter: 16px }

    .ma-bento { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .ma-bento-hero { grid-column: span 2; grid-row: span 1 }
    .ma-bento-wide { grid-column: span 2 }
    .ma-grid-2 { grid-template-columns: minmax(0, 1fr) }
    .ma-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    .ma-col-mood { display: none }
    .ma-main { padding-top: var(--space-24) }
    .ma-page-title { font-size: var(--text-28) }
    .ma-stat-big { font-size: var(--text-56) }
}

/* The nav sits beside the brand and the tools until the three of them stop
   fitting. That happens well before 640px: "Overview / Search / Library / Dig"
   is wider than the Turkish labels, and it was being clipped mid-word. Wrap the
   nav onto its own row early enough that every language clears it. */
@media (max-width: 820px) {
    .ma-header-inner {
        flex-wrap: wrap;
        gap: var(--space-12);
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
    }

    .ma-nav {
        order: 3;
        flex-basis: 100%;
    }

    .ma-brand { flex: 1 1 auto }
}

@media (max-width: 640px) {
    .ma-grid-6,
    .ma-grid-5,
    .ma-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }

    .ma-bento { grid-template-columns: minmax(0, 1fr) }
    .ma-bento-hero,
    .ma-bento-wide { grid-column: span 1 }
    .ma-col-dur { display: none }
    .ma-avatar-xl { width: var(--size-112); height: var(--size-112); font-size: var(--text-36) }
    .mini-player-body { gap: var(--space-10); height: var(--size-64) }
    .mini-player-time { display: none }
}

.ma-pill-lg {
    height: var(--size-46);
    padding: 0 var(--space-16);
}

.ma-searchbar {
    position: relative;
}

.ma-searchbar-row {
    display: flex;
    gap: var(--space-12);
    margin-top: var(--space-16);
    align-items: center;
    flex-wrap: wrap;
}

.ma-searchbar-types {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .ma-searchbar-row > .ma-searchfield { flex: 1 1 100% }
    .ma-pill-lg { height: var(--size-38); padding: 0 var(--space-14) }
}

/* ── landing ──────────────────────────────────────────────────────────── */

.ma-hero {
    padding: var(--space-96) 0 var(--space-72);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--space-48);
    align-items: end;
}

.ma-hero-title {
    margin: 0;
    font-size: var(--text-64);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 700;
}

.ma-hero-lede {
    margin: var(--space-28) 0 0;
    max-width: 52ch;
    font-size: var(--text-17);
    line-height: 1.6;
    color: var(--ink2);
}

.ma-hero-actions {
    display: flex;
    gap: var(--space-12);
    margin-top: var(--space-36);
    flex-wrap: wrap;
}

.ma-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 1px solid var(--border);
}

.ma-feature {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: var(--space-32) var(--space-28) var(--space-36);
    min-height: var(--size-220);
}

.ma-feature-mark {
    width: var(--size-36);
    height: var(--size-36);
    border: 1px solid var(--border);
    border-radius: var(--radius-8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-17);
}

.ma-feature-title {
    font-size: var(--text-20);
    font-weight: 600;
    margin-top: var(--space-20);
    letter-spacing: -0.01em;
}

.ma-feature-body {
    font-size: var(--text-14);
    line-height: 1.6;
    color: var(--ink2);
    margin-top: var(--space-8);
}

/* ── artist ───────────────────────────────────────────────────────────── */

.ma-artist-hero {
    border-bottom: var(--space-2) solid var(--rule);
    background: var(--surface);
}

.ma-artist-hero-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-44) var(--gutter);
    display: flex;
    gap: var(--space-32);
    align-items: center;
}

.ma-artist-name {
    margin: var(--space-10) 0 0;
    font-size: var(--text-48);
    letter-spacing: -0.035em;
    font-weight: 700;
    line-height: 1.05;
}

.ma-coverage {
    flex: 0 0 var(--size-300);
}

.ma-album-flag {
    position: absolute;
    top: var(--space-10);
    right: var(--space-10);
    background: var(--page);
    color: var(--pink-ink);
    font-size: var(--text-10);
    font-weight: 600;
    letter-spacing: .06em;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
}

/* ── dig ──────────────────────────────────────────────────────────────── */

.ma-dig {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--size-300);
    gap: var(--space-32);
    align-items: start;
}

.ma-dig-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ma-dig-card {
    width: 100%;
    max-width: var(--size-420);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-16);
    overflow: hidden;
    transition: transform .22s ease, opacity .22s ease;
}

.ma-dig-card.is-keeping { transform: translateX(var(--size-28)) rotate(2deg); opacity: 0 }
.ma-dig-card.is-skipping { transform: translateX(calc(-1 * var(--size-28))) rotate(-2deg); opacity: 0 }

.ma-dig-actions {
    display: flex;
    gap: var(--space-12);
    margin-top: var(--space-24);
    width: 100%;
    max-width: var(--size-420);
}

.ma-dig-actions .ma-btn {
    flex: 1 1 0;
    height: var(--size-52);
    border-radius: var(--radius-12);
    font-size: var(--text-15);
}

@media (max-width: 900px) {
    .ma-hero { padding: var(--space-48) 0 var(--space-40); grid-template-columns: minmax(0, 1fr); gap: var(--space-32) }
    .ma-hero-title { font-size: var(--text-42) }
    .ma-features { grid-template-columns: minmax(0, 1fr); border-left: 0 }
    .ma-feature { min-height: 0; border-right: 0; padding: var(--space-24) 0 var(--space-28) }
    .ma-artist-hero-inner { flex-direction: column; align-items: flex-start; gap: var(--space-24); padding: var(--space-28) var(--gutter) }
    .ma-artist-name { font-size: var(--text-34) }
    .ma-coverage { flex: 1 1 auto; width: 100% }
    .ma-dig { grid-template-columns: minmax(0, 1fr) }
}

.ma-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.ma-playlist-cover {
    display: flex;
    width: 100%;
    aspect-ratio: 1.6;
    align-items: flex-end;
    padding: var(--space-14);
    font-size: var(--text-22);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--on-accent);
    background-size: cover;
    background-position: center;
}

.ma-newtile {
    border: 1px dashed var(--rule);
    background: transparent;
    border-radius: var(--radius-16);
    min-height: var(--size-180);
    color: var(--ink2);
    font-size: var(--text-14);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: var(--space-16);
    gap: var(--space-6);
}

.ma-newtile:hover {
    background: var(--hover);
    color: var(--ink);
}

.ma-tile {
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.ma-tile:hover .ma-cover {
    opacity: 1;
    filter: brightness(1.06);
}

.ma-dig-art {
    border-radius: 0;
    font-size: var(--text-44);
    padding: var(--space-20);
}

/* Spotify titles run long — "… - From The Idol Vol. 1 (Music from the HBO
   Original Series)" is one card's worth on its own. Clamp so the card keeps the
   proportions it was designed with. */
.ma-dig-title {
    font-size: var(--text-24);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ma-dig-sub {
    font-size: var(--text-14);
    color: var(--ink2);
    margin-top: var(--space-6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── dialogs ──────────────────────────────────────────────────────────── */

.ma-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    background: var(--scrim-strong);
}

.ma-overlay.hidden,
.ma-scrim.hidden {
    display: none;
}

.ma-dialog {
    width: 100%;
    max-width: var(--size-440);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-16);
    box-shadow: var(--shadow-menu);
    overflow: hidden;
}

.ma-dialog-wide {
    max-width: var(--size-820);
}

.ma-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-16) var(--space-20);
    border-bottom: var(--space-2) solid var(--rule);
    flex: 0 0 auto;
}

.ma-dialog-body {
    padding: var(--space-20);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    overflow-y: auto;
}

.ma-dialog-scroll {
    padding: var(--space-8) var(--space-20) var(--space-20);
    overflow-y: auto;
}

.ma-dialog-title {
    margin: var(--space-6) 0 0;
    font-size: var(--text-20);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.ma-dialog-cover {
    width: var(--size-96);
    height: var(--size-96);
    object-fit: cover;
    flex: 0 0 auto;
}

.ma-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
}

.ma-setting-title {
    font-size: var(--text-14);
    font-weight: 600;
}

.ma-setting-hint {
    font-size: var(--text-12);
    color: var(--ink2);
    line-height: 1.6;
    margin: var(--space-4) 0 0;
}

.ma-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    height: var(--size-128);
    border: 1px dashed var(--rule);
    border-radius: var(--radius-12);
    cursor: pointer;
    text-align: center;
    padding: var(--space-12);
}

.ma-dropzone:hover {
    background: var(--hover);
}

.ma-linkrow {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-11) var(--space-14);
    border: 1px solid var(--border);
    border-radius: var(--radius-8);
    font-size: var(--text-13);
    font-weight: 500;
    color: var(--ink);
}

.ma-linkrow:hover {
    background: var(--hover);
    color: var(--ink);
    border-color: var(--rule);
}

/* The drawer rides the same `.modal` visible/hidden pair as every other
   overlay, so Modal.js's backdrop and Escape handling apply unchanged. */
.ma-scrim {
    display: block;
}

.ma-scrim .ma-drawer {
    transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}

.ma-scrim.hidden .ma-drawer,
.modal.ma-scrim:not(.visible) .ma-drawer {
    transform: translateX(100%);
}

.ma-drawer-cover {
    width: var(--size-104);
    height: var(--size-104);
    object-fit: cover;
    flex: 0 0 auto;
}

.ma-drawer-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    margin-top: var(--space-24);
}

.hidden {
    display: none;
}

/* Shared layout utilities extracted from view-owned inline declarations. */
.ma-p-32-20 { padding: var(--space-32) var(--space-20); }
.ma-align-center { text-align: center; }
.ma-text-13 { font-size: var(--text-13); }
.ma-color-ink3 { color: var(--ink3); }
.ma-text-11 { font-size: var(--text-11); }
.ma-flex-0-0-auto { flex: 0 0 auto; }
.ma-ml-6 { margin-left: var(--space-6); }
.ma-w-32 { width: var(--size-32); }
.ma-h-32 { height: var(--size-32); }
.ma-text-12 { font-size: var(--text-12); }
.ma-border-0 { border: 0; }
.ma-background-transparent { background: transparent; }
.ma-color-inherit { color: inherit; }
.ma-font-inherit { font: inherit; }
.ma-p-0 { padding: 0; }
.ma-m-6-0-0 { margin: var(--space-6) 0 0; }
.ma-display-flex { display: flex; }
.ma-wrap-wrap { flex-wrap: wrap; }
.ma-items-center { align-items: center; }
.ma-justify-space-between { justify-content: space-between; }
.ma-gap-16 { gap: var(--space-16); }
.ma-p-16-0 { padding: var(--space-16) 0; }
.ma-border-bottom-1-solid-border { border-bottom: 1px solid var(--border); }
.ma-m-0-0-8 { margin: 0 0 var(--space-8); }
.ma-border-top-0 { border-top: 0; }
.ma-gap-8 { gap: var(--space-8); }
.ma-position-relative { position: relative; }
.ma-w-auto { width: auto; }
.ma-p-0-8-0-4 { padding: 0 var(--space-8) 0 var(--space-4); }
.ma-color-ink { color: var(--ink); }
.ma-color-ink2 { color: var(--ink2); }
.ma-weight-600 { font-weight: 600; }
.ma-mt-4 { margin-top: var(--space-4); }
.ma-h-auto { height: auto; }
.ma-text-15 { font-size: var(--text-15); }
.ma-flex-1-1-auto { flex: 1 1 auto; }
.ma-gap-12 { gap: var(--space-12); }
.ma-w-100 { width: 100%; }
.ma-p-10-12 { padding: var(--space-10) var(--space-12); }
.ma-align-left { text-align: left; }
.ma-cursor-pointer { cursor: pointer; }
.ma-p-12 { padding: var(--space-12); }
.ma-color-err-ink { color: var(--err-ink); }
.ma-p-10-12-6 { padding: var(--space-10) var(--space-12) var(--space-6); }
.ma-min-w-0 { min-width: 0; }
.ma-gap-6 { gap: var(--space-6); }
.ma-color-pink-ink { color: var(--pink-ink); }
.ma-text-10 { font-size: var(--text-10); }
.ma-display-block { display: block; }
.ma-mb-28 { margin-bottom: var(--space-28); }
.ma-items-flex-end { align-items: flex-end; }
.ma-gap-24 { gap: var(--space-24); }
.ma-mt-16 { margin-top: var(--space-16); }
.ma-justify-flex-end { justify-content: flex-end; }
.ma-mt-20 { margin-top: var(--space-20); }
.ma-text-14 { font-size: var(--text-14); }
.ma-mt-6 { margin-top: var(--space-6); }
.ma-mt-auto { margin-top: auto; }
.ma-pt-24 { padding-top: var(--space-24); }
.ma-align-self-flex-start { align-self: flex-start; }
.ma-color-violet-ink { color: var(--violet-ink); }
.ma-color-cyan-ink { color: var(--cyan-ink); }
.ma-letter-spacing-normal { letter-spacing: normal; }
.ma-text-transform-none { text-transform: none; }
.ma-weight-400 { font-weight: 400; }
.ma-m-20-0-32 { margin: var(--space-20) 0 var(--space-32); }
.ma-p-20 { padding: var(--space-20); }
.ma-mt-18 { margin-top: var(--space-20); }
.ma-justify-flex-start { justify-content: flex-start; }
.ma-mt-14 { margin-top: var(--space-14); }
.ma-p-14-18 { padding: var(--space-14) var(--space-20); }
.ma-border-bottom-2-solid-rule { border-bottom: var(--space-2) solid var(--rule); }
.ma-line-height-1-5 { line-height: 1.5; }
.ma-mt-24 { margin-top: var(--space-24); }
.ma-w-36 { width: var(--size-36); }
.ma-w-28 { width: var(--size-28); }
.ma-h-28 { height: var(--size-28); }
.ma-p-14-16-16 { padding: var(--space-14) var(--space-16) var(--space-16); }
.ma-mt-3 { margin-top: var(--space-4); }
.ma-text-22 { font-size: var(--text-22); }
.ma-mt-28 { margin-top: var(--space-28); }
.ma-text-17 { font-size: var(--text-17); }
.ma-line-height-1-6 { line-height: 1.6; }
.ma-gap-10 { gap: var(--space-10); }
.ma-mt-0 { margin-top: 0; }
.ma-pl-0 { padding-left: 0; }
.ma-pr-0 { padding-right: 0; }
.ma-mt-10 { margin-top: var(--space-10); }
.ma-m-32-0-18 { margin: var(--space-32) 0 var(--space-20); }
.ma-gap-20 { gap: var(--space-20); }
.ma-items-baseline { align-items: baseline; }
.ma-text-34 { font-size: var(--text-34); }
.ma-weight-700 { font-weight: 700; }
.ma-letter-spacing-0-03em { letter-spacing: -0.03em; }
.ma-weight-500 { font-weight: 500; }
.ma-mt-12 { margin-top: var(--space-12); }
.ma-mt-2 { margin-top: var(--space-2); }
.ma-p-28-0-0 { padding: var(--space-28) 0 0; }
.ma-mb-16 { margin-bottom: var(--space-16); }

/* Shared shell/modal layout. */
.ma-shell-1 { margin-bottom:var(--space-8); }
.ma-shell-2 { align-items:flex-end;gap:var(--space-20); }
.ma-shell-3 { flex:1 1 auto;min-width:0; }
.ma-shell-4 { z-index:80; }
.ma-shell-5 { max-width:var(--size-380); }
.ma-shell-6 { max-height:var(--size-260);overflow-y:auto; }
.ma-shell-7 { width:100%; }
.ma-shell-8 { z-index:85; }
.ma-shell-9 { max-width:var(--size-400); }
.ma-shell-10 { margin:0; }
.ma-shell-11 { display:flex;gap:var(--space-10); }
.ma-shell-12 { flex:1 1 0; }
.ma-shell-13 { flex:1 1 0; }
.ma-shell-14 { z-index:100; }
.ma-shell-15 { max-width:var(--size-380); }
.ma-shell-16 { margin:0; }
.ma-shell-17 { display:flex;gap:var(--space-10);margin-top:var(--space-4); }
.ma-shell-18 { flex:1 1 0; }
.ma-shell-19 { flex:1 1 0; }
.ma-shell-20 { z-index:110; }
.ma-shell-21 { max-width:var(--size-420); }
.ma-shell-22 { margin:0; }
.ma-shell-23 { display:flex;gap:var(--space-8); }
.ma-shell-24 { flex:1 1 0;justify-content:center; }
.ma-shell-25 { flex:1 1 0;justify-content:center; }
.ma-shell-26 { font-size:var(--text-22);color:var(--ink3); }
.ma-shell-27 { margin:0; }
.ma-shell-28 { text-transform:none;letter-spacing:normal;font-weight:400; }
.ma-shell-29 { text-align:center; }
.ma-shell-30 { width:var(--size-96);height:var(--size-96);object-fit:cover;margin:var(--space-8) auto 0;border:1px solid var(--border); }
.ma-shell-31 { display:flex;gap:var(--space-10); }
.ma-shell-32 { flex:1 1 0; }
.ma-shell-33 { flex:1 1 0; }
.ma-shell-34 { z-index:60; }
.ma-shell-35 { width:var(--size-30);height:var(--size-30); }
.ma-shell-36 { display:flex;gap:var(--space-16);align-items:flex-start; }
.ma-shell-37 { min-width:0;flex:1 1 auto; }
.ma-shell-38 { font-size:var(--text-20);font-weight:600;letter-spacing:-0.015em; }
.ma-shell-39 { font-size:var(--text-13);color:var(--ink2);margin-top:var(--space-4); }
.ma-shell-40 { display:flex;gap:var(--space-8);margin-top:var(--space-12);flex-wrap:wrap; }
.ma-shell-41 { margin:var(--space-24) 0 var(--space-20); }
.ma-shell-42 { display:flex;align-items:center;gap:var(--space-12);margin-top:var(--space-12);flex-wrap:wrap; }
.ma-shell-43 { font-size:var(--text-13);color:var(--ink2); }
.ma-shell-44 { margin-top:var(--space-10); }
.ma-shell-45 { margin-top:var(--space-24); }
.ma-shell-46 { width:100%;margin-top:var(--space-12);justify-content:flex-start; }
.ma-shell-47 { margin-top:var(--space-24); }
.ma-shell-48 { display:flex;flex-direction:column;gap:var(--space-8);margin-top:var(--space-12); }
.ma-shell-49 { color:var(--spotify); }
.ma-shell-50 { margin-left:auto;color:var(--ink3);font-size:var(--text-11); }
.ma-shell-51 { color:var(--youtube); }
.ma-shell-52 { margin-left:auto;color:var(--ink3);font-size:var(--text-11); }
.ma-shell-53 { margin-left:auto;color:var(--ink3);font-size:var(--text-11); }
.ma-shell-54 { padding:0; }
.ma-shell-55 { min-width:0;flex:0 1 var(--size-220); }
.ma-shell-56 { margin:0;font-size:var(--text-13);font-weight:600; }
.ma-shell-57 { margin:var(--space-2) 0 0;font-size:var(--text-11);color:var(--ink3); }
.ma-shell-58 { margin-left:auto; }
.ma-shell-59 { margin:0 auto; }
.ma-shell-60 { margin-top:var(--space-24); }

/* Shared states and accessibility. */
.ma-state-action { margin-top: var(--space-24); }
.ma-state-cover { width: var(--space-36); height: var(--space-36); flex: 0 0 auto; }
.ma-state-lines { flex: 1 1 auto; }
.ma-state-line { height: var(--text-11); width: 62%; }
.ma-skel-row:nth-child(even) .ma-state-line { width: 48%; }
.ma-state-subline { height: var(--space-8); width: 34%; margin-top: var(--space-8); }
.ma-refresh-progress { height: var(--space-4); background: var(--violet-ink); animation: ma-shim 1s infinite; }
[hidden] { display: none !important; }
.ma-sr-only { position: absolute; width: var(--hairline); height: var(--hairline); padding: 0; margin: calc(-1 * var(--hairline)); overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ma-dynamic-accent { color: var(--accent); }
.ma-dynamic-opacity { opacity: var(--row-opacity); }
.ma-meter-fill { width: var(--fill); }
.ma-cover, .ma-avatar { background-color: var(--art-accent, var(--violet)); }
.ma-avatar-stack { border: var(--space-2) solid var(--card); }
.ma-avatar-overlap { margin-left: calc(-1 * var(--space-8)); }
.ma-art-unarchived { opacity: .72; }
.ma-autocomplete-art { width: var(--space-36); height: var(--space-36); }
.ma-autocomplete-option { display: flex; align-items: center; gap: var(--space-12); width: 100%; padding: var(--space-8) var(--space-12); border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.ma-autocomplete-option.is-local { box-shadow: inset var(--space-2) 0 0 var(--pink); }
.ma-flex-0-0-auto { flex: 0 0 auto; }
button, .ma-btn, .ma-iconbtn, .ma-segbtn, .ma-pill, .ma-menu-item, input:not([type=hidden]), select, summary, .ma-extlink {
    min-height: var(--touch);
    min-width: var(--touch);
}
:focus-visible { outline: var(--space-2) solid var(--violet-ink); outline-offset: var(--space-2); }
.ma-nav, .studio-subnav { padding-block: var(--space-4); }
.ma-header-inner, .ma-header-tools { min-width: 0; }
.studio-keyboard-scroll:focus-visible { outline-offset: 0; }
@media (max-width: 640px) {
    .ma-header-tools { flex-wrap: wrap; }
    .ma-header-inner { gap: var(--space-8); }
    .ma-header { position: relative; }
    .ma-nav { justify-content: flex-start; }
    .ma-navbtn { flex-shrink: 0; }
}

/* Müzik Defteri — the journal in the track drawer. The composer sits on top,
   the history reads downwards from today, and each entry keeps the score it
   carried on the day it was written. */
.ma-journal-count {
    font-size: var(--text-11);
    color: var(--ink3);
    letter-spacing: normal;
    text-transform: none;
}

.ma-journal-compose {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    margin-top: var(--space-8);
}

.ma-journal-hint {
    font-size: var(--text-11);
    color: var(--ink3);
}

.ma-journal {
    margin-top: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.ma-journal-entry {
    border: 1px solid var(--border);
    border-radius: var(--radius-12);
    background: var(--card);
    padding: var(--space-12) var(--space-14);
}

.ma-journal-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
    font-size: var(--text-11);
    color: var(--ink3);
}

.ma-journal-date {
    font-weight: 600;
    color: var(--ink2);
}

.ma-journal-score {
    color: var(--violet-ink);
}

.ma-journal-flag {
    font-style: italic;
}

.ma-journal-actions {
    display: flex;
    gap: var(--space-6);
    margin-left: auto;
}

.ma-journal-body {
    margin: var(--space-8) 0 0;
    font-size: var(--text-13);
    line-height: 1.55;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ma-journal-editor {
    width: 100%;
    margin-bottom: var(--space-8);
}