:root{--primary: #4a148c;--primary-light: #7c43bd;--primary-gradient: linear-gradient(135deg, #4a148c, #7c43bd);--surface: #ffffff;--surface-secondary: #f8f9fa;--surface-hover: #f0f0f5;--border: #e8e8ed;--text-primary: #1a1a2e;--text-secondary: #4a4a5a;--text-tertiary: #8a8a9a;--text-quaternary: #b0b0bc;--positive: #2e7d32;--warning: #f9a825;--danger: #c62828;--radius-sm: 8px;--radius-md: 10px;--radius-lg: 12px;--radius-xl: 16px;--shadow-sm: 0 1px 3px rgba(0,0,0,.04);--shadow-md: 0 2px 8px rgba(0,0,0,.08);--shadow-lg: 0 4px 16px rgba(0,0,0,.12)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f8;color:var(--text-primary);line-height:1.5}.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.login-card{max-width:420px;width:100%}.login-logo{text-align:center;margin-bottom:40px}.login-logo-icon{width:80px;height:80px;margin:0 auto 16px;background:var(--primary-gradient);border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:36px}.login-logo-icon img{width:100%;height:100%;object-fit:contain;border-radius:10px}.login-logo h1{font-size:28px;font-weight:500;margin:0 0 8px;letter-spacing:.5px}.login-logo p{font-size:15px;color:var(--text-tertiary);margin:0}.login-form{background:var(--surface);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--border);box-shadow:var(--shadow-sm)}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:14px;font-weight:500;color:var(--text-secondary);margin-bottom:6px}.form-group input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:15px;background:var(--surface);color:var(--text-primary);transition:border-color .2s}.form-group input:focus{outline:none;border-color:var(--primary-light)}.btn-primary{width:100%;padding:12px;background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-size:16px;font-weight:500;cursor:pointer;transition:opacity .2s}.btn-primary:hover{opacity:.9}.btn-primary:active{transform:scale(.98)}.demo-switcher{margin-top:24px;text-align:center}.demo-switcher p{font-size:13px;color:var(--text-quaternary);margin-bottom:12px}.demo-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.demo-btn{padding:6px 14px;border:1px solid var(--border);border-radius:20px;font-size:12px;background:transparent;color:var(--text-tertiary);cursor:pointer;transition:all .2s}.demo-btn.active{border-color:var(--primary-light);background:#7c43bd1a;color:var(--primary-light)}.demo-btn:hover:not(.active){border-color:var(--text-tertiary)}.register-link{margin-top:20px;text-align:center;font-size:13px;color:var(--text-tertiary)}.register-link a{color:var(--primary-light);text-decoration:none}.dashboard{display:none;min-height:100vh}.dashboard.active{display:block}.header{border-bottom:1px solid var(--border);padding:0 24px;background:var(--surface);position:sticky;top:0;z-index:100}.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px}.header-brand{display:flex;align-items:center;gap:12px}.header-brand-icon{width:48px;height:48px;background:var(--primary-gradient);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}.header-brand-icon img{width:100%;height:100%;object-fit:contain;border-radius:10px}.header-brand span{font-size:18px;font-weight:500}.role-badge{padding:3px 10px;border-radius:12px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;background:#7c43bd1f;color:var(--primary-light)}.header-actions{display:flex;align-items:center;gap:16px}.header-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-tertiary);position:relative;padding:4px}.notif-dot{position:absolute;top:2px;right:2px;width:8px;height:8px;background:var(--danger);border-radius:50%;display:none}.notif-dot.active{display:block}.user-info{display:flex;align-items:center;gap:8px;cursor:pointer}.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary-gradient);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:500}.user-name{font-size:14px;color:var(--text-secondary);font-weight:500}.logout-btn{background:none;border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:12px;color:var(--text-tertiary);cursor:pointer;transition:all .2s}.logout-btn:hover{border-color:var(--text-tertiary);color:var(--text-secondary)}.main{max-width:1200px;margin:0 auto;padding:24px}.welcome-banner{background:var(--primary-gradient);border-radius:var(--radius-xl);padding:28px 32px;margin-bottom:24px;color:#fff}.welcome-banner h2{font-size:22px;font-weight:500;margin:0 0 6px}.welcome-banner p{font-size:15px;margin:0;opacity:.85}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-header h3{font-size:18px;font-weight:500;margin:0}.section-header span{font-size:13px;color:var(--text-tertiary)}.section-header button{padding:6px 14px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .2s}.section-header button:hover{border-color:var(--text-tertiary)}.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.room-grid-lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}.room-card{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);transition:box-shadow .2s}.room-card:hover{box-shadow:var(--shadow-md)}.room-card-visual{height:140px;display:flex;align-items:center;justify-content:center;font-size:48px}.room-card-visual-sm{height:120px;display:flex;align-items:center;justify-content:center;font-size:42px}.room-card-body{padding:16px}.room-card-tags{display:flex;align-items:center;gap:8px;margin-bottom:8px}.tag{padding:3px 8px;border-radius:6px;font-size:11px;font-weight:500}.tag-live{background:#2e7d321f;color:var(--positive)}.tag-offline{background:#b0b0bc26;color:var(--text-tertiary)}.tag-easy{background:#2e7d321f;color:var(--positive)}.tag-medium{background:#f9a8251f;color:var(--warning)}.tag-hard{background:#c628281f;color:var(--danger)}.room-card h4{font-size:16px;font-weight:500;margin:0 0 6px}.room-card p{font-size:13px;color:var(--text-tertiary);margin:0 0 12px;line-height:1.5}.room-card-actions{display:flex;gap:8px}.room-card-actions button{flex:1;padding:8px;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;transition:opacity .2s}.room-card-actions button:hover{opacity:.9}.room-card-actions .btn-enter{background:var(--primary-gradient);color:#fff}.room-card-actions .btn-viverse{padding:8px 12px;border:1px solid var(--border);background:transparent;color:var(--text-secondary)}.room-card-actions .btn-viverse:hover{border-color:var(--text-tertiary)}.room-card-actions button:disabled{background:var(--surface-secondary);color:var(--text-quaternary);cursor:not-allowed}.room-card-actions button:disabled:hover{opacity:1}.class-list{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}.class-item{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px}.class-item:last-child{border-bottom:none}.class-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px}.class-info{flex:1}.class-info h4{font-size:15px;font-weight:500;margin:0 0 4px}.class-info p{font-size:13px;color:var(--text-tertiary);margin:0}.class-status{padding:4px 10px;border-radius:8px;font-size:12px;font-weight:500}.status-confirmed{background:#7c43bd1f;color:var(--primary-light)}.status-pending{background:#f9a8251f;color:var(--warning)}.status-registered{background:#2e7d321f;color:var(--positive)}.form-panel{border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;background:var(--surface)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.form-grid-full{grid-column:1 / -1}.form-grid label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:6px}.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:14px;background:var(--surface);color:var(--text-primary);font-family:inherit;transition:border-color .2s}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:var(--primary-light)}.form-grid textarea{min-height:80px;resize:vertical}.form-actions{display:flex;align-items:center;gap:12px}.form-actions span{font-size:13px;color:var(--text-tertiary)}.data-table{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}.data-table-header{display:grid;padding:12px 20px;background:var(--surface-secondary);border-bottom:1px solid var(--border);font-size:12px;font-weight:500;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.data-table-row{display:grid;padding:14px 20px;border-bottom:1px solid var(--border);align-items:center}.data-table-row:last-child{border-bottom:none}.data-table-row:hover{background:var(--surface-hover)}.table-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500}.table-name{font-size:14px;font-weight:500}.table-email{font-size:12px;color:var(--text-tertiary)}.table-tag{padding:3px 8px;border-radius:6px;font-size:11px;font-weight:500;justify-self:start}.table-tag-student{background:#7c43bd1f;color:var(--primary-light)}.table-tag-basic{background:#b0b0bc26;color:var(--text-tertiary)}.table-tag-instructor,.table-tag-active{background:#2e7d321f;color:var(--positive)}.table-tag-new{background:#f9a8251f;color:var(--warning)}.table-actions{display:flex;gap:8px}.table-actions button{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:opacity .2s}.table-actions .btn-approve{background:var(--positive);color:#fff;border:none}.table-actions .btn-reject{border:1px solid var(--border);background:transparent;color:var(--text-secondary)}.table-actions .btn-reject:hover{border-color:var(--text-tertiary)}.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.cert-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;background:var(--surface);text-align:center}.cert-card .cert-icon{font-size:48px;margin-bottom:12px}.cert-card h4{font-size:15px;font-weight:500;margin:0 0 4px}.cert-card p{font-size:12px;color:var(--text-tertiary);margin:0 0 12px}.cert-card button{padding:6px 14px;border:1px solid var(--border);border-radius:8px;font-size:12px;background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .2s}.cert-card button:hover{border-color:var(--text-tertiary)}.cert-card button:disabled{color:var(--text-quaternary);cursor:not-allowed}.cert-card.locked{opacity:.6}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:32px}.stat-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;background:var(--surface)}.stat-card .stat-label{font-size:12px;color:var(--text-tertiary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.stat-card .stat-value{font-size:32px;font-weight:500;font-variant-numeric:tabular-nums}.stat-card .stat-delta{font-size:13px;margin-top:4px}.stat-delta-positive{color:var(--positive)}.stat-delta-neutral{color:var(--text-tertiary)}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:1000;align-items:center;justify-content:center}.modal-overlay.active{display:flex}.modal{width:90%;max-width:900px;height:80%;background:var(--surface);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border)}.modal-header span{font-size:15px;font-weight:500}.modal-header button{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-tertiary)}.modal-body{flex:1;background:#1a1a2e;display:flex;align-items:center;justify-content:center;flex-direction:column}.modal-body .modal-icon{font-size:64px;margin-bottom:16px}.modal-body p{color:var(--text-tertiary);font-size:15px;margin:0 0 8px}.modal-body .modal-url{color:var(--text-quaternary);font-size:13px;margin:0}.modal-body button{margin-top:20px;padding:10px 24px;background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer}.toast{display:none;position:fixed;bottom:24px;right:24px;padding:14px 20px;background:var(--text-primary);color:#fff;border-radius:var(--radius-md);font-size:14px;font-weight:500;z-index:2000;box-shadow:var(--shadow-lg)}.toast.active{display:block;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 768px){.room-grid,.room-grid-lg,.form-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.header-inner{padding:0 12px}.main{padding:16px}.welcome-banner{padding:20px 24px}.welcome-banner h2{font-size:18px}}@media (max-width: 480px){.stats-grid{grid-template-columns:1fr}.header-brand span,.user-name{display:none}}.section{display:none}.section.active{display:block}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:15px;background:var(--surface);color:var(--text-primary);font-family:inherit}.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-light)}.form-error{background:#fdecea;color:var(--danger);border-radius:var(--radius-md);padding:10px 14px;font-size:13px;margin-bottom:16px}.form-success{background:#e8f5e9;color:var(--positive);border-radius:var(--radius-md);padding:10px 14px;font-size:13px;margin-bottom:16px}.role-picker{display:flex;gap:8px;margin-bottom:20px}.role-picker button{flex:1;padding:10px 6px;border:1px solid var(--border);border-radius:var(--radius-md);background:transparent;font-size:13px;color:var(--text-secondary);cursor:pointer}.role-picker button.active{border-color:var(--primary-light);background:#7c43bd14;color:var(--primary-light);font-weight:500}.muted-link{background:none;border:none;color:var(--primary-light);cursor:pointer;font-size:13px;padding:0}.viverse-iframe{width:100%;height:420px;border:none;border-radius:var(--radius-md);background:#1a1a2e}.empty-note{color:var(--text-tertiary);font-size:14px;padding:16px;background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-md)}.section.active{margin-bottom:28px}.stats-grid{margin-top:4px}