:root{--auth-accent:#0400eb;--auth-secondary:#00ecf0;--auth-text:#f5f5f5;--auth-player:#190c15;--auth-border:#ed001d;--auth-m1:#ff1744;--auth-m2:#ffea00;--auth-m3:#00e676;--auth-m4:#00b0ff}
body.auth-bg{color:var(--auth-text)!important;background-image:linear-gradient(rgba(0,0,0,0.26),rgba(0,0,0,0.26)),url("chat-background.php?v=d0f8a05aa6e1")!important;background-size:cover!important;background-position:center!important;background-attachment:fixed!important}
body.auth-bg .auth-card{border-color:var(--auth-border)!important;border-right-color:var(--auth-border)!important}
body.auth-bg .auth-card:before{content:"#MagicMusicChat"!important;color:var(--auth-secondary)!important;border-bottom-color:var(--auth-border)!important;background-position:right 12px center!important;background-size:auto 44px!important;font-weight:900!important}
body.auth-bg .auth-card h1,body.auth-bg .auth-card label{color:var(--auth-text)!important}
body.auth-bg .auth-card h1:before,body.auth-bg .auth-card a,body.auth-bg .legal-links a{color:var(--auth-secondary)!important}
body.auth-bg .auth-card input{color:var(--auth-text)!important;border-color:var(--auth-border)!important}
body.auth-bg .auth-card input:focus{border-color:var(--auth-secondary)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--auth-secondary) 22%,transparent)!important}
body.auth-bg .auth-card button,body.auth-bg .auth-card .button{color:var(--auth-text)!important;border-color:var(--auth-border)!important;background:linear-gradient(135deg,var(--auth-accent),var(--auth-player))!important}
body.auth-bg .brand-dot{background:var(--auth-secondary)!important;box-shadow:0 0 14px var(--auth-secondary)!important}
body.auth-bg .auth-player{border-color:var(--auth-border)!important;background:linear-gradient(90deg,var(--auth-player),var(--auth-accent),var(--auth-player))!important}

/* Luna Radio player op login/gast/registratie scherm */
body.auth-bg .auth-luna-player-wrap{width:min(980px,calc(100vw - 16px));min-height:72px;margin:10px auto 0;padding:0;display:block;overflow:hidden;background:transparent;position:relative;z-index:5;border:0;outline:0;box-shadow:none}
body.auth-bg .auth-luna-player{width:100%;min-height:72px;overflow:hidden;box-shadow:none;background:transparent!important;border:0!important;outline:0!important}
body.auth-bg .auth-luna-player>div{width:100%!important;max-width:100%!important;border:0!important;outline:0!important;box-shadow:none!important}
@media (min-width:900px){body.auth-bg{grid-template-rows:minmax(0,1fr) auto;align-content:center;row-gap:4px}body.auth-bg .auth-card{min-height:min(720px,calc(100vh - 134px))}body.auth-bg .auth-luna-player-wrap{margin-top:2px;margin-bottom:2px}}
@media (max-width:899px){body.auth-bg .auth-luna-player-wrap{width:calc(100% - 8px);min-height:58px;margin:4px auto 6px;padding:0;position:fixed;left:4px;right:4px;bottom:0;z-index:50}body.auth-bg .auth-luna-player{min-height:58px}body.auth-bg .auth-luna-player>div{max-width:100%!important}body.auth-bg .auth-card{padding-bottom:80px}}
body.auth-bg .auth-luna-player-wrap,body.auth-bg .auth-luna-player{border:0!important;outline:0!important;box-shadow:none!important}
body.auth-bg .auth-luna-player svg.lunaradioplayicon,body.auth-bg .auth-luna-player svg.lunaradiopauseicon{background:var(--luna-button-bg,#fff)!important;border-radius:50%!important;padding:7px!important;box-sizing:border-box!important}
body.auth-bg .auth-luna-player svg.lunaradioplayicon path,body.auth-bg .auth-luna-player svg.lunaradiopauseicon path{fill:var(--luna-button-icon,#3b0099)!important}
body.auth-bg .auth-luna-player svg[class*=volume] path{fill:var(--luna-volume,#5b22c9)!important}
body.auth-bg .auth-luna-player [class*=live],body.auth-bg .auth-luna-player [class*=Live]{color:var(--luna-live,#5b22c9)!important;fill:var(--luna-live,#5b22c9)!important}
body.auth-bg .auth-luna-player img{border:0!important;outline:0!important;box-shadow:none!important}

/* Final 1-op-1 auth/player placement override. */
body.auth-bg{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px!important;min-height:100dvh!important;padding:18px!important;overflow-x:hidden!important}
body.auth-bg .auth-card{width:min(420px,calc(100vw - 24px))!important;min-height:0!important;height:auto!important;margin:0!important;padding:92px 34px 28px!important}
body.auth-bg .auth-luna-player-wrap{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;width:min(620px,calc(100vw - 24px))!important;height:64px!important;min-height:64px!important;margin:0 auto!important;overflow:hidden!important;border:0!important;outline:0!important;box-shadow:none!important}
body.auth-bg .auth-luna-player,body.auth-bg .auth-luna-player>div{height:64px!important;min-height:64px!important;width:100%!important;max-width:100%!important;margin:0!important;border:0!important;outline:0!important;box-shadow:none!important;overflow:hidden!important}
@media(max-width:760px){body.auth-bg{justify-content:flex-start!important;padding:8px 6px 10px!important;overflow-y:auto!important}body.auth-bg .auth-card{width:100%!important;padding:84px 18px 22px!important}body.auth-bg .auth-luna-player-wrap{position:static!important;width:100%!important;height:58px!important;min-height:58px!important;margin:0!important}body.auth-bg .auth-luna-player,body.auth-bg .auth-luna-player>div{height:58px!important;min-height:58px!important}}


/* 2026-09-07 definitieve auth-layout: stylinginstellingen overal + geen mobiel schuiven. */
html:has(body.auth-bg){width:100%;height:100%;overflow:hidden!important;background:#020304}
body.auth-bg{
  width:100%!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
  overflow:hidden!important;box-sizing:border-box!important;
  color:var(--auth-text)!important;
}
body.auth-bg .auth-card{
  color:var(--auth-text)!important;
  background:linear-gradient(145deg,rgba(3,5,8,.74),rgba(0,0,0,.58))!important;
  backdrop-filter:blur(3px) saturate(115%)!important;-webkit-backdrop-filter:blur(3px) saturate(115%)!important;
  border:1px solid var(--auth-border)!important;
  box-shadow:0 28px 85px rgba(0,0,0,.78),inset 0 0 50px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.045),0 0 24px color-mix(in srgb,var(--auth-border) 18%,transparent)!important;
}
body.auth-bg .auth-card:before{
  color:var(--auth-secondary)!important;
  background-color:color-mix(in srgb,var(--auth-player) 22%,rgba(0,0,0,.78))!important;
  border-bottom-color:var(--auth-border)!important;
}
body.auth-bg .auth-card h1,body.auth-bg .auth-card h2,body.auth-bg .auth-card h3,
body.auth-bg .auth-card label,body.auth-bg .auth-card strong{color:var(--auth-text)!important}
body.auth-bg .auth-card p,body.auth-bg .auth-card small,body.auth-bg .auth-card .muted{color:color-mix(in srgb,var(--auth-text) 70%,transparent)!important}
body.auth-bg .auth-card a,body.auth-bg .auth-card h1:before,body.auth-bg .legal-links a{color:var(--auth-secondary)!important}
body.auth-bg .auth-card input:not([type=color]):not([type=checkbox]):not([type=radio]),
body.auth-bg .auth-card select,body.auth-bg .auth-card textarea{
  color:var(--auth-text)!important;
  background:color-mix(in srgb,var(--auth-player) 13%,rgba(1,4,8,.84))!important;
  border-color:color-mix(in srgb,var(--auth-border) 70%,#536070 30%)!important;
}
body.auth-bg .auth-card input:focus,body.auth-bg .auth-card select:focus,body.auth-bg .auth-card textarea:focus{
  border-color:var(--auth-secondary)!important;
  outline:none!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--auth-secondary) 22%,transparent),0 0 14px color-mix(in srgb,var(--auth-secondary) 16%,transparent)!important;
}
body.auth-bg .auth-card button,body.auth-bg .auth-card .button,
body.auth-bg .auth-card a.button,body.auth-bg .guest-button{
  color:var(--auth-text)!important;
  border-color:var(--auth-border)!important;
  background:linear-gradient(135deg,var(--auth-accent),var(--auth-player))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 5px 14px color-mix(in srgb,var(--auth-accent) 18%,transparent)!important;
}
body.auth-bg .auth-card button:hover,body.auth-bg .auth-card .button:hover,body.auth-bg .guest-button:hover{
  border-color:var(--auth-secondary)!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--auth-accent) 86%,#fff 14%),color-mix(in srgb,var(--auth-player) 86%,#fff 14%))!important;
}
body.auth-bg .login-divider{color:color-mix(in srgb,var(--auth-text) 72%,transparent)!important}
body.auth-bg .login-divider:before,body.auth-bg .login-divider:after{background:linear-gradient(90deg,transparent,var(--auth-secondary),transparent)!important}
body.auth-bg .error{border-color:var(--auth-accent)!important;color:var(--auth-text)!important;background:color-mix(in srgb,var(--auth-accent) 18%,rgba(0,0,0,.75))!important}
body.auth-bg .success{border-color:var(--auth-secondary)!important;color:var(--auth-text)!important;background:color-mix(in srgb,var(--auth-secondary) 14%,rgba(0,0,0,.75))!important}

/* PC: het inlogframe vult nagenoeg het scherm. De achtergrond blijft door het glazen vlak zichtbaar. */
@media (min-width:761px){
  body.auth-bg{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;padding:10px 14px!important}
  body.auth-bg .auth-card,body.auth-bg .auth-card.auth-card-guest{
    width:calc(100vw - 28px)!important;max-width:none!important;
    height:calc(100dvh - 82px)!important;min-height:0!important;max-height:calc(100dvh - 82px)!important;
    margin:0!important;padding:76px clamp(28px,7vw,110px) 24px!important;border-radius:14px!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;overflow:hidden!important;
  }
  body.auth-bg .auth-card>h1,body.auth-bg .auth-card>p,body.auth-bg .auth-card>.form-grid,
  body.auth-bg .auth-card>.login-divider,body.auth-bg .auth-card>.button,body.auth-bg .auth-card>.error,
  body.auth-bg .auth-card>.success,body.auth-bg .auth-card>.legal-links{
    width:min(650px,100%)!important;margin-left:auto!important;margin-right:auto!important;
  }
  body.auth-bg .auth-chat-player,body.auth-bg .auth-luna-player-wrap,body.auth-bg .modern-radio-wrap{
    flex:0 0 56px!important;height:56px!important;min-height:56px!important;max-height:56px!important;
    width:min(900px,calc(100vw - 28px))!important;margin:0 auto!important;overflow:hidden!important;
  }
}

/* Mobiel: scherm staat vast; geen op/neer bewegen van kaart of achtergrond. */
@media (max-width:760px){
  html:has(body.auth-bg),body.auth-bg{height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;overflow:hidden!important;overscroll-behavior:none!important}
  body.auth-bg{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:3px!important;padding:4px!important;background-attachment:scroll!important;background-position:center center!important}
  body.auth-bg .auth-card,body.auth-bg .auth-card.auth-card-guest{
    flex:1 1 auto!important;width:100%!important;max-width:430px!important;height:auto!important;min-height:0!important;max-height:none!important;
    margin:0 auto!important;padding:68px 16px 13px!important;border-radius:10px!important;overflow:auto!important;overscroll-behavior:contain!important;
    transform:none!important;animation:none!important;transition:none!important;
  }
  body.auth-bg .auth-card:before{height:48px!important;position:absolute!important;top:0!important;left:0!important;right:0!important}
  body.auth-bg .auth-card h1{margin:2px 0 10px!important;font-size:20px!important}
  body.auth-bg .auth-card p{margin:7px 0!important;line-height:1.28!important}
  body.auth-bg .auth-card .form-grid{gap:7px!important}
  body.auth-bg .auth-card input{min-height:39px!important;padding:7px 10px!important}
  body.auth-bg .auth-card button,body.auth-bg .auth-card .button{min-height:39px!important;padding:7px 10px!important}
  body.auth-bg .login-divider{margin:7px 0!important}
  body.auth-bg .auth-chat-player,body.auth-bg .auth-luna-player-wrap,body.auth-bg .modern-radio-wrap{
    position:static!important;flex:0 0 48px!important;width:100%!important;max-width:620px!important;height:48px!important;min-height:48px!important;max-height:48px!important;margin:0 auto!important;overflow:hidden!important;transform:none!important;animation:none!important;transition:none!important;
  }
}


/* 2026-09-07 login-player helderheidsfix: de achtergrond-vignette mag de radio-player niet dempen. */
body.auth-bg > .modern-radio-wrap,
body.auth-bg > .auth-chat-player,
body.auth-bg > .auth-luna-player-wrap{
  position:relative!important;
  z-index:4!important;
  opacity:1!important;
  filter:none!important;
  -webkit-filter:none!important;
  mix-blend-mode:normal!important;
  isolation:isolate!important;
}
body.auth-bg > .modern-radio-wrap .modern-radio-bar{
  opacity:1!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:linear-gradient(90deg,var(--modern-bg,#101010),color-mix(in srgb,var(--modern-bg,#101010) 86%,var(--modern-accent,#e1b72b) 14%),var(--modern-bg,#101010))!important;
  box-shadow:0 9px 24px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.auth-bg > .modern-radio-wrap .modern-radio-play,
body.auth-bg > .modern-radio-wrap .modern-radio-cast,
body.auth-bg > .modern-radio-wrap .modern-radio-info,
body.auth-bg > .modern-radio-wrap .modern-radio-turntable,
body.auth-bg > .modern-radio-wrap .modern-radio-volume{
  opacity:1!important;
  filter:none!important;
  -webkit-filter:none!important;
}

/* 2026-09-07 definitieve mobiele auth-fix: geen mini document-scroll of verticale speling. */
@media(max-width:760px){
  html:has(body.auth-bg){
    width:100%!important;height:100%!important;min-height:100%!important;max-height:100%!important;
    overflow:hidden!important;overscroll-behavior:none!important;
  }
  body.auth-bg{
    position:fixed!important;inset:0!important;
    width:100%!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
    margin:0!important;padding:4px!important;box-sizing:border-box!important;
    overflow:hidden!important;overscroll-behavior:none!important;touch-action:pan-x pinch-zoom!important;
  }
  body.auth-bg .auth-card,body.auth-bg .auth-card.auth-card-guest{
    flex:1 1 auto!important;min-height:0!important;
    margin:0 auto!important;box-sizing:border-box!important;
  }
  body.auth-bg.auth-login-page .auth-card{
    max-height:calc(100dvh - 59px)!important;
    overflow:hidden!important;overscroll-behavior:none!important;
  }
  body.auth-bg:not(.auth-login-page) .auth-card{
    max-height:calc(100dvh - 8px)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
  }
  body.auth-bg .auth-chat-player,body.auth-bg .auth-luna-player-wrap,body.auth-bg .modern-radio-wrap{
    flex:0 0 48px!important;height:48px!important;min-height:48px!important;max-height:48px!important;
    margin:3px auto 0!important;box-sizing:border-box!important;
  }
}
@media(max-width:760px) and (max-height:650px){
  body.auth-bg.auth-login-page .auth-card{padding:56px 14px 8px!important}
  body.auth-bg.auth-login-page .auth-card:before{height:42px!important}
  body.auth-bg.auth-login-page .auth-card h1{font-size:18px!important;margin:0 0 5px!important}
  body.auth-bg.auth-login-page .auth-card p{margin:3px 0!important;font-size:12px!important}
  body.auth-bg.auth-login-page .auth-card .form-grid{gap:4px!important}
  body.auth-bg.auth-login-page .auth-card input,body.auth-bg.auth-login-page .auth-card button,body.auth-bg.auth-login-page .auth-card .button{min-height:34px!important;padding:5px 8px!important}
  body.auth-bg.auth-login-page .login-divider{margin:3px 0!important}
  body.auth-bg.auth-login-page .legal-links{font-size:11px!important}
}