@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=ZCOOL+XiaoWei&display=swap');

:root{
  --bg:#03050d;--panel:rgba(9,13,28,.76);--line:rgba(130,151,255,.2);
  --text:#eef0ff;--muted:#8e96b8;--purple:#765cff;--blue:#4c7dff;
  --danger:#ff5475;--glow:0 0 45px rgba(100,76,255,.25);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Noto Sans SC",system-ui;color:var(--text);background:
radial-gradient(circle at 50% -10%,#202451 0,#080b1a 32%,#03050d 70%);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;background:
linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:40px 40px}
.fog{position:fixed;filter:blur(45px);border-radius:50%;pointer-events:none;opacity:.2}.fog-a{width:55vw;height:20vh;left:-10vw;bottom:8vh;background:#566cff}.fog-b{width:45vw;height:18vh;right:-10vw;top:25vh;background:#9b55ff}
.moon{position:fixed;width:180px;height:180px;right:8vw;top:7vh;border-radius:50%;
background:radial-gradient(circle at 35% 30%,#fff 0,#c8d0ff 35%,#6872a8 72%,transparent 73%);opacity:.12;filter:blur(1px);pointer-events:none}
#app{min-height:100vh;display:grid;place-items:center;padding:28px}
.shell{width:min(960px,100%);position:relative}
.panel{background:linear-gradient(145deg,rgba(12,17,38,.84),rgba(4,7,17,.88));border:1px solid var(--line);
box-shadow:var(--glow),inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(18px);border-radius:26px}
.hero{text-align:center;padding:46px 28px 36px}
.ghost{font-size:72px;filter:drop-shadow(0 0 25px rgba(132,105,255,.8));animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-9px)}}
h1{font-family:"ZCOOL XiaoWei","Noto Sans SC",serif;font-size:48px;letter-spacing:8px;margin:12px 0 8px;text-shadow:0 0 25px rgba(123,97,255,.55)}
.subtitle{color:#a8aed0;letter-spacing:2px}.tagline{font-size:13px;color:#6f789b;margin-top:12px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:30px 0 18px}
.card{padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(4,8,20,.58);cursor:pointer;transition:.25s}
.card:hover,.card.active{border-color:#6c63ff;box-shadow:0 0 28px rgba(88,77,255,.16);transform:translateY(-2px)}
.card b{display:block;margin:8px 0}.card span{font-size:12px;color:var(--muted)}
.icon{font-size:25px}.btn{width:100%;border:0;border-radius:15px;padding:15px 18px;color:white;font-size:15px;font-weight:600;cursor:pointer;
background:linear-gradient(110deg,#536eff,#754cff);box-shadow:0 10px 30px rgba(81,70,255,.28);transition:.2s}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}.btn.secondary{background:rgba(15,21,43,.8);border:1px solid var(--line);box-shadow:none}
.row{display:flex;gap:12px}.row>*{flex:1}.field{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);background:#050916;border-radius:14px}
input,select{width:100%;background:none;border:0;outline:0;color:#eef0ff;font:inherit}select option{background:#090d1c}
.label{font-size:12px;color:#7e87aa;margin:20px 0 8px}.room{margin-top:18px;padding:18px;border-radius:16px;border:1px dashed #4b56a4;background:rgba(24,27,61,.35)}
.room code{font-size:26px;letter-spacing:5px;color:#b9c3ff}.small{font-size:12px;color:var(--muted);line-height:1.7}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.back{color:#9fa8c9;cursor:pointer}
.call{min-height:620px;padding:22px;display:flex;flex-direction:column}.call-main{flex:1;display:grid;place-items:center;text-align:center}
.avatar{width:142px;height:142px;border-radius:50%;display:grid;place-items:center;font-size:68px;border:1px solid #6570c7;
box-shadow:0 0 0 15px rgba(99,87,255,.06),0 0 70px rgba(105,89,255,.3);animation:pulse 2.5s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 28px rgba(99,87,255,0),0 0 90px rgba(105,89,255,.42)}}
.wave{margin:28px auto;height:45px;display:flex;gap:4px;align-items:center;justify-content:center}.wave i{width:3px;height:12px;background:#7770ff;border-radius:5px;animation:wave .9s ease-in-out infinite alternate}.wave i:nth-child(2n){animation-delay:.2s}.wave i:nth-child(3n){animation-delay:.4s}
@keyframes wave{to{height:42px}}
.controls{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.control{width:60px;height:60px;border-radius:50%;border:1px solid var(--line);background:#0b1022;color:white;font-size:21px;cursor:pointer}.control span{display:block;font-size:10px;color:#aab0ca;margin-top:6px}.control.hang{background:var(--danger);border:0}
.members{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.member{padding:18px;text-align:center;border:1px solid var(--line);border-radius:18px;background:rgba(4,8,20,.55)}.member .avatar{width:75px;height:75px;font-size:35px;margin:auto;box-shadow:none}.online{font-size:11px;color:#6cf1a7;margin-top:8px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;background:#10162d;border:1px solid var(--line);padding:12px 18px;border-radius:12px;transition:.25s;z-index:9}.toast.show{opacity:1;transform:translateX(-50%)}
@media(max-width:650px){#app{padding:14px}.hero{padding:30px 18px}h1{font-size:38px;letter-spacing:5px}.grid{grid-template-columns:1fr}.members{grid-template-columns:repeat(2,1fr)}.moon{width:120px;height:120px}.row{flex-direction:column}}