:root{
  --bg:#070914;--panel:#111629;--panel2:#18213b;--line:#2b355a;--txt:#f8f9ff;--muted:#aab3d1;
  --brand:#ff2f92;--brand2:#7c4dff;--brand3:#00d4ff;--ok:#23e26f;--mytext:#fff;
  --rainbow:linear-gradient(90deg,#ff2f92,#ff8c00,#ffe600,#21d86a,#00c8ff,#7c4dff);
}
*{box-sizing:border-box}
html{min-height:100%}
body{margin:0;background:radial-gradient(circle at 12% 0%,rgba(255,47,146,.26),transparent 34%),radial-gradient(circle at 88% 0%,rgba(0,212,255,.22),transparent 34%),linear-gradient(180deg,#0c1027,#060913 70%);color:var(--txt);font-family:Arial,Helvetica,sans-serif}
.shell{max-width:1280px;margin:0 auto;padding:14px}
.topbar{display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(255,255,255,.18);background:linear-gradient(90deg,rgba(17,22,41,.94),rgba(50,18,62,.92));border-radius:18px;padding:12px 14px;box-shadow:0 10px 40px #0008;position:relative;overflow:hidden}
.topbar:before,.login:before,.room:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--rainbow)}
.topbar a,.topbar button{color:#fff;background:#ffffff14;border:1px solid #ffffff22;border-radius:999px;padding:8px 12px;text-decoration:none;margin-left:8px;cursor:pointer}
.badge{font-size:11px;background:var(--ok);color:#001b0a;border-radius:99px;padding:3px 8px;margin-left:10px;font-weight:800;box-shadow:0 0 18px rgba(35,226,111,.45)}
.panel{border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(18,26,50,.96),rgba(10,14,28,.97));border-radius:20px;box-shadow:0 20px 50px #0008;position:relative;overflow:hidden}
.login{max-width:640px;margin:58px auto;padding:30px;background:linear-gradient(180deg,rgba(18,26,50,.96),rgba(10,14,28,.98))}
.login:after{content:"";position:absolute;right:-80px;bottom:-80px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(255,47,146,.16),transparent 68%);pointer-events:none}
.login h1{font-size:44px;line-height:.98;margin:0 0 10px;letter-spacing:-1.4px}
.login p{color:#e7ebff;line-height:1.45;margin:0 0 16px}
.login input,.login select,.login button,.composer input,.composer button{border:1px solid rgba(255,255,255,.16);background:#060915;color:#fff;border-radius:16px;padding:14px;font-size:16px;min-height:50px}
.login input:focus,.login select:focus,.composer input:focus{outline:2px solid rgba(255,47,146,.38);border-color:rgba(255,47,146,.75)}
.login form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.login button{grid-column:1/-1;background:linear-gradient(90deg,var(--brand),var(--brand2));font-weight:800;cursor:pointer;box-shadow:0 10px 28px rgba(124,77,255,.28)}
.login button:hover,.composer button:hover{filter:brightness(1.05)}
.small{color:var(--muted);font-size:13px;margin-top:12px!important}.hidden{display:none!important}
.chat{display:grid;grid-template-columns:310px 1fr;gap:14px;margin-top:14px}.sidebar{padding:14px;max-height:calc(100vh - 100px);overflow:auto}.sidebar h2{font-size:14px;text-transform:uppercase;color:var(--muted);letter-spacing:.08em}.chan,.user{display:block;width:100%;text-align:left;border:1px solid #ffffff16;background:#ffffff0b;color:#fff;border-radius:12px;margin:7px 0;padding:10px;cursor:pointer}.chan small,.user small{display:block;color:var(--muted);margin-top:3px}.room{min-height:calc(100vh - 100px);display:flex;flex-direction:column}.roomHead{display:flex;gap:8px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:13px 15px}.roomHead button{background:#ffffff12;color:#fff;border:1px solid #ffffff24;border-radius:10px;padding:8px 10px}.messages{flex:1;overflow:auto;padding:15px;min-height:420px}.msg{display:grid;grid-template-columns:58px 170px 1fr;gap:10px;padding:8px;border-bottom:1px solid #ffffff0d}.msg time{color:#7781a7;font-size:12px}.msg .nick{font-weight:bold}.msg .body{color:var(--mytext);line-height:1.4;word-break:break-word}.msg.system,.msg.wall{background:#ffffff08}.msg.action{font-style:italic}.composer{display:grid;grid-template-columns:1fr 140px;gap:10px;padding:13px;border-top:1px solid var(--line)}.smilie{font-size:18px}
/* Embedded homepage mode: compact, no oversized empty dark block */
body.is-embed{background:transparent;overflow:hidden}.is-embed .shell{padding:0}.is-embed .topbar{display:none}.is-embed .login{margin:0;max-width:none;padding:22px 22px 20px;border-radius:18px;min-height:0}.is-embed .login h1{font-size:clamp(34px,5.8vw,50px)}.is-embed .login p{font-size:16px;margin-bottom:14px}.is-embed .small{font-size:13px;line-height:1.35}.is-embed .chat{margin:0;grid-template-columns:250px 1fr}.is-embed .room{min-height:430px}.is-embed .messages{min-height:250px}.is-embed .sidebar{max-height:430px}
@media(max-width:760px){
  .shell{padding:8px}.topbar{align-items:flex-start;gap:10px}.topbar nav{display:flex;flex-wrap:wrap}.topbar a,.topbar button{margin:6px 4px 0 0}
  .login{margin:18px 0;padding:18px;border-radius:18px}.login h1{font-size:34px}.login p{font-size:16px}.login form{grid-template-columns:1fr;gap:9px}.login input,.login select,.login button{font-size:16px;padding:13px;min-height:48px}
  .chat{grid-template-columns:1fr}.sidebar{max-height:none}.room{min-height:70vh}.msg{grid-template-columns:44px 105px 1fr;font-size:13px}.composer{grid-template-columns:1fr}
  body.is-embed{overflow:hidden}.is-embed .login{padding:18px 17px 16px;border-radius:18px}.is-embed .login h1{font-size:38px}.is-embed .login p{font-size:15px;line-height:1.42}.is-embed .small{font-size:12.5px}.is-embed .login input,.is-embed .login select,.is-embed .login button{min-height:46px;padding:12px 13px}.is-embed .chat{grid-template-columns:1fr}.is-embed .room{min-height:430px}.is-embed .messages{min-height:260px}
}


/* V13: anonymous visitor mode + homepage embed usability */
.login form{grid-template-columns:1fr;}
.login select{appearance:auto;}
.is-embed .chat{grid-template-columns:1fr;}
.is-embed .sidebar{display:none;}
.is-embed .room{min-height:360px;}
.is-embed .messages{min-height:210px;}
.is-embed .composer{grid-template-columns:1fr 110px;}
@media(max-width:760px){
  .chat{display:flex;flex-direction:column;}
  .room{order:1;min-height:60vh;}
  .sidebar{order:2;}
  .is-embed .room{min-height:360px;}
  .is-embed .messages{min-height:200px;}
  .is-embed .composer{grid-template-columns:1fr;}
}