/* --- START: FIX FÜR WEISSEN BALKEN --- */
body {
    /* Setzt die Standard-Hintergrundfarbe für den gesamten Viewport */
    background-color: #171717; 
    transition: background-color 0.3s ease;
}

/* --- ENDE: FIX FÜR WEISSEN BALKEN --- */

#handpan-tuner-app-wrapper {
    font-family: 'Poppins', sans-serif;
    transition: background-color: 0.3s, color 0.3s;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Auf kleinen Bildschirmen oben starten */
    min-height: 100vh;
}

@media (min-width: 640px) {
    #handpan-tuner-app-wrapper {
        justify-content: center;
    }
}

/* --- Farbvariablen für die Themes --- */
#handpan-tuner-app-wrapper {
    --bg-primary: #171717;
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --ui-bg: #222222;
    --result-bg: #2a2a2a;
    --canvas-bg: #121212;
    --detected-note-bg: #333333;
    --undetected-note-bg: #1C1C1C;
    --stroke-color: #4a5568;
    --accent-color: #E2B333;
    --accent-color-light: #facc15;
    --visualizer-rgb: 226, 179, 51;
    --shade-rgb: 50, 50, 50;
    
    /* --- NEU: Farben für Abweichungsbalken --- */
    --color-green: #4CAF50;
    --color-green-accurate: #8BC34A;
    --color-yellow: #eab308;
    --color-red: #ef4444;
    --color-orange: #fb923c;
    --color-sustain-very-long: #059669;
    --color-sustain-long: #166534;
    --color-sustain-medium: #4CAF50;
    --color-sustain-short: #eab308;
    --color-sustain-very-short: #ef4444;
}

#handpan-tuner-app-wrapper.light-theme {
    --bg-primary: #ffffff;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --ui-bg: #f9fafb;
    --result-bg: #f3f4f6;
    --canvas-bg: #e5e7eb;
    --detected-note-bg: #d1d5db;
    --undetected-note-bg: #f3f4f6;
    --stroke-color: #9ca3af;
    --accent-color: #ca8a04;
    --accent-color-light: #eab308;
    --visualizer-rgb: 202, 138, 4;
    --shade-rgb: 200, 200, 200;

    /* --- NEU: Farben für Abweichungsbalken (Light) --- */
    /* (Bleiben gleich, da sie universell sind) */
    --color-green: #4CAF50;
    --color-green-accurate: #8BC34A;
    --color-yellow: #eab308;
    --color-red: #ef4444;
    --color-sustain-very-long: #059669;
    --color-sustain-long: #166534;
    --color-sustain-medium: #4CAF50;
    --color-sustain-short: #eab308;
    --color-sustain-very-short: #ef4444;
}

#handpan-tuner-app-wrapper { background-color: var(--bg-primary); color: var(--text-primary); }
#handpan-tuner-app-wrapper h1 { color: var(--text-primary); }
#handpan-tuner-app-wrapper p { color: var(--text-secondary); }
#handpan-tuner-app-wrapper #ui-container { background-color: var(--ui-bg); }
#handpan-tuner-app-wrapper #message-box { color: var(--text-primary); }
#handpan-tuner-app-wrapper #result-box { background-color: var(--result-bg); }
#handpan-tuner-app-wrapper canvas { background-color: var(--canvas-bg); width: 100%; height: auto; max-width: 600px; aspect-ratio: 600 / 550; cursor: default; }
#note-detail-overlay {
    /* Overlay mit Detailinformationen zur Note */
    min-width: 200px;
    max-width: 240px;
    background-color: var(--ui-bg);
    border: 1px solid var(--stroke-color);
    border-radius: 0.75rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    padding: 0.75rem 0.9rem;
    color: var(--text-primary);
    z-index: 20;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
#note-detail-overlay.hidden {
    opacity: 0;
    transform: translateY(6px);
}
#note-detail-overlay.visible {
    opacity: 1;
    transform: translateY(0);
}
#note-detail-overlay .note-detail-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}
#note-detail-overlay .note-detail-card-title span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
#note-detail-overlay .note-detail-values {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
#note-detail-overlay .note-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
}
#note-detail-overlay .note-detail-label {
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}
#note-detail-overlay .note-detail-value {
    font-weight: 600;
}
#note-detail-overlay .note-detail-hint {
    margin-top: 0.65rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: right;
}
#handpan-tuner-app-wrapper footer, #handpan-tuner-app-wrapper footer a { color: var(--text-secondary); }
#handpan-tuner-app-wrapper footer a:hover { color: var(--accent-color); }
#handpan-tuner-app-wrapper #theme-toggle:hover, #handpan-tuner-app-wrapper #settings-toggle:hover { color: var(--accent-color); }
#handpan-tuner-app-wrapper #theme-toggle:hover, #handpan-tuner-app-wrapper #history-toggle:hover { color: var(--accent-color); }

.btn { font-weight: 700; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-size: 1.125rem; transition: all 0.2s ease-in-out; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.btn-small { padding: 0.5rem 1rem; font-size: 1rem; width: auto; }
.btn:hover:not(:disabled) { transform: scale(1.05); }
.btn:disabled { opacity: 0.5; transform: scale(1); cursor: not-allowed; background-color: #4B5563; color: #9ca3af; }
.btn-primary { background-color: var(--accent-color); color: #000000; }
.btn-primary:hover:not(:disabled) { background-color: var(--accent-color-light); }
.btn-secondary { background-color: #374151; color: var(--accent-color); }
.btn-secondary:hover:not(:disabled) { background-color: #4B5563; }
.btn-suggestion { background-color: var(--result-bg); color: var(--text-primary); border: 1px solid var(--stroke-color); font-weight: 500; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.btn-suggestion:hover { background-color: var(--detected-note-bg); border-color: var(--accent-color); }
.btn-suggestion-scale {
    background-color: var(--result-bg);
    color: var(--text-primary);
    border: 1px solid var(--stroke-color);
    font-weight: 500;
    padding: 0.75rem 1rem; /* Etwas größer als normale suggestions */
    font-size: 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.btn-suggestion-scale:hover {
    background-color: var(--detected-note-bg);
    border-color: var(--accent-color);
    transform: scale(1.03);
}
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Barrierefreiheit: Screenreader-Only-Elemente */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Kompakte Icon-Schaltflächen für alle Modale */
.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid var(--stroke-color);
    background-color: rgba(0, 0, 0, 0);
    color: var(--text-secondary);
    transition: all 0.2s ease-in-out;
}

.icon-btn:hover:not(:disabled) {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background-color: rgba(226, 179, 51, 0.08);
}

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

.icon-btn .icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-btn .spinner {
    position: absolute;
    inset: 0;
    margin: auto;
    border-color: var(--accent-color);
    border-bottom-color: transparent;
}

.modal-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
}

.modal-close-btn svg {
    pointer-events: none;
}

.modal-scroll-area {
    scrollbar-width: thin;
    scrollbar-color: var(--stroke-color) var(--ui-bg);
}

.modal-scroll-area::-webkit-scrollbar {
    width: 8px;
}

.modal-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.modal-scroll-area::-webkit-scrollbar-thumb {
    background-color: var(--stroke-color);
    border-radius: 4px;
    border: 2px solid var(--ui-bg);
}

.modal-scroll-area::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary);
}

/* --- ÄNDERUNG (Punkt 1): #scale-suggestion-modal hinzugefügt --- */
/* --- HINZUGEFÜGT: #cancel-confirmation-modal --- */
/* --- START: #unknown-scale-modal hinzugefügt --- */
#settings-panel, #consent-modal, #terms-modal, #report-modal, #recommendation-modal, #scale-suggestion-modal, #cancel-confirmation-modal, #unknown-scale-modal { background-color: var(--ui-bg); }
/* --- ENDE: #unknown-scale-modal hinzugefügt --- */

#report-modal {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.report-modal-scroll {
    flex: 1;
    overflow-y: auto;
}

#history-modal {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.history-modal-scroll {
    flex: 1;
    overflow-y: auto;
}

#close-settings:hover, #close-consent-modal:hover, #close-report-modal:hover, #close-recommendation-modal:hover { color: var(--accent-color); }
.settings-btn { background-color: transparent; color: var(--text-secondary); border: none; cursor: pointer; font-weight: 500; transition: all 0.2s ease-in-out; }
.settings-btn.active { background-color: var(--accent-color); color: #171717; font-weight: 700; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }

/* --- START: Styling für #unknown-scale-input hinzugefügt --- */
#manufacturer-input, #unknown-scale-input { background-color: var(--canvas-bg); border: 1px solid var(--stroke-color); color: var(--text-primary); }
/* --- ENDE: Styling hinzugefügt --- */

input[type="range"] { background-color: var(--stroke-color); }
/* --- MODIFIZIERT FÜR iOS: Größerer Kreis und angepasste Position --- */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px; /* Größerer Kreis (war 24px) */
    height: 28px; /* Größerer Kreis (war 24px) */
    background: var(--accent-color);
    cursor: pointer;
    border-radius: 50%;
    margin-top: -8px; /* Neu berechnet: (12px Leiste - 28px Kreis) / 2 = -8px (war -9px) */
}
input[type="range"]::-moz-range-thumb {
    width: 28px; /* Größerer Kreis (war 24px) */
    height: 28px; /* Größerer Kreis (war 24px) */
    background: var(--accent-color);
    cursor: pointer;
    border-radius: 50%;
    border: none;
}
/* --- ENDE MODIFIKATION --- */

/* --- Gutachten Modal Styles --- */
#report-content { color: var(--text-primary); }
#report-content th { background-color: var(--detected-note-bg); }
#report-content td { border-color: var(--stroke-color); }

/* --- NEU: Zusammenfassung im Bericht --- */
.report-summary-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.report-summary-intro {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.report-summary-intro strong {
    color: var(--text-primary);
}

.report-summary-subheading {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.report-summary-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

.report-summary-metric-card {
    list-style: none;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    padding: 0.85rem 1rem;
    backdrop-filter: blur(18px);
    color: var(--text-primary);
}

#handpan-tuner-app-wrapper.light-theme .report-summary-metric-card {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.35);
}

.report-summary-metric-card dt {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.report-summary-metric-card dd {
    margin: 0.1rem 0 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: inherit;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.report-summary-metric-unit {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.report-summary-metric-hint {
    margin: -0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.report-summary-follow-up {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.report-summary-follow-up p {
    margin: 0;
    color: var(--text-secondary);
}

.report-summary-follow-up.score-grade-1 p {
    color: var(--color-green);
}

.report-summary-follow-up.score-grade-2 p {
    color: var(--color-green-accurate);
}

.report-summary-follow-up.score-grade-3 p {
    color: var(--color-yellow);
}

.report-summary-follow-up.score-grade-4 p {
    color: var(--color-orange);
}

.report-summary-follow-up.score-grade-5 p {
    color: var(--color-red);
}

.report-summary-follow-up.score-grade-6 p {
    color: #b91c1c;
}

.report-summary-grade {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.report-summary-highlights {
    border-radius: 0.75rem;
    border: 1px solid rgba(248, 113, 113, 0.4);
    background: rgba(239, 68, 68, 0.1);
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--text-primary);
}

.report-summary-highlights p {
    margin: 0;
}

#handpan-tuner-app-wrapper.light-theme .report-summary-highlights {
    background: rgba(254, 226, 226, 0.9);
    border-color: rgba(248, 113, 113, 0.55);
}

/* --- Language Switcher Styles --- */
#lang-dropdown {
    right: -3.7rem;
}

#lang-dropdown .lang-option {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.2s;
    font-size: 0.875rem;
}
#lang-dropdown .lang-option:hover {
    background-color: var(--result-bg);
}
#lang-dropdown .lang-option img {
    width: 1.75rem;
    height: auto;
    margin-right: 0.75rem;
    border-radius: 0.125rem;
}
/* --- Scrollbar Styling für Hersteller --- */
#manufacturer-suggestions {
    /* Für Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--stroke-color) var(--canvas-bg);
}

/* Für Webkit-Browser (Chrome, Safari, Edge) */
#manufacturer-suggestions::-webkit-scrollbar {
    width: 8px; /* Breite des Scrollbalkens */
}

#manufacturer-suggestions::-webkit-scrollbar-track {
    background: transparent; /* Macht den Hintergrund unsichtbar */
}

#manufacturer-suggestions::-webkit-scrollbar-thumb {
    background-color: var(--stroke-color); /* Die Farbe des Griffs (ein dunkles Grau) */
    border-radius: 4px; /* Runde Ecken für den Griff */
    /* Optional: Ein Rand, damit es schwebend aussieht */
    border: 2px solid var(--canvas-bg);
}

#manufacturer-suggestions::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary); /* Etwas heller beim Darüberfahren */
}
.recommendation-slide {
    flex: 0 0 100%; /* Jede Slide nimmt 100% der Containerbreite ein */
    scroll-snap-align: start; /* Rastet am Anfang der Slide ein */
}
.slideshow-img {
    transition: opacity 0.7s ease-in-out;
}

/* --- NEU: Styling für horizontalen Tabellen-Scrollbalken --- */
.table-scroll-wrapper {
    /* Stellt sicher, dass das Scrollen auf Touch-Geräten flüssig ist */
    -webkit-overflow-scrolling: touch;
    /* Benötigt für das Platzieren des visuellen Scroll-Hinweises */
    position: relative;
}

/* Für Webkit-Browser (Chrome, Safari, Edge) */
.table-scroll-wrapper::-webkit-scrollbar {
    height: 8px; /* Höhe für horizontalen Scrollbalken */
    background-color: var(--result-bg); /* Hintergrund der Leiste */
    border-radius: 4px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--stroke-color); /* Farbe des Griffs */
    border-radius: 4px; /* Runde Ecken */
    /* Ein kleiner Rand, damit es besser aussieht */
    border: 2px solid var(--result-bg);
}

.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary); /* Heller beim Hover */
}

/* Für Firefox */
.table-scroll-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--stroke-color) var(--result-bg);
}

@media (max-width: 768px) {
    .table-scroll-wrapper {
        /* Sorgt dafür, dass beim horizontalen Scrollen spaltenweise eingerastet wird */
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0.75rem; /* gleicht das Padding der Zellen aus */
        /* Platz für den Scroll-Hinweis am unteren Rand */
        padding-bottom: 2.5rem;
    }

    .report-table thead th,
    .report-table tbody td {
        /* Jede Spalte rastet sauber am linken Rand ein */
        scroll-snap-align: start;
    }

    .report-table thead th:first-child,
    .report-table tbody td:first-child {
        position: sticky;
        left: 0;
        background-color: var(--result-bg); /* Verhindert Durchscheinen und vermeidet störende Linien */
        z-index: 1;
    }

    .report-table thead th:first-child {
        background-color: var(--detected-note-bg);
        z-index: 2; /* Header bleibt über den restlichen Zellen sichtbar */
    }

    .table-scroll-wrapper::after {
        /* Zeigt einen visuellen Hinweis mit Pfeilen für horizontales Scrollen */
        content: "\2190  Weiter wischen  \2192";
        position: absolute;
        left: 50%;
        bottom: 0.75rem;
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.4rem 0.9rem;
        border-radius: 9999px;
        background: linear-gradient(90deg, rgba(var(--shade-rgb), 0.85), rgba(var(--shade-rgb), 0.55));
        color: var(--text-secondary);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        pointer-events: none;
        opacity: 0;
        animation: scroll-hint-fade 5s ease 0.6s forwards;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .table-scroll-wrapper::after {
        /* Kein Animationseffekt für Nutzer*innen mit reduzierter Bewegung */
        animation: none;
        opacity: 1;
    }
}

@keyframes scroll-hint-fade {
    /* Blendet den Scroll-Hinweis kurz ein und anschließend wieder aus */
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(6px);
    }

    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    85% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(6px);
    }
}

/* --- NEU: Stepper Styles --- */
#stepper {
    /* Versteckt den Stepper standardmäßig, JS macht ihn sichtbar */
    display: none;
}

#stepper .step {
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

#stepper .step-circle {
    border-color: var(--stroke-color);
    background-color: var(--ui-bg);
    transition: all 0.3s ease;
}

#stepper .step-line {
    background-color: var(--stroke-color);
    transition: all 0.3s ease;
}

/* Zustand: Aktiv */
#stepper .step.active .step-circle {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: #000000;
    transform: scale(1.1);
}
#stepper .step.active .step-label {
    color: var(--accent-color);
}

/* Zustand: Abgeschlossen */
#stepper .step.completed .step-circle {
    border-color: var(--color-green);
    background-color: var(--color-green);
    color: #000000;
}
#stepper .step.completed .step-label {
    color: var(--text-primary);
}
#stepper .step.completed + .step-line {
    background-color: var(--color-green);
}
/* --- ENDE: Stepper Styles --- */


/* --- NEU: Übergangs-Overlay Animationen (Geändert) --- */
@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Ersetzt zoomInText */
@keyframes slideInDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#transition-overlay.visible {
    /* Wenn sichtbar, animiere das Einblenden */
    animation: fadeInOverlay 0.4s ease-out forwards;
}

#transition-overlay.visible #transition-message {
    /* Beim Einblenden den Text animieren (geändert) */
    /* Verwendet eine sanfte "Cubic Bezier"-Kurve für ein weicheres Eingleiten */
    animation: slideInDown 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

#transition-overlay.hiding {
    /* Beim Ausblenden animieren */
    animation: fadeOutOverlay 0.5s ease-in forwards;
}
/* --- ENDE: Übergangs-Overlay --- */

/* --- START: Anpassung Schriftgröße Übergangs-Overlay (Zeilenabstand geändert) --- */
#transition-message {
    font-size: 1.5rem; /* 24px */
    line-height: 1.6; /* Erhöhter Zeilenabstand */
}

@media (min-width: 640px) { /* sm breakpoint */
    #transition-message {
        font-size: 1.5rem; /* 36px */
        line-height: 1.6; /* Erhöhter Zeilenabstand */
    }
}
/* --- ENDE: Anpassung --- */

/* --- NEU: Status-abhängige Layout-Anpassung --- */
/* Diese Regeln sorgen dafür, dass die Elemente im IDLE-Zustand 
   (wenn sie unsichtbar sind) keinen Platz einnehmen. */

#ui-container.state-idle #live-guess-box,
#ui-container.state-idle #live-tuning-box,
#ui-container.state-idle #stability-bar-container,
#ui-container.state-idle #note-profile-window { /* <-- NEU: Profilfenster auch ausblenden */
    /* Setzt Höhe und Ränder auf 0, wenn IDLE, um Platz zu sparen */
    height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    /* 'invisible' (visibility: hidden) sorgt dafür, dass sie keinen Platz einnehmen, wenn h-0 */
    /* Wichtig: visibility: hidden muss gesetzt sein, damit h-0 funktioniert */
    visibility: hidden; 
}

/* Verringert den Abstand der Message-Box im IDLE-Zustand */
#ui-container.state-idle #message-box-container {
    margin-top: 0 !important; /* Entfernt mt-4 */
    /* Behält die min-h-[4rem], damit der Text Platz hat */
}


/* --- START: NEUES STYLING FÜR NOTEN-PROFIL --- */
.deviation-bar-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.deviation-bar-track {
    width: 100%;
    height: 12px;
    background-color: var(--canvas-bg);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    /* Linien für 0, 10, 20 Cents */
    /* HINWEIS: Angepasst auf +/- 20 Cent (50% = 10 Cent, 100% = 20 Cent) */
    background-image: 
        linear-gradient(to right, var(--stroke-color) 1px, transparent 1px), /* 0 */
        linear-gradient(to right, var(--stroke-color) 1px, transparent 1px), /* +10 */
        linear-gradient(to right, var(--stroke-color) 1px, transparent 1px), /* -10 */
        linear-gradient(to right, var(--stroke-color) 1px, transparent 1px), /* +20 */
        linear-gradient(to right, var(--stroke-color) 1px, transparent 1px); /* -20 */
    background-position: 
        calc(50% - 0.5px) center, /* 0 Cents (Mitte) */
        calc(75% - 0.5px) center, /* +10 Cents */
        calc(25% - 0.5px) center, /* -10 Cents */
        calc(100% - 1px) center,  /* +20 Cents (fast am Rand) */
        1px center;               /* -20 Cents (fast am Rand) */
    background-repeat: no-repeat;
    background-size: 
        1px 100%, /* 0 Cents */
        1px 60%,  /* +10 Cents */
        1px 60%,  /* -10 Cents */
        1px 60%,  /* +20 Cents */
        1px 60%;  /* -20 Cents */
}

.deviation-bar {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: var(--color-green); /* Standardfarbe grün */
    transition: all 0.05s linear;
    width: 0%; /* Breite wird per JS gesetzt (Prozentsatz von 50%) */
    max-width: 50%; /* Max. 50% (bis zum Rand) */
}

/* Stellt sicher, dass der Balken in die richtige Richtung wächst */
.deviation-bar.positive {
    left: 50%;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.deviation-bar.negative {
    right: 50%;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}


.deviation-cents-label {
    width: 80px; /* Feste Breite, um Springen zu verhindern (leicht erhöht) */
    text-align: right;
    font-size: 0.875rem; /* 14px */
    font-weight: 700; /* Fett, um wichtiger zu sein */
    color: var(--text-primary); /* Haupttextfarbe */
    padding-left: 0.5rem; /* 8px */
    transition: color 0.1s linear;
}
/* --- ENDE: NEUES STYLING FÜR NOTEN-PROFIL --- */

/* --- NEU: Styling für Sustain (Amplitude) Balken --- */
.sustain-bar-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 6px; /* Kleiner Abstand zum Deviation-Balken */
}

.sustain-bar-track {
    width: 100%; /* Volle Breite für den Track */
    height: 8px; /* Dünner als der Cents-Balken */
    background-color: var(--canvas-bg);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.sustain-bar {
    position: absolute;
    top: 0;
    left: 0; /* Beginnt links */
    height: 100%;
    background-color: var(--accent-color); /* Akzentfarbe für die Amplitude */
    border-radius: 4px;
    /* Die 'width' wird per JS gesetzt */
    width: 0%; 
    /* Sanfte Animation für das Ausklingen */
    transition: width 0.1s linear; 
}

.sustain-label {
    /* Nimmt die gleiche Breite ein wie das Cents-Label, um alles auszurichten */
    width: 80px; 
    text-align: right;
    font-size: 0.75rem; /* 12px, etwas kleiner */
    font-weight: 500;
    color: var(--text-secondary); /* Sekundäre Textfarbe */
    padding-left: 0.5rem; /* 8px */
    text-transform: uppercase; /* SUSTAIN in Großbuchstaben */
}

/* Anpassung für das .note-partial, um mehr Platz nach unten zu geben */
.note-partial {
    padding-bottom: 4px; /* Etwas mehr Platz unter jedem Partial-Eintrag */
}

/* --- ENDE: Styling für Sustain --- */


/* --- NEU: Sustain-Balken in der Berichtstabelle --- */
.report-sustain-cell {
    vertical-align: top;
    min-width: 220px;
}

.report-sustain-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-sustain-entry {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
}

.report-sustain-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

.report-sustain-bar-track {
    position: relative;
    width: 100%;
    height: 8px;
    background-color: var(--canvas-bg);
    border-radius: 4px;
    overflow: hidden;
}

.report-sustain-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4px;
    background-color: var(--accent-color);
}

.report-sustain-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.report-sustain-empty {
    display: inline-block;
    font-weight: 600;
    color: var(--text-secondary);
}

.report-sustain-attempts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-sustain-attempt-row {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-secondary);
}


/* --- START: NEUES BERICHTS-TAB-LAYOUT --- */

/* Stil für die Tab-Buttons im gesamten Layout */
.report-tab-btn {
    padding: 0.75rem 1.25rem; /* 12px 20px */
    font-size: 0.875rem; /* 14px */
    font-weight: 700; /* Fett */
    text-transform: uppercase;
    color: var(--text-secondary); /* Inaktiv: Sekundäre Textfarbe */
    border: 1px solid var(--stroke-color);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    opacity: 0.85; /* Leicht transparent im inaktiven Zustand */
    text-align: center;
    white-space: normal; /* Erlaubt Umbrüche bei Bedarf */
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
}

.report-tab-btn:hover {
    color: var(--text-primary);
    opacity: 1;
}

.report-tab-btn.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #171717;
    opacity: 1;
}

#handpan-tuner-app-wrapper.light-theme .report-tab-btn.active {
    color: #111827;
}

/* Rasterdarstellung der Tabs für Desktop und Mobilgeräte */
.report-tab-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
    border-bottom: 1px solid var(--stroke-color);
    padding-bottom: 0.25rem;
    margin-bottom: 1rem;
    width: 100%;
}

@media (max-width: 640px) {
    /* Auf sehr kleinen Bildschirmen engeres Raster für bessere Ausnutzung */
    .report-tab-list {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

/* Container für die SVG-Zeichnung */
.report-handpan-drawing-container {
    /* (Stile werden inline in index.html gesetzt, aber wir fügen einen Fallback hinzu) */
    background-color: var(--canvas-bg);
    min-height: 300px; /* Stellt sicher, dass es nicht zusammenfällt */
}

/* --- SVG-Stile für die 2D-Zeichnung --- */
#report-handpan-svg .note-circle-bg {
    fill: var(--detected-note-bg); /* Hintergrund der Note */
    stroke: var(--stroke-color);
    stroke-width: 1px;
    transition: fill 0.2s;
}

#report-handpan-svg .note-circle-outline {
    fill: none;
    stroke: var(--stroke-color);
    stroke-width: 1.5px;
    transition: stroke 0.2s;
}


/* --- START: MODIFIED SVG TEXT STYLES --- */
#report-handpan-svg .note-label { /* (e.g., "Ton 1") */
    font-size: 11px;
    font-weight: 700;
    fill: var(--text-secondary); /* Duller color */
    text-anchor: middle;
    dominant-baseline: central;
    transition: fill 0.2s;
}

#report-handpan-svg .note-name { /* (e.g., "F2") */
    font-size: 20px;
    font-weight: 700;
    fill: var(--text-primary); /* Bright color */
    text-anchor: middle;
    dominant-baseline: central;
    transition: fill 0.2s;
}

#report-handpan-svg .note-value { /* (e.g., "+3.5c") */
    font-size: 16px;
    font-weight: 700;
    /* 'fill' is set inline by JS (getDiffColorCode) */
    text-anchor: middle;
    dominant-baseline: central;
    transition: fill 0.2s;
}

/* --- Sizing for DING --- */
#report-handpan-svg .ding-label {
    font-size: 16px;
    fill: var(--text-secondary);
}
#report-handpan-svg .ding-name {
    font-size: 30px;
    fill: var(--text-primary);
}
#report-handpan-svg .ding-value {
    font-size: 22px;
}


/* --- Skipped State --- */
#report-handpan-svg .note-skipped .note-circle-bg {
    fill: var(--canvas-bg);
    stroke: var(--stroke-color);
    stroke-dasharray: 4 4;
}
#report-handpan-svg .note-skipped .note-label,
#report-handpan-svg .note-skipped .note-name { /* Added .note-name */
    fill: var(--text-secondary);
    opacity: 0.7;
}

#report-handpan-svg .note-skipped .note-value { /* This now holds "(Skipped)" */
    font-size: 14px; /* Make skipped text smaller */
    fill: var(--text-secondary);
    opacity: 0.7;
}

#report-handpan-svg .note-skipped.ding-value {
    font-size: 18px; /* Smaller skipped text for ding */
}
/* --- END: MODIFIED SVG TEXT STYLES --- */
/* --- ENDE: NEUES BERICHTS-TAB-LAYOUT --- */


/* --- START: EINHEITLICHES TABELLEN-STYLING FÜR DEN BERICHT --- */

/* Container mit Hintergrund, Rahmen und Rundungen */
.report-table-container {
    background-color: var(--result-bg);
    border: 1px solid var(--stroke-color);
    border-radius: 0.75rem; /* 12px */
    overflow: hidden; /* Rundungen bleiben sichtbar, Scrollen horizontal weiterhin möglich */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Gemeinsame Tabellenbasis */

.report-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.85rem; /* Kompaktere Grundschrift, damit mehr Noten auf eine Seite passen */
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .report-table {
        min-width: 460px;
        font-size: 0.75rem; /* Auf kleineren Bildschirmen noch etwas kompakter */
    }
}

.report-table thead th {
    background-color: var(--detected-note-bg);
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}

.report-table tbody td {
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--stroke-color);
    vertical-align: middle;
    word-break: break-word;
    font-size: 0.82rem;
}

.report-table tbody tr:first-child td {
    border-top: none;
}


.report-table tbody td:first-child {
    color: var(--text-primary);
    font-size: 0.9rem; /* Etwas kleiner, behält aber die visuelle Hierarchie bei */
    font-weight: 700;
}

/* Hilfsklasse für Zellen, die weiterhin oben ausgerichtet sein sollen */
.report-table tbody td.align-top {
    vertical-align: top;
}

#report-overview .report-table tbody td:nth-child(2) {
    color: var(--text-secondary);
}

/* Rating-Zellen (Spalten 3-6) */
.rating-cell {
    font-weight: 700;
    font-size: 0.875rem; /* 14px */
    vertical-align: middle; /* Wichtig, um Icon und Text zu zentrieren */
}

/* NEU: Wrapper *innerhalb* der Zelle für das Flex-Layout */
.rating-cell-content {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px Abstand zwischen Icon und Text */
}

/* Styling für die SVG-Icons in den Zellen */
.rating-cell-content svg {
    width: 1.125rem; /* 18px */
    height: 1.125rem; /* 18px */
    flex-shrink: 0; /* Verhindert, dass das Icon schrumpft */
}

/* Hilfsklassen für neue Grüntöne */
.text-rating-excellent { color: var(--color-green); }
.text-rating-accurate { color: var(--color-green-accurate); }
.bg-rating-excellent { background-color: var(--color-green); }
.bg-rating-accurate { background-color: var(--color-green-accurate); }
.text-sustain-very-long { color: var(--color-sustain-very-long); }
.text-sustain-long { color: var(--color-sustain-long); }
.text-sustain-medium { color: var(--color-sustain-medium); }
.text-sustain-short { color: var(--color-sustain-short); }
.text-sustain-very-short { color: var(--color-sustain-very-short); }

/* Farbstile für die Bewertungen */
.rating-excellent { color: var(--color-green); }
.rating-very-good { color: var(--color-green-accurate); }
.rating-good { color: var(--color-yellow); }
.rating-acceptable { color: var(--color-orange); }
.rating-poor { color: var(--color-red); }
.rating-sustain-very-long { color: var(--color-sustain-very-long); }
.rating-sustain-long { color: var(--color-sustain-long); }
.rating-sustain-medium { color: var(--color-sustain-medium); }
.rating-sustain-short { color: var(--color-sustain-short); }
.rating-sustain-very-short { color: var(--color-sustain-very-short); }
.rating-na { color: var(--text-secondary); opacity: 0.7; }

.score-summary-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.score-summary-badges {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

@media (min-width: 640px) {
    .score-summary-wrapper {
        flex-direction: row;
        align-items: center;
    }

    .score-summary-badges {
        flex-direction: column;
        align-items: center;
    }
}

.score-grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 0.6rem 1.25rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
    background-color: rgba(148, 163, 184, 0.18);
    border: 2px solid var(--stroke-color);
    text-align: center;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.22);
}

.score-grade-badge.score-grade-1 {
    color: var(--color-green);
    background-color: rgba(76, 175, 80, 0.18);
    border-color: rgba(76, 175, 80, 0.5);
}

.score-grade-badge.score-grade-2 {
    color: var(--color-green-accurate);
    background-color: rgba(139, 195, 74, 0.2);
    border-color: rgba(139, 195, 74, 0.55);
}

.score-grade-badge.score-grade-3 {
    color: var(--color-yellow);
    background-color: rgba(234, 179, 8, 0.22);
    border-color: rgba(234, 179, 8, 0.55);
}

.score-grade-badge.score-grade-4 {
    color: var(--color-orange);
    background-color: rgba(251, 146, 60, 0.22);
    border-color: rgba(251, 146, 60, 0.6);
}

.score-grade-badge.score-grade-5,
.score-grade-badge.score-grade-6 {
    color: var(--color-red);
    background-color: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.6);
}

.score-grade-badge.score-na {
    color: var(--text-secondary);
    background-color: rgba(148, 163, 184, 0.18);
    border-color: var(--stroke-color);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
}

.score-circle {
    --score-accent-color: var(--text-secondary);
    --score-inner-color: var(--canvas-bg);
    width: 150px;
    min-height: 190px;
    padding: 2.25rem 1rem 1.25rem;
    border-radius: 9999px;
    border: 8px solid var(--stroke-color);
    background-color: var(--score-inner-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    text-align: center;
    font-weight: 700;
    color: var(--score-accent-color);
    transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.3);
}

.score-circle span {
    font-size: 3rem;
    line-height: 1;
    color: var(--score-accent-color);
}

.score-circle small {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.score-circle.score-grade-1 {
    --score-accent-color: var(--color-green);
    border-color: var(--color-green);
    /* Innenfläche mit sattem Grün für Exzellent */
    --score-inner-color: rgba(76, 175, 80, 0.12);
}

.score-circle.score-grade-2 {
    --score-accent-color: var(--color-green-accurate);
    border-color: var(--color-green-accurate);
    /* Innenfläche mit gelbgrünem Ton für Genau */
    --score-inner-color: rgba(139, 195, 74, 0.12);
}

.score-circle.score-grade-3 {
    --score-accent-color: var(--color-yellow);
    border-color: var(--color-yellow);
    /* Innenfläche erhält einen zarten Gelbton passend zur Bewertung */
    --score-inner-color: rgba(234, 179, 8, 0.14);
}

.score-circle.score-grade-4 {
    --score-accent-color: var(--color-orange);
    border-color: var(--color-orange);
    /* Innenfläche erhält einen zarten Orangeton passend zur Bewertung */
    --score-inner-color: rgba(251, 146, 60, 0.16);
}

.score-circle.score-grade-5,
.score-circle.score-grade-6 {
    --score-accent-color: var(--color-red);
    border-color: var(--color-red);
    /* Innenfläche erhält einen zarten Rotton passend zur Bewertung */
    --score-inner-color: rgba(239, 68, 68, 0.18);
}

.score-circle.score-na {
    --score-accent-color: var(--text-secondary);
    border-color: var(--stroke-color);
    --score-inner-color: rgba(148, 163, 184, 0.08);
}

.score-summary-texts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.score-label {
    font-size: 1.25rem;
    font-weight: 700;
}

.score-label.score-grade-1,
.score-description.score-grade-1 {
    color: var(--color-green);
}

.score-label.score-grade-2,
.score-description.score-grade-2 {
    color: var(--color-green-accurate);
}

.score-label.score-grade-3,
.score-description.score-grade-3 {
    color: var(--color-yellow);
}

.score-label.score-grade-4,
.score-description.score-grade-4 {
    color: var(--color-orange);
}

.score-label.score-grade-5,
.score-description.score-grade-5 {
    color: var(--color-red);
}

.score-label.score-grade-6,
.score-description.score-grade-6 {
    color: #b91c1c;
}

.score-label.score-na,
.score-description.score-na {
    color: var(--text-secondary);
}

.score-description {
    font-size: 0.95rem;
}

/* --- ENDE: EINHEITLICHES TABELLEN-STYLING FÜR DEN BERICHT --- */