:root{
  --bg:#08070d;
  --panel:rgba(19,14,24,.70);
  --panel-strong:rgba(19,13,24,.86);
  --line:rgba(255,255,255,.11);
  --muted:#b7aabd;
  --text:#fff8ff;
  --pink:#ff4cb3;
  --pink2:#ff7acb;
  --purple:#7d42ff;
  --cyan:#5de5ff;
  --green:#61e7a8;
  --danger:#ff667a;
  --shadow:0 24px 90px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:#07070b;color:var(--text)}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}

/* LOGIN */
.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,65,175,.18),transparent 30%),
    radial-gradient(circle at 85% 15%,rgba(96,58,255,.20),transparent 32%),
    linear-gradient(180deg,#09070d,#050507 70%);
}
.login-shell{width:min(780px,100%)}
.login-card{
  border:1px solid rgba(255,255,255,.11);
  border-radius:30px;
  background:linear-gradient(180deg,rgba(27,17,31,.93),rgba(10,8,14,.96));
  box-shadow:var(--shadow);
  padding:clamp(26px,5vw,56px);
}
.brand-mark,.brand-mini{
  display:grid;place-items:center;
  font-weight:1000;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  box-shadow:0 0 34px rgba(255,76,179,.25);
}
.brand-mark{width:70px;height:70px;border-radius:22px;font-size:36px}
.brand-mini{width:42px;height:42px;border-radius:13px;font-size:22px}
.eyebrow{margin:20px 0 7px;color:var(--pink2);font-size:11px;font-weight:900;letter-spacing:2px}
.login-card h1{font-size:clamp(34px,6vw,62px);line-height:.98;margin:0;letter-spacing:-2px}
.login-lead{color:#cbbfd0;line-height:1.6;max-width:670px}
.guest-form{margin-top:28px}
.guest-form label,.modal-card label{display:block;color:#bcaec3;font-size:11px;font-weight:800;margin-bottom:7px}
.guest-row{display:grid;grid-template-columns:1fr auto;gap:8px}
input,textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.055);
  color:white;
  border-radius:14px;
  outline:none;
  padding:13px 14px;
}
input:focus,textarea:focus{border-color:rgba(255,80,185,.7);box-shadow:0 0 0 3px rgba(255,76,179,.09)}
.guest-row button,.primary-wide,.dating-form button{
  border:0;border-radius:14px;padding:0 18px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#ff3ca8,#8b42ff);
}
.login-or{display:flex;align-items:center;gap:10px;margin:20px 0;color:#8e8293;font-size:11px}
.login-or:before,.login-or:after{content:"";height:1px;background:rgba(255,255,255,.08);flex:1}
.facebook-login{
  min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;
  background:#1877f2;font-weight:900;
}
.facebook-login.disabled{opacity:.4;pointer-events:none}
.login-hint,.login-state{margin-top:9px;color:#a89cab;font-size:11px}
.login-state{color:#ff99a9}
.login-features{display:flex;flex-wrap:wrap;gap:7px;margin-top:25px}
.login-features span{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.04);color:#beb3c2;font-size:10px;border:1px solid rgba(255,255,255,.07)}

/* CHAT BACKGROUND */
.chat-page{
  min-height:100vh;
  overflow:hidden;
  background:#050509;
}
.yt-stage{position:fixed;inset:0;overflow:hidden;background:#050509;z-index:0}
#youtubePlayer,.yt-stage iframe{
  position:absolute!important;
  width:120vw!important;height:67.5vw!important;
  min-width:177.78vh!important;min-height:100vh!important;
  left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
  border:0!important;
}
.yt-wash{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,4,8,.95) 0%,rgba(7,4,10,.45) 19%,rgba(7,4,10,.19) 50%,rgba(7,4,10,.45) 81%,rgba(4,4,8,.95) 100%),
    linear-gradient(180deg,rgba(5,5,9,.82),rgba(11,5,14,.24) 30%,rgba(11,5,14,.30) 72%,rgba(5,5,9,.86));
  z-index:2;
}
.site-bg-art{position:fixed;top:0;bottom:0;width:11vw;min-width:120px;z-index:1;opacity:.45;filter:grayscale(1);pointer-events:none}
.left-art{left:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 70%),radial-gradient(ellipse at 60% 20%,rgba(255,255,255,.22),transparent 45%)}
.right-art{right:0;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 70%),radial-gradient(ellipse at 30% 18%,rgba(255,255,255,.20),transparent 46%)}

/* CHAT LAYOUT */
.chat-shell{
  position:relative;z-index:5;
  width:min(1320px,calc(100vw - 42px));
  height:calc(100vh - 34px);
  margin:17px auto;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
}
.chat-top{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;
  min-height:72px;padding:10px 14px;
  background:rgba(8,7,12,.80);
  border:1px solid rgba(255,255,255,.10);
  border-bottom:3px solid var(--pink);
  border-radius:20px 20px 0 0;
  backdrop-filter:blur(14px);
}
.chat-brand{display:flex;align-items:center;gap:9px}
.chat-brand>div:last-child{display:grid}
.chat-brand b{font-size:23px;letter-spacing:2px}
.chat-brand small{font-size:9px;color:#a99eae}
.top-actions{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}
.top-actions button,.player-actions button,.now-strip button,.chat-panel-head button,.profile-foot button,.dating-head button{
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);color:white;
  border-radius:11px;padding:10px 12px;font-weight:900;font-size:10px;
}
.top-actions button:hover,.player-actions button:hover{background:rgba(255,75,180,.16);border-color:rgba(255,75,180,.35)}
.player-actions{display:flex;gap:5px}
.player-actions .play-pause{min-width:92px;background:linear-gradient(135deg,rgba(255,55,166,.9),rgba(115,58,220,.9))}
.now-strip{
  min-height:58px;
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  padding:8px 16px;
  background:linear-gradient(90deg,rgba(86,17,59,.78),rgba(29,13,42,.72));
  border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
.now-strip>div{display:grid;min-width:0}
.now-strip small{font-size:8px;letter-spacing:1.5px;color:#ffb4dc;font-weight:900}
.now-strip strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-strip span{font-size:9px;color:#bfaec0}
#soundBtn{color:#ffd8eb}

.chat-grid{
  min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 270px;
  border-radius:0 0 20px 20px;overflow:hidden;
}
.glass{
  background:rgba(20,10,23,.53);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px) saturate(1.05);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);
}
.chat-panel{min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-right:0}
.chat-panel-head{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08)
}
.chat-panel-head>div{display:grid}
.chat-panel-head strong{font-size:12px}
.chat-panel-head small{font-size:9px;color:#a698a8}
.chat-panel-head button{padding:7px 9px;color:#ad9eaf}
.messages{overflow:auto;padding:16px 16px 22px;scroll-behavior:smooth}
.message{
  display:grid;grid-template-columns:40px minmax(0,1fr);gap:9px;
  margin:0 0 11px;
}
.message img{width:40px;height:40px;object-fit:cover;border-radius:12px;background:#221728;border:1px solid rgba(255,255,255,.1)}
.message-body{
  width:max-content;max-width:min(80%,760px);
  padding:9px 12px;border-radius:5px 14px 14px 14px;
  background:rgba(15,10,20,.62);border:1px solid rgba(255,255,255,.07);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.message-meta{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.message-meta b{font-size:11px;color:#ff92d0}
.message-meta time{font-size:8px;color:#8f8290}
.message-text{font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.message-form{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;padding:10px;
  border-top:1px solid rgba(255,255,255,.08);background:rgba(7,6,10,.38)
}
.my-avatar{width:38px;height:38px;border-radius:11px;object-fit:cover}
.message-form input{height:40px}
.message-form button{border:0;border-radius:11px;padding:0 16px;background:linear-gradient(135deg,#ef3b9d,#863bdf);color:#fff;font-weight:900}

.online-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.online-head{display:flex;align-items:center;justify-content:space-between;padding:13px;border-bottom:1px solid rgba(255,255,255,.08)}
.online-head strong{font-size:12px}
.online-head span{min-width:28px;height:28px;display:grid;place-items:center;border-radius:10px;background:rgba(255,76,179,.14);color:#ff9ed4;font-weight:900}
.online-users{overflow:auto;padding:9px}
.online-user{display:flex;align-items:center;gap:9px;padding:8px;border-radius:11px}
.online-user:hover{background:rgba(255,255,255,.04)}
.online-user img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.11)}
.online-user>div{display:grid;min-width:0}
.online-user b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.online-user small{font-size:8px;color:#74e2a4}
.profile-foot{padding:10px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;gap:8px}
.profile-foot div{font-weight:900;font-size:11px;overflow:hidden;text-overflow:ellipsis}
.profile-foot button{font-size:8px;padding:7px}

/* MODALS */
.modal{position:fixed;inset:0;z-index:100;background:rgba(2,2,6,.72);display:grid;place-items:center;padding:20px;backdrop-filter:blur(8px)}
.modal.hidden{display:none}
.modal-card{
  position:relative;width:min(520px,96vw);max-height:88vh;overflow:auto;
  border:1px solid rgba(255,255,255,.11);border-radius:24px;
  background:linear-gradient(180deg,rgba(28,17,31,.97),rgba(10,8,14,.98));box-shadow:var(--shadow);padding:24px;
}
.modal-card-wide{width:min(760px,96vw)}
.modal-card-xl{width:min(1040px,96vw)}
.modal-card h2{margin:0 0 18px}
.modal-close{position:absolute;right:14px;top:13px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#fff;font-size:19px}
.modal-card form{display:grid;gap:9px}
.primary-wide{min-height:44px;margin-top:4px}
.form-state{min-height:18px;color:#ff9bad;font-size:10px}
.playlist-rows{display:grid;gap:7px}
.playlist-row{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:9px;border-radius:13px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03)
}
.playlist-row.active{border-color:rgba(255,76,179,.45);background:rgba(255,76,179,.08)}
.playlist-num{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.05);font-weight:900}
.playlist-info{display:grid;min-width:0}
.playlist-info b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.playlist-info small{font-size:9px;color:#9f92a3}
.playlist-row button{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#ff93a5;border-radius:9px;padding:7px}

.dating-head{display:flex;align-items:center;justify-content:space-between;gap:15px}
.dating-head h2{margin:0}
.dating-head button{background:linear-gradient(135deg,#ed3d9b,#7540d2)}
.dating-form-wrap{margin:17px 0;padding:13px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.025)}
.dating-form-wrap.hidden{display:none}
.dating-form{grid-template-columns:100px 1fr}
.dating-form #datingPhoto,.dating-form textarea,.dating-form button,.dating-form .form-state{grid-column:1/-1}
.dating-form button{min-height:40px}
.dating-cards{margin-top:17px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dating-card{overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}
.dating-photo{height:160px;background:linear-gradient(135deg,#3b1739,#141124);display:grid;place-items:center;overflow:hidden}
.dating-photo img{width:100%;height:100%;object-fit:cover}
.dating-photo span{font-size:40px}
.dating-card-body{padding:12px}
.dating-card-body h3{margin:0 0 3px;font-size:14px}
.dating-card-body small{color:#ff91cc}
.dating-card-body p{font-size:11px;color:#c6bac9;line-height:1.5}

.toast{position:fixed;left:50%;bottom:24px;z-index:150;transform:translate(-50%,20px);opacity:0;transition:.2s;background:#151018;border:1px solid rgba(255,255,255,.1);padding:10px 14px;border-radius:999px;font-size:10px}
.toast.show{transform:translate(-50%,0);opacity:1}

@media(max-width:960px){
  .chat-shell{width:calc(100vw - 18px);height:calc(100vh - 18px);margin:9px auto}
  .chat-top{grid-template-columns:1fr auto}
  .top-actions{grid-column:1/-1;grid-row:2}
  .chat-grid{grid-template-columns:minmax(0,1fr) 210px}
  .dating-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .chat-page{overflow:auto}
  .chat-shell{height:auto;min-height:100vh}
  .chat-top{grid-template-columns:1fr}
  .player-actions{justify-content:center}
  .top-actions{grid-column:auto;grid-row:auto}
  .chat-grid{grid-template-columns:1fr;min-height:720px}
  .online-panel{min-height:230px}
  .messages{min-height:420px}
  .guest-row{grid-template-columns:1fr}
  .guest-row button{min-height:46px}
  .dating-cards{grid-template-columns:1fr}
  .site-bg-art{display:none}
}

/* v1.2: animated mouse-following brand, pink transport, interactive playlist, fullscreen */
.brand-mini{--logo-x:0px;--logo-y:0px;transform:translate(var(--logo-x),var(--logo-y));transition:transform .2s ease-out;animation:unetudPulse 3.2s ease-in-out infinite;will-change:transform}
@keyframes unetudPulse{0%,100%{box-shadow:0 0 9px rgba(255,70,165,.3)}50%{box-shadow:0 0 25px rgba(255,70,165,.75)}}
.player-actions #prevBtn,.player-actions #nextBtn,.player-actions #fullscreenBtn{color:#ff77bf!important;border-color:rgba(255,92,185,.6)!important;background:rgba(255,53,151,.15)!important;font-size:22px}
.player-actions #prevBtn:hover,.player-actions #nextBtn:hover,.player-actions #fullscreenBtn:hover{background:rgba(255,53,151,.35)!important}
#fullscreenBtn{min-width:43px}
.playlist-row{width:100%;text-align:left;cursor:pointer;color:inherit;font:inherit}
.playlist-row:hover,.playlist-row:focus-visible{border-color:#ff66ba;background:rgba(255,70,165,.16)}
.playlist-play{margin-left:auto;color:#ff76be;font-size:23px;padding:8px}
#datingPhotoFile{width:100%;max-width:100%;color:#f7d5e6}
@media(prefers-reduced-motion:reduce){.brand-mini{animation:none;transition:none}}

/* Smaller playlist transport controls; playback and sound scripts unchanged. */
.player-actions #prevBtn,
.player-actions #nextBtn{padding:7px 9px!important;font-size:17px!important;min-width:35px!important;min-height:34px!important;border-radius:9px!important}
.player-actions #playPauseBtn{padding:8px 11px!important;font-size:10px!important;min-width:75px!important;min-height:34px!important;border-radius:9px!important}