:root{color-scheme:dark;font-family:Arial,sans-serif;--bg:#0f1116;--panel:#1b202a;--panel2:#252c38;--line:#3a4454;--text:#f5f6f7;--muted:#aab3c1;--accent:#6db1ff;--danger:#ff8d8d;--ok:#8dffa5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}.topbar{min-height:64px;padding:12px 18px;background:#151922;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.actions{display:flex;gap:8px;flex-wrap:wrap}.button,button,input,select{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:8px;padding:10px 12px;font-size:15px}.button{text-decoration:none;display:inline-block}button{cursor:pointer}.layout{display:grid;grid-template-columns:260px 1fr 280px;gap:14px;padding:14px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}.room-btn{width:100%;text-align:left;margin:6px 0;display:flex;justify-content:space-between;gap:10px}.room-btn.active{outline:2px solid var(--accent)}.user-row,.online-row{border:1px solid var(--line);background:var(--panel2);padding:10px;border-radius:9px;margin:6px 0}.notice{min-height:22px;color:#ffd58b;margin-bottom:10px}.muted{color:var(--muted)}.login-page{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:min(460px,100%);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}.login-card input{width:100%;margin:6px 0}.login-card button{width:100%;margin-top:8px}.error{color:var(--danger);margin-top:10px}.success{color:var(--ok);margin-top:10px}.admin-wrap{padding:14px;display:grid;gap:14px}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:center}.admin-user{border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:12px}.admin-user-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.room-checks{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.move-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin:8px 0 18px}@media(max-width:850px){.layout{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}


/* Admin-Erweiterung */
.admin-message{padding:12px 14px;border-radius:10px;border:1px solid var(--line)}
.settings-form{display:grid;gap:10px}
.setting-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px);gap:15px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.switch-row,.checkline{display:flex;align-items:center;gap:8px}
.switch-row input,.checkline input,.room-checks input{width:auto}
.primary-btn{margin-top:10px}
.user-admin-card{border:1px solid var(--line);border-radius:14px;padding:14px;margin:14px 0;background:rgba(255,255,255,.015)}
.role-badge{display:inline-block;margin-left:8px;padding:3px 7px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted)}
.user-edit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.user-edit-grid label,.room-edit-grid label{display:grid;gap:5px}
.permission-box{padding:12px;border:1px solid var(--line);border-radius:10px;margin:12px 0}
.user-secondary-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}
.danger-btn{border-color:#7e3939;background:#4e2525}
.room-create{grid-template-columns:2fr 1fr 1fr 1fr auto}
.room-admin-card{display:flex;gap:12px;align-items:end;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:10px}
.room-edit-grid{display:grid;grid-template-columns:2fr 120px auto auto auto;gap:10px;align-items:end;flex:1}
@media(max-width:900px){
  .setting-row,.user-edit-grid,.room-create,.room-edit-grid{grid-template-columns:1fr}
  .room-admin-card{display:block}
  .room-admin-card form+form{margin-top:10px}
}


/* Gastzugang + Admin Drag & Drop */
.login-stack{width:min(980px,100%);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.guest-card{border-style:dashed}
.drag-admin-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(360px,1.2fr);gap:18px}
.drag-user-list,.drag-room-list{display:grid;gap:8px}
.drag-user-chip{border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:10px 12px;cursor:grab;display:flex;justify-content:space-between;gap:12px;align-items:center}
.drag-user-chip span{color:var(--muted);font-size:13px}
.drag-user-chip.dragging{opacity:.5}
.drag-room-zone{border:2px dashed var(--line);border-radius:12px;padding:16px;background:rgba(255,255,255,.02);display:flex;justify-content:space-between;gap:12px;transition:.15s ease}
.drag-room-zone span{color:var(--muted)}
.drag-room-zone.drop-ready{border-color:var(--accent);transform:scale(1.01);background:rgba(255,255,255,.06)}
@media(max-width:800px){
  .login-stack,.drag-admin-layout{grid-template-columns:1fr}
}


/* =========================================================
   TrallaCity TS Webinterface – feste Farbpriorität: ROT / SCHWARZ / GRAU
   ========================================================= */
:root{
  color-scheme:dark;
  --bg:#080808;
  --panel:#111111;
  --panel2:#1b1b1b;
  --line:#3b3b3b;
  --text:#eeeeee;
  --muted:#9a9a9a;
  --accent:#d40000;
  --danger:#ff3030 !important;
  --ok:#d8d8d8 !important;
}

body{background:var(--bg);color:var(--text)}
.topbar{background:var(--panel2);border-color:var(--line)}
.panel,.login-card,.user-admin-card,.permission-box,.setting-row,.room-admin-card{
  background:var(--panel) !important;
  border-color:var(--line) !important;
}
.button,button,input,select{
  background:#1b1b1b !important;
  color:#eeeeee !important;
  border-color:#4a4a4a !important;
}
button:hover,.button:hover{border-color:#d40000 !important}
.primary-btn,#micBtn,#pttBtn{
  background:#7d0000 !important;
  border-color:#d40000 !important;
  color:#ffffff !important;
}
.danger-btn{
  background:#320000 !important;
  border-color:#b00000 !important;
  color:#ffffff !important;
}
.room-btn.active{
  outline:2px solid #d40000 !important;
  background:#260000 !important;
}
.drag-room-zone.drop-ready{
  border-color:#d40000 !important;
  background:#220000 !important;
}
.role-badge{border-color:#5a5a5a !important;color:#bdbdbd !important}
.notice{color:#e3e3e3 !important}

/* Sprechlampe */
.user-row,.online-row{
  display:flex;
  align-items:center;
  gap:9px;
  background:#191919 !important;
  border-color:#3b3b3b !important;
}
.talk-lamp{
  width:13px;
  height:13px;
  min-width:13px;
  border-radius:50%;
  display:inline-block;
  background:#3a3a3a;
  border:1px solid #666;
  box-shadow:inset 0 0 3px #000;
}
.talk-lamp.on{
  background:#ff0000;
  border-color:#ff4d4d;
  box-shadow:
    0 0 6px #ff0000,
    0 0 14px #d40000,
    0 0 22px #7d0000;
  animation:rtcTalkLamp 0.8s ease-in-out infinite alternate;
}
@keyframes rtcTalkLamp{
  from{opacity:.72;transform:scale(.94)}
  to{opacity:1;transform:scale(1.12)}
}


/* =========================================================
   002 – Admin kompakter
   ========================================================= */
.admin-wrap{
  padding:10px !important;
  gap:10px !important;
}
.admin-wrap .panel{
  padding:11px !important;
}
.admin-wrap h2{
  font-size:18px !important;
  margin:0 0 9px !important;
}
.admin-wrap h3{
  font-size:15px !important;
  margin:8px 0 !important;
}
.admin-message{
  padding:8px 10px !important;
}
.settings-form{
  gap:7px !important;
}
.setting-row{
  grid-template-columns:minmax(0,1fr) minmax(150px,220px) !important;
  gap:10px !important;
  padding:8px 10px !important;
  border-radius:8px !important;
}
.setting-row .muted{
  font-size:12px !important;
}
.form-grid{
  gap:6px !important;
}
.form-grid input,
.form-grid select,
.form-grid button,
.user-edit-grid input,
.user-edit-grid select,
.user-edit-grid button,
.room-edit-grid input,
.room-edit-grid select,
.room-edit-grid button,
.move-row select,
.move-row button{
  padding:7px 9px !important;
  font-size:13px !important;
}
.user-admin-card{
  padding:10px !important;
  margin:9px 0 !important;
  border-radius:10px !important;
}
.admin-user-head{
  margin-bottom:7px !important;
  align-items:center !important;
}
.admin-user-head strong{
  font-size:15px !important;
}
.role-badge{
  margin-left:6px !important;
  padding:2px 6px !important;
  font-size:11px !important;
}
.user-edit-grid{
  grid-template-columns:1.1fr 1.1fr .8fr auto auto !important;
  gap:7px !important;
  margin:8px 0 !important;
  align-items:end !important;
}
.user-edit-grid label{
  font-size:12px !important;
}
.permission-box{
  padding:8px 10px !important;
  margin:8px 0 !important;
}
.permission-box > strong{
  font-size:13px !important;
}
.room-checks{
  gap:6px 10px !important;
  margin:7px 0 !important;
  font-size:12px !important;
}
.user-secondary-actions{
  gap:7px !important;
  margin-top:7px !important;
}
.move-row{
  grid-template-columns:minmax(180px,260px) auto !important;
  gap:6px !important;
  margin:0 !important;
}
.room-create{
  grid-template-columns:1.5fr auto auto 90px auto !important;
  gap:6px !important;
}
.room-admin-card{
  padding:8px !important;
  margin-top:7px !important;
  gap:8px !important;
}
.room-edit-grid{
  grid-template-columns:1.5fr 80px auto auto auto !important;
  gap:6px !important;
}
.drag-admin-layout{
  gap:10px !important;
}
.drag-user-list,
.drag-room-list{
  gap:5px !important;
}
.drag-user-chip{
  padding:7px 9px !important;
  border-radius:8px !important;
}
.drag-user-chip span{
  font-size:11px !important;
}
.drag-room-zone{
  padding:10px !important;
  border-radius:9px !important;
}
.admin-wrap button,
.admin-wrap .button{
  min-height:34px !important;
}
.admin-wrap input,
.admin-wrap select{
  min-height:34px !important;
}
@media(max-width:1050px){
  .user-edit-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .room-create,
  .room-edit-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media(max-width:760px){
  .setting-row,
  .user-edit-grid,
  .room-create,
  .room-edit-grid{
    grid-template-columns:1fr !important;
  }
  .move-row{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   003 – Admin mittiger + helleres Grau
   ========================================================= */

/* Admin insgesamt schmaler und mittig */
.admin-wrap{
  width:min(1120px, calc(100% - 32px)) !important;
  margin:0 auto !important;
  padding:14px 0 24px !important;
}

/* Panels nicht so breit/luftig */
.admin-wrap .panel{
  width:100% !important;
  padding:12px !important;
}

/* etwas helleres Grau */
:root{
  --panel:#151515;
  --panel2:#242424;
  --line:#555555;
  --muted:#b8b8b8;
}

.setting-row,
.user-admin-card,
.permission-box,
.room-admin-card,
.drag-user-chip,
.drag-room-zone,
.user-row,
.online-row{
  background:var(--panel2) !important;
  border-color:var(--line) !important;
}

.button,
button,
input,
select{
  background:#2a2a2a !important;
  border-color:#5f5f5f !important;
}

input:focus,
select:focus,
button:focus{
  outline:1px solid #b00000 !important;
  outline-offset:1px;
}

/* Drag&Drop etwas mittiger/proportionaler */
.drag-admin-layout{
  grid-template-columns:minmax(260px, .9fr) minmax(360px, 1.1fr) !important;
  max-width:920px !important;
  margin:0 auto !important;
}

/* Benutzerverwaltung etwas ruhiger und weniger breit wirkend */
.user-admin-card{
  max-width:1000px !important;
  margin:10px auto !important;
}

/* Einstellungsblöcke mittiger */
.settings-form{
  max-width:960px !important;
  margin:0 auto !important;
}

/* Raumverwaltung ebenfalls etwas eingegrenzt */
.room-admin-list,
.room-create{
  max-width:1000px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Header bleibt vollbreit, Inhalt darin leicht eingerückt */
.topbar{
  padding-left:max(18px, calc((100vw - 1120px)/2)) !important;
  padding-right:max(18px, calc((100vw - 1120px)/2)) !important;
}

@media(max-width:900px){
  .admin-wrap{
    width:min(100% - 20px, 1120px) !important;
  }
  .drag-admin-layout{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   005 – Audio-Rechtsklick-Menü
   ========================================================= */

.audio-user-row{
  position:relative;
  cursor:context-menu;
}

.audio-hint{
  margin-left:auto;
  color:#b8b8b8;
  font-size:11px;
  opacity:.7;
}

.audio-context-menu{
  position:fixed;
  z-index:99999;
  width:320px;
  max-width:calc(100vw - 20px);
  background:#202020;
  color:#eeeeee;
  border:1px solid #666666;
  border-radius:10px;
  padding:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.6);
}

.audio-context-menu.hidden{
  display:none;
}

.audio-context-menu label{
  display:grid;
  gap:5px;
  margin:9px 0;
  font-size:12px;
  color:#d0d0d0;
}

.audio-context-menu select,
.audio-context-menu input[type="range"],
.audio-context-menu button{
  width:100%;
}

.audio-menu-title{
  font-weight:700;
  color:#ffffff;
  padding-bottom:7px;
  border-bottom:1px solid #555555;
}

.audio-menu-note{
  font-size:11px;
  color:#b8b8b8;
  margin:6px 0;
}

.audio-check{
  display:flex !important;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:8px !important;
}

.audio-check input{
  width:auto !important;
}

.audio-context-menu input[type="range"]{
  accent-color:#d40000;
}


/* =========================================================
   006 – Eingangshalle für alle sichtbar
   ========================================================= */
.hidden{display:none !important}

.lobby-waiting-box{
  margin-bottom:14px;
  padding:10px;
  border:1px solid #7a0000;
  border-radius:10px;
  background:#1f0808;
}

.lobby-waiting-title{
  font-weight:700;
  color:#ff5a5a;
  margin-bottom:7px;
}

#lobbyWaitingUsers{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.lobby-waiting-user{
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border:1px solid #555;
  border-radius:8px;
  background:#272727;
  cursor:context-menu;
}

.waiting-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff0000;
  box-shadow:0 0 8px #ff0000;
  animation:rtcWaitingBlink .9s ease-in-out infinite alternate;
}

.waiting-role{
  color:#bdbdbd;
  font-size:11px;
}

@keyframes rtcWaitingBlink{
  from{opacity:.55}
  to{opacity:1}
}

.drag-user-chip.waiting-in-lobby{
  border-color:#b00000 !important;
  background:#2a0808 !important;
  box-shadow:inset 3px 0 0 #d40000;
}

.drag-user-chip.waiting-in-lobby span{
  color:#ff8c8c !important;
}


/* =========================================================
   008 – kleinere Checkboxen + verständlichere Raumrechte
   ========================================================= */

/* Checkboxen in der Admin deutlich kleiner */
.admin-wrap input[type="checkbox"],
.admin-wrap .room-checks input[type="checkbox"],
.admin-wrap .checkline input[type="checkbox"],
.admin-wrap .switch-row input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  padding:0 !important;
  margin:0 5px 0 0 !important;
  vertical-align:middle !important;
  accent-color:#d40000 !important;
}

/* Checkbox-Zeilen kompakter */
.admin-wrap .checkline,
.admin-wrap .switch-row,
.admin-wrap .room-checks label{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
}

/* Hilfetext bei Raumrechten */
.permission-note{
  font-size:11px !important;
  margin-top:4px !important;
  margin-bottom:6px !important;
}


/* 009 – Eingangshalle Sprechverbot */
.room-btn.active[data-room-id="lobby"]{
  border-color:#7a0000 !important;
}


/* =========================================================
   012 – PTT aktiv sofort grün
   ========================================================= */
#pttBtn.ptt-active{
  background:#0f6f23 !important;
  border-color:#31d158 !important;
  color:#ffffff !important;
  box-shadow:0 0 7px rgba(49,209,88,.85), inset 0 0 0 1px rgba(255,255,255,.08);
}

#pttBtn.ptt-active:hover{
  background:#13842a !important;
  border-color:#48e36c !important;
}


/* =========================================================
   016 – Dauer-Mikro aktiv = grün
   ========================================================= */
#micBtn.mic-active{
  background:#0f6f23 !important;
  border-color:#31d158 !important;
  color:#ffffff !important;
  box-shadow:0 0 7px rgba(49,209,88,.85), inset 0 0 0 1px rgba(255,255,255,.08);
}

#micBtn.mic-active:hover{
  background:#13842a !important;
  border-color:#48e36c !important;
}


/* =========================================================
   017 – Rollenfarben + Dateien-Button
   ========================================================= */
.role-color-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(120px,1fr));
  gap:6px 10px;
}

.role-color-grid label{
  display:grid;
  grid-template-columns:1fr 44px;
  align-items:center;
  gap:8px;
  font-size:12px;
}

.role-color-grid input[type="color"]{
  width:44px !important;
  height:28px !important;
  min-height:28px !important;
  padding:2px !important;
  border-radius:6px;
  cursor:pointer;
}

.online-role-name{
  font-weight:700;
}


/* =========================================================
   018 – Copyright auf Loginseite
   ========================================================= */
.login-page{
  position:relative;
  padding-bottom:70px !important;
}

.login-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:10px 14px;
  text-align:center;
  background:#080808;
  border-top:1px solid #3b3b3b;
  z-index:20;
}

.login-footer .copyright{
  margin:0;
  font-size:12px;
}

.login-footer .copyright a{
  color:#9f9f9f;
  text-decoration:none;
}

.login-footer .copyright a:hover{
  color:#cfcfcf;
}


/* =========================================================
   020 – Admin mit linken Reitern + Designzentrale
   ========================================================= */
.admin-shell{
  width:min(1180px,calc(100% - 24px));
  margin:14px auto 28px;
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:12px;
  align-items:start;
}

.admin-tabs{
  position:sticky;
  top:12px;
  display:grid;
  gap:6px;
  padding:10px;
  background:#151515;
  border:1px solid #555;
  border-radius:12px;
}

.admin-tab{
  text-align:left;
  width:100%;
  background:#262626 !important;
  border-color:#555 !important;
}

.admin-tab.active{
  background:#5a0000 !important;
  border-color:#d40000 !important;
  color:#fff !important;
}

.admin-content{
  min-width:0;
}

.admin-tab-panel{
  display:none;
}

.admin-tab-panel.active{
  display:block;
}

.design-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.design-grid label,
.full-label{
  display:grid;
  gap:5px;
  font-size:12px;
}

.design-grid input[type="color"]{
  width:100%;
  height:34px;
  padding:2px;
}

.full-label{
  margin-top:10px;
}

.full-label input[type="text"],
.full-label input[type="file"]{
  width:100%;
}

.background-preview{
  margin-top:10px;
  padding:10px;
  border:1px solid #555;
  border-radius:10px;
  background:#202020;
}

.background-preview img{
  display:block;
  max-width:260px;
  max-height:150px;
  object-fit:cover;
  border-radius:8px;
  margin-bottom:8px;
}

/* Copyright bewusst neutral grau */
.login-footer .copyright a{
  color:#9f9f9f !important;
}
.login-footer .copyright a:hover{
  color:#cfcfcf !important;
}

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

  .admin-tabs{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .design-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:620px){
  .admin-tabs,
  .design-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   021 – Rollenfarben dauerhaft im Design-Reiter
   ========================================================= */
.role-color-design-box{
  margin-top:10px;
  padding:10px;
  border:1px solid #555;
  border-radius:10px;
  background:#202020;
}

.role-color-design-box > strong{
  display:block;
  margin-bottom:3px;
}

.role-color-design-box .muted{
  font-size:11px;
  margin-bottom:8px;
}

.online-role-name{
  font-weight:700;
}


/* =========================================================
   022 – gespeicherte Farben haben Vorrang
   ========================================================= */
body{
  color:var(--text) !important;
}

.panel,
.login-card,
.user-admin-card,
.permission-box,
.room-admin-card{
  background:var(--panel) !important;
  border-color:var(--line) !important;
}

.setting-row,
.drag-user-chip,
.drag-room-zone,
.user-row,
.online-row{
  border-color:var(--line) !important;
}

.muted{
  color:var(--muted) !important;
}

.admin-tab.active{
  border-color:var(--accent) !important;
}


/* =========================================================
   023 – eigenes Design nur für den Sprachraum
   ========================================================= */
:root{
  --room-bg:#080808;
  --room-panel:#430000;
  --room-line:#3b3b3b;
  --room-text:#eeeeee;
  --room-muted:#b8b8b8;
  --room-button:#2a0000;
  --room-online-bg:#202020;
  --room-mic-bg:#1a1a1a;
}

/* Sprachraum */
body:not(.login-page) .room,
body:not(.login-page) .rooms,
body:not(.login-page) .room-panel,
body:not(.login-page) .voice-panel,
body:not(.login-page) .main-panel{
  background:var(--room-panel) !important;
  border-color:var(--room-line) !important;
  color:var(--room-text) !important;
}

/* Raum-Buttons */
body:not(.login-page) .room-button,
body:not(.login-page) #rooms button,
body:not(.login-page) .rooms-list button{
  background:var(--room-button) !important;
  border-color:var(--room-line) !important;
}

/* Online-Liste */
body:not(.login-page) #onlineUsers,
body:not(.login-page) .online-list,
body:not(.login-page) .online-panel,
body:not(.login-page) .online-row{
  background:var(--room-online-bg) !important;
  border-color:var(--room-line) !important;
}

/* Mikro / PTT Bereich */
body:not(.login-page) .mic-controls,
body:not(.login-page) .voice-controls,
body:not(.login-page) .ptt-wrap{
  background:var(--room-mic-bg) !important;
  border-color:var(--room-line) !important;
}

body:not(.login-page) .muted{
  color:var(--room-muted) !important;
}


/* =========================================================
   031 – Rollenfarben kompakt
   ========================================================= */
.role-color-rows{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  margin-top:8px;
}

.role-color-row{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  width:auto !important;
  min-width:115px;
  font-size:13px;
}

.role-color-row span{
  min-width:42px;
  white-space:nowrap;
}

.role-color-row input[type="color"]{
  width:46px !important;
  height:30px !important;
  min-width:46px !important;
  padding:2px !important;
  margin:0 !important;
}


/* =========================================================
   032 – Wartende Benutzer direkt unter Eingangshalle
   ========================================================= */
.lobby-waiting-block{
  display:grid;
  gap:5px;
  margin:5px 0 10px 12px;
  padding-left:8px;
  border-left:2px solid var(--accent);
}

.lobby-waiting-user{
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 8px;
  border:1px solid var(--room-line);
  border-radius:7px;
  background:var(--room-online-bg);
  user-select:none;
}

.lobby-waiting-user.can-move-user{
  cursor:grab !important;
}

.lobby-waiting-user.can-move-user:active{
  cursor:grabbing !important;
}

.lobby-waiting-user.moving-user{
  opacity:.45;
}

.lobby-waiting-tag{
  margin-left:auto;
  font-size:10px;
  color:var(--room-muted);
  text-transform:uppercase;
}

.lobby-waiting-empty{
  padding:4px 7px;
  font-size:11px;
  color:var(--room-muted);
}

.user-move-dropzone.move-drop-ready{
  outline:2px solid #ff2b2b !important;
  background:#5a0000 !important;
}


/* =========================================================
   035 – Benutzer unter jedem Raum + überall verschiebbar
   ========================================================= */
.room-user-list-inline{
  display:grid;
  gap:5px;
  margin:5px 0 10px 12px;
  padding-left:8px;
  border-left:2px solid var(--room-line);
}

.room-user-inline{
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 8px;
  border:1px solid var(--room-line);
  border-radius:7px;
  background:var(--room-online-bg);
  user-select:none;
}

.room-user-inline.can-move-user{
  cursor:grab !important;
}

.room-user-inline.can-move-user:active{
  cursor:grabbing !important;
}

.room-user-inline.moving-user{
  opacity:.45;
}

.room-user-inline-tag{
  margin-left:auto;
  font-size:10px;
  color:var(--room-muted);
  text-transform:uppercase;
}

.room-user-list-empty{
  padding:4px 7px;
  font-size:11px;
  color:var(--room-muted);
}


/* =========================================================
   037 – Audio-Popup höher
   ========================================================= */
.audio-context-menu{
  min-height:280px !important;
  max-height:min(520px, calc(100vh - 24px)) !important;
  min-width:310px !important;
  overflow-y:auto !important;
  padding:14px !important;
}

.audio-context-menu label{
  margin-bottom:12px !important;
}

.audio-context-menu select{
  min-height:38px !important;
}


/* =========================================================
   038 – Audio-Popup sicher im sichtbaren Fenster
   ========================================================= */
#audioContextMenu.audio-context-menu{
  position:fixed !important;
  z-index:999999 !important;
  min-width:320px !important;
  width:min(420px, calc(100vw - 28px)) !important;
  min-height:260px !important;
  max-height:calc(100vh - 28px) !important;
  overflow-y:auto !important;
  box-sizing:border-box !important;
  transform:none !important;
  margin:0 !important;
}

#audioContextMenu.hidden{
  display:none !important;
}


/* =========================================================
   039 – System-Audio Auswahl
   ========================================================= */
#audioContextMenu.audio-context-menu{
  top:70px !important;
  min-height:360px !important;
  max-height:calc(100vh - 100px) !important;
}

.audio-system-box{
  padding:9px 10px;
  margin-bottom:10px;
  border:1px solid #555;
  border-radius:8px;
  background:#171717;
}

.audio-system-btn{
  width:100%;
  margin:0 0 10px 0 !important;
  min-height:34px !important;
}

.audio-menu-note{
  margin-top:4px;
  font-size:11px;
  line-height:1.35;
}


/* =========================================================
   041 – Kick / Ban
   ========================================================= */
.ban-badge{
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  border:1px solid #ff2b2b;
  border-radius:999px;
  color:#ff7a7a;
  font-size:10px;
  font-weight:700;
}

.warn-btn{
  background:#5a3a00 !important;
  border-color:#b77a00 !important;
  color:#fff !important;
}


/* =========================================================
   051 – Kopfzeilen mittig ausrichten
   ========================================================= */

/* Sprachraum: linke Titelhälfte + rechte Buttonhälfte jeweils mittig */
.topbar{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  align-items:center !important;
  gap:12px !important;
}

.topbar > :first-child{
  justify-self:center !important;
  text-align:center !important;
}

.topbar .actions{
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
}

/* Falls der Titel direkt in einem div/strong liegt */
.topbar .brand,
.topbar .title,
.topbar .user-info{
  text-align:center !important;
  justify-content:center !important;
}

/* Admin: Kopfbereich ebenfalls mittig */
.admin-topbar,
.admin-header,
.admin-shell > header,
body.admin-page > header{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

/* Admin-Header-Aktionen mittig statt rechts klebend */
.admin-topbar .actions,
.admin-header .actions,
.admin-actions,
.admin-header-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-left:0 !important;
}

/* Mobil sauber umbrechen */
@media(max-width:760px){
  .topbar{
    grid-template-columns:1fr !important;
  }

  .topbar > :first-child,
  .topbar .actions{
    justify-self:center !important;
  }
}


/* =========================================================
   052 – Kopfzeilen wieder kompakter
   ========================================================= */

.topbar{
  min-height:46px !important;
  padding:5px 10px !important;
  gap:8px !important;
}

.topbar > :first-child{
  font-size:14px !important;
  line-height:1.2 !important;
}

.topbar .actions{
  gap:5px !important;
}

.topbar .actions button,
.topbar .actions .button,
.topbar .actions a{
  padding:6px 10px !important;
  min-height:32px !important;
  font-size:13px !important;
  line-height:1.1 !important;
  border-radius:8px !important;
}

/* Admin kompakt halten */
.admin-topbar,
.admin-header,
.admin-shell > header,
body.admin-page > header{
  min-height:46px !important;
  padding:5px 10px !important;
  gap:8px !important;
}

.admin-topbar .actions,
.admin-header .actions,
.admin-actions,
.admin-header-actions{
  gap:5px !important;
}

.admin-topbar button,
.admin-header button,
.admin-actions button,
.admin-header-actions button,
.admin-topbar a,
.admin-header a,
.admin-actions a,
.admin-header-actions a{
  padding:6px 10px !important;
  min-height:32px !important;
  font-size:13px !important;
  line-height:1.1 !important;
  border-radius:8px !important;
}

@media(max-width:760px){
  .topbar,
  .admin-topbar,
  .admin-header,
  .admin-shell > header,
  body.admin-page > header{
    min-height:auto !important;
    padding:6px 8px !important;
  }
}


/* =========================================================
   053 – Gesamter Sprachchat kompakt wie Admin
   ========================================================= */

/* Ganze Sprachchat-Seite auf eine kompakte, mittige Breite begrenzen */
body:not(.admin-page){
  margin:0 !important;
}

/* Topbar nicht mehr über die komplette Bildschirmbreite */
body:not(.admin-page) .topbar{
  width:min(1180px, calc(100% - 24px)) !important;
  margin:12px auto 0 !important;
  box-sizing:border-box !important;
  border-radius:10px !important;
}

/* Hauptbereich exakt auf dieselbe Breite setzen */
body:not(.admin-page) .layout{
  width:min(1180px, calc(100% - 24px)) !important;
  max-width:1180px !important;
  margin:10px auto 16px !important;
  padding:0 !important;
  box-sizing:border-box !important;

  grid-template-columns:230px minmax(0,1fr) 240px !important;
  gap:10px !important;
}

/* Panels kompakt */
body:not(.admin-page) .layout > .panel{
  min-width:0 !important;
  padding:10px !important;
}

/* Mittlerer Sprachraum soll nicht unnötig riesig werden */
body:not(.admin-page) .layout > .panel:nth-child(2){
  min-height:420px !important;
}

/* Desktop: bewusst nicht auf volle Breite aufblasen */
@media(min-width:1400px){
  body:not(.admin-page) .topbar,
  body:not(.admin-page) .layout{
    width:1180px !important;
  }
}

/* Mittlere Displays */
@media(max-width:1050px){
  body:not(.admin-page) .layout{
    grid-template-columns:210px minmax(0,1fr) 220px !important;
  }
}

/* Mobil weiterhin untereinander */
@media(max-width:760px){
  body:not(.admin-page) .topbar,
  body:not(.admin-page) .layout{
    width:calc(100% - 12px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  body:not(.admin-page) .layout{
    grid-template-columns:1fr !important;
  }
}