:root{--primary-color: #46178f;--secondary-color: #ebf2f5;--text-color: #333333;--text-light: #ffffff;--bg-color: #f2f2f2;--card-bg: #ffffff;--border-color: #e0e0e0;--color-red: #e21b3c;--color-blue: #1368ce;--color-yellow: #d89e00;--color-green: #26890c;--color-purple: #8e44ad;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .2);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--text-color);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;min-width:320px;min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin-bottom:.5em;color:inherit}a{color:var(--primary-color);text-decoration:none}a:hover{text-decoration:underline}button{border-radius:var(--radius-md);border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:600;font-family:inherit;background-color:var(--card-bg);cursor:pointer;transition:all .2s;color:var(--text-color);box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;justify-content:center;gap:.5rem}button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}button:active{transform:translateY(0)}button:disabled{opacity:.6;cursor:not-allowed;transform:none}button.primary{background-color:var(--primary-color);color:var(--text-light)}button.primary:hover{background-color:#3b1378}input,textarea,select{font-family:inherit;font-size:1rem;padding:.75rem 1rem;border-radius:var(--radius-md);border:2px solid var(--border-color);background-color:var(--card-bg);color:var(--text-color);width:100%;transition:border-color .2s;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--primary-color)}.auth-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;background:linear-gradient(135deg,var(--primary-color),#2c0e5a);color:#fff;text-align:center}.auth-card{background-color:var(--card-bg);color:var(--text-color);padding:3rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:400px}.auth-card h1{margin-bottom:.5rem;color:var(--primary-color)}.auth-card p{color:#666;margin-bottom:2rem}.app-container{display:flex;flex-direction:column;min-height:100vh}.navbar{background-color:var(--primary-color);color:#fff;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm)}.navbar-brand{font-size:1.5rem;font-weight:800;display:flex;align-items:center;gap:.5rem}.navbar-user{display:flex;align-items:center;gap:1rem}.navbar-user img{width:32px;height:32px;border-radius:50%;border:2px solid white}.main-content{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.card{background:var(--card-bg);border-radius:var(--radius-md);padding:1.5rem;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;border:1px solid var(--border-color);cursor:pointer;display:flex;flex-direction:column}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--primary-color)}.card-title{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}.card-meta{color:#666;font-size:.9rem;margin-bottom:1.5rem;flex:1}.card-actions{display:flex;gap:.5rem;margin-top:auto}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-content{background-color:var(--card-bg);border-radius:var(--radius-lg);padding:2rem;width:100%;max-width:500px;box-shadow:var(--shadow-lg)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.modal-body{margin-bottom:1.5rem}.modal-footer{display:flex;justify-content:flex-end;gap:1rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;font-weight:600;margin-bottom:.5rem}.live-container{display:flex;flex-direction:column;min-height:100vh;background-color:var(--bg-color)}.live-header{background-color:var(--card-bg);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm);z-index:10}.join-info{display:flex;align-items:center;gap:2rem}.join-url{font-size:1.5rem;font-weight:700}.join-pin{font-size:2.5rem;font-weight:900;letter-spacing:4px}.player-count{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;background-color:#f0f0f0;padding:.5rem 1rem;border-radius:20px}.live-main{flex:1;display:flex;flex-direction:column;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.waiting-room{flex:1;display:flex;align-items:center;justify-content:space-between;gap:3rem}.qr-section{background:#fff;padding:2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:column;align-items:center;gap:1rem}.players-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;align-items:start;align-content:start;background:#fff;padding:2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);min-height:400px;overflow-y:auto}.player-tag{background-color:var(--primary-color);color:#fff;padding:.5rem 1rem;border-radius:20px;font-weight:600;text-align:center;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275)}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.question-display{flex:1;display:flex;flex-direction:column}.question-text{font-size:2.5rem;font-weight:800;text-align:center;margin-bottom:3rem;background:#fff;padding:2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.timer-bar-container{height:10px;background-color:#ddd;border-radius:5px;margin-bottom:2rem;overflow:hidden}.timer-bar{height:100%;background-color:var(--primary-color);transition:width 1s linear}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;flex:1}.option-card{border-radius:var(--radius-lg);padding:2rem;display:flex;align-items:center;gap:1.5rem;color:#fff;font-size:1.5rem;font-weight:700;cursor:pointer;transition:transform .2s,opacity .2s;border:none;width:100%;text-align:left}.option-card:hover:not(:disabled){transform:scale(1.02);box-shadow:var(--shadow-md)}.option-card:active:not(:disabled){transform:scale(.98)}.option-card.red{background-color:var(--color-red)}.option-card.blue{background-color:var(--color-blue)}.option-card.yellow{background-color:var(--color-yellow)}.option-card.green{background-color:var(--color-green)}.option-card.purple{background-color:var(--color-purple)}.option-icon{font-size:2rem;opacity:.8}.option-text{flex:1;word-break:break-word}.student-join-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;background-color:var(--bg-color);text-align:center}.join-form{background:#fff;padding:3rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:400px}.pin-input{font-size:2rem;text-align:center;letter-spacing:.2em;font-weight:800;margin-bottom:1rem}.name-input{font-size:1.25rem;text-align:center;margin-bottom:2rem;font-weight:600}.student-waiting{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;background-color:var(--primary-color);color:#fff;text-align:center}.student-waiting h2{font-size:2rem;margin-bottom:1rem}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}.spinner.dark{border-color:#0000001a;border-top-color:var(--primary-color)}@keyframes spin{to{transform:rotate(360deg)}}.text-center{text-align:center}.text-error{color:var(--color-red)}.mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem}.heartbeat-fx{animation:heartbeat 1.5s ease-in-out infinite both}@keyframes heartbeat{0%{transform:scale(1);transform-origin:center center;animation-timing-function:ease-out}10%{transform:scale(1.02);animation-timing-function:ease-in}17%{transform:scale(.98);animation-timing-function:ease-out}33%{transform:scale(1.02);animation-timing-function:ease-in}45%{transform:scale(1);animation-timing-function:ease-out}}.pop-in-bouncy{animation:popIn .6s cubic-bezier(.175,.885,.32,1.275) both}@keyframes popIn{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}