/* StarshipOS — Audio-Station (templates/audio/station.html) */
:root {
    --audio-bg: #070b12;
    --audio-surface: #0f1622;
    --audio-border: #1f2b3d;
    --audio-text: #d6e2f0;
    --audio-muted: #7d8ca3;
    --audio-accent: #3fb6ff;
    --audio-ok: #3ddc97;
    --audio-warn: #ffb347;
    --audio-danger: #ff5c5c;
}

* { box-sizing: border-box; }

body.audio-body {
    margin: 0;
    background: var(--audio-bg);
    color: var(--audio-text);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
}

.audio-station { max-width: 960px; margin: 0 auto; padding: 16px; display: grid; gap: 12px; }

.audio-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.audio-header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.08em; text-transform: uppercase; }

.audio-status { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--audio-border); font-size: 0.85rem; }
.audio-status[data-tone="ok"] { color: var(--audio-ok); border-color: var(--audio-ok); }
.audio-status[data-tone="warn"] { color: var(--audio-warn); border-color: var(--audio-warn); }
.audio-status[data-tone="danger"] { color: var(--audio-danger); border-color: var(--audio-danger); }

.audio-unlock {
    display: grid; gap: 6px; padding: 28px 16px; font-size: 1.3rem; font-weight: 600;
    color: var(--audio-bg); background: var(--audio-accent); border: 0; border-radius: 12px; cursor: pointer;
}
.audio-unlock small { font-size: 0.8rem; font-weight: 400; }
.audio-unlock[hidden] { display: none; }

.audio-card { background: var(--audio-surface); border: 1px solid var(--audio-border); border-radius: 10px; padding: 12px 14px; }
.audio-card h2 { margin: 0 0 8px; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--audio-muted); }
.audio-hint { margin: 0 0 8px; color: var(--audio-muted); font-size: 0.85rem; }
.audio-hint code { color: var(--audio-text); }

.audio-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.audio-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--audio-border); color: var(--audio-muted); font-size: 0.8rem; }
.audio-chip.is-on { color: var(--audio-bg); background: var(--audio-accent); border-color: var(--audio-accent); }

.audio-row { display: flex; align-items: center; gap: 12px; }
.audio-row input[type="range"] { flex: 1; min-width: 0; }

.audio-btn {
    padding: 6px 12px; border-radius: 6px; border: 1px solid var(--audio-border);
    background: #16202f; color: var(--audio-text); cursor: pointer; font-size: 0.85rem;
}
.audio-btn:hover { border-color: var(--audio-accent); }

.audio-layers { display: grid; gap: 8px; }
.audio-layer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.audio-layer.is-off { opacity: 0.45; }
.audio-layer-name, .audio-layer-info { font-size: 0.85rem; overflow-wrap: anywhere; }
.audio-layer-info { color: var(--audio-muted); }
.audio-meter { height: 8px; background: #1a2536; border-radius: 4px; overflow: hidden; }
.audio-meter span { display: block; height: 100%; background: var(--audio-accent); transition: width 0.4s ease; }

.audio-tests { display: flex; flex-wrap: wrap; gap: 6px; }

.audio-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.audio-log, .audio-files { margin: 0; padding-left: 18px; font-size: 0.82rem; color: var(--audio-muted); max-height: 240px; overflow-y: auto; }
.audio-files li[data-state="datei"] { color: var(--audio-ok); }
.audio-files li[data-state="platzhalter"] { color: var(--audio-warn); }
.audio-files li[data-state="fehlt"] { color: var(--audio-danger); }

@media (max-width: 640px) {
    .audio-split { grid-template-columns: 1fr; }
    .audio-layer { grid-template-columns: 1fr; gap: 4px; }
}

/* Lautsprecher öffnen (Vorlagen aus AudioSpeakerLinks.kt) */
.audio-speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.audio-speaker {
    display: grid; gap: 4px; padding: 10px 12px; border-radius: 8px; text-decoration: none;
    border: 1px solid var(--audio-border); background: #16202f; color: var(--audio-text);
}
.audio-speaker:hover { border-color: var(--audio-accent); }
.audio-speaker.is-current { border-color: var(--audio-ok); }
.audio-speaker-label { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.audio-speaker-label small { color: var(--audio-ok); font-weight: 400; font-size: 0.75rem; }
.audio-speaker-hint { color: var(--audio-muted); font-size: 0.8rem; }
.audio-speaker-url { color: var(--audio-accent); font-size: 0.75rem; overflow-wrap: anywhere; }
.audio-subtitle { margin: 14px 0 8px; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--audio-muted); }
.audio-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.audio-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.audio-check.is-fixed { color: var(--audio-muted); }
.audio-custom .audio-btn { text-decoration: none; }