* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial,sans-serif;
  color: #eaf1ff;
  background: radial-gradient(circle at top,#173e6b,#081422 62%);
  min-height: 100vh;
}

header {
  height: 74px;
  padding: 0 max(24px,5vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #06101dd9;
  border-bottom: 1px solid #2b6197;
}

.brand {
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  letter-spacing: 1px;
}

.brand span {
  color: #66bfff;
  font-size: 11px;
  margin-left: 6px;
}

nav, a {
  color: #8ed1ff;
}

nav a {
  margin-left: 12px;
}

.chat-layout {
  max-width: 1200px;
  margin: 35px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 245px;
  gap: 20px;
}

.chat-card, aside, .auth, .admin {
  background: #0b1b2d;
  border: 1px solid #295884;
  border-radius: 15px;
  box-shadow: 0 15px 45px #0006;
}

.chat-head {
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
}

.chat-head small {
  display: block;
  color: #91a9c4;
  margin-top: 5px;
}

.live {
  color: #71ffad;
  font-size: 12px;
}

.messages {
  height: 520px;
  overflow: auto;
  padding: 10px 22px;
  background: #071321;
}

.msg {
  border-bottom: 1px solid #173451;
  padding: 10px 0;
}

.msg p {
  margin: 5px 0 0;
  line-height: 1.35;
  white-space: pre-wrap;
}

.msg time {
  color: #7189a5;
  font-size: 11px;
  margin-left: 8px;
}

.role-admin {
  color: #ffd15c;
}

.role-user {
  color: #76c6ff;
}

.send {
  display: flex;
  gap: 10px;
  padding: 16px;
}

input {
  border: 1px solid #315e88;
  background: #071522;
  color: #fff;
  padding: 13px;
  border-radius: 9px;
  font-size: 15px;
  width: 100%;
}

button, .button {
  border: 0;
  background: linear-gradient(135deg,#1688d4,#56b7f6);
  color: #fff;
  border-radius: 9px;
  padding: 12px 17px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.send button {
  min-width: 100px;
}

aside {
  padding: 20px;
  height: max-content;
}

aside h3 {
  margin: 0 0 12px;
}

.online div {
  padding: 7px 0;
}

.online i {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #61e897;
  border-radius: 50%;
  margin-right: 8px;
}

.auth {
  width: min(420px,calc(100% - 32px));
  margin: 70px auto;
  padding: 30px;
  text-align: center;
}

.auth form {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.error {
  background: #722d39;
  padding: 10px;
  border-radius: 8px;
}

.admin {
  max-width: 950px;
  margin: 35px auto;
  padding: 25px;
}

.admin-row {
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #24435e;
  padding: 10px;
}

.admin-row small {
  margin-left: auto;
  color: #789;
}

.admin-row form {
  margin: 0;
}

.admin-row button {
  background: #a83846;
  padding: 7px 10px;
}

@media (max-width: 720px) {
  .chat-layout {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  .messages {
    height: 55vh;
  }

  aside {
    order: -1;
  }

  header {
    padding: 0 15px;
  }

  .brand {
    font-size: 17px;
  }

}

/* Hitradio-GGM Lounge 2026 */
:root {
  color-scheme: dark;
  --surface: #101c2c;
  --line: #29405b;
  --muted: #a3b6ce;
  --accent: #59c7ff;
}

body {
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background: radial-gradient(ellipse 60% 46% at 12% 0%,#203a60 0,transparent 75%),radial-gradient(ellipse 45% 40% at 95% 10%,#19324d 0,transparent 75%),#080f1b;
  color: #f3f7ff;
}

header {
  height: auto;
  min-height: 76px;
  gap: 16px;
  background: #0b1524ed;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 28px #0003;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  letter-spacing: .045em;
}

.brand span {
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--accent);
}

/* ==========================================================
   GRÖSSE DER RECHTEN SPALTE MIT DEM RADIOSTATUS
   295px ist die Breite des gesamten rechten Bereichs.
   ========================================================== */
.chat-layout {
  max-width: 1340px;
  margin: 38px auto;
  grid-template-columns: minmax(0,1fr) 295px;
  gap: 24px;
}

.chat-card, aside, .auth, .admin {
  background: linear-gradient(150deg,#142238,#0d1929 68%);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 55px #0005;
  overflow: hidden;
}

.chat-head {
  padding: 22px 26px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.chat-head b {
  font-size: 19px;
}

.chat-head small {
  color: var(--muted);
}

.live {
  padding: 7px 11px;
  background: #143328;
  border: 1px solid #337e60;
  border-radius: 999px;
  color: #8bf3b3;
  font-weight: 750;
}

.messages {
  height: min(58vh,650px);
  min-height: 370px;
  background: linear-gradient(180deg,#0b1727,#0c192a);
  padding: 17px 26px;
  scrollbar-color: #345375 transparent;
}

.msg {
  border-bottom: 1px solid #23364d;
  padding: 13px 0;
}

.msg p {
  line-height: 1.55;
}

.msg time {
  color: #99acc3;
}

.my-status {
  padding: 12px 26px;
  background: #102136;
  border-color: var(--line);
  color: var(--muted);
}

.my-status select, .radio-player select, input {
  background: #0b192b;
  border: 1px solid #35506c;
  color: #f5f9ff;
  border-radius: 10px;
}

.send {
  padding: 19px 26px;
  background: #111f32;
}

input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button, .button {
  background: linear-gradient(130deg,#218fdd,#39b6eb);
  box-shadow: 0 5px 16px #1686cc35;
  border-radius: 10px;
  transition: filter .2s,transform .2s;
}

button:hover, .button:hover {
  filter: brightness(1.14);
  transform: translateY(-1px);
}

aside {
  padding: 19px;
}

aside h3 {
  font-size: 15px;
  margin: 16px 0 12px;
}

aside p {
  color: var(--muted);
}

aside hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

.online-user {
  gap: 9px;
  padding: 8px 0;
}

.online-user a {
  font-weight: 650;
  text-decoration: none;
}

.online-user small {
  color: var(--muted);
}

.radio-player {
  background: #101f31;
  border-color: var(--line);
  padding: 15px;
}

.radio-status-card {
  padding: 15px;
  background: linear-gradient(145deg,#193a58,#10253a 68%);
  border: 1px solid #35658b;
  border-radius: 16px;
  box-shadow: inset 0 1px #ffffff12;
  margin-bottom: 20px;
}

.radio-status-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}

.radio-status-heading div {
  display: grid;
  gap: 2px;
}

.radio-status-heading small {
  font-size: 10px;
  letter-spacing: .16em;
  color: #97bad4;
  font-weight: 750;
}

.radio-status-heading strong {
  font-size: 16px;
}

.radio-status-icon {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  background: #35a9e62b;
  border-radius: 10px;
  color: #83d8ff;
  font-size: 22px;
}

.radio-status-pulse {
  width: 9px;
  height: 9px;
  margin-left: auto;
  background: #55e6ae;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #55e6ae22;
}

/* ==========================================================
   FORM UND GRÖSSE DES RADIOSTATUS-/PLAYER-FENSTERS
   width und height bestimmen die Größe: aktuell 200 x 200 Pixel.
   ========================================================== */
.radio-status-content {
  overflow: hidden;
  border-radius: 12px;
  background: #091522;
  width: 200px;
  height: 200px;
  max-width: 100%;
  margin: 0 auto;
}

.radio-status-content iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.online-user .camera-request{margin-left:auto;padding:5px 8px;min-width:34px;background:#244a69;box-shadow:none}.camera-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:#02070dcc}.camera-modal[hidden]{display:none}.camera-dialog{width:min(620px,100%);padding:24px;border:1px solid #376b91;border-radius:18px;background:#0b1b2d;box-shadow:0 25px 80px #000c}.camera-dialog h3{margin:0 0 8px}.camera-dialog p{color:#bed0df}.camera-preview{position:relative;overflow:hidden;margin:18px 0;border-radius:14px;background:#02070d;aspect-ratio:16/9}.camera-preview video{width:100%;height:100%;object-fit:contain;background:#000}.camera-preview span{position:absolute;inset:0;display:grid;place-items:center;color:#c8d7e3}.camera-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.camera-actions .danger{background:linear-gradient(135deg,#a83243,#df5265)}.camera-actions .secondary{background:#294057}.camera-active-indicator{color:#74f0ae;font-size:12px}
.camera-help{display:grid;gap:7px;margin-bottom:18px;padding:14px;border:1px solid #2877a8;border-radius:12px;background:linear-gradient(145deg,#153a57,#0d263c);box-shadow:inset 0 1px #ffffff12}.camera-help strong{color:#fff}.camera-help small{color:#c0d3e2;line-height:1.4}.camera-help span{color:#74f0ae;font-size:11px;font-weight:700}.online-user .camera-request{font-size:17px;border:1px solid #52bfff;background:linear-gradient(135deg,#147fbd,#35b8ee)}
.chat-notices{position:fixed;right:20px;bottom:20px;z-index:10050;display:grid;gap:10px;width:min(360px,calc(100vw - 40px));pointer-events:none}.chat-notice{display:flex;align-items:center;gap:8px;padding:13px 14px;border:1px solid #3b7198;border-radius:12px;background:#0c2033f2;color:#eef8ff;box-shadow:0 14px 38px #0009;animation:chat-notice-in .2s ease-out;pointer-events:auto}.chat-notice.success{border-color:#2d9c72}.chat-notice.error{border-color:#d45668}.chat-notice span{flex:1;line-height:1.35}.chat-notice button{padding:0;width:26px;height:26px;min-width:26px;border-radius:7px;background:#ffffff14;box-shadow:none;font-size:18px;line-height:1}@keyframes chat-notice-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.camera-float{position:fixed;right:22px;top:100px;z-index:10020;width:340px;max-width:calc(100vw - 28px);overflow:hidden;border:1px solid #3e83b3;border-radius:14px;background:#071421;box-shadow:0 20px 55px #000c;resize:both;min-width:240px;min-height:82px}.camera-float[hidden]{display:none}.camera-float-head{height:44px;padding:0 10px 0 14px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#153d5c,#0d263d);border-bottom:1px solid #315c7b;cursor:move;user-select:none;touch-action:none}.camera-float-head strong{font-size:13px}.camera-float-head div{display:flex;gap:6px}.camera-float-head button{width:29px;height:29px;min-width:29px;padding:0;border-radius:7px;background:#ffffff12;box-shadow:none;font-size:18px}.camera-float-head #cameraFloatEnd{background:#a83648}.camera-float-body{position:relative;aspect-ratio:16/9;min-height:130px;background:#02070c}.camera-float-body video{display:block;width:100%;height:100%;object-fit:contain;background:#000}.camera-float-body span{position:absolute;inset:0;display:grid;place-items:center;padding:15px;color:#c4d7e5;text-align:center}.camera-float-body span[hidden]{display:none}.camera-float.minimized{height:44px!important;min-height:44px;resize:none}.camera-float.minimized .camera-float-body{display:none}@media(max-width:520px){.camera-float{right:14px;top:88px;width:calc(100vw - 28px)}}

.radio-status-note {
  font-size: 12px;
  line-height: 1.45;
  color: #b2c9da;
  margin: 10px 0 0;
}

.radio-status-note a {
  color: #86d7ff;
}

@media (max-width: 980px) {
  .chat-layout {
    grid-template-columns: 1fr;
    margin: 18px auto;
  }

  .messages {
    height: 55vh;
    min-height: 300px;
  }

  aside {
    order: -1;
    max-width: 560px;
    width: 100%;
    margin-inline: auto;
  }

  header {
    padding: 12px 18px;
    flex-wrap: wrap;
  }

  .brand {
    font-size: 18px;
  }

}

@media (max-width: 460px) {
  .chat-head, .my-status, .send {
    padding-left: 16px;
    padding-right: 16px;
  }

  .chat-head b {
    font-size: 16px;
  }

  .chat-head small {
    font-size: 12px;
  }

  .send button {
    min-width: 78px;
  }

}

/* Die Schrift wird in radiostatus_view.php gesetzt; kein Farbfilter auf dem iframe. */
.radio-status-content {
  background: #091522;
}

.radio-status-content iframe {
  background: transparent;
  filter: none;
  mix-blend-mode: normal;
}
.camera-float{height:235px;min-height:120px}.camera-float-body{height:calc(100% - 44px);min-height:0;aspect-ratio:auto}.camera-float-body video{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.custom-background{background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;background-attachment:fixed!important}