:root{--purple:#7258f5;--ink:#272342;--muted:#9690a8;--line:#ece8f5;--bg:#f8f7fc}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 system-ui,-apple-system,'Segoe UI',sans-serif}button,input,textarea{font:inherit}button{cursor:pointer;border:0;background:var(--purple);color:white;border-radius:14px;padding:12px 18px;font-weight:650}button:disabled{opacity:.45}button.small{padding:7px 12px;font-size:12px}button.ghost{background:#eeeafa;color:#6653bc}input,textarea{width:100%;background:white;border:1px solid #ded9ec;padding:13px 15px;border-radius:14px;outline:none;color:var(--ink)}input:focus,textarea:focus{border-color:var(--purple)}form{display:grid;gap:12px}h1,h2,h3,p{margin:0}h1{font-size:27px;letter-spacing:-1px}h2{font-size:22px}h3{font-size:16px}small,.muted{color:var(--muted)}.shell{max-width:1100px;margin:auto;display:grid;grid-template-columns:230px 1fr;min-height:100dvh}.sidebar{border-right:1px solid var(--line);padding:36px 24px;background:white;position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:32px}.brand{display:flex;align-items:center;gap:9px;letter-spacing:-1px;font-size:24px;font-weight:800}.brand img{width:40px;border-radius:12px}.nav{display:flex;flex-direction:column;gap:8px}.nav button{background:none;color:#9a93ab;text-align:left;padding:14px 18px}.nav button.active{background:#eee9ff;color:var(--purple)}.sidefoot{margin-top:auto;font-size:12px;color:var(--muted)}.content{padding:32px 34px 90px}.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:25px}.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#c6b7fc,#876bf5);font-weight:800;color:white;flex-shrink:0}.avatar.large{width:78px;height:78px;font-size:26px;border:4px solid white;box-shadow:0 0 0 2px #c7b7ff}.hero{background:linear-gradient(120deg,#7258f5,#9c83fc 65%,#c6afff);border-radius:25px;padding:26px;color:white;position:relative;overflow:hidden;margin-bottom:25px;min-height:185px}.hero h2{font-size:28px;max-width:65%;line-height:1.4}.hero p{color:#eee7ff;margin:8px 0 17px}.hero button{background:white;color:#7258f5}.hero .orb{position:absolute;right:30px;top:28px;font-size:70px;transform:rotate(-14deg);filter:drop-shadow(0 12px 15px #5f48b655)}.kicker{font-size:11px;letter-spacing:2px;color:#dcd2ff;margin-bottom:9px}.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.tabs{display:flex;gap:8px;margin:16px 0}.tabs button{border-radius:30px;background:white;color:#8d859e;font-size:13px}.tabs button.active{background:var(--purple);color:white}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card{padding:18px;background:white;border:1px solid var(--line);border-radius:22px}.roomcard{cursor:pointer}.art{height:115px;border-radius:16px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;background:linear-gradient(125deg,#e9ddff,#c6b7fc)}.roomcard:nth-child(2n) .art{background:linear-gradient(125deg,#d5f6ee,#b9e6e9)}.live{position:absolute;top:10px;left:10px;color:white;background:#7258f5c9;border-radius:20px;padding:3px 8px;font-size:10px}.roomcard p{font-size:12px;color:var(--muted);margin:5px 0 12px}.auth{max-width:430px;margin:9vh auto;padding:30px}.auth .brand{justify-content:center;margin-bottom:22px}.auth h1{text-align:center;margin-bottom:8px}.auth p{text-align:center;margin-bottom:25px;color:var(--muted)}.auth form{padding:25px;background:white;border:1px solid var(--line);border-radius:25px}.auth .switch{margin-top:15px;text-align:center}.panel{background:white;border:1px solid var(--line);padding:22px;border-radius:22px;margin-bottom:16px}.empty{padding:35px 15px;text-align:center;color:var(--muted);font-size:14px}.person{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.person .details{flex:1;min-width:0}.online{font-size:11px;color:#42bda0}.person p{font-size:12px;color:var(--muted)}.roomview{background:linear-gradient(180deg,#eee6ff,#f8f7fc);border-radius:26px;padding:22px}.roomview .seats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 8px;padding:28px 0}.seat{text-align:center;font-size:11px}.seat button{display:grid;place-items:center;background:#fff9;color:#a394c5;width:60px;height:60px;border:2px dashed #c5b6ed;border-radius:50%;margin:0 auto 7px;padding:0;font-size:22px}.seat.occupied button{border:2px solid #af98f7;background:#9072f0;color:white}.chat{height:260px;overflow:auto;padding:12px 4px;display:flex;flex-direction:column;gap:10px}.msg{font-size:13px;max-width:90%}.msg b{font-size:11px;color:#9985bc;display:block;margin-bottom:3px}.bubble{display:inline-block;background:white;border-radius:3px 14px 14px 14px;padding:9px 13px;white-space:pre-wrap;overflow-wrap:anywhere}.msg.self{align-self:flex-end}.msg.self b{text-align:right}.msg.self .bubble{background:#7258f5;color:white;border-radius:14px 3px 14px 14px}.composer{display:flex;gap:8px;margin-top:14px}.composer input{min-width:0}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.hint{font-size:12px;color:#9a8cab;margin-top:12px}.badge{font-size:10px;color:var(--purple);background:#eee8ff;border-radius:8px;padding:3px 7px}.profile{text-align:center}.profile .avatar{margin:0 auto 10px}#toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#29213e;color:white;border-radius:14px;padding:12px 20px;z-index:30;display:none;max-width:90vw;box-shadow:0 8px 30px #0002}dialog{border:0;border-radius:22px;padding:25px;max-width:420px;width:90%;box-shadow:0 20px 90px #37255840}dialog::backdrop{background:#27234255}dialog h2{margin-bottom:18px}label{font-size:12px;color:#8b809f;display:grid;gap:6px}.status{font-size:11px;color:#9986be}.previewbar{background:#fff1c8;color:#886111;padding:10px;text-align:center;font-size:12px}
@media(max-width:700px){.shell{display:block}.sidebar{height:auto;position:fixed;bottom:0;top:auto;width:100%;z-index:10;padding:8px 8px calc(8px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);display:block}.sidebar>.brand,.sidefoot{display:none}.nav{flex-direction:row;justify-content:space-around;gap:2px}.nav button{padding:8px 14px;font-size:12px;text-align:center;display:flex;flex-direction:column;gap:3px}.nav button span{font-size:21px}.content{padding:23px 18px 110px}.top{margin-bottom:22px}.hero{padding:23px;min-height:185px}.hero h2{font-size:25px}.hero .orb{right:18px;font-size:60px;top:40px}.grid{gap:12px}.card{padding:12px;border-radius:19px}.art{height:103px}.roomview{padding:16px}.seat button{width:55px;height:55px}.chat{height:240px}.auth{padding:20px}.top h1{font-size:25px}}