:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--primary-color: #6366F1;--secondary-color: #10B981;--text-primary: #1F2937;--text-secondary: #6B7280;--white: #FFFFFF;--background: #F9FAFB}.onboarding-page{min-height:100vh;display:flex;max-width:100%;flex-direction:column;justify-content:space-between;background-color:var(--white);padding:40px 20px;box-sizing:border-box}.onboarding-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;max-width:600px;width:100%}.logo-section{display:flex;flex-direction:column;align-items:center;margin-bottom:48px}.logo-img{width:120px;height:120px;object-fit:contain;margin-bottom:16px}.app-name{font-size:40px;font-weight:700;color:var(--text-primary);margin:0}.tagline-section{text-align:center;margin-bottom:64px;padding:0 24px;max-width:500px}.tagline{font-size:24px;font-weight:600;color:var(--text-primary);margin:0 0 12px}.subtitle{font-size:16px;color:var(--text-secondary);line-height:1.6;margin:0}.button-container{width:100%;max-width:400px;margin:0 auto}.primary-button{width:100%;padding:16px 24px;background-color:var(--primary-color);color:var(--white);border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;margin-bottom:16px;transition:all .2s}.primary-button:hover{background-color:#5558e3;transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}.primary-button:active{transform:translateY(0)}.outline-button{width:100%;padding:16px 24px;background-color:transparent;color:var(--primary-color);border:2px solid var(--primary-color);border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;margin-bottom:16px;transition:all .2s}.outline-button:hover{background-color:#6366f10d;transform:translateY(-1px);box-shadow:0 4px 12px #6366f133}.outline-button:active{transform:translateY(0)}.footer-text{font-size:14px;color:var(--text-secondary);text-align:center;line-height:1.6;margin:16px 0 0}@media(min-width:768px){.onboarding-page{padding:60px 40px;align-items:center}.onboarding-content{max-width:600px}.logo-img{width:140px;height:140px}.app-name{font-size:48px}.tagline{font-size:28px}.subtitle{font-size:18px}.button-container{max-width:500px}.primary-button,.outline-button{padding:18px 32px;font-size:18px}}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--background);padding:20px}.login-container{display:flex;flex-direction:column;justify-content:space-between;max-width:500px;width:100%;padding:48px 24px 24px}@media(min-width:1024px){.login-page{padding:60px}.login-container{max-width:600px;padding:80px 60px 60px}.header{margin-bottom:60px}.logo-img{width:140px;height:140px;margin-bottom:32px}.title{font-size:40px}.subtitle{font-size:18px}.google-button,.one-time-button{padding:20px 32px;font-size:19px}.one-time-button-text{font-size:19px}.modal-content{max-width:500px;padding:40px}}.header{text-align:center;margin-bottom:48px}.logo-img{width:120px;height:120px;margin:0 auto 24px;display:block;object-fit:contain}.title{font-size:32px;font-weight:700;color:var(--text-primary);margin-bottom:8px}.subtitle{font-size:16px;color:var(--text-secondary);font-weight:500}.error-container{background:#ef444414;padding:16px;border-radius:8px;border-left:3px solid var(--error);margin-bottom:16px}.error-text{font-size:14px;color:var(--error);font-weight:500}.button-section{flex:1;display:flex;flex-direction:column;justify-content:center}.google-button{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--white);border:2px solid var(--border);border-radius:16px;padding:18px 24px;font-size:18px;font-weight:600;color:var(--text-primary);cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #00000014}.google-button:hover:not(:disabled){border-color:var(--primary);box-shadow:0 4px 12px #0000001f}.google-button:active:not(:disabled){transform:scale(.98)}.google-button:disabled{opacity:.5;cursor:not-allowed}.google-icon{width:24px;height:24px}.divider{display:flex;align-items:center;margin:32px 0}.divider-line{flex:1;height:1px;background:var(--border)}.divider-text{padding:0 16px;font-size:14px;color:var(--text-secondary);font-weight:500}.one-time-button{display:flex;flex-direction:column;align-items:center;background:#6366f114;border:2px solid var(--primary);border-radius:16px;padding:18px 24px;cursor:pointer;transition:all .2s}.one-time-button:hover:not(:disabled){background:#6366f11f}.one-time-button:active:not(:disabled){transform:scale(.98)}.one-time-button:disabled{opacity:.5;cursor:not-allowed}.one-time-button-text{font-size:18px;font-weight:600;color:var(--primary);margin-bottom:4px}.one-time-button-subtext{font-size:14px;color:var(--primary);opacity:.8}.back-button{width:100%;padding:14px 24px;margin-top:24px;background:transparent;border:none;border-radius:12px;color:var(--text-secondary);font-size:16px;font-weight:500;cursor:pointer;transition:all .2s}.back-button:hover{background:var(--surface);color:var(--text-primary)}.back-button:active{transform:scale(.98)}.button-container{margin-top:24px;padding-top:24px}.btn-ghost{background:transparent;color:var(--text-secondary);border:none;padding:16px;font-size:16px;font-weight:600;cursor:pointer;transition:color .2s;width:100%}.btn-ghost:hover{color:var(--primary)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;animation:fadeIn .2s}.modal-content{background:var(--white);border-radius:20px;padding:32px;max-width:400px;width:100%;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s}.modal-title{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:4px;text-align:center}.modal-subtitle{font-size:14px;color:var(--text-secondary);margin-bottom:24px;text-align:center}.name-input{width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:12px;font-size:16px;color:var(--text-primary);margin-bottom:16px;background-color:var(--white);transition:border-color .2s}.name-input:focus{outline:none;border-color:var(--primary)}.room-type-container{margin-bottom:24px}.room-type-label{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px;display:block}.room-type-buttons{display:flex;gap:8px}.room-type-button{flex:1;display:flex;flex-direction:column;align-items:center;padding:16px 12px;border:2px solid var(--border);border-radius:12px;background:var(--white);cursor:pointer;transition:all .2s}.room-type-button:hover{border-color:var(--primary-light)}.room-type-button.active{border-color:var(--primary);background:#6366f10d}.room-type-button-text{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.room-type-button.active .room-type-button-text{color:var(--primary)}.room-type-button-desc{font-size:11px;color:var(--text-secondary);text-align:center;line-height:1.3}.room-type-button.active .room-type-button-desc{color:var(--primary);opacity:.8}.modal-button-cancel{flex:1;padding:14px 24px;border-radius:12px;border:2px solid var(--border);background:var(--white);color:var(--text-primary);font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.modal-button-cancel:hover{background:var(--background)}.modal-button-create{flex:1;padding:14px 24px;border-radius:12px;border:none;background:var(--primary);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #6366f14d}.modal-button-create:hover:not(.disabled){background:var(--primary-dark)}.modal-button-create:active:not(.disabled){transform:scale(.98)}.modal-button-create.disabled{opacity:.5;cursor:not-allowed}:root{--primary-color: #6366F1;--text-primary: #1F2937;--text-secondary: #6B7280;--white: #FFFFFF;--error: #EF4444;--background: #F9FAFB}.join-room-page{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;align-items:center;background-color:var(--white);padding:40px 20px;box-sizing:border-box}.join-room-content{flex:1;max-width:600px;width:100%}.header{margin-bottom:48px}.input-section{margin-bottom:32px}.room-code-input{width:100%;padding:20px;border:2px solid #E5E7EB;border-radius:12px;font-size:24px;font-weight:600;text-align:center;letter-spacing:4px;text-transform:uppercase;background:var(--white);color:var(--text-primary);transition:border-color .2s;box-sizing:border-box}.room-code-input:focus{outline:none;border-color:var(--primary-color)}.room-code-input::placeholder{color:#d1d5db;letter-spacing:2px;font-weight:500}.error-text{font-size:14px;color:var(--error);text-align:center;margin-top:12px}.hint{font-size:14px;color:var(--text-secondary);text-align:center;line-height:1.6;margin-top:16px}@media(min-width:768px){.join-room-page{padding:60px 40px}.title{font-size:48px}.description{font-size:18px}.room-code-input{font-size:28px;padding:24px}.primary-button,.ghost-button{padding:18px 32px;font-size:18px}}.settings-modal-overlay{position:fixed;inset:0;background-color:#00000080;z-index:1000;display:flex;justify-content:center;align-items:center;padding:20px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-modal-content{background:#fff;border-radius:12px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.settings-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e5e7eb;position:sticky;top:0;background:#fff;z-index:10}.settings-modal-title{font-size:20px;font-weight:600;color:#111827;margin:0}.settings-close-btn{background:none;border:none;font-size:32px;color:#6b7280;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;line-height:1}.settings-close-btn:hover{color:#111827}.settings-modal-body{padding:20px}.settings-modal-content::-webkit-scrollbar{width:8px}.settings-modal-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.settings-modal-content::-webkit-scrollbar-thumb{background:#6366f1;border-radius:10px}.settings-modal-content::-webkit-scrollbar-thumb:hover{background:#4f46e5}.info-modal-content::-webkit-scrollbar{width:6px}.info-modal-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.info-modal-content::-webkit-scrollbar-thumb{background:#9ca3af;border-radius:10px}.info-modal-content::-webkit-scrollbar-thumb:hover{background:#6b7280}.settings-section-header{font-size:14px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;margin-top:24px}.settings-section-header:first-child{margin-top:0}.settings-section{background:#f9fafb;border-radius:12px;overflow:hidden}.profile-card-settings{display:flex;align-items:center;gap:16px;padding:20px;background:#fff;border-radius:12px;margin-bottom:16px}.avatar-container-settings{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;flex-shrink:0}.avatar-container-settings.lecturer-avatar{background:linear-gradient(135deg,#f59e0b,#ef4444)}.avatar-emoji{font-size:32px}.profile-info-settings{flex:1}.anonymous-label{font-size:12px;color:#6b7280;margin-bottom:4px}.anonymous-tag-display{font-size:18px;font-weight:600;color:#111827;margin-bottom:8px}.regenerate-link{background:none;border:none;color:#6366f1;font-size:14px;font-weight:500;cursor:pointer;padding:0;text-decoration:none}.regenerate-link:hover{text-decoration:underline}.lecturer-name{font-size:18px;font-weight:600;color:#111827;margin-bottom:4px}.lecturer-email{font-size:14px;color:#6b7280}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#fff;cursor:pointer;transition:background-color .2s}.setting-item:hover{background:#f9fafb}.setting-left{display:flex;align-items:center;gap:12px;flex:1}.setting-icon{font-size:20px;width:24px;text-align:center}.setting-text{flex:1}.setting-title{font-size:15px;font-weight:500;color:#111827;margin-bottom:2px}.setting-description{font-size:13px;color:#6b7280}.setting-arrow{font-size:20px;color:#9ca3af;margin-left:8px}.version-text{font-size:14px;color:#6b7280;font-weight:500}.setting-divider{height:1px;background:#e5e7eb;margin:0 16px}.logout-btn-settings{width:100%;padding:14px;background:#ef4444;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;transition:background-color .2s}.logout-btn-settings:hover{background:#dc2626}.settings-footer{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid #e5e7eb;font-size:13px;color:#9ca3af}.info-modal-overlay{position:fixed;inset:0;background-color:#000000b3;z-index:1100;display:flex;justify-content:center;align-items:center;padding:20px;animation:fadeIn .2s ease}.info-modal-content{background:#fff;border-radius:16px;max-width:500px;width:100%;max-height:80vh;overflow-y:auto;padding:24px;animation:slideUp .3s ease}.info-modal-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.info-modal-icon{font-size:28px}.info-modal-header h3{font-size:22px;font-weight:600;color:#111827;margin:0}.info-section{margin-bottom:20px}.info-section h4{font-size:16px;font-weight:600;color:#111827;margin-bottom:10px}.info-section p{font-size:14px;color:#4b5563;line-height:1.6;margin:6px 0}.info-modal-close{width:100%;padding:12px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;margin-top:16px;transition:background-color .2s}.info-modal-close:hover{background:#4f46e5}.edit-form{margin-bottom:20px}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:600;color:#111827;margin-bottom:6px}.form-input{width:100%;padding:10px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;color:#111827;background:#fff;box-sizing:border-box;transition:border-color .2s}.form-input:focus{outline:none;border-color:#6366f1}.form-input-readonly{background:#f3f4f6;color:#6b7280;cursor:not-allowed}.form-input-readonly:focus{border-color:#e5e7eb}.form-hint{font-size:12px;color:#6b7280;margin-top:4px;margin-bottom:0}.modal-actions{display:flex;gap:12px;margin-top:16px}.modal-action-cancel{flex:1;padding:12px;background:#f3f4f6;color:#4b5563;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .2s}.modal-action-cancel:hover{background:#e5e7eb}.modal-actions .info-modal-close{flex:1;margin-top:0}@media(max-width:768px){.settings-modal-content{max-height:95vh;border-radius:12px 12px 0 0}.info-modal-content{max-height:85vh}}.room-feed-page{display:flex;flex-direction:column;min-height:100vh;background-color:#f9fafb}.room-feed-container{flex:1;padding:16px 16px 100px;overflow-y:auto;max-width:800px;margin:0 auto;width:100%}.room-info-card{background-color:#fff;padding:20px;border-radius:16px;box-shadow:0 1px 3px #0000001a;margin-bottom:16px;text-align:center}.room-name{font-size:24px;font-weight:700;color:#111827;margin:0 0 12px}.room-details{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.lecturer-label{color:#6b7280;font-size:14px}.room-code-badge{background-color:#6366f126;padding:4px 12px;border-radius:8px;display:flex;align-items:center;gap:6px}.room-code-label{color:#6b7280;font-size:12px}.room-code{font-weight:700;font-size:14px;color:#6366f1;letter-spacing:2px}.filter-container{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.filter-row{display:flex;gap:8px}.filter-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background-color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .2s;box-shadow:0 1px 2px #0000000d;color:#111827}.filter-tab:hover{box-shadow:0 2px 4px #0000001a}.filter-tab.active{background-color:#6366f1;color:#fff;box-shadow:0 2px 8px #6366f14d}.filter-text{font-size:14px;font-weight:500}.filter-badge{background-color:#0000001a;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:700;min-width:24px;text-align:center}.filter-tab.active .filter-badge{background-color:#ffffff40}.questions-list{display:flex;flex-direction:column;gap:12px}.question-card{background-color:#fff;padding:16px;border-radius:12px;box-shadow:0 1px 3px #0000001a;border-left:4px solid transparent}.question-card:has(.you-badge){border-left-color:#6366f1}.question-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.you-badge{background-color:#10b981;color:#fff;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600}.student-tag{color:#6b7280;font-size:14px;font-weight:500}.question-text{color:#111827;font-size:16px;line-height:1.5;margin:0 0 12px}.question-footer{display:flex;align-items:center;gap:12px}.upvote-button{background:none;border:1px solid #E5E7EB;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:14px;color:#111827;transition:all .2s}.upvote-button:hover{background-color:#f3f4f6;border-color:#6366f1}.status-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;margin-left:auto}.status-badge.pending{background-color:#fef3c7;color:#92400e}.status-badge.answered{background-color:#d1fae5;color:#065f46}.more-button{background:none;border:none;color:#6b7280;font-size:20px;cursor:pointer;padding:4px 8px}.empty-state{text-align:center;padding:60px 20px}.fab{position:fixed;bottom:32px;right:32px;background-color:#6366f1;color:#fff;border:none;border-radius:50px;padding:14px 24px;display:flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 4px 12px #6366f166;transition:all .3s;z-index:100}.fab:hover{transform:translateY(-2px);box-shadow:0 6px 16px #6366f180}.fab-icon{font-size:20px}.fab-text{font-size:16px;font-weight:600}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background-color:#fff;border-radius:16px;padding:24px;width:100%;max-width:500px;box-shadow:0 8px 32px #00000026}.modal-title{font-size:20px;font-weight:700;color:#111827;margin:0 0 8px}.modal-subtitle{color:#6b7280;font-size:14px;margin:0 0 16px}.question-input{width:100%;padding:12px;border:1px solid #E5E7EB;border-radius:12px;font-size:16px;font-family:inherit;resize:vertical;margin-bottom:16px;background-color:#fff;color:#111827}.question-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.modal-buttons{display:flex;gap:12px}.modal-button-cancel,.modal-button-submit{flex:1;padding:12px 24px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.modal-button-cancel{background-color:#fff;border:1px solid #E5E7EB;color:#374151}.modal-button-cancel:hover{background-color:#f3f4f6}.modal-button-submit{background-color:#6366f1;border:none;color:#fff}.modal-button-submit:hover:not(:disabled){background-color:#4f46e5}.modal-button-submit:disabled{opacity:.5;cursor:not-allowed}.ask-modal-content{max-width:500px}.anonymous-badge{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#6366f11a,#6366f10d);border:2px solid rgba(99,102,241,.3);border-radius:12px;padding:14px;margin-bottom:20px}.anonymous-icon{font-size:32px;flex-shrink:0}.anonymous-text{flex:1}.anonymous-title{font-size:15px;font-weight:600;color:#6366f1;margin-bottom:4px}.anonymous-description{font-size:13px;color:#6b7280;line-height:1.4}.input-hint{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#9ca3af;margin-top:8px;margin-bottom:16px}.char-count{color:#6b7280;font-weight:500}.tips-card{background:linear-gradient(135deg,#10b98114,#10b98108);border-left:4px solid #10B981;border-radius:8px;padding:14px;margin-bottom:20px}.tips-title{font-size:14px;font-weight:600;color:#111827;margin-bottom:10px}.tips-list{display:flex;flex-direction:column;gap:6px}.tip-item{font-size:13px;color:#6b7280;line-height:1.5}.button-icon{margin-right:6px;font-size:16px}.modal-button-submit{display:flex;align-items:center;justify-content:center}.report-modal-content{max-width:400px}.report-option{width:100%;display:flex;align-items:center;gap:12px;padding:16px;background-color:#fff;border:2px solid #E5E7EB;border-radius:8px;margin-bottom:12px;cursor:pointer;transition:all .2s}.report-option:hover{background-color:#f9fafb;border-color:#6366f1}.report-option-icon{font-size:24px}.report-option-text{font-size:16px;font-weight:500;color:#111827}.cancel-option{width:100%;padding:14px;background-color:#f3f4f6;border:none;border-radius:8px;cursor:pointer;transition:all .2s;margin-top:4px}.cancel-option:hover{background-color:#e5e7eb}.cancel-text{font-size:16px;font-weight:600;color:#6b7280}@media(min-width:1024px){.room-feed-container{max-width:1000px;padding:24px}.room-info-card{padding:24px}.room-name{font-size:28px}.question-card{padding:20px}.question-text{font-size:17px}}@media(max-width:768px){.room-feed-container{padding:12px}.room-info-card{padding:16px}.room-name{font-size:20px}.filter-tab{padding:10px}.filter-text{font-size:13px}.fab{bottom:24px;right:24px;padding:12px 20px}.modal-content{padding:20px}}:root{--primary-color: #6366F1;--secondary-color: #10B981;--text-primary: #1F2937;--text-secondary: #6B7280;--white: #FFFFFF;--error: #EF4444;--background: #F9FAFB;--border: #E5E7EB;--surface: #FFFFFF}.my-rooms-page{min-height:100vh;background-color:var(--background);padding:24px}.my-rooms-container{max-width:1200px;margin:0 auto}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh}.spinner{border:3px solid var(--border);border-top:3px solid var(--primary-color);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:16px}.header-top{display:flex;justify-content:space-between;align-items:flex-start}.title{font-size:40px;font-weight:700;color:var(--text-primary);margin:0 0 8px}.subtitle{font-size:16px;color:var(--text-secondary);margin:0}.logout-button{padding:12px 20px;background-color:var(--surface);border:2px solid var(--border);border-radius:12px;font-size:16px;font-weight:600;color:var(--text-primary);cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #00000014}.logout-button:hover{border-color:var(--primary-color);color:var(--primary-color)}.settings-icon-myrooms{padding:12px;background-color:var(--surface);border:2px solid var(--border);border-radius:12px;font-size:20px;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #00000014;margin-left:12px;margin-right:12px}.settings-icon-myrooms:hover{border-color:var(--primary-color);background-color:#6366f10d}.rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-bottom:100px}.room-card{background:var(--white);border-radius:16px;padding:20px;box-shadow:0 2px 8px #00000014;position:relative;transition:all .2s}.room-card:hover{box-shadow:0 4px 16px #0000001f;transform:translateY(-2px)}.room-card-content{cursor:pointer}.room-header{margin-bottom:16px}.room-title-container{margin-bottom:12px;padding-right:60px}.room-name{font-size:20px;font-weight:600;color:var(--text-primary);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-code-row{display:flex;align-items:center;justify-content:space-between}.room-code{font-size:16px;font-weight:700;color:var(--primary-color);letter-spacing:2px}.status-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600}.status-badge.active{background-color:#10b9811a;color:var(--secondary-color)}.status-badge.closed{background-color:#ef44441a;color:var(--error)}.room-stats{display:flex;justify-content:space-around;padding-top:16px;border-top:1px solid var(--border)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px}.stat-icon{font-size:20px}.stat-value{font-size:16px;font-weight:700;color:var(--text-primary)}.stat-label{font-size:12px;color:var(--text-secondary)}.delete-button{position:absolute;top:16px;right:16px;padding:6px 12px;background-color:var(--error);color:var(--white);border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #ef44444d}.delete-button:hover{background-color:#dc2626;transform:translateY(-1px);box-shadow:0 4px 12px #ef444466}.delete-button:active{transform:translateY(0)}.empty-state{display:flex;flex-direction:column;align-items:center;padding:80px 20px}.empty-emoji{font-size:64px;margin-bottom:24px}.empty-title{font-size:24px;font-weight:600;color:var(--text-primary);margin:0 0 12px}.empty-description{font-size:16px;color:var(--text-secondary);margin:0 0 24px;text-align:center}.create-button{padding:16px 32px;background-color:var(--primary-color);color:var(--white);border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #6366f14d}.create-button:hover{background-color:#5558e3;transform:translateY(-2px);box-shadow:0 6px 16px #6366f166}.create-button:active{transform:translateY(0)}.fab{position:fixed;bottom:80px;right:32px;width:56px;height:56px;background-color:var(--primary-color);color:var(--white);border:none;border-radius:28px;font-size:32px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px #6366f166;transition:all .2s;display:flex;align-items:center;justify-content:center}.fab:hover{background-color:#5558e3;transform:translateY(-2px);box-shadow:0 6px 20px #6366f180}.fab:active{transform:translateY(0)}@media(min-width:768px){.my-rooms-page{padding:40px}.title{font-size:48px}.subtitle{font-size:18px}.rooms-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:24px}}:root{--primary-color: #6366F1;--text-primary: #1F2937;--text-secondary: #6B7280;--white: #FFFFFF;--background: #F9FAFB;--border: #E5E7EB;--surface: #FFFFFF}.create-room-page{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;align-items:center;background-color:var(--white);padding:40px 20px;box-sizing:border-box}.create-room-content{flex:1;max-width:600px;width:100%}.header{margin-bottom:32px}.title{font-size:40px;font-weight:700;color:var(--text-primary);margin:0 0 12px}.description{font-size:16px;color:var(--text-secondary);line-height:1.6;margin:0}.input-group{margin-bottom:32px}.input-label{display:block;font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.room-name-input{width:100%;padding:16px;border:2px solid var(--border);border-radius:12px;font-size:16px;color:#111827;background-color:#fff;transition:border-color .2s;box-sizing:border-box}.room-name-input:focus{outline:none;border-color:var(--primary-color)}.room-name-input::placeholder{color:#9ca3af}.input-hint{font-size:14px;color:var(--text-secondary);margin-top:8px}.visibility-section{margin-bottom:32px}.visibility-label{display:block;font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.visibility-hint{font-size:14px;color:var(--text-secondary);margin-bottom:16px;line-height:1.6}.toggle-container{display:flex;gap:12px}.toggle-option{flex:1;background-color:var(--surface);padding:20px 16px;border-radius:12px;border:2px solid var(--border);display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:all .2s}.toggle-option:hover{border-color:#c7d2fe}.toggle-option.active{border-color:var(--primary-color);background-color:#6366f10d}.toggle-icon{font-size:32px;margin-bottom:8px}.toggle-text{font-size:16px;font-weight:600;color:var(--text-secondary);margin-bottom:4px}.toggle-option.active .toggle-text{color:var(--primary-color)}.toggle-description{font-size:12px;color:var(--text-secondary);text-align:center;line-height:1.4}.toggle-option.active .toggle-description{color:var(--primary-color);opacity:.8}.button-container{width:100%;max-width:600px}.primary-button{width:100%;padding:16px 24px;background-color:var(--primary-color);color:var(--white);border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;margin-bottom:12px;transition:all .2s}.primary-button:hover:not(:disabled){background-color:#5558e3;transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}.primary-button:active:not(:disabled){transform:translateY(0)}.primary-button:disabled{opacity:.5;cursor:not-allowed}.ghost-button{width:100%;padding:16px 24px;background-color:transparent;color:var(--text-secondary);border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.ghost-button:hover{background-color:#0000000d}.ghost-button:active{transform:scale(.98)}@media(min-width:768px){.create-room-page{padding:60px 40px}.title{font-size:48px}.description{font-size:18px}.room-name-input{padding:18px;font-size:18px}.toggle-option{padding:24px 20px}.primary-button,.ghost-button{padding:18px 32px;font-size:18px}}.lecturer-panel-page{display:flex;flex-direction:column;min-height:100vh;background-color:#f9fafb}.top-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background-color:#6366f1;color:#fff}.back-icon,.settings-icon,.refresh-icon{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.refresh-icon:hover:not(:disabled),.settings-icon:hover{opacity:.8}.refresh-icon:disabled{opacity:.5;cursor:not-allowed}.header-actions{display:flex;gap:8px;align-items:center}.page-title{font-size:20px;font-weight:600;margin:0}.panel-container{flex:1;padding:16px;overflow-y:auto;max-width:1000px;margin:0 auto;width:100%}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;gap:16px}.spinner{width:40px;height:40px;border:4px solid #E5E7EB;border-top-color:#6366f1;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.room-info-card-lecturer{background-color:#6366f1;padding:20px;border-radius:16px;box-shadow:0 2px 8px #6366f14d;margin-bottom:16px;color:#fff}.room-name-lecturer{font-size:24px;font-weight:700;margin:0 0 16px;text-align:center}.room-code-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.code-display{display:flex;align-items:center;gap:8px}.code-label{font-size:14px;opacity:.9}.code-value{font-size:18px;font-weight:700;letter-spacing:3px}.action-icons{display:flex;gap:8px}.icon-btn{background-color:#fff3;border:none;padding:8px 12px;border-radius:8px;font-size:18px;cursor:pointer;transition:all .2s}.icon-btn:hover{background-color:#ffffff4d}.visibility-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background-color:#fff;border-radius:12px;margin-bottom:12px}.visibility-label{font-size:14px;font-weight:500;color:#111827}.visibility-toggle{padding:6px 16px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;color:#fff}.visibility-toggle.public{background-color:#10b981}.visibility-toggle.private{background-color:#f59e0b}.visibility-toggle:disabled{opacity:.5;cursor:not-allowed}.close-room-btn{width:100%;padding:12px;background-color:#ef4444;border:none;border-radius:12px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.close-room-btn:hover{background-color:#dc2626}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.stat-card{background-color:#fff;padding:16px;border-radius:12px;text-align:center;box-shadow:0 1px 3px #0000001a}.stat-number{font-size:32px;font-weight:700;color:#6366f1;margin-bottom:4px}.stat-label{font-size:14px;color:#6b7280}.filter-container-lecturer{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.filter-row-lecturer{display:flex;gap:8px}.filter-tab-lecturer{flex:1;padding:12px;background-color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .2s;box-shadow:0 1px 2px #0000000d;color:#111827}.filter-tab-lecturer:hover{box-shadow:0 2px 4px #0000001a}.filter-tab-lecturer.active{background-color:#6366f1;color:#fff;box-shadow:0 2px 8px #6366f14d}.filter-text-lecturer{font-size:14px;font-weight:500}.refresh-section{display:flex;justify-content:center;margin:16px 0}.refresh-button{padding:10px 20px;background-color:#fff;border:2px solid #6366F1;border-radius:8px;color:#6366f1;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.refresh-button:hover:not(:disabled){background-color:#6366f1;color:#fff}.refresh-button:disabled{opacity:.6;cursor:not-allowed}.questions-list-lecturer{display:flex;flex-direction:column;gap:12px}.question-card-lecturer{background-color:#fff;padding:16px;border-radius:12px;box-shadow:0 1px 3px #0000001a}.question-header-lecturer{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.upvote-badge{display:flex;align-items:center;gap:6px;background-color:#f3f4f6;padding:4px 12px;border-radius:8px;font-size:14px;font-weight:600}.timestamp{font-size:12px;color:#6b7280}.student-tag{font-size:12px;color:#6b7280;font-style:italic;margin-bottom:8px}.reported-badge-container{margin-bottom:8px}.reported-badge{display:inline-block;padding:4px 10px;background-color:#ef44441a;border:1px solid #EF4444;border-radius:6px;color:#dc2626;font-size:12px;font-weight:600}.question-text-lecturer{font-size:16px;color:#111827;line-height:1.5;margin:0 0 12px}.answer-container-lecturer{margin-top:12px;padding:12px;background-color:#10b9811a;border-left:3px solid #10B981;border-radius:8px;margin-bottom:12px}.answer-label{font-size:12px;font-weight:600;color:#10b981;margin-bottom:4px}.answer-text{font-size:14px;color:#111827}.action-buttons-lecturer{display:flex;gap:8px}.action-btn{flex:1;padding:10px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.answer-btn{background-color:#10b98133;color:#065f46}.answer-btn:hover{background-color:#10b9814d}.delete-btn{background-color:#ef444433;color:#991b1b}.delete-btn:hover{background-color:#ef44444d}.restore-btn{background-color:#10b98133;color:#065f46}.restore-btn:hover{background-color:#10b9814d}.permanent-delete-btn{background-color:#ef4444;color:#fff}.permanent-delete-btn:hover{background-color:#dc2626}.empty-state-lecturer{text-align:center;padding:60px 20px}.empty-emoji{font-size:64px;display:block;margin-bottom:16px}.empty-title{color:#111827;font-size:20px;font-weight:600;margin:0 0 8px}.empty-description{color:#6b7280;font-size:14px;max-width:300px;margin:0 auto;line-height:1.5}@media(min-width:1024px){.panel-container,.room-info-card-lecturer{padding:24px}.room-name-lecturer{font-size:28px}.stats-row{gap:16px}.stat-card,.question-card-lecturer{padding:20px}}@media(max-width:768px){.panel-container{padding:12px}.room-info-card-lecturer{padding:16px}.room-name-lecturer{font-size:20px}.stats-row{gap:8px}.stat-card{padding:12px}.stat-number{font-size:24px}.action-btn{font-size:12px;padding:8px}}:root{--primary: #6366F1;--primary-light: #818CF8;--primary-dark: #4F46E5;--secondary: #10B981;--white: #FFFFFF;--background: #F9FAFB;--surface: #FFFFFF;--border: #E5E7EB;--text-primary: #111827;--text-secondary: #6B7280;--text-tertiary: #9CA3AF;--error: #EF4444;--success: #10B981}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--background);color:var(--text-primary)}.app-container{min-height:100vh;display:flex;flex-direction:column}.page{flex:1;padding:24px;max-width:1200px;margin:0 auto;width:100%}.btn{padding:16px 24px;border-radius:12px;border:none;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 1px 3px #0000001a}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-dark)}.btn-secondary{background:var(--border);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){background:#d1d5db}.input{padding:16px;border:2px solid var(--border);border-radius:12px;font-size:16px;width:100%;transition:border-color .2s;background:var(--white);color:var(--text-primary)}.input:focus{outline:none;border-color:var(--primary)}.input::placeholder{color:var(--text-tertiary)}.card{background:var(--white);border-radius:16px;padding:20px;box-shadow:0 2px 8px #00000014}.spinner{border:3px solid var(--border);border-top:3px solid var(--primary);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{margin-top:16px;padding:12px 16px;background:#fee2e2;color:var(--error);border-radius:12px;text-align:center;font-size:14px}