:root {
  --bg: #070917;
  --panel: rgba(255,255,255,.075);
  --panel-2: rgba(255,255,255,.115);
  --border: rgba(255,255,255,.13);
  --text: #f7f7fb;
  --muted: rgba(247,247,251,.68);
  --accent: #8b5cf6;
  --accent-2: #06b6d4;
  --danger: #ef4444;
  --ok: #22c55e;
  --warning: #f59e0b;
  --shadow: 0 18px 60px rgba(0,0,0,.28);
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(139,92,246,.28), transparent 35%),
    radial-gradient(circle at bottom right, rgba(6,182,212,.18), transparent 38%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px);
  background: rgba(7,9,23,.72);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: 20px;
}

.logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow);
}

.navlinks { display: flex; gap: 10px; flex-wrap: wrap; }
.navlinks a, .pill {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 14px;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 18px 56px;
}

.grid-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 20px;
}

.grid-admin {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 20px;
}

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.055));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-pad { padding: 20px; }

.hero {
  padding: 28px;
  min-height: 180px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  background:
    linear-gradient(135deg, rgba(139,92,246,.44), rgba(6,182,212,.18)),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
}

h1, h2, h3 { margin: 0; letter-spacing: -.04em; }
h1 { font-size: clamp(30px, 5vw, 58px); line-height: .96; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
p { color: var(--muted); line-height: 1.6; }
.small { font-size: 13px; color: var(--muted); }

.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.status-ok { color: #86efac; }
.status-warn { color: #fde68a; }
.status-danger { color: #fecaca; }

.player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

#player, .player-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.player-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}

.now-playing {
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.btn {
  border: 0;
  cursor: pointer;
  color: white;
  border-radius: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px rgba(139,92,246,.28);
  font-weight: 800;
}

.btn.secondary { background: rgba(255,255,255,.12); box-shadow: none; border: 1px solid var(--border); }
.btn.danger { background: var(--danger); }
.btn.ok { background: var(--ok); color: #052e16; }
.btn.warning { background: var(--warning); color: #3b2300; }
.btn.full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.form { display: grid; gap: 12px; }
.input, textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.25);
  color: var(--text);
  border-radius: 16px;
  padding: 12px 14px;
  outline: none;
}

.input:focus, textarea:focus { border-color: rgba(139,92,246,.7); }
label { display: grid; gap: 7px; color: var(--muted); font-size: 14px; }

.chat {
  display: grid;
  grid-template-rows: auto minmax(320px, 1fr) auto;
  min-height: 590px;
}
.chat-list {
  padding: 16px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-msg {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}
.chat-msg strong { display: block; font-size: 13px; margin-bottom: 3px; }
.chat-msg span { color: rgba(255,255,255,.84); }
.chat-form { padding: 14px; display: flex; gap: 8px; border-top: 1px solid var(--border); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { text-align: left; border-bottom: 1px solid var(--border); padding: 11px 10px; vertical-align: top; }
th { color: var(--muted); font-size: 13px; }
td { color: rgba(255,255,255,.88); font-size: 14px; }

.stack { display: grid; gap: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hidden { display: none !important; }
.background-audio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.center { min-height: 100vh; display: grid; place-items: center; padding: 18px; }
.login-card { width: min(440px, 100%); }
.alert { border: 1px solid var(--border); background: rgba(255,255,255,.08); border-radius: 16px; padding: 12px 14px; color: var(--muted); }
.alert.error { border-color: rgba(239,68,68,.5); color: #fecaca; }
.alert.success { border-color: rgba(34,197,94,.5); color: #bbf7d0; }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; background: rgba(0,0,0,.28); padding: 3px 6px; border-radius: 7px; }

@media (max-width: 860px) {
  .grid-main, .grid-admin { grid-template-columns: 1fr; }
  .hero { align-items: flex-start; flex-direction: column; }
  .now-playing { align-items: flex-start; flex-direction: column; }
  .chat { min-height: 480px; }
}

@media (max-width: 560px) {
  .topbar-inner { align-items: flex-start; flex-direction: column; }
  .navlinks { width: 100%; }
  .navlinks a { flex: 1; text-align: center; }
  .container { padding: 18px 12px 42px; }
  .hero { padding: 20px; }
  .card-pad { padding: 16px; }
  .chat-form { flex-direction: column; }
  .btn { width: 100%; }
}

/* v1.1 listener UI */
.radio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
.radio-main { min-width: 0; }
.right-rail { position: sticky; top: 92px; }
.hero-compact { min-height: 150px; }
.chat-wide { min-height: 420px; grid-template-rows: auto minmax(240px, 1fr) auto; }
.chat-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.mini-player-card { overflow: visible; }
.now-playing.clean { padding: 0; }
.radio-controls {
  display: grid;
  grid-template-columns: 140px 140px minmax(180px, 1fr);
  gap: 12px;
  align-items: center;
}
.volume-label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}
input[type="range"] { width: 100%; accent-color: var(--accent); }
.youtube-hidden-host {
  position: fixed;
  width: 160px;
  height: 90px;
  overflow: hidden;
  opacity: .001;
  pointer-events: none;
  left: 0;
  bottom: 0;
  transform: scale(.01);
  transform-origin: left bottom;
  z-index: -1;
}
.youtube-hidden-host iframe { width: 160px !important; height: 90px !important; }
.identity-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.tab {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.07);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 8px;
  cursor: pointer;
  font-weight: 700;
}
.tab.active { background: rgba(139,92,246,.35); border-color: rgba(139,92,246,.65); }
.tab:disabled { opacity: .55; cursor: not-allowed; }
.guest-card { overflow: hidden; }
.guest-list {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
  max-height: 430px;
  overflow: auto;
}
.guest-item {
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.07);
  border-radius: 15px;
}
.guest-item strong { display: block; font-size: 14px; }
.guest-item .small { display: block; line-height: 1.45; }
.guest-item.private.warn { border-color: rgba(245,158,11,.65); background: rgba(245,158,11,.10); }
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--warning);
  margin-top: 5px;
  box-shadow: 0 0 0 4px rgba(245,158,11,.12);
}
.dot.ok { background: var(--ok); box-shadow: 0 0 0 4px rgba(34,197,94,.12); }
.badge {
  display: inline-block;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #bbf7d0;
  border: 1px solid rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  border-radius: 999px;
  padding: 2px 6px;
  margin-left: 4px;
}
.badge.warn { color: #fde68a; border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.16); }
.empty-state { color: var(--muted); padding: 12px; text-align: center; }
.private-list-card .guest-list { max-height: 320px; }
.admin-guest-list { max-height: 520px; padding: 0; }

@media (max-width: 1020px) {
  .radio-layout { grid-template-columns: 1fr; }
  .right-rail { position: static; }
}

@media (max-width: 640px) {
  .radio-controls { grid-template-columns: 1fr; }
  .volume-label { grid-template-columns: 1fr; }
  .chat-head { display: grid; }
  .identity-tabs { grid-template-columns: 1fr; }
}

/* v1.1.2 fixed chat height + emoji picker */
.chat {
  height: clamp(460px, 60vh, 620px);
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.chat-wide {
  height: clamp(500px, 64vh, 660px);
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.chat-list {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.chat-form-with-emoji {
  position: relative;
  align-items: center;
}
.chat-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
}
.chat-text-input { min-width: 0; }
.emoji-toggle {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 14px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: none;
}
.emoji-toggle:hover { background: rgba(139,92,246,.24); }
.emoji-toggle:disabled { opacity: .5; cursor: not-allowed; }
.emoji-picker {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 40;
  width: min(360px, calc(100vw - 48px));
  max-height: 190px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(12,15,32,.98);
  box-shadow: var(--shadow);
}
.emoji-picker button {
  border: 0;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  height: 34px;
  cursor: pointer;
  font-size: 19px;
}
.emoji-picker button:hover { background: rgba(139,92,246,.30); }

@media (max-width: 560px) {
  .chat { height: min(68vh, 560px); }
  .chat-wide { height: min(70vh, 590px); }
  .chat-form-with-emoji { display: grid; grid-template-columns: 1fr; }
  .chat-input-wrap { width: 100%; }
  .emoji-picker { grid-template-columns: repeat(6, 1fr); width: min(320px, calc(100vw - 32px)); }
}

/* v1.2.0 professional/global layer */
.footer {
  padding-top: 0;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}
.settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}
.settings-grid label:nth-last-of-type(-n+4) { grid-column: span 1; }
.settings-grid button { align-self: end; }
.moderation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.mini-btn {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.mini-btn:hover { background: rgba(139,92,246,.24); }
.mini-btn.danger { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.14); color: #fecaca; }
.card h2 { margin-block: 0 6px; }
.hero h1, .hero p { text-wrap: balance; }

@media (max-width: 760px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* v1.2.1: renk seçici alanları yönetim panelinde daha belirgin gösterilir */
input[type="color"].input {
  min-height: 48px;
  padding: 6px 10px;
  cursor: pointer;
  background: rgba(255,255,255,.08);
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch {
  border: 1px solid var(--border);
  border-radius: 12px;
}
input[type="color"]::-moz-color-swatch {
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* v1.2.2 listener UX: sade ziyaretçi ekranı, belirgin dinleyici sayısı, mobil sabit player */
.listener-stat {
  background: linear-gradient(135deg, rgba(34,197,94,.20), rgba(6,182,212,.18));
  border-color: rgba(34,197,94,.38);
  color: #dcfce7;
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(34,197,94,.10);
}
.listener-stat strong {
  font-size: 1.1em;
  color: #fff;
}
#guestListCount {
  color: #fff;
  font-size: 15px;
}
#trackMeta {
  margin: 6px 0 0;
  color: rgba(247,247,251,.60);
}
#syncInfo {
  white-space: nowrap;
  color: #bbf7d0;
}
.mini-player-card .card-pad {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
}
.radio-controls .btn.play {
  background: linear-gradient(135deg, #22c55e, var(--accent-2));
  color: var(--player-button-text-color);
}
.radio-controls .btn.danger {
  background: linear-gradient(135deg, var(--player-stop-button-color), color-mix(in srgb, var(--player-stop-button-color) 75%, black 25%));
  color: var(--player-stop-button-text-color);
}
.moderation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.moderation-bucket {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.055);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.moderation-bucket h3 { font-size: 16px; }
.moderation-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  border-radius: 14px;
  padding: 10px 12px;
}
.moderation-row strong, .moderation-row .small { display: block; }
.empty-state.compact { padding: 6px; }

@media (max-width: 760px) {
  .moderation-list { grid-template-columns: 1fr; }
  .moderation-row { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 640px) {
  body { padding-bottom: 160px; }
  .mobile-fixed-player {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 60;
    border-radius: 22px;
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 70px rgba(0,0,0,.55);
  }
  .mobile-fixed-player .card-pad {
    padding: 12px;
  }
  .mobile-fixed-player .now-playing.clean {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }
  .mobile-fixed-player #trackTitle {
    font-size: 16px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mobile-fixed-player #trackMeta,
  .mobile-fixed-player .small {
    font-size: 11px;
    line-height: 1.35;
  }
  .mobile-fixed-player #syncInfo {
    font-size: 11px;
    padding: 7px 9px;
  }
  .mobile-fixed-player .radio-controls {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }
  .mobile-fixed-player .volume-label {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    font-size: 12px;
  }
  .mobile-fixed-player .btn {
    padding: 10px 12px;
    border-radius: 14px;
    width: 100%;
  }
  .hero .status-row {
    width: 100%;
  }
  .listener-stat {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    padding: 12px 15px;
  }
}

/* v1.3.0 DJ unlimited queue + bulk import */
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.queue-card textarea {
  min-height: 130px;
  resize: vertical;
}
.queue-add-form {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr) auto;
  align-items: end;
}
.queue-list {
  display: grid;
  gap: 9px;
  padding: 0 16px 16px;
  max-height: 520px;
  overflow: auto;
}
.queue-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.065);
  border-radius: 18px;
  padding: 12px;
}
.queue-row.active {
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.10);
}
.queue-row.dragging {
  opacity: .55;
  outline: 2px dashed rgba(139,92,246,.8);
}
.queue-index {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139,92,246,.55), rgba(6,182,212,.32));
  font-weight: 900;
}
.queue-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.queue-main strong,
.queue-main .small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
@media (max-width: 860px) {
  .queue-add-form { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; }
  .queue-row { grid-template-columns: 34px minmax(0, 1fr); }
  .queue-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* v1.4.0 mIRC-level chat layer */
.irc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  color: rgba(247,247,251,.72);
  font-size: 12px;
}
.irc-toolbar span {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 700;
}
.irc-toolbar .channel-pill {
  color: #fff;
  border-color: rgba(139,92,246,.45);
  background: rgba(139,92,246,.22);
}
.chat {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.chat-wide {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.chat-list {
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 22px 22px;
}
.chat-msg {
  position: relative;
  border-radius: 14px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.chat-msg:hover {
  border-color: rgba(139,92,246,.34);
  background: rgba(255,255,255,.105);
}
.chat-system {
  background: rgba(6,182,212,.085);
  border-color: rgba(6,182,212,.22);
  color: rgba(224,242,254,.95);
}
.chat-system strong { display: none; }
.chat-system span { color: rgba(224,242,254,.95); }
.chat-action {
  background: rgba(139,92,246,.14);
  border-color: rgba(139,92,246,.35);
}
.chat-private {
  background: rgba(245,158,11,.13);
  border-color: rgba(245,158,11,.45);
}
.chat-notice {
  background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(6,182,212,.10));
  border-color: rgba(34,197,94,.44);
}
.chat-msg.mentioned {
  border-color: rgba(250,204,21,.8);
  box-shadow: 0 0 0 2px rgba(250,204,21,.10), 0 10px 28px rgba(250,204,21,.06);
}
.mention {
  color: #fde68a;
  font-weight: 900;
}
.badge.pm {
  color: #fed7aa;
  border-color: rgba(245,158,11,.55);
  background: rgba(245,158,11,.16);
}
.badge.notice {
  color: #bfdbfe;
  border-color: rgba(59,130,246,.55);
  background: rgba(59,130,246,.16);
}
.user-actions {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}
.mini-btn.warning {
  border-color: rgba(245,158,11,.55);
  background: rgba(245,158,11,.16);
  color: #fde68a;
}
.chat-text-input::placeholder { color: rgba(247,247,251,.48); }
@media (max-width: 560px) {
  .irc-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    padding: 8px 10px;
  }
}

/* v1.5.0 Flatcast-style radio console + local music archive */
.flatcast-player-card {
  border-color: rgba(6,182,212,.24);
  background:
    radial-gradient(circle at 10% 20%, rgba(139,92,246,.20), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(34,197,94,.13), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
}
.flatcast-console {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.flatcast-left {
  display: grid;
  place-items: center;
  gap: 10px;
}
.disc-ring {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 34px;
  background:
    radial-gradient(circle, var(--player-icon-inner-color) 0 28%, rgba(255,255,255,.10) 29% 33%, color-mix(in srgb, var(--player-icon-ring-color) 82%, transparent) 34% 48%, color-mix(in srgb, var(--player-icon-outer-color) 64%, transparent) 49% 64%, rgba(255,255,255,.09) 65% 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 30px rgba(255,255,255,.08), 0 18px 46px rgba(0,0,0,.28);
  animation: radio-disc 8s linear infinite;
}
@keyframes radio-disc { to { transform: rotate(360deg); } }
.equalizer {
  height: 30px;
  display: flex;
  align-items: end;
  gap: 4px;
}
.equalizer i {
  display: block;
  width: 7px;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--player-wave-color), var(--player-wave-color-2));
  animation: eq-bounce .9s ease-in-out infinite alternate;
}
.equalizer i:nth-child(2) { animation-delay: .11s; }
.equalizer i:nth-child(3) { animation-delay: .22s; }
.equalizer i:nth-child(4) { animation-delay: .33s; }
.equalizer i:nth-child(5) { animation-delay: .44s; }
.equalizer i:nth-child(6) { animation-delay: .55s; }
@keyframes eq-bounce { from { height: 8px; opacity: .55; } to { height: 30px; opacity: 1; } }
.flatcast-display {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.035) 1px, transparent 1px),
    rgba(0,0,0,.20);
  background-size: 18px 18px;
  border-radius: 20px;
  padding: 16px;
}
.flatcast-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.flatcast-kicker span {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
  color: #dff8ff;
  background: rgba(6,182,212,.12);
}
#sourceBadge {
  color: #dcfce7;
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.28);
}
.flatcast-display #trackTitle {
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flatcast-controls {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 12px;
  border-radius: 18px;
}
.local-music-panel {
  border: 1px solid rgba(6,182,212,.22);
  background: rgba(6,182,212,.06);
  border-radius: 20px;
  padding: 14px;
  display: grid;
  gap: 12px;
}
.section-head.compact { align-items: center; }
.local-upload-form {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto auto;
  align-items: end;
}
.checkline {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text);
  font-weight: 800;
  min-height: 45px;
}
.checkline input { width: auto; }
.local-track-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}
.local-track-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 16px;
  padding: 10px;
}
.local-track-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(6,182,212,.34), rgba(139,92,246,.28));
}
.local-track-main { min-width: 0; display: grid; gap: 3px; }
.local-track-main strong,
.local-track-main .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.local-track-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

@media (max-width: 980px) {
  .local-upload-form { grid-template-columns: 1fr; }
  .local-track-row { grid-template-columns: 34px minmax(0, 1fr); }
  .local-track-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .flatcast-console { grid-template-columns: 1fr; gap: 10px; }
  .flatcast-left { display: none; }
  .flatcast-display { padding: 12px; border-radius: 16px; }
  .flatcast-display #trackTitle { font-size: 16px; white-space: nowrap; }
  .flatcast-kicker { margin-bottom: 5px; }
  .flatcast-kicker span { font-size: 10px; padding: 4px 7px; }
  .flatcast-controls { padding: 8px; }
}

/* v1.5.5 local playlist playback modes */
.queue-playback-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, .5fr) minmax(220px, .7fr) auto;
  gap: 12px;
  align-items: end;
  border: 1px solid rgba(139,92,246,.24);
  background: linear-gradient(135deg, rgba(139,92,246,.13), rgba(6,182,212,.08));
  border-radius: 18px;
  padding: 12px;
}
.queue-playback-panel strong { font-size: 16px; }
.queue-playback-panel .pill { justify-self: end; align-self: center; }
.local-archive-actions {
  align-items: center;
  justify-content: space-between;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 10px;
  background: rgba(0,0,0,.10);
}
.local-track-row {
  cursor: grab;
}
.local-track-row:active {
  cursor: grabbing;
}
.local-track-row.dragging {
  opacity: .55;
  outline: 2px dashed rgba(6,182,212,.75);
}
.queue-index {
  font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .queue-playback-panel {
    grid-template-columns: 1fr;
  }
  .queue-playback-panel .pill { justify-self: start; }
}

/* v1.6.0 admin menu, request line, simplified player/chat customization */
:root {
  --chat-bg-color: rgba(17,24,39,.92);
  --chat-bg-image: none;
}
.public-navlinks a {
  font-weight: 800;
}
.public-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.info-card p { margin-bottom: 0; }
.request-form {
  grid-template-columns: minmax(140px,.6fr) minmax(0,1.2fr) minmax(0,1.3fr) auto;
  align-items: end;
}
.now-label {
  color: #bbf7d0;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.dj-live-meta {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px !important;
  border: 1px solid rgba(34,197,94,.34);
  background: rgba(34,197,94,.12);
  color: #dcfce7 !important;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
}
.simplified-chat .chat-list,
.chat-list {
  background-color: var(--chat-bg-color);
  background-image:
    linear-gradient(rgba(7,9,23,.25), rgba(7,9,23,.25)),
    var(--chat-bg-image),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: cover, cover, 22px 22px, 22px 22px;
  background-position: center, center, center, center;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}
.simplified-chat .chat-msg {
  backdrop-filter: blur(7px);
  background: rgba(7,9,23,.54);
}
.admin-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.admin-side-menu {
  position: sticky;
  top: 92px;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.admin-menu-btn {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.07);
  color: var(--text);
  border-radius: 16px;
  padding: 13px 14px;
  text-align: left;
  cursor: pointer;
  font-weight: 900;
}
.admin-menu-btn:hover,
.admin-menu-btn.active {
  border-color: rgba(139,92,246,.55);
  background: linear-gradient(135deg, rgba(139,92,246,.32), rgba(6,182,212,.16));
}
.chat-bg-upload {
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 14px;
  background: rgba(0,0,0,.12);
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
}
.request-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
}
.request-item {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 10px;
}
.request-item.done { opacity: .72; }
.request-item strong, .request-item .small { display: block; }
.request-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.flatcast-kicker { display: none; }
#sourceBadge, #syncInfo { display: none !important; }

@media (max-width: 980px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side-menu {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .request-form { grid-template-columns: 1fr; }
  .chat-bg-upload { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .public-info-grid { grid-template-columns: 1fr; }
  .admin-side-menu { grid-template-columns: 1fr; }
  .public-navlinks a { min-width: calc(33.333% - 8px); }
  .flatcast-display #trackTitle { font-size: 17px; }
  .dj-live-meta { font-size: 11px; padding: 5px 8px; }
}
.simplified-chat { grid-template-rows: auto minmax(0, 1fr) auto; }

/* v1.7.0 site/menu/player/chat/programmer customization */
:root {
  --site-bg-color: #070917;
  --site-bg-image: none;
  --panel-bg-color: #111827;
  --player-bg-color: #0f172a;
  --player-text-color: #ffffff;
  --player-button-color: #22c55e;
  --player-button-text-color: #03120a;
  --player-stop-button-color: #ef4444;
  --player-stop-button-text-color: #ffffff;
  --player-icon-inner-color: #070917;
  --player-icon-ring-color: #8b5cf6;
  --player-icon-outer-color: #06b6d4;
  --player-wave-color: #06b6d4;
  --player-wave-color-2: #8b5cf6;
  --chat-text-color: #f8fafc;
  --chat-bubble-color: rgba(7,9,23,.72);
  --chat-bubble-text-color: #f8fafc;
}
body {
  background:
    radial-gradient(circle at top left, rgba(139,92,246,.28), transparent 35%),
    radial-gradient(circle at bottom right, rgba(6,182,212,.18), transparent 38%),
    var(--site-bg-image),
    var(--site-bg-color);
  background-size: auto, auto, cover, auto;
  background-position: center, center, center, center;
  background-attachment: fixed, fixed, fixed, fixed;
}
.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)),
    color-mix(in srgb, var(--panel-bg-color) 76%, transparent);
}
.logo.logo-image {
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.logo.logo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nav-button {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 800;
}
.nav-button:hover { background: rgba(139,92,246,.26); }
.flatcast-player-card {
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),
    var(--player-bg-color);
  color: var(--player-text-color);
}
.flatcast-display {
  color: var(--player-text-color);
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.035) 1px, transparent 1px),
    color-mix(in srgb, var(--player-bg-color) 82%, black 18%);
}
.flatcast-display #trackTitle,
.flatcast-display .now-label { color: var(--player-text-color); }
.radio-controls .btn.play {
  background: linear-gradient(135deg, var(--player-button-color), var(--accent-2));
  color: #03120a;
}
.disc-logo-image {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.disc-logo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.simplified-chat .chat-list,
.chat-list {
  color: var(--chat-text-color);
}
.simplified-chat .chat-msg,
.chat-msg {
  background: color-mix(in srgb, var(--chat-bubble-color) 84%, transparent) !important;
  color: var(--chat-bubble-text-color);
}
.chat-msg span { color: color-mix(in srgb, var(--chat-bubble-text-color) 88%, transparent); }
.upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.media-upload {
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 14px;
  background: rgba(0,0,0,.12);
}
.avatar-mini {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: cover;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}
.public-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
}
.public-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.66);
  backdrop-filter: blur(9px);
}
.public-modal-card {
  position: relative;
  width: min(940px, 100%);
  max-height: min(84vh, 780px);
  overflow: auto;
  border-color: rgba(139,92,246,.30);
}
.public-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
body.modal-open { overflow: hidden; }
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}
.secure-request-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.secure-request-form button { align-self: end; }
.request-security strong { color: #fff; }
.programmer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.programmer-card {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.065);
  border-radius: 20px;
  padding: 14px;
  display: grid;
  gap: 12px;
}
.programmer-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(139,92,246,.32), rgba(6,182,212,.18));
  font-size: 42px;
}
.programmer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.programmer-card h3 { margin: 0; }
.programmer-card strong { color: #bbf7d0; font-size: 13px; }
.programmer-card p { font-size: 13px; margin: 6px 0 0; }

@media (max-width: 860px) {
  .programmer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upload-grid, .secure-request-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .radio-main { display: flex; flex-direction: column; }
  .radio-main > .card:first-child { order: 1; }
  .radio-main > .simplified-chat { order: 2; }
  .radio-main > .mobile-fixed-player { order: 3; }
  .programmer-grid { grid-template-columns: 1fr; }
  .public-modal { padding: 10px; align-items: start; }
  .public-modal-card { max-height: calc(100vh - 20px); }
  .public-navlinks { gap: 7px; }
  .public-navlinks .nav-button { flex: 1 1 calc(33.333% - 8px); padding-inline: 8px; }
  body { padding-bottom: 180px; }
}

/* v1.7.1 DJ account management */
.row-highlight {
  background: linear-gradient(90deg, rgba(34,197,94,.14), rgba(6,182,212,.08));
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 260px;
}
.mini-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.soft-card {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
}
#activeDjInfo strong {
  color: #bbf7d0;
}
@media (max-width: 760px) {
  .row-actions { min-width: 220px; }
}


/* v1.7.7 mobile/player/microphone usability fixes */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, video, canvas, audio, iframe { max-width: 100%; }
.container, .topbar-inner, .radio-layout, .radio-main, .right-rail, .card { min-width: 0; }
.flatcast-player-card.mic-ducking {
  border-color: rgba(34,197,94,.48);
  box-shadow: 0 18px 70px rgba(34,197,94,.12), var(--shadow);
}

@media (max-width: 640px) {
  body {
    padding-bottom: 198px !important;
    touch-action: pan-y;
  }
  .topbar {
    position: sticky;
    width: 100%;
    overflow: hidden;
  }
  .topbar-inner {
    width: 100%;
    padding: 10px;
    gap: 9px;
  }
  .brand {
    max-width: 100%;
    font-size: 17px;
  }
  .public-navlinks {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .public-navlinks::-webkit-scrollbar { display: none; }
  .public-navlinks .nav-button {
    flex: 0 0 auto;
    min-width: 108px;
    white-space: nowrap;
  }
  .container {
    width: 100%;
    padding: 12px 10px 218px !important;
  }
  .radio-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .radio-main, .right-rail { width: 100%; }
  .hero.hero-compact {
    min-height: 118px;
    padding: 16px;
  }
  .hero.hero-compact h1 {
    font-size: clamp(26px, 8vw, 42px);
  }
  .hero.hero-compact p {
    font-size: 13px;
  }
  .status-row {
    gap: 7px;
  }
  .status-row .pill {
    padding: 8px 10px;
    font-size: 12px;
  }
  .mobile-fixed-player {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 !important;
    z-index: 1000;
    border-radius: 20px;
    overflow: hidden !important;
    max-height: 184px;
  }
  .mobile-fixed-player .card-pad {
    padding: 9px !important;
    display: grid;
    gap: 8px;
  }
  .mobile-fixed-player .flatcast-console {
    display: block;
  }
  .mobile-fixed-player .flatcast-left { display: none !important; }
  .mobile-fixed-player .flatcast-display {
    padding: 10px !important;
    border-radius: 15px;
  }
  .mobile-fixed-player .now-label {
    font-size: 11px;
    margin-bottom: 2px;
  }
  .mobile-fixed-player #trackTitle {
    font-size: 15px !important;
    line-height: 1.18;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mobile-fixed-player #trackMeta {
    margin-top: 4px;
    font-size: 11px !important;
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-fixed-player .radio-controls,
  .mobile-fixed-player .flatcast-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    padding: 7px !important;
    margin-top: 0 !important;
  }
  .mobile-fixed-player .btn {
    width: 100%;
    padding: 9px 10px !important;
    border-radius: 13px;
    font-size: 13px;
  }
  .mobile-fixed-player .volume-label {
    grid-column: 1 / -1;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    min-width: 0 !important;
    width: 100%;
    font-size: 12px;
  }
  .radio-main > .simplified-chat {
    order: 2;
    height: min(58dvh, 540px) !important;
    min-height: 360px !important;
    margin-bottom: 6px;
  }
  .simplified-chat .card-pad.chat-head {
    padding: 13px;
  }
  .simplified-chat .chat-list {
    min-height: 0;
    overflow-y: auto;
  }
  .chat-form.chat-form-with-emoji {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }
  .chat-input-wrap {
    min-width: 0;
    width: 100%;
  }
  .right-rail {
    order: 3;
    position: static !important;
  }
}

/* v1.7.8 DJ microphone mixer controls */
.mic-mixer-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
}
.mic-mixer-panel .volume-label {
  display: grid;
  grid-template-columns: 140px 64px 1fr;
  align-items: center;
  gap: 12px;
}
.mic-mixer-panel .small {
  margin: 0;
}
@media (max-width: 640px) {
  .mic-mixer-panel .volume-label {
    grid-template-columns: 1fr auto;
  }
  .mic-mixer-panel .volume-label input[type="range"] {
    grid-column: 1 / -1;
  }
}

/* v1.7.9 mobile restore + stronger layout guard */
* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; }
.radio-layout, .radio-main, .right-rail, .card, .chat, .chat-list, .chat-form, .flatcast-player-card { min-width: 0; }
@media (max-width: 900px) {
  body { padding-bottom: 210px !important; }
  .container { width: 100% !important; max-width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; padding-bottom: 220px !important; overflow-x: hidden; }
  .radio-layout { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 12px !important; }
  .radio-main, .right-rail { width: 100% !important; max-width: 100% !important; }
  .mobile-fixed-player { position: fixed !important; left: 8px !important; right: 8px !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; width: auto !important; max-width: calc(100vw - 16px) !important; margin: 0 !important; z-index: 1000 !important; max-height: 188px !important; }
  .mobile-fixed-player .card-pad { padding: 9px !important; gap: 8px !important; }
  .mobile-fixed-player .flatcast-left { display: none !important; }
  .mobile-fixed-player .flatcast-display { padding: 10px !important; }
  .mobile-fixed-player #trackTitle { font-size: 15px !important; line-height: 1.18 !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mobile-fixed-player #trackMeta { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-fixed-player .flatcast-controls { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; padding: 7px !important; }
  .mobile-fixed-player .flatcast-controls .volume-label { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .simplified-chat { height: min(58dvh, 540px) !important; min-height: 360px !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
  .simplified-chat .chat-list { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; }
  .simplified-chat .chat-form { flex: 0 0 auto !important; }
  .chat-input-wrap, .chat-text-input { min-width: 0 !important; width: 100% !important; }
}

/* v1.8.2 Hostinger chat sync + formatting controls */
.chat-input-wrap {
  grid-template-columns: 44px 44px 96px minmax(0, 1fr);
  align-items: center;
}
.chat-format-btn,
.chat-color-select {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 14px;
  height: 44px;
  min-width: 44px;
  box-shadow: none;
}
.chat-format-btn {
  width: 44px;
  font-weight: 950;
  cursor: pointer;
}
.chat-format-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: rgba(255,255,255,.30);
}
.chat-color-select {
  width: 96px;
  padding: 0 8px;
  font-weight: 800;
  cursor: pointer;
}
.chat-format-btn:disabled,
.chat-color-select:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.chat-msg .chat-body {
  color: var(--chat-user-color, color-mix(in srgb, var(--chat-bubble-text-color) 88%, transparent)) !important;
  font-weight: var(--chat-user-weight, 500);
}
@media (max-width: 640px) {
  .chat-input-wrap {
    grid-template-columns: 42px 42px 82px minmax(0, 1fr);
    gap: 6px;
  }
  .chat-format-btn,
  .chat-color-select,
  .emoji-toggle {
    height: 42px;
    min-width: 42px;
  }
  .chat-format-btn { width: 42px; }
  .chat-color-select { width: 82px; font-size: 12px; }
}

/* v1.8.3 sohbet senkron + kullanışlı renk/kalın yazı araçları */
.chat-form.chat-form-with-emoji {
  align-items: stretch;
}
.chat-input-wrap {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.chat-input-wrap .chat-text-input {
  flex: 1 1 260px;
  min-width: 180px !important;
}
.chat-format-btn,
.chat-color-btn {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 14px;
  height: 44px;
  min-width: 44px;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  user-select: none;
}
.chat-format-btn {
  width: 44px;
  font-size: 18px;
  font-weight: 950;
}
.chat-format-btn strong {
  font-weight: 950;
  line-height: 1;
}
.chat-color-btn {
  width: 96px;
  padding: 0 10px;
  font-weight: 800;
  font-size: 13px;
}
.chat-format-btn:hover,
.chat-color-btn:hover {
  background: rgba(139,92,246,.24);
}
.chat-format-btn.active,
.chat-color-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: rgba(255,255,255,.34);
}
.chat-format-btn:disabled,
.chat-color-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.color-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  background: var(--selected-chat-color, #f8fafc);
  display: inline-block;
}
.chat-color-palette {
  position: absolute;
  left: 104px;
  bottom: calc(100% + 10px);
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(5, 36px);
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(12,15,32,.98);
  box-shadow: var(--shadow);
}
.chat-color-palette button {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: var(--swatch, rgba(255,255,255,.08));
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}
.chat-color-palette button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(139,92,246,.24);
}
.chat-msg.chat-bold .chat-body {
  font-weight: 950 !important;
  letter-spacing: .01em;
}
.chat-msg.chat-colored .chat-body {
  color: var(--chat-user-color) !important;
}
.chat-msg .chat-body {
  font-weight: var(--chat-user-weight, 500);
}
@media (max-width: 640px) {
  .chat-form.chat-form-with-emoji {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .chat-input-wrap {
    gap: 6px;
  }
  .emoji-toggle,
  .chat-format-btn,
  .chat-color-btn {
    height: 42px;
    min-width: 42px;
  }
  .chat-color-btn {
    width: 82px;
    font-size: 12px;
  }
  .chat-input-wrap .chat-text-input {
    flex-basis: 100%;
    order: 10;
    min-width: 0 !important;
  }
  .chat-color-palette {
    left: 0;
    width: min(300px, calc(100vw - 42px));
    grid-template-columns: repeat(5, 1fr);
  }
}


/* v1.8.4 kesin düzeltme: sohbet araçları ve farklı IP senkron görünümü */
.chat-form.chat-form-with-emoji {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 140px !important;
  gap: 12px !important;
  align-items: end !important;
}
.chat-form.chat-form-with-emoji .chat-input-wrap {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 44px 44px 96px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
}
.chat-form.chat-form-with-emoji .emoji-toggle,
.chat-form.chat-form-with-emoji .chat-format-btn,
.chat-form.chat-form-with-emoji .chat-color-btn {
  width: auto !important;
  min-width: 44px !important;
  height: 44px !important;
  flex: none !important;
  opacity: 1;
}
.chat-form.chat-form-with-emoji .chat-format-btn {
  width: 44px !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 18px !important;
}
.chat-form.chat-form-with-emoji .chat-color-btn {
  width: 96px !important;
  padding: 0 10px !important;
  color: #fff !important;
}
.chat-form.chat-form-with-emoji .chat-text-input {
  width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
}
#chatSendBtn {
  width: 140px !important;
  min-width: 140px !important;
  height: 44px !important;
  align-self: end !important;
}
.chat-format-btn.active {
  background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important;
  border-color: rgba(255,255,255,.45) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.20) !important;
}
.chat-color-btn.active {
  background: linear-gradient(135deg, rgba(139,92,246,.75), rgba(6,182,212,.75)) !important;
  border-color: rgba(255,255,255,.45) !important;
}
.chat-format-btn:disabled,
.chat-color-btn:disabled,
.emoji-toggle:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}
.chat-color-palette {
  left: 96px !important;
  bottom: calc(100% + 10px) !important;
  z-index: 9999 !important;
}
.chat-color-palette button.active,
.chat-color-palette button:focus {
  outline: 2px solid #fff !important;
  box-shadow: 0 0 0 4px rgba(139,92,246,.35) !important;
}
.chat-msg.chat-bold .chat-body,
.chat-msg.chat-bold .chat-body * {
  font-weight: 950 !important;
}
.chat-msg.chat-colored .chat-body,
.chat-msg.chat-colored .chat-body *:not(.mention) {
  color: var(--chat-user-color) !important;
}
@media (max-width: 640px) {
  .chat-form.chat-form-with-emoji {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 10px !important;
  }
  .chat-form.chat-form-with-emoji .chat-input-wrap {
    grid-template-columns: 44px 44px 96px !important;
  }
  .chat-form.chat-form-with-emoji .chat-text-input {
    grid-column: 1 / -1 !important;
    min-height: 44px !important;
  }
  #chatSendBtn {
    width: 100% !important;
    min-width: 0 !important;
  }
  .chat-color-palette {
    left: 0 !important;
    width: min(310px, calc(100vw - 40px)) !important;
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* v1.8.6 daha fazla renk, mobil sohbet ve misafir giriş iyileştirmeleri */
html, body { max-width: 100%; overflow-x: hidden; }
.chat-form.chat-form-with-emoji {
  background: color-mix(in srgb, var(--card) 88%, #020617 12%) !important;
}
.chat-form.chat-form-with-emoji .chat-input-wrap {
  grid-template-columns: 46px 46px 112px minmax(0, 1fr) !important;
}
.chat-color-btn { width: 112px !important; }
.chat-color-palette {
  grid-template-columns: repeat(7, 34px) !important;
  max-width: min(380px, calc(100vw - 48px)) !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
.chat-color-palette button {
  position: relative;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
}
.chat-color-palette button[data-color=""] {
  border-radius: 12px !important;
  background: rgba(255,255,255,.12) !important;
}
.chat-color-palette button[title="Siyah"] {
  border-color: rgba(255,255,255,.75) !important;
}
.chat-color-palette button.active::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  text-shadow: 0 1px 3px #000;
}
.chat-format-btn.active strong { color: #fff !important; }
.chat-msg.chat-bold .chat-body { font-weight: 950 !important; }
.chat-msg.chat-colored .chat-body { color: var(--chat-user-color) !important; }

@media (max-width: 820px) {
  body { padding-bottom: 154px !important; }
  .container.radio-layout {
    width: 100% !important;
    padding-inline: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .radio-main, .right-rail { width: 100% !important; min-width: 0 !important; }
  .right-rail { order: 1 !important; }
  .radio-main { order: 2 !important; }
  #identityCard { margin-top: 0 !important; }
  #identityCard .card-pad { padding: 14px !important; }
  #identityCard h2 { font-size: 20px !important; margin-bottom: 4px !important; }
  .identity-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .identity-tabs .tab { min-height: 42px !important; padding: 8px 6px !important; font-size: 12px !important; }
  .identity-form { gap: 9px !important; }
  .identity-form .input, .identity-form .btn { min-height: 44px !important; }
  .mobile-fixed-player {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    z-index: 900 !important;
    margin: 0 !important;
    border-radius: 20px !important;
    max-height: 140px !important;
    overflow: hidden !important;
    box-shadow: 0 -12px 42px rgba(0,0,0,.45) !important;
  }
  .mobile-fixed-player .card-pad { padding: 9px !important; gap: 8px !important; }
  .flatcast-console { grid-template-columns: 54px minmax(0,1fr) !important; gap: 9px !important; }
  .disc-ring { width: 48px !important; height: 48px !important; }
  .equalizer { display: none !important; }
  .flatcast-display h2 { font-size: 15px !important; line-height: 1.15 !important; max-height: 36px !important; overflow: hidden !important; }
  .flatcast-display p { display: none !important; }
  .flatcast-controls { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  .flatcast-controls .btn { min-height: 38px !important; padding: 8px !important; font-size: 13px !important; }
  .flatcast-controls .volume-label { grid-column: 1 / -1 !important; height: 24px !important; font-size: 11px !important; }

  .simplified-chat {
    height: calc(100dvh - 300px) !important;
    min-height: 470px !important;
    max-height: 680px !important;
    border-radius: 22px !important;
  }
  .simplified-chat .card-pad.chat-head { padding: 14px !important; }
  .simplified-chat .chat-head h2 { font-size: 22px !important; }
  .simplified-chat .chat-head .small { font-size: 12px !important; line-height: 1.35 !important; }
  .simplified-chat #chatIdentity { justify-self: start !important; }
  .simplified-chat .chat-list { padding: 10px !important; gap: 9px !important; }
  .simplified-chat .chat-msg { padding: 10px 12px !important; border-radius: 16px !important; }
  .chat-form.chat-form-with-emoji {
    padding: 10px !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .chat-form.chat-form-with-emoji .chat-input-wrap {
    display: grid !important;
    grid-template-columns: 46px 46px minmax(92px, 112px) minmax(0, 1fr) !important;
    gap: 7px !important;
  }
  .chat-form.chat-form-with-emoji .emoji-toggle,
  .chat-form.chat-form-with-emoji .chat-format-btn,
  .chat-form.chat-form-with-emoji .chat-color-btn {
    min-height: 46px !important;
    height: 46px !important;
  }
  .chat-form.chat-form-with-emoji .chat-color-btn { width: auto !important; font-size: 12px !important; }
  .chat-form.chat-form-with-emoji .chat-text-input {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }
  #chatSendBtn { width: 100% !important; min-width: 0 !important; min-height: 48px !important; font-size: 16px !important; }
  .chat-color-palette {
    left: 0 !important;
    right: auto !important;
    bottom: calc(100% + 8px) !important;
    grid-template-columns: repeat(6, 38px) !important;
    gap: 9px !important;
    width: min(320px, calc(100vw - 40px)) !important;
    max-height: 235px !important;
  }
  .chat-color-palette button { width: 38px !important; height: 38px !important; }
}

@media (max-width: 420px) {
  .simplified-chat { min-height: 440px !important; height: calc(100dvh - 285px) !important; }
  .chat-form.chat-form-with-emoji .chat-input-wrap { grid-template-columns: 44px 44px minmax(82px, 1fr) !important; }
  .chat-form.chat-form-with-emoji .chat-text-input { grid-column: 1 / -1 !important; }
  .chat-color-palette { grid-template-columns: repeat(5, 38px) !important; width: min(280px, calc(100vw - 36px)) !important; }
}

/* v1.8.6 mobil sohbet mesaj alanını 2-3 kat büyütme */
@media (max-width: 820px) {
  .simplified-chat {
    height: auto !important;
    min-height: 900px !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: auto minmax(620px, 1fr) auto !important;
    overflow: hidden !important;
  }
  .simplified-chat .chat-list {
    min-height: 620px !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .simplified-chat .chat-msg {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 420px) {
  .simplified-chat {
    min-height: 840px !important;
    grid-template-rows: auto minmax(560px, 1fr) auto !important;
  }
  .simplified-chat .chat-list {
    min-height: 560px !important;
  }
}

/* v1.8.7 misafir listesi anlık durum + mobil sohbet yazma alanı düzeltmesi */
.chat-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.presence-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}
.presence-control select {
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 12px;
  max-width: 112px;
}
.presence-control select option { color: #111827; }
.presence-control select:disabled { opacity: .55; cursor: not-allowed; }
.presence-dot,
.status-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 0 14px rgba(255,255,255,.25);
}
.presence-dot.online,
.status-dot.online { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16), 0 0 16px rgba(34,197,94,.75); }
.presence-dot.away,
.status-dot.away { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.16), 0 0 16px rgba(239,68,68,.75); }
.presence-dot.offline,
.status-dot.offline { background: #e5e7eb; box-shadow: 0 0 0 3px rgba(229,231,235,.12), 0 0 10px rgba(229,231,235,.35); }
.guest-item .status-dot {
  margin-top: 6px;
}
.guest-item.presence-online { border-color: rgba(34,197,94,.38); }
.guest-item.presence-away { border-color: rgba(239,68,68,.42); }
.guest-item.presence-offline { opacity: .78; border-color: rgba(229,231,235,.26); }

@media (max-width: 820px) {
  body { padding-bottom: 168px !important; }
  .chat-head-actions {
    justify-content: flex-start !important;
    width: 100%;
  }
  .presence-control {
    width: auto;
    max-width: 100%;
    min-height: 38px;
  }
  .presence-control select { font-size: 12px; max-width: 128px; }
  .simplified-chat {
    min-height: 0 !important;
    height: clamp(610px, calc(100dvh - 160px), 780px) !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin-bottom: 18px !important;
  }
  .simplified-chat .chat-list {
    flex: 1 1 auto !important;
    min-height: 340px !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  .chat-form.chat-form-with-emoji {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 12 !important;
    background: color-mix(in srgb, var(--panel-bg-color, #111827) 96%, black) !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
  }
}

@media (max-width: 420px) {
  body { padding-bottom: 158px !important; }
  .simplified-chat {
    height: clamp(580px, calc(100dvh - 150px), 720px) !important;
  }
  .simplified-chat .chat-list {
    min-height: 300px !important;
  }
  .chat-form.chat-form-with-emoji .chat-input-wrap {
    grid-template-columns: 44px 44px minmax(96px, 1fr) !important;
  }
  .chat-form.chat-form-with-emoji .chat-text-input {
    grid-column: 1 / -1 !important;
  }
}


/* v1.8.8 mobil sohbet önceliği, misafir girişi ve hamburger menü */
.mobile-menu-toggle {
  display: none;
  width: 44px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: var(--text);
  place-items: center;
  gap: 4px;
  cursor: pointer;
  flex: 0 0 auto;
}
.mobile-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

@media (max-width: 820px) {
  body { padding-bottom: 154px !important; }
  .public-topbar { overflow: visible !important; }
  .public-topbar .topbar-inner {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 10px !important;
  }
  .public-topbar .brand { min-width: 0; font-size: 16px !important; }
  .public-topbar .brand #stationName { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .public-topbar .logo { width: 38px; height: 38px; border-radius: 13px; }
  .mobile-menu-toggle { display: grid !important; justify-self: end; }
  .public-navlinks {
    display: none !important;
    grid-column: 1 / -1;
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(7,9,23,.96);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    overflow: visible !important;
  }
  .public-topbar.nav-open .public-navlinks { display: grid !important; gap: 8px; }
  .public-navlinks .nav-button {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center;
    padding: 12px 10px !important;
    border-radius: 14px !important;
  }

  .container.radio-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 10px 8px 168px !important;
    gap: 10px !important;
  }
  .radio-layout > .radio-main,
  .radio-layout > .right-rail {
    display: contents !important;
  }
  .radio-main > .card:first-child { order: 5 !important; }
  .mobile-fixed-player { order: 99 !important; }
  .guest-card { order: 4 !important; }

  #identityCard {
    order: 1 !important;
    margin: 0 !important;
    border-radius: 20px !important;
  }
  #identityCard .card-pad { padding: 12px !important; gap: 9px !important; }
  #identityCard h2 { font-size: 18px !important; }
  .identity-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .identity-tabs .tab { font-size: 12px !important; min-height: 40px !important; padding: 7px 5px !important; }
  .identity-form .input, .identity-form .btn { min-height: 43px !important; }

  body.has-chat-identity #identityCard {
    order: 3 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.has-chat-identity #identityCard .card-pad {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 2px !important;
  }
  body.has-chat-identity #identityCard h2,
  body.has-chat-identity #identityCard .identity-tabs,
  body.has-chat-identity #identityCard .identity-form,
  body.has-chat-identity #identityCard #identityReady,
  body.has-chat-identity #identityCard #identityAlert {
    display: none !important;
  }
  body.has-chat-identity #identityLogoutBtn {
    display: inline-flex !important;
    width: auto !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }

  .radio-main > .simplified-chat {
    order: 2 !important;
  }
  body.has-chat-identity .radio-main > .simplified-chat {
    order: 1 !important;
  }
  .simplified-chat {
    width: 100% !important;
    height: calc(100dvh - 170px) !important;
    min-height: 610px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 0 8px !important;
    border-radius: 22px !important;
  }
  .simplified-chat .card-pad.chat-head {
    flex: 0 0 auto !important;
    display: grid !important;
    gap: 9px !important;
    padding: 12px !important;
  }
  .simplified-chat .chat-head h2 { font-size: 22px !important; }
  .simplified-chat .chat-head .small { font-size: 12px !important; line-height: 1.3 !important; }
  .chat-head-actions { justify-content: flex-start !important; width: 100%; }
  .simplified-chat .chat-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px !important;
  }
  .chat-form.chat-form-with-emoji {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
    z-index: 20 !important;
    background: color-mix(in srgb, var(--panel-bg-color, #111827) 96%, black) !important;
  }
  .chat-form.chat-form-with-emoji .chat-input-wrap {
    display: grid !important;
    grid-template-columns: 44px 44px minmax(96px, 124px) minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
  }
  .chat-form.chat-form-with-emoji .emoji-toggle,
  .chat-form.chat-form-with-emoji .chat-format-btn,
  .chat-form.chat-form-with-emoji .chat-color-btn { min-height: 44px !important; height: 44px !important; }
  .chat-form.chat-form-with-emoji .chat-color-btn { width: auto !important; }
  .chat-form.chat-form-with-emoji .chat-text-input {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }
  #chatSendBtn { width: 100% !important; min-height: 48px !important; font-size: 16px !important; }
  .guest-card { max-height: 260px; }
  .guest-list { max-height: 180px !important; }
}

@media (max-width: 420px) {
  .container.radio-layout { padding-left: 6px !important; padding-right: 6px !important; }
  .simplified-chat { height: calc(100dvh - 150px) !important; min-height: 590px !important; }
  .chat-form.chat-form-with-emoji .chat-input-wrap {
    grid-template-columns: 42px 42px minmax(92px, 1fr) !important;
  }
  .chat-color-palette { width: min(290px, calc(100vw - 32px)) !important; }
}

/* v1.9.0 mobil sade düzen: daha geniş sohbet, görünür gönder alanı, nazik hamburger */
@media (max-width: 820px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }

  body {
    padding-bottom: 146px !important;
    background-attachment: fixed;
  }

  .public-topbar {
    border-bottom-color: rgba(255,255,255,.09) !important;
    background: rgba(7,9,23,.86) !important;
    backdrop-filter: blur(18px) !important;
  }

  .public-topbar .topbar-inner {
    min-height: 64px !important;
    padding: 9px 12px !important;
  }

  .public-topbar .brand {
    gap: 10px !important;
    font-size: 17px !important;
    letter-spacing: -.04em !important;
  }

  .public-topbar .logo {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
  }

  .mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.20) !important;
    gap: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }

  .mobile-menu-toggle span {
    position: absolute !important;
    left: 12px !important;
    width: 20px !important;
    height: 1.5px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.88) !important;
    transform-origin: center !important;
    transition: transform .18s ease, opacity .18s ease, top .18s ease, width .18s ease !important;
  }
  .mobile-menu-toggle span:nth-child(1) { top: 14px !important; }
  .mobile-menu-toggle span:nth-child(2) { top: 21px !important; width: 16px !important; left: 16px !important; }
  .mobile-menu-toggle span:nth-child(3) { top: 28px !important; }
  .public-topbar.nav-open .mobile-menu-toggle span:nth-child(1) { top: 21px !important; transform: rotate(45deg) !important; }
  .public-topbar.nav-open .mobile-menu-toggle span:nth-child(2) { opacity: 0 !important; transform: scaleX(.2) !important; }
  .public-topbar.nav-open .mobile-menu-toggle span:nth-child(3) { top: 21px !important; transform: rotate(-45deg) !important; }

  .public-topbar.nav-open .public-navlinks {
    padding: 10px !important;
    border-radius: 18px !important;
    background: rgba(10,13,30,.98) !important;
  }

  .container.radio-layout {
    padding: 10px 8px 150px !important;
    gap: 9px !important;
  }

  .radio-layout > .radio-main,
  .radio-layout > .right-rail {
    width: 100% !important;
    max-width: 100% !important;
    display: contents !important;
  }

  /* Mobilde üstteki büyük tanıtım kartı player ile tekrar ettiği için sadeleştirildi. */
  .radio-main > .card:first-child {
    display: none !important;
  }

  #identityCard,
  .radio-main > .simplified-chat,
  .guest-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  #identityCard {
    order: 1 !important;
    border-radius: 20px !important;
  }

  #identityCard .card-pad {
    padding: 12px !important;
    gap: 8px !important;
  }

  #identityCard h2 {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  .identity-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .identity-tabs .tab {
    min-height: 38px !important;
    padding: 7px 4px !important;
    font-size: 11.5px !important;
    border-radius: 15px !important;
  }

  .identity-form {
    gap: 8px !important;
  }

  .identity-form label {
    gap: 5px !important;
    font-size: 12px !important;
  }

  .identity-form .input,
  .identity-form .btn {
    min-height: 42px !important;
    border-radius: 15px !important;
  }

  body.has-chat-identity #identityCard {
    order: 2 !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  body.has-chat-identity #identityCard .card-pad {
    padding: 0 2px !important;
    justify-content: flex-end !important;
  }

  body.has-chat-identity #identityLogoutBtn {
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
  }

  .radio-main > .simplified-chat {
    order: 2 !important;
  }

  body.has-chat-identity .radio-main > .simplified-chat {
    order: 1 !important;
  }

  .simplified-chat {
    width: 100% !important;
    min-width: 0 !important;
    height: min(78dvh, 760px) !important;
    min-height: 660px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 0 9px !important;
    border-radius: 22px !important;
  }

  body.has-chat-identity .simplified-chat {
    height: min(82dvh, 790px) !important;
    min-height: 700px !important;
  }

  .simplified-chat .card-pad.chat-head {
    flex: 0 0 auto !important;
    padding: 12px 12px 10px !important;
    gap: 7px !important;
    display: grid !important;
  }

  .simplified-chat .chat-head h2 {
    font-size: 22px !important;
    line-height: 1.05 !important;
  }

  .simplified-chat .chat-head .small {
    font-size: 11.5px !important;
    line-height: 1.28 !important;
    margin: 4px 0 0 !important;
  }

  .chat-head-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 7px !important;
  }

  .chat-head-actions .pill,
  .presence-control {
    min-height: 34px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }

  .presence-control select {
    font-size: 12px !important;
  }

  .simplified-chat .chat-list {
    flex: 1 1 auto !important;
    min-height: 430px !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  body.has-chat-identity .simplified-chat .chat-list {
    min-height: 470px !important;
  }

  .simplified-chat .chat-msg {
    padding: 9px 11px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
  }

  .chat-form.chat-form-with-emoji {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 30 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 9px !important;
    background: color-mix(in srgb, var(--panel-bg-color, #111827) 97%, black) !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
  }

  .chat-form.chat-form-with-emoji .chat-input-wrap {
    display: grid !important;
    grid-template-columns: 40px 40px minmax(92px, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .chat-form.chat-form-with-emoji .emoji-toggle,
  .chat-form.chat-form-with-emoji .chat-format-btn,
  .chat-form.chat-form-with-emoji .chat-color-btn {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
  }

  .chat-form.chat-form-with-emoji .chat-color-btn {
    width: auto !important;
    min-width: 92px !important;
    font-size: 12px !important;
  }

  .chat-form.chat-form-with-emoji .chat-text-input {
    grid-column: 1 / -1 !important;
    min-height: 46px !important;
    height: 46px !important;
    font-size: 16px !important;
    border-radius: 15px !important;
  }

  #chatSendBtn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 15px !important;
    border-radius: 15px !important;
  }

  .chat-color-palette {
    left: 0 !important;
    right: auto !important;
    bottom: calc(100% + 8px) !important;
    width: min(302px, calc(100vw - 34px)) !important;
    max-height: 230px !important;
    grid-template-columns: repeat(6, 36px) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  .chat-color-palette button {
    width: 36px !important;
    height: 36px !important;
  }

  .guest-card {
    order: 4 !important;
    max-height: 320px !important;
    border-radius: 20px !important;
    margin: 0 0 8px !important;
  }

  .guest-card .card-pad {
    padding: 12px !important;
  }

  .guest-card h2 {
    font-size: 21px !important;
  }

  .guest-list {
    max-height: 210px !important;
    padding: 0 8px 10px !important;
  }

  .guest-item {
    border-radius: 17px !important;
    padding: 10px !important;
  }

  .mobile-fixed-player {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 132px !important;
    border-radius: 20px !important;
    z-index: 1000 !important;
  }

  .mobile-fixed-player .card-pad {
    padding: 8px !important;
    gap: 7px !important;
  }

  .mobile-fixed-player .flatcast-left {
    display: none !important;
  }

  .mobile-fixed-player .flatcast-console {
    display: block !important;
  }

  .mobile-fixed-player .flatcast-display {
    padding: 9px 10px !important;
    border-radius: 14px !important;
  }

  .mobile-fixed-player .now-label {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }

  .mobile-fixed-player #trackTitle {
    font-size: 14px !important;
    line-height: 1.14 !important;
    max-height: 32px !important;
  }

  .mobile-fixed-player #trackMeta {
    display: none !important;
  }

  .mobile-fixed-player .flatcast-controls {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  .mobile-fixed-player .flatcast-controls .btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 7px !important;
    font-size: 13px !important;
    border-radius: 13px !important;
  }

  .mobile-fixed-player .flatcast-controls .volume-label {
    display: none !important;
  }
}

@media (max-width: 420px) {
  body { padding-bottom: 142px !important; }
  .container.radio-layout {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-bottom: 144px !important;
  }
  .simplified-chat {
    height: min(80dvh, 730px) !important;
    min-height: 640px !important;
  }
  body.has-chat-identity .simplified-chat {
    height: min(84dvh, 760px) !important;
    min-height: 675px !important;
  }
  .simplified-chat .chat-list {
    min-height: 405px !important;
  }
  body.has-chat-identity .simplified-chat .chat-list {
    min-height: 445px !important;
  }
  .chat-form.chat-form-with-emoji .chat-input-wrap {
    grid-template-columns: 40px 40px minmax(88px, 1fr) !important;
  }
  .mobile-fixed-player { max-height: 128px !important; }
}


/* v1.9.0: daha minimal durum seçici ve boş panel metni kontrolü */
.is-empty-text { display: none !important; }
.presence-control {
  min-height: 28px !important;
  height: 28px !important;
  padding: 3px 7px !important;
  gap: 5px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.105) !important;
  box-shadow: none !important;
}
.presence-control select {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  max-width: 92px !important;
  padding: 0 14px 0 0 !important;
  height: 22px !important;
  appearance: auto !important;
}
.presence-dot,
.status-dot {
  width: 8px !important;
  height: 8px !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.07), 0 0 10px currentColor !important;
}
.chat-head-actions .pill {
  min-height: 28px !important;
  padding: 4px 9px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
}
.admin-password-card {
  margin-top: 8px;
  border-style: dashed !important;
}
@media (max-width: 820px) {
  .chat-head-actions {
    gap: 6px !important;
  }
  .presence-control {
    min-height: 26px !important;
    height: 26px !important;
    padding: 2px 6px !important;
    gap: 4px !important;
  }
  .presence-control select {
    font-size: 10.5px !important;
    max-width: 86px !important;
    height: 20px !important;
  }
  .chat-head-actions .pill {
    min-height: 26px !important;
    padding: 3px 8px !important;
    font-size: 10.5px !important;
  }
}


/* v1.9.1: mobilde player sabit footer değil; en üstte normal akışta kaysın */
@media (max-width: 820px) {
  body {
    padding-bottom: 0 !important;
    overflow-x: hidden !important;
  }

  .container.radio-layout {
    padding: 10px 8px 18px !important;
    gap: 10px !important;
  }

  .radio-layout > .radio-main,
  .radio-layout > .right-rail {
    display: contents !important;
  }

  /* Player artık alt sabit alan değil; sayfanın en üst kartı gibi davranır. */
  .mobile-fixed-player,
  .radio-main > .mobile-fixed-player,
  .flatcast-player-card.mobile-fixed-player {
    order: 0 !important;
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 0 8px 0 !important;
    z-index: auto !important;
    transform: none !important;
    border-radius: 20px !important;
  }

  .mobile-fixed-player .card-pad {
    padding: 10px !important;
    gap: 8px !important;
  }

  .mobile-fixed-player .flatcast-console {
    display: block !important;
  }

  .mobile-fixed-player .flatcast-left {
    display: none !important;
  }

  .mobile-fixed-player .flatcast-display {
    padding: 11px 12px !important;
    border-radius: 15px !important;
  }

  .mobile-fixed-player .now-label {
    font-size: 10.5px !important;
    letter-spacing: .09em !important;
    margin-bottom: 3px !important;
  }

  .mobile-fixed-player #trackTitle {
    font-size: 16px !important;
    line-height: 1.18 !important;
    max-height: none !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-fixed-player #trackMeta {
    display: block !important;
    font-size: 11px !important;
    margin-top: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-fixed-player .flatcast-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    padding: 7px !important;
  }

  .mobile-fixed-player .flatcast-controls .btn {
    min-height: 40px !important;
    height: 40px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
  }

  .mobile-fixed-player .flatcast-controls .volume-label {
    display: none !important;
  }

  #identityCard {
    order: 1 !important;
  }

  .radio-main > .simplified-chat,
  body.has-chat-identity .radio-main > .simplified-chat {
    order: 2 !important;
  }

  body.has-chat-identity #identityCard {
    order: 3 !important;
  }

  .guest-card {
    order: 4 !important;
  }

  /* Player sabit olmadığı için sohbet alanı artık ekranda daha dengeli kalır. */
  .simplified-chat {
    height: auto !important;
    min-height: 640px !important;
    max-height: none !important;
  }

  .simplified-chat .chat-list {
    min-height: 380px !important;
    max-height: none !important;
  }

  body.has-chat-identity .simplified-chat {
    min-height: 690px !important;
  }

  body.has-chat-identity .simplified-chat .chat-list {
    min-height: 430px !important;
  }

  .chat-form.chat-form-with-emoji {
    position: sticky !important;
    bottom: 0 !important;
  }
}

@media (max-width: 420px) {
  body { padding-bottom: 0 !important; }
  .container.radio-layout {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-bottom: 16px !important;
  }
  .mobile-fixed-player,
  .radio-main > .mobile-fixed-player,
  .flatcast-player-card.mobile-fixed-player {
    position: static !important;
    max-height: none !important;
    margin-bottom: 8px !important;
  }
  .simplified-chat {
    min-height: 620px !important;
  }
  .simplified-chat .chat-list {
    min-height: 350px !important;
  }
  body.has-chat-identity .simplified-chat {
    min-height: 665px !important;
  }
  body.has-chat-identity .simplified-chat .chat-list {
    min-height: 405px !important;
  }
}


/* v1.9.2: tek satır misafir listesi, daha temiz durum göstergesi ve chat kapalı durumu */
.guest-list .guest-line {
  width: 100%;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.guest-list .guest-line:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.075); }
.guest-line-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 850; }
.guest-list .guest-item .user-actions { display: none !important; }
.guest-list .guest-item { display: grid !important; grid-template-columns: 14px minmax(0,1fr) !important; min-height: 34px !important; padding: 8px 10px !important; }
.guest-list .guest-item .small { display: none !important; }
.guest-list .guest-item strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chat-writing-closed #chatInput { opacity: .65; }
.chat-writing-closed #chatSendBtn,
.chat-writing-closed #emojiToggle,
.chat-writing-closed #chatBoldToggle,
.chat-writing-closed #chatColorToggle { opacity: .45 !important; }
@media (max-width: 820px) {
  .guest-card { max-height: 280px !important; }
  .guest-list { display: grid !important; gap: 7px !important; max-height: 190px !important; }
  .guest-list .guest-line { min-height: 32px !important; padding: 7px 9px !important; font-size: 13px !important; }
}


/* v1.9.3 DM list + private mode */
.guest-line {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 8px !important;
  min-height: 34px;
}
.guest-mention-btn {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
  cursor: pointer;
  text-align: left;
}
.guest-line-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guest-dm-btn {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  flex: 0 0 auto;
}
.guest-dm-btn:hover { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.45); }
.chat-text-input.private-mode,
.private-chat-mode .chat-text-input {
  border-color: rgba(14,165,233,.75) !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,.14);
}
.private-chat-mode #chatSendBtn {
  background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
}
@media (max-width: 680px) {
  .guest-line { padding: 5px 8px !important; min-height: 30px; }
  .guest-dm-btn { padding: 2px 7px; font-size: 10px; }
}

/* v1.9.4: now playing title limit + instant DM off UI */
.flatcast-display #trackTitle,
.mobile-fixed-player #trackTitle {
  max-width: 100%;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-height: 1.25em !important;
}
#trackTitle {
  word-break: normal !important;
  overflow-wrap: normal !important;
}
body.pm-disabled .guest-dm-btn,
.guest-dm-btn[hidden] {
  display: none !important;
}
body.pm-disabled.private-chat-mode #chatInput {
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}


/* v1.9.5: Canlı sohbet başlığında minimal çıkış butonu */
.chat-logout-mini {
  border: 1px solid rgba(248,113,113,.34);
  background: rgba(248,113,113,.10);
  color: #fecaca;
  border-radius: 999px;
  min-height: 28px;
  padding: 4px 9px;
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.chat-logout-mini:hover {
  background: rgba(248,113,113,.18);
  border-color: rgba(248,113,113,.55);
  transform: translateY(-1px);
}
.chat-logout-mini.hidden { display: none !important; }
@media (max-width: 820px) {
  .chat-logout-mini {
    min-height: 26px !important;
    padding: 3px 7px !important;
    font-size: 10.5px !important;
  }
}

/* v2.0.0 refinements */
.public-pages-editor{display:grid;gap:14px}.public-page-row{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px;background:rgba(255,255,255,.04);display:grid;gap:10px}.page-row-head{display:flex;align-items:center;gap:10px;justify-content:space-between}.compact-select{max-width:150px}.chat-lock-note{margin:12px;color:var(--muted);text-align:center}.chat-read-locked .chat-list{display:flex;align-items:center;justify-content:center}.pages-manager-card textarea{min-height:80px}.mini-player-card{overflow:hidden}.flatcast-player-card{border-radius:18px}.flatcast-console{min-width:0}.flatcast-display{min-width:0}.flatcast-display h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.radio-controls{min-width:0}.visitor-log-controls{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width: 760px){
  html,body{max-width:100%;overflow-x:hidden}.topbar,.container,.radio-layout,.radio-main,.right-rail,.card{max-width:100%;box-sizing:border-box}.container{width:100%;padding-left:10px;padding-right:10px}.radio-layout{display:flex;flex-direction:column;gap:10px}.mini-player-card{width:100%;margin:0;border-radius:14px}.mini-player-card .card-pad{padding:10px}.flatcast-console{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center}.disc-ring{width:44px;height:44px}.equalizer{display:none}.flatcast-display h2{font-size:1rem;line-height:1.2;margin:2px 0;max-width:100%}.dj-live-meta{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.radio-controls.flatcast-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.radio-controls .volume-label{grid-column:1 / -1;width:100%;font-size:.78rem}.radio-controls .btn{padding:9px 10px;border-radius:12px}.chat.chat-wide{min-height:0}.chat-list{min-height:52vh;max-height:58vh}.chat-form{position:sticky;bottom:0;background:rgba(7,9,23,.96);backdrop-filter:blur(10px);padding:8px;border-top:1px solid rgba(255,255,255,.08)}.chat-input-wrap{min-width:0}.guest-card{margin-bottom:10px}.guest-line{min-height:30px;padding:5px 8px}.guest-dm-btn{padding:3px 7px;font-size:.7rem}.admin-shell{grid-template-columns:1fr}.admin-side-menu{position:static;display:flex;overflow:auto;gap:8px;padding:8px}.admin-menu-btn{white-space:nowrap;min-width:max-content}.settings-grid{grid-template-columns:1fr}.table-wrap{overflow-x:auto}.flatcast-player-card::before,.flatcast-player-card::after{display:none}.hero-compact{display:none}
}

/* v2.0.0 guest privacy + manual guest admin tools */
.guest-summary-only{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:3px;
  background:rgba(255,255,255,.045);
  color:var(--text, #f8fafc);
}
.guest-summary-only strong{font-size:1.06rem;letter-spacing:.01em;}
.guest-summary-only span{font-size:.88rem;opacity:.88;}
.guest-summary-only small{font-size:.74rem;opacity:.58;line-height:1.25;}
.guest-list-hidden-names{padding:6px;}
.guest-line.manual .guest-line-name::after{content:' manuel';font-size:.68rem;opacity:.55;margin-left:6px;}
.manual-guest-card{border:1px dashed rgba(255,255,255,.14);}
.compact-form{display:grid;grid-template-columns:minmax(160px,1fr) minmax(120px,180px) auto;gap:10px;align-items:end;}
.admin-guest-list .guest-item.manual{border-style:dashed;background:rgba(34,197,94,.055);}
@media (max-width: 720px){
  .compact-form{grid-template-columns:1fr;}
  .guest-summary-only{padding:12px 10px;border-radius:14px;}
}

/* v2.0.0 admin private message monitor */
.private-admin-list{display:flex;flex-direction:column;gap:10px;max-height:560px;overflow:auto;padding-right:4px}
.pm-admin-row{border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.72);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.pm-admin-row.manual-target{border-color:rgba(34,197,94,.32);box-shadow:0 0 0 1px rgba(34,197,94,.06) inset}
.pm-admin-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.92rem;color:var(--text,#f8fafc)}
.pm-admin-head em{margin-left:auto;font-size:.78rem;color:var(--muted,#94a3b8);font-style:normal}
.pm-admin-message{font-size:.95rem;line-height:1.45;background:rgba(2,6,23,.45);border-radius:12px;padding:10px;white-space:pre-wrap;word-break:break-word}
.pm-admin-actions{justify-content:flex-end}
@media(max-width:700px){.pm-admin-head em{margin-left:0;width:100%}.private-admin-list{max-height:70vh}.pm-admin-row{border-radius:14px;padding:10px}}

/* v2.0.0 professional design controls */
:root{
  --site-bg-color:#070917;
  --panel-bg-color:#111827;
  --header-bg-color:#070917;
  --header-bg-image:none;
  --hero-bg-color:#1f2a44;
  --hero-bg-image:none;
  --player-bg-image:none;
  --player-button-text-color:#03120a;
  --player-stop-button-color:#ef4444;
  --player-stop-button-text-color:#ffffff;
  --player-icon-inner-color:#070917;
  --player-icon-ring-color:#8b5cf6;
  --player-icon-outer-color:#06b6d4;
  --player-wave-color:#06b6d4;
  --player-wave-color-2:#8b5cf6;
  --chat-panel-bg-color:#111827;
  --chat-panel-bg-image:none;
  --identity-bg-color:#111827;
  --identity-bg-image:none;
  --guest-list-bg-color:#111827;
  --guest-list-bg-image:none;
}
body{
  background:
    radial-gradient(circle at top left, rgba(139,92,246,.28), transparent 35%),
    radial-gradient(circle at bottom right, rgba(6,182,212,.18), transparent 38%),
    var(--site-bg-image),
    var(--site-bg-color) !important;
  background-size:auto, auto, cover, auto !important;
  background-position:top left, bottom right, center, center !important;
  background-attachment:fixed, fixed, fixed, scroll !important;
}
.card{background:linear-gradient(180deg, color-mix(in srgb, var(--panel-bg-color) 86%, white 8%), color-mix(in srgb, var(--panel-bg-color) 92%, black 8%));}
.public-topbar,.topbar{
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.08)),
    var(--header-bg-image),
    color-mix(in srgb, var(--header-bg-color) 92%, transparent) !important;
  background-size:cover !important;
  background-position:center !important;
}
.hero.hero-compact{
  background:
    linear-gradient(135deg, rgba(139,92,246,.35), rgba(6,182,212,.16)),
    var(--hero-bg-image),
    var(--hero-bg-color) !important;
  background-size:cover !important;
  background-position:center !important;
}
.flatcast-player-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08)),
    var(--player-bg-image),
    var(--player-bg-color) !important;
  background-size:cover !important;
  background-position:center !important;
}
.chat.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.08)),
    var(--chat-panel-bg-image),
    var(--chat-panel-bg-color) !important;
  background-size:cover !important;
  background-position:center !important;
}
#identityCard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.08)),
    var(--identity-bg-image),
    var(--identity-bg-color) !important;
  background-size:cover !important;
  background-position:center !important;
}
.guest-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.08)),
    var(--guest-list-bg-image),
    var(--guest-list-bg-color) !important;
  background-size:cover !important;
  background-position:center !important;
}
.guest-line.manual .guest-line-name::after{content:'' !important;display:none !important;}
.settings-divider{grid-column:1/-1;border:1px solid rgba(255,255,255,.11);border-radius:16px;padding:14px 16px;background:rgba(255,255,255,.045);display:flex;flex-direction:column;gap:4px;margin-top:8px}.settings-divider strong{font-size:1.02rem}.settings-divider span{font-size:.86rem;color:var(--muted)}.settings-grid label small,.media-upload label small{display:block;color:var(--muted);font-size:.78rem;margin-top:6px;line-height:1.35}.design-upload-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}.media-upload{background:rgba(255,255,255,.035);border:1px dashed rgba(255,255,255,.16);border-radius:18px;padding:14px}.media-upload .btn{width:100%;margin-top:10px}.admin-content>.card[data-admin-section="settings"] .card-pad>h2,.admin-content>.card[data-admin-section="settings"] .card-pad .actions:first-child{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:14px}.admin-password-card,.pages-manager-card{border-color:rgba(139,92,246,.22)}
@media (max-width:760px){
  .settings-divider{padding:12px}.media-upload{padding:12px}.upload-grid{gap:12px}.public-topbar .topbar-inner{min-height:64px}.brand{font-size:18px}.logo{width:38px;height:38px}.radio-layout{padding-left:0;padding-right:0}.mini-player-card,.chat.card,#identityCard,.guest-card{border-radius:18px;max-width:100%;}
}

/* v2.3.0 - Shoutcast/Icecast broadcaster panel */
.broadcaster-summary,
.broadcaster-connection {
  display: grid;
  gap: 10px;
}
.summary-row,
.connection-row {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  border-radius: 14px;
  padding: 10px 12px;
}
.summary-row span,
.connection-row span {
  color: var(--text);
  overflow-wrap: anywhere;
}
.summary-row strong,
.connection-row strong,
.connection-notes strong {
  color: var(--muted);
  font-size: .86rem;
}
.connection-notes {
  border: 1px solid rgba(139,92,246,.24);
  background: rgba(139,92,246,.08);
  border-radius: 16px;
  padding: 12px 14px;
}
.connection-notes p {
  margin: 6px 0 0;
  color: var(--text);
  line-height: 1.5;
}
.broadcaster-dj-card.is-disabled {
  opacity: .82;
}
.broadcaster-dj-card.is-disabled #startBroadcasterBtn {
  filter: grayscale(.55);
}
@media (max-width: 700px) {
  .summary-row,
  .connection-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .connection-row .mini-btn {
    width: 100%;
  }
}
.alert.notice {
  border-color: rgba(6,182,212,.45);
  color: #cffafe;
  background: rgba(6,182,212,.08);
}


/* v2.3.0 player renk kontrolleri */
.radio-controls .btn.play{
  background: linear-gradient(135deg, var(--player-button-color), color-mix(in srgb, var(--player-button-color) 78%, var(--accent-2) 22%)) !important;
  color: var(--player-button-text-color) !important;
}
.radio-controls .btn.danger{
  background: linear-gradient(135deg, var(--player-stop-button-color), color-mix(in srgb, var(--player-stop-button-color) 75%, black 25%)) !important;
  color: var(--player-stop-button-text-color) !important;
}
.disc-ring{
  background:
    radial-gradient(circle, var(--player-icon-inner-color) 0 28%, rgba(255,255,255,.10) 29% 33%, color-mix(in srgb, var(--player-icon-ring-color) 82%, transparent) 34% 48%, color-mix(in srgb, var(--player-icon-outer-color) 64%, transparent) 49% 64%, rgba(255,255,255,.09) 65% 100%) !important;
}
.equalizer i{background:linear-gradient(180deg, var(--player-wave-color), var(--player-wave-color-2)) !important;}
.radio-controls input[type="range"]{accent-color:var(--player-wave-color);}

/* v2.3.0 - ayrı Player Ayarları ve güvenli HTML Sayfa Yönetimi */
.public-pages-editor textarea[data-page-field="content"]{
  min-height:180px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  line-height:1.45;
}
.public-page-row small{display:block;color:var(--muted);font-size:.78rem;margin-top:6px;line-height:1.35}
.public-html{line-height:1.65;color:inherit;word-break:break-word}
.public-html p{margin:.4rem 0 .75rem}
.public-html h2,.public-html h3,.public-html h4,.public-html h5,.public-html h6{margin:1rem 0 .55rem;line-height:1.2}
.public-html ul,.public-html ol{padding-left:1.35rem;margin:.55rem 0 .9rem}
.public-html a{color:var(--accent-2);font-weight:800;text-decoration:none;border-bottom:1px solid rgba(6,182,212,.35)}
.public-html img{max-width:100%;height:auto;border-radius:14px;display:block;margin:.8rem 0;border:1px solid rgba(255,255,255,.1)}
.public-html table{width:100%;border-collapse:collapse;margin:1rem 0;overflow:hidden;border-radius:14px}
.public-html th,.public-html td{border:1px solid rgba(255,255,255,.12);padding:10px;text-align:left;vertical-align:top}
.public-html blockquote{margin:1rem 0;padding:12px 14px;border-left:4px solid var(--accent);background:rgba(255,255,255,.05);border-radius:12px}

/* v2.5.7 backup/admin utility layout */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 780px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* v2.5.9 Professional Auto DJ queue dashboard */
.queue-live-dashboard {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: stretch;
}
.queue-now-card,
.queue-next-card {
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(15,23,42,.78), rgba(30,41,59,.54));
  border-radius: 20px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.queue-now-card {
  display: grid;
  align-content: center;
  gap: 8px;
  border-color: rgba(34,197,94,.34);
  background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(139,92,246,.12));
}
.queue-kicker {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 6px;
  color: #bbf7d0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.queue-now-card strong {
  display: block;
  font-size: clamp(19px, 2.4vw, 28px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.queue-next-card .section-head.compact {
  align-items: center;
  margin-bottom: 10px;
}
.queue-upcoming-list {
  display: grid;
  gap: 7px;
  max-height: 242px;
  overflow: auto;
  padding-right: 2px;
}
.queue-upcoming-item {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.055);
  border-radius: 14px;
  padding: 8px 10px;
}
.queue-upcoming-item > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(139,92,246,.22);
  font-weight: 900;
  font-size: 12px;
}
.queue-upcoming-item strong,
.queue-upcoming-item em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-upcoming-item em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  margin-top: 2px;
}
.queue-playback-panel.professional {
  grid-template-columns: minmax(0,1.25fr) minmax(170px,.42fr) minmax(190px,.48fr) minmax(170px,.42fr) auto;
  align-items: center;
}
.empty-state.compact { padding: 8px; font-size: 13px; }
@media (max-width: 1080px) {
  .queue-live-dashboard,
  .queue-playback-panel.professional { grid-template-columns: 1fr; }
  .queue-playback-panel.professional .pill { justify-self: start; }
}
@media (max-width: 560px) {
  .queue-now-card,
  .queue-next-card { padding: 13px; border-radius: 16px; }
  .queue-upcoming-list { max-height: 210px; }
}

/* v2.5.10 DJ panel Auto DJ layout fix - minimal, non-breaking */
.queue-playback-panel.professional {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-width: 0;
  overflow: hidden;
}
.queue-playback-panel.professional .queue-auto-info {
  flex: 1 1 260px;
  min-width: 240px;
  display: grid;
  gap: 3px;
}
.queue-playback-panel.professional .queue-auto-info strong {
  font-size: 15px;
  line-height: 1.15;
}
.queue-playback-panel.professional .queue-auto-info .small {
  margin: 0;
  line-height: 1.35;
  max-width: 460px;
}
.queue-playback-panel.professional .queue-mode-field {
  flex: 0 1 190px;
  min-width: 170px;
  display: grid;
  gap: 6px;
  margin: 0;
}
.queue-playback-panel.professional .queue-mode-field .input {
  min-height: 42px;
}
.queue-playback-panel.professional .queue-toggle {
  flex: 0 0 auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  line-height: 1.15;
  white-space: nowrap;
}
.queue-playback-panel.professional .queue-toggle input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.queue-playback-panel.professional .queue-mode-pill {
  flex: 0 1 auto;
  justify-self: auto;
  margin-left: auto;
  max-width: 100%;
  white-space: nowrap;
}
.queue-live-dashboard {
  min-width: 0;
}
.queue-now-card,
.queue-next-card,
.queue-upcoming-list,
.queue-upcoming-item {
  min-width: 0;
}
@media (max-width: 1180px) {
  .queue-playback-panel.professional .queue-mode-pill {
    margin-left: 0;
  }
}
@media (max-width: 760px) {
  .queue-playback-panel.professional {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .queue-playback-panel.professional .queue-auto-info,
  .queue-playback-panel.professional .queue-mode-field,
  .queue-playback-panel.professional .queue-toggle,
  .queue-playback-panel.professional .queue-mode-pill {
    width: 100%;
    min-width: 0;
  }
  .queue-playback-panel.professional .queue-toggle {
    justify-content: flex-start;
    white-space: normal;
  }
  .queue-playback-panel.professional .queue-mode-pill {
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
}