/* =========================================================================
   ESTILOS GENERALES Y CONFIGURACIÓN BASE
   ========================================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Pavira: acciones contextuales del historial. El botón solo aparece después
   de seleccionar la fila, tal como ocurre en asistentes de conversación. */
.pavira-history-row {
    position: relative;
    width: 248px;
    min-height: 40px;
    overflow: visible;
}

.pavira-history-row .history-item {
    padding-right: 44px !important;
}

.pavira-history-row .pavira-history-pin {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: #5f6368;
    flex: 0 0 auto;
}

.pavira-history-pin svg,
.pavira-history-actions-btn svg,
.pavira-history-menu-item svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pavira-history-actions-btn {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #444746;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}

.pavira-history-row.is-action-selected .pavira-history-actions-btn,
.pavira-history-row.is-menu-open .pavira-history-actions-btn {
    opacity: 1;
    pointer-events: auto;
}

.pavira-history-actions-btn:hover,
.pavira-history-actions-btn:focus-visible {
    background: #dfe3e8;
    outline: none;
}

.pavira-history-menu {
    position: absolute;
    top: 38px;
    right: 4px;
    z-index: 50;
    width: 176px;
    padding: 6px;
    border: 1px solid #e0e3e7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(32, 33, 36, 0.22);
}

.pavira-history-menu-item {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #202124;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pavira-history-menu-item:hover,
.pavira-history-menu-item:focus-visible {
    background: #f1f3f4;
    outline: none;
}

.pavira-history-menu-item.is-danger {
    color: #b3261e;
}

.sidebar.collapsed .pavira-history-row {
    width: 40px;
}

.sidebar.collapsed .pavira-history-actions-btn,
.sidebar.collapsed .pavira-history-menu,
.sidebar.collapsed .pavira-history-pin {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .pavira-history-row .pavira-history-pin,
    .pavira-history-actions-btn {
        color: #c4c7c5;
    }

    .pavira-history-actions-btn:hover,
    .pavira-history-actions-btn:focus-visible {
        background: #484b4f;
    }

    .pavira-history-menu {
        border-color: #444746;
        background: #2b2d30;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }

    .pavira-history-menu-item {
        color: #e8eaed;
    }

    .pavira-history-menu-item:hover,
    .pavira-history-menu-item:focus-visible {
        background: #3c4043;
    }

    .pavira-history-menu-item.is-danger {
        color: #f28b82;
    }
}

:root {
    --dashboard-boot-input-y: 59%;
}

body {
    background-color: #ffffff;
    height: 100vh;
    display: flex;
    color: #1f1f1f;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.labs-action-feedback {
    position: fixed;
    inset: 0 0 auto;
    z-index: 12050;
    height: 0;
    color: #202124;
    pointer-events: none;
}

.labs-action-feedback[hidden] {
    display: none !important;
}

.labs-action-feedback-bar {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    overflow: hidden;
    background: rgba(26, 115, 232, 0.18);
    transition: opacity 160ms ease;
}

.labs-action-feedback-bar::before,
.labs-action-feedback-bar::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: 999px;
    background: #1a73e8;
    transform: translateX(-115%);
    animation: labs-action-progress 1.45s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.labs-action-feedback-bar::after {
    width: 24%;
    background: #8ab4f8;
    animation-delay: 0.44s;
}

.labs-action-feedback-card {
    position: absolute;
    top: 18px;
    right: clamp(16px, 3vw, 28px);
    display: inline-flex;
    min-height: 48px;
    max-width: min(430px, calc(100vw - 32px));
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 12px;
    border: 1px solid #dadce0;
    border-radius: 14px;
    background: #ffffff;
    color: #202124;
    box-shadow: 0 8px 28px rgba(60, 64, 67, 0.24);
}

.labs-action-feedback-card strong {
    min-width: 0;
    color: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.labs-action-feedback-spinner {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 3px solid rgba(26, 115, 232, 0.2);
    border-top-color: #1a73e8;
    border-radius: 50%;
    animation: labs-action-spin 720ms linear infinite;
}

.labs-action-feedback-result {
    display: none;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 800;
}

.labs-action-feedback[data-state="success"] .labs-action-feedback-bar,
.labs-action-feedback[data-state="error"] .labs-action-feedback-bar {
    opacity: 0;
}

.labs-action-feedback[data-state="success"] .labs-action-feedback-spinner,
.labs-action-feedback[data-state="error"] .labs-action-feedback-spinner {
    display: none;
}

.labs-action-feedback[data-state="success"] .labs-action-feedback-result,
.labs-action-feedback[data-state="error"] .labs-action-feedback-result {
    display: grid;
}

.labs-action-feedback[data-state="success"] .labs-action-feedback-result {
    background: #188038;
}

.labs-action-feedback[data-state="success"] .labs-action-feedback-result::before {
    content: "✓";
}

.labs-action-feedback[data-state="error"] .labs-action-feedback-result {
    background: #d93025;
}

.labs-action-feedback[data-state="error"] .labs-action-feedback-result::before {
    content: "!";
}

body.labs-studio-action-busy {
    cursor: progress;
}

@keyframes labs-action-progress {
    0% { transform: translateX(-115%); }
    58% { transform: translateX(165%); }
    100% { transform: translateX(340%); }
}

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

@media (prefers-reduced-motion: reduce) {
    .labs-action-feedback-bar::before,
    .labs-action-feedback-bar::after,
    .labs-action-feedback-spinner {
        animation-duration: 2.4s;
    }
}

@media (prefers-color-scheme: dark) {
    .labs-action-feedback-card {
        border-color: #3c4043;
        background: #303134;
        color: #f1f3f4;
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
    }

    .labs-action-feedback-bar {
        background: rgba(138, 180, 248, 0.18);
    }

    .labs-action-feedback-spinner {
        border-color: rgba(138, 180, 248, 0.22);
        border-top-color: #8ab4f8;
    }
}

.labs-payment-toast {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 1000;
    width: min(360px, calc(100vw - 32px));
    padding: 14px 16px;
    border: 1px solid #f1f3f4;
    border-radius: 16px;
    background: #f1f3f4;
    color: #3c4043;
    box-shadow: none;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.labs-payment-toast[hidden] {
    display: none;
}

.labs-payment-toast.is-showing {
    opacity: 1;
    transform: translateY(0);
}

.labs-payment-toast strong,
.labs-payment-toast span {
    display: block;
    overflow-wrap: anywhere;
}

.labs-payment-toast strong {
    color: #202124;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.3;
}

.labs-payment-toast span {
    margin-top: 4px;
    color: #5f6368;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.45;
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    user-select: none;
}

body.dashboard-hydrating {
    cursor: default;
}

body.dashboard-auth-pending .app-layout {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.dashboard-hydrating .app-layout {
    position: relative;
}

body.dashboard-hydrating .sidebar {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-18px);
    pointer-events: none;
    overflow: hidden;
}

body.dashboard-hydrating.dashboard-boot-reveal .sidebar {
    width: 280px !important;
    min-width: 280px !important;
    padding: 16px !important;
    border-right: 1px solid #f8f9fa !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition: width 420ms cubic-bezier(0.2, 0, 0, 1),
        min-width 420ms cubic-bezier(0.2, 0, 0, 1),
        opacity 0s,
        transform 420ms cubic-bezier(0.2, 0, 0, 1);
}

body.dashboard-hydrating .main-panel {
    width: 100vw;
    flex: 1 1 100vw;
    justify-content: center;
    overflow: hidden;
}

body.dashboard-hydrating.dashboard-boot-reveal .main-panel {
    width: calc(100vw - 280px);
    flex: 1 1 auto;
    justify-content: flex-start;
    transition: width 420ms cubic-bezier(0.2, 0, 0, 1),
        flex-basis 420ms cubic-bezier(0.2, 0, 0, 1);
}

body.dashboard-hydrating .chat-header,
body.dashboard-hydrating .chat-messages,
body.dashboard-hydrating .empty-spacer,
body.dashboard-hydrating .disclaimer-text {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.dashboard-hydrating .empty-spacer {
    height: 0 !important;
}

body.dashboard-hydrating .chat-input-container {
    position: absolute;
    top: var(--dashboard-boot-input-y);
    left: 50%;
    width: 100%;
    max-width: 850px;
    padding: 12px 24px 24px 24px;
    margin: 0;
    transform: translate(-50%, -50%);
    z-index: 4;
    opacity: 0;
    transition: top 520ms cubic-bezier(0.2, 0, 0, 1),
        left 420ms cubic-bezier(0.2, 0, 0, 1),
        opacity 0s;
}

body.dashboard-hydrating.dashboard-boot-input .chat-input-container {
    opacity: 1;
}

body.dashboard-hydrating.dashboard-boot-reveal .chat-input-container {
    top: var(--dashboard-boot-input-y);
    left: 50%;
}

body.dashboard-hydrating.dashboard-boot-reveal .chat-header,
body.dashboard-hydrating.dashboard-boot-reveal .empty-spacer,
body.dashboard-hydrating.dashboard-boot-reveal .disclaimer-text {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0s,
        visibility 0s linear 0s;
}

body.dashboard-hydrating.dashboard-boot-reveal .empty-spacer {
    height: 40vh !important;
}

.app-layout {
    display: flex;
    width: 100vw;
    height: 100vh;
}

/* =========================================================================
   BARRA LATERAL (ESTILO GEMINI & MATEMÁTICA DE PRECISIÓN)
   ========================================================================= */
.sidebar {
    width: 280px;
    background: #f8f9fa;
    border-right: 1px solid #f8f9fa;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    z-index: 10;
    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1);
    overflow: visible;
    white-space: nowrap;
}

.sidebar.collapsed {
    width: 72px;
}

/* Transición fluida para todos los textos de la barra lateral */
.brand-text,
.powered-by-text,
.btn-text,
.menu-text,
.sidebar-section-title,
.profile-info {
    opacity: 1;
    max-width: 200px;
    margin-left: 12px;
    transition: max-width 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0s;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

/* La cabecera (logo, nombre, powered by) no tiene margin-left extra como los botones */
.brand-text {
    margin-left: 0;
}

.powered-by-text {
    margin-left: 8px;
    margin-top: -8px;
    line-height: 1;
    letter-spacing: 0 !important;
}

.sidebar-section-title {
    margin-left: 12px;
    margin-bottom: 8px;
    max-height: 20px;
    font-size: 0.85rem;
    color: #444746;
    font-weight: 500;
}

/* Ocultamiento de textos al colapsar */
/* 1. Textos en botones horizontales: no modifican el centro del icono. */
.sidebar.collapsed .brand-text,
.sidebar.collapsed .btn-text,
.sidebar.collapsed .menu-text,
.sidebar.collapsed .profile-info {
    opacity: 0 !important;
    max-width: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    pointer-events: none;
    border: none;
    overflow: hidden;
}

/* 2. Textos estructurales verticales: solo se vuelven invisibles. */
.sidebar.collapsed .powered-by-text,
.sidebar.collapsed .sidebar-section-title {
    opacity: 0 !important;
}

/* Cabecera de la barra lateral */
.sidebar-header {
    display: flex !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
    margin-bottom: 24px;
    position: relative;
    width: 100%;
}

/* Botón/Logo interactivo */
/* Botón/Logo interactivo */
#open-sidebar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 100%;
    height: 40px;
    border-radius: 20px;
    transition: background 0s;
    padding: 0 8px !important;
    /* 8px padding + 24px logo + 8px = 40px perfecto */
    box-sizing: border-box;
    cursor: default !important;
    justify-content: flex-start !important;
}

.sidebar:not(.collapsed) #open-sidebar-logo {
    pointer-events: none;
}

.sidebar.collapsed #open-sidebar-logo {
    width: 40px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    background: transparent;
    pointer-events: auto;
}

.sidebar.collapsed #open-sidebar-logo:hover {
    background: #e2e8f0;
}

/* Imagen del logo */
.sidebar-logo-img {
    width: 0 !important;
    height: 24px !important;
    margin-right: 0 !important;
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.8);
    filter: invert(1) brightness(0);
    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0s, transform 0.3s cubic-bezier(0.2, 0, 0, 1);
    position: relative;
    z-index: 1;
}

.sidebar.collapsed .sidebar-logo-img {
    width: 24px !important;
    margin-right: 0 !important;
    opacity: 1;
    transform: scale(1);
}

.brand-text {
    font-size: 1.25rem;
    font-weight: 500;
    color: #1f1f1f;
    letter-spacing: 0;
}

.brand-text span {
    font-weight: 400;
    color: #5f6368;
}

.powered-by-text {
    font-size: 0.65rem;
    color: #747775;
    font-weight: 600;
    letter-spacing: 0;
    padding-left: 0;
}

#close-sidebar-btn {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #5f6368 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 9px !important;
    /* 9px + 22px SVG + 9px = centro estable */
    transition: background 0s, right 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0s  !important;
    z-index: 2;
}

.sidebar.collapsed #close-sidebar-btn {
    opacity: 0 !important;
    pointer-events: none !important;
}

#close-sidebar-btn:hover {
    background: #f1f3f4 !important;
    color: #3c4043 !important;
}

#close-sidebar-btn svg {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================================
   MATEMÁTICA APLICADA EN BOTONES Y MENÚS DE LA BARRA LATERAL
   ========================================================================= */
.new-chat-btn,
.menu-item,
.history-btn {
    display: flex;
    align-items: center;
    width: 248px !important;
    height: 40px !important;
    border-radius: 20px !important;
    text-decoration: none;
    color: #444746;
    background: transparent;
    cursor: pointer;
    border: none;
    padding: 0 11px !important;
    /* 11px padding + 18px icono + 11px = 40px perfecto */
    box-sizing: border-box;
    justify-content: flex-start !important;
    transition: background 0s, width 0.3s cubic-bezier(0.2, 0, 0, 1), border-radius 0.3s cubic-bezier(0.2, 0, 0, 1)  !important;
    outline: none;
    overflow: hidden;
}

.profile-trigger {
    display: flex;
    align-items: center;
    width: 248px !important;
    height: 40px !important;
    border-radius: 20px !important;
    text-decoration: none;
    color: #444746;
    background: transparent;
    cursor: pointer;
    border: none;
    padding: 0 8px !important;
    /* 8px padding + 24px avatar + 8px = 40px perfecto */
    box-sizing: border-box;
    justify-content: flex-start !important;
    transition: background 0s, width 0.3s cubic-bezier(0.2, 0, 0, 1), border-radius 0.3s cubic-bezier(0.2, 0, 0, 1)  !important;
    outline: none;
    overflow: hidden;
}

.new-chat-btn {
    background: #f0f4f9;
    font-weight: 500;
    margin-bottom: 16px;
    color: #1f1f1f;
}

.new-chat-btn:hover {
    background: #e1e5eb;
}

.new-chat-btn:active {
    background: #d7dce3;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-item:hover,
.history-btn:hover,
.history-item:hover {
    background: #e9eaed;
}

.menu-item:active,
.history-btn:active,
.history-item:active {
    background: #dde1e6;
}

.profile-trigger:hover {
    background: #e9eaed;
}

.profile-trigger:active {
    background: #dde1e6;
}

.menu-item.active {
    background: #e3e5e8;
    color: #1f1f1f;
    font-weight: 500;
}

.history-locked {
    pointer-events: none !important;
    user-select: none;
}

.history-locked-row {
    width: 248px;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    color: #5f6368;
    font-size: 0.85rem;
    opacity: 0.72;
}

.history-locked-row svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.sidebar.collapsed .history-locked-row {
    display: none !important;
}

.sidebar.collapsed .history-list {
    min-height: 0 !important;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 40px;
}

.history-list:empty {
    min-height: 0;
}

.history-item {
    display: flex;
    align-items: center;
    width: 248px !important;
    height: 40px !important;
    border-radius: 20px !important;
    padding: 0 14px !important;
    box-sizing: border-box;
    color: #444746;
    background: transparent;
    cursor: pointer;
    border: none;
    text-align: left;
    overflow: hidden;
    justify-content: flex-start !important;
    transition: background 0s, width 0.3s cubic-bezier(0.2, 0, 0, 1), border-radius 0.3s cubic-bezier(0.2, 0, 0, 1)  !important;
    outline: none;
}

.history-item:disabled {
    opacity: 1;
    cursor: default;
}

.history-item:hover {
    background: #e9eaed;
}

.history-item:active,
.history-item.active:active {
    background: #dde1e6;
}

.history-item.active:not(:hover):not(:focus-visible):not(:active) {
    background: #f1f3f4;
}

.history-item:focus-visible {
    background: #e9eaed;
}

.history-item .menu-text {
    display: block;
    min-width: 0;
    max-width: 220px;
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 40px;
}

.history-loading {
    background: #eceff3;
    border: 1px solid #eceff3;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
    overflow: hidden;
}

.history-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.58) 48%, transparent 72%);
    transform: translateX(-100%);
    animation: history-card-glow 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 0;
}

@keyframes history-card-glow {
    to {
        transform: translateX(100%);
    }
}

.history-item svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Estado contraído: Círculos perfectos 40x40 */
.sidebar.collapsed .new-chat-btn,
.sidebar.collapsed .menu-item,
.sidebar.collapsed .history-btn,
.sidebar.collapsed .history-item,
.sidebar.collapsed .profile-trigger {
    width: 40px !important;
    border-radius: 50% !important;
    justify-content: flex-start !important;
}

/* Solo hacemos transparente los items de menu, NO el boton de nuevo chat */
.sidebar.collapsed .menu-item,
.sidebar.collapsed .history-btn,
.sidebar.collapsed .history-item,
.sidebar.collapsed .profile-trigger {
    background: transparent;
}

/* Iconos de tamaño original 18px para la matemática */
.new-chat-btn svg,
.menu-item svg,
.history-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.menu-icon {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    object-fit: contain;
    opacity: 0.72;
    filter: brightness(0);
}

.menu-item.active .menu-icon {
    opacity: 0.95;
}

@media (prefers-color-scheme: dark) {
    .menu-icon {
        opacity: 0.82;
        filter: brightness(0) invert(1);
    }

    .menu-item.active .menu-icon {
        opacity: 1;
    }

    .labs-payment-toast {
        border-color: #303134;
        background: #303134;
        color: #bdc1c6;
    }

    .labs-payment-toast strong {
        color: #f1f3f4;
    }

    .labs-payment-toast span {
        color: #bdc1c6;
    }
}

.labs-app-panel {
    overflow-y: auto;
}

.labs-app-panel > .chat-header {
    width: min(1120px, calc(100% - 48px));
    height: auto;
    min-height: 0;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 auto;
    padding: 28px 0 0;
}

#studio-panel {
    --studio-page-gutter: clamp(28px, 4vw, 56px);
    --studio-review-color: #b06f00;
    --studio-review-border: #f9ab00;
    --studio-rejected-color: #b3261e;
    --studio-rejected-border: #d93025;
    --studio-approved-color: #137333;
    --studio-approved-border: #188038;
    container-type: inline-size;
    overflow-x: hidden;
}

#studio-panel > .chat-header {
    width: 100%;
    height: auto;
    min-height: 0;
    flex-shrink: 0;
    max-width: none;
    margin: 0;
    padding: 28px var(--studio-page-gutter) 0;
}

.labs-page-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.labs-page-title-group h1 {
    font-size: clamp(1.08rem, 2vw, 1.25rem);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    color: var(--text-color, #202124);
    overflow-wrap: anywhere;
}

.labs-page-kicker {
    font-size: clamp(0.72rem, 1.6vw, 0.78rem);
    font-weight: 500;
    color: #747775;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.labs-page-content {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    padding: 38px 0 64px;
}

.labs-app-intro,
.labs-feature-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 8px 0 28px;
    border-bottom: 1px solid rgba(95, 99, 104, 0.18);
}

.labs-app-intro-icon,
.labs-feature-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
}

.labs-app-intro-icon {
    filter: brightness(0);
    opacity: 0.88;
}

.labs-app-intro h2,
.labs-feature-hero h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.12;
    font-weight: 500;
    margin: 0 0 10px;
    color: var(--text-color, #202124);
}

.labs-app-intro p,
.labs-feature-hero p {
    max-width: 680px;
    margin: 0;
    color: #5f6368;
    font-size: 1rem;
    line-height: 1.55;
}

#talento-panel {
    --talent-panel-bg: #ffffff;
    --talent-field-bg: #f8fafd;
    --talent-field-text: #202124;
    --talent-field-border: rgba(60, 64, 67, 0.24);
    --talent-field-muted: #5f6368;
    --talent-floating-bg: #f8fafd;
    --talent-floating-border: #f8fafd;
    --talent-floating-hover: #e8f0fe;
    --talent-focus-ring: #0b57d0;
}

#talento-panel .labs-app-intro {
    border-bottom: 0;
    gap: 0;
    padding-bottom: 18px;
}

#talento-panel .labs-app-intro p {
    max-width: 760px;
}

.labs-module-grid,
.labs-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-top: 26px;
}

.labs-module-card {
    display: flex;
    flex-direction: column;
    min-height: 304px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f3f4;
    border: 1px solid rgba(95, 99, 104, 0.12);
    color: var(--text-color, #202124);
    text-decoration: none;
    transition: background-color 0s, border-color 0s, transform 160ms ease;
}

.labs-module-card:hover {
    background: #e8eaed;
    border-color: rgba(95, 99, 104, 0.22);
    transform: translateY(-1px);
}

.labs-module-visual {
    min-height: 184px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-bottom: 1px solid rgba(95, 99, 104, 0.12);
    padding: 18px;
}

.labs-module-visual img {
    max-width: 86%;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 180ms ease;
}

.labs-module-symbol {
    opacity: 0.88;
    filter: brightness(0);
}

.labs-module-card:hover .labs-module-visual img {
    transform: scale(1.025);
}

.labs-module-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 20px;
}

.labs-module-title {
    display: block;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 500;
    color: inherit;
}

.labs-module-text {
    display: block;
    color: #5f6368;
    font-size: 0.88rem;
    line-height: 1.45;
}

.talent-private-shell {
    padding-top: 26px;
}

.talent-loading,
.talent-setup-view,
.talent-database-view {
    border-top: 0;
    padding-top: 10px;
}

.talent-section-head,
.talent-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.talent-section-head {
    flex-direction: column;
    gap: 8px;
    max-width: 760px;
}

.talent-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e8f0fe;
    color: #174ea6;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
}

.talent-section-head h2,
.talent-toolbar h2,
.talent-modal-head h2 {
    margin: 0;
    color: var(--text-color, #202124);
    font-size: clamp(1.25rem, 2.4vw, 1.8rem);
    line-height: 1.16;
    font-weight: 600;
}

.talent-section-head p,
.talent-toolbar p,
.talent-lock-notice span,
.talent-empty-state span,
.talent-status {
    margin: 0;
    color: #5f6368;
    font-size: 0.95rem;
    line-height: 1.48;
}

.talent-sport-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.talent-sport-card {
    min-height: 94px;
    border: 1px solid rgba(95, 99, 104, 0.22);
    border-radius: 8px;
    background: #fff;
    color: #202124;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: background-color 0s, border-color 0s;
}

.talent-sport-card span {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.talent-sport-card small {
    color: #5f6368;
    font-size: 0.78rem;
    line-height: 1.35;
}

.talent-sport-card.is-selected {
    background: #e8f0fe;
    border-color: #4285f4;
    box-shadow: inset 0 0 0 1px #4285f4;
}

.talent-lock-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: #f8fafd;
    border: 1px solid rgba(95, 99, 104, 0.16);
}

.talent-lock-notice strong {
    color: #202124;
    font-size: 0.92rem;
    white-space: nowrap;
}

.talent-status {
    min-height: 22px;
    margin-top: 12px;
}

.talent-status.is-error {
    color: #b3261e;
}

.talent-primary-btn,
.talent-secondary-btn,
.talent-icon-btn {
    border: 0;
    font: inherit;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0 18px;
    font-weight: 600;
    cursor: pointer;
}

.talent-primary-btn {
    background: #0b57d0;
    color: #fff;
}

.talent-primary-btn:disabled {
    cursor: default;
    opacity: 0.52;
}

.talent-secondary-btn {
    background: #f1f3f4;
    color: #202124;
}

.talent-primary-btn svg,
.talent-icon-btn svg,
.talent-search svg,
.talent-sport-search svg,
.talent-custom-select-trigger svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.talent-primary-btn .ripple {
    background: rgba(255, 255, 255, 0.34);
}

.talent-secondary-btn .ripple,
.talent-sport-card .ripple,
.talent-icon-btn .ripple {
    background: rgba(11, 87, 208, 0.16);
}

.talent-btn-spinner {
    display: none;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    position: relative;
    z-index: 1;
    animation: talent-spinner-rotate 1.2s linear infinite;
}

.talent-btn-spinner .path {
    stroke: currentColor;
    stroke-linecap: round;
    animation: talent-spinner-dash 1.15s ease-in-out infinite;
}

.talent-primary-btn.is-loading .talent-btn-spinner,
.talent-secondary-btn.is-loading .talent-btn-spinner {
    display: block;
}

.talent-primary-btn.is-loading,
.talent-secondary-btn.is-loading {
    cursor: progress;
}

@keyframes talent-spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes talent-spinner-dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -125.6;
    }
}

.talent-toolbar-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.talent-filterbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px 220px;
    gap: 12px;
    margin-bottom: 16px;
}

.talent-filterbar.is-role-hidden {
    grid-template-columns: minmax(0, 1fr) 220px;
}

.talent-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--talent-field-border);
    border-radius: 999px;
    background: var(--talent-field-bg);
    color: var(--talent-field-muted);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.talent-search input,
.talent-form input,
.talent-form textarea {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--talent-field-text);
    font: inherit;
    outline: none;
}

.talent-search input::placeholder {
    color: #80868b;
}

.talent-search:focus-within,
.talent-sport-search:focus-within {
    border-color: var(--talent-field-border);
    box-shadow: 0 0 0 2px var(--talent-panel-bg), 0 0 0 4px var(--talent-focus-ring);
}

.talent-sport-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    width: min(100%, 520px);
    margin: 2px 0 14px;
    padding: 0 16px;
    border: 1px solid var(--talent-field-border);
    border-radius: 999px;
    background: var(--talent-field-bg);
    color: var(--talent-field-muted);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.talent-sport-search input {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--talent-field-text);
    font: inherit;
    outline: none;
}

.talent-sport-search input::placeholder {
    color: #80868b;
}

.talent-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.talent-custom-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.talent-custom-select[hidden],
.talent-form label[hidden] {
    display: none !important;
}

.talent-custom-select-trigger {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--talent-field-border);
    border-radius: 999px;
    background: var(--talent-field-bg);
    color: var(--talent-field-text);
    font: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.talent-custom-select.is-disabled .talent-custom-select-trigger,
.talent-custom-select-trigger:disabled {
    cursor: default;
    opacity: 0.58;
}

.talent-custom-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.talent-custom-select-trigger:focus-visible,
.talent-custom-select.is-open .talent-custom-select-trigger {
    border-color: var(--talent-field-border);
    box-shadow: 0 0 0 2px var(--talent-panel-bg), 0 0 0 4px var(--talent-focus-ring);
}

.talent-custom-select-trigger svg {
    flex: 0 0 20px;
    opacity: 0.72;
    transition: transform 160ms ease;
}

.talent-custom-select.is-open .talent-custom-select-trigger svg {
    transform: rotate(180deg);
}

.talent-custom-select-menu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5000;
    width: max-content;
    min-width: 220px;
    max-height: min(320px, 44vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border: 1px solid var(--talent-floating-border, #f8fafd);
    border-radius: 18px;
    background: var(--talent-floating-bg, #f8fafd);
    box-shadow: 0 16px 42px rgba(60, 64, 67, 0.22);
}

.talent-custom-select-menu[hidden] {
    display: none !important;
}

.talent-custom-select-menu::-webkit-scrollbar {
    width: 8px;
}

.talent-custom-select-menu::-webkit-scrollbar-thumb {
    background: rgba(95, 99, 104, 0.34);
    border-radius: 999px;
}

.talent-custom-select-option {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--talent-field-text, #202124);
    font: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    outline: none;
}

.talent-custom-select-option:hover,
.talent-custom-select-option:focus-visible,
.talent-custom-select-option[aria-selected="true"] {
    background: var(--talent-floating-hover, #e8f0fe);
}

.talent-custom-select-option[aria-selected="true"] {
    font-weight: 600;
}

.talent-custom-select-check {
    flex: 0 0 auto;
    color: #0b57d0;
}

.talent-empty-state {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 30px 20px;
    border: 1px dashed rgba(95, 99, 104, 0.26);
    border-radius: 8px;
    color: #202124;
}

.talent-empty-state[hidden],
.talent-photo-remove-btn[hidden] {
    display: none;
}

.talent-entity-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(95, 99, 104, 0.16);
}

.talent-entity-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(120px, auto);
    gap: 14px;
    align-items: center;
    min-height: 82px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(95, 99, 104, 0.16);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 140ms ease;
}

.talent-entity-row:hover,
.talent-entity-row.is-selected {
    background: rgba(26, 115, 232, 0.08);
}

.talent-entity-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e8f0fe;
    color: #174ea6;
    font-weight: 700;
    overflow: hidden;
}

.talent-entity-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.talent-entity-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.talent-entity-main strong {
    color: var(--text-color, #202124);
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.talent-entity-main span,
.talent-entity-meta small {
    color: #5f6368;
    font-size: 0.85rem;
    line-height: 1.35;
}

.talent-entity-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    color: #202124;
    font-size: 0.88rem;
}

.talent-entity-popover {
    --talent-panel-bg: #ffffff;
    --talent-field-text: #202124;
    --talent-field-muted: #5f6368;
    position: fixed;
    z-index: 5200;
    isolation: isolate;
    padding: 10px;
    border: 1px solid rgba(95, 99, 104, 0.16);
    border-radius: 12px;
    background: var(--talent-panel-bg, #ffffff);
    background-clip: padding-box;
    color: var(--talent-field-text, #202124);
    box-shadow: 0 18px 48px rgba(32, 33, 36, 0.22);
    overflow: hidden;
    pointer-events: auto;
}

.talent-entity-popover[hidden] {
    display: none;
}

.talent-popover-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 8px;
}

.talent-popover-head strong,
.talent-stat-row strong {
    display: block;
    color: var(--talent-field-text, #202124);
    font-weight: 700;
    line-height: 1.25;
}

.talent-popover-head span,
.talent-stat-row span,
.talent-popover-empty {
    color: var(--talent-field-muted, #5f6368);
    font-size: 0.82rem;
    line-height: 1.35;
}

.talent-popover-actions,
.talent-stat-list {
    display: grid;
    gap: 4px;
    padding-top: 6px;
}

.talent-popover-action {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--talent-field-text, #202124);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.talent-popover-action:hover {
    background: rgba(95, 99, 104, 0.12);
}

.talent-popover-action.is-danger {
    color: #d93025;
}

.talent-stat-row {
    display: grid;
    gap: 2px;
    padding: 9px 8px;
    border-radius: 8px;
    background: rgba(95, 99, 104, 0.08);
}

.talent-popover-empty {
    margin: 0;
    padding: 12px 8px;
}

.talent-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.talent-modal[hidden] {
    display: none;
}

.talent-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 33, 36, 0.62);
    opacity: 0;
    transition: opacity 160ms ease;
}

.talent-modal-card {
    position: relative;
    width: min(860px, 100%);
    max-height: min(86vh, 860px);
    overflow-y: auto;
    border-radius: 12px;
    background: var(--talent-panel-bg);
    color: #202124;
    padding: 0;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.talent-modal.is-open .talent-modal-backdrop {
    opacity: 1;
}

.talent-modal.is-open .talent-modal-card {
    opacity: 1;
    transform: translateY(0);
}

.talent-modal-head {
    position: sticky;
    top: 0;
    z-index: 24;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 24px 18px;
    margin-bottom: 0;
    background: var(--talent-panel-bg);
    box-shadow: 0 1px 0 rgba(60, 64, 67, 0.08);
}

.talent-modal-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.talent-icon-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    background: #f1f3f4;
    color: #202124;
    flex-shrink: 0;
}

.talent-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 24px 24px;
}

.talent-photo-field {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding-bottom: 2px;
}

.talent-photo-preview {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--talent-field-border);
    border-radius: 50%;
    background:
        linear-gradient(45deg, rgba(95, 99, 104, 0.08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(95, 99, 104, 0.08) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(95, 99, 104, 0.08) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(95, 99, 104, 0.08) 75%);
    background-color: var(--talent-field-bg);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    color: #0b57d0;
    font-weight: 800;
    overflow: hidden;
}

.talent-photo-preview.has-image {
    border-style: solid;
}

.talent-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.talent-photo-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.talent-photo-copy > span {
    color: #5f6368;
    font-size: 0.82rem;
    font-weight: 600;
}

.talent-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.talent-photo-upload-btn,
.talent-photo-remove-btn {
    min-height: 42px;
    cursor: pointer;
}

.talent-photo-copy small {
    min-height: 18px;
    color: #5f6368;
    font-size: 0.78rem;
}

.talent-photo-copy small.is-error {
    color: #d93025;
}

.talent-photo-cropper {
    --talent-cropper-bg: #ffffff;
    --talent-cropper-text: #202124;
    --talent-cropper-muted: #5f6368;
    --talent-cropper-border: rgba(95, 99, 104, 0.18);
    --talent-cropper-field: #f8fafd;
    position: fixed;
    inset: 0;
    z-index: 6400;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--talent-cropper-text);
}

.talent-photo-cropper[hidden] {
    display: none;
}

.talent-photo-cropper-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 33, 36, 0.66);
    opacity: 0;
    transition: opacity 160ms ease;
}

.talent-photo-cropper-card {
    position: relative;
    width: min(520px, 100%);
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--talent-cropper-border);
    border-radius: 12px;
    background: var(--talent-cropper-bg);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(8px) scale(0.985);
    transition: opacity 160ms ease, transform 160ms ease;
}

.talent-photo-cropper.is-open .talent-photo-cropper-backdrop,
.talent-photo-cropper.is-open .talent-photo-cropper-card {
    opacity: 1;
}

.talent-photo-cropper.is-open .talent-photo-cropper-card {
    transform: translateY(0) scale(1);
}

.talent-photo-cropper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(95, 99, 104, 0.1);
}

.talent-photo-cropper-head strong {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}

.talent-photo-cropper-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.talent-photo-cropper-stage {
    display: grid;
    place-items: center;
    min-height: 300px;
}

.talent-photo-cropper-circle {
    width: min(260px, 66vw);
    aspect-ratio: 1;
    position: relative;
    border: 1px solid var(--talent-cropper-border);
    border-radius: 50%;
    background:
        linear-gradient(45deg, rgba(95, 99, 104, 0.12) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(95, 99, 104, 0.12) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(95, 99, 104, 0.12) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(95, 99, 104, 0.12) 75%);
    background-color: var(--talent-cropper-field);
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
    box-shadow: inset 0 0 0 2px rgba(26, 115, 232, 0.22);
    cursor: grab;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

.talent-photo-cropper-circle.is-dragging {
    cursor: grabbing;
}

.talent-photo-cropper-circle img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    max-height: none;
    transform-origin: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.talent-photo-cropper-zoom {
    display: grid;
    gap: 8px;
}

.talent-photo-cropper-zoom span {
    color: var(--talent-cropper-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.talent-photo-cropper-zoom input {
    width: 100%;
    accent-color: #1a73e8;
}

.talent-photo-cropper-status {
    min-height: 18px;
    color: var(--talent-cropper-muted);
    font-size: 0.78rem;
}

.talent-photo-cropper-status.is-error {
    color: #d93025;
}

.talent-form-grid,
.talent-sport-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.talent-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    position: relative;
}

.talent-form label span {
    color: #5f6368;
    font-size: 0.82rem;
    font-weight: 600;
}

.talent-form .talent-photo-upload-btn {
    width: 156px;
    min-width: 156px;
    max-width: 156px;
    inline-size: 156px;
    min-inline-size: 156px;
    max-inline-size: 156px;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    contain: layout paint style;
}

.talent-form .talent-photo-upload-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(11, 87, 208, 0.16);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.talent-form .talent-photo-upload-btn.is-upload-rippling::before {
    animation: talentUploadButtonFill 520ms cubic-bezier(0.2, 0, 0, 1);
}

.talent-form .talent-photo-upload-btn .ripple {
    display: none !important;
}

.talent-form .talent-photo-upload-btn > span {
    color: inherit;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
    position: relative;
    z-index: 1;
}

@keyframes talentUploadButtonFill {
    0% {
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    72% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.talent-form input,
.talent-form textarea {
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--talent-field-border);
    border-radius: 999px;
    background: var(--talent-field-bg);
    color: var(--talent-field-text);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

#talent-birth-date {
    appearance: textfield;
}

.talent-form input::placeholder,
.talent-form textarea::placeholder {
    color: #80868b;
}

.talent-form input:focus,
.talent-form textarea:focus {
    border-color: var(--talent-field-border);
    box-shadow: 0 0 0 2px var(--talent-panel-bg), 0 0 0 4px var(--talent-focus-ring);
}

.talent-measure-field {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 5px 4px 16px;
    border: 1px solid var(--talent-field-border);
    border-radius: 999px;
    background: var(--talent-field-bg);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.talent-measure-field:focus-within {
    border-color: var(--talent-field-border);
    box-shadow: 0 0 0 2px var(--talent-panel-bg), 0 0 0 4px var(--talent-focus-ring);
}

.talent-form .talent-measure-field input {
    min-height: 42px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.talent-form .talent-measure-field input:focus {
    border-color: transparent;
    box-shadow: none;
}

.talent-measure-units {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: rgba(95, 99, 104, 0.12);
    flex-shrink: 0;
}

.talent-measure-unit {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--talent-field-text);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.talent-measure-unit.is-active {
    background: #1a73e8;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(26, 115, 232, 0.25);
}

.talent-form textarea {
    min-height: 64px;
    height: auto;
    padding: 14px 16px;
    border-radius: 24px;
    line-height: 1.45;
    overflow: hidden;
    resize: none;
}

.talent-notes-field {
    grid-column: 1 / -1;
}

.talent-skeleton-line,
.talent-skeleton-grid span {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, #eef0f2, #f8fafd, #eef0f2);
    background-size: 220% 100%;
    animation: talentSkeleton 1.2s ease-in-out infinite;
}

.talent-skeleton-title {
    width: 280px;
    height: 28px;
    margin-bottom: 18px;
}

.talent-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.talent-skeleton-grid span {
    height: 124px;
}

@keyframes talentSkeleton {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.labs-feature-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 18px;
    border-radius: 8px;
    background: #f1f3f4;
    color: var(--text-color, #202124);
    text-decoration: none;
    font-weight: 500;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0s;
}

.labs-feature-card:hover {
    background: #e8eaed;
}

.labs-feature-card img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

#live-stream-panel .labs-feature-hero,
#studio-panel .labs-feature-hero {
    padding-bottom: 30px;
}

#live-stream-panel .labs-page-title-group {
    gap: 8px;
}

.labs-live-console {
    width: min(1180px, 100%);
    display: grid;
    gap: 26px;
}

.labs-live-command {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 22px 0 8px;
    border-bottom: 1px solid rgba(95, 99, 104, 0.16);
}

.labs-live-command h2,
.labs-live-stream-workbench h2 {
    margin: 4px 0 0;
    color: var(--text-color, #202124);
    font-size: clamp(1.5rem, 2.4vw, 2.05rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.12;
}

.labs-live-command p {
    max-width: 640px;
    margin: 8px 0 0;
    color: #5f6368;
    font-size: 0.96rem;
    line-height: 1.45;
}

.labs-live-command-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.labs-live-stream-action,
.labs-live-stream-refresh,
.labs-live-stream-credential-btn,
.labs-live-stream-copy,
.labs-live-stream-secret-toggle,
.labs-live-control-btn,
.labs-live-control-close {
    position: relative;
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    border-radius: 999px;
    padding: 0 20px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
    isolation: isolate;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
    box-shadow: none;
    transition: background-color 80ms ease, color 80ms ease, box-shadow 80ms ease;
}

.labs-live-stream-action {
    border: 0;
    background: #202124;
    color: #ffffff;
    text-decoration: none;
}

.labs-live-stream-action svg,
.labs-live-stream-refresh svg,
.labs-live-stream-copy svg,
.labs-live-stream-secret-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.labs-live-stream-action:hover {
    background: #3c4043;
}

.labs-live-stream-action:active,
.labs-live-stream-refresh:active,
.labs-live-stream-credential-btn:active,
.labs-live-stream-copy:active,
.labs-live-stream-secret-toggle:active,
.labs-live-control-btn:active,
.labs-live-control-close:active {
    transform: none;
}

.labs-live-stream-action:focus-visible,
.labs-live-stream-refresh:focus-visible,
.labs-live-stream-credential-btn:focus-visible,
.labs-live-stream-copy:focus-visible,
.labs-live-stream-secret-toggle:focus-visible,
.labs-live-control-btn:focus-visible,
.labs-live-control-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(60, 64, 67, 0.16);
}

.labs-live-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-block: 1px solid rgba(95, 99, 104, 0.14);
}

.labs-live-summary-card {
    min-height: 112px;
    display: grid;
    align-content: space-between;
    gap: 8px;
    padding: 18px 24px 18px 0;
    background: transparent;
}

.labs-live-summary-card + .labs-live-summary-card {
    padding-left: 24px;
    border-left: 1px solid rgba(95, 99, 104, 0.14);
}

.labs-live-summary-card span,
.labs-live-summary-card small,
.labs-live-stream-kicker,
.labs-live-stream-status,
.labs-live-stream-meta,
.labs-live-stream-secret-row span {
    color: #5f6368;
}

.labs-live-summary-card span,
.labs-live-stream-kicker {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.labs-live-summary-card strong {
    color: var(--text-color, #202124);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
}

.labs-live-summary-card small {
    font-size: 0.84rem;
    line-height: 1.3;
}

.labs-live-stream-workbench {
    display: grid;
    gap: 14px;
    padding: 0;
    background: transparent;
}

.labs-live-stream-workbench-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.labs-live-stream-refresh,
.labs-live-stream-credential-btn,
.labs-live-stream-copy,
.labs-live-stream-secret-toggle,
.labs-live-control-btn,
.labs-live-control-close {
    min-height: 38px;
    border: 0;
    background: #f1f3f4;
    color: #202124;
    box-shadow: none;
}

.labs-live-stream-refresh:hover,
.labs-live-stream-credential-btn:hover,
.labs-live-stream-copy:hover,
.labs-live-stream-secret-toggle:hover,
.labs-live-control-btn:hover,
.labs-live-control-close:hover {
    background: #e8eaed;
}

.labs-live-stream-status {
    min-height: 20px;
    margin: 0;
    font-size: 0.9rem;
    text-align: right;
}

.labs-live-stream-status.is-error {
    color: #c5221f;
}

.labs-live-stream-list {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(95, 99, 104, 0.12);
}

.labs-live-stream-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    min-height: 96px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(95, 99, 104, 0.12);
    background: transparent;
    cursor: pointer;
    outline: none;
    transition: background-color 120ms ease;
}

.labs-live-stream-row:hover,
.labs-live-stream-row:focus-visible,
.labs-live-stream-row:focus-within {
    background: rgba(60, 64, 67, 0.06);
}

.labs-live-stream-row.is-ended {
    cursor: pointer;
}

.labs-live-stream-row-main {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.labs-live-stream-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.labs-live-stream-title strong {
    min-width: 0;
    color: var(--text-color, #202124);
    font-size: 1rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.labs-live-stream-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    background: #eef3fe;
    color: #174ea6;
    padding: 0 10px;
    font-size: 0.76rem;
    font-weight: 800;
}

.labs-live-stream-badge.is-review {
    background: #fef7e0;
    color: #8a5b00;
}

.labs-live-stream-badge.is-ready,
.labs-live-stream-badge.is-published {
    background: #e6f4ea;
    color: #137333;
}

.labs-live-stream-badge.is-rejected {
    background: #fce8e6;
    color: #a50e0e;
}

.labs-live-stream-badge.is-ended {
    background: #f1f3f4;
    color: #3c4043;
}

.labs-live-stream-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.84rem;
}

.labs-live-stream-meta span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    background: #f1f3f4;
    padding: 0 10px;
}

.labs-live-stream-credentials {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    margin-top: 2px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(138, 180, 248, 0.28);
}

.labs-live-stream-secret-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.labs-live-stream-secret-row span {
    font-size: 0.82rem;
    font-weight: 800;
}

.labs-live-stream-secret-value {
    min-width: 0;
    overflow: auto;
    border-radius: 12px;
    background: #f8fafd;
    color: #202124;
    padding: 10px 12px;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.92rem;
    line-height: 1.3;
}

.labs-live-stream-secret-value.is-masked {
    overflow: hidden;
    letter-spacing: 0.18em;
    text-overflow: clip;
}

.labs-live-stream-secret-toggle {
    width: 42px;
    min-width: 42px;
    padding: 0;
}

.labs-live-stream-secret-toggle svg {
    width: 20px;
    height: 20px;
}

.labs-live-control-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(32, 33, 36, 0.34);
}

.labs-live-control-modal[hidden] {
    display: none;
}

.labs-live-control-panel {
    width: min(760px, calc(100vw - 32px));
    max-height: min(82vh, 760px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(218, 220, 224, 0.95);
    border-radius: 8px;
    background: #ffffff;
    color: #202124;
    box-shadow: 0 12px 34px rgba(60, 64, 67, 0.24);
}

.labs-live-control-header,
.labs-live-control-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
}

.labs-live-control-header {
    border-bottom: 1px solid rgba(95, 99, 104, 0.14);
}

.labs-live-control-title-group {
    min-width: 0;
}

.labs-live-control-title-group h2 {
    margin: 4px 0 0;
    color: #202124;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.labs-live-control-title-group p {
    margin: 6px 0 0;
    color: #5f6368;
    font-size: 0.88rem;
    line-height: 1.4;
}

.labs-live-control-body {
    display: grid;
    gap: 18px;
    overflow: auto;
    padding: 18px 20px 20px;
}

.labs-live-control-section {
    display: grid;
    gap: 10px;
}

.labs-live-control-section h3 {
    color: #202124;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
}

.labs-live-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(95, 99, 104, 0.12);
    border-left: 1px solid rgba(95, 99, 104, 0.12);
}

.labs-live-control-data {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 12px;
    border-right: 1px solid rgba(95, 99, 104, 0.12);
    border-bottom: 1px solid rgba(95, 99, 104, 0.12);
}

.labs-live-control-data span {
    color: #5f6368;
    font-size: 0.76rem;
    font-weight: 700;
}

.labs-live-control-data strong {
    color: #202124;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.labs-live-control-note {
    margin: 0;
    border: 1px solid rgba(95, 99, 104, 0.14);
    border-radius: 8px;
    background: #f8fafd;
    color: #3c4043;
    padding: 12px;
    font-size: 0.88rem;
    line-height: 1.45;
}

.labs-live-control-credentials {
    display: grid;
    gap: 10px;
}

.labs-live-control-secret-row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.labs-live-control-secret-row > span {
    color: #5f6368;
    font-size: 0.8rem;
    font-weight: 700;
}

.labs-live-control-secret-value {
    min-width: 0;
    overflow: auto;
    border: 1px solid rgba(95, 99, 104, 0.12);
    border-radius: 8px;
    background: #f8fafd;
    color: #202124;
    padding: 9px 10px;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.84rem;
    line-height: 1.3;
}

.labs-live-control-secret-value.is-masked {
    overflow: hidden;
    letter-spacing: 0.14em;
}

.labs-live-control-actions {
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid rgba(95, 99, 104, 0.14);
}

.labs-live-control-finish {
    border-color: #202124;
    background: #202124;
    color: #ffffff;
}

.labs-live-control-finish:hover {
    background: #3c4043;
}

.labs-live-control-finish:disabled,
.labs-live-control-btn:disabled {
    opacity: 0.48;
    cursor: default;
    pointer-events: none;
}

@media (prefers-color-scheme: dark) {
    .labs-live-command,
    .labs-live-summary-grid,
    .labs-live-summary-card + .labs-live-summary-card,
    .labs-live-stream-list,
    .labs-live-stream-row {
        border-color: rgba(232, 234, 237, 0.14);
    }

    .labs-live-command h2,
    .labs-live-stream-workbench h2,
    .labs-live-summary-card strong,
    .labs-live-stream-title strong {
        color: #f1f3f4;
    }

    .labs-live-command p,
    .labs-live-summary-card span,
    .labs-live-summary-card small,
    .labs-live-stream-kicker,
    .labs-live-stream-status,
    .labs-live-stream-meta,
    .labs-live-stream-secret-row span {
        color: #bdc1c6;
    }

    .labs-live-stream-refresh,
    .labs-live-stream-credential-btn,
    .labs-live-stream-copy,
    .labs-live-stream-secret-toggle,
    .labs-live-control-btn,
    .labs-live-control-close,
    .labs-live-stream-meta span {
        background: #303134;
        color: #f1f3f4;
        box-shadow: none;
    }

    .labs-live-stream-action {
        border-color: transparent;
        background: #ffffff;
        color: #111111;
    }

    .labs-live-stream-refresh:hover,
    .labs-live-stream-credential-btn:hover,
    .labs-live-stream-copy:hover,
    .labs-live-stream-secret-toggle:hover,
    .labs-live-control-btn:hover,
    .labs-live-control-close:hover {
        background: #34363a;
    }

    .labs-live-stream-action:hover {
        background: #f1f3f4;
    }

    .labs-live-stream-action:focus-visible,
    .labs-live-stream-refresh:focus-visible,
    .labs-live-stream-credential-btn:focus-visible,
    .labs-live-stream-copy:focus-visible,
    .labs-live-stream-secret-toggle:focus-visible,
    .labs-live-control-btn:focus-visible,
    .labs-live-control-close:focus-visible {
        box-shadow: 0 0 0 3px rgba(232, 234, 237, 0.22);
    }

    .labs-live-stream-credentials {
        border-color: rgba(138, 180, 248, 0.24);
    }

    .labs-live-stream-secret-value {
        background: #101114;
        color: #f1f3f4;
    }

    .labs-live-stream-row:hover,
    .labs-live-stream-row:focus-visible,
    .labs-live-stream-row:focus-within {
        background: rgba(255, 255, 255, 0.08);
    }

    .labs-live-stream-badge.is-ended {
        background: #303134;
        color: #bdc1c6;
    }

    .labs-live-control-modal {
        background: rgba(0, 0, 0, 0.58);
    }

    .labs-live-control-panel {
        background: #202124;
        border-color: rgba(255, 255, 255, 0.12);
        color: #e8eaed;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.52);
    }

    .labs-live-control-header,
    .labs-live-control-actions,
    .labs-live-control-grid,
    .labs-live-control-data,
    .labs-live-control-secret-value {
        border-color: rgba(255, 255, 255, 0.12);
    }

    .labs-live-control-title-group h2,
    .labs-live-control-section h3,
    .labs-live-control-data strong,
    .labs-live-control-secret-value {
        color: #e8eaed;
    }

    .labs-live-control-title-group p,
    .labs-live-control-data span,
    .labs-live-control-secret-row > span {
        color: #bdc1c6;
    }

    .labs-live-control-note,
    .labs-live-control-secret-value {
        background: #101114;
    }

    .labs-live-control-note {
        border-color: rgba(255, 255, 255, 0.12);
        color: #bdc1c6;
    }

    .labs-live-control-finish {
        border-color: #f1f3f4;
        background: #f1f3f4;
        color: #111111;
    }

    .labs-live-control-finish:hover {
        background: #dfe3e7;
    }
}

@media (max-width: 760px) {
    .labs-live-command,
    .labs-live-stream-workbench-header {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .labs-live-command-actions {
        justify-content: flex-start;
    }

    .labs-live-summary-grid {
        grid-template-columns: 1fr;
        border-block: 1px solid rgba(95, 99, 104, 0.14);
    }

    .labs-live-summary-card,
    .labs-live-summary-card + .labs-live-summary-card {
        padding: 16px 0;
        border-left: 0;
        border-top: 1px solid rgba(95, 99, 104, 0.12);
    }

    .labs-live-summary-card:first-child {
        border-top: 0;
    }

    .labs-live-stream-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .labs-live-stream-status {
        text-align: left;
    }

    .labs-live-stream-secret-row {
        grid-template-columns: 1fr auto auto;
    }

    .labs-live-stream-secret-row > span {
        grid-column: 1 / -1;
    }

    .labs-live-control-modal {
        align-items: end;
        padding: 12px;
    }

    .labs-live-control-panel {
        width: 100%;
        max-height: min(88vh, 720px);
    }

    .labs-live-control-header,
    .labs-live-control-actions {
        padding: 16px;
    }

    .labs-live-control-header,
    .labs-live-control-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .labs-live-control-body {
        padding: 16px;
    }

    .labs-live-control-grid,
    .labs-live-control-secret-row {
        grid-template-columns: 1fr;
    }

    .labs-live-control-actions {
        gap: 10px;
    }

    .labs-live-control-btn,
    .labs-live-control-close {
        width: 100%;
    }
}

.labs-original-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.labs-original-card {
    display: grid;
    grid-template-rows: minmax(168px, 1fr) auto;
    align-items: stretch;
    gap: 0;
    min-height: 284px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(95, 99, 104, 0.14);
    background: #f1f3f4;
}

.labs-original-card:hover {
    background: #e8eaed;
    border-color: rgba(95, 99, 104, 0.24);
}

.labs-original-card img {
    width: 100%;
    height: 100%;
    min-height: 176px;
    max-height: 212px;
    object-fit: contain;
    padding: 18px;
    background: #ffffff;
    border-bottom: 1px solid rgba(95, 99, 104, 0.12);
}

.labs-original-card span {
    display: grid;
    gap: 6px;
    padding: 16px 18px 18px;
}

.labs-original-card strong {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
}

.labs-original-card small {
    color: #5f6368;
    font-size: 0.88rem;
    line-height: 1.4;
}

#live-stream-panel .labs-original-grid {
    grid-template-columns: repeat(3, minmax(210px, 1fr));
    gap: 18px;
}

#live-stream-panel .labs-original-card {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(128px, 1fr);
    min-height: 318px;
    padding: 22px 22px 20px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 18px;
    border: 1px solid rgba(60, 64, 67, 0.12);
    background:
        radial-gradient(circle at 86% 86%, rgba(255, 118, 92, 0.24), transparent 34%),
        linear-gradient(145deg, #f7f8ff 0%, #edf3ff 48%, #f8edf8 100%);
    box-shadow: none;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

#live-stream-panel .labs-original-card:hover {
    transform: translateY(-2px);
    border-color: rgba(11, 87, 208, 0.22);
    background:
        radial-gradient(circle at 86% 86%, rgba(255, 118, 92, 0.3), transparent 36%),
        linear-gradient(145deg, #ffffff 0%, #eef4ff 46%, #fbf0fb 100%);
}

#live-stream-panel .labs-original-card span {
    grid-row: 1;
    align-self: start;
    display: grid;
    gap: 12px;
    padding: 0;
    max-width: 92%;
}

#live-stream-panel .labs-original-card strong {
    font-size: clamp(1.18rem, 1.6vw, 1.55rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0;
}

#live-stream-panel .labs-original-card small {
    max-width: 22ch;
    color: #5f6368;
    font-size: 0.94rem;
    line-height: 1.32;
}

#live-stream-panel .labs-original-card img {
    grid-row: 2;
    justify-self: end;
    align-self: end;
    display: block;
    width: min(58%, 170px);
    height: auto;
    min-height: 0;
    max-height: 154px;
    object-fit: contain;
    object-position: right bottom;
    padding: 0 !important;
    margin: 6px -2px -2px 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 18px 24px rgba(93, 34, 118, 0.2));
    mix-blend-mode: normal;
    transform-origin: right bottom;
    transition: transform 180ms ease, filter 180ms ease;
}

#live-stream-panel .labs-original-card:hover img {
    transform: scale(1.045);
    filter: drop-shadow(0 20px 28px rgba(93, 34, 118, 0.26));
}

.studio-original-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.labs-studio-page {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 34px var(--studio-page-gutter) 64px;
}

.labs-studio-heading {
    display: grid;
    gap: 10px;
    padding: 0 0 22px;
    min-width: 0;
}

.labs-studio-heading h2 {
    margin: 0;
    color: var(--text-color, #202124);
    font-size: clamp(1.55rem, 4.4vw, 2.15rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.labs-studio-heading p {
    max-width: 720px;
    margin: 0;
    color: #5f6368;
    font-size: clamp(0.82rem, 1.7vw, 0.9rem);
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.labs-studio-tabs {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    margin-left: calc(-1 * var(--studio-page-gutter));
    margin-right: calc(-1 * var(--studio-page-gutter));
    padding-left: var(--studio-page-gutter);
    padding-right: var(--studio-page-gutter);
    overflow-x: auto;
    border-bottom: 1px solid rgba(95, 99, 104, 0.2);
    scrollbar-width: none;
}

.labs-studio-tabs::-webkit-scrollbar {
    display: none;
}

.labs-studio-tab {
    position: relative;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #747775;
    padding: 0 0 13px;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    outline: none;
    box-shadow: none;
}

.labs-studio-tab:focus,
.labs-studio-tab:focus-visible,
.labs-studio-tab:active {
    outline: none;
    box-shadow: none;
}

.labs-studio-tab:hover,
.labs-studio-tab.active {
    color: var(--text-color, #202124);
}

.labs-studio-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
}

.labs-studio-tab-content {
    padding-top: 24px;
}

.labs-studio-tab-content[hidden],
.labs-studio-selected-file[hidden] {
    display: none !important;
}

.labs-studio-upload-zone {
    position: relative;
    display: flex;
    min-height: 390px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 44px 24px 104px;
}

.labs-studio-upload-zone.is-dragging {
    background: rgba(11, 87, 208, 0.06);
}

.labs-studio-upload-icon {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    background: #f1f3f4;
    color: #5f6368;
}

.labs-studio-upload-icon svg {
    width: 48px;
    height: 48px;
    fill: currentColor;
}

.labs-studio-upload-zone h2 {
    max-width: 720px;
    margin: 0 0 22px;
    color: var(--text-color, #202124);
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.labs-studio-upload-terms {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    display: grid;
    gap: 8px;
}

.labs-studio-upload-terms p {
    max-width: 920px;
    margin: 0 auto;
    color: #5f6368;
    font-size: 0.82rem;
    line-height: 1.5;
}

.labs-studio-upload-terms a {
    color: #0b57d0;
    text-decoration: none;
    font-weight: 600;
}

.labs-studio-upload-btn,
.labs-studio-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    border: 0;
    background: #202124;
    color: #ffffff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
    box-shadow: none;
}

.labs-studio-upload-btn:hover,
.labs-studio-action-btn:hover {
    background: #3c4043;
}

.labs-studio-upload-btn:focus,
.labs-studio-upload-btn:focus-visible,
.labs-studio-upload-btn:active,
.labs-studio-action-btn:focus,
.labs-studio-action-btn:focus-visible,
.labs-studio-action-btn:active,
.labs-studio-icon-btn:focus,
.labs-studio-icon-btn:focus-visible,
.labs-studio-icon-btn:active,
.labs-studio-link-btn:focus,
.labs-studio-link-btn:focus-visible,
.labs-studio-link-btn:active,
.labs-studio-search-clear:focus,
.labs-studio-search-clear:focus-visible,
.labs-studio-search-clear:active,
.labs-studio-row-action:focus,
.labs-studio-row-action:focus-visible,
.labs-studio-row-action:active,
.labs-studio-rejection-detail-btn:focus,
.labs-studio-rejection-detail-btn:focus-visible,
.labs-studio-rejection-detail-btn:active,
.labs-studio-language-detail-btn:focus,
.labs-studio-language-detail-btn:focus-visible,
.labs-studio-language-detail-btn:active,
.labs-studio-notice-detail-btn:focus,
.labs-studio-notice-detail-btn:focus-visible,
.labs-studio-notice-detail-btn:active,
.labs-studio-modal-continue:focus,
.labs-studio-modal-continue:focus-visible,
.labs-studio-modal-continue:active,
.labs-studio-video-row:focus,
.labs-studio-video-row:focus-visible,
.labs-studio-video-row:active {
    outline: none;
    box-shadow: none;
}

.labs-studio-selected-file {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr) auto;
    align-items: end;
    gap: 18px;
    padding: 14px;
    border: 1px solid rgba(95, 99, 104, 0.18);
    border-radius: 12px;
    background: #f8fafd;
}

.labs-studio-selected-file span,
.labs-studio-field span {
    display: block;
    color: #5f6368;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.labs-studio-selected-file strong {
    display: block;
    color: var(--text-color, #202124);
    font-size: 1rem;
    line-height: 1.25;
}

.labs-studio-selected-file small {
    display: block;
    margin-top: 4px;
    color: #747775;
}

.labs-studio-field input {
    width: 100%;
    height: 44px;
    border: 1px solid rgba(95, 99, 104, 0.28);
    border-radius: 8px;
    padding: 0 12px;
    background: #ffffff;
    color: var(--text-color, #202124);
    font: inherit;
}

.labs-studio-field input:focus {
    outline: 2px solid rgba(11, 87, 208, 0.22);
    border-color: #0b57d0;
}

.labs-studio-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.labs-studio-compact-head {
    align-items: center;
}

.labs-studio-section-head h2 {
    margin: 0 0 8px;
    color: var(--text-color, #202124);
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.15;
}

.labs-studio-demo-badge {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(11, 87, 208, 0.1);
    color: #0b57d0;
    font-size: 0.72rem;
    font-weight: 700;
}

.labs-studio-filterbar {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 42px;
    margin-left: calc(-1 * var(--studio-page-gutter));
    margin-right: calc(-1 * var(--studio-page-gutter));
    padding-left: var(--studio-page-gutter);
    padding-right: var(--studio-page-gutter);
    border-bottom: 1px solid rgba(95, 99, 104, 0.14);
    color: #5f6368;
    font-weight: 600;
}

.labs-studio-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(620px, 100%);
    color: #5f6368;
}

.labs-studio-search svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    fill: currentColor;
}

.labs-studio-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-color, #202124);
    caret-color: var(--text-color, #202124);
    font: inherit;
    font-size: 0.94rem;
    font-weight: 500;
    letter-spacing: 0;
}

.labs-studio-search input:focus {
    color: var(--text-color, #202124);
    caret-color: var(--text-color, #202124);
}

.labs-studio-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.labs-studio-search input::-ms-clear {
    display: none;
}

.labs-studio-search input::placeholder {
    color: #747775;
    opacity: 1;
}

.labs-studio-search-clear {
    position: relative;
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5f6368;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
}

.labs-studio-search-clear[hidden] {
    display: none !important;
}

.labs-studio-search-clear:hover {
    background: rgba(95, 99, 104, 0.12);
}

.labs-studio-icon-btn,
.labs-studio-link-btn,
.labs-studio-rejection-detail-btn,
.labs-studio-language-detail-btn,
.labs-studio-notice-detail-btn,
.labs-studio-modal-continue,
.labs-studio-modal-secondary,
.labs-studio-draft-menu-btn,
.labs-studio-draft-bulk-menu-btn,
.labs-studio-draft-selection-close {
    position: relative;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
}

.labs-studio-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.labs-studio-icon-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.labs-studio-link-btn {
    width: fit-content;
    color: #0b57d0;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 999px;
}

.labs-studio-rejection-detail-btn {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border: 0;
    border-radius: 999px;
    background: #202124;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 90ms ease, box-shadow 90ms ease;
}

.labs-studio-rejection-detail-btn:hover {
    background: #3c4043;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2);
}

.labs-studio-language-detail-btn,
.labs-studio-notice-detail-btn {
    display: inline-flex;
    width: fit-content;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: #202124;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 90ms ease, box-shadow 90ms ease;
}

.labs-studio-language-detail-btn:hover,
.labs-studio-notice-detail-btn:hover {
    background: #3c4043;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2);
}

.labs-studio-section-head p {
    max-width: 680px;
    margin: 0;
    color: #5f6368;
    line-height: 1.5;
}

.labs-studio-table,
.labs-studio-status-card,
.labs-studio-language-list {
    border: 1px solid rgba(95, 99, 104, 0.18);
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.labs-studio-table-row {
    display: grid;
    grid-template-columns: 34px minmax(340px, 1.7fr) 0.5fr 0.68fr 0.66fr 0.44fr 0.56fr;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.labs-studio-table-header {
    color: #5f6368;
    font-size: 0.76rem;
    font-weight: 700;
    border-bottom: 0;
}

.labs-studio-content-table {
    margin-left: calc(-1 * var(--studio-page-gutter));
    margin-right: calc(-1 * var(--studio-page-gutter));
    background: transparent;
    border: 0;
    border-top: 0;
    border-radius: 0;
    overflow: visible;
}

.labs-studio-content-table .labs-studio-table-row {
    padding-left: var(--studio-page-gutter);
    padding-right: var(--studio-page-gutter);
}

.labs-studio-published-table .labs-studio-table-row {
    grid-template-columns: 34px minmax(360px, 1.8fr) minmax(132px, 0.5fr) minmax(128px, 0.56fr) minmax(132px, 0.58fr) minmax(132px, 0.54fr) 48px;
}

.labs-studio-video-row {
    position: relative;
    border-bottom: 1px solid rgba(95, 99, 104, 0.1);
    color: #5f6368;
    font-size: 0.84rem;
    cursor: pointer;
    overflow: visible;
    isolation: isolate;
    transition: background-color 90ms ease;
}

.labs-studio-status-history-table .labs-studio-table-row {
    grid-template-columns: 34px minmax(340px, 1.7fr) minmax(196px, 0.76fr) 0.66fr 0.56fr 48px;
}

.labs-studio-drafts-panel {
    margin-bottom: 30px;
}

.labs-studio-drafts-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.labs-studio-drafts-heading h3 {
    margin: 0 0 4px;
    color: var(--text-color, #202124);
    font-size: 1.02rem;
    font-weight: 700;
}

.labs-studio-drafts-heading p {
    margin: 0;
    color: #747775;
    font-size: 0.86rem;
    line-height: 1.45;
}

.labs-studio-drafts-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.labs-studio-drafts-status {
    min-height: 20px;
    margin: -4px 0 12px;
    color: #5f6368;
    font-size: 0.84rem;
    line-height: 1.45;
}

.labs-studio-drafts-status.is-error {
    color: #5f6368;
}

.labs-studio-draft-selection-bar {
    position: sticky;
    top: 0;
    z-index: 32;
    display: flex;
    min-height: 52px;
    align-items: center;
    gap: 14px;
    margin: 12px 0 12px;
    padding: 8px 10px 8px 16px;
    border: 1px solid #f1f3f4;
    border-radius: 12px;
    background: #f1f3f4;
    color: #202124;
}

.labs-studio-draft-selection-bar[hidden] {
    display: none !important;
}

.labs-studio-draft-selection-bar strong {
    min-width: 126px;
    color: #202124;
    font-size: 0.88rem;
    font-weight: 700;
}

.labs-studio-draft-bulk-menu-shell {
    position: relative;
    display: inline-flex;
}

.labs-studio-draft-bulk-menu-btn {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 999px;
    color: #202124;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.labs-studio-draft-bulk-menu-btn:hover,
.labs-studio-draft-bulk-menu-btn:focus-visible,
.labs-studio-draft-bulk-menu-shell.is-open .labs-studio-draft-bulk-menu-btn {
    background: rgba(95, 99, 104, 0.12);
    outline: none;
}

.labs-studio-draft-bulk-menu-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.labs-studio-draft-selection-close {
    display: grid;
    width: 36px;
    height: 36px;
    margin-left: auto;
    place-items: center;
    border-radius: 50%;
    color: #5f6368;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.labs-studio-draft-selection-close:hover,
.labs-studio-draft-selection-close:focus-visible {
    background: rgba(95, 99, 104, 0.12);
    color: #202124;
    outline: none;
}

.labs-studio-draft-selection-close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.labs-studio-drafts-table .labs-studio-table-row {
    grid-template-columns: 34px minmax(340px, 1.7fr) minmax(196px, 0.76fr) minmax(176px, 0.62fr) minmax(138px, 0.5fr) 48px;
}

.labs-studio-draft-row {
    position: relative;
    border-bottom: 1px solid rgba(95, 99, 104, 0.1);
    color: #5f6368;
    font-size: 0.84rem;
    overflow: visible;
    isolation: isolate;
    transition: background-color 90ms ease;
}

.labs-studio-draft-row:hover,
.labs-studio-draft-row:focus-within,
.labs-studio-draft-row:active {
    background: rgba(95, 99, 104, 0.08);
}

.labs-studio-draft-row.is-selected {
    background: rgba(95, 99, 104, 0.1);
}

.labs-studio-draft-row.has-open-menu {
    z-index: 80;
}

.labs-studio-drafts-panel.is-action-busy button,
.labs-studio-drafts-panel.is-action-busy input {
    cursor: progress;
}

.labs-studio-draft-row.is-action-busy {
    overflow: hidden;
    pointer-events: none;
}

.labs-studio-draft-row.is-action-busy::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    background: linear-gradient(105deg, transparent 18%, rgba(26, 115, 232, 0.14) 46%, transparent 74%);
    transform: translateX(-100%);
    animation: labs-studio-row-busy 1.25s ease-in-out infinite;
}

@keyframes labs-studio-row-busy {
    to { transform: translateX(100%); }
}

.labs-studio-video-row.has-open-menu,
.labs-studio-status-history-row.has-open-menu {
    z-index: 80;
}

.labs-studio-draft-progress {
    display: inline-flex;
    min-width: 64px;
    color: var(--text-color, #202124);
    font-weight: 700;
}

.labs-studio-draft-status-detail {
    align-items: center;
    min-width: 0;
    max-width: 100%;
    color: var(--text-secondary, #5f6368);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.labs-studio-draft-processing-details {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    font-weight: 500;
}

.labs-studio-draft-asset-state {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    min-width: 0;
}

.labs-studio-draft-asset-state strong {
    color: var(--text-color, #202124);
    font-size: 0.76rem;
    font-weight: 700;
}

.labs-studio-draft-asset-state small {
    color: var(--text-secondary, #5f6368);
    font-size: 0.72rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.labs-studio-draft-asset-track {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color, #202124) 14%, transparent);
}

.labs-studio-draft-asset-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #1a73e8;
    transition: width 180ms ease;
}

.labs-studio-draft-asset-state.is-complete .labs-studio-draft-asset-fill {
    background: #188038;
}

.labs-studio-draft-asset-state.is-failed .labs-studio-draft-asset-fill {
    background: #d93025;
}

.labs-studio-draft-asset-state.is-slow small {
    color: #b06000;
}

.labs-studio-draft-auto-publish-hint {
    color: var(--text-secondary, #5f6368);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.35;
}

.labs-studio-draft-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    position: relative;
    z-index: 4;
}

.labs-studio-video-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    position: relative;
    z-index: 4;
}

.labs-studio-upload-floating-card {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 9999;
    width: min(320px, calc(100vw - 36px));
    border-radius: 14px;
    padding: 14px 16px;
    background: #ffffff;
    color: #202124;
    border: 1px solid #e8eaed;
    box-shadow: 0 12px 32px rgba(60, 64, 67, 0.24);
    font-family: inherit;
    font-size: 0.84rem;
    display: none;
}

.labs-studio-upload-card-heading {
    font-weight: 700;
    margin-bottom: 10px;
}

.labs-studio-upload-card-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    border-top: 1px solid rgba(95, 99, 104, 0.12);
}

.labs-studio-upload-card-item > span:first-child {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labs-studio-upload-progress-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.labs-studio-upload-progress-row > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    color: #5f6368;
    font-size: 0.76rem;
}

.labs-studio-upload-progress-row > span strong {
    color: #202124;
    font-size: 0.78rem;
    font-weight: 700;
}

.labs-studio-upload-progress-row > span small {
    color: inherit;
    font-size: inherit;
    text-align: right;
}

.labs-studio-upload-progress-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(95, 99, 104, 0.18);
    overflow: hidden;
}

.labs-studio-upload-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: #1a73e8;
    transition: width 220ms ease-out;
    will-change: width;
}

.labs-studio-upload-progress-row.is-ready .labs-studio-upload-progress-fill {
    background: #188038;
}

.labs-studio-upload-progress-track.is-indeterminate .labs-studio-upload-progress-fill {
    animation: labs-studio-provider-progress 1.15s ease-in-out infinite alternate;
}

@keyframes labs-studio-provider-progress {
    from { transform: translateX(-20%); }
    to { transform: translateX(270%); }
}

@media (prefers-color-scheme: dark) {
    .labs-studio-upload-floating-card {
        background: #202124;
        color: #e8eaed;
        border-color: #3c4043;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    }

    .labs-studio-upload-progress-row > span {
        color: #9aa0a6;
    }

    .labs-studio-upload-progress-row > span strong {
        color: #e8eaed;
    }

    .labs-studio-upload-progress-track {
        background: rgba(154, 160, 166, 0.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .labs-studio-upload-progress-fill {
        transition: none;
    }

    .labs-studio-upload-progress-track.is-indeterminate .labs-studio-upload-progress-fill {
        animation: none;
        opacity: 0.65;
    }
}

.labs-studio-draft-menu-shell {
    position: relative;
    display: inline-flex;
}

.labs-studio-draft-menu-btn {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5f6368;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    box-shadow: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.labs-studio-draft-menu-btn:hover,
.labs-studio-draft-menu-btn:focus-visible,
.labs-studio-draft-menu-shell.is-open .labs-studio-draft-menu-btn {
    background: rgba(60, 64, 67, 0.12);
    color: #3c4043;
    box-shadow: none;
    outline: none;
}

.labs-studio-draft-menu-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.labs-studio-draft-menu,
.labs-studio-draft-bulk-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 120;
    display: none;
    min-width: 212px;
    padding: 6px;
    border: 1px solid rgba(218, 220, 224, 0.95);
    border-radius: 8px;
    background: #ffffff;
    color: #202124;
    box-shadow: 0 6px 18px rgba(60, 64, 67, 0.18);
    transform-origin: top right;
}

.labs-studio-draft-bulk-menu {
    right: auto;
    left: 0;
    transform-origin: top left;
}

.labs-studio-draft-menu-shell.is-open .labs-studio-draft-menu,
.labs-studio-draft-bulk-menu-shell.is-open .labs-studio-draft-bulk-menu {
    display: grid;
    gap: 4px;
    animation: labs-studio-menu-pop 140ms cubic-bezier(0.2, 0, 0, 1) both;
}

.labs-studio-draft-menu-item {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #202124;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

.labs-studio-draft-menu-item:hover,
.labs-studio-draft-menu-item:focus-visible {
    background: #f1f3f4;
    outline: none;
}

.labs-studio-draft-menu-item:active {
    background: rgba(60, 64, 67, 0.16);
    color: #202124;
}

.labs-studio-draft-menu-item.is-danger {
    color: #202124;
}

.labs-studio-draft-menu-item.is-danger:hover,
.labs-studio-draft-menu-item.is-danger:focus-visible {
    background: #f1f3f4;
    color: #202124;
}

.labs-studio-draft-menu-item.is-danger:active {
    background: rgba(60, 64, 67, 0.16);
    color: #202124;
}

.labs-studio-draft-menu-item[aria-disabled="true"],
.labs-studio-draft-menu-item:disabled {
    opacity: 0.48;
    pointer-events: none;
    cursor: default;
}

@keyframes labs-studio-menu-pop {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }

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

.labs-studio-danger-action {
    border: 1px solid #f1f3f4;
    background: #f1f3f4;
    color: #202124;
}

.labs-studio-danger-action:not(:disabled):hover {
    border-color: #e8eaed;
    background: rgba(95, 99, 104, 0.1);
}

.labs-studio-danger-action:disabled {
    opacity: 0.48;
    color: #5f6368;
    cursor: default;
}

.labs-studio-empty-row {
    padding: 24px var(--studio-page-gutter);
    color: #747775;
    font-size: 0.9rem;
    text-align: center;
}

.labs-studio-status-history-row {
    position: relative;
    border-bottom: 1px solid rgba(95, 99, 104, 0.1);
    color: #5f6368;
    font-size: 0.84rem;
    overflow: visible;
    isolation: isolate;
    transition: background-color 90ms ease;
}

.labs-studio-status-history-row.is-clickable {
    cursor: pointer;
}

.labs-studio-status-history-row.is-opening {
    opacity: 0.72;
    pointer-events: none;
}

.labs-studio-video-row:hover,
.labs-studio-video-row:focus-within,
.labs-studio-video-row:active,
.labs-studio-status-history-row:hover,
.labs-studio-status-history-row:focus-within,
.labs-studio-status-history-row:active {
    background: rgba(95, 99, 104, 0.08);
}

.labs-studio-video-row > :not(.ripple),
.labs-studio-status-history-row > :not(.ripple),
.labs-studio-draft-row > :not(.ripple) {
    position: relative;
    z-index: 1;
}

.labs-studio-video-row .ripple,
.labs-studio-status-history-row .ripple,
.labs-studio-draft-row .ripple {
    z-index: 0;
    background: rgba(95, 99, 104, 0.16);
}

.labs-studio-video-row:last-child,
.labs-studio-status-history-row:last-child,
.labs-studio-draft-row:last-child {
    border-bottom: 0;
}

.labs-studio-video-row > span small,
.labs-studio-status-history-row > span small {
    display: block;
    margin-top: 4px;
    color: #747775;
}

.labs-studio-notice-cell {
    display: inline-flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    overflow-wrap: anywhere;
}

.labs-studio-notice-cell small {
    color: #747775;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
}

.labs-studio-metric-cell {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.labs-studio-metric-cell strong {
    color: var(--text-color, #202124);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.15;
}

.labs-studio-check {
    display: grid;
    place-items: center;
}

.labs-studio-check input {
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid #747775;
    border-radius: 3px;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 90ms ease, background-color 90ms ease;
}

.labs-studio-check input:hover,
.labs-studio-check input:focus-visible {
    border-color: #202124;
    outline: none;
}

.labs-studio-check input:checked {
    border-color: #202124;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M5%2012.5l4.2%204.2L19%207'%20fill='none'%20stroke='%23202124'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.labs-studio-check input:indeterminate {
    border-color: #202124;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M6%2012h12'%20fill='none'%20stroke='%23202124'%20stroke-width='3'%20stroke-linecap='round'/%3E%3C/svg%3E");
}

.labs-studio-check input:disabled {
    border-color: #c7c7c7;
    cursor: default;
    opacity: 0.55;
}

.labs-studio-video-cell {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.labs-studio-video-meta {
    min-width: 0;
}

.labs-studio-video-cell img {
    width: 96px;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    object-fit: cover;
    background: #dadce0;
}

.labs-studio-video-cell strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-color, #202124);
    font-size: 0.9rem;
    line-height: 1.25;
}

.labs-studio-video-cell small {
    display: -webkit-box;
    max-width: 44ch;
    max-height: none;
    overflow: hidden;
    color: #5f6368;
    font-size: 0.78rem;
    line-height: 1.35;
    opacity: 1;
    transition: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.labs-studio-video-row:hover .labs-studio-video-cell small,
.labs-studio-video-row:focus-within .labs-studio-video-cell small {
    max-height: none;
    opacity: 1;
}

.labs-studio-row-actions {
    display: none;
    align-items: center;
    gap: 8px;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
    transition: max-height 160ms ease, margin-top 160ms ease, opacity 140ms ease, transform 160ms ease;
}

.labs-studio-video-row:hover .labs-studio-row-actions,
.labs-studio-video-row:focus-within .labs-studio-row-actions {
    display: none;
}

.labs-studio-row-action {
    position: relative;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5f6368;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
}

.labs-studio-row-action:hover {
    background: rgba(95, 99, 104, 0.12);
}

.labs-studio-row-action svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.labs-studio-status-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.labs-studio-status-pill {
    display: inline-flex;
    min-width: 82px;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border: 1.5px solid currentColor;
    border-radius: 6px;
    background: transparent;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.labs-studio-status-pill.is-review {
    background: transparent;
    border-color: var(--studio-review-border, #f9ab00);
    color: var(--studio-review-color, #b06f00);
}

.labs-studio-status-pill.is-draft {
    background: transparent;
    border-color: #9aa0a6;
    color: #5f6368;
}

.labs-studio-status-pill.is-processing {
    background: transparent;
    border-color: #8ab4f8;
    color: #0b57d0;
}

.labs-studio-status-pill.is-interrupted,
.labs-studio-status-pill.is-failed {
    background: transparent;
    border-color: #b8aba1;
    color: #6d5a50;
}

.labs-studio-status-pill.is-ready {
    background: transparent;
    border-color: #8ab4f8;
    color: #0b57d0;
}

.labs-studio-status-pill.is-rejected {
    background: transparent;
    border-color: var(--studio-rejected-border, #d93025);
    color: var(--studio-rejected-color, #b3261e);
}

.labs-studio-status-pill.is-approved {
    background: transparent;
    border-color: var(--studio-approved-border, #188038);
    color: var(--studio-approved-color, #137333);
}

.labs-studio-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(32, 33, 36, 0.46);
}

.labs-studio-modal-overlay[hidden] {
    display: none !important;
}

.labs-studio-rejection-modal-card,
.labs-studio-confirm-modal-card {
    position: relative;
    width: min(500px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 28px 32px 22px;
    border: 1px solid #ffffff;
    border-radius: 24px;
    background: #ffffff;
    color: #202124;
    box-shadow: 0 22px 54px rgba(60, 64, 67, 0.22);
}

.labs-studio-rejection-modal-card h2,
.labs-studio-confirm-modal-card h2 {
    margin: 0 0 28px;
    color: #202124;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.2;
}

.labs-studio-confirm-modal-card h2 {
    margin-bottom: 16px;
}

.labs-studio-rejection-video {
    margin: 0 0 14px;
    color: #202124;
    font-size: 1rem;
    line-height: 1.45;
}

.labs-studio-rejection-reason-block {
    display: grid;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.labs-studio-rejection-reason-block span {
    color: #5f6368;
    font-size: 0.74rem;
    font-weight: 800;
}

.labs-studio-rejection-reason-block p {
    margin: 0;
    color: #202124;
    font-size: 1rem;
    line-height: 1.48;
}

.labs-studio-confirm-modal-card p {
    margin: 0;
    color: #202124;
    font-size: 1rem;
    line-height: 1.48;
}

.labs-studio-notice-modal-card {
    position: relative;
    width: min(540px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 28px 32px 22px;
    border: 1px solid #ffffff;
    border-radius: 24px;
    background: #ffffff;
    color: #202124;
    box-shadow: 0 22px 54px rgba(60, 64, 67, 0.22);
}

.labs-studio-notice-kicker {
    display: block;
    margin: 0 0 10px;
    color: #5f6368;
    font-size: 0.76rem;
    font-weight: 800;
}

.labs-studio-notice-modal-card h2 {
    margin: 0 0 12px;
    color: #202124;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.2;
}

.labs-studio-notice-description {
    margin: 0;
    color: #5f6368;
    font-size: 0.96rem;
    line-height: 1.5;
}

.labs-studio-notice-detail-block {
    display: grid;
    gap: 8px;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #f1f3f4;
    border-radius: 18px;
    background: #f1f3f4;
}

.labs-studio-notice-detail-block span {
    color: #5f6368;
    font-size: 0.74rem;
    font-weight: 800;
}

.labs-studio-notice-detail-block p {
    margin: 0;
    color: #202124;
    font-size: 0.96rem;
    line-height: 1.5;
    white-space: pre-line;
}

.labs-studio-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 34px;
}

.labs-studio-modal-continue,
.labs-studio-modal-secondary {
    display: inline-flex;
    min-width: 106px;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: #202124;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: none;
    transition: background-color 80ms ease;
}

.labs-studio-modal-secondary {
    background: #f1f3f4;
    color: #202124;
}

.labs-studio-modal-continue:hover {
    background: #3c4043;
}

.labs-studio-modal-secondary:hover {
    background: #e8eaed;
}

.labs-studio-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.labs-studio-status-card {
    display: grid;
    gap: 10px;
    padding: 20px;
}

.labs-studio-status-table {
    margin-top: 18px;
}

.labs-studio-status-table .labs-studio-table-row {
    grid-template-columns: minmax(260px, 1.3fr) 0.85fr 1fr auto;
}

.labs-studio-status-row {
    border-bottom: 1px solid rgba(95, 99, 104, 0.14);
}

.labs-studio-status-row:last-child {
    border-bottom: 0;
}

.labs-studio-status-row strong {
    color: var(--text-color, #202124);
}

.labs-studio-progress {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #dadce0;
}

.labs-studio-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0b57d0;
}

.labs-studio-progress.warning i {
    background: #fbbc04;
}

.labs-studio-status-card span {
    color: #5f6368;
    font-weight: 600;
}

.labs-studio-status-card strong {
    color: var(--text-color, #202124);
    font-size: 2.2rem;
    line-height: 1;
}

.labs-studio-status-card small {
    color: #5f6368;
    line-height: 1.45;
}

.labs-studio-language-table {
    margin-top: 0;
}

.labs-studio-language-table .labs-studio-table-row {
    grid-template-columns: 34px minmax(360px, 1fr) minmax(96px, 120px) minmax(190px, 240px) minmax(96px, auto);
}

.labs-studio-language-table .labs-studio-table-header span:nth-child(3),
.labs-studio-language-video-row .labs-studio-language-count {
    justify-self: center;
    text-align: center;
}

.labs-studio-language-table .labs-studio-table-header span:nth-child(4),
.labs-studio-language-video-row > span:nth-of-type(2) {
    justify-self: start;
    text-align: left;
}

.labs-studio-language-table .labs-studio-table-header span:nth-child(5),
.labs-studio-language-detail-btn {
    justify-self: end;
}

.labs-studio-language-video-row {
    position: relative;
    border-bottom: 1px solid rgba(95, 99, 104, 0.1);
    color: #5f6368;
    font-size: 0.84rem;
    overflow: hidden;
    isolation: isolate;
    transition: background-color 90ms ease;
}

.labs-studio-language-video-row:hover,
.labs-studio-language-video-row:focus-within,
.labs-studio-language-video-row:active {
    background: rgba(95, 99, 104, 0.08);
}

.labs-studio-language-video-row > :not(.ripple) {
    position: relative;
    z-index: 1;
}

.labs-studio-language-video-row .ripple {
    z-index: 0;
    background: rgba(95, 99, 104, 0.16);
}

.labs-studio-language-video-row:last-child {
    border-bottom: 0;
}

.labs-studio-language-video-row > span small {
    display: block;
    margin-top: 4px;
    color: #747775;
}

.labs-studio-language-count {
    color: var(--text-color, #202124);
    font-weight: 700;
}

.labs-studio-language-modal-card {
    position: relative;
    width: min(640px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 28px 32px 22px;
    border: 1px solid #ffffff;
    border-radius: 24px;
    background: #ffffff;
    color: #202124;
    box-shadow: 0 22px 54px rgba(60, 64, 67, 0.22);
}

.labs-studio-language-modal-card h2 {
    margin: 0 0 14px;
    color: #202124;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.2;
}

.labs-studio-language-modal-video {
    margin: 0 0 22px;
    color: #5f6368;
    font-size: 0.92rem;
    line-height: 1.45;
}

.labs-studio-language-detail-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(95, 99, 104, 0.16);
    border-bottom: 1px solid rgba(95, 99, 104, 0.16);
}

.labs-studio-language-detail-row {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
}

.labs-studio-language-detail-row + .labs-studio-language-detail-row {
    border-left: 1px solid rgba(95, 99, 104, 0.16);
}

.labs-studio-language-detail-row > span {
    color: #5f6368;
    font-size: 0.78rem;
    font-weight: 700;
}

.labs-studio-language-chip-list {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.labs-studio-language-chip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: 100%;
    min-width: 0;
    min-height: 26px;
    align-items: center;
    gap: 10px;
    color: #202124;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-align: left;
}

.labs-studio-language-chip-name {
    min-width: 0;
}

.labs-studio-language-chip.has-progress {
    row-gap: 6px;
}

.labs-studio-language-state {
    flex: 0 0 auto;
    color: #5f6368;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.labs-studio-language-progress {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.labs-studio-language-progress-track {
    display: block;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8eaed;
}

.labs-studio-language-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #202124;
    transition: width 180ms ease;
}

.labs-studio-language-progress-percent {
    color: #5f6368;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
}

.labs-studio-language-chip.is-translated .labs-studio-language-state {
    padding: 4px 8px;
    border-radius: 999px;
    background: #188038;
    color: #ffffff;
    line-height: 1;
}

.labs-studio-language-chip.is-error .labs-studio-language-state {
    color: #d93025;
}

.labs-studio-language-chip.is-processing .labs-studio-language-state,
.labs-studio-language-chip.is-queued .labs-studio-language-state,
.labs-studio-language-chip.is-credit .labs-studio-language-state {
    padding: 4px 8px;
    border-radius: 999px;
    background: #f1f3f4;
    color: #3c4043;
    line-height: 1;
}

.labs-studio-language-chip.is-credit .labs-studio-language-state {
    color: #d93025;
}

.labs-studio-language-list {
    display: grid;
}

.labs-studio-language-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(95, 99, 104, 0.14);
}

.labs-studio-language-row:last-child {
    border-bottom: 0;
}

.labs-studio-language-row span {
    color: #5f6368;
}

.labs-studio-language-row strong {
    color: var(--text-color, #202124);
    text-align: right;
}

@media (prefers-color-scheme: dark) {
    #talento-panel {
        --talent-panel-bg: #121314;
        --talent-field-bg: #2b2c2f;
        --talent-field-text: #e8eaed;
        --talent-field-border: rgba(255, 255, 255, 0.14);
        --talent-field-muted: #bdc1c6;
        --talent-floating-bg: #303134;
        --talent-floating-border: #303134;
        --talent-floating-hover: #3a3b3d;
        --talent-focus-ring: #8ab4f8;
    }

    #studio-panel {
        --text-color: #e8eaed;
        --text-secondary: #bdc1c6;
        --studio-review-color: #fdd663;
        --studio-review-border: #fbbc04;
        --studio-rejected-color: #f28b82;
        --studio-rejected-border: #f28b82;
        --studio-approved-color: #81c995;
        --studio-approved-border: #81c995;
    }

    .labs-page-title-group h1,
    .labs-app-intro h2,
    .labs-module-card,
    .labs-feature-hero h2,
    .labs-feature-card {
        color: #e8eaed;
    }

    .labs-page-kicker,
    .labs-app-intro p,
    .labs-module-text,
    .labs-feature-hero p {
        color: #bdc1c6;
    }

    .labs-app-intro,
    .labs-feature-hero {
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }

    .labs-app-intro-icon {
        filter: brightness(0) invert(1);
        opacity: 0.94;
    }

    .labs-module-card,
    .labs-feature-card {
        background: #202124;
        border-color: rgba(255, 255, 255, 0.06);
    }

    .labs-module-card:hover,
    .labs-feature-card:hover {
        background: #2b2c2f;
        border-color: rgba(255, 255, 255, 0.12);
    }

    .labs-module-visual {
        background: #171717;
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    .labs-module-symbol {
        opacity: 0.96;
        filter: brightness(0) invert(1);
    }

    .talent-loading,
    .talent-setup-view,
    .talent-database-view,
    .talent-entity-list,
    .talent-entity-row {
        border-color: rgba(255, 255, 255, 0.12);
    }

    .talent-section-head h2,
    .talent-toolbar h2,
    .talent-modal-head h2,
    .talent-lock-notice strong,
    .talent-empty-state,
    .talent-entity-main strong,
    .talent-entity-meta {
        color: #e8eaed;
    }

    .talent-section-head p,
    .talent-toolbar p,
    .talent-lock-notice span,
    .talent-empty-state span,
    .talent-status,
    .talent-sport-card small,
    .talent-form label span,
    .talent-photo-copy > span,
    .talent-photo-copy small,
    .talent-popover-head span,
    .talent-stat-row span,
    .talent-popover-empty,
    .talent-entity-main span,
    .talent-entity-meta small {
        color: #bdc1c6;
    }

    .talent-kicker {
        background: rgba(138, 180, 248, 0.16);
        color: #8ab4f8;
    }

    .talent-sport-card,
    .talent-search,
    .talent-sport-search,
    .talent-form input,
    .talent-form textarea {
        background: var(--talent-field-bg);
        border-color: var(--talent-field-border);
        color: var(--talent-field-text);
    }

    .talent-modal-card {
        --talent-panel-bg: #202124;
        background: var(--talent-panel-bg);
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--talent-field-text);
    }

    .talent-photo-cropper {
        --talent-cropper-bg: #202124;
        --talent-cropper-text: #e8eaed;
        --talent-cropper-muted: #bdc1c6;
        --talent-cropper-border: rgba(255, 255, 255, 0.14);
        --talent-cropper-field: #2b2c2f;
    }

    .talent-photo-cropper-card {
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
    }

    .talent-custom-select-trigger {
        background: var(--talent-field-bg);
        border-color: var(--talent-field-border);
        color: var(--talent-field-text);
    }

    .talent-entity-popover {
        --talent-panel-bg: #202124;
        --talent-field-text: #e8eaed;
        --talent-field-muted: #bdc1c6;
        background: var(--talent-panel-bg);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
    }

    .talent-entity-row:hover,
    .talent-entity-row.is-selected,
    .talent-stat-row {
        background: rgba(138, 180, 248, 0.12);
    }

    .talent-measure-units {
        background: rgba(255, 255, 255, 0.08);
    }

    .talent-custom-select-menu {
        background: var(--talent-floating-bg);
        border-color: var(--talent-floating-border);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
    }

    .talent-custom-select-option {
        color: var(--talent-field-text);
    }

    .talent-custom-select-check {
        color: #8ab4f8;
    }

    .talent-search input,
    .talent-sport-search input {
        color: #e8eaed;
    }

    .talent-search input::placeholder,
    .talent-sport-search input::placeholder,
    .talent-form input::placeholder,
    .talent-form textarea::placeholder {
        color: #9aa0a6;
    }

    .talent-sport-card.is-selected {
        background: rgba(138, 180, 248, 0.16);
        border-color: #8ab4f8;
        box-shadow: inset 0 0 0 1px #8ab4f8;
    }

    .talent-lock-notice,
    .talent-empty-state,
    .talent-secondary-btn,
    .talent-icon-btn {
        background: #2b2c2f;
        border-color: rgba(255, 255, 255, 0.12);
        color: #e8eaed;
    }

    .talent-entity-avatar {
        background: rgba(138, 180, 248, 0.16);
        color: #8ab4f8;
    }

    .talent-modal-backdrop {
        background: rgba(0, 0, 0, 0.66);
    }

    .talent-skeleton-line,
    .talent-skeleton-grid span {
        background: linear-gradient(90deg, #2b2c2f, #3c4043, #2b2c2f);
        background-size: 220% 100%;
    }

    .labs-original-card {
        background: #202124;
        border-color: rgba(255, 255, 255, 0.08);
    }

    .labs-original-card:hover {
        background: #2b2c2f;
        border-color: rgba(255, 255, 255, 0.14);
    }

    .labs-original-card img {
        background: #171717;
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .labs-original-card small {
        color: #bdc1c6;
    }

    #live-stream-panel .labs-original-card {
        border-color: rgba(255, 255, 255, 0.1);
        background:
            radial-gradient(circle at 84% 86%, rgba(255, 118, 54, 0.22), transparent 35%),
            linear-gradient(145deg, #15182d 0%, #1e172c 50%, #121013 100%);
    }

    #live-stream-panel .labs-original-card:hover {
        border-color: rgba(255, 255, 255, 0.2);
        background:
            radial-gradient(circle at 84% 86%, rgba(255, 118, 54, 0.3), transparent 36%),
            linear-gradient(145deg, #1b2038 0%, #241a34 50%, #171215 100%);
    }

    #live-stream-panel .labs-original-card small {
        color: #c7c9d6;
    }

    #live-stream-panel .labs-original-card img {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.38));
        mix-blend-mode: normal;
    }

    .labs-studio-heading h2,
    .labs-studio-upload-zone h2,
    .labs-studio-selected-file strong,
    .labs-studio-section-head h2,
    .labs-studio-empty-row strong,
    .labs-studio-status-card strong,
    .labs-studio-language-row strong {
        color: #e8eaed;
    }

    .labs-studio-heading p,
    .labs-studio-upload-terms p,
    .labs-studio-section-head p,
    .labs-studio-status-card small,
    .labs-studio-status-card span,
    .labs-studio-language-row span,
    .labs-studio-selected-file span,
    .labs-studio-selected-file small,
    .labs-studio-field span {
        color: #bdc1c6;
    }

    .labs-studio-tabs {
        border-bottom-color: rgba(255, 255, 255, 0.16);
    }

    .labs-studio-demo-badge {
        background: rgba(138, 180, 248, 0.14);
        color: #8ab4f8;
    }

    .labs-studio-tab {
        color: #9aa0a6;
    }

    .labs-studio-tab:hover,
    .labs-studio-tab.active {
        color: #f1f3f4;
    }

    .labs-studio-upload-zone.is-dragging {
        background: rgba(138, 180, 248, 0.1);
    }

    .labs-studio-upload-icon {
        background: #303134;
        color: #bdc1c6;
    }

    .labs-studio-upload-terms a,
    .labs-studio-link-btn {
        color: #8ab4f8;
    }

    .labs-studio-upload-btn,
    .labs-studio-action-btn {
        background: #f1f3f4;
        border-color: #f1f3f4;
        color: #111111;
    }

    .labs-studio-upload-btn:hover,
    .labs-studio-action-btn:hover {
        background: #dfe3e7;
        border-color: #dfe3e7;
    }

    .labs-studio-selected-file,
    .labs-studio-table,
    .labs-studio-status-card,
    .labs-studio-language-list {
        background: #202124;
        border-color: rgba(255, 255, 255, 0.12);
    }

    .labs-studio-content-table {
        background: transparent;
        border-color: transparent;
    }

    .labs-studio-filterbar,
    .labs-studio-video-row,
    .labs-studio-status-history-row,
    .labs-studio-language-video-row {
        border-color: rgba(255, 255, 255, 0.08);
        color: #bdc1c6;
    }

    .labs-studio-video-row:hover,
    .labs-studio-video-row:focus-within,
    .labs-studio-video-row:active,
    .labs-studio-status-history-row:hover,
    .labs-studio-status-history-row:focus-within,
    .labs-studio-status-history-row:active,
    .labs-studio-language-video-row:hover,
    .labs-studio-language-video-row:focus-within,
    .labs-studio-language-video-row:active {
        background: rgba(255, 255, 255, 0.08);
    }

    .labs-studio-video-row .ripple,
    .labs-studio-status-history-row .ripple,
    .labs-studio-draft-row .ripple,
    .labs-studio-language-video-row .ripple {
        background: rgba(232, 234, 237, 0.18);
    }

    .labs-studio-status-row {
        border-color: rgba(255, 255, 255, 0.12);
        color: #bdc1c6;
    }

    .labs-studio-search input,
    .labs-studio-search input:focus {
        color: #f1f3f4;
        caret-color: #f1f3f4;
    }

    .labs-studio-search-clear {
        color: #bdc1c6;
    }

    .labs-studio-search-clear:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .labs-studio-video-cell strong,
    .labs-studio-metric-cell strong,
    .labs-studio-status-row strong,
    .labs-studio-draft-progress,
    .labs-studio-language-count {
        color: #e8eaed;
    }

    .labs-studio-drafts-heading h3 {
        color: #f1f3f4;
    }

    .labs-studio-drafts-heading p {
        color: #9aa0a6;
    }

    .labs-studio-table-header {
        color: #9aa0a6;
    }

    .labs-studio-draft-asset-state strong {
        color: #e8eaed;
    }

    .labs-studio-draft-asset-state small,
    .labs-studio-draft-auto-publish-hint {
        color: #bdc1c6;
    }

    .labs-studio-draft-asset-track {
        background: rgba(232, 234, 237, 0.2);
    }

    .labs-studio-draft-asset-state.is-slow small {
        color: #fdd663;
    }

    .labs-studio-video-cell small,
    .labs-studio-metric-cell small,
    .labs-studio-video-row > span small,
    .labs-studio-status-history-row > span small,
    .labs-studio-drafts-status,
    .labs-studio-language-video-row > span small {
        color: #9aa0a6;
    }

    .labs-studio-drafts-status.is-error {
        color: #c7c7c7;
    }

    .labs-studio-draft-selection-bar {
        background: #202124;
        border-color: #202124;
        color: #f1f3f4;
    }

    .labs-studio-draft-selection-bar strong,
    .labs-studio-draft-bulk-menu-btn {
        color: #f1f3f4;
    }

    .labs-studio-draft-bulk-menu-btn:hover,
    .labs-studio-draft-bulk-menu-btn:focus-visible,
    .labs-studio-draft-bulk-menu-shell.is-open .labs-studio-draft-bulk-menu-btn,
    .labs-studio-draft-selection-close:hover,
    .labs-studio-draft-selection-close:focus-visible {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }

    .labs-studio-draft-selection-close {
        color: #bdc1c6;
    }

    .labs-studio-draft-row {
        border-color: rgba(255, 255, 255, 0.08);
        color: #bdc1c6;
    }

    .labs-studio-draft-row:hover,
    .labs-studio-draft-row:focus-within,
    .labs-studio-draft-row:active {
        background: rgba(255, 255, 255, 0.08);
    }

    .labs-studio-draft-row.is-selected {
        background: rgba(255, 255, 255, 0.1);
    }

    .labs-studio-check input {
        border-color: #9aa0a6;
    }

    .labs-studio-check input:hover,
    .labs-studio-check input:focus-visible {
        border-color: #f1f3f4;
    }

    .labs-studio-check input:checked {
        border-color: #f1f3f4;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M5%2012.5l4.2%204.2L19%207'%20fill='none'%20stroke='%23f1f3f4'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .labs-studio-check input:indeterminate {
        border-color: #f1f3f4;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M6%2012h12'%20fill='none'%20stroke='%23f1f3f4'%20stroke-width='3'%20stroke-linecap='round'/%3E%3C/svg%3E");
    }

    .labs-studio-check input:disabled {
        border-color: #80868b;
        opacity: 0.78;
    }

    .labs-studio-draft-menu-btn {
        background: transparent;
        color: #bdc1c6;
        box-shadow: none;
    }

    .labs-studio-draft-menu-btn:hover,
    .labs-studio-draft-menu-btn:focus-visible,
    .labs-studio-draft-menu-shell.is-open .labs-studio-draft-menu-btn {
        background: rgba(232, 234, 237, 0.12);
        color: #f1f3f4;
        box-shadow: none;
    }

    .labs-studio-draft-menu,
    .labs-studio-draft-bulk-menu {
        background: #303134;
        border-color: rgba(232, 234, 237, 0.14);
        color: #e8eaed;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
    }

    .labs-studio-draft-menu-item {
        color: #e8eaed;
    }

    .labs-studio-draft-menu-item:hover,
    .labs-studio-draft-menu-item:focus-visible {
        background: rgba(232, 234, 237, 0.12);
    }

    .labs-studio-draft-menu-item:active {
        background: rgba(232, 234, 237, 0.16);
        color: #e8eaed;
    }

    .labs-studio-draft-menu-item.is-danger {
        color: #e8eaed;
    }

    .labs-studio-draft-menu-item.is-danger:hover,
    .labs-studio-draft-menu-item.is-danger:focus-visible {
        background: rgba(232, 234, 237, 0.12);
        color: #e8eaed;
    }

    .labs-studio-draft-menu-item.is-danger:active {
        background: rgba(232, 234, 237, 0.16);
        color: #e8eaed;
    }

    .labs-studio-danger-action {
        background: #202124;
        border-color: #202124;
        color: #f1f3f4;
    }

    .labs-studio-danger-action:not(:disabled):hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: #202124;
    }

    .labs-studio-danger-action:disabled {
        border-color: #3c4043;
        background: #202124;
        color: #9aa0a6;
        opacity: 1;
    }

    .labs-studio-draft-row.is-action-busy::after {
        background: linear-gradient(105deg, transparent 18%, rgba(138, 180, 248, 0.18) 46%, transparent 74%);
    }

    .labs-studio-row-action {
        color: #bdc1c6;
    }

    .labs-studio-row-action:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .labs-studio-video-cell img {
        background: #303134;
    }

    .labs-studio-rejection-detail-btn {
        background: #ffffff;
        color: #202124;
    }

    .labs-studio-rejection-detail-btn:hover,
    .labs-studio-language-detail-btn:hover,
    .labs-studio-notice-detail-btn:hover {
        background: #e8eaed;
    }

    .labs-studio-language-detail-btn,
    .labs-studio-notice-detail-btn {
        background: #ffffff;
        color: #202124;
    }

    .labs-studio-modal-overlay {
        background: rgba(0, 0, 0, 0.72);
    }

    .labs-studio-rejection-modal-card,
    .labs-studio-confirm-modal-card,
    .labs-studio-notice-modal-card {
        background: #282828;
        border-color: #282828;
        color: #f1f3f4;
        box-shadow: 0 18px 52px rgba(0, 0, 0, 0.46);
    }

    .labs-studio-language-modal-card {
        background: #282828;
        border-color: #282828;
        color: #f1f3f4;
        box-shadow: 0 18px 52px rgba(0, 0, 0, 0.46);
    }

    .labs-studio-rejection-modal-card h2,
    .labs-studio-confirm-modal-card h2,
    .labs-studio-confirm-modal-card p,
    .labs-studio-rejection-reason-block p,
    .labs-studio-notice-modal-card h2,
    .labs-studio-notice-detail-block p,
    .labs-studio-language-modal-card h2,
    .labs-studio-language-chip {
        color: #f1f3f4;
    }

    .labs-studio-rejection-video,
    .labs-studio-notice-description,
    .labs-studio-language-modal-video {
        color: #f1f3f4;
    }

    .labs-studio-rejection-reason-block span,
    .labs-studio-notice-kicker,
    .labs-studio-notice-detail-block span,
    .labs-studio-language-detail-row > span {
        color: #c7c7c7;
    }

    .labs-studio-language-state {
        color: #c7c7c7;
    }

    .labs-studio-language-progress-track {
        background: #3a3a3a;
    }

    .labs-studio-language-progress-fill {
        background: #f1f3f4;
    }

    .labs-studio-language-progress-percent {
        color: #c7c7c7;
    }

    .labs-studio-language-chip.is-translated .labs-studio-language-state {
        background: #1e8e3e;
        color: #ffffff;
    }

    .labs-studio-language-chip.is-error .labs-studio-language-state {
        color: #f28b82;
    }

    .labs-studio-language-chip.is-processing .labs-studio-language-state,
    .labs-studio-language-chip.is-queued .labs-studio-language-state,
    .labs-studio-language-chip.is-credit .labs-studio-language-state {
        background: #3a3a3a;
        color: #f1f3f4;
    }

    .labs-studio-language-chip.is-credit .labs-studio-language-state {
        color: #f28b82;
    }

    .labs-studio-rejection-reason-block {
        background: transparent;
        border: 0;
    }

    .labs-studio-notice-detail-block {
        background: #303134;
        border-color: #303134;
    }

    .labs-studio-language-detail-list,
    .labs-studio-language-detail-row {
        border-color: rgba(255, 255, 255, 0.12);
    }

    .labs-studio-modal-continue {
        background: #ffffff;
        color: #202124;
    }

    .labs-studio-modal-continue:hover {
        background: #f1f3f4;
    }

    .labs-studio-modal-secondary {
        background: #3c4043;
        color: #f1f3f4;
    }

    .labs-studio-modal-secondary:hover {
        background: #4a4d51;
    }

    .labs-studio-status-pill.is-draft {
        border-color: #8a8d91;
        color: #c7c7c7;
    }

    .labs-studio-status-pill.is-processing,
    .labs-studio-status-pill.is-ready {
        border-color: #8ab4f8;
        color: #a8c7fa;
    }

    .labs-studio-status-pill.is-interrupted,
    .labs-studio-status-pill.is-failed {
        border-color: #9f8f85;
        color: #d8c6bb;
    }

    .labs-studio-progress {
        background: #3c4043;
    }

    .labs-studio-field input {
        background: #171717;
        color: #e8eaed;
        border-color: rgba(255, 255, 255, 0.18);
    }

    .labs-studio-table-header,
    .labs-studio-language-row {
        border-color: rgba(255, 255, 255, 0.12);
    }
}

@media (max-width: 1280px) {
    #live-stream-panel .labs-original-grid {
        grid-template-columns: repeat(3, minmax(210px, 1fr));
    }
}

@container (max-width: 1120px) {
    .labs-studio-page {
        --studio-page-gutter: clamp(20px, 3vw, 36px);
        padding-top: 30px;
    }

    #studio-panel > .chat-header {
        padding-top: 24px;
        padding-left: clamp(20px, 3vw, 36px);
        padding-right: clamp(20px, 3vw, 36px);
    }

    .labs-studio-heading {
        gap: 9px;
        padding-bottom: 20px;
    }

    .labs-studio-heading h2 {
        font-size: 1.9rem;
        line-height: 1.1;
    }

    .labs-studio-heading p {
        max-width: 68ch;
        font-size: 0.86rem;
        line-height: 1.4;
    }

    .labs-studio-content-table .labs-studio-table-row {
        grid-template-columns: 32px minmax(280px, 1.5fr) 0.62fr 0.72fr 0.48fr;
    }

    .labs-studio-published-table .labs-studio-table-row {
        grid-template-columns: 32px minmax(280px, 1.5fr) minmax(112px, 0.62fr) minmax(118px, 0.62fr) minmax(118px, 0.5fr);
    }

    .labs-studio-status-history-table .labs-studio-table-row {
        grid-template-columns: 32px minmax(280px, 1.5fr) minmax(176px, 0.72fr) 0.58fr;
    }

    .labs-studio-drafts-table .labs-studio-table-row {
        grid-template-columns: 32px minmax(280px, 1.4fr) minmax(148px, 0.58fr) minmax(132px, 0.5fr) 44px;
    }

    .labs-studio-language-table .labs-studio-table-row {
        grid-template-columns: 32px minmax(280px, 1fr) minmax(84px, 104px) minmax(168px, 210px) minmax(92px, auto);
    }

    .labs-studio-content-table .labs-studio-table-header span:nth-child(3),
    .labs-studio-content-table .labs-studio-table-header span:nth-child(7),
    .labs-studio-content-table .labs-studio-video-row > span:nth-of-type(1),
    .labs-studio-content-table .labs-studio-video-row > span:nth-of-type(5) {
        display: none;
    }

    .labs-studio-status-history-table .labs-studio-table-header span:nth-child(5),
    .labs-studio-status-history-row > span:nth-of-type(3) {
        display: none;
    }

    .labs-studio-drafts-table .labs-studio-table-header span:nth-child(5),
    .labs-studio-draft-row > span:nth-of-type(3) {
        display: none;
    }

    .labs-studio-status-history-table .labs-studio-table-header span:nth-child(3) {
        display: inline;
    }

    .labs-studio-drafts-table .labs-studio-table-header span:nth-child(3) {
        display: inline;
    }

    .labs-studio-language-table .labs-studio-table-header span:nth-child(3) {
        display: inline;
    }

    .labs-studio-video-cell {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .labs-studio-video-cell img {
        width: 86px;
    }
}

@container (max-width: 920px) {
    .labs-studio-tabs {
        gap: 22px;
    }

    .labs-studio-content-table .labs-studio-table-row {
        grid-template-columns: 32px minmax(0, 1fr) 0.68fr 0.6fr;
    }

    .labs-studio-published-table .labs-studio-table-row {
        grid-template-columns: 32px minmax(0, 1fr) minmax(118px, 0.66fr) minmax(112px, 0.58fr);
    }

    .labs-studio-status-history-table .labs-studio-table-row {
        grid-template-columns: 32px minmax(0, 1fr) minmax(158px, 0.62fr);
    }

    .labs-studio-drafts-table .labs-studio-table-row {
        grid-template-columns: 32px minmax(0, 1fr) minmax(148px, 0.58fr) 44px;
    }

    .labs-studio-language-table .labs-studio-table-row {
        grid-template-columns: 32px minmax(0, 1fr) minmax(74px, 92px) minmax(92px, auto);
    }

    .labs-studio-content-table .labs-studio-table-header span:nth-child(6),
    .labs-studio-content-table .labs-studio-video-row > span:nth-of-type(4) {
        display: none;
    }

    .labs-studio-status-history-table .labs-studio-table-header span:nth-child(4),
    .labs-studio-status-history-row > span:nth-of-type(2) {
        display: none;
    }

    .labs-studio-drafts-table .labs-studio-table-header span:nth-child(4),
    .labs-studio-drafts-table .labs-studio-table-header span:nth-child(5),
    .labs-studio-draft-row > span:nth-of-type(2),
    .labs-studio-draft-row > span:nth-of-type(3) {
        display: none;
    }

    .labs-studio-draft-row .labs-studio-draft-actions {
        grid-column: 4;
    }

    .labs-studio-language-table .labs-studio-table-header span:nth-child(4),
    .labs-studio-language-video-row > span:nth-of-type(2) {
        display: none;
    }
}

@container (max-width: 740px) {
    .labs-studio-page {
        padding-top: 24px;
    }

    .labs-studio-heading {
        padding-bottom: 18px;
    }

    .labs-studio-heading h2 {
        font-size: 1.55rem;
        line-height: 1.12;
    }

    .labs-studio-heading p {
        font-size: 0.82rem;
    }

    .labs-studio-content-table .labs-studio-table-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .labs-studio-published-table .labs-studio-table-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .labs-studio-status-history-table .labs-studio-table-row {
        grid-template-columns: 30px minmax(0, 1fr);
        align-items: flex-start;
        gap: 8px 12px;
    }

    .labs-studio-drafts-table .labs-studio-table-row {
        grid-template-columns: 30px minmax(0, 1fr) 42px;
        align-items: flex-start;
        gap: 8px 12px;
    }

    .labs-studio-language-table .labs-studio-table-row {
        grid-template-columns: 30px minmax(0, 1fr);
        align-items: flex-start;
        gap: 8px 12px;
    }

    .labs-studio-content-table .labs-studio-table-header span:nth-child(n + 3),
    .labs-studio-content-table .labs-studio-video-row > span {
        display: none;
    }

    .labs-studio-status-history-table .labs-studio-table-header {
        display: none;
    }

    .labs-studio-drafts-table .labs-studio-table-header {
        display: none;
    }

    .labs-studio-language-table .labs-studio-table-header {
        display: none;
    }

    .labs-studio-status-history-row .labs-studio-status-cell {
        grid-column: 2;
    }

    .labs-studio-draft-row .labs-studio-status-cell {
        grid-column: 2;
    }

    .labs-studio-draft-row .labs-studio-draft-actions {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    }

    .labs-studio-status-history-row > span:nth-of-type(n + 2) {
        display: none;
    }

    .labs-studio-draft-row > span:nth-of-type(2),
    .labs-studio-draft-row > span:nth-of-type(3) {
        display: none;
    }

    .labs-studio-language-video-row .labs-studio-language-count,
    .labs-studio-language-video-row .labs-studio-language-detail-btn {
        grid-column: 2;
        justify-self: start;
        text-align: left;
    }

    .labs-studio-language-video-row > span:nth-of-type(2) {
        display: none;
    }

    .labs-studio-language-detail-btn {
        justify-self: start;
    }

    .labs-studio-video-cell {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .labs-studio-video-cell img {
        width: 82px;
    }

    .labs-studio-row-actions {
        gap: 6px;
    }

    .labs-studio-row-action {
        width: 26px;
        height: 26px;
    }

    .labs-studio-row-action svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 820px) {
    .labs-page-content {
        width: min(100% - 32px, 720px);
        padding-top: 26px;
    }

    .labs-app-intro,
    .labs-feature-hero {
        align-items: flex-start;
    }

    .labs-module-grid,
    .labs-feature-grid {
        grid-template-columns: 1fr;
    }

    .labs-module-card {
        min-height: 0;
    }

    .talent-section-head,
    .talent-toolbar,
    .talent-lock-notice {
        align-items: flex-start;
        flex-direction: column;
    }

    .talent-sport-grid,
    .talent-skeleton-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .talent-filterbar,
    .talent-form-grid,
    .talent-sport-fields {
        grid-template-columns: 1fr;
    }

    .talent-entity-row {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .talent-entity-meta {
        grid-column: 2;
        align-items: flex-start;
    }

    .studio-original-grid {
        grid-template-columns: 1fr;
    }

    .labs-original-card {
        min-height: 0;
    }

    #live-stream-panel .labs-original-grid {
        grid-template-columns: 1fr;
    }

    #live-stream-panel .labs-original-card {
        min-height: 260px;
        padding: 22px;
    }

    #live-stream-panel .labs-original-card span {
        max-width: 100%;
    }

    #live-stream-panel .labs-original-card img {
        width: min(52%, 170px);
        max-height: 144px;
    }

    .labs-studio-page {
        --studio-page-gutter: 16px;
        width: 100%;
        padding: 24px var(--studio-page-gutter) 48px;
    }

    #studio-panel > .chat-header {
        height: auto;
        min-height: 0;
        padding-top: 22px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .labs-studio-heading {
        gap: 8px;
        padding-top: 0;
        padding-bottom: 18px;
    }

    .labs-page-title-group h1 {
        font-size: 1.08rem;
        line-height: 1.18;
    }

    .labs-page-kicker {
        font-size: 0.72rem;
        line-height: 1.3;
    }

    .labs-studio-heading h2 {
        font-size: 1.55rem;
        line-height: 1.12;
    }

    .labs-studio-heading p {
        max-width: 100%;
        font-size: 0.82rem;
        line-height: 1.4;
    }

    .labs-studio-tabs {
        gap: 26px;
    }

    .labs-studio-tab {
        font-size: 0.94rem;
    }

    .labs-studio-upload-zone {
        min-height: 360px;
        padding: 42px 10px;
    }

    .labs-studio-upload-zone h2 {
        font-size: 1.35rem;
        line-height: 1.2;
    }

    .labs-studio-upload-icon {
        width: 112px;
        height: 112px;
        margin-bottom: 24px;
    }

    .labs-studio-upload-icon svg {
        width: 48px;
        height: 48px;
    }

    .labs-studio-selected-file,
    .labs-studio-section-head {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .labs-studio-selected-file {
        display: grid;
    }

    .labs-studio-section-head {
        display: grid;
    }

    .labs-studio-action-btn {
        width: fit-content;
    }

    .labs-studio-status-grid {
        grid-template-columns: 1fr;
    }

    .labs-studio-content-table .labs-studio-table-row {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .labs-studio-status-history-table .labs-studio-table-row {
        grid-template-columns: 32px minmax(0, 1fr);
        align-items: flex-start;
        gap: 9px 12px;
    }

    .labs-studio-language-table .labs-studio-table-row {
        grid-template-columns: 32px minmax(0, 1fr);
        align-items: flex-start;
        gap: 9px 12px;
    }

    .labs-studio-content-table .labs-studio-table-header span:nth-child(n + 3),
    .labs-studio-content-table .labs-studio-video-row > span {
        display: none;
    }

    .labs-studio-status-history-table .labs-studio-table-header {
        display: none;
    }

    .labs-studio-language-table .labs-studio-table-header {
        display: none;
    }

    .labs-studio-status-history-row .labs-studio-status-cell {
        grid-column: 2;
    }

    .labs-studio-status-history-row > span:nth-of-type(n + 2) {
        display: none;
    }

    .labs-studio-language-video-row .labs-studio-language-count,
    .labs-studio-language-video-row .labs-studio-language-detail-btn {
        grid-column: 2;
        justify-self: start;
        text-align: left;
    }

    .labs-studio-language-video-row > span:nth-of-type(2) {
        display: none;
    }

    .labs-studio-language-detail-btn {
        justify-self: start;
    }

    .labs-studio-video-cell {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .labs-studio-video-cell img {
        width: 96px;
    }

    .labs-studio-status-table .labs-studio-table-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .labs-studio-language-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .labs-studio-language-row strong {
        text-align: left;
    }
}

@media (max-width: 560px) {
    #studio-panel > .chat-header {
        padding-top: 18px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .labs-studio-page {
        --studio-page-gutter: 14px;
        padding-top: 18px;
    }

    .labs-page-title-group {
        gap: 3px;
    }

    .labs-page-title-group h1 {
        font-size: 1rem;
        line-height: 1.2;
    }

    .labs-page-kicker {
        font-size: 0.7rem;
    }

    .talent-sport-grid,
    .talent-skeleton-grid {
        grid-template-columns: 1fr;
    }

    .talent-modal {
        padding: 12px;
    }

    .talent-modal-card {
        border-radius: 10px;
    }

    .talent-photo-cropper {
        padding: 12px;
    }

    .talent-photo-cropper-card {
        gap: 14px;
        padding: 16px;
        border-radius: 10px;
    }

    .talent-photo-cropper-head {
        align-items: stretch;
        flex-direction: column;
    }

    .talent-photo-cropper-actions {
        width: 100%;
    }

    .talent-photo-cropper-actions .talent-primary-btn,
    .talent-photo-cropper-actions .talent-secondary-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .talent-photo-cropper-stage {
        min-height: 250px;
    }

    .talent-modal-head {
        flex-direction: column;
        padding: 18px 18px 14px;
    }

    .talent-modal-head-actions {
        width: 100%;
        justify-content: stretch;
    }

    .talent-modal-head-actions .talent-primary-btn,
    .talent-modal-head-actions .talent-secondary-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .talent-form {
        padding: 4px 18px 18px;
    }

    .labs-studio-heading {
        gap: 9px;
        padding-bottom: 16px;
    }

    .labs-studio-heading h2 {
        font-size: 1.42rem;
        line-height: 1.14;
    }

    .labs-studio-heading p {
        font-size: 0.8rem;
    }

    .labs-studio-tabs {
        gap: 22px;
    }

    .labs-studio-tab {
        font-size: 0.86rem;
    }

    .labs-studio-language-modal-card {
        padding: 24px 22px 20px;
    }

    .labs-studio-language-detail-list {
        grid-template-columns: 1fr;
    }

    .labs-studio-language-detail-row {
        gap: 10px;
        padding-left: 0;
        padding-right: 0;
    }

    .labs-studio-language-detail-row + .labs-studio-language-detail-row {
        border-top: 1px solid rgba(95, 99, 104, 0.16);
        border-left: 0;
    }

}

@media (prefers-color-scheme: dark) and (max-width: 560px) {
    .labs-studio-language-detail-row + .labs-studio-language-detail-row {
        border-top-color: rgba(255, 255, 255, 0.12);
    }
}

/* Perfil de usuario en barra lateral */
.profile-container {
    position: relative;
    border-top: 1px solid #e9ecef;
    padding-top: 12px;
    width: 100%;
}

.pavira-window-alert {
    width: 100%;
    border: 1px solid #f4c35f;
    background: #fff8e5;
    color: #3f3420;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 12px 0;
    white-space: normal;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}

.pavira-window-alert[hidden] {
    display: none !important;
}

.pavira-window-alert-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.pavira-window-alert-head strong {
    color: #8a4b00;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.pavira-window-alert-bar {
    height: 6px;
    border-radius: 999px;
    background: #f1e5c8;
    overflow: hidden;
    margin: 8px 0 7px;
}

.pavira-window-alert-bar span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #fbbc04, #d93025);
    transition: width 0.25s ease;
}

.pavira-window-alert p {
    margin: 0;
    color: #6f5330;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}

.sidebar.collapsed .pavira-window-alert {
    display: none !important;
}

.sidebar.collapsed .profile-container {
    border-top-color: transparent !important;
}

.profile-trigger {
    padding: 0 8px !important;
}

.profile-avatar {
    width: 24px !important;
    height: 24px !important;
    background: #5f6368;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.75rem;
    flex-shrink: 0;
    overflow: hidden;
    line-height: 1;
}

.profile-avatar.has-image {
    background: transparent !important;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    transform: scale(1.34);
    transform-origin: center center;
}

.profile-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.profile-name {
    font-size: 0.9rem;
    font-weight: 400;
    color: #1f1f1f;
}

.profile-plan {
    font-size: 0.75rem;
    color: #5f6368;
}

/* Popups flotantes */
.profile-card-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: 260px;
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 8px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 100;
}

.sidebar.collapsed .profile-card-popup {
    left: calc(100% + 12px);
    bottom: 0;
    width: 260px;
    transform: translateX(-8px);
}

.profile-card-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sidebar.collapsed .profile-card-popup.active {
    transform: translateX(0);
}

.popup-option {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1f1f1f;
    text-decoration: none;
    cursor: pointer;
    font-weight: 400;
    transition: background 0s;
    display: flex;
    align-items: center;
    gap: 12px;
}

.popup-option-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popup-option:hover {
    background: #e9eaed;
}

.popup-option:active {
    background: #dde1e6;
}

.popup-option.danger {
    color: #1f1f1f;
}

.popup-option svg {
    width: 18px;
    height: 18px;
    stroke: #444746;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.popup-option.danger svg {
    stroke: #444746;
}

.popup-divider {
    height: 1px;
    background: #ffffff;
    margin: 4px 0;
}

/* =========================================================================
   PANEL PRINCIPAL Y SECCIÓN DE CHAT
   ========================================================================= */
.main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    position: relative;
    height: 100%;
}

.chat-header {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid transparent;
}

/* Selector de modelos superior */
.model-selector-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 400;
    color: #444746;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0s;
}

.model-selector-wrapper:hover {
    background: #e9eaed;
}

.model-selector-wrapper:active {
    background: #dde1e6;
}

.model-selector-wrapper svg {
    width: 16px;
    height: 16px;
    stroke: #444746;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-top: 2px;
}

/* Contenedor de mensajes */
.chat-messages {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 850px;
    width: 100%;
    margin: 0 auto;
    transition: flex-grow 0.4s cubic-bezier(0.2, 0, 0, 1), opacity 0s;
    opacity: 1;
}

.chat-messages::-webkit-scrollbar {
    display: none;
}

.main-panel.chat-empty .chat-messages {
    flex-grow: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
}

/* Estado de bienvenida vacío */
.empty-spacer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 0;
    opacity: 0;
    transition: height 0.5s cubic-bezier(0.2, 0, 0, 1), opacity 0s;
    pointer-events: none;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.studio-main {
    flex-grow: 1;
    height: 100%;
    overflow-y: auto;
    position: relative;
}

/* --- Labs Animated Input Styles --- */
.input-group {
    width: 100%;
    position: relative;
    margin-bottom: 24px;
}

.input-group input,
.input-group textarea {
    width: 100%;
    padding: 22px 16px 6px 16px;
    background-color: transparent;
    border: 1px solid #e3e3e3;
    border-radius: 100px;
    color: #1f1f1f;
    font-size: 1rem;
    outline: none;
    transition: border-color 0s, box-shadow 0s;
    font-family: inherit;
    resize: none;
}

.input-group textarea {
    border-radius: 20px;
    padding-top: 28px;
    min-height: 140px;
}

.floating-label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #747775;
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

.input-group textarea+.floating-label {
    top: 24px;
    transform: translateY(-50%);
}

.input-group input:focus+.floating-label,
.input-group input:not(:placeholder-shown)+.floating-label,
.input-group textarea:focus+.floating-label,
.input-group textarea:not(:placeholder-shown)+.floating-label {
    top: 14px;
    font-size: 0.72rem;
    color: #747775;
}

.input-group input:focus,
.input-group textarea:focus {
    border-color: #3f3f3f;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}

.input-group input.error-state,
.input-group textarea.error-state {
    border-color: #ef4444 !important;
    box-shadow: none !important;
}

.input-group input.error-state:focus,
.input-group textarea.error-state:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000 !important;
}

.input-group input.error-state + .floating-label,
.input-group textarea.error-state + .floating-label {
    color: #ef4444 !important;
}

.error-msg {
    color: #ef4444;
    font-size: 0.82rem;
    line-height: 1.35;
    margin-top: 8px;
    padding: 0 16px;
    display: none;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* --- Labs Buttons (White Rounded) --- */
.lab-btn-white {
    background-color: #0f0f0f;
    color: #ffffff;
    border: none;
    border-radius: 100px;
    padding: 8px 16px;
    min-height: 42px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
    transition: background-color 0s, border-color 0s;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;
}

.lab-btn-white:hover {
    background-color: #272727;
    border-color: #272727;
    box-shadow: none !important;
}


.lab-btn-gray {
    background-color: #f2f2f2;
    color: #0f0f0f;
    border: none;
    border-radius: 100px;
    padding: 8px 16px;
    min-height: 42px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
    transition: background-color 0s, border-color 0s;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;
}

.lab-btn-gray:hover {
    background-color: #e5e5e5;
    border-color: #e5e5e5;
    box-shadow: none !important;
}

.lab-btn-white .ripple {
    background: rgba(255, 255, 255, 0.3) !important;
}

.lab-btn-gray .ripple {
    background: rgba(0, 0, 0, 0.15) !important;
}

.btn-text {
    position: relative;
    z-index: 1;
}

/* --- Old YouTube Studio Form & Card Styles --- */
.yt-form-group-wrap {
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 6px 12px;
    position: relative;
    transition: border-color 0s, box-shadow 0s;
    background: transparent;
}

.yt-form-group-wrap:focus-within {
    border-color: #065fd4;
    box-shadow: inset 0 0 0 1px #065fd4;
}

.yt-inner-label {
    font-size: 0.75rem;
    color: #606060;
    display: block;
    margin-bottom: 2px;
}

.yt-form-group-wrap input,
.yt-form-group-wrap textarea {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #0f0f0f;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0;
    resize: none;
}

.yt-accordion-card {
    border: 1px solid #cccccc;
    border-radius: 4px;
    background: transparent;
}

.yt-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
}

.yt-accordion-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.yt-accordion-val {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #0f0f0f;
}

.yt-info-row-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.quality-badges {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.quality-badge {
    font-size: 0.7rem;
    padding: 1px 4px;
    border: 2px solid #606060;
    border-radius: 3px;
    font-weight: 800;
    line-height: 1.2;
    color: #606060;
    letter-spacing: 0.5px;
}

.player-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 16px 8px 8px 8px;
}

.player-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-controls-left,
.player-controls-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-time {
    color: #ffffff;
    font-size: 0.75rem;
    margin-left: 4px;
}

.studio-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 24px 12px;
    border-top: 1px solid #e5e5e5;
}

.studio-sidebar-footer a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    text-decoration: none;
    color: #5f6368;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background-color 0s;
}

.studio-sidebar-footer a:hover {
    background: rgba(0, 0, 0, 0.05);
}

.main-panel.chat-empty .empty-spacer {
    height: 40vh;
    opacity: 1;
}

.welcome-title {
    font-size: clamp(2.1rem, 3vw, 3rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
    background: -webkit-linear-gradient(74deg, #4285f4 0, #9b72cb 9%, #d96570 20%, #d96570 24%, #9b72cb 35%, #4285f4 44%, #9b72cb 50%, #d96570 56%, #1f1f1f 75%, #1f1f1f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 24px;
}

/* Mensajes de chat */
.message-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 85%;
}

.message-group.user {
    align-self: flex-end;
    align-items: flex-end;
}

.message-group.system {
    align-self: flex-start;
    align-items: flex-start;
}

.ai-message {
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 400;
    white-space: pre-wrap;
}

.ai-system {
    background: transparent;
    color: #1f1f1f;
    padding: 8px 0;
}

.ai-user {
    background: #f0f4f9;
    color: #1f1f1f;
    border-radius: 24px;
    padding: 12px 20px;
}

.ai-user.has-attachments {
    display: grid;
    gap: 10px;
    max-width: min(420px, 100%);
}

.pavira-user-attachments,
.pavira-generated-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pavira-user-attachment-preview,
.pavira-generated-image-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e8eaed;
    background: #ffffff;
}

.pavira-user-attachment-preview {
    width: 88px;
    aspect-ratio: 1;
    border-radius: 14px;
}

.pavira-user-attachment-preview img,
.pavira-generated-image-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.pavira-generated-images {
    margin-top: 12px;
}

.pavira-generated-image-card {
    width: min(320px, 100%);
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1);
}

/* Spinner de carga estilo Google */
.google-spinner {
    animation: rotate 2s linear infinite;
    width: 24px;
    height: 24px;
}

.google-spinner .path {
    stroke: #0b57d0;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Shimmer de carga */
.loading-state {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 300px;
}

.loading-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.small-spinner {
    width: 18px !important;
    height: 18px !important;
}

.loading-timer {
    font-size: 0.9rem;
    color: #5f6368;
    font-weight: 500;
    background: linear-gradient(90deg, #1a73e8, #c5221f, #fbbc04, #34a853, #1a73e8);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.shimmer-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shimmer-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f4f9 25%, #e8eaed 50%, #f0f4f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

.image-loading-state {
    min-width: 0;
}

.pavira-image-processing-card {
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center;
    border: 1px solid #e8eaed;
    border-radius: 22px;
    background: linear-gradient(145deg, #ffffff, #f8fbff);
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1), 0 8px 28px rgba(60, 64, 67, 0.08);
}

.pavira-image-dots {
    position: relative;
    width: 56px;
    height: 56px;
}

.pavira-image-dots span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4285f4;
    opacity: 0;
    animation: paviraImageDotPulse 1.35s ease-in-out infinite;
}

.pavira-image-dots span:nth-child(1) { left: 24px; top: 0; animation-delay: 0s; }
.pavira-image-dots span:nth-child(2) { left: 40px; top: 8px; animation-delay: 0.12s; }
.pavira-image-dots span:nth-child(3) { left: 48px; top: 24px; animation-delay: 0.24s; }
.pavira-image-dots span:nth-child(4) { left: 40px; top: 40px; animation-delay: 0.36s; }
.pavira-image-dots span:nth-child(5) { left: 24px; top: 48px; animation-delay: 0.48s; }
.pavira-image-dots span:nth-child(6) { left: 8px; top: 40px; animation-delay: 0.60s; }
.pavira-image-dots span:nth-child(7) { left: 0; top: 24px; animation-delay: 0.72s; }
.pavira-image-dots span:nth-child(8) { left: 8px; top: 8px; animation-delay: 0.84s; }

@keyframes paviraImageDotPulse {
    0%, 100% {
        opacity: 0.18;
        transform: scale(0.72);
        background: #a8c7fa;
    }

    45% {
        opacity: 1;
        transform: scale(1.18);
        background: #0b57d0;
    }
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Botones de acción del mensaje */
.message-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 4px;
}

.assistant-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.assistant-cta-btn {
    appearance: none;
    border: 1px solid #e8eaed;
    background: #f1f3f4;
    color: #1f1f1f;
    height: 38px;
    padding: 0 18px;
    border-radius: 19px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    transition: background 0s, border-color 0s, color 0s;
}

.assistant-cta-btn:hover {
    background: #e8eaed;
    border-color: #dfe3e7;
    text-decoration: none;
}

.assistant-cta-btn:active {
    background: #dde1e6;
}


.msg-action-btn {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #444746;
    transition: background 0s;
}

.msg-action-btn:hover {
    background: #f1f3f4;
}

.msg-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================================
   BARRA DE ENTRADA CHAT
   ========================================================================= */
.chat-input-container {
    padding: 12px 24px 24px 24px;
    max-width: 850px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    isolation: isolate;
}

body:not(.dashboard-hydrating) .main-panel.chat-empty .chat-input-container::before,
body.dashboard-hydrating.dashboard-boot-glow .chat-input-container::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 34%;
    width: min(760px, 88vw);
    height: 380px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 58%, rgba(186, 219, 255, 0.68) 0%, rgba(204, 228, 255, 0.44) 34%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(circle at 36% 42%, rgba(220, 196, 255, 0.24) 0%, rgba(255, 255, 255, 0) 58%);
    filter: blur(18px);
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(0.98);
    animation: dashboard-boot-glow 2.6s cubic-bezier(0.2, 0, 0, 1) infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes dashboard-boot-glow {
    from {
        opacity: 0.42;
        transform: translate(-50%, -50%) scale(0.95);
    }

    to {
        opacity: 0.70;
        transform: translate(-50%, -50%) scale(1.03);
    }
}

.gemini-input-card,
.disclaimer-text {
    position: relative;
    z-index: 1;
}

.gemini-input-card {
    width: 100%;
    background: #ffffff;
    border-radius: 28px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #e8eaed;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1), 0 3px 12px rgba(60, 64, 67, 0.08);
}

.gemini-input-card.is-dragging-image {
    border-color: #e8eaed;
    background: #f8fafd;
    box-shadow: 0 2px 6px rgba(60, 64, 67, 0.14), 0 0 0 3px rgba(60, 64, 67, 0.06);
}

.input-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gemini-input-card textarea {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 1rem;
    color: #1f1f1f;
    font-weight: 400;
    resize: none;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    line-height: 1.5;
    max-height: 200px;
    padding: 4px 0;
    font-family: inherit;
}

.gemini-input-card textarea::-webkit-scrollbar {
    display: none;
}

.gemini-input-card textarea::placeholder {
    color: #747775;
}

.pavira-attachment-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 2px 2px 48px;
}

.pavira-attachment-tray[hidden] {
    display: none;
}

.pavira-attachment-chip {
    position: relative;
    width: 72px;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid #e8eaed;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1);
}

.pavira-attachment-chip img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.pavira-attachment-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(32, 33, 36, 0.82);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 4px rgba(32, 33, 36, 0.22);
}

.input-actions-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.input-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-icon-btn {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #444746;
    transition: background 0s;
}

.action-icon-btn:hover {
    background: #f1f3f4;
}

.action-icon-btn:active {
    background: #e8eaed;
}

.action-icon-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.model-badge-pill {
    background: #f1f3f4;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 0.85rem;
    color: #1f1f1f;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 400;
    transition: background 0s;
}

.model-badge-pill:hover {
    background: #e8eaed;
}

.model-badge-pill:active {
    background: #dadce0;
}

.model-badge-pill,
.model-badge-pill:hover,
.model-badge-pill:active,
.model-badge-pill:focus {
    color: #1f1f1f;
}

.model-badge-pill svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Modales flotantes de selección de modelo */
.model-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: min(340px, calc(100vw - 32px));
    max-width: min(340px, calc(100vw - 32px));
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #edf0f2;
    box-shadow: 0 10px 32px rgba(60, 64, 67, 0.16), 0 1px 2px rgba(60, 64, 67, 0.06);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 100;
}

.model-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.model-popup.dropdown {
    bottom: auto;
    top: calc(100% + 10px);
    right: auto;
    left: 0;
    transform: translateY(-8px);
}

.model-popup.dropdown.active {
    transform: translateY(0);
}

.model-option {
    min-height: 58px;
    padding: 10px 12px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0s;
    position: relative;
}

.model-option:hover {
    background: #f1f3f4;
}

.model-option.selected {
    background: #e8eaed;
}

.model-option.selected:hover {
    background: #e2e5e8;
}

.model-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.model-check {
    width: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model-check svg {
    width: 16px;
    height: 16px;
    stroke: #1f1f1f;
    fill: none;
    stroke-width: 2;
    display: none;
}

.model-option.selected .model-check svg {
    display: block;
}

.model-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.model-title {
    font-size: 0.95rem;
    line-height: 1.2;
    font-weight: 400;
    color: #1f1f1f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.model-desc {
    font-size: 0.8rem;
    line-height: 1.25;
    color: #5f6368;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-unavailable {
    font-size: 0.65rem;
    background: #e9ecef;
    color: #444746;
    padding: 2px 8px;
    border-radius: 100px;
    font-weight: 400;
}

/* Botón enviar mensaje */
.send-btn {
    background: transparent;
    color: #444746;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0s, color 0s;
}

.send-btn:hover {
    background: #e2e8f0;
}

.send-btn.active {
    background: #0a56d0;
    color: #ffffff;
}

.send-btn.active:hover {
    background: #0842a0;
}

.send-btn.active.responding,
.send-btn.responding {
    background: #ffffff;
    color: #202124;
    box-shadow: none;
}

.send-btn.active.responding:hover,
.send-btn.responding:hover {
    background: #f1f3f4;
}

.send-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.send-btn img.stop-response-icon {
    width: 17px;
    height: 17px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.stopped-message {
    color: #5f6368;
}

.disclaimer-text {
    font-size: 0.75rem;
    color: #5f6368;
    text-align: center;
    font-weight: 400;
}

/* =========================================================================
   PANEL DE PRECIOS
   ========================================================================= */
.pricing-panel {
    flex: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 60px 40px;
    background: #ffffff;
    overflow-y: auto;
    height: 100%;
}

.pricing-panel.active {
    display: flex;
}

.pricing-header h2 {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 40px;
    letter-spacing: 0;
}

.pricing-header p {
    max-width: 760px;
    margin: -24px auto 36px;
    color: #5f6368;
    font-size: 0.95rem;
    line-height: 1.55;
    text-align: center;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    width: 100%;
    max-width: 1100px;
}

.pricing-card {
    background: #f8fafd;
    border-radius: 18px;
    padding: 32px;
    border: 1px solid #e2e7f1;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 18px 48px rgba(60, 64, 67, 0.08);
}

.pricing-card.featured {
    border-color: rgba(10, 86, 208, 0.48);
    box-shadow: 0 22px 58px rgba(10, 86, 208, 0.16);
}

.pricing-card.elite {
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

.plan-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 28px;
    margin-bottom: 18px;
}

.plan-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(10, 86, 208, 0.1);
    color: #0a56d0;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
}

.pricing-card h3 {
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 12px;
}

.plan-desc {
    font-size: 0.95rem;
    color: #444746;
    line-height: 1.5;
    margin-bottom: 24px;
    min-height: 72px;
}

.price-container {
    display: flex;
    align-items: baseline;
    margin-bottom: 24px;
}

.price-container .currency {
    font-size: 1.1rem;
    margin-right: 4px;
    font-weight: 500;
}

.price-container .amount {
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
}

.price-container .period {
    font-size: 0.95rem;
    color: #5f6368;
    margin-left: 8px;
}

.pricing-btn {
    width: 100%;
    padding: 12px;
    border-radius: 100px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0s;
    border: none;
    margin-bottom: 30px;
    min-height: 48px;
}

.btn-outline {
    background: transparent;
    border: 1px solid #747775;
    color: #1f1f1f;
}

.btn-outline:hover {
    background: #f3f4f6;
}

.btn-solid {
    background: #0a56d0;
    color: #ffffff;
}

.btn-solid:hover {
    background: #0842a0;
}

.pricing-btn.current-plan,
.pricing-btn.current-plan:hover,
.pricing-btn:disabled {
    background: #e3e5e8;
    border-color: #e3e5e8;
    color: #5f6368;
    cursor: default;
}

.pricing-card ul {
    display: grid;
    gap: 14px;
    list-style: none;
    flex-grow: 1;
}

.pricing-card li {
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    line-height: 1.42;
}

.pricing-card li strong {
    color: #1f1f1f;
    font-weight: 650;
}

.pricing-card li svg {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    flex-shrink: 0;
    color: #1f1f1f;
}

/* Vista independiente de planes */
.plans-page {
    display: block;
    min-height: 100vh;
    overflow: auto;
    background: #ffffff;
}

.plans-page .app-layout {
    display: block;
    width: 100%;
    min-height: 100vh;
    height: auto;
}

.plans-page .sidebar {
    display: none !important;
}

.plans-exit-btn {
    position: fixed;
    top: 24px;
    right: 28px;
    z-index: 20;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #5f6368;
    background: transparent;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: background-color 0s, color 0s;
}

.plans-exit-btn:hover {
    background: #f1f3f4;
    color: #1f1f1f;
}

.plans-exit-btn svg {
    position: relative;
    z-index: 2;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.plans-page .pricing-panel {
    display: flex !important;
    min-height: 100vh;
    height: auto;
    width: 100%;
    padding: 64px clamp(24px, 5vw, 80px) 80px !important;
    overflow: visible !important;
    align-items: center;
}

.plans-page .pricing-header h2 {
    margin-bottom: 48px;
    text-align: center;
}

.plans-page .pricing-grid {
    max-width: 1280px;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    align-items: stretch;
}

.plans-page .pricing-card {
    background: #f6f8fb;
    border-color: #f6f8fb;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08);
}

.plans-page .pricing-card.featured {
    border-color: rgba(10, 86, 208, 0.42);
    box-shadow: 0 18px 48px rgba(10, 86, 208, 0.14);
}

.plans-page .pricing-card.elite {
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
    border-color: #d7e5ff;
}

.plans-page .pricing-card h3,
.plans-page .price-container,
.plans-page .pricing-card li {
    color: #1f1f1f;
}

.plans-page .plan-desc,
.plans-page .price-container .period {
    color: #5f6368;
}

@media (max-width: 980px) {
    .plans-page .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
    }
}

@media (max-width: 620px) {
    .plans-exit-btn {
        top: 14px;
        right: 14px;
    }

    .plans-page .pricing-panel {
        padding: 40px 18px 56px !important;
    }

    .plans-page .pricing-header h2 {
        font-size: 2rem;
    }

    .plans-page .pricing-card {
        padding: 24px;
    }

    .plans-page .plan-badges,
    .plans-page .plan-desc {
        min-height: 0;
    }

    .plans-page .price-container .amount {
        font-size: 2.75rem;
    }
}

/* =========================================================================
   MODO OSCURO AUTOMÁTICO (PREFERS-COLOR-SCHEME)
   ========================================================================= */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #131314;
        color: #e3e3e3;
    }

    body:not(.dashboard-hydrating) .main-panel.chat-empty .chat-input-container::before,
    body.dashboard-hydrating.dashboard-boot-glow .chat-input-container::before {
        background:
            radial-gradient(circle at 50% 58%, rgba(66, 133, 244, 0.30) 0%, rgba(138, 180, 248, 0.16) 38%, rgba(19, 19, 20, 0) 72%),
            radial-gradient(circle at 36% 40%, rgba(155, 114, 203, 0.18) 0%, rgba(19, 19, 20, 0) 58%);
        filter: blur(18px);
        opacity: 0.58;
    }

    body.dashboard-hydrating.dashboard-boot-reveal .sidebar {
        border-right-color: #1e1f20 !important;
    }

    .plans-exit-btn {
        color: #c4c7c5;
    }

    .plans-exit-btn:hover {
        background: #333639;
        color: #e3e3e3;
    }

    .sidebar {
        background: #1e1f20;
        border-right-color: #1e1f20;
    }

    .sidebar-logo-img {
        filter: none;
    }

    .brand-text {
        color: #e3e3e3;
    }

    .brand-text span {
        color: #c4c7c5 !important;
    }

    .powered-by-text {
        color: #8e918f;
    }

    #close-sidebar-btn {
        color: #c4c7c5 !important;
    }

    #close-sidebar-btn:hover {
        background: #333639 !important;
        color: #e3e3e3 !important;
    }

    .sidebar.collapsed #open-sidebar-logo:hover {
        background: #333639 !important;
    }

    .new-chat-btn {
        background: #333639;
        color: #e3e3e3;
    }

    .new-chat-btn:hover {
        background: #3c4043;
    }

    .new-chat-btn:active {
        background: #484b4f;
    }

    .sidebar-section-title {
        color: #c4c7c5;
    }

    .menu-item {
        color: #c4c7c5;
    }

    .menu-item svg {
        stroke: #ffffff;
    }

    .menu-item:hover,
    .history-btn:hover,
    .history-item:hover {
        background: #3c4043;
        color: #c4c7c5;
    }

    .menu-item:active,
    .history-btn:active,
    .history-item:active {
        background: #484b4f;
        color: #c4c7c5;
    }

    .menu-item.active {
        background: #444746;
        color: #e3e3e3;
    }

    .history-item {
        color: #c4c7c5;
    }

    .history-item:hover,
    .history-item:focus-visible {
        background: #3c4043;
        color: #e3e3e3;
    }

    .history-item:active,
    .history-item.active:active {
        background: #484b4f;
        color: #e3e3e3;
    }

    .history-item.active:not(:hover):not(:focus-visible):not(:active) {
        background: #333639;
        color: #e3e3e3;
    }

    .history-loading {
        background: #303134;
        border-color: #303134;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
    }

    .history-loading::before {
        background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.10) 48%, transparent 72%);
    }

    .profile-container {
        border-top-color: #333639;
    }

    .profile-trigger:hover {
        background: #3c4043;
    }

    .profile-trigger:active {
        background: #484b4f;
    }

    .profile-name {
        color: #e3e3e3;
    }

    .profile-plan {
        color: #c4c7c5;
    }

    .profile-card-popup {
        background: #282a2c;
        border-color: #282a2c;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .popup-option {
        color: #e3e3e3;
    }

    .popup-option.danger {
        color: #e3e3e3;
    }

    .popup-option:hover {
        background: #3c4043;
    }

    .popup-option:active {
        background: #484b4f;
    }

    .popup-option svg {
        stroke: #ffffff;
    }

    .popup-option.danger svg {
        stroke: #ffffff;
    }

    .popup-divider {
        background: #282a2c;
    }

    .pricing-btn.current-plan,
    .pricing-btn.current-plan:hover,
    .pricing-btn:disabled {
        background: #333639;
        border-color: #333639;
        color: #c4c7c5;
    }

    /* Main Panel oscuro */
    .main-panel {
        background: #131314;
    }

    .model-selector-wrapper {
        color: #c4c7c5;
    }

    .model-selector-wrapper svg {
        stroke: #c4c7c5;
    }

    .model-selector-wrapper:hover {
        background: #3c4043;
    }

    .model-selector-wrapper:active {
        background: #484b4f;
    }

    .welcome-title {
        background: -webkit-linear-gradient(74deg, #4285f4 0, #9b72cb 9%, #d96570 20%, #d96570 24%, #9b72cb 35%, #4285f4 44%, #9b72cb 50%, #d96570 56%, #e3e3e3 75%, #e3e3e3 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .ai-system {
        color: #e3e3e3;
    }

    .ai-user {
        background: #282a2c;
        color: #e3e3e3;
    }

    .pavira-user-attachment-preview,
    .pavira-generated-image-card,
    .pavira-attachment-chip,
    .pavira-image-processing-card {
        border-color: #333639;
        background: #1e1f20;
    }

    .pavira-generated-image-card,
    .pavira-attachment-chip {
        box-shadow: none;
    }

    .pavira-image-processing-card {
        background: linear-gradient(145deg, #1e1f20, #282a2c);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    }

    .google-spinner .path {
        stroke: #a8c7fa;
    }

    .loading-timer {
        background: linear-gradient(90deg, #8ab4f8, #f28b82, #fdd663, #81c995, #8ab4f8);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .shimmer-line {
        background: linear-gradient(90deg, #1e1f20 25%, #282a2c 50%, #1e1f20 75%);
        background-size: 200% 100%;
    }

    .msg-action-btn {
        color: #c4c7c5;
    }

    .msg-action-btn:hover {
        background: #333639;
    }

    .assistant-cta-btn {
        background: #333639;
        border-color: #3c4043;
        color: #e3e3e3;
    }

    .assistant-cta-btn:hover {
        background: #3c4043;
        border-color: #484b4f;
    }

    .assistant-cta-btn:active {
        background: #484b4f;
    }

    /* Input oscuro */
    .gemini-input-card {
        background: #1e1f20;
        border-color: #303134;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
    }

    .gemini-input-card.is-dragging-image {
        background: #242629;
        border-color: #333639;
        box-shadow: 0 0 0 3px rgba(232, 234, 237, 0.06);
    }

    .gemini-input-card textarea {
        color: #e3e3e3;
    }

    .gemini-input-card textarea::placeholder {
        color: #8e918f;
    }

    .action-icon-btn {
        color: #c4c7c5;
    }

    .action-icon-btn:hover {
        background: #3c4043;
    }

    .action-icon-btn:active {
        background: #484b4f;
    }

    .model-badge-pill {
        background: #333639;
        color: #c4c7c5;
    }

    .model-badge-pill:hover {
        background: #3c4043;
    }

    .model-badge-pill:active {
        background: #484b4f;
    }

    .model-badge-pill,
    .model-badge-pill:hover,
    .model-badge-pill:active,
    .model-badge-pill:focus {
        color: #c4c7c5;
    }

    .model-popup {
        background: #282a2c;
        border-color: #333639;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
    }

    .model-option:hover {
        background: #333639;
    }

    .model-option.selected {
        background: #333639;
    }

    .model-option.selected:hover {
        background: #3c4043;
    }

    .model-check svg {
        stroke: #e3e3e3;
    }

    .model-title {
        color: #e3e3e3;
    }

    .model-desc {
        color: #c4c7c5;
    }

    .badge-unavailable {
        background: #333639;
        color: #c4c7c5;
    }

    .send-btn {
        color: #c4c7c5;
    }

    .send-btn:hover {
        background: #333639;
    }

    .send-btn.active {
        background: #e3e3e3;
        color: #1f1f1f;
    }

    .send-btn.active:hover {
        background: #e3e3e3;
    }

    .send-btn.active.responding,
    .send-btn.responding {
        background: #ffffff;
        color: #202124;
        box-shadow: none;
    }

    .send-btn.active.responding:hover,
    .send-btn.responding:hover {
        background: #f1f3f4;
    }

    .stopped-message {
        color: #9aa0a6;
    }

    .disclaimer-text {
        color: #c4c7c5;
    }

    /* Pricing oscuro */
    .pricing-panel {
        background: #131314;
    }

    .pricing-header h2 {
        color: #e3e3e3;
    }

    .pricing-card {
        background: #1e1f20;
        border-color: #1e1f20;
    }

    .pricing-card.featured {
        border-color: rgba(10, 86, 208, 0.72);
        box-shadow: 0 20px 56px rgba(10, 86, 208, 0.2);
    }

    .pricing-card.elite {
        background: linear-gradient(180deg, #22252b 0%, #17191f 100%);
    }

    .plan-badge {
        background: rgba(168, 199, 250, 0.12);
        color: #a8c7fa;
    }

    .pricing-card h3 {
        color: #e3e3e3;
    }

    .plan-desc {
        color: #c4c7c5;
    }

    .price-container {
        color: #e3e3e3;
    }

    .pricing-card li {
        color: #e3e3e3;
    }

    .pricing-card li strong {
        color: #ffffff;
    }

    .pricing-card li svg {
        color: #e3e3e3;
    }

    .plans-page {
        background: #131314;
    }

    .plans-page .pricing-card {
        background: #1e1f20;
        border-color: #1e1f20;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
    }

    .plans-page .pricing-card.featured {
        border-color: rgba(10, 86, 208, 0.72);
        box-shadow: 0 20px 56px rgba(10, 86, 208, 0.22);
    }

    .plans-page .pricing-card.elite {
        background: linear-gradient(180deg, #22252b 0%, #17191f 100%);
        border-color: rgba(168, 199, 250, 0.2);
    }

    .plans-page .pricing-card h3,
    .plans-page .price-container,
    .plans-page .pricing-card li {
        color: #e3e3e3;
    }

    .plans-page .pricing-card li strong {
        color: #ffffff;
    }

    .plans-page .plan-desc,
    .plans-page .price-container .period {
        color: #c4c7c5;
    }

    .btn-outline {
        color: #e3e3e3;
        border-color: #8e918f;
    }

    .btn-outline:hover {
        background: #333639;
    }

    .ripple {
        background: rgba(95, 99, 104, 0.64) !important;
    }

    .send-btn.active .ripple {
        background: rgba(95, 99, 104, 0.42) !important;
    }

    .btn-solid .ripple {
        background: rgba(95, 99, 104, 0.42) !important;
    }

    .yt-info-label {
        color: #aaaaaa;
    }

    .yt-video-link {
        color: #3ea6ff;
    }

    .yt-filename {
        color: #ffffff;
    }

    .progress-bar-track {
        background: #3f3f3f;
    }

    .progress-status {
        color: #aaaaaa;
    }

    .yt-form-group-wrap {
        border-color: #717171;
    }

    .yt-form-group-wrap:hover {
        border-color: #ffffff;
    }

    .yt-form-group-wrap:focus-within {
        border-color: #3ea6ff;
        box-shadow: inset 0 0 0 1px #3ea6ff;
    }

    .yt-inner-label {
        color: #aaaaaa;
    }

    .yt-form-group-wrap input,
    .yt-form-group-wrap textarea {
        color: #ffffff;
    }

    .yt-accordion-card {
        border-color: #3f3f3f;
    }

    .yt-accordion-val {
        color: #ffffff;
    }

    .quality-badge {
        border-color: #ffffff;
        color: #ffffff;
    }

    .studio-sidebar-footer {
        border-top-color: #3f3f3f;
    }

    .studio-sidebar-footer a {
        color: #aaaaaa;
    }

    .studio-sidebar-footer a:hover {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* =========================================================================
   RIPPLE EFFECT (ON-CLICK DYNAMIC ANIMATION)
   ========================================================================= */
[data-ripple],
.hamburger-toggle-btn,
.new-chat-btn,
.menu-item,
.profile-trigger,
.popup-option,
.model-selector-wrapper,
.model-badge-pill,
.action-icon-btn,
.send-btn,
.msg-action-btn,
.pricing-btn,
.history-btn,
.history-item,
.model-option,
#close-sidebar-btn,
#open-sidebar-logo,
.upload-btn-white,
.lab-btn-white,
.lab-btn-gray,
.assistant-cta-btn,
.labs-studio-tab,
.labs-studio-upload-btn,
.labs-studio-action-btn,
.labs-studio-icon-btn,
.labs-studio-link-btn,
.labs-studio-search-clear,
.labs-studio-row-action,
.labs-studio-rejection-detail-btn,
.labs-studio-language-detail-btn,
.labs-studio-notice-detail-btn,
.labs-studio-modal-continue,
.labs-studio-modal-secondary,
.labs-studio-draft-menu-btn,
.labs-studio-draft-bulk-menu-btn,
.labs-studio-draft-menu-item,
.labs-studio-draft-selection-close,
.copy-btn,
.yt-icon-btn,
.upload-step,
.talent-primary-btn,
.talent-secondary-btn,
.talent-icon-btn,
.talent-sport-card,
.talent-entity-row,
.talent-popover-action,
.talent-custom-select-trigger,
.talent-custom-select-option,
.talent-measure-unit,
.labs-live-time-option {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Asegurar que contenido e íconos permanezcan nítidos por encima del ripple */
.new-chat-btn svg,
.hamburger-toggle-btn > :not(.ripple),
.menu-item svg,
.history-btn svg,
.history-item svg,
#close-sidebar-btn svg,
.sidebar-logo-img,
.profile-avatar,
.btn-text,
.menu-text,
.popup-option-text,
.brand-text,
.profile-info,
.ripple-content,
[data-ripple]>*,
.model-selector-wrapper>*,
.model-badge-pill>*,
.model-option>*,
.popup-option>*,
.pricing-btn>*,
.assistant-cta-btn>*,
.upload-btn-white>*,
.lab-btn-white>*,
.lab-btn-gray>*,
.labs-studio-tab>*,
.labs-studio-upload-btn>*,
.labs-studio-action-btn>*,
.labs-studio-icon-btn>*,
.labs-studio-link-btn>*,
.labs-studio-search-clear>*,
.labs-studio-row-action>*,
.labs-studio-rejection-detail-btn>*,
.labs-studio-language-detail-btn>*,
.labs-studio-notice-detail-btn>*,
.labs-studio-modal-continue>*,
.labs-studio-modal-secondary>*,
.labs-studio-draft-menu-btn>*,
.labs-studio-draft-bulk-menu-btn>*,
.labs-studio-draft-menu-item>*,
.labs-studio-draft-selection-close>*,
.talent-primary-btn>*,
.talent-secondary-btn>*,
.talent-icon-btn>*,
.talent-sport-card>*,
.talent-entity-row > :not(.ripple),
.talent-popover-action > :not(.ripple),
.talent-custom-select-trigger>*,
.talent-custom-select-option>*,
.talent-measure-unit>*,
.labs-live-stream-action>*,
.labs-live-stream-refresh>*,
.labs-live-stream-credential-btn>*,
.labs-live-stream-copy>*,
.labs-live-stream-secret-toggle>*,
.labs-live-control-btn>*,
.labs-live-control-close>*,
.labs-live-time-option>*,
.copy-btn>*,
.yt-icon-btn>*,
.upload-step>* {
    position: relative;
    z-index: 1;
}

.ripple-content {
    color: inherit;
    pointer-events: none;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(11, 87, 208, 0.2);
    opacity: 1;
    transform: scale(0);
    transform-origin: center;
    animation: material-ripple-expand 720ms cubic-bezier(0.2, 0, 0, 1) forwards;
    transition: opacity 460ms ease;
    pointer-events: none;
    z-index: 0;
    contain: strict;
    will-change: transform, opacity;
}

[data-ripple] .ripple,
.hamburger-toggle-btn .ripple,
.new-chat-btn .ripple,
.menu-item .ripple,
.profile-trigger .ripple,
.popup-option .ripple,
.model-selector-wrapper .ripple,
.model-badge-pill .ripple,
.model-option .ripple,
.action-icon-btn .ripple,
.send-btn .ripple,
.msg-action-btn .ripple,
.assistant-cta-btn .ripple,
.pricing-btn .ripple,
.history-item .ripple,
#close-sidebar-btn .ripple,
#open-sidebar-logo .ripple,
.upload-btn-white .ripple,
.lab-btn-white .ripple,
.lab-btn-gray .ripple,
.labs-studio-tab .ripple,
.labs-studio-upload-btn .ripple,
.labs-studio-action-btn .ripple,
.labs-studio-icon-btn .ripple,
.labs-studio-link-btn .ripple,
.labs-studio-search-clear .ripple,
.labs-studio-row-action .ripple,
.labs-studio-rejection-detail-btn .ripple,
.labs-studio-language-detail-btn .ripple,
.labs-studio-notice-detail-btn .ripple,
.labs-studio-modal-continue .ripple,
.labs-studio-modal-secondary .ripple,
.labs-studio-draft-menu-btn .ripple,
.labs-studio-draft-bulk-menu-btn .ripple,
.labs-studio-draft-menu-item .ripple,
.labs-studio-draft-selection-close .ripple,
.talent-primary-btn .ripple,
.talent-secondary-btn .ripple,
.talent-icon-btn .ripple,
.talent-sport-card .ripple,
.talent-entity-row .ripple,
.talent-popover-action .ripple,
.talent-custom-select-trigger .ripple,
.talent-custom-select-option .ripple,
.talent-measure-unit .ripple,
.labs-live-stream-action .ripple,
.labs-live-stream-refresh .ripple,
.labs-live-stream-credential-btn .ripple,
.labs-live-stream-copy .ripple,
.labs-live-stream-secret-toggle .ripple,
.labs-live-control-btn .ripple,
.labs-live-control-close .ripple,
.labs-live-time-option .ripple,
.copy-btn .ripple,
.yt-icon-btn .ripple,
.upload-step .ripple {
    z-index: 0;
}

.labs-studio-upload-btn .ripple,
.labs-studio-action-btn .ripple,
.labs-studio-rejection-detail-btn .ripple,
.labs-studio-language-detail-btn .ripple,
.labs-studio-notice-detail-btn .ripple,
.labs-studio-modal-continue .ripple,
.labs-studio-modal-secondary .ripple,
.labs-live-stream-action .ripple,
.labs-live-control-finish .ripple {
    background: rgba(255, 255, 255, 0.28);
}

@media (prefers-color-scheme: dark) {
    .ripple {
        background: rgba(232, 234, 237, 0.22);
    }

    .labs-studio-upload-btn .ripple,
    .labs-studio-action-btn .ripple,
    .labs-studio-rejection-detail-btn .ripple,
    .labs-studio-language-detail-btn .ripple,
    .labs-studio-notice-detail-btn .ripple,
    .labs-studio-modal-continue .ripple,
    .labs-studio-modal-secondary .ripple,
    .labs-live-stream-action .ripple,
    .labs-live-control-finish .ripple {
        background: rgba(32, 33, 36, 0.2);
    }
}

.hamburger-toggle-btn,
.new-chat-btn,
.menu-item,
.profile-trigger,
.popup-option,
.model-selector-wrapper,
.model-badge-pill,
.model-option,
.action-icon-btn,
.send-btn,
.msg-action-btn,
.assistant-cta-btn,
.pricing-btn,
.history-item,
#close-sidebar-btn,
#open-sidebar-logo,
.upload-btn-white,
.lab-btn-white,
.lab-btn-gray,
.labs-studio-tab,
.labs-studio-upload-btn,
.labs-studio-action-btn,
.labs-studio-icon-btn,
.labs-studio-link-btn,
.labs-studio-search-clear,
.labs-studio-rejection-detail-btn,
.labs-studio-language-detail-btn,
.labs-studio-notice-detail-btn,
.labs-studio-modal-continue,
.labs-studio-modal-secondary,
.labs-studio-draft-menu-btn,
.labs-studio-draft-bulk-menu-btn,
.labs-studio-draft-selection-close,
.labs-live-stream-action,
.labs-live-stream-refresh,
.labs-live-stream-credential-btn,
.labs-live-stream-copy,
.labs-live-stream-secret-toggle,
.labs-live-control-btn,
.labs-live-control-close,
.copy-btn,
.yt-icon-btn,
.upload-step {
    isolation: isolate;
}

.new-chat-btn,
.menu-item,
.profile-trigger,
.popup-option,
.model-selector-wrapper,
.model-badge-pill,
.action-icon-btn,
.send-btn,
.msg-action-btn,
.assistant-cta-btn,
.history-item,
.model-option,
.upload-btn-white,
.lab-btn-white,
.lab-btn-gray,
.copy-btn,
.yt-icon-btn,
.upload-step,
.labs-studio-tab,
.labs-studio-upload-btn,
.labs-studio-action-btn,
.labs-studio-icon-btn,
.labs-studio-link-btn,
.labs-studio-search-clear,
.labs-studio-rejection-detail-btn,
.labs-studio-language-detail-btn,
.labs-studio-notice-detail-btn,
.labs-studio-modal-continue,
.labs-studio-modal-secondary,
.labs-studio-draft-menu-btn,
.labs-studio-draft-bulk-menu-btn,
.labs-studio-draft-selection-close,
.labs-live-stream-action,
.labs-live-stream-refresh,
.labs-live-stream-credential-btn,
.labs-live-stream-copy,
.labs-live-stream-secret-toggle,
.labs-live-control-btn,
.labs-live-control-close {
    transition-duration: 80ms !important;
}

.new-chat-btn:active,
button:active,
[data-ripple]:active,
.menu-item:active,
.history-btn:active,
.history-item:active,
.profile-trigger:active,
.popup-option:active,
.model-selector-wrapper:active,
.model-badge-pill:active,
.model-option:active,
.action-icon-btn:active,
.send-btn:active,
.msg-action-btn:active,
.assistant-cta-btn:active,
.pricing-btn:active,
.upload-btn-white:active,
.lab-btn-white:active,
.lab-btn-gray:active,
.labs-studio-tab:active,
.labs-studio-upload-btn:active,
.labs-studio-action-btn:active,
.labs-studio-icon-btn:active,
.labs-studio-link-btn:active,
.labs-studio-search-clear:active,
.labs-studio-row-action:active,
.labs-studio-video-row:active,
.labs-studio-draft-row:active,
.labs-studio-status-history-row:active,
.labs-studio-language-video-row:active,
.labs-studio-rejection-detail-btn:active,
.labs-studio-language-detail-btn:active,
.labs-studio-notice-detail-btn:active,
.labs-studio-modal-continue:active,
.labs-studio-modal-secondary:active,
.labs-studio-draft-menu-btn:active,
.labs-studio-draft-bulk-menu-btn:active,
.labs-studio-draft-selection-close:active,
.talent-primary-btn:active,
.talent-secondary-btn:active,
.talent-icon-btn:active,
.talent-sport-card:active,
.talent-entity-row:active,
.talent-popover-action:active,
.talent-custom-select-trigger:active,
.talent-custom-select-option:active,
.talent-measure-unit:active,
.labs-live-stream-action:active,
.labs-live-stream-refresh:active,
.labs-live-stream-credential-btn:active,
.labs-live-stream-copy:active,
.labs-live-stream-secret-toggle:active,
.labs-live-control-btn:active,
.labs-live-control-close:active,
.labs-live-time-option:active,
.copy-btn:active,
.yt-icon-btn:active,
.upload-step:active {
    transform: none !important;
}

.ripple.ripple-fade-out {
    opacity: 0;
}

.send-btn.active .ripple {
    background: rgba(255, 255, 255, 0.34) !important;
}

.pricing-btn.btn-solid .ripple,
.btn-solid .ripple {
    background: rgba(255, 255, 255, 0.46) !important;
}

@keyframes material-ripple-expand {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(var(--ripple-scale, 8));
    }
}

/* ----------------------------------------------------
   GESTOR DE TRANSMISIONES - ESTILOS YT STUDIO
   ---------------------------------------------------- */
.hidden {
    display: none !important;
}

/* Contenedor central (Estado Inicial) */
.upload-center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.upload-box {
    text-align: center;
    max-width: 500px;
}

.upload-icon-wrapper {
    background: #f1f3f4;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 24px;
}

.upload-icon-wrapper svg {
    width: 50px;
    height: 50px;
    color: #5f6368;
}

.upload-box h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 12px;
    color: var(--text-color, #000);
}

.upload-desc {
    color: #5f6368;
    font-size: 0.95rem;
    margin-bottom: 32px;
    line-height: 1.5;
}

.upload-btn-white {
    background: #f2f2f2;
    color: #0f0f0f;
    border: 1px solid #f2f2f2;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0s;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.upload-btn-white:hover {
    background: #e5e5e5;
    border-color: #e5e5e5;
}

/* Layout de YT Studio (Configuración) */
.yt-studio-layout {
    display: block;
    min-height: 100%;
    width: 100%;
    max-width: 1090px;
    margin: 0;
    background: transparent;
}

.yt-studio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: none;
    flex-shrink: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
}

.yt-header-left h2 {
    font-size: 1.25rem;
    font-weight: 500;
}

.yt-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}

.yt-header-right .lab-btn-white,
.yt-header-right .lab-btn-gray {
    min-width: max-content;
}

.yt-btn-text {
    background: #f2f2f2;
    border: none;
    color: #0f0f0f;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 100px;
    cursor: pointer;
}

.yt-btn-filled {
    background: #0f0f0f;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 100px;
    cursor: pointer;
}

.yt-icon-btn {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.yt-icon-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.yt-icon-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.yt-studio-content {
    display: flex;
    gap: 32px;
    padding: 24px;
    padding-bottom: 48px;
    flex-grow: 1;
}

.yt-form-column {
    flex: 1;
    max-width: 650px;
}

.yt-form-group {
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 24px;
    position: relative;
    transition: border-color 0s, box-shadow 0s;
}

.yt-form-group:hover {
    border-color: #000000;
}

.yt-form-group:focus-within {
    border-color: #000000;
    box-shadow: inset 0 0 0 1px #000000;
}

.yt-form-group label {
    display: block;
    font-size: 0.75rem;
    color: #5f6368;
    margin-bottom: 4px;
}

.yt-input,
.yt-textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    resize: none;
}

.yt-section-title {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.yt-helper-text {
    font-size: 0.85rem;
    color: #5f6368;
    margin-bottom: 12px;
}

.yt-thumbnail-selector {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.yt-thumb-option {
    width: 128px;
    height: 72px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #5f6368;
    cursor: pointer;
}

.yt-thumb-option.upload-thumb {
    border: 1px dashed #cccccc;
}

.thumb-icon-img {
    opacity: 0.7;
}

.thumb-loading {
    background-color: #e8e8e8;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite linear;
    border-color: transparent !important;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.yt-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.yt-radio-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    cursor: pointer;
    line-height: 1.4;
}

.yt-info-box {
    background-color: #f2f2f2;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    align-items: flex-start;
}

.yt-info-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-top: 2px;
    filter: brightness(0);
}

.yt-info-text {
    font-size: 0.85rem;
    color: #606060;
    line-height: 1.5;
}

#trailer-policy-tooltip, #tt-policy-tooltip {
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    z-index: 200;
}



.theme-adaptive-bg {
    background-color: #0f0f0f !important;
}
.theme-adaptive-text {
    color: #0f0f0f !important;
}

.yt-info-text a {
    color: #065fd4;
    text-decoration: none;
}

/* Custom Select (Deporte) */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
    user-select: none;
}

.custom-select-box {
    border: 1px solid #717171;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: transparent;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: background-color 0s, border-color 0s;
    font-size: 0.95rem;
    color: #0f0f0f;
}

.custom-select-box:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.custom-select-box.active {
    border-color: #0f0f0f;
}

.custom-select-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background-color: #f1f1f1;
    border-radius: 8px;
    border: none;
    box-shadow: none;
    z-index: 100;
    display: none;
    flex-direction: column;
}

.custom-select-option {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0s;
    font-size: 0.95rem;
    color: #0f0f0f;
}

.custom-select-option:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.select-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-select-animation 0.5s linear;
    background-color: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

@keyframes ripple-select-animation {
    to {
        transform: scale(3.5);
        opacity: 0;
    }
}

.yt-radio-container {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.yt-radio-container input[type="radio"],
.yt-radio-container input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 3;
}

.yt-radio-custom {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: border-color 0s;
    z-index: 2;
}

.yt-radio-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000000;
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.yt-radio-container input[type="radio"]:checked+.yt-radio-custom .yt-radio-circle,
.yt-radio-container input[type="checkbox"]:checked+.yt-radio-custom .yt-radio-circle {
    transform: scale(1);
}

.yt-radio-ripple {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0s, transform 0.2s;
    pointer-events: none;
    z-index: 1;
}

.yt-radio-container:hover .yt-radio-ripple {
    opacity: 1;
    transform: scale(1);
}

.yt-radio-container input[type="radio"]:active+.yt-radio-custom .yt-radio-ripple,
.yt-radio-container input[type="checkbox"]:active+.yt-radio-custom .yt-radio-ripple {
    background: rgba(0, 0, 0, 0.15);
    transform: scale(1.1);
}

/* Columna Derecha (Preview) */
.yt-preview-column {
    width: 360px;
    flex-shrink: 0;
}

.yt-video-preview-card {
    background: #f9f9f9;
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    z-index: 10;
}

.yt-video-player-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.yt-video-player-placeholder .play-icon {
    width: 48px;
    height: 48px;
    fill: #fff;
    opacity: 0.7;
}

.time-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 4px;
    border-radius: 2px;
}

.yt-video-info {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.yt-info-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.yt-info-label {
    font-size: 0.75rem;
    color: #606060;
}

.yt-video-link {
    font-size: 0.85rem;
    color: #065fd4;
    text-decoration: none;
    word-break: break-all;
}

.yt-filename {
    font-size: 0.9rem;
    color: #0f0f0f;
    word-break: break-all;
}

.yt-upload-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.progress-bar-track {
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: #3ea6ff;
    transition: width 0.3s ease;
}

#trailer-progress-fill, #tt-progress-fill {
    background: #ffffff;
}

.progress-status {
    font-size: 0.8rem;
    color: #5f6368;
}

.mt-4 {
    margin-top: 24px;
}

.mt-5 {
    margin-top: 32px;
}

/* Layout Global de la Página de Studio */
.studio-page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    background: #ffffff;
    overflow: hidden;
}

.studio-topbar {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid #e5e5e5;
    background: #ffffff;
    flex-shrink: 0;
}

.studio-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.studio-logo {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1.25rem;
    font-weight: 600;
}

.studio-search-container {
    flex: 1;
    max-width: 600px;
    display: flex;
    justify-content: center;
}

.studio-search-box {
    display: flex;
    align-items: center;
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 6px 12px;
    width: 100%;
    max-width: 400px;
    background: #f8f9fa;
}

.studio-search-box input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    margin-left: 8px;
    color: inherit;
    font-family: inherit;
}

.studio-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.studio-btn-outline {
    border: 1px solid #cccccc;
    background: transparent;
    color: #000;
    padding: 6px 16px;
    border-radius: 100px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e0e0e0;
}

.studio-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.studio-main {
    flex: 1;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

.studio-sidebar {
    width: 256px;
    border-right: 1px solid #e5e5e5;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

.studio-back-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    font-size: 0.95rem;
}

.studio-back-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

.studio-sidebar-video {
    padding: 16px 24px;
}

.studio-sidebar-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    background: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.studio-sidebar-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: #000;
}

.studio-sidebar-subtitle {
    font-size: 0.75rem;
    color: #5f6368;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studio-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
}

.studio-nav a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    text-decoration: none;
    color: #5f6368;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background-color 0s;
}

.studio-nav a:hover {
    background: rgba(0, 0, 0, 0.05);
}

.studio-nav a.active {
    background: #f2f2f2;
    color: #000000;
}

.studio-nav a.active svg {
    fill: #000000;
}


@media (prefers-color-scheme: dark) {
    .upload-icon-wrapper {
        background: #2a2a2a;
    }

    .upload-icon-wrapper svg {
        color: #909090;
    }

    .upload-box h2 {
        color: #ffffff;
    }

    .upload-desc {
        color: #aaaaaa;
    }

    .upload-btn-white {
        background: #ffffff;
        color: #000000;
        border: none;
    }

    .upload-header {
        border-bottom-color: rgba(255, 255, 255, 0.05) !important;
    }


    .yt-btn-text {
        background: #282828;
        color: #aaaaaa;
    }

    .yt-btn-filled {
        background: #3ea6ff;
        color: #000000;
    }

    .yt-icon-btn:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .yt-form-group {
        border-color: #717171;
        border-width: 1px;
        padding: 8px 12px;
    }

    .yt-form-group:hover {
        border-color: #ffffff;
    }

    .yt-form-group:focus-within {
        border-color: #ffffff;
        box-shadow: inset 0 0 0 1px #ffffff;
    }

    .yt-form-group label {
        color: #aaaaaa;
    }

    .yt-input,
    .yt-textarea {
        color: #ffffff;
    }

    .yt-helper-text {
        color: #aaaaaa;
    }

    .yt-thumb-option {
        border-color: #717171;
        color: #aaaaaa;
    }

    .yt-thumb-option.upload-thumb {
        border-color: #717171;
    }

    .thumb-loading {
        background-color: #282828;
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%);
    }

    .thumb-icon-img {
        filter: invert(1);
        opacity: 0.8;
    }

    .yt-radio-custom {
        border-color: #ffffff;
    }

    .yt-radio-circle {
        background-color: #ffffff;
    }

    .yt-radio-ripple {
        background: rgba(255, 255, 255, 0.15);
    }

    .yt-radio-container input[type="radio"]:active+.yt-radio-custom .yt-radio-ripple,
    .yt-radio-container input[type="checkbox"]:active+.yt-radio-custom .yt-radio-ripple {
        background: rgba(255, 255, 255, 0.25);
    }

    .yt-info-box {
        background-color: rgba(255, 255, 255, 0.05);
    }

    #trailer-policy-tooltip, #tt-policy-tooltip {
        background-color: #282828;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .theme-adaptive-bg {
        background-color: #ffffff !important;
    }
    .theme-adaptive-text {
        color: #ffffff !important;
    }

    .yt-info-icon {
        filter: brightness(0) invert(1);
        opacity: 1;
    }

    .yt-info-text {
        color: #ffffff;
    }

    .yt-info-text a {
        color: #3ea6ff;
    }

    /* Dark Mode Custom Select */
    .custom-select-box {
        border-color: #717171;
        color: #ffffff;
    }

    .custom-select-box:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .custom-select-box.active {
        border-color: #ffffff;
    }

    .custom-select-dropdown {
        background-color: #282828;
        border: none;
        box-shadow: none;
    }

    .custom-select-option {
        color: #ffffff;
    }

    .custom-select-option:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .select-ripple {
        background-color: rgba(255, 255, 255, 0.15);
    }
    
    .custom-select-box .ripple {
        background: rgba(255, 255, 255, 0.15) !important;
    }

    .yt-studio-header {
        background-color: #1f1f1f;
    }

    .yt-video-preview-card {
        background: #282828;
        border-color: transparent;
    }

    .yt-video-player-placeholder {
        background: #000000;
    }

    .yt-info-label {
        color: #aaaaaa;
    }

    .yt-video-link {
        color: #3ea6ff;
    }

    /* Labs Animated Inputs Dark Mode */
    .input-group input,
    .input-group textarea {
        border-color: #3f3f3f;
        color: #ffffff;
    }

    .floating-label {
        color: #aaaaaa;
    }

    .input-group input:focus+.floating-label,
    .input-group input:not(:placeholder-shown)+.floating-label,
    .input-group textarea:focus+.floating-label,
    .input-group textarea:not(:placeholder-shown)+.floating-label {
        color: #aaaaaa;
    }

    .input-group input:focus,
    .input-group textarea:focus {
        border-color: #3f3f3f;
        box-shadow: 0 0 0 2px #0f0f0f, 0 0 0 4px #ffffff;
    }

    .input-group input.error-state:focus,
    .input-group textarea.error-state:focus {
        box-shadow: 0 0 0 2px #0f0f0f, 0 0 0 4px #ffffff !important;
    }

    .lab-btn-white {
        background-color: #ffffff;
        color: #000000;

        outline: none !important;
    }

    .lab-btn-white:hover {
        background-color: #f0f0f0;

    }


    .lab-btn-gray {
        background-color: #3f3f3f;
        color: #ffffff;

        outline: none !important;
    }

    .lab-btn-gray:hover {
        background-color: #555555;

    }

    .lab-btn-white .ripple {
        background: rgba(0, 0, 0, 0.2) !important;
    }

    .lab-btn-gray .ripple {
        background: rgba(255, 255, 255, 0.3) !important;
    }

    .yt-filename {
        color: #ffffff;
    }

    .progress-bar-track {
        background: #3f3f3f;
    }

    .progress-status {
        color: #aaaaaa;
    }

    /* Studio Layout Dark Mode */
    .studio-page-wrapper {
        background: #1f1f1f;
    }

    .studio-topbar {
        background: #1f1f1f;
        border-bottom-color: #3f3f3f;
    }

    .studio-search-box {
        background: #121212;
        border-color: #3f3f3f;
    }

    .studio-btn-outline {
        border-color: #717171;
        color: #ffffff;
    }

    .profile-circle {
        background: #3f3f3f;
    }

    .studio-sidebar {
        background: #1f1f1f;
        border-right-color: #3f3f3f;
    }

    .studio-back-link {
        color: #ffffff;
    }

    .studio-back-link:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .studio-sidebar-title {
        color: #ffffff;
    }

    .studio-sidebar-subtitle {
        color: #aaaaaa;
    }

    .studio-sidebar-thumb {
        background: #000000;
    }

    .studio-nav a {
        color: #ffffff;
    }

    .studio-nav a:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .studio-nav a.active {
        background: #2d2d2d;
        color: #ffffff;
    }

    .studio-nav a.active svg {
        fill: #ffffff;
    }
}

/* --- Upload Stepper Sidebar --- */
.upload-stepper-sidebar {
    width: 260px;
    flex-shrink: 0;
    background-color: transparent;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border-right: none !important;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
    white-space: nowrap;
}

.upload-stepper-sidebar.collapsed {
    width: 72px;
    padding: 24px 12px;
}

.step-text {
    transition: opacity 0.15s ease-out;
    opacity: 1;
}

.upload-stepper-sidebar.collapsed .step-text {
    opacity: 0;
    pointer-events: none;
}

.upload-stepper-sidebar.collapsed .upload-step {
    padding: 12px;
}

.upload-step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    color: #5f6368;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease, padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-step > :not(.ripple) {
    position: relative;
    z-index: 1;
}

.upload-step:not(.locked) {
    cursor: pointer;
}

.upload-step:not(.locked):hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.upload-step.active {
    color: #000000;
    background-color: rgba(0, 0, 0, 0.05);
}

.upload-step.locked {
    color: #5f6368;
    /* Less dim in light mode */
}

.step-icon-box {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    overflow: visible;
}

.step-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.upload-step.active .step-icon-box {
    color: #0a56d0;
}

.upload-step.locked .step-icon-box {
    opacity: 0.8;
    /* Less dim */
}

/* Hamburger button styling */
.hamburger-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    margin-right: 16px;
    transition: background-color 0s;
    position: relative;
    overflow: hidden;
}

.hamburger-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.hamburger-icon,
.more-options-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.definidas-badge {
    background-color: rgba(128, 128, 128, 0.15);
    color: #606060;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
}

.players-input-container {
    width: 100%;
    min-height: 56px;
    padding: 10px 16px;
    background-color: transparent;
    border: 1px solid #e3e3e3;
    border-radius: 20px;
    color: #1f1f1f;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    cursor: text;
}

.players-input-container:focus-within {
    border-color: #3f3f3f;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}

.player-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(0, 0, 0, 0.05);
    color: #0f0f0f;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 500;
    user-select: none;
}

.player-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    color: #606060;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.player-tag-remove:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #000000;
}

.player-tag-remove svg {
    width: 12px;
    height: 12px;
}

.lang-sub-name {
    color: #606060;
}

/* Translations Table Styles */
.translations-table-container {
    width: 100%;
    margin-top: 24px;
    border: none;
    border-radius: 0;
    overflow: hidden;
    background-color: transparent;
}

.translations-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

.translations-table th {
    padding: 12px 16px;
    font-weight: 600;
    color: #606060;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    background-color: rgba(128, 128, 128, 0.05);
}

.translations-table td {
    padding: 16px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
    color: inherit;
    vertical-align: middle;
}

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

.yt-studio-layout.full-width-layout .yt-form-column {
    max-width: 100% !important;
    flex: 1;
}

.yt-studio-layout.full-width-layout .yt-preview-column {
    display: none !important;
}

body.labs-live-upload-mode #upload-config-state {
    max-width: 920px;
}

body.labs-live-upload-mode #upload-config-state .yt-studio-content {
    justify-content: center;
}

body.labs-live-upload-mode #upload-config-state .yt-form-column {
    flex: 0 1 760px;
    max-width: 760px;
}

body.labs-live-upload-mode #upload-config-state .yt-preview-column {
    display: none !important;
}

body.labs-live-upload-mode #video-frame-select-btn {
    display: none !important;
}

body.labs-live-upload-mode .labs-live-premiere-check {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    color: var(--text-color, #202124);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
}

body.labs-live-upload-mode .labs-live-premiere-check > span {
    color: inherit;
    line-height: 1.25;
    min-width: 0;
}

.labs-live-time-field {
    z-index: 20;
}

.labs-live-time-field.is-open {
    z-index: 200;
}

#labs-live-premiere-time {
    cursor: pointer;
    caret-color: transparent;
    padding-right: 44px;
}

.labs-live-time-field::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: #5f6368;
    transform: translateY(-62%) rotate(45deg);
    pointer-events: none;
    opacity: 0.86;
}

.labs-live-time-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    max-height: 292px;
    padding: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(60, 64, 67, 0.22);
}

.labs-live-time-menu[hidden] {
    display: none !important;
}

.labs-live-time-option {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #202124;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.labs-live-time-option:hover,
.labs-live-time-option:focus-visible,
.labs-live-time-option.is-selected {
    background: #f1f3f4;
    outline: none;
}

.labs-live-time-option.is-selected {
    color: #0b57d0;
}

#add-translation-btn {
    min-width: 176px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

#add-translation-btn svg {
    flex: 0 0 18px;
}

@media (prefers-color-scheme: dark) {
    body.labs-live-upload-mode .labs-live-premiere-check {
        color: #ffffff;
    }

    body.labs-live-upload-mode .labs-live-premiere-check > span {
        color: #ffffff;
    }

    .labs-live-time-field::after {
        color: #bdc1c6;
    }

    .labs-live-time-menu {
        background: #2b2c2f;
        border-color: #2b2c2f;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    }

    .labs-live-time-option {
        color: #f1f3f4;
    }

    .labs-live-time-option:hover,
    .labs-live-time-option:focus-visible,
    .labs-live-time-option.is-selected {
        background: rgba(255, 255, 255, 0.1);
    }

    .labs-live-time-option.is-selected {
        color: #8ab4f8;
    }
}

.yt-table-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.yt-checkbox-container {
    display: inline-flex;
    position: relative;
    border-radius: 50%;
}

.yt-table-checkbox input {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #747775;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin: 0;
    z-index: 0;
}

.yt-table-checkbox input::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: -1;
    top: 50%;
    left: 50%;
}

.yt-checkbox-container:hover input::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.yt-checkbox-container:active input::before {
    background: rgba(0, 0, 0, 0.15);
    transform: translate(-50%, -50%) scale(1.1);
    transition: none;
}

.yt-table-checkbox input:checked {
    background-color: #0f0f0f;
    border-color: #0f0f0f;
}

.yt-table-checkbox input:checked::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
    top: 50%;
    left: 50%;
}

.cost-badge {
    background-color: rgba(244, 67, 54, 0.1);
    color: #f44336;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
}

.add-lang-btn {
    background-color: #0f0f0f;
    color: #ffffff;
    border: none;
    border-radius: 100px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-lang-btn:hover {
    background-color: #272727;
}

.delete-row-btn {
    background: transparent;
    border: none;
    color: #606060;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.delete-row-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #000000;
}

@media (prefers-color-scheme: dark) {
    .upload-step {
        color: #aaaaaa;
    }

    .upload-step.active {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.1);
    }
    
    .upload-step:not(.locked):hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .upload-step.locked {
        color: #aaaaaa;
    }

    /* Brighter locked text */
    .upload-step.active .step-icon-box {
        color: #ffffff;
        /* White icon for active step in dark mode */
    }

    .step-icon,
    .hamburger-icon,
    .more-options-icon {
        filter: brightness(0) invert(1);
    }

    .upload-stepper-sidebar {
        border-right: none !important;
    }

    .hamburger-toggle-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .definidas-badge {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.08);
    }

    .players-input-container {
        border-color: #3f3f3f;
        color: #ffffff;
    }

    .players-input-container:focus-within {
        border-color: #3f3f3f;
        box-shadow: 0 0 0 2px #0f0f0f, 0 0 0 4px #ffffff;
    }

    .player-tag {
        background-color: rgba(255, 255, 255, 0.1);
        color: #f1f1f1;
    }

    .player-tag-remove {
        color: #aaaaaa;
    }

    .player-tag-remove:hover {
        background-color: rgba(255, 255, 255, 0.15);
        color: #ffffff;
    }

    .lang-sub-name {
        color: #aaaaaa !important;
    }

    /* Dark Mode Translations Table */
    .translations-table th {
        color: #aaaaaa;
        background-color: rgba(255, 255, 255, 0.02);
    }
    .cost-badge {
        background-color: rgba(255, 82, 82, 0.15);
        color: #ff5252;
    }
    .add-lang-btn {
        background-color: #f1f1f1;
        color: #0f0f0f;
    }
    .add-lang-btn:hover {
        background-color: #d9d9d9;
    }
    .delete-row-btn {
        color: #aaaaaa;
    }
    .delete-row-btn:hover {
        background-color: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }

    .yt-table-checkbox input:checked {
        background-color: #ffffff;
        border-color: #ffffff;
    }

    .yt-table-checkbox input:checked::after {
        border-color: #0f0f0f;
    }

    .yt-table-checkbox input::before {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .yt-checkbox-container:active input::before {
        background: rgba(255, 255, 255, 0.15);
    }
}