/* ===========================================
   DESIGN SYSTEM - Fomitiporia TreeApp
   Direction: Data & Analysis + Utility
   Foundation: Cool neutrals (slate/blue-gray)
   =========================================== */

:root {
    /* -------- Color Foundation -------- */
    /* Cool neutral palette (slate) */
    --color-bg-base: #f8fafc;
    --color-bg-subtle: #f1f5f9;
    --color-bg-muted: #e2e8f0;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    
    /* Text hierarchy (4 levels) */
    --color-text-primary: #0f172a;
    --color-text-secondary: #334155;
    --color-text-muted: #64748b;
    --color-text-faint: #94a3b8;
    
    /* Borders */
    --color-border: rgba(15, 23, 42, 0.08);
    --color-border-subtle: rgba(15, 23, 42, 0.05);
    --color-border-emphasis: rgba(15, 23, 42, 0.12);
    
    /* Accent - Blue for trust/science */
    --color-accent: #2563eb;
    --color-accent-hover: #1d4ed8;
    --color-accent-subtle: #eff6ff;
    --color-accent-muted: #dbeafe;
    
    /* Semantic colors */
    --color-success: #16a34a;
    --color-success-subtle: #f0fdf4;
    --color-warning: #ca8a04;
    --color-warning-subtle: #fefce8;
    --color-error: #dc2626;
    --color-error-subtle: #fef2f2;
    --color-info: #0284c7;
    --color-info-subtle: #f0f9ff;
    
    /* -------- Spacing (4px grid) -------- */
    --space-1: 4px;   /* micro */
    --space-2: 8px;   /* tight */
    --space-3: 12px;  /* standard */
    --space-4: 16px;  /* comfortable */
    --space-5: 20px;
    --space-6: 24px;  /* generous */
    --space-8: 32px;  /* major */
    --space-10: 40px;
    --space-12: 48px;
    
    /* -------- Typography -------- */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    
    /* Font sizes */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 24px;
    --text-2xl: 32px;
    
    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    
    /* Line heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    
    /* Letter spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    
    /* -------- Border Radius (sharp system) -------- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    
    /* -------- Shadows (subtle single shadow) -------- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 4px 16px rgba(15, 23, 42, 0.1);
    
    /* -------- Transitions -------- */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 250ms;
    --easing: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ========================================
   DARK MODE
   ======================================== */
[data-theme="dark"] {
    /* Color Foundation - Dark palette */
    --color-bg-base: #0f172a;
    --color-bg-subtle: #1e293b;
    --color-bg-muted: #334155;
    --color-surface: #1e293b;
    --color-surface-raised: #334155;
    
    /* Text hierarchy - inverted */
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-faint: #64748b;
    
    /* Borders - light on dark */
    --color-border: rgba(248, 250, 252, 0.1);
    --color-border-subtle: rgba(248, 250, 252, 0.06);
    --color-border-emphasis: rgba(248, 250, 252, 0.15);
    
    /* Accent - slightly brighter blue for dark */
    --color-accent: #3b82f6;
    --color-accent-hover: #60a5fa;
    --color-accent-subtle: rgba(59, 130, 246, 0.15);
    --color-accent-muted: rgba(59, 130, 246, 0.25);
    
    /* Semantic colors - adjusted for dark */
    --color-success: #22c55e;
    --color-success-subtle: rgba(34, 197, 94, 0.15);
    --color-warning: #eab308;
    --color-warning-subtle: rgba(234, 179, 8, 0.15);
    --color-error: #ef4444;
    --color-error-subtle: rgba(239, 68, 68, 0.15);
    --color-info: #0ea5e9;
    --color-info-subtle: rgba(14, 165, 233, 0.15);
    
    /* Shadows - darker for dark mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Prefer dark color scheme from OS */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Color Foundation - Dark palette */
        --color-bg-base: #0f172a;
        --color-bg-subtle: #1e293b;
        --color-bg-muted: #334155;
        --color-surface: #1e293b;
        --color-surface-raised: #334155;
        
        /* Text hierarchy - inverted */
        --color-text-primary: #f1f5f9;
        --color-text-secondary: #cbd5e1;
        --color-text-muted: #94a3b8;
        --color-text-faint: #64748b;
        
        /* Borders - light on dark */
        --color-border: rgba(248, 250, 252, 0.1);
        --color-border-subtle: rgba(248, 250, 252, 0.06);
        --color-border-emphasis: rgba(248, 250, 252, 0.15);
        
        /* Accent */
        --color-accent: #3b82f6;
        --color-accent-hover: #60a5fa;
        --color-accent-subtle: rgba(59, 130, 246, 0.15);
        --color-accent-muted: rgba(59, 130, 246, 0.25);
        
        /* Semantic colors */
        --color-success: #22c55e;
        --color-success-subtle: rgba(34, 197, 94, 0.15);
        --color-warning: #eab308;
        --color-warning-subtle: rgba(234, 179, 8, 0.15);
        --color-error: #ef4444;
        --color-error-subtle: rgba(239, 68, 68, 0.15);
        --color-info: #0ea5e9;
        --color-info-subtle: rgba(14, 165, 233, 0.15);
        
        /* Shadows */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
    }
}

/* ========================================
   DARK MODE COMPONENT OVERRIDES
   ======================================== */

/* Inputs in dark mode need better contrast */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--color-surface);
    color: var(--color-text-primary);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-faint);
}

/* Code blocks in dark mode */
[data-theme="dark"] code,
[data-theme="dark"] .code-block {
    background: var(--color-bg-muted);
}

/* Cards slightly elevated in dark mode */
[data-theme="dark"] .card {
    box-shadow: var(--shadow-sm);
}

/* Workflow cards hover state */
[data-theme="dark"] .workflow-card:hover {
    border-color: var(--color-accent);
}

/* Upload area in dark mode */
[data-theme="dark"] .upload-area {
    background: var(--color-surface);
}

/* Tree viewer background */
[data-theme="dark"] .tree-viewer {
    background: var(--color-surface);
}

/* Smooth theme transitions */
body,
.sidebar,
.card,
.btn,
input,
select,
textarea,
.upload-area,
.workflow-card {
    transition: background-color var(--duration-normal) var(--easing),
                border-color var(--duration-normal) var(--easing),
                color var(--duration-normal) var(--easing);
}

/* -------- Reset -------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* -------- Base Body -------- */
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-base);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   TYPOGRAPHY UTILITIES
   ======================================== */

/* Monospace - for data, codes, IDs */
.font-mono {
    font-family: var(--font-mono);
}

/* Tabular nums - for aligned numbers */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Text sizes */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }

/* Text weights */
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }

/* Text colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }

/* Letter spacing */
.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }

/* -------- Data Display Components -------- */

/* Inline code */
code, .code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-bg-subtle);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
}

/* Code block */
pre, .code-block {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow-x: auto;
    line-height: var(--leading-relaxed);
}

/* Data value - numbers, IDs, timestamps */
.data-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

/* ID badge */
.data-id {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--color-bg-muted);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
}

/* Timestamp */
.timestamp {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

/* Number with unit */
.number-unit {
    font-variant-numeric: tabular-nums;
}

.number-unit .number {
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.number-unit .unit {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-left: 2px;
}

/* Sequence display (FASTA, etc) */
.sequence-display {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    letter-spacing: 0.05em;
    word-break: break-all;
    background: var(--color-bg-subtle);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

/* Filename */
.filename {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Stat/metric display */
.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.stat-value {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
}

.stat-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* -------- Headlines -------- */
h1, .h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

h2, .h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

h3, .h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

h4, .h4 {
    font-size: var(--text-md);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
}

h5, .h5 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

h6, .h6 {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

/* -------- Body Text -------- */
p {
    line-height: var(--leading-relaxed);
}

.lead {
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

small, .small {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* -------- Labels -------- */
.label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

/* ========================================
   APP LAYOUT - Sidebar + Main
   ======================================== */
.app-layout {
    display: flex;
    min-height: 100vh;
}

/* -------- Sidebar -------- */
.sidebar {
    width: 240px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
}

.sidebar-header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: inherit;
}

.sidebar-logo:hover {
    text-decoration: none;
}

.logo-icon {
    font-size: 24px;
    color: var(--color-accent);
}

.logo-text {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    padding: var(--space-3) 0;
    overflow-y: auto;
}

.nav-section {
    padding: var(--space-2) var(--space-3);
}

.nav-section-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-1);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: all var(--duration-fast) var(--easing);
}

.nav-item .ph {
    font-size: 18px;
    color: currentColor;
}

.nav-item:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
}

.nav-item.active {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
}

.nav-item.active .ph {
    color: var(--color-accent);
}

/* Sidebar Footer / User Info */
.sidebar-footer {
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Theme Toggle Button */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing);
}

.theme-toggle:hover {
    background: var(--color-bg-muted);
    color: var(--color-text-primary);
    border-color: var(--color-border-emphasis);
}

.theme-toggle .ph {
    font-size: 18px;
}

.theme-icon-light,
.theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-icon-light {
    display: block;
    color: var(--color-warning);
}

[data-theme="light"] .theme-icon-dark,
:root:not([data-theme]) .theme-icon-dark {
    display: block;
}

.theme-label {
    flex: 1;
    text-align: left;
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-md);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar .ph {
    font-size: 16px;
    color: var(--color-text-muted);
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
}

.user-role {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* -------- Main Wrapper -------- */
.main-wrapper {
    flex: 1;
    margin-left: 240px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* -------- Top Header -------- */
.top-header {
    position: sticky;
    top: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    z-index: 50;
}

.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
}

.sidebar-toggle:hover {
    background: var(--color-bg-subtle);
}

.sidebar-toggle svg {
    width: 20px;
    height: 20px;
}

.header-content {
    flex: 1;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

.breadcrumb-item {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.breadcrumb-item.current {
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.breadcrumb-separator {
    font-size: 14px;
    color: var(--color-text-faint);
}

.header-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* -------- Main Content -------- */
.main-content {
    flex: 1;
    padding: var(--space-4) var(--space-6) var(--space-6);
    max-width: 1000px;
}

/* -------- Main Footer -------- */
.main-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.main-footer em {
    font-style: italic;
}

.footer-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-6);
    align-items: start;
}

.footer-copy p {
    margin: 0;
}

.footer-feedback h4 {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.footer-feedback h4 .ph {
    font-size: 14px;
    margin-left: var(--space-1);
    color: var(--color-text-muted);
}

.feedback-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.feedback-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.feedback-row input {
    flex: 1;
    min-width: 160px;
}

.feedback-form input,
.feedback-form textarea {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.feedback-form textarea {
    resize: vertical;
    min-height: 90px;
}

.feedback-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.feedback-status {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.feedback-status.success {
    color: var(--color-success);
}

.feedback-status.error {
    color: var(--color-error);
}

@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
}

.job-name-display {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* ========================================
   ERROR SECTION
   ======================================== */
.card-error {
    border-color: var(--color-error);
    border-left-width: 3px;
}

.error-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.error-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-error-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.error-icon .ph {
    font-size: 24px;
    color: var(--color-error);
}

.error-header h2 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-error);
    margin: 0 0 var(--space-1) 0;
}

.error-content {
    margin-bottom: var(--space-6);
}

.error-message {
    padding: var(--space-4);
    background: var(--color-error-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-error);
    line-height: var(--leading-relaxed);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.error-actions {
    display: flex;
    gap: var(--space-3);
}

/* -------- Legacy Container (deprecated) -------- */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-6);
}

/* -------- Header (deprecated, use top-header) -------- */
header {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

header h1 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

header p {
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

/* -------- Card (borders-only approach) -------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.card-header {
    margin-bottom: var(--space-4);
}

.card-header h2 {
    margin-bottom: var(--space-1);
}

.card h2 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.section-hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin-bottom: 0;
}

/* ========================================
   WORKFLOW CARDS - Varied Internal Layouts
   ======================================== */
.workflow-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

@media (max-width: 1000px) {
    .workflow-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Base Card - Consistent surface treatment */
.workflow-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.workflow-card:hover {
    border-color: var(--color-accent);
}

.workflow-card.selected {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}

/* Featured card variant */
.workflow-card-featured {
    border-color: var(--color-accent);
    position: relative;
}

.workflow-card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-accent);
}

/* Card Header */
.workflow-card-header {
    padding: var(--space-4) var(--space-4) 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.workflow-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.workflow-icon-wrapper .ph {
    font-size: 20px;
    color: var(--color-accent);
}

.workflow-card:hover .workflow-icon-wrapper {
    background: var(--color-accent-subtle);
}

/* Badges */
.workflow-badge {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.badge-fast {
    background: var(--color-success-subtle);
    color: var(--color-success);
}

.badge-recommended {
    background: var(--color-accent-muted);
    color: var(--color-accent);
}

.badge-complete {
    background: var(--color-warning-subtle);
    color: var(--color-warning);
}

.badge-instant {
    background: var(--color-info-subtle);
    color: var(--color-info);
}

/* Inline badge for forms */
.badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
    vertical-align: middle;
}

.badge-optional {
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}

/* Card Body */
.workflow-card-body {
    padding: var(--space-3) var(--space-4);
    flex: 1;
}

.workflow-card-body h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.workflow-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    margin: 0;
}

/* Highlight box inside card */
.workflow-highlight {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-accent-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--color-accent);
}

.highlight-icon {
    font-size: 14px;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* Card Footer */
.workflow-card-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-bg-subtle);
}

/* Step indicators */
.workflow-steps {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.step-indicator {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.step-indicator.step-active {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.step-indicator.step-skip {
    text-decoration: line-through;
    color: var(--color-text-faint);
    opacity: 0.7;
}

.step-arrow {
    color: var(--color-text-faint);
    font-size: var(--text-xs);
}

/* Meta items in footer */
.workflow-meta {
    display: flex;
    gap: var(--space-3);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.meta-item .ph {
    font-size: 12px;
    color: currentColor;
}

/* Legacy workflow styles (deprecated) */
.workflow-icon {
    margin-bottom: var(--space-3);
    text-align: center;
}

.workflow-icon .ph {
    font-size: 32px;
    color: var(--color-accent);
    transition: all var(--duration-fast) var(--easing);
}

.workflow-card:hover .workflow-icon .ph {
    color: var(--color-accent-hover);
}

/* -------- Phosphor Icons Base -------- */
.ph {
    font-size: 1.25em;
    line-height: 1;
    vertical-align: -0.125em;
}

/* -------- Icon Sizes -------- */
.header-icon {
    font-size: 28px;
    color: var(--color-accent);
}

.section-icon {
    font-size: 20px;
    color: var(--color-accent);
}

.inline-icon {
    font-size: 16px;
    vertical-align: middle;
    margin-right: var(--space-1);
    color: currentColor;
}

.btn-icon {
    font-size: 16px;
    vertical-align: middle;
    margin-right: var(--space-2);
    color: currentColor;
}

.spin {
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

.btn-icon.spin {
    font-size: 18px;
}

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

/* Upload icon */
.upload-icon .ph {
    font-size: 32px;
    color: var(--color-text-muted);
}

/* Control icons */
.btn-control .ph,
.btn-action .ph {
    font-size: 14px;
    vertical-align: middle;
    margin-right: var(--space-1);
    color: currentColor;
}

/* Legacy workflow typography (deprecated - kept for compatibility) */
.workflow-features {
    list-style: none;
    padding: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.workflow-features li {
    margin: var(--space-1) 0;
    padding-left: var(--space-1);
}

/* ========================================
   MODE SECTIONS - Analysis Forms
   ======================================== */

/* Mode Header */
.mode-header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.mode-title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.mode-icon-badge {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-accent-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mode-icon-badge .ph {
    font-size: 24px;
    color: var(--color-accent);
}

.mode-title h2 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.mode-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* Step Number */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    color: white;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    margin-right: var(--space-2);
}

/* File Info Box */
.file-info-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-success-subtle);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-success);
}

.file-info-box .ph {
    font-size: 18px;
    color: var(--color-success);
    flex-shrink: 0;
}

/* -------- Form Sections -------- */
.form-section {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.form-section:last-of-type {
    border-bottom: none;
    margin-bottom: var(--space-4);
}

.form-section h3 {
    display: flex;
    align-items: center;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.form-section h4 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

/* -------- Back Button -------- */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: all var(--duration-fast) var(--easing);
}

.btn-back .ph {
    font-size: 16px;
    color: currentColor;
}

.btn-back:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-emphasis);
    color: var(--color-text-primary);
}

/* -------- Info Box -------- */
.info-box {
    background: var(--color-info-subtle);
    border-left: 3px solid var(--color-info);
    padding: var(--space-4);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* ========================================
   UPLOAD AREAS - Isolated Controls
   ======================================== */
.upload-area-small {
    padding: var(--space-4);
}

.upload-area-small .upload-icon {
    margin-bottom: var(--space-1);
}

.upload-area {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing);
    background: var(--color-bg-subtle);
    position: relative;
}

.upload-area:hover {
    background: var(--color-surface);
    border-color: var(--color-accent);
}

.upload-area.drag-over {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
    border-style: solid;
}

.upload-area.has-file {
    border-style: solid;
    border-color: var(--color-success);
    background: var(--color-success-subtle);
}

.upload-icon {
    margin-bottom: var(--space-3);
    display: flex;
    justify-content: center;
}

.upload-icon .ph {
    font-size: 40px;
    color: var(--color-text-muted);
    transition: all var(--duration-fast) var(--easing);
}

.upload-area:hover .upload-icon .ph {
    color: var(--color-accent);
}

.upload-area.drag-over .upload-icon .ph {
    color: var(--color-accent);
    transform: scale(1.1);
}

.upload-label {
    cursor: pointer;
}

.upload-label p {
    margin: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.upload-label p:first-of-type {
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
}

.upload-hint {
    color: var(--color-text-faint);
    font-size: var(--text-xs);
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.upload-hint code {
    font-family: var(--font-mono);
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}

/* File info display */
#file-info,
.file-info {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

#file-info p,
.file-info p {
    margin: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* ========================================
   FORM COMPONENTS - Isolated Controls
   ======================================== */

.form-group {
    margin-bottom: var(--space-5);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 560px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Labels */
.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
}

/* Base input styles */
.form-group select,
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    background: var(--color-surface);
    color: var(--color-text-primary);
    transition: all var(--duration-fast) var(--easing);
    -webkit-appearance: none;
    appearance: none;
}

.form-group select:hover,
.form-group input:hover,
.form-group textarea:hover {
    border-color: var(--color-border-emphasis);
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

/* Select with custom arrow */
.form-group select {
    padding-right: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px;
    cursor: pointer;
}

/* Number input - hide spinners */
.form-group input[type="number"] {
    -moz-appearance: textfield;
}

.form-group input[type="number"]::-webkit-outer-spin-button,
.form-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Help text */
.form-group small {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
}

/* Input with icon */
.input-with-icon {
    position: relative;
}

.input-with-icon input {
    padding-left: var(--space-10);
}

.input-with-icon .input-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* -------- Custom Checkbox -------- */
.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-border-emphasis);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-fast) var(--easing);
}

.checkbox-wrapper:hover .checkbox-custom {
    border-color: var(--color-accent);
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.checkbox-custom svg {
    width: 12px;
    height: 12px;
    stroke: white;
    stroke-width: 3;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--easing);
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-custom svg {
    opacity: 1;
}

.checkbox-label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}

/* Legacy checkbox group (deprecated) */
.checkbox-group {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.checkbox-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-accent);
}

/* -------- Textarea -------- */
.form-group textarea {
    min-height: 120px;
    resize: vertical;
    line-height: var(--leading-relaxed);
}

/* Monospace textarea for code/sequences */
.textarea-mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

hr {
    margin: var(--space-6) 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

/* -------- Mode Selector -------- */
.mode-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.mode-option {
    cursor: pointer;
}

.mode-option input[type="radio"] {
    display: none;
}

.mode-card {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--duration-fast) var(--easing);
    background: var(--color-surface);
}

.mode-card h3 {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}

.mode-card p {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.mode-option input[type="radio"]:checked + .mode-card {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}

.mode-option:hover .mode-card {
    border-color: var(--color-border-emphasis);
    background: var(--color-bg-subtle);
}

.upload-group {
    margin-bottom: var(--space-6);
}

.upload-group h3 {
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

/* -------- Alignment Container -------- */
.alignment-container {
    position: relative;
}

#alignment-default {
    padding: var(--space-4);
    background: var(--color-accent-subtle);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    text-align: center;
    margin-bottom: var(--space-3);
}

/* -------- Sequences Input -------- */
.sequences-input-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-6);
    align-items: start;
}

.input-method {
    display: flex;
    flex-direction: column;
}

.input-method h3 {
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.format-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
    background: var(--color-bg-subtle);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border-left: 2px solid var(--color-border-emphasis);
}

#sequences-text,
#user-sequences-text-mode3,
#user-sequences-text {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border-emphasis);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    resize: vertical;
    background: var(--color-surface);
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast) var(--easing);
}

#sequences-text:focus,
#user-sequences-text:focus {
    outline: none;
    border-color: var(--color-accent);
}

.divider {
    display: flex;
    align-items: center;
    color: var(--color-text-faint);
    font-weight: var(--font-medium);
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.divider::before {
    margin-right: var(--space-2);
}

.divider::after {
    margin-left: var(--space-2);
}

#sequences-file-info {
    padding: var(--space-3);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
}

#sequences-file-info p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* ========================================
   BUTTONS - Refined with Variants
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing);
    white-space: nowrap;
}

.btn .ph {
    font-size: 16px;
    color: currentColor;
    flex-shrink: 0;
}

/* Primary - solid accent */
.btn-primary {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

.btn-primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.btn-primary:active {
    transform: scale(0.98);
}

/* Success - solid green */
.btn-success {
    background: var(--color-success);
    color: white;
    border-color: var(--color-success);
}

.btn-success:hover {
    opacity: 0.9;
}

/* Secondary - subtle background */
.btn-secondary {
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-bg-muted);
    border-color: var(--color-border-emphasis);
}

/* Ghost - no background */
.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
}

/* Outline - bordered */
.btn-outline {
    background: var(--color-surface);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-outline:hover {
    background: var(--color-accent-subtle);
}

/* Danger - red */
.btn-danger {
    background: var(--color-error);
    color: white;
    border-color: var(--color-error);
}

.btn-danger:hover {
    opacity: 0.9;
}

/* Sizes */
.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}

.btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
}

/* Disabled state */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading state */
.btn-loading {
    position: relative;
    color: transparent;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Button group */
.btn-group {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ========================================
   PROGRESS SECTION
   ======================================== */

/* Pipeline Steps Visual */
.pipeline-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: var(--space-6) var(--space-4);
    margin-bottom: var(--space-6);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
}

.pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    opacity: 0.4;
    transition: all var(--duration-normal) var(--easing);
}

.pipeline-step.active {
    opacity: 1;
}

.pipeline-step.completed {
    opacity: 1;
}

.pipeline-step.completed .pipeline-step-icon {
    background: var(--color-success);
    color: white;
}

.pipeline-step.active .pipeline-step-icon {
    background: var(--color-accent);
    color: white;
    animation: pulse 1.5s ease-in-out infinite;
}

.pipeline-step-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) var(--easing);
}

.pipeline-step-icon .ph {
    font-size: 18px;
    color: var(--color-text-muted);
}

.pipeline-step.completed .pipeline-step-icon .ph,
.pipeline-step.active .pipeline-step-icon .ph {
    color: white;
}

.pipeline-step-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    text-align: center;
}

.pipeline-step.active .pipeline-step-label,
.pipeline-step.completed .pipeline-step-label {
    color: var(--color-text-primary);
}

.pipeline-connector {
    width: 40px;
    height: 2px;
    background: var(--color-border);
    margin: 0 var(--space-1);
    margin-bottom: var(--space-6);
    transition: background var(--duration-normal) var(--easing);
}

.pipeline-connector.completed {
    background: var(--color-success);
}

/* Progress Container */
.progress-container {
    text-align: center;
    padding: var(--space-4) 0;
}

.job-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-queued,
.status-uploaded {
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
}

.status-running {
    background: var(--color-info-subtle);
    color: var(--color-info);
}

.status-completed {
    background: var(--color-success-subtle);
    color: var(--color-success);
}

.status-failed,
.status-expired {
    background: var(--color-error-subtle);
    color: var(--color-error);
}

.queue-text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--color-bg-muted);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), #60a5fa);
    width: 0%;
    transition: width 0.4s var(--easing);
    border-radius: var(--radius-full);
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.progress-status {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.progress-percent {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-accent);
}

.progress-detail {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    min-height: 1.5em;
    margin: 0;
}

.progress-tip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: var(--color-warning-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-warning);
}

.progress-tip .ph {
    font-size: 18px;
    flex-shrink: 0;
}

.job-link-box {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.job-link-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    font-weight: var(--font-semibold);
}

.job-link-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.job-link-row input {
    flex: 1;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text-primary);
}

/* Step number variants */
.step-number.step-success {
    background: var(--color-success);
    color: white;
}

.step-number.step-success .ph {
    font-size: 14px;
}

.step-number.step-processing {
    background: var(--color-accent);
    color: white;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ========================================
   RESULTS SECTION
   ======================================== */

/* Download Grid */
.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(295px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.download-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--duration-fast) var(--easing);

    /* Adicione estas linhas para evitar sobreposição */
    flex-wrap: wrap;
    justify-content: space-between;
}

.download-card:hover {
    border-color: var(--color-success);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.1);
}

.download-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-success-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.download-card-icon .ph {
    font-size: 24px;
    color: var(--color-success);
}

.download-card-info {
    flex: 1;
    min-width: 0;
}

/* Garante que o botão ocupe a largura total se quebrar a linha */
@media (max-width: 480px) {
    .download-card .btn {
        width: 100%;
        justify-content: center;
    }
}

.download-card-info h4 {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
}

.download-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.file-ext {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-success);
    background: var(--color-success-subtle);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.file-format {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.results-divider {
    display: flex;
    justify-content: center;
    padding: var(--space-4) 0;
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

/* Visualization Section */
.visualization-section {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.visualization-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.visualization-header h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.visualization-controls {
    display: flex;
    gap: var(--space-1);
}

.btn-icon-only {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing);
}

.btn-icon-only:hover {
    background: var(--color-bg-muted);
    border-color: var(--color-border-emphasis);
    color: var(--color-text-primary);
}

.btn-icon-only .ph {
    font-size: 16px;
}

/* Tree Viewer */
.tree-viewer {
    width: 100%;
    min-height: 400px;
    max-height: 70vh;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: auto;
    position: relative;
}

.tree-viewer svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.tree-viewer-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-muted);
}

.tree-viewer-loading .ph {
    font-size: 32px;
    color: var(--color-accent);
}

/* -------- SVG Dimension Controls -------- */
.svg-dimension-controls {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
}

.svg-dimension-controls .dimension-inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
}

.svg-dimension-controls .dimension-group {
    min-width: 140px;
    flex: 0 0 auto;
}

.svg-dimension-controls #rerender-svg {
    align-self: flex-end;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

@media (max-width: 1000px) {
    .svg-dimension-controls .dimension-inputs {
        flex-direction: column;
        gap: var(--space-2);
    }
    .svg-dimension-controls #rerender-svg {
        width: 100%;
    }
}