/* Proteo theme — vanilla Bootstrap 5 overrides, no third-party Bootswatch */

:root {
    --proteo-font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --proteo-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --proteo-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --proteo-ink: #0f172a;
    --proteo-ink-muted: #475569;
    --proteo-ink-subtle: #64748b;
    --proteo-bg: #f1f5f9;
    --proteo-surface: #ffffff;
    --proteo-border: #e2e8f0;

    --proteo-primary: #0f4c5c;
    --proteo-primary-hover: #0a3641;
    --proteo-accent: #14b8a6;
    --proteo-accent-soft: #ccfbf1;
    --proteo-warm: #d97706;
    --proteo-warm-soft: #fef3c7;
    --proteo-destructive: #dc3545;
    --proteo-success: #059669;
    --proteo-header-height: 4rem;
    --proteo-notify-width: min(22.5rem, calc(100% - 2rem));
    /* Single horizontal inset for shell + cards (scales with viewport; avoids stacked fixed gutters). */
    --proteo-page-gutter: clamp(0.75rem, 2.5vw, 1.5rem);
    --proteo-navbar-toggler-inset: max(0.75rem, env(safe-area-inset-right, 0px));
    --proteo-navbar-toggler-reserve: 2.75rem;
    --bs-body-font-family: var(--proteo-font-sans);
    --bs-body-color: var(--proteo-ink);
    --bs-body-bg: var(--proteo-bg);
    --bs-primary: var(--proteo-primary);
    --bs-primary-rgb: 15, 76, 92;
    --bs-link-color: var(--proteo-primary);
    --bs-link-hover-color: var(--proteo-accent);
    --bs-border-color: var(--proteo-border);
    --bs-border-radius: 0.625rem;
    --bs-border-radius-lg: 0.875rem;
}

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

html {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: clip;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--proteo-font-sans);
    color: var(--proteo-ink);
    background: var(--proteo-bg);
    max-width: 100%;
    overflow-x: clip;
}

body.proteo-app-shell {
    overflow-x: clip;
    max-width: 100%;
}

body.proteo-app-shell main {
    padding-top: calc(var(--proteo-header-height) + env(safe-area-inset-top, 0px));
}

main {
    flex: 1 0 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* —— Login page —— */

body.proteo-login-page main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    min-height: 100vh;
    padding: clamp(1.25rem, 5vw, 2.5rem) clamp(0.875rem, 4vw, 1.5rem);
}

.proteo-login-shell {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
}

.proteo-login-brand {
    font-family: var(--proteo-font-display);
    font-weight: 600;
    font-size: clamp(1.85rem, 7vw, 2.35rem);
    letter-spacing: -0.02em;
    color: var(--proteo-primary);
    text-align: center;
    margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
}

.proteo-login-brand span {
    color: var(--proteo-accent);
}

.proteo-login-card {
    width: 100%;
}

.proteo-login-locale .btn {
    padding-inline: 0.55rem;
    line-height: 1;
}

.proteo-login-locale .btn.active {
    color: var(--proteo-primary);
    background: var(--proteo-accent-soft);
    border-color: var(--proteo-accent);
}

@media (max-width: 575.98px) {
    body.proteo-login-page main {
        align-items: center;
        justify-content: center;
        padding-top: max(1.25rem, env(safe-area-inset-top, 0px));
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
    }

    .proteo-login-card {
        padding: 1.25rem !important;
    }
}

/* —— Error pages & request ID stamp —— */

.proteo-error-status {
    font-family: var(--proteo-font-sans);
    line-height: 1;
    color: var(--proteo-ink);
}

.proteo-error-page__description {
    max-width: 28rem;
    margin-inline: auto;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--proteo-ink-muted);
}

.proteo-error-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.proteo-error-stamp__line code {
    font-family: var(--proteo-font-mono);
    font-size: 0.75rem;
    color: var(--proteo-ink);
    word-break: break-word;
    white-space: normal;
    display: block;
    text-align: center;
}

.proteo-error-stamp__copy {
    margin-top: 1rem;
    min-width: 2.25rem;
}

.proteo-error-stamp__copy--copied {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* —— Toast notifications (cc light popover card) —— */

.proteo-notify-anchor {
    position: fixed;
    top: calc(var(--proteo-header-height) + 2.5rem);
    right: max(1rem, env(safe-area-inset-right, 0px));
    z-index: 1080;
    width: var(--proteo-notify-width);
    max-width: calc(100% - 2rem);
    pointer-events: none;
}

body.proteo-login-page .proteo-notify-anchor {
    top: 1rem;
}

.proteo-notify-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.proteo-notify {
    pointer-events: auto;
    box-sizing: border-box;
    min-height: 3.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.65rem;
    border-radius: 0.75rem;
    border: 1px solid var(--proteo-border);
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
}

.proteo-notify__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.1rem;
}

.proteo-notify__icon--error {
    color: var(--proteo-destructive);
}

.proteo-notify__icon--success {
    color: var(--proteo-success);
}

.proteo-notify__body {
    flex: 1;
    min-width: 0;
    padding-top: 0.1rem;
}

.proteo-notify__message {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--proteo-ink);
    font-weight: 400;
}

.proteo-notify--operational {
    min-height: 0;
    align-items: flex-start;
}

.proteo-notify--operational .proteo-notify__message {
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
    font-family: var(--proteo-font-mono);
    font-size: 0.6875rem;
}

.proteo-notify--error {
    border-color: rgba(220, 53, 69, 0.45);
}

.proteo-notify--success {
    border-color: rgba(5, 150, 105, 0.4);
}

.proteo-notify__actions {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    gap: 0.125rem;
}

.proteo-notify__icon-btn {
    border: 0;
    background: transparent;
    color: var(--proteo-ink-muted);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

.proteo-notify__icon-btn:hover {
    color: var(--proteo-ink);
    background: #f1f5f9;
}

.proteo-notify__icon-btn:focus-visible {
    outline: 2px solid rgba(15, 76, 92, 0.35);
    outline-offset: 1px;
}

.proteo-notify__copy--copied {
    color: var(--proteo-success);
}

/* —— Navbar —— */

.proteo-locale-switch {
    text-decoration: none;
    line-height: 1;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}

.proteo-locale-switch__flag {
    font-size: 1.25rem;
    line-height: 1;
}

.proteo-locale-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.proteo-locale-option__flag {
    font-size: 1.125rem;
    line-height: 1;
}

.proteo-locale-option__label {
    line-height: 1.2;
}

.proteo-user-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    line-height: 1;
}

.proteo-user-menu__icon {
    width: 1.35rem;
    height: 1.35rem;
}

.proteo-user-menu .dropdown-header {
    max-width: 14rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.proteo-user-menu__logout-form {
    margin: 0;
}

.proteo-user-menu__logout {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.proteo-user-menu__item-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.proteo-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    --bs-navbar-padding-y: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 0;
    background: linear-gradient(135deg, var(--proteo-primary) 0%, #134e4a 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 24px rgba(15, 76, 92, 0.18);
}

.proteo-navbar > .container,
.proteo-navbar__inner {
    padding-block: 0.4rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/*
 * Toggler is a direct child of <nav>, outside .container (base.html.twig).
 * position:fixed + kill Bootstrap .navbar flex on small screens so nothing moves it on resize.
 */
.proteo-navbar .proteo-navbar-toggler.navbar-toggler {
    display: none;
    position: fixed !important;
    inset: calc(env(safe-area-inset-top, 0px) + 0.45rem) var(--proteo-navbar-toggler-inset) auto auto !important;
    width: auto;
    margin: 0 !important;
    padding: 0.4rem 0.55rem;
    transform: none !important;
    z-index: 1045;
    border-color: rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, var(--proteo-primary) 0%, #134e4a 100%);
    box-shadow: 0 1px 6px rgba(15, 76, 92, 0.35);
}

.proteo-navbar .proteo-navbar-toggler .navbar-toggler-icon {
    filter: invert(1);
}

@media (max-width: 1199.98px) {
    .proteo-navbar.navbar.navbar-expand-xl {
        display: block !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }

    .proteo-navbar .proteo-navbar-toggler.navbar-toggler {
        display: block !important;
    }

    .proteo-navbar.navbar > .container.proteo-navbar__inner {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .proteo-navbar .navbar-brand {
        display: block;
        min-width: 0;
        max-width: 100%;
        margin-right: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .proteo-navbar .navbar-collapse {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-basis: auto !important;
        flex-grow: 0 !important;
    }

    .proteo-navbar .navbar-collapse.collapse:not(.show):not(.collapsing) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* Bootstrap expand-xl: never keep desktop inline nav below xl (stops wide overflow). */
    .proteo-navbar.navbar-expand-xl .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .proteo-navbar.navbar > .container.proteo-navbar__inner {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 0.5rem;
    }

    .proteo-navbar .proteo-navbar-toggler.navbar-toggler {
        display: none !important;
    }
}

body.proteo-app-shell .proteo-navbar > .container,
body.proteo-app-shell .proteo-navbar__inner,
body.proteo-app-shell main .container,
body.proteo-app-shell .proteo-footer .container {
    width: 100%;
    /* Override Bootstrap breakpoint max-widths so content tracks viewport width when resizing. */
    max-width: 100% !important;
    box-sizing: border-box;
    padding-left: var(--proteo-page-gutter);
    margin-inline: 0;
    overflow-x: clip;
}

body.proteo-app-shell .proteo-navbar__inner {
    padding-right: var(--proteo-page-gutter);
}

@media (max-width: 1199.98px) {
    body.proteo-app-shell .proteo-navbar__inner {
        padding-right: calc(var(--proteo-navbar-toggler-reserve) + var(--proteo-navbar-toggler-inset));
    }
}

body.proteo-app-shell .proteody-app-wrap {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.proteo-navbar .navbar-brand {
    font-family: var(--proteo-font-display);
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: #fff !important;
}

.proteo-navbar .navbar-brand span {
    color: var(--proteo-accent);
}

.proteo-navbar .nav-link {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 500;
    padding: 0.32rem 0.85rem !important;
    margin: 0;
    border-radius: var(--bs-border-radius);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.proteo-navbar .nav-link:hover,
.proteo-navbar .nav-link:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
}

.proteo-navbar .nav-link.active {
    color: #fff !important;
    background: rgba(20, 184, 166, 0.35);
}

@media (max-width: 1199.98px) {
    .proteo-navbar .navbar-collapse {
        padding-top: 0.75rem;
        padding-bottom: 0.25rem;
        max-height: min(70vh, calc(100dvh - var(--proteo-header-height, 4rem)));
        overflow-x: clip;
        overflow-y: auto;
    }

    .proteo-navbar .navbar-nav {
        gap: 0.25rem;
    }
}

/* —— Footer —— */

.proteo-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--proteo-border);
    background: var(--proteo-surface);
    color: var(--proteo-ink-subtle);
    font-size: 0.875rem;
}

/* —— Typography & utilities —— */

.proteo-display {
    font-family: var(--proteo-font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--proteo-ink);
}

.proteo-lead {
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    color: var(--proteo-ink-muted);
    line-height: 1.65;
}

.proteo-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--proteo-accent);
}

/* —— Cards —— */

.proteo-card {
    background: var(--proteo-surface);
    border: 1px solid var(--proteo-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.05);
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.proteo-card-accent {
    border-top: 3px solid var(--proteo-accent);
}

.proteo-card-warm {
    border-top: 3px solid var(--proteo-warm);
}

/* —— Buttons —— */

.btn-proteo {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--proteo-primary);
    --bs-btn-border-color: var(--proteo-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--proteo-primary-hover);
    --bs-btn-hover-border-color: var(--proteo-primary-hover);
    --bs-btn-focus-shadow-rgb: 15, 76, 92;
    --bs-btn-active-bg: var(--proteo-primary-hover);
    --bs-btn-active-border-color: var(--proteo-primary-hover);
    font-weight: 600;
    padding: 0.65rem 1.35rem;
}

.btn-proteo-outline {
    --bs-btn-color: var(--proteo-primary);
    --bs-btn-border-color: var(--proteo-border);
    --bs-btn-hover-color: var(--proteo-primary);
    --bs-btn-hover-bg: var(--proteo-accent-soft);
    --bs-btn-hover-border-color: var(--proteo-accent);
    --bs-btn-active-bg: var(--proteo-accent-soft);
    font-weight: 500;
}

/* —— Hero (home) —— */

.proteo-hero {
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(20, 184, 166, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(217, 119, 6, 0.08) 0%, transparent 50%),
        var(--proteo-surface);
    border: 1px solid var(--proteo-border);
    border-radius: var(--bs-border-radius-lg);
}

.proteo-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--proteo-primary);
    background: var(--proteo-accent-soft);
    border-radius: 999px;
}

.proteo-layer-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-family: var(--proteo-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--proteo-primary);
    background: var(--proteo-accent-soft);
    flex-shrink: 0;
}

.proteo-layer-icon--warm {
    color: var(--proteo-warm);
    background: var(--proteo-warm-soft);
}

/* —— Generator page —— */

.proteo-generator-page {
    padding-block: clamp(1.25rem, 4vw, 2.5rem);
}

.proteo-generator-page.container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.proteo-generator-panel {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    min-width: 0;
}

.proteo-generator-panel .card-body {
    min-width: 0;
}

.proteo-sequence-input {
    font-family: var(--proteo-font-mono);
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    line-height: 1.5;
    min-height: 10rem;
    resize: vertical;
    border-color: var(--proteo-border);
    background: #fafbfc;
}

.proteo-sequence-input:focus {
    border-color: var(--proteo-accent);
    box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.2);
}

.btn-proteo-outline.active,
.example-sequence.active {
    background: var(--proteo-accent-soft);
    border-color: var(--proteo-accent);
    color: var(--proteo-primary);
}

.proteo-sequence-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.proteo-sequence-toolbar__label {
    font-weight: 500;
}

.proteo-decode-controls {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0;
    box-sizing: border-box;
}

/* Full-width filter row — columns align with sequence textarea */
.proteo-generator-panel .proteo-decode-filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.625rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0;
    box-sizing: border-box;
}

.proteo-catalog-search .proteo-catalog-filter-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.625rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0;
    box-sizing: border-box;
}

@media (max-width: 767.98px) {
    .proteo-generator-panel .proteo-decode-filters-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .proteo-catalog-search .proteo-catalog-filter-bar {
        grid-template-columns: minmax(0, 1fr);
    }
}

.proteo-generator-panel .proteo-decode-filters-row > .proteo-decode-panel,
.proteo-catalog-search .proteo-catalog-filter-bar > .proteo-decode-panel {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    flex: none;
}

.proteo-generator-panel .proteo-decode-filters-row > .proteo-layer-toggles,
.proteo-generator-panel .proteo-decode-filters-row > .proteo-tempo-stamp,
.proteo-generator-panel .proteo-decode-filters-row > .proteo-score-settings,
.proteo-catalog-search .proteo-catalog-filter-bar > .proteo-catalog-filter-panel {
    min-width: 0;
    max-width: none;
}

/* fieldset defaults to block width; keep in the grid row */
.proteo-decode-filters-row > fieldset.proteo-decode-panel,
.proteo-catalog-filter-bar > fieldset.proteo-decode-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Scale type + padding with panel width so labels stay inside margins */
.proteo-generator-panel .proteo-decode-filters-row .proteo-decode-panel,
.proteo-catalog-search .proteo-catalog-filter-bar .proteo-decode-panel {
    container-type: inline-size;
    container-name: proteo-filter-panel;
    overflow: hidden;
    padding: 0.35rem 0.5rem 0.4rem;
    gap: 0.25rem;
    border-radius: 0.375rem;
    width: 100%;
    max-width: none;
}

.proteo-results-tab-panels .proteo-music-panel {
    display: grid;
    grid-template-columns: 16rem max-content max-content;
    column-gap: 0.75rem;
    align-items: start;
    width: max-content;
    max-width: 100%;
    margin-bottom: 0.65rem;
}

.proteo-results-tab-panels .proteo-music-panel.proteo-decode-panel {
    align-items: start;
}

.proteo-music-panel__section {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
}

.proteo-music-panel__section.proteo-music-sound-panel {
    grid-column: 1;
    width: auto;
    max-width: 16rem;
}

.proteo-music-panel__section.proteo-music-download {
    grid-column: 3;
    align-items: flex-start;
}

.proteo-music-panel__divider {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    width: 1px;
    min-height: 100%;
    margin: 0;
    background: var(--proteo-border);
}

@media (max-width: 575.98px) {
    .proteo-results-tab-panels .proteo-music-panel {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.5rem;
        width: 100%;
        max-width: 22rem;
    }

    .proteo-music-panel__section.proteo-music-sound-panel,
    .proteo-music-panel__section.proteo-music-download {
        grid-column: 1;
        max-width: none;
    }

    .proteo-music-panel__divider {
        grid-column: 1;
        width: 100%;
        height: 1px;
        min-height: 0;
    }
}

.proteo-generator-panel .proteo-decode-filters-row .proteo-decode-panel__title,
.proteo-catalog-search .proteo-catalog-filter-bar .proteo-decode-panel__title {
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proteo-decode-filters-row .proteo-layer-toggles__group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.45rem;
}

.proteo-decode-filters-row .proteo-layer-check {
    width: auto;
    min-height: 1.125rem;
    gap: 0.25rem;
}

.proteo-decode-filters-row .proteo-layer-check .form-check-label {
    font-size: 0.75rem;
    line-height: 1.15;
}

.proteo-decode-filters-row .proteo-tempo-stamp__body {
    gap: 0.2rem;
    font-size: 0.8125rem;
}

.proteo-decode-filters-row .proteo-tempo-slider {
    height: 0.875rem;
}

.proteo-decode-filters-row .proteo-tempo-stamp-value {
    font-size: 0.8125rem;
}

.proteo-decode-filters-row .proteo-layer-check .form-check-input {
    width: 0.8125rem;
    height: 0.8125rem;
}

.proteo-decode-filters-row .proteo-tempo-info-icon svg {
    width: 12px;
    height: 12px;
}

.proteo-catalog-search .proteo-catalog-filter-bar .proteo-catalog-filter-panel__body {
    width: 100%;
    min-width: 0;
}

.proteo-catalog-search .proteo-catalog-filter-max-length {
    width: 3.75rem;
    min-width: 0;
    max-width: 100%;
    min-height: 1.625rem;
    height: 1.625rem;
    padding: 0.15rem 0.35rem;
    font-size: 0.8125rem;
    box-sizing: border-box;
}

.proteo-decode-filters-row .proteo-score-settings--experimental {
    padding: 0.32rem 0.45rem 0.38rem;
}

.proteo-decode-filters-row .proteo-score-settings__experimental-label {
    font-size: 0.72em;
}

.proteo-decode-filters-row .proteo-score-settings__experimental-icon {
    font-size: 0.95em;
}

@container proteo-filter-panel (max-width: 12.5rem) {
    .proteo-score-settings__control--pattern {
        width: 3.65rem;
        min-width: 3.65rem;
        max-width: 3.65rem;
    }
}

@container proteo-filter-panel (max-width: 10.5rem) {
    .proteo-score-settings__control--num {
        width: 1.65rem;
        min-width: 1.65rem;
        max-width: 1.65rem;
    }

    .proteo-score-settings__control--denom {
        width: 1.85rem;
        min-width: 1.85rem;
        max-width: 1.85rem;
    }

    .proteo-score-settings__control--pattern {
        width: 3.1rem;
        min-width: 3.1rem;
        max-width: 3.1rem;
    }
}

@container proteo-filter-panel (max-width: 8.75rem) {
    .proteo-score-settings__control--num {
        width: 1.45rem;
        min-width: 1.45rem;
        max-width: 1.45rem;
    }

    .proteo-score-settings__control--denom {
        width: 1.65rem;
        min-width: 1.65rem;
        max-width: 1.65rem;
    }

    .proteo-score-settings__control--pattern {
        width: 2.65rem;
        min-width: 2.65rem;
        max-width: 2.65rem;
    }

    .proteo-score-settings__time-divider {
        font-size: 0.85em;
    }
}

.proteo-decode-generate-row {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.proteo-decode-generate-row .proteo-generate-bar {
    width: 100%;
    justify-content: flex-end;
}

.proteo-decode-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    margin: 0;
    padding: 0.4rem 0.55rem 0.45rem;
    border: 1px solid var(--proteo-border);
    border-radius: 0.375rem;
    background: #f8fafc;
    min-width: 0;
    box-sizing: border-box;
}

.proteo-decode-filters-row > .proteo-decode-panel > :not(.proteo-decode-panel__title),
.proteo-catalog-filter-bar > .proteo-decode-panel > .proteo-catalog-filter-panel__body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.proteo-decode-panel__title {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--proteo-ink-subtle);
    white-space: nowrap;
    line-height: 1.2;
}

.proteo-decode-filters-row .proteo-tempo-stamp__body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.proteo-layer-toggles__group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.proteo-layer-check {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding-left: 0;
    min-height: 1.5rem;
    width: 100%;
}

.proteo-layer-check .form-check-input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    float: none;
    border: 2px solid #94a3b8;
    cursor: pointer;
    flex-shrink: 0;
}

.proteo-layer-check .form-check-input:checked {
    background-color: var(--proteo-primary);
    border-color: var(--proteo-primary);
}

.proteo-layer-check .form-check-input:focus {
    border-color: var(--proteo-primary);
    box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.25);
}

.proteo-layer-check .form-check-label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--proteo-ink);
    cursor: pointer;
    user-select: none;
}

.proteo-layer-tooltip {
    cursor: help;
}

.proteo-layer-check--locked .form-check-input {
    cursor: not-allowed;
    opacity: 0.75;
    pointer-events: none;
}

.proteo-layer-check--locked .form-check-label {
    cursor: default;
    color: var(--proteo-ink-muted);
}

.proteo-layer-check--locked .form-check-label::after {
    content: "";
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.15rem;
    opacity: 0.5;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.proteo-score-settings.proteo-decode-panel {
    container-type: inline-size;
    container-name: proteo-score-settings;
}

.proteo-decode-filters-row .proteo-score-settings__body {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.proteo-score-settings .proteo-decode-panel__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

.proteo-score-settings--experimental {
    pointer-events: none;
    user-select: none;
    cursor: not-allowed;
    background: #eef1f4;
    border-color: #d8dee6;
    padding: 0.35rem 0.55rem 0.4rem;
}

.proteo-score-settings--experimental .proteo-decode-panel__title {
    font-size: 0.65rem;
}

.proteo-score-settings--experimental .proteo-score-settings__title-muted {
    color: #94a3b8;
}

.proteo-score-settings--experimental .proteo-score-settings__body {
    opacity: 0.55;
    filter: grayscale(1);
    gap: 0.2rem;
}

.proteo-score-settings--experimental .proteo-score-settings__body,
.proteo-score-settings--experimental .proteo-score-settings__control {
    color: #94a3b8;
}

.proteo-score-settings--experimental .proteo-score-settings__control {
    background-color: #e8ecf0;
    border-color: #d1d9e2;
}

.proteo-score-settings__experimental {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Narrow score panel (e.g. cramped filter row): stack experimental under title */
@container proteo-score-settings (max-width: 15rem) {
    .proteo-score-settings .proteo-decode-panel__title {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.2rem;
    }

    .proteo-score-settings__title-muted {
        order: 1;
    }

    .proteo-score-settings__experimental {
        order: 2;
        margin-left: 0;
        align-self: flex-start;
    }
}

@media (max-width: 767.98px) {
    .proteo-score-settings .proteo-decode-panel__title {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.2rem;
    }

    .proteo-score-settings__title-muted {
        order: 1;
    }

    .proteo-score-settings__experimental {
        order: 2;
        margin-left: 0;
        align-self: flex-start;
    }
}

.proteo-score-settings__experimental-icon {
    display: inline-block;
    font-size: 0.8125rem;
    line-height: 1;
    filter: none;
    opacity: 1;
}

.proteo-score-settings__experimental-label {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #dc2626;
    line-height: 1.2;
}

.proteo-score-settings--experimental .proteo-score-settings__control {
    min-height: 1.2rem;
    height: 1.2rem;
    font-size: 0.6875rem;
}

.proteo-score-settings--experimental .proteo-score-settings__control--num {
    width: 1.85rem;
    min-width: 1.85rem;
    max-width: 1.85rem;
}

.proteo-score-settings--experimental .proteo-score-settings__control--denom {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
}

.proteo-score-settings--experimental .proteo-score-settings__control--pattern {
    width: 4.75rem;
    min-width: 4.75rem;
    max-width: 4.75rem;
    font-size: 0.625rem;
}

.proteo-score-settings__body {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.5rem;
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--proteo-ink);
}

.proteo-score-settings__control {
    min-height: 1.375rem;
    height: 1.375rem;
    padding: 0 0.2rem;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 0.25rem;
}

.proteo-score-settings__control--num {
    width: 2.1rem;
    min-width: 2.1rem;
    max-width: 2.1rem;
    padding-right: 0;
    text-align: center;
    -moz-appearance: textfield;
}

.proteo-score-settings__control--num::-webkit-outer-spin-button,
.proteo-score-settings__control--num::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.proteo-score-settings__time-sig {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
}

.proteo-score-settings__time-divider {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--proteo-ink-muted);
    line-height: 1;
    padding: 0 0.05rem;
}

.proteo-score-settings__control--denom {
    width: 2.35rem;
    min-width: 2.35rem;
    max-width: 2.35rem;
    padding: 0 0.15rem 0 0.2rem;
    background-position: right 0.05rem center;
    background-size: 0.55rem 0.55rem;
}

.proteo-score-settings__control--pattern {
    width: 5.75rem;
    min-width: 5.75rem;
    max-width: 5.75rem;
    padding: 0 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.6875rem;
}

.proteo-tempo-stamp__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--proteo-ink);
}

.proteo-tempo-slider {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 1.25rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--proteo-primary);
}

.proteo-tempo-stamp__meta {
    display: flex;
    align-items: center;
    align-self: flex-start;
    min-height: 1.25rem;
}

.proteo-tempo-info-hit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.15rem;
    margin: -0.2rem -0.15rem;
    border: 0;
    background: transparent;
    cursor: help;
    line-height: 1;
}

.proteo-tempo-info-hit:focus {
    outline: none;
}

.proteo-tempo-info-hit:focus-visible {
    outline: 2px solid rgba(20, 184, 166, 0.55);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.proteo-tempo-info-hit > * {
    pointer-events: none;
}

.proteo-tempo-stamp-value {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.proteo-tempo-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: var(--proteo-accent, #14b8a6);
    line-height: 0;
    flex-shrink: 0;
}

.proteo-tempo-info-icon svg {
    display: block;
}

.proteo-tempo-info-hit:hover .proteo-tempo-info-icon,
.proteo-tempo-info-hit:focus-visible .proteo-tempo-info-icon {
    color: var(--proteo-primary, #0f4c5c);
}

.proteo-tempo-tooltip-root .tooltip-inner,
.proteo-layer-tooltip-root .tooltip-inner {
    max-width: 22rem;
    text-align: left;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.proteo-layer-tooltip-root .tooltip-inner strong {
    font-weight: 600;
}

.proteo-tempo-tooltip p:last-child {
    margin-bottom: 0;
}

.proteo-tempo-tooltip-gap {
    height: 0.5rem;
}

.proteo-generate-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .proteo-generate-bar .btn-proteo {
        width: 100%;
    }
}

/* —— Protein catalog search (command-palette style) —— */

.proteo-catalog-search .proteo-search-input-wrap {
    position: relative;
}

.proteo-search-icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--proteo-ink-subtle);
    pointer-events: none;
    display: flex;
}

.proteo-search-input {
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid var(--proteo-border);
    border-radius: var(--bs-border-radius-lg);
    background: #fafbfc;
    font-size: 0.95rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.proteo-search-input:focus {
    border-color: var(--proteo-accent);
    box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.18);
    background: #fff;
}

.proteo-catalog-filter-panel__body {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--proteo-ink);
}

.proteo-catalog-filter-max-length {
    width: 4.25rem;
    min-width: 4.25rem;
    max-width: 4.25rem;
    min-height: 1.375rem;
    height: 1.375rem;
    padding: 0 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.2;
    text-align: center;
    -moz-appearance: textfield;
}

.proteo-catalog-filter-max-length::-webkit-outer-spin-button,
.proteo-catalog-filter-max-length::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* cqi is relative to the nearest ancestor query container — use on panel descendants, not the panel itself */
.proteo-generator-panel .proteo-decode-filters-row .proteo-decode-panel .proteo-layer-check .form-check-label {
    font-size: clamp(0.625rem, 5cqi + 0.32rem, 0.875rem);
}

.proteo-generator-panel .proteo-decode-filters-row .proteo-tempo-stamp__body,
.proteo-generator-panel .proteo-decode-filters-row .proteo-tempo-stamp-value {
    font-size: clamp(0.625rem, 5cqi + 0.32rem, 0.875rem);
}

.proteo-generator-panel .proteo-decode-filters-row .proteo-score-settings__title-muted,
.proteo-generator-panel .proteo-decode-filters-row .proteo-score-settings__body,
.proteo-generator-panel .proteo-decode-filters-row .proteo-score-settings__control {
    font-size: clamp(0.5625rem, 4.75cqi + 0.28rem, 0.875rem);
}

.proteo-generator-panel .proteo-decode-filters-row .proteo-score-settings__control--pattern {
    font-size: clamp(0.5rem, 4.25cqi + 0.22rem, 0.6875rem);
}

.proteo-generator-panel .proteo-decode-filters-row .proteo-score-settings--experimental .proteo-decode-panel__title {
    font-size: clamp(0.5rem, 4cqi + 0.22rem, 0.65rem);
}

.proteo-catalog-search .proteo-catalog-filter-bar .proteo-catalog-filter-panel__body {
    font-size: clamp(0.625rem, 5cqi + 0.32rem, 0.875rem);
}

.proteo-search-results {
    margin-top: 1.25rem;
    border: 1px solid var(--proteo-border);
    border-radius: var(--bs-border-radius-lg);
    background: #fafbfc;
    overflow: hidden;
}

.proteo-search-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--proteo-border);
    background: #fff;
}

.proteo-search-loading {
    padding: 1.25rem 1rem;
    font-size: 0.875rem;
    color: var(--proteo-ink-subtle);
}

.proteo-search-table {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.proteo-search-table thead th {
    background: #fff;
    color: var(--proteo-ink-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.proteo-search-table tbody td {
    vertical-align: middle;
}

.proteo-search-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.proteo-search-row:hover,
.proteo-search-row:focus-visible {
    background: var(--proteo-accent-soft);
    outline: none;
}

.proteo-search-row.is-selected {
    background: rgba(20, 184, 166, 0.14);
    box-shadow: inset 3px 0 0 var(--proteo-accent);
}

.proteo-search-col-name {
    font-weight: 600;
    color: var(--proteo-ink);
    min-width: 10rem;
}

.proteo-search-col-accession code {
    font-family: var(--proteo-font-mono);
    font-size: 0.78rem;
    color: var(--proteo-primary);
    background: transparent;
}

.proteo-search-col-entry,
.proteo-search-col-organism,
.proteo-search-col-catalog,
.proteo-search-col-sequence {
    color: var(--proteo-ink-muted);
    white-space: nowrap;
}

.proteo-search-sequence-preview code {
    font-family: var(--proteo-font-mono);
    font-size: 0.78rem;
    color: var(--proteo-ink);
    background: transparent;
}

.proteo-search-copy-fasta {
    color: var(--proteo-primary);
    line-height: 1;
    vertical-align: baseline;
    text-decoration: none;
}

.proteo-search-copy-fasta:hover,
.proteo-search-copy-fasta:focus-visible {
    color: var(--proteo-accent);
}

.proteo-search-col-badges {
    white-space: nowrap;
}

.proteo-search-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--proteo-border);
    background: #fff;
}

.proteo-search-pagination-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.proteo-search-page-size {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.proteo-search-page-size .form-select {
    width: auto;
    min-width: 4.5rem;
}

.proteo-search-pagination .page-link {
    color: var(--proteo-primary);
    border-color: var(--proteo-border);
}

.proteo-search-pagination .page-item.active .page-link {
    color: #fff;
    background: var(--proteo-primary);
    border-color: var(--proteo-primary);
}

.proteo-search-pagination .page-item.active .page-link:hover,
.proteo-search-pagination .page-item.active .page-link:focus {
    color: #fff;
}

.proteo-search-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--proteo-primary);
    background: var(--proteo-accent-soft);
}

.proteo-search-badge--muted {
    color: var(--proteo-ink-muted);
    background: #eef2f7;
}

.proteo-search-message {
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--proteo-border);
}

.proteo-search-message--muted {
    color: var(--proteo-ink-subtle);
    background: #fff;
}

.proteo-search-message--info {
    color: var(--proteo-ink-muted);
    background: #fff;
}

.proteo-search-message--warn {
    color: #92400e;
    background: var(--proteo-warm-soft);
}

@media (max-width: 767.98px) {
    .proteo-search-col-organism,
    .proteo-search-table th:nth-child(4) {
        display: none;
    }

    .proteo-search-pagination {
        flex-direction: column;
        align-items: flex-start;
    }

    .proteo-search-pagination-controls {
        width: 100%;
        justify-content: space-between;
    }
}

.proteo-results.hidden {
    display: none;
}

.proteo-results:not(.hidden) {
    overflow-x: hidden;
    max-width: 100%;
}

.proteo-results,
.proteo-results .card-body,
.proteo-results-mount,
.proteo-results-tab-panels,
.proteo-results-tab-panels .tab-pane {
    min-width: 0;
    max-width: 100%;
}

.proteo-results-mount {
    min-width: 0;
}

.proteo-results-shell {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--proteo-border);
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.proteo-music-sound-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}

.proteo-music-sound-panel__controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
}

/* Label left, select right — same layout for MP3 + instrument (beats legacy #timbres* CSS) */
.proteody-app .proteo-music-panel .proteo-music-field {
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 0.5rem;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    float: none;
}

.proteody-app .proteo-music-panel .proteo-music-field__label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--proteo-ink-muted);
    white-space: nowrap;
}

.proteody-app .proteo-music-panel .proteo-music-field__select.form-select {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 1.625rem;
    min-height: 1.625rem;
    margin: 0;
    padding: 0 1.75rem 0 0.45rem;
    font-size: 0.8125rem;
    line-height: 1.25;
    border-radius: 0.25rem;
    border-color: var(--proteo-border);
    background-color: #fff;
    box-shadow: none;
    box-sizing: border-box;
    float: none;
}

.proteody-app .proteo-music-panel .proteo-music-field__select.form-select:focus {
    border-color: var(--proteo-primary);
    box-shadow: 0 0 0 0.15rem rgba(98, 125, 180, 0.18);
}

.proteo-music-panel__heading {
    display: block;
    margin: 0;
    padding: 0;
    font-family: var(--proteo-font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--proteo-primary);
    min-height: 0.9375rem;
}

.proteo-music-download {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.proteo-music-download__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    width: max-content;
    max-width: 100%;
}

.proteo-download-btn.btn-proteo.btn-sm {
    display: inline-block;
    width: auto;
    min-width: 6.75rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    text-align: center;
    color: #fff !important;
    --bs-btn-color: #fff;
    -webkit-text-fill-color: #fff;
}

.proteo-download-btn.btn-proteo.btn-sm:visited,
.proteo-download-btn.btn-proteo.btn-sm:hover,
.proteo-download-btn.btn-proteo.btn-sm:focus,
.proteo-download-btn.btn-proteo.btn-sm:active {
    color: #fff;
    text-decoration: none;
}

.proteo-download-btn.proteo-mp3-pending,
.proteo-mp3-download.proteo-mp3-pending {
    opacity: 0.55;
    pointer-events: none;
    cursor: wait;
}

.proteo-catalog-tab-panels {
    border: 1px solid #cbd5e1;
    border-top: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 0 0.65rem 0.75rem;
    background: #fff;
}

.proteo-catalog-tabs {
    margin-bottom: 0;
}

.proteo-results-tab-panels {
    overflow-x: hidden;
}

.proteo-results-shell.hidden {
    display: none;
}

.proteo-results-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 0.15rem;
    border-bottom: 2px solid #cbd5e1;
    padding: 0.5rem 0.65rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.proteo-results-tabs .nav-item {
    margin-bottom: 0;
}

.proteo-results-tabs .nav-link {
    color: #475569;
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
    border-bottom: 3px solid transparent;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.55rem 1rem 0.65rem;
    margin-bottom: -2px;
    background: transparent;
}

.proteo-results-tabs .nav-link:hover {
    color: var(--proteo-primary);
    background: rgba(255, 255, 255, 0.65);
    border-bottom-color: var(--proteo-accent-soft);
}

.proteo-results-tabs .nav-link.active {
    color: #0f766e;
    background: #fff;
    border-color: #cbd5e1 #cbd5e1 transparent;
    border-bottom-color: #fff;
    box-shadow: 0 -1px 0 #fff;
}

.proteo-results-tab-panels .tab-pane.bloc {
    margin: 0;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .proteo-results-tabs .nav-link {
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem 0.6rem;
    }
}

.proteo-results .bloc {
    margin-bottom: 1.5rem;
}

@media (max-width: 991.98px) {
    body.proteo-app-shell .proteo-card .card-body,
    body.proteo-app-shell .proteo-hero {
        /* Match page gutter — do not stack another full Bootstrap p-4 inset on narrow viewports. */
        padding-inline: var(--proteo-page-gutter) !important;
    }
}

@media (max-width: 575.98px) {
    .proteo-hero {
        padding-block: 1.25rem !important;
    }

    .proteo-card .card-body {
        padding-block: 1.25rem !important;
    }
}