/* Microsoft AI-901 Simulator CSS Design System */

:root {
    /* Color Palette */
    --bg-primary: hsl(222, 26%, 9%);
    --bg-secondary: hsl(222, 20%, 13%);
    --bg-tertiary: hsl(222, 18%, 18%);
    --bg-terminal: hsl(222, 35%, 6%);
    
    --accent-primary: hsl(207, 100%, 41%); /* Microsoft Azure Blue */
    --accent-hover: hsl(207, 100%, 50%);
    --accent-glow: hsla(207, 100%, 41%, 0.25);
    
    --text-primary: hsl(0, 0%, 95%);
    --text-secondary: hsl(222, 12%, 70%);
    --text-muted: hsl(222, 10%, 64%);
    
    --border-color: hsla(0, 0%, 100%, 0.08);
    --border-hover: hsla(207, 100%, 50%, 0.3);
    
    --success-color: hsl(142, 65%, 43%);
    --error-color: hsl(354, 70%, 50%);
    --warning-color: hsl(38, 92%, 50%);
    
    --easy-color: hsl(142, 65%, 43%);
    --medium-color: hsl(38, 92%, 50%);
    --hard-color: hsl(0, 72%, 50%);

    --font-primary: 'Outfit', sans-serif;
    --font-mono: 'Fira Code', monospace;
    
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 18px;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Global Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Scrollbar customization */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* App Container Layout */
.app-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* View Panels Toggling */
.view-panel {
    display: none;
    flex-direction: column;
    flex-grow: 1;
    animation: fadeIn 0.4s ease-out;
}
.view-panel.active {
    display: flex;
}

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

/* Helper Components */
.clean-list {
    list-style: none;
}
.uppercase { text-transform: uppercase; }

/* ================= HEADER STYLE ================= */
.hero-header {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, hsla(207, 100%, 41%, 0.1) 0%, rgba(0,0,0,0) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
}

.azure-logo {
    font-size: 3rem;
    color: var(--accent-hover);
    text-shadow: 0 0 15px var(--accent-glow);
    margin-bottom: 10px;
    animation: logoGlow 3s infinite ease-in-out;
}

@keyframes logoGlow {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px var(--accent-glow)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 15px var(--accent-hover)); }
}

h1 {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 300;
}

/* ================= DASHBOARD VIEW ================= */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

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

.info-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 25px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    transition: transform 0.2s, border-color 0.2s;
}

.info-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-hover);
}

.info-card h2 {
    font-size: 1.3rem;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    color: var(--accent-hover);
}

.rules-card ul li {
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    color: var(--text-secondary);
}

.rules-card ul li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--accent-primary);
}

/* CLI command table */
.cli-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.cli-table th, .cli-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.cli-table th {
    color: var(--text-secondary);
    font-weight: 600;
}

.cmd-code {
    font-family: var(--font-mono);
    color: var(--warning-color);
    background-color: var(--bg-primary);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
}

/* History table */
.history-section {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 25px;
    margin-bottom: 30px;
}

.history-section h2 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.history-table th, .history-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
}

.history-table th {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
}

.no-history {
    text-align: center;
    color: var(--text-muted);
    padding: 30px !important;
    font-style: italic;
}

/* Badges */
.badge-status {
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}
.status-pass { background-color: rgba(20, 180, 90, 0.15); color: var(--success-color); border: 1px solid var(--success-color); }
.status-fail { background-color: rgba(220, 50, 50, 0.15); color: var(--error-color); border: 1px solid var(--error-color); }

/* Buttons Panels */
.actions-panel {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.action-btn {
    font-family: var(--font-primary);
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.large-btn {
    padding: 16px 40px;
    font-size: 1.2rem;
    border-radius: var(--border-radius-md);
}

.medium-btn {
    padding: 10px 24px;
    font-size: 1rem;
}

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

.primary-btn:hover {
    background-color: var(--accent-hover);
    box-shadow: 0 0 15px var(--accent-glow);
    transform: scale(1.02);
}

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

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

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

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

/* ================= EXAM PLAYER VIEW ================= */
.exam-header {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 15px 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
    .exam-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
}

.exam-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exam-code-tag {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--accent-hover);
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
}

.exam-header h2 {
    font-size: 1.2rem;
    font-weight: 600;
}

.exam-progress-container {
    flex-grow: 1;
    max-width: 450px;
    margin-left: 20px;
}

@media (max-width: 768px) {
    .exam-progress-container {
        max-width: 100%;
        margin-left: 0;
    }
}

.progress-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

#exam-timer {
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-weight: 600;
}

.progress-bar-bg {
    width: 100%;
    height: 8px;
    background-color: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--accent-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Shimmer sweep animation on progress bar */
.progress-bar-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmerSweep 2.5s infinite ease-in-out;
}

@keyframes shimmerSweep {
    0%   { left: -100%; }
    100% { left: 200%; }
}

.progress-bar-fill.accent-fill {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-hover));
}

.progress-bar-fill.easy-fill { background-color: var(--easy-color); }
.progress-bar-fill.medium-fill { background-color: var(--medium-color); }
.progress-bar-fill.hard-fill { background-color: var(--hard-color); }

/* ========== TIMER CRITICAL STATE ========== */
#exam-timer.timer-critical {
    color: var(--error-color) !important;
    animation: timerPulse 1s infinite ease-in-out;
}

@keyframes timerPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(1.08); }
}

/* ========== QUESTION TYPE BADGE ========== */
.type-badge {
    background-color: hsla(207, 100%, 41%, 0.12);
    border: 1px solid var(--accent-primary);
    color: var(--accent-hover);
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Exam Layout Split Panel */
.exam-layout {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Sidebar Drawer style */
.sidebar-drawer {
    width: 260px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 15px;
    display: flex;
    flex-direction: column;
    transition: width 0.3s, padding 0.3s, opacity 0.3s;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.sidebar-drawer.closed {
    width: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    border: none;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.drawer-header h3, .drawer-header h2 {
    font-size: 1.05rem;
    font-weight: 600;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s;
}

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

.matrix-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.badge {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.badge-unanswered { background-color: var(--bg-tertiary); border: 1px solid var(--border-color); }
.badge-answered { background-color: var(--accent-primary); }
.badge-marked { background-color: var(--warning-color); }

.question-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    overflow-y: auto;
    max-height: 400px;
    padding-right: 2px;
}

.grid-btn {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.85rem;
    aspect-ratio: 1;
    border: 1px solid var(--border-color);
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.grid-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.grid-btn.active {
    border-color: var(--accent-hover) !important;
    box-shadow: 0 0 8px var(--accent-glow);
    color: var(--text-primary) !important;
}

.grid-btn.answered {
    background-color: var(--accent-primary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.grid-btn.marked {
    border-color: var(--warning-color) !important;
    box-shadow: 0 0 6px rgba(230, 160, 10, 0.3);
}

.grid-btn.marked::after {
    content: "⚐";
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 0.65rem;
    color: var(--warning-color);
}

/* Question Workspace */
.question-workspace {
    flex-grow: 1;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
}

.question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.meta-badge {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.meta-badge.info-badge {
    color: var(--accent-hover);
}

.scenario-card {
    background-color: var(--bg-primary);
    border: 1px solid var(--accent-primary);
    border-radius: var(--border-radius-sm);
    padding: 15px 20px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.card-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-hover);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

#q-scenario-text {
    white-space: pre-wrap;
    font-family: inherit;
}

.question-prompt h3, .question-prompt h2 {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Answers Dynamic Rendering styles */
.answers-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Radio and Checkbox Styling */
.option-label {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
    position: relative;
    user-select: none;
}

.option-label:hover {
    border-color: var(--border-hover);
    background-color: var(--bg-secondary);
}

.option-label input[type="radio"],
.option-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.option-label.selected {
    border-color: var(--accent-primary);
    background-color: hsla(207, 100%, 41%, 0.05);
}

/* Custom Selector Circles & Checkboxes */
.radio-custom, .checkbox-custom {
    height: 18px;
    width: 18px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    margin-right: 15px;
    display: inline-block;
    flex-shrink: 0;
    transition: all 0.2s;
}

.radio-custom { border-radius: 50%; }
.checkbox-custom { border-radius: var(--border-radius-sm); }

.option-label:hover .radio-custom,
.option-label:hover .checkbox-custom {
    border-color: var(--text-secondary);
}

.option-label.selected .radio-custom {
    border-color: var(--accent-primary);
    background-color: var(--accent-primary);
    box-shadow: inset 0 0 0 3px var(--bg-tertiary);
}

.option-label.selected .checkbox-custom {
    border-color: var(--accent-primary);
    background-color: var(--accent-primary);
    box-shadow: inset 0 0 0 3px var(--bg-tertiary);
}

/* Matrix Table Styling */
.matrix-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.matrix-table th, .matrix-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.matrix-table th:first-child, .matrix-table td:first-child {
    text-align: left;
    width: 60%;
    color: var(--text-secondary);
}

.matrix-table th {
    font-weight: 600;
}

.matrix-radio {
    cursor: pointer;
    accent-color: var(--accent-primary);
    width: 18px;
    height: 18px;
}

/* Hotspot/Inline Dropdowns Styling */
.hotspot-paragraph {
    line-height: 2.2;
    font-size: 1.05rem;
    color: var(--text-secondary);
}

.hotspot-code-block {
    background-color: var(--bg-terminal);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    padding: 20px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    white-space: pre-wrap; /* Preserves newlines and spaces */
    line-height: 1.8;
    overflow-x: auto;
}

.hotspot-select {
    font-family: var(--font-primary);
    font-weight: 600;
    padding: 4px 10px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
    margin: 0 5px;
}

.hotspot-select:hover, .hotspot-select:focus {
    border-color: var(--accent-primary);
}

/* Drag and Drop Simulation Styling */
.drag-drop-panel {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .drag-drop-panel {
        flex-direction: column;
    }
}

.draggable-items-container {
    width: 35%;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.draggable-items-container h4, .draggable-items-container h3 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.drag-item {
    padding: 10px 14px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: grab;
    user-select: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: transform 0.1s, border-color 0.1s;
    text-align: center;
}

.drag-item:active { cursor: grabbing; }
.drag-item:hover { border-color: var(--text-secondary); }

.drag-targets-container {
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.target-row {
    display: flex;
    align-items: center;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 10px 15px;
    gap: 15px;
}

.target-label {
    flex-grow: 1;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.drop-zone {
    width: 180px;
    min-height: 42px;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-primary);
    transition: all 0.2s;
    padding: 4px;
}

.drop-zone.hover {
    border-color: var(--accent-primary);
    background-color: var(--accent-glow);
}

.drop-zone .drag-item {
    width: 100%;
    cursor: grab;
}

/* ================= CONTROLS FOOTER ================= */
.exam-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    margin-bottom: 15px;
    box-shadow: var(--shadow-sm);
}

@media (max-width: 500px) {
    .exam-footer {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (max-width: 500px) {
    .nav-controls {
        justify-content: space-between;
    }
}

.control-btn {
    font-family: var(--font-primary);
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.outline-btn {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.outline-btn:hover {
    background-color: var(--bg-primary);
    border-color: var(--text-secondary);
}

.review-checkbox-label {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.review-checkbox-label input[type="checkbox"] {
    margin-right: 8px;
    accent-color: var(--warning-color);
}

.submit-btn {
    background-color: var(--success-color);
    color: var(--text-primary);
}

.submit-btn:hover {
    background-color: hsl(142, 65%, 52%);
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(20, 180, 90, 0.25);
}

/* Bottom Terminal Command Console */
.terminal-bar {
    background-color: var(--bg-terminal);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 8px 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
}

.terminal-prompt {
    font-family: var(--font-mono);
    color: var(--success-color);
    font-size: 0.85rem;
    flex-shrink: 0;
}

#terminal-input {
    font-family: var(--font-mono);
    background: none;
    border: none;
    color: var(--text-primary);
    outline: none;
    font-size: 0.9rem;
    flex-grow: 1;
    width: 100%;
}

#terminal-input::placeholder {
    color: var(--text-muted);
}

.terminal-status-log {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px dashed rgba(255,255,255,0.05);
    padding-top: 4px;
}

/* ================= SYSTEM STATE DISPLAY ================= */
.system-state-footer {
    padding: 10px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    margin-top: 30px;
    text-transform: uppercase;
}

/* ================= DIALOG / MODAL STYLE ================= */
.submit-modal-dialog {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(30, 36, 48, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--text-primary);
    border-radius: var(--border-radius-lg);
    padding: 35px;
    margin: auto;
    max-width: 480px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    outline: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

.submit-modal-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-content h2 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.modal-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-btn {
    font-family: var(--font-primary);
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 0.95rem;
}

.cancel-btn {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.cancel-btn:hover { background-color: var(--bg-primary); }

.confirm-btn {
    background-color: var(--error-color);
    color: var(--text-primary);
}
.confirm-btn:hover { background-color: hsl(354, 70%, 58%); }

/* ================= REPORT / ANALYTICS VIEW ================= */
.report-header {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.session-id-label {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 6px;
}

/* Score Summary Gauge card */
.score-summary-card {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, hsla(207, 100%, 41%, 0.12) 0%, rgba(0,0,0,0) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 30px;
    gap: 40px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
}

@media (max-width: 600px) {
    .score-summary-card {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }
}

.score-gauge-container {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.score-radial-gauge {
    width: 100%;
    height: 100%;
}

.gauge-bg {
    fill: none;
    stroke: var(--bg-tertiary);
    stroke-width: 8;
}

.gauge-fill {
    fill: none;
    stroke: var(--accent-hover);
    stroke-width: 8;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1s ease-out;
}

.gauge-score {
    fill: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    text-anchor: middle;
    font-family: var(--font-primary);
}

.gauge-max {
    fill: var(--text-secondary);
    font-size: 0.65rem;
    text-anchor: middle;
    font-family: var(--font-primary);
}

.score-metrics-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.result-badge {
    align-self: flex-start;
    padding: 6px 16px;
    border-radius: var(--border-radius-sm);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
}

@media (max-width: 600px) {
    .result-badge {
        align-self: center;
    }
}

.pass-badge { background-color: var(--success-color); color: var(--text-primary); }
.fail-badge { background-color: var(--error-color); color: var(--text-primary); }

.probability-box {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 500px) {
    .probability-box {
        grid-template-columns: 1fr;
    }
}

.probability-box .label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.probability-box h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent-hover);
}

/* Report Cards grid */
.report-grid-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

@media (max-width: 800px) {
    .report-grid-section {
        grid-template-columns: 1fr;
    }
}

.report-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 25px;
}

.report-card h2 {
    font-size: 1.15rem;
    margin-bottom: 18px;
    color: var(--text-primary);
}

.metric-progress-item {
    margin-bottom: 18px;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* Advanced diagnostics styles */
.advanced-analytics-section,
.personalized-strategy-section,
.question-review-section {
    margin-bottom: 30px;
}

.advanced-analytics-section h2,
.personalized-strategy-section h2,
.question-review-section h2 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
}

.diagnostics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 850px) {
    .diagnostics-grid {
        grid-template-columns: 1fr;
    }
}

.diagnostics-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 25px;
}

.diagnostics-card h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.diagnostics-card .description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

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

/* Service Confusion Pairs styling */
.confusion-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.confusion-pair-row {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border: 1px solid var(--error-color);
    border-radius: var(--border-radius-sm);
    padding: 12px 15px;
}

.confusion-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.confusion-pair-row p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.no-confusion {
    text-align: center;
    color: var(--success-color);
    font-style: italic;
    padding: 15px 0;
    font-size: 0.9rem;
}

/* Confidence anomalies list */
.anomalies-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.anomaly-item-row {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 12px 15px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.anomaly-item-row.uncertain-correct {
    border: 1px solid var(--warning-color);
}

.anomaly-item-row.confident-incorrect {
    border: 1px solid var(--error-color);
}

.anomaly-title {
    font-weight: 700;
    margin-bottom: 4px;
}

/* Readiness matrix table */
.readiness-matrix-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.readiness-matrix-table th, .readiness-matrix-table td {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.readiness-matrix-table th {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
}

.risk-tag {
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
}
.risk-low { background-color: rgba(20, 180, 90, 0.15); color: var(--success-color); }
.risk-medium { background-color: rgba(230, 160, 10, 0.15); color: var(--warning-color); }
.risk-high { background-color: rgba(220, 50, 50, 0.15); color: var(--error-color); }

/* Personalized Strategy Study timeline */
.roadmap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.flex-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.timeline-container {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 20px;
    margin-top: 10px;
}

.timeline-container::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 4px;
    width: 2px;
    height: 90%;
    background-color: var(--border-color);
}

.timeline-step {
    position: relative;
    margin-bottom: 20px;
}

.timeline-step::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--accent-primary);
    border: 2px solid var(--bg-secondary);
}

.step-num {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-hover);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.step-details ul {
    list-style: square;
    padding-left: 15px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.step-details ul li {
    margin-bottom: 4px;
}

/* MS Learn lists & Blueprint tags */
.learn-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px 0;
}

.learn-item {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 10px 15px;
}

.learn-link {
    color: var(--accent-hover);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.learn-link:hover {
    text-decoration: underline;
}

.learn-item p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.next-blueprint-box {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.next-blueprint-box p {
    margin-bottom: 6px;
}

.blueprint-composition-gauge {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.blueprint-composition-gauge .badge {
    width: auto;
    height: auto;
    border-radius: var(--border-radius-sm);
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Question Review Walkthrough explorer */
.review-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.filter-btn {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 6px 12px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.filter-btn.active {
    background-color: var(--accent-primary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.review-questions-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review-question-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 25px;
}

.review-question-card.correct-card { border: 1px solid var(--success-color); }
.review-question-card.incorrect-card { border: 1px solid var(--error-color); }

.review-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.review-card-meta .left-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.review-card-meta .right-meta {
    font-weight: 700;
}

.review-question-card h4, .review-question-card .review-q-title {
    font-size: 1rem;
    margin-bottom: 15px;
    line-height: 1.5;
}

.review-answers-compare {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 15px;
    margin-bottom: 15px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.compare-row {
    margin-bottom: 8px;
}
.compare-row:last-child { margin-bottom: 0; }

.text-correct { color: var(--success-color); font-weight: 700; }
.text-incorrect { color: var(--error-color); font-weight: 700; }

.explanation-block {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.explanation-block h5, .explanation-block h4 {
    font-size: 0.9rem;
    color: var(--accent-hover);
    margin-bottom: 6px;
}

.explanation-block p {
    margin-bottom: 8px;
}
.explanation-block p:last-child { margin-bottom: 0; }

/* ================= PHASE 2 EXAM REVIEW STYLING ================= */
.review-choices-container {
    margin-bottom: 20px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 15px;
}

.review-options-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review-option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

.review-option-item.option-correct-selected {
    border-color: var(--success-color);
    background-color: rgba(20, 180, 90, 0.05);
}

.review-option-item.option-incorrect-selected {
    border-color: var(--error-color);
    background-color: rgba(220, 50, 50, 0.05);
}

.review-option-item.option-correct-missed {
    border-color: var(--success-color);
    border-style: dashed;
    background-color: rgba(20, 180, 90, 0.02);
}

.review-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.badge-correct {
    background-color: rgba(20, 180, 90, 0.15);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.badge-incorrect {
    background-color: rgba(220, 50, 50, 0.15);
    color: var(--error-color);
    border: 1px solid var(--error-color);
}

.badge-correct-missed {
    background-color: rgba(20, 180, 90, 0.05);
    color: var(--success-color);
    border: 1px dashed var(--success-color);
}

/* Matrix Review Table styling */
.review-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 5px;
}

.review-matrix-table th, .review-matrix-table td {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.review-matrix-table th:first-child, .review-matrix-table td:first-child {
    text-align: left;
    width: 50%;
}

.row-incorrect {
    background-color: rgba(220, 50, 50, 0.02);
}

.user-badge {
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 0.8rem;
}

.user-badge.match {
    background-color: rgba(20, 180, 90, 0.1);
    color: var(--success-color);
}

.user-badge.mismatch {
    background-color: rgba(220, 50, 50, 0.1);
    color: var(--error-color);
}

/* Hotspot & Drag Review rows */
.review-hotspot-block, .review-drag-drop-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review-hotspot-row, .review-target-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    background-color: var(--bg-secondary);
}

.review-hotspot-row.row-incorrect, .review-target-row.row-incorrect {
    border-color: rgba(220, 50, 50, 0.3);
}

.review-hotspot-row.row-correct, .review-target-row.row-correct {
    border-color: rgba(20, 180, 90, 0.3);
}

.part-result, .target-result {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

/* ========== AUTO-SAVE TOAST NOTIFICATION ========== */
#save-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background-color: hsl(142, 60%, 18%);
    border: 1px solid var(--success-color);
    color: var(--success-color);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    z-index: 9999;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#save-toast.toast-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========== READINESS COLOR CODING ========== */
.readiness-high { color: var(--success-color); }
.readiness-ready { color: var(--warning-color); }
.readiness-low  { color: var(--error-color); }

/* ========== POOL STATS WIDGET ========== */
.pool-stats-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.pool-stats-card h2 {
    font-size: 1.1rem;
    color: var(--accent-hover);
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.pool-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 700px) {
    .pool-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.pool-stat-item {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pool-stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pool-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.pool-stat-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.pool-coverage-good  { color: var(--success-color); }
.pool-coverage-ok    { color: var(--warning-color); }

/* Code Block Styles */
pre code.hljs {
    border-radius: 8px;
    padding: 16px;
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
    margin: 12px 0;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    background-color: #1e1e2e;
}
p code {
    background: rgba(255,255,255,0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
}

/* ================= VIEW TRANSITIONS ================= */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(root) {
  animation-name: fade-out;
}
::view-transition-new(root) {
  animation-name: fade-in;
}
@keyframes fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Export / Import / Reset */
.data-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.data-actions .data-note { flex: 1 1 100%; margin: 0; font-size: 0.85rem; opacity: 0.75; }

/* ================= LANGUAGE SWITCH ================= */
.lang-switch {
    align-self: flex-end;
    display: inline-flex;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}
.lang-btn {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: none;
    padding: 6px 14px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.lang-btn + .lang-btn {
    border-left: 1px solid var(--border-color);
}
.lang-btn:hover {
    color: var(--text-primary);
}
.lang-btn.active {
    background: var(--accent-primary);
    color: #fff;
}
.lang-btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

/* ================= LEARNING MATERIAL ================= */
.top-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.top-bar .lang-switch { margin-bottom: 0; }
.top-btn {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 6px 14px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.top-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.top-btn[hidden] { display: none; }
.small-btn { padding: 6px 12px; font-size: 0.85rem; }
.action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.learn-header { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.learn-header h1 { font-size: 1.6rem; margin: 0; }
.learn-header .subtitle { margin: 4px 0 0; color: var(--text-secondary); }
.learn-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md); padding: 10px 14px; margin-bottom: 12px;
}
.learn-dl-heading { font-size: 1rem; margin: 0; }
.learn-dl-lang { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-secondary); }
.learn-dl-lang select, .learn-filter {
    background: var(--bg-primary); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: var(--border-radius-sm);
    padding: 6px 10px; font: inherit; font-size: 0.9rem; max-width: 100%;
}
.learn-hint { flex-basis: 100%; margin: 0; font-size: 0.85rem; color: var(--warning-color); }
.learn-progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.learn-progress progress { flex: 1 1 160px; min-width: 120px; }
.learn-messages:empty { display: none; }
.learn-msg { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--border-radius-sm); background: var(--bg-tertiary); border: 1px solid var(--accent-primary); }
.learn-msg-error { border-color: var(--error-color); }
.learn-msg-ok { border-color: var(--success-color); }

.learn-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; align-items: start; flex-grow: 1; }
.learn-tree-pane {
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--border-radius-md);
    padding: 12px; position: sticky; top: 10px; max-height: calc(100vh - 40px); overflow-y: auto; min-width: 0;
}
.learn-filter { width: 100%; margin-bottom: 10px; box-sizing: border-box; }
.learn-node > summary { cursor: pointer; padding: 6px 4px; border-radius: var(--border-radius-sm); font-weight: 600; }
.learn-path > summary { font-size: 1rem; color: var(--text-primary); }
.learn-module { margin-left: 10px; }
.learn-module > summary { font-weight: 500; font-size: 0.92rem; color: var(--text-secondary); }
.learn-node > summary:hover, .learn-node > summary:focus-visible { background: var(--bg-tertiary); outline: none; }
.learn-count { margin-left: 8px; font-size: 0.75rem; color: var(--text-muted); }
.learn-units { list-style: none; margin: 0 0 6px 12px; padding: 0; }
.learn-units a {
    display: block; padding: 5px 8px; border-radius: var(--border-radius-sm);
    color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; overflow-wrap: anywhere;
}
.learn-units a:hover, .learn-units a:focus-visible { background: var(--bg-tertiary); color: var(--text-primary); outline: none; }
.learn-units a[aria-current="page"] { background: var(--accent-glow); color: var(--text-primary); font-weight: 600; }
.learn-badge {
    display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 1px 7px; border-radius: 10px;
    background: var(--bg-tertiary); color: var(--warning-color); border: 1px solid var(--border-color);
}
.learn-empty { color: var(--text-muted); padding: 20px 4px; }

.learn-reader-pane {
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--border-radius-md);
    padding: 20px 24px; min-width: 0; overflow-wrap: anywhere;
}
.learn-list-btn { display: none; margin-bottom: 12px; }
.learn-crumbs { margin: 0 0 6px; color: var(--text-secondary); font-size: 0.9rem; }
.learn-meta { margin: 0 0 10px; font-size: 0.9rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.learn-meta a { color: var(--accent-hover); }
.learn-notice { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--border-radius-sm); background: var(--bg-tertiary); border: 1px solid var(--warning-color); }
.learn-notice[hidden], .learn-badge[hidden] { display: none; }
.learn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.learn-content { line-height: 1.65; border-top: 1px solid var(--border-color); padding-top: 12px; }
.learn-content h1 { font-size: 1.6rem; }
.learn-content h1:focus { outline: none; }
.learn-content h2 { font-size: 1.3rem; margin-top: 1.6em; }
.learn-content h3 { font-size: 1.1rem; }
.learn-content img { max-width: 100%; height: auto; }
.learn-content a { color: var(--accent-hover); }
.learn-content pre { overflow-x: auto; max-width: 100%; border-radius: var(--border-radius-sm); }
.learn-content code { font-family: var(--font-mono); font-size: 0.88em; overflow-wrap: normal; }
.learn-content :not(pre) > code { background: var(--bg-tertiary); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.learn-content table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.learn-content th, .learn-content td { border: 1px solid var(--border-color); padding: 6px 10px; text-align: left; }
.learn-content blockquote { margin: 1em 0; padding: 4px 14px; border-left: 3px solid var(--accent-primary); color: var(--text-secondary); }
.learn-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.learn-footer { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--border-color); font-size: 0.8rem; color: var(--text-muted); }

@media (max-width: 768px) {
    .learn-layout { grid-template-columns: minmax(0, 1fr); }
    .learn-tree-pane { position: static; max-height: none; }
    .learn-layout[data-pane="list"] .learn-reader-pane { display: none; }
    .learn-layout[data-pane="read"] .learn-tree-pane { display: none; }
    .learn-list-btn { display: inline-block; }
    .learn-reader-pane { padding: 14px; }
    .learn-header h1 { font-size: 1.3rem; }
    .top-bar { flex-wrap: wrap; }
}
.learn-progress[hidden], .learn-empty[hidden] { display: none; }

/* ================= QUIZ NACH THEMA ================= */
.quiz-setup-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.quiz-setup-card h2 { font-size: 1.3rem; margin-bottom: 8px; }
.quiz-intro { color: var(--text-secondary); margin-bottom: 16px; line-height: 1.5; }
.quiz-setup-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 24px; align-items: start; }
.quiz-tree-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.quiz-tree {
    max-height: 420px; overflow-y: auto; padding: 10px 12px;
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm);
}
.quiz-path + .quiz-path { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.quiz-path > .quiz-row .quiz-check-title { font-weight: 700; }
.quiz-list { list-style: none; margin: 0; padding: 0 0 0 18px; }
.quiz-units { padding-left: 34px; }
.quiz-units[hidden] { display: none; }
.quiz-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; min-width: 0; }
.quiz-check { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; cursor: pointer; padding: 4px 0; }
.quiz-check input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent-primary); cursor: pointer; }
.quiz-check input:focus-visible, .quiz-toggle:focus-visible, .quiz-lesson-link:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.quiz-check-title { overflow-wrap: anywhere; font-size: 0.92rem; }
.quiz-count { flex: 0 0 auto; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.quiz-zero .quiz-check, .quiz-zero .quiz-count { opacity: 0.5; cursor: not-allowed; }
.quiz-zero .quiz-check input { cursor: not-allowed; }
.quiz-toggle {
    flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm);
    color: var(--text-secondary); cursor: pointer;
}
.quiz-toggle:hover { border-color: var(--border-hover); color: var(--text-primary); }
.quiz-caret::before { content: "▸"; }
.quiz-toggle[aria-expanded="true"] .quiz-caret::before { content: "▾"; }
.quiz-options { display: flex; flex-direction: column; gap: 14px; }
.quiz-field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.quiz-field label, .quiz-field legend { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); padding: 0; }
.quiz-field select {
    background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); padding: 8px 10px; font: inherit; max-width: 100%;
}
.quiz-radio { display: flex !important; align-items: flex-start; gap: 8px; cursor: pointer; font-weight: 400 !important; color: var(--text-primary) !important; margin-top: 6px; }
.quiz-radio input { margin-top: 3px; accent-color: var(--accent-primary); }
.quiz-radio small { display: block; color: var(--text-muted); font-size: 0.78rem; line-height: 1.35; }
.quiz-hint { min-height: 1.3em; margin: 0; font-size: 0.88rem; color: var(--text-secondary); }
#quiz-start-btn { align-self: flex-start; }
.primary-modal-btn { background-color: var(--accent-primary); color: var(--text-primary); }
.primary-modal-btn:hover { background-color: var(--accent-hover); }

/* Verlauf: Filter und Quiz-Badge */
.history-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hist-filter-btn {
    font-family: var(--font-primary); font-weight: 600; font-size: 0.85rem; padding: 6px 14px;
    background-color: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm);
    color: var(--text-secondary); cursor: pointer;
}
.hist-filter-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.hist-filter-btn.active { background-color: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-primary); }
.status-quiz { background-color: var(--accent-glow); color: var(--accent-hover); border: 1px solid var(--accent-primary); }
.status-partial { background-color: rgba(230, 160, 10, 0.15); color: var(--warning-color); border: 1px solid var(--warning-color); }
.history-scope { color: var(--text-secondary); font-size: 0.9rem; margin-left: 6px; overflow-wrap: anywhere; }

/* Quiz in der Prüfungsansicht */
.check-btn[hidden] { display: none; }
.check-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.action-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.answers-container.locked .option-label { cursor: default; }
.answers-container.locked .option-label:hover { border-color: var(--border-color); }
.answers-container.locked .drag-item, .answers-container.locked .drop-zone { pointer-events: none; }
.answers-container.locked select { opacity: 0.85; }
.option-label.opt-correct { border-color: var(--success-color); background-color: rgba(20, 180, 90, 0.12); }
.option-label.opt-wrong { border-color: var(--error-color); background-color: rgba(220, 50, 50, 0.12); }
.option-label.opt-correct::after { content: "✓"; margin-left: auto; padding-left: 10px; color: var(--success-color); font-weight: 700; }
.option-label.opt-wrong::after { content: "✗"; margin-left: auto; padding-left: 10px; color: var(--error-color); font-weight: 700; }
.grid-btn.chk-correct { background-color: var(--success-color); border-color: var(--success-color); color: #fff; }
.grid-btn.chk-partial { background-color: var(--warning-color); border-color: var(--warning-color); color: #1a1a1a; }
.grid-btn.chk-wrong { background-color: var(--error-color); border-color: var(--error-color); color: #fff; }
.quiz-feedback {
    margin-top: 20px; padding: 18px 20px; background: var(--bg-primary);
    border: 1px solid var(--border-color); border: 1px solid var(--accent-primary); border-radius: var(--border-radius-sm);
}
.quiz-feedback[hidden] { display: none; }
.quiz-feedback-correct { border-color: var(--success-color); }
.quiz-feedback-partial { border-color: var(--warning-color); }
.quiz-feedback-wrong { border-color: var(--error-color); }
.quiz-verdict { font-size: 1.1rem; margin-bottom: 4px; }
.quiz-verdict:focus { outline: none; }
.quiz-feedback-correct .quiz-verdict { color: var(--success-color); }
.quiz-feedback-partial .quiz-verdict { color: var(--warning-color); }
.quiz-feedback-wrong .quiz-verdict { color: var(--error-color); }
.quiz-locked-note { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px; }
.quiz-feedback .explanation-block, .quiz-feedback .review-choices-container { margin-top: 12px; }
.quiz-lessons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.quiz-lesson-link { max-width: 100%; white-space: normal; }
.quiz-no-lesson { font-size: 0.85rem; color: var(--text-muted); }
.learn-quiz-actions[hidden] { display: none; }
.learn-quiz-hint { flex-basis: 100%; margin: 0; font-size: 0.85rem; color: var(--warning-color); }
.learn-quiz-hint[hidden] { display: none; }

/* Quiz-Ergebnis */
.quiz-summary-card {
    display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
    background-color: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md); padding: 25px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.quiz-score-big { font-size: 3rem; font-weight: 700; color: var(--accent-hover); line-height: 1; }
.quiz-score-text { min-width: 0; }
.quiz-score-text h2 { font-size: 1.4rem; margin-bottom: 6px; }
.quiz-score-text p { color: var(--text-secondary); line-height: 1.5; margin: 2px 0; }
.quiz-note { font-size: 0.9rem; }
.quiz-note[hidden] { display: none; }
.quiz-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.quiz-review-section h2 { font-size: 1.3rem; margin: 10px 0 14px; }
.review-question-card.partial-card { border: 1px solid var(--warning-color); }
#quiz-result-title:focus { outline: none; }

@media (max-width: 768px) {
    .quiz-setup-grid { grid-template-columns: minmax(0, 1fr); }
    .quiz-setup-card { padding: 16px; }
    .quiz-tree { max-height: 340px; }
    .quiz-units { padding-left: 22px; }
    .quiz-list { padding-left: 10px; }
    .quiz-score-big { font-size: 2.4rem; }
    .quiz-summary-card { padding: 16px; gap: 14px; }
    .quiz-result-actions .action-btn { flex: 1 1 100%; }
    .action-controls { width: 100%; }
    .action-controls .control-btn { flex: 1 1 auto; }
    .quiz-feedback { padding: 14px; }
}

/* Feedback-Karte darf nie vom Footer überlagert werden */
.question-workspace > * { flex-shrink: 0; }
.question-workspace { min-width: 0; }

/* Quiz: Hinweis und Links zur weiterführenden Microsoft-Dokumentation */
.quiz-beyond { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--accent-hover); background: var(--bg-secondary, transparent); border-radius: 6px; }
.quiz-beyond-note { margin: 0; font-weight: 600; font-size: 0.9rem; }
.quiz-beyond h5, .quiz-beyond h4 { margin: 10px 0 4px; font-size: 0.85rem; color: var(--text-muted); }
.quiz-docs-list { margin: 0; padding-left: 18px; font-size: 0.9rem; }
.quiz-docs-list li { margin: 2px 0; }
.quiz-docs-list a { color: var(--accent-hover); overflow-wrap: anywhere; }

/* Quiz: Hinweis zum aktuellen Stand (update_note) */
.quiz-update-note { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--text-muted); background: var(--bg-secondary, transparent); border-radius: 6px; min-width: 0; }
.quiz-unote-retired, .quiz-unote-deprecated { border-color: var(--warning-color); }
.quiz-unote-head { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.quiz-unote-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; border: 1px solid var(--text-muted); color: inherit; }
.quiz-unote-retired .quiz-unote-badge, .quiz-unote-deprecated .quiz-unote-badge { border-color: var(--warning-color); background: rgba(230, 160, 10, 0.15); }
.quiz-unote-text { margin: 0 0 6px; font-size: 0.9rem; overflow-wrap: anywhere; }

/* ================= Drag & Drop: Tippen und Tastatur ================= */
.drag-hint { margin: 6px 0 4px; font-size: 0.85rem; color: var(--text-secondary); }
.drag-item { min-height: 44px; display: flex; align-items: center; justify-content: center; overflow-wrap: break-word; touch-action: manipulation; }
.drop-zone { min-height: 48px; flex: 0 0 180px; overflow-wrap: break-word; cursor: pointer; touch-action: manipulation; text-align: center; }
/* Review-Optionen: Badge rutscht bei schmaler Breite unter den Text, statt ihn zu quetschen */
.review-option-item { flex-wrap: wrap; gap: 6px 10px; }
.review-option-item .option-text { flex: 1 1 9rem; min-width: 0; overflow-wrap: break-word; }
.drag-item.selected, .drop-zone.selected { border-color: var(--accent-primary); background-color: var(--accent-glow); box-shadow: 0 0 0 2px var(--accent-primary); }
.drag-item:focus-visible, .drop-zone:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 2px; }
.drag-back-btn { min-height: 44px; }
.drag-back-btn[hidden] { display: none; }
.answers-container.locked [aria-disabled="true"] { cursor: default; }
@media (max-width: 768px) {
    .draggable-items-container, .drag-targets-container { width: 100%; box-sizing: border-box; }
    .target-row { flex-wrap: wrap; }
    .drop-zone { width: 100%; flex: 1 1 100%; box-sizing: border-box; }
}

/* Report: Dein Lernplan */
.learn-plan { margin-bottom: 20px; }
.learn-plan[hidden] { display: none; }
.learn-plan-intro { color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 12px; line-height: 1.45; }
.learn-plan-ok { color: var(--success-color); margin: 0; }
.learn-plan-modules, .learn-plan-units, .learn-plan-outside { list-style: none; margin: 0; padding: 0; }
.learn-plan-modules { display: flex; flex-direction: column; gap: 12px; }
.learn-plan-module { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 12px 15px; }
.learn-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.learn-plan-head h4, .learn-plan-head h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; min-width: 0; }
.learn-plan-units li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 4px 0; font-size: 0.9rem; }
.learn-plan-unit-title { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.learn-plan-unit-quota { color: var(--text-secondary); font-size: 0.82rem; }
.learn-plan-read, .learn-plan-outside .quiz-docs-list a { color: var(--accent-hover); font-weight: 600; }
.learn-plan-module > .action-btn { margin-top: 10px; }
.learn-plan-practice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.learn-plan-outside-title { margin: 20px 0 6px; font-size: 1rem; }
.learn-plan-outside > li { padding: 6px 0; border-top: 1px solid var(--border-color); font-size: 0.9rem; }
.learn-plan-outside-topic { font-weight: 600; overflow-wrap: anywhere; }
.learn-plan-nodocs { color: var(--text-muted); font-size: 0.82rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.quiz-weak-box { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }

/* ================= APP SHELL: SIDEBAR, TOP BAR, PAGES (js/nav.js) ================= */
:root {
    --nav-width: 248px;
    --topbar-height: 56px;
    --focus-ring: 0 0 0 3px hsl(207, 100%, 66%);
}
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 12px; top: -100px; z-index: 2000;
    background: var(--accent-primary); color: #fff; padding: 10px 16px;
    border-radius: var(--border-radius-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; outline: none; box-shadow: var(--focus-ring); }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.app-shell {
    display: grid;
    grid-template-columns: var(--nav-width) minmax(0, 1fr);
    min-height: 100vh;
}
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-container {
    max-width: 1200px;
    min-height: 0;
    flex: 1;
    padding: 8px 32px 40px;
}
.app-container:focus { outline: none; }

/* Sidebar */
.app-nav {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    padding: 16px 12px;
    z-index: 900;
}
.nav-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px 16px; margin-bottom: 4px;
    color: var(--text-primary); text-decoration: none;
    border-bottom: 1px solid var(--border-color);
}
.nav-brand-mark { color: var(--accent-hover); font-size: 1.3rem; line-height: 1; }
.nav-brand-text { font-size: 0.95rem; line-height: 1.2; color: var(--text-secondary); }
.nav-brand-text strong { color: var(--text-primary); font-size: 1.05rem; display: block; }
.nav-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.nav-link {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary); text-decoration: none; font-weight: 500;
    border-left: 3px solid transparent;
}
.nav-link:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.nav-link:focus-visible, .nav-brand:focus-visible, .nav-hint:focus-visible, .stat-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-link[aria-current="page"] {
    background: hsla(207, 100%, 41%, 0.16);
    color: var(--text-primary);
    border-left-color: var(--accent-hover);
}
.nav-link[aria-current="page"] .icon { color: var(--accent-hover); }
.nav-label { flex: 1; }
.nav-meta {
    font-size: 0.75rem; font-variant-numeric: tabular-nums;
    color: var(--text-muted); background: var(--bg-primary);
    padding: 2px 7px; border-radius: 999px;
}
.nav-meta:empty { display: none; }
.nav-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 6px; }
.nav-hint {
    background: none; border: none; color: var(--text-muted); font: inherit; font-size: 0.8rem;
    text-align: left; padding: 6px 12px; cursor: pointer; border-radius: var(--border-radius-sm);
}
.nav-hint:hover { color: var(--text-primary); }
kbd {
    font-family: var(--font-mono); font-size: 0.78rem;
    background: var(--bg-primary); color: var(--text-primary);
    border: 1px solid var(--border-color); border-bottom-width: 2px;
    border-radius: 4px; padding: 1px 6px;
}
.nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 890; }
.nav-backdrop[hidden] { display: none; }

/* Top bar */
.app-topbar {
    position: sticky; top: 0; z-index: 800;
    display: flex; align-items: center; gap: 12px;
    min-height: var(--topbar-height);
    padding: 8px 32px;
    background: hsla(222, 26%, 9%, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color);
}
.app-topbar .lang-switch { margin: 0 0 0 auto; align-self: center; }
.topbar-title { font-weight: 600; color: var(--text-secondary); display: none; }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle:focus-visible, .lang-btn:focus-visible, .pause-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pause-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.pause-btn .icon { width: 16px; height: 16px; }
.lang-btn { min-height: 36px; }

/* Page headers */
.page-header { margin: 20px 0 24px; max-width: 75ch; }
.page-header h1 { font-size: 2rem; margin-bottom: 8px; }
.page-header h1:focus, .exam-title:focus, #quiz-result-title:focus, #report-title:focus { outline: none; }
.page-eyebrow { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-hover); margin-bottom: 6px; }
.page-lead { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.55; }
.section-title { font-size: 1.25rem; margin-bottom: 14px; }
.learn-header { display: block; }
.learn-header .back-btn { margin-bottom: 14px; }
.learn-header .back-btn[hidden] { display: none; }

/* Overview: continue, stats, next step, areas */
.home-continue, .home-next {
    display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
    border-radius: var(--border-radius-md); padding: 20px 24px; margin-bottom: 20px;
}
.home-continue[hidden] { display: none; }
.home-continue {
    background: linear-gradient(135deg, hsla(207, 100%, 41%, 0.22), hsla(207, 100%, 41%, 0.06));
    border: 1px solid hsla(207, 100%, 50%, 0.45);
}
.home-next { background: var(--bg-secondary); border: 1px solid var(--border-color); }
.home-continue h2, .home-next h2 { font-size: 1.15rem; margin-bottom: 4px; }
.home-continue p, .home-next p { color: var(--text-secondary); line-height: 1.5; max-width: 70ch; }
.home-continue > div, .home-next > div { flex: 1 1 320px; min-width: 0; }
.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-tile {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md); padding: 18px 20px;
    color: inherit; text-decoration: none;
}
.stat-tile:hover { border-color: var(--border-hover); }
.stat-label { font-size: 0.85rem; color: var(--text-secondary); }
.stat-value { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 0.85rem; color: var(--text-muted); min-height: 1.2em; }
.stat-bar { display: block; height: 6px; background: var(--bg-tertiary); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.stat-bar > span { display: block; height: 100%; width: 0; background: var(--accent-primary); border-radius: inherit; }
.home-areas { margin: 8px 0 28px; }
.area-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.area-card {
    position: relative; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md); padding: 20px;
}
.area-card h3 { font-size: 1.1rem; }
.area-card p { color: var(--text-secondary); line-height: 1.5; flex: 1; }
.area-step {
    width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: hsla(207, 100%, 41%, 0.2); color: var(--accent-hover); font-weight: 700; font-size: 0.9rem;
}
a.action-btn { display: inline-block; text-decoration: none; }

/* Practice exams view */
.exam-start-card {
    display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
    background: linear-gradient(135deg, hsla(207, 100%, 41%, 0.14), transparent);
    border: 1px solid var(--border-color); border-radius: var(--border-radius-md);
    padding: 24px; margin-bottom: 24px;
}
.exam-start-text { flex: 1 1 320px; }
.exam-start-text h2 { font-size: 1.25rem; margin-bottom: 10px; }
.exam-facts { list-style: none; display: flex; flex-direction: column; gap: 6px; color: var(--text-secondary); margin-bottom: 10px; }
.exam-facts li::before { content: "✓ "; color: var(--success-color); font-weight: 700; }
.exams-last { color: var(--text-secondary); font-size: 0.9rem; }
.disclosure-card > summary { cursor: pointer; list-style: none; }
.disclosure-card > summary::-webkit-details-marker { display: none; }
.disclosure-card > summary h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0; border-bottom: none; }
.disclosure-card > summary h2::after { content: "▸"; color: var(--text-secondary); transition: transform 0.2s; }
.disclosure-card[open] > summary h2 { margin-bottom: 18px; border-bottom: 1px solid var(--border-color); }
.disclosure-card[open] > summary h2::after { transform: rotate(90deg); }
.disclosure-card > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--border-radius-sm); }
.dashboard-grid { align-items: start; }

/* Settings */
.settings-card {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md); padding: 20px 24px; margin-bottom: 16px; max-width: 860px;
}
.settings-card h2 { font-size: 1.15rem; margin-bottom: 10px; }
.settings-card p { color: var(--text-secondary); line-height: 1.5; }
.settings-card .data-actions { margin: 0; }
.shortcut-list { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; align-items: center; }
.shortcut-list dt { white-space: nowrap; color: var(--text-secondary); }
.shortcut-list dd { color: var(--text-primary); }
#shortcuts-dialog .modal-content { max-width: 560px; text-align: left; }

/* Learn: read marks and end-of-lesson quiz block */
.learn-read-mark { color: var(--success-color); margin-right: 6px; font-weight: 700; }
.learn-quiz-actions {
    margin: 28px 0 8px; padding: 20px;
    border: 1px solid hsla(207, 100%, 50%, 0.4); border-radius: var(--border-radius-md);
    background: hsla(207, 100%, 41%, 0.08);
}
.learn-quiz-actions[hidden] { display: none; }
.learn-quiz-heading { font-size: 1.15rem; margin-bottom: 6px; }
.learn-quiz-lead { color: var(--text-secondary); margin-bottom: 12px; line-height: 1.5; }

/* Focus mode: during an exam/quiz the sidebar is hidden */
body.focus-mode .app-shell { grid-template-columns: minmax(0, 1fr); }
body.focus-mode .app-nav, body.focus-mode .nav-toggle { display: none; }
body.focus-mode .topbar-title { display: block; }
body.focus-mode .app-container { max-width: 1400px; }

/* Narrow screens: sidebar becomes a drawer */
@media (max-width: 1023px) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .app-nav {
        position: fixed; left: 0; top: 0; bottom: 0; height: auto;
        width: min(300px, 85vw);
        transform: translateX(-100%); visibility: hidden;
        transition: transform 0.22s ease, visibility 0s linear 0.22s;
        box-shadow: var(--shadow-lg);
    }
    body.nav-open .app-nav { transform: none; visibility: visible; transition: transform 0.22s ease; }
    .nav-toggle { display: inline-flex; }
    .topbar-title { display: block; }
    .app-topbar { padding: 6px 16px; }
    .app-container { padding: 4px 16px 32px; }
    .home-stats, .area-list { grid-template-columns: minmax(0, 1fr); }
    .page-header h1 { font-size: 1.6rem; }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .home-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .app-nav, body.nav-open .app-nav { transition: none; }
    .view-panel { animation: none; }
}

/* ---- Schleife 1: Korrekturen aus den Reviews ---- */
.nav-close { display: none; align-self: flex-end; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 1023px) { .nav-close { display: inline-flex; } }

/* Systemzeile nur in der Prüfung; auf schmalen Bildschirmen weder Systemzeile noch CLI (Tastatur-Werkzeug) */
body:not([data-view="exam"]) .system-state-footer { display: none !important; }
@media (max-width: 1023px) { .system-state-footer { display: none !important; } }
@media (max-width: 767px) { .terminal-bar { display: none; } }

/* "Zur Überprüfung markieren": ein Kästchen, ausreichend groß */
.review-checkbox-label { min-height: 44px; gap: 8px; }
.review-checkbox-label input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }

/* Probeexamen: Karten im neuen Stil, untereinander */
#exams-view .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 24px; }
.info-card h2 { color: var(--text-primary); font-size: 1.15rem; }
.info-card:hover { transform: none; }
.pool-stats-card h2 { color: var(--text-primary); }
.pool-stat-value { font-family: var(--font-primary); }

/* Verlauf: auf schmalen Bildschirmen als Karten */
.history-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.history-action { text-align: right; }
@media (max-width: 639px) {
    .history-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .history-table, .history-table tbody, .history-table tr, .history-table td { display: block; width: 100%; }
    .history-table tr { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 8px 12px; margin-bottom: 10px; }
    .history-table td { border: none; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
    .history-table td[data-label]::before { content: attr(data-label); color: var(--text-secondary); text-align: left; }
    .history-table td.no-history { display: block; text-align: center; }
    .history-action { padding-top: 8px !important; }
    .history-action .view-report-btn { width: 100%; min-height: 44px; }
}

/* Touch: Zeilen im Quiz-Baum groß genug */
@media (pointer: coarse) {
    .quiz-row { min-height: 44px; }
    .quiz-toggle { min-width: 44px; min-height: 44px; }
}

/* Einstellungen: Schalter für Tastaturkürzel */
.settings-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 500; }
.settings-toggle input { width: 20px; height: 20px; accent-color: var(--accent-primary); }
.settings-hint { color: var(--text-secondary); font-size: 0.9rem; margin: 4px 0 14px; }
.settings-hint[hidden] { display: none; }

/* Quiz-Ergebnis: Lernanker */
.quiz-result-focus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; color: var(--text-primary); }
.quiz-result-focus[hidden] { display: none; }
#learn-quiz-mixed[hidden] { display: none; }

/* ---- Schleife 2: Korrekturen aus den Reviews ---- */
:root {
    --accent-text: hsl(207, 100%, 72%);     /* Akzent als Schrift auf dunklem Grund (>= 4.5:1) */
    --success-strong: hsl(142, 70%, 28%);   /* Grün als Fläche unter weißer Schrift */
}
.page-eyebrow, .nav-brand-mark, .nav-link[aria-current="page"] .icon, .area-step,
.quiz-score-big, .probability-box .probability-value { color: var(--accent-text); }

/* Ampelfarben schlagen den Akzent (Spezifität) */
.probability-box .probability-value { font-size: 1.6rem; font-weight: 700; margin: 2px 0 10px; }
.probability-box .probability-value.readiness-high, .quiz-score-big.readiness-high { color: var(--success-color); }
.probability-box .probability-value.readiness-ready, .quiz-score-big.readiness-ready { color: var(--warning-color); }
.probability-box .probability-value.readiness-low, .quiz-score-big.readiness-low { color: hsl(354, 85%, 68%); }

/* Kontrast im Fragegitter und beim Abgeben */
.grid-btn.answered { background-color: hsl(207, 100%, 34%); border-color: hsl(207, 100%, 34%); color: #fff; }
.grid-btn.chk-correct { background-color: var(--success-strong); border-color: var(--success-strong); color: #fff; }
.grid-btn.chk-wrong { background-color: hsl(354, 70%, 42%); border-color: hsl(354, 70%, 42%); }
.grid-btn[aria-current="step"] { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.submit-btn { background-color: var(--success-strong); color: #fff; }
.submit-btn:hover { background-color: hsl(142, 70%, 33%); }

/* Bericht: Lernplan oben, Aktionen direkt darunter, richtige Fragen eingeklappt */
.learn-plan-heading { font-size: 1.25rem; margin-bottom: 12px; }
.report-actions { justify-content: flex-start; flex-wrap: wrap; gap: 12px; padding: 0 0 24px; }
.review-card-meta .right-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-card-body[hidden] { display: none; }
.review-question-card:has(.review-card-body[hidden]) .review-q-title { margin-bottom: 0; }
.filter-btn[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--accent-text); }

/* Zuordnungs-/Dropdown-Auswertung: auf schmalen Bildschirmen umbrechen statt überlaufen */
.review-hotspot-row, .review-target-row { flex-wrap: wrap; }
.part-result, .target-result { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.review-badge { overflow-wrap: anywhere; }
@media (max-width: 639px) { .part-result, .target-result { flex: 1 1 100%; } }

/* Fokusmodus auf dem Handy: Kopfzeile einzeilig, Titel kompakt, Toast über der Fußleiste */
.topbar-title { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-topbar .lang-switch { flex: none; }
.exam-code-tag { white-space: nowrap; }
.exam-title { font-size: clamp(1.05rem, 4.2vw, 1.25rem); overflow-wrap: anywhere; }
@media (max-width: 639px) {
    .pause-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .pause-btn { min-width: 44px; min-height: 44px; justify-content: center; padding: 6px; }
    .lang-btn { padding: 6px 10px; }
    #save-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); right: 16px; left: 16px; text-align: center; }
}

/* Laufende Sitzung im Bereich */
.section-continue {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
    border: 1px solid hsla(207, 100%, 50%, 0.45); background: hsla(207, 100%, 41%, 0.12);
    border-radius: var(--border-radius-md); padding: 14px 18px; margin-bottom: 20px;
}
.section-continue[hidden] { display: none; }
.section-continue-text { color: var(--text-primary); }

/* Gefährliche Aktion (Fortschritt zurücksetzen) */
[data-danger] { color: hsl(354, 85%, 72%) !important; border-color: hsla(354, 70%, 50%, 0.6) !important; }
[data-danger]:hover { background: hsla(354, 70%, 50%, 0.12) !important; }

/* ---- Schleife 3: Korrekturen aus den Reviews ---- */
/* Code-Schrift: die globale Regel "* { font-family }" erreichte auch die Spans von highlight.js */
pre, code, kbd, samp { font-family: var(--font-mono); }
pre *, code * { font-family: inherit; }

/* Leseansicht: Absätze, Listen, Zeilenlänge */
.learn-content { max-width: 72ch; }
.learn-content :is(p, ul, ol, pre, table, blockquote) { margin: 0 0 0.9em; }
.learn-content h2 { margin: 1.6em 0 0.5em; }
.learn-content h3 { margin: 1.4em 0 0.4em; }
.learn-content :is(ul, ol) { padding-left: 1.4em; }
.learn-content li + li { margin-top: 0.25em; }
.learn-content li > :is(ul, ol) { margin: 0.25em 0 0; }
.learn-content pre { border: 1px solid var(--border-color); padding: 12px 14px; }
.learn-content pre code { background: none; padding: 0; }

/* Buttons: einheitliche Höhen (Haupt 40 px, klein 34 px, Touch 44 px), Text nicht umbrechen */
.action-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; }
.action-btn.small-btn { min-height: 34px; }
.action-btn.large-btn { min-height: 52px; }
.control-btn { white-space: nowrap; min-height: 40px; }
@media (pointer: coarse) { .action-btn, .action-btn.small-btn, .control-btn { min-height: 44px; } }

/* Üben: "Antwort prüfen" primär, "Quiz beenden" zurückgenommen */
.check-btn.is-primary { background-color: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.check-btn.is-primary:hover:not(:disabled) { background-color: hsl(207, 100%, 36%); }
.submit-btn.is-secondary { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-primary); }
.submit-btn.is-secondary:hover { background-color: var(--bg-tertiary); }
.quiz-feedback-next { display: flex; justify-content: flex-end; margin-top: 16px; }

/* Prüfungsansicht: Badges einheitlich in normaler Schreibung */
.question-meta .meta-badge { text-transform: none; }
.q-prompt:focus { outline: none; }

/* Handy: weniger Innenabstand (Karte in Karte), Matrix mit mehr Platz für die Aussagen */
@media (max-width: 639px) {
    .question-workspace, .report-card, .quiz-setup-card, .quiz-focus-card { padding: 16px; }
    .matrix-table th, .matrix-table td { padding: 10px 6px; }
    .matrix-table th:first-child, .matrix-table td:first-child { width: auto; }
}

/* Reflow/Textabstände (320 px): Auswahlfelder und Fußleiste dürfen umbrechen */
select { max-width: 100%; min-width: 0; }
.learn-dl-lang { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.exam-footer, .nav-controls, .action-controls { flex-wrap: wrap; gap: 10px; }
.history-filter[hidden] { display: none; }

/* Quizze: gezielt üben */
.quiz-focus-card {
    background-color: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md); padding: 24px; margin-bottom: 20px;
}
.quiz-focus-card > h2 { font-size: 1.25rem; margin-bottom: 14px; }
.quiz-focus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.quiz-focus-grid .quiz-weak-box { margin: 0; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-primary); }
.quiz-focus-grid h3 { font-size: 1rem; }
.quiz-focus-card .exams-last { margin-top: 12px; }
.quiz-focus-card .exams-last:empty { display: none; }
@media (max-width: 767px) { .quiz-focus-grid { grid-template-columns: minmax(0, 1fr); } }

/* Prüfungs-Fußleiste auf dem Handy: Zurück | Weiter, darunter Markieren, darunter Prüfen | Abgeben */
@media (max-width: 639px) {
    .exam-footer { flex-direction: column; align-items: stretch; }
    .nav-controls { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px; }
    .nav-controls #prev-btn { grid-column: 1; grid-row: 1; }
    .nav-controls #next-btn { grid-column: 2; grid-row: 1; }
    .nav-controls .review-checkbox-label { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
    .action-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); width: 100%; gap: 10px; }
    .action-controls > [hidden] { display: none; }
}

/* ---- Schleife 4: Korrekturen aus den Reviews ---- */
/* Fokus immer sichtbar (Rückfall für alle Bedienelemente, auch ältere Komponenten) */
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.learn-node > summary:focus-visible, .learn-units a:focus-visible, #terminal-input:focus-visible,
.hotspot-select:focus-visible, .quiz-check input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#terminal-input:focus { box-shadow: var(--focus-ring); }

/* Reduzierte Bewegung: alle Animationen/Übergänge aus (Glow, Shimmer, Timer-Puls, Gauge, Toast, Dialog) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Toast: unsichtbar auch für Screenreader, solange er nicht gezeigt wird */
#save-toast:not(.toast-visible) { visibility: hidden; }

/* Fragegitter: Schalter in der Prüfungs-Kopfzeile, zugeklappt ganz ausgeblendet, auf dem Handy über der Frage */
.grid-toggle-btn { flex: none; }
.sidebar-drawer.closed { display: none; }
@media (max-width: 767px) {
    .exam-layout { flex-direction: column; }
    .sidebar-drawer { width: auto; }
}

/* Prüfungsansicht: ruhiger, Zeilen nicht über die ganze Breite */
.card-label { color: var(--accent-text); letter-spacing: 0.02em; }
#exam-timer { font-family: var(--font-primary); font-variant-numeric: tabular-nums; }
.grid-btn.active { box-shadow: none; }
.primary-btn:hover, .submit-btn:hover { box-shadow: none; transform: none; }
.question-workspace > * { max-width: 80ch; }
.azure-logo { animation: none; }

/* Bericht-Kopf und Diagnosekarten im Stil der übrigen Seiten */
.result-badge { font-size: 0.95rem; padding: 4px 12px; letter-spacing: 0.02em; }
.pass-badge { background-color: hsla(142, 65%, 43%, 0.18); color: var(--success-color); border: 1px solid var(--success-color); }
.fail-badge { background-color: hsla(354, 70%, 50%, 0.18); color: hsl(354, 85%, 72%); border: 1px solid hsla(354, 70%, 50%, 0.7); }
.probability-box { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 40px; }
.session-id-label { font-family: var(--font-primary); color: var(--text-muted); }
.report-progress { color: var(--text-primary); font-weight: 600; margin: 8px 0; }
.diagnostics-grid { align-items: start; }
.anomaly-title { color: var(--text-primary) !important; font-weight: 600; }
.learn-plan-outside .quiz-docs-list a, .quiz-docs-list a { font-weight: 400; text-decoration-color: hsla(207, 100%, 72%, 0.4); text-underline-offset: 3px; }
.learn-plan-outside { columns: 2 320px; column-gap: 32px; }
.learn-plan-outside > li { break-inside: avoid; }

/* ---- Schleife 5: Abschluss-Feinschliff aus den Reviews ---- */
/* hidden schlägt immer (z. B. .action-btn { display: inline-flex }) */
[hidden] { display: none !important; }

/* Kontrast: Primärflächen, Fehlerrot als Schrift, Akzent auf Badges */
:root { --error-text: hsl(354, 85%, 68%); --primary-fill: hsl(207, 100%, 36%); }
.primary-btn, .primary-modal-btn { background-color: var(--primary-fill); color: #fff; }
.primary-btn:hover, .primary-modal-btn:hover { background-color: hsl(207, 100%, 31%); }
.risk-high, .status-fail, .badge-incorrect, .user-badge.mismatch, .text-incorrect, .quiz-feedback-wrong .quiz-verdict { color: var(--error-text); }
.status-fail, .badge-incorrect { border-color: hsla(354, 70%, 50%, 0.7); }
.exam-code-tag, .meta-badge.info-badge { color: var(--accent-text); }

/* Lektion offen: Seitentitel "Inhalte" ausblenden, der Lektionstitel ist die h1 */
#learn-view.is-reading .learn-header > :not(.back-btn) { display: none; }
#learn-view.is-reading .learn-header { margin-bottom: 8px; }

/* Toast auf dem Handy oben (über der Fußleiste lag er auf den Buttons), Schrift wie überall */
#save-toast { font-family: var(--font-primary); }
@media (max-width: 639px) { #save-toast { top: calc(var(--topbar-height) + 8px); bottom: auto; } }

/* Kennzahlen im Bericht: auf Grundlinie, mobil untereinander */
.probability-box { align-items: baseline; }
@media (max-width: 500px) { .probability-box { grid-template-columns: minmax(0, 1fr); } }

/* Aufklappbare Karten auch mit h3 (3-Tage-Plan im Bericht) */
.disclosure-card > summary :is(h2, h3) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0; border-bottom: none; }
.disclosure-card > summary :is(h2, h3)::after { content: "▸"; color: var(--text-secondary); transition: transform 0.2s; }
.disclosure-card[open] > summary :is(h2, h3)::after { transform: rotate(90deg); }
.disclosure-card[open] > summary h3 { margin-bottom: 14px; }

/* Szenario: kein vorformatierter Leerraum aus dem Markdown */
#q-scenario-text { white-space: normal; }
#q-scenario-text > :last-child { margin-bottom: 0; }
#q-scenario-text p + p { margin-top: 0.6em; }

/* Dialoge auf dem Handy mit Rand */
.submit-modal-dialog { max-width: min(480px, calc(100vw - 32px)); }
.submit-modal-dialog .modal-content { padding: clamp(20px, 5vw, 35px); }
.modal-buttons { margin-top: 16px; }

/* "Zurück zur Liste" nur im einspaltigen Layout (die Button-Regel aus Schleife 3 hatte das überschrieben) */
.action-btn.learn-list-btn { display: none; }
@media (max-width: 768px) { .action-btn.learn-list-btn { display: inline-flex; } }

.result-link { color: var(--accent-text); font-weight: 600; text-underline-offset: 3px; }

/* Zuordnung: belegte Zone ohne zusätzlichen gestrichelten Rahmen */
.drop-zone:has(.drag-item) { border-color: transparent; }

/* ======================================================================
   Prüfungs- und Quiz-Ansicht im Stil des Microsoft Practice Assessments
   Variablen nur auf #exam-view (Farbschema hell/dunkel, ai901_exam_theme);
   der Rest der App bleibt unverändert. Breakpoints: 639 / 767 / 1023 px.
   ====================================================================== */
#exam-view {
    --ev-navy: #2b4263; --ev-navy-hover: #1f3350; --ev-on-navy: #ffffff;
    --ev-rail: #edebe9; --ev-track: #c8c6c4; --ev-pill: #605e5c; --ev-on-pill: #ffffff;
    --ev-ok: #0b6a0b; --ev-ok-bg: #effaf0; --ev-bad: #a4262c; --ev-bad-bg: #fdf3f4;
    --ev-explain: #eff9ef; --ev-note: #fffbd6; --ev-link: #0b5cad; --ev-focus: #005a9e;
    --ev-row-hover: #f3f2f1; --ev-switch: #2b4263;
}
#exam-view[data-exam-theme="light"] {
    --bg-primary: #f3f2f1; --bg-secondary: #ffffff; --bg-tertiary: #ffffff; --bg-terminal: #ffffff;
    --text-primary: #201f1e; --text-secondary: #424140; --text-muted: #605e5c;
    --border-color: #c8c6c4; --border-hover: #8a8886;
    --accent-primary: #2b4263; --accent-hover: #1f3350; --accent-text: #2b4263; --accent-glow: rgba(43, 66, 99, 0.12);
    --success-color: #0b6a0b; --error-color: #a4262c; --error-text: #a4262c; --warning-color: #8a5a00;
    --primary-fill: #2b4263; --focus-ring: 0 0 0 3px #005a9e;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
    color-scheme: light;
}
#exam-view[data-exam-theme="dark"] {
    --ev-navy: #0f6cbd; --ev-navy-hover: #115ea3; --ev-rail: hsl(222, 22%, 12%); --ev-track: hsl(222, 12%, 32%);
    --ev-pill: hsl(222, 14%, 30%); --ev-ok: #6fdc8c; --ev-ok-bg: rgba(20, 180, 90, 0.12);
    --ev-bad: #ff9aa2; --ev-bad-bg: rgba(220, 50, 50, 0.14); --ev-explain: rgba(20, 180, 90, 0.1);
    --ev-note: rgba(230, 190, 40, 0.14); --ev-link: #7cc0ff; --ev-focus: #7cc0ff; --ev-row-hover: hsl(222, 18%, 18%);
    --ev-switch: #0f6cbd;
    --border-color: hsl(222, 12%, 30%); --text-secondary: hsl(222, 12%, 78%); --success-color: #6fdc8c; --error-color: #ff9aa2;
    --error-text: #ff9aa2;
    color-scheme: dark;
}

#exam-view.active { display: flex; flex-direction: row; align-items: stretch; background: var(--bg-primary); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 4px; min-height: calc(100vh - var(--topbar-height) - 24px); overflow: hidden; animation: none; }
#exam-view :focus-visible { outline: 3px solid var(--ev-focus); outline-offset: 2px; box-shadow: none; }

/* Symbolleiste */
#exam-view .exam-rail { flex: none; width: 56px; background: var(--ev-rail); display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 6px; }
#exam-view.rail-open .exam-rail { width: 188px; }
#exam-view .rail-btn { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; background: transparent; border: 0; border-radius: 4px; color: var(--text-primary); font: inherit; font-size: 0.9rem; cursor: pointer; text-align: left; white-space: nowrap; }
#exam-view .rail-btn:hover { background: var(--ev-row-hover); }
#exam-view .rail-btn[aria-pressed="false"] { color: var(--text-muted); }
#exam-view .rail-btn .icon { width: 22px; height: 22px; }
#exam-view .rail-label { display: none; }
#exam-view.rail-open .rail-label { display: inline; }
#exam-view.rail-open .rail-toggle .icon { transform: scaleX(-1); }
#exam-view .rail-sep { height: 1px; background: var(--border-color); margin: 6px 4px; }
#exam-view .rail-btn[aria-pressed="false"] .icon { opacity: 0.55; }

#exam-view .exam-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 14px 28px 20px; }

/* Kopfzeile */
#exam-view .exam-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title progress actions" "qno progress actions";
    align-items: center; gap: 0 24px; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; }
#exam-view .exam-title-area { grid-area: title; gap: 8px; min-width: 0; }
#exam-view .exam-code-tag { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.7rem; padding: 1px 6px; }
#exam-view .exam-title { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); overflow-wrap: anywhere; }
#exam-view .exam-qno { grid-area: qno; font-size: 1.4rem; font-weight: 700; line-height: 1.3; margin: 0; }
#exam-view .exam-progress-block { grid-area: progress; width: min(420px, 38vw); }
#exam-view .exam-progress-block[hidden] { display: none; }
#exam-view .progress-switch { display: flex; justify-content: flex-end; align-items: center; gap: 10px; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--text-secondary); }
#exam-view .switch-track { position: relative; width: 38px; height: 20px; border-radius: 10px; background: var(--ev-switch); }
#exam-view .switch-knob { position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
#exam-view .progress-segments { display: flex; gap: 16px; margin-top: 4px; }
#exam-view .seg-main { flex: 1; min-width: 0; }
#exam-view .seg-review { flex: none; width: 96px; }
#exam-view .seg-label { display: block; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--text-secondary); margin-bottom: 4px; white-space: nowrap; }
#exam-view .progress-bar-bg { height: 10px; border-radius: 5px; background: var(--ev-track); overflow: hidden; }
#exam-view .progress-bar-fill { height: 100%; background: var(--ev-navy); border-radius: 5px; transition: width 0.2s; }
#exam-view .exam-head-actions { grid-area: actions; display: flex; align-items: center; gap: 12px; }
#exam-view .exam-timer { font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#exam-view .submit-btn, #exam-view .submit-btn.is-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--ev-navy); padding: 6px 14px; border-radius: 4px; font-size: 0.85rem; min-height: 36px; }
#exam-view .submit-btn:hover { background: var(--ev-row-hover); transform: none; box-shadow: none; }

/* Fragenkarte */
#exam-view .exam-layout { flex: 1; gap: 16px; margin: 0; align-items: flex-start; min-height: 0; }
#exam-view .sidebar-drawer { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 2px; box-shadow: none; width: 240px; }
#exam-view .sidebar-drawer.closed { display: none; }
#exam-view .question-workspace { flex: 1; min-width: 0; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 2px; padding: 32px 40px 28px; box-shadow: none; }
#exam-view .question-workspace > * { max-width: 100ch; }
#exam-view .question-workspace[hidden] { display: none; }
#exam-view .question-prompt .q-prompt, #exam-view .question-prompt h2 { font-size: 1.02rem; font-weight: 400; line-height: 1.55; margin-bottom: 22px; }
#exam-view .question-prompt p { margin: 0 0 8px; }
#exam-view[data-kind="exam"] .question-meta { display: none; }
#exam-view[data-kind="quiz"] #q-meta-objective, #exam-view[data-kind="quiz"] #q-meta-difficulty, #exam-view[data-kind="quiz"] #q-meta-type { display: none; }
#exam-view .question-meta { margin-bottom: 12px; }
#exam-view .scenario-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 2px; color: var(--text-primary); }
#exam-view .select-hint { margin: -10px 0 14px; font-weight: 600; font-size: 0.92rem; color: var(--text-primary); }
#exam-view .select-hint[hidden] { display: none; }

/* Antworten: Radio/Checkbox mit Buchstabe, farbiger Rahmen bei angezeigter Lösung */
#exam-view .answers-container { gap: 4px; }
#exam-view .option-label { background: transparent; border: 2px solid transparent; border-radius: 999px; padding: 10px 16px; font-size: 1rem; line-height: 1.4; transition: none; }
#exam-view .option-label:hover { background: var(--ev-row-hover); border-color: transparent; }
#exam-view .option-label.selected { background: transparent; border-color: transparent; }
#exam-view .option-label:focus-within { outline: 3px solid var(--ev-focus); outline-offset: 2px; }
#exam-view .radio-custom, #exam-view .checkbox-custom { width: 22px; height: 22px; margin-right: 14px; background: var(--bg-secondary); border: 2px solid var(--text-muted); box-shadow: none; }
#exam-view .option-label:hover .radio-custom, #exam-view .option-label:hover .checkbox-custom { border-color: var(--text-primary); }
#exam-view .option-label.selected .radio-custom { border-color: var(--ev-navy); background: var(--bg-secondary); box-shadow: inset 0 0 0 4px var(--ev-navy); }
#exam-view .option-label.selected .checkbox-custom { border-color: var(--ev-navy); background: var(--ev-navy); box-shadow: none; position: relative; }
#exam-view .option-label.selected .checkbox-custom::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--ev-on-navy); border-width: 0 2px 2px 0; transform: rotate(45deg); }
#exam-view .opt-letter { font-weight: 700; margin-right: 12px; min-width: 1.2em; }
#exam-view .opt-text { min-width: 0; overflow-wrap: anywhere; }
#exam-view .answers-container.locked .option-label:hover { background: transparent; }
#exam-view .option-label.opt-correct { border-color: var(--ev-ok); background: var(--ev-ok-bg); }
#exam-view .option-label.opt-wrong { border-color: var(--ev-bad); background: var(--ev-bad-bg); }
#exam-view .option-label.opt-correct::after, #exam-view .option-label.opt-wrong::after { content: none; }
#exam-view .opt-verdict { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px 16px; font-size: 0.95rem; }
#exam-view .opt-verdict::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none; background-repeat: no-repeat; background-position: center; background-size: 10px; }
#exam-view .opt-verdict.is-ok { color: var(--ev-ok); }
#exam-view .opt-verdict.is-ok::before { background-color: var(--ev-ok); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
#exam-view .opt-verdict.is-bad { color: var(--ev-bad); }
#exam-view .opt-verdict.is-bad::before { background-color: var(--ev-bad); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }

/* Fragetypen: Matrix, Dropdown, Zuordnung */
#exam-view .matrix-table { border: 1px solid var(--border-color); margin-top: 4px; }
#exam-view .matrix-table th { background: var(--bg-primary); color: var(--text-primary); text-align: center; border: 1px solid var(--border-color); }
#exam-view .matrix-table th:first-child { text-align: left; }
#exam-view .matrix-table td { border: 1px solid var(--border-color); }
#exam-view .matrix-table td:first-child { color: var(--text-primary); }
#exam-view .matrix-radio { accent-color: var(--ev-navy); }
#exam-view .answer-area { border: 1px solid var(--border-color); border-radius: 2px; padding: 12px 18px 16px; }
#exam-view .answer-area-label { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 4px; }
#exam-view .hotspot-paragraph { color: var(--text-primary); font-size: 1rem; line-height: 2.4; }
#exam-view .hotspot-select { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--text-muted); border-radius: 2px; font-weight: 400; min-height: 36px; max-width: 100%; }
#exam-view .hotspot-select:focus { border-color: var(--ev-navy); }
#exam-view .draggable-items-container { background: var(--bg-primary); }
#exam-view .drag-item { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--text-muted); font-weight: 500; }
#exam-view .drag-item.selected, #exam-view .drop-zone.selected { border-color: var(--ev-navy); background: var(--accent-glow); box-shadow: 0 0 0 2px var(--ev-navy); }
#exam-view .drop-zone { background: var(--bg-secondary); border-color: var(--text-muted); }
#exam-view .target-row, #exam-view .drag-targets-container > * { color: var(--text-primary); }

/* Aktionen unter den Antworten */
#exam-view .answer-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 14px; }
#exam-view .pill-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: 0.95rem; cursor: pointer; border: 2px solid transparent; }
#exam-view .pill-btn .icon { width: 18px; height: 18px; }
#exam-view .pill-grey { background: var(--ev-pill); color: var(--ev-on-pill); }
#exam-view .pill-grey:hover:not(:disabled) { background: var(--text-primary); color: var(--bg-secondary); }
#exam-view .pill-outline { background: transparent; color: var(--text-primary); border-color: var(--ev-pill); }
#exam-view .pill-outline:hover:not(:disabled) { background: var(--ev-row-hover); }
#exam-view .pill-btn:disabled { opacity: 0.55; cursor: not-allowed; }
#exam-view .check-btn.is-primary { background: transparent; color: var(--text-primary); border-color: var(--ev-pill); }
#exam-view .check-btn[hidden] { display: none; }
#exam-view .review-checkbox-label { font-size: 0.95rem; color: var(--text-primary); min-height: 36px; width: fit-content; }
#exam-view .review-checkbox-label input[type="checkbox"] { width: 20px; height: 20px; margin-right: 10px; accent-color: var(--ev-navy); }

/* Lösung im Übungs-Quiz: grüne Erklärungsbox */
#exam-view .quiz-feedback { background: var(--ev-explain); border: 0; border-radius: 0; padding: 18px 24px; margin-top: 16px; color: var(--text-primary); }
#exam-view .quiz-feedback .quiz-verdict { font-size: 1rem; }
#exam-view .quiz-feedback a { color: var(--ev-link); }
#exam-view .quiz-feedback .explanation-block { background: transparent; border: 0; padding: 0; }

/* Previous / Next */
#exam-view .exam-footer { background: transparent; border: 0; padding: 0; margin: 0; box-shadow: none; }
#exam-view .nav-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
#exam-view .nav-controls.is-review { grid-template-columns: 1fr; }
#exam-view .nav-pill { display: flex; align-items: center; justify-content: center; position: relative; min-height: 46px; padding: 0 44px; border-radius: 2px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; border: 2px solid var(--ev-navy); }
#exam-view .nav-pill[hidden] { display: none; }
#exam-view .nav-pill .icon { position: absolute; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; }
#exam-view .nav-pill-prev { background: transparent; color: var(--text-primary); }
#exam-view .nav-pill-prev .icon { left: 14px; }
#exam-view .nav-pill-prev:hover { background: var(--ev-row-hover); }
#exam-view .nav-pill-next { background: var(--ev-navy); color: var(--ev-on-navy); grid-column: 2; }
#exam-view .nav-pill-next .icon { right: 14px; }
#exam-view .nav-pill-next:hover { background: var(--ev-navy-hover); }
#exam-view #exit-review-btn { grid-column: 1 / -1; }

/* Review-Seite */
#exam-view .exam-review { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
#exam-view .exam-review[hidden] { display: none; }
#exam-view .review-title { display: none; }
#exam-view .review-instructions { position: relative; background: var(--ev-note); border: 1px solid var(--border-color); padding: 14px 20px; color: var(--text-primary); }
#exam-view .review-instructions h3 { font-size: 1.05rem; margin: 0 0 6px; }
#exam-view .review-instructions ul { margin: 0; padding-left: 20px; line-height: 1.7; }
#exam-view .review-instructions.is-collapsed { padding-top: 10px; padding-bottom: 10px; min-height: 48px; }
#exam-view .link-btn { position: absolute; right: 16px; top: 8px; background: none; border: 0; color: var(--text-primary); font: inherit; font-size: 0.9rem; cursor: pointer; padding: 6px 8px; min-height: 32px; }
#exam-view .link-btn:hover { text-decoration: underline; }
#exam-view .review-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; background: var(--bg-primary); border: 1px solid var(--border-color); padding: 10px 20px; margin: 0; min-width: 0; }
#exam-view .review-filter legend { float: left; padding: 0; margin-right: 18px; color: var(--text-secondary); line-height: 1.8; }
#exam-view .review-filter label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
#exam-view .review-filter input { width: 20px; height: 20px; accent-color: var(--ev-navy); }
#exam-view .review-filter label.is-disabled { color: var(--text-muted); cursor: not-allowed; }
#exam-view .review-filter input:checked + span { font-weight: 700; }
#exam-view .review-table-wrap { border: 1px solid var(--border-color); background: var(--bg-secondary); max-height: 58vh; overflow: auto; }
#exam-view .review-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#exam-view .review-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-secondary); font-weight: 400; font-style: italic; text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border-color); }
#exam-view .review-table thead th.col-flag { font-style: normal; text-align: center; width: 112px; border-left: 1px solid var(--border-color); }
#exam-view .review-table td { border-bottom: 1px solid var(--border-color); padding: 0; vertical-align: middle; }
#exam-view .review-table td.col-nr, #exam-view .review-table th.col-nr { width: 52px; padding-left: 14px; }
#exam-view .review-table td.col-flag { text-align: center; border-left: 1px solid var(--border-color); }
#exam-view .review-table tbody tr:hover { background: var(--ev-row-hover); }
#exam-view .review-row-btn { display: block; width: 100%; min-height: 46px; padding: 12px 10px; background: none; border: 0; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#exam-view .review-row-btn:focus-visible { outline-offset: -3px; }
#exam-view .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--ev-navy); }
#exam-view .review-actions { display: flex; }
#exam-view .review-actions .nav-pill { width: min(420px, 100%); grid-column: auto; }

/* CLI-Leiste: eine Zeile, einklappbar */
#exam-view .terminal-bar { flex-direction: row; align-items: center; gap: 10px; padding: 4px 10px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 2px; box-shadow: none; min-height: 40px; }
#exam-view .cli-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; background: none; border: 0; color: var(--text-secondary); font: inherit; font-size: 0.82rem; cursor: pointer; padding: 0 6px; flex: none; }
#exam-view .cli-toggle:hover { color: var(--text-primary); }
#exam-view .cli-toggle .icon { width: 18px; height: 18px; }
#exam-view .terminal-bar.cli-collapsed { width: fit-content; }
#exam-view .terminal-body { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
#exam-view .terminal-body[hidden] { display: none; }
#exam-view .terminal-prompt { color: var(--ev-ok); }
#exam-view #terminal-input { color: var(--text-primary); min-width: 0; flex: 1 1 40%; padding: 4px 0; }
#exam-view #terminal-input::placeholder { color: var(--text-muted); }
#exam-view .terminal-status-log { border: 0; padding: 0; flex: 1 1 40%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }

/* Hilfe-Dialog (liegt im #exam-view und erbt dessen Variablen) */
.exam-help-dialog { margin: auto; max-width: min(520px, calc(100vw - 32px)); padding: 24px 28px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-secondary); color: var(--text-primary); }
.exam-help-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.exam-help-dialog h2 { font-size: 1.2rem; margin-bottom: 10px; }
.exam-help-dialog h3 { font-size: 0.95rem; margin: 14px 0 6px; }
.exam-help-dialog ul { padding-left: 20px; line-height: 1.8; }
.exam-help-dialog form { margin-top: 18px; }
.exam-help-dialog kbd, .exam-help-dialog code { font-family: var(--font-mono); font-size: 0.85em; padding: 1px 6px; border: 1px solid var(--border-color); border-radius: 3px; }

/* Fragenliste in der hellen Ansicht */
#exam-view .grid-btn { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
#exam-view .grid-btn.answered { background: var(--ev-navy); color: var(--ev-on-navy); border-color: var(--ev-navy); }
#exam-view .grid-btn.marked { box-shadow: inset 0 0 0 2px var(--warning-color); }
#exam-view .grid-btn.active { outline: 2px solid var(--ev-focus); outline-offset: 1px; }
#exam-view .grid-btn.chk-correct { background: var(--ev-ok); color: var(--bg-secondary); border-color: var(--ev-ok); }
#exam-view .grid-btn.chk-wrong { background: var(--ev-bad); color: var(--bg-secondary); border-color: var(--ev-bad); }

@media (max-width: 1023px) {
    #exam-view .exam-stage { padding: 12px 16px 18px; }
    #exam-view .question-workspace { padding: 24px 24px 22px; }
    #exam-view .exam-progress-block { width: min(360px, 34vw); }
}
@media (max-width: 767px) {
    #exam-view .exam-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "qno actions" "progress progress"; row-gap: 8px; }
    #exam-view .exam-progress-block { width: 100%; }
    #exam-view .exam-layout { flex-direction: column; align-items: stretch; }
    #exam-view .sidebar-drawer { width: auto; }
    #exam-view .terminal-bar { display: none; }
}
@media (max-width: 639px) {
    #exam-view.active { flex-direction: column; border-radius: 0; border-left: 0; border-right: 0; }
    #exam-view .exam-rail { width: auto; flex-direction: row; justify-content: space-between; padding: 4px 8px; gap: 2px; overflow: hidden; }
    #exam-view.rail-open .exam-rail { width: auto; }
    #exam-view .exam-rail .rail-toggle, #exam-view .rail-sep { display: none; }
    #exam-view .rail-btn { flex: 1; justify-content: center; padding: 0; min-width: 44px; }
    #exam-view.rail-open .rail-label { display: none; }
    #exam-view .exam-stage { padding: 10px 12px 16px; gap: 12px; }
    #exam-view .exam-head-actions { flex-direction: column; align-items: flex-end; gap: 4px; }
    #exam-view .exam-qno { font-size: 1.2rem; }
    #exam-view .seg-review { width: 76px; }
    #exam-view .question-workspace { padding: 18px 14px; }
    #exam-view .option-label { padding: 10px 10px; }
    #exam-view .opt-verdict { margin-left: 10px; }
    #exam-view .nav-controls { gap: 10px; }
    #exam-view .nav-pill { min-height: 52px; padding: 0 36px; }
    #exam-view .review-table thead th.col-flag { width: 66px; font-size: 0.64rem; padding: 8px 1px; text-align: center; overflow-wrap: anywhere; }
    #exam-view .review-table td.col-nr, #exam-view .review-table th.col-nr { width: 36px; padding-left: 8px; }
    #exam-view .review-instructions { padding-top: 44px; }
    #exam-view .review-table-wrap { max-height: none; }
    #exam-view .answer-actions .pill-btn { flex: 1 1 auto; justify-content: center; }
}
@media (pointer: coarse) { #exam-view .pill-btn, #exam-view .nav-pill, #exam-view .rail-btn { min-height: 44px; } }


/* ===== question type: ordering ===== */
/* Eigener Abschnitt (T59). Nur hier ändern, damit parallele Branches nicht kollidieren. */
/* Farben und Abstände aus den vorhandenen Variablen von #exam-view verwenden. */
/* --- ordering: Anker (Regeln unterhalb dieser Zeile einfügen) --- */
/* Hell/Dunkel über data-exam-theme, Fokus sichtbar, Touchziele mindestens 44 px. */
/* Mobil: unter 700 px einspaltig. */
#exam-view .qt-ord, .qt-ord-review { color: var(--text-primary); }
#exam-view .qt-ord-hint { margin: 0 0 12px; color: var(--text-muted); font-size: 0.9rem; }
#exam-view .qt-ord-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
#exam-view .qt-ord-source, #exam-view .qt-ord-answer { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 12px; min-height: 120px; }
#exam-view .qt-ord h3 { margin: 0 0 10px; font-size: 1rem; }
#exam-view .qt-ord-list, #exam-view .qt-ord-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#exam-view .qt-ord-slots { counter-reset: qtslot; }
#exam-view .qt-ord-item { min-height: 44px; padding: 10px 12px; box-sizing: border-box; display: flex; align-items: center; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--text-muted); border-radius: 4px; cursor: grab; font-weight: 500; overflow-wrap: anywhere; user-select: none; }
#exam-view .qt-ord-item:hover { border-color: var(--text-secondary); }
#exam-view .qt-ord-item.selected { border-color: var(--ev-navy); background: var(--accent-glow); box-shadow: 0 0 0 2px var(--ev-navy); }
#exam-view .qt-ord-item.dragging { opacity: 0.5; }
#exam-view .qt-ord-item:focus-visible, #exam-view .qt-ord-slot:focus-visible, #exam-view .qt-ord button:focus-visible, #exam-view .qt-ord-add:focus-visible { outline: 3px solid var(--ev-focus); outline-offset: 2px; }
#exam-view .qt-ord-slot { position: relative; counter-increment: qtslot; display: flex; align-items: center; gap: 8px; min-height: 48px; padding-left: 42px; box-sizing: border-box; }
#exam-view .qt-ord-slot::before { content: counter(qtslot) "."; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--text-muted); }
#exam-view .qt-ord-slot.empty { border: 2px dashed var(--text-muted); border-radius: 4px; color: var(--text-muted); font-size: 0.9rem; padding: 8px 8px 8px 42px; }
#exam-view .qt-ord-slot.empty.target { cursor: pointer; border-color: var(--ev-navy); }
#exam-view .qt-ord-slot.over { outline: 2px solid var(--ev-navy); background: var(--accent-glow); }
#exam-view .qt-ord-slot.filled .qt-ord-item { flex: 1 1 auto; min-width: 0; }
#exam-view .qt-ord-slot.last .qt-ord-item { background: var(--ev-navy); color: var(--ev-on-navy); border-color: var(--ev-navy); }
#exam-view .qt-ord-tools { display: flex; gap: 4px; flex: 0 0 auto; }
#exam-view .qt-ord-tools button, #exam-view .qt-ord-add { min-width: 44px; min-height: 44px; border: 1px solid var(--text-muted); border-radius: 4px; background: var(--bg-secondary); color: var(--text-primary); font: inherit; cursor: pointer; }
#exam-view .qt-ord-add { width: 100%; margin-top: 10px; padding: 0 12px; background: var(--ev-navy); color: var(--ev-on-navy); border-color: var(--ev-navy); }
#exam-view .qt-ord button:disabled { opacity: 0.45; cursor: not-allowed; }
#exam-view .qt-ord-full { margin: 10px 0 0; padding: 8px 10px; border-left: 4px solid var(--warning-color); background: var(--ev-note); }
#exam-view .answers-container.locked .qt-ord-item, #exam-view .answers-container.locked .qt-ord-slot { cursor: default; }
#exam-view .answers-container.locked .qt-ord { opacity: 0.85; }
.qt-ord-review h4 { margin: 12px 0 6px; font-size: 0.95rem; }
.qt-ord-rev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.qt-ord-rev-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; }
.qt-ord-step { font-weight: 600; min-width: 64px; }
.qt-ord-mark { font-weight: 700; }
@media (max-width: 699px) {
    #exam-view .qt-ord-cols { grid-template-columns: 1fr; }
}
/* ===== end question type: ordering ===== */


/* ===== question type: hot-area ===== */
/* Eigener Abschnitt (T59). Nur hier ändern, damit parallele Branches nicht kollidieren. */
/* Farben und Abstände aus den vorhandenen Variablen von #exam-view verwenden. */
/* --- hot-area: Anker (Regeln unterhalb dieser Zeile einfügen) --- */
#exam-view .ha-wrap { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
#exam-view .ha-hint { margin: 0; color: var(--text-secondary); }
#exam-view .ha-count { margin: 0; font-weight: 600; color: var(--text-primary); }
#exam-view .ha-note { margin: 0; min-height: 0; color: var(--warning-color); font-weight: 600; }
#exam-view .ha-note:empty { display: none; }
/* Die Figur ist immer auf hellem Grund gezeichnet, daher feste Farben (auch im dunklen Farbschema). */
#exam-view .ha-figure { background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; padding: 8px; min-height: 60px; overflow: hidden; }
#exam-view .ha-figure svg { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; }
#exam-view .ha-figure[aria-busy="true"]::before { content: ""; display: block; height: 44px; border-radius: 4px; background: #edebe9; }
#exam-view .ha-error { margin: 0; padding: 12px; color: #a4262c; font-weight: 600; }
#exam-view .ha-figure g[data-region] { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
#exam-view .ha-wrap[aria-disabled="true"] g[data-region] { cursor: default; }
#exam-view .ha-deco .ha-outline, #exam-view .ha-deco .ha-focus { fill: none; stroke: transparent; stroke-width: 3; }
#exam-view .ha-deco .ha-focus { stroke-width: 3; }
#exam-view .ha-figure g[data-region]:hover .ha-outline { stroke: #8a8886; stroke-width: 2; }
#exam-view .ha-figure g[data-region]:focus-visible .ha-focus { stroke: #005a9e; stroke-dasharray: 6 3; }
#exam-view .ha-figure g[data-region][aria-checked="true"] .ha-outline { stroke: #0b6a0b; stroke-width: 4; }
#exam-view .ha-badge { display: none; }
#exam-view .ha-badge-bg { fill: #0b6a0b; stroke: #ffffff; stroke-width: 2; }
#exam-view .ha-badge path { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#exam-view .ha-cross { display: none; }
#exam-view .ha-figure g[data-region][aria-checked="true"] .ha-badge { display: inline; }
/* Nach dem Prüfen (Quiz Üben): richtig grün, falsch rot mit Kreuz, nicht gewählte richtige gestrichelt */
#exam-view .ha-figure g[data-region][data-state="ok"] .ha-outline { stroke: #0b6a0b; stroke-width: 4; }
#exam-view .ha-figure g[data-region][data-state="miss"] .ha-outline { stroke: #0b6a0b; stroke-width: 4; stroke-dasharray: 8 4; }
#exam-view .ha-figure g[data-region][data-state="miss"] .ha-badge { display: inline; }
#exam-view .ha-figure g[data-region][data-state="bad"] .ha-outline { stroke: #a4262c; stroke-width: 4; }
#exam-view .ha-figure g[data-region][data-state="bad"] .ha-badge { display: inline; }
#exam-view .ha-figure g[data-region][data-state="bad"] .ha-badge-bg { fill: #a4262c; }
#exam-view .ha-figure g[data-region][data-state="bad"] .ha-check { display: none; }
#exam-view .ha-figure g[data-region][data-state="bad"] .ha-cross { display: inline; }
.ha-review { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ha-review-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 699px) {
    #exam-view .ha-figure { padding: 4px; }
}
/* Hell/Dunkel über data-exam-theme, Fokus sichtbar, Touchziele mindestens 44 px. */
/* Mobil: unter 700 px einspaltig. */
/* Handy: Figuren behalten eine lesbare Mindestbreite (Schrift rund 10 px) und scrollen innerhalb der Karte, nicht die Seite. */
@media (max-width: 700px) {
    #exam-view .ha-figure { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #exam-view .ha-figure svg { min-width: 520px; }
}
/* ===== end question type: hot-area ===== */


/* ===== question type: exhibits ===== */
/* Eigener Abschnitt (T59). Nur hier ändern, damit parallele Branches nicht kollidieren. */
/* Farben und Abstände aus den vorhandenen Variablen von #exam-view verwenden. */
/* --- exhibits: Anker (Regeln unterhalb dieser Zeile einfügen) --- */
/* Hell/Dunkel über data-exam-theme, Fokus sichtbar, Touchziele mindestens 44 px. */
/* Mobil: unter 700 px einspaltig. */
/* Registerleiste: sitzt oben in der Fragenkarte, aktiver Tab geht in die Karte über. */
#exam-view { --qt-px: 40px; --qt-py: 32px; }
#exam-view .question-workspace > .qt-ex-tabs { max-width: none; display: flex; gap: 2px; margin: calc(-1 * var(--qt-py)) calc(-1 * var(--qt-px)) 20px; padding: 0 var(--qt-px); background: var(--ev-rail); border-bottom: 1px solid var(--border-color); overflow-x: auto; scrollbar-width: thin; }
#exam-view .qt-ex-tab { flex: none; min-height: 44px; padding: 0 18px; background: transparent; border: 1px solid transparent; border-bottom: 0; border-top: 3px solid transparent; color: var(--text-secondary); font: inherit; font-size: 0.95rem; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
#exam-view .qt-ex-tab:hover { background: var(--ev-row-hover); color: var(--text-primary); }
#exam-view .qt-ex-tab.is-active { background: var(--bg-secondary); color: var(--text-primary); font-weight: 600; border-color: var(--border-color); border-top-color: var(--ev-navy); }
#exam-view .qt-ex-hint { margin: 0 0 12px; font-size: 0.85rem; color: var(--text-muted); }
#exam-view .qt-ex-hint[hidden], #exam-view .qt-ex-panel[hidden] { display: none; }
/* Offenes Exhibit: Fragenteil nur ausblenden, nicht entfernen (Eingaben und Fokus bleiben erhalten). */
#exam-view #exam-card.qt-ex-open > :not(.qt-ex-tabs):not(.qt-ex-panel):not(.answer-actions):not(.review-checkbox-label) { display: none !important; }
#exam-view .qt-ex-panel { min-width: 0; max-width: 100%; }
#exam-view .qt-ex-title { margin: 0 0 12px; font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
#exam-view .qt-ex-code, .qt-ex-review .qt-ex-code { max-width: 100%; margin: 0; overflow-x: auto; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-primary); font-size: 0.85rem; line-height: 1.5; white-space: pre; tab-size: 4; }
#exam-view .qt-ex-code code, .qt-ex-review .qt-ex-code code, #exam-view .qt-ex-code code.hljs, .qt-ex-review .qt-ex-code code.hljs { display: inline; background: transparent; padding: 0; overflow: visible; white-space: inherit; }
#exam-view #exam-card.qt-ex-open #reset-answer-btn, #exam-view #exam-card.qt-ex-open .review-checkbox-label { display: none !important; }
#exam-view .qt-ex-text, .qt-ex-review .qt-ex-text { min-width: 0; overflow-x: auto; overflow-wrap: anywhere; }
#exam-view .qt-ex-text table, .qt-ex-review .qt-ex-text table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
#exam-view .qt-ex-text th, #exam-view .qt-ex-text td, .qt-ex-review .qt-ex-text th, .qt-ex-review .qt-ex-text td { border: 1px solid var(--border-color); padding: 6px 10px; text-align: left; }
#exam-view .qt-ex-text th, .qt-ex-review .qt-ex-text th { background: var(--ev-rail); }
.qt-ex-figure { max-width: 100%; overflow-x: auto; }
.qt-ex-figure svg { max-width: 100%; height: auto; display: block; }
.qt-ex-figure.is-error { color: var(--ev-bad, #a4262c); }
/* Review-Karten: pro Exhibit ein <details> */
.qt-ex-review { margin: 0 0 14px; }
.qt-ex-review-heading { font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.qt-ex-review-item { border: 1px solid var(--border-color); border-radius: 4px; margin-bottom: 6px; padding: 0 12px; min-width: 0; }
.qt-ex-review-item > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 500; }
.qt-ex-review-item > summary:focus-visible { outline: 3px solid var(--ev-focus, #005a9e); outline-offset: 2px; }
.qt-ex-review-item[open] > summary { margin-bottom: 8px; }
.qt-ex-review-item > :last-child { margin-bottom: 12px; }
@media (max-width: 1023px) { #exam-view { --qt-px: 24px; --qt-py: 24px; } }
@media (max-width: 700px) {
    #exam-view { --qt-px: 14px; --qt-py: 18px; }
    #exam-view .qt-ex-tab { padding: 0 14px; }
}
/* ===== end question type: exhibits ===== */