button {
    padding: 0.625rem 1.125rem;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    margin: 0.5rem 0;
    transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
    display: block;
    width: 100%;
    box-shadow: var(--shadow-xs);
}

button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

button:not(:disabled):active {
    transform: translateY(0);
}

.btn {
    color: white;
    border: none;
    padding: 0.625rem 1.125rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
    border-radius: var(--radius-md);
}

.btn-load-images {
    background: var(--sky-400);
}

.btn-load-images:hover {
    background: var(--sky-500);
}

.btn-sample-dataset {
    display: block;
    width: 100%;
    margin: 0.5rem 0 0.75rem 0;
    padding: 0.55rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border, #cbd5e1);
    background: var(--bg-muted, #f1f5f9);
    color: var(--text-primary, #0f172a);
    cursor: pointer;
}

.btn-sample-dataset:hover:not(:disabled) {
    border-color: var(--primary, #3b82f6);
    background: color-mix(in srgb, var(--primary, #3b82f6) 8%, var(--bg-muted, #f1f5f9));
}

.btn-sample-dataset:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-sample-dataset.hidden {
    display: none !important;
}

.load-csv-drop-hint {
    margin: 0.45rem 0 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.csv-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.16s ease,
        visibility 0.16s ease;
}

.csv-drop-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.csv-drop-overlay-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: min(92vw, 34rem);
    padding: 2.5rem 2rem;
    border: 3px dashed rgba(255, 255, 255, 0.72);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}

.csv-drop-overlay-icon {
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.35rem;
}

.csv-drop-overlay-title {
    margin: 0;
    font-size: clamp(1.85rem, 5vw, 2.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.csv-drop-overlay-subtitle {
    margin: 0;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
}

/* ——— Task type selector & landing hero ——— */
.task-type-bar {
    flex-shrink: 0;
    background: var(--bg-surface, #fff);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
    position: relative;
    transition:
        max-height calc(var(--landing-duration) + 0.16s) var(--landing-ease),
        padding var(--landing-duration) var(--landing-ease),
        background calc(var(--landing-duration) + 0.08s) ease,
        border-color var(--transition),
        flex calc(var(--landing-duration) + 0.08s) var(--landing-ease);
}

.task-type-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: relative;
    z-index: 1;
}

.landing-hero {
    overflow: visible;
    max-height: none;
}

body.landing-exiting .task-type-bar.landing-hero,
.task-type-bar.landing-hero.is-leaving-hero {
    flex: 0 0 auto;
    max-height: 6.75rem;
    padding: 1rem 1.5rem;
    justify-content: flex-start;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface, #fff);
}

.landing-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 1;
    transition: opacity calc(var(--landing-duration) - 0.12s) ease;
}

.task-type-bar.is-leaving-hero .landing-hero-bg {
    opacity: 0;
}

.landing-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.55;
    animation: landingOrbFloat 14s ease-in-out infinite;
}

.landing-orb-a {
    width: 340px;
    height: 340px;
    top: -80px;
    left: -60px;
    background: rgba(14, 165, 233, 0.35);
}

.landing-orb-b {
    width: 300px;
    height: 300px;
    top: 10%;
    right: -40px;
    background: rgba(139, 92, 246, 0.28);
    animation-delay: -4s;
}

.landing-orb-c {
    width: 260px;
    height: 260px;
    bottom: -60px;
    left: 38%;
    background: rgba(16, 185, 129, 0.26);
    animation-delay: -8s;
}

.landing-intro {
    text-align: center;
    margin-bottom: 1.75rem;
    padding: 0 0.5rem;
    animation: fadeIn 0.65s ease;
}

body.landing-mode .landing-intro {
    margin-bottom: 1.5rem;
}

.landing-intro-eyebrow {
    display: inline-block;
    margin: 0 0 0.85rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: var(--radius-full);
}

[data-theme="dark"] .landing-intro-eyebrow {
    color: #7dd3fc;
    background: rgba(14, 165, 233, 0.14);
    border-color: rgba(125, 211, 252, 0.22);
}

.landing-intro-title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
    margin: 0 0 0.65rem;
    background: linear-gradient(120deg, #0284c7 0%, #7c3aed 52%, #059669 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.landing-intro-subtitle {
    font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
    color: var(--text-secondary);
    margin: 0 auto;
    max-width: 34rem;
    line-height: 1.55;
}

.landing-intro-divider {
    width: min(5.5rem, 30vw);
    height: 3px;
    margin: 1.35rem auto 0;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, #0ea5e9, #8b5cf6, #10b981);
    opacity: 0.85;
}

.task-type-picker {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

body.landing-mode .task-type-picker {
    gap: 0.45rem;
}

.task-type-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding-top: 0.35rem;
}

body.landing-mode .task-type-actions {
    padding-top: 0;
    transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.task-type-begin-hint {
    margin: 0;
    font-size: var(--text-sm);
    color: #ef4444;
    animation: fadeIn 0.25s ease;
}

.task-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.task-type-column {
    display: grid;
    grid-template-rows: auto repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    min-width: 0;
    align-items: stretch;
}

.task-type-column[data-domain="images"] {
    --domain-accent: #0ea5e9;
    --domain-soft: rgba(14, 165, 233, 0.11);
    --domain-glow: rgba(14, 165, 233, 0.22);
}

.task-type-column[data-domain="tabular"] {
    --domain-accent: #8b5cf6;
    --domain-soft: rgba(139, 92, 246, 0.11);
    --domain-glow: rgba(139, 92, 246, 0.22);
}

.task-type-column[data-domain="timeseries"] {
    --domain-accent: #10b981;
    --domain-soft: rgba(16, 185, 129, 0.11);
    --domain-glow: rgba(16, 185, 129, 0.22);
}

.task-type-column-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--domain-accent);
    padding: 0 0.25rem 0.15rem;
}

.task-type-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.05rem 2.45rem;
    min-height: 5.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    cursor: pointer;
    min-width: 0;
    height: 100%;
    position: relative;
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition), transform var(--transition-fast);
}

[data-theme="dark"] .task-type-option {
    background: rgba(15, 23, 42, 0.55);
}

.task-type-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.task-type-option-indicator {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.15rem;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--domain-accent) 35%, var(--border));
    flex-shrink: 0;
    transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.task-type-option:hover:not(.disabled) {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--domain-accent) 45%, var(--border));
    box-shadow: 0 10px 28px -8px var(--domain-glow);
}

.task-type-option.selected {
    border-color: var(--domain-accent);
    background: var(--domain-soft);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--domain-accent) 30%, transparent),
                0 12px 32px -10px var(--domain-glow);
}

.task-type-option.selected .task-type-option-indicator {
    border-color: var(--domain-accent);
    background: var(--domain-accent);
    box-shadow: inset 0 0 0 3px var(--bg-surface, #fff);
}

.task-type-option.disabled {
    opacity: 0.72;
    cursor: not-allowed;
    transform: none;
}

.task-type-option-badge {
    position: absolute;
    bottom: 0.72rem;
    right: 0.72rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.18rem 0.52rem 0.18rem 0.42rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    border-radius: 999px;
    background: color-mix(in srgb, var(--domain-accent) 14%, var(--bg-surface, #fff));
    color: color-mix(in srgb, var(--domain-accent) 82%, var(--text-primary));
    border: 1px solid color-mix(in srgb, var(--domain-accent) 24%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--domain-accent) 10%, transparent);
    pointer-events: none;
}

.task-type-option-badge::before {
    content: "";
    flex-shrink: 0;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.72;
}

[data-theme="dark"] .task-type-option-badge {
    background: color-mix(in srgb, var(--domain-accent) 18%, rgba(15, 23, 42, 0.92));
}

.task-type-option.task-type-tier-locked:hover {
    transform: none;
    box-shadow: none;
}

.task-type-option-text {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0.15rem;
}

.task-type-option-text strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
    line-height: 1.35;
}

.task-type-option-text span {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

body.landing-mode .task-type-column:nth-child(1) .task-type-option:nth-child(2) { animation: landingCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.06s backwards; }
body.landing-mode .task-type-column:nth-child(1) .task-type-option:nth-child(3) { animation: landingCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards; }
body.landing-mode .task-type-column:nth-child(2) .task-type-option:nth-child(2) { animation: landingCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.16s backwards; }
body.landing-mode .task-type-column:nth-child(2) .task-type-option:nth-child(3) { animation: landingCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.22s backwards; }
body.landing-mode .task-type-column:nth-child(3) .task-type-option:nth-child(2) { animation: landingCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.26s backwards; }
body.landing-mode .task-type-column:nth-child(3) .task-type-option:nth-child(3) { animation: landingCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.32s backwards; }

body.landing-mode .task-type-column-label {
    animation: fadeIn 0.5s ease backwards;
}

body.landing-mode .task-type-column:nth-child(1) .task-type-column-label { animation-delay: 0.02s; }
body.landing-mode .task-type-column:nth-child(2) .task-type-column-label { animation-delay: 0.1s; }
body.landing-mode .task-type-column:nth-child(3) .task-type-column-label { animation-delay: 0.18s; }

body.landing-mode .btn-begin-task {
    animation: fadeIn 0.55s ease 0.38s backwards;
}

body.landing-mode #mainAppShell {
    display: none !important;
}

body.landing-mode .task-type-bar.landing-hero {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-bottom: none;
    min-height: 0;
    padding: clamp(0.75rem, 2.5vw, 1.35rem) 1.5rem clamp(2.5rem, 6vh, 4rem);
    background: linear-gradient(165deg,
        color-mix(in srgb, var(--bg-page) 88%, #e0f2fe) 0%,
        var(--bg-page) 45%,
        color-mix(in srgb, var(--bg-page) 90%, #ede9fe) 100%);
}

[data-theme="dark"] body.landing-mode .task-type-bar.landing-hero {
    background: linear-gradient(165deg,
        color-mix(in srgb, var(--bg-page) 82%, #0c4a6e) 0%,
        var(--bg-page) 48%,
        color-mix(in srgb, var(--bg-page) 84%, #312e81) 100%);
}

body.landing-mode .workflow-stepper {
    animation: fadeInOpacity 0.55s var(--landing-ease) 0.1s backwards;
}

.landing-leave {
    animation: landingLeave var(--landing-exit-duration) var(--landing-ease) forwards;
    pointer-events: none;
    will-change: opacity, transform;
}

#mainAppShell {
    opacity: 1;
    transform: translateY(0);
}

body.app-revealing:not(.app-revealed) #mainAppShell {
    opacity: 0;
    transform: translateY(14px);
}

body.app-revealed #mainAppShell {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--landing-duration) var(--landing-ease) 0.1s,
        transform var(--landing-duration) var(--landing-ease) 0.1s;
}

#mainAppShell.is-workflow-shell-leaving {
    animation: workflowAppShellOut 0.38s var(--ui-ease) forwards;
    pointer-events: none;
}

#mainAppShell.is-workflow-shell-leaving .container {
    opacity: 1;
    filter: none;
}

.is-workflow-landing-enter {
    animation: workflowLandingReturnIn 0.55s var(--ui-ease) backwards;
}

.btn-begin-task {
    background: var(--success);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0.875rem 2.75rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    width: auto;
    margin: 0;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.28);
    transition: background-color var(--transition), transform var(--transition-fast), box-shadow var(--transition);
}

.btn-begin-task:hover:not(:disabled) {
    background: var(--success-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.34);
}

.btn-begin-task:disabled {
    background: rgba(255, 255, 255, 0.65);
    color: var(--text-muted);
    border: 1.5px dashed color-mix(in srgb, var(--border) 80%, #94a3b8);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 1;
}

[data-theme="dark"] .btn-begin-task:disabled {
    background: rgba(15, 23, 42, 0.45);
    border-color: color-mix(in srgb, var(--border) 70%, #64748b);
}

.task-type-confirmed {
    text-align: center;
    padding: 1.35rem 1rem 1.15rem;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity calc(var(--landing-duration) - 0.1s) var(--landing-ease),
        transform calc(var(--landing-duration) - 0.1s) var(--landing-ease);
}

.task-type-confirmed.is-entering {
    opacity: 0;
    transform: translateY(10px);
}

.task-type-inner.is-confirmed {
    padding: 0.25rem 0;
}

.task-type-confirmed-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.25;
}

.task-type-confirmed-desc {
    font-size: var(--text-lg);
    color: var(--text-muted);
    margin: 0.45rem 0 0;
    line-height: 1.4;
}

.app-locked .container {
    pointer-events: none;
    opacity: 0.45;
    filter: grayscale(0.15);
}

.regression-targets-field-grid {
    grid-template-columns: 11rem minmax(5.5rem, 1fr);
    align-items: start;
}

.regression-targets-field-grid > label {
    margin: 0;
    font-size: 0.8125rem;
    color: #475569;
    text-align: right;
    white-space: nowrap;
    padding-top: 0.15rem;
}

.regression-target-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.regression-target-checkboxes .regression-target-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #475569;
    text-align: left;
    white-space: normal;
}

.regression-sample-card .category-folder-name {
    font-weight: 600;
}

.regression-sample-card .category-mapping {
    font-size: 0.75rem;
}

.regression-summary-note {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0.35rem 0 0.75rem;
}

.regression-thumb-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    width: 72px;
}

.regression-thumb-caption {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.2;
    max-width: 72px;
    word-break: break-word;
}

.btn-add-layer {
    background: var(--accent);
}

.btn-add-layer:hover {
    background: var(--accent-hover);
}

.btn-train-model {
    background: var(--emerald-400);
}

.btn-train-model:hover {
    background: var(--emerald-500);
}

#trainModelBtn.btn-train-model {
    background: var(--emerald-400);
    box-shadow: none;
}

#trainModelBtn.btn-train-model:hover:not(:disabled) {
    background: var(--emerald-500);
    transform: none;
    box-shadow: none;
}

.btn:disabled,
button:disabled {
    background: var(--bg-muted) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
        
button :disabled {
    background-color: #e2e8f0;
    cursor: not-allowed;
}

.result-display {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(56, 189, 248, 0.02);
    border-radius: var(--radius-md);
    border: none;
}

.result-display h3 {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sky-600);
    margin-bottom: 0.5rem;
}

.model-metrics {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--emerald-100);
    border-radius: var(--radius-md);
    border: 0.3px solid var(--emerald-400);
}

.process-register {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    flex: 1 1 0;
    min-height: 8rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.process-register.hidden {
    display: none;
}

.process-register h3 {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}
 
.error-message {
    color: #b91c1c;
    background: var(--danger-soft);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    margin-top: 0.75rem;
    display: none;
    border: 1px solid #fecaca;
    font-size: 0.875rem;
}

.success-message {
    color: var(--success, #047857);
    background: var(--success-soft);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    margin-top: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--success, #10b981) 45%, transparent);
}

.hidden {
    display: none;
}

/* ——— UiMotion: fluid show/hide ——— */
.ui-motion.ui-motion-enter {
    opacity: 0;
    transform: translateY(8px);
}

.ui-motion.ui-motion-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--ui-duration) var(--ui-ease),
        transform var(--ui-duration) var(--ui-ease);
}

.ui-motion.ui-motion-leave {
    opacity: 0;
    transform: translateY(-5px);
    transition:
        opacity var(--ui-duration-fast) var(--ui-ease),
        transform var(--ui-duration-fast) var(--ui-ease);
    pointer-events: none;
}

.ui-stagger-in {
    animation: uiReveal var(--ui-duration) var(--ui-ease) backwards;
}

.collapsible-body {
    overflow: hidden;
    transition:
        height var(--ui-duration) var(--ui-ease),
        opacity var(--ui-duration-fast) ease;
}

details.collapsible-panel:not([open]) .collapsible-body {
    opacity: 0;
}

details.collapsible-panel[open] .collapsible-body {
    opacity: 1;
}

.layer-field.hidden,
.layer-field-row2.hidden,
#inputResizePixelsRow.hidden,
#inputResizePercentRow.hidden,
.option-row.hidden,
#niManualRow.hidden {
    display: none !important;
}

.thumbnail-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.thumbnail-container.hidden {
    display: none !important;
}

.categories-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: gap var(--ui-duration-fast) var(--ui-ease);
}

.thumbnail {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    flex-shrink: 0;
    image-rendering: auto;
}

.category-samples-details {
    margin-top: 0;
    margin-bottom: 0.35rem;
}

.thumbnail-container.samples-hidden .category-samples-row {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

.thumbnail-container.samples-hidden .categories-list {
    gap: 0.2rem;
    transition: gap var(--ui-duration-fast) var(--ui-ease);
}

.thumbnail-container.samples-hidden .category-card {
    margin-bottom: 0.15rem;
}

.thumbnail-container.samples-hidden .category-header {
    margin-bottom: 0;
}

.category-samples-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
    max-height: 120px;
    opacity: 1;
    overflow: hidden;
    transition:
        max-height var(--ui-duration) var(--ui-ease),
        opacity var(--ui-duration-fast) var(--ui-ease),
        margin-top var(--ui-duration-fast) var(--ui-ease);
}

.category-card.ui-stagger-in {
    animation: uiReveal var(--ui-duration) var(--ui-ease) backwards;
}

.progress-bar {
    width: 100%;
    background-color: #e2e8f0;
    border-radius: 999px;
    margin-top: 0.5rem;
    overflow: hidden;
    height: 8px;
}

.progress {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--emerald-400) 0%, var(--emerald-500) 100%);
    border-radius: 999px;
    width: 0%;
    max-width: 100%;
    text-align: center;
    line-height: 8px;
    color: transparent;
    font-size: 0;
    transition: none;
    box-sizing: border-box;
}

#progressBar.progress--complete,
#trainingProgressBar.progress--complete {
    width: 100% !important;
}

.small-text {
    font-size: 0.8125rem;
    line-height: 1.5;
    }

h2, h3 {
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    font-weight: 600;
}

h3 {
    font-size: 0.9375rem;
}

ol, ul {
    margin-left: 1.25rem;
}

li {
    margin-bottom: 0.5rem;
}

.time-remaining {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
    margin-bottom: 0.75rem;
}

.layer {
    display: block;
    margin-bottom: 0.75rem;
    padding: 1rem 1.125rem;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: box-shadow var(--transition), border-color var(--transition);
}

.layer.layer-conv {
    background: #fff1f2;
    border-color: #fecdd3;
}

.layer.layer-pool {
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.layer.layer-flatten {
    background: #fff7ed;
    border-color: #fed7aa;
}

.layer.layer-dense,
.layer.layer-output {
    background: #fdf2f8;
    border-color: #fbcfe8;
}

.layer.layer-conv:hover {
    border-color: #fda4af;
}

.layer.layer-input {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.layer.layer-input:hover {
    border-color: #93c5fd;
}

.layer.layer-pool:hover {
    border-color: #c4b5fd;
}

.layer.layer-flatten:hover {
    border-color: #fdba74;
}

.layer.layer-dense:hover,
.layer.layer-output:hover {
    border-color: #f9a8d4;
}

.flatten-marker {
    margin-bottom: 0.75rem;
    padding: 0.75rem 1.125rem;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: var(--radius-md);
}

.flatten-marker h4 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #9a3412;
}

.flatten-note {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: #c2410c;
}

.layer:hover {
    border-color: #cbd5e1;
    box-shadow: var(--shadow-xs);
}

.layer h4,
.layer .layer-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
}

.layer-fields {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 520px;
}

.layer-field {
    display: grid;
    grid-template-columns: 11rem 5.5rem;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.layer-output .layer-fields > .layer-field {
    grid-template-columns: 15rem minmax(5.5rem, 1fr);
}

.layer-output .layer-field:has(select.activation) {
    grid-template-columns: 15rem minmax(5.5rem, 1fr);
}

.output-activation-help-slot {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.loss-control-wrap {
    display: flex;
    align-items: center;
}

.readonly-display-field {
    align-items: baseline;
}

.readonly-display-label,
.tabular-classification-target-field .tabular-target-readonly-label {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, #475569);
    white-space: normal;
    overflow-wrap: break-word;
    min-width: 0;
}

.readonly-display-value,
.tabular-classification-target-field .tabular-target-readonly-value {
    font-size: 0.8125rem;
    color: var(--text, #1e293b);
    line-height: 1.4;
    min-width: 0;
    overflow-wrap: anywhere;
}

.readonly-display-value strong,
.tabular-classification-target-field .tabular-target-readonly-value strong {
    font-weight: 600;
}

.readonly-display-hint,
.tabular-classification-target-field .tabular-target-class-count {
    font-weight: 400;
    color: var(--text-muted, #64748b);
}

.option-row .readonly-display-value {
    flex: 0 1 auto;
}

.readonly-display-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.readonly-display-inline .readonly-display-line {
    font-size: 0.8125rem;
    color: var(--text-secondary, #475569);
    line-height: 1.4;
}

.readonly-display-inline .readonly-display-line strong {
    color: var(--text, #1e293b);
    font-weight: 600;
}

.ts-inline-field-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem 0.45rem;
    margin-bottom: 0.75rem;
    min-width: 0;
}

.ts-inline-field-row:last-child,
.readonly-display-inline:last-child {
    margin-bottom: 0;
}

.ts-inline-field-row label {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, #475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ts-inline-field-row select,
.ts-inline-field-row input[type="number"] {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.8125rem;
    background: var(--bg-surface);
    min-width: 0;
}

.ts-inline-field-row select {
    flex: 1 1 0;
    width: 0;
    min-width: 4.25rem;
}

.ts-inline-field-row input[type="number"] {
    width: 4.75rem;
    flex: 0 0 auto;
}

.ts-field-equiv {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ts-inline-field-row .help-container-small,
.readonly-display-inline .help-container-small {
    flex-shrink: 0;
    margin: 0;
}

.layer-field.readonly-display-field {
    align-items: baseline;
}

.layer-field input[type="hidden"],
.option-row input[type="hidden"] {
    display: none;
}

.layer-field-row2 {
    display: grid;
    grid-template-columns: 11rem 5.5rem 11rem 5.5rem;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.layer-field-row2.ts-1d-params {
    grid-template-columns: 11rem 5.5rem;
}

.layer-field-row2 input[type="hidden"] {
    display: none;
}

.layer-field label,
.layer-field-row2 label {
    margin: 0;
    font-size: 0.8125rem;
    color: #475569;
    text-align: right;
    white-space: nowrap;
}

.layer-field select,
.layer-field-row2 select {
    width: 100%;
    min-width: 0;
}

.layer-field input[type="number"],
.layer-field-row2 input[type="number"] {
    width: 100%;
    min-width: 0;
}

.layer-field.input-resize-mode-field {
    grid-template-columns: 11rem minmax(14rem, 1fr);
}

.layer-field.input-resize-mode-field select {
    width: 100%;
    min-width: 14rem;
}

.category-card {
    margin-bottom: 1rem;
    text-align: center;
}

.category-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
}

.category-prefix,
.category-mapping {
    color: var(--text-secondary);
    white-space: nowrap;
}

.category-mapping-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.category-mapping-select {
    min-width: 3.25rem;
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface, #fff);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.category-mapping-select:focus {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 1px;
}

.category-folder-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.category-mapping-bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
    margin: 0.5rem 0 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.category-mapping-bar .help-container-small {
    margin: 0;
    flex-shrink: 0;
}

.input-resize-bar {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}

.input-resize-bar.hidden {
    display: none;
}

.category-reorder {
    display: flex;
    gap: 0.25rem;
}

.category-reorder button {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    flex-shrink: 0;
}

.category-reorder button:not(:disabled):hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-surface);
    transform: none;
    box-shadow: none;
}

.category-reorder button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    color: var(--text-muted);
    background: var(--bg-muted);
}

.layer input,
.layer select {
    margin: 0;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--text-primary, #1e293b);
    background: var(--bg-surface, #ffffff);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.layer input:disabled,
.layer select:disabled {
    background: var(--bg-muted, #f1f5f9);
    color: var(--text-muted, #64748b);
    cursor: not-allowed;
    opacity: 1;
}

.layer input:focus,
.layer select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

#inputShapeData {
    display: none;
}

.layer-editor-panel {
    margin: 0 0 1rem 0;
    min-height: 340px;
    position: relative;
}

#layersContainer {
    min-height: 340px;
}

.layer-editor-empty {
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 1rem 1.125rem;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    margin: 0;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.layer.layer-panel-hidden,
.layer-input.layer-panel-hidden,
#flattenLayerMarker.flatten-panel-hidden {
    display: none !important;
}

.layer-editor-panel .layer:not(.layer-panel-hidden),
.layer-editor-panel .layer-input:not(.layer-panel-hidden) {
    animation: uiReveal var(--ui-duration) var(--ui-ease);
}

#trainingProgress:not(.hidden) .progress-bar {
    animation: none;
}

.model-metrics:not(.hidden) {
    animation: uiReveal var(--ui-duration) var(--ui-ease);
}

#cnnDiagramContainer svg .diagram-pipeline-pixel {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#cnnDiagramContainer svg .diagram-shape-text {
    fill: var(--diagram-shape-text);
}

#cnnDiagramContainer svg .diagram-label-text {
    fill: var(--diagram-label-text);
}

#cnnDiagramContainer svg .diagram-label-text.diagram-label-invalid {
    fill: var(--diagram-label-invalid);
}

#cnnDiagramContainer svg .diagram-connection-line {
    stroke: var(--diagram-arrow-color);
    stroke-linecap: butt;
}

#cnnDiagramContainer svg .diagram-connection-arrowhead {
    fill: var(--diagram-arrow-color);
}

.input-resize-note {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
}

#cnnDiagramContainer .diagram-block-selectable {
    cursor: pointer;
}

#cnnDiagramContainer .diagram-block-selected .diagram-block-shape:not(.diagram-pipeline-pixel) {
    filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.45));
}

#cnnDiagramContainer .diagram-block-selected .diagram-block-outline {
    stroke: #2563eb !important;
}

.layer-buttons-row {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
}

.layer-buttons-row .btn-add-layer {
    flex: 1;
    width: auto;
    margin: 0;
    font-size: 0.8125rem;
    padding: 0.5rem 0.375rem;
}

.layer-buttons-row--dense-only {
    justify-content: center;
}

.layer-buttons-row--dense-only .btn-add-layer {
    flex: 0 0 calc(100% / 3);
    max-width: calc(100% / 3);
}

.cnn-diagram-panel {
    margin: 0 0 1rem 0;
    padding: 1rem 1.125rem;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.cnn-diagram-panel h4 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.diagram-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: nowrap;
    margin-bottom: 0.5rem;
}

.diagram-view-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 0.5rem;
    align-items: center;
}

.diagram-download-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0;
    align-items: center;
}

.diagram-download-footer {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.diagram-download-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    margin: 0;
}

.diagram-download-row button {
    display: inline-block;
    width: auto;
    margin: 0;
    flex: 0 0 auto;
    min-width: 48px;
    padding: 0.375rem 0.875rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: var(--shadow-xs);
}

.diagram-download-row button:hover {
    background: var(--accent-hover);
    transform: none;
}

.diagram-view-controls button {
    display: inline-block;
    width: auto;
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: var(--shadow-xs);
}

.diagram-view-controls button:hover {
    transform: none;
}

.diagram-view-toggle {
    background: var(--sky-400) !important;
}

.diagram-view-toggle:hover {
    background: var(--sky-500) !important;
}

#toggleDiagramView.hidden {
    display: none !important;
}

#inputResizeFields.hidden,
#inputResizeOriginalNote.hidden,
#inputInfoPanel.hidden {
    display: none !important;
}

#cnnDiagramContainer {
    overflow: hidden;
    height: 236px;
    margin: 0.25rem 0 0 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--diagram-bg);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cnnDiagramContainer.diagram-scroll-mode {
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    justify-content: flex-start;
}

#cnnDiagramContainer svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 210px;
    height: auto;
}

#cnnDiagramContainer.diagram-scroll-mode svg {
    margin: 0;
    max-width: none;
    max-height: 210px;
    flex-shrink: 0;
}

.collapsible-panel {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
}

.collapsible-panel summary {
    cursor: pointer;
    color: var(--primary);
    font-weight: 600;
    padding: 0.35rem 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
}

.collapsible-panel summary::-webkit-details-marker {
    display: none;
}

.collapsible-panel summary::marker {
    content: none;
}

.collapsible-panel summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 0.35rem;
    transition: transform var(--ui-duration-fast) var(--ui-ease);
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.collapsible-panel[data-ui-motion-collapsible="1"].is-visually-expanded summary::before,
.collapsible-panel:not([data-ui-motion-collapsible="1"])[open] summary::before {
    transform: rotate(90deg);
}

.collapsible-panel-hint {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.collapsible-panel[data-ui-motion-collapsible="1"].is-visually-expanded .collapsible-panel-hint,
.collapsible-panel:not([data-ui-motion-collapsible="1"])[open] .collapsible-panel-hint {
    display: none;
}

.training-options-details {
    margin-bottom: 1rem;
}

.hyperparams-sections .training-options-details:last-child {
    margin-bottom: 1rem;
}

.training-options-details > .training-options {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.diagram-details-wrap {
    margin-top: 0.5rem;
}

.diagram-input-summary {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.diagram-details-empty {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.diagram-details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

.diagram-details-table th,
.diagram-details-table td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.625rem;
    text-align: left;
    vertical-align: top;
}

.diagram-details-table th {
    background: var(--bg-muted);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.diagram-weights-cell {
    white-space: nowrap;
}

.diagram-memory-line {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.diagram-weights-total {
    margin: 0.75rem 0 0.25rem;
    padding: 0.5rem 0.625rem;
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.diagram-fp-note {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.diagram-mapping {
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

.diagram-mapping-invalid {
    color: var(--danger);
}

.diagram-error {
    color: #b91c1c;
    margin: 0.25rem 0;
    font-size: 0.8125rem;
}

.option-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.option-row label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.option-row input[type="number"],
.option-row select {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.8125rem;
    background: var(--bg-surface);
}

.option-row input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary);
}

.remove-layer-btn {
    background-color: transparent;
    border: none;
    width: auto;
    height: auto;
    cursor: pointer;
    margin-left: 0.5rem;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity var(--transition);
}

.remove-layer-btn:hover {
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

.remove-layer-btn img {
    width: 18px;
    height: 18px;
}

.prohibit-line {
    display: block;
    width: 70%;
    height: 3px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.remove-layer-btn::after {
    display: none;
}

.mt-4 { margin-top: 1.25rem; }
.mt-2 { margin-top: 0.625rem; }

.help-container {
    position: relative;
    display: inline-block;
}

.app-header .help-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    color: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.app-header .help-icon:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(167, 243, 208, 0.45);
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.16);
    transform: none;
}

.help-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background var(--transition);
    box-shadow: none;
}

.help-icon:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: none;
}

.header-instructions-floating {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    width: 420px;
    max-width: min(420px, 92vw);
    max-height: min(70vh, 520px);
    overflow-y: auto;
    z-index: 10050;
    transition: opacity 0.2s ease, visibility 0.2s;
    pointer-events: none;
}

.header-instructions-floating .header-guide-cta {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid var(--border, #cbd5e1);
    background: var(--bg-muted, #f1f5f9);
    color: var(--text-primary, #1e293b);
    cursor: pointer;
}

.header-instructions-floating .header-guide-cta:hover {
    border-color: var(--primary, #3b82f6);
}

.header-guide-cta[hidden] {
    display: none !important;
}

.guide-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 10060;
    opacity: 1;
    transition: opacity 0.25s ease;
}

.guide-drawer-backdrop.hidden {
    opacity: 0;
    pointer-events: none;
}

.guide-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(420px, 92vw);
    min-width: min(420px, 92vw);
    height: 100dvh;
    max-height: 100dvh;
    z-index: 10070;
    background: var(--bg-surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    transform: translateX(0);
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.guide-drawer.hidden {
    transform: translateX(104%);
    opacity: 0;
    pointer-events: none;
}

.guide-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

.guide-drawer-header h2 {
    margin: 0;
    font-size: 1.05rem;
}

.guide-drawer-close {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    color: var(--text-secondary);
    box-shadow: none;
}

.guide-drawer-close::after {
    content: '\00d7';
    font-size: 1.125rem;
    line-height: 1;
    color: currentColor;
}

.guide-drawer-close:hover {
    background: var(--bg-muted, rgba(148, 163, 184, 0.12));
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
}

.guide-drawer-close:active {
    transform: none;
}

.guide-drawer-content {
    padding: 0.75rem 1rem 1.25rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

.guide-section {
    margin-bottom: 0.65rem;
}

.guide-drawer-content .guide-section {
    width: 100%;
    min-width: 0;
}

.guide-section-body {
    padding: 0.5rem 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.guide-data-example {
    animation: guideFadeIn 0.35s ease;
}

.guide-sample-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.guide-sample-table th,
.guide-sample-table td {
    border: 1px solid var(--border);
    padding: 0.35rem 0.5rem;
    text-align: left;
}

.guide-data-tree code {
    font-size: 0.8125rem;
}

.guide-data-tree ul {
    margin: 0.35rem 0 0.35rem 1rem;
    padding: 0;
    list-style: none;
}

.guide-data-tree li {
    margin: 0.15rem 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.guide-data-note {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
}

.guide-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #000;
}

.guide-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.guide-video-note {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.task-type-detail {
    margin: 0 auto;
    max-width: 34rem;
    text-align: center;
}

body.landing-mode #taskTypeDetailPanel {
    --task-detail-expand-ms: 480ms;
    --task-detail-expand-height: 20rem;
    display: block !important;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transition:
        max-height var(--task-detail-expand-ms) cubic-bezier(0.22, 1, 0.36, 1),
        margin-top var(--task-detail-expand-ms) cubic-bezier(0.22, 1, 0.36, 1),
        opacity calc(var(--task-detail-expand-ms) * 0.7) ease;
}

body.landing-mode #taskTypeDetailPanel:not(.hidden) {
    max-height: var(--task-detail-expand-height);
    margin-top: 0.75rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.task-type-detail[data-domain="images"] {
    --domain-accent: #0ea5e9;
    --domain-soft: rgba(14, 165, 233, 0.1);
    --domain-glow: rgba(14, 165, 233, 0.2);
}

.task-type-detail[data-domain="tabular"] {
    --domain-accent: #8b5cf6;
    --domain-soft: rgba(139, 92, 246, 0.1);
    --domain-glow: rgba(139, 92, 246, 0.2);
}

.task-type-detail[data-domain="timeseries"] {
    --domain-accent: #10b981;
    --domain-soft: rgba(16, 185, 129, 0.1);
    --domain-glow: rgba(16, 185, 129, 0.2);
}

.task-type-detail-inner {
    position: relative;
    padding: 1.65rem 1.85rem 1.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--domain-accent) 18%, var(--border));
    background: color-mix(in srgb, var(--domain-soft) 55%, rgba(255, 255, 255, 0.78));
    backdrop-filter: blur(12px);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--domain-accent) 8%, transparent),
        0 20px 48px -28px var(--domain-glow);
    overflow: hidden;
}

[data-theme="dark"] .task-type-detail-inner {
    background: color-mix(in srgb, var(--domain-soft) 40%, rgba(15, 23, 42, 0.72));
}

.task-type-detail-inner::after {
    content: "";
    position: absolute;
    inset: -30% -10% auto auto;
    width: 55%;
    height: 70%;
    background: radial-gradient(circle at center, var(--domain-glow) 0%, transparent 68%);
    pointer-events: none;
    opacity: 0.55;
}

.task-type-detail-eyebrow {
    display: inline-block;
    margin: 0 0 0.55rem;
    padding: 0.22rem 0.65rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--domain-accent);
    background: color-mix(in srgb, var(--domain-soft) 80%, transparent);
    border-radius: 999px;
    position: relative;
    z-index: 1;
}

.task-type-detail-title {
    margin: 0 0 0.65rem;
    font-family: var(--font-display, inherit);
    font-size: clamp(1.15rem, 2.2vw, 1.35rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}

.task-type-detail-text {
    margin: 0 auto;
    max-width: 30rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
}

.task-type-detail-inner.is-leaving {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.task-type-detail-inner.is-entering {
    animation: taskDetailReveal 0.44s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes taskDetailReveal {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Landing: elección de modo (importar vs entrenar) ── */
.task-mode-choice {
    width: 100%;
    max-width: 38rem;
    margin: 0 auto;
    animation: taskModeChoiceIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.task-mode-choice.is-leaving {
    animation: taskModeChoiceOut 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

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

@keyframes taskModeChoiceOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.task-mode-choice-label {
    margin: 0 0 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}

.task-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.task-mode-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    text-align: left;
    padding: 1.15rem 1.15rem 1.2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition-fast),
        background-color var(--transition);
}

[data-theme="dark"] .task-mode-card {
    background: rgba(15, 23, 42, 0.55);
}

.task-mode-card:hover {
    transform: translateY(-3px);
}

.task-mode-import {
    --mode-accent: #6366f1;
    --mode-soft: rgba(99, 102, 241, 0.12);
    --mode-glow: rgba(99, 102, 241, 0.28);
}

.task-mode-train {
    --mode-accent: #10b981;
    --mode-soft: rgba(16, 185, 129, 0.12);
    --mode-glow: rgba(16, 185, 129, 0.28);
}

.task-mode-card:hover,
.task-mode-card:focus-visible {
    border-color: color-mix(in srgb, var(--mode-accent) 45%, var(--border));
    box-shadow: 0 14px 36px -14px var(--mode-glow);
    outline: none;
}

.task-mode-import:hover,
.task-mode-import:focus-visible {
    background: color-mix(in srgb, var(--mode-soft) 65%, rgba(255, 255, 255, 0.72));
}

.task-mode-train:hover,
.task-mode-train:focus-visible {
    background: color-mix(in srgb, var(--mode-soft) 65%, rgba(255, 255, 255, 0.72));
}

.task-mode-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: var(--radius-md);
    color: var(--mode-accent);
    background: var(--mode-soft);
    margin-bottom: 0.15rem;
    transition: transform var(--transition-fast);
}

.task-mode-card:hover .task-mode-icon {
    transform: scale(1.06);
}

.task-mode-card strong {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.task-mode-card span:last-child {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ── Landing: panel de importación .h5 ── */
.task-import-panel {
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    animation: taskImportPanelIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

body.landing-mode:has(#taskImportPanel:not(.hidden)) .task-type-bar.landing-hero {
    padding-bottom: clamp(3rem, 8vh, 5.5rem);
}

body.landing-mode:has(#taskModeChoice:not(.hidden)) .task-type-bar.landing-hero {
    padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.task-import-panel.is-leaving {
    animation: taskImportPanelOut 0.26s ease forwards;
    pointer-events: none;
}

@keyframes taskImportPanelIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes taskImportPanelOut {
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.985);
    }
}

.task-import-panel-inner {
    position: relative;
    padding: 1.35rem 1.5rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, #6366f1 18%, var(--border));
    background: color-mix(in srgb, rgba(99, 102, 241, 0.08) 55%, rgba(255, 255, 255, 0.78));
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 48px -28px rgba(99, 102, 241, 0.22);
    text-align: center;
}

[data-theme="dark"] .task-import-panel-inner {
    background: color-mix(in srgb, rgba(99, 102, 241, 0.12) 40%, rgba(15, 23, 42, 0.72));
}

.task-import-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 0.75rem;
    padding: 0.25rem 0.55rem;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition);
}

.task-import-back:hover {
    color: var(--text-primary);
    background: rgba(99, 102, 241, 0.08);
}

.task-import-title {
    margin: 0 0 0.4rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.task-import-subtitle {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.task-import-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.35rem 1rem;
    margin-bottom: 0.85rem;
    border: 1.5px dashed color-mix(in srgb, #6366f1 35%, var(--border));
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition:
        border-color var(--transition),
        background-color var(--transition),
        transform var(--transition-fast),
        box-shadow var(--transition);
}

[data-theme="dark"] .task-import-dropzone {
    background: rgba(15, 23, 42, 0.35);
}

.task-import-dropzone:hover,
.task-import-dropzone.is-dragover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.07);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -12px rgba(99, 102, 241, 0.35);
}

.task-import-dropzone:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.task-import-dropzone-icon {
    color: #6366f1;
    opacity: 0.85;
}

.task-import-dropzone strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.task-import-file-name,
.task-import-mapping-file {
    font-size: 0.8125rem;
    color: #6366f1;
    font-weight: 600;
    word-break: break-all;
}

.task-import-mapping {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.85rem;
}

.task-import-mapping-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition);
}

.task-import-mapping-btn:hover {
    color: #6366f1;
}

.task-import-generate {
    width: 100%;
    max-width: none;
    background: #6366f1;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.32);
}

.task-import-generate:hover:not(:disabled) {
    background: #4f46e5;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.38);
}

.task-import-generate:disabled {
    background: rgba(255, 255, 255, 0.65);
    box-shadow: none;
}

.task-import-status {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.task-import-status.is-error {
    color: #ef4444;
}

.task-import-result {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    animation: fadeIn 0.45s ease;
}

.task-import-result-msg {
    margin: 0 0 0.85rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.task-import-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
}

.task-import-download-btn {
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: var(--radius-md);
    background: #10b981;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--transition), transform var(--transition-fast);
}

.task-import-download-btn:hover {
    background: var(--success-hover, #059669);
    transform: translateY(-1px);
}

.task-import-download-secondary {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.task-import-download-secondary:hover {
    background: rgba(99, 102, 241, 0.18);
    color: #4f46e5;
}

body.landing-mode .task-type-picker.has-task-selected {
    gap: 0.65rem;
}

body.landing-mode #taskTypeDetailPanel:not(.hidden) {
    --task-detail-expand-height: 22rem;
}

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

.task-guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0.85rem auto 0;
    width: auto;
    padding: 0.4rem 0.95rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sky-700, #0369a1);
    background: color-mix(in srgb, var(--sky-400) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--sky-400) 45%, var(--border));
    border-radius: 999px;
    cursor: pointer;
    box-shadow: none;
}

.task-guide-btn:hover {
    transform: none;
    background: color-mix(in srgb, var(--sky-400) 26%, transparent);
    box-shadow: none;
}

[data-theme="dark"] .task-guide-btn {
    color: #bae6fd;
}

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

html.guide-drawer-open {
    overflow: hidden;
}

body.guide-drawer-open {
    position: fixed;
    top: var(--guide-scroll-lock-top, 0);
    left: 0;
    right: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

.help-tooltip {
    visibility: hidden;
    width: 420px;
    max-width: min(420px, 92vw);
    background: var(--bg-surface);
    color: var(--text-primary);
    text-align: left;
    border-radius: var(--radius-md);
    padding: 1rem;
    position: absolute;
    z-index: 100;
    top: 42px;
    right: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}

.instructions-intro {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 0.875rem 0;
}

.instructions-heading {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 0.625rem 0;
}

#instructionsTooltip {
    display: none !important;
}

.help-icon:hover + .help-tooltip {
    visibility: visible;
    opacity: 1;
}

.help-icon-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity var(--transition);
}

.help-icon-small:hover {
    opacity: 1;
}

.help-icon-small img {
    width: 16px;
    height: 16px;
}

.help-container-small {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.help-tooltip-small {
    visibility: hidden;
    width: 240px;
    max-width: min(280px, 90vw);
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    text-align: left;
    border-radius: var(--radius-md);
    padding: 0.75rem;
    position: absolute;
    z-index: 100;
    top: 24px;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    line-height: 1.5;
}

.help-icon-small:hover + .help-tooltip-small {
    visibility: visible;
    opacity: 1;
}
        
.option-row .help-container-small {
    margin-right: 4px;
}

.sidebar-left .help-tooltip-small {
    left: 0;
    right: auto;
}

.sidebar-right .help-tooltip-small {
    right: 0;
    left: auto;
}

.main-content .help-tooltip-small {
    left: -125px;
}

#networkArchitecture2 {
    margin-top: 0;
}

.training-options {
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 1.125rem 1.25rem;
    background: #ffffff;
    border-radius: var(--radius-md);
    border: 0.3px solid var(--border);
}

.training-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
    align-items: start;
}

.training-options-col h3 {
    margin-top: 0;
    margin-bottom: 0.875rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.training-options-col-header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 0.875rem;
}

.training-options-col-header h3 {
    margin: 0 5px 0 0;
}

.training-options-mlp {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 0.3px solid var(--border);
}

.training-options h3 {
    margin-top: 0;
    margin-bottom: 0.875rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.training-options label {
    margin-right: 0.25rem;
}

.training-options input,
.training-options select {
    padding: 0.375rem 0.5rem;
    border: 0.3px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.8125rem;
    background: #ffffff;
}

@media (max-width: 900px) {
    .training-options-grid {
        grid-template-columns: 1fr;
        gap: 1rem 0;
    }
}

.button-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.button-row button {
    width: 50%;
    font-size: 0.75rem;
    padding: 0.5rem 0.375rem;
}

.language-switcher {
    display: flex;
    gap: 0.5rem;
    margin-right: 0.5rem;
}

.app-header .lang-flag {
    margin-top: 0;
    width: 36px;
    height: 36px;
    cursor: pointer;
    padding: 2px;
    box-sizing: border-box;
    transition: transform var(--transition-fast), box-shadow var(--transition), border-color var(--transition);
}

.app-header .lang-flag:hover {
    transform: scale(1.05);
}

.app-header .lang-flag.active {
    border-color: rgba(125, 211, 252, 0.85);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.28), 0 0 16px rgba(14, 165, 233, 0.22);
}

.lang-flag {
    margin-top: 0;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
}

.lang-flag:hover {
    transform: scale(1.08);
}

.lang-flag.active {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.4);
}

.generating-files-message {
    background: var(--bg-muted);
    padding: 1rem;
    border-radius: var(--radius-md);
    text-align: center;
    margin: 0.75rem 0;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--border);
}

.spinner {
    border: 3px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    animation: spin 0.8s linear infinite;
    margin-bottom: 0.5rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loadStatus {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

#loadStatus .load-status-line {
    display: block;
    line-height: 1.45;
}

.load-status-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.25rem 0 0;
}

.load-status-row .help-container-small {
    margin: 0;
    flex-shrink: 0;
}

#logList {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

#logList li {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

#logList li.log-category-entry {
    padding: 0.2rem 0;
}

#logList .log-line {
    display: block;
}

#logList .log-line-sub {
    padding-left: 5.25rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

#logList li.log-info {
    border-left: 3px solid transparent;
}

#logList li.log-ok {
    border-left: 3px solid #22c55e;
    padding-left: 0.4rem;
}

#logList li.log-warn {
    border-left: 3px solid #f59e0b;
    padding-left: 0.4rem;
}

#logList li.log-error {
    border-left: 3px solid #ef4444;
    padding-left: 0.4rem;
}

#logList .log-mappings-block {
    margin: 0.25rem 0;
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-sm);
    background: var(--bg-muted, #f8fafc);
}

#logList .log-mappings-block > summary {
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-muted);
    list-style: none;
}

#logList .log-mappings-block > summary::-webkit-details-marker {
    display: none;
}

#logList .log-mappings-block ul {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
}

#processLog.process-register {
    font-family: var(--font-mono);
}

#processLog .process-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

#processLog .process-log-header h3 {
    margin: 0;
    font-family: var(--font-sans);
}

#processLog .process-log-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

#processLog .process-log-action-btn {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border, #cbd5e1);
    background: var(--bg-surface, #fff);
    color: var(--text-muted, #64748b);
    cursor: pointer;
}

#processLog .process-log-action-btn:hover {
    color: var(--text-primary, #1e293b);
    border-color: var(--primary, #3b82f6);
}

#processLog h3 {
    font-family: var(--font-sans);
}

@media (max-width: 768px) {
    .help-tooltip {
        width: 280px;
        right: -100px;
    }
}

.tabular-data-panel {
    margin-top: 0.75rem;
}

.tabular-table-wrap {
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface, #fff);
}

.tabular-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.tabular-preview-table th,
.tabular-preview-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.tabular-preview-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-muted);
    z-index: 1;
    font-weight: 600;
}

.tabular-preview-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.tabular-summary {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.tabular-column-config {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
}

.tabular-column-config h4 {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
}

.tabular-column-group {
    margin-bottom: 0.75rem;
}

.tabular-column-group:last-child {
    margin-bottom: 0;
}

.tabular-column-checkboxes,
.tabular-target-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 182px;
    overflow-y: auto;
}

.tabular-column-option,
.tabular-target-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
}

.tabular-column-type {
    color: var(--text-muted, #64748b);
    font-size: 0.75rem;
    font-weight: 400;
}

.tabular-target-select {
    width: 100%;
    max-width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
}

.tabular-classification-target-field {
    grid-template-columns: 15rem minmax(5.5rem, 1fr);
    align-items: baseline;
}

.tabular-classification-target-field .tabular-target-readonly-label {
    text-align: right;
}

.tabular-target-mapping {
    margin-top: 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.tabular-target-mapping.hidden {
    display: none;
}

.tabular-target-mapping-header,
.tabular-class-mapping-title {
    display: block;
    margin: 0 0 0.5rem;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
}

.tabular-target-mapping > .tabular-class-mapping-title {
    margin-bottom: 0.55rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border);
}

.tabular-class-mapping-title + .tabular-target-mapping-section-first {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.tabular-class-mapping-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tabular-class-mapping-list li {
    margin-top: 0.2rem;
    padding-left: 0.15rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    word-break: break-word;
}

.tabular-target-mapping strong {
    display: inline;
    color: var(--text);
    font-weight: 600;
}

.tabular-target-mapping-section + .tabular-target-mapping-section,
.tabular-target-mapping-section:not(.tabular-target-mapping-section-first) {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
}

.tabular-target-mapping-row {
    margin-top: 0.2rem;
    padding-left: 0.15rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    word-break: break-word;
}

.diagram-mlp-pipeline {
    display: block;
    max-width: 100%;
}

.diagram-mlp-column.diagram-block-selected .diagram-mlp-node {
    fill: #eff6ff;
}

.timeseries-window-config {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.tabular-preview-details {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.tabular-data-panel > .tabular-column-config {
    margin-top: 0;
}

.timeseries-regression-mode-panel {
    margin-bottom: 0.65rem;
}

.timeseries-regression-mode-fields {
    min-width: 0;
}

.timeseries-config-details {
    margin-bottom: 0.65rem;
}

.timeseries-config-details:last-child {
    margin-bottom: 0;
}

.timeseries-config-fields {
    padding: 0.65rem 0.15rem 0.15rem;
    min-width: 0;
}

.timeseries-config-section {
    margin-bottom: 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-muted, #f8fafc);
    min-width: 0;
}

.timeseries-config-section:last-child {
    margin-bottom: 0;
}

.timeseries-config-section-title {
    margin: 0 0 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}

.metrics-export-row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.metrics-export-row .btn {
    width: 100%;
}

.training-warnings {
    margin-top: 0.65rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.45rem;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.training-warning-item {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-primary, #0f172a);
}

.timeseries-signal-preview {
    margin-top: 0.75rem;
}

.timeseries-preview-charts {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.signal-plot-panel {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.signal-plot-panel-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #475569);
}

.signal-plot-wrap {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
}

.signal-plot-legend {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.12rem;
    min-width: 3.25rem;
    max-width: 5.5rem;
    padding-top: 8px;
    padding-bottom: 30px;
    font-size: 0.6875rem;
    line-height: 1.15;
}

.signal-plot-legend-item {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 5.5rem;
    font-weight: 600;
    border: none;
    background: transparent;
    padding: 0;
    text-align: left;
    font-family: inherit;
}

.signal-plot-legend-item.is-hidden {
    opacity: 0.38;
    text-decoration: line-through;
}

.signal-plot-wrap .signal-plot {
    flex: 1 1 auto;
    min-width: 0;
}

.signal-plot {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    background: var(--layer-input-fill, #eff6ff);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.input-info-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.input-info-panel .readonly-display-field {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: baseline;
}

.input-info-note {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.diagram-signal-path {
    vector-effect: non-scaling-stroke;
}

/* ——— Loss chart (training progress) ——— */
.loss-chart-slot {
    min-height: 0;
}

.loss-chart-slot--metrics {
    margin: 0.65rem 0 1rem;
}

.loss-chart-panel {
    margin-top: 0.75rem;
    overflow: hidden;
}

.loss-chart-panel--metrics {
    margin-top: 0;
}

.loss-chart-panel--relocating {
    z-index: 20;
    will-change: transform;
}

.loss-chart-body {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-muted);
}

.loss-chart-labels {
    flex: 0 0 auto;
    min-width: 7.5rem;
}

.loss-chart-row {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1.25;
}

.loss-chart-row + .loss-chart-row {
    margin-top: 0.45rem;
}

.loss-chart-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.loss-chart-row--test .loss-chart-label,
.loss-chart-row--test .loss-chart-value {
    color: var(--text-primary);
}

.loss-chart-row--train .loss-chart-label,
.loss-chart-row--train .loss-chart-value {
    color: var(--text-secondary);
}

.loss-chart-value {
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.loss-chart-svg {
    flex: 1 1 auto;
    width: 100%;
    min-width: 6.5rem;
    max-width: 11rem;
    height: 3rem;
    display: block;
}

.loss-chart-line--train {
    stroke: var(--text-secondary);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.loss-chart-line--test {
    stroke: var(--text-primary);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.loss-chart-panel--pulse .loss-chart-body {
    animation: lossChartPulse 0.55s ease;
}

.loss-chart-panel--landed .loss-chart-body {
    animation: uiReveal var(--ui-duration, 420ms) var(--ui-ease, ease);
}

@keyframes lossChartPulse {
    0%, 100% {
        border-color: var(--border);
        box-shadow: none;
    }
    45% {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-ring);
    }
}

@media (max-width: 768px) {
    body.landing-mode #taskTypeDetailPanel {
        --task-detail-expand-height: 22rem;
    }
}

@media (max-width: 960px) {
    .task-type-grid {
        grid-template-columns: 1fr;
    }

    .landing-intro {
        margin-bottom: 1.35rem;
    }

    .btn-begin-task {
        width: min(100%, 20rem);
    }

    .loss-chart-body {
        flex-wrap: wrap;
    }

    .loss-chart-svg {
        max-width: none;
    }
}

/* ── ML backend (TensorFlow) preload banner ── */
.ml-backend-banner {
    position: sticky;
    top: 0;
    z-index: 1200;
    padding: 0.65rem 1rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0c4a6e;
    background: linear-gradient(90deg, #e0f2fe, #dbeafe);
    border-bottom: 1px solid rgba(14, 165, 233, 0.35);
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.12);
}

.ml-backend-banner.hidden {
    display: none !important;
}

.ml-backend-banner-text {
    margin: 0;
    line-height: 1.45;
}

[data-theme="dark"] .ml-backend-banner {
    color: #e0f2fe;
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.22), rgba(99, 102, 241, 0.18));
    border-bottom-color: rgba(125, 211, 252, 0.35);
}

/* ── Auth header + upgrade/survey modal ── */
.header-auth {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 36px;
    opacity: 1;
    transition: opacity 0.32s var(--ui-ease);
}

.header-auth--pending {
    opacity: 0;
    pointer-events: none;
}

.header-auth button,
.header-auth a.header-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: auto;
    margin: 0;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
}

.header-auth-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: 36px;
    min-height: 36px;
    padding: 0 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    color: rgba(248, 250, 252, 0.96);
    transition:
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition-fast),
        opacity 0.28s ease;
}

.header-auth-icon {
    width: 0.9375rem;
    height: 0.9375rem;
    flex-shrink: 0;
    opacity: 0.9;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.header-auth-btn--login {
    border: none;
    background: transparent;
    padding: 0 0.95rem;
}

.header-auth-btn--login::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        102deg,
        rgba(14, 165, 233, 0.98) 0%,
        rgba(59, 130, 246, 0.95) 18%,
        rgba(139, 92, 246, 0.98) 42%,
        rgba(192, 132, 252, 0.9) 55%,
        rgba(16, 185, 129, 0.95) 72%,
        rgba(45, 212, 191, 0.9) 86%,
        rgba(14, 165, 233, 0.98) 100%
    );
    background-size: 220% 100%;
    animation: headerBorderShimmer 7s linear infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -2;
}

.header-auth-btn--login::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--radius-md) - 1px);
    background: rgba(8, 15, 30, 0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    z-index: -1;
    transition: background var(--transition), box-shadow var(--transition);
}

.header-auth-btn--login:hover::after,
.header-auth-btn--login:focus-visible::after {
    background: rgba(15, 23, 42, 0.38);
    box-shadow:
        inset 0 0 18px rgba(14, 165, 233, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.header-auth-btn--login:hover,
.header-auth-btn--login:focus-visible {
    box-shadow:
        0 0 20px rgba(99, 102, 241, 0.32),
        0 0 36px rgba(14, 165, 233, 0.16);
    transform: translateY(-1px);
}

.header-auth-btn--login:active {
    transform: translateY(0) scale(0.98);
}

.header-auth-btn--tool {
    padding: 0 0.75rem;
}

.header-auth-btn--tool.header-tool-glass,
.header-auth-btn--tool {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition-fast);
}

.header-auth-btn--tool:hover,
.header-auth-btn--tool:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(186, 230, 253, 0.45);
    box-shadow: 0 0 18px rgba(14, 165, 233, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.header-auth-btn--logout:hover,
.header-auth-btn--logout:focus-visible {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(239, 68, 68, 0.14);
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.header-auth-btn--logout:hover .header-auth-icon,
.header-auth-btn--logout:focus-visible .header-auth-icon {
    transform: translateX(2px);
}

.header-auth-btn--admin {
    color: #a7f3d0;
}

.header-auth-btn--admin:hover,
.header-auth-btn--admin:focus-visible {
    color: #d1fae5;
    border-color: rgba(52, 211, 153, 0.55);
    background: rgba(16, 185, 129, 0.18);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.header-auth-btn--tool:active {
    transform: translateY(0) scale(0.98);
}

.header-auth-btn:focus-visible {
    outline: 2px solid rgba(186, 230, 253, 0.85);
    outline-offset: 2px;
}

.header-auth-guest.hidden {
    display: none !important;
}

.header-auth a.header-auth-btn.hidden,
#headerAdminLink.hidden,
#headerAdminLink[hidden] {
    display: none !important;
}

.header-user-menu {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    animation: headerAuthMenuIn 0.36s var(--ui-ease) backwards;
}

.header-user-menu.hidden,
.header-user-menu[hidden] {
    display: none !important;
}

.header-user-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 36px;
    min-height: 36px;
    min-width: 36px;
    max-width: 10.5rem;
    padding: 0 0.625rem;
    border-radius: var(--radius-md);
    color: rgba(248, 250, 252, 0.94);
    cursor: pointer;
    overflow: hidden;
    font-family: inherit;
    box-sizing: border-box;
    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition-fast);
}

.header-user-chip:hover,
.header-user-chip:focus-visible {
    outline: none;
}

.header-user-chip.is-uploading {
    opacity: 0.72;
    pointer-events: none;
}

.header-user-avatar {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    display: block;
    margin: 0;
}

.header-user-avatar.hidden,
.header-user-avatar[hidden] {
    display: none !important;
}

.header-user-chip.has-avatar {
    padding: 0;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
}

.header-user-chip.has-avatar .header-auth-icon--user {
    display: none;
}

.header-auth-icon--user {
    width: 0.9375rem;
    height: 0.9375rem;
    opacity: 0.88;
    display: block;
    flex-shrink: 0;
    margin: 0;
}

.header-user-label {
    display: none !important;
}

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

/* Modal / form auth buttons */
.auth-form-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 1rem;
}

.auth-form-actions--stack {
    margin-top: 0.35rem;
}

.auth-verify-hint {
    margin: 0 0 0.85rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.auth-verify-email-row {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.auth-verify-section {
    margin-bottom: 1rem;
}

.auth-verify-dev-label {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.auth-verify-dev-hint,
.auth-verify-smtp-msg {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.auth-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0.85rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-align: center;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition-fast),
        opacity var(--transition);
}

.auth-form-actions .auth-btn--primary,
.auth-form-actions .auth-btn--secondary {
    width: 100%;
    min-height: 2.65rem;
    padding: 0.62rem 1rem;
}

.auth-btn--primary {
    color: #fff;
}

.auth-btn--aurora {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(
        102deg,
        #0ea5e9 0%,
        #3b82f6 22%,
        #8b5cf6 48%,
        #10b981 74%,
        #0ea5e9 100%
    );
    background-size: 220% 100%;
    animation: headerBorderShimmer 8s linear infinite;
    box-shadow:
        0 4px 16px rgba(59, 130, 246, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.auth-btn--aurora:hover {
    box-shadow:
        0 8px 24px rgba(99, 102, 241, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.auth-btn--success {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%);
    box-shadow:
        0 4px 14px rgba(16, 185, 129, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.auth-btn--success:hover {
    box-shadow:
        0 8px 22px rgba(16, 185, 129, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.auth-btn--secondary {
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.28);
}

.auth-btn--secondary:hover {
    color: #4338ca;
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.48);
    box-shadow: 0 4px 14px -10px rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
}

.auth-btn--link {
    padding: 0.15rem 0.35rem;
    background: transparent;
    color: #6366f1;
    font-weight: 700;
    border-radius: var(--radius-sm);
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-decoration-color: rgba(99, 102, 241, 0.45);
}

.auth-btn--link:hover {
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.08);
    text-decoration-color: rgba(79, 70, 229, 0.75);
}

.auth-btn--primary:active,
.auth-btn--secondary:active,
.auth-btn--link:active {
    transform: translateY(0) scale(0.98);
}

.auth-btn--loading {
    opacity: 0.82;
    cursor: wait;
    pointer-events: none;
}

.auth-btn:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.45);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .header-user-menu {
        animation: none;
    }

    .header-auth-btn--login::before,
    .auth-btn--aurora {
        animation: none;
    }

    .header-auth-btn:hover,
    .header-auth-btn:focus-visible,
    .auth-btn:hover {
        transform: none;
    }
}

.upgrade-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: block;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.upgrade-modal-backdrop.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.upgrade-modal {
    position: fixed;
    z-index: 1201;
    left: 50%;
    top: 50%;
    display: block;
    width: min(92vw, 28rem);
    max-height: 90vh;
    overflow: auto;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px -24px rgba(15, 23, 42, 0.35);
    padding: 1.35rem 1.4rem 1.5rem;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition:
        opacity 0.28s ease,
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.28s ease;
}

.upgrade-modal.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, calc(-50% + 10px)) scale(0.97);
    pointer-events: none;
}

.upgrade-modal-panel:not(.hidden) {
    animation: upgradePanelIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.upgrade-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.upgrade-modal-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.upgrade-modal-close {
    border: none;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius-md);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.upgrade-modal-close:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--text-primary);
}

.upgrade-modal-close:active {
    transform: scale(0.94);
}

.upgrade-modal-message {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.auth-form {
    display: block;
}

.auth-autofill-trap {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.upgrade-form label {
    display: block;
    margin: 0.65rem 0 0.2rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.upgrade-form input,
.upgrade-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--bg-surface, #fff);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.upgrade-form input::placeholder {
    color: var(--text-muted);
    opacity: 0.72;
}

.upgrade-form input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.auth-password-field {
    position: relative;
}

.auth-password-field .auth-password-input {
    padding-right: 2.65rem;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.auth-password-toggle:hover {
    background: rgba(99, 102, 241, 0.08);
    color: var(--text-primary);
}

.auth-password-icon {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.auth-password-input:-webkit-autofill,
.auth-password-input:-webkit-autofill:hover,
.auth-password-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    box-shadow: 0 0 0 1000px var(--bg-surface, #fff) inset;
    transition: background-color 9999s ease-out 0s;
}

.upgrade-form-status {
    margin: 0.65rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.auth-form-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    line-height: 1.45;
    border: 1px solid transparent;
}

.auth-form-alert.hidden {
    display: none !important;
}

.auth-form-alert--error {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.auth-form-alert--success {
    color: #065f46;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

[data-theme="dark"] .auth-form-alert--error {
    color: #fecaca;
    background: rgba(127, 29, 29, 0.35);
    border-color: rgba(248, 113, 113, 0.35);
}

[data-theme="dark"] .auth-form-alert--success {
    color: #a7f3d0;
    background: rgba(6, 78, 59, 0.35);
    border-color: rgba(52, 211, 153, 0.35);
}

.upgrade-form--invalid input:invalid,
.upgrade-form--invalid input[type="email"],
.upgrade-form--invalid input[type="password"] {
    border-color: #f87171;
}

.upgrade-form--shake {
    animation: authFormShake 0.45s ease;
}

@keyframes authFormShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

html.upgrade-modal-open,
body.upgrade-modal-open {
    overflow: hidden;
}

/* MNIST sample count modal */
.mnist-count-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1210;
    display: block;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.mnist-count-modal-backdrop.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mnist-count-modal {
    position: fixed;
    z-index: 1211;
    left: 50%;
    top: 50%;
    display: block;
    width: min(92vw, 26rem);
    max-height: 90vh;
    overflow: auto;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px -24px rgba(15, 23, 42, 0.35);
    padding: 1.35rem 1.4rem 1.45rem;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition:
        opacity 0.28s ease,
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.28s ease;
}

.mnist-count-modal.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, calc(-50% + 10px)) scale(0.97);
    pointer-events: none;
}

.mnist-count-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.mnist-count-modal-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--text-primary);
}

.mnist-count-modal-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.mnist-count-modal-close:hover {
    background: var(--bg-muted, rgba(15, 23, 42, 0.06));
    color: var(--text-primary);
}

.mnist-count-modal-close:active {
    transform: scale(0.96);
}

.mnist-count-modal-desc {
    margin: 0 0 1.1rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.mnist-count-controls {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

.mnist-count-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.mnist-count-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.mnist-count-input {
    width: 7.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-surface, #fff);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.mnist-count-input:focus {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 1px;
}

.mnist-count-total-hint {
    font-size: 0.82rem;
    color: var(--text-muted, var(--text-secondary));
    font-variant-numeric: tabular-nums;
}

.mnist-count-slider {
    width: 100%;
    accent-color: var(--accent, #2563eb);
    cursor: pointer;
}

.mnist-count-modal-status {
    min-height: 1.25rem;
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.mnist-count-scale-warn {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #9f1239;
    background: #fff1f2;
    border: 1px solid #fb7185;
    border-radius: var(--radius-md, 8px);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mnist-count-scale-warn.hidden {
    display: none;
}

.mnist-count-confirm-box {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.4;
    font-weight: 600;
    color: #9a3412;
    background: #fff7ed;
    border: 1px solid #fb923c;
    border-radius: var(--radius-md, 8px);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mnist-count-confirm-box.hidden {
    display: none;
}

.mnist-count-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.mnist-count-actions .auth-btn--link {
    margin-left: auto;
}

html.mnist-count-modal-open,
body.mnist-count-modal-open {
    overflow: hidden;
    overflow-x: hidden;
    max-width: 100%;
}

@media (max-width: 640px) {
    .mnist-count-modal {
        width: calc(100vw - 1.25rem);
        max-width: calc(100vw - 1.25rem);
        max-height: min(92dvh, 100%);
        left: 50%;
        top: max(0.75rem, env(safe-area-inset-top, 0px));
        transform: translate(-50%, 0) scale(1);
        padding: 1rem 1rem 1.1rem;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }

    .mnist-count-modal.hidden {
        transform: translate(-50%, 8px) scale(0.97);
    }

    .mnist-count-modal-title {
        font-size: 1.05rem;
    }

    .mnist-count-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mnist-count-actions .auth-btn,
    .mnist-count-actions .auth-btn--link {
        width: 100%;
        margin-left: 0;
        justify-content: center;
        text-align: center;
    }

    .mnist-count-row {
        flex-wrap: wrap;
    }

    .mnist-count-input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}