/* ==========================================================
   VERA-VM Frontend CSS v2.2
   Enfold/Avia Theme Isolation
   ========================================================== */

/* ── Basis-Reset für alle VERA-Elemente ─────────────────── */
.vera-module,
.vera-module *,
.vera-nav,
.vera-nav * {
    box-sizing: border-box !important;
}

.vera-module {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #1a1a1a !important;
    width: 100% !important;
    max-width: 860px !important;
    margin: 0 auto 48px !important;
    /* Enfold-Isolation */
    background: transparent !important;
}

/* ── Modul-Header ────────────────────────────────────────── */
.vera-module-header {
    margin-bottom: 28px !important;
    padding-bottom: 20px !important;
    border-bottom: 3px solid #1B2A6B !important;
}

.vera-module-header h2,
.vera-module-header h2 * {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1B2A6B !important;
    margin: 8px 0 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    /* Enfold Override */
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.vera-module-badge {
    background: #1B2A6B !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    letter-spacing: 1px !important;
    display: inline-block !important;
    line-height: 1.4 !important;
}

.vera-module-desc {
    color: #555 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.vera-context-hint {
    margin-top: 10px !important;
    font-size: 13px !important;
    color: #444 !important;
    background: #f0f4ff !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    border-left: 3px solid #1B2A6B !important;
}

/* ── Tags ────────────────────────────────────────────────── */
.vera-tag {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    margin: 0 2px !important;
    line-height: 1.4 !important;
}
.vera-tag--ok     { background: #e8f5e9 !important; color: #2E7D32 !important; }
.vera-tag--warn   { background: #fff3e0 !important; color: #e65100 !important; }
.vera-tag--a1     { background: #e3f2fd !important; color: #1565C0 !important; }
.vera-tag--a2     { background: #e8eaf6 !important; color: #3949ab !important; }
.vera-tag--a4     { background: #fce4ec !important; color: #880e4f !important; }
.vera-tag--theory { background: #f3e5f5 !important; color: #6a1b9a !important; }
.vera-tag--modus  { background: #fffde7 !important; color: #f57f17 !important; }
.vera-tag--claude { background: #1B2A6B !important; color: #fff !important; }

/* ── Warnungen ───────────────────────────────────────────── */
.vera-warning {
    background: #fff3e0 !important;
    border-left: 4px solid #ff9800 !important;
    padding: 10px 14px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    color: #e65100 !important;
}

/* ── NAVIGATION ──────────────────────────────────────────── */
.vera-nav {
    background: #1B2A6B !important;
    border-radius: 8px !important;
    padding: 0 8px !important;
    margin-bottom: 28px !important;
    overflow-x: auto !important;
    width: 100% !important;
    display: block !important;
}

.vera-nav-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    min-width: max-content !important;
}

.vera-nav-step,
.vera-nav-step:link,
.vera-nav-step:visited {
    display: inline-block !important;
    padding: 12px 16px !important;
    color: rgba(255,255,255,0.8) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-bottom: 3px solid transparent !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    /* Enfold Override */
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.vera-nav-step:hover,
.vera-nav-step:focus {
    color: #fff !important;
    border-bottom-color: rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.08) !important;
    text-decoration: none !important;
}

.vera-nav--active,
.vera-nav--active:link,
.vera-nav--active:visited {
    color: #fff !important;
    border-bottom-color: #fff !important;
    background: rgba(255,255,255,0.12) !important;
    text-decoration: none !important;
}

/* ── DUAL-MODE TOGGLE ────────────────────────────────────── */
.vera-mode-toggle { margin: 24px 0 !important; }

.vera-mode-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #666 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.vera-mode-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

@media (max-width: 600px) {
    .vera-mode-options { grid-template-columns: 1fr !important; }
}

.vera-mode-option {
    display: block !important;
    border: 2px solid #ddd !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    background: #fafafa !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: normal !important;
    color: #333 !important;
}

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

.vera-mode-option:hover {
    border-color: #1565C0 !important;
    background: #f0f6ff !important;
}

.vera-mode-option.active {
    border-color: #1B2A6B !important;
    background: #eef2ff !important;
}

.vera-mode-icon { font-size: 20px !important; display: block !important; margin-bottom: 4px !important; }
.vera-mode-title { display: block !important; font-weight: 700 !important; font-size: 14px !important; color: #1B2A6B !important; margin-bottom: 4px !important; }
.vera-mode-desc  { display: block !important; font-size: 12px !important; color: #666 !important; line-height: 1.4 !important; }

.vera-mode-hint { padding: 10px 16px !important; border-radius: 6px !important; font-size: 13px !important; margin-bottom: 20px !important; }
.vera-mode-hint--a { background: #fff8e1 !important; border-left: 4px solid #ffc107 !important; color: #5d4037 !important; }
.vera-mode-hint--b { background: #e3f2fd !important; border-left: 4px solid #1565C0 !important; color: #0d47a1 !important; }

/* ── FORMULAR ────────────────────────────────────────────── */
.vera-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

@media (max-width: 600px) {
    .vera-form-grid { grid-template-columns: 1fr !important; }
}

.vera-field { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.vera-field--full { grid-column: 1 / -1 !important; }

.vera-field label,
.vera-field-group label,
.vera-field label strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    display: block !important;
    margin-bottom: 4px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.vera-required { color: #c62828 !important; }
.vera-badge-optional { font-weight: 400 !important; font-size: 11px !important; color: #888 !important; margin-left: 6px !important; }

.vera-field input[type="text"],
.vera-field input[type="url"],
.vera-field input[type="email"],
.vera-field input[type="password"],
.vera-field select,
.vera-field textarea {
    padding: 9px 12px !important;
    border: 1.5px solid #ccc !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    transition: border-color 0.2s !important;
    background: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #1a1a1a !important;
    /* Enfold Override */
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.vera-field input:focus,
.vera-field select:focus,
.vera-field textarea:focus {
    border-color: #1565C0 !important;
    box-shadow: 0 0 0 3px rgba(21,101,192,0.12) !important;
    outline: none !important;
}

.vera-field small { font-size: 11px !important; color: #888 !important; line-height: 1.4 !important; display: block !important; }

/* ── Checkboxen ──────────────────────────────────────────── */
.vera-field-group { margin: 12px 0 !important; }

.vera-checkbox-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 6px !important;
}

.vera-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: #333 !important;
    cursor: pointer !important;
    padding: 5px 10px !important;
    border: 1.5px solid #ddd !important;
    border-radius: 20px !important;
    transition: all 0.15s !important;
    background: #fafafa !important;
    margin: 0 !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.vera-checkbox-label:hover { border-color: #1565C0 !important; background: #f0f6ff !important; }

.vera-radio-group { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-top: 6px !important; }
.vera-radio-label { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 14px !important; cursor: pointer !important; }

/* ── Buttons ─────────────────────────────────────────────── */
.vera-form-actions { margin-top: 24px !important; }

.vera-btn,
.vera-btn:link,
.vera-btn:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 11px 24px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    /* Enfold Override */
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.vera-btn--primary,
.vera-btn--primary:link,
.vera-btn--primary:visited {
    background: #1B2A6B !important;
    color: #fff !important;
}
.vera-btn--primary:hover { background: #1565C0 !important; color: #fff !important; }
.vera-btn--primary:disabled,
.vera-btn--primary[disabled] { background: #aaa !important; cursor: not-allowed !important; }

.vera-btn--secondary,
.vera-btn--secondary:link { background: #f0f4ff !important; color: #1B2A6B !important; border: 1.5px solid #1B2A6B !important; }
.vera-btn--secondary:hover { background: #dde5ff !important; color: #1B2A6B !important; }

.vera-btn--ghost,
.vera-btn--ghost:link { background: transparent !important; color: #666 !important; border: 1.5px solid #ddd !important; }
.vera-btn--ghost:hover { border-color: #999 !important; color: #333 !important; }

/* ── Weiter-Button ───────────────────────────────────────── */
.vera-btn--next,
.vera-btn--next:link,
.vera-btn--next:visited {
    background: #2E7D32 !important;
    color: #fff !important;
    font-size: 14px !important;
    padding: 11px 22px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: none !important;
    cursor: pointer !important;
    margin-left: auto !important;
}
.vera-btn--next:hover { background: #1b5e20 !important; color: #fff !important; text-decoration: none !important; }

/* ── LOADER ──────────────────────────────────────────────── */
.vera-loader { text-align: center !important; padding: 40px 20px !important; }

.vera-spinner {
    width: 40px !important;
    height: 40px !important;
    border: 4px solid #e0e7ff !important;
    border-top-color: #1B2A6B !important;
    border-radius: 50% !important;
    animation: vera-spin 0.8s linear infinite !important;
    margin: 0 auto 12px !important;
    display: block !important;
}

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

.vera-loader p { color: #666 !important; font-size: 14px !important; font-style: italic !important; }

/* ── ERGEBNIS ────────────────────────────────────────────── */
.vera-result {
    margin-top: 30px !important;
    border: 1.5px solid #e0e7ff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.vera-result-header {
    background: #1B2A6B !important;
    color: #fff !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.vera-result-header h3,
.vera-result-header h3 * {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    /* Enfold Override */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.vera-result-meta { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }

.vera-result-body {
    padding: 24px !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
    max-height: 600px !important;
    overflow-y: auto !important;
    color: #1a1a1a !important;
    background: #fff !important;
}

.vera-result-body h2 { font-size: 18px !important; color: #1B2A6B !important; margin: 20px 0 8px !important; }
.vera-result-body h3 { font-size: 16px !important; color: #1B2A6B !important; margin: 16px 0 6px !important; }
.vera-result-body h4 { font-size: 14px !important; color: #333 !important; margin: 12px 0 5px !important; }
.vera-result-body p  { margin-bottom: 12px !important; color: #1a1a1a !important; }
.vera-result-body strong { color: #1B2A6B !important; }

.vera-result-actions {
    padding: 12px 20px !important;
    background: #f8faff !important;
    border-top: 1px solid #e0e7ff !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* ── Status ──────────────────────────────────────────────── */
.vera-status { margin-top: 12px !important; padding: 10px 14px !important; border-radius: 6px !important; font-size: 14px !important; }
.vera-success { background: #e8f5e9 !important; color: #2E7D32 !important; border-left: 4px solid #2E7D32 !important; }
.vera-error   { background: #ffebee !important; color: #c62828 !important; border-left: 4px solid #c62828 !important; display: block !important; }

/* ── Theorie-Auswahl (A3) ────────────────────────────────── */
.vera-theory-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 8px !important;
}

.vera-theory-card {
    display: block !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    background: #fafafa !important;
    margin: 0 !important;
    font-weight: normal !important;
    font-size: 14px !important;
    color: #333 !important;
    text-transform: none !important;
}
.vera-theory-card input[type=radio] { display: none !important; }
.vera-theory-card:hover  { border-color: #7c3aed !important; background: #faf5ff !important; }
.vera-theory-card.active { border-color: #7c3aed !important; background: #f5f0ff !important; }

.vera-theory-id      { display: block !important; font-size: 11px !important; font-weight: 800 !important; color: #7c3aed !important; letter-spacing: 1px !important; margin-bottom: 2px !important; }
.vera-theory-title   { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: #1a1a1a !important; margin-bottom: 3px !important; line-height: 1.3 !important; }
.vera-theory-authors { display: block !important; font-size: 11px !important; color: #888 !important; margin-bottom: 4px !important; }
.vera-theory-concept { display: block !important; font-size: 11px !important; color: #666 !important; line-height: 1.4 !important; }

/* ── A5 Status-Grid ──────────────────────────────────────── */
.vera-a5-status-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
}
@media (max-width: 700px) {
    .vera-a5-status-grid { grid-template-columns: 1fr 1fr !important; }
}

.vera-a5-step {
    border: 1.5px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px !important;
    text-align: center !important;
    background: #fafafa !important;
}
.vera-a5-step--ok      { border-color: #2E7D32 !important; background: #f1f8e9 !important; }
.vera-a5-step--missing { border-color: #ddd !important; background: #fafafa !important; }

.vera-a5-step-id      { display: block !important; font-size: 16px !important; font-weight: 800 !important; color: #1B2A6B !important; }
.vera-a5-step-label   { display: block !important; font-size: 11px !important; color: #555 !important; margin: 2px 0 !important; }
.vera-a5-step-icon    { display: block !important; font-size: 18px !important; }
.vera-a5-step-preview { display: block !important; font-size: 10px !important; color: #888 !important; margin-top: 4px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* ── A5 Download / Print ─────────────────────────────────── */
.vera-download-box {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: #e8f5e9 !important;
    border: 2px solid #2E7D32 !important;
    border-radius: 10px !important;
    padding: 20px 24px !important;
    margin-top: 20px !important;
}
.vera-download-icon { font-size: 36px !important; }
.vera-download-text strong { display: block !important; font-size: 15px !important; color: #2E7D32 !important; margin-bottom: 8px !important; }

.vera-a5-preview-body {
    max-height: 800px !important;
    overflow-y: auto !important;
    font-size: 13px !important;
    padding: 20px !important;
    color: #1a1a1a !important;
}

/* ── Handover-Anzeige ────────────────────────────────────── */
.vera-handover-preview {
    background: #f0f7f0 !important;
    border: 1.5px solid #2E7D32 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin: 0 0 20px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #333 !important;
}

.vera-handover-badge {
    display: inline-block !important;
    background: #2E7D32 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
}
.vera-handover-badge--warn { background: #f57f17 !important; }

.vera-handover-header { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; }

.vera-handover-toggle {
    margin-left: auto !important;
    background: none !important;
    border: 1px solid #2E7D32 !important;
    color: #2E7D32 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 12px !important;
}

.vera-handover-body {
    width: 100% !important;
    padding-top: 10px !important;
    border-top: 1px solid #c8e6c9 !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    color: #333 !important;
    line-height: 1.6 !important;
}

/* ── API Badge ───────────────────────────────────────────── */
.vera-api-badge { display: inline-block !important; font-size: 12px !important; font-weight: 600 !important; padding: 3px 10px !important; border-radius: 12px !important; }
.vera-api-badge--ok  { background: #e8f5e9 !important; color: #2E7D32 !important; }
.vera-api-badge--err { background: #ffebee !important; color: #c62828 !important; }

/* ── PRINT / PDF ─────────────────────────────────────────── */
@media print {
    .vera-nav,
    .vera-form,
    .vera-form-actions,
    .vera-result-actions,
    .vera-mode-toggle,
    .vera-handover-preview,
    .vera-a5-status-grid,
    #vera-a5-download,
    .vera-loader { display: none !important; }

    .vera-result { border: none !important; max-height: none !important; overflow: visible !important; }
    .vera-result-header { background: #1B2A6B !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .vera-result-body { max-height: none !important; overflow: visible !important; padding: 0 !important; }
    .vera-module { max-width: 100% !important; }

    .vera-print-doc { display: block !important; }
}

.vera-print-doc { display: none !important; }

/* ═══════════════════════════════════════════════════
   VERA-VM v2.2 – NEUE STYLES
   ═══════════════════════════════════════════════════ */

/* ─── Sekundäre Theorieauswahl ─── */
.vera-theory-selector--secondary {
    border-top: 1px dashed var(--vera-border, #ddd);
    padding-top: 20px;
    margin-top: 4px;
}

.vera-field-optional {
    font-weight: normal;
    font-size: 12px;
    color: #888;
    margin-left: 6px;
}

.vera-theory-grid--secondary .vera-theory-card {
    opacity: 0.85;
}

.vera-theory-grid--secondary .vera-theory-card.active {
    opacity: 1;
}

.vera-theory-card--none {
    border-style: dashed !important;
    opacity: 0.6;
}

.vera-theory-card--none.active {
    opacity: 1;
    border-color: #aaa !important;
    background: #f9f9f9 !important;
}

/* ─── Theorie-Badges ─── */
.vera-theory--recommended {
    border-color: #2271b1 !important;
}

.vera-theory--cautious {
    border-color: #dba617 !important;
    opacity: 0.75;
}

.vera-theory-badge-rec {
    display: inline-block;
    font-size: 10px;
    background: #e8f0fe;
    color: #2271b1;
    padding: 1px 5px;
    border-radius: 3px;
    margin-bottom: 3px;
}

.vera-theory-badge-warn {
    display: inline-block;
    font-size: 10px;
    background: #fff3cd;
    color: #856404;
    padding: 1px 5px;
    border-radius: 3px;
}

.vera-theory-hint-inline {
    font-weight: normal;
    font-size: 12px;
    color: #555;
    margin-left: 8px;
}

/* ─── Kompatibilitätshinweis ─── */
.vera-theory-compat {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    border-left: 3px solid #ccc;
}

.vera-compat--ok {
    background: #f0faf0;
    border-left-color: #2e7d32;
    color: #1b5e20;
}

.vera-compat--warn {
    background: #fff8e1;
    border-left-color: #f9a825;
    color: #6d4c00;
}

.vera-compat--neutral {
    background: #f5f5f5;
    border-left-color: #9e9e9e;
    color: #444;
}

/* ─── Genre-Tag in Context-Hint ─── */
.vera-tag--genre {
    background: #f3e5f5;
    color: #6a1b9a;
    border: 1px solid #ce93d8;
}

.vera-tag--recommended {
    background: #e3f2fd;
    color: #0d47a1;
    font-weight: 600;
}

/* ─── A0 Bildsuche Verbesserung ─── */
.vera-bild-search-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.vera-bild-search-row input {
    flex: 1;
}

/* ─── ICONA Vorbereitung ─── */
.vera-icona-stub {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #c9a96e;
    border: 1px solid #c9a96e;
    border-radius: 6px;
    padding: 24px;
    text-align: center;
    margin: 20px 0;
}

.vera-icona-stub h3 {
    color: #c9a96e;
    font-size: 18px;
    margin-bottom: 8px;
}

.vera-icona-stub p {
    color: #aaa;
    font-size: 13px;
}

/* ─── PDF Fixes ─── */
@media print {
    .vera-module-header,
    .vera-nav,
    .vera-form,
    .vera-result-actions,
    .vera-loader,
    .vera-handover-preview {
        display: none !important;
    }

    .vera-result-body {
        display: block !important;
        page-break-inside: avoid;
    }

    /* Keine Leerseiten */
    .vera-module {
        page-break-after: auto;
    }
}

/* ─── Vision Pre-Input (Künstler + Titel vor Scan) ─── */
.vera-vision-preinput {
    padding: 10px 14px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.vera-vision-preinput-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.vera-vision-preinput-row {
    display: flex;
    gap: 10px;
}

.vera-vision-pretext {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    background: #fff;
}

.vera-vision-preinput + .vera-vision-bar {
    border-radius: 0 0 4px 4px;
}

/* ─── Session Reset Buttons ─── */
.vera-session-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.vera-btn--reset-analysis {
    background: transparent;
    border: 1px solid #dba617;
    color: #856404;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.vera-btn--reset-analysis:hover {
    background: #fff3cd;
}

.vera-btn--new-session {
    background: transparent;
    border: 1px solid #2271b1;
    color: #2271b1;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.vera-btn--new-session:hover {
    background: #e8f0fe;
}

/* ─── Fortschrittsbalken Pulsing ─── */
.vera-progress--pulsing .vera-progress-fill {
    background: linear-gradient(90deg, 
        var(--vera-gold, #c9a96e) 0%, 
        #e8c887 50%, 
        var(--vera-gold, #c9a96e) 100%);
    background-size: 200% 100%;
    animation: vera-pulse 1.5s ease-in-out infinite;
}

@keyframes vera-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.vera-progress-timer {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-family: monospace;
    color: #666;
}