:root {
    --paper: oklch(94.4% 0.026 82);
    --paper-strong: oklch(87.8% 0.038 82);
    --paper-soft: oklch(98.2% 0.012 82 / 0.96);
    --paper-muted: oklch(96.1% 0.018 82 / 0.82);
    --ink: oklch(19.5% 0.024 58);
    --ink-soft: oklch(28.5% 0.022 58 / 0.82);
    --ink-muted: oklch(45.5% 0.028 62);
    --ink-faint: oklch(19.5% 0.024 58 / 0.12);
    --accent: oklch(58% 0.15 32);
    --accent-deep: oklch(42% 0.13 32);
    --accent-soft: oklch(58% 0.15 32 / 0.12);
    --accent-olive: oklch(50% 0.095 126);
    --accent-olive-soft: oklch(50% 0.095 126 / 0.14);
    --accent-amber: oklch(68% 0.13 72);
    --accent-amber-soft: oklch(68% 0.13 72 / 0.16);
    --panel-dark: oklch(18.5% 0.02 58);
    --panel-dark-soft: oklch(25% 0.025 58);
    --success: oklch(53% 0.11 154);
    --error: oklch(48% 0.15 28);
    --discord: oklch(58% 0.21 276);
    --discord-deep: oklch(49% 0.2 276);
    --border: oklch(19.5% 0.024 58 / 0.22);
    --border-strong: oklch(19.5% 0.024 58 / 0.34);
    --shadow: 0 18px 42px oklch(28% 0.05 58 / 0.16);
    --shadow-sm: 0 8px 18px oklch(28% 0.05 58 / 0.13);
    --button-cartoon-shadow: 5px 6px 0 oklch(19.5% 0.024 58 / 0.22);
    --button-cartoon-shadow-hover: 8px 9px 0 oklch(19.5% 0.024 58 / 0.26);
    --button-cartoon-shadow-active: 2px 3px 0 oklch(19.5% 0.024 58 / 0.24);
    --button-cartoon-highlight: inset 0 3px 0 oklch(98.2% 0.012 82 / 0.5);
    --button-cartoon-outline: 3px solid var(--ink);
    --chart-grid: oklch(19.5% 0.024 58 / 0.08);
    --table-header-height: 58px;
    --table-row-height: 70px;
    --table-bottom-inset: 6px;
    --soundboard-table-height: 556px;
    --radius-xl: 30px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 10px;
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --motion-duration-instant: 0.12s;
    --motion-duration-fast: 0.18s;
    --motion-duration-normal: 0.28s;
    --motion-duration-slow: 0.42s;
}

html.theme-dark {
    --paper: oklch(16.5% 0.018 164);
    --paper-strong: oklch(22% 0.02 164);
    --paper-soft: oklch(19.5% 0.018 164 / 0.96);
    --paper-muted: oklch(24% 0.018 164 / 0.82);
    --ink: oklch(94.5% 0.018 82);
    --ink-soft: oklch(90% 0.018 82 / 0.82);
    --ink-muted: oklch(75% 0.025 78);
    --ink-faint: oklch(94.5% 0.018 82 / 0.14);
    --accent: oklch(66% 0.16 32);
    --accent-deep: oklch(78% 0.12 39);
    --accent-soft: oklch(66% 0.16 32 / 0.22);
    --accent-olive: oklch(76% 0.11 126);
    --accent-olive-soft: oklch(76% 0.11 126 / 0.18);
    --accent-amber: oklch(76% 0.14 72);
    --accent-amber-soft: oklch(76% 0.14 72 / 0.2);
    --panel-dark: oklch(12% 0.018 164);
    --panel-dark-soft: oklch(18% 0.018 164);
    --success: oklch(72% 0.12 154);
    --error: oklch(66% 0.16 28);
    --discord: oklch(66% 0.2 276);
    --discord-deep: oklch(76% 0.16 276);
    --border: oklch(94.5% 0.018 82 / 0.16);
    --border-strong: oklch(94.5% 0.018 82 / 0.28);
    --shadow: 0 20px 48px oklch(5% 0.01 164 / 0.42);
    --shadow-sm: 0 10px 24px oklch(5% 0.01 164 / 0.34);
    --button-cartoon-shadow: 5px 6px 0 oklch(5% 0.01 164 / 0.48);
    --button-cartoon-shadow-hover: 8px 9px 0 oklch(5% 0.01 164 / 0.52);
    --button-cartoon-shadow-active: 2px 3px 0 oklch(5% 0.01 164 / 0.52);
    --button-cartoon-highlight: inset 0 3px 0 oklch(94.5% 0.018 82 / 0.16);
    --button-cartoon-outline: 3px solid var(--border-strong);
    --chart-grid: oklch(94.5% 0.018 82 / 0.12);
}

html {
    background: oklch(92.6% 0.03 82);
}

html.theme-dark {
    background: oklch(14.5% 0.018 164);
}

* {
    box-sizing: border-box;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) rgba(255, 255, 255, 0.08);
}

*::-webkit-scrollbar {
    width: 0.4rem;
    height: 0.4rem;
}

*::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

*::-webkit-scrollbar-thumb {
    min-height: 1.85rem;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

html.theme-dark,
html.theme-dark body {
    scrollbar-color: var(--accent) rgba(255, 255, 255, 0.08);
}

html.theme-dark::-webkit-scrollbar-track,
html.theme-dark body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 14% -8%, oklch(78% 0.13 72 / 0.34), transparent 28rem),
        radial-gradient(circle at 91% 12%, oklch(58% 0.15 32 / 0.18), transparent 24rem),
        linear-gradient(180deg, var(--paper) 0%, var(--paper-strong) 100%);
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    line-height: 1.5;
    position: relative;
}

html.theme-dark body {
    background:
        radial-gradient(circle at 16% -8%, oklch(76% 0.14 72 / 0.14), transparent 26rem),
        radial-gradient(circle at 92% 10%, oklch(66% 0.16 32 / 0.18), transparent 24rem),
        linear-gradient(180deg, var(--paper) 0%, oklch(13.5% 0.018 164) 100%);
}

body.page-soundboard {
    --pointer-x: 50%;
    --pointer-y: 50%;
    min-height: 100vh;
}

.soundboard-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.soundboard-ambient::before {
    content: "";
    position: absolute;
    inset: -50%;
}

.soundboard-ambient::after {
    content: "";
    position: absolute;
    inset: -50%;
}

html.motion-ready .soundboard-ambient::before {
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            oklch(0% 0 0 / 0.012) 2px,
            oklch(0% 0 0 / 0.012) 3px
        );
    animation: ambientScan 30s linear infinite;
}

html.motion-ready .soundboard-ambient::after {
    background:
        radial-gradient(ellipse 60% 50% at var(--pointer-x, 50%) var(--pointer-y, 50%), oklch(78% 0.13 72 / 0.06), transparent 50%),
        radial-gradient(ellipse 40% 40% at calc(100% - var(--pointer-x, 50%)) calc(100% - var(--pointer-y, 50%)), oklch(58% 0.15 32 / 0.04), transparent 40%);
}

html.motion-ready.theme-dark .soundboard-ambient::before {
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            oklch(100% 0 0 / 0.015) 2px,
            oklch(100% 0 0 / 0.015) 3px
        );
}

html.motion-ready.theme-dark .soundboard-ambient::after {
    background:
        radial-gradient(ellipse 60% 50% at var(--pointer-x, 50%) var(--pointer-y, 50%), oklch(76% 0.14 72 / 0.08), transparent 50%),
        radial-gradient(ellipse 40% 40% at calc(100% - var(--pointer-x, 50%)) calc(100% - var(--pointer-y, 50%)), oklch(66% 0.16 32 / 0.06), transparent 40%);
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

body::before {
    background-image:
        linear-gradient(var(--ink-faint) 1px, transparent 1px),
        linear-gradient(90deg, var(--ink-faint) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.24), transparent 58%);
}

body::after {
    inset: auto 0 0 0;
    height: 42vh;
    background: linear-gradient(180deg, transparent, oklch(58% 0.15 32 / 0.055));
}

html.motion-ready body::after {
    animation: bodyGlow 8s ease-in-out infinite alternate;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
select {
    font: inherit;
}

button,
input,
select,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--accent-soft);
    outline-offset: 3px;
}

.nav {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 0.82rem 0;
    background: var(--paper-soft);
    border-bottom: 2px solid var(--border);
    box-shadow: 0 1px 0 oklch(98% 0.012 82 / 0.5) inset;
}

html.theme-dark .nav {
    background: var(--paper-soft);
    border-bottom-color: var(--border);
}

html.theme-dark .nav-brand-mark {
    background: var(--panel-dark);
    color: var(--ink);
    box-shadow: 5px 5px 0 oklch(5% 0.01 164 / 0.32);
}

.nav-container,
.page-shell {
    width: min(1400px, calc(100% - 2rem));
    margin: 0 auto;
}

.nav-container {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
}

.nav-brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: var(--paper);
    box-shadow: 6px 6px 0 oklch(58% 0.15 32 / 0.24);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition:
        transform 0.28s var(--ease-out-quart),
        box-shadow 0.28s var(--ease-out-quart);
}

.nav-brand:hover .nav-brand-mark {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 8px 8px 0 oklch(58% 0.15 32 / 0.28);
}

html.theme-dark .nav-brand:hover .nav-brand-mark {
    box-shadow: 7px 7px 0 oklch(5% 0.01 164 / 0.4);
}

.nav-brand-mark img {
    transition: transform 0.4s var(--ease-out-quint);
}

.nav-brand:hover .nav-brand-mark img {
    transform: scale(1.08) rotate(6deg);
}

.nav-brand-mark img {
    width: 34px;
    height: 34px;
    display: block;
}

.nav-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.nav-brand-label {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-brand-subtitle {
    color: var(--ink-muted);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    min-width: 0;
}

.nav-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex: 0 0 auto;
}

.guild-selector-shell {
    order: 0;
}

.nav-link[href="/"] {
    order: 1;
}

.nav-link[href="/analytics"] {
    order: 2;
}

.nav-link[href="/speech-training"] {
    order: 3;
}

.auth-button,
.auth-user-link,
.auth-user-cluster {
    order: 0;
}

.theme-toggle {
    order: 1;
}

.nav-link,
.auth-button,
.auth-user-link,
.guild-selector-shell {
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.66rem 0.98rem;
    background: var(--paper-muted);
    border: 2px solid var(--border);
    border-radius: 999px;
    color: var(--ink-muted);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition:
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

.nav-icon {
    display: none;
}

.nav-text {
    display: inline;
}

.nav-link:hover,
.auth-button:hover,
.auth-user-link:hover,
.guild-selector-shell:hover {
    transform: translate(-2px, -2px) rotate(-1deg) scale(1.03);
    animation: doodleWobble 0.4s ease-in-out;
}

.nav-link.active {
    position: relative;
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    box-shadow: 5px 5px 0 oklch(58% 0.15 32 / 0.24);
}

.nav-link.active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 30%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.06) 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: navGlint 4s ease-in-out infinite;
    pointer-events: none;
}

.auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0.8rem 1.12rem;
    border: 3px solid var(--discord-deep);
    border-radius: 14px;
    background:
        linear-gradient(180deg, oklch(67% 0.2 276), var(--discord) 58%, var(--discord-deep));
    color: oklch(98% 0.01 276);
    box-shadow:
        6px 7px 0 oklch(49% 0.2 276 / 0.28),
        inset 0 3px 0 oklch(98% 0.01 276 / 0.28);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition:
        transform var(--motion-duration-fast) var(--ease-out-quint),
        background var(--motion-duration-fast) ease,
        border-color var(--motion-duration-fast) ease,
        box-shadow var(--motion-duration-fast) var(--ease-out-quint);
}

.auth-button:hover {
    background:
        linear-gradient(180deg, oklch(70% 0.18 276), var(--discord) 48%, var(--discord-deep));
    border-color: var(--discord-deep);
    box-shadow:
        9px 10px 0 oklch(49% 0.2 276 / 0.32),
        inset 0 3px 0 oklch(98% 0.01 276 / 0.32);
    transform: translate(-3px, -3px) rotate(-2deg) scale(1.04);
    animation: doodleWobble 0.5s ease-in-out;
}

.auth-button-icon {
    width: 1.05rem;
    height: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.auth-button-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.auth-button-label {
    min-width: 0;
}

.auth-user-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0.9rem 0.35rem 0.35rem;
    background: var(--paper-soft);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.auth-user-cluster {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.auth-inbox-button {
    position: absolute;
    top: -0.28rem;
    right: -0.28rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid var(--paper);
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 3px 8px oklch(19.5% 0.024 58 / 0.22);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
}

.auth-inbox-button.has-unreviewed {
    background: var(--accent);
}

html.theme-dark .auth-inbox-button {
    background: var(--panel-dark);
    border-color: oklch(94.5% 0.018 82 / 0.5);
    color: var(--ink);
    box-shadow: 0 3px 8px oklch(5% 0.01 164 / 0.34);
}

html.theme-dark .auth-inbox-button.has-unreviewed {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--panel-dark);
}

.auth-inbox-button:hover {
    transform: translateY(-1px);
}

.guild-selector-shell {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.48rem 0.4rem 0.78rem;
    background: rgb(247, 239, 229);
    background:
        linear-gradient(180deg, oklch(98% 0.014 82 / 0.96), oklch(92% 0.028 82 / 0.88)),
        oklch(96.1% 0.018 82 / 0.82);
    border: 2px solid rgba(23, 18, 13, 0.24);
    border-color: oklch(19.5% 0.024 58 / 0.34);
    border-radius: 999px;
    color: var(--ink-muted);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 3px 3px 0 rgba(197, 72, 52, 0.16), inset 0 2px 0 rgba(255, 253, 248, 0.88);
    box-shadow:
        3px 3px 0 oklch(58% 0.15 32 / 0.2),
        inset 0 2px 0 oklch(98.2% 0.012 82 / 0.88);
    transition:
        transform var(--motion-duration-fast) var(--ease-out-quint),
        border-color var(--motion-duration-fast) ease,
        box-shadow var(--motion-duration-fast) ease,
        background var(--motion-duration-fast) ease;
}

.guild-selector {
    max-width: 12rem;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    min-height: 1.82rem;
    padding: 0 2.05rem 0 0;
    background:
        linear-gradient(45deg, transparent 50%, rgb(151, 57, 43) 50%) calc(100% - 0.82rem) 48% / 0.34rem 0.34rem no-repeat,
        linear-gradient(135deg, rgb(151, 57, 43) 50%, transparent 50%) calc(100% - 0.59rem) 48% / 0.34rem 0.34rem no-repeat,
        linear-gradient(180deg, rgba(197, 72, 52, 0.12), rgba(243, 185, 85, 0.08)) right 0.08rem center / 1.68rem 1.62rem no-repeat;
    background:
        linear-gradient(45deg, transparent 50%, var(--accent-deep) 50%) calc(100% - 0.82rem) 48% / 0.34rem 0.34rem no-repeat,
        linear-gradient(135deg, var(--accent-deep) 50%, transparent 50%) calc(100% - 0.59rem) 48% / 0.34rem 0.34rem no-repeat,
        linear-gradient(180deg, var(--accent-soft), oklch(68% 0.13 72 / 0.1)) right 0.08rem center / 1.68rem 1.62rem no-repeat;
    color: rgb(23, 18, 13);
    color: var(--ink);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
    outline: none;
}

.guild-selector-shell:hover,
.guild-selector-shell:focus-within {
    border-color: rgba(197, 72, 52, 0.46);
    border-color: oklch(58% 0.15 32 / 0.52);
    background: rgb(250, 243, 233);
    background:
        linear-gradient(180deg, oklch(98% 0.014 82 / 0.98), oklch(93% 0.03 82 / 0.94)),
        oklch(97.2% 0.018 82 / 0.9);
    box-shadow: 4px 4px 0 rgba(197, 72, 52, 0.2), inset 0 2px 0 rgba(255, 253, 248, 0.92);
    box-shadow:
        4px 4px 0 oklch(58% 0.15 32 / 0.24),
        inset 0 2px 0 oklch(98.2% 0.012 82 / 0.92);
}

.guild-selector-shell:focus-within {
    outline: 3px solid var(--accent-soft);
    outline-offset: 3px;
}

.theme-toggle {
    flex: 0 0 auto;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    border: 3px solid var(--ink);
    border-radius: 14px;
    background:
        linear-gradient(180deg, oklch(28.5% 0.022 58), var(--ink));
    color: var(--paper);
    box-shadow:
        var(--button-cartoon-shadow),
        var(--button-cartoon-highlight);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform var(--motion-duration-fast) var(--ease-out-quint),
        box-shadow var(--motion-duration-fast) var(--ease-out-quint),
        background var(--motion-duration-fast) ease,
        border-color var(--motion-duration-fast) ease,
        color var(--motion-duration-fast) ease;
}

.theme-toggle:hover {
    transform: translate(-3px, -3px) rotate(-10deg) scale(1.06);
    box-shadow:
        var(--button-cartoon-shadow-hover),
        var(--button-cartoon-highlight);
    animation: doodleWobble 0.4s ease-in-out;
}

.theme-toggle:active {
    transform: translate(3px, 3px) scale(0.88) rotate(10deg);
    box-shadow:
        var(--button-cartoon-shadow-active),
        var(--button-cartoon-highlight);
    animation: doodlePress 0.2s ease-out;
}

.theme-toggle[aria-pressed="true"] {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--border-strong);
}

html.theme-dark .theme-toggle {
    background:
        linear-gradient(180deg, var(--panel-dark-soft), var(--panel-dark));
    color: var(--ink);
    border-color: var(--border-strong);
    box-shadow:
        var(--button-cartoon-shadow),
        var(--button-cartoon-highlight);
}

html.theme-dark .theme-toggle:hover {
    box-shadow:
        var(--button-cartoon-shadow-hover),
        var(--button-cartoon-highlight);
}

html.theme-dark .nav-link,
html.theme-dark .auth-user-link,
html.theme-dark .guild-selector-shell,
html.theme-dark .analytics-toolbar-standalone .time-selector,
html.theme-dark .pagination button,
html.theme-dark .pagination-page-input,
html.theme-dark .search-input,
html.theme-dark .filter-select,
html.theme-dark .stat-card,
html.theme-dark .leaderboard-item,
html.theme-dark .login-modal-close {
    background: rgba(28, 34, 31, 0.78);
}

html.theme-dark .nav-link.active,
html.theme-dark .play-button,
html.theme-dark .play-btn,
html.theme-dark .web-control-button,
html.theme-dark .web-upload-control-button,
html.theme-dark .pagination button:not(:disabled),
html.theme-dark .analytics-toolbar-standalone .time-btn.active {
    background:
        linear-gradient(180deg, var(--panel-dark-soft), var(--panel-dark));
    border-color: oklch(94.5% 0.018 82 / 0.5);
    color: var(--ink);
    box-shadow:
        var(--button-cartoon-shadow),
        var(--button-cartoon-highlight);
}

html.theme-dark .nav-link:not(.active) {
    color: #d8d0c5;
}

html.theme-dark .guild-selector {
    background:
        linear-gradient(45deg, transparent 50%, rgb(243, 185, 85) 50%) calc(100% - 0.82rem) 48% / 0.34rem 0.34rem no-repeat,
        linear-gradient(135deg, rgb(243, 185, 85) 50%, transparent 50%) calc(100% - 0.59rem) 48% / 0.34rem 0.34rem no-repeat,
        linear-gradient(180deg, rgba(243, 185, 85, 0.18), rgba(28, 34, 31, 0.68)) right 0.08rem center / 1.68rem 1.62rem no-repeat;
    background:
        linear-gradient(45deg, transparent 50%, oklch(82% 0.12 72) 50%) calc(100% - 0.82rem) 48% / 0.34rem 0.34rem no-repeat,
        linear-gradient(135deg, oklch(82% 0.12 72) 50%, transparent 50%) calc(100% - 0.59rem) 48% / 0.34rem 0.34rem no-repeat,
        linear-gradient(180deg, oklch(74% 0.12 72 / 0.2), oklch(17% 0.02 154 / 0.68)) right 0.08rem center / 1.68rem 1.62rem no-repeat;
    color: #f4f0e8;
}

html.theme-dark .guild-selector-shell {
    border-color: rgba(244, 240, 232, 0.2);
    border-color: oklch(89% 0.018 82 / 0.2);
    background: rgb(28, 34, 31);
    background:
        linear-gradient(180deg, oklch(25% 0.018 154 / 0.92), oklch(18% 0.016 154 / 0.9)),
        oklch(17% 0.02 154);
    box-shadow: 2px 2px 0 rgba(5, 7, 6, 0.34), inset 0 1px 0 rgba(244, 240, 232, 0.08);
    box-shadow:
        2px 2px 0 oklch(5% 0.01 164 / 0.34),
        inset 0 1px 0 oklch(89% 0.018 82 / 0.08);
}

html.theme-dark .guild-selector-shell:hover,
html.theme-dark .guild-selector-shell:focus-within {
    border-color: rgba(243, 185, 85, 0.42);
    border-color: oklch(74% 0.12 72 / 0.5);
    background: rgb(31, 38, 34);
    background:
        linear-gradient(180deg, oklch(27% 0.02 154 / 0.96), oklch(20% 0.018 154 / 0.92)),
        oklch(17% 0.02 154);
    box-shadow: 3px 3px 0 rgba(5, 7, 6, 0.38), inset 0 1px 0 rgba(244, 240, 232, 0.12);
    box-shadow:
        3px 3px 0 oklch(5% 0.01 164 / 0.38),
        inset 0 1px 0 oklch(89% 0.018 82 / 0.12);
}

html.theme-dark .play-button:hover:not(:disabled),
html.theme-dark .play-btn:hover:not(:disabled),
html.theme-dark .web-control-button:hover:not(:disabled),
html.theme-dark .web-upload-control-button:hover:not(:disabled),
html.theme-dark .pagination button:hover:not(:disabled) {
    box-shadow:
        var(--button-cartoon-shadow-hover),
        var(--button-cartoon-highlight);
}

html.theme-dark .play-button.login-required,
html.theme-dark .play-btn.login-required,
html.theme-dark .web-control-button.login-required,
html.theme-dark .web-upload-control-button.login-required,
html.theme-dark .play-button.error,
html.theme-dark .play-btn.error,
html.theme-dark .web-control-button.error {
    background:
        linear-gradient(180deg, oklch(72% 0.16 28), var(--error));
    border-color: var(--error);
    color: var(--paper);
    box-shadow:
        4px 5px 0 oklch(5% 0.01 164 / 0.36),
        var(--button-cartoon-highlight);
}

html.theme-dark .play-button.sent,
html.theme-dark .play-btn.sent,
html.theme-dark .web-control-button.sent {
    background:
        linear-gradient(180deg, oklch(78% 0.12 154), var(--success));
    border-color: var(--success);
    color: oklch(18% 0.035 154);
    box-shadow:
        4px 5px 0 oklch(5% 0.01 164 / 0.36),
        var(--button-cartoon-highlight);
}

.auth-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(23, 18, 13, 0.08);
}

.auth-user-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.1;
}

.auth-user-name {
    font-size: 0.86rem;
    font-weight: 700;
}

.auth-user-logout {
    color: var(--ink-muted);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-shell {
    padding: 1.35rem 0 2.5rem;
}

.page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.page-heading-copy {
    min-width: 0;
}

.page-heading .eyebrow {
    margin-bottom: 0.35rem;
}

.page-heading .page-title {
    max-width: 16ch;
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    font-size: clamp(1.85rem, 3.2vw, 3.15rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.95;
}

.page-heading .page-intro {
    max-width: 68ch;
    margin-top: 0.62rem;
    font-size: 0.96rem;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.85fr);
    gap: 1.15rem;
    margin-bottom: 1.35rem;
}

.hero-copy,
.hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow);
}

.hero-copy {
    padding: clamp(1.75rem, 4vw, 3rem);
    background:
        linear-gradient(135deg, rgba(255, 250, 243, 0.96), rgba(251, 242, 228, 0.86)),
        var(--paper-soft);
}

.hero-copy::before {
    content: "";
    position: absolute;
    right: -70px;
    top: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 72, 52, 0.18), transparent 68%);
}

.hero-copy::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 78px;
    background: linear-gradient(180deg, transparent, rgba(197, 72, 52, 0.04));
}

.hero-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.65rem;
    background:
        radial-gradient(circle at top right, rgba(204, 139, 50, 0.18), transparent 35%),
        linear-gradient(160deg, #17120e 0%, #241b14 100%);
    color: #f8eedf;
}

.hero-panel::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    background:
        linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.025)),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 18px,
            rgba(255, 255, 255, 0.03) 18px,
            rgba(255, 255, 255, 0.03) 19px
        );
    pointer-events: none;
}

.eyebrow,
.card-kicker,
.stat-label,
.hero-panel-kicker,
.table-caption,
.pagination-info,
.filter-label,
.empty-state {
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 0.85rem;
    color: var(--accent-deep);
    font-size: 0.76rem;
    font-weight: 700;
}

.page-title {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 12ch;
    font-family: "Instrument Serif", Georgia, serif;
    font-size: clamp(2.75rem, 7vw, 5.4rem);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 0.92;
}

.page-analytics .page-title {
    max-width: 11ch;
}

.page-intro {
    position: relative;
    z-index: 1;
    margin: 1rem 0 0;
    max-width: 60ch;
    color: var(--ink-muted);
    font-size: 1rem;
}

.hero-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.45rem;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.58rem 0.9rem;
    border-radius: 999px;
    border: 1px dashed var(--border-strong);
    background: rgba(255, 255, 255, 0.42);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-panel-kicker {
    margin: 0 0 0.6rem;
    color: rgba(248, 238, 223, 0.66);
    font-size: 0.72rem;
    font-weight: 700;
}

.hero-panel-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 2.05rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 0.98;
}

.hero-panel-copy {
    position: relative;
    z-index: 1;
    margin: 0.85rem 0 0;
    max-width: 34ch;
    color: rgba(248, 238, 223, 0.76);
}

.hero-panel-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.7rem;
}

.hero-panel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(248, 238, 223, 0.14);
    color: rgba(248, 238, 223, 0.82);
}

.hero-panel-item strong {
    color: #fff8ef;
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-panel-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.panel-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.82rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(248, 238, 223, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #fff8ef;
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.panel-link:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.panel-user-summary {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1rem;
    padding: 0.95rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-user-avatar {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-user-meta {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}

.panel-user-name {
    font-size: 0.95rem;
    font-weight: 700;
}

.panel-user-note {
    color: rgba(248, 238, 223, 0.68);
    font-size: 0.8rem;
}

.tables-grid,
.stats-grid,
.main-grid {
    display: grid;
    gap: 1rem;
}

.tables-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.control-room {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.15rem;
    margin-bottom: 0.8rem;
    padding: 0.78rem 0.95rem;
    border: 2px solid rgba(23, 18, 13, 0.3);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: #fbf1e1;
    background:
        radial-gradient(circle at 0 0, var(--accent-soft), transparent 15rem),
        linear-gradient(135deg, var(--paper-soft), var(--paper-muted));
    box-shadow: var(--shadow-sm), inset 0 1px 0 oklch(99% 0.012 82 / 0.82);
}

.control-room.system-monitor-open {
    z-index: 1400;
}

html.theme-dark .control-room {
    background:
        radial-gradient(circle at 0 0, var(--accent-soft), transparent 15rem),
        linear-gradient(135deg, var(--paper-soft), var(--paper-muted));
}

.control-room::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at 28% 36%, var(--accent-soft), transparent 50%);
    opacity: 0;
    transition: opacity 0.8s ease;
}

.control-room.dot-playing::after {
    opacity: 1;
    animation: controlRoomAir 4s ease-in-out infinite alternate;
}

.control-room.dot-offline::after {
    opacity: 0.5;
    background: radial-gradient(circle at 28% 36%, var(--error), transparent 50%);
    animation: controlRoomAir 6s ease-in-out infinite alternate;
}

.control-room-status {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.control-room-status-main {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.control-room-copy {
    min-width: 0;
}

.control-room-dot {
    width: 0.88rem;
    height: 0.88rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--ink-muted);
    box-shadow: 0 0 0 5px var(--ink-faint);
}

.control-room-dot.playing {
    background: var(--success);
    box-shadow: 0 0 0 5px rgba(38, 112, 77, 0.16);
}

.control-room-dot.offline {
    background: var(--error);
    box-shadow: 0 0 0 5px rgba(164, 43, 35, 0.15);
}

.control-room-dot.idle {
    animation: dotIdle 3s ease-in-out infinite;
}

.control-room-dot.playing {
    animation: dotPlaying 1.8s ease-in-out infinite, dotPulse 2.4s ease-in-out infinite;
}

.control-room-dot.offline {
    animation: dotOffline 4s ease-in-out infinite;
}

.control-room-dot.playing + .control-room-equalizer span {
    animation-duration: 0.55s;
    background: var(--success);
}

.control-room-dot.playing + .control-room-equalizer span:nth-child(1) { animation-delay: 0s; }
.control-room-dot.playing + .control-room-equalizer span:nth-child(2) { animation-delay: 0.12s; }
.control-room-dot.playing + .control-room-equalizer span:nth-child(3) { animation-delay: 0.24s; }
.control-room-dot.playing + .control-room-equalizer span:nth-child(4) { animation-delay: 0.36s; }
.control-room-dot.playing + .control-room-equalizer span:nth-child(5) { animation-delay: 0.48s; }

.control-room-equalizer {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    flex: 0 0 auto;
    opacity: 0.45;
    transition: opacity 0.4s ease;
}

.dot-playing .control-room-equalizer {
    opacity: 1;
}

.dot-offline .control-room-equalizer {
    opacity: 0.35;
}

.control-room-equalizer span {
    display: block;
    width: 2px;
    border-radius: 999px;
    background: var(--ink-muted);
    transform-origin: bottom;
    animation: eqBar 2.5s ease-in-out infinite;
}

.control-room-equalizer span:nth-child(1) { height: 5px; animation-delay: 0s; }
.control-room-equalizer span:nth-child(2) { height: 9px; animation-delay: 0.15s; }
.control-room-equalizer span:nth-child(3) { height: 12px; animation-delay: 0.3s; }
.control-room-equalizer span:nth-child(4) { height: 7px; animation-delay: 0.45s; }
.control-room-equalizer span:nth-child(5) { height: 10px; animation-delay: 0.6s; }

.dot-playing .control-room-equalizer span {
    animation-duration: 0.55s;
    background: var(--success);
}

.dot-offline .control-room-equalizer span {
    animation-duration: 3.5s;
    background: var(--error);
}

.control-room-title {
    max-width: 100%;
    margin: 0.1rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.control-room-title.status-flip {
    animation: nowPlayingSpark 0.55s ease-out;
}

.control-room-subtitle {
    margin: 0.2rem 0 0;
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.control-room-subtitle.has-progress {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
}

.control-room-requester-label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.control-room-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    flex: 0 0 auto;
    min-width: 6.8rem;
}

.control-room-progress-track {
    position: relative;
    width: 4.4rem;
    height: 0.38rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23, 18, 13, 0.14);
}

html.theme-dark .control-room-progress-track {
    background: rgba(244, 240, 232, 0.18);
}

.control-room-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--success);
    transition: width 0.22s ease;
}

.control-room-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: progressShimmer 1.8s ease-in-out infinite;
}

.control-room-progress-time {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.control-room-metrics {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    min-width: 0;
}

.control-room-metric {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

html.theme-dark .control-room-metric {
    background: transparent;
}

.control-room-metric + .control-room-metric {
    padding-left: 0.85rem;
}

.control-room-metric + .control-room-metric::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 1.9rem;
    transform: translateY(-50%);
    background: rgba(23, 18, 13, 0.14);
}

html.theme-dark .control-room-metric + .control-room-metric::before {
    background: rgba(244, 240, 232, 0.14);
}

.control-room-metric-label {
    display: inline-flex;
    color: var(--ink-muted);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.control-room-metric--system .control-room-metric-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.control-room-metric strong {
    display: inline-block;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    line-height: 1.1;
}

.control-room-voice-button {
    max-width: 18rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.control-room-voice-button:disabled {
    cursor: default;
}

.control-room-voice-button:not(:disabled):hover strong {
    color: var(--accent-deep);
}

.control-room-metric--action {
    gap: 0;
}

.control-room-metric--action .control-room-metric-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.control-room-metric-button {
    width: 2.3rem;
    height: 2.3rem;
    box-shadow: 3px 3px 0 rgba(23, 18, 13, 0.14), var(--button-cartoon-highlight);
}

.web-control-button,
.web-upload-control-button {
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border: 3px solid var(--ink);
    border-radius: 14px;
    background:
        linear-gradient(180deg, oklch(28.5% 0.022 58), var(--ink));
    color: var(--paper);
    box-shadow:
        var(--button-cartoon-shadow),
        var(--button-cartoon-highlight);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform var(--motion-duration-fast) var(--ease-out-quint),
        box-shadow var(--motion-duration-fast) var(--ease-out-quint),
        background var(--motion-duration-fast) ease,
        border-color var(--motion-duration-fast) ease,
        color var(--motion-duration-fast) ease,
        opacity var(--motion-duration-fast) ease;
}

.web-control-button:hover:not(:disabled),
.web-upload-control-button:hover:not(:disabled) {
    transform: translate(-3px, -3px) rotate(-3deg) scale(1.05);
    box-shadow:
        var(--button-cartoon-shadow-hover),
        var(--button-cartoon-highlight);
    animation: doodleWobble 0.5s ease-in-out;
}

.web-control-button:active:not(:disabled),
.web-upload-control-button:active:not(:disabled) {
    transform: translate(3px, 3px) scale(0.88) rotate(1deg);
    box-shadow:
        var(--button-cartoon-shadow-active),
        var(--button-cartoon-highlight);
    animation: doodlePress 0.2s ease-out;
}

.web-control-button:disabled,
.web-upload-control-button:disabled {
    cursor: not-allowed;
    opacity: 0.56;
}

.web-control-button.login-required,
.web-upload-control-button.login-required {
    background:
        linear-gradient(180deg, oklch(60% 0.16 28), var(--error));
    border-color: var(--error);
    color: var(--paper);
    box-shadow:
        4px 5px 0 oklch(48% 0.15 28 / 0.22),
        var(--button-cartoon-highlight);
}

.web-control-button.sent {
    background:
        linear-gradient(180deg, oklch(64% 0.12 154), var(--success));
    border-color: var(--success);
    box-shadow:
        4px 5px 0 oklch(53% 0.11 154 / 0.22),
        var(--button-cartoon-highlight);
}

.web-control-button.error {
    background:
        linear-gradient(180deg, oklch(60% 0.16 28), var(--error));
    border-color: var(--error);
    color: var(--paper);
    box-shadow:
        4px 5px 0 oklch(48% 0.15 28 / 0.22),
        var(--button-cartoon-highlight);
}

/* ── Action Dock ─────────────────────────────────────────── */

.control-room-action-dock {
    position: relative;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    flex-shrink: 0;
    isolation: isolate;
    z-index: 15;
}

.control-room-actions-trigger {
    width: 2.65rem;
    max-width: 2.65rem;
    min-width: 0;
    height: 2.65rem;
    padding: 0;
    border: 3px solid var(--ink);
    border-radius: 14px;
    background:
        linear-gradient(180deg, oklch(28.5% 0.022 58), var(--ink));
    color: var(--paper);
    box-shadow:
        var(--button-cartoon-shadow),
        var(--button-cartoon-highlight);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    transition:
        width 0.18s ease,
        max-width 0.18s ease,
        padding 0.18s ease,
        border-width 0.18s ease,
        opacity 0.18s ease,
        transform var(--motion-duration-fast) var(--ease-out-quint),
        box-shadow var(--motion-duration-fast) var(--ease-out-quint),
        background var(--motion-duration-fast) ease,
        border-color var(--motion-duration-fast) ease,
        color var(--motion-duration-fast) ease;
}

.control-room-actions-trigger:hover {
    transform: translate(-3px, -3px) rotate(-3deg) scale(1.05);
    box-shadow:
        var(--button-cartoon-shadow-hover),
        var(--button-cartoon-highlight);
    animation: doodleWobble 0.5s ease-in-out;
}

.control-room-actions-trigger:active {
    transform: translate(3px, 3px) scale(0.88) rotate(1deg);
    box-shadow:
        var(--button-cartoon-shadow-active),
        var(--button-cartoon-highlight);
    animation: doodlePress 0.2s ease-out;
}

html.theme-dark .control-room-actions-trigger {
    background:
        linear-gradient(180deg, var(--panel-dark-soft), var(--panel-dark));
    color: var(--accent-amber);
    border-color: var(--border-strong);
    box-shadow:
        var(--button-cartoon-shadow),
        var(--button-cartoon-highlight);
}

html.theme-dark .control-room-actions-trigger:hover {
    box-shadow:
        var(--button-cartoon-shadow-hover),
        var(--button-cartoon-highlight);
}

html.theme-dark .control-room-actions-trigger:active {
    box-shadow:
        var(--button-cartoon-shadow-active),
        var(--button-cartoon-highlight);
}

/* Collapse the trigger when the dock is open */
.control-room-action-dock:hover .control-room-actions-trigger,
.control-room-action-dock:focus-within .control-room-actions-trigger,
.control-room-action-dock.open .control-room-actions-trigger {
    width: 0;
    max-width: 0;
    padding: 0;
    border-width: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.control-room-action-menu {
    position: static;
    display: flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.38rem 0.42rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--paper-muted);
    box-shadow: 0 6px 20px rgba(23, 18, 13, 0.2);
    /* Collapsed state: zero-width, hidden */
    max-width: 0;
    min-width: 0;
    padding-inline: 0;
    border-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        max-width 0.18s ease,
        padding-inline 0.18s ease,
        border-width 0.18s ease,
        opacity 0.18s ease,
        visibility 0s 0.18s;
}

.control-room-action-dock:hover .control-room-action-menu,
.control-room-action-dock:focus-within .control-room-action-menu,
.control-room-action-dock.open .control-room-action-menu {
    max-width: 15rem;
    padding-inline: 0.42rem;
    border-width: 1px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        max-width 0.18s ease,
        padding-inline 0.18s ease,
        border-width 0.18s ease,
        opacity 0.18s ease,
        visibility 0s 0s;
}

.control-room-action-menu .control-room-metric-button {
    width: 2.3rem;
    height: 2.3rem;
    flex-shrink: 0;
    box-shadow: 2px 2px 0 rgba(23, 18, 13, 0.12);
}

/* ── System Monitor ─────────────────────────────────────── */

.control-room-metric--system {
    position: relative;
}

.control-room-system-button {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.control-room-system-button:hover strong {
    color: var(--accent-deep);
}

.control-room-system-button strong {
    font-variant-numeric: tabular-nums;
}

.system-monitor-dropdown {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 1300;
    display: none;
    width: min(21rem, calc(100vw - 1.5rem));
    flex-direction: column;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, #fffaf2 0%, #f0e1cd 100%);
    box-shadow: 0 18px 42px rgba(23, 18, 13, 0.22);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

html.theme-dark .system-monitor-dropdown {
    background: linear-gradient(180deg, #1f2521 0%, #121614 100%);
}

.system-monitor-dropdown.open {
    display: flex;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

.system-monitor-dropdown-header {
    margin-bottom: 0.45rem;
}

.system-monitor-dropdown-title {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    line-height: 1.1;
}

.system-monitor-totals {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
}

.system-monitor-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 0.35rem;
    outline: none;
}

.system-monitor-total-row[data-monitor-graph-target] {
    cursor: pointer;
}

.system-monitor-total-row[data-monitor-graph-target]:hover,
.system-monitor-total-row[data-monitor-graph-target]:focus-visible,
.system-monitor-process-row[data-monitor-process-key]:hover,
.system-monitor-process-row[data-monitor-process-key]:focus-visible {
    background: rgba(47, 132, 82, 0.08);
}

.system-monitor-total-label {
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.system-monitor-total-value {
    min-width: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#systemMonitorTotalDisk {
    white-space: nowrap;
}

.system-monitor-chart {
    border-top: 1px solid rgba(23, 18, 13, 0.1);
    padding-top: 0.5rem;
    margin-bottom: 0.55rem;
}

html.theme-dark .system-monitor-chart {
    border-top-color: rgba(244, 240, 232, 0.1);
}

.system-monitor-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.system-monitor-chart-header .card-kicker {
    margin-bottom: 0;
}

.system-monitor-chart-header--secondary {
    margin-top: 0.5rem;
}

.system-monitor-chart-value {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.system-monitor-range-selector {
    display: flex;
    gap: 0.25rem;
}

.system-monitor-range-btn {
    padding: 0.15rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    border: 1px solid rgba(23, 18, 13, 0.15);
    border-radius: 0.3rem;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.system-monitor-range-btn:hover {
    background: rgba(47, 132, 82, 0.08);
    color: var(--ink);
}

.system-monitor-range-btn.active {
    background: rgba(47, 132, 82, 0.15);
    color: var(--ink);
    border-color: rgba(47, 132, 82, 0.4);
}

html.theme-dark .system-monitor-range-btn {
    border-color: rgba(244, 240, 232, 0.15);
    color: var(--ink-muted);
}

html.theme-dark .system-monitor-range-btn:hover {
    background: rgba(47, 132, 82, 0.15);
    color: var(--ink);
}

html.theme-dark .system-monitor-range-btn.active {
    background: rgba(47, 132, 82, 0.25);
    color: var(--ink);
    border-color: rgba(47, 132, 82, 0.5);
}

.system-monitor-resource-chart {
    position: relative;
    height: 4.9rem;
    overflow: hidden;
    border: 1px solid rgba(23, 18, 13, 0.12);
    border-radius: 0.6rem;
    background:
        linear-gradient(180deg, rgba(47, 132, 82, 0.1), rgba(47, 132, 82, 0.02)),
        rgba(255, 250, 242, 0.46);
}

.system-monitor-resource-chart--temp {
    height: 4rem;
}

.system-monitor-hover-chart {
    display: none;
    border-top: 1px solid rgba(23, 18, 13, 0.1);
    padding-top: 0.5rem;
    margin-bottom: 0.55rem;
}

.system-monitor-hover-chart.open {
    display: block;
}

html.theme-dark .system-monitor-hover-chart {
    border-top-color: rgba(244, 240, 232, 0.1);
}

html.theme-dark .system-monitor-resource-chart {
    border-color: rgba(244, 240, 232, 0.12);
    background:
        linear-gradient(180deg, rgba(94, 234, 142, 0.1), rgba(94, 234, 142, 0.02)),
        rgba(5, 8, 20, 0.18);
}

.system-monitor-chart-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(23, 18, 13, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(23, 18, 13, 0.08) 1px, transparent 1px);
    background-size: 20% 100%, 100% 50%;
    opacity: 0.55;
}

html.theme-dark .system-monitor-chart-grid {
    background:
        linear-gradient(to right, rgba(244, 240, 232, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(244, 240, 232, 0.08) 1px, transparent 1px);
    background-size: 20% 100%, 100% 50%;
}

.system-monitor-resource-chart svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.system-monitor-chart-area {
    fill: rgba(47, 132, 82, 0.18);
}

.system-monitor-chart-line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.system-monitor-chart-line--cpu {
    stroke: var(--accent-deep);
}

.system-monitor-chart-line--ram {
    stroke: #7a5cff;
}

.system-monitor-chart-line--disk {
    stroke: #d27824;
}

.system-monitor-chart-line--temp {
    stroke: #c2410c;
}

.system-monitor-chart-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--system-monitor-marker-x, 0);
    display: none;
    width: 1px;
    background: rgba(23, 18, 13, 0.38);
    pointer-events: none;
}

.system-monitor-chart-marker::after {
    content: "";
    position: absolute;
    top: var(--system-monitor-marker-y, 50%);
    left: 50%;
    width: 0.42rem;
    height: 0.42rem;
    border: 2px solid var(--accent-deep);
    border-radius: 999px;
    background: oklch(98% 0.024 95);
    transform: translate(-50%, -50%);
}

.system-monitor-chart-marker.open {
    display: block;
}

html.theme-dark .system-monitor-chart-marker {
    background: rgba(244, 240, 232, 0.35);
}

.system-monitor-chart-readout {
    position: absolute;
    top: 0.35rem;
    left: var(--system-monitor-readout-x, 0.35rem);
    display: none;
    max-width: calc(100% - 0.7rem);
    padding: 0.18rem 0.38rem;
    border: 1px solid rgba(23, 18, 13, 0.18);
    border-radius: 0.4rem;
    background: rgba(255, 250, 242, 0.94);
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(23, 18, 13, 0.14);
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    pointer-events: none;
}

.system-monitor-chart-readout.open {
    display: block;
}

html.theme-dark .system-monitor-chart-readout {
    border-color: rgba(244, 240, 232, 0.16);
    background: rgba(20, 24, 22, 0.94);
}

.system-monitor-chart-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 700;
    pointer-events: none;
}

.system-monitor-chart-empty[hidden] {
    display: none;
}

.system-monitor-resource-chart {
    cursor: pointer;
}

.system-monitor-historical-processes {
    border-top: 1px solid rgba(47, 132, 82, 0.2);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.system-monitor-historical-processes .card-kicker {
    color: rgba(47, 132, 82, 0.9);
}

html.theme-dark .system-monitor-historical-processes {
    border-top-color: rgba(47, 132, 82, 0.3);
}

.system-monitor-processes {
    border-top: 1px solid rgba(23, 18, 13, 0.1);
    padding-top: 0.45rem;
}

html.theme-dark .system-monitor-processes {
    border-top-color: rgba(244, 240, 232, 0.1);
}

.system-monitor-processes .card-kicker {
    margin-bottom: 0.3rem;
}

.system-monitor-process-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.system-monitor-process-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.3;
    cursor: pointer;
}

.system-monitor-process-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
    font-weight: 600;
}

.system-monitor-process-cpu {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
    font-weight: 650;
}

.system-monitor-process-mem {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
    font-size: 0.7rem;
}

.system-monitor-footnote {
    margin: 0.35rem 0 0;
    color: var(--ink-faint);
    font-size: 0.62rem;
    line-height: 1.3;
    font-weight: 600;
}

.system-monitor-empty {
    color: var(--ink-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.web-upload-dialog {
    width: min(34rem, calc(100vw - 1.5rem));
    max-height: min(90vh, 52rem);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 24px;
    background:
        radial-gradient(circle at 16% 8%, rgba(244, 149, 66, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(248, 238, 223, 0.98), rgba(255, 249, 241, 0.96)),
        var(--paper);
    color: var(--ink);
    box-shadow: 0 26px 80px rgba(23, 18, 13, 0.28);
}

.web-tts-dialog {
    width: min(30rem, calc(100vw - 1.5rem));
}

.web-upload-dialog,
.web-tts-dialog,
.sound-rename-dialog,
.sound-list-dialog,
.sound-similar-dialog,
.sound-event-dialog {
    animation: dialogEnter 0.17s var(--ease-out-quart) both;
    will-change: transform, opacity;
}

.web-upload-dialog::backdrop,
.web-tts-dialog::backdrop {
    animation: backdropEnter 0.2s ease both;
    background: rgba(23, 18, 13, 0.50);
}

html.theme-dark .web-upload-dialog::backdrop,
html.theme-dark .web-tts-dialog::backdrop {
    background: rgba(18, 14, 10, 0.68);
}

.web-upload-inbox-dialog {
    margin: 4.8rem max(0.75rem, calc((100vw - min(1180px, calc(100% - 2rem))) / 2)) auto auto;
    width: min(31rem, calc(100vw - 1.5rem));
}

html.theme-dark .web-upload-dialog {
    background:
        radial-gradient(circle at 16% 8%, rgba(244, 149, 66, 0.16), transparent 32%),
        linear-gradient(135deg, rgba(41, 35, 30, 0.98), rgba(31, 37, 34, 0.96)),
        var(--paper);
}

.web-upload-modal-form {
    display: grid;
    gap: 0.85rem;
    padding: 1.05rem;
}

.web-upload-modal-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
}

.web-upload-title {
    margin: 0.12rem 0 0;
    font-size: 1.28rem;
    line-height: 1.05;
}

.web-upload-status {
    margin: 0.32rem 0 0;
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.35;
}

.web-upload-status[data-kind="success"] {
    color: var(--success);
}

.web-upload-status[data-kind="error"] {
    color: var(--error);
}

.web-upload-close {
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink);
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
}

html.theme-dark .web-upload-close {
    background: rgba(255, 255, 255, 0.08);
}

.web-upload-field {
    display: grid;
    gap: 0.35rem;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.web-upload-input {
    width: 100%;
    min-width: 0;
    padding: 0.72rem 0.78rem;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.web-upload-input option {
    background: var(--paper);
    color: var(--ink);
}

.web-upload-input:focus {
    outline: 2px solid rgba(197, 72, 52, 0.28);
    outline-offset: 2px;
}

.web-upload-file-picker {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-width: 0;
}

.web-upload-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.web-upload-file-button {
    min-height: 2.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.62rem 0.85rem;
    border: 3px solid var(--ink);
    border-radius: 999px;
    background:
        linear-gradient(180deg, oklch(28.5% 0.022 58), var(--ink));
    color: var(--paper);
    box-shadow:
        var(--button-cartoon-shadow),
        var(--button-cartoon-highlight);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition:
        transform var(--motion-duration-fast) var(--ease-out-quint),
        box-shadow var(--motion-duration-fast) var(--ease-out-quint),
        background var(--motion-duration-fast) ease;
}

.web-upload-file-button:hover {
    transform: translate(-3px, -3px) rotate(-2deg) scale(1.04);
    box-shadow:
        var(--button-cartoon-shadow-hover),
        var(--button-cartoon-highlight);
    animation: doodleWobble 0.5s ease-in-out;
}

.web-upload-file-button:active {
    transform: translate(3px, 3px) scale(0.88) rotate(1deg);
    box-shadow:
        var(--button-cartoon-shadow-active),
        var(--button-cartoon-highlight);
    animation: doodlePress 0.2s ease-out;
}

.web-upload-file-name {
    min-width: 0;
    padding: 0.72rem 0.78rem;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink-muted);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.web-upload-textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.web-tts-message {
    min-height: 7rem;
    padding-bottom: 2.65rem;
}

.web-tts-message-box {
    position: relative;
}

.web-tts-message-box .web-tts-message {
    width: 100%;
}

.web-tts-enhance-button {
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    min-height: 2rem;
    padding: 0 0.72rem;
    border: 2px solid oklch(58% 0.15 32 / 0.36);
    border-radius: 11px;
    background:
        linear-gradient(180deg, oklch(98.2% 0.012 82), oklch(94% 0.03 82));
    color: var(--accent-deep);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        4px 5px 0 oklch(19.5% 0.024 58 / 0.14),
        var(--button-cartoon-highlight);
    transition:
        transform var(--motion-duration-fast) var(--ease-out-quint),
        box-shadow var(--motion-duration-fast) var(--ease-out-quint),
        background var(--motion-duration-fast) ease;
}

.web-tts-enhance-button:hover:not(:disabled) {
    transform: translate(-3px, -3px) rotate(2deg) scale(1.04);
    box-shadow:
        5px 6px 0 oklch(19.5% 0.024 58 / 0.14),
        var(--button-cartoon-highlight);
}

.web-tts-enhance-button:active:not(:disabled) {
    transform: translate(3px, 3px) scale(0.88) rotate(-1deg);
    box-shadow:
        1px 2px 0 oklch(19.5% 0.024 58 / 0.14),
        var(--button-cartoon-highlight);
    animation: doodlePress 0.2s ease-out;
}

.web-tts-enhance-button:disabled {
    cursor: not-allowed;
    opacity: 0.66;
}

html.theme-dark .web-tts-enhance-button {
    background: rgba(31, 37, 34, 0.94);
    border-color: rgba(228, 95, 73, 0.36);
    color: #ffb09e;
}

html.theme-dark .web-upload-input {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink);
    color-scheme: dark;
}

html.theme-dark .web-upload-input option {
    background: #1f2522;
    color: #f4f0e8;
}

html.theme-dark .web-upload-input:focus {
    border-color: rgba(228, 95, 73, 0.72);
    outline-color: rgba(228, 95, 73, 0.34);
}

html.theme-dark .web-upload-file-name {
    background: rgba(255, 255, 255, 0.06);
}

.web-upload-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-top: 0.15rem;
}

.web-upload-secondary {
    min-height: 2.6rem;
    padding: 0.55rem 0.85rem;
    border: 2px solid var(--border-strong);
    border-radius: 999px;
    background:
        linear-gradient(180deg, oklch(98.2% 0.012 82 / 0.78), oklch(92% 0.03 82 / 0.64));
    color: var(--ink);
    box-shadow:
        4px 5px 0 oklch(19.5% 0.024 58 / 0.12),
        var(--button-cartoon-highlight);
    font-weight: 900;
    cursor: pointer;
    transition:
        transform var(--motion-duration-fast) var(--ease-out-quint),
        box-shadow var(--motion-duration-fast) var(--ease-out-quint),
        background var(--motion-duration-fast) ease,
        border-color var(--motion-duration-fast) ease;
}

.web-upload-secondary:hover:not(:disabled) {
    transform: translate(-3px, -3px) rotate(2deg) scale(1.04);
    border-color: oklch(58% 0.15 32 / 0.44);
    box-shadow:
        6px 7px 0 oklch(19.5% 0.024 58 / 0.14),
        var(--button-cartoon-highlight);
    animation: doodleWobble 0.5s ease-in-out;
}

.web-upload-secondary:active:not(:disabled) {
    transform: translate(3px, 3px) scale(0.88) rotate(-1deg);
    box-shadow:
        1px 2px 0 oklch(19.5% 0.024 58 / 0.12),
        var(--button-cartoon-highlight);
    animation: doodlePress 0.2s ease-out;
}

html.theme-dark .web-upload-secondary {
    background: rgba(255, 255, 255, 0.06);
}

.web-upload-submit {
    min-height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6.5rem;
    padding: 0.55rem 1rem;
    border: 3px solid var(--ink);
    border-radius: 999px;
    background:
        linear-gradient(180deg, oklch(28.5% 0.022 58), var(--ink));
    color: var(--paper);
    box-shadow:
        var(--button-cartoon-shadow),
        var(--button-cartoon-highlight);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 900;
    transition:
        transform var(--motion-duration-fast) var(--ease-out-quint),
        box-shadow var(--motion-duration-fast) var(--ease-out-quint),
        background var(--motion-duration-fast) ease,
        border-color var(--motion-duration-fast) ease,
        color var(--motion-duration-fast) ease,
        opacity var(--motion-duration-fast) ease;
}

.web-upload-submit:hover:not(:disabled) {
    transform: translate(-3px, -3px) rotate(-2deg) scale(1.04);
    box-shadow:
        var(--button-cartoon-shadow-hover),
        var(--button-cartoon-highlight);
    animation: doodleWobble 0.5s ease-in-out;
}

.web-upload-submit:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.web-upload-submit.login-required {
    background:
        linear-gradient(180deg, oklch(60% 0.16 28), var(--error));
    border-color: var(--error);
    color: var(--paper);
    box-shadow:
        4px 5px 0 oklch(48% 0.15 28 / 0.22),
        var(--button-cartoon-highlight);
}

.sound-options-dialog {
    width: min(31rem, calc(100vw - 1.5rem));
}

.sound-options-dialog .web-upload-modal-form {
    gap: 0.95rem;
}

.sound-options-dialog .web-upload-title {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sound-options-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
}

.sound-rename-inline {
    grid-template-columns: minmax(0, max-content) auto;
    justify-content: start;
}

.sound-rename-inline .web-upload-input {
    width: auto;
    max-width: min(26rem, calc(100vw - 8rem));
}

.sound-options-actions {
    display: flex;
    justify-content: flex-start;
}

.sound-options-actions .web-upload-submit {
    min-width: 8rem;
}

.sound-options-section {
    position: relative;
    display: grid;
    gap: 0.55rem;
    padding: 0.72rem;
    border: 1px solid rgba(23, 18, 13, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.34);
}

html.theme-dark .sound-options-section {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.sound-options-similar-list {
    display: grid;
    gap: 0.42rem;
    max-height: min(32vh, 15rem);
    overflow: auto;
    padding-right: 0.58rem;
    scrollbar-width: none;
}

.sound-options-similar-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.sound-options-similar-scrollbar {
    position: absolute;
    top: 2.9rem;
    right: 0.54rem;
    bottom: 0.9rem;
    width: 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.sound-options-section.has-scrollbar .sound-options-similar-scrollbar {
    opacity: 1;
}

.sound-options-similar-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 1.85rem;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
    transform: translateY(0);
    will-change: height, transform;
}

.sound-options-similar-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.7rem;
    padding: 0.62rem 0.72rem;
    border: 1px solid rgba(23, 18, 13, 0.14);
    border-radius: 14px;
    background: rgba(255, 250, 241, 0.78);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

.sound-options-similar-button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(197, 72, 52, 0.42);
    box-shadow: 0 10px 22px rgba(23, 18, 13, 0.12);
}

.sound-options-similar-button:disabled {
    cursor: not-allowed;
    opacity: 0.64;
}

html.theme-dark .sound-options-similar-button {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
}

.sound-options-similar-name {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sound-options-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.55rem;
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .sound-options-inline {
        grid-template-columns: 1fr;
    }

    .sound-rename-inline .web-upload-input {
        width: 100% !important;
        max-width: 100%;
    }

    .sound-options-inline .web-upload-secondary {
        width: 100%;
    }
}

.web-upload-queue {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.25rem;
    padding: 0.7rem;
    border: 1px solid rgba(23, 18, 13, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.34);
}

html.theme-dark .web-upload-queue {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(244, 240, 232, 0.14);
}

.web-upload-queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#webUploadQueueCount {
    min-width: 1.35rem;
    min-height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.68rem;
    line-height: 1;
}

.web-upload-queue-list,
.web-upload-queue-items {
    display: grid;
    gap: 0.42rem;
}

.web-upload-queue-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    padding: 0.48rem 0.58rem;
    border: 1px solid rgba(23, 18, 13, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.52);
    animation: queueEnter 0.3s var(--ease-out-quart) both;
}

.web-upload-queue-item.status-approved {
    border-color: var(--success);
    border-color: color-mix(in oklch, var(--success) 30%, transparent);
}

.web-upload-queue-item.status-error {
    animation: none;
}

html.theme-dark .web-upload-queue-item {
    background: rgba(255, 255, 255, 0.05);
}

.web-upload-queue-dot {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: var(--accent-amber);
    box-shadow: 0 0 0 4px var(--accent-amber-soft);
}

.web-upload-queue-item.status-approved .web-upload-queue-dot {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(38, 112, 77, 0.14);
}

.web-upload-queue-item.status-error .web-upload-queue-dot {
    background: var(--error);
    box-shadow: 0 0 0 4px rgba(164, 43, 35, 0.14);
}

.web-upload-queue-copy {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.web-upload-queue-copy strong,
.web-upload-queue-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.web-upload-queue-copy strong {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 850;
}

.web-upload-queue-copy span {
    color: var(--ink-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.web-upload-admin {
    margin-top: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(23, 18, 13, 0.12);
}

.web-upload-admin summary {
    cursor: pointer;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 800;
}

.web-tts-admin-model-row {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    margin-top: 0.3rem;
}

.web-tts-admin-model-row .web-upload-input {
    flex: 1;
    min-width: 0;
}

.web-tts-admin-model-status {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: var(--ink-muted);
}

.web-upload-inbox {
    margin-top: 0.65rem;
    max-height: min(58vh, 29rem);
    overflow-y: auto;
}

.web-upload-empty {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.78rem;
}

.web-upload-list {
    display: grid;
    gap: 0.45rem;
}

.web-upload-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(23, 18, 13, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.42);
}

html.theme-dark .web-upload-item {
    background: rgba(255, 255, 255, 0.05);
}

.web-upload-item.status-rejected {
    border-color: rgba(164, 43, 35, 0.34);
}

.web-upload-item-meta {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.web-upload-item-meta strong,
.web-upload-item-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.web-upload-item-meta span {
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.web-upload-item-actions {
    display: flex;
    gap: 0.4rem;
}

.web-upload-moderate {
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 2px 2px 0 oklch(19.5% 0.024 58 / 0.1);
    transition:
        transform var(--motion-duration-fast) var(--ease-out-quint),
        box-shadow var(--motion-duration-fast) var(--ease-out-quint);
}

.web-upload-moderate:hover:not(:disabled) {
    transform: translate(-2px, -2px) rotate(-1deg) scale(1.04);
    box-shadow: 3px 3px 0 oklch(19.5% 0.024 58 / 0.14);
}

.web-upload-moderate:active:not(:disabled) {
    transform: translate(1px, 1px) scale(0.95);
    box-shadow: 1px 1px 0 oklch(19.5% 0.024 58 / 0.1);
}

.web-upload-moderate:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.web-upload-inbox-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.65rem;
    color: var(--ink-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.web-upload-inbox-pagination[hidden] {
    display: none;
}

.web-upload-inbox-pagination button {
    min-height: 2rem;
    padding: 0.35rem 0.62rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--ink);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 900;
}

.web-upload-inbox-pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    margin-top: 1rem;
}

.main-grid-column {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-width: 0;
}

.card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1rem;
    background: #fff7ea;
    background:
        linear-gradient(180deg, oklch(97% 0.03 82 / 0.98), oklch(92.8% 0.04 82 / 0.96)),
        var(--paper-soft);
    border: 2px solid rgba(23, 18, 13, 0.28);
    border: 2px solid var(--border-strong);
    border-radius: 22px;
    box-shadow: var(--shadow-sm), inset 0 1px 0 oklch(99% 0.012 82 / 0.78);
}

html.theme-dark .card {
    background:
        linear-gradient(180deg, oklch(22% 0.018 164 / 0.98), oklch(18% 0.018 164 / 0.96)),
        var(--paper-soft);
}

.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--card-accent, linear-gradient(90deg, var(--accent), var(--accent-amber)));
}

.card--recent {
    --card-accent: linear-gradient(90deg, var(--accent-amber), #e2b35e);
}

.card--favorites {
    --card-accent: linear-gradient(90deg, var(--accent-olive), #91a253);
}

.card--library,
.card--top-sounds {
    --card-accent: linear-gradient(90deg, var(--accent), #df7f53);
}

.card--top-users,
.card--timeline {
    --card-accent: linear-gradient(90deg, var(--ink), #5b4e41);
}

.card--heatmap {
    --card-accent: linear-gradient(90deg, var(--accent-olive), var(--accent-amber));
}

.card--activity {
    --card-accent: linear-gradient(90deg, var(--accent-amber), var(--accent));
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card-title-stack {
    display: grid;
    gap: 0.28rem;
}

.card-kicker {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.card-title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.card-copy {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.9rem;
    max-width: 40ch;
}

.table-caption {
    margin: 0 0 0.75rem;
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.search-input,
.filter-select {
    width: 100%;
    padding: 0.72rem 0.86rem;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(23, 18, 13, 0.2);
    border: 2px solid var(--border);
    background: #f7efe5;
    background: oklch(94% 0.025 82 / 0.92);
    color: var(--ink);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.filter-select {
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.035em;
}

.search-input::placeholder {
    color: #897c70;
}

html.theme-dark .search-input::placeholder {
    color: #91887f;
}

.search-shell {
    position: relative;
    min-width: 0;
}

.search-shell .search-input {
    padding-right: 2.4rem;
}

.search-clear-button {
    position: absolute;
    top: 50%;
    right: 0.48rem;
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-50%);
}

.search-clear-button.visible {
    display: inline-flex;
}

html.theme-dark .search-clear-button {
    background: rgba(255, 255, 255, 0.08);
}

.search-input {
    margin-bottom: 0;
}

.library-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.library-controls .search-input {
    margin-bottom: 0;
}

.search-input:focus,
.filter-select:focus {
    outline: none;
    border-color: rgba(197, 72, 52, 0.42);
    background: #fffefb;
    box-shadow: 0 0 0 4px rgba(197, 72, 52, 0.08);
}

html.theme-dark .search-input:focus,
html.theme-dark .filter-select:focus {
    background: #1f2522;
    box-shadow: 0 0 0 4px rgba(228, 95, 73, 0.14);
}

.filters-grid {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.actions-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    margin-bottom: 0.55rem;
}

.actions-controls .filters-grid {
    margin-bottom: 0;
}

.result-meta {
    min-height: 1.05rem;
    margin: -0.12rem 0 0.45rem;
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.filters-grid.cols-1 {
    grid-template-columns: 1fr;
}

.filters-grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filters-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.filter-label {
    color: var(--ink-muted);
    font-size: 0.66rem;
    font-weight: 700;
}

.placeholder-filter {
    pointer-events: none;
}

.filter-placeholder {
    display: block;
    min-height: 3rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(23, 18, 13, 0.035));
}

.filter-select {
    min-height: 2.58rem;
    appearance: none;
    -webkit-appearance: none;
    padding: 0.68rem 2.74rem 0.68rem 0.86rem;
    border: 2px solid rgba(23, 18, 13, 0.24);
    border-color: oklch(19.5% 0.024 58 / 0.34);
    background: rgb(247, 239, 229);
    background:
        linear-gradient(180deg, oklch(98% 0.014 82 / 0.98), oklch(92% 0.028 82 / 0.9)),
        oklch(96.1% 0.018 82 / 0.82);
    color: rgb(23, 18, 13);
    box-shadow: 2px 2px 0 rgba(23, 18, 13, 0.08), inset 0 1px 0 rgba(255, 253, 248, 0.8);
    box-shadow:
        2px 2px 0 oklch(19.5% 0.024 58 / 0.12),
        inset 0 1px 0 oklch(98.2% 0.012 82 / 0.8);
    cursor: pointer;
    text-transform: none;
}

.select-shell {
    position: relative;
    isolation: isolate;
    border-radius: var(--radius-sm);
    transition:
        filter var(--motion-duration-fast) ease,
        transform var(--motion-duration-fast) var(--ease-out-quint);
}

.select-shell::before,
.select-shell::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.select-shell::before {
    right: 0.36rem;
    top: 50%;
    z-index: 1;
    width: 1.84rem;
    height: 1.84rem;
    border: 1px solid rgba(197, 72, 52, 0.3);
    border-color: oklch(58% 0.15 32 / 0.32);
    border-radius: 9px;
    background: rgb(251, 241, 225);
    background:
        linear-gradient(180deg, oklch(74% 0.12 72 / 0.22), oklch(68% 0.13 72 / 0.1)),
        oklch(97% 0.018 82 / 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 253, 248, 0.7), 0 1px 0 rgba(23, 18, 13, 0.04);
    box-shadow:
        inset 0 1px 0 oklch(98.2% 0.012 82 / 0.7),
        0 1px 0 oklch(19.5% 0.024 58 / 0.04);
    transform: translateY(-50%);
}

.select-shell::after {
    right: 1rem;
    top: 50%;
    z-index: 2;
    width: 0.46rem;
    height: 0.46rem;
    border-right: 2px solid rgb(151, 57, 43);
    border-bottom: 2px solid rgb(151, 57, 43);
    border-color: oklch(46% 0.13 32);
    transform: translateY(-65%) rotate(45deg);
}

.select-shell:hover {
    transform: translateY(-1px);
}

.select-shell:active {
    transform: translateY(0);
}

.select-shell:hover .filter-select,
.select-shell:focus-within .filter-select {
    border-color: rgba(197, 72, 52, 0.46);
    border-color: oklch(58% 0.15 32 / 0.52);
    background: rgb(250, 243, 233);
    background:
        linear-gradient(180deg, oklch(98% 0.014 82 / 0.98), oklch(92% 0.032 82 / 0.94)),
        oklch(97.2% 0.018 82 / 0.9);
    box-shadow: 3px 3px 0 rgba(197, 72, 52, 0.12), inset 0 1px 0 rgba(255, 253, 248, 0.84);
    box-shadow:
        3px 3px 0 oklch(58% 0.15 32 / 0.15),
        inset 0 1px 0 oklch(98.2% 0.012 82 / 0.84);
}

.select-shell:active .filter-select {
    box-shadow: 1px 1px 0 rgba(197, 72, 52, 0.1), inset 0 1px 0 rgba(255, 253, 248, 0.76);
    box-shadow:
        1px 1px 0 oklch(58% 0.15 32 / 0.12),
        inset 0 1px 0 oklch(98.2% 0.012 82 / 0.76);
}

.select-shell:focus-within::before {
    border-color: rgba(197, 72, 52, 0.44);
    border-color: oklch(58% 0.15 32 / 0.48);
    background: rgb(250, 237, 219);
    background:
        linear-gradient(180deg, oklch(68% 0.13 72 / 0.18), var(--accent-soft)),
        oklch(97% 0.018 82 / 0.88);
}

.filter-select:disabled {
    color: var(--ink-muted);
    cursor: progress;
    opacity: 0.74;
}

html.theme-dark .filter-select {
    border-color: rgba(244, 240, 232, 0.18);
    border-color: oklch(89% 0.018 82 / 0.18);
    background: rgb(28, 34, 31);
    background:
        linear-gradient(180deg, oklch(25% 0.018 154 / 0.92), oklch(18% 0.016 154 / 0.9)),
        oklch(17% 0.02 154);
    color: rgb(244, 240, 232);
    color: oklch(94% 0.012 82);
    box-shadow: 2px 2px 0 rgba(5, 7, 6, 0.34), inset 0 1px 0 rgba(244, 240, 232, 0.08);
    box-shadow:
        2px 2px 0 oklch(5% 0.01 164 / 0.34),
        inset 0 1px 0 oklch(89% 0.018 82 / 0.08);
}

html.theme-dark .select-shell::before {
    border-color: rgba(243, 185, 85, 0.28);
    border-color: oklch(74% 0.12 72 / 0.32);
    background: rgb(33, 39, 36);
    background:
        linear-gradient(180deg, oklch(74% 0.12 72 / 0.2), oklch(17% 0.02 154 / 0.86)),
        oklch(22% 0.018 154 / 0.9);
    box-shadow: inset 0 1px 0 rgba(244, 240, 232, 0.1);
    box-shadow: inset 0 1px 0 oklch(89% 0.018 82 / 0.1);
}

html.theme-dark .select-shell::after {
    border-right-color: rgb(243, 185, 85);
    border-bottom-color: rgb(243, 185, 85);
    border-color: oklch(82% 0.12 72);
}

html.theme-dark .select-shell:hover .filter-select,
html.theme-dark .select-shell:focus-within .filter-select {
    border-color: rgba(243, 185, 85, 0.42);
    border-color: oklch(74% 0.12 72 / 0.5);
    background: rgb(31, 38, 34);
    background:
        linear-gradient(180deg, oklch(27% 0.02 154 / 0.96), oklch(20% 0.018 154 / 0.92)),
        oklch(17% 0.02 154);
    box-shadow: 3px 3px 0 rgba(5, 7, 6, 0.38), inset 0 1px 0 rgba(244, 240, 232, 0.12);
    box-shadow:
        3px 3px 0 oklch(5% 0.01 164 / 0.38),
        inset 0 1px 0 oklch(89% 0.018 82 / 0.12);
}

html.theme-dark .select-shell:focus-within::before {
    border-color: rgba(243, 185, 85, 0.46);
    border-color: oklch(82% 0.12 72 / 0.48);
    background: rgb(36, 42, 38);
    background:
        linear-gradient(180deg, oklch(74% 0.12 72 / 0.26), oklch(58% 0.15 32 / 0.16)),
        oklch(23% 0.018 154 / 0.94);
}

.select-shell:has(.filter-select:disabled) {
    transform: none;
}

.select-shell:has(.filter-select:disabled)::before,
.select-shell:has(.filter-select:disabled)::after {
    opacity: 0.48;
}

.table-container {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    padding-bottom: var(--table-bottom-inset);
    border-radius: 14px;
    border: 2px solid rgba(23, 18, 13, 0.2);
    border: 2px solid var(--border);
    background: #fbf4ea;
    background: oklch(96.5% 0.02 82 / 0.9);
    position: relative;
}

html.theme-dark .table-container {
    border-color: rgba(244, 240, 232, 0.14);
    background: rgba(20, 25, 22, 0.82);
}

.table-container.is-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 38%;
    height: 3px;
    border-radius: 999px;
    background: var(--accent);
    animation: tableLoadingWave 1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.table-container.is-loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 28%;
    height: 3px;
    border-radius: 999px;
    background: var(--accent-amber-soft);
    animation: tableLoadingWave 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite reverse;
}

.table-container.is-loading table {
    opacity: 0.58;
}

.table-container,
.activity-feed {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) rgba(255, 255, 255, 0.08);
}

.table-container::-webkit-scrollbar,
.activity-feed::-webkit-scrollbar {
    width: 0.4rem;
    height: 0.4rem;
}

.table-container::-webkit-scrollbar-track,
.activity-feed::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.table-container::-webkit-scrollbar-thumb,
.activity-feed::-webkit-scrollbar-thumb {
    min-height: 1.85rem;
    background: var(--accent);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.sound-row-context-menu {
    position: fixed;
    z-index: 1200;
    display: none;
    width: max-content;
    max-width: min(18rem, calc(100vw - 1rem));
    min-width: 8.25rem;
    padding: 0.35rem;
    border: 1px solid rgba(23, 18, 13, 0.14);
    border-radius: 8px;
    background: rgba(255, 250, 241, 0.98);
    box-shadow: 0 16px 34px rgba(23, 18, 13, 0.18);
}

.sound-row-context-menu.open {
    display: inline-grid;
}

.sound-row-context-menu button {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.45rem 0.65rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
}

.sound-row-context-menu button:hover,
.sound-row-context-menu button:focus-visible {
    outline: none;
    background: rgba(197, 72, 52, 0.1);
}

html.theme-dark .sound-row-context-menu {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(28, 32, 29, 0.98);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36);
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th,
td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.72rem 0.5rem;
    height: var(--table-header-height);
    background: var(--paper-soft);
    border-bottom: 1px solid var(--border);
    color: var(--ink-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
}

html.theme-dark th {
    background: rgba(22, 27, 24, 0.97);
    border-bottom-color: rgba(244, 240, 232, 0.14);
}

td {
    padding: 0.56rem 0.5rem;
    height: var(--table-row-height);
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    vertical-align: middle;
}

tbody tr {
    height: var(--table-row-height);
    transition: background 0.18s ease;
}

tbody tr.row-reveal {
    animation: rowReveal 0.25s ease-out both;
}

tbody tr.row-reveal.empty-row {
    animation: none;
}

tbody tr:nth-child(even) {
    background: oklch(98.2% 0.012 82 / 0.45);
}

html.theme-dark tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.04);
}

tbody tr:hover {
    background: var(--accent-soft);
}

html.theme-dark tbody tr:hover {
    background: rgba(228, 95, 73, 0.12);
}

.placeholder-row {
    pointer-events: none;
}

.placeholder-row td {
    color: transparent;
}

.placeholder-row td::before {
    content: "";
    display: block;
    width: min(100%, 9rem);
    height: 0.72rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(23, 18, 13, 0.08), rgba(23, 18, 13, 0.035));
}

tr:last-child td {
    border-bottom: none;
}

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

.sound-label,
.filename .sound-title,
.filename .sound-duration {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sound-label,
.filename {
    line-height: 1.15;
}

.filename .sound-title {
    font-weight: 700;
}

.filename .sound-duration {
    margin-top: 0.16rem;
    color: var(--ink-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0;
}

.play-button,
.play-btn,
.pagination button,
.login-modal-close,
.login-modal-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        transform var(--motion-duration-fast) var(--ease-out-quint),
        box-shadow var(--motion-duration-fast) var(--ease-out-quint),
        background var(--motion-duration-fast) ease,
        border-color var(--motion-duration-fast) ease,
        color var(--motion-duration-fast) ease,
        opacity var(--motion-duration-fast) ease;
}

.play-button,
.play-btn {
    position: relative;
    min-width: 2.7rem;
    min-height: 2.4rem;
    padding: 0.45rem 0.75rem;
    border: 3px solid var(--ink);
    border-radius: 14px;
    background:
        linear-gradient(180deg, oklch(28.5% 0.022 58), var(--ink));
    color: var(--paper);
    box-shadow:
        var(--button-cartoon-shadow),
        var(--button-cartoon-highlight);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    overflow: hidden;
    isolation: isolate;
}

.play-button::before,
.play-btn::before,
.web-control-button::before,
.web-upload-control-button::before,
.sound-options-button::before,
.pagination button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.25), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: -1;
}

.play-button:active::before,
.play-btn:active::before,
.web-control-button:active::before,
.web-upload-control-button:active::before,
.sound-options-button:active::before,
.pagination button:active::before {
    animation: buttonFlash 0.3s ease-out;
}

html.theme-dark .play-button::before,
html.theme-dark .play-btn::before,
html.theme-dark .web-control-button::before,
html.theme-dark .web-upload-control-button::before,
html.theme-dark .pagination button::before {
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12), transparent 60%);
}

.sound-options-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 2px solid var(--border-strong);
    border-radius: 12px;
    background:
        linear-gradient(180deg, oklch(98.2% 0.012 82 / 0.88), var(--paper-muted));
    color: var(--ink);
    box-shadow:
        4px 5px 0 oklch(19.5% 0.024 58 / 0.12),
        var(--button-cartoon-highlight);
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    transition:
        transform var(--motion-duration-fast) var(--ease-out-quint),
        background var(--motion-duration-fast) ease,
        border-color var(--motion-duration-fast) ease,
        box-shadow var(--motion-duration-fast) var(--ease-out-quint);
}

.sound-options-button:hover {
    transform: translate(-3px, -3px) rotate(4deg) scale(1.06);
    border-color: rgba(197, 72, 52, 0.35);
    background: rgba(197, 72, 52, 0.08);
    box-shadow:
        6px 7px 0 oklch(19.5% 0.024 58 / 0.14),
        var(--button-cartoon-highlight);
    animation: doodleWobble 0.4s ease-in-out;
}

.sound-options-button:active {
    transform: translate(3px, 3px) scale(0.88) rotate(-1deg);
    box-shadow:
        1px 2px 0 oklch(19.5% 0.024 58 / 0.12),
        var(--button-cartoon-highlight);
    animation: doodlePress 0.2s ease-out;
}

html.theme-dark .sound-options-button {
    background: rgba(255, 255, 255, 0.08);
}

.play-button:hover:not(:disabled),
.play-btn:hover:not(:disabled),
.pagination button:hover:not(:disabled),
.login-modal-close:hover,
.login-modal-login:hover {
    transform: translate(-3px, -3px) rotate(-2deg) scale(1.04);
    animation: doodleWobble 0.6s ease-in-out;
}

.play-button:hover:not(:disabled),
.play-btn:hover:not(:disabled) {
    box-shadow:
        var(--button-cartoon-shadow-hover),
        var(--button-cartoon-highlight);
}

.play-button:active:not(:disabled),
.play-btn:active:not(:disabled) {
    transform: translate(3px, 3px) scale(0.88) rotate(1deg);
    box-shadow:
        var(--button-cartoon-shadow-active),
        var(--button-cartoon-highlight);
    animation: doodlePress 0.2s ease-out;
}

.play-button:disabled,
.play-btn:disabled,
.pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.56;
}

.play-button.login-required,
.play-btn.login-required {
    background:
        linear-gradient(180deg, oklch(60% 0.16 28), var(--error));
    border-color: var(--error);
    color: var(--paper);
    box-shadow:
        4px 5px 0 oklch(48% 0.15 28 / 0.22),
        var(--button-cartoon-highlight);
}

.play-button.sent,
.play-btn.sent {
    overflow: visible;
    background:
        linear-gradient(180deg, oklch(64% 0.12 154), var(--success));
    border-color: var(--success);
    box-shadow:
        4px 5px 0 oklch(53% 0.11 154 / 0.22),
        var(--button-cartoon-highlight);
}

.play-button.sent::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid var(--success);
    animation: sentRing 0.45s ease-out forwards;
    pointer-events: none;
}

.play-button.warn,
.play-btn.warn {
    background:
        linear-gradient(180deg, oklch(78% 0.13 72), var(--accent-amber));
    border-color: var(--accent-amber);
    color: #17120d;
    box-shadow:
        4px 5px 0 oklch(68% 0.13 72 / 0.22),
        var(--button-cartoon-highlight);
}

.play-button.error,
.play-btn.error {
    animation: errorShake 0.3s ease-out;
    background:
        linear-gradient(180deg, oklch(60% 0.16 28), var(--error));
    border-color: var(--error);
    box-shadow:
        4px 5px 0 oklch(48% 0.15 28 / 0.22),
        var(--button-cartoon-highlight);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
}

.pagination button {
    padding: 0.72rem 1rem;
    border: 3px solid var(--border-strong);
    border-radius: 999px;
    background:
        linear-gradient(180deg, oklch(98.2% 0.012 82 / 0.82), var(--paper-muted));
    color: var(--ink);
    box-shadow:
        4px 5px 0 var(--ink-faint),
        var(--button-cartoon-highlight);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pagination button:hover:not(:disabled) {
    box-shadow:
        6px 7px 0 var(--ink-faint),
        var(--button-cartoon-highlight);
}

.pagination button:active:not(:disabled) {
    transform: translate(3px, 3px) scale(0.92) rotate(1deg);
    box-shadow:
        1px 2px 0 var(--ink-faint),
        var(--button-cartoon-highlight);
    animation: doodlePress 0.2s ease-out;
}

.pagination-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.pagination-page-input {
    width: 3.8rem;
    min-height: 2.35rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
    font: inherit;
    text-align: center;
}

.pagination-page-input:focus {
    outline: 2px solid rgba(197, 72, 52, 0.28);
    outline-offset: 2px;
}

.action-badge {
    display: -webkit-box;
    max-width: 72px;
    min-width: 0;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0.32rem 0.44rem;
    border-radius: 999px;
    border: 1px solid var(--accent-soft);
    background: var(--accent-soft);
    box-shadow: inset 0 1px 0 oklch(98% 0.012 82 / 0.65);
    font-size: 0.52rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.05em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.action-badge.play {
    background: rgba(197, 72, 52, 0.08);
    border-color: rgba(197, 72, 52, 0.18);
    color: var(--accent-deep);
}

.action-badge.favorite {
    background: var(--accent-amber-soft);
    border-color: rgba(204, 139, 50, 0.22);
    color: #9c671e;
}

.action-badge.join {
    background: var(--accent-olive-soft);
    border-color: rgba(107, 116, 48, 0.22);
    color: var(--accent-olive);
}

.action-badge.leave {
    background: rgba(23, 18, 13, 0.06);
    border-color: rgba(23, 18, 13, 0.1);
    color: var(--ink-muted);
}

.action-badge.keyword {
    background: rgba(131, 92, 61, 0.08);
    border-color: rgba(131, 92, 61, 0.18);
    color: #6c4a2d;
}

.action-badge.system {
    background: rgba(137, 84, 145, 0.08);
    border-color: rgba(137, 84, 145, 0.16);
    color: #7a4d82;
}

.action-badge.other {
    background: rgba(81, 103, 132, 0.08);
    border-color: rgba(81, 103, 132, 0.16);
    color: #48627c;
}

#actionsTable td:nth-child(2),
#favoritesTable td:first-child,
#allSoundsTable td:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#actionsTable th:first-child,
#actionsTable td:first-child {
    width: 5.25rem;
}

#actionsTable td:first-child {
    overflow: visible;
}

#actionsTable th:nth-child(2),
#actionsTable td:nth-child(2) {
    width: calc(100% - 15.75rem);
}

#actionsTable th:nth-child(3),
#actionsTable td:nth-child(3) {
    width: 7rem;
}

#actionsTable th:nth-child(4),
#actionsTable td:nth-child(4) {
    width: 4.5rem;
    text-align: center;
}

#favoritesTable th:first-child,
#favoritesTable td:first-child {
    width: calc(100% - 3.75rem);
}

#favoritesTable th:nth-child(2),
#favoritesTable td:nth-child(2) {
    width: 3.75rem;
    text-align: center;
    overflow: visible;
}

#favoritesTable .sound-options-column,
#allSoundsTable .sound-options-column {
    display: none;
}

#allSoundsTable th:first-child,
#allSoundsTable td:first-child {
    width: calc(100% - 9.25rem);
}

#allSoundsTable th:nth-child(2),
#allSoundsTable td:nth-child(2) {
    width: 5.5rem;
}

#allSoundsTable th:nth-child(3),
#allSoundsTable td:nth-child(3) {
    width: 3.75rem;
    text-align: center;
    overflow: visible;
}

.analytics-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
}

.analytics-toolbar-standalone .time-selector {
    border-color: var(--border-strong);
    background: var(--paper-soft);
    box-shadow: var(--shadow-sm);
}

.analytics-toolbar-standalone .time-btn {
    color: var(--ink-muted);
}

.analytics-toolbar-standalone .time-btn:hover {
    color: var(--ink);
}

.analytics-toolbar-standalone .time-btn.active {
    background: var(--ink);
    color: var(--paper);
}

.time-selector {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.34rem;
    border-radius: 999px;
    border: 1px solid rgba(248, 238, 223, 0.16);
    background: rgba(255, 255, 255, 0.08);
}

.time-btn {
    padding: 0.76rem 1rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(248, 238, 223, 0.68);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition:
        background 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease;
}

.time-btn:hover {
    color: #fff9f0;
}

.time-btn.active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff9f0;
}

.stat-card {
    position: relative;
    overflow: hidden;
    padding: 1.05rem 1.1rem 1.15rem;
    border-radius: 22px;
    border: 1px solid var(--border-strong);
    background: var(--paper-soft);
    box-shadow: var(--shadow-sm);
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--card-accent, linear-gradient(90deg, var(--accent), var(--accent-amber)));
}

.stat-card:nth-child(2) {
    --card-accent: linear-gradient(90deg, var(--ink), #5b4e41);
}

.stat-card:nth-child(3) {
    --card-accent: linear-gradient(90deg, var(--accent-olive), #98aa5a);
}

.stat-card:nth-child(4) {
    --card-accent: linear-gradient(90deg, var(--accent-amber), #e6b55f);
}

.stat-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--paper-muted);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 1.2rem;
}

html.theme-dark .stat-icon,
html.theme-dark .activity-icon {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(244, 240, 232, 0.12);
}

.stat-value {
    margin-top: 0.85rem;
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 0.95;
}

.stat-label {
    margin-top: 0.5rem;
    color: var(--ink-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.leaderboard-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--paper-muted);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.leaderboard-item:hover {
    transform: translateY(-2px);
    border-color: rgba(23, 18, 13, 0.16);
    box-shadow: var(--shadow-sm);
}

.rank {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--ink-faint);
    font-size: 0.9rem;
    font-weight: 700;
}

.rank.gold {
    background: linear-gradient(135deg, oklch(82% 0.13 82), var(--accent-amber));
}

.rank.silver {
    background: linear-gradient(135deg, oklch(84% 0.015 250), oklch(68% 0.025 250));
}

.rank.bronze {
    background: linear-gradient(135deg, oklch(70% 0.11 58), oklch(58% 0.12 52));
}

.item-info {
    min-width: 0;
}

.item-name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-bar {
    margin-top: 0.5rem;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23, 18, 13, 0.08);
}

html.theme-dark .item-bar {
    background: rgba(244, 240, 232, 0.12);
}

.item-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-amber), var(--accent-olive));
    transition: width 0.35s ease;
}

.item-count {
    color: var(--accent-deep);
    font-size: 0.88rem;
    font-weight: 700;
}

.card-full {
    grid-column: 1 / -1;
}

.heatmap-container {
    overflow: visible;
}

.heatmap {
    display: grid;
    min-width: 0;
    grid-template-columns: 34px repeat(7, minmax(0, 1fr));
    gap: 3px;
    align-items: center;
}

.heatmap-header,
.heatmap-row-label {
    color: var(--ink-muted);
}

.heatmap-header {
    padding-bottom: 0.2rem;
    font-size: 0.54rem;
    text-align: center;
}

.heatmap-row-label {
    padding-right: 0.32rem;
    font-size: 0.54rem;
    font-weight: 700;
    text-align: right;
}

.heatmap-cell {
    min-height: 44px;
    position: relative;
    border-radius: 5px;
    border: 1px solid rgba(23, 18, 13, 0.08);
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.heatmap-cell:hover {
    transform: scale(1.08);
    border-color: rgba(23, 18, 13, 0.16);
    box-shadow: 0 8px 16px rgba(68, 42, 18, 0.12);
    z-index: 5;
}

.heatmap-cell[data-level="1"] {
    background: rgba(107, 116, 48, 0.18);
}

.heatmap-cell[data-level="2"] {
    background: rgba(107, 116, 48, 0.34);
}

.heatmap-cell[data-level="3"] {
    background: rgba(204, 139, 50, 0.44);
}

.heatmap-cell[data-level="4"] {
    background: rgba(197, 72, 52, 0.62);
}

.heatmap-cell[data-level="5"] {
    background: var(--accent);
}

html.theme-dark .heatmap-cell {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(244, 240, 232, 0.12);
}

html.theme-dark .heatmap-cell[data-level="1"] {
    background: rgba(176, 191, 97, 0.22);
}

html.theme-dark .heatmap-cell[data-level="2"] {
    background: rgba(176, 191, 97, 0.42);
}

html.theme-dark .heatmap-cell[data-level="3"] {
    background: rgba(229, 164, 71, 0.58);
}

html.theme-dark .heatmap-cell[data-level="4"] {
    background: rgba(228, 95, 73, 0.76);
}

html.theme-dark .heatmap-cell[data-level="5"] {
    background: #ff7962;
}

.heatmap-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    padding: 0.5rem 0.65rem;
    border-radius: 12px;
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 14px 20px rgba(23, 18, 13, 0.22);
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.heatmap-cell:hover .heatmap-tooltip {
    opacity: 1;
}

.chart-container {
    height: 280px;
    position: relative;
}

#timelineChart {
    width: 100%;
    height: 100%;
}

.activity-feed {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.activity-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(23, 18, 13, 0.08);
    animation: riseIn 0.35s ease both;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(23, 18, 13, 0.08);
    background: rgba(255, 255, 255, 0.58);
    font-size: 1rem;
}

.activity-icon.play {
    background: rgba(197, 72, 52, 0.08);
}

.activity-icon.favorite {
    background: var(--accent-amber-soft);
}

.activity-icon.join {
    background: var(--accent-olive-soft);
}

.activity-icon.leave {
    background: rgba(23, 18, 13, 0.06);
}

.activity-content {
    min-width: 0;
}

.activity-text {
    font-size: 0.92rem;
}

.activity-text strong {
    color: var(--accent-deep);
}

.activity-time {
    margin-top: 0.2rem;
    color: var(--ink-muted);
    font-size: 0.78rem;
}

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.spinner {
    width: 38px;
    height: 38px;
    border: 2px solid rgba(23, 18, 13, 0.08);
    border-top-color: var(--accent);
    border-radius: 999px;
    animation: spin 0.85s linear infinite;
}

.empty-state {
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem 0;
}

.login-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(23, 18, 13, 0.42);
    backdrop-filter: blur(8px);
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

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

.login-modal-card {
    width: min(440px, 100%);
    padding: 1.6rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, #fffaf2 0%, #f0e1cd 100%);
    box-shadow: 0 28px 48px rgba(68, 42, 18, 0.18);
}

html.theme-dark .login-modal-card {
    background: linear-gradient(180deg, #1f2521 0%, #121614 100%);
}

.login-modal-title {
    margin: 0 0 0.65rem;
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.login-modal-text {
    margin: 0;
    color: var(--ink-muted);
}

.login-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.35rem;
}

.login-modal-close,
.login-modal-login:not(.auth-button) {
    padding: 0.8rem 1rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.login-modal-close {
    border: 2px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink);
    box-shadow: 4px 4px 0 rgba(23, 18, 13, 0.1), var(--button-cartoon-highlight);
}

.login-modal-login:not(.auth-button) {
    border: 2px solid var(--accent-deep);
    background: var(--accent);
    color: #fff7ef;
    text-decoration: none;
    box-shadow: 5px 5px 0 rgba(197, 72, 52, 0.2), var(--button-cartoon-highlight);
}

.login-modal-login.auth-button {
    text-decoration: none;
}

.voice-members-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(23, 18, 13, 0.42);
    backdrop-filter: blur(8px);
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.voice-members-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.voice-members-card {
    width: min(430px, 100%);
    max-height: min(620px, calc(100vh - 3rem));
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, #fffaf2 0%, #f0e1cd 100%);
    box-shadow: 0 28px 48px rgba(68, 42, 18, 0.18);
}

html.theme-dark .voice-members-card {
    background: linear-gradient(180deg, #1f2521 0%, #121614 100%);
}

.voice-members-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.voice-members-title {
    margin: 0.1rem 0 0;
    font-size: 1.25rem;
    line-height: 1.1;
}

.voice-members-close {
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

html.theme-dark .voice-members-close {
    background: rgba(255, 255, 255, 0.08);
}

.voice-members-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.voice-member-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 3.25rem;
    padding: 0.55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.38);
    animation: queueEnter 0.25s var(--ease-out-quart) both;
}

.voice-member-row:nth-child(2) { animation-delay: 0.03s; }
.voice-member-row:nth-child(3) { animation-delay: 0.06s; }
.voice-member-row:nth-child(4) { animation-delay: 0.09s; }
.voice-member-row:nth-child(5) { animation-delay: 0.12s; }
.voice-member-row:nth-child(6) { animation-delay: 0.15s; }
.voice-member-row:nth-child(7) { animation-delay: 0.18s; }
.voice-member-row:nth-child(8) { animation-delay: 0.21s; }
.voice-member-row:nth-child(9) { animation-delay: 0.24s; }
.voice-member-row:nth-child(10) { animation-delay: 0.27s; }

html.theme-dark .voice-member-row {
    background: rgba(255, 255, 255, 0.06);
}

.voice-member-avatar {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.88rem;
    font-weight: 800;
}

.voice-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.voice-member-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
}

.voice-members-empty {
    margin: 0;
    color: var(--ink-muted);
    font-weight: 700;
}

.voice-members-dropdown {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 60;
    display: none;
    width: min(18rem, calc(100vw - 1.5rem));
    max-height: min(24rem, calc(100vh - 8rem));
    flex-direction: column;
    padding: 0.85rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, #fffaf2 0%, #f0e1cd 100%);
    box-shadow: 0 18px 42px rgba(23, 18, 13, 0.22);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

html.theme-dark .voice-members-dropdown {
    background: linear-gradient(180deg, #1f2521 0%, #121614 100%);
}

.voice-members-dropdown.open {
    display: flex;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

.voice-members-dropdown-header {
    margin-bottom: 0.65rem;
}

.voice-members-dropdown-title {
    margin: 0.1rem 0 0;
    font-size: 1.05rem;
    line-height: 1.1;
}

.voice-members-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.sound-hover-target {
    position: relative;
}

.sound-hover-target::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 22%;
    bottom: 22%;
    width: 2px;
    border-radius: 999px;
    background: var(--accent);
    opacity: 0;
    transform: scaleY(0.35);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.sound-hover-target:hover::after {
    opacity: 1;
    transform: scaleY(1);
}

.sound-hover-card {
    position: fixed;
    z-index: 65;
    display: none;
    width: min(18rem, calc(100vw - 1.5rem));
    padding: 0.85rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, #fffaf2 0%, #f0e1cd 100%);
    box-shadow: 0 18px 42px rgba(23, 18, 13, 0.22);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

html.theme-dark .sound-hover-card {
    background: linear-gradient(180deg, #1f2521 0%, #121614 100%);
}

.sound-hover-card.open {
    display: block;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

.sound-hover-card-header {
    margin-bottom: 0.65rem;
}

.sound-hover-card-title {
    margin: 0.1rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.05rem;
    line-height: 1.1;
}

.sound-hover-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.sound-hover-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 2.35rem;
    padding: 0.5rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.38);
}

html.theme-dark .sound-hover-card-row {
    background: rgba(255, 255, 255, 0.06);
}

.sound-hover-card-label {
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sound-hover-card-value {
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
}

.section-reveal {
    animation: riseIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tables-grid > .card:nth-child(1),
.stats-grid > .stat-card:nth-child(1),
.main-grid > .card:nth-child(1) {
    animation-delay: 0.05s;
}

.tables-grid > .card:nth-child(2),
.stats-grid > .stat-card:nth-child(2),
.main-grid > .card:nth-child(2) {
    animation-delay: 0.1s;
}

.tables-grid > .card:nth-child(3),
.stats-grid > .stat-card:nth-child(3),
.main-grid > .card:nth-child(3) {
    animation-delay: 0.15s;
}

.stats-grid > .stat-card:nth-child(4),
.main-grid > .card:nth-child(4) {
    animation-delay: 0.2s;
}

.stats-grid > .stat-card,
.main-grid > .card,
.tables-grid > .card {
    animation: riseIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.page-soundboard .control-room {
    animation: riseIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.05s;
}

body.page-soundboard .tables-grid > .card {
    animation: riseIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.page-soundboard .tables-grid > .card:nth-child(1) {
    animation-delay: 0.12s;
}

body.page-soundboard .tables-grid > .card:nth-child(2) {
    animation-delay: 0.2s;
}

body.page-soundboard .tables-grid > .card:nth-child(3) {
    animation-delay: 0.28s;
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes tableLoadingWave {
    0% {
        transform: translateX(-120%) scaleX(1);
    }

    40% {
        transform: translateX(40%) scaleX(1.25);
    }

    55% {
        transform: translateX(80%) scaleX(0.85);
    }

    100% {
        transform: translateX(260%) scaleX(1);
    }
}

@keyframes dotIdle {
    0%, 100% {
        box-shadow: 0 0 0 5px var(--ink-faint);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 8px var(--ink-faint);
        opacity: 0.82;
    }
}

@keyframes dotPlaying {
    0%, 100% {
        box-shadow: 0 0 0 5px rgba(38, 112, 77, 0.16);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(38, 112, 77, 0.08), 0 0 0 5px rgba(38, 112, 77, 0.2);
    }
}

@keyframes dotOffline {
    0%, 100% {
        box-shadow: 0 0 0 5px rgba(164, 43, 35, 0.15);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 5px rgba(164, 43, 35, 0.04);
        opacity: 0.42;
    }
}

@keyframes controlRoomAir {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.04);
    }
}

@keyframes cardEntrance {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes bodyGlow {
    0% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}

@keyframes eqBar {
    0%, 100% { transform: scaleY(0.45); opacity: 0.4; }
    50% { transform: scaleY(1); opacity: 1; }
}

@keyframes nowPlayingSpark {
    0% { text-shadow: 0 0 0 transparent; }
    35% { text-shadow: 0 0 10px var(--accent-soft), 0 0 3px var(--accent-soft); }
    100% { text-shadow: 0 0 0 transparent; }
}

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

@keyframes sentRing {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.35); opacity: 0; }
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-3px); }
    30% { transform: translateX(3px); }
    50% { transform: translateX(-2px); }
    65% { transform: translateX(2px); }
    80% { transform: translateX(-1px); }
}

@keyframes navGlint {
    0%, 100% { background-position: 200% 0; }
    25%, 75% { background-position: 200% 0; }
    50% { background-position: -100% 0; }
}

@keyframes ambientScan {
    0% { transform: translateY(0); }
    100% { transform: translateY(50%); }
}

@keyframes dialogEnter {
    from {
        opacity: 0;
        transform: translate3d(0, 6px, 0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes backdropEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes buttonFlash {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes doodleWobble {
    0% { transform: translate(-2px, -2px) rotate(-2deg) scale(1.03); }
    25% { transform: translate(-3px, -1px) rotate(-3deg) scale(1.04); }
    50% { transform: translate(-1px, -3px) rotate(-1deg) scale(1.03); }
    75% { transform: translate(-2px, -2px) rotate(-2.5deg) scale(1.035); }
    100% { transform: translate(-2px, -2px) rotate(-2deg) scale(1.03); }
}

@keyframes doodlePress {
    0% { transform: translate(2px, 2px) scale(0.92); }
    50% { transform: translate(3px, 1px) scale(0.9) rotate(1deg); }
    100% { transform: translate(2px, 2px) scale(0.92); }
}

@keyframes doodleEntrance {
    0% { 
        opacity: 0;
        transform: translateY(8px) rotate(-3deg) scale(0.9);
    }
    60% {
        opacity: 1;
        transform: translateY(-2px) rotate(1deg) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
    }
}

@keyframes queueEnter {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@supports not (color: oklch(50% 0.1 50)) {
    :root {
        --button-cartoon-shadow: 5px 6px 0 rgba(23, 18, 13, 0.22);
        --button-cartoon-shadow-hover: 8px 9px 0 rgba(23, 18, 13, 0.26);
        --button-cartoon-shadow-active: 2px 3px 0 rgba(23, 18, 13, 0.24);
        --button-cartoon-highlight: inset 0 3px 0 rgba(255, 252, 247, 0.5);
    }

    html.theme-dark {
        --button-cartoon-shadow: 5px 6px 0 rgba(5, 7, 6, 0.48);
        --button-cartoon-shadow-hover: 8px 9px 0 rgba(5, 7, 6, 0.52);
        --button-cartoon-shadow-active: 2px 3px 0 rgba(5, 7, 6, 0.52);
        --button-cartoon-highlight: inset 0 3px 0 rgba(244, 240, 232, 0.16);
    }

    .theme-toggle,
    .play-button,
    .play-btn,
    .web-control-button,
    .web-upload-control-button,
    .control-room-actions-trigger,
    .web-upload-file-button,
    .web-upload-submit {
        border: 3px solid rgb(23, 18, 13);
        border-color: rgb(23, 18, 13);
        background: linear-gradient(180deg, rgb(45, 38, 30), rgb(23, 18, 13));
        color: rgb(255, 247, 239);
        box-shadow:
            var(--button-cartoon-shadow),
            var(--button-cartoon-highlight);
    }

    .auth-button {
        border: 3px solid rgb(72, 82, 199);
        border-color: rgb(72, 82, 199);
        background: linear-gradient(180deg, rgb(121, 132, 255), rgb(88, 101, 242) 58%, rgb(72, 82, 199));
        color: rgb(249, 247, 255);
        box-shadow:
            6px 7px 0 rgba(72, 82, 199, 0.28),
            inset 0 3px 0 rgba(249, 247, 255, 0.28);
    }

    .pagination button,
    .sound-options-button,
    .web-upload-secondary,
    .web-tts-enhance-button {
        border: 2px solid rgba(23, 18, 13, 0.34);
        border-color: rgba(23, 18, 13, 0.34);
        background: linear-gradient(180deg, rgba(255, 252, 247, 0.88), rgba(241, 225, 204, 0.72));
        color: rgb(23, 18, 13);
        box-shadow:
            4px 5px 0 rgba(23, 18, 13, 0.14),
            var(--button-cartoon-highlight);
    }

    .play-button.login-required,
    .play-btn.login-required,
    .web-control-button.login-required,
    .web-upload-control-button.login-required,
    .web-upload-submit.login-required,
    .play-button.error,
    .play-btn.error,
    .web-control-button.error {
        border-color: rgb(164, 43, 35);
        background: linear-gradient(180deg, rgb(218, 88, 71), rgb(164, 43, 35));
        color: rgb(255, 247, 239);
        box-shadow:
            4px 5px 0 rgba(164, 43, 35, 0.22),
            var(--button-cartoon-highlight);
    }

    .play-button.sent,
    .play-btn.sent,
    .web-control-button.sent {
        border-color: rgb(38, 112, 77);
        background: linear-gradient(180deg, rgb(72, 160, 110), rgb(38, 112, 77));
        box-shadow:
            4px 5px 0 rgba(38, 112, 77, 0.22),
            var(--button-cartoon-highlight);
    }

    .play-button.warn,
    .play-btn.warn {
        border-color: rgb(204, 139, 50);
        background: linear-gradient(180deg, rgb(239, 190, 92), rgb(204, 139, 50));
        color: rgb(23, 18, 13);
        box-shadow:
            4px 5px 0 rgba(204, 139, 50, 0.22),
            var(--button-cartoon-highlight);
    }

    html.theme-dark .theme-toggle,
    html.theme-dark .play-button,
    html.theme-dark .play-btn,
    html.theme-dark .web-control-button,
    html.theme-dark .web-upload-control-button,
    html.theme-dark .control-room-actions-trigger,
    html.theme-dark .web-upload-file-button,
    html.theme-dark .web-upload-submit,
    html.theme-dark .pagination button:not(:disabled) {
        border: 3px solid rgba(244, 240, 232, 0.5);
        border-color: rgba(244, 240, 232, 0.5);
        background: linear-gradient(180deg, rgb(31, 38, 34), rgb(18, 22, 20));
        color: rgb(244, 240, 232);
        box-shadow:
            var(--button-cartoon-shadow),
            var(--button-cartoon-highlight);
    }

    html.theme-dark .play-button.login-required,
    html.theme-dark .play-btn.login-required,
    html.theme-dark .web-control-button.login-required,
    html.theme-dark .web-upload-control-button.login-required,
    html.theme-dark .web-upload-submit.login-required,
    html.theme-dark .play-button.error,
    html.theme-dark .play-btn.error,
    html.theme-dark .web-control-button.error {
        border-color: rgb(228, 95, 73);
        background: linear-gradient(180deg, rgb(237, 121, 97), rgb(190, 59, 43));
    }
}

@media (max-width: 1200px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .tables-grid,
    .stats-grid,
    .main-grid {
        grid-template-columns: 1fr;
    }

    .control-room {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .page-heading {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .control-room-metrics {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.55rem 0.7rem;
    }

    .card-full {
        grid-column: auto;
    }

    .table-container {
        max-height: none;
    }
}

@media (min-width: 1201px) {
    :root {
        --table-header-height: 44px;
        --table-row-height: 52px;
    }

    body.page-soundboard {
        min-height: 100dvh;
        height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body.page-soundboard .page-shell {
        width: min(1400px, calc(100% - 2rem));
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    body.page-soundboard .tables-grid {
        flex: 1 1 auto;
        min-height: 0;
        align-items: start;
        grid-auto-rows: auto;
        overflow: hidden;
    }

    body.page-soundboard .control-room {
        flex: 0 0 auto;
    }

    body.page-soundboard .card {
        height: auto;
        min-height: 0;
        max-height: calc(100dvh - 7rem);
    }

    body.page-soundboard .table-container {
        flex: 0 1 auto;
        min-height: 0;
        height: var(--soundboard-table-height);
    }

    body.page-soundboard th {
        padding-top: 0.52rem;
        padding-bottom: 0.52rem;
    }

    body.page-soundboard td {
        padding-top: 0.34rem;
        padding-bottom: 0.34rem;
    }

    body.page-soundboard .play-button {
        min-width: 2.45rem;
        min-height: 2.12rem;
        padding: 0.32rem 0.62rem;
        border-radius: 12px;
    }

    body.page-soundboard .sound-options-button {
        width: 2.12rem;
        height: 2.12rem;
        border-radius: 9px;
    }

    body.page-soundboard #filtersActions {
        min-height: 2.62rem;
    }

    body.page-soundboard .library-controls {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
    }

    body.page-soundboard .library-controls,
    body.page-soundboard .actions-controls {
        margin-bottom: 0.45rem;
    }

    body.page-soundboard .library-controls .search-input {
        margin-bottom: 0;
    }
}

@media (max-width: 820px) {
    .card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .library-controls {
        grid-template-columns: 1fr;
    }

    .actions-controls {
        gap: 0.55rem;
    }

    .nav-container {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand actions"
            "links links";
        align-items: center;
        gap: 0.72rem;
    }

    .nav-brand {
        grid-area: brand;
    }

    .nav-links {
        grid-area: links;
        grid-column: 1 / -1;
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-end;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0.35rem 0.1rem 0.1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

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

    .nav-actions {
        grid-area: actions;
        justify-self: end;
        gap: 0.4rem;
    }

    .nav-link,
    .auth-button,
    .auth-user-link,
    .guild-selector-shell {
        flex: 0 0 auto;
    }

    .web-upload-item {
        grid-template-columns: 1fr;
    }

    .page-shell {
        width: min(100%, calc(100% - 1.25rem));
        padding-top: 1.1rem;
    }

    .analytics-toolbar-standalone {
        justify-content: flex-start;
    }

    .page-heading {
        margin-bottom: 0.85rem;
    }

    .page-heading .page-title {
        max-width: 100%;
        font-size: clamp(1.9rem, 9vw, 2.8rem);
    }

    .hero-copy,
    .hero-panel,
    .card,
    .stat-card,
    .login-modal-card {
        border-radius: 24px;
    }

    .hero-copy,
    .hero-panel,
    .card,
    .stat-card {
        padding: 1.15rem;
    }

    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .leaderboard-item {
        grid-template-columns: auto 1fr auto;
    }

    .leaderboard-item .play-btn {
        grid-column: 2 / -1;
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .nav-brand-label,
    .nav-brand-subtitle,
    .nav-link,
    .auth-button,
    .auth-user-link,
    .guild-selector-shell,
    .hero-tag,
    .time-btn,
    .pagination button,
    .login-modal-close,
    .login-modal-login {
        letter-spacing: 0.06em;
    }

    .page-title {
        max-width: 100%;
        font-size: clamp(2.45rem, 12vw, 4rem);
    }

    .nav {
        position: relative;
        top: auto;
        padding: 0.62rem 0;
    }

    .nav-container,
    .page-shell {
        width: min(100%, calc(100% - 1rem));
    }

    .nav-brand {
        min-width: 0;
        gap: 0.62rem;
    }

    .nav-brand-mark {
        width: 2.9rem;
        height: 2.9rem;
        flex: 0 0 2.9rem;
    }

    .nav-brand-mark img {
        width: 2rem;
        height: 2rem;
    }

    .nav-brand-copy {
        min-width: 0;
    }

    .nav-brand-label,
    .nav-brand-subtitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-links {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.35rem;
        justify-content: flex-end;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0;
    }

    .nav-link {
        gap: 0.3rem;
        justify-content: center;
        flex: 1 1 0;
        min-width: 5.65rem;
        padding: 0.64rem 0.42rem;
        font-size: 0.68rem;
    }

    .nav-link .nav-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        line-height: 1;
    }

    .nav-link .nav-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .nav-link[href="/"],
    .nav-link[href="/analytics"],
    .nav-link[href="/speech-training"] {
        flex: 0 0 2.65rem;
        min-width: 2.65rem;
        width: 2.65rem;
        padding-inline: 0;
    }

    .guild-selector-shell {
        max-width: min(10rem, calc(100vw - 10.4rem));
        min-width: 0;
        padding: 0.58rem 0.62rem;
    }

    .guild-selector {
        max-width: 100%;
        min-width: 0;
        text-overflow: ellipsis;
    }

    .auth-button {
        justify-content: center;
        min-width: 0;
        padding: 0.62rem 0.55rem;
        gap: 0.45rem;
        box-shadow: 3px 3px 0 rgba(88, 101, 242, 0.18);
    }

    .auth-button-icon {
        width: 0.95rem;
        height: 0.95rem;
    }

    .auth-button-label {
        font-size: 0.72rem;
    }

    .auth-button-label-extended {
        display: none;
    }

    .auth-user-link {
        flex: 0 0 2.45rem;
        width: 2.45rem;
        height: 2.45rem;
        justify-content: center;
        gap: 0;
        min-width: 2.45rem;
        padding: 0.18rem;
        box-shadow: 3px 3px 0 rgba(68, 42, 18, 0.1);
    }

    .auth-avatar {
        width: 34px;
        height: 34px;
    }

    .auth-user-link::after {
        content: "🚪";
        position: absolute;
        right: 0.18rem;
        bottom: 0.12rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 0.95rem;
        height: 0.95rem;
        border-radius: 999px;
        background: rgba(255, 252, 247, 0.92);
        border: 1px solid rgba(23, 18, 13, 0.1);
        font-size: 0.58rem;
        line-height: 1;
        box-shadow: 0 1px 3px rgba(23, 18, 13, 0.18);
    }

    .auth-user-meta {
        display: none;
    }

    .theme-toggle {
        flex: 0 0 2.45rem;
        width: 2.45rem;
        height: 2.45rem;
        font-size: 0.95rem;
        box-shadow: 3px 3px 0 rgba(23, 18, 13, 0.12);
    }

    .control-room {
        position: sticky;
        top: calc(0.5rem + env(safe-area-inset-top, 0px));
        z-index: 35;
        grid-template-columns: minmax(0, 1fr) auto 2rem;
        grid-template-areas:
            "status status actions"
            "voice system actions";
        align-items: center;
        column-gap: 0.42rem;
        row-gap: 0.38rem;
        padding: 0.56rem 0.68rem;
        border-radius: 20px;
        background:
            radial-gradient(circle at 0 0, var(--accent-soft), transparent 11rem),
            linear-gradient(135deg, var(--paper-soft), var(--paper-muted));
        box-shadow: 0 8px 24px oklch(19.5% 0.024 58 / 0.18);
    }

    html.theme-dark .control-room {
        background:
            radial-gradient(circle at 0 0, var(--accent-soft), transparent 11rem),
            linear-gradient(135deg, var(--paper-soft), var(--paper-muted));
    }

    .control-room-status {
        grid-area: status;
        align-items: center;
        flex-direction: row;
        min-width: 0;
    }

    .control-room-status-main {
        gap: 0.56rem;
    }

    .control-room-metrics {
        display: contents;
    }

    .control-room-metric {
        gap: 0.26rem;
        min-height: 0;
        padding: 0;
    }

    .control-room-metric--voice {
        grid-area: voice;
    }

    .control-room-metric--system {
        grid-area: system;
    }

    .control-room-action-dock {
        grid-area: actions;
        justify-self: end;
        align-self: center;
    }

    .control-room-action-dock .control-room-actions-trigger {
        width: 2rem;
        height: 2rem;
        font-size: 0.9rem;
    }

    .control-room-action-menu {
        position: absolute;
        right: auto;
        left: 0;
        top: auto;
        bottom: calc(100% + 0.5rem);
        transform: translateY(0) scale(0.92);
        transform-origin: bottom left;
        gap: 0.32rem;
        padding: 0.32rem 0.36rem;
        padding-inline: 0.36rem;
        border-width: 1px;
        max-width: none;
        overflow: visible;
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            visibility 0s 0.18s;
    }

    .control-room-action-dock:hover .control-room-action-menu,
    .control-room-action-dock:focus-within .control-room-action-menu,
    .control-room-action-dock.open .control-room-action-menu {
        transform: translateY(0) scale(1);
        max-width: none;
        padding-inline: 0.36rem;
        border-width: 1px;
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            visibility 0s 0s;
    }

    .control-room-action-menu .control-room-metric-button {
        width: 1.9rem;
        height: 1.9rem;
        font-size: 0.85rem;
    }

    .control-room-metric--system {
        grid-area: system;
        justify-self: start;
        min-width: 0;
        max-width: 100%;
        overflow: visible;
    }

    .control-room-system-button strong {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.78rem;
        line-height: 1.1;
    }

    /* On mobile, use fixed positioning so the dropdown stays within the viewport
       and does not create horizontal page overflow.  Top and max-height are set
       by a JS custom properties helper. */
    .system-monitor-dropdown.open {
        position: fixed;
        top: var(--system-monitor-dropdown-top, 5rem);
        left: max(0.75rem, env(safe-area-inset-left, 0px));
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        width: auto;
        max-width: none;
        z-index: 1300;
    }

    .system-monitor-total-row {
        gap: 0.5rem;
        font-size: 0.78rem;
    }

    .system-monitor-total-label {
        font-size: 0.66rem;
    }

    .system-monitor-total-value {
        overflow-wrap: anywhere;
    }

    #systemMonitorTotalDisk {
        overflow-wrap: normal;
    }

    .control-room-metric + .control-room-metric {
        padding-left: 0;
    }

    .control-room-metric + .control-room-metric::before {
        display: none;
    }

    .control-room-metric:not(.control-room-metric--action) .control-room-metric-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .control-room-metric strong {
        max-width: 100%;
        font-size: 0.82rem;
        line-height: 1;
    }

    .control-room-title {
        margin-top: 0.04rem;
        font-size: 0.9rem;
    }

    .control-room-subtitle {
        display: none;
    }

    .control-room .card-kicker {
        display: none;
    }

    .control-room-equalizer {
        display: none;
    }

    .control-room-dot {
        width: 0.7rem;
        height: 0.7rem;
        align-self: center;
        box-shadow: 0 0 0 4px rgba(101, 88, 75, 0.12);
    }

    .web-control-button,
    .web-upload-control-button,
    .control-room-metric-button {
        width: 2rem;
        height: 2rem;
        font-size: 0.9rem;
    }

    .hero-panel-title,
    .login-modal-title {
        font-size: 1.75rem;
    }

    .filters-grid.cols-2,
    .filters-grid.cols-3 {
        grid-template-columns: 1fr;
    }

    th,
    td {
        padding: 0.42rem 0.16rem;
        font-size: 0.8rem;
    }

    .action-badge {
        max-width: 54px;
        padding: 0.22rem 0.24rem;
        font-size: 0.44rem;
    }

    #actionsTable th:first-child,
    #actionsTable td:first-child {
        width: 56px;
        max-width: 56px;
    }

    #actionsTable th:nth-child(2),
    #actionsTable td:nth-child(2) {
        width: calc(100% - 164px);
    }

    #actionsTable th:nth-child(3),
    #actionsTable td:nth-child(3) {
        width: 66px;
        max-width: 66px;
    }

    #actionsTable th:nth-child(4),
    #actionsTable td:nth-child(4) {
        width: 52px;
        max-width: 52px;
    }

    #favoritesTable th:first-child,
    #favoritesTable td:first-child {
        width: calc(100% - 92px);
    }

    #favoritesTable .sound-options-column,
    #allSoundsTable .sound-options-column {
        display: table-cell;
        text-align: center;
        overflow: visible;
    }

    #favoritesTable th:nth-child(2),
    #favoritesTable td:nth-child(2),
    #favoritesTable .sound-options-column {
        width: 46px;
    }

    #allSoundsTable th:first-child,
    #allSoundsTable td:first-child {
        width: calc(100% - 128px);
    }

    #allSoundsTable th:nth-child(2),
    #allSoundsTable td:nth-child(2) {
        width: 48px;
    }

    #allSoundsTable th:nth-child(3),
    #allSoundsTable td:nth-child(3),
    #allSoundsTable .sound-options-column {
        width: 40px;
    }

    #favoritesTable th:nth-child(2),
    #favoritesTable th.sound-options-column,
    #allSoundsTable th:nth-child(3),
    #allSoundsTable th.sound-options-column {
        font-size: 0;
        letter-spacing: 0;
        text-align: center;
    }

    #favoritesTable th:nth-child(2)::after,
    #allSoundsTable th:nth-child(3)::after {
        content: "▶";
        font-size: 0.76rem;
    }

    #favoritesTable th.sound-options-column::after,
    #allSoundsTable th.sound-options-column::after {
        content: "⋯";
        font-size: 1rem;
        line-height: 1;
    }

    .sound-options-button {
        width: 2.05rem;
        height: 2.05rem;
    }

    .heatmap {
        grid-template-columns: 28px repeat(7, minmax(0, 1fr));
        gap: 2px;
    }

    .heatmap-header {
        font-size: 0.5rem;
    }

    .heatmap-row-label {
        padding-right: 0.2rem;
        font-size: 0.52rem;
    }

    .heatmap-cell {
        min-height: 28px;
        border-radius: 3px;
    }

    .login-modal-actions {
        flex-direction: column;
    }

    .login-modal-close,
    .login-modal-login {
        width: 100%;
    }
}

/* Page change animation classes for tables */
tbody.page-swap-exit {
    opacity: 0 !important;
    transform: translateY(-4px) !important;
    transition: opacity 0.12s var(--ease-out-quint), transform 0.12s var(--ease-out-quint) !important;
}

tbody.page-swap-enter {
    opacity: 0 !important;
    transform: translateY(4px) !important;
    transition: none !important;
}

tbody.page-swap-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.18s var(--ease-out-quint), transform 0.18s var(--ease-out-quint) !important;
}

/* Remove top accent bars on analytics page cards and stat cards to prevent protruding green/accent lines, especially on stacked mobile layouts */
.page-analytics .card::before,
.page-analytics .stat-card::before {
    display: none;
}

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

    .soundboard-ambient::before,
    .soundboard-ambient::after {
        animation: none !important;
        background: none !important;
    }

    .nav-brand-mark,
    .nav-brand-mark img,
    .nav-brand:hover .nav-brand-mark,
    .nav-brand:hover .nav-brand-mark img {
        transform: none !important;
    }

    .nav-link.active::after {
        animation: none !important;
        background: none !important;
    }

    .control-room-dot {
        animation: none !important;
    }

    .control-room-equalizer span {
        animation: none !important;
        opacity: 0.4;
    }

    .control-room-progress-fill::after {
        animation: none !important;
        background: none !important;
    }

    .control-room-dot.playing {
        animation: none !important;
    }

    .voice-member-row,
    .web-upload-queue-item {
        animation: none !important;
    }

    .web-upload-dialog,
    .web-tts-dialog,
    .sound-rename-dialog,
    .sound-list-dialog,
    .sound-similar-dialog,
    .sound-event-dialog,
    .web-upload-dialog::backdrop,
    .web-tts-dialog::backdrop {
        animation: none !important;
        backdrop-filter: none !important;
    }

    .play-button::before,
    .play-btn::before,
    .web-control-button::before,
    .web-upload-control-button::before,
    .sound-options-button::before,
    .pagination button::before {
        animation: none !important;
        opacity: 0 !important;
    }

    .tables-grid .card {
        animation: none !important;
        opacity: 1 !important;
    }

    body.page-dataset .dataset-sidebar,
    body.page-dataset .dataset-main,
    body.page-dataset .dataset-action-toolbar,
    body.page-dataset .dataset-user-item,
    body.page-dataset .dataset-clip,
    body.page-dataset .dataset-empty {
        animation: none !important;
        opacity: 1 !important;
    }

    .table-container.is-loading::before,
    .table-container.is-loading::after {
        animation: none !important;
        opacity: 0 !important;
    }

    .sound-hover-card,
    .voice-members-dropdown,
    .system-monitor-dropdown,
    .login-modal {
        transition: none !important;
    }

    .control-room-action-menu {
        transition: none !important;
    }

    .system-monitor-dropdown {
        right: auto;
        left: 0;
    }
}

/* ── Speech Training / Dataset Page ────────────────────────────────── */

.error-page {
    max-width: 28rem;
    margin: 6rem auto;
    padding: 2rem;
    text-align: center;
}

.error-page h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.error-page p {
    color: var(--ink-muted);
    margin-bottom: 1.6rem;
}

.dataset-shell {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: 1.2rem;
    padding-top: 1.6rem;
    padding-bottom: 3rem;
    min-height: calc(100vh - 5rem);
}

@media (max-width: 768px) {
    .dataset-shell {
        grid-template-columns: 1fr;
    }

    .dataset-sidebar {
        max-height: 12rem;
        overflow-y: auto;
    }
}

.dataset-sidebar {
    background: var(--paper-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* ── Dataset page entrance animations ──────────────────────────────── */

body.page-dataset .dataset-sidebar {
    animation: riseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.05s;
}

body.page-dataset .dataset-main {
    animation: riseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.1s;
}

body.page-dataset .dataset-action-toolbar {
    animation: riseIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.15s;
}

body.page-dataset .dataset-user-list:not(.dataset-no-reveal) .dataset-user-item {
    animation: riseIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(0.03s * (var(--reveal-index, 0) + 1));
}

body.page-dataset .dataset-clips:not(.dataset-no-reveal) .dataset-clip {
    animation: riseIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(0.025s * var(--reveal-index, 0));
}

body.page-dataset .dataset-clips:not(.dataset-no-reveal) .dataset-empty {
    animation: riseIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.12s;
}

/* ── Scribbly Cartoon Redesign Layer ─────────────────────────────── */

:root {
    --paper: oklch(98.8% 0.006 95);
    --paper-strong: oklch(96.4% 0.012 92);
    --paper-soft: oklch(99.4% 0.004 95 / 0.98);
    --paper-muted: oklch(97.2% 0.01 92 / 0.92);
    --ink: oklch(20% 0.045 255);
    --ink-soft: oklch(28% 0.04 255 / 0.84);
    --ink-muted: oklch(41% 0.045 248);
    --ink-faint: oklch(20% 0.045 255 / 0.13);
    --accent: oklch(61% 0.2 27);
    --accent-deep: oklch(45% 0.17 27);
    --accent-soft: oklch(65% 0.19 27 / 0.15);
    --accent-olive: oklch(58% 0.14 150);
    --accent-olive-soft: oklch(58% 0.14 150 / 0.16);
    --accent-amber: oklch(82% 0.13 82);
    --accent-amber-soft: oklch(82% 0.13 82 / 0.16);
    --discord: oklch(58% 0.22 280);
    --discord-deep: oklch(48% 0.2 280);
    --success: oklch(58% 0.15 150);
    --error: oklch(52% 0.2 25);
    --border: oklch(20% 0.045 255 / 0.22);
    --border-strong: oklch(20% 0.045 255 / 0.48);
    --shadow: 0.42rem 0.42rem 0 oklch(20% 0.045 255 / 0.18);
    --shadow-sm: 0.24rem 0.24rem 0 oklch(20% 0.045 255 / 0.15);
    --scribble-blue: oklch(60% 0.17 244);
    --scribble-pink: oklch(69% 0.17 355);
    --scribble-lime: oklch(78% 0.16 142);
    --scribble-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='22' viewBox='0 0 140 22'%3E%3Cpath d='M2 13 C18 4 28 19 42 10 S72 4 85 12 111 19 138 8' fill='none' stroke='%23273564' stroke-opacity='.2' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --scribble-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23273564' stroke-opacity='.085' stroke-linecap='round'%3E%3Cpath d='M14 31c21-5 35-4 58 0M8 98c34 6 56 4 82-2M105 48c18 7 38 8 58 2M115 135c15-5 30-4 48 3'/%3E%3Cpath d='M34 151c-9 3-17 5-25 1M148 18c7 7 12 9 20 7M77 119c5-3 10-3 15 0'/%3E%3C/g%3E%3C/svg%3E");
    --radius-xl: 18px 24px 20px 28px;
    --radius-lg: 16px 20px 18px 14px;
    --radius-md: 12px 15px 13px 17px;
    --radius-sm: 9px 12px 10px 14px;
}

html.theme-dark {
    --paper: oklch(18% 0.04 255);
    --paper-strong: oklch(14.5% 0.038 255);
    --paper-soft: oklch(22% 0.04 255 / 0.97);
    --paper-muted: oklch(25% 0.045 255 / 0.9);
    --ink: oklch(94% 0.025 92);
    --ink-soft: oklch(88% 0.025 92 / 0.84);
    --ink-muted: oklch(76% 0.04 92);
    --ink-faint: oklch(94% 0.025 92 / 0.16);
    --border: oklch(94% 0.025 92 / 0.2);
    --border-strong: oklch(94% 0.025 92 / 0.36);
    --shadow: 0.42rem 0.42rem 0 oklch(5% 0.02 255 / 0.45);
    --shadow-sm: 0.24rem 0.24rem 0 oklch(5% 0.02 255 / 0.38);
    --scribble-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='22' viewBox='0 0 140 22'%3E%3Cpath d='M2 13 C18 4 28 19 42 10 S72 4 85 12 111 19 138 8' fill='none' stroke='%23f3ead4' stroke-opacity='.24' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --scribble-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23f3ead4' stroke-opacity='.09' stroke-linecap='round'%3E%3Cpath d='M14 31c21-5 35-4 58 0M8 98c34 6 56 4 82-2M105 48c18 7 38 8 58 2M115 135c15-5 30-4 48 3'/%3E%3Cpath d='M34 151c-9 3-17 5-25 1M148 18c7 7 12 9 20 7M77 119c5-3 10-3 15 0'/%3E%3C/g%3E%3C/svg%3E");
}

html,
body {
    background-color: var(--paper);
}

body {
    background:
        var(--scribble-paper),
        radial-gradient(circle at 7% 8%, oklch(60% 0.17 244 / 0.08), transparent 18rem),
        radial-gradient(circle at 94% 10%, oklch(69% 0.17 355 / 0.1), transparent 18rem),
        linear-gradient(180deg, var(--paper) 0%, var(--paper-strong) 100%);
    font-family: "Atkinson Hyperlegible", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0;
}

html.theme-dark body {
    background:
        var(--scribble-paper),
        radial-gradient(circle at 7% 8%, oklch(78% 0.16 82 / 0.13), transparent 18rem),
        radial-gradient(circle at 94% 10%, oklch(69% 0.17 355 / 0.16), transparent 18rem),
        linear-gradient(180deg, var(--paper) 0%, var(--paper-strong) 100%);
}

body::before {
    background-image:
        linear-gradient(var(--ink-faint) 2px, transparent 2px),
        linear-gradient(90deg, var(--ink-faint) 2px, transparent 2px);
    background-size: 34px 34px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 72%);
}

body::after {
    height: 28vh;
    background:
        var(--scribble-line) 4% 82% / 170px 28px repeat-x,
        linear-gradient(180deg, transparent, oklch(60% 0.17 244 / 0.045));
}

.soundboard-ambient::before,
.soundboard-ambient::after {
    background:
        radial-gradient(circle at 18% 22%, oklch(60% 0.17 244 / 0.12) 0 0.32rem, transparent 0.38rem),
        radial-gradient(circle at 82% 28%, oklch(78% 0.16 82 / 0.15) 0 0.26rem, transparent 0.34rem),
        radial-gradient(circle at 55% 82%, oklch(69% 0.17 355 / 0.14) 0 0.28rem, transparent 0.36rem);
    background-size: 11rem 8rem, 14rem 10rem, 13rem 9rem;
}

.nav,
.control-room,
.card,
.stat-card,
.dataset-sidebar,
.dataset-main,
.dataset-action-toolbar,
.dataset-clip-card,
.web-upload-dialog,
.web-tts-dialog,
.sound-rename-dialog,
.sound-list-dialog,
.sound-similar-dialog,
.sound-event-dialog,
.login-modal-card,
.error-page {
    border-width: 3px;
    border-style: solid;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.nav {
    background:
        var(--scribble-line) 0 100% / 150px 24px repeat-x,
        linear-gradient(180deg, var(--paper-soft), var(--paper-muted));
    border-width: 0 0 3px;
}

.nav-brand-mark,
.nav-link,
.auth-button,
.auth-user-link,
.guild-selector-shell,
.theme-toggle,
.control-room-actions-trigger,
.web-control-button,
.web-upload-control-button,
.play-button,
.play-btn,
.sound-options-button,
.pagination button,
.time-btn,
.dataset-action-btn,
.dataset-sort-select,
.dataset-search,
.dataset-label-filter-select {
    border-width: 2px;
    border-style: solid;
    border-color: var(--border-strong);
    border-radius: 11px 15px 12px 17px;
    box-shadow: 0.18rem 0.18rem 0 var(--ink-faint);
}

.nav-brand-label,
.page-title,
.card-title,
.stat-value,
.dataset-sidebar-title,
.dataset-main-title,
.error-page h1,
.login-modal-title,
.hero-panel-title {
    font-family: "DynaPuff", "Comic Sans MS", "Atkinson Hyperlegible", system-ui, sans-serif;
    letter-spacing: 0;
}

.nav-brand-label {
    color: var(--ink);
    font-size: 1.04rem;
    text-transform: none;
}

.nav-brand-subtitle,
.card-kicker,
.eyebrow,
.stat-label,
.pagination-info,
.filter-label,
.table-caption {
    font-weight: 900;
    letter-spacing: 0.08em;
}

.nav-brand-mark {
    background:
        radial-gradient(circle at 35% 35%, var(--accent-amber-soft), transparent 42%),
        var(--paper-soft);
    color: var(--ink);
    transform: rotate(-3deg);
}

.nav-brand:hover .nav-brand-mark {
    transform: translateY(-1px) rotate(4deg) scale(1.04);
}

.nav-link,
.auth-button,
.guild-selector-shell,
.theme-toggle {
    background: var(--paper-soft);
    color: var(--ink);
}

.nav-link.active,
.auth-button {
    background:
        radial-gradient(circle at 28% 22%, oklch(98% 0.024 95 / 0.22), transparent 36%),
        var(--discord);
    color: oklch(98% 0.018 95);
}

.nav-link.active {
    background: var(--accent);
    border-color: var(--ink);
    box-shadow: 0.22rem 0.22rem 0 var(--ink);
}

.nav-link.active::after {
    background: var(--scribble-line) center / 110px 20px repeat-x;
    opacity: 0.32;
    animation: none;
}

.control-room,
.card,
.stat-card,
.dataset-sidebar,
.dataset-main,
.dataset-action-toolbar,
.dataset-clip-card,
.error-page {
    background:
        var(--scribble-paper),
        linear-gradient(180deg, var(--paper-soft), var(--paper-muted));
}

.control-room {
    border-radius: 18px 26px 20px 16px;
    transform: rotate(-0.15deg);
    z-index: 90;
}

.control-room::before,
.card::after,
.stat-card::after,
.dataset-sidebar::after,
.dataset-main::after {
    content: "";
    position: absolute;
    inset: 0.42rem;
    border: 2px dashed oklch(20% 0.045 255 / 0.16);
    border-radius: inherit;
    pointer-events: none;
}

html.theme-dark .control-room::before,
html.theme-dark .card::after,
html.theme-dark .stat-card::after,
html.theme-dark .dataset-sidebar::after,
html.theme-dark .dataset-main::after {
    border-color: oklch(94% 0.025 92 / 0.16);
}

.card {
    border-radius: 20px 15px 24px 17px;
}

.card:nth-child(2n),
.main-grid-column:nth-child(2) .card:nth-child(odd),
.stats-grid .stat-card:nth-child(2n) {
    transform: rotate(0.18deg);
}

.card:nth-child(2n + 1),
.main-grid-column:nth-child(1) .card:nth-child(even),
.stats-grid .stat-card:nth-child(2n + 1) {
    transform: rotate(-0.14deg);
}

.card::before,
.stat-card::before {
    height: 9px;
    background:
        var(--scribble-line) center / 140px 22px repeat-x,
        var(--card-accent, var(--accent));
}

.page-analytics .card::before,
.page-analytics .stat-card::before {
    display: block;
}

.card-title {
    font-size: 1.16rem;
    line-height: 1.05;
}

.page-heading .page-title,
.page-title {
    font-family: "DynaPuff", "Comic Sans MS", "Atkinson Hyperlegible", system-ui, sans-serif;
    max-width: 16ch;
    font-size: clamp(2rem, 4vw, 3.75rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

.page-heading .page-intro,
.card-copy,
.page-intro {
    color: var(--ink-soft);
}

.search-input,
.filter-select,
.pagination-page-input,
.dataset-search,
.dataset-sort-select,
.dataset-label-filter-select,
.sound-row-context-menu,
.voice-members-dropdown,
.system-monitor-dropdown {
    background:
        var(--scribble-paper),
        oklch(98% 0.024 95 / 0.94);
    border: 2px solid var(--border-strong);
    border-radius: 11px 15px 12px 17px;
    color: var(--ink);
    box-shadow: inset 0 0 0 2px oklch(98% 0.024 95 / 0.28);
}

html.theme-dark .search-input,
html.theme-dark .filter-select,
html.theme-dark .pagination-page-input,
html.theme-dark .dataset-search,
html.theme-dark .dataset-sort-select,
html.theme-dark .dataset-label-filter-select,
html.theme-dark .sound-row-context-menu,
html.theme-dark .voice-members-dropdown,
html.theme-dark .system-monitor-dropdown {
    background:
        var(--scribble-paper),
        oklch(24% 0.04 255 / 0.96);
    color: var(--ink);
}

.system-monitor-dropdown {
    background:
        var(--scribble-paper),
        oklch(98% 0.024 95);
    background-color: #fffaf2;
}

html.theme-dark .system-monitor-dropdown {
    background:
        var(--scribble-paper),
        oklch(24% 0.04 255);
    background-color: #1f2521;
}

.select-shell::before {
    border-color: var(--border-strong);
    background: var(--accent-amber-soft);
    border-radius: 9px 12px 8px 13px;
}

.select-shell::after {
    border-color: var(--accent-deep);
}

.table-container,
.activity-feed,
.leaderboard-list,
.heatmap-container {
    border: 3px solid var(--border-strong);
    border-radius: 14px 18px 16px 12px;
    background:
        linear-gradient(var(--ink-faint) 1px, transparent 1px) 0 0 / 100% var(--table-row-height),
        var(--paper-soft);
}

th {
    background:
        var(--scribble-line) center / 130px 20px repeat-x,
        var(--accent-amber-soft),
        var(--paper-soft);
    color: var(--ink);
    font-weight: 900;
    letter-spacing: 0.07em;
}

td {
    font-weight: 700;
}

tbody tr:nth-child(even) {
    background: oklch(78% 0.16 82 / 0.08);
}

tbody tr:hover {
    background:
        var(--scribble-line) 50% 50% / 150px 24px repeat-x,
        var(--accent-soft);
}

.play-button,
.play-btn,
.control-room-actions-trigger,
.web-control-button,
.web-upload-control-button {
    background:
        radial-gradient(circle at 25% 25%, oklch(98% 0.024 95 / 0.18), transparent 40%),
        var(--ink);
    color: var(--paper);
}

.play-button:hover:not(:disabled),
.play-btn:hover:not(:disabled),
.web-control-button:hover:not(:disabled),
.web-upload-control-button:hover:not(:disabled),
.control-room-actions-trigger:hover,
.pagination button:hover:not(:disabled),
.time-btn:hover,
.dataset-action-btn:hover {
    transform: translate(-2px, -2px) rotate(-1deg);
    box-shadow: 0.34rem 0.34rem 0 var(--ink-faint);
}

.play-button:active:not(:disabled),
.play-btn:active:not(:disabled),
.web-control-button:active:not(:disabled),
.web-upload-control-button:active:not(:disabled),
.control-room-actions-trigger:active,
.pagination button:active:not(:disabled) {
    transform: translate(1px, 1px) rotate(1deg);
    box-shadow: 0.08rem 0.08rem 0 var(--ink-faint);
}

.sound-options-button,
.pagination button,
.time-btn,
.dataset-action-btn {
    background: var(--paper-soft);
    color: var(--ink);
}

.analytics-toolbar-standalone .time-selector {
    border-radius: 999px;
    gap: 0.42rem;
    padding: 0.38rem;
}

.analytics-toolbar-standalone .time-btn {
    min-height: 2.45rem;
    border-radius: 999px;
}

.time-btn.active,
.dataset-action-btn.primary,
.action-badge.play,
.action-badge.favorite {
    background: var(--accent-amber);
    border-color: var(--ink);
    color: var(--ink);
}

.action-badge {
    border: 2px solid var(--border-strong);
    border-radius: 8px 11px 9px 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.stat-card {
    min-height: 8.2rem;
    border-radius: 18px 14px 22px 16px;
}

.stat-icon {
    filter: drop-shadow(2px 2px 0 oklch(20% 0.045 255 / 0.12));
}

.stat-value {
    color: var(--accent-deep);
    letter-spacing: 0;
}

.leaderboard-item,
.activity-item,
.dataset-clip-card,
.web-upload-item,
.web-upload-queue-item {
    border: 2px solid var(--border);
    border-radius: 12px 16px 13px 15px;
    background:
        var(--scribble-paper),
        oklch(98% 0.024 95 / 0.72);
}

html.theme-dark .leaderboard-item,
html.theme-dark .activity-item,
html.theme-dark .dataset-clip-card,
html.theme-dark .web-upload-item,
html.theme-dark .web-upload-queue-item {
    background:
        var(--scribble-paper),
        oklch(24% 0.04 255 / 0.72);
}

.web-upload-dialog,
.web-tts-dialog,
.sound-rename-dialog,
.sound-list-dialog,
.sound-similar-dialog,
.sound-event-dialog,
.login-modal-card {
    background:
        var(--scribble-paper),
        linear-gradient(180deg, var(--paper-soft), var(--paper-muted));
    border-radius: 20px 16px 24px 18px;
}

:focus-visible {
    outline: 4px dashed var(--accent);
    outline-offset: 4px;
}

@media (max-width: 640px) {
    .control-room,
    .card,
    .stat-card {
        transform: none;
    }

    .page-heading .page-title,
    .page-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }
}

.dataset-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.4rem 0.6rem;
    border-bottom: 1px solid var(--ink-faint);
}

.dataset-sidebar-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0;
}

.dataset-sidebar-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-muted);
    background: var(--ink-faint);
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
}

.dataset-sidebar-storage {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ink-muted);
    padding: 0.3rem 0.4rem 0.1rem;
    white-space: normal;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dataset-user-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow-y: auto;
    flex: 1;
}

.dataset-user-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--ink);
    width: 100%;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dataset-user-item:hover {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
}

.dataset-user-item.active {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.dataset-user-name {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
}

.dataset-user-meta {
    font-size: 0.7rem;
    color: var(--ink-muted);
}

.dataset-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.dataset-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    justify-content: space-between;
}

.dataset-toolbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}

.dataset-main-title {
    font-size: 0.98rem;
    font-weight: 700;
    margin: 0;
}

.dataset-label-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.dataset-label-filter-select {
    font-size: 0.76rem;
    font-weight: 650;
    padding: 0.3rem 1.6rem 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background:
        linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%) calc(100% - 0.5rem) 50% / 0.3rem 0.3rem no-repeat,
        linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%) calc(100% - 0.3rem) 50% / 0.3rem 0.3rem no-repeat,
        var(--paper-muted);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    min-width: 8rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dataset-label-filter-select:hover {
    border-color: var(--accent);
}

.dataset-label-filter-select:focus {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
    border-color: var(--accent);
}

.dataset-label-filter-select option {
    background: var(--paper);
    color: var(--ink);
}

html.theme-dark .dataset-label-filter-select {
    background:
        linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%) calc(100% - 0.5rem) 50% / 0.3rem 0.3rem no-repeat,
        linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%) calc(100% - 0.3rem) 50% / 0.3rem 0.3rem no-repeat,
        var(--paper-muted);
}

html.theme-dark .dataset-label-filter-select option {
    background: var(--panel-dark);
    color: var(--ink);
}

.dataset-search {
    font-size: 0.8rem;
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--paper);
    color: var(--ink);
    width: 14rem;
    max-width: 100%;
}

.dataset-search:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.dataset-clips {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.dataset-empty {
    color: var(--ink-muted);
    text-align: center;
    padding: 2rem;
    font-size: 0.88rem;
}

.dataset-clip {
    background: var(--paper-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.dataset-clip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.dataset-clip-user {
    font-size: 0.82rem;
    font-weight: 600;
}

.dataset-clip-meta {
    font-size: 0.7rem;
    color: var(--ink-muted);
}

.dataset-clip-player {
    width: 100%;
    max-width: 100%;
    height: 2.5rem;
    border-radius: var(--radius-sm);
}

.dataset-clip-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.dataset-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dataset-field-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.dataset-clip-label-select,
.dataset-clip-transcript,
.dataset-clip-notes {
    font-size: 0.8rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    resize: vertical;
    width: 100%;
}

.dataset-clip-label-select:focus,
.dataset-clip-transcript:focus,
.dataset-clip-notes:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.dataset-save-btn {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: oklch(98% 0.01 276);
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
    justify-self: start;
}

.dataset-save-btn:hover {
    background: var(--accent-deep);
    transform: translateY(-1px);
}

.dataset-save-btn:active {
    transform: translateY(0);
}

.dataset-save-status {
    font-size: 0.72rem;
    color: var(--ink-muted);
    min-height: 1em;
}

.dataset-save-status.saved {
    color: var(--success);
}

.dataset-save-status.error {
    color: var(--error);
}

.dataset-pagination {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.pagination-inner {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.pagination-btn {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--paper-muted);
    border: 1px solid var(--border);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pagination-btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.pagination-info {
    font-size: 0.78rem;
    color: var(--ink-muted);
}

/* ── Dataset quick action row ─────────────────────────────────────── */

.dataset-clip-quick {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dataset-clip-checkbox-label {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.dataset-clip-checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
    cursor: pointer;
}

.dataset-clip-label-chip {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    border: 1px solid var(--accent);
    line-height: 1.3;
}

.dataset-clip-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    flex-shrink: 0;
}

.dataset-quick-play,
.dataset-quick-label-apply,
.dataset-quick-delete,
.dataset-quick-more,
.dataset-quick-trim {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    line-height: 1.4;
    transition: background 0.12s ease, border-color 0.12s ease;
    white-space: nowrap;
}

.dataset-quick-label-select {
    font-size: 0.7rem;
    padding: 0.2rem 0.3rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    line-height: 1.4;
    max-width: 7rem;
    cursor: pointer;
}

.dataset-quick-play {
    font-size: 0.82rem;
    padding: 0.2rem 0.5rem;
}

.dataset-quick-play:hover,
.dataset-quick-label-apply:hover,
.dataset-quick-more:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.dataset-quick-label-apply.saved {
    background: var(--success);
    color: var(--paper);
    border-color: var(--success);
}

.dataset-quick-delete {
    color: var(--error);
}

.dataset-quick-delete:hover {
    background: var(--error);
    color: var(--paper);
    border-color: var(--error);
}

.dataset-quick-trim {
    color: var(--accent-olive);
}

.dataset-quick-trim:hover {
    background: var(--accent-olive);
    color: var(--paper);
    border-color: var(--accent-olive);
}

.dataset-clip-details {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
    margin-top: 0.4rem;
}

.dataset-clip-details[hidden] {
    display: none;
}

.dataset-clip.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* ── Quick progress bar (dataset row) ─────────────────────────────── */

.dataset-quick-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    min-width: 0;
}

.dataset-quick-progress[hidden] {
    display: none;
}

.dataset-quick-progress-track {
    display: inline-block;
    width: clamp(8rem, 16vw, 14rem);
    height: auto;
    padding: 0.5rem 0;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
    vertical-align: middle;
    line-height: 0;
    cursor: pointer;
    touch-action: none;
    position: relative;
}

.dataset-quick-progress-track:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dataset-quick-progress-track.dragging {
    cursor: ew-resize;
}

.dataset-quick-progress-fill {
    display: block;
    height: 0.55rem;
    width: 0%;
    border-radius: 999px;
    background: var(--accent);
}

.dataset-quick-progress-time {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1;
}

.dataset-clip-custom-label {
    font-size: 0.8rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    width: 100%;
    margin-top: 0.2rem;
}

.dataset-clip-custom-label:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ── Dataset action toolbar (sort + bulk) ─────────────────────────── */

.dataset-action-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.dataset-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}

.dataset-action-row-primary {
    justify-content: space-between;
}

.dataset-action-row-bulk {
    justify-content: flex-start;
}

.dataset-sort-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dataset-sort-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.dataset-sort-select {
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.dataset-sort-select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.dataset-bulk-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.dataset-bulk-count {
    font-size: 0.72rem;
    color: var(--ink-muted);
    font-weight: 600;
    min-width: 5ch;
}

.dataset-bulk-btn {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--paper-muted);
    color: var(--ink-muted);
    cursor: pointer;
    font: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.dataset-bulk-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--ink);
}

.dataset-bulk-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.dataset-bulk-label-select {
    font-size: 0.76rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.dataset-bulk-label-select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dataset-bulk-apply-btn {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent);
    background: var(--accent);
    color: oklch(98% 0.01 276);
    cursor: pointer;
    font: inherit;
    transition: background 0.12s ease;
}

.dataset-bulk-apply-btn:hover:not(:disabled) {
    background: var(--accent-deep);
}

.dataset-bulk-apply-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dataset-bulk-delete-btn {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--error);
    background: transparent;
    color: var(--error);
    cursor: pointer;
    font: inherit;
    transition: background 0.12s ease;
}

.dataset-bulk-delete-btn:hover:not(:disabled) {
    background: var(--error);
    color: var(--paper);
}

.dataset-bulk-delete-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Scan group ─────────────────────────────────────────────────── */

.dataset-scan-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dataset-scan-btn {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent-olive);
    background: var(--accent-olive-soft);
    color: var(--accent-olive);
    cursor: pointer;
    font: inherit;
    transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

#scanKeywordBtn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
    padding: 0.25rem 0.65rem;
    gap: 0.1rem;
}

.dataset-scan-btn-label {
    /* inherits button font: uppercase, bold, olive */
}

.dataset-scan-btn:hover:not(:disabled) {
    background: var(--accent-olive);
    color: var(--paper);
}

.dataset-scan-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.dataset-scan-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.dataset-scan-select {
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.dataset-scan-schedule {
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ink-muted);
    white-space: nowrap;
    cursor: help;
    padding: 0;
    transition: color 0.12s ease;
}

#scanKeywordBtn:hover .dataset-scan-schedule {
    color: var(--paper);
}

/* ── Speech training toast ──────────────────────────────────────── */

.speech-toast-region {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 80;
    max-width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}

.speech-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.05rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--paper-strong);
    box-shadow: var(--shadow);
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.4;
    animation: speechToastIn 0.2s var(--ease-out-quart) both;
}

.speech-toast::before {
    content: '';
    flex-shrink: 0;
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent-olive);
}

.speech-toast.error::before {
    background: var(--error);
}

.speech-toast.success::before {
    background: var(--accent);
}

.speech-toast-hiding {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

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

/* ── Speech toast progress variant ──────────────────────────────── */

.speech-toast.progress {
    align-items: flex-start;
}

.speech-toast-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.speech-toast-title {
    font-weight: 650;
    color: var(--ink);
}

.speech-toast-progress {
    width: 100%;
    height: 0.35rem;
    border-radius: 999px;
    border: none;
    background: var(--border);
    accent-color: var(--accent-olive);
}
.speech-toast-progress::-webkit-progress-bar {
    border-radius: 999px;
    background: var(--border);
}
.speech-toast-progress::-webkit-progress-value {
    border-radius: 999px;
    background: var(--accent-olive);
}
.speech-toast-progress::-moz-progress-bar {
    border-radius: 999px;
    background: var(--accent-olive);
}

.speech-toast-detail {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-muted);
}

/* ── Confidence chip ────────────────────────────────────────────── */

.dataset-clip-conf-chip {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: var(--accent-olive-soft);
    color: var(--accent-olive);
    border: 1px solid var(--accent-olive);
    line-height: 1.3;
    white-space: nowrap;
}

/* ── Dataset mobile adjustments ──────────────────────────────────── */

@media (max-width: 768px) {
    .dataset-clip-quick {
        gap: 0.35rem;
    }

    .dataset-clip-actions {
        gap: 0.2rem;
    }

    .dataset-quick-progress-track {
        width: clamp(6rem, 28vw, 12rem);
        padding: 0.6rem 0;
        height: auto;
    }

    .dataset-quick-progress-fill {
        height: 0.5rem;
    }

    .dataset-quick-progress-time {
        font-size: 0.65rem;
    }

    .dataset-quick-play,
    .dataset-quick-label-apply,
    .dataset-quick-delete,
    .dataset-quick-more,
    .dataset-quick-trim {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }

    .dataset-quick-label-select {
        font-size: 0.65rem;
        max-width: 5.5rem;
    }

    .dataset-action-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .dataset-action-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .dataset-action-row .dataset-sort-group,
    .dataset-action-row .dataset-scan-group,
    .dataset-action-row .dataset-bulk-group {
        width: 100%;
    }

    .dataset-bulk-group {
        justify-content: flex-start;
    }
}

/* Keep the late dataset rules inside the same scribbly system. */
.dataset-sidebar,
.dataset-main,
.dataset-action-toolbar,
.dataset-clip,
.dataset-clip-card,
.dataset-empty,
.dataset-pagination {
    position: relative;
}

.dataset-sidebar,
.dataset-main,
.dataset-action-toolbar,
.dataset-clip {
    background:
        var(--scribble-paper),
        linear-gradient(180deg, var(--paper-soft), var(--paper-muted));
    border: 3px solid var(--border-strong);
    border-radius: 18px 14px 22px 16px;
    box-shadow: var(--shadow-sm);
}

.dataset-user-item,
.dataset-clip-label-select,
.dataset-clip-transcript,
.dataset-clip-notes,
.dataset-quick-play,
.dataset-quick-label-apply,
.dataset-quick-delete,
.dataset-quick-more,
.dataset-quick-trim,
.dataset-quick-label-select,
.pagination-btn,
.dataset-save-btn {
    border: 2px solid var(--border-strong);
    border-radius: 10px 14px 11px 15px;
    box-shadow: 0.16rem 0.16rem 0 var(--ink-faint);
}

.dataset-main-title,
.dataset-sidebar-title {
    font-family: "DynaPuff", "Comic Sans MS", "Atkinson Hyperlegible", system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: none;
}

.dataset-save-btn,
.dataset-quick-label-apply.saved {
    background: var(--accent);
    color: oklch(98% 0.018 95);
}

/* ── Scribbly Refinement Pass ───────────────────────────────────── */

.control-room-dot.playing {
    background: var(--scribble-blue);
    box-shadow: 0 0 0 5px oklch(60% 0.17 244 / 0.18);
}

.control-room-dot.playing + .control-room-equalizer span,
.dot-playing .control-room-equalizer span {
    background: var(--accent-amber);
}

.control-room-progress-track {
    border: 2px solid var(--border);
    background:
        repeating-linear-gradient(
            -12deg,
            oklch(20% 0.045 255 / 0.09) 0 5px,
            transparent 5px 10px
        ),
        oklch(99.4% 0.004 95 / 0.65);
}

.control-room-progress-fill {
    background:
        repeating-linear-gradient(
            -18deg,
            var(--accent) 0 8px,
            var(--accent-amber) 8px 16px,
            var(--scribble-blue) 16px 24px
        );
}

.control-room-progress-fill::after {
    background: var(--scribble-line) center / 90px 18px repeat-x;
    opacity: 0.45;
}

.system-monitor-dropdown,
.voice-members-dropdown {
    z-index: 220;
    border-width: 3px;
    box-shadow: 0.3rem 0.3rem 0 var(--ink-faint);
}

.filter-select option,
.guild-selector option,
.dataset-label-filter-select option,
.dataset-sort-select option,
.dataset-bulk-label-select option,
.dataset-quick-label-select option,
.dataset-scan-select option {
    background-color: oklch(99.4% 0.004 95);
    color: var(--ink);
    font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
    font-weight: 700;
}

.web-upload-dialog,
.web-tts-dialog,
.sound-rename-dialog,
.sound-list-dialog,
.sound-similar-dialog,
.sound-event-dialog,
.login-modal-card,
.voice-members-card {
    border: 4px solid var(--border-strong);
    border-radius: 20px 16px 26px 18px;
    background:
        var(--scribble-paper),
        linear-gradient(180deg, oklch(99.5% 0.004 95), oklch(97.4% 0.01 92));
    box-shadow: 0.5rem 0.5rem 0 var(--ink-faint);
}

.web-upload-title,
.login-modal-title,
.voice-members-title {
    font-family: "DynaPuff", "Comic Sans MS", "Atkinson Hyperlegible", system-ui, sans-serif;
    letter-spacing: 0;
}

.web-upload-dialog input,
.web-upload-dialog textarea,
.web-upload-dialog select,
.web-tts-dialog input,
.web-tts-dialog textarea,
.web-tts-dialog select,
.sound-options-dialog input,
.sound-options-dialog select {
    border: 2px solid var(--border-strong);
    border-radius: 10px 14px 11px 15px;
    background:
        var(--scribble-paper),
        oklch(99.4% 0.004 95 / 0.92);
    box-shadow: inset 0 0 0 2px oklch(60% 0.17 244 / 0.04);
}

.web-upload-submit,
.web-upload-cancel,
.web-upload-modal-close,
.web-tts-submit,
.sound-options-submit,
.login-modal-close,
.login-modal-login:not(.auth-button),
.voice-members-close {
    border: 2px solid var(--border-strong);
    border-radius: 10px 14px 11px 15px;
    box-shadow: 0.18rem 0.18rem 0 var(--ink-faint);
}

body.page-dataset {
    overflow-x: hidden;
}

.dataset-shell {
    width: min(1500px, calc(100% - 2rem));
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
    gap: 1rem;
}

.dataset-sidebar,
.dataset-main,
.dataset-action-toolbar,
.dataset-clip {
    background:
        var(--scribble-paper),
        linear-gradient(180deg, oklch(99.4% 0.004 95), oklch(97.4% 0.01 92));
}

.dataset-main {
    padding: 0.8rem;
}

.dataset-main::after,
.dataset-sidebar::after {
    inset: 0.35rem;
}

.dataset-toolbar {
    align-items: flex-start;
}

.dataset-toolbar-left {
    flex: 1 1 24rem;
    min-width: 0;
}

.dataset-toolbar-right {
    flex: 0 1 16rem;
    min-width: min(16rem, 100%);
}

.dataset-main-title {
    flex: 1 1 auto;
    min-width: 14rem;
    font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.dataset-sidebar-title {
    font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dataset-action-toolbar {
    padding: 0.75rem;
    border: 3px solid var(--border-strong);
}

.dataset-action-row {
    align-items: center;
    gap: 0.55rem;
}

.dataset-action-row-primary {
    justify-content: space-between;
}

.dataset-sort-group,
.dataset-bulk-group,
.dataset-scan-group {
    min-width: 0;
}

.dataset-scan-group {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dataset-label-filter-select,
.dataset-sort-select,
.dataset-bulk-label-select,
.dataset-quick-label-select,
.dataset-scan-select,
.dataset-search {
    background:
        var(--scribble-paper),
        oklch(99.4% 0.004 95);
    border: 2px solid var(--border-strong);
    border-radius: 10px 14px 11px 15px;
}

.dataset-scan-btn,
.dataset-bulk-btn,
.dataset-bulk-apply-btn,
.dataset-bulk-delete-btn,
.dataset-quick-play,
.dataset-quick-label-apply,
.dataset-quick-delete,
.dataset-quick-more,
.dataset-quick-trim,
.dataset-save-btn {
    border: 2px solid var(--border-strong);
    border-radius: 10px 14px 11px 15px;
    box-shadow: 0.16rem 0.16rem 0 var(--ink-faint);
}

.dataset-scan-btn {
    background: oklch(99.4% 0.004 95);
    color: var(--accent-deep);
}

.dataset-scan-btn:hover:not(:disabled) {
    background: var(--accent-amber);
    color: var(--ink);
}

.dataset-scan-schedule,
#scanKeywordBtn:hover .dataset-scan-schedule {
    color: var(--ink-muted);
}

.dataset-user-item.active {
    background: oklch(69% 0.17 355 / 0.15);
    border-color: var(--accent);
}

@media (max-width: 768px) {
    .dataset-shell {
        width: min(100%, calc(100% - 1rem));
        grid-template-columns: 1fr;
    }

    .dataset-toolbar-right,
    .dataset-search {
        width: 100%;
    }
}