/* ==========================================================================
   RitmoEdge
   Sistema visual principal
   ========================================================================== */


/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
    --bg: #f7f8fc;
    --bg-soft: #f1f3fa;

    --surface: rgba(255, 255, 255, 0.88);
    --surface-solid: #ffffff;
    --surface-soft: #f8f9fd;

    --text: #121426;
    --text-soft: #4f566b;
    --muted: #858ca1;

    --border: rgba(32, 37, 65, 0.09);
    --border-strong: rgba(110, 70, 255, 0.18);

    --sidebar: #090b18;
    --sidebar-soft: #12162a;
    --sidebar-text: #e8eaff;
    --sidebar-muted: #8f96b3;

    --violet: #7c3aed;
    --violet-bright: #8b5cf6;
    --purple: #a855f7;
    --pink: #ec4899;
    --cyan: #06b6d4;
    --blue: #3b82f6;
    --green: #22c55e;
    --lime: #84cc16;
    --amber: #f59e0b;
    --orange: #f97316;
    --red: #ef4444;

    --gradient-primary:
        linear-gradient(
            135deg,
            #6d28d9 0%,
            #8b5cf6 44%,
            #ec4899 100%
        );

    --gradient-cyan:
        linear-gradient(
            135deg,
            #06b6d4,
            #3b82f6
        );

    --gradient-success:
        linear-gradient(
            135deg,
            #10b981,
            #22c55e
        );

    --shadow-xs:
        0 1px 2px rgba(19, 24, 54, 0.04);

    --shadow-sm:
        0 8px 24px rgba(31, 38, 76, 0.06);

    --shadow-md:
        0 18px 45px rgba(31, 38, 76, 0.09);

    --shadow-glow:
        0 18px 48px rgba(124, 58, 237, 0.19);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --sidebar-width: 248px;
}


/* ==========================================================================
   2. Global
   ========================================================================== */

* {
    box-sizing: border-box;
}

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

body {
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text);
    background: #090b18;

    -webkit-font-smoothing: antialiased;
}

body > .container-fluid {
    padding: 0 !important;
}

.ritmo-page {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

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

a {
    text-decoration: none;
}


/* ==========================================================================
   3. App shell
   ========================================================================== */

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}


/* ==========================================================================
   4. Sidebar
   ========================================================================== */

.app-sidebar {
    position: sticky;
    top: 0;

    height: 100vh;
    padding: 26px 18px 20px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    color: var(--sidebar-text);

    background:
        radial-gradient(
            circle at 20% 5%,
            rgba(124, 58, 237, 0.26),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 48%,
            rgba(236, 72, 153, 0.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #0c0e1d 0%,
            #080a15 100%
        );

    border-right: 1px solid rgba(255, 255, 255, 0.06);
}


/* ==========================================================================
   5. Brand
   ========================================================================== */

.brand {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 4px 8px 30px;
}

.brand-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    color: white;

    border-radius: 14px;

    background: var(--gradient-primary);

    box-shadow:
        0 10px 28px rgba(124, 58, 237, 0.38);
}

.brand-icon svg {
    width: 21px;
    height: 21px;
}

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

.brand-title {
    color: #ffffff;

    font-size: 18px;
    font-weight: 780;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.brand-subtitle {
    display: block;
    margin-top: 5px;

    color: #9298b3;

    font-size: 10px;
    font-weight: 650;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}


/* ==========================================================================
   6. Sidebar navigation
   ========================================================================== */

.sidebar-section-label {
    display: block;

    margin: 8px 12px 10px;

    color: #606884;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.side-nav-item.action-button {
    position: relative;

    display: flex !important;
    align-items: center;

    min-height: 44px;
    padding: 0 12px !important;

    color: var(--sidebar-muted) !important;

    border: 0 !important;
    border-radius: 13px !important;

    background: transparent !important;

    font-size: 13px;
    font-weight: 610;

    text-decoration: none !important;

    transition:
        color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.side-nav-item.action-button:hover {
    color: white !important;

    background:
        rgba(255, 255, 255, 0.055) !important;

    transform: translateX(2px);
}

.side-nav-item.is-active {
    color: white !important;

    background:
        linear-gradient(
            110deg,
            rgba(124, 58, 237, 0.95),
            rgba(139, 92, 246, 0.84)
        ) !important;

    box-shadow:
        0 8px 24px rgba(124, 58, 237, 0.24);
}

.side-nav-item.is-active::before {
    content: "";

    position: absolute;
    left: -18px;
    top: 9px;
    bottom: 9px;

    width: 3px;

    background: #c4b5fd;

    border-radius: 0 4px 4px 0;
}

.side-nav-content {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 11px;
}

.side-nav-icon {
    width: 20px;

    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;
}

.side-nav-icon svg {
    width: 15px;
    height: 15px;
}

.side-nav-label {
    white-space: nowrap;
}


/* ==========================================================================
   7. Sidebar footer
   ========================================================================== */

.sidebar-footer {
    margin-top: auto;

    padding-top: 18px;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-status {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 10px 14px;
}

.sidebar-status-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 999px;

    background: #34d399;

    box-shadow:
        0 0 0 4px rgba(52, 211, 153, 0.10),
        0 0 15px rgba(52, 211, 153, 0.42);
}

.sidebar-status-title,
.sidebar-status-copy {
    display: block;
}

.sidebar-status-title {
    color: #dfe2f4;

    font-size: 11px;
    font-weight: 700;
}

.sidebar-status-copy {
    margin-top: 2px;

    color: #707793;

    font-size: 9px;
}

.theme-control {
    margin-top: 4px;
}


/* ==========================================================================
   8. Main
   ========================================================================== */

.app-main {
    position: relative;

    min-width: 0;
    min-height: 100vh;

    isolation: isolate;

    background:
        linear-gradient(
            180deg,
            rgba(246, 247, 252, 0.05) 0%,
            rgba(246, 247, 252, 0.10) 32%,
            rgba(246, 247, 252, 0.15) 68%,
            rgba(246, 247, 252, 0.20) 100%
        ),
        url("/fondo1.png");

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.app-main::before {
    content: "";

    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: var(--sidebar-width);

    pointer-events: none;
    z-index: -1;

    background:
        radial-gradient(
            circle at 78% 15%,
            rgba(139, 92, 246, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 18% 48%,
            rgba(6, 182, 212, 0.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 74% 82%,
            rgba(236, 72, 153, 0.08),
            transparent 26%
        );
}


/* ==========================================================================
   9. Topbar
   ========================================================================== */

.topbar {
    min-height: 128px;

    padding: 28px 38px 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;

    position: relative;
    z-index: 10;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.42);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.68),
            rgba(255, 255, 255, 0.46)
        );

    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);

    box-shadow:
        0 10px 35px rgba(24, 28, 60, 0.035);
}

.topbar-copy {
    max-width: 760px;
}

.page-eyebrow,
.card-kicker {
    display: block;

    color: var(--violet);

    font-size: 10px;
    font-weight: 820;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.page-title {
    margin: 7px 0 6px;

    font-size: clamp(26px, 3vw, 38px);
    font-weight: 790;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.page-subtitle {
    max-width: 720px;

    margin: 0;

    color: var(--text-soft);

    font-size: 14px;
    line-height: 1.6;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;

    padding-top: 5px;
}

.design-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 11px;

    color: #4b5563;

    background: rgba(255, 255, 255, 0.74);

    border: 1px solid var(--border);
    border-radius: 999px;

    box-shadow: var(--shadow-xs);

    font-size: 10px;
    font-weight: 700;
}

.live-dot {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: var(--green);

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.10);
}

.user-avatar {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    color: #4338ca;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ede9fe,
            #fce7f3
        );

    border: 1px solid rgba(124, 58, 237, 0.14);
}

.user-avatar svg {
    width: 14px;
    height: 14px;
}


/* ==========================================================================
   10. Main inner container
   ========================================================================== */

.main-content-inner {
    position: relative;
    z-index: 2;

    width: min(1420px, 100%);

    margin: 0 auto;

    padding: 28px 38px 46px;

    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* ==========================================================================
   11. Global cards
   ========================================================================== */

.app-card {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.91),
            rgba(255, 255, 255, 0.74)
        );

    border:
        1px solid rgba(255, 255, 255, 0.62);

    border-radius: var(--radius-lg);

    box-shadow:
        0 12px 34px rgba(31, 38, 76, 0.07),
        0 2px 8px rgba(31, 38, 76, 0.025);

    backdrop-filter:
        blur(22px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(125%);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.app-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(139, 92, 246, 0.22);

    box-shadow:
        0 22px 55px rgba(31, 38, 76, 0.10),
        0 8px 24px rgba(124, 58, 237, 0.045);
}

.card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.card-title {
    margin: 5px 0 0;

    font-size: 21px;
    font-weight: 760;
    letter-spacing: -0.025em;
}

.card-title.compact {
    font-size: 17px;
}

.soft-chip {
    display: inline-flex;
    align-items: center;

    padding: 7px 10px;

    color: #6d28d9;

    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 999px;

    background: #f4f0ff;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
}


/* ==========================================================================
   12. Audio input card
   ========================================================================== */

.audio-input-card {
    position: relative;

    padding: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.92),
            rgba(248, 246, 255, 0.78)
        );

    border:
        1px solid rgba(139, 92, 246, 0.18);

    box-shadow:
        0 18px 48px rgba(77, 51, 160, 0.08);
}

.audio-input-card::before {
    content: "";

    position: absolute;
    width: 250px;
    height: 250px;

    right: -120px;
    top: -145px;

    border-radius: 999px;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, 0.13),
            rgba(236, 72, 153, 0.06),
            transparent 70%
        );

    filter: blur(3px);

    pointer-events: none;
}

.audio-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);

    align-items: stretch;
    gap: 14px;

    margin-top: 20px;
}

.audio-action-panel {
    position: relative;

    min-height: 212px;
    padding: 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px dashed rgba(124, 58, 237, 0.28);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(250, 248, 255, 0.92),
            rgba(255, 255, 255, 0.78)
        );

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.audio-action-panel:hover {
    transform: translateY(-2px);

    border-color: rgba(124, 58, 237, 0.50);

    box-shadow:
        0 14px 40px rgba(124, 58, 237, 0.09);
}

.record-panel {
    border-color: rgba(236, 72, 153, 0.25);

    background:
        linear-gradient(
            145deg,
            rgba(255, 247, 252, 0.95),
            rgba(255, 255, 255, 0.82)
        );
}

.record-panel:hover {
    border-color: rgba(236, 72, 153, 0.48);
}

.audio-action-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    margin-bottom: 12px;

    border-radius: 17px;
}

.audio-action-icon svg {
    width: 21px;
    height: 21px;
}

.upload-icon {
    color: #6d28d9;

    background:
        linear-gradient(
            135deg,
            #ede9fe,
            #f5f3ff
        );

    box-shadow:
        0 10px 26px rgba(124, 58, 237, 0.13);
}

.record-icon {
    position: relative;

    color: #db2777;

    background:
        linear-gradient(
            135deg,
            #fce7f3,
            #fff1f2
        );

    box-shadow:
        0 10px 26px rgba(236, 72, 153, 0.12);
}

.record-icon::after {
    content: "";

    position: absolute;
    inset: -6px;

    border: 1px solid rgba(236, 72, 153, 0.20);
    border-radius: 22px;

    animation: recordPulse 2.2s ease-out infinite;
}

@keyframes recordPulse {
    0% {
        opacity: 0.8;
        transform: scale(0.90);
    }

    65% {
        opacity: 0;
        transform: scale(1.17);
    }

    100% {
        opacity: 0;
    }
}

.audio-action-title {
    margin: 0;

    font-size: 15px;
    font-weight: 760;
}

.audio-action-copy {
    max-width: 340px;

    margin: 7px 0 3px;

    color: var(--text-soft);

    font-size: 12px;
    line-height: 1.55;
}

.audio-action-hint {
    margin: 0 0 14px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 650;
}

.audio-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-divider span {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    color: #8c91a4;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: white;

    font-size: 10px;
    font-weight: 700;

    box-shadow: var(--shadow-xs);
}


/* ==========================================================================
   13. Shiny file input
   ========================================================================== */

.audio-file-input {
    width: min(360px, 100%);
}

.audio-file-input .form-group {
    margin: 0;
}

.audio-file-input label.control-label {
    display: none;
}

.audio-file-input .input-group {
    width: 100%;
}

.audio-file-input .form-control {
    min-height: 38px;

    color: #6b7280;

    border-color: rgba(124, 58, 237, 0.14);

    background: white;

    font-size: 10px;
}

.audio-file-input .btn,
.audio-file-input .btn-file {
    min-height: 38px;

    color: white !important;

    border: 0 !important;
    border-radius: 10px !important;

    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #8b5cf6
        ) !important;

    font-size: 10px;
    font-weight: 720;
}


/* ==========================================================================
   14. Audio buttons
   ========================================================================== */

.record-button.btn {
    min-height: 40px;

    padding: 8px 16px;

    color: #be185d;

    border: 1px solid rgba(236, 72, 153, 0.20);
    border-radius: 11px;

    background: white;

    font-size: 11px;
    font-weight: 720;

    box-shadow:
        0 8px 20px rgba(236, 72, 153, 0.07);
}

.record-button.btn:hover {
    color: white;

    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #db2777,
            #f43f5e
        );

    transform: translateY(-1px);
}

.audio-card-footer {
    margin-top: 18px;
    padding-top: 18px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;

    border-top: 1px solid var(--border);
}

.model-control {
    width: min(310px, 100%);
}

.field-label {
    display: block;

    margin-bottom: 6px;

    color: var(--text-soft);

    font-size: 10px;
    font-weight: 720;
}

.model-select .form-group {
    margin: 0;
}

.model-select label {
    display: none;
}

.model-select .form-select,
.model-select select {
    min-height: 40px;

    color: #35384c;

    border:
        1px solid rgba(50, 55, 85, 0.10);

    border-radius: 11px;

    background-color: white;

    font-size: 11px;
    font-weight: 650;

    box-shadow: none;
}

.analyze-button.btn {
    min-width: 170px;
    min-height: 44px;

    padding: 10px 20px;

    color: white;

    border: 0;
    border-radius: 13px;

    background:
        linear-gradient(
            100deg,
            #5b21b6 0%,
            #7c3aed 34%,
            #a855f7 67%,
            #ec4899 100%
        );

    background-size: 200% 100%;

    box-shadow:
        0 14px 30px rgba(124, 58, 237, 0.25),
        0 4px 10px rgba(236, 72, 153, 0.10);

    font-size: 11px;
    font-weight: 780;

    transition:
        transform 170ms ease,
        box-shadow 170ms ease,
        background-position 450ms ease;
}

.analyze-button.btn:hover {
    color: white;

    transform: translateY(-2px) scale(1.01);

    background-position: 100% 0;

    box-shadow:
        0 19px 38px rgba(124, 58, 237, 0.32),
        0 7px 18px rgba(236, 72, 153, 0.16);
}


/* ==========================================================================
   15. Prediction
   ========================================================================== */

.prediction-card {
    min-height: 132px;
    padding: 22px 24px;

    display: grid;
    grid-template-columns:
        minmax(270px, 1fr)
        minmax(300px, 0.9fr)
        auto;

    align-items: center;
    gap: 28px;
}

.prediction-card::after {
    content: "";

    position: absolute;
    left: 0;
    top: 22px;
    bottom: 22px;

    width: 3px;

    background: var(--gradient-primary);

    border-radius: 0 8px 8px 0;
}

.prediction-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.prediction-icon {
    width: 66px;
    height: 66px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    color: white;

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #7c3aed,
            #a855f7 58%,
            #ec4899
        );

    box-shadow:
        0 14px 32px rgba(124, 58, 237, 0.22);
}

.prediction-icon svg {
    width: 27px;
    height: 27px;
}

.result-label,
.confidence-label {
    display: block;

    color: var(--muted);

    font-size: 9px;
    font-weight: 760;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.prediction-genre {
    margin-top: 2px;

    display: inline-block;

    font-size: 30px;
    font-weight: 850;
    letter-spacing: -0.045em;

    background:
        linear-gradient(
            105deg,
            #111322 0%,
            #6d28d9 52%,
            #db2777 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.prediction-caption {
    display: inline-block;

    margin-top: 2px;

    color: #6d28d9;

    font-size: 9px;
    font-weight: 650;
}

.confidence-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 8px;
}

.confidence-value {
    color: #171827;

    font-size: 25px;
    font-weight: 820;
    letter-spacing: -0.04em;
}

.confidence-track {
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: #eceef5;
}

.confidence-fill {
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #22c55e,
            #10b981,
            #06b6d4
        );

    box-shadow:
        0 0 14px rgba(34, 197, 94, 0.30);
}

.confidence-scale {
    display: flex;
    justify-content: space-between;

    margin-top: 5px;

    color: #a0a5b5;

    font-size: 8px;
}

.latency-pill {
    min-width: 118px;
    padding: 11px 13px;

    display: flex;
    align-items: center;
    gap: 10px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--surface-soft);
}

.latency-icon {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    color: #6d28d9;

    border-radius: 9px;

    background: #ede9fe;
}

.latency-icon svg {
    width: 12px;
}

.latency-label,
.latency-value {
    display: block;
}

.latency-label {
    color: var(--muted);

    font-size: 8px;
    font-weight: 690;
}

.latency-value {
    margin-top: 2px;

    color: #323548;

    font-size: 12px;
}


/* ==========================================================================
   16. Signal card
   ========================================================================== */

.signal-card {
    padding: 22px 24px;
}

.quality-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 7px 10px;

    color: #15803d;

    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 999px;

    background: #ecfdf5;

    font-size: 9px;
    font-weight: 740;
}

.quality-badge svg {
    width: 10px;
}

.signal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 1px;

    margin-top: 20px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: var(--border);
}

.signal-stat {
    min-width: 0;
    min-height: 92px;

    padding: 16px;

    display: flex;
    align-items: center;
    gap: 12px;

    background: rgba(255, 255, 255, 0.94);
}

.signal-stat-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 12px;
}

.signal-stat-icon svg {
    width: 14px;
}

.signal-stat-label {
    display: block;

    color: var(--muted);

    font-size: 8px;
    font-weight: 720;
}

.signal-stat-value {
    margin-top: 2px;

    color: #292c3e;

    font-size: 14px;
    font-weight: 790;
}

.signal-stat-detail {
    display: block;

    margin-top: 1px;

    color: #a0a5b5;

    font-size: 8px;
}


/* ==========================================================================
   17. Tone utilities
   ========================================================================== */

.tone-violet {
    color: #6d28d9;
    background: #ede9fe;
}

.tone-pink {
    color: #db2777;
    background: #fce7f3;
}

.tone-cyan {
    color: #0891b2;
    background: #ecfeff;
}

.tone-green {
    color: #16a34a;
    background: #ecfdf5;
}

.tone-amber {
    color: #d97706;
    background: #fffbeb;
}

.tone-bg-violet {
    background: #7c3aed;
}

.tone-bg-pink {
    background: #ec4899;
}

.tone-bg-cyan {
    background: #06b6d4;
}

.tone-bg-green {
    background: #22c55e;
}

.tone-bg-amber {
    background: #f59e0b;
}

.tone-bg-blue {
    background: #3b82f6;
}

.tone-bg-red {
    background: #ef4444;
}

.tone-bg-purple {
    background: #a855f7;
}

.tone-bg-lime {
    background: #84cc16;
}

.tone-bg-orange {
    background: #f97316;
}


/* ==========================================================================
   18. Analytics grid
   ========================================================================== */

.analytics-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(300px, 0.75fr);

    gap: 18px;
}


/* ==========================================================================
   19. Model performance
   ========================================================================== */

.model-performance-card,
.dataset-card {
    padding: 22px 24px;
}

.model-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin-top: 18px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 14px;
}

.model-metric {
    padding: 14px 16px;

    text-align: center;

    background: var(--surface-soft);

    border-right: 1px solid var(--border);
}

.model-metric:last-child {
    border-right: 0;
}

.model-metric-label,
.model-metric-value {
    display: block;
}

.model-metric-label {
    color: var(--muted);

    font-size: 8px;
    font-weight: 720;
}

.model-metric-value {
    margin-top: 2px;

    color: #242637;

    font-size: 17px;
    font-weight: 820;
}

.model-visual-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;

    gap: 18px;

    margin-top: 18px;
}

.model-subpanel {
    min-width: 0;
}

.subpanel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 12px;
}

.subpanel-title {
    color: #35384b;

    font-size: 10px;
    font-weight: 760;
}

.subpanel-caption {
    color: #9da2b2;

    font-size: 8px;
}


/* ==========================================================================
   20. Matrix preview
   ========================================================================== */

.matrix-mini {
    width: min(200px, 100%);

    aspect-ratio: 1;

    display: grid;
    grid-template-columns: repeat(6, 1fr);

    gap: 3px;

    padding: 8px;

    border-radius: 12px;

    background: #f8f7fd;
}

.matrix-cell {
    border-radius: 3px;

    background: #f0edfb;
}

.matrix-cell.level-0 {
    background: #f2f0fb;
}

.matrix-cell.level-1 {
    background: #ddd6fe;
}

.matrix-cell.level-2 {
    background: #c4b5fd;
}

.matrix-cell.level-3 {
    background: #a78bfa;
}

.matrix-cell.level-4 {
    background: #8b5cf6;
}

.matrix-cell.level-5 {
    background: #6d28d9;
}


/* ==========================================================================
   21. Genre bars
   ========================================================================== */

.genre-bars {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.genre-bar-label {
    display: flex;
    justify-content: space-between;

    margin-bottom: 4px;

    color: #64697c;

    font-size: 8px;
    font-weight: 660;
}

.genre-bar-track {
    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background: #f0f1f6;
}

.genre-bar-fill {
    height: 100%;

    border-radius: inherit;
}


/* ==========================================================================
   22. Dataset
   ========================================================================== */

.dataset-content {
    margin-top: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.dataset-donut {
    position: relative;

    width: 150px;
    height: 150px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        conic-gradient(
            #7c3aed 0% 10%,
            #ec4899 10% 20%,
            #06b6d4 20% 30%,
            #22c55e 30% 40%,
            #f59e0b 40% 50%,
            #3b82f6 50% 60%,
            #ef4444 60% 70%,
            #a855f7 70% 80%,
            #84cc16 80% 90%,
            #f97316 90% 100%
        );

    box-shadow:
        0 15px 35px rgba(124, 58, 237, 0.12);
}

.dataset-donut::before {
    content: "";

    position: absolute;
    inset: 27px;

    border-radius: 50%;

    background: white;

    box-shadow:
        inset 0 0 0 1px rgba(30, 35, 60, 0.04);
}

.donut-center {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.donut-value {
    font-size: 26px;
    line-height: 1;
    font-weight: 830;
}

.donut-label {
    margin-top: 5px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 680;
}

.dataset-legend {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 7px 12px;

    margin-top: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #656a7d;

    font-size: 8px;
    font-weight: 650;
}

.legend-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 3px;
}


/* ==========================================================================
   23. History
   ========================================================================== */

.history-card {
    padding: 22px 24px 8px;
}

.text-action.action-button {
    color: #6d28d9 !important;

    border: 0 !important;

    background: transparent !important;

    font-size: 9px;
    font-weight: 760;

    text-decoration: none !important;
}

.history-table-wrapper {
    margin: 16px -24px 0;

    overflow-x: auto;
}

.history-table {
    width: 100%;

    margin: 0;

    border-collapse: collapse;
}

.history-table th {
    padding: 10px 16px;

    color: #969bac;

    background: #fafbfe;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    font-size: 8px;
    font-weight: 760;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.history-table td {
    padding: 13px 16px;

    color: #53586c;

    border-bottom: 1px solid var(--border);

    font-size: 9px;
    vertical-align: middle;
}

.history-file {
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-file-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    color: #6d28d9;

    border-radius: 9px;

    background: #ede9fe;
}

.history-file-icon svg {
    width: 11px;
}

.history-file-copy strong,
.history-file-copy span {
    display: block;
}

.history-file-copy strong {
    color: #34374a;

    font-size: 9px;
}

.history-file-copy span {
    margin-top: 2px;

    color: #9da2b2;

    font-size: 7px;
}

.genre-badge,
.noise-badge,
.completed-badge {
    display: inline-flex;

    padding: 5px 8px;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 720;
}

.genre-badge {
    color: #6d28d9;
    background: #f1edff;
}

.noise-badge {
    color: #b45309;
    background: #fff7e6;
}

.completed-badge {
    color: #15803d;
    background: #ecfdf5;
}

.table-confidence {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-confidence-track {
    width: 60px;
    height: 4px;

    overflow: hidden;

    border-radius: 999px;

    background: #edf0f4;
}

.table-confidence-fill {
    height: 100%;

    border-radius: inherit;

    background: var(--gradient-success);
}


/* ==========================================================================
   24. Footer
   ========================================================================== */

.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 0 0;

    color: rgba(70, 74, 96, 0.65);

    font-size: 8px;

    text-shadow:
        0 1px 8px rgba(255, 255, 255, 0.75);
}

.footer-brand {
    color: #777d91;

    font-weight: 800;
}

.footer-copy::before {
    content: "•";
    margin-right: 8px;
}


/* ==========================================================================
   25. Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d5d8e3;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #bfc3d1;
}


/* ==========================================================================
   26. Tablet
   ========================================================================== */

@media (max-width: 1180px) {

    :root {
        --sidebar-width: 214px;
    }

    .main-content-inner {
        padding-left: 26px;
        padding-right: 26px;
    }

    .topbar {
        padding-left: 26px;
        padding-right: 26px;
    }

    .prediction-card {
        grid-template-columns: 1fr 1fr;
    }

    .latency-pill {
        grid-column: 1 / -1;

        width: fit-content;
    }

    .signal-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .dataset-content {
        flex-direction: row;
        justify-content: center;
        gap: 40px;
    }

    .dataset-legend {
        width: auto;
        min-width: 260px;
        margin-top: 0;
    }
}


/* ==========================================================================
   27. Compact desktop
   ========================================================================== */

@media (max-width: 920px) {

    :root {
        --sidebar-width: 78px;
    }

    .app-main::before {
        left: 78px;
    }

    .app-main {
        background-position: center top;
    }

    .app-sidebar {
        padding-left: 12px;
        padding-right: 12px;
    }

    .brand {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .brand-copy,
    .sidebar-section-label,
    .side-nav-label,
    .sidebar-status {
        display: none;
    }

    .side-nav-item.action-button {
        justify-content: center;

        padding: 0 !important;
    }

    .side-nav-content {
        justify-content: center;
    }

    .side-nav-item.is-active::before {
        left: -12px;
    }

    .sidebar-footer {
        display: flex;
        justify-content: center;
    }

    .audio-actions {
        grid-template-columns: 1fr;
    }

    .audio-divider {
        height: 28px;
    }

    .model-visual-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   28. Mobile
   ========================================================================== */

@media (max-width: 720px) {

    .app-main {
        background-attachment: scroll;
        background-position: center top;

        background:
            linear-gradient(
                180deg,
                rgba(246, 247, 252, 0.73) 0%,
                rgba(246, 247, 252, 0.84) 100%
            ),
            url("/fondo1.png");

        background-size: cover;
    }

    .app-main::before {
        left: 0;
    }

    .app-shell {
        display: block;
    }

    .app-sidebar {
        position: relative;

        width: 100%;
        height: auto;

        padding: 12px 16px;

        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    .brand {
        padding: 0;
    }

    .brand-icon {
        width: 38px;
        height: 38px;

        border-radius: 12px;
    }

    .side-nav {
        flex: 1;

        flex-direction: row;
        justify-content: flex-end;
    }

    .side-nav-item.action-button {
        width: 38px;
        min-height: 38px;
    }

    .side-nav-item.is-active::before,
    .sidebar-footer {
        display: none;
    }

    .topbar {
        min-height: auto;

        padding: 22px 18px;

        flex-direction: column;
        gap: 14px;
    }

    .topbar-actions {
        padding-top: 0;
    }

    .main-content-inner {
        padding: 18px;
    }

    .audio-input-card,
    .prediction-card,
    .signal-card,
    .model-performance-card,
    .dataset-card,
    .history-card {
        padding: 18px;
    }

    .audio-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .model-control,
    .analyze-button.btn {
        width: 100%;
    }

    .prediction-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .prediction-main {
        align-items: center;
    }

    .latency-pill {
        width: 100%;
    }

    .signal-grid {
        grid-template-columns: 1fr;
    }

    .model-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .model-metric:nth-child(2) {
        border-right: 0;
    }

    .model-metric:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border);
    }

    .dataset-content {
        flex-direction: column;
    }

    .dataset-legend {
        width: 100%;
        margin-top: 20px;
    }

    .history-table-wrapper {
        margin-left: -18px;
        margin-right: -18px;
    }
}


/* ==========================================================================
   29. Accessibility
   ========================================================================== */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}


/* ========================================================================== 
   30. RitmoEdge · Latent analysis card
   ========================================================================== */

.ritmoedge-card.latent-analysis-card {
    width: 100%;
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 22px;
    background: linear-gradient(
        145deg,
        rgba(239, 238, 246, 0.94) 0%,
        rgba(228, 226, 238, 0.92) 100%
    );
    box-shadow: 0 12px 30px rgba(26, 19, 55, 0.1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ritmoedge-card.latent-analysis-card > .card-header,
.ritmoedge-card.latent-analysis-card > .card-footer {
    border: 0;
    background: transparent;
}

.latent-card-header-wrapper {
    padding: 16px 18px 8px;
}

.latent-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.latent-card-heading {
    min-width: 0;
}

.latent-card-eyebrow {
    margin-bottom: 5px;
    color: #7136dd;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.13em;
}

.latent-card-heading h3 {
    margin: 0;
    color: #191526;
    font-size: 1.08rem;
    font-weight: 750;
    line-height: 1.2;
}

.latent-card-heading p {
    margin: 5px 0 0;
    color: #777182;
    font-size: 0.68rem;
    line-height: 1.35;
}

.latent-card-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0 10px;
    border: 1px solid rgba(113, 54, 221, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 3px 9px rgba(71, 49, 113, 0.06);
    color: #7136dd;
    font-size: 0.59rem;
    font-weight: 800;
}

.latent-card-body {
    padding: 6px 18px 8px !important;
}


.latent-card-plot {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(112, 91, 150, 0.08);
    border-radius: 14px;
    background: linear-gradient(
        145deg,
        rgba(242, 240, 247, 0.96) 0%,
        rgba(236, 233, 244, 0.94) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.latent-card-plot .shiny-widget-output,
.latent-card-plot .plotly,
.latent-card-plot .js-plotly-plot,
.latent-card-plot .plot-container {
    width: 100% !important;
}

.latent-card-footer {
    padding: 7px 18px 12px !important;
}

.latent-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: #8a8494;
    font-size: 0.58rem;
}

.latent-meta-value {
    color: #4d4659;
    font-weight: 750;
}

.latent-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(113, 54, 221, 0.44);
}

.latent-analysis-card[data-full-screen="true"] {
    padding: 14px;
    background: #f4f3f8;
}

.latent-analysis-card[data-full-screen="true"] .latent-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.latent-analysis-card[data-full-screen="true"] .latent-card-plot {
    flex: 1 1 auto;
    min-height: 430px;
}

.latent-analysis-card[data-full-screen="true"]
    .latent-card-plot
    .shiny-widget-output {
    height: calc(100dvh - 210px) !important;
    min-height: 430px;
}

.latent-card-plot .modebar {
    opacity: 0.28;
    transition: opacity 160ms ease;
}

.latent-card-plot:hover .modebar {
    opacity: 0.8;
}

@media (max-width: 720px) {
    .latent-card-header-wrapper {
        padding: 13px 12px 7px;
    }

    .latent-card-body {
        padding: 5px 12px 7px !important;
    }

    .latent-card-footer {
        padding: 6px 12px 10px !important;
    }

    .latent-card-heading h3 {
        font-size: 1rem;
    }

    .latent-card-meta {
        gap: 5px;
        font-size: 0.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .latent-card-plot .modebar {
        transition: none;
    }
}

/* Captura y validación de audio */

.recording-preview,
.upload-audio-preview {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.recording-audio-player,
.uploaded-audio-player {
    width: min(430px, 100%);
    height: 42px;
    border-radius: 999px;
    background: rgba(245, 247, 250, 0.92);
    box-shadow: 0 6px 18px rgba(31, 38, 76, 0.06);
}

.record-button.is-recording {
    color: white !important;
    background: linear-gradient(135deg, #dc2626, #f43f5e) !important;
    box-shadow:
        0 0 0 5px rgba(244, 63, 94, 0.12),
        0 10px 28px rgba(244, 63, 94, 0.24);
    animation: recordingButtonPulse 1.5s ease-in-out infinite;
}

@keyframes recordingButtonPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

.audio-debug-card {
    padding: 18px 20px;
    color: #25283b;
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 12px 30px rgba(30, 40, 70, 0.06);
    backdrop-filter: blur(16px);
}

.audio-debug-card h4 {
    margin: 0 0 10px;
    color: #15803d;
    font-size: 14px;
    font-weight: 800;
}

.audio-debug-card p {
    margin: 4px 0;
    color: #61667a;
    font-size: 10px;
}

.audio-debug-empty {
    padding: 12px 16px;
    color: #8b90a2;
    font-size: 10px;
}

.audio-debug-error {
    padding: 16px 18px;
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 14px;
    background: rgba(254, 242, 242, 0.92);
}

@media (prefers-reduced-motion: reduce) {
    .record-button.is-recording {
        animation: none;
    }
}

/* ==========================================================================
   RitmoEdge Decision Lab
   ========================================================================== */

.sampling-config {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 14px;
    background: rgba(248, 246, 255, 0.65);
}

.sampling-config summary {
    cursor: pointer;
    color: #6d28d9;
    font-size: 10px;
    font-weight: 760;
}

.sampling-config summary svg {
    width: 12px;
    height: 12px;
}

.sampling-controls-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.sampling-controls-grid .form-group {
    margin: 0;
}

.sampling-controls-grid label.control-label {
    display: none;
}

.sampling-controls-grid select,
.sampling-controls-grid input {
    min-height: 38px;
    border: 1px solid rgba(124, 58, 237, 0.14);
    border-radius: 10px;
    font-size: 10px;
}

.inference-lab {
    position: relative;
    padding: 22px;
    overflow: hidden;
    color: #e8eaff;
    border: 1px solid rgba(139, 92, 246, 0.20);
    border-radius: 26px;
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(124, 58, 237, 0.21),
            transparent 28%
        ),
        radial-gradient(
            circle at 91% 18%,
            rgba(6, 182, 212, 0.13),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            rgba(10, 12, 29, 0.97),
            rgba(15, 17, 38, 0.94)
        );
    box-shadow: 0 30px 80px rgba(18, 13, 50, 0.20);
}

.lab-hero {
    padding: 24px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.065),
        rgba(255, 255, 255, 0.025)
    );
    backdrop-filter: blur(20px);
}

.lab-hero-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.lab-eyebrow {
    color: #22d3ee;
    font-size: 9px;
    font-weight: 830;
    letter-spacing: 0.18em;
}

.lab-title {
    margin: 4px 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 820;
}

.lab-subtitle {
    margin: 0;
    color: #9ca3c7;
    font-size: 10px;
}

.lab-seed {
    padding: 6px 10px;
    color: #c4b5fd;
    border: 1px solid rgba(167, 139, 250, 0.20);
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.10);
    font-size: 8px;
    font-weight: 800;
}

.decision-core {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 24px 0;
}

.decision-ring {
    --decision-p: 0;
    --decision-color: #8b5cf6;
    position: relative;
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(
        var(--decision-color) calc(var(--decision-p) * 1%),
        rgba(255, 255, 255, 0.07) 0
    );
    box-shadow: 0 0 45px color-mix(
        in srgb,
        var(--decision-color) 22%,
        transparent
    );
}

.decision-ring::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #111428;
}

.decision-ring-inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

.decision-ring-value {
    display: block;
    color: white;
    font-size: 22px;
    font-weight: 850;
}

.decision-ring-label {
    color: #79809e;
    font-size: 8px;
}

.decision-label {
    color: #747b9b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.decision-genre {
    margin: 2px 0;
    font-size: 31px;
    font-weight: 880;
    letter-spacing: -0.045em;
    background: linear-gradient(90deg, #ffffff, #c4b5fd, #22d3ee);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.decision-method {
    color: #8e95b4;
    font-size: 9px;
}

.lab-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
}

.lab-kpi {
    padding: 13px;
    text-align: center;
    background: rgba(8, 10, 24, 0.62);
}

.lab-kpi strong,
.lab-kpi span {
    display: block;
}

.lab-kpi strong {
    color: white;
    font-size: 15px;
    font-weight: 820;
}

.lab-kpi span {
    margin-top: 2px;
    color: #747b98;
    font-size: 7px;
    font-weight: 700;
}

.decision-viz-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 18px;
    margin-bottom: 18px;
}

.lab-chart-card.card {
    overflow: hidden;
    color: #e8eaff;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: rgba(10, 12, 29, 0.63);
    box-shadow: none;
}

.lab-chart-card .card-header {
    color: #dfe2ff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
    font-size: 10px;
    font-weight: 750;
}

.chunk-section {
    margin-top: 24px;
}

.lab-section-title {
    margin: 5px 0 14px;
    color: white;
    font-size: 17px;
    font-weight: 790;
}

.chunk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.chunk-card {
    position: relative;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.055),
        rgba(255, 255, 255, 0.018)
    );
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.chunk-card:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.25);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}

.chunk-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chunk-id {
    color: #c4b5fd;
    font-size: 9px;
    font-weight: 850;
}

.chunk-time {
    color: #747b99;
    font-size: 7px;
}

.chunk-ring {
    --chunk-p: 0;
    --chunk-color: #8b5cf6;
    position: relative;
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin: 13px auto 8px;
    border-radius: 50%;
    background: conic-gradient(
        var(--chunk-color) calc(var(--chunk-p) * 1%),
        rgba(255, 255, 255, 0.07) 0
    );
}

.chunk-ring::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #12152a;
}

.chunk-ring-inner {
    position: relative;
    z-index: 2;
    color: white;
    font-size: 13px;
    font-weight: 830;
}

.chunk-genre {
    text-align: center;
    font-size: 10px;
    font-weight: 850;
}

.chunk-second,
.chunk-microstat {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 7px;
    color: #7e85a2;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    font-size: 7px;
}

.lab-empty,
.lab-loading,
.lab-error {
    padding: 30px;
    color: #9ca3bd;
    text-align: center;
}

.lab-loading strong,
.lab-loading span {
    display: block;
}

.lab-error {
    color: #fda4af;
}

.lab-error svg {
    width: 16px;
    margin-right: 8px;
}

.lab-loader {
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: #8b5cf6;
    border-right-color: #22d3ee;
    border-radius: 50%;
    animation: labSpin 0.8s linear infinite;
}

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

@media (max-width: 1000px) {
    .decision-viz-grid {
        grid-template-columns: 1fr;
    }

    .lab-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    .sampling-controls-grid {
        grid-template-columns: 1fr;
    }

    .lab-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .decision-core {
        flex-direction: column;
        text-align: center;
    }

    .inference-lab {
        padding: 14px;
        border-radius: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lab-loader {
        animation: none;
    }

    .chunk-card {
        transition: none;
    }
}

/* ==========================================================================
   RITMOEDGE · MODEL INTELLIGENCE LAB
   ========================================================================== */

.model-intelligence-lab {
    position: relative;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(124, 58, 237, 0.23),
            transparent 28%
        ),
        radial-gradient(
            circle at 94% 16%,
            rgba(34, 211, 238, 0.12),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            rgba(9, 11, 28, 0.98),
            rgba(15, 18, 40, 0.96)
        );
    box-shadow: 0 30px 85px rgba(8, 8, 35, 0.25);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.metrics-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.065),
        rgba(255, 255, 255, 0.018)
    );
    backdrop-filter: blur(20px);
}

.metrics-eyebrow,
.metrics-card-eyebrow {
    display: block;
    color: #22d3ee;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.18em;
}

.metrics-hero-title {
    margin: 5px 0 2px;
    color: #ffffff;
    font-size: 26px;
    font-weight: 850;
    letter-spacing: -0.035em;
}

.metrics-hero-subtitle {
    margin: 0;
    color: #9ba3c5;
    font-size: 10px;
}

.metrics-model-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.metrics-model-chip {
    padding: 7px 10px;
    color: #c4b5fd;
    border: 1px solid rgba(167, 139, 250, 0.18);
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.08);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.metrics-model-chip.strong {
    color: #ffffff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    box-shadow: 0 7px 20px rgba(124, 58, 237, 0.25);
}

/* --------------------------------------------------------------------------
   KPI STRIP
   -------------------------------------------------------------------------- */

.metrics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) minmax(135px, 0.8fr);
    gap: 1px;
    margin: 14px 0 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.06);
}

.metrics-kpi,
.metrics-dataset-kpi {
    padding: 16px;
    background: rgba(7, 9, 23, 0.62);
}

.metrics-kpi {
    text-align: center;
}

.metrics-kpi-label {
    display: block;
    min-height: 12px;
    color: #8188aa;
    font-size: 7px;
    font-weight: 720;
}

.metrics-kpi-value {
    display: block;
    margin-top: 4px;
    color: #ffffff;
    font-size: 21px;
    font-weight: 860;
    letter-spacing: -0.04em;
}

.metrics-kpi-raw {
    display: block;
    color: #646b8c;
    font-size: 7px;
    font-variant-numeric: tabular-nums;
}

.metrics-kpi-track {
    height: 3px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.metrics-kpi-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8b5cf6, #ec4899, #22d3ee);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.32);
}

.metrics-dataset-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.metrics-dataset-kpi strong {
    color: #22d3ee;
    font-size: 18px;
    font-weight: 850;
}

.metrics-dataset-kpi span {
    margin-top: 2px;
    color: #737a9c;
    font-size: 7px;
}

/* --------------------------------------------------------------------------
   ANALYTICS
   -------------------------------------------------------------------------- */

.metrics-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 16px;
}

.metrics-analytics-card,
.metrics-validation-card,
.metrics-insights-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 19px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.045),
        rgba(255, 255, 255, 0.015)
    );
    backdrop-filter: blur(16px);
}

.metrics-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px 4px;
}

.metrics-card-title {
    margin: 3px 0 0;
    color: #f2f3ff;
    font-size: 13px;
    font-weight: 780;
}

/* --------------------------------------------------------------------------
   RADIO PILLS
   -------------------------------------------------------------------------- */

.metrics-toggle .shiny-input-radiogroup {
    margin: 0;
}

.metrics-toggle .control-label {
    display: none;
}

.metrics-toggle .form-check {
    display: inline-flex;
    margin: 0 3px 3px 0;
    padding: 0;
}

.metrics-toggle .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.metrics-toggle .form-check-label {
    padding: 5px 9px;
    cursor: pointer;
    color: #7d85a7;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    font-size: 7px;
    font-weight: 760;
    transition: all 160ms ease;
}

.metrics-toggle .form-check-input:checked + .form-check-label {
    color: #ffffff;
    border-color: rgba(139, 92, 246, 0.35);
    background: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.45),
        rgba(168, 85, 247, 0.28)
    );
    box-shadow: 0 5px 15px rgba(124, 58, 237, 0.16);
}

/* --------------------------------------------------------------------------
   SECONDARY
   -------------------------------------------------------------------------- */

.metrics-secondary-grid {
    display: grid;
    grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.28fr);
    gap: 16px;
    margin-top: 16px;
}

.metrics-validation-card,
.metrics-insights-card {
    padding: 16px;
}

/* Validation */

.validation-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin: 13px 0 5px;
}

.validation-stat {
    padding: 9px 7px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.14);
}

.validation-stat strong,
.validation-stat span {
    display: block;
}

.validation-stat strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 830;
}

.validation-stat span {
    margin-top: 2px;
    color: #6f7698;
    font-size: 6px;
}

/* --------------------------------------------------------------------------
   INSIGHTS
   -------------------------------------------------------------------------- */

.metrics-insights-grid {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.metrics-insight {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 14px;
    background: rgba(5, 7, 20, 0.28);
    transition:
        transform 160ms ease,
        border-color 160ms ease;
}

.metrics-insight:hover {
    transform: translateX(3px);
    border-color: rgba(139, 92, 246, 0.24);
}

.insight-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 900;
}

.insight-icon.best {
    color: #c4b5fd;
    background: rgba(124, 58, 237, 0.16);
}

.insight-icon.warning {
    color: #fda4af;
    background: rgba(244, 63, 94, 0.12);
}

.insight-icon.confusion {
    color: #67e8f9;
    background: rgba(6, 182, 212, 0.12);
}

.insight-label {
    display: block;
    margin-bottom: 2px;
    color: #6f7697;
    font-size: 7px;
    font-weight: 770;
    letter-spacing: 0.05em;
}

.metrics-insight strong {
    color: #f5f6ff;
    font-size: 10px;
}

.metrics-insight p {
    margin: 2px 0 0;
    color: #777f9f;
    font-size: 8px;
}

/* --------------------------------------------------------------------------
   TRACEABILITY
   -------------------------------------------------------------------------- */

.metrics-traceability {
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 14px;
    background: rgba(4, 6, 18, 0.26);
}

.metrics-traceability summary {
    padding: 11px 14px;
    cursor: pointer;
    color: #8f96b8;
    font-size: 8px;
    font-weight: 760;
    user-select: none;
}

.metrics-trace-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.04);
}

.metrics-trace-grid > div {
    min-width: 0;
    padding: 10px 13px;
    background: rgba(8, 10, 25, 0.85);
}

.metrics-trace-grid span {
    display: block;
    margin-bottom: 3px;
    color: #626a8c;
    font-size: 6px;
    font-weight: 730;
}

.metrics-trace-grid code {
    display: block;
    overflow: hidden;
    color: #b8bee0;
    background: transparent;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   UNAVAILABLE
   -------------------------------------------------------------------------- */

.metrics-unavailable {
    opacity: 0.82;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1150px) {
    .metrics-main-grid,
    .metrics-secondary-grid {
        grid-template-columns: 1fr;
    }

    .metrics-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .model-intelligence-lab {
        padding: 14px;
    }

    .metrics-hero {
        flex-direction: column;
    }

    .metrics-model-badges {
        justify-content: flex-start;
    }

    .metrics-kpi-grid {
        grid-template-columns: 1fr;
    }

    .metrics-card-header {
        flex-direction: column;
    }

    .validation-stats {
        grid-template-columns: 1fr;
    }

    .metrics-trace-grid {
        grid-template-columns: 1fr;
    }
}