@import url("./hotfix25-instruments.css?v=2026.07.21-hf25");
@import url("./hotfix30-c172s-panel.css?v=2026.07.21-hf30");

:root {
    --bg: #050b13;
    --panel: rgba(12, 25, 40, .92);
    --panel-2: rgba(17, 36, 55, .92);
    --line: rgba(118, 166, 197, .22);
    --cyan: #39d7ff;
    --cyan-soft: rgba(57, 215, 255, .14);
    --green: #38e3a5;
    --amber: #ffc857;
    --red: #ff5e6c;
    --text: #e8f3fb;
    --muted: #8faabd;
    --sidebar-width: 270px;
}
* { box-sizing: border-box; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 82% 12%, rgba(23, 118, 150, .18), transparent 28%),
        radial-gradient(circle at 32% 85%, rgba(15, 80, 103, .18), transparent 32%),
        linear-gradient(145deg, #03070d 0%, #071421 55%, #03070d 100%);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .14;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 42px 42px;
}
button, input, select, textarea { touch-action: manipulation; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar {
    width: var(--sidebar-width); position: fixed; inset: 0 auto 0 0; z-index: 1040;
    padding: 22px 18px; display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(5, 15, 26, .98), rgba(7, 18, 30, .96));
    border-right: 1px solid var(--line); box-shadow: 14px 0 40px rgba(0,0,0,.28);
}
.brand-panel { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 54px; height: 54px; display: grid; place-items: center; font-weight: 900; letter-spacing: .08em; color: #021017; background: var(--cyan); clip-path: polygon(12% 0,100% 0,88% 100%,0 100%); }
.brand-title { font-size: 1.4rem; font-weight: 800; letter-spacing: .13em; }
.brand-subtitle { color: var(--cyan); font-size: .72rem; letter-spacing: .26em; }
.club-label { margin: 17px 0 22px; padding: 8px 10px; color: var(--muted); font-size: .76rem; letter-spacing: .09em; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.cockpit-nav { gap: 7px; }
.cockpit-nav .nav-link { color: #a9bdca; text-align: left; border: 1px solid transparent; border-radius: 8px; padding: 12px 13px; font-weight: 650; background: transparent; }
.cockpit-nav .nav-link span { display: inline-grid; width: 30px; height: 24px; place-items: center; color: var(--cyan); font-size: .78rem; margin-right: 8px; border: 1px solid rgba(57,215,255,.28); border-radius: 4px; }
.cockpit-nav .nav-link:hover, .cockpit-nav .nav-link.active { color: #fff; background: linear-gradient(90deg, rgba(57,215,255,.17), rgba(57,215,255,.035)); border-color: rgba(57,215,255,.28); box-shadow: inset 3px 0 0 var(--cyan); }
.sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.status-line { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .76rem; margin-top: 8px; }
.status-led { width: 9px; height: 9px; border-radius: 50%; background: #526372; box-shadow: 0 0 0 3px rgba(82,99,114,.15); }
.status-led.ok { background: var(--green); box-shadow: 0 0 12px var(--green); }
.status-led.error { background: var(--red); box-shadow: 0 0 12px var(--red); }
.main-stage { width: calc(100% - var(--sidebar-width)); margin-left: var(--sidebar-width); min-height: 100vh; }
.topbar { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 28px; border-bottom: 1px solid var(--line); background: rgba(4, 12, 21, .76); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 1020; }
.topbar h1 { font-size: 1.7rem; margin: 0; font-weight: 750; letter-spacing: .02em; }
.eyebrow { color: var(--cyan); font-size: .68rem; letter-spacing: .2em; font-weight: 800; text-transform: uppercase; }
.topbar-meta { display: flex; align-items: center; gap: 10px; }
.mode-chip, .callsign-chip, .live-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 5px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; }
.mode-chip { color: var(--cyan); border: 1px solid rgba(57,215,255,.45); background: var(--cyan-soft); }
.callsign-chip { color: #04130f; background: var(--green); }
.live-pill { color: var(--green); border: 1px solid rgba(56,227,165,.4); background: rgba(56,227,165,.1); }
.clock { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; min-width: 76px; }
.content-stage { padding: 24px 28px 40px; max-width: 1700px; margin: auto; }
.app-page { display: none; animation: pageIn .22s ease-out; }
.app-page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cockpit-card, .metric-card { position: relative; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, var(--panel), rgba(7,20,33,.94)); box-shadow: 0 14px 40px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.03); }
.cockpit-card { padding: 22px; overflow: hidden; }
.cockpit-card::after { content: ""; position: absolute; top: 0; right: 0; width: 80px; height: 2px; background: var(--cyan); opacity: .65; }
.hero-panel { display: grid; grid-template-columns: 1fr 260px; align-items: center; min-height: 260px; padding: 34px; }
.hero-panel h2 { font-size: clamp(1.8rem, 3vw, 3.1rem); max-width: 900px; margin: 8px 0 13px; line-height: 1.08; }
.hero-panel p { color: var(--muted); max-width: 760px; font-size: 1.02rem; }
.radar-widget { width: 220px; aspect-ratio: 1; justify-self: center; border-radius: 50%; position: relative; overflow: hidden; border: 1px solid rgba(57,215,255,.38); background: repeating-radial-gradient(circle, transparent 0 24px, rgba(57,215,255,.16) 25px 26px), linear-gradient(90deg, transparent 49.7%, rgba(57,215,255,.18) 50%, transparent 50.3%), linear-gradient(transparent 49.7%, rgba(57,215,255,.18) 50%, transparent 50.3%), rgba(2,20,26,.85); box-shadow: inset 0 0 35px rgba(57,215,255,.1), 0 0 25px rgba(57,215,255,.08); }
.radar-sweep { position: absolute; inset: 50% 50% 0 0; transform-origin: 100% 0; background: conic-gradient(from 270deg at 100% 0, rgba(57,215,255,.55), transparent 28deg); animation: sweep 4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.radar-center, .radar-dot { position: absolute; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.radar-center { width: 7px; height: 7px; inset: calc(50% - 3px); }
.radar-dot { width: 5px; height: 5px; }.dot-a{left:28%;top:34%}.dot-b{right:23%;bottom:31%}
.metric-card { min-height: 140px; padding: 18px; display: flex; flex-direction: column; justify-content: center; }
.metric-card span { color: var(--cyan); font-size: .72rem; letter-spacing: .17em; font-weight: 800; }
.metric-card strong { font-size: 2.2rem; line-height: 1.1; margin: 7px 0 3px; font-variant-numeric: tabular-nums; }
.metric-card small { color: var(--muted); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.section-heading h3 { margin: 2px 0 0; font-size: 1.25rem; }
.coach-list { display: grid; gap: 10px; margin-top: 18px; }
.coach-item { border-left: 3px solid var(--cyan); background: rgba(57,215,255,.06); padding: 13px 15px; color: #cfe0ea; }
.system-grid { display: grid; gap: 10px; margin-top: 18px; }
.system-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.system-item:last-child { border-bottom: 0; }
.system-item span { color: var(--muted); }.system-item strong.ok { color: var(--green); }.system-item strong.warn { color: var(--amber); }
.trainer-card { min-height: 560px; }
.timer-display { color: var(--green); font-family: ui-monospace, monospace; font-size: 1.3rem; letter-spacing: .08em; }
.nato-display { min-height: 240px; display: grid; place-content: center; text-align: center; padding: 28px; margin-top: 22px; border: 1px solid rgba(57,215,255,.25); background: radial-gradient(circle, rgba(57,215,255,.09), transparent 65%); }
.nato-prompt { font-size: clamp(2.2rem, 7vw, 5.6rem); font-weight: 850; letter-spacing: .08em; text-shadow: 0 0 22px rgba(57,215,255,.2); }
.nato-hint { color: var(--muted); margin-top: 11px; }
.cockpit-input { min-height: 48px; color: var(--text)!important; background: rgba(2,10,18,.72)!important; border-color: rgba(106,157,190,.35)!important; }
.cockpit-input:focus { border-color: var(--cyan)!important; box-shadow: 0 0 0 .18rem rgba(57,215,255,.12)!important; }
.btn { font-weight: 700; letter-spacing: .02em; min-height: 42px; }
.btn-primary { --bs-btn-bg: #087fa0; --bs-btn-border-color: #27c4e8; --bs-btn-hover-bg: #0b96bb; --bs-btn-hover-border-color: #5ce2ff; }
.btn-cockpit { color: #cce0ec; border: 1px solid var(--line); background: rgba(255,255,255,.04); }.btn-cockpit:hover{color:#fff;border-color:var(--cyan);background:var(--cyan-soft)}
.btn-record { color: var(--red); border: 1px solid rgba(255,94,108,.42); background: rgba(255,94,108,.1); min-width: 54px; }.btn-record.recording{color:#fff;background:var(--red);box-shadow:0 0 18px rgba(255,94,108,.45);animation:pulse 1.1s infinite}
@keyframes pulse {50%{opacity:.72}}
.feedback-panel { min-height: 0; border-radius: 8px; overflow: hidden; }
.feedback-panel:not(:empty) { padding: 14px 16px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.feedback-panel.success { border-color: rgba(56,227,165,.45); background: rgba(56,227,165,.08); }.feedback-panel.error { border-color: rgba(255,94,108,.45); background: rgba(255,94,108,.08); }
.feedback-panel.warning { border-color: rgba(255,183,64,.55); background: rgba(255,183,64,.10); }
.semantic-check-list { display: grid; gap: 8px; list-style: none; padding: 0; margin: 12px 0; }
.semantic-check { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: rgba(2,10,18,.38); }
.semantic-check-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.semantic-check-status { width: 20px; font-weight: 900; font-size: 1rem; }
.semantic-check-ok .semantic-check-status { color: var(--green); }
.semantic-check-error .semantic-check-status, .semantic-check-reason { color: var(--red); }
.semantic-critical { padding: 2px 6px; border: 1px solid rgba(255,184,77,.45); border-radius: 3px; color: var(--amber); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.semantic-check-values { display: grid; gap: 2px; margin: 5px 0 0 27px; color: var(--muted); font-size: .76rem; }
.semantic-check-reason { margin: 5px 0 0 27px; font-size: .8rem; font-weight: 700; }
.semantic-summary { margin-top: 10px; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.mini-stats>div{padding:11px 7px;text-align:center;border:1px solid var(--line);background:rgba(255,255,255,.025)}.mini-stats span{display:block;color:var(--muted);font-size:.68rem}.mini-stats strong{font-size:1.35rem}
.alphabet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 310px; overflow: auto; }.alphabet-cell{padding:7px 4px;text-align:center;border:1px solid var(--line);font-size:.72rem}.alphabet-cell strong{display:block;color:var(--cyan);font-size:.9rem}
.theory-options { display: grid; gap: 11px; }.theory-option{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:15px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.025);color:var(--text)}.theory-option:hover:not(:disabled){border-color:var(--cyan);background:var(--cyan-soft)}.theory-option .letter{width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(57,215,255,.4);color:var(--cyan);border-radius:4px;flex:0 0 auto}.theory-option.correct{border-color:var(--green);background:rgba(56,227,165,.1)}.theory-option.wrong{border-color:var(--red);background:rgba(255,94,108,.1)}
.info-note { color: var(--muted); padding: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.025); font-size: .88rem; }
.scenario-context { color: var(--muted); margin: 18px 0; font-size: .95rem; }
.atc-message { padding: 18px; border-left: 4px solid var(--cyan); background: linear-gradient(90deg, rgba(57,215,255,.12), rgba(57,215,255,.025)); font-size: 1.15rem; }.atc-label{color:var(--cyan);font-size:.68rem;letter-spacing:.18em;font-weight:800;margin-bottom:7px}.atc-message .btn{margin-top:12px}
.processing-line { margin-top: 12px; color: var(--cyan); }
.semantic-panel h4 { font-size: .9rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }.semantic-chips{display:flex;flex-wrap:wrap;gap:7px}.semantic-chip{padding:6px 9px;border-radius:4px;border:1px solid rgba(57,215,255,.35);background:var(--cyan-soft);font-size:.75rem}.semantic-chip.muted{color:var(--muted);border-color:var(--line);background:rgba(255,255,255,.025)}
.score-ring { width: 150px; height: 150px; margin-inline:auto; border-radius:50%; display:grid; place-content:center; text-align:center; border:8px solid rgba(57,215,255,.16); box-shadow:inset 0 0 0 2px rgba(57,215,255,.45),0 0 25px rgba(57,215,255,.08)}.score-ring span{font-size:2.3rem;font-weight:800}.score-ring small{color:var(--muted)}
.exam-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.exam-progress-line{height:7px;background:rgba(255,255,255,.06);border-radius:10px;overflow:hidden}.exam-progress-line>div{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width .25s}.exam-prompt{font-size:1.35rem;line-height:1.5;margin-top:25px}.exam-result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.exam-result-grid>div{padding:16px;border:1px solid var(--line);text-align:center}.exam-result-grid strong{display:block;font-size:1.8rem}
.bar-chart { display:grid; gap:12px; margin-top:16px; }.bar-row{display:grid;grid-template-columns:minmax(110px,1fr) 3fr 55px;gap:10px;align-items:center}.bar-label{color:#c4d5df;font-size:.85rem}.bar-track{height:12px;background:rgba(255,255,255,.06);overflow:hidden;border-radius:10px}.bar-fill{height:100%;background:linear-gradient(90deg,#087fa0,var(--cyan));border-radius:10px}.bar-value{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--line); }
.toast { background: #0b1b2a; border: 1px solid var(--line); color: var(--text); }
@media(max-width: 991.98px){
    .sidebar{transform:translateX(-100%);transition:transform .22s}.sidebar.open{transform:none}.main-stage{width:100%;margin-left:0}.topbar{padding:14px 16px}.content-stage{padding:18px 14px 32px}.hero-panel{grid-template-columns:1fr}.radar-widget{display:none}.topbar-meta .clock{display:none}.hero-panel{padding:24px}.exam-header{align-items:flex-start;flex-direction:column}.exam-result-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width: 575.98px){.topbar h1{font-size:1.25rem}.topbar-meta{gap:5px}.mode-chip,.callsign-chip{padding:0 8px;font-size:.66rem}.content-stage{padding-inline:10px}.cockpit-card{padding:16px}.nato-prompt{font-size:2.3rem}.bar-row{grid-template-columns:100px 1fr 42px}.exam-result-grid{grid-template-columns:1fr}}

/* Multi-provider voice configuration */
.voice-heading { align-items: flex-start; }
.voice-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tts-provider-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tts-provider-status .system-item { min-height: 54px; }
.tts-provider-status .system-item span { display: flex; flex-direction: column; gap: 2px; }
.tts-provider-status .system-item small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.voice-role-card { height: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(4, 18, 30, .55); }
.voice-role-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.voice-role-code { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border: 1px solid rgba(42, 201, 241, .42); border-radius: 4px; color: var(--cyan); font-size: .66rem; font-weight: 800; letter-spacing: .11em; }
.voice-select { min-height: 46px; }
.voice-select optgroup { color: #9edff3; background: #071521; }
.voice-select option { color: #e5edf3; background: #071521; }

@media (max-width: 991.98px) {
    .tts-provider-status { grid-template-columns: 1fr; }
    .voice-heading { flex-direction: column; }
    .voice-toolbar { justify-content: flex-start; }
}

/* Interactive situation maps */
.radio-view-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.radio-view-toggle .btn {
    flex: 1 1 0;
}
.radio-view-toggle .map-result-ready {
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(56, 227, 165, .16), 0 0 20px rgba(56, 227, 165, .18);
}
.map-card {
    min-height: 100%;
}
.map-heading {
    align-items: flex-start;
}
.map-subtitle {
    margin-top: 4px;
    color: var(--muted);
    font-size: .8rem;
}
.map-training-badge,
.map-exam-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 4px;
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .12em;
    white-space: nowrap;
}
.map-training-badge {
    color: var(--amber);
    border: 1px solid rgba(255, 200, 87, .45);
    background: rgba(255, 200, 87, .1);
}
.map-exam-badge {
    color: var(--red);
    border: 1px solid rgba(255, 94, 108, .45);
    background: rgba(255, 94, 108, .1);
}
.map-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}
.map-toolbar .btn {
    min-width: 43px;
    min-height: 36px;
}
.map-toolbar .map-details-button {
    min-width: 104px;
}
.map-toolbar .map-details-button.active {
    color: #dff8ff;
    border-color: rgba(57, 215, 255, .7);
    background: rgba(57, 215, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(57, 215, 255, .12);
}
.map-route-controls {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}
.map-toolbar .map-route-play {
    min-width: 105px;
    color: #03130f;
    font-weight: 850;
    letter-spacing: .02em;
}
.map-toolbar .map-route-play.active {
    box-shadow: 0 0 0 2px rgba(56, 227, 165, .16), 0 0 16px rgba(56, 227, 165, .32);
}
.map-toolbar .map-route-reset {
    min-width: 43px;
    font-size: 1rem;
}
.map-toolbar .map-route-speed {
    min-width: 88px;
    font-variant-numeric: tabular-nums;
}
.training-map-canvas {
    position: relative;
    width: 100%;
    min-height: 390px;
    overflow: hidden;
    border: 1px solid rgba(57, 215, 255, .26);
    border-radius: 9px;
    background: #07090c;
    cursor: grab;
    touch-action: none;
    user-select: none;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, .38);
}
.training-map-canvas:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}
.training-map-canvas.dragging {
    cursor: grabbing;
}
.training-map-canvas > svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
}
.training-map-canvas-compact {
    min-height: 330px;
}
.map-empty-state,
.map-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 10px;
    padding: 28px;
    color: var(--muted);
    text-align: center;
    background:
        radial-gradient(circle, rgba(57, 215, 255, .08), transparent 58%),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(57, 215, 255, .035) 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(57, 215, 255, .035) 40px);
}
.map-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-error {
    color: var(--red);
}
.map-meta-row {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 8px;
    margin-top: 9px;
}
.map-meta-row > div {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, .025);
}
.map-meta-row span {
    display: block;
    color: var(--muted);
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.map-meta-row strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #dcebf3;
    font-size: .78rem;
    text-overflow: ellipsis;
}
.map-meta-row-compact {
    grid-template-columns: 1fr;
}
.map-analysis-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 105px;
    gap: 12px;
    align-items: center;
}
.score-ring-small {
    width: 96px;
    height: 96px;
    border-width: 5px;
}
.score-ring-small span {
    font-size: 1.55rem;
}
.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 15px;
    align-items: center;
    color: var(--muted);
    font-size: .69rem;
}
.map-legend span,
.map-legend strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.map-legend strong {
    margin-left: auto;
    color: var(--amber);
    letter-spacing: .07em;
    text-transform: uppercase;
}
.legend-aircraft,
.legend-route {
    display: inline-block;
    width: 14px;
    height: 14px;
}
.legend-aircraft {
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px rgba(56, 227, 165, .75);
}
.legend-route {
    width: 22px;
    height: 5px;
    border-radius: 8px;
    background: var(--green);
    box-shadow: 0 0 7px rgba(56, 227, 165, .62);
}
.training-map-svg .aircraft-marker {
    pointer-events: none;
}
.training-map-svg .aircraft-marker-symbol path {
    fill: #38e3a5;
    stroke: #03130f;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 6px rgba(56, 227, 165, .8));
}
.training-map-svg .aircraft-marker.aircraft-moving .aircraft-marker-symbol path {
    animation: aircraftTaxiPulse 1.15s ease-in-out infinite alternate;
}
@keyframes aircraftTaxiPulse {
    from { filter: drop-shadow(0 0 4px rgba(56, 227, 165, .66)); }
    to { filter: drop-shadow(0 0 10px rgba(56, 227, 165, .95)); }
}
.training-map-svg .aircraft-marker-label {
    fill: #ffffff;
    stroke: #06121d;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    paint-order: stroke fill;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1px;
}
.training-map-svg [data-edge] .taxi-surface,
.training-map-svg [data-edge] .route-line {
    transition: stroke .22s ease, filter .22s ease;
}
.training-map-svg [data-edge].route-solution.route-success .taxi-surface,
.training-map-svg [data-edge].route-solution.route-success .route-line {
    stroke: #38e3a5 !important;
    filter: drop-shadow(0 0 7px rgba(56, 227, 165, .9));
}
.training-map-svg [data-edge].route-solution.route-error .taxi-surface,
.training-map-svg [data-edge].route-solution.route-error .route-line {
    stroke: #ffc857 !important;
    filter: drop-shadow(0 0 7px rgba(255, 200, 87, .9));
}
.training-map-svg [data-edge].route-solution .taxi-centerline,
.training-map-svg [data-edge].route-solution .route-center {
    stroke: #ffffff !important;
    stroke-width: 4 !important;
    animation: routeDash 1.1s linear infinite;
}
@keyframes routeDash {
    to { stroke-dashoffset: -46; }
}
.training-map-svg .route-animation-overlay {
    fill: none;
    stroke: #38e3a5;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 14 8;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
    filter: drop-shadow(0 0 7px rgba(56, 227, 165, .9));
    animation: routeDash 1.1s linear infinite;
}
.training-map-svg .route-animation-overlay.route-error {
    stroke: #ffc857;
    filter: drop-shadow(0 0 7px rgba(255, 200, 87, .9));
}
.map-card:fullscreen,
.map-card-compact:fullscreen {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    padding: 22px;
    color: var(--text);
    background: #030a12;
}
.map-card:fullscreen .training-map-canvas,
.map-card-compact:fullscreen .training-map-canvas {
    flex: 1 1 auto;
    min-height: 0;
}
.exam-task-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .85fr);
    gap: 22px;
    align-items: start;
}
.exam-task-main {
    min-width: 0;
}
.exam-map-panel {
    min-width: 0;
    padding-left: 20px;
    border-left: 1px solid var(--line);
}
.map-card-compact {
    min-height: 520px;
}
.map-exam-mode .training-map-canvas {
    border-color: rgba(255, 94, 108, .28);
}

@media (max-width: 1199.98px) {
    .radio-pane {
        display: none;
    }
    .radio-pane.active {
        display: block;
    }
    .training-map-canvas {
        min-height: min(58vh, 560px);
    }
    .exam-task-layout {
        grid-template-columns: 1fr;
    }
    .exam-map-panel {
        padding-top: 18px;
        padding-left: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

@media (max-width: 575.98px) {
    .map-analysis-footer,
    .map-meta-row {
        grid-template-columns: 1fr;
    }
    .score-ring-small {
        margin-top: 4px;
    }
    .map-legend strong {
        width: 100%;
        margin-left: 0;
    }
    .training-map-canvas {
        min-height: 52vh;
    }
}
.training-map-svg { overflow: hidden; }

/* Local airport importer and dynamic scenario generator */
.airport-list { display: grid; gap: 8px; }
.airport-list-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 8px;
    color: var(--text); text-align: left; background: rgba(4, 18, 30, .58);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.airport-list-item:hover { border-color: rgba(57, 215, 255, .55); transform: translateY(-1px); }
.airport-list-item.active { border-color: var(--cyan); background: rgba(26, 133, 162, .16); box-shadow: inset 3px 0 0 var(--cyan); }
.airport-list-item > span:first-child { min-width: 0; }
.airport-list-item strong { display: block; color: #fff; letter-spacing: .08em; }
.airport-list-item small { display: block; overflow: hidden; margin-top: 2px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.airport-list-meta { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; color: var(--muted); font-size: .72rem; }
.airport-list-meta b { color: var(--cyan); font-size: .85rem; }
.status-dot { width: 9px; height: 9px; margin-left: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(56, 227, 165, .6); }
.status-dot.disabled { background: var(--red); box-shadow: none; }
.airport-empty { display: grid; min-height: 340px; place-content: center; text-align: center; }
.airport-empty p { max-width: 620px; color: var(--muted); }
.airport-detail-heading { align-items: flex-start; }
.airport-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.airport-metrics > div { padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); }
.airport-metrics span { display: block; color: var(--muted); font-size: .66rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.airport-metrics strong { display: block; margin-top: 4px; color: #fff; font-size: 1.35rem; }
.map-loading-inline { padding: 18px; color: var(--muted); text-align: center; }
.chart-modal-content { color: var(--text); background: #02070d; }
.chart-modal-content .modal-header { border-color: var(--line); }
.chart-modal-content .modal-body { position: relative; display: grid; overflow: auto; place-items: center; padding: 18px; background: #050b12; }
#referenceChartImage { display: block; max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; box-shadow: 0 12px 42px rgba(0,0,0,.55); }
.chart-modal-note { position: fixed; right: 22px; bottom: 18px; padding: 8px 11px; border: 1px solid rgba(255,200,87,.45); border-radius: 5px; color: var(--amber); background: rgba(3, 10, 18, .9); font-size: .72rem; font-weight: 750; letter-spacing: .04em; }

@media (max-width: 1199.98px) {
    .airport-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .airport-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .airport-detail-heading { flex-direction: column; }
}


/* Active training airport, scenario filters and non-destructive map overrides */
.airport-list-item.training-active {
    border-color: rgba(56, 227, 165, .65);
    box-shadow: inset 3px 0 0 var(--green);
}
.airport-list-item.training-active.active {
    border-color: var(--cyan);
    box-shadow: inset 3px 0 0 var(--green), inset 0 0 0 1px rgba(57, 215, 255, .35);
}
.airport-list-item strong em {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 5px;
    border: 1px solid rgba(56, 227, 165, .55);
    border-radius: 4px;
    color: var(--green);
    font-size: .58rem;
    font-style: normal;
    letter-spacing: .08em;
    vertical-align: 2px;
}
.airport-override-switch {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 3.2rem;
}

/* Route feedback can reference stable map object IDs in addition to graph edges. */
.training-map-svg [data-object-id].route-solution.route-success:not([data-edge]) {
    filter: drop-shadow(0 0 7px rgba(56, 227, 165, .95));
    stroke: var(--green) !important;
    stroke-width: 5px !important;
}
.training-map-svg [data-object-id].route-solution.route-error:not([data-edge]) {
    filter: drop-shadow(0 0 7px rgba(255, 200, 87, .95));
    stroke: var(--amber) !important;
    stroke-width: 5px !important;
}

@media (prefers-reduced-motion: reduce) {
    .training-map-svg .aircraft-marker.aircraft-moving .aircraft-marker-symbol path {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .map-route-controls {
        order: 3;
        width: 100%;
    }
    .map-route-controls .btn {
        flex: 1 1 auto;
    }
}

/* Complete scenario mode */
.training-mode-switch {
    display: inline-flex;
    gap: 6px;
    padding: 5px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-2);
}
.training-mode-switch .btn { min-height: 38px; }
.flow-setup {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-2);
}
.flow-description {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 11px;
    color: var(--muted);
    font-size: .82rem;
}
.flow-description strong { color: var(--text); font-weight: 650; }
.flow-status {
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--cyan) 32%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--cyan-soft) 45%, var(--panel));
}
.flow-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.flow-progress-head strong { display: block; margin-top: 3px; font-size: 1rem; }
.flow-score { min-width: 72px; text-align: right; }
.flow-score span { display: block; color: var(--muted); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.flow-score strong { color: var(--cyan); font-size: 1.55rem; }
.flow-progress { height: 8px; margin: 12px 0 14px; background: color-mix(in srgb, var(--line) 45%, transparent); }
.flow-progress .progress-bar { background: linear-gradient(90deg, var(--cyan), var(--green)); transition: width .25s ease; }
.flow-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 7px;
}
.flow-step {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    padding: 8px 5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--muted);
}
.flow-step span {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: .72rem;
    font-weight: 850;
}
.flow-step small {
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .68rem;
}
.flow-step.active, .flow-step.retry, .flow-step.ready { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 58%, var(--line)); }
.flow-step.ready { color: var(--green); }
.flow-step.passed { color: var(--green); background: color-mix(in srgb, var(--green) 8%, var(--panel)); }
.flow-step.skipped { color: var(--amber); }
.flight-state {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 7px;
    margin-top: 12px;
}
.flight-state > div {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
}
.flight-state span { display: block; color: var(--muted); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.flight-state strong { display: block; overflow: hidden; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.radio-step-heading { margin-top: 4px; }
.theme-toggle { min-width: 90px; }

/* Bright application design: light is the default, dark remains optional. */
html[data-theme="light"] {
    --bg: #eef4f8;
    --panel: #ffffff;
    --panel-2: #f5f9fc;
    --line: rgba(37, 76, 99, .17);
    --cyan: #087f9f;
    --cyan-soft: rgba(8, 127, 159, .10);
    --green: #167d5b;
    --amber: #a66700;
    --red: #bd3e4d;
    --text: #193647;
    --muted: #657e8e;
}
html[data-theme="light"] body {
    color: var(--text);
    background:
        radial-gradient(circle at 84% 8%, rgba(45, 167, 198, .13), transparent 29%),
        radial-gradient(circle at 22% 90%, rgba(68, 151, 177, .10), transparent 34%),
        linear-gradient(145deg, #f7fafc 0%, #edf4f8 58%, #f8fbfd 100%);
}
html[data-theme="light"] body::before {
    opacity: .42;
    background-image: linear-gradient(rgba(27, 78, 104, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 78, 104, .028) 1px, transparent 1px);
}
html[data-theme="light"] .sidebar {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,247,251,.98));
    box-shadow: 12px 0 32px rgba(42, 78, 96, .10);
}
html[data-theme="light"] .brand-mark { color: #fff; }
html[data-theme="light"] .club-label,
html[data-theme="light"] .mini-stats > div,
html[data-theme="light"] .theory-option,
html[data-theme="light"] .info-note,
html[data-theme="light"] .semantic-chip.muted,
html[data-theme="light"] .airport-metrics > div { background: rgba(21, 83, 111, .035); }
html[data-theme="light"] .cockpit-nav .nav-link { color: #557181; }
html[data-theme="light"] .cockpit-nav .nav-link:hover,
html[data-theme="light"] .cockpit-nav .nav-link.active {
    color: #0b6079;
    background: linear-gradient(90deg, rgba(8,127,159,.13), rgba(8,127,159,.025));
}
html[data-theme="light"] .topbar {
    background: rgba(255,255,255,.88);
    box-shadow: 0 5px 22px rgba(42, 78, 96, .07);
}
html[data-theme="light"] .cockpit-card,
html[data-theme="light"] .metric-card {
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,251,253,.98));
    box-shadow: 0 12px 30px rgba(42,78,96,.09), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .coach-item { color: var(--text); background: rgba(8,127,159,.055); }
html[data-theme="light"] .cockpit-input {
    color: var(--text)!important;
    background: #fff!important;
    border-color: rgba(53, 100, 124, .28)!important;
}
html[data-theme="light"] .cockpit-input::placeholder { color: #8ca0ab; }
html[data-theme="light"] .btn-cockpit { color: #355b6d; background: rgba(255,255,255,.72); }
html[data-theme="light"] .btn-cockpit:hover { color: #075f78; background: var(--cyan-soft); }
html[data-theme="light"] .feedback-panel:not(:empty),
html[data-theme="light"] .semantic-check { background: rgba(255,255,255,.78); }
html[data-theme="light"] .voice-role-card,
html[data-theme="light"] .airport-list-item { color: var(--text); background: rgba(255,255,255,.78); }
html[data-theme="light"] .voice-select optgroup,
html[data-theme="light"] .voice-select option { color: var(--text); background: #fff; }
html[data-theme="light"] .airport-list-item strong,
html[data-theme="light"] .airport-metrics strong { color: var(--text); }
html[data-theme="light"] .bar-label { color: #4f6b7b; }
html[data-theme="light"] .bar-track,
html[data-theme="light"] .exam-progress-line { background: rgba(40, 88, 110, .10); }
html[data-theme="light"] .toast { color: var(--text); background: #fff; }
html[data-theme="light"] .chart-modal-content { color: var(--text); background: #f8fbfd; }
html[data-theme="light"] .chart-modal-content .modal-body { background: #edf4f8; }
html[data-theme="light"] .atc-message { background: linear-gradient(90deg, rgba(8,127,159,.11), rgba(8,127,159,.025)); }
html[data-theme="light"] .callsign-chip { color: #fff; }
html[data-theme="light"] .map-toolbar .map-details-button.active { color: #075f78; }

@media (max-width: 767.98px) {
    .training-mode-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .flow-timeline { grid-template-columns: repeat(3, 1fr); }
    .flight-state { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .theme-toggle { min-width: 76px; padding-inline: 8px; }
}

/* Readback UX: compact mission header and immediately visible evaluation. */
.has-active-flow .training-mode-switch { margin-bottom: 10px; }
.flow-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.has-active-flow .flow-status {
    margin-bottom: 14px;
    padding: 12px 14px;
}
.has-active-flow .flow-progress { margin: 8px 0 10px; }
.has-active-flow .flow-step { gap: 3px; padding: 6px 4px; }
.has-active-flow .flow-step span { width: 22px; height: 22px; }
.has-active-flow .flight-state { gap: 5px; margin-top: 8px; }
.has-active-flow .flight-state > div { padding: 6px 8px; }
.has-active-flow .radio-step-heading { margin-top: 0; }

#radioTranscript[readonly] {
    cursor: default;
    background: color-mix(in srgb, var(--green) 4%, var(--panel)) !important;
}
.radio-feedback-panel {
    scroll-margin-top: 90px;
}
.radio-feedback-panel:not(:empty) {
    padding: 12px 14px;
}
.radio-feedback-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.radio-feedback-status {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}
.radio-feedback-status > div { min-width: 0; }
.radio-feedback-status strong,
.radio-feedback-status span { display: block; }
.radio-feedback-status strong { font-size: .96rem; }
.radio-feedback-status span { margin-top: 2px; color: var(--muted); font-size: .78rem; }
.radio-feedback-icon {
    display: grid !important;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 900;
}
.radio-feedback-panel.success .radio-feedback-icon { color: var(--green); }
.radio-feedback-panel.error .radio-feedback-icon { color: var(--red); }
.radio-feedback-score {
    display: grid;
    flex: 0 0 auto;
    justify-items: end;
    line-height: 1;
}
.radio-feedback-score strong { color: var(--cyan); font-size: 1.35rem; }
.radio-feedback-score span { margin-top: 3px; color: var(--muted); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.radio-readback-quote {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: color-mix(in srgb, var(--panel-2) 78%, transparent);
}
.radio-readback-quote span {
    color: var(--muted);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.radio-readback-quote strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: .82rem;
    font-weight: 650;
}
.radio-feedback-summary {
    display: grid;
    gap: 3px;
    margin: 9px 0 0;
    padding-left: 18px;
    color: var(--text);
    font-size: .78rem;
}
.semantic-details {
    margin-top: 9px;
    border-top: 1px solid var(--line);
}
.semantic-details > summary {
    padding: 8px 0 1px;
    color: var(--cyan);
    cursor: pointer;
    font-size: .77rem;
    font-weight: 800;
    list-style-position: inside;
}
.semantic-details[open] {
    max-height: min(420px, 48vh);
    overflow: auto;
    padding-right: 4px;
}
.semantic-details .semantic-check-list { margin-bottom: 8px; }
.radio-reference {
    display: grid;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel-2);
}
.radio-reference span { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.radio-reference strong { font-size: .78rem; font-weight: 650; }

@media (max-width: 767.98px) {
    .flow-progress-head { align-items: flex-start; }
    .flow-head-actions { flex-direction: column-reverse; align-items: flex-end; gap: 5px; }
    .radio-feedback-head { align-items: flex-start; }
    .radio-readback-quote { grid-template-columns: 1fr; gap: 3px; }
}

/* Official BNetzA theory catalogue 2024 */
.theory-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.theory-header-card h3 { margin: 4px 0 6px; }
.theory-header-card p { margin: 0; color: var(--muted); }
.theory-header-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(82px, 1fr));
    gap: 10px;
    min-width: min(100%, 440px);
}
.theory-header-stats > div,
.theory-learning-overview > div,
.theory-exam-facts > div {
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
}
.theory-header-stats span,
.theory-learning-overview span,
.theory-exam-facts span {
    display: block;
    color: var(--muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.theory-header-stats strong,
.theory-learning-overview strong,
.theory-exam-facts strong {
    display: block;
    margin-top: 3px;
    color: var(--cyan);
    font-size: 1.25rem;
}
.theory-mode-switch {
    display: inline-flex;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel);
}
.theory-mode-switch .btn { min-width: 150px; }
.theory-filter-card { position: sticky; top: 84px; }
.theory-question-card { min-height: 520px; }
.theory-question-heading { align-items: flex-start; }
.theory-question-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.theory-question-actions { display: flex; align-items: center; gap: 8px; }
#theoryBookmark.active,
[data-catalog-bookmark].active { color: #d98c00; border-color: rgba(217,140,0,.45); }
.theory-source-badge,
.theory-number-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid var(--line);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.theory-source-badge.official {
    color: #08759a;
    background: rgba(14,165,233,.09);
    border-color: rgba(14,165,233,.3);
}
.theory-source-badge.additional {
    color: #8a5b00;
    background: rgba(245,158,11,.1);
    border-color: rgba(245,158,11,.32);
}
.theory-number-badge { color: var(--muted); }
.theory-question-image {
    display: grid;
    place-items: center;
    max-width: 430px;
    margin: 20px auto 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
}
.theory-question-image img { display: block; max-width: 100%; max-height: 220px; }
.theory-question-image figcaption { margin-top: 6px; color: #475569; font-size: .78rem; }
.theory-question-footer,
.theory-pagination,
.theory-exam-result-head,
.theory-exam-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.theory-learning-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.theory-option.selected {
    border-color: var(--cyan);
    background: var(--cyan-soft);
    box-shadow: inset 0 0 0 1px rgba(57,215,255,.25);
}
.theory-catalog-toolbar { padding-bottom: 18px; }
.theory-catalog-list-card,
.theory-catalog-detail { min-height: 650px; }
.theory-catalog-list { display: grid; gap: 8px; }
.theory-catalog-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background: rgba(255,255,255,.02);
    text-align: left;
}
.theory-catalog-item:hover,
.theory-catalog-item.active { border-color: var(--cyan); background: var(--cyan-soft); }
.theory-catalog-number {
    display: grid;
    place-items: center;
    min-height: 34px;
    padding: 4px;
    border-radius: 5px;
    color: var(--cyan);
    background: rgba(57,215,255,.08);
    font-size: .76rem;
    font-weight: 900;
}
.theory-catalog-copy { min-width: 0; }
.theory-catalog-copy strong { display: block; font-size: .9rem; line-height: 1.35; }
.theory-catalog-copy small { display: block; margin-top: 5px; color: var(--muted); }
.theory-empty-state {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 24px;
    color: var(--muted);
    text-align: center;
}
.theory-exam-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 260px;
}
.theory-exam-intro p { max-width: 800px; color: var(--muted); }
.theory-exam-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 150px));
    gap: 10px;
    margin-top: 22px;
}
.theory-exam-status-values { display: flex; align-items: center; gap: 24px; }
.theory-exam-timer {
    padding: 7px 11px;
    border-radius: 6px;
    color: var(--text);
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.3);
}
.theory-exam-nav-card { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: auto; }
.theory-exam-navigator {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.theory-exam-navigator button {
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--muted);
    background: transparent;
    font-size: .75rem;
    font-weight: 800;
}
.theory-exam-navigator button.answered {
    color: #087a5b;
    border-color: rgba(16,185,129,.35);
    background: rgba(16,185,129,.1);
}
.theory-exam-navigator button.active {
    color: #fff;
    border-color: var(--cyan);
    background: #0789ad;
}
.theory-exam-result-card { border-top: 3px solid var(--green); }
.theory-exam-result-card.failed { border-top-color: var(--red); }
.theory-exam-score {
    display: grid;
    min-width: 150px;
    place-items: center;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.theory-exam-score strong { color: var(--cyan); font-size: 2rem; }
.theory-exam-score span { color: var(--muted); font-size: .75rem; }
.theory-category-results { display: grid; gap: 6px; margin-top: 20px; }
.theory-category-results > div {
    display: grid;
    grid-template-columns: minmax(0,1fr) 70px 70px;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
}
.theory-category-results em { color: var(--muted); font-style: normal; text-align: right; }
.theory-wrong-list { display: grid; gap: 10px; }
.theory-wrong-list article {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(255,94,108,.3);
    border-radius: 7px;
    background: rgba(255,94,108,.05);
}
.theory-wrong-list span { color: var(--muted); }
.theory-wrong-list .correct-copy { color: var(--green); }

html[data-theme="light"] .theory-header-stats > div,
html[data-theme="light"] .theory-learning-overview > div,
html[data-theme="light"] .theory-exam-facts > div,
html[data-theme="light"] .theory-catalog-item {
    background: rgba(15, 74, 96, .025);
}

@media (max-width: 1199.98px) {
    .theory-filter-card,
    .theory-exam-nav-card { position: static; }
    .theory-catalog-list-card,
    .theory-catalog-detail { min-height: auto; }
}
@media (max-width: 767.98px) {
    .theory-header-card,
    .theory-exam-intro,
    .theory-exam-result-head,
    .theory-exam-status { align-items: stretch; flex-direction: column; }
    .theory-header-stats { grid-template-columns: repeat(2, 1fr); min-width: 0; }
    .theory-mode-switch { display: grid; grid-template-columns: 1fr; width: 100%; }
    .theory-mode-switch .btn { min-width: 0; }
    .theory-learning-overview,
    .theory-exam-facts { grid-template-columns: repeat(3, 1fr); }
    .theory-question-footer { align-items: stretch; flex-direction: column; }
    .theory-question-footer .d-flex { width: 100%; }
    .theory-question-footer .btn { flex: 1 1 auto; }
    .theory-exam-status-values { justify-content: space-between; }
}
@media (max-width: 479.98px) {
    .theory-learning-overview,
    .theory-exam-facts { grid-template-columns: 1fr; }
    .theory-exam-navigator { grid-template-columns: repeat(4, 1fr); }
    .theory-category-results > div { grid-template-columns: 1fr auto; }
    .theory-category-results em { grid-column: 1 / -1; text-align: left; }
}

/* BNetzA theory answer feedback: visible answer positions after shuffling. */
.theory-answer-line {
    margin-top: 0.45rem;
    line-height: 1.45;
}
.theory-answer-line > span {
    color: var(--muted);
}
.theory-answer-explanation {
    margin-top: 0.55rem;
}
.theory-answer-note {
    display: block;
    margin-top: 0.6rem;
    color: var(--muted);
}

/* NATO spelling trainer: compact code is the only visible task prompt. */
.exam-nato-code {
    margin-bottom: .6rem;
    font-size: clamp(2.2rem, 6vw, 5rem);
    font-weight: 850;
    letter-spacing: .12em;
}

/* Theory learning explanations and compact seven-question catalogue. */
.theory-feedback-status {
    display: block;
    font-size: 1rem;
}
.theory-learning-explanation {
    margin-top: .85rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(14, 165, 233, .28);
    border-radius: 8px;
    background: rgba(14, 165, 233, .055);
}
.theory-learning-explanation-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .45rem;
}
.theory-learning-explanation-title > span {
    color: var(--text);
    font-weight: 800;
}
.theory-learning-explanation-title small {
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.theory-learning-explanation p {
    margin: 0;
    color: var(--text);
    line-height: 1.6;
}
.theory-memory-aid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .55rem;
    align-items: start;
    margin-top: .75rem;
    padding-top: .7rem;
    border-top: 1px solid var(--line);
}
.theory-memory-aid strong {
    color: var(--cyan);
}
.theory-memory-aid span {
    color: var(--muted);
}
.theory-catalog-list-card,
.theory-catalog-detail {
    min-height: 540px;
}
.theory-catalog-detail-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--line);
}
.theory-catalog-position {
    color: var(--muted);
    font-size: .78rem;
}
.theory-pagination-center {
    display: grid;
    justify-items: center;
    gap: .35rem;
}
.theory-page-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
}
.theory-page-buttons .btn {
    min-width: 34px;
    padding-inline: .55rem;
}
.theory-wrong-explanation {
    margin: .65rem 0 0;
    padding: .65rem .75rem;
    border-left: 3px solid var(--cyan);
    background: var(--cyan-soft);
    line-height: 1.5;
}
.theory-wrong-memory {
    display: block;
    margin-top: .45rem;
    color: var(--muted);
}
@media (max-width: 767.98px) {
    .theory-learning-explanation-title,
    .theory-catalog-detail-actions,
    .theory-pagination {
        align-items: stretch;
        flex-direction: column;
    }
    .theory-memory-aid {
        grid-template-columns: 1fr;
    }
    .theory-catalog-detail-actions .btn,
    .theory-pagination > .btn {
        width: 100%;
    }
}

/* Transparent correction note for conservative NATO ASR normalization. */
.nato-recognition-correction {
    display: inline-block;
    margin-top: 4px;
    color: var(--cyan);
    font-weight: 700;
}

/* AIP / ICAO abbreviation trainer */
.aip-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.aip-header-card h3 { margin: 4px 0 6px; }
.aip-header-card p { max-width: 820px; margin: 0; color: var(--muted); }
.aip-header-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(78px, 1fr));
    gap: 10px;
    min-width: min(100%, 420px);
}
.aip-header-stats > div,
.aip-learning-overview > div {
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
}
.aip-header-stats span,
.aip-learning-overview span {
    display: block;
    color: var(--muted);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.aip-header-stats strong,
.aip-learning-overview strong {
    display: block;
    margin-top: 3px;
    color: var(--cyan);
    font-size: 1.22rem;
}
.aip-mode-switch {
    display: inline-flex;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel);
}
.aip-mode-switch .btn { min-width: 150px; }
.aip-question-card { min-height: 500px; }
.aip-question-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aip-direction-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid rgba(14,165,233,.3);
    border-radius: 5px;
    color: #08759a;
    background: rgba(14,165,233,.09);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
}
.aip-bookmark.active,
[data-aip-detail-bookmark].active { color: #d98c00; border-color: rgba(217,140,0,.45); }
.aip-question-hint { margin: 10px 0 0; color: var(--muted); }
.aip-question-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.aip-learning-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.aip-question-card .theory-option > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid rgba(57,215,255,.4);
    border-radius: 4px;
    color: var(--cyan);
}
.aip-learning-explanation {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.aip-learning-explanation h4 { margin: 0 0 8px; font-size: .95rem; }
.aip-learning-explanation p { line-height: 1.55; }
.aip-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
}
.aip-detail-grid > div {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255,255,255,.02);
}
.aip-detail-grid span { display: block; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.aip-detail-grid strong { display: block; margin-top: 4px; line-height: 1.35; }
.aip-practice-example,
.aip-memory-aid,
.aip-source-note {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--cyan);
    background: var(--cyan-soft);
    line-height: 1.45;
}
.aip-memory-aid { border-left-color: var(--green); background: rgba(16,185,129,.08); }
.aip-source-note { grid-template-columns: auto minmax(0, 1fr); color: var(--muted); font-size: .8rem; }
.aip-catalog-list-card,
.aip-catalog-detail { min-height: 570px; }
.aip-catalog-list { display: grid; gap: 8px; }
.aip-catalog-item {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background: rgba(255,255,255,.02);
    text-align: left;
}
.aip-catalog-item:hover,
.aip-catalog-item.active { border-color: var(--cyan); background: var(--cyan-soft); }
.aip-catalog-abbr {
    display: grid;
    place-items: center;
    min-height: 38px;
    padding: 5px;
    border-radius: 5px;
    color: var(--cyan);
    background: rgba(57,215,255,.08);
    font-weight: 900;
}
.aip-catalog-summary { min-width: 0; }
.aip-catalog-summary strong { display: block; line-height: 1.35; }
.aip-catalog-summary small { display: block; margin-top: 4px; color: var(--muted); }
.aip-catalog-star { color: #d98c00; font-size: 1.1rem; }
.aip-detail-abbr { margin-top: 5px; color: var(--cyan); font-size: 2.2rem; }
.theory-exam-result { border-top: 3px solid var(--green); }
.theory-exam-result.failed { border-top-color: var(--red); }
.theory-exam-result .theory-exam-score { color: var(--cyan); font-size: 2.4rem; font-weight: 900; }
.theory-category-result-list { display: grid; gap: 7px; margin-top: 18px; }
.theory-category-result-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; }

@media (max-width: 991.98px) {
    .aip-header-card { align-items: stretch; flex-direction: column; }
    .aip-header-stats { width: 100%; }
}
@media (max-width: 767.98px) {
    .aip-header-stats { grid-template-columns: repeat(2, 1fr); }
    .aip-mode-switch { display: grid; grid-template-columns: 1fr; width: 100%; }
    .aip-mode-switch .btn { width: 100%; min-width: 0; }
    .aip-question-footer { align-items: stretch; flex-direction: column; }
    .aip-question-footer .d-flex { display: grid !important; }
    .aip-detail-grid { grid-template-columns: 1fr; }
    .aip-practice-example, .aip-memory-aid, .aip-source-note { grid-template-columns: 1fr; }
    .aip-catalog-item { grid-template-columns: 62px minmax(0, 1fr); }
    .aip-catalog-star { display: none; }
}

/* User-maintained STT word list */
.speech-alias-textarea {
    min-height: 12rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    line-height: 1.5;
}

.speech-alias-preview {
    margin-top: .65rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: .45rem;
    background: var(--panel-2);
    color: var(--text);
    overflow-wrap: anywhere;
}

.speech-alias-correction-list {
    margin: .65rem 0 .35rem;
    padding-left: 1.2rem;
}

.radio-alias-corrections {
    display: grid;
    gap: .25rem;
    margin: .65rem 0;
    padding: .65rem .75rem;
    border: 1px solid rgba(14, 165, 233, .35);
    border-radius: .5rem;
    background: rgba(14, 165, 233, .08);
}

.radio-alias-corrections strong {
    color: var(--text);
}

.radio-alias-corrections span,
.radio-alias-corrections small {
    overflow-wrap: anywhere;
}

/* ICAO number pronunciation trainer */
.number-display { position: relative; }
.number-context {
    margin-bottom: 8px;
    color: var(--cyan);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
}
.number-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: 390px;
    overflow: auto;
    padding-right: 3px;
}
.number-reference-cell {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    min-height: 56px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel-2);
}
.number-reference-cell strong {
    grid-row: 1 / span 2;
    color: var(--cyan);
    font-size: 1.25rem;
}
.number-reference-cell span {
    color: var(--text);
    font-size: .86rem;
    font-weight: 750;
}
.number-reference-cell small {
    color: var(--muted);
    font-size: .64rem;
    letter-spacing: .06em;
}
.number-reference-decimal { grid-column: 1 / -1; }

@media (max-width: 575.98px) {
    .number-reference-grid { grid-template-columns: 1fr; max-height: none; }
    .number-reference-decimal { grid-column: auto; }
}

/* Shared detailed-learning modal for AIP, theory and ICAO numbers */
.learning-info-modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: 3px solid var(--cyan);
    border-radius: 10px;
    color: var(--text);
    background: var(--panel);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.learning-info-modal .modal-header,
.learning-info-modal .modal-footer {
    border-color: var(--line);
    background: var(--panel-2);
}
.learning-info-modal .modal-header { align-items: flex-start; }
.learning-info-modal .modal-title {
    margin-top: 4px;
    color: var(--text);
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1.28;
}
.learning-info-modal .modal-body {
    display: grid;
    gap: 14px;
    padding: 20px;
    background: var(--panel);
}
.learning-info-lead {
    padding: 13px 15px;
    border-left: 4px solid var(--cyan);
    border-radius: 5px;
    color: var(--text);
    background: rgba(14, 165, 233, .09);
    font-size: 1.02rem;
    line-height: 1.5;
}
.learning-info-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.learning-info-section {
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel-2);
}
.learning-info-section h6 {
    margin: 0 0 8px;
    color: var(--cyan);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.learning-info-section p,
.learning-info-section ul {
    margin: 0;
    color: var(--text);
    line-height: 1.58;
}
.learning-info-section ul { padding-left: 1.1rem; }
.learning-info-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    gap: 8px;
}
.learning-info-breakdown-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: 2px 8px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
}
.learning-info-breakdown-item > span {
    grid-row: 1 / span 3;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--cyan-dark, #087ca0);
    font-weight: 900;
}
.learning-info-breakdown-item strong { color: var(--text); }
.learning-info-breakdown-item small { color: var(--muted); }
.learning-info-breakdown-item p {
    grid-column: 1 / -1;
    margin-top: 5px;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.35;
}
.learning-info-related {
    display: grid;
    gap: 7px;
}
.learning-info-related > div {
    display: grid;
    grid-template-columns: minmax(64px, auto) 1fr;
    gap: 10px;
    align-items: baseline;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
}
.learning-info-related > div:last-child { padding-bottom: 0; border-bottom: 0; }
.learning-info-related strong { color: var(--cyan); }
.learning-info-related span { color: var(--text); }
.learning-info-memory {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(16, 185, 129, .35);
    border-radius: 7px;
    background: rgba(16, 185, 129, .09);
}
.learning-info-memory strong { color: var(--green); }
.learning-info-memory span { color: var(--text); line-height: 1.5; }
.learning-info-source {
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.45;
}

@media (max-width: 767.98px) {
    .learning-info-modal .modal-dialog { margin: .6rem; }
    .learning-info-modal .modal-body { padding: 14px; }
    .learning-info-body { grid-template-columns: 1fr; }
    .learning-info-memory { grid-template-columns: 1fr; }
}

/* BZF local patch: wide radio map BEGIN */
/*
 * Funktrainer: volle verfügbare Breite nutzen und die Situationskarte
 * deutlich breiter darstellen.
 *
 * Der Patch ist absichtlich nur auf die aktive Funktrainer-Seite mit
 * #radioMapCard begrenzt. Andere Seiten, Vollbildmodus und die 3D-Engine
 * bleiben unverändert.
 */
@media (min-width: 1200px) {
    .content-stage:has(.app-page.active #radioMapCard) {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-right: 24px;
        padding-left: 24px;
    }

    .app-page.active:has(#radioMapCard) {
        width: 100%;
    }

    /* Bootstrap-Spalten der Funktrainer-Seite durch ein stabiles Grid ersetzen. */
    .app-page.active:has(#radioMapCard) .row:has(#radioMapCard) {
        display: grid !important;
        grid-template-columns: minmax(560px, 0.82fr) minmax(760px, 1.18fr);
        gap: 18px;
        align-items: start;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .app-page.active:has(#radioMapCard) .row:has(#radioMapCard) > [class*="col-"] {
        width: auto !important;
        max-width: none !important;
        flex: initial !important;
        padding-right: 0;
        padding-left: 0;
        min-width: 0;
    }

    .app-page.active:has(#radioMapCard) [class*="col-"]:has(#radioTranscript),
    .app-page.active:has(#radioMapCard) [class*="col-"]:has(#radioMapCard) {
        min-width: 0;
    }

    .app-page.active:has(#radioMapCard) #radioMapCard {
        width: 100%;
    }

    .app-page.active:has(#radioMapCard) #radioMapCard .training-map-canvas,
    .app-page.active:has(#radioMapCard) #radioMapCard .three-d-canvas,
    .app-page.active:has(#radioMapCard) #radioMapCard .three-d-renderer {
        min-height: clamp(470px, 50vh, 760px);
    }
}

@media (min-width: 1600px) {
    .app-page.active:has(#radioMapCard) .row:has(#radioMapCard) {
        grid-template-columns: minmax(620px, 0.76fr) minmax(920px, 1.24fr);
        gap: 20px;
    }

    .app-page.active:has(#radioMapCard) #radioMapCard .training-map-canvas,
    .app-page.active:has(#radioMapCard) #radioMapCard .three-d-canvas,
    .app-page.active:has(#radioMapCard) #radioMapCard .three-d-renderer {
        min-height: clamp(540px, 56vh, 850px);
    }
}

@media (min-width: 2100px) {
    .app-page.active:has(#radioMapCard) .row:has(#radioMapCard) {
        grid-template-columns: minmax(660px, 0.70fr) minmax(1100px, 1.30fr);
    }
}

@media (max-width: 1199.98px) {
    /* Auf Notebook/Tablet bleibt das bisherige Umschaltverhalten erhalten. */
    .content-stage:has(.app-page.active #radioMapCard) {
        max-width: none;
    }
}
/* BZF local patch: wide radio map END */

/* Realistisches, interaktives Instrumentenbrett im Funktrainer. */
.radio-instrument-panel { padding: 16px; border: 1px solid #334652; border-radius: 12px; background: linear-gradient(145deg, #20272b, #11171a); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.24); }
.instrument-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.instrument-panel-head h4 { margin:2px 0 0; color:#e8eef0; font-size:1rem; }
.instrument-summary { padding:5px 9px; border:1px solid #52636b; border-radius:5px; color:#aab7bc; font:700 .62rem/1.2 ui-monospace,monospace; letter-spacing:.07em; }
.instrument-summary.pending { border-color:#e3a936; color:#ffc85c; background:#3a2b12; }
.instrument-summary.complete { border-color:#3fbd75; color:#75e8a5; background:#113323; }
.instrument-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.avionics-unit,.round-instrument { position:relative; min-width:0; padding:10px; border:2px solid #07090a; border-radius:7px; background:linear-gradient(160deg,#252b2e,#111416); box-shadow:inset 0 0 0 1px #3b4245,0 2px 5px #050708; transition:border-color .18s,box-shadow .18s; }
.avionics-unit.required,.round-instrument.required { border-color:#d99a2b; box-shadow:inset 0 0 0 1px #5b431d,0 0 13px rgba(224,156,35,.25); }
.avionics-unit.correct,.round-instrument.correct { border-color:#2d9d60; box-shadow:inset 0 0 0 1px #24553a,0 0 12px rgba(45,157,96,.2); }
.instrument-label { display:flex; justify-content:space-between; align-items:center; color:#d8dfe1; font:700 .62rem/1.2 system-ui,sans-serif; letter-spacing:.08em; }
.instrument-label small { color:#7f9198; font-size:.54rem; }
.com-display { display:grid; grid-template-columns:1fr 28px 1fr; align-items:end; gap:5px; margin-top:8px; padding:7px; border-radius:3px; background:#06120b; box-shadow:inset 0 0 8px #000; }
.com-display div,.com-display label { min-width:0; margin:0; }
.com-display small { display:block; color:#659b74; font:600 .48rem monospace; }
.com-display strong,.com-display input,.xpdr-display input,.altitude-display input { width:100%; border:0; outline:0; color:#9cffae; background:transparent; font:700 clamp(.9rem,1.4vw,1.2rem)/1.1 ui-monospace,monospace; text-shadow:0 0 7px rgba(99,255,128,.48); }
.instrument-swap,.instrument-key,.knob-control button { border:1px solid #515b5e; border-radius:4px; color:#d3dcdf; background:linear-gradient(#3d4447,#1e2325); box-shadow:0 2px 2px #050606; }
.instrument-swap { width:28px; height:28px; padding:0; }
.xpdr-display { display:grid; grid-template-columns:1fr 60px 54px; gap:6px; align-items:center; margin-top:8px; padding:7px; background:#0a110d; }
.xpdr-display select { min-width:0; border:1px solid #4f5b55; border-radius:3px; color:#9cffae; background:#111a15; font:700 .65rem monospace; }
.instrument-key { height:29px; padding:0 5px; font-size:.58rem; }
.instrument-key.active { color:#fff; border-color:#e9b33d; background:#8b661c; }
.instrument-footer { display:flex; align-items:center; gap:6px; margin-top:8px; color:#89979c; font-size:.6rem; }
.instrument-led { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:#596065; box-shadow:inset 0 0 2px #000; }
.required .instrument-led { background:#ffc247; box-shadow:0 0 6px #e49c23; }
.correct .instrument-led { background:#53df8c; box-shadow:0 0 6px #30b66a; }
.round-instrument { display:grid; grid-template-columns:112px minmax(0,1fr); column-gap:11px; }
.round-instrument .instrument-label,.round-instrument .instrument-footer { grid-column:1/-1; }
.altimeter-face,.heading-face { position:relative; display:grid; place-items:center; width:72px; height:72px; margin-top:8px; border:3px solid #080a0b; border-radius:50%; color:#eef2ef; background:radial-gradient(circle,#303638 0 55%,#111 58%); box-shadow:inset 0 0 0 2px #596064; }
.altimeter-face strong,.heading-face strong { font:700 .75rem monospace; }
.altimeter-face small { position:absolute; bottom:12px; font-size:.45rem; }
.altimeter-needle { position:absolute; width:2px; height:25px; bottom:36px; background:#f4f4ec; transform:rotate(35deg); transform-origin:bottom; }
.heading-face { width:108px; height:108px; margin-top:8px; overflow:hidden; border:4px solid #080a0b; background:radial-gradient(circle at 48% 43%,#30383b 0 48%,#151a1c 70%,#070809 100%); box-shadow:inset 0 0 0 2px #687176,inset 0 0 16px #000,0 1px 2px #000; }
.heading-face::before { content:""; position:absolute; inset:8px; border-radius:50%; background:repeating-conic-gradient(from -1deg,#f3f6f2 0 1.5deg,transparent 1.5deg 10deg); opacity:.9; mask:radial-gradient(circle,transparent 0 72%,#000 73%); -webkit-mask:radial-gradient(circle,transparent 0 72%,#000 73%); }
.heading-card { position:absolute; inset:17px; color:#f8faf7; font:800 .76rem/1 ui-monospace,monospace; text-shadow:0 1px 3px #000; }
.heading-cardinal { position:absolute; }
.heading-north { top:0; left:50%; color:#ffcc54; transform:translateX(-50%); }
.heading-east { top:50%; right:0; transform:translateY(-50%); }
.heading-south { bottom:0; left:50%; transform:translateX(-50%); }
.heading-west { top:50%; left:0; transform:translateY(-50%); }
.heading-index { position:absolute; z-index:4; top:-1px; left:50%; color:#fff; font-size:.85rem; filter:drop-shadow(0 1px 1px #000); transform:translateX(-50%); }
.heading-bug { position:absolute; z-index:3; inset:7px; border-radius:50%; transform-origin:center; }
.heading-bug span { position:absolute; top:-1px; left:50%; width:0; height:0; border-right:6px solid transparent; border-bottom:10px solid #ffb836; border-left:6px solid transparent; filter:drop-shadow(0 0 3px rgba(255,184,54,.8)); transform:translateX(-50%); }
.heading-face strong { position:relative; z-index:2; min-width:64px; padding:5px 7px; border:1px solid #6f7a7f; border-radius:4px; color:#fff; background:rgba(3,8,10,.9); box-shadow:0 0 8px #000; font:800 1.08rem/1 ui-monospace,monospace; letter-spacing:.03em; text-align:center; text-shadow:0 0 5px rgba(255,255,255,.28); }
.knob-control { display:flex; align-items:center; align-self:center; gap:4px; margin-top:8px; }
.knob-control input { min-width:0; width:100%; border:1px solid #4b585c; border-radius:3px; color:#dfe9e4; background:#0b1113; text-align:center; font:700 .77rem monospace; }
.knob-control button { min-width:27px; height:27px; padding:0; }
.altitude-unit { grid-column:1/-1; display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; }
.altitude-unit .instrument-label,.altitude-unit .instrument-footer { grid-column:1/-1; }
.altitude-display { display:flex; align-items:baseline; gap:5px; padding:8px; background:#07110b; }
.altitude-display span { color:#70a77d; font:.65rem monospace; }
.altitude-unit .knob-control { margin:0; }
.instrument-help { margin:10px 0 0; color:#89989e; font-size:.67rem; }
@media (max-width:575.98px) { .instrument-grid{grid-template-columns:1fr}.altitude-unit{grid-column:auto}.round-instrument{grid-template-columns:112px minmax(0,1fr)} }

/* Hotfix 19: durchgehende, bildschirmfüllende Arbeitsfläche des Funktrainers. */
@media (min-width: 1200px) {
    body:has(#page-radio.active) { overflow: hidden; }
    body:has(#page-radio.active) .main-stage { height: 100vh; min-height: 0; overflow: hidden; }
    body:has(#page-radio.active) .topbar {
        min-height: 72px;
        height: 72px;
        padding: 10px 22px;
        position: relative;
    }
    body:has(#page-radio.active) .topbar h1 { font-size: 1.35rem; }
    body:has(#page-radio.active) .content-stage {
        height: calc(100vh - 72px);
        padding: 14px 18px 16px;
        overflow: hidden;
    }
    #page-radio.active,
    #page-radio .radio-workspace,
    #page-radio .radio-pane,
    #page-radio .cockpit-card { height: 100%; min-height: 0; }
    #page-radio .radio-workspace {
        grid-template-columns: minmax(470px, 36fr) minmax(680px, 64fr) !important;
        gap: 14px !important;
        align-items: stretch !important;
    }
    #page-radio .cockpit-card {
        padding: 14px;
        border-radius: 10px;
        box-shadow: 0 8px 26px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035);
    }

    /* Linke Arbeitskonsole: feste Bereiche statt einer endlosen Kartenfolge. */
    #radioTrainerCard { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
    #radioTrainerCard > * { flex: 0 0 auto; }
    #radioTrainerCard .training-mode-switch { display: flex; gap: 4px; }
    #radioTrainerCard .training-mode-switch .btn { min-height: 34px; padding: 5px 11px; font-size: .76rem; }
    #radioTrainerCard .radio-step-heading { margin-top: 2px; }
    #radioTrainerCard .radio-step-heading h3 { font-size: 1.05rem; }
    #radioTrainerCard .scenario-context { margin: 2px 0 4px; font-size: .78rem; line-height: 1.35; }
    #radioTrainerCard .atc-message {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 3px 10px;
        align-items: center;
        padding: 10px 12px;
        border-left-width: 3px;
        font-size: .92rem;
        line-height: 1.35;
    }
    #radioTrainerCard .atc-message .atc-label { grid-column: 1; margin: 0; }
    #radioTrainerCard .atc-message #radioAtcMessage { grid-column: 1; }
    #radioTrainerCard .atc-message .btn { grid-column: 2; grid-row: 1 / 3; margin: 0; min-height: 32px; }
    #radioTrainerCard label[for="radioTranscript"] { margin-top: 0 !important; margin-bottom: 2px; font-size: .74rem; }
    #radioTranscript { min-height: 54px; height: 54px; padding: 8px 10px; font-size: .84rem; resize: none; }
    #radioTranscript + .d-flex { margin-top: 0 !important; flex-wrap: nowrap !important; }
    #radioTranscript + .d-flex .btn { min-height: 34px; padding: 5px 9px; font-size: .72rem; white-space: nowrap; }
    #radioFeedback { max-height: 92px; overflow: auto; margin-top: 0 !important; font-size: .76rem; }
    #radioFeedback:not(:empty) { padding: 8px 10px; }
    #radioProcessing { margin-top: 0; font-size: .75rem; }
    #radioFlowStatus { padding: 8px 10px; }
    #radioFlowTimeline, #radioFlightState { display: none; }

    /* Instrumentenbrett nutzt den verbleibenden Platz und bleibt ohne Seiten-Scroll sichtbar. */
    :is(#radioInstrumentPanel, .instrument-detail-stage) {
        flex: 1 1 auto;
        min-height: 0;
        margin-top: 0 !important;
        padding: 10px;
        overflow: hidden;
    }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-panel-head { margin-bottom: 7px; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-panel-head h4 { font-size: .86rem; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-grid {
        height: calc(100% - 38px);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: minmax(78px, .75fr) minmax(112px, 1.25fr);
        gap: 7px;
    }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .avionics-unit,
    :is(#radioInstrumentPanel, .instrument-detail-stage) .round-instrument { padding: 7px; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) [data-instrument="frequency"] { grid-column: span 2; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) [data-instrument="squawk"] { grid-column: span 2; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) [data-instrument="qnh"],
    :is(#radioInstrumentPanel, .instrument-detail-stage) [data-instrument="heading"] { grid-column: span 1; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .round-instrument { grid-template-columns: 1fr; place-items: center; column-gap: 4px; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .round-instrument .instrument-label,
    :is(#radioInstrumentPanel, .instrument-detail-stage) .round-instrument .instrument-footer { width: 100%; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-face { width: 74px; height: 74px; margin-top: 2px; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .heading-face { width: 88px; height: 88px; margin-top: 2px; border-width: 3px; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .heading-card { inset: 14px; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .heading-face strong { min-width: 54px; padding: 4px; font-size: .88rem; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .knob-control { width: 100%; margin-top: 3px; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .altitude-unit { grid-column: span 2; align-self: stretch; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-footer { margin-top: 3px; font-size: .52rem; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-help { display: none; }

    /* Rechte Seite: Bedienleiste kompakt, Karte maximal groß. */
    #radioMapCard { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
    #radioMapCard .map-heading h3 { font-size: 1.05rem; }
    #radioMapCard .three-d-mode-switch { position: absolute; top: 13px; right: 92px; margin: 0 !important; z-index: 2; }
    #radioMapCard .three-d-mode-switch .btn { min-height: 32px; padding: 4px 9px; }
    #singleScenarioControls { display: grid; grid-template-columns: 1fr 1fr 1.45fr; gap: 8px; align-items: end; }
    #singleScenarioControls > .row { display: contents; }
    #singleScenarioControls [class*="col-"] { width: auto; padding: 0; }
    #singleScenarioControls label { margin: 0 0 2px !important; font-size: .68rem; }
    #singleScenarioControls .cockpit-input { min-height: 36px; height: 36px; padding: 5px 9px; font-size: .75rem; }
    #singleScenarioControls > label[for="radioScenario"] { grid-column: 3; grid-row: 1; }
    #radioScenario { grid-column: 3; grid-row: 1; margin-top: 20px; }
    #radioMap2DPanel,
    #radio3DPanel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    #radio3DPanel.d-none { display: none !important; }
    #radioMapCard .map-toolbar { margin-top: 0 !important; gap: 4px; }
    #radioMapCard .map-toolbar .btn { min-height: 31px; padding: 3px 8px; font-size: .68rem; }
    #radioMapCanvas,
    #radioMapCard .three-d-canvas,
    #radioMapCard .three-d-renderer {
        flex: 1 1 auto;
        min-height: 0 !important;
        height: auto !important;
        margin-top: 0 !important;
    }
    #radioMapCard .map-meta-row { margin-top: 5px; padding-top: 5px; }
    #radioMapCard .map-analysis-footer,
    #radioMapCard .map-legend { display: none; }
}

/* Das helle Schema erhält eine ruhige, professionelle Leitwarten-Optik. */
html[data-theme="light"] #page-radio .cockpit-card {
    border-color: #c9d9e3;
    background: linear-gradient(145deg, #ffffff, #f5f9fb);
    box-shadow: 0 8px 24px rgba(35,67,86,.10), inset 0 1px 0 #fff;
}
html[data-theme="light"] #radioTrainerCard .atc-message {
    color: #173347;
    background: linear-gradient(90deg, #eaf7fb, #f7fbfd);
}
html[data-theme="light"] :is(#radioInstrumentPanel, .instrument-detail-stage) { border-color: #263740; }

@media (max-height: 820px) and (min-width: 1200px) {
    #radioTrainerCard .scenario-context { display: none; }
    #radioTranscript { min-height: 44px; height: 44px; }
    #radioFeedback { max-height: 58px; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-panel-head { margin-bottom: 4px; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-grid { height: calc(100% - 32px); }
}

/* Hotfix 20: zusammenhaengendes Instrumentenbrett im Stil einer Cessna 172. */
#radioInstrumentPanel.radio-instrument-panel {
    position: relative;
    border: 5px solid #090a0a;
    border-radius: 11px;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.055), transparent 22%),
        linear-gradient(112deg, transparent 0 48%, rgba(255,255,255,.018) 49%, transparent 51%),
        #242626;
    box-shadow: inset 0 0 0 1px #505252, inset 0 0 38px rgba(0,0,0,.72), 0 5px 14px rgba(0,0,0,.55);
}
#radioInstrumentPanel::before {
    content: ""; position: absolute; inset: 7px; pointer-events: none; border: 1px solid rgba(255,255,255,.06); border-radius: 5px;
}
.panel-screw { position:absolute; z-index:5; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#a2a6a5,#444 42%,#101111 72%); box-shadow:0 1px 2px #000; }
.panel-screw::after { content:""; position:absolute; top:4px; left:2px; width:6px; height:1px; background:#181919; transform:rotate(-18deg); }
.screw-tl{top:8px;left:9px}.screw-tr{top:8px;right:9px}.screw-bl{bottom:8px;left:9px}.screw-br{bottom:8px;right:9px}
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-panel-head { position:relative; z-index:2; padding: 0 15px 5px; border-bottom:1px solid #111; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-panel-head h4 { color:#ddd9c9; font:600 .78rem/1.15 "Arial Narrow",sans-serif; letter-spacing:.16em; text-transform:uppercase; text-shadow:0 1px #000; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-panel-head .eyebrow { color:#aaa797; letter-spacing:.18em; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-summary { border-color:#151616; color:#d5d0bd; background:#121414; box-shadow:inset 0 0 5px #000; }

:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-grid { position:relative; z-index:2; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .avionics-unit,
:is(#radioInstrumentPanel, .instrument-detail-stage) .round-instrument { border:0; border-radius:3px; background:transparent; box-shadow:none; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .avionics-unit { border:2px solid #070808; background:linear-gradient(145deg,#1d2020,#0a0b0b); box-shadow:inset 0 0 0 1px #3c3e3d,0 2px 4px #050505; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-label { color:#d6d2c2; font-family:"Arial Narrow",Arial,sans-serif; text-shadow:0 1px 1px #000; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-label small { color:#85867f; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-footer { color:#9c9d94; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .round-instrument.required,
:is(#radioInstrumentPanel, .instrument-detail-stage) .avionics-unit.required { outline:2px solid #b87b1f; outline-offset:-1px; box-shadow:0 0 12px rgba(239,164,47,.3); }
:is(#radioInstrumentPanel, .instrument-detail-stage) .round-instrument.correct,
:is(#radioInstrumentPanel, .instrument-detail-stage) .avionics-unit.correct { outline:2px solid #357d51; outline-offset:-1px; box-shadow:0 0 10px rgba(65,190,112,.22); }

:is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-face,
:is(#radioInstrumentPanel, .instrument-detail-stage) .heading-face {
    border:7px solid #090a0a; outline:2px solid #4d4f4d; color:#f1efe4;
    background:radial-gradient(circle at 43% 38%,#292a28 0,#111212 58%,#030404 100%);
    box-shadow:inset 0 0 18px #000,0 3px 5px #050505,0 0 0 1px #080808;
}
:is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-face::before,
:is(#radioInstrumentPanel, .instrument-detail-stage) .heading-face::after { content:""; position:absolute; inset:3px; border-radius:50%; border:1px solid rgba(255,255,255,.13); pointer-events:none; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-face { overflow:hidden; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-face::after { content:""; position:absolute; inset:8px; border-radius:50%; background:repeating-conic-gradient(#e8e7dc 0 1deg,transparent 1deg 18deg); -webkit-mask:radial-gradient(circle,transparent 0 70%,#000 71%); mask:radial-gradient(circle,transparent 0 70%,#000 71%); }
.gauge-scale { position:absolute; inset:14px; color:#edeadf; font:700 .52rem/1 Arial,sans-serif; text-shadow:0 1px 2px #000; }
.gauge-scale span{position:absolute}.gauge-n0{top:0;left:50%;transform:translateX(-50%)}.gauge-n3{right:0;top:50%;transform:translateY(-50%)}.gauge-n6{bottom:0;left:50%;transform:translateX(-50%)}.gauge-n9{left:0;top:50%;transform:translateY(-50%)}
:is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-needle { z-index:3; width:3px; height:34%; bottom:50%; background:linear-gradient(90deg,#aaa,#fff 55%,#888); clip-path:polygon(50% 0,100% 100%,0 100%); filter:drop-shadow(1px 1px 1px #000); }
.gauge-hub { position:absolute; z-index:4; width:10px; height:10px; border:2px solid #bbb; border-radius:50%; background:#171818; box-shadow:0 1px 2px #000; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-face strong { position:absolute; z-index:2; bottom:19%; min-width:34px; padding:1px 3px; border:1px solid #5a5b55; color:#ecebdc; background:#050606; text-align:center; font-size:.58rem; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-face small { bottom:7%; color:#aaa89c; font:600 .42rem Arial,sans-serif; letter-spacing:.12em; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .heading-card { color:#eceade; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .heading-north { color:#f4eee0; font-size:1.2em; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .heading-face strong { border-color:#343634; color:#f3a43d; background:#070908; text-shadow:0 0 5px rgba(255,145,36,.55); }
:is(#radioInstrumentPanel, .instrument-detail-stage) .heading-bug span { border-bottom-color:#ff9e2c; }

:is(#radioInstrumentPanel, .instrument-detail-stage) .com-display,
:is(#radioInstrumentPanel, .instrument-detail-stage) .xpdr-display,
:is(#radioInstrumentPanel, .instrument-detail-stage) .altitude-display { border:1px solid #030505; background:#030805; box-shadow:inset 0 0 8px #000,0 0 0 1px #292c29; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .com-display strong,
:is(#radioInstrumentPanel, .instrument-detail-stage) .com-display input,
:is(#radioInstrumentPanel, .instrument-detail-stage) .xpdr-display input,
:is(#radioInstrumentPanel, .instrument-detail-stage) .altitude-display input { color:#e59b43; text-shadow:0 0 7px rgba(255,135,32,.6); font-family:"Courier New",monospace; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .com-display small,
:is(#radioInstrumentPanel, .instrument-detail-stage) .altitude-display span { color:#8c6840; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .xpdr-display select { color:#e59b43; background:#090d0a; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-swap,
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-key,
:is(#radioInstrumentPanel, .instrument-detail-stage) .knob-control button { border-color:#181a19; border-radius:50%; color:#d0cec3; background:radial-gradient(circle at 35% 30%,#555856,#242625 52%,#090a0a 100%); box-shadow:inset 0 0 0 1px #666,0 2px 3px #000; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-swap { border-radius:4px; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-key { border-radius:3px; }
:is(#radioInstrumentPanel, .instrument-detail-stage) .knob-control input { border-color:#242626; color:#e4e0d2; background:#090a0a; }

@media (min-width:1200px) {
    :is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-grid { grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); }
    :is(#radioInstrumentPanel, .instrument-detail-stage) [data-instrument="qnh"] { grid-column:1 / span 2; grid-row:1 / span 3; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) [data-instrument="heading"] { grid-column:3 / span 2; grid-row:1 / span 3; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) [data-instrument="frequency"] { grid-column:5 / span 2; grid-row:1; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) [data-instrument="squawk"] { grid-column:5 / span 2; grid-row:2; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) [data-instrument="altitude"] { position:relative; right:auto; bottom:auto; width:auto; transform:none; grid-column:5 / span 2; grid-row:3; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .round-instrument { display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr auto auto; place-items:center; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-face,
    :is(#radioInstrumentPanel, .instrument-detail-stage) .heading-face { width:min(118px,100%); height:auto; aspect-ratio:1; margin:3px 0; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .knob-control { max-width:120px; }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .altitude-unit { display:grid; grid-template-columns:1fr auto; }
}

@media (max-height:820px) and (min-width:1200px) {
    :is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-face,:is(#radioInstrumentPanel, .instrument-detail-stage) .heading-face { width:min(96px,100%); }
    :is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-footer { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* Hotfix 21: vorbildnahe Gerätefronten und vollständige analoge Skalen. */
:is(#radioInstrumentPanel, .instrument-detail-stage) .avionics-brand{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px;color:#deddd5;font:600 .48rem/1 Arial,sans-serif;letter-spacing:.07em}
:is(#radioInstrumentPanel, .instrument-detail-stage) .avionics-brand b{font-size:.58rem;font-style:italic;letter-spacing:-.03em}
:is(#radioInstrumentPanel, .instrument-detail-stage) .com-radio-unit,:is(#radioInstrumentPanel, .instrument-detail-stage) .xpdr-unit{padding:6px 7px!important;background:linear-gradient(180deg,#242526,#090a0a 12%,#121313 88%,#292a2a)!important}
:is(#radioInstrumentPanel, .instrument-detail-stage) .com-display{display:grid;grid-template-columns:1fr 27px 1fr;gap:3px;padding:4px}
:is(#radioInstrumentPanel, .instrument-detail-stage) .com-channel{min-width:0;padding:2px 4px;border:1px solid #1d352c;background:#020604}
:is(#radioInstrumentPanel, .instrument-detail-stage) .com-channel small{display:block;color:#a17734;font-size:.38rem;letter-spacing:.08em}
:is(#radioInstrumentPanel, .instrument-detail-stage) .com-display strong,:is(#radioInstrumentPanel, .instrument-detail-stage) .com-display input{font-size:clamp(.72rem,1.1vw,1rem);text-align:center}
:is(#radioInstrumentPanel, .instrument-detail-stage) .active-channel strong{color:#ffc05a;text-shadow:0 0 8px #b45c13}
:is(#radioInstrumentPanel, .instrument-detail-stage) .avionics-controls{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
:is(#radioInstrumentPanel, .instrument-detail-stage) .avionics-controls button,:is(#radioInstrumentPanel, .instrument-detail-stage) .xpdr-keyboard button{border:1px solid #080909;color:#deddd4;background:linear-gradient(#383a3a,#151616);box-shadow:inset 0 0 0 1px #555,0 1px 2px #000;font:600 .42rem/1 Arial,sans-serif}
:is(#radioInstrumentPanel, .instrument-detail-stage) .radio-softkey{width:28px;height:28px;border-radius:50%!important}.radio-softkey span{font-size:.3rem}
:is(#radioInstrumentPanel, .instrument-detail-stage) .radio-key-row{display:flex;gap:3px}.radio-key-row button{height:17px;border-radius:2px!important}
:is(#radioInstrumentPanel, .instrument-detail-stage) .dual-knob{position:relative;width:30px;height:30px;border-radius:50%!important}.dual-knob i{position:absolute;inset:6px;border:1px solid #777;border-radius:50%;background:#202121}.dual-knob span{position:absolute;right:31px;bottom:0;width:26px;color:#aaa;font-size:.3rem}
:is(#radioInstrumentPanel, .instrument-detail-stage) .xpdr-display{display:block;margin:0;padding:3px}
:is(#radioInstrumentPanel, .instrument-detail-stage) .xpdr-screen{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;height:36px;padding:2px 5px;border:1px solid #211b0e;background:#080702;box-shadow:inset 0 0 10px #000}
:is(#radioInstrumentPanel, .instrument-detail-stage) .xpdr-screen label{grid-column:1;grid-row:1/3}.xpdr-screen input{font-size:1.15rem!important;letter-spacing:.18em}.xpdr-screen strong{grid-column:2;grid-row:1;color:#f2ae3f;font:700 .6rem monospace}.xpdr-screen small{grid-column:2;grid-row:2;color:#9d752e;font:.42rem monospace}
:is(#radioInstrumentPanel, .instrument-detail-stage) .xpdr-flight-level{position:absolute;right:4px;top:2px;color:#8b6728;font:.34rem monospace;transform:translateY(-110%)}
:is(#radioInstrumentPanel, .instrument-detail-stage) .xpdr-keyboard{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-top:4px}
:is(#radioInstrumentPanel, .instrument-detail-stage) .xpdr-keyboard button{min-width:0;height:18px;padding:0;border-radius:2px}.xpdr-keyboard button:active,.xpdr-keyboard button.active{color:#fff3cf;background:#8b5b17}.xpdr-keyboard button:disabled{color:#777;opacity:.55}
:is(#radioInstrumentPanel, .instrument-detail-stage) .xpdr-keyboard .xpdr-function{height:14px;color:#aaa;font-size:.32rem}
:is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-scale,:is(#radioInstrumentPanel, .instrument-detail-stage) .heading-card{inset:50%;width:0;height:0}
:is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-scale span,:is(#radioInstrumentPanel, .instrument-detail-stage) .heading-card span{position:absolute;left:0;top:0;transform:rotate(calc(var(--i)*36deg)) translateY(-43px) rotate(calc(var(--i)*-36deg)) translate(-50%,-50%);font-size:.52rem}
:is(#radioInstrumentPanel, .instrument-detail-stage) .heading-card{transition:transform .15s ease-out}
:is(#radioInstrumentPanel, .instrument-detail-stage) .heading-card span{transform:rotate(calc(var(--i)*30deg)) translateY(-39px) rotate(calc(var(--i)*-30deg)) translate(-50%,-50%);font-size:.48rem}
:is(#radioInstrumentPanel, .instrument-detail-stage) .heading-card span:nth-child(3n+1){font-size:.68rem;color:#f5f1df}
:is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-short-hand{height:23%!important;width:5px!important;transform:rotate(112deg);background:#eee!important}
:is(#radioInstrumentPanel, .instrument-detail-stage) .altimeter-long-hand{transform:rotate(35deg)}
:is(#radioInstrumentPanel, .instrument-detail-stage) .qnh-window{position:absolute;z-index:3;right:9%;top:49%;padding:1px 2px;border:1px solid #777;color:#eee;background:#050505;font:600 .42rem monospace}
:is(#radioInstrumentPanel, .instrument-detail-stage) .gauge-mark{position:absolute;top:28%;left:50%;color:#aaa;font:.38rem Arial,sans-serif;transform:translateX(-50%)}
:is(#radioInstrumentPanel, .instrument-detail-stage) .heading-face>small{position:absolute;bottom:17%;color:#888;font:.38rem Arial,sans-serif;letter-spacing:.12em}
@media(max-height:820px) and (min-width:1200px){:is(#radioInstrumentPanel, .instrument-detail-stage) .xpdr-keyboard button{height:15px}.xpdr-keyboard .xpdr-function{display:none!important}:is(#radioInstrumentPanel, .instrument-detail-stage) .com-controls{display:none}}

/* Hotfix 22: Instrumente per Klick in einer grossen, ruhigen Detailansicht zeigen. */
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-expandable{cursor:zoom-in}
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-expandable::after{content:"\2922";position:absolute;right:7px;top:7px;z-index:8;width:20px;height:20px;border:1px solid #62645f;border-radius:4px;color:#e5e1d2;background:rgba(5,6,6,.82);font:700 13px/18px Arial;text-align:center;opacity:.68;box-shadow:0 1px 3px #000;transition:opacity .15s,transform .15s}
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-expandable:hover::after,:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-expandable:focus-visible::after{opacity:1;transform:scale(1.08)}
:is(#radioInstrumentPanel, .instrument-detail-stage) .instrument-expandable:focus-visible{outline:2px solid #e2a247!important;outline-offset:2px}
.instrument-detail-modal .modal-content{border:1px solid #555b5a;color:#e9e5d7;background:linear-gradient(145deg,#282b2b,#101212);box-shadow:0 24px 70px rgba(0,0,0,.75)}
.instrument-detail-modal .modal-header{border-bottom-color:#383c3b;background:#171919}
.instrument-detail-modal .modal-body{padding:clamp(18px,3vw,40px);background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.055),transparent 42%),#202323}
.instrument-detail-stage{display:flex;align-items:center;justify-content:center;min-height:min(64vh,620px);overflow:hidden}
.instrument-detail-copy{position:relative!important;display:flex!important;flex-direction:column;justify-content:center;width:min(760px,88vw)!important;min-height:420px!important;margin:0!important;padding:clamp(20px,3vw,42px)!important;border:6px solid #070808!important;border-radius:12px!important;background:linear-gradient(160deg,#252829,#090a0a)!important;box-shadow:inset 0 0 0 2px #505452,0 18px 42px #050606!important;transform:none!important}
.instrument-detail-copy.round-instrument{width:min(600px,82vw)!important;aspect-ratio:1;min-height:0!important}
.instrument-detail-copy .instrument-label{display:flex;justify-content:space-between;color:#ddd9ca;font:700 1rem Arial,sans-serif;letter-spacing:.1em}
.instrument-detail-copy .instrument-footer{margin-top:18px;color:#aaa;font-size:1rem}
.instrument-detail-copy .altimeter-face,.instrument-detail-copy .heading-face{position:relative;width:min(430px,64vw)!important;height:min(430px,64vw)!important;margin:auto;border:14px solid #080909;border-radius:50%;background:radial-gradient(circle at 43% 38%,#292a28,#050606 78%);box-shadow:inset 0 0 38px #000,0 8px 18px #000;transform:scale(1.05)}
.instrument-detail-copy .gauge-scale,.instrument-detail-copy .heading-card{position:absolute;inset:50%;width:0;height:0}
.instrument-detail-copy .gauge-scale span{position:absolute;transform:rotate(calc(var(--i)*36deg)) translateY(-170px) rotate(calc(var(--i)*-36deg)) translate(-50%,-50%);font-size:1.6rem}
.instrument-detail-copy .heading-card span{position:absolute;transform:rotate(calc(var(--i)*30deg)) translateY(-165px) rotate(calc(var(--i)*-30deg)) translate(-50%,-50%);font-size:1.5rem}
.instrument-detail-copy .heading-card span:nth-child(3n+1){font-size:2rem}
.instrument-detail-copy .com-display,.instrument-detail-copy .xpdr-display,.instrument-detail-copy .altitude-display{margin:20px 0;padding:18px;border:3px solid #030505;background:#020604;box-shadow:inset 0 0 18px #000,0 0 0 2px #3d413f}
.instrument-detail-copy .com-display{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:12px}
.instrument-detail-copy .com-display strong,.instrument-detail-copy .com-display input,.instrument-detail-copy .xpdr-screen input,.instrument-detail-copy .altitude-display input{font-size:clamp(2rem,5vw,4.5rem)!important;color:#ffc05a;text-shadow:0 0 12px #a95813}
.instrument-detail-copy .com-channel small,.instrument-detail-copy .altitude-display span{font-size:1rem;color:#a97834}
.instrument-detail-copy .xpdr-screen{height:150px;padding:15px}.instrument-detail-copy .xpdr-screen strong{font-size:1.5rem}.instrument-detail-copy .xpdr-screen small{font-size:1rem}
.instrument-detail-copy .xpdr-keyboard{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px}.instrument-detail-copy .xpdr-keyboard button{height:48px;font-size:1rem}
.instrument-detail-copy .avionics-brand{font-size:1rem}.instrument-detail-copy .avionics-brand b{font-size:1.35rem}
.instrument-detail-copy .knob-control{display:flex;justify-content:center;gap:10px;margin-top:18px}.instrument-detail-copy .knob-control button,.instrument-detail-copy .knob-control input{min-height:48px;font-size:1.2rem}
.instrument-detail-copy button:not(:disabled),.instrument-detail-copy input:not(:disabled),.instrument-detail-copy select:not(:disabled){cursor:pointer}
.instrument-detail-copy input,.instrument-detail-copy select{pointer-events:auto;user-select:text}
.instrument-detail-copy .radio-softkey{flex:0 0 54px!important;width:54px!important;height:54px!important;border-radius:50%!important}
.instrument-detail-copy .dual-knob{flex:0 0 58px!important;width:58px!important;height:58px!important;border-radius:50%!important}
.instrument-detail-copy .dual-knob i{inset:12px}
.instrument-detail-copy .radio-key-row button{height:38px!important;padding:0 14px!important;font-size:.8rem!important}
.instrument-detail-copy .avionics-controls{gap:16px}
.instrument-detail-copy .com-channel{padding:10px 14px}
.instrument-detail-hint{margin:22px 0 0;color:#999;text-align:center;font-size:.9rem}
@media(max-width:600px){.instrument-detail-stage{min-height:68vh}.instrument-detail-copy{min-height:340px!important}.instrument-detail-copy .altimeter-face,.instrument-detail-copy .heading-face{width:72vw!important;height:72vw!important}.instrument-detail-copy .gauge-scale span{transform:rotate(calc(var(--i)*36deg)) translateY(-29vw) rotate(calc(var(--i)*-36deg)) translate(-50%,-50%);font-size:1rem}.instrument-detail-copy .heading-card span{transform:rotate(calc(var(--i)*30deg)) translateY(-28vw) rotate(calc(var(--i)*-30deg)) translate(-50%,-50%);font-size:1rem}}

/* Hotfix 24: geraetespezifische, kompakte Detailansichten ohne Erklaertext. */
.instrument-detail-modal .modal-dialog{width:min(900px,calc(100vw - 32px));max-width:900px;margin:16px auto}
.instrument-detail-modal .modal-content{overflow:hidden;border:1px solid #3e4544;border-radius:9px;background:#151818}
.instrument-detail-modal .modal-header{min-height:68px;padding:14px 18px;border-bottom:1px solid #343938}
.instrument-detail-modal .modal-header .eyebrow{font-size:.64rem;letter-spacing:.16em}
.instrument-detail-modal .modal-title{margin-top:3px;font-size:1rem}
.instrument-detail-modal .modal-body{display:flex;align-items:center;justify-content:center;min-height:0;padding:26px;background:radial-gradient(circle at 50% 28%,#292d2c 0,#1c201f 56%,#151817 100%)}
.instrument-detail-stage{width:100%;min-height:0;overflow:visible}
.instrument-detail-copy{box-sizing:border-box;flex:none!important;min-height:0!important;margin:0 auto!important;padding:18px!important;border:5px solid #070808!important;border-radius:9px!important;background:linear-gradient(165deg,#202323,#090a0a)!important;box-shadow:inset 0 0 0 2px #454a48,0 14px 28px rgba(0,0,0,.58)!important}
.instrument-detail-copy::after{display:none!important}
.instrument-detail-copy .instrument-footer{margin-top:10px;font-size:.68rem}

/* Klassische Rundinstrumente: quadratisches Einbaugehaeuse und grosse Skala. */
.instrument-detail-copy.round-instrument{display:grid!important;grid-template-rows:auto 1fr auto auto!important;width:min(500px,calc(100vw - 84px))!important;aspect-ratio:1/1.06!important;padding:22px 28px 18px!important}
.instrument-detail-copy.round-instrument .instrument-label{font-size:.86rem}
.instrument-detail-copy .altimeter-face,.instrument-detail-copy .heading-face{width:min(350px,66vw)!important;height:min(350px,66vw)!important;border-width:10px;transform:none!important}
.instrument-detail-copy .gauge-scale span{transform:rotate(calc(var(--i)*36deg)) translateY(-139px) rotate(calc(var(--i)*-36deg)) translate(-50%,-50%);font-size:1.05rem}
.instrument-detail-copy .heading-card span{transform:rotate(calc(var(--i)*30deg)) translateY(-136px) rotate(calc(var(--i)*-30deg)) translate(-50%,-50%);font-size:1rem}
.instrument-detail-copy .heading-card span:nth-child(3n+1){font-size:1.35rem}
.instrument-detail-copy.round-instrument .knob-control{width:140px;margin:8px auto 0}
.instrument-detail-copy.round-instrument .knob-control button,.instrument-detail-copy.round-instrument .knob-control input{min-height:38px;font-size:.95rem}

/* Garmin COM: typisches breites 2:1-Format statt hoher Web-Karte. */
.instrument-detail-copy[data-instrument="frequency"]{width:min(700px,calc(100vw - 84px))!important;min-height:0!important;padding:16px 18px!important}
.instrument-detail-copy[data-instrument="frequency"] .com-display{grid-template-columns:1fr 46px 1fr;gap:8px;margin:14px 0 12px;padding:7px}
.instrument-detail-copy[data-instrument="frequency"] .com-channel{padding:7px 10px}
.instrument-detail-copy[data-instrument="frequency"] .com-display strong,.instrument-detail-copy[data-instrument="frequency"] .com-display input{font-size:clamp(1.9rem,5vw,3.25rem)!important}
.instrument-detail-copy[data-instrument="frequency"] .avionics-controls{margin-top:10px}
.instrument-detail-copy[data-instrument="frequency"] .radio-softkey{width:48px!important;height:48px!important;flex-basis:48px!important}
.instrument-detail-copy[data-instrument="frequency"] .dual-knob{width:52px!important;height:52px!important;flex-basis:52px!important}

/* Garmin Transponder: flaches Rackgeraet mit gut lesbarer Tastenmatrix. */
.instrument-detail-copy[data-instrument="squawk"]{width:min(700px,calc(100vw - 84px))!important;min-height:0!important;padding:16px 18px!important}
.instrument-detail-copy[data-instrument="squawk"] .xpdr-display{margin:12px 0 8px;padding:6px}
.instrument-detail-copy[data-instrument="squawk"] .xpdr-screen{height:82px;padding:8px 12px}
.instrument-detail-copy[data-instrument="squawk"] .xpdr-screen input{font-size:3rem!important}
.instrument-detail-copy[data-instrument="squawk"] .xpdr-screen strong{font-size:1.15rem}
.instrument-detail-copy[data-instrument="squawk"] .xpdr-keyboard{gap:5px;margin-top:8px}
.instrument-detail-copy[data-instrument="squawk"] .xpdr-keyboard button{height:31px;font-size:.68rem}
.instrument-detail-copy[data-instrument="squawk"] .xpdr-keyboard .xpdr-function{height:25px;font-size:.55rem}

/* Hoehenvorwahl bleibt ein kompaktes Rackinstrument. */
.instrument-detail-copy[data-instrument="altitude"]{width:min(500px,calc(100vw - 84px))!important;min-height:0!important;padding:20px!important}
.instrument-detail-copy[data-instrument="altitude"] .altitude-display{margin:14px 0 10px;padding:12px}
.instrument-detail-copy[data-instrument="altitude"] .altitude-display input{font-size:2.8rem!important}

@media(max-width:600px){
  .instrument-detail-modal .modal-dialog{width:calc(100vw - 16px);margin:8px auto}
  .instrument-detail-modal .modal-header{min-height:60px;padding:10px 13px}
  .instrument-detail-modal .modal-body{padding:14px}
  .instrument-detail-copy,.instrument-detail-copy.round-instrument,.instrument-detail-copy[data-instrument]{width:calc(100vw - 44px)!important;padding:14px!important}
  .instrument-detail-copy.round-instrument{aspect-ratio:auto!important}
  .instrument-detail-copy .altimeter-face,.instrument-detail-copy .heading-face{width:min(72vw,310px)!important;height:min(72vw,310px)!important}
  .instrument-detail-copy .gauge-scale span{transform:rotate(calc(var(--i)*36deg)) translateY(-28vw) rotate(calc(var(--i)*-36deg)) translate(-50%,-50%);font-size:.85rem}
  .instrument-detail-copy .heading-card span{transform:rotate(calc(var(--i)*30deg)) translateY(-27vw) rotate(calc(var(--i)*-30deg)) translate(-50%,-50%);font-size:.82rem}
  .instrument-detail-copy[data-instrument="frequency"] .com-display strong,.instrument-detail-copy[data-instrument="frequency"] .com-display input{font-size:clamp(1.25rem,7vw,2rem)!important}
  .instrument-detail-copy[data-instrument="squawk"] .xpdr-screen input{font-size:2rem!important}
}