* { box-sizing: border-box; }
:root { --bg: #0e1418; --panel: #141b21; --panel2: #1b252d; --line: #2c3a44; --text: #e8eef2; --muted: #8a9aa6; --accent: #2d6cdf; --ok: #3ccf7a; --warn: #f0a030; --bad: #ff6b60; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse 900px 600px at 50% 0, #1d2a33, transparent) no-repeat, var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; }
a { color: #8fb4ff; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.center { text-align: center; }
.small { font-size: 12px; }
code { background: var(--panel2); padding: 1px 5px; border-radius: 5px; }

.top { display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: #0e1418cc; backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.logo { font-weight: 700; font-size: 18px; color: var(--text); text-decoration: none; letter-spacing: .02em; }
#nav { display: flex; gap: 4px; flex: 1; }
#nav a { color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: 8px; }
#nav a.sel, #nav a:hover { color: var(--text); background: var(--panel2); }
#me { display: flex; align-items: center; gap: 8px; }

main { max-width: 980px; margin: 0 auto; padding: 22px 16px 60px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.narrow { max-width: 400px; margin: 30px auto; }
h1 { font-size: 22px; margin: 0 0 14px; }
h2 { font-size: 17px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.grid { display: grid; gap: 16px; }
.cols { display: grid; gap: 16px; grid-template-columns: 260px 1fr; align-items: start; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }

form.f { display: grid; gap: 12px; }
label { display: grid; gap: 5px; font-size: 13px; color: #9fb0bc; }
label.row { display: flex; align-items: center; gap: 8px; }
input, select, textarea { font: inherit; font-size: 15px; padding: 9px 11px; border-radius: 9px; border: 1px solid #2f3e49; background: var(--bg); color: var(--text); width: 100%; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
input[type=range] { padding: 0; accent-color: var(--accent); }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
button, .btn { font: inherit; font-weight: 600; font-size: 14px; padding: 9px 14px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
button.ghost { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
button.danger { background: #b8382f; }
button.small { padding: 5px 9px; font-size: 12px; }
button:disabled { opacity: .5; cursor: not-allowed; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.err { color: var(--bad); font-size: 13px; min-height: 1em; }
.ok { color: var(--ok); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--line); }
td { padding: 8px 6px; border-bottom: 1px solid #1f2a32; vertical-align: middle; }
.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 9px; background: var(--panel2); color: var(--muted); }
.tag.admin { background: #2d6cdf33; color: #8fb4ff; }
.tag.bad { background: #b8382f33; color: #ff8a80; }
.tag.okk { background: #3ccf7a22; color: var(--ok); }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs a { padding: 6px 12px; border-radius: 8px; background: var(--panel2); color: var(--muted); text-decoration: none; font-size: 14px; }
.tabs a.sel { background: var(--accent); color: #fff; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--panel2); border-radius: 10px; padding: 12px; }
.stat b { display: block; font-size: 22px; margin-top: 4px; }
.stat span { font-size: 12px; color: var(--muted); }

.avatar { width: 34px; height: 34px; border-radius: 50%; background: #2d3b45 center/cover; display: grid; place-items: center; font-weight: 700; color: #9fb0bc; position: relative; flex: none; }
.avatar.big { width: 96px; height: 96px; font-size: 34px; }
.avatar i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bg); }
.st-available { background: var(--ok); } .st-busy { background: var(--warn); } .st-solo { background: #6aa5ff; } .st-offline { background: #66757f; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--panel2); color: var(--muted); border-radius: 14px; padding: 4px 10px; font-size: 13px; cursor: pointer; user-select: none; }
.chip.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.chlist { display: grid; gap: 6px; }
.chlist div { display: flex; align-items: center; gap: 8px; background: var(--panel2); padding: 6px 8px; border-radius: 8px; font-size: 14px; }
.chlist div span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.echo { width: 100%; height: 48px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); touch-action: none; user-select: none; }
.echo.on { background: #d9433b; border-color: #d9433b; }

#banner .b { background: #f0a03022; border-bottom: 1px solid #f0a03055; color: #ffd28a; padding: 10px 18px; text-align: center; font-size: 14px; }
#banner .b button { margin-left: 10px; }
.modal { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal .card { width: 100%; max-width: 380px; }
#toast { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 60; display: grid; gap: 6px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
#toast div { background: #1f2a32; border: 1px solid var(--line); padding: 10px 14px; border-radius: 10px; font-size: 14px; box-shadow: 0 6px 20px #0008; }
#toast div.bad { border-color: #b8382f; }
.mail { background: var(--panel2); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; font-size: 13px; }

/* ---------- Funk (Phase 2) ---------- */
.funk { display: grid; grid-template-columns: 300px 1fr; gap: 14px; height: calc(100vh - 110px); min-height: 520px; }
main:has(.funk) { max-width: 1180px; padding-bottom: 16px; }
.side { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.side h3 { margin: 14px 4px 4px; font-size: 11px; }
.row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 10px; cursor: default; }
.row[data-open] { cursor: pointer; }
.row[data-open]:hover { background: var(--panel2); }
.row.sel { background: #2d6cdf33; }
.rt { flex: 1; min-width: 0; display: grid; }
.rt b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { background: var(--warn); color: #141b21; border-radius: 10px; padding: 0 7px; font-size: 12px; font-weight: 700; }
.mut { font-size: 12px; opacity: .7; }
.avatar.ch { border-radius: 10px; color: var(--text); background: var(--panel2); font-size: 17px; }
.conv { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#convHead { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); min-height: 60px; }
#convHead:empty { display: none; }
#convHead .back { display: none; }
#playNew { margin: 8px 14px 0; align-self: flex-start; }
#tl { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.day { text-align: center; font-size: 11px; color: var(--muted); margin: 10px 0 4px; }
.it { display: flex; }
.it.own { justify-content: flex-end; }
.it.alert { justify-content: center; font-size: 12px; color: var(--warn); }
.bub { background: var(--panel2); border-radius: 12px; padding: 7px 11px; max-width: 75%; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.it.own .bub { background: #2d6cdf33; }
.bub b { font-size: 12px; color: #8fb4ff; width: 100%; margin-bottom: -2px; }
.bub.voice b { width: auto; margin: 0; }
.bub .tm { font-size: 11px; color: var(--muted); margin-left: auto; }
.bub.neu { box-shadow: 0 0 0 1.5px var(--warn); }
.play { width: 30px; height: 26px; padding: 0; border-radius: 8px; }
#talkState { min-height: 26px; padding: 4px 14px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.meter { width: 120px; height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; display: inline-block; }
.meter i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .08s; }
.composer { display: flex; gap: 8px; padding: 0 14px 10px; }
.ptt.big { margin: 0 14px; height: 68px; font-size: 16px; letter-spacing: .04em; touch-action: none; user-select: none; -webkit-user-select: none; }
.ptt.big.on { background: #d9433b; }
.ptt.big.wait { background: #a8751e; }
#pttHint { margin: 6px 0 10px; }
.qr { width: 140px; height: 140px; background: #fff; border-radius: 10px; padding: 6px; flex: none; }
.qr svg { width: 100%; height: 100%; display: block; }
@media (max-width: 760px) {
  .funk { grid-template-columns: 1fr; height: calc(100vh - 120px); }
  .funk.open .side { display: none; }
  .funk:not(.open) .conv { display: none; }
  #convHead .back { display: inline-block; }
  #convHead .lbl { display: none; }
  #convHead { gap: 6px; padding: 10px; }
  .ptt.big { height: 84px; }
}

/* ---------- Phase 3 ---------- */
.h3row { display: flex; align-items: center; justify-content: space-between; }
.h3row span { display: flex; gap: 4px; text-transform: none; letter-spacing: 0; }
.h3row button { padding: 3px 7px; font-size: 12px; }
.avatar.ch { background-size: cover; background-position: center; }
.avatar.ch.big { width: 96px; height: 96px; font-size: 40px; border-radius: 20px; margin: 0 auto; }
.acts { display: none; gap: 2px; }
.bub:hover .acts { display: inline-flex; }
.acts button { background: none; border: 0; padding: 0 3px; font-size: 13px; opacity: .6; cursor: pointer; }
.acts button:hover { opacity: 1; }
@media (hover: none) { .acts { display: inline-flex; } }
.chd { display: grid; gap: 10px; }
.modal .card:has(.chd) { max-width: 560px; max-height: 90vh; overflow: auto; }
select.small { padding: 4px 6px; font-size: 12px; width: auto; }
#banner .b.info { background: #2d6cdf22; border-color: #2d6cdf55; color: #b9d0ff; }
#banner .b.warn { background: #f0a03022; }

/* ---------- Phase 4 ---------- */
.safety { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; text-align: center; background: var(--panel2); border-radius: 12px; padding: 14px; letter-spacing: .08em; }

/* Sparmodus-Schnellwahl unter dem Echo-Test */
#codecInfo span { display: block; }
#codecInfo .saver { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; }
#codecInfo .saver select { flex: 1; min-width: 0; padding: 4px 6px; font-size: 12px; }