*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#0f172a;color:#e5e7eb}.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#111827;position:sticky;top:0;z-index:10;border-bottom:1px solid #263244}.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:#fff;text-decoration:none}.logo{width:42px;height:42px;object-fit:contain;border-radius:8px}.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.nav a{color:#e5e7eb;text-decoration:none;padding:8px 10px;border-radius:8px}.nav a:hover{background:#1f2937}.menu-toggle{display:flex;background:#1f2937;color:#fff;border:0;padding:8px 10px;border-radius:6px}.container{max-width:1150px;margin:auto;padding:18px}.hero{padding:44px 20px;text-align:center;background:linear-gradient(135deg,#1e293b,#111827);border-radius:18px}.hero-logo{width:130px;height:130px;object-fit:contain;margin-bottom:12px}.hero h1{font-size:40px;margin:0 0 10px}.hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.btn{display:inline-block;background:var(--accent,#2563eb);color:#fff;border:0;padding:10px 16px;border-radius:10px;text-decoration:none;cursor:pointer}.btn.secondary{background:#334155}.card{background:#111827;border:1px solid #263244;border-radius:14px;padding:18px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.form{display:flex;flex-direction:column;gap:10px}input,textarea{width:100%;padding:11px;border-radius:8px;border:1px solid #374151;background:#0b1220;color:#e5e7eb}textarea{min-height:96px}.alert{padding:10px;border-radius:8px;margin-bottom:12px}.success{background:#064e3b}.danger{background:#7f1d1d}.full{width:100%}.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px}.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.list{display:grid;gap:12px}.stat{font-size:34px;font-weight:700}.admin-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.chat-layout{display:grid;grid-template-columns:2fr 1fr;gap:16px}.messages{height:360px;overflow:auto;background:#0b1220;border-radius:10px;padding:12px;margin-bottom:10px}.messages div{padding:7px 0;border-bottom:1px solid #1f2937}.chat-form{display:flex;gap:10px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}td,th{border-bottom:1px solid #263244;padding:8px;text-align:left}.footer{text-align:center;padding:20px;color:#9ca3af}.muted{color:#9ca3af}.compact{padding:28px 18px}.upload-box{border:2px dashed #475569;border-radius:14px;padding:16px;background:#0b1220}.preview-logo{width:120px;height:120px;object-fit:contain;display:block;margin:10px 0}.pre{white-space:pre-wrap;background:#0b1220;padding:12px;border-radius:10px;overflow:auto}@media(max-width:760px){.menu-toggle{display:block}.nav{display:none;position:absolute;top:67px;left:0;right:0;background:#111827;flex-direction:column;align-items:stretch;padding:10px}.nav-open .nav{display:none}.hero h1{font-size:30px}.chat-layout{grid-template-columns:1fr}.chat-form{flex-direction:column}.container{padding:12px}.logo{width:36px;height:36px}}

.donation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.donation-box{background:#0b1220;border:1px solid #334155;border-radius:14px;padding:16px}
.donation-value{font-size:22px;font-weight:700;background:#111827;border-radius:10px;padding:10px;display:inline-block}

.floating-player{
  position:fixed;
  left:16px;
  right:16px;
  bottom:14px;
  z-index:50;
  background:#111827;
  border:1px solid #334155;
  border-radius:16px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.floating-player small{display:block;color:#9ca3af;margin-top:2px}
.btn.small{padding:8px 12px;font-size:14px}
body{padding-bottom:78px}
html{scroll-behavior:smooth}

.check-row{display:flex;align-items:center;gap:10px;background:#0b1220;border:1px solid #334155;border-radius:10px;padding:10px}
.check-row input[type="checkbox"]{width:auto}

.site-banner{
  background:linear-gradient(135deg,#111827,#1e293b);
  border-bottom:1px solid #334155;
  padding:18px 16px;
}
.site-banner-inner{
  max-width:1150px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:22px;
}
.banner-logo{
  width:2in;
  max-width:190px;
  min-width:120px;
  height:auto;
  object-fit:contain;
}
.banner-copy h1{
  margin:0 0 6px;
  font-size:30px;
}
.banner-copy p{
  margin:0 0 12px;
  color:#cbd5e1;
}
@media(max-width:760px){
  .site-banner-inner{flex-direction:column;text-align:center;gap:12px}
  .banner-logo{width:140px;min-width:0}
  .banner-copy h1{font-size:24px}
}

.banner-image-wrap{
  width:100%;
  background:#0b1220;
  border-bottom:1px solid #334155;
  padding:0;
  margin:0;
  display:block;
}
.top-banner-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center 65%;
    display: block;
}

@media (max-width: 768px) {
    .top-banner-image {
        height: 150px;
        object-position: center 65%;
    }
}

.banner-preview{
  width:100%;
  max-width:600px;
  max-height:180px;
  object-fit:contain;
  display:block;
  margin:10px 0;
  border:1px solid #334155;
  border-radius:12px;
  background:#0b1220;
}


.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:10px 0 16px}
.danger-btn{background:#991b1b}

.facebook-embed-wrap{width:100%;overflow:auto;display:flex;justify-content:center}
.facebook-embed-wrap iframe{max-width:100%;border-radius:12px;background:#fff}

.muted-link{color:#cbd5e1;text-decoration:underline;margin-top:6px;display:inline-block}

.security-box{
  background:#052e2b;
  border:1px solid #0f766e;
  border-radius:14px;
  padding:14px;
  margin:14px 0;
}
.security-box h3{margin-top:0}
.security-box ul{margin-bottom:0}
.donation-box .btn{margin:4px 4px 4px 0}

.chat-name-box{
  margin-bottom:12px;
}
.chat-name-box label{
  display:block;
  margin-bottom:6px;
  color:#cbd5e1;
}
.emoji-box{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
}
.emoji-btn{
  background:#1f2937;
  color:#fff;
  border:1px solid #334155;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.emoji-btn:hover{
  background:#334155;
}

.raw-embed-box{
  width:100%;
  overflow:auto;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:#0b1220;
  border:1px solid #334155;
  border-radius:14px;
  padding:14px;
}
.code-area{
  min-height:260px;
  font-family:Consolas, Monaco, monospace;
  font-size:14px;
}

.azuracast-embed{
  width:100%;
  overflow:hidden;
  border-radius:14px;
  background:#0b1220;
  border:1px solid #334155;
}
.azuracast-embed iframe{
  width:100%;
  border:0;
  display:block;
}

.background-preview{
  width:100%;
  max-width:520px;
  max-height:220px;
  object-fit:cover;
  display:block;
  margin:10px 0;
  border-radius:12px;
  border:1px solid #334155;
}
.bg-mode-image .card,
.bg-mode-image .topbar,
.bg-mode-image .footer{
  backdrop-filter: blur(4px);
}

select{
  width:100%;
  padding:11px;
  border-radius:8px;
  border:1px solid #374151;
  background:#0b1220;
  color:#e5e7eb;
}

.facebook-button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.fb-like,.fb-share-button{margin:6px 10px 6px 0}
.facebook-embed-wrap{width:100%;overflow:auto;display:flex;justify-content:center}
.facebook-embed-wrap iframe{max-width:100%;border-radius:12px;background:#fff}

.azuracast-section,
.html5-fallback-player{
  margin-top:14px;
}
.azuracast-embed{
  width:100%;
  overflow:hidden;
  border-radius:14px;
  background:#0b1220;
  border:1px solid #334155;
}
.azuracast-embed iframe{
  width:100%;
  border:0;
  display:block;
}
.html5-fallback-player{
  background:#0b1220;
  border:1px solid #334155;
  border-radius:14px;
  padding:14px;
}

.facebook-button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.plugin-fallback-note{margin-top:12px}
.facebook-embed-wrap{width:100%;overflow:auto;display:flex;justify-content:center}
.facebook-embed-wrap iframe{max-width:100%;border-radius:12px;background:#fff}
.raw-embed-box{width:100%;overflow:auto;background:#0b1220;border:1px solid #334155;border-radius:14px;padding:14px}
.code-area{min-height:260px;font-family:Consolas, Monaco, monospace;font-size:14px}

.input-group{margin-bottom:14px}
.submit-frame{
  margin-top:16px;
  padding:10px;
  border:1px solid #334155;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(14,165,233,.10));
}
.request-submit-btn,
.login-btn,
.chat-send-btn{
 display:block;
    width:100%;
    max-width:320px;
    margin:20px auto 0;
    padding:14px 24px;
    border-radius:2px;
    background:#334155;
  color:#ffffff;
  font-size:18px;
  font-weight:700;
  letter-spacing:.2px;
  border-radius:12px #4d5c71;
  text-align:center;
    cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.request-submit-btn:hover,
.login-btn:hover,
.chat-send-btn:hover{
  transform:translateY(-1px);
}
.prayer-form textarea{min-height:130px}
.prayer-card strong{font-size:18px}
.improved-chat-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}
@media(max-width:640px){
  .improved-chat-form{grid-template-columns:1fr}
  .chat-send-btn{width:100%}
}

.live-screen-card{
  max-width:1000px;
  margin:0 auto 18px;
  background:#0b1220;
  border:1px solid #334155;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.30);
}
.live-screen{
  aspect-ratio:16/9;
  width:100%;
  background:linear-gradient(135deg,#111827,#020617);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.live-screen iframe,
.live-screen img{
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
}
.live-placeholder{
  text-align:center;
  padding:24px;
}
.live-placeholder h3{
  font-size:32px;
  margin:10px 0 6px;
}
.live-placeholder p{
  color:#cbd5e1;
}
.live-dot{
  width:18px;
  height:18px;
  background:#ef4444;
  border-radius:999px;
  margin:0 auto;
  box-shadow:0 0 0 8px rgba(239,68,68,.18);
}
.live-screen-info{
  padding:16px;
}
.live-screen-info h3{
  margin:0 0 6px;
}
.live-screen-info p{
  margin:0;
  color:#cbd5e1;
}
.listener-help{
  margin-top:14px;
  background:#111827;
  border:1px solid #334155;
  border-radius:12px;
  padding:12px;
}
.listener-help summary{
  cursor:pointer;
  font-weight:700;
}
.clean-music-player .muted{
  font-size:14px;
}

.player-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.azuracast-embed{
  width:100%;
  overflow:hidden;
  border-radius:14px;
  background:#0b1220;
  border:1px solid #334155;
}
.azuracast-embed iframe{
  width:100%;
  border:0;
  display:block;
}
.listener-help{
  margin-top:14px;
  background:#111827;
  border:1px solid #334155;
  border-radius:12px;
  padding:12px;
}
.listener-help summary{
  cursor:pointer;
  font-weight:700;
}

.menu-header-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.menu-editor-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin:16px 0;
}
.menu-editor-item{
  background:#0b1220;
  border:1px solid #334155;
  border-radius:14px;
  padding:14px;
}
.menu-item-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.status-pill{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  font-weight:700;
}
.status-pill.active{
  background:#064e3b;
  color:#d1fae5;
}
.status-pill.inactive{
  background:#7f1d1d;
  color:#fee2e2;
}
.menu-save-btn{
  margin-top:8px;
  width:100%;
}
.delete-menu-list{
  display:grid;
  gap:10px;
}
.delete-menu-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:#0b1220;
  border:1px solid #334155;
  border-radius:12px;
  padding:10px;
}
.endpoint-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.endpoint-grid code{
  background:#0b1220;
  border:1px solid #334155;
  border-radius:8px;
  padding:6px 8px;
}
.danger-btn{
  background:#991b1b;
}

.inline-delete-form{
  margin-top:12px;
  border-top:1px solid #334155;
  padding-top:12px;
}
.menu-delete-btn{
  width:100%;
}
.menu-editor-item{
  transition:opacity .25s ease, transform .25s ease, max-height .25s ease, padding .25s ease, margin .25s ease;
  overflow:hidden;
}
.menu-item-removing{
  opacity:0;
  transform:scale(.98);
  max-height:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin:0 !important;
  border:0 !important;
}

.menu-delete-notice{
  display:none;
  background:#064e3b;
  color:#d1fae5;
  border:1px solid #10b981;
  border-radius:12px;
  padding:12px 14px;
  margin:12px 0;
  font-weight:700;
}

.language-card{
  max-width:620px;
  margin:0 auto;
}
.language-option{
  display:flex;
  align-items:center;
  gap:12px;
  background:#0b1220;
  border:1px solid #334155;
  border-radius:14px;
  padding:14px;
  margin:10px 0;
  font-weight:700;
}
.language-option input{
  width:auto;
}
.language-save-btn{
  width:100%;
  margin-top:12px;
}

.live-chat-card{
  max-width:1000px;
  margin:0 auto 18px;
}
.live-page-messages{
  min-height:220px;
  max-height:360px;
  overflow-y:auto;
  background:#0b1220;
  border:1px solid #334155;
  border-radius:14px;
  padding:12px;
}
.live-chat-note{
  text-align:center;
  margin-top:10px;
}

/* Button visibility update */
.home-action-btn,
.bible-open-btn,
.contact-send-btn,
.login-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:145px;
  padding:12px 22px !important;
  border-radius:12px !important;
  background:#334155 !important;
  color:#ffffff !important;
  font-weight:800 !important;
  text-decoration:none !important;
  border:1px solid #475569 !important;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
  cursor:pointer;
}
.home-action-btn:hover,
.bible-open-btn:hover,
.contact-send-btn:hover,
.login-btn:hover{
  transform:translateY(-1px);
  background:#475569 !important;
}
.contact-send-btn,
.login-btn{
  width:100%;
  max-width:320px;
  margin:14px auto 0;
}
.bible-open-btn{
  margin-top:16px;
}

/* VERIFIED visible action buttons update */
.home-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:18px;
}
.home-action-btn,
.bible-open-btn,
.contact-send-btn,
.login-btn,
.primary-action{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:145px !important;
  padding:12px 22px !important;
  border-radius:12px !important;
  background:#334155 !important;
  color:#ffffff !important;
  font-weight:800 !important;
  font-size:16px !important;
  text-decoration:none !important;
  border:1px solid #475569 !important;
  box-shadow:0 8px 20px rgba(0,0,0,.24) !important;
  cursor:pointer !important;
  line-height:1.2 !important;
}
.home-action-btn:hover,
.bible-open-btn:hover,
.contact-send-btn:hover,
.login-btn:hover,
.primary-action:hover{
  transform:translateY(-1px);
  background:#475569 !important;
}
.contact-send-btn,
.login-btn{
  width:100% !important;
  max-width:320px !important;
  margin:14px auto 0 !important;
}
.bible-open-btn{
  margin-top:16px !important;
}
.bible-open-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 24px;
    margin-top:20px;
    border-radius:12px;
    background:#334155;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    border:1px solid #475569;
    cursor:pointer;
}

.bible-open-btn:hover{
    background:#475569;
}
.contact-send-btn{
    display:block;
    width:100%;
    max-width:320px;
    margin:20px auto 0;
    padding:14px 24px;
    border:none;
    border-radius:12px;
    background:#334155;
    color:#ffffff;
    font-size:16px;
    font-weight:700;
    text-align:center;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.contact-send-btn:hover{
    background:#475569;
    transform:translateY(-1px);
}

.contact-send-btn:active{
    transform:translateY(0);
}
.language-save-btn{
    display:block;
    width:100%;
    max-width:320px;
    margin:20px auto 0;
    padding:14px 24px;
    border:none;
    border-radius:12px;
    background:#334155;
    color:#ffffff;
    font-size:16px;
    font-weight:700;
    text-align:center;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.language-save-btn:hover{
    background:#475569;
    transform:translateY(-1px);
}

.language-save-btn:active{
    transform:translateY(0);
}
.daily-verse-card{
  border:1px solid #475569;
  background:linear-gradient(135deg, rgba(30,41,59,.95), rgba(15,23,42,.95));
}
.daily-verse-card h3{
  margin-bottom:10px;
}
.daily-verse-card h4{
  margin:6px 0 10px;
  color:#facc15;
  font-size:20px;
}
.daily-verse-card p{
  font-size:17px;
  line-height:1.6;
}

.youtube-save-btn{
  width:100%;
  max-width:320px;
  margin:14px auto 0;
	border-radius:12px;
  background:#334155;
  color:#ffffff;
  justify-content:center;
}

/* YouTube layout update */
.youtube-admin-top{
  border:1px solid #475569;
}
.youtube-top-form input{
  font-size:16px;
}
.youtube-preview-card{
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}
.youtube-screen-box{
  width:100%;
  aspect-ratio:16/9;
  background:#020617;
  border:1px solid #334155;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 40px rgba(0,0,0,.30);
}
.youtube-screen-box iframe,
.youtube-screen-box img{
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
}
.public-live-screen{
  border-radius:18px 18px 0 0;
}
.youtube-save-btn{
  width:100%;
  max-width:340px;
  margin:16px auto 0;
  display:flex;
  justify-content:center;
}

/* Update 53 YouTube screens */
.youtube-preview-card,
.videos-screen-card{
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}
.youtube-admin-url-box{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
.youtube-screen-box{
  width:100%;
  aspect-ratio:16/9;
  background:#020617;
  border:1px solid #334155;
  border-radius:18px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 40px rgba(0,0,0,.30);
}
.youtube-screen-box iframe,
.youtube-screen-box img{
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
}
.youtube-empty-screen{
  text-align:center;
  padding:24px;
  color:#e5e7eb;
}
.youtube-empty-screen p{
  color:#cbd5e1;
}
.youtube-save-btn{
  width:100%;
  max-width:340px;
  margin:16px auto 0;
  display:flex;
  justify-content:center;
}
.video-actions{
  display:flex;
  justify-content:center;
  margin-top:16px;
}

/* Update 54 YouTube mode support */
.youtube-preview-card,.videos-screen-card{max-width:1000px;margin-left:auto;margin-right:auto}
.youtube-admin-url-box,.obs-instructions{max-width:900px;margin-left:auto;margin-right:auto}
.youtube-screen-box{width:100%;aspect-ratio:16/9;background:#020617;border:1px solid #334155;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(0,0,0,.30)}
.youtube-screen-box iframe,.youtube-screen-box img{width:100%;height:100%;border:0;object-fit:cover}
.youtube-empty-screen{text-align:center;padding:24px;color:#e5e7eb}
.youtube-empty-screen p{color:#cbd5e1}
.youtube-save-btn{width:100%;max-width:340px;margin:16px auto 0;display:flex;justify-content:center}
.video-actions{display:flex;justify-content:center;margin-top:16px}
.obs-instructions ol{padding-left:22px;line-height:1.7}

/* update56 live admin */
.admin-live-bottom-button,.youtube-admin-url-box,.obs-instructions{max-width:900px;margin-left:auto;margin-right:auto;text-align:center}
.youtube-preview-card{max-width:1000px;margin-left:auto;margin-right:auto}
.youtube-screen-box{width:100%;aspect-ratio:16/9;background:#020617;border:1px solid #334155;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(0,0,0,.30)}
.youtube-screen-box iframe{width:100%;height:100%;border:0}
.youtube-empty-screen{text-align:center;padding:24px;color:#e5e7eb}
.youtube-save-btn{width:100%;max-width:340px;margin:16px auto 0;display:flex;justify-content:center}

.btn-save-menu {
    position: sticky;
    bottom: 20px;

    display: block;
    width: 50%;

    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;

    padding: 14px 20px;

    background: #334155;
    color: #ffffff;

    border: 2px solid #22c55e;
    border-radius: 10px;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;
    z-index: 1000;

    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.btn-save-menu:hover {
    background: #15803d;
    transform: translateY(-1px);
}
/* Livepeer update */
.admin-live-bottom-button,
.livepeer-admin-box,
.obs-instructions{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.livepeer-preview-card{
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}
.livepeer-screen-box{
  width:100%;
  aspect-ratio:16/9;
  background:#020617;
  border:1px solid #334155;
  border-radius:18px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 40px rgba(0,0,0,.30);
}
.livepeer-screen-box iframe{
  width:100%;
  height:100%;
  border:0;
}
.livepeer-empty-screen{
  text-align:center;
  padding:24px;
  color:#e5e7eb;
}
.livepeer-save-btn{
  position: sticky;
  bottom: 20px;

  display: block;
    width: 50%;

  margin-top: 25px;
  margin-left: auto;
  margin-right: auto;

   padding: 14px 20px;

  background: #334155;
    color: #ffffff;

    border: 2px solid #5a7295;
    border-radius: 10px;

  width:100%;
  max-width:300px;
  font-size: 16px;
  font-weight: 700;
    display:flex;
  justify-content:center;

  cursor: pointer;
    z-index: 1000;

    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
}
.obs-instructions ol{
  text-align:left;
  line-height:1.7;
}
.custom-radio-player{
    text-align:center;
    padding:20px;
}

.live-badge{
    display:inline-block;
    background:red;
    color:white;
    padding:8px 18px;
    border-radius:20px;
    font-weight:bold;
    margin-bottom:20px;
}

.circle-player{
width:300px;
height:300px;
margin:20px auto;
border-radius:50%;
border:6px solid gold;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

```
box-shadow:
    0 0 15px gold,
    0 0 30px gold,
    0 0 60px rgba(255,215,0,.6);

animation: pulseGlow 2s infinite;
```

}

@keyframes pulseGlow{
0%{
box-shadow:
0 0 15px gold,
0 0 30px gold;
}

```
50%{
    box-shadow:
        0 0 30px gold,
        0 0 60px gold,
        0 0 90px rgba(255,215,0,.7);
}

100%{
    box-shadow:
        0 0 15px gold,
        0 0 30px gold;
}
```

}

.circle-logo{
width:170px;
margin-bottom:5px;
}

.circle-play-btn{
margin-top:-10px;
width:90px;
height:90px;
border-radius:50%;
border:none;
font-size:36px;
cursor:pointer;

```
background:linear-gradient(135deg,#ffd700,#ffb300);
color:#111827;
font-weight:bold;

box-shadow:
    0 0 15px rgba(255,215,0,.8),
    0 0 30px rgba(255,215,0,.5);

transition:.3s;
```

}

.circle-play-btn:hover{
transform:scale(1.08);
}


.volume-control{
    margin-top:20px;
}

.volume-control input{
    width:250px;
}

.simple-visualizer{
width:100%;
max-width:320px;
margin:25px auto;
display:flex;
justify-content:center;
align-items:flex-end;
gap:6px;
height:90px;
}

.simple-visualizer{
    width:100%;
    max-width:500px;
    margin:25px auto;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:14px;
    height:140px;
}

.simple-visualizer span{
    width:16px;
    height:95px;
    border-radius:999px;
    box-shadow: 0 0 12px #ffd700;
    opacity: .95;
    background:repeating-linear-gradient(
        to top,
        #ffd700 0px,
        #ffd700 9px,
        transparent 9px,
        transparent 18px
    );
    filter:drop-shadow(0 0 8px #ffd700);
    animation:moveBars 1s infinite ease-in-out;

    -webkit-mask-image:linear-gradient(to top, black 65%, transparent 100%);
    mask-image:linear-gradient(to top, black 65%, transparent 100%);
}

.simple-visualizer span:nth-child(1){animation-delay:.05s; animation-duration:.9s;}
.simple-visualizer span:nth-child(2){animation-delay:.25s; animation-duration:1.3s;}
.simple-visualizer span:nth-child(3){animation-delay:.12s; animation-duration:.75s;}
.simple-visualizer span:nth-child(4){animation-delay:.45s; animation-duration:1.1s;}
.simple-visualizer span:nth-child(5){animation-delay:.18s; animation-duration:.85s;}
.simple-visualizer span:nth-child(6){animation-delay:.35s; animation-duration:1.4s;}
.simple-visualizer span:nth-child(7){animation-delay:.08s; animation-duration:.95s;}
.simple-visualizer span:nth-child(8){animation-delay:.55s; animation-duration:1.2s;}
.simple-visualizer span:nth-child(9){animation-delay:.2s; animation-duration:.8s;}
.simple-visualizer span:nth-child(10){animation-delay:.4s; animation-duration:1.35s;}

@keyframes moveBars{
    0%{height:30px;}
    25%{height:95px;}
    50%{height:55px;}
    75%{height:125px;}
    100%{height:35px;}
}

.radio-layout{
display:grid;
grid-template-columns: 1fr 380px;
gap:30px;
align-items:start;
max-width:1200px;
margin:0 auto;
}

.custom-radio-player{
width:100%;
}

.radio-chat-side{
width:100%;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
border-radius:15px;
padding:20px;
min-height:500px;
}

.radio-layout{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
}

.custom-radio-player{
    width:65%;
}

.radio-chat-side{
    width:35%;
    background:rgba(255,255,255,.05);
    border-radius:15px;
    padding:20px;
    min-height:500px;
}

@media(max-width:900px){
    .radio-layout{
        flex-direction:column;
    }

    .custom-radio-player,
    .radio-chat-side{
        width:100%;
    }
}
.music-chat-messages{
    height:290px;
    overflow-y:auto;
    background:rgba(0,0,0,.25);
    border-radius:10px;
    padding:10px;
    margin-bottom:15px;
}

.music-chat-input{
    width:100%;
    margin-bottom:10px;
    padding:10px;
    border-radius:8px;
    border:none;
}

.music-chat-button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:8px;
    background:#ffd700;
    font-weight:bold;
    cursor:pointer;
}
.music-chat-messages p{
    background: rgba(255,255,255,.05);
    border-left:4px solid #ffd700;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    line-height: 1.4;
    word-wrap: break-word;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.music-chat-messages strong{
    color: #60A5FA;
    display: block;
    margin-bottom: 4px;
}

.music-chat-messages small{
    display:block;
    color:#9ca3af;
    font-size:12px;
    margin-bottom:6px;
}
.music-chat-card{
    max-width:1000px;
    margin:0 auto 20px;
}

.music-chat-note{
    text-align:center;
    margin-top:15px;
    color:#9ca3af;
}
/* ===== Radio + Live Chat Only ===== */

.live-chat-messages{
    height:380px;
}

.live-chat-button{
    width:100%;
    background:#60A5FA;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:16px;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
}

.live-chat-button:hover{
    background:#3B82F6;
}

/* ========================================
   HAMBURGER DROPDOWN MENU
   ======================================== */

.menu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1f2937;
  color: #ffffff;
  border: 1px solid #374151;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.menu-toggle:hover {
  background: #334155;
}

.nav {
  display: none;
  position: absolute;
  top: 67px;
  right: 16px;
  left: auto;
  width: 260px;
  max-height: calc(100vh - 85px);
  overflow-y: auto;
  background: #111827;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 4px;
}

.nav-open .nav {
  display: flex;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e5e7eb;
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 8px;
}

.nav a:hover {
  background: #1f2937;
  color: #ffffff;
}

/* Default icon for custom menu links */

.nav a::before {
  content: "🔹";
  display: inline-block;
  width: 22px;
  text-align: center;
}

/* Icons for each menu page */

.nav a[href="/"]::before {
  content: "🏠";
}

.nav a[href="/radio"]::before {
  content: "📻";
}

.nav a[href="/musica-24-7"]::before {
  content: "🎵";
}

.nav a[href="/bible"]::before {
  content: "📖";
}

.nav a[href="/petitiones"]::before {
  content: "🙏";
}

.nav a[href="/chat"]::before {
  content: "💬";
}

.nav a[href="/donations"]::before {
  content: "💝";
}

.nav a[href="/facebook"]::before {
  content: "📘";
}

.nav a[href="/videos"]::before {
  content: "🎬";
}

.nav a[href="/contact"]::before {
  content: "✉️";
}

.nav a[href="/requests"]::before {
  content: "📨";
}

.nav .fixed-language-link::before {
  content: "🌐";
}

@media (max-width: 760px) {
  .menu-toggle span {
    display: none;
  }

  .nav {
    top: 61px;
    left: 12px;
    right: 12px;
    width: auto;
  }

  .nav-open .nav {
    display: flex;
  }
}