/* UI/UX-Testing-Tool – Mayflower CI */

:root {
    --primary: #1a73e8;
    --primary-hover: #1561c4;
    --primary-light: #1561c4;
    --accent: #f44336;
    --accent-light: #ef9a9a;
    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;
    --danger: #f44336;
    --bg: #f5f5f5;
    --card-bg: #ffffff;
    --header-bg: #ffffff;
    --input-bg: #ffffff;
    --text: #212121;
    --text-muted: #757575;
    --border: #e0e0e0;
    --shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 6px rgba(0,0,0,0.16), 0 10px 20px rgba(0,0,0,0.10);
    --radius: 8px;
    --console-bg: #263238;
    --console-text: #eceff1;
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --tip-bg: #fff8e1;
    --tip-text: #6d5e00;
    --tip-border: var(--warning);
    --example-bg: #f0f4ff;
    --example-code-bg: #e3ecfa;
    --example-border: var(--primary);
    --extra-summary-bg: #fafafa;
    --tooltip-bg: #212121;
    --tooltip-text: #ffffff;
    --suite-ui-bg: #e3f2fd;
    --suite-ui-fg: #1565c0;
    --suite-ux-bg: #f3e5f5;
    --suite-ux-fg: #6a1b9a;
    --suite-a11y-bg: #e8f5e9;
    --suite-a11y-fg: #2e7d32;
    --sev-critical-bg: #ffebee;
    --sev-critical-fg: #c62828;
    --sev-serious-bg: #fff3e0;
    --sev-serious-fg: #e65100;
    --sev-moderate-bg: #fff8e1;
    --sev-moderate-fg: #f57f17;
    --sev-minor-bg: #f5f5f5;
    --sev-minor-fg: #757575;
    --sev-info-bg: #e3f2fd;
    --sev-info-fg: #1565c0;
}

[data-theme="dark"] {
    --primary: #4f93f0;
    --primary-hover: #6aa6f5;
    --primary-light: #6aa6f5;
    --accent: #ef5350;
    --success: #66bb6a;
    --warning: #ffa726;
    --error: #ef5350;
    --danger: #ef5350;
    --bg: #15171c;
    --card-bg: #23262e;
    --header-bg: #1c1f25;
    --input-bg: #2a2e37;
    --text: #e8eaed;
    --text-muted: #9aa0a6;
    --border: #353841;
    --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.5), 0 10px 24px rgba(0,0,0,0.35);
    --console-bg: #0f1115;
    --console-text: #d8dee4;
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --tip-bg: #3a3217;
    --tip-text: #e8d57a;
    --tip-border: #ffa726;
    --example-bg: #1c2536;
    --example-code-bg: #2a3754;
    --example-border: #4f93f0;
    --extra-summary-bg: #1c1f25;
    --tooltip-bg: #f5f5f5;
    --tooltip-text: #212121;
    --suite-ui-bg: #1e3a5f;
    --suite-ui-fg: #90caf9;
    --suite-ux-bg: #3d2451;
    --suite-ux-fg: #ce93d8;
    --suite-a11y-bg: #1f3d22;
    --suite-a11y-fg: #a5d6a7;
    --sev-critical-bg: #4a1c1f;
    --sev-critical-fg: #ef9a9a;
    --sev-serious-bg: #4a2e15;
    --sev-serious-fg: #ffb74d;
    --sev-moderate-bg: #3d3815;
    --sev-moderate-fg: #fff176;
    --sev-minor-bg: #2a2d34;
    --sev-minor-fg: #b0b3b8;
    --sev-info-bg: #1e3a5f;
    --sev-info-fg: #90caf9;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* Header */
header {
    background: var(--header-bg);
    padding: 0 2rem;
    height: 72px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.header-left {
    display: flex;
    align-items: center;
}

.header-logo {
    height: 28px;
    width: auto;
}

.header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.header-wordmark {
    height: 32px;
    width: auto;
}

.header-app {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.header-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    justify-content: flex-end;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #81c784;
    display: inline-block;
}

.status-dot.running {
    background: #ffb74d;
    animation: pulse 1s infinite;
}

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

/* Main */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Cards */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}

.card h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text);
}

/* Control Panel */
.control-panel {
    margin-bottom: 1rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-group {
    flex: 1;
    min-width: 160px;
}

.form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--input-bg);
    cursor: pointer;
    appearance: auto;
}

select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    min-width: auto;
    flex: 0;
}

/* Buttons */
.btn {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
    box-shadow: var(--shadow);
}

.btn-secondary {
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
}

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

.btn-danger {
    background: var(--error);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #d32f2f;
    box-shadow: var(--shadow);
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.25rem;
    line-height: 1;
}

/* Status Cards */
.status-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.stat-icon {
    font-size: 2rem;
    opacity: 0.25;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Progress Bar */
.progress-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-fill.indeterminate {
    width: 30%;
    animation: indeterminate 1.5s infinite;
}

@keyframes indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* Results */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.results-summary {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.results-summary .passed { color: var(--success); }
.results-summary .failed { color: var(--error); }
.results-summary .skipped { color: var(--text-muted); }

/* Tabs */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1rem;
}

.tab {
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s ease;
}

.tab:hover {
    color: var(--text);
}

.tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Test List */
.test-list {
    max-height: 400px;
    overflow-y: auto;
}

.test-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    transition: background 0.1s ease;
}

.test-item:hover {
    background: var(--bg);
}

.test-item .icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.test-item .name {
    flex: 1;
}

.test-item .suite-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.suite-tag.ui   { background: var(--suite-ui-bg); color: var(--suite-ui-fg); }
.suite-tag.ux   { background: var(--suite-ux-bg); color: var(--suite-ux-fg); }
.suite-tag.a11y { background: var(--suite-a11y-bg); color: var(--suite-a11y-fg); }

.test-item.passed .icon { color: var(--success); }
.test-item.failed .icon { color: var(--error); }
.test-item.skipped .icon { color: var(--text-muted); }

.test-icon {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.test-item.passed  .test-icon { color: var(--success); }
.test-item.failed  .test-icon { color: var(--error); }
.test-item.warning .test-icon { color: var(--warning); }
.test-item.info    .test-icon { color: var(--primary); }

/* Console Output */
.console-output {
    background: var(--console-bg);
    color: var(--console-text);
    padding: 1rem;
    border-radius: var(--radius);
    font-family: "SF Mono", "Monaco", "Menlo", "Consolas", monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Bottom Section */
.bottom-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Report List */
.report-list {
    max-height: 300px;
    overflow-y: auto;
}

.report-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s ease;
    font-size: 0.875rem;
}

.report-item:hover {
    background: var(--bg);
}

.report-item .report-name {
    font-weight: 500;
}

.report-item .report-date {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Screenshot Grid */
.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

.screenshot-thumb {
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease;
    border: 1px solid var(--border);
}

.screenshot-thumb:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-lg);
}

.screenshot-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.screenshot-thumb .name {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Placeholder */
.placeholder {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: modalFadeIn 0.18s ease;
}

.modal-content {
    animation: modalSlideIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.modal-content {
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-wide {
    max-width: 900px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-small {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    border-radius: 6px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.report-content {
    background: var(--bg);
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.6;
    max-height: 60vh;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* Discovery Results */
.discovery-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}

.discovery-item:last-child {
    border-bottom: none;
}

.discovery-item .label {
    font-weight: 600;
}

.discovery-item .value {
    color: var(--text-muted);
    font-family: monospace;
}

.discovery-item .value.found { color: var(--success); }
.discovery-item .value.missing { color: var(--error); }

/* URL Input */
.url-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.url-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: "SF Mono", "Monaco", "Menlo", "Consolas", monospace;
    color: var(--text);
    background: var(--input-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.url-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}

.url-input.flash {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.url-input.input-error,
.text-input.input-error {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2);
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.text-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--input-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.text-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}

.text-input[readonly] {
    background: var(--bg);
    color: var(--text-muted);
}

/* Saved Environments */
.saved-envs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.75rem;
    align-items: center;
}

.env-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
}

.env-chip {
    display: inline-flex;
    flex-direction: column;
    padding: 0.375rem 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    font-family: inherit;
}

.env-chip:hover {
    background: var(--card-bg);
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.env-chip-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
}

.env-chip-desc {
    font-size: 0.6875rem;
    color: var(--text-muted);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.env-entry {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.env-chip-action {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 0.125rem;
    line-height: 1;
    opacity: 0.5;
    transition: all 0.15s ease;
}

.env-chip-edit:hover  { color: var(--primary); opacity: 1; }
.env-chip-delete:hover { color: var(--error); opacity: 1; }

/* Login / Details Section */
.login-section {
    margin-top: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
}

.login-section[open] {
    padding-bottom: 0.75rem;
}

.login-toggle {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.login-toggle::-webkit-details-marker { display: none; }
.login-toggle::before { content: "\1F512 "; }
.login-section[open] .login-toggle::before { content: "\1F513 "; }

.login-fields {
    padding: 0 0.75rem;
}

/* Footer */
footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Mode-Switcher */
.mode-switcher {
    display: flex;
    gap: 0.5rem;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;
    padding: 0.4rem;
}

.mode-btn {
    flex: 1;
    padding: 0.9rem 1.5rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border-radius: 8px;
    letter-spacing: 0.01em;
}

.mode-btn:hover {
    background: var(--example-bg);
    color: var(--primary);
}

.mode-btn.active {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.35);
}

/* Scan Check-Labels */
.check-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
}

.check-label input[type="checkbox"] {
    accent-color: var(--primary);
}

/* Severity Badges */
.severity-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.severity-badge.critical { background: var(--sev-critical-bg); color: var(--sev-critical-fg); }
.severity-badge.serious  { background: var(--sev-serious-bg);  color: var(--sev-serious-fg); }
.severity-badge.moderate { background: var(--sev-moderate-bg); color: var(--sev-moderate-fg); }
.severity-badge.minor    { background: var(--sev-minor-bg);    color: var(--sev-minor-fg); }
.severity-badge.info     { background: var(--sev-info-bg);     color: var(--sev-info-fg); }

/* Detected Fields Form */
.detected-field-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--bg);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

.detected-field-row .df-label {
    min-width: 160px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
}

.detected-field-row .df-value {
    flex: 1;
}

.detected-btn-row {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0.5rem 0.25rem 0;
    padding: 0.4rem 0.75rem;
    background: var(--bg);
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s;
}

.detected-btn-row:hover {
    background: var(--border);
}

.detected-btn-row input[type="checkbox"] {
    accent-color: var(--primary);
}

/* Scan screenshot items */
.scan-screenshot {
    margin-top: 0.5rem;
}

.scan-screenshot img {
    max-width: 200px;
    border-radius: 4px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s;
}

.scan-screenshot img:hover {
    transform: scale(1.05);
}

/* Screenshot gallery items with label */
.screenshot-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.15s;
}

.screenshot-item:hover {
    transform: scale(1.03);
}

.screenshot-item img {
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.screenshot-label {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    header { padding: 0 1rem; }
    main { padding: 1rem; }
    .form-row { flex-direction: column; }
    .bottom-section { grid-template-columns: 1fr; }
    .status-cards { grid-template-columns: 1fr; }
    .subtitle { display: none; }
}

/* ========== Hilfe-Sektion ========== */

.help-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.help-card {
    padding: 2rem;
}

.help-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.help-intro {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.help-subtitle {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.help-nav {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.help-nav-btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.help-nav-btn:hover {
    background: var(--primary-hover);
}

/* Steps */

.help-steps {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.help-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.help-step-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-step-content {
    flex: 1;
    min-width: 0;
}

.help-step-content h3 {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
}

.help-step-content p {
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 0.4rem;
}

.help-example {
    background: var(--example-bg);
    border-left: 3px solid var(--example-border);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    color: var(--text-muted);
}

.help-example code {
    background: var(--example-code-bg);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.9rem;
}

.help-tip {
    background: var(--tip-bg);
    border-left: 3px solid var(--tip-border);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    color: var(--tip-text);
}

.help-list {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0;
}

.help-list li {
    padding: 0.3rem 0 0.3rem 1.2rem;
    position: relative;
    line-height: 1.6;
}

.help-list li::before {
    content: "\2022";
    color: var(--primary);
    font-weight: 700;
    position: absolute;
    left: 0;
}

/* Badges */

.help-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    vertical-align: middle;
}

.help-badge-pass { background: var(--success); }
.help-badge-fail { background: var(--error); }
.help-badge-warn { background: var(--warning); }
.help-badge-skip { background: #9e9e9e; }
.help-badge-info { background: var(--primary); }

/* Extra / FAQ */

.help-extra {
    margin-top: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.help-extra summary {
    padding: 0.75rem 1rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--extra-summary-bg);
}

.help-extra-content {
    padding: 1rem;
}

.help-extra-content h4 {
    margin: 0.75rem 0 0.25rem;
    font-size: 0.95rem;
}

.help-extra-content h4:first-child {
    margin-top: 0;
}

.help-extra-content p {
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.9rem;
}

.help-faq-item {
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.help-faq-item:last-child {
    border-bottom: none;
}

.help-faq-item summary {
    padding: 0.85rem 0;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
}

.help-faq-item p {
    padding: 0 0 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.9rem;
}

/* ========== Theme-Toggle (Dark Mode) ========== */

body, header, .card, .console-output, select, .url-input, .text-input, .btn-secondary, .env-chip, .help-example, .help-tip, .help-extra summary {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    margin-right: 0.5rem;
    padding: 0;
}

.theme-toggle:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--bg);
    transform: rotate(15deg);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: block; }

[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }

[data-theme="dark"] .stat-icon {
    opacity: 0.5;
}

[data-theme="dark"] .progress-fill.indeterminate {
    background: var(--primary);
    opacity: 0.85;
}

[data-theme="dark"] .header-wordmark,
[data-theme="dark"] .header-logo {
    filter: brightness(0) invert(0.92);
}

/* ========== Tab-Slide-Transition ========== */

.tab-content.active {
    animation: tabSlideIn 0.25s ease;
}

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

/* ========== Severity-Tooltip ========== */

.severity-badge {
    position: relative;
    cursor: help;
}

.severity-badge[data-tooltip]::after,
.severity-badge[data-tooltip]::before {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 50;
}

.severity-badge[data-tooltip]::after {
    content: attr(data-tooltip);
    transform: translateX(-50%) translateY(4px);
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    padding: 0.5rem 0.7rem;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.45;
    text-transform: none;
    font-weight: 500;
    letter-spacing: normal;
    white-space: pre-line;
    width: max-content;
    max-width: 320px;
    text-align: left;
    box-shadow: var(--shadow-lg);
}

.severity-badge[data-tooltip]::before {
    content: "";
    transform: translateX(-50%) translateY(4px);
    border: 4px solid transparent;
    border-top-color: var(--tooltip-bg);
    bottom: calc(100% + 2px);
}

.severity-badge[data-tooltip]:hover::after,
.severity-badge[data-tooltip]:hover::before,
.severity-badge[data-tooltip]:focus::after,
.severity-badge[data-tooltip]:focus::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ========== Status-Dot Varianten ========== */

.status-dot.idle        { background: #81c784; }
.status-dot.running     { background: #ffb74d; animation: pulse 1s infinite; }
.status-dot.discovering { background: #64b5f6; animation: pulse 1s infinite; }
.status-dot.scanning    { background: #ba68c8; animation: pulse 1s infinite; }
.status-dot.error       { background: #e57373; }
.status-dot.cancelled   { background: #b0bec5; }
.status-dot.success     { background: #4caf50; }

/* ========== Stat-Sparkline ========== */

.stat-card {
    position: relative;
}

.stat-content {
    flex: 1;
    min-width: 0;
}

.stat-sparkline {
    width: 80px;
    height: 28px;
    flex-shrink: 0;
    margin-left: auto;
    overflow: visible;
}

.stat-sparkline path.line {
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stat-sparkline path.area {
    fill: var(--primary);
    opacity: 0.12;
    stroke: none;
}

.stat-sparkline circle {
    fill: var(--primary);
    stroke: var(--card-bg);
    stroke-width: 1.5;
}

.stat-sparkline-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ========== Spacing Utilities ========== */

.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 0.75rem; }
.mt-lg { margin-top: 1rem; }
.mt-xl { margin-top: 1.25rem; }

.mb-0  { margin-bottom: 0; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 0.75rem; }
.mb-lg { margin-bottom: 1rem; }

.form-row.aligned-end { align-items: flex-end; }
.form-group.no-margin { margin-bottom: 0; }

.text-uppercase { text-transform: uppercase; }

/* ========== Live Browser ========== */

.live-browser-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.live-browser-img {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--border);
    display: block;
}

/* ========== Pre-Actions / Website-Mode ========== */

.preactions-section {
    margin-top: 1.25rem;
}

.preactions-section h2 {
    margin-bottom: 0.75rem;
}

.preactions-section h3 {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.preactions-section h3.spaced {
    margin: 0.75rem 0 0.5rem;
}

.scan-checks {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ========== Jira ========== */

.jira-status {
    font-size: 0.8rem;
    margin-top: 0.4rem;
    color: var(--text-muted);
}

.jira-export-summary {
    margin-bottom: 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.jira-export-list {
    margin-bottom: 1rem;
    max-height: 250px;
    overflow-y: auto;
}

.jira-export-status {
    font-size: 0.85rem;
    min-height: 1.5rem;
    margin-bottom: 0.75rem;
}

.jira-export-row {
    display: flex;
    align-items: center;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    cursor: pointer;
    gap: 0.4rem;
}

.jira-export-row .jira-export-name {
    flex: 1;
}

.jira-select-all {
    cursor: pointer;
    user-select: none;
}

.jira-select-all input {
    margin-right: 0.4rem;
}

.jira-export-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.jira-icon-fail { color: var(--danger); }
.jira-icon-ok { color: var(--success); }

.test-details {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.help-link {
    font-size: 0.8rem;
}

/* ========== Card Layout Helpers ========== */

.card-full-width {
    grid-column: 1 / -1;
}

/* ========== Detected Form Empty State ========== */

.detected-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ========== Discovery Item DOM-Inspection ========== */

.discovery-item.dom-heading {
    margin-top: 0.75rem;
}

.discovery-item .label-strong {
    font-weight: 600;
}

.discovery-item .value-mono {
    font-family: monospace;
    font-size: 0.75rem;
}

/* ========== Button Loading-State (Spinner) ========== */

@keyframes btn-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.btn.is-loading {
    position: relative;
    color: transparent !important;
    cursor: wait !important;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

.btn-secondary.is-loading::after {
    border-color: rgba(0, 0, 0, 0.15);
    border-top-color: var(--text);
}

[data-theme="dark"] .btn-secondary.is-loading::after {
    border-color: rgba(255, 255, 255, 0.15);
    border-top-color: var(--text);
}

/* ========== Console-Output Coloring ========== */

.console-line-error   { color: #ef9a9a; }
.console-line-warn    { color: #ffcc80; }
.console-line-success { color: #a5d6a7; }
.console-line-info    { color: inherit; }

[data-theme="dark"] .console-line-error   { color: #ef5350; }
[data-theme="dark"] .console-line-warn    { color: #ffa726; }
[data-theme="dark"] .console-line-success { color: #66bb6a; }

/* ========== Icon Sizing ========== */

.icon-svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

.stat-icon .icon-svg {
    width: 2rem;
    height: 2rem;
}

.help-step-number .icon-svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #fff;
}

.env-chip-action .icon-svg {
    width: 14px;
    height: 14px;
}

.btn-close .icon-svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ========== Run-Vergleich (Diff-Modal) ========== */

.diff-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.diff-stat {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.diff-stat.diff-newly-failed   { background: var(--sev-critical-bg); color: var(--sev-critical-fg); }
.diff-stat.diff-newly-passed   { background: var(--suite-a11y-bg);   color: var(--suite-a11y-fg); }
.diff-stat.diff-still-failing  { background: var(--sev-serious-bg);  color: var(--sev-serious-fg); }
.diff-stat.diff-new-tests      { background: var(--sev-info-bg);     color: var(--sev-info-fg); }
.diff-stat.diff-removed-tests  { background: var(--sev-minor-bg);    color: var(--sev-minor-fg); }

.diff-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.diff-section {
    margin-bottom: 1.25rem;
}

.diff-section h3 {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
    color: var(--text);
}

.diff-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.diff-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.2rem;
    font-size: 0.875rem;
    border-left: 3px solid transparent;
    background: var(--bg);
}

.diff-item .name { flex: 1; }

.diff-item.newly-failed   { border-left-color: var(--error); }
.diff-item.newly-passed   { border-left-color: var(--success); }
.diff-item.still-failing  { border-left-color: var(--warning); }
.diff-item.new-tests      { border-left-color: var(--primary); }
.diff-item.removed-tests  { border-left-color: var(--text-muted); opacity: 0.7; }

.diff-empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

/* ========== Drag&Drop Screenshots ========== */

.screenshot-thumb {
    user-select: none;
}

.screenshot-thumb[draggable="true"] {
    cursor: grab;
}

.screenshot-thumb[draggable="true"]:active {
    cursor: grabbing;
}

.screenshot-thumb.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

.screenshot-thumb.drag-over {
    transform: scale(1.05);
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary), var(--shadow-lg);
}