.dashboard-container{min-height:100vh;padding:0;background:#f8f9fa;width:100%;overflow-x:hidden}.dashboard-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2rem);text-align:center;box-shadow:0 2px 10px #0000001a;width:100%}.dashboard-header h1{font-size:clamp(1.75rem,5vw,3rem);font-weight:700;margin-bottom:.5rem;letter-spacing:-.5px}.dashboard-header p{font-size:clamp(.95rem,2.5vw,1.1rem);opacity:.95;font-weight:300}.dashboard-main{max-width:1400px;margin:0 auto;padding:clamp(1.5rem,4vw,4rem) clamp(1rem,3vw,3rem);width:100%;box-sizing:border-box}.systems-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(1.25rem,3vw,2.5rem);margin-top:clamp(1rem,3vw,2rem);width:100%}.system-card{background:#fff;border-radius:16px;padding:clamp(1.5rem,4vw,3rem);box-shadow:0 2px 8px #00000014;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;overflow:hidden;border:1px solid #e9ecef;display:flex;flex-direction:column;min-height:auto;width:100%;box-sizing:border-box}.system-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--card-color);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.system-card.available:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001f;border-color:var(--card-color)}.system-card.available:hover:before{transform:scaleX(1)}.system-card.disabled{opacity:.6;cursor:not-allowed;background:#f8f9fa}.system-icon{font-size:clamp(2.5rem,6vw,3rem);margin-bottom:1.5rem;display:flex;justify-content:flex-start;transition:transform .3s ease}.system-card.available:hover .system-icon{transform:scale(1.1)}.system-card h2{font-size:clamp(1.25rem,3vw,1.5rem);margin-bottom:1rem;color:#212529;font-weight:600;line-height:1.3}.system-card p{color:#6c757d;margin-bottom:auto;line-height:1.6;font-size:clamp(.9rem,2vw,.95rem);flex-grow:1}.system-badge{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:20px;font-size:clamp(.75rem,2vw,.8rem);font-weight:600;margin-top:1.5rem;width:fit-content;letter-spacing:.3px}.system-badge span{position:relative;z-index:1}.system-badge:not(.disabled){background:var(--card-color);color:#fff;box-shadow:0 2px 8px #00000026}.system-badge.disabled{background:#dee2e6;color:#6c757d}.menstruation-login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);background:#f8f9fa;width:100%;box-sizing:border-box}.menstruation-login-card{background:#fff;border-radius:20px;padding:clamp(1.5rem,5vw,4rem);box-shadow:0 4px 20px #0000001a;max-width:min(90vw,520px);width:100%;border:1px solid #e9ecef;box-sizing:border-box}.btn-back{background:#f8f9fa;border:1px solid #dee2e6;color:#495057;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;font-size:clamp(.85rem,2vw,.9rem);margin-bottom:2rem;padding:.5rem 1rem;border-radius:8px;transition:all .2s ease;font-weight:500;width:100%;justify-content:center}.login-header{text-align:center;margin-bottom:2.5rem}.login-icon{font-size:clamp(2.5rem,8vw,4rem);color:#e91e63;margin-bottom:1.5rem;display:flex;justify-content:center}.login-header h1{font-size:clamp(1.5rem,4vw,2rem);color:#212529;margin-bottom:.75rem;font-weight:700;letter-spacing:-.5px}.login-header p{color:#6c757d;font-size:clamp(.9rem,2.5vw,1rem);line-height:1.5}.login-form{display:flex;flex-direction:column;gap:1.5rem;width:100%}.form-group{display:flex;flex-direction:column;gap:.75rem;width:100%}.form-group label{font-weight:600;color:#212529;font-size:clamp(.9rem,2vw,.95rem)}.form-group input{padding:.875rem 1rem;border:2px solid #dee2e6;border-radius:10px;font-size:clamp(.95rem,2.5vw,1rem);transition:all .2s ease;background:#fff;font-family:inherit;width:100%;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#e91e63;box-shadow:0 0 0 3px #e91e631a}.form-group input::placeholder{color:#adb5bd}.btn-primary{background:linear-gradient(135deg,#e91e63,#c2185b);color:#fff;border:none;padding:.875rem 1.5rem;border-radius:10px;font-size:clamp(.95rem,2.5vw,1rem);font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #e91e634d;width:100%}.login-note{text-align:center;font-size:clamp(.8rem,2vw,.85rem);color:#6c757d;margin-top:.5rem;line-height:1.5}.menstruation-tracker-container{min-height:100vh;background:#f8f9fa;padding:0;width:100%;overflow-x:hidden}.tracker-header{background:#fff;border-bottom:1px solid #e9ecef;padding:clamp(.875rem,2vw,1.25rem) clamp(1rem,3vw,2rem);display:flex;align-items:center;gap:clamp(1rem,2vw,1.5rem);box-shadow:0 2px 4px #0000000d;position:sticky;top:0;z-index:100;width:100%;box-sizing:border-box;flex-wrap:wrap}.btn-back{background:#f8f9fa;border:1px solid #dee2e6;color:#495057;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;font-size:clamp(.85rem,2vw,.9rem);padding:.5rem 1rem;border-radius:8px;transition:all .2s ease;font-weight:500;white-space:nowrap;flex-shrink:0}.btn-back:hover{background:#e9ecef;border-color:#adb5bd;color:#212529}.header-content{flex:1;min-width:0}.header-content h1{color:#e91e63;font-size:clamp(1.1rem,3vw,1.5rem);margin-bottom:.25rem;display:flex;align-items:center;gap:.75rem;font-weight:700;letter-spacing:-.5px;flex-wrap:wrap}.header-content p{color:#6c757d;font-size:clamp(.85rem,2vw,.95rem);font-weight:400}.tracker-content{max-width:1400px;margin:0 auto;padding:clamp(1rem,3vw,3rem);display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(1.25rem,3vw,2.5rem);width:100%;box-sizing:border-box}.tracker-sidebar{display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:clamp(60px,8vw,80px);height:fit-content;max-height:calc(100vh - clamp(60px,8vw,80px) - 2rem);overflow-y:auto}.info-card{background:#fff;border-radius:12px;padding:clamp(1.25rem,3vw,1.5rem);box-shadow:0 2px 8px #00000014;border:1px solid #e9ecef;width:100%;box-sizing:border-box}.info-card h3{color:#212529;margin-bottom:1.25rem;font-size:clamp(1rem,2.5vw,1.1rem);font-weight:600}.info-item{margin-bottom:1.25rem}.info-item:last-child{margin-bottom:0}.info-item label{display:block;font-weight:600;color:#495057;font-size:clamp(.8rem,2vw,.875rem);margin-bottom:.5rem}.info-item p{color:#212529;font-size:clamp(.9rem,2vw,.95rem)}.input-group{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.cycle-input{border:2px solid #dee2e6;border-radius:8px;padding:.5rem;font-size:clamp(.9rem,2vw,.95rem);transition:all .2s ease;background:#fff;width:80px;max-width:100%;box-sizing:border-box}.cycle-input:focus{outline:none;border-color:#e91e63;box-shadow:0 0 0 3px #e91e631a}.info-item span{color:#6c757d;font-size:clamp(.85rem,2vw,.9rem)}.no-data{text-align:center;padding:1.5rem 0}.no-data p{color:#6c757d;margin-bottom:1.25rem;line-height:1.6;font-size:clamp(.85rem,2vw,.9rem)}.btn-secondary{background:#f8f9fa;color:#212529;border:1px solid #dee2e6;padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease;width:100%;font-size:clamp(.9rem,2vw,.95rem);box-sizing:border-box}.btn-secondary:hover{background:#e9ecef;border-color:#adb5bd}.legend{display:flex;flex-direction:column;gap:1.25rem}.legend-item{display:flex;align-items:flex-start;gap:1rem;padding:.75rem;background:#f8f9fa;border-radius:8px;transition:background .2s ease}.legend-item:hover{background:#e9ecef}.legend-color{width:clamp(40px,5vw,48px);height:clamp(40px,5vw,48px);border-radius:8px;flex-shrink:0;border:2px solid rgba(0,0,0,.1);box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;justify-content:center;position:relative}.legend-icon{color:#fff;font-size:clamp(1rem,2.5vw,1.25rem);filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.legend-color.period{background:#e91e63;border-color:#c2185b}.legend-color.fertile{background:#ff9800;border-color:#f57c00}.legend-color.record{background:#4caf50;border-color:#388e3c}.legend-color.today{background:#2196f3;border:3px solid #1976d2;box-shadow:0 0 0 2px #2196f333}.legend-text{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.legend-title{color:#212529;font-size:clamp(.9rem,2vw,.95rem);font-weight:600;display:block}.legend-desc{color:#6c757d;font-size:clamp(.8rem,1.8vw,.85rem);font-weight:400;line-height:1.4;display:block}.tracker-main{background:#fff;border-radius:12px;padding:clamp(1.5rem,3vw,2.5rem);box-shadow:0 2px 8px #00000014;border:1px solid #e9ecef;width:100%;box-sizing:border-box;overflow-x:auto}.calendar-container{width:100%;min-width:0}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:2px solid #f0f0f0;gap:1rem;flex-wrap:wrap}.calendar-header h2{color:#212529;font-size:clamp(1.25rem,3vw,1.5rem);font-weight:700;letter-spacing:-.5px;flex:1;min-width:0;text-align:center}.month-nav{background:#f8f9fa;border:1px solid #dee2e6;width:clamp(36px,5vw,40px);height:clamp(36px,5vw,40px);border-radius:8px;cursor:pointer;font-size:clamp(1.1rem,2.5vw,1.25rem);color:#495057;transition:all .2s ease;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}.month-nav:hover{background:#e9ecef;border-color:#adb5bd;color:#212529}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(.25rem,1vw,.5rem);width:100%}.calendar-weekday{text-align:center;font-weight:700;color:#6c757d;padding:clamp(.5rem,1.5vw,.75rem) clamp(.25rem,1vw,.5rem);font-size:clamp(.7rem,2vw,.85rem);text-transform:uppercase;letter-spacing:.5px}.calendar-day{aspect-ratio:1;border:2px solid #f0f0f0;border-radius:clamp(6px,1.5vw,10px);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;position:relative;padding:clamp(.25rem,1vw,.5rem);background:#fafafa;min-width:0;overflow:visible}.calendar-day:hover:not(.other-month){border-color:#e91e63;background:#fff5f8;transform:scale(1.05)}.calendar-day.other-month{opacity:.3;cursor:not-allowed;background:#f9f9f9}.calendar-day.period-day{background:#fce4ec;border-color:#e91e63;font-weight:600}.calendar-day.fertile-day{background:#fff3e0;border-color:#ff9800}.calendar-day.today{border-color:#2196f3;border-width:3px;font-weight:700;background:#e3f2fd}.calendar-day.next-period-day{border-color:#e91e63;border-width:2px;background:#fce4ec}.calendar-day.next-period-day .day-number{color:#c2185b;font-weight:700}.day-number{font-size:clamp(.75rem,2vw,.9rem);color:#212529;font-weight:500;position:relative;z-index:1}.day-icons{position:absolute;top:clamp(2px,.8vw,4px);right:clamp(2px,.8vw,4px);display:flex;align-items:center;justify-content:flex-end;gap:clamp(2px,.5vw,3px);flex-wrap:wrap;max-width:calc(100% - 8px);z-index:2}.day-icon{font-size:clamp(.6rem,1.4vw,.75rem);filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));flex-shrink:0;line-height:1;display:block}.day-icon.period-icon{color:#c2185b}.day-icon.fertile-icon{color:#f57c00}.day-icon.record-icon{color:#388e3c}.day-icon.today-icon{color:#1976d2}.calendar-day.period-day .day-icon.period-icon,.calendar-day.fertile-day .day-icon.fertile-icon,.calendar-day.today .day-icon.today-icon{color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:clamp(.5rem,2vw,1rem);box-sizing:border-box}.modal-content{background:#fff;border-radius:16px;padding:clamp(1.5rem,4vw,2.5rem);max-width:min(90vw,500px);width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0003;border:1px solid #e9ecef;box-sizing:border-box}.modal-content h3{color:#212529;margin-bottom:.75rem;font-size:clamp(1.25rem,3vw,1.5rem);font-weight:700}.modal-date{color:#6c757d;font-size:clamp(.85rem,2vw,.95rem);margin-bottom:2rem;text-transform:capitalize;font-weight:500}.modal-actions{display:flex;gap:1rem;margin-top:2rem;justify-content:flex-end;flex-wrap:wrap}.btn-primary{background:linear-gradient(135deg,#e91e63,#c2185b);color:#fff;border:none;padding:.875rem 2rem;border-radius:10px;cursor:pointer;font-weight:600;transition:all .2s ease;box-shadow:0 2px 8px #e91e634d;font-size:clamp(.95rem,2vw,1rem);flex:1;min-width:120px}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #e91e6366}.btn-danger{background:#f44336;color:#fff;border:none;padding:.875rem 1.5rem;border-radius:10px;cursor:pointer;font-weight:600;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:clamp(.95rem,2vw,1rem);flex:1;min-width:120px}.btn-danger:hover{background:#d32f2f;transform:translateY(-2px)}.form-group{margin-bottom:1.75rem}.form-group:last-of-type{margin-bottom:0}.form-group label{display:block;font-weight:600;color:#212529;margin-bottom:.75rem;font-size:clamp(.9rem,2vw,.95rem)}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.875rem;border:2px solid #dee2e6;border-radius:10px;font-size:clamp(.95rem,2vw,1rem);font-family:inherit;transition:all .2s ease;background:#fff;box-sizing:border-box}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#e91e63;box-shadow:0 0 0 3px #e91e631a}.form-group textarea{resize:vertical;min-height:100px;font-family:inherit}.form-group select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}@media (max-width: 1024px){.tracker-content{grid-template-columns:1fr;padding:clamp(1rem,2vw,1.5rem)}.tracker-sidebar{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1.5rem;max-height:none;overflow-y:visible}.tracker-header{flex-direction:row}}@media (max-width: 768px){.tracker-header{flex-direction:column;align-items:flex-start;gap:1rem}.btn-back{width:100%;justify-content:center}.tracker-sidebar{grid-template-columns:1fr}.modal-actions{flex-direction:column}.btn-primary,.btn-danger{width:100%;flex:none}}.loading-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f8f9fa;gap:1rem}.loading-spinner{width:40px;height:40px;border:4px solid #e9ecef;border-top-color:#e91e63;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-container p{color:#6c757d;font-size:.95rem}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.modal-content::-webkit-scrollbar-thumb{background:#e91e63;border-radius:10px}.modal-content::-webkit-scrollbar-thumb:hover{background:#c2185b}.home-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.home-card{background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px #0000004d;max-width:500px;width:100%;text-align:center}.home-card h1{color:#667eea;margin-bottom:15px;font-size:2.5em}.subtitle{color:#666;margin-bottom:40px;font-size:16px}.header-with-back{position:relative;margin-bottom:30px}.btn-back-small{position:absolute;top:0;left:0;background:none;border:none;color:#667eea;font-size:16px;cursor:pointer;padding:5px 10px;border-radius:5px;transition:background .3s}.btn-back-small:hover{background:#f0f0f0}.main-options{display:flex;flex-direction:column;gap:20px;margin-top:30px}.main-option-btn{display:flex;align-items:center;gap:20px;padding:30px;background:#fff;border:3px solid #e0e0e0;border-radius:15px;cursor:pointer;transition:all .3s;text-align:left;width:100%}.main-option-btn:hover{border-color:#667eea;transform:translateY(-3px);box-shadow:0 10px 25px #667eea33}.main-option-btn.quiz-online:hover{border-color:#667eea;background:linear-gradient(135deg,#f0f4ff,#e8edff)}.main-option-btn.login-recovery:hover{border-color:#764ba2;background:linear-gradient(135deg,#faf5ff,#f0e8ff)}.option-icon{font-size:48px;min-width:60px;text-align:center}.option-content{flex:1}.option-content h2{color:#667eea;margin:0 0 8px;font-size:24px}.option-content p{color:#666;margin:0;font-size:14px}.info-text{margin-top:20px;color:#666;font-size:14px;text-align:center;font-style:italic}.mode-toggle{display:flex;gap:10px;margin-bottom:15px}.mode-toggle button{flex:1;padding:12px;border:2px solid #667eea;background:#fff;color:#667eea;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s}.mode-toggle button.active{background:#667eea;color:#fff}.mode-toggle button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea4d}.mode-description{margin-bottom:20px;color:#666;font-size:14px;font-style:italic}.role-toggle{display:flex;gap:10px;margin-bottom:30px}.role-toggle button{flex:1;padding:12px;border:2px solid #667eea;background:#fff;color:#667eea;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s}.role-toggle button.active{background:#667eea;color:#fff}.role-toggle button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea4d}.form-group input{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:10px;font-size:16px;transition:border-color .3s}.form-group input:focus{outline:none;border-color:#667eea}.btn-primary:active{transform:translateY(0)}.btn-secondary{padding:10px 20px;background:#fff;color:#667eea;border:2px solid #667eea;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;margin-top:15px;transition:all .3s}.room-info{margin-top:30px;padding-top:30px;border-top:2px solid #e0e0e0}.room-info p{font-size:18px;margin-bottom:15px;color:#333}.room-info strong{color:#667eea;font-size:24px;letter-spacing:3px}.qr-container{margin-top:20px;padding:20px;background:#f5f5f5;border-radius:10px}.qr-url{margin-top:15px;font-size:12px;color:#666;word-break:break-all}.teacher-room{min-height:100vh;padding:20px;max-width:1200px;margin:0 auto}.teacher-header{background:#fff;border-radius:15px;padding:20px;margin-bottom:20px;text-align:center;box-shadow:0 5px 15px #0000001a}.teacher-header h1{color:#667eea;margin-bottom:15px}.room-code{margin-top:15px}.room-code strong{font-size:24px;color:#764ba2;letter-spacing:3px}.room-url{font-size:12px;color:#666;margin-top:10px;word-break:break-all}.btn-qr{padding:10px 20px;background:#fff;color:#667eea;border:2px solid #667eea;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;margin-top:15px;transition:all .3s}.btn-qr:hover{background:#667eea;color:#fff}.qr-container{margin-top:20px;padding:20px;background:#f5f5f5;border-radius:10px;display:flex;justify-content:center}.waiting-section{display:grid;grid-template-columns:1fr 2fr;gap:20px}.students-list{background:#fff;border-radius:15px;padding:20px;box-shadow:0 5px 15px #0000001a}.students-list h2{color:#667eea;margin-bottom:15px}.students-list ul{list-style:none}.students-list li{padding:10px;margin:5px 0;background:#f5f5f5;border-radius:8px;border-left:4px solid #667eea}.no-students{color:#999;font-style:italic;text-align:center;padding:20px}.questions-section{background:#fff;border-radius:15px;padding:20px;box-shadow:0 5px 15px #0000001a}.questions-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.questions-header h2{color:#667eea}.questions-actions{display:flex;gap:10px;align-items:center}.btn-import{padding:10px 20px;background:#28a745;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:all .3s;display:inline-block}.btn-import:hover{background:#218838;transform:translateY(-2px)}.btn-add{padding:10px 20px;background:#667eea;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:all .3s}.btn-add:hover{background:#764ba2;transform:translateY(-2px)}.question-form{background:#f9f9f9;padding:20px;border-radius:10px;margin-bottom:20px}.question-form input[type=text]{width:100%;padding:12px;margin-bottom:10px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px}.option-input{display:flex;align-items:center;gap:10px;margin-bottom:10px}.option-input input[type=radio]{width:20px;height:20px;cursor:pointer}.option-input input[type=text]{flex:1;margin-bottom:0}.time-input{display:flex;align-items:center;gap:10px;margin:15px 0}.time-input label{font-weight:600}.time-input input[type=number]{width:100px;padding:8px;border:2px solid #e0e0e0;border-radius:8px}.btn-save{width:100%;padding:12px;background:#764ba2;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;margin-top:10px}.questions-list{margin-top:20px}.question-item{padding:15px;margin-bottom:10px;background:#f5f5f5;border-radius:8px;border-left:4px solid #667eea;display:flex;justify-content:space-between;align-items:center}.question-time{color:#666;font-size:14px}.btn-start{width:100%;padding:15px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:20px;font-weight:700;cursor:pointer;margin-top:20px;transition:all .3s}.btn-start:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.question-display h2{font-size:32px;color:#333;margin-bottom:30px;text-align:center}.options-display{display:grid;gap:15px}.option-display{padding:20px;background:#f5f5f5;border-radius:10px;font-size:18px;border:3px solid transparent}.ranking-screen h2{text-align:center;color:#667eea;margin-bottom:15px;font-size:32px}.ranking-date{text-align:center;margin-bottom:25px;font-size:16px;color:#666;font-style:italic}.ranking-item{display:flex;align-items:center;gap:20px;padding:20px;background:#f5f5f5;border-radius:10px;border-left:5px solid #667eea}@media (max-width: 768px){.waiting-section{grid-template-columns:1fr}}.student-room{min-height:100vh;padding:20px;max-width:800px;margin:0 auto}.student-header{background:#fff;border-radius:15px;padding:20px;margin-bottom:20px;text-align:center;box-shadow:0 5px 15px #0000001a}.student-header h1{color:#667eea;margin-bottom:10px}.room-code{color:#666;font-size:14px}.waiting-screen{background:#fff;border-radius:15px;padding:60px 40px;text-align:center;box-shadow:0 5px 15px #0000001a}.waiting-content h2{color:#667eea;margin:30px 0 15px}.waiting-content p{color:#666;font-size:18px}.spinner{width:60px;height:60px;border:5px solid #f3f3f3;border-top:5px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.countdown-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:60vh;background:#fff;border-radius:15px;box-shadow:0 5px 15px #0000001a}.countdown-number{font-size:120px;font-weight:700;color:#667eea;animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.question-screen{background:#fff;border-radius:15px;padding:30px;box-shadow:0 5px 15px #0000001a}.question-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:15px;border-bottom:2px solid #e0e0e0;font-weight:600;color:#666}.timer{font-size:24px;color:#667eea;font-weight:700}.question-content h2{font-size:28px;color:#333;margin-bottom:30px;text-align:center;line-height:1.4}.options-list{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}.option-button{display:flex;align-items:center;gap:15px;padding:20px;background:#fff;border:3px solid #e0e0e0;border-radius:12px;font-size:18px;cursor:pointer;transition:all .3s;text-align:left}.option-button:hover:not(:disabled){border-color:#667eea;transform:translate(5px);box-shadow:0 5px 15px #667eea33}.option-button.selected{background:#667eea;color:#fff;border-color:#667eea;font-weight:700}.option-letter{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#667eea1a;border-radius:50%;font-weight:700;flex-shrink:0}.option-button.selected .option-letter{background:#ffffff4d}.option-text{flex:1}.answer-hint{text-align:center;color:#667eea;font-style:italic;margin-top:15px}.results-screen{background:#fff;border-radius:15px;padding:40px;text-align:center;box-shadow:0 5px 15px #0000001a}.result-icon{font-size:80px;margin-bottom:20px}.result-icon.correct{animation:bounce .5s}.result-icon.incorrect{animation:shake .5s}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.results-screen h2{font-size:32px;margin-bottom:30px;color:#333}.result-details{background:#f5f5f5;padding:20px;border-radius:10px;margin:20px 0;text-align:left}.result-details p{margin:10px 0;font-size:18px;color:#333}.correct-answer-box{background:#d4edda;border:2px solid #28a745;padding:15px;border-radius:8px;margin-top:15px}.correct-answer-box p{color:#155724;margin:5px 0}.next-question{margin-top:30px;color:#666;font-size:16px;font-style:italic}.ranking-screen{background:#fff;border-radius:15px;padding:40px;box-shadow:0 5px 15px #0000001a}.ranking-screen h2{text-align:center;color:#667eea;margin-bottom:30px;font-size:32px}.ranking-list{display:flex;flex-direction:column;gap:15px}.ranking-item{display:flex;align-items:center;gap:20px;padding:20px;background:#f5f5f5;border-radius:10px;border-left:5px solid #667eea;transition:transform .2s}.ranking-item:hover{transform:translate(5px)}.ranking-item.first{background:linear-gradient(135deg,gold,#ffed4e);border-left-color:#ff8c00}.ranking-item.second{background:linear-gradient(135deg,silver,#e8e8e8);border-left-color:gray}.ranking-item.third{background:linear-gradient(135deg,#cd7f32,#e6a85c);border-left-color:#8b4513}.ranking-item.my-rank{border:3px solid #667eea;box-shadow:0 0 20px #667eea80}.rank-position{font-size:32px;font-weight:700;min-width:60px;text-align:center}.rank-info{flex:1}.rank-name{font-size:20px;font-weight:700;color:#333;margin-bottom:5px}.rank-score{font-size:16px;color:#666}@media (max-width: 768px){.question-content h2{font-size:22px}.option-button{padding:15px;font-size:16px}}.async-home-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;box-sizing:border-box}.async-home-card{background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px #0000004d;max-width:500px;width:100%;text-align:center;box-sizing:border-box}@media (max-width: 768px){.async-home-container{padding:10px;align-items:center}.async-home-card{padding:20px;border-radius:15px}}.async-home-card h1{color:#667eea;margin-bottom:10px;font-size:2.5em;text-align:center}@media (max-width: 768px){.async-home-card h1{font-size:1.8em}}.subtitle{color:#666;margin-bottom:30px;text-align:center;font-size:16px}.user-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #e0e0e0;flex-wrap:wrap;gap:15px}.user-header h1{margin:0;font-size:2em;text-align:left;flex:1;min-width:200px}@media (max-width: 768px){.user-header{flex-direction:column;align-items:flex-start}.user-header h1{font-size:1.5em;text-align:center;width:100%}}.btn-logout{padding:10px 20px;background:#f44;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s}.btn-logout:hover{background:#c00}.auth-toggle{display:flex;gap:10px;margin-bottom:30px}.auth-toggle button{flex:1;padding:12px;border:2px solid #667eea;background:#fff;color:#667eea;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s}.auth-toggle button.active{background:#667eea;color:#fff}.auth-toggle button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea4d}.form-group{margin-bottom:20px;text-align:left}.form-group label{display:block;margin-bottom:8px;color:#333;font-weight:600}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:8px}.checkbox-label input[type=checkbox]{width:20px;height:20px;cursor:pointer}.checkbox-label span{color:#333;font-weight:400}.form-hint{font-size:13px;color:#666;margin-top:5px;font-style:italic}.form-group input,.form-group textarea{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:10px;font-size:16px;transition:border-color .3s;box-sizing:border-box}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea}.error-message{background:#fee;color:#c33;padding:12px;border-radius:8px;margin-bottom:15px;font-size:14px}.btn-primary{width:100%;padding:15px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:18px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s;margin-top:10px}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.btn-secondary{padding:10px 20px;background:#fff;color:#667eea;border:2px solid #667eea;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;margin-bottom:20px;transition:all .3s}.btn-secondary:hover{background:#667eea;color:#fff}.btn-back{width:100%;padding:12px;background:#fff;color:#667eea;border:2px solid #667eea;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;margin-top:15px;transition:all .3s}.btn-back:hover{background:#667eea;color:#fff}.dashboard{margin-top:30px}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:15px}.dashboard-header h2{color:#667eea;margin:0;flex:1;min-width:200px}@media (max-width: 768px){.dashboard-header{flex-direction:column;align-items:stretch}.dashboard-header h2{font-size:1.5em;text-align:center}.dashboard-header .btn-primary{width:100%}}.quiz-form{background:#f5f5f5;border-radius:10px;padding:20px;margin-bottom:30px}.questions-section{margin-top:20px;padding-top:20px;border-top:2px solid #e0e0e0}.questions-section h3{color:#667eea;margin-bottom:15px}.option-input{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}.option-input input[type=text]{flex:1;min-width:200px}.option-input input[type=radio]{width:auto;flex-shrink:0}@media (max-width: 768px){.option-input{flex-direction:column;align-items:stretch}.option-input input[type=text]{min-width:100%}.option-input label{order:-1}}.questions-list{margin-top:15px}.question-item{background:#fff;padding:15px;border-radius:8px;margin-bottom:10px;border-left:4px solid #667eea}.question-time{color:#666;font-size:14px;margin-top:5px}.quizzes-list{display:grid;gap:20px;margin-top:30px;grid-template-columns:1fr}@media (min-width: 768px){.quizzes-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}.quiz-card{background:#f9f9f9;border-radius:10px;padding:20px;border-left:4px solid #667eea}.quiz-card.completed{border-left-color:#4caf50;opacity:.9}.quiz-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;flex-wrap:wrap;gap:10px;position:relative}.quiz-header-actions{display:flex;align-items:center;gap:10px}.quiz-card-header h3{color:#667eea;margin:0 0 5px;flex:1;min-width:200px}@media (max-width: 768px){.quiz-card-header{flex-direction:column}.quiz-card-header h3{font-size:1.2em}}.quiz-creator{color:#666;font-size:14px;margin:0}.badge-completed{background:#4caf50;color:#fff;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:700}.quiz-description{color:#666;margin-bottom:15px}.quiz-info{display:flex;gap:20px;margin-bottom:15px;font-size:14px;color:#666;flex-wrap:wrap}@media (max-width: 768px){.quiz-info{flex-direction:column;gap:10px}}.quiz-score{font-weight:700;color:#667eea}.quiz-completed-message{background:#e8f5e9;padding:15px;border-radius:8px;margin-top:15px;text-align:center}.quiz-completed-message p{margin:5px 0;color:#2e7d32}.quiz-score-display{font-weight:700;font-size:18px;color:#667eea}.no-quizzes{text-align:center;padding:40px;color:#666}.no-quizzes p{margin:10px 0}.quiz-results-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.quiz-results-content{background:#fff;border-radius:12px;padding:30px;max-width:900px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0003}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #e0e0e0}.results-header h2{margin:0;color:#333}.btn-close{background:#f44336;color:#fff;border:none;border-radius:50%;width:35px;height:35px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s}.btn-close:hover{background:#d32f2f}.results-actions{margin-bottom:20px}.results-list{margin-top:20px}.results-table{width:100%;border-collapse:collapse;margin-top:15px}.results-table th,.results-table td{padding:12px;text-align:left;border-bottom:1px solid #e0e0e0}.results-table th{background:#f5f5f5;font-weight:700;color:#333;position:sticky;top:0}.results-table tr:hover{background:#f9f9f9}.results-table td:first-child{font-weight:700;color:#667eea}.btn-cancel-result{background:#ff5252;color:#fff;border:none;border-radius:6px;padding:6px 12px;cursor:pointer;font-size:14px;transition:background .3s}.btn-cancel-result:hover{background:#ff1744}.no-results{text-align:center;padding:40px;color:#666}.no-results p{margin:10px 0;font-size:16px}.quiz-creator-actions{margin-top:15px;display:flex;gap:10px;flex-wrap:wrap}.btn-danger{background:#f44336;color:#fff;border:none;border-radius:6px;padding:10px 20px;cursor:pointer;font-size:14px;transition:background .3s;display:flex;align-items:center;gap:8px}.btn-danger:hover{background:#d32f2f}.btn-delete-small{background:#f44336;color:#fff;border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:14px;transition:all .3s;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}.btn-delete-small:hover{background:#d32f2f;transform:scale(1.1)}.results-actions{margin-bottom:20px;display:flex;gap:10px}@media (max-width: 768px){.quiz-results-content{padding:20px;max-height:95vh}.results-table{font-size:12px}.results-table th,.results-table td{padding:8px}.results-header h2{font-size:18px}}.async-quiz-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px;display:flex;justify-content:center;align-items:center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.async-quiz-container *{user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}.async-quiz-container input,.async-quiz-container textarea{user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important}.loading{background:#fff;padding:40px;border-radius:15px;text-align:center;font-size:18px;color:#667eea}.quiz-container{max-width:800px;width:100%;background:#fff;border-radius:15px;padding:30px;box-shadow:0 5px 15px #0000001a}.quiz-header{margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #e0e0e0}.quiz-header h2{color:#667eea;margin-bottom:15px}.quiz-progress{display:flex;justify-content:space-between;align-items:center;color:#666}.timer{font-weight:700;color:#f44;font-size:18px}.warning-badge{background:#ff9800;color:#fff;padding:4px 12px;border-radius:12px;font-size:14px;font-weight:700;margin-left:10px}.question-navigation{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;padding:15px;background:#f5f5f5;border-radius:10px;justify-content:center}.question-nav-btn{width:40px;height:40px;border-radius:8px;border:2px solid #ddd;background:#fff;color:#666;font-weight:700;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}.question-nav-btn:hover{border-color:#667eea;color:#667eea;transform:scale(1.1)}.question-nav-btn.active{background:#667eea;color:#fff;border-color:#667eea}.question-nav-btn.answered{background:#4caf50;color:#fff;border-color:#4caf50}.question-nav-btn.answered.active{background:#667eea;border-color:#667eea}.quiz-actions{display:flex;gap:10px;justify-content:center;margin-top:20px}.btn-secondary{background:#6c757d;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;cursor:pointer;transition:background .3s;display:flex;align-items:center;gap:8px}.btn-secondary:hover:not(:disabled){background:#5a6268}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.question-container h3{color:#333;margin-bottom:25px;font-size:24px}.options-list{display:flex;flex-direction:column;gap:15px;margin-bottom:30px}.option-button{padding:15px 20px;background:#fff;border:2px solid #e0e0e0;border-radius:10px;font-size:16px;text-align:left;cursor:pointer;transition:all .3s}.option-button:hover:not(:disabled){border-color:#667eea;background:#f0f4ff;transform:translate(5px)}.option-button.selected{border-color:#667eea;background:#667eea;color:#fff}.option-button:disabled{opacity:.6;cursor:not-allowed}.btn-primary{width:100%;padding:15px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:18px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.quiz-finished{text-align:center;padding:40px 20px}.quiz-finished h1{color:#4caf50;margin-bottom:30px;font-size:36px}.score-display{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:40px;border-radius:15px;margin-bottom:30px}.score-display h2{margin:0 0 15px;font-size:28px}.score-percentage{font-size:48px;font-weight:700;margin:0}.grade-info{display:flex;justify-content:center;gap:30px;margin:20px 0;flex-wrap:wrap}.numeric-grade,.letter-grade{display:flex;flex-direction:column;align-items:center;gap:8px}.grade-label{font-size:14px;opacity:.9;text-transform:uppercase;letter-spacing:1px}.grade-value{font-size:32px;font-weight:700;color:#fff}.letter-grade-value{font-size:48px;font-weight:700;width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid white}.grade-a{background:#4caf50;color:#fff}.grade-b{background:#2196f3;color:#fff}.grade-c{background:#ff9800;color:#fff}.grade-d{background:#f44336;color:#fff}.questions-review{margin:40px 0;text-align:left;max-width:100%}.questions-review h3{color:#333;margin-bottom:20px;font-size:24px;text-align:center}.question-review-item{background:#fff;border:2px solid #e0e0e0;border-radius:10px;padding:20px;margin-bottom:15px;transition:all .3s}.question-review-item.correct{border-color:#4caf50;background:#f1f8f4}.question-review-item.incorrect{border-color:#f44336;background:#fff5f5}.question-review-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;flex-wrap:wrap;gap:10px}.question-number{font-weight:700;color:#667eea;font-size:16px}.result-badge{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:14px;font-weight:700}.correct-badge{background:#4caf50;color:#fff}.incorrect-badge{background:#f44336;color:#fff}.question-text{color:#333;font-size:16px;margin-bottom:12px;line-height:1.5}.user-answer{padding:12px;background:#fff;border-radius:8px;border-left:4px solid #667eea;color:#555;font-size:15px}.user-answer strong{color:#333;margin-right:8px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:15px;max-width:500px;width:90%;box-shadow:0 10px 40px #0000004d;animation:slideUp .3s ease;overflow:hidden}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:15px}.modal-icon{font-size:28px;flex-shrink:0}.modal-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .3s;margin-left:auto}.modal-close:hover{background:#fff3}.modal-body{padding:30px 20px;color:#333;line-height:1.6;white-space:pre-line;font-size:16px}.modal-footer{padding:20px;border-top:1px solid #e0e0e0;display:flex;justify-content:flex-end}.modal-footer .btn-primary{width:auto;padding:12px 30px;margin:0}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #e91e63;--primary-dark: #c2185b;--secondary-color: #667eea;--text-primary: #212529;--text-secondary: #6c757d;--border-color: #dee2e6;--bg-color: #f8f9fa;--white: #ffffff}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:var(--bg-color);min-height:100vh;color:var(--text-primary);line-height:1.6;font-size:16px}#root{min-height:100vh}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#adb5bd;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#6c757d}::selection{background:var(--primary-color);color:#fff}::-moz-selection{background:var(--primary-color);color:#fff}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;color:var(--text-primary)}p{line-height:1.6}button{font-family:inherit}input,select,textarea{font-family:inherit;font-size:inherit}