:root{--bg: #1d1d1d;--bg-2: #252525;--bg-3: #2d2d2d;--fg: #ffffff;--muted: #a0a0a0;--accent: #0078d4;--accent-2: #00bcf2;--danger: #e81123;--success: #107c10;--border: #3a3a3a;--radius: 0px;--tile: #2b5797}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:Segoe UI,Segoe UI Light,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--fg);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}input{font-family:inherit}@keyframes metroFadeIn{0%{opacity:0}to{opacity:1}}@keyframes metroSlideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes metroSlideRight{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}@keyframes metroScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes metroTileIn{0%{opacity:0;transform:translateY(40px) scale(.95)}60%{opacity:1;transform:translateY(-4px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes metroMsgIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes metroFlip{0%{transform:perspective(400px) rotateY(90deg);opacity:0}to{transform:perspective(400px) rotateY(0);opacity:1}}@keyframes metroPulse{0%,to{box-shadow:0 0 #0078d473}50%{box-shadow:0 0 0 8px #0078d400}}@keyframes spin{to{transform:rotate(360deg)}}.anim-fade{animation:metroFadeIn .4s ease both}.anim-slide-up{animation:metroSlideUp .45s cubic-bezier(.2,.8,.2,1) both}.anim-scale{animation:metroScaleIn .35s ease both}.home{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);animation:metroFadeIn .4s ease}.home-topbar{padding:24px 40px 8px;border-bottom:1px solid var(--border);animation:metroSlideRight .5s cubic-bezier(.2,.8,.2,1) both}.home-topbar h1{font-size:42px;font-weight:200;letter-spacing:-1px}.home-topbar p{color:var(--muted);font-size:14px;margin-top:4px}.home-grid{flex:1;padding:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;align-content:start}.tile{background:var(--tile);color:#fff;padding:20px;min-height:140px;display:flex;flex-direction:column;justify-content:space-between;transition:filter .15s,transform .12s,box-shadow .15s;cursor:pointer;border:none;text-align:left;animation:metroTileIn .6s cubic-bezier(.2,.9,.3,1) both;position:relative;overflow:hidden}.tile:nth-child(1){animation-delay:.05s}.tile:nth-child(2){animation-delay:.15s}.tile:nth-child(3){animation-delay:.25s}.tile:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translate(-100%);transition:transform .5s}.tile:hover{filter:brightness(1.12);transform:translateY(-2px)}.tile:hover:after{transform:translate(100%)}.tile:active{transform:scale(.97)}.tile .tile-icon{font-size:36px;line-height:1;transition:transform .2s}.tile:hover .tile-icon{transform:scale(1.15) rotate(-6deg)}.tile .tile-label{font-size:18px;font-weight:400}.tile .tile-sub{font-size:12px;opacity:.8}.tile.create{background:#2b5797}.tile.join{background:#107c10}.tile.info{background:#5133ab}.home-form{max-width:480px;margin:0 auto;padding:40px;display:flex;flex-direction:column;gap:16px;animation:metroSlideUp .4s cubic-bezier(.2,.8,.2,1) both}.home-form h2{font-size:28px;font-weight:200}.field{display:flex;flex-direction:column;gap:4px}.field span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.field input{background:var(--bg-3);border:1px solid var(--border);color:var(--fg);border-radius:0;padding:10px 12px;font-size:15px;outline:none;transition:border-color .15s,background .15s}.field input:focus{border-color:var(--accent);background:var(--bg)}.btn{padding:10px 18px;border-radius:0;border:none;background:var(--accent);color:#fff;font-size:14px;font-weight:400;transition:filter .12s,transform .08s;position:relative;overflow:hidden}.btn:hover{filter:brightness(1.1)}.btn:active{transform:scale(.97)}.btn.danger{background:var(--danger)}.btn.muted{background:var(--bg-3);color:var(--fg);border:1px solid var(--border)}.btn.small{padding:6px 12px;font-size:13px}.btn:disabled{opacity:.5;cursor:not-allowed}.error{color:var(--danger);font-size:13px;animation:metroFadeIn .2s ease}.home-foot{padding:16px 40px;color:var(--muted);font-size:12px;border-top:1px solid var(--border);animation:metroFadeIn .6s ease both}.room{height:100vh;display:flex;flex-direction:column;background:var(--bg);animation:metroFadeIn .3s ease}.room.loading{align-items:center;justify-content:center;gap:12px;color:var(--muted);animation:metroFadeIn .3s ease}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.room-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:var(--bg-2);border-bottom:2px solid var(--accent);animation:metroSlideRight .4s cubic-bezier(.2,.8,.2,1) both}.room-title h2{font-size:24px;font-weight:200}.room-actions{display:flex;gap:4px}.room-actions .btn{animation:metroScaleIn .4s ease both}.room-actions .btn:nth-child(1){animation-delay:.1s}.room-actions .btn:nth-child(2){animation-delay:.18s}.room-actions .btn:nth-child(3){animation-delay:.26s}.banner{padding:10px 24px;font-size:13px;animation:metroSlideUp .3s ease both}.banner.error{background:var(--danger);color:#fff}.room-body{flex:1;display:flex;min-height:0}.participants{width:280px;background:var(--bg-2);padding:16px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;border-right:1px solid var(--border);animation:metroSlideRight .45s cubic-bezier(.2,.8,.2,1) both}.participants h3{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;padding-bottom:8px;border-bottom:1px solid var(--border)}.participants ul{list-style:none;display:flex;flex-direction:column;gap:2px}.participants li{display:flex;align-items:center;gap:10px;padding:10px;background:var(--bg-3);animation:metroSlideRight .4s cubic-bezier(.2,.8,.2,1) both;transition:background .15s,transform .12s}.participants li:hover{background:#333;transform:translate(2px)}.participants li.self{border-left:3px solid var(--accent);animation:metroPulse 2s ease-in-out infinite}.avatar{width:36px;height:36px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:400;font-size:16px;transition:transform .2s}.participants li:hover .avatar{transform:scale(1.08)}.avatar.voice{background:var(--success);animation:metroPulse 1.6s ease-in-out infinite}.pinfo{flex:1;min-width:0}.pname{font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pstatus{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.voice-controls{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:12px}.voice-controls .btn{animation:metroScaleIn .4s ease both}.voice-controls .btn:nth-child(1){animation-delay:.3s}.voice-controls .btn:nth-child(2){animation-delay:.4s}.chat{flex:1;display:flex;flex-direction:column;min-width:0;animation:metroFadeIn .5s ease both}.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:2px}.empty{color:var(--muted);text-align:center;margin-top:40px;font-size:14px;animation:metroFadeIn .6s ease}.msg{padding:8px 12px;background:var(--bg-3);max-width:78%;align-self:flex-start;animation:metroMsgIn .25s ease both;transition:transform .12s}.msg:hover{transform:translate(2px)}.msg.self{align-self:flex-end;background:var(--accent)}.msg.self:hover{transform:translate(-2px)}.msg-meta{display:flex;gap:8px;font-size:10px;color:var(--muted);margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px}.msg.self .msg-meta{color:#ffffffb3}.msg-name{font-weight:600;color:var(--fg)}.msg-text{font-size:14px;white-space:pre-wrap;word-break:break-word}.chat-input{display:flex;gap:0;border-top:1px solid var(--border);background:var(--bg-2);animation:metroSlideUp .4s ease both}.chat-input input{flex:1;background:var(--bg-3);border:none;color:var(--fg);padding:12px 16px;font-size:14px;outline:none;border-right:1px solid var(--border);transition:background .15s}.chat-input input:focus{background:var(--bg)}.chat-input .btn{border-radius:0}.flip-tile{perspective:600px}.flip-tile-inner{transition:transform .6s;transform-style:preserve-3d}.flip-tile:hover .flip-tile-inner{transform:rotateY(180deg)}@media(max-width:720px){.participants{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:40vh}.room-body{flex-direction:column}.home-grid{grid-template-columns:1fr 1fr}}