:root{--c-primary: #00afca;--c-primary-hover: #0098b0;--c-primary-active: #3cc4dc;--c-primary-soft: #e6f7fa;--c-accent: #fec50c;--c-accent-hover: #e8b400;--c-shell-bg: #f4f8fa;--c-card: #ffffff;--c-ink: #0e2a33;--c-muted: #5b7178;--c-border: #e2ebee;--c-sider: #0e3a45;--c-room-bg: #08222b;--c-room-surface: #103743;--c-danger: #ff4d4f;--c-leave: #c0392b;--c-leave-hover: #a93226;--radius: 14px;--radius-lg: 18px;--radius-sm: 10px;--radius-pill: 9999px;--shadow-base: 0 4px 20px rgba(14, 42, 51, .06);--shadow-hover: 0 10px 30px rgba(0, 175, 202, .2);--shadow-card: 0 2px 12px rgba(14, 42, 51, .08);--transition: .18s ease}.room-screen{--lk-bg: var(--c-room-bg);--lk-bg2: var(--c-room-surface);--lk-fg: #ffffff;--lk-fg2: rgba(255, 255, 255, .7);--lk-border-color: rgba(255, 255, 255, .1);--lk-accent-fg: var(--c-primary);--lk-speaking-indicator-color: var(--c-accent);--lk-control-bar-bg: rgba(8, 34, 43, .92);position:fixed;top:0;right:0;bottom:0;left:0;background:var(--c-room-bg);overflow:hidden;color:#fff;font-family:inherit;z-index:1000}.room-screen .lk-room-container{height:100%;background:var(--c-room-bg)}.room-inner{position:relative;width:100%;height:100%}.room-grid{position:absolute;top:0;right:0;bottom:0;left:0;background:transparent!important}.room-screen .lk-grid-layout{height:100%!important;background:transparent!important;padding:10px;gap:10px}.room-screen .lk-participant-tile{border-radius:16px;background:var(--c-room-surface);overflow:hidden}.room-screen .lk-participant-tile[data-lk-speaking=true]{outline:3px solid var(--c-accent);outline-offset:-3px}.room-screen .lk-participant-speaking-indicator{display:none}.room-tile-wrapper{position:relative;border-radius:16px;overflow:hidden;width:100%;height:100%}.room-initials-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:3;background:var(--c-room-surface)}.room-initials-circle{width:72px;height:72px;border-radius:50%;background:var(--c-primary);color:#fff;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:-1px;flex-shrink:0}.room-top-bar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(to bottom,rgba(8,34,43,.9) 0%,transparent 100%);gap:12px;pointer-events:none}.room-top-bar>*{pointer-events:auto}.room-top-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.room-meeting-title{font-size:15px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-participant-count{font-size:13px;color:#ffffffa6;white-space:nowrap;display:flex;align-items:center;gap:4px;flex-shrink:0}.room-top-right{display:flex;align-items:center;gap:12px;flex-shrink:0}.room-quality-indicator{font-size:13px;display:flex;align-items:center;gap:4px;white-space:nowrap}.room-btn-ghost{background:#00afca1f;border:1px solid rgba(0,175,202,.3);border-radius:10px;color:#fff;padding:6px 14px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .18s,border-color .18s;white-space:nowrap}.room-btn-ghost:hover{background:#00afca3d;border-color:#00afca80}.room-controls{position:absolute;bottom:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:14px 16px 24px;gap:16px;background:linear-gradient(to top,rgba(8,34,43,.94) 0%,transparent 100%)}.room-btn{width:56px;height:56px;border-radius:50%;border:none;background:#ffffff24;color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,transform .12s,box-shadow .18s;flex-shrink:0}.room-btn:hover{background:#00afca47;transform:scale(1.06);box-shadow:0 4px 16px #00afca4d}.room-btn:active{transform:scale(.95)}.room-btn--muted{background:#ff4d4f38;color:var(--c-danger)}.room-btn--muted:hover{background:#ff4d4f5c}.room-btn--active{background:#00afca47;color:var(--c-primary)}.room-btn--active:hover{background:#00afca6b;box-shadow:0 4px 16px #00afca59}.room-btn--leave{background:var(--c-leave);color:#fff}.room-btn--leave:hover{background:var(--c-leave-hover);transform:scale(1.08);box-shadow:0 4px 20px #c0392b80}@media(max-width:640px){.room-top-bar{padding:8px 12px}.room-meeting-title{font-size:14px}.room-participant-count,.room-quality-indicator{display:none}.room-controls{gap:12px;padding:10px 12px 18px}.room-btn{width:56px;height:56px;font-size:24px}.room-initials-circle{width:56px;height:56px;font-size:22px}}
