/* Inter (self-hosted, OFL) - no request to Google (GDPR + speed) */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter/inter-cyrillic-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter/inter-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter/inter-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* =========================================================================
   Music — design system foundation
   Dark-first, accent-color themed via CSS custom properties.
   No Bootstrap. No dependencies. All rules use plain semantic class names
   (.button / .card / .field) so there are no framework collisions.
   ========================================================================= */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* ---- Tokens (dark defaults) ---- */
:root {
    /* Accent — user-configurable. Server writes inline --accent on load. */
    --accent: #7c3aed;
    --accent-fg: #ffffff;
    --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
    --accent-glow: color-mix(in srgb, var(--accent) 40%, transparent);

    --bg-0: #0a0a0f;
    --bg-1: #12121a;
    --bg-2: #1a1a26;
    --bg-3: #24243a;
    --line:  #2a2a3a;

    --text-0: #f5f5fa;
    --text-1: #b4b4c0;
    --text-2: #8a8a98;   /* 2026-09-26 audit: >= 4.5:1 on dark bgs (was #7a7a88) */

    --danger: #ef4444;
    --warn:   #f59e0b;
    --ok:     #10b981;

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 120ms;
    --dur-med:  240ms;
    --dur-slow: 400ms;

    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;

    --shadow-1: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-2: 0 12px 40px rgba(0,0,0,0.5);
}

/* Light theme (explicit) */
:root[data-theme="light"] {
    --bg-0: #ffffff;
    --bg-1: #f7f7fb;
    --bg-2: #eeeef4;
    --bg-3: #e3e3ec;
    --line:  #d4d4e0;
    --text-0: #0f0f18;
    --text-1: #4a4a58;
    --text-2: #646471;   /* 2026-09-26 audit: >= 4.5:1 on every light bg (was #82828e, 3.3:1) */
    --shadow-1: 0 2px 8px rgba(15,15,24,0.06);
    --shadow-2: 0 12px 40px rgba(15,15,24,0.12);
}

/* System default (respect prefers-color-scheme when nothing explicit) */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg-0: #ffffff;
        --bg-1: #f7f7fb;
        --bg-2: #eeeef4;
        --bg-3: #e3e3ec;
        --line:  #d4d4e0;
        --text-0: #0f0f18;
        --text-1: #4a4a58;
        --text-2: #646471;   /* 2026-09-26 audit: >= 4.5:1 on every light bg (was #82828e, 3.3:1) */
        --shadow-1: 0 2px 8px rgba(15,15,24,0.06);
        --shadow-2: 0 12px 40px rgba(15,15,24,0.12);
    }
}

/* ---- Body ---- */
body {
    background: var(--bg-0);
    color: var(--text-0);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-image:
        radial-gradient(1200px 600px at 80% -10%, var(--accent-soft), transparent 60%),
        radial-gradient(800px 400px at -10% 20%, var(--accent-soft), transparent 60%);
    background-attachment: fixed;
}

a { color: var(--accent); text-decoration: none; transition: opacity var(--dur-fast); }
a:hover { opacity: 0.85; }

h1, h2, h3, h4 { margin: 0 0 0.6em; line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; }
h2 { font-size: 1.6rem; font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
p  { margin: 0 0 1em; color: var(--text-1); }

/* ---- Layout ---- */
.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}
@media (max-width: 640px) { .container { padding: 0 16px; } }

.main {
    min-height: calc(100vh - 64px - 88px);
    padding: 48px 0 64px;
}

/* ---- Header ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    /* Very light gradient header (2026-09-23) so the dark logo stands out on every theme.
       The header always uses the light palette for its own text/menus, whatever the page theme. */
    --bg-0: #ffffff; --bg-1: #f7f7fb; --bg-2: #eeeef4; --bg-3: #e3e3ec; --line: #d4d4e0;
    --text-0: #0f0f18; --text-1: #4a4a58; --text-2: #646471;
    color: var(--text-0);
    /* "Aurora" header (2026-09-23): soft pastel light blobs drifting slowly over near-white. */
    background:
        radial-gradient(60% 160% at 8% 0%,   rgba(196, 181, 253, .55) 0%, transparent 60%),
        radial-gradient(45% 180% at 42% 100%, rgba(251, 191, 36, .22) 0%, transparent 60%),
        radial-gradient(55% 170% at 78% 0%,  rgba(125, 211, 252, .40) 0%, transparent 60%),
        radial-gradient(40% 160% at 100% 100%, rgba(244, 114, 182, .25) 0%, transparent 60%),
        linear-gradient(100deg, #fbfaff 0%, #f5f2ff 50%, #f8f5ff 100%);
    background-size: 200% 100%, 200% 100%, 200% 100%, 200% 100%, 100% 100%;
    animation: header-aurora 24s ease-in-out infinite alternate;
    border-bottom: 1px solid rgba(124, 58, 237, .18);
}
@keyframes header-aurora {
    0%   { background-position: 0% 0%, 20% 0%, 100% 0%, 80% 0%, 0 0; }
    100% { background-position: 60% 0%, 70% 0%, 40% 0%, 20% 0%, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .site-header { animation: none; } }
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 64px;
}
.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.site-header__logo { height: 52px; width: auto; display: block; flex: none; }
.site-header__word {
    font-weight: 800; font-size: 20px; letter-spacing: -0.03em;
    color: var(--text-0);
}
.site-header__nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.site-header__nav > a:not(.button),
.site-header__nav .as-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    color: var(--text-1);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--r-md);
    transition: color var(--dur-fast), background var(--dur-fast);
}
/* Direct-child + :not(.button): don't override Sign up (.button--primary) text colour or the lang-menu options. */
.site-header__nav > a:not(.button):hover,
.site-header__nav .as-link:hover { color: var(--text-0); background: var(--bg-2); opacity: 1; }

/* ---- Footer ---- */
.site-footer {
    border-top: 1px solid var(--line);
    padding: 32px 0;
    color: var(--text-2);
    font-size: 13px;
}
.site-footer__inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-footer__nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__nav a { color: var(--text-2); }
.site-footer__nav a:hover { color: var(--text-0); }

/* ---- Buttons ---- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--r-md);
    background: var(--bg-2);
    color: var(--text-0);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    border: 1px solid var(--line);
    transition:
        background var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-spring),
        box-shadow var(--dur-med) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
    user-select: none;
    text-decoration: none;
}
.button:hover  { background: var(--bg-3); border-color: color-mix(in srgb, var(--line) 60%, var(--accent)); }
.button:active { transform: translateY(1px) scale(0.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

.button--primary {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: transparent;
    box-shadow: 0 6px 20px var(--accent-glow);
}
.button--primary:hover  { background: var(--accent); filter: brightness(1.08); border-color: transparent; }
.button--primary:active { filter: brightness(0.95); }

.button--ghost {
    background: transparent;
    border-color: var(--line);
}
.button--ghost:hover { background: var(--bg-2); }

.button--sm { padding: 8px 14px; font-size: 13px; }
.button--lg { padding: 16px 26px; font-size: 16px; }
.button--block { width: 100%; }

/* ---- Cards ---- */
.card {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow-1);
}

/* ---- Forms ---- */
.field { margin-bottom: 18px; }
.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea,
.field select {
    display: block;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text-0);
    font-size: 15px;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.field .help-block {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--danger);
    min-height: 14px;
}
.has-error input,
.has-error textarea { border-color: var(--danger); }

.checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-1); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---- Alerts / flash ---- */
.alert {
    padding: 12px 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--bg-2);
    color: var(--text-0);
    font-size: 14px;
    margin-bottom: 20px;
}
.alert--success { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); background: color-mix(in srgb, var(--ok) 10%, var(--bg-2)); }
.alert--error   { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: color-mix(in srgb, var(--danger) 10%, var(--bg-2)); }
.alert--warning { border-color: color-mix(in srgb, #f59e0b 45%, var(--line)); background: color-mix(in srgb, #f59e0b 12%, var(--bg-2)); }

/* ---- Auth pages ---- */
.auth-wrap {
    max-width: 420px;
    margin: 40px auto;
}
.auth-wrap h1 { font-size: 1.8rem; margin-bottom: 8px; }
.auth-wrap .lede { color: var(--text-1); margin-bottom: 28px; }
.auth-wrap .card { padding: 32px; }
.auth-wrap .switch { text-align: center; margin-top: 20px; color: var(--text-2); font-size: 14px; }

/* ---- Landing (guest home) ---- */
.hero { padding: 40px 0 64px; text-align: center; }
.hero h1 { max-width: 780px; margin: 0 auto 16px; }
.hero p  { max-width: 620px; margin: 0 auto 28px; color: var(--text-1); font-size: 1.1rem; }
.hero__ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero__badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
    margin-bottom: 20px;
}

/* ---- Mode select ---- */
.mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 32px;
}
.mode-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 40px 32px;
    min-height: 280px;
    color: var(--text-0);
    overflow: hidden;
    transition:
        transform var(--dur-med) var(--ease-spring),
        border-color var(--dur-med) var(--ease-out),
        box-shadow var(--dur-med) var(--ease-out);
    text-decoration: none;
}
.mode-card:hover:not(.mode-card--soon) {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 24px 48px -20px var(--accent-glow);
    opacity: 1;
}
.mode-card--soon { opacity: 0.6; cursor: not-allowed; }
.mode-card__title { font-size: 28px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.02em; }
.mode-card__desc  { color: var(--text-1); margin: 0; font-size: 14px; line-height: 1.55; }
.mode-card__badge {
    position: absolute; top: 20px; right: 20px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    background: var(--accent-soft); color: var(--accent);
    font-weight: 700;
}
.mode-card__cta {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 28px;
    padding: 10px 16px;
    background: var(--bg-3);
    border-radius: var(--r-md);
    font-size: 14px; font-weight: 600;
    color: var(--text-0);
}
.mode-card__glow {
    position: absolute; inset: -50% -30% auto auto;
    width: 320px; height: 320px;
    background: radial-gradient(circle, var(--accent-glow), transparent 65%);
    pointer-events: none;
    transition: opacity var(--dur-med);
}
.mode-card--soon .mode-card__glow { opacity: 0.3; }

/* ---- Ad placeholders (honest labeling) ---- */
.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    padding: 20px;
    color: var(--text-2);
    font-size: 12px;
    background: color-mix(in srgb, var(--bg-1) 60%, transparent);
    margin: 24px 0;
}
.ad-slot--banner { min-height: 90px; }
.ad-slot__label { text-transform: uppercase; letter-spacing: 0.08em; margin-right: 6px; }

/* ---- Accessibility ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Button styled to look like a nav link (used for POST-only logout). */
.as-link {
    background: transparent;
    border: 0;
    padding: 8px 12px;
    color: var(--text-1);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--r-md);
    transition: color var(--dur-fast), background var(--dur-fast);
}
.as-link:hover { color: var(--text-0); background: var(--bg-2); }

/* ---- Theme picker (profile page) ---- */
.theme-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.theme-picker input[type="color"] {
    width: 56px; height: 40px;
    padding: 4px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
}
.theme-picker input[type="text"] {
    flex: 0 0 110px;
    padding: 10px 12px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text-0);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 14px;
    text-transform: lowercase;
}
.theme-picker input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.theme-status {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px;
    font-size: 14px; font-weight: 700;
    color: var(--text-2);
    transition: color var(--dur-fast);
}
.theme-status.is-ok    { color: var(--ok); }
.theme-status.is-error { color: var(--danger); }
.theme-presets { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-preset {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--chip, #7c3aed);
    border: 2px solid var(--line);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast);
}
.theme-preset:hover { transform: scale(1.1); border-color: var(--text-0); }
.theme-preset:focus-visible {
    outline: none;
    border-color: var(--text-0);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---- Level list (learn/style page) ---- */
.level-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 28px;
}
.level-card {
    display: block;
    padding: 20px 22px;
    background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    color: var(--text-0);
    text-decoration: none;
    transition:
        transform var(--dur-med) var(--ease-spring),
        border-color var(--dur-fast),
        box-shadow var(--dur-med) var(--ease-out);
}
.level-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 12px 32px -16px var(--accent-glow);
    opacity: 1;
}
.level-card__number {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 6px;
}
.level-card__title { font-size: 18px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
.level-card__desc  { font-size: 14px; color: var(--text-1); margin: 0 0 12px; }
.level-card__meta  { font-size: 12px; color: var(--text-2); font-family: ui-monospace, monospace; }

/* ---- Learn page ---- */
.learn__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.learn__tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-2);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
}
/* hidden attribute must win over .learn__tabs display (same gotcha as .score-hud /
   .challenge-overlay - JS sets M.$tabs.hidden when switching to the bass editor or
   the main stage; without this it silently stayed visible, floating over that view). */
.learn__tabs[hidden] { display: none !important; }
.learn__tab {
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--text-1);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: 0;
    background: transparent;
    transition: color var(--dur-fast), background var(--dur-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.learn__tab.is-active { background: var(--accent); color: var(--accent-fg); }
.learn__tab:not(.is-active):hover { color: var(--text-0); background: var(--bg-3); }

.learn__stage { display: grid; gap: 20px; }
.learn__level-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}
.learn__level-num {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 6px;
}
.learn__level-title { margin: 0 0 6px; font-size: 28px; }
.learn__level-desc  { margin: 0; color: var(--text-1); max-width: 620px; }
.learn__level-nav   { display: flex; gap: 8px; }

/* Beat-to-beat nav: jump straight to the previous/next whole style, no trip
   back through the /learn menu. Sits next to the back button in the stage head. */
.style-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.style-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text-1);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    max-width: 220px;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.style-nav__btn:hover { border-color: var(--accent); background: var(--bg-3); color: var(--text-0); }
.style-nav__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .style-nav__label { display: none; }
    .style-nav__btn { max-width: none; }
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--text-0);
    font-size: 18px;
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.icon-btn:hover:not(:disabled) { background: var(--bg-3); border-color: var(--accent); }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Pattern grid */
.learn__grid-wrap {
    padding: 20px;
    background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    overflow-x: auto;
}
.pattern-grid {
    display: grid;
    grid-template-columns: 80px repeat(var(--cols), minmax(22px, 1fr));
    gap: 3px;
    min-width: max-content;
}
.pattern-grid__row { display: contents; }
.pattern-grid__row--ruler .pattern-grid__cell { min-height: 22px; aspect-ratio: auto; }
.pattern-grid__label {
    display: flex;
    align-items: center;
    padding-right: 12px;
    font-size: 11px;
    color: var(--text-1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pattern-grid__row--ruler .pattern-grid__label { min-height: 22px; }
.pattern-grid__cell {
    aspect-ratio: 1;
    min-height: 34px;
    background: var(--bg-1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
    position: relative;
}
.pattern-grid__cell.is-beat { background: var(--bg-2); }
.pattern-grid__cell.is-bar  { background: var(--bg-3); }
.pattern-grid__cell.is-hit  {
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, #fff);
}
.pattern-grid__cell.is-hit .note { color: var(--accent-fg); font-size: 20px; line-height: 1; }
.pattern-grid__cell--ruler {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 10px;
    color: var(--text-2);
    font-weight: 700;
}
.pattern-grid__cell--ruler.is-bar {
    border-left: 2px solid var(--line) !important;
}

/* Controls */
.learn__controls {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) auto auto;
    gap: 24px;
    padding: 20px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    align-items: end;
}
@media (max-width: 720px) {
    .learn__controls { grid-template-columns: 1fr; gap: 16px; }
}
.ctrl { display: flex; flex-direction: column; gap: 8px; }
.ctrl label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-2);
    font-weight: 700;
}
.bpm-wrap { display: flex; align-items: center; gap: 14px; }
.bpm-wrap input[type="range"] { flex: 1; accent-color: var(--accent); }
.bpm-wrap output {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 22px;
    font-weight: 800;
    min-width: 54px;
    text-align: right;
    color: var(--text-0);
}
.segmented {
    display: inline-flex;
    padding: 2px;
    background: var(--bg-2);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
}
.seg {
    padding: 8px 14px;
    background: transparent;
    border: 0;
    color: var(--text-1);
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.seg.is-active { background: var(--accent); color: var(--accent-fg); }
.toggle {
    padding: 8px 18px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text-1);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.toggle.is-on { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

.learn__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.learn__actions .button.is-flash {
    animation: btnFlash 350ms var(--ease-spring);
}
@keyframes btnFlash {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.06); filter: brightness(1.15); }
    100% { transform: scale(1); filter: none; }
}
.learn__flash {
    padding: 8px 12px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--dur-med), transform var(--dur-med);
    pointer-events: none;
}
.learn__flash.is-visible { opacity: 1; transform: translateX(0); }

.learn__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--text-1);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.chip:hover { background: var(--bg-3); }
.chip:active { transform: scale(0.94); }
.chip.is-active { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

.learn__engine-note {
    padding: 14px 18px;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--text-1);
    margin: 0;
}

/* ---- Wider container variant (Learn page uses this) ---- */
.container--wide { max-width: 1440px; }
/* Pattern maker + player: grid cells are fixed 72px, so use the whole screen width on
   desktop instead of a capped column (2026-09-23). Text blocks stay readable-width. */
.container--full { max-width: none; padding: 0 32px; }
@media (max-width: 640px) { .container--full { padding: 0 16px; } }
.prose--full { max-width: none; }
.prose--full .prose__lead, .prose--full > p { max-width: 760px; }

/* ---- Compact play controls bar ---- */
.learn__playbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    flex-wrap: wrap;
}

.bpm-input {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.bpm-input__lbl {
    padding: 0 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-2);
    font-weight: 700;
}
.bpm-input input {
    width: 56px;
    padding: 6px 4px;
    background: transparent;
    border: 0;
    color: var(--text-0);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    -moz-appearance: textfield;
}
.bpm-input input::-webkit-outer-spin-button,
.bpm-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bpm-input input:focus { outline: none; }
.bpm-input__btn {
    width: 22px; height: 22px;
    border-radius: 5px;
    background: var(--bg-3);
    color: var(--text-1);
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.bpm-input__btn:hover { background: var(--accent-soft); color: var(--accent); }

.progress {
    position: relative;
    flex: 1 1 200px;
    min-width: 160px;
    height: 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}
.progress__bar {
    position: absolute;
    inset: 0;
    right: auto;
    width: 0;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
    box-shadow: 0 0 12px var(--accent-glow);
    transition: width 60ms linear;
}
.time-remain {
    font-family: ui-monospace, monospace;
    font-size: 13px;
    color: var(--text-1);
    min-width: 44px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-fg);
    border: 0;
    cursor: pointer;
    box-shadow: 0 6px 20px var(--accent-glow);
    font-size: 16px;
    transition: transform var(--dur-fast) var(--ease-spring), filter var(--dur-fast);
}
.play-btn:hover { filter: brightness(1.1); }
.play-btn:active { transform: scale(0.94); }

.mode-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.mode-mini__lbl {
    padding: 0 4px 0 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-2);
    font-weight: 700;
}
.mode-mini .seg { padding: 4px 8px; font-size: 13px; }

.midi-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-2);
    color: var(--text-2);
    border: 1px solid var(--line);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.midi-badge.is-on {
    background: color-mix(in srgb, var(--ok) 15%, var(--bg-2));
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
}
.midi-badge__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-2);
}
.midi-badge.is-on .midi-badge__dot {
    background: var(--ok);
    box-shadow: 0 0 8px var(--ok);
}

/* ---- Playhead + hit-fire animations ---- */
.pattern-grid__cell.is-playing {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}
.pattern-grid__cell.is-hit.is-fire {
    animation: hitFire 260ms ease-out;
}
@keyframes hitFire {
    0%   { transform: scale(1.18); box-shadow: 0 0 50px var(--accent), inset 0 0 0 2px #fff; }
    100% { transform: scale(1);    box-shadow: 0 0 12px var(--accent-glow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, #fff); }
}

/* ---- Input display (keyboard row or pads grid) ---- */
.input-display {
    padding: 22px;
    background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.keys-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.key {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 92px;
    padding: 18px 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 3px 0 var(--line), 0 4px 0 rgba(0,0,0,0.15);
    cursor: pointer;
    user-select: none;
    transition: transform 80ms var(--ease-spring), box-shadow 80ms, background 80ms, border-color var(--dur-fast);
}
.key:hover { border-color: var(--accent); }
.key.is-active {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: transparent;
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 0 30px var(--accent-glow);
}
.key__label { font-size: 13px; font-weight: 600; color: var(--text-1); text-transform: uppercase; letter-spacing: 0.04em; }
.key.is-active .key__label { color: var(--accent-fg); }
.key__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px; min-height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--bg-3);
    color: var(--text-0);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
}
.key.is-active .key__key { background: rgba(0,0,0,0.25); color: var(--accent-fg); }

.pads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
}
.pad {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    cursor: pointer;
    user-select: none;
    box-shadow: 0 4px 0 var(--line), 0 5px 0 rgba(0,0,0,0.15);
    transition: transform 80ms var(--ease-spring), box-shadow 80ms, background 80ms, border-color var(--dur-fast);
}
.pad:hover { border-color: var(--accent); }
.pad.is-active {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: transparent;
    transform: translateY(4px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 0 40px var(--accent-glow);
}
.pad__label { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.pad__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px; min-height: 24px;
    padding: 0 8px;
    background: var(--bg-3);
    color: var(--text-0);
    border-radius: 6px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
}
.pad.is-active .pad__key { background: rgba(0,0,0,0.25); color: var(--accent-fg); }

/* Hide the OLD .learn__controls, .learn__engine-note, .learn__flash, .learn__actions if present.
   Keeping the CSS below no-ops those in case something else references them. */
.learn__controls { display: none; }
.learn__actions  { display: none; }
.learn__engine-note {
    padding: 12px 16px;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--text-1);
    margin: 0;
}

/* ---- Beat-1 emphasis (ruler + grid) ---- */
.pattern-grid__cell--ruler .beat-num {
    color: var(--text-2);
    font-size: 10px;
    opacity: 0.55;
    font-weight: 700;
}
.pattern-grid__cell--ruler.is-bar .beat-num {
    color: var(--accent);
    opacity: 1;
    font-size: 13px;
    font-weight: 800;
}
.pattern-grid__cell.is-bar:not(.pattern-grid__cell--ruler) {
    box-shadow: inset 2px 0 0 var(--accent);
}
.pattern-grid__cell.is-playing {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    z-index: 1;
}

/* ---- Timing feedback on input pads / keys ---- */
.pad.is-perfect, .key.is-perfect {
    background: var(--ok);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 0 44px color-mix(in srgb, var(--ok) 55%, transparent);
    transform: translateY(3px);
}
.pad.is-good, .key.is-good {
    background: var(--warn);
    color: #1a1a26;
    border-color: transparent;
    box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 0 34px color-mix(in srgb, var(--warn) 45%, transparent);
    transform: translateY(3px);
}
.pad.is-miss, .key.is-miss {
    background: var(--danger);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 0 34px color-mix(in srgb, var(--danger) 45%, transparent);
    transform: translateY(3px);
}
.pad.is-perfect .pad__key, .key.is-perfect .key__key,
.pad.is-miss .pad__key,    .key.is-miss .key__key {
    background: rgba(0,0,0,0.25); color: #ffffff;
}
.pad.is-good .pad__key,    .key.is-good .key__key {
    background: rgba(0,0,0,0.15); color: #1a1a26;
}

/* ---- DEMO mode indicator ---- */
.mode-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
}
.mode-indicator__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: modePulse 1.2s ease-in-out infinite;
}
.mode-indicator.is-paused { opacity: 0.5; filter: grayscale(0.4); }
.mode-indicator.is-paused .mode-indicator__dot {
    animation: none;
    box-shadow: none;
    background: var(--text-2);
}
@keyframes modePulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.35); }
}

/* ---- Mode buttons (DEMO / PRACTICE) ---- */
.mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--r-md);
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--text-0);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast),
                color var(--dur-fast), transform var(--dur-fast) var(--ease-spring),
                box-shadow var(--dur-fast);
}
.mode-btn:hover:not(:disabled) { background: var(--bg-3); border-color: var(--accent); }
.mode-btn:active:not(:disabled) { transform: scale(0.96); }
.mode-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.mode-btn.is-active {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: transparent;
    box-shadow: 0 4px 20px var(--accent-glow);
}
.mode-btn--practice.is-active {
    background: var(--ok);
    color: #fff;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--ok) 40%, transparent);
}
.mode-btn__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: modeBtnPulse 1s ease-in-out infinite;
}
@keyframes modeBtnPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.3); }
}

/* Hide the old single .play-btn now that we have two mode buttons */
.play-btn { display: none; }

/* ---- Subdivision label emphasis (1 vs 2/3/4 vs & vs e/a) ---- */
.pattern-grid__cell--ruler .beat-num {
    color: var(--text-2);
    font-size: 9px;
    opacity: 0.45;
    font-weight: 700;
}
.pattern-grid__cell--ruler.is-beat .beat-num {
    color: var(--text-1);
    font-size: 11px;
    opacity: 0.85;
    font-weight: 700;
}
.pattern-grid__cell--ruler.is-bar .beat-num {
    color: var(--accent);
    font-size: 14px;
    opacity: 1;
    font-weight: 800;
}

/* ---- Count-in overlay ---- */
.learn__grid-wrap { position: relative; }
.count-in {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-0) 60%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 5;
    pointer-events: none;
    border-radius: var(--r-lg);
}
.count-in__num {
    font-size: clamp(80px, 18vw, 180px);
    font-weight: 900;
    color: var(--accent);
    text-shadow: 0 0 60px var(--accent-glow);
    line-height: 1;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    letter-spacing: -0.04em;
}
.count-in__num.is-pulse {
    animation: countPulse 0.4s var(--ease-spring);
}
@keyframes countPulse {
    0%   { transform: scale(0.5); opacity: 0; }
    45%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---- Completion overlay (shown after a finite play ends) ---- */
.complete-overlay {
    background: color-mix(in srgb, var(--bg-0) 70%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
    animation: fadeIn 200ms ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.complete-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 32px;
    background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    max-width: 520px;
    text-align: center;
}
.complete-title {
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text-0);
}
.complete-subtitle {
    color: var(--text-1);
    font-size: 14px;
    margin: -12px 0 0;
}
.complete-stats {
    display: flex;
    gap: 24px;
    padding: 16px 24px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.complete-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
}
.complete-stat__num {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-0);
}
.complete-stat--perfect .complete-stat__num { color: var(--ok); }
.complete-stat--good    .complete-stat__num { color: var(--warn); }
.complete-stat--miss    .complete-stat__num { color: var(--danger); }
.complete-stat__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-2);
    font-weight: 700;
}
.complete-score {
    font-size: 42px;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    font-family: ui-monospace, monospace;
}
.complete-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Time display in the playbar (elapsed / total) */
.time-display {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 13px;
    color: var(--text-1);
    min-width: 92px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.time-display .time-sep { color: var(--text-2); margin: 0 4px; }
.time-display .time-total { color: var(--text-2); }

/* ---- Scroll-flicker fix during count-in / complete overlay ---- */
.learn__grid-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    contain: layout;
    min-height: 180px;
}
.count-in {
    overflow: hidden;
    contain: layout paint;
}
.count-in__num {
    will-change: transform;
}

/* ---- Completion overlay: promote to full-viewport fixed so it never gets clipped ---- */
.complete-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: color-mix(in srgb, var(--bg-0) 78%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 0;
    pointer-events: auto;
    animation: fadeIn 200ms ease-out;
}

/* Prominent Play Again button */
.complete-actions .button--primary {
    font-size: 16px;
    padding: 16px 28px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.complete-actions {
    margin-top: 8px;
}

/* ---- DAW-style grid ---- */
.grid-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    position: relative;
    scroll-behavior: auto; /* JS controls scroll for the playhead */
    contain: layout;
}
.grid-inner {
    position: relative;
    display: block;
}
.lane {
    display: flex;
    border-bottom: 1px solid var(--line);
}
.lane:last-of-type { border-bottom: 0; }
.lane__label {
    flex: 0 0 100px;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-2);
    border-right: 1px solid var(--line);
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-0);
    gap: 8px;
}
.lane__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 2px 6px;
    background: var(--bg-3);
    color: var(--text-2);
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.lane--ruler .lane__label {
    background: var(--bg-3);
    border-bottom: 1px solid var(--line);
}

.lane__track {
    position: relative;
    background:
        /* 16th tick lines every CELL_PX (26px) */
        repeating-linear-gradient(to right,
            transparent 0 25px,
            color-mix(in srgb, var(--line) 60%, transparent) 25px 26px),
        var(--bg-1);
}
/* Beat lines every 4 ticks = 104px */
.lane__track::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(to right,
            var(--line) 0 1px,
            transparent 1px 104px);
    pointer-events: none;
}
/* Bar lines every 16 ticks = 416px (stronger accent) */
.lane__track::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(to right,
            color-mix(in srgb, var(--accent) 55%, var(--line)) 0 2px,
            transparent 2px 416px);
    pointer-events: none;
}

/* Beat number labels in the ruler */
.beat-marker {
    position: absolute;
    top: 4px;
    display: inline-block;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-2);
    padding-left: 3px;
    pointer-events: none;
}
.beat-marker.is-bar {
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
}
.lane--ruler .lane__track::before,
.lane--ruler .lane__track::after { display: none; }
.lane--ruler .lane__track {
    background:
        repeating-linear-gradient(to right,
            transparent 0 103px,
            color-mix(in srgb, var(--line) 80%, transparent) 103px 104px),
        var(--bg-2);
}

/* Notes: rectangles inside the track */
.note {
    position: absolute;
    top: 6px;
    bottom: 6px;
    background: color-mix(in srgb, var(--accent) 55%, var(--bg-1));
    border: 1px solid var(--accent);
    border-radius: 5px;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 20%, transparent);
    transition: transform 90ms var(--ease-spring), background 90ms;
    z-index: 1;
}
.note.is-firing {
    background: var(--accent);
    box-shadow: 0 0 20px var(--accent), inset 0 0 0 2px #fff;
    animation: noteFire 400ms var(--ease-out);
}
@keyframes noteFire {
    0%   { transform: scaleY(1.15); filter: brightness(1.4); }
    100% { transform: scaleY(1);    filter: none; }
}
.note.is-perfect {
    background: var(--ok);
    border-color: var(--ok);
    box-shadow: 0 0 28px color-mix(in srgb, var(--ok) 80%, transparent), inset 0 0 0 2px #fff;
    animation: notePerfect 500ms var(--ease-spring);
    z-index: 2;
}
.note.is-good {
    background: var(--warn);
    border-color: var(--warn);
    box-shadow: 0 0 22px color-mix(in srgb, var(--warn) 70%, transparent);
    z-index: 2;
}
@keyframes notePerfect {
    0%   { transform: scale(1.2, 1.3); filter: brightness(1.5); }
    100% { transform: scale(1); filter: none; }
}

/* Playhead line */
.playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--accent) 60%, transparent));
    box-shadow: 0 0 8px var(--accent), 0 0 20px var(--accent);
    z-index: 3;
    pointer-events: none;
    will-change: transform;
    transform: translateX(0);
}
.playhead::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -5px;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent);
}

/* Count-in cubes (over first bar beats) */
.count-cubes {
    position: absolute;
    top: 26px; /* below ruler */
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 4;
}
.count-cube {
    position: absolute;
    top: 6px;
    bottom: 6px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, monospace;
    font-size: 26px;
    font-weight: 900;
    color: color-mix(in srgb, var(--accent) 60%, var(--text-2));
    transition: background 100ms, border-color 100ms;
}
.count-cube.is-pulse {
    background: var(--accent);
    border-color: var(--accent);
    border-style: solid;
    color: var(--accent-fg);
    box-shadow: 0 0 30px var(--accent-glow);
    animation: cubePulse 360ms var(--ease-spring);
}
@keyframes cubePulse {
    0%   { transform: scale(0.9); }
    45%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Hit popup ("+100" / "+60" floating up) */
.hit-popup {
    position: absolute;
    font-family: ui-monospace, monospace;
    font-size: 22px;
    font-weight: 900;
    color: var(--ok);
    text-shadow: 0 0 12px color-mix(in srgb, var(--ok) 80%, transparent), 0 2px 4px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 10;
    transform: translate(-50%, 0);
    animation: hitPopupFloat 900ms ease-out forwards;
    letter-spacing: -0.02em;
}
.hit-popup--good {
    color: var(--warn);
    text-shadow: 0 0 12px color-mix(in srgb, var(--warn) 80%, transparent), 0 2px 4px rgba(0,0,0,0.5);
}
@keyframes hitPopupFloat {
    0%   { transform: translate(-50%, 0)     scale(0.5); opacity: 0; }
    15%  { transform: translate(-50%, -10px) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50px) scale(1);   opacity: 0; }
}

/* Prominent timer — accent color, monospace, bigger */
.time-display {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    min-width: 122px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.time-display .time-sep {
    color: var(--text-2);
    margin: 0 4px;
    font-weight: 400;
}
.time-display .time-total {
    color: var(--text-2);
    font-weight: 600;
}

/* Hide the older legacy pattern-grid styles just in case they still exist */
.pattern-grid { display: none; }

/* Level chips accent when active */
.chip.is-active { background: var(--accent); }

/* ---- Per-instrument colors ---- */
:root {
    --pad-kick:    #4785ff;
    --pad-snare:   #fbbf24;
    --pad-hihat:   #14b8a6;
    --pad-openhat: #f97316;
    --pad-clap:    #ec4899;
    --pad-tom:     #a855f7;
    --pad-ride:    #06b6d4;
    --pad-crash:   #ef4444;
    --pad-bass:    #22c55e;
}
.note[data-pad="kick"],    .lane[data-pad="kick"]    .lane__dot,
.pad[data-pad-input="kick"], .key[data-pad-input="kick"]    { --note-color: var(--pad-kick); }
.note[data-pad="snare"],   .lane[data-pad="snare"]   .lane__dot,
.pad[data-pad-input="snare"], .key[data-pad-input="snare"]  { --note-color: var(--pad-snare); }
.note[data-pad="hihat"],   .lane[data-pad="hihat"]   .lane__dot,
.pad[data-pad-input="hihat"], .key[data-pad-input="hihat"]  { --note-color: var(--pad-hihat); }
.note[data-pad="openhat"], .lane[data-pad="openhat"] .lane__dot,
.pad[data-pad-input="openhat"], .key[data-pad-input="openhat"] { --note-color: var(--pad-openhat); }
.note[data-pad="clap"],    .lane[data-pad="clap"]    .lane__dot,
.pad[data-pad-input="clap"], .key[data-pad-input="clap"]    { --note-color: var(--pad-clap); }
.note[data-pad="tom"],     .lane[data-pad="tom"]     .lane__dot,
.pad[data-pad-input="tom"], .key[data-pad-input="tom"]      { --note-color: var(--pad-tom); }
.note[data-pad="ride"],    .lane[data-pad="ride"]    .lane__dot,
.pad[data-pad-input="ride"], .key[data-pad-input="ride"]    { --note-color: var(--pad-ride); }
.note[data-pad="crash"],   .lane[data-pad="crash"]   .lane__dot,
.pad[data-pad-input="crash"], .key[data-pad-input="crash"]  { --note-color: var(--pad-crash); }

/* Lane label color dot */
.lane__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--note-color, var(--accent));
    box-shadow: 0 0 8px var(--note-color, var(--accent));
    flex-shrink: 0;
}
.lane__label {
    gap: 8px;
}
.lane__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Hide the horizontal scrollbar (auto-scroll only) ---- */
.grid-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.grid-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---- Notes as duration-sized squares, per-pad color ---- */
.note {
    position: absolute;
    background: color-mix(in srgb, var(--note-color, var(--accent)) 78%, var(--bg-1));
    border: 1px solid color-mix(in srgb, var(--note-color, var(--accent)) 100%, transparent);
    border-radius: 6px;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--note-color, var(--accent)) 35%, transparent);
    transition: transform 90ms var(--ease-spring), box-shadow 90ms, filter 90ms, background 90ms;
    z-index: 1;
}
.note.is-firing {
    background: var(--note-color, var(--accent));
    filter: brightness(1.3);
    box-shadow: 0 0 26px var(--note-color, var(--accent)), inset 0 0 0 2px rgba(255,255,255,0.7);
    animation: noteFire 400ms var(--ease-out);
    z-index: 2;
}
@keyframes noteFire {
    0%   { transform: scale(1.28); filter: brightness(1.6); }
    100% { transform: scale(1);    filter: none; }
}
.note.is-perfect {
    background: var(--ok);
    border-color: var(--ok);
    box-shadow: 0 0 32px var(--ok), inset 0 0 0 2px #fff;
    animation: notePerfect 500ms var(--ease-spring);
    z-index: 3;
}
.note.is-good {
    background: var(--warn);
    border-color: var(--warn);
    box-shadow: 0 0 24px var(--warn), inset 0 0 0 2px rgba(0,0,0,0.15);
    z-index: 3;
}
@keyframes notePerfect {
    0%   { transform: scale(1.35); filter: brightness(1.6); }
    100% { transform: scale(1);    filter: none; }
}

/* ---- Beat marker pulse during count-in (replaces overlay cubes) ---- */
.beat-marker.is-counting {
    color: var(--accent-fg) !important;
    background: var(--accent);
    padding: 3px 10px 3px 12px;
    border-radius: 999px;
    box-shadow: 0 0 24px var(--accent), 0 0 40px var(--accent-glow);
    font-size: 18px !important;
    font-weight: 900 !important;
    z-index: 5;
    animation: beatCountPulse 500ms var(--ease-spring);
}
@keyframes beatCountPulse {
    0%   { transform: scale(0.6); opacity: 0.5; }
    45%  { transform: scale(1.6); opacity: 1;   }
    100% { transform: scale(1);   opacity: 1;   }
}

/* ---- Radial hit wave (perfect / good hit celebration) ---- */
.hit-wave {
    position: absolute;
    width: 28px; height: 28px;
    margin-left: -14px;
    margin-top: -14px;
    border-radius: 50%;
    border: 3px solid var(--ok);
    pointer-events: none;
    z-index: 9;
    animation: hitWave 600ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    box-shadow: 0 0 20px var(--ok), inset 0 0 12px var(--ok);
}
.hit-wave--good {
    border-color: var(--warn);
    box-shadow: 0 0 20px var(--warn), inset 0 0 12px var(--warn);
}
@keyframes hitWave {
    0%   { transform: scale(0.4); opacity: 0.95; border-width: 4px; }
    60%  { opacity: 0.6; }
    100% { transform: scale(3.5); opacity: 0; border-width: 1px; }
}

/* ---- Input pads / keys get their pad color as a top accent bar ---- */
.pad, .key {
    position: relative;
    overflow: hidden;
}
.pad::before, .key::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--note-color, var(--accent));
    box-shadow: 0 0 8px var(--note-color, var(--accent));
    z-index: 0;
}

/* ---- Old .count-cubes rules become no-ops (element no longer rendered) ---- */
.count-cubes, .count-cube { display: none; }

/* ---- Nudge lane label styling for the new dot + name + key structure ---- */
.lane__label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* ---- Perfect-hit celebration extras (inner ring + flying particles) ---- */
.hit-wave--inner {
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
    border-color: #ffffff;
    box-shadow: 0 0 16px #ffffff, inset 0 0 10px #ffffff;
    animation-duration: 500ms;
}

.hit-particle {
    position: absolute;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 10px var(--ok), 0 0 4px #ffffff;
    pointer-events: none;
    z-index: 11;
    animation: hitParticle 720ms cubic-bezier(0.15, 0.75, 0.3, 1) forwards;
}
@keyframes hitParticle {
    0%   { transform: translate(0, 0)                  scale(1); opacity: 1; }
    60%  { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.25); opacity: 0; }
}

/* ---- Pre-roll (empty count-in zone) ---- */
.preroll-shade {
    position: absolute;
    top: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--bg-0) 55%, transparent);
    border-right: 2px dashed color-mix(in srgb, var(--accent) 50%, var(--line));
    pointer-events: none;
    z-index: 1;
}
.beat-marker--preroll {
    color: color-mix(in srgb, var(--accent) 60%, var(--text-2));
    font-family: ui-monospace, monospace;
    font-size: 11px;
    opacity: 0.55;
    padding-left: 6px;
    letter-spacing: 0;
    font-weight: 700;
}
.beat-marker--preroll.is-counting {
    color: var(--accent-fg) !important;
    background: var(--accent);
    padding: 3px 10px 3px 12px;
    border-radius: 999px;
    box-shadow: 0 0 24px var(--accent), 0 0 40px var(--accent-glow);
    font-size: 18px !important;
    font-weight: 900 !important;
    z-index: 5;
    opacity: 1 !important;
    animation: beatCountPulse 500ms var(--ease-spring);
}

/* ---- Transport buttons (compact, icon-only) ---- */
.transport {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.xport {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text-1);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.xport:hover { background: var(--bg-3); color: var(--text-0); }
.xport:active { transform: scale(0.94); }

/* ---- Live score HUD (top, during practice) ---- */
.score-hud {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin: 6px 0 2px;
    padding: 6px 16px;
    background: color-mix(in srgb, var(--ok) 12%, var(--bg-2));
    border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line));
    border-radius: 999px;
}
.score-hud__pts {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 26px;
    font-weight: 900;
    color: var(--ok);
    line-height: 1;
    letter-spacing: -0.02em;
}
.score-hud__combo {
    font-family: ui-monospace, monospace;
    font-size: 14px;
    font-weight: 800;
    color: var(--warn);
}

/* Subtler pre-roll shade (was reading as a big block) */
.preroll-shade {
    background: color-mix(in srgb, var(--bg-0) 32%, transparent);
    border-right: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
}

/* hidden attribute must win over .score-hud display */
.score-hud[hidden] { display: none !important; }

/* ---- Loop section ---- */
.xport--loop.is-on { background: var(--accent); color: var(--accent-fg); }
.xport--loop.is-arming { background: color-mix(in srgb, var(--accent) 30%, var(--bg-3)); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.loop-band {
    position: absolute;
    top: 0; bottom: 0;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-left: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    z-index: 2;
    pointer-events: none;
}
.loop-band.is-draft { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.loop-band::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}

/* Remove the vertical bar line at beat 1 — keep only the blue number highlight */
.lane__track::after { display: none !important; }

/* Practice button pulses green after a demo finishes, to guide the user */
.mode-btn--practice.suggest {
    background: var(--ok);
    color: #fff;
    border-color: transparent;
    animation: suggestPulse 1.1s ease-in-out infinite;
}
@keyframes suggestPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
    50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 0%, transparent); }
}

/* ===== Mode buttons: Demo = yellow, Practice = green, suggested = blue ===== */
.mode-btn--demo {
    background: var(--warn) !important;
    color: #1a1a26 !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--warn) 40%, transparent);
}
.mode-btn--demo:hover:not(:disabled) { filter: brightness(1.06); }
.mode-btn--demo.is-active { background: var(--warn) !important; filter: brightness(0.92); }
.mode-btn.is-dim { background: var(--bg-3) !important; color: var(--text-2) !important; border-color: var(--line) !important; box-shadow: none !important; opacity: 0.6; filter: grayscale(0.6); }

.mode-btn--practice {
    background: var(--ok) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--ok) 35%, transparent);
}
.mode-btn--practice:hover:not(:disabled) { filter: brightness(1.06); }
.mode-btn--practice.is-active { background: var(--ok) !important; filter: brightness(0.92); }

/* After a demo: pull attention to Practice — turn it blue and pulse */
.mode-btn--practice.suggest {
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
    animation: suggestPulse 1.1s ease-in-out infinite;
}
.mode-btn--practice.suggest .mode-btn__dot { background: var(--accent-fg); }

.mode-btn:disabled { opacity: 0.4; }
.mode-btn__dot { background: currentColor; }

/* Sound-enable hint chip (until first user gesture unlocks audio) */
.sound-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--warn) 18%, var(--bg-2));
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    animation: suggestPulse 1.4s ease-in-out infinite;
}

/* Completion overlay: close button + points/best */
.complete-body { position: relative; }
.complete-close {
    position: absolute; top: 10px; right: 12px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--bg-3);
    color: var(--text-1);
    border: 1px solid var(--line);
    font-size: 20px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.complete-close:hover { background: var(--danger); color: #fff; border-color: transparent; }
.complete-score__unit { font-size: 18px; color: var(--text-2); font-weight: 700; }
.complete-best { font-size: 14px; color: var(--text-1); margin-top: -6px; }
.complete-best b { color: var(--text-0); font-family: ui-monospace, monospace; }
.complete-best.is-new b { color: var(--ok); }
.best-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; margin-left: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ok) 18%, transparent);
    color: var(--ok);
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}

/* ===== Mode button states (final) — override earlier rules ===== */
/* Demo: neutral by default, blue CTA before first play, yellow while running */
.mode-btn--demo { background: var(--bg-2) !important; color: var(--text-0) !important; border-color: var(--line) !important; box-shadow: none; }
.mode-btn--demo.is-cta { background: var(--accent) !important; color: var(--accent-fg) !important; border-color: transparent !important; box-shadow: 0 4px 16px var(--accent-glow); animation: suggestPulse 1.4s ease-in-out infinite; }
.mode-btn--demo.is-running { background: var(--warn) !important; color: #1a1a26 !important; border-color: transparent !important; box-shadow: 0 4px 16px color-mix(in srgb, var(--warn) 40%, transparent); animation: none; }

/* Practice: green by default, blue (pulsing) right after a demo completes */
.mode-btn--practice { background: #047857 !important; color: #fff !important; border-color: transparent !important; } /* audit: white on #10b981 was 2.5:1 */
.mode-btn--practice.is-active { background: #047857 !important; filter: brightness(0.92); }
.mode-btn--practice.suggest { background: var(--accent) !important; color: var(--accent-fg) !important; animation: suggestPulse 1.1s ease-in-out infinite; }

/* Overlay: highlight the Practice (Exersează) button, demo-again secondary */
.complete-practice { background: var(--ok) !important; color:#fff !important; border-color: transparent !important; box-shadow: 0 6px 20px color-mix(in srgb, var(--ok) 40%, transparent); }

/* Overlays live inside the ruler track; pin them to the top of the grid and span full height */
.lane--ruler .lane__track { overflow: visible; }
.preroll-shade, .loop-band, .playhead { top: 0; }
.playhead { z-index: 50; }
.loop-band { z-index: 6; }
.preroll-shade { z-index: 1; }

/* ---- Count HUD (center subdivision syllable) ---- */
.grid-frame { position: relative; }
.count-hud {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: clamp(64px, 12vw, 130px);
    font-weight: 900;
    color: color-mix(in srgb, var(--accent) 85%, #fff);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    text-shadow: 0 0 40px var(--accent-glow);
    letter-spacing: -0.04em;
}
.count-hud.is-show { animation: countHudPop 260ms ease-out; }
@keyframes countHudPop {
    0%   { opacity: 0.0; transform: translate(-50%,-50%) scale(0.7); }
    30%  { opacity: 0.9; transform: translate(-50%,-50%) scale(1.05); }
    100% { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
}
.count-select {
    padding: 6px 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text-0);
    font-size: 13px;
    font-family: ui-monospace, monospace;
    cursor: pointer;
}
.count-select:focus { outline: none; border-color: var(--accent); }

/* Force ALL lane labels to the SAME exact width (flex min-width:auto was letting
   content-filled pad labels grow wider than the empty ruler label, pushing the
   note tracks right of the playhead track). This is the real alignment fix. */
.lane__label { min-width: 0 !important; max-width: 100px; overflow: hidden; box-sizing: border-box; }
.lane__name { min-width: 0; }

/* Count HUD must never overflow the grid (was pushing a page scrollbar on short grids) */
.grid-frame { overflow: hidden; }
.count-hud { font-size: clamp(40px, 8vw, 88px) !important; line-height: 1; max-height: 100%; }

/* ---- Leaderboard ---- */
.lb-levels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.lb-chip {
    padding: 8px 14px; border-radius: 999px;
    background: var(--bg-2); border: 1px solid var(--line);
    color: var(--text-1); font-size: 13px; font-weight: 600; text-decoration: none;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.lb-chip:hover { background: var(--bg-3); color: var(--text-0); opacity: 1; }
.lb-chip.is-active { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

.lb-table { width: 100%; border-collapse: collapse; }
.lb-table th {
    text-align: left; padding: 14px 20px; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-2); border-bottom: 1px solid var(--line);
}
.lb-table td { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 15px; }
.lb-table tbody tr:last-child td { border-bottom: 0; }
.lb-table tbody tr.is-me { background: var(--accent-soft); }
.card.is-me { border-color: var(--accent); background: var(--accent-soft); }
.lb-rank { color: var(--text-2); font-family: ui-monospace, monospace; font-weight: 700; padding-left: 6px; }
.lb-medal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    font-weight: 800; font-size: 13px; color: #1a1a26;
}
.lb-medal--1 { background: linear-gradient(135deg, #fde047, #eab308); box-shadow: 0 0 14px rgba(234,179,8,0.5); }
.lb-medal--2 { background: linear-gradient(135deg, #e5e7eb, #9ca3af); }
.lb-medal--3 { background: linear-gradient(135deg, #fdba74, #c2733a); }
.lb-you {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
    background: var(--accent); color: var(--accent-fg);
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
}

.complete-top-link {
    display: inline-block; margin-top: 14px;
    color: var(--text-1); font-size: 13px; font-weight: 600; text-decoration: none;
}
.complete-top-link:hover { color: var(--accent); }

/* One-time hint when MIDI is played before audio is unlocked */
.audio-hint-toast {
    position: fixed;
    left: 50%; bottom: 28px;
    transform: translateX(-50%) translateY(20px);
    background: var(--accent);
    color: var(--accent-fg);
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px; font-weight: 700;
    box-shadow: 0 10px 30px var(--accent-glow);
    z-index: 1000;
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-med), transform var(--dur-med);
}
.audio-hint-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); animation: suggestPulse 1.4s ease-in-out infinite; }

/* ===== Input pads/keys: strong per-instrument color so the user knows which to press ===== */
.key, .pad {
    border: 2px solid var(--note-color, var(--line)) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--note-color, var(--accent)) 30%, transparent),
                0 4px 12px color-mix(in srgb, var(--note-color, var(--accent)) 18%, transparent);
}
.key::before, .pad::before { height: 6px !important; background: var(--note-color, var(--accent)) !important; }
.key__label, .pad__label { color: var(--note-color, var(--text-0)) !important; }
.key__key, .pad__key {
    background: color-mix(in srgb, var(--note-color, var(--bg-3)) 22%, var(--bg-3)) !important;
}
/* A big color dot on each pad so it's unmistakable */
.pad { position: relative; }

/* Active (pressed / hit) — flash in the instrument's own color, not the generic accent */
.key.is-active:not(.is-perfect):not(.is-good):not(.is-miss),
.pad.is-active:not(.is-perfect):not(.is-good):not(.is-miss) {
    background: var(--note-color, var(--accent)) !important;
    color: #0a0a0f !important;
    box-shadow: 0 0 0 2px var(--note-color, var(--accent)),
                0 0 34px color-mix(in srgb, var(--note-color, var(--accent)) 70%, transparent) !important;
    transform: translateY(3px);
}
.key.is-active:not(.is-perfect):not(.is-good):not(.is-miss) .key__label,
.pad.is-active:not(.is-perfect):not(.is-good):not(.is-miss) .pad__label { color: #0a0a0f !important; }

/* Demo teaching blink: flicker the on-screen pad the learner should press,
   in that instrument's own color, so demo shows both which pad and when. */
@keyframes padDemoBlink {
    0%   { transform: translateY(0);   box-shadow: 0 0 0 2px var(--note-color, var(--accent)),
                                                     0 0 10px color-mix(in srgb, var(--note-color, var(--accent)) 40%, transparent); }
    30%  { transform: translateY(3px); box-shadow: 0 0 0 3px var(--note-color, var(--accent)),
                                                     0 0 40px color-mix(in srgb, var(--note-color, var(--accent)) 90%, transparent); }
    100% { transform: translateY(0);   box-shadow: 0 0 0 2px var(--note-color, var(--accent)),
                                                     0 0 10px color-mix(in srgb, var(--note-color, var(--accent)) 40%, transparent); }
}
.key.is-demo, .pad.is-demo {
    background: color-mix(in srgb, var(--note-color, var(--accent)) 55%, var(--bg-2)) !important;
    color: #0a0a0f !important;
    animation: padDemoBlink 0.34s ease-out;
}
.key.is-demo .key__label, .pad.is-demo .pad__label { color: #0a0a0f !important; }
.key.is-demo .key__key,   .pad.is-demo .pad__key   { background: rgba(0,0,0,0.22) !important; }

/* Timing-feedback states still override with green/yellow/red (perfect/good/miss) */

/* Miss feedback: small red dot that pops over the mis-hit pad */
.miss-dot {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff3b3b;
    box-shadow: 0 0 8px rgba(255,59,59,.85);
    pointer-events: none;
    z-index: 9999;
    animation: missDotPop .7s ease-out forwards;
}
@keyframes missDotPop {
    0%   { transform: translateY(0) scale(.3);  opacity: 0; }
    18%  { transform: translateY(-2px) scale(1); opacity: 1; }
    100% { transform: translateY(-16px) scale(.85); opacity: 0; }
}

/* ---- Level selection: grooves x instrument-combo sublevels ---- */
.learn__grooves { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.groove-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.groove-group__name {
    min-width: 74px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-2);
}
.groove-group__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip--combo {
    width: auto;
    min-width: 40px;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    letter-spacing: .02em;
}
@media (max-width: 640px) {
    .groove-group { align-items: flex-start; flex-direction: column; gap: 6px; }
    .groove-group__name { min-width: 0; }
}

/* Miss marker placed on the grid lane at the exact hit time */
.grid-miss {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    margin-top: -6.5px;
    border-radius: 50%;
    background: #ff3b3b;
    border: 1.5px solid #fff;
    box-shadow: 0 0 9px rgba(255,59,59,.9);
    pointer-events: none;
    z-index: 40;
    animation: gridMissPop .45s cubic-bezier(.2,1.4,.5,1) both;
}
@keyframes gridMissPop {
    0%   { transform: scale(.2); opacity: 0; }
    40%  { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ============ Level menu (choose a tutorial) ============ */
.level-menu { display: flex; flex-direction: column; gap: 34px; padding: 8px 0 24px; }
.level-menu__genre { display: flex; flex-direction: column; gap: 16px; }
.level-menu__head { display: flex; align-items: center; gap: 14px; }
.level-menu__icon { font-size: 30px; line-height: 1; }
.level-menu__title { margin: 0; font-size: 22px; font-weight: 800; }
.level-menu__desc { margin: 2px 0 0; color: var(--text-2); font-size: 14px; }
.level-menu__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.level-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-height: 104px;
    padding: 14px 16px;
    text-align: left;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    cursor: pointer;
    color: var(--text-1);
    transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
    box-shadow: 0 4px 0 var(--line), 0 5px 0 rgba(0,0,0,0.12);
}
.level-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.level-card:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--line); }
.level-card__num {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    color: var(--accent);
}
.level-card__name { font-size: 13px; font-weight: 700; color: var(--text-2); }

/* Back button + player header tweaks */
.back-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-bottom: 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text-1);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.back-btn:hover { border-color: var(--accent); background: var(--bg-3); }
.learn__level-inst {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-2);
    margin-left: 8px;
}
.learn__level-count { font-size: 13px; color: var(--text-2); font-weight: 700; padding: 0 4px; }

/* Sublevel selector (inside a beat) */
.sub-selector { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.sub-chip {
    padding: 7px 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-1);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.sub-chip:hover { border-color: var(--accent); }
.sub-chip:active { transform: scale(0.95); }
.sub-chip.is-active { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.level-card__steps { font-size: 11px; font-weight: 700; color: var(--text-2); opacity: .8; }

/* Beat cards on the Learn menu — clean list, no number cube */
.level-card--beat {
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 84px;
}
.level-card--beat .level-card__name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-1);
}

/* ============ Lesson menu (/learn) — one clickable row per lesson/genre ============ */
/* Genre filter pills above the grid — reuses .learn__tabs/.learn__tab (the same pill
   look already defined for the style tab bar) but needs to wrap: that bar was designed
   for 2 tabs, this one can hold 8 (All + one per family) and must not overflow on mobile. */
.family-filter { display: flex; flex-wrap: wrap; margin-bottom: 16px; }
.lesson-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding: 8px 0 24px; }
.lesson-card {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 20px 22px;
    text-align: left;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    cursor: pointer;
    color: var(--text-1);
    box-shadow: 0 4px 0 var(--line), 0 5px 0 rgba(0,0,0,0.12);
    transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.lesson-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.lesson-card:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--line); }
.lesson-card__icon { font-size: 40px; line-height: 1; flex: none; }
.lesson-card__text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.lesson-card__title { font-size: 20px; font-weight: 800; }
.lesson-card__desc { font-size: 14px; color: var(--text-2); }
.lesson-card__arrow { font-size: 22px; color: var(--text-2); flex: none; }

/* Beat switch (top of player) + sublevel pager (bottom) */
.beat-switch { display: flex; align-items: center; gap: 10px; }
.beat-switch .learn__level-title { margin: 0; }
.learn__sub-name { color: var(--accent); }

.sub-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0 4px;
}
.sub-pager__lbl {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-right: 2px;
}
.sub-num {
    width: 38px;
    height: 38px;
    border-radius: var(--r-md);
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--text-1);
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.sub-num:hover { border-color: var(--accent); }
.sub-num:active { transform: scale(0.94); }
.sub-num.is-active { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

/* Sublevel nav (2026-09-25): identical prev/next cards with a mini preview of the level's
   first 10 notes, current level + dots in the middle. Replaces the 1..7 "pagination". */
.sub-nav {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px; align-items: stretch; margin: 18px 0 4px;
}
.sub-card {
    display: flex; flex-direction: column; gap: 6px; min-width: 0;
    padding: 12px 14px; border-radius: var(--r-md);
    background: var(--bg-2); border: 1px solid var(--line); color: var(--text-0);
    text-align: left; cursor: pointer; font: inherit;
    transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.sub-card--next { text-align: right; align-items: flex-end; }
.sub-card:hover { border-color: var(--accent); background: var(--bg-3); }
.sub-card:active { transform: scale(0.98); }
.sub-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.sub-card.is-empty { visibility: hidden; }
.sub-card__dir { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.sub-card__name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sub-card__preview { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.sub-card__row { display: flex; gap: 2px; overflow: hidden; }
.sub-card__row i {
    flex: 1 1 0; min-width: 3px; height: 8px; border-radius: 2px;
    background: color-mix(in srgb, var(--text-2) 18%, transparent);
}
.sub-card__row i.beat { background: color-mix(in srgb, var(--text-2) 32%, transparent); }
.sub-card__row i.on { background: var(--c); }
.sub-nav__mid {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 0 6px; text-align: center; min-width: 120px;
}
.sub-nav__count { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.sub-nav__cur { font-size: 16px; font-weight: 800; color: var(--accent); }
.sub-nav__dots { display: flex; gap: 6px; margin-top: 2px; }
.sub-dot {
    width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
    background: var(--bg-3); border: 1px solid var(--line);
    transition: transform var(--dur-fast), background var(--dur-fast);
}
.sub-dot:hover { transform: scale(1.25); border-color: var(--accent); }
.sub-dot.is-active { background: var(--accent); border-color: transparent; transform: scale(1.2); }
@media (max-width: 640px) {
    .sub-nav { grid-template-columns: 1fr 1fr; }
    .sub-nav__mid { grid-column: 1 / -1; grid-row: 1; }
    .sub-card { padding: 10px; }
}

/* ================= Custom bass editor ================= */
.bass-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-3); color: var(--text-1);
    border: 1px solid var(--line); border-radius: var(--r-md, 10px);
    padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
    margin-left: 8px;
}
.bass-btn:hover { border-color: var(--accent); color: var(--text-0); }

.bass-editor { max-width: 760px; }
.bass-panel {
    display: flex; flex-direction: column; gap: 16px;
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--r-lg, 14px); padding: 18px; margin-top: 8px;
}
.bass-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bass-lbl {
    flex: 0 0 92px; font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-2);
}
.bass-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.bass-seg__b {
    background: var(--bg-3); color: var(--text-1); border: 1px solid var(--line);
    border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.bass-seg__b:hover { border-color: var(--accent); }
.bass-seg__b.is-active { background: #8b7cf6; color: #0a0a0f; border-color: transparent; }
.bass-slider { flex: 1 1 160px; accent-color: #8b7cf6; }
.bass-val { flex: 0 0 66px; text-align: right; font-family: ui-monospace, monospace; font-size: 12px; color: var(--text-2); }

.bass-steps-wrap { display: flex; flex-direction: column; gap: 8px; }
.bass-steps {
    display: grid; grid-template-columns: repeat(16, 1fr); gap: 5px;
    overflow-x: auto; padding-bottom: 4px;
}
.bass-step {
    position: relative; aspect-ratio: 1 / 1; min-width: 26px;
    background: var(--bg-3); border: 1px solid var(--line); border-radius: 7px;
    cursor: pointer; color: var(--text-2); font-size: 10px; font-weight: 700;
    display: flex; align-items: flex-start; justify-content: center; padding-top: 3px;
    transition: transform 0.05s, background 0.1s;
}
.bass-step.is-beat { border-color: color-mix(in srgb, #8b7cf6 40%, var(--line)); }
.bass-step.is-on {
    background: #8b7cf6; border-color: transparent;
    box-shadow: 0 0 0 1px #8b7cf6, 0 0 14px color-mix(in srgb, #8b7cf6 55%, transparent);
    color: #0a0a0f;
}
.bass-step.is-cursor { outline: 2px solid var(--text-0); outline-offset: 1px; }
.bass-step:active { transform: translateY(2px); }

.bass-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.bass-preview.is-playing { background: var(--warn, #f59e0b) !important; color: #0a0a0f !important; }

/* ===== Invite link (profile) + admin form ===== */
.invite-row { display: flex; gap: 10px; align-items: stretch; }
.invite-row input {
    flex: 1 1 auto; min-width: 0; font-family: ui-monospace, monospace;
    background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px;
    color: var(--text-0); padding: 10px 12px; font-size: 13px;
}
.invite-admin-form { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; align-items: end; }
.invite-admin-form .field { margin: 0; }
.invite-admin-form input { width: 100%; }
.invite-admin-form button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 560px){ .invite-admin-form { grid-template-columns: 1fr; } }

/* ===== Legal pages ===== */
.legal { max-width: 760px; margin: 0 auto; padding: 8px 0 48px; line-height: 1.7; }
.legal h1 { margin: 0 0 6px; }
.legal__meta { color: var(--text-2); font-size: 13px; margin: 0 0 28px; }
.legal h2 { margin: 32px 0 10px; font-size: 19px; }
.legal p { color: var(--text-1); margin: 0 0 14px; }
.legal a { color: var(--accent); text-decoration: underline; }
.legal code { font-family: ui-monospace, monospace; background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: 13px; color: var(--text-0); }
.legal__table-wrap { overflow-x: auto; }
.legal__table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14px; }
.legal__table th, .legal__table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal__table th { color: var(--text-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.legal__table td { color: var(--text-1); }

/* ===== Cookie notice bar ===== */
.cookie-notice {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
    max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 18px; box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.cookie-notice__text { margin: 0; flex: 1 1 260px; font-size: 13px; color: var(--text-1); line-height: 1.5; }
.cookie-notice__text a { color: var(--accent); white-space: nowrap; text-decoration: underline; }
.cookie-notice__actions { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.cookie-notice__actions [hidden] { display: none !important; }
.cookie-notice__prefs { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--text-1); }
.cookie-notice__prefs[hidden] { display: none !important; }
.cookie-notice__row { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cookie-notice__row input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ===== Signup consent checkbox ===== */
.field--check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 4px 0 18px; }
.field--check .check-input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.field--check .check-label { font-size: 13px; color: var(--text-1); line-height: 1.5; flex: 1 1 240px; }
.field--check .check-label a { color: var(--accent); }
.field--check .help-block { flex: 1 0 100%; }

/* ===== Danger zone (delete account) ===== */
.danger-zone { border-color: color-mix(in srgb, #ef4444 40%, var(--line)); }
.danger-zone h3 { color: #ef4444; }
.button--danger {
    background: #ef4444; color: #fff; border-color: transparent;
}
.button--danger:hover { background: #dc2626; }

/* ===== Leaderboard: current head + other leaderboards ===== */
.lb-current-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 8px; padding: 14px 18px;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg, 14px);
}
.lb-current-title { font-size: 18px; font-weight: 800; margin: 0; line-height: 1.3; }
.lb-current-sub { font-size: 13px; color: var(--text-2); }
.lb-current-players { font-family: ui-monospace, monospace; font-weight: 800; font-size: 20px; color: var(--accent); white-space: nowrap; }
.lb-current-players span { font-family: inherit; font-size: 12px; color: var(--text-2); font-weight: 600; }

.lb-others { display: grid; gap: 8px; margin-top: 12px; }
.lb-other {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; text-decoration: none;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
    color: var(--text-0); transition: border-color .1s, transform .05s;
}
.lb-other:hover { border-color: var(--accent); }
.lb-other:active { transform: translateY(1px); }
.lb-other__name { font-weight: 700; }
.lb-other__sub { color: var(--text-2); font-weight: 500; margin-left: 8px; font-size: 13px; }
.lb-other__players { color: var(--text-2); font-size: 13px; white-space: nowrap; }

/* ===== Leaderboard: locked teaser (guests) ===== */
.lb-locked { position: relative; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-lg, 14px); overflow: hidden; min-height: 320px; }
.lb-locked__blur { padding: 20px; filter: blur(5px); opacity: .5; pointer-events: none; }
.lb-locked__row { display: flex; align-items: center; gap: 14px; padding: 12px 6px; }
.lb-locked__rank { width: 22px; font-weight: 800; color: var(--text-2); }
.lb-locked__bar { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent)); }
.lb-locked__pts { margin-left: auto; font-family: ui-monospace, monospace; font-weight: 800; color: var(--accent); }
.lb-locked__overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 10px; padding: 28px;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--bg-1) 78%, transparent), var(--bg-1) 78%);
}
.lb-locked__lock { font-size: 40px; }
.lb-locked__overlay h2 { margin: 0; font-size: 20px; }
.lb-locked__overlay p { margin: 0; color: var(--text-1); max-width: 380px; }
.lb-locked__actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.lb-locked__note { font-size: 12px; color: var(--text-2) !important; }

/* ===== Completion overlay: guest sign-up CTA ===== */
.complete-signup { margin: 14px 0; padding: 16px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; }
.complete-signup p { margin: 0 0 12px; color: var(--text-1); font-size: 14px; }

/* ===== Producer tiers + global rank card ===== */
.tier {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: #0a0a0f;
    text-transform: uppercase; line-height: 1;
}
.tier--sm { padding: 2px 7px; font-size: 10px; margin-left: 8px; vertical-align: middle; }
.tier--bronze   { background: #cd7f32; }
.tier--silver   { background: #c3ccd6; }
.tier--gold     { background: #f5c542; }
.tier--platinum { background: #d5e6f5; }
.tier--diamond  { background: #6fd3e8; }

.myrank-card {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: 16px; padding: 16px 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--bg-2)), var(--bg-2));
    border: 1px solid var(--line); border-radius: var(--r-lg, 14px);
}
.myrank-card__left { display: flex; align-items: center; gap: 14px; }
.myrank-card__total { font-family: ui-monospace, monospace; font-size: 26px; font-weight: 800; line-height: 1.1; }
.myrank-card__total span { font-family: inherit; font-size: 13px; color: var(--text-2); font-weight: 600; }
.myrank-card__rank { font-size: 13px; color: var(--text-1); margin-top: 2px; }
.myrank-card__rank small { color: var(--text-2); }
.myrank-card__link { color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }

/* ============ Share (completion overlay + landing page) ============ */
.complete-share {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s ease, transform .25s ease;
}
.complete-share.is-shown { opacity: 1; transform: none; }
.share-head {
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 8px;
    text-align: center;
}
.share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.share-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.12); }
.share-btn--native { background: var(--accent); border-color: transparent; color: #0a0a0f; }
.share-btn--native:hover { background: var(--accent); filter: brightness(1.08); }
.share-btn--x { font-weight: 800; }
.share-btn--x:hover      { background: #111; border-color: #333; }
.share-btn--fb { font-weight: 800; }
.share-btn--fb:hover     { background: #1877f2; border-color: transparent; }
.share-btn--wa:hover     { background: #25d366; border-color: transparent; color: #0a0a0f; }
.share-btn--copy:hover   { background: rgba(255,255,255,0.14); }

/* Share landing page */
.share-land {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 0 48px;
    text-align: center;
}
.share-land__card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0a0a0f;
    line-height: 0;
}
.share-land__img { width: 100%; height: auto; display: block; }
.share-land__title {
    margin: 26px 0 6px;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.share-land__sub {
    margin: 0 0 22px;
    color: var(--text-2);
    font-size: 1.05rem;
}
.share-land__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.share-land .button--lg { padding: 14px 28px; font-size: 1.05rem; }
/* Scoped to .share-land: this page has a fixed dark background regardless of the
   site's light/dark mode, so its ghost button needs white text unconditionally.
   BUG FIX (2026-09-10): this used to be a bare `.button--ghost` selector with no
   `.share-land` prefix, so it overrode the real .button--ghost (declared earlier,
   around line 214) site-wide - white-on-white/near-white text on every ghost
   button outside this page (e.g. Patterns) whenever the surrounding background
   was light. Scoping it here is the fix; do not remove the prefix again. */
.share-land .button--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
}
.share-land .button--ghost:hover { background: rgba(255, 255, 255, 0.08); }
.share-land__foot {
    margin-top: 26px;
    color: var(--text-2);
    font-size: .9rem;
}

/* Completion overlay: "practice run — not submitted" note (scrub/loop runs) */
.complete-practice-note {
    margin: 6px auto 2px;
    max-width: 340px;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-2);
    font-size: .88rem;
    line-height: 1.35;
    text-align: center;
}

/* ============ Content pages: prose + guides ============ */
.prose {
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 0 56px;
}
.prose--wide { max-width: 880px; }
/* Pattern builder (TODO.md #11): the sheet grid wants real screen width, not article-reading
   width - paired with containerClass='container container--wide' (1440px) in _form.php. */
.pattern-builder-page { max-width: none; }
.prose h1 {
    font-size: clamp(1.7rem, 4.2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    line-height: 1.15;
}
.prose h2 {
    font-size: 1.28rem;
    font-weight: 700;
    margin: 34px 0 10px;
    letter-spacing: -0.01em;
}
.prose p { margin: 0 0 16px; line-height: 1.7; color: var(--text-1, #d7dee8); }
.prose__lead { font-size: 1.15rem; color: var(--text-0, #eef2f7); }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 6px 0; line-height: 1.6; color: var(--text-1, #d7dee8); }
.prose strong { color: var(--text-0); }
/* BUG FIX (2026-09-10): excludes .button so .prose sections (Patterns, About) don't
   force purple link-color onto button--primary/ghost text via higher specificity
   (.prose a = class+element beats .button--primary's single class). Confirmed via
   headless-browser computed-style test: without :not(.button) the primary button's
   color and background both resolved to var(--accent), i.e. invisible text. */
.prose a:not(.button) { color: var(--accent); font-weight: 600; text-decoration: none; }
.prose a:not(.button):hover { text-decoration: underline; }
.prose__crumbs {
    font-size: .85rem;
    color: var(--text-2);
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.prose__crumbs a { color: var(--text-2); font-weight: 500; }
.prose__cta {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 22px;
}
.guide-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    text-decoration: none;
    transition: transform .14s ease, border-color .15s ease, background .15s ease;
}
.guide-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.06);
}
.guide-card__title { font-size: 1.12rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.3; }
.guide-card__excerpt { font-size: .93rem; color: var(--text-2); line-height: 1.55; margin: 0; flex: 1; }
.guide-card__more { font-size: .9rem; font-weight: 600; color: var(--accent); margin-top: 4px; }

.hero__learn { margin-top: 18px; font-size: .95rem; color: var(--text-2); display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero__learn a { color: var(--accent); font-weight: 600; text-decoration: none; }
.hero__learn a:hover { text-decoration: underline; }

/* Language switcher (header) — a trigger button (current code) opening a dropdown menu of
   native language names. Was a flat pill row when there were only 2 languages (EN/RO); now
   scales to 12 without the row ever overflowing the header. */
.lang-switch { position: relative; display: inline-flex; margin-left: 8px; vertical-align: middle; }
.lang-switch__trigger {
    font-size: .74rem; font-weight: 700; letter-spacing: .03em;
    padding: 5px 10px; border-radius: 999px;
    border: 1px solid var(--line); background: transparent;
    color: var(--text-1); cursor: pointer; line-height: 1;
}
.lang-switch__trigger:hover, .lang-switch__trigger[aria-expanded="true"] { color: var(--text-0); border-color: var(--accent); }
.lang-switch__menu {
    display: none;
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 160px; max-height: 320px; overflow-y: auto;
    background: var(--bg-1, #14141c); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-1); padding: 6px; z-index: 40;
}
.lang-switch__menu.is-open { display: block; }
.lang-switch__opt { display: block; padding: 8px 10px; border-radius: 6px; font-size: .86rem; color: var(--text-1); text-decoration: none; }
.lang-switch__opt:hover { background: var(--bg-2, rgba(255,255,255,0.06)); color: var(--text-0); }
.lang-switch__opt.is-active { color: var(--accent); font-weight: 700; }

/* ---- Mobile header menu (burger) ---- */
.site-header__burger {
    display: none;
    margin-left: auto;
    width: 42px; height: 42px;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: transparent; border: 1px solid var(--line); border-radius: var(--r-md);
    cursor: pointer; padding: 0;
}
.site-header__burger span {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--text-0); transition: transform .2s ease, opacity .2s ease;
}
.site-header__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__burger.is-open span:nth-child(2) { opacity: 0; }
.site-header__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
    .site-header__burger { display: flex; }
    .site-header__word { font-size: 18px; }
    .site-header__nav {
        display: none;
        position: absolute;
        left: 0; right: 0; top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 10px 16px 16px;
        background: var(--bg-0);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-1);
    }
    .site-header__nav.is-open { display: flex; }
    .site-header__nav > a,
    .site-header__nav .as-link { width: 100%; padding: 12px; font-size: 15px; }
    .site-header__nav .button--primary { justify-content: center; margin-top: 6px; }
    .site-header__nav form { width: 100%; margin: 0 !important; display: block !important; }
    .lang-switch { margin: 10px 0 0; align-self: flex-start; }
    .lang-switch__menu { left: 0; right: auto; }
}

/* ---- MIDI setup button + dialog ---- */
.midi-setup-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
    color: var(--text-1); font-size: 16px; cursor: pointer;
    transition: color var(--dur-fast), background var(--dur-fast);
}
.midi-setup-btn:hover { color: var(--text-0); background: var(--bg-1); }
.midi-modal { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.midi-modal__panel { width: 100%; max-width: 440px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 20px; }
.midi-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.midi-modal__head h3 { margin: 0; font-size: 1.15rem; }
.midi-modal__close { background: none; border: none; color: var(--text-1); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.midi-modal__close:hover { color: var(--text-0); }
.midi-modal__hint { margin: 0 0 14px; color: var(--text-2); font-size: 13px; }
.midi-rows { display: flex; flex-direction: column; gap: 6px; }
.midi-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid transparent; }
.midi-row.is-learning { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.midi-row.is-learned { border-color: var(--accent); background: var(--accent-soft); }
.midi-row__pad { display: inline-flex; align-items: center; gap: 8px; flex: 1; font-weight: 600; font-size: 14px; }
.midi-row__note { min-width: 56px; text-align: right; color: var(--text-1); font-variant-numeric: tabular-nums; font-size: 13px; }
.midi-row__learn { flex: none; }
.pad-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: var(--text-2); flex: none; }
.pad-swatch--kick    { background: var(--pad-kick, #4785ff); }
.pad-swatch--snare   { background: var(--pad-snare, #fbbf24); }
.pad-swatch--hihat   { background: var(--pad-hihat, #14b8a6); }
.pad-swatch--openhat { background: #22d3ee; }
.pad-swatch--clap    { background: #f472b6; }
.pad-swatch--tom     { background: #a78bfa; }
.pad-swatch--ride    { background: #facc15; }
.pad-swatch--crash   { background: #fb923c; }
.midi-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.midi-modal__status { color: var(--accent); font-size: 13px; font-weight: 600; }

/* ---- Guided MIDI setup wizard: one pad at a time, then a "test it" step ---- */
.midi-wizard__dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; }
.midi-wizard__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--bg-3);
    border: 1px solid var(--line);
}
.midi-wizard__dot.is-done   { background: var(--accent); border-color: var(--accent); opacity: .5; }
.midi-wizard__dot.is-active { background: var(--accent); border-color: var(--accent); }
.midi-wizard__prompt {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px;
    text-align: center;
    padding: 20px 10px 10px;
}
.midi-wizard__swatch {
    width: 44px; height: 44px;
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--bg-2);
}
.midi-wizard__hit-text { font-size: 17px; font-weight: 800; color: var(--text-0); }
.midi-wizard__status {
    min-height: 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.midi-wizard__hint { margin: -4px 0 4px; color: var(--text-2); font-size: 13px; }
.midi-wizard__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.midi-wizard__prompt--done .midi-wizard__hit-text { color: var(--accent); }
.midi-wizard__test-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.midi-wizard__test-swatch {
    width: 26px; height: 26px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--bg-2);
    transition: box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.midi-wizard__test-swatch.is-hit {
    box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 6px var(--accent);
    transform: scale(1.15);
}

/* ---- MIDI device presets: auto-detect banner + manual picker inside the MIDI modal ---- */
.midi-preset-banner:empty { display: none; }
.midi-preset-banner { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.midi-preset-banner__row { font-size: 13px; color: var(--text-1); }
.midi-preset-banner__row--offer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent); }
.midi-preset-banner__row--offer span { flex: 1; font-weight: 600; color: var(--text-0); }
.midi-preset-banner__row--applied { padding: 8px 10px; border-radius: var(--r-md); background: var(--bg-2); color: var(--accent); font-weight: 600; }
.midi-preset-banner__row--pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.midi-preset-banner__row--pick label { color: var(--text-2); }
.midi-preset-banner__row--pick select { flex: 1; min-width: 160px; }

.midi-preset-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 300; background: var(--bg-1); border: 1px solid var(--accent); color: var(--text-0); font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: var(--r-md); box-shadow: var(--shadow-1); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.midi-preset-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---- Patterns module (community-built, shareable drum patterns) ---- */
.pattern-index__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Search/filter bar above the community grid (TODO.md #4 follow-up, 2026-09-12). Reuses the
   same input/select look as .field (Forms, above) but laid out as a single-line flex bar
   instead of stacked label+field rows. */
.pattern-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.pattern-filter-bar__search {
    flex: 1 1 220px;
    min-width: 160px;
    padding: 10px 14px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text-0);
    font-size: 14px;
}
.pattern-filter-bar__search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.pattern-filter-bar__select {
    padding: 10px 12px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text-0);
    font-size: 14px;
    flex: none;
}
.pattern-filter-bar__submit { flex: none; }
.pattern-filter-bar__clear {
    flex: none;
    font-size: .85rem;
    color: var(--text-2);
    text-decoration: underline;
    white-space: nowrap;
}
.pattern-filter-bar__clear:hover { color: var(--text-0); }

.pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 22px;
}
.pattern-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    text-decoration: none;
    transition: transform .14s ease, border-color .15s ease, background .15s ease;
}
.pattern-card:hover { transform: translateY(-3px); border-color: var(--accent); background: rgba(255, 255, 255, 0.06); }
.pattern-card__title { font-size: 1.05rem; font-weight: 700; color: var(--text-0); margin: 0; line-height: 1.3; }
.pattern-card__excerpt { font-size: .9rem; color: var(--text-2); line-height: 1.5; margin: 0; flex: 1; }
.pattern-card__pads { display: flex; gap: 5px; flex-wrap: wrap; }
.pattern-card__meta { display: flex; gap: 10px; font-size: .82rem; color: var(--text-2); }

.pad-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.pad-swatch--kick    { background: var(--pad-kick); }
.pad-swatch--snare   { background: var(--pad-snare); }
.pad-swatch--hihat   { background: var(--pad-hihat); }
.pad-swatch--openhat { background: var(--pad-openhat); }
.pad-swatch--clap    { background: var(--pad-clap); }
.pad-swatch--tom     { background: var(--pad-tom); }
.pad-swatch--ride    { background: var(--pad-ride); }
.pad-swatch--crash   { background: var(--pad-crash); }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.badge--muted { background: rgba(255,255,255,0.08); color: var(--text-2); }
.badge--warn  { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.pattern-view__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pattern-view__meta { color: var(--text-2); font-size: .92rem; margin-top: 2px; }
.pattern-view__actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; max-width: 100%; }
.pattern-view__footer { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.pattern-view__reported { color: var(--text-2); font-size: .9rem; }

.pattern-sheet { margin-top: 22px; display: flex; flex-direction: column; gap: 22px; }
.pattern-sheet__section-title {
    display: flex; align-items: baseline; gap: 10px;
    font-size: 1rem; font-weight: 700; color: var(--text-0); margin: 0 0 10px;
    text-transform: capitalize;
}
.pattern-sheet__bars { font-size: .82rem; font-weight: 500; color: var(--text-2); text-transform: none; }
/* Step cells are a fixed 72x72 square (CELL_PX in pattern-builder.js, kept in sync here and in
   views/patterns/view.php's read-only render) - not derived from align-items: stretch (2026-09-11,
   two follow-ups: first "patratelele sa fie maximul de inalt cat permite inaltimea liniei" grew
   only the height via stretch to match the editor row-label's stacked name+mute/solo+1-8-random+
   offset content (~70px tall), leaving a tall thin rectangle; then "latimea trebuie sa fie la
   fel ca inaltimea" asked for square cells, which briefly became a small 22px square instead of
   keeping that already-right ~70px height - "era bine inaltimea, latimea era gresita"). Settled
   on a fixed 72px (matches the label's natural height) applied to both dimensions everywhere
   (drum steps, bass cells) so columns stay aligned; align-items: center just centers the compact
   72px row against the label column next to it (same height in practice, so this rarely shows). */
.pattern-sheet__row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
/* Sticky so the pad name stays put while .pattern-sheet__body scrolls horizontally
   (TODO.md #14 - sections can now run up to 32 bars). Background is set per-context below
   since the two places this markup is reused (editor vs. the read-only share page) sit on
   different backgrounds. */
.pattern-sheet__row-label { width: 74px; flex-shrink: 0; font-size: .85rem; color: var(--text-2); text-transform: capitalize; position: sticky; left: 0; z-index: 1; }
.pattern-section .pattern-sheet__row-label { background: var(--bg-1); }
.pattern-sheet__section .pattern-sheet__row-label { background: var(--bg-0); }
/* Pattern builder editor only (TODO.md #11 UX pack) - the read-only /patterns/view page
   keeps the plain narrow label above. Wider column, stacked: name+mute/solo on top,
   1-8 autofill row underneath, all pinned together by the same sticky rule. */
.pattern-sheet__row-label.pattern-row-label--editor {
    width: 172px; display: flex; flex-direction: column; gap: 4px; text-transform: none; padding-right: 6px;
}
.pattern-row-label__top { display: flex; align-items: center; gap: 4px; }
.pattern-row-label__name {
    flex: 1; font-size: .85rem; color: var(--text-2); text-transform: capitalize;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pattern-row-btn {
    width: 18px; height: 18px; padding: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; line-height: 1; border-radius: 4px;
    border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2, var(--muted)); cursor: pointer;
}
.pattern-row-btn:hover { border-color: var(--accent); color: var(--text-0); }
.pattern-row-btn--mute.is-active { background: #f59e0b; border-color: #f59e0b; color: #1a1a1a; }
.pattern-row-btn--solo.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pattern-row-label__fill { display: flex; flex-wrap: wrap; gap: 2px; }
.pattern-row-fill-btn {
    width: 14px; height: 16px; padding: 0; font-size: 9px; line-height: 1; border-radius: 3px;
    border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2, var(--muted)); cursor: pointer;
}
.pattern-row-fill-btn:hover { border-color: var(--accent); color: var(--text-0); }
.pattern-row-fill-btn--clear { color: var(--text-2); }
.pattern-row-fill-btn--random { font-size: 10px; }
.pattern-row-label__offset {
    display: flex; align-items: center; gap: 3px; font-size: 9px; color: var(--text-2); cursor: help;
}
.pattern-row-offset-input {
    width: 30px; height: 16px; padding: 0 2px; font-size: 10px; text-align: center; line-height: 1;
    border-radius: 3px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-0);
}
.pattern-sheet__body { overflow-x: auto; padding-bottom: 4px; }
.pattern-sheet__steps { display: flex; gap: 3px; flex-wrap: nowrap; }
.pattern-sheet__step {
    width: 72px; height: 72px; border-radius: 4px;
    background: var(--bg-2, rgba(255,255,255,0.06));
    border: 1px solid var(--line, rgba(255,255,255,0.10));
    padding: 0; cursor: default;
}
.pattern-sheet__step.is-beat { border-left-color: var(--accent); }
/* ns-resize hints that a vertical drag sets the hit's volume (TODO.md #11 follow-up); a
   plain click still toggles it fully on/off - see pattern-builder.js's stepDrag. */
button.pattern-sheet__step { cursor: ns-resize; }
button.pattern-sheet__step:hover { border-color: var(--accent); }
.pattern-sheet__step.is-current {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft, rgba(124, 58, 237, .35));
    transform: scale(1.15);
    transition: transform .05s linear;
}
/* Playhead column must be obvious even on empty cells (2026-09-23). */
.pattern-sheet__step.is-current:not(.is-on) { background: var(--accent-soft, rgba(124, 58, 237, .35)); }
/* Bass line (TODO.md #11 follow-up) - read-only row on views/patterns/view.php. Notes are
   variable-length blocks (pitch+duration), so unlike drum steps they're positioned absolutely
   within one relative-positioned lane instead of being one button per 16th-note step. */
.pattern-bass-row { position: relative; height: 16px; flex: none; }
.pattern-bass-note {
    position: absolute; top: 0; height: 16px; border-radius: 4px;
    background: var(--pad-bass); border: 1px solid rgba(0,0,0,.25);
}
/* Playback highlight (TODO.md #11 follow-up: "fix acelasi player") - lit for a note's whole
   ringing span, same treatment as .pattern-sheet__step.is-current above. */
.pattern-bass-note.is-current {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft, rgba(124, 58, 237, .35));
    z-index: 1;
}
/* Bass line editor (TODO.md #11 follow-up, views/patterns/_form.php) - piano-roll lane, one
   row per visible pitch (BASS_VIEW_ROWS semitones). WIDTH matches the drum step grid above
   (STEP_PX = CELL_PX + GAP_PX in pattern-builder.js) so a note block lines up with the columns
   under it; row/cell HEIGHT stays its own compact 16px on purpose (never asked to grow, and a
   piano-roll reads better as short wide rows than as a wall of 72px squares - the vertical
   repitch drag reads the row's real rendered height at drag start, see bassDrag's rowH, so it
   doesn't care what this number is). */
/* Just the "Include bass line" toggle now (TODO.md follow-up, 2026-09-11: "desi ai facut loc
   nu ai mutat butoanele", then "butonul de include bassline trebuie sa fie in dreapta export
   midi") - the rest of the bass toolbar moved into .pattern-bass-lane__controls below,
   physically inside the first section's bass grid; this one checkbox moved into the preview
   button bar, right after Export MIDI (see views/patterns/_form.php) - it has to stay reachable
   even when bass is off (it's the only way to turn it back on), and the button bar never
   disappears the way the bass grid does. display:contents lets the inner
   .pattern-bass-toolbar__enable label sit as a normal flex item of .pattern-preview-bar, as if
   this wrapper div weren't there at all. */
.pattern-bass-toolbar { display: contents; }
.pattern-bass-toolbar__group { display: flex; gap: 4px; flex-wrap: wrap; }
.pattern-bass-toolbar__group .button--sm { padding: 6px 8px; font-size: 12px; }
.pattern-bass-toolbar__group--stack { flex-direction: column; }
.pattern-bass-toolbar__lengths { display: inline-flex; gap: 2px; }
/* The actual bass tool controls (TODO.md follow-up, 2026-09-11, corrected same day: "nu sunt in
   stanga, gridului sunt in sus, si face spatiu in dreapta") - column 1 of
   .pattern-bass-lane--with-controls's CSS grid, spanning every pitch row via the inline
   `grid-row: span BASS_VIEW_ROWS` set in bassControlsHtml() - genuinely BESIDE the grid now
   (first attempt only stacked this above the rows, leaving a dead band to its right - a full
   .pattern-sheet__row-label-style flex "row" with nothing in the space beside it). Width/gap
   still match kick's row-label column + row-gap exactly, so column 2 (the cells) starts at the
   same x kick's step cells do - the alignment fixed earlier stays intact. */
.pattern-bass-lane__controls {
    grid-column: 1; width: 172px; align-self: start; display: flex; flex-direction: column;
    gap: 6px; padding-right: 6px; box-sizing: border-box;
    /* Same sticky-left treatment as .pattern-sheet__row-label (kick's own column): .pattern-sheet__body
       scrolls horizontally on a wide/many-bar section, and without this the controls scrolled
       out of view to the left along with the grid the moment a distant step got clicked
       (verified: scrollLeft 475 after clicking a far step put this block's rect.x at -68, fully
       off-screen) - exactly the "buttons vanish" bug kick's sticky column already avoids. */
    position: sticky; left: 0; z-index: 1; background: var(--bg-1);
}
/* Bass randomize (TODO.md follow-up, 2026-09-11: scale + root pickers) - compact selects that
   match the toolbar's other small controls. Selector needs to be at least as specific as
   ".field select" above (class+type, (0,1,1)) - that rule forces display:block, width:100%
   and padding:12px 14px on every <select> inside a .field, which squeezed this one's 28px
   height down to a ~4px sliver of visible text (looked like an empty dropdown - TODO.md
   follow-up, 2026-09-11: "in stanga lipsesc butoanele... setezi scala"). Two classes beat
   ".field select"'s one-class-plus-type by specificity outright, same guarantee the old
   #pattern-bass-toolbar id bump gave before these selects moved out of that element. */
.pattern-bass-lane__controls select.pattern-bass-select {
    display: block; width: 100%; height: 28px; padding: 0 4px; font-size: .8rem; border-radius: 6px;
    border: 1px solid var(--line); background: var(--bg-2); color: var(--text-0);
}
.pattern-bass-lane { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
/* The first section's lane (TODO.md follow-up, 2026-09-11: bass controls genuinely beside the
   grid, not above it) - CSS grid instead of the plain flex column above, column 1 for
   .pattern-bass-lane__controls (spans every row), column 2 for every .pattern-bass-lane__row's
   cells. 172px + 10px gap before column 2 = the exact same offset kick's row-label + row-gap put
   its step cells at, so the two grids' columns still line up despite the controls sidebar now
   properly occupying that space instead of merely sitting above it. Trade-off, and the only one
   found to make "beside, not above" and "still aligned with kick" both true at once: this
   section's pitch rows lose their individual key labels (column 1 belongs to the controls for
   every row now) - every other section keeps its labeled rows, see renderBassLane. */
.pattern-bass-lane--with-controls { display: grid; grid-template-columns: 172px 1fr; column-gap: 10px; row-gap: 2px; margin-top: 6px; }
.pattern-bass-lane--with-controls .pattern-bass-lane__row { grid-column: 2; }
/* Key column width (172px) + row gap (10px) match .pattern-sheet__row-label--editor +
   .pattern-sheet__row exactly (TODO.md follow-up, 2026-09-11: "gridul de la bas sa fie
   sincronizat cu cel de la kick") - before this the key column was only 30px+6px gap, so the
   bass grid's step-0 column started ~146px to the left of the drum grid's step-0 column above
   it, even though both used the same STEP_PX. Same total offset now, so columns line up. */
.pattern-bass-lane__row { display: flex; align-items: center; gap: 10px; height: 16px; }
.pattern-bass-lane__key {
    width: 172px; flex: none; text-align: right; padding-right: 6px; box-sizing: border-box;
    font-size: 9px; color: var(--text-2);
    /* Sticky for the same reason as .pattern-bass-lane__controls just above - otherwise the
       pitch-name labels scroll away with the grid while kick's own row-label stays pinned. */
    position: sticky; left: 0; z-index: 1; background: var(--bg-1);
}
.pattern-bass-lane__cells { position: relative; display: flex; gap: 3px; flex-wrap: nowrap; }
.pattern-bass-cell {
    width: 72px; height: 16px; border-radius: 4px; padding: 0; cursor: crosshair;
    background: var(--bg-2, rgba(255,255,255,0.06));
    border: 1px solid var(--line, rgba(255,255,255,0.10));
}
.pattern-bass-cell.is-beat { border-left-color: var(--accent); }
.pattern-bass-cell:hover { border-color: var(--accent); }
/* Scale-degree highlight (TODO.md follow-up, 2026-09-11: "liniile care sunt din chord
   progression trebuie sa fie facut highlight, la fel ca si cele de pian negre si albe") - rows
   in the currently selected scale read like a piano's white keys (lighter), rows outside it
   like the black keys (darker/dimmer key label) - purely a visual guide to where "in-key" notes
   live in the piano roll, doesn't block placing a note on an out-of-scale row. */
.pattern-bass-lane__row.is-out-of-scale .pattern-bass-lane__key { opacity: .45; }
.pattern-bass-lane__row.is-out-of-scale .pattern-bass-cell {
    background: color-mix(in srgb, var(--bg-0, #0a0a0f) 55%, var(--bg-2, rgba(255,255,255,0.06)));
}
.pattern-bass-lane__row.is-in-scale .pattern-bass-cell {
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-2, rgba(255,255,255,0.06)));
}
.pattern-bass-lane__row.is-in-scale .pattern-bass-lane__key { color: var(--text-1, var(--text-0)); }
/* The note overlay is purely visual in the editor - drag/click hit-testing stays on the
   .pattern-bass-cell buttons underneath (see pattern-builder.js's bassDrag), so pointer
   events pass through it to the cell grid below. */
.pattern-bass-lane .pattern-bass-note { pointer-events: none; }
/* Resize handle (TODO.md #11 follow-up: "sa o pot modifica in grid") - a thin strip on the
   note's right edge that re-enables pointer-events just for itself, so an existing note's
   length can be grabbed and dragged directly (see pattern-builder.js's bassResize) without
   the rest of the note losing its click-through behavior. */
.pattern-bass-lane .pattern-bass-note__handle {
    position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: ew-resize; pointer-events: auto;
}
.pattern-bass-lane .pattern-bass-note__handle:hover { background: rgba(255,255,255,.35); }
/* Draw-drag live preview (TODO.md follow-up, 2026-09-11: drag-to-draw a new bass note) - a
   dashed, translucent stand-in for the note being drawn, removed and replaced by the real
   placed note (a normal .pattern-bass-note span) on mouseup. */
.pattern-bass-note--preview {
    background: transparent; border: 1px dashed var(--accent); opacity: .7;
}
.pattern-play-btn { display: inline-flex; align-items: center; gap: 6px; }
.pattern-play-btn__icon { font-size: .8em; }
.pattern-play-btn.is-playing { background: var(--ok); border-color: var(--ok); color: #06210f; }

.field--inline { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.field--inline input[type="number"] {
    width: 90px; padding: 12px 14px; background: var(--bg-1); border: 1px solid var(--line);
    border-radius: var(--r-md); color: var(--text-0); font-size: 15px;
}
.pattern-public-toggle { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--text-1); font-weight: 500; }

.pattern-preview-bar { display: flex; align-items: center; gap: 16px; margin: -6px 0 18px; flex-wrap: wrap; }
.pattern-metronome-toggle { display: flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--text-1); font-weight: 500; }

.pattern-pad-picker { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.pattern-pad-toggle { display: flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 500; color: var(--text-1); }

.pattern-sections-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pattern-section {
    padding: 16px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line);
    margin-bottom: 14px;
}
.pattern-section__head { display: flex; gap: 10px; margin-bottom: 12px; align-items: center; }
.pattern-section__name {
    flex: 1; padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--r-md); color: var(--text-0); font-size: 14px;
}
/* "+"/"-" bars stepper (TODO.md #14) - replaces the old 1-4 dropdown, now that a section
   can grow to 32 bars (a fixed-option dropdown that long would be unusable). */
.pattern-section__bars-stepper { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pattern-section__bars-btn {
    width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
    color: var(--text-0); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
}
.pattern-section__bars-btn:hover:not(:disabled) { border-color: var(--accent); }
.pattern-section__bars-btn:disabled { opacity: .4; cursor: default; }
.pattern-section__bars-count { font-size: 13px; color: var(--text-1); min-width: 58px; text-align: center; }

/* Reorder/duplicate/remove (TODO.md #11 follow-up) - grouped at the end of the section head. */
.pattern-section__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pattern-section__actions .button:disabled { opacity: .4; cursor: default; }

/* Bar markers (TODO.md #11 follow-up: "repere de bară mai vizibile pe grila lungă") - a thin
   numbered ruler above the grid, one label per bar, sharing the row-label's 172px width and the
   25px-per-step metric (STEP_PX in pattern-builder.js) so it stays aligned with the columns
   below as the section scrolls. */
.pattern-bar-markers-row { display: flex; }
.pattern-bar-markers-row__spacer { width: 172px; flex-shrink: 0; }
.pattern-bar-markers { position: relative; height: 14px; margin-bottom: 2px; }
.pattern-bar-marker {
    position: absolute; top: 0; font-size: 9px; line-height: 14px; color: var(--text-2);
    border-left: 1px solid var(--line, rgba(255,255,255,0.10)); padding-left: 3px;
}

/* Unsaved-changes indicator (TODO.md #11 follow-up) */
.pattern-dirty-indicator {
    font-size: .85rem; color: #f59e0b; font-weight: 600; align-self: center;
}

.pattern-form__actions { display: flex; gap: 10px; margin-top: 8px; }

.pattern-mine-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.pattern-mine-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line);
}
.pattern-mine-row__title { font-weight: 700; color: var(--text-0); text-decoration: none; }
.pattern-mine-row__title:hover { color: var(--accent); }
.pattern-mine-row__meta { display: block; font-size: .82rem; color: var(--text-2); margin-top: 2px; }
.pattern-mine-row__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pattern-inline-form { display: inline; }
.pattern-index__cta { display: flex; gap: 10px; flex-wrap: wrap; }

.pattern-slot-progress { margin: 14px 0 4px; }
.pattern-slot-progress__bar {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: var(--bg-2, rgba(255,255,255,0.06));
    border: 1px solid var(--line, rgba(255,255,255,0.10));
}
.pattern-slot-progress__fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.pattern-slot-progress__label { margin: 6px 0 0; font-size: .82rem; color: var(--text-2); }

/* ---- Ad placeholder slots (views/ads/*.php) — off by default (params['adsEnabled']) ---- */
.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.06) 10px, rgba(255,255,255,0.06) 20px);
    border: 1px dashed var(--line, rgba(255,255,255,0.18));
    border-radius: 10px;
    color: var(--text-2);
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 18px 0;
}
.ad-slot--banner  { width: 100%; max-width: 728px; height: 90px; margin: 18px auto; }
.ad-slot--inline  { width: 100%; height: 90px; }
.ad-slot--sidebar { width: 100%; max-width: 300px; height: 250px; margin: 24px auto; }
.ad-slot__label { opacity: .7; }

/* ---- Contact page captcha row ---- */
.captcha-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* BUG FIX (2026-09-10): CaptchaAction renders with transparent=true and the library's
   default (dark navy) text color - unreadable on this theme's near-black card
   background (--bg-1: #12121a). A fixed white backing makes the text legible
   regardless of site theme (dark/light), without touching the PHP/server config. */
.captcha-row img { border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; padding: 4px; }
.captcha-row input { max-width: 160px; }

/* ---- Challenge mode: index (challenge picker) ---- */
.challenge-index__tier {
    margin: 32px 0 12px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-2);
}
.challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.challenge-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.challenge-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-1);
}
.challenge-card__icon { font-size: 28px; line-height: 1; }
.challenge-card__title { font-size: 17px; font-weight: 700; }
.challenge-card__desc { color: var(--text-1); font-size: 13px; line-height: 1.5; flex: 1; }
.challenge-card__meta { color: var(--text-2); font-size: 12px; font-family: ui-monospace, monospace; }

/* ---- Challenge mode: play (falling-notes game) ---- */
.challenge-play__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.challenge-play__back {
    color: var(--text-2);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    align-self: flex-start;
}
.challenge-play__back:hover { color: var(--accent); }

.challenge-stage {
    position: relative;
    min-height: 420px;
}

.challenge-hud {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    font-family: ui-monospace, monospace;
    /* Stays above .challenge-overlay (start/breather/end), which paints later in the DOM and
       would otherwise intercept clicks on the MIDI badge/setup button that live in the HUD -
       those need to work even before a round has started. */
    position: relative;
    z-index: 2;
}
.challenge-hud__score { font-size: 20px; font-weight: 800; color: var(--text-0); }
.challenge-hud__combo { font-size: 14px; font-weight: 700; color: var(--accent); }
/* Infinite mode only (TODO.md #1): "Round N · Style · BPM" label. */
.challenge-hud__round { font-size: 13px; font-weight: 600; color: var(--text-2); }

.challenge-lanes {
    display: flex;
    gap: 8px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px;
}
.challenge-lane {
    flex: 1;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.challenge-lane__label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.challenge-lane__track {
    position: relative;
    flex: 1;
    min-height: 320px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.challenge-lane__hitline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    height: 4px;
    background: var(--accent);
    opacity: 0.6;
    border-radius: 2px;
}
/* Expanding ring pulse at the hit line - pad color on a hit, red (set inline via JS)
   on a miss. Pure CSS animation, JS removes the element on `animationend`. */
.challenge-hitfx {
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    pointer-events: none;
    animation: challenge-hitfx-ring 340ms ease-out forwards;
}
@keyframes challenge-hitfx-ring {
    0%   { transform: scale(0.5); opacity: 0.9; }
    100% { transform: scale(2.6); opacity: 0; }
}
.challenge-note {
    /* Short "bar" shape, not a square: at typical fall speed (TRAVEL_MS=1600 over a
       ~320px lane), consecutive same-lane 16th notes at the densest challenge
       (the-gauntlet, ~109ms apart) are only ~19px apart vertically. A 34px square
       covered that gap entirely (notes visually merged into one blob). 12px tall
       leaves a clear ~7px gap even in that worst case, at any bpm this game ships
       with - see the analysis in Claude outputs/ if this ever needs revisiting. */
    position: absolute;
    left: 50%;
    top: 0;
    width: 30px;
    height: 12px;
    margin-left: -15px;
    border-radius: 6px;
    box-shadow: var(--shadow-1);
    will-change: transform;
}
.challenge-lane__pad {
    padding: 12px 4px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--pad-color, var(--accent)) 16%, var(--bg-2));
    color: var(--text-0);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    transition: background var(--dur-fast), transform var(--dur-fast);
    touch-action: manipulation;
}
.challenge-lane__pad:hover { background: color-mix(in srgb, var(--pad-color, var(--accent)) 28%, var(--bg-2)); }
.challenge-lane__pad.is-active {
    background: var(--pad-color, var(--accent));
    transform: scale(0.94);
}
.challenge-lane__pad-name { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.challenge-lane__pad-key {
    font-size: 10px;
    font-family: ui-monospace, monospace;
    color: var(--text-2);
}
.challenge-lane__pad.is-active .challenge-lane__pad-key { color: var(--accent-fg); opacity: 0.85; }

.challenge-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: color-mix(in srgb, var(--bg-0) 82%, transparent);
    border-radius: var(--r-lg);
    text-align: center;
    padding: 24px;
}
/* Bug fix (2026-09-06): an author `display: flex` on an element always beats the
   browser's built-in `[hidden] { display: none }` rule (author styles win over the
   UA stylesheet regardless of specificity) - so the JS `endOverlay.hidden = true/false`
   toggle was a no-op and #challenge-end-overlay sat on top of the start screen from
   page load, invisible-but-solid, eating every click meant for the Start button. This
   is why Challenge looked completely dead. Same fix pattern as .score-hud[hidden] above. */
.challenge-overlay[hidden] { display: none !important; }
.challenge-overlay__hint { color: var(--text-2); font-size: 13px; margin: 0; }
.challenge-start-btn {
    padding: 14px 32px;
    border-radius: var(--r-md);
    border: 0;
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-spring);
}
.challenge-start-btn:hover { transform: translateY(-1px); }
.challenge-countdown {
    font-size: 64px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.challenge-summary { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.challenge-summary__score { font-size: 32px; font-weight: 800; color: var(--text-0); }
.challenge-summary__newbest { color: var(--accent); font-weight: 700; }
.challenge-summary__breakdown { display: flex; gap: 16px; font-size: 13px; color: var(--text-1); }
.challenge-summary__best { color: var(--text-2); font-size: 13px; }
.challenge-summary__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; }

.challenge-top { margin-top: 8px; width: 100%; max-width: 320px; }
.challenge-top h3 { font-size: 14px; margin: 0 0 8px; text-align: center; color: var(--text-1); }
.challenge-top__empty { color: var(--text-2); font-size: 13px; text-align: center; }
.challenge-top__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.challenge-top__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--bg-2);
    border-radius: var(--r-sm);
    font-size: 13px;
}
.challenge-top__rank { color: var(--text-2); font-family: ui-monospace, monospace; width: 20px; }
.challenge-top__name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge-top__pts { font-family: ui-monospace, monospace; color: var(--text-1); }

@media (max-width: 720px) {
    .challenge-lane__label { font-size: 9px; }
    .challenge-lane__track { min-height: 240px; }
    .challenge-note { width: 24px; height: 9px; margin-left: -12px; border-radius: 5px; }
    .challenge-lane__pad-key { display: none; }
}
.challenge-top__list li.is-you { border: 1px solid var(--accent); background: var(--accent-soft); }
.challenge-top__yourank { text-align: center; font-size: 12px; color: var(--text-2); margin: 6px 0 0; }

/* ---- OAuth login/signup buttons ---- */
.oauth-buttons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.oauth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-2);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 18px 0;
}
.oauth-divider::before, .oauth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--line);
}
.oauth-divider span { padding: 0 12px; }

/* Language suggestion bar (layouts/_lang_suggest.php) - shown only until a language is chosen */
.lang-suggest {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 16px; font-size: 14px;
    background: var(--accent-soft); border-bottom: 1px solid var(--line);
}
.lang-suggest__go { font-weight: 600; color: var(--accent); text-decoration: none; }
.lang-suggest__go:hover { text-decoration: underline; }
.lang-suggest__close { color: inherit; opacity: .6; text-decoration: none; font-size: 18px; line-height: 1; }
.lang-suggest__close:hover { opacity: 1; }

/* Pattern builder on touch screens (2026-09-22): drag gestures (volume, paint, bass
   draw/move/resize) run on pointer events - stop the browser from scrolling instead. */
.pattern-sheet__step, .pattern-bass-cell, .pattern-bass-note, .pattern-bass-note__handle { touch-action: none; }

/* ---- Admin (/admin) ---- */
.admin-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.admin-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.admin-stat__val { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.admin-stat__lbl { font-size: 12px; color: var(--text-2); }
.admin-search { display: flex; gap: 8px; max-width: 480px; margin-bottom: 12px; }
.admin-search input { flex: 1; }
.admin-user { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }
.admin-user__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-user__meta { font-size: 12px; color: var(--text-2); }
.admin-user__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-user__delete { display: flex; gap: 6px; }
.admin-user__delete input { width: 170px; }

/* ================= Homepage (2026-09-25) ================= */
.hero--home { padding-bottom: 28px; }
.home-inputs {
    list-style: none; padding: 0; margin: 26px auto 0; display: flex; gap: 10px;
    justify-content: center; flex-wrap: wrap;
}
.home-inputs li {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
    background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; color: var(--text-1);
}
.home-inputs li:first-child { border-color: var(--accent); color: var(--text-0); background: var(--accent-soft); }

.home-demo { max-width: 860px; margin: 0 auto 72px; padding: 22px; }
.home-demo__head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.home-demo__head h2 { margin: 0 0 4px; font-size: 1.3rem; }
.home-demo__head p { margin: 0; color: var(--text-1); font-size: .95rem; max-width: 560px; }
.home-demo__score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 110px; }
.home-demo__pts { color: var(--text-2); font-size: 13px; }
.home-demo__pts b { font-size: 24px; color: var(--text-0); }
.home-demo__fb { font-weight: 800; font-size: 15px; min-height: 20px; }
.home-demo__fb.is-perfect { color: #22c55e; }
.home-demo__fb.is-good { color: #eab308; }
.home-demo__fb.is-miss { color: #ef4444; }
.home-demo__grid { display: flex; flex-direction: column; gap: 6px; }
.home-demo__row { display: flex; align-items: center; gap: 10px; }
.home-demo__lbl { width: 64px; flex: none; font-size: 12px; font-weight: 700; color: var(--text-2); text-align: right; }
.home-demo__cells { flex: 1; display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.home-demo__cells i {
    height: 30px; border-radius: 5px; background: var(--bg-2); border: 1px solid var(--line);
    transition: transform .06s linear;
}
.home-demo__cells i.beat { border-left-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.home-demo__cells i.on { background: color-mix(in srgb, var(--c) 35%, var(--bg-2)); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.home-demo__cells i.is-now { box-shadow: 0 0 0 2px var(--accent); }
.home-demo__cells i.on.is-now { background: var(--c); transform: scale(1.08); }
.home-demo__cells i.hit-perfect { animation: home-hit-perfect .45s ease-out; }
.home-demo__cells i.hit-good { animation: home-hit-good .45s ease-out; }
.home-demo__cells i.hit-miss { animation: home-hit-miss .45s ease-out; }
@keyframes home-hit-perfect { from { box-shadow: 0 0 0 4px #22c55e; } to { box-shadow: 0 0 0 0 transparent; } }
@keyframes home-hit-good { from { box-shadow: 0 0 0 4px #eab308; } to { box-shadow: 0 0 0 0 transparent; } }
@keyframes home-hit-miss { from { box-shadow: 0 0 0 4px #ef4444; } to { box-shadow: 0 0 0 0 transparent; } }
.home-demo__controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.home-pad {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--r-md);
    background: color-mix(in srgb, var(--c) 22%, var(--bg-2)); border: 1px solid var(--c);
    color: var(--text-0); font-weight: 700; cursor: pointer; user-select: none; touch-action: manipulation;
}
.home-pad:active { transform: scale(0.96); background: var(--c); }
.home-pad kbd { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--bg-1); border: 1px solid var(--line); }
.home-demo__midi { margin: 10px 0 0; font-size: 13px; color: var(--text-1); min-height: 1em; }

.home-section { max-width: 1040px; margin: 0 auto 80px; }
.home-section > h2 { text-align: center; margin-bottom: 24px; }
.home-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.home-split--rev .home-split__text { order: 2; }
.home-split__text h2 { margin-top: 0; }
.home-split__text p { color: var(--text-1); font-size: 1.05rem; }
.home-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.home-list { padding-left: 20px; color: var(--text-1); line-height: 1.8; }
.home-list li::marker { color: var(--accent); }
.home-steps { display: flex; flex-direction: column; gap: 10px; }
.home-steps .sub-card { cursor: default; }
.home-share { display: flex; justify-content: center; }
.home-share__card {
    width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; padding: 18px;
    border-radius: var(--r-lg, 14px); background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.home-share__title { font-weight: 800; }
.home-share__link {
    font-size: 12px; color: color-mix(in srgb, var(--accent) 75%, var(--text-0)); padding: 8px 10px; border-radius: 8px; background: var(--accent-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 180px; }
.home-podium__step {
    width: 84px; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px;
    border-radius: 10px 10px 0 0; background: var(--bg-2); border: 1px solid var(--line);
    font-weight: 800; font-size: 22px; color: var(--text-1);
}
.home-podium__step--1 { height: 100%; background: var(--accent-soft); border-color: var(--accent); font-size: 30px; }
.home-podium__step--2 { height: 70%; }
.home-podium__step--3 { height: 50%; }
.home-genres { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.home-genre {
    display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 999px;
    background: var(--bg-2); border: 1px solid var(--line); color: var(--text-0); font-size: 14px; text-decoration: none;
}
.home-genre:hover { border-color: var(--accent); }
.home-beats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.home-beat { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text-0); padding: 16px; }
.home-beat:hover { border-color: var(--accent); }
.home-beat__meta { font-size: 13px; color: var(--text-2); }
.home-faq { max-width: 760px; }
.home-faq__item { border-bottom: 1px solid var(--line); padding: 14px 0; }
.home-faq__item summary { cursor: pointer; font-weight: 700; }
.home-faq__item p { margin: 10px 0 0; color: var(--text-1); }
.home-final { text-align: center; margin: 0 auto 40px; }
@media (max-width: 760px) {
    .home-split { grid-template-columns: 1fr; gap: 24px; }
    .home-split--rev .home-split__text { order: 0; }
    .home-demo { padding: 16px; margin-bottom: 56px; }
    .home-demo__lbl { width: 44px; font-size: 11px; }
    .home-demo__cells { gap: 2px; }
    .home-demo__cells i { height: 24px; border-radius: 3px; }
    .home-demo__score { align-items: flex-start; }
    .home-pad { flex: 1; justify-content: center; padding: 16px; }
    .home-section { margin-bottom: 56px; }
}

/* Homepage full-width alternating bands (2026-09-25). The band colour is painted edge to edge
   with a huge box-shadow clipped to the band's own height, so the content stays inside the
   normal container and nothing causes horizontal scroll. */
.home-band {
    --band: transparent;
    position: relative;
    padding: 72px 0;
    margin: 0 0 72px;
    background: var(--band);
    box-shadow: 0 0 0 100vmax var(--band);
    clip-path: inset(0 -100vmax);
}
.home-band > .home-section, .home-band > .home-demo { margin-bottom: 0; }
.home-band--soft { --band: color-mix(in srgb, var(--accent) 7%, var(--bg-0)); }
.home-band--soft .card, .home-band--soft .sub-card { background: var(--bg-0); }
.home-band--bold {
    --band: linear-gradient(120deg, #4c1d95 0%, #7c3aed 55%, #c026d3 100%);
    background: linear-gradient(120deg, #4c1d95 0%, #7c3aed 55%, #c026d3 100%);
    box-shadow: none;
    border-image: linear-gradient(120deg, #4c1d95 0%, #7c3aed 55%, #c026d3 100%) fill 0 / / 0 100vmax;
    --text-0: #ffffff; --text-1: rgba(255, 255, 255, .86); --text-2: rgba(255, 255, 255, .7);
    --bg-2: rgba(255, 255, 255, .12); --bg-3: rgba(255, 255, 255, .2); --line: rgba(255, 255, 255, .28);
    color: #fff;
}
.home-band--bold h2 { color: #fff; }
.home-band--bold .button--primary { background: #fff; color: #4c1d95; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.home-band--bold .button--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
.home-band--bold .button--ghost:hover { background: rgba(255, 255, 255, .14); }
.home-band--bold .hero__learn a { color: #fff; }
.home-band--bold .home-podium__step { color: #fff; }
.home-band--bold .home-podium__step--1 { background: rgba(255, 255, 255, .22); border-color: #fff; }
.home-band--last { margin-bottom: -64px; }  /* sits flush on the footer (.main has 64px bottom padding) */
.home-band .home-final { margin-bottom: 0; }
.home-final h2 { margin-top: 0; }
@media (max-width: 760px) {
    .home-band { padding: 48px 0; margin-bottom: 48px; }
}

/* Signup honeypot: off-screen for humans, still in the DOM for bots. */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Beat of the week (homepage) */
.home-botw { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; padding: 28px; border-color: var(--accent); }
.home-botw h2 { margin: 8px 0 4px; }
.home-botw p { margin: 0; color: var(--text-2); }
.home-botw__badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 75%, var(--text-0)); font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.home-botw__preview { gap: 5px; }
.home-botw__preview .sub-card__row i { height: 14px; }
@media (max-width: 760px) { .home-botw { grid-template-columns: 1fr; padding: 20px; } }

.admin-days { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-days th, .admin-days td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.admin-days td { position: relative; }
.admin-bar { display: inline-block; vertical-align: middle; height: 8px; width: calc(var(--w) * 1.2); max-width: 120px; margin-right: 8px; border-radius: 4px; background: var(--accent); min-width: 2px; }
.admin-bar--plays { background: var(--pad-kick); }
.admin-top { margin: 0; padding-left: 22px; line-height: 1.8; }
.admin-top span { color: var(--text-2); }

.hint-block { font-size: 12px; color: var(--text-2); margin-top: 4px; }

.verify-banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.verify-banner form { margin: 0; }
.verify-banner .as-link { font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ================= Social (2026-09-26): comments, likes, notifications, messages, blog ================= */
.comments { margin: 40px 0 24px; max-width: 860px; }
.comments__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.comments__title { margin: 0; font-size: 20px; }
.comments__count { color: var(--text-2); font-weight: 500; font-size: 16px; }
.comments__sort { background: var(--bg-2); color: var(--text-0); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; font: inherit; font-size: 13px; }
.comments__form { display: grid; gap: 8px; margin-bottom: 18px; }
.comments__form--reply, .comments__form--edit { margin: 10px 0 4px; }
.comments__input { width: 100%; box-sizing: border-box; background: var(--bg-1); color: var(--text-0); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; min-height: 44px; }
.comments__input:focus { outline: none; border-color: var(--accent); }
.comments__form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.comments__error { color: var(--danger); font-size: 13px; min-height: 0; }
.comments__error:empty { display: none; }
.comments__login, .comments__notice { color: var(--text-2); font-size: 14px; margin: 0 0 18px; }
.comments__list, .comment__replies { list-style: none; margin: 0; padding: 0; }
.comments__empty { color: var(--text-2); font-size: 14px; padding: 12px 0; }
.comments__footer { margin-top: 14px; }
.comment { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px; }
.comment--alt { background: var(--bg-2); }
.comment.is-pinned { border-color: var(--accent); }
.comment__replies { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--line); }
.comment--reply { margin-bottom: 8px; padding: 10px 12px; }
.comment__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.comments .comment__user { color: var(--text-0); font-weight: 700; }
.comment__replyto { color: var(--accent); }
.comment__edited { font-style: italic; }
.comment__body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; color: var(--text-0); }
.comment__body a { color: var(--accent); }
.comment__hidden { font-size: 13px; color: var(--text-2); font-style: italic; }
.comment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; }
.comment__act { background: none; border: 0; padding: 2px 0; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; list-style: none; }
.comment__act:hover:not(:disabled) { color: var(--text-0); }
.comment__act:disabled { cursor: default; opacity: .6; }
.comment__act--danger:hover { color: var(--danger); }
.comment__like.is-liked, .like-btn.is-liked { color: #e11d48; }
.comment__more { position: relative; }
.comment__more > summary::-webkit-details-marker { display: none; }
.comment__menu { position: absolute; z-index: 5; top: 100%; left: 0; display: grid; gap: 6px; min-width: 150px; padding: 10px 12px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-1); font-size: 13px; }
.comment__menu a { color: var(--text-0); }
.badge--author { background: var(--accent); color: var(--accent-fg); font-size: 11px; padding: 1px 7px; border-radius: 999px; font-weight: 700; }
.badge--pinned { background: var(--accent-soft); color: var(--text-0); font-size: 11px; padding: 1px 7px; border-radius: 999px; }
.nav-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

.notif-list, .conv-list { list-style: none; margin: 0; padding: 0; }
.notif-list li, .conv-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 8px; background: var(--bg-1); }
.notif-list li.is-unread, .conv-list li.is-unread { border-color: var(--accent); }
.notif-list time, .conv-list time { color: var(--text-2); font-size: 12px; white-space: nowrap; }

.dm-thread { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.dm-msg { max-width: 75%; padding: 8px 12px; border-radius: 14px; background: var(--bg-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.dm-msg--me { justify-self: end; background: var(--accent); color: var(--accent-fg); }
.dm-msg time { display: block; font-size: 11px; opacity: .7; margin-top: 2px; }
.dm-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 13px; }

.blog-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.blog-list li { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-1); }
.blog-list h2 { margin: 0 0 6px; font-size: 20px; }
.blog-meta { color: var(--text-2); font-size: 13px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-actions form { margin: 0; }

/* 2026-09-26 audit: links inside running text must not rely on colour alone */
.switch a, .prose p a:not(.button) { text-decoration: underline; text-underline-offset: 2px; }

/* ===== Feature requests ===== */
.fr-form { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; margin: 20px 0; }
.fr-form h2 { margin: 0 0 12px; font-size: 18px; }
.fr-note { color: var(--text-1); margin: 16px 0; }
.fr-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 20px 0 12px; }
.fr-tabs { display: inline-flex; gap: 4px; }
.fr-tabs a { padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--text-1); border: 1px solid var(--line); text-decoration: none; }
.fr-tabs a.is-active { color: var(--text-0); border-color: var(--accent); background: var(--accent-soft); }
.fr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fr-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-1); }
.fr-vote { flex: none; margin: 0; }
.fr-vote__btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 48px; padding: 8px 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); color: var(--text-1); cursor: pointer; font-size: 12px; line-height: 1.2; }
.fr-vote__btn:hover { border-color: var(--accent); }
.fr-vote__btn.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--text-0); }
.fr-vote__n { font-weight: 700; font-size: 15px; }
.fr-item__main { min-width: 0; flex: 1; }
.fr-item__title { margin: 0 0 4px; font-size: 16px; overflow-wrap: anywhere; }
.fr-item__body { margin: 0 0 6px; color: var(--text-1); font-size: 14px; overflow-wrap: anywhere; }
.fr-item__meta { font-size: 12px; color: var(--text-2, var(--text-1)); }
.fr-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--line); vertical-align: middle; }
.fr-badge--1, .fr-badge--2 { border-color: var(--accent); color: var(--accent); }
.fr-badge--3 { border-color: #22c55e; color: #22c55e; }
.fr-badge--4 { color: var(--text-1); }