.countdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000;display:flex;align-items:center;justify-content:center}.countdown-modal{background:#fff;padding:40px;border-radius:20px;box-shadow:var(--shadow);text-align:center;max-width:640px;width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .3s ease;font-family:var(--font-family-primary)}.countdown-title{font-size:28px;font-weight:var(--font-weight-bold);color:var(--primary-color);margin-bottom:40px;letter-spacing:.5px}.timer-circle-container{position:relative;width:340px;height:340px;margin:0 auto 40px;display:flex;align-items:center;justify-content:center}.timer-circle{position:absolute;width:340px;height:340px;transform:rotate(-90deg)}.circle-background{fill:none;stroke:#e8e8e8;stroke-width:35}.circle-progress{fill:none;stroke:#2196f3;stroke-width:35;stroke-linecap:butt;transition:stroke-dashoffset .8s ease-out}.timer-time-display{font-size:60px;font-weight:var(--font-weight-bold);color:var(--primary-color);margin-bottom:30px;font-family:var(--font-family-primary);letter-spacing:1px}.timer-finished .circle-progress{stroke:var(--danger-color)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.increment-buttons{display:flex;justify-content:center;gap:15px;margin-bottom:30px;flex-wrap:wrap}.increment-btn{background-color:var(--secondary-color);color:#333;border:none;padding:15px 20px;border-radius:12px;font-size:18px;font-weight:var(--font-weight-semibold);cursor:pointer;transition:all .2s ease;font-family:var(--font-family-primary);min-width:80px;box-shadow:0 3px 6px #f8d0554d}.increment-btn:hover{background-color:#f0c040;transform:translateY(-2px);box-shadow:0 5px 10px #f8d05566}.increment-btn:active{transform:translateY(0)}.control-btn{border:none;padding:15px 25px;border-radius:10px;font-size:18px;font-weight:var(--font-weight-semibold);cursor:pointer;transition:all .2s ease;font-family:var(--font-family-primary);min-width:100px;color:#fff}.sound-checkbox-container{margin-top:30px;padding-top:25px;border-top:1px solid #e0e0e0}.sound-checkbox-label{display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:var(--font-weight-medium);color:#555;cursor:pointer;font-family:var(--font-family-primary);-webkit-user-select:none;user-select:none}.sound-checkbox{width:20px;height:20px;cursor:pointer;accent-color:var(--primary-color)}.sound-checkbox-label:hover{color:#333}@media (max-width: 768px){.countdown-modal{padding:25px;margin:10px}.countdown-title{font-size:24px;margin-bottom:30px}.timer-circle-container{width:280px;height:280px;margin-bottom:30px}.timer-circle{width:280px;height:280px}.circle-background,.circle-progress{stroke-width:28}.timer-time-display{font-size:40px}.increment-buttons{gap:10px;margin-bottom:25px}.increment-btn{padding:12px 16px;font-size:16px;min-width:70px}.control-buttons{gap:10px}.control-btn{padding:12px 20px;font-size:16px;min-width:85px}}@media (max-width: 480px){.timer-circle-container,.timer-circle{width:240px;height:240px}.circle-background,.circle-progress{stroke-width:24}.timer-time-display{font-size:32px}.increment-buttons,.control-buttons{flex-direction:column;align-items:center}}.stopwatch-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000;display:flex;align-items:center;justify-content:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.stopwatch-modal{background:#fff;padding:40px;border-radius:20px;box-shadow:var(--shadow);text-align:center;max-width:450px;width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .3s ease;font-family:var(--font-family-primary)}.stopwatch-title{font-size:28px;font-weight:var(--font-weight-bold);color:var(--primary-color);margin-bottom:40px;letter-spacing:.5px}.time-container{margin-bottom:40px}.time-display{font-size:64px;font-weight:var(--font-weight-bold);color:#333;font-family:var(--font-family-primary);letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,.1);padding:10px 0;display:block}.control-buttons{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.control-btn{border:none;padding:15px 25px;border-radius:10px;font-size:18px;font-weight:var(--font-weight-semibold);cursor:pointer;transition:all .2s ease;font-family:var(--font-family-primary);min-width:120px;color:#fff}.control-btn.start{background-color:var(--success-color);box-shadow:0 3px 6px #6dc9824d}.control-btn.start:hover:not(:disabled){background-color:#5cb874;transform:translateY(-2px)}.control-btn.pause{background-color:var(--warning-color);box-shadow:0 3px 6px #f57c004d}.control-btn.pause:hover:not(:disabled){background-color:#e06900;transform:translateY(-2px)}.control-btn.reset{background-color:var(--danger-color);box-shadow:0 3px 6px #cf636d4d}.control-btn.reset:hover:not(:disabled){background-color:#b85a65;transform:translateY(-2px)}.control-btn:disabled{background-color:#ccc;cursor:not-allowed;transform:none;box-shadow:none}@media (max-width: 768px){.stopwatch-modal{padding:25px;margin:10px}.stopwatch-title{font-size:24px;margin-bottom:30px}.time-container{margin-bottom:30px}.time-display{font-size:52px}.control-buttons{gap:10px}.control-btn{padding:12px 20px;font-size:16px;min-width:100px}}@media (max-width: 480px){.time-container{margin-bottom:30px}.time-display{font-size:40px;padding:15px 0}.control-buttons{flex-direction:column;align-items:center}}:root{--primary-color: #6595c9;--secondary-color: #f8d055;--success-color: #6dc982;--warning-color: #f57c00;--danger-color: #cf636d;--light-gray: #f9f9f9;--border-color: #ccc;--font-family-primary: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--shadow: 0 0 12px rgba(0, 0, 0, .2)}.displayboard-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000;display:flex;align-items:center;justify-content:center}.displayboard-modal{background:#fff;padding:40px;border-radius:20px;box-shadow:var(--shadow);text-align:center;max-width:90%;width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .3s ease;font-family:var(--font-family-primary)}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-close{position:absolute;top:15px;right:20px;background:none;border:none;font-size:24px;cursor:pointer;color:#666;padding:5px;border-radius:50%;width:35px;height:35px;display:flex;align-items:center;justify-content:center}.modal-close:hover{background-color:#f0f0f0;color:#333}.pencil-btn{position:absolute;top:15px;left:20px;background:#fff;border:2px solid var(--primary-color);font-size:20px;cursor:pointer;padding:8px 12px;border-radius:8px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pencil-btn:hover{background-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 3px 6px #6595c94d}.displayboard-title{font-size:28px;font-weight:var(--font-weight-bold);color:var(--primary-color);margin-bottom:40px;letter-spacing:.5px}.edit-container{margin-bottom:40px;display:flex;flex-direction:column;gap:15px;align-items:center}.input-row{display:flex;gap:15px;width:100%;max-width:800px;justify-content:center;position:relative}.input-wrapper{flex:1;position:relative}.text-input{width:100%;padding:15px 20px;font-size:18px;border:2px solid var(--border-color);border-radius:10px;font-family:var(--font-family-primary);transition:border-color .2s ease}.text-input:focus{outline:none;border-color:var(--primary-color)}.dropdown-menu{position:absolute;top:100%;left:0;right:0;background:#fff;border:2px solid var(--primary-color);border-top:none;border-radius:0 0 10px 10px;max-height:300px;overflow-y:auto;z-index:100;box-shadow:0 4px 8px #0000001a;margin-top:-10px}.dropdown-item{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;cursor:pointer;transition:background-color .2s ease;border-bottom:1px solid #f0f0f0}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background-color:#f0f8ff}.dropdown-text{flex:1;text-align:left;font-size:16px;color:#333;-webkit-user-select:none;user-select:none}.dropdown-remove-btn{background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease;flex-shrink:0;margin-left:10px}.dropdown-remove-btn:hover{background-color:var(--danger-color);color:#fff;transform:scale(1.1)}.afficher-btn{background-color:var(--success-color);color:#fff;border:none;padding:15px 30px;border-radius:10px;font-size:18px;font-weight:var(--font-weight-semibold);cursor:pointer;transition:all .2s ease;font-family:var(--font-family-primary);box-shadow:0 3px 6px #6dc9824d}.afficher-btn:hover{background-color:#5cb874;transform:translateY(-2px)}.display-container{min-height:200px;display:flex;align-items:center;justify-content:center;padding:20px}.display-text{font-size:140px;font-weight:var(--font-weight-bold);color:#5425d6;font-family:var(--font-family-primary);letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,.1);line-height:1.2;word-wrap:break-word;overflow-wrap:break-word;max-width:100%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (max-width: 1024px){.display-text{font-size:100px}}@media (max-width: 768px){.displayboard-modal{padding:25px;margin:10px}.displayboard-title{font-size:24px;margin-bottom:30px}.edit-container{margin-bottom:30px}.input-row{flex-direction:column}.text-input,.afficher-btn{font-size:16px;padding:12px 20px}.display-text{font-size:80px}}@media (max-width: 480px){.displayboard-modal{padding:20px}.pencil-btn{font-size:18px;padding:6px 10px}.displayboard-title{font-size:20px;margin-bottom:20px}.display-text{font-size:60px}.history-text{font-size:14px}.history-dropdown{font-size:14px;padding:10px 15px}}:root{--primary-color: #6595c9;--secondary-color: #f8d055;--success-color: #6dc982;--warning-color: #f57c00;--danger-color: #cf636d;--light-gray: #f9f9f9;--border-color: #ccc;--border-color-selected: #4b4dc5;--shadow: 0 0 12px rgba(0, 0, 0, .2);--menu-width: 80px;--points-plus-color: #4caf50;--points-minus-color: #ff9800;--points-undo-color: #9c27b0;--font-family-primary: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif;--font-size-base: 16px;--font-size-lg: 18px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-normal: 1.5}body{font-family:var(--font-family-primary);font-size:var(--font-size-base);line-height:var(--line-height-normal);margin:0 0 80px;padding:0;overflow-x:hidden;background:#fff;min-height:100vh;overflow:hidden;height:100vh}*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button:focus,input:focus,select:focus,.student-card:focus,.menu-button:focus,.classroom-button:focus{outline:none}input,textarea,.drawer-content,.modal-body{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.main-container{display:flex;height:100vh;overflow:visible}#left-menu{width:var(--menu-width);background-color:#fff;border-right:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;padding-top:64px;z-index:20;height:100vh;overflow-y:auto;overflow-x:hidden}.svg-placeholder{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;transition:all .3s ease}.svg-placeholder svg{width:100%;height:100%;color:inherit;fill:currentColor;transition:all .3s ease}.menu-button{cursor:pointer;background-color:#fff;border:4px solid #aaa;border-radius:6px;height:48px;width:48px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease;position:relative;color:#aaa}.menu-button:hover{border-color:var(--primary-color);color:var(--primary-color)}.menu-button:after{content:attr(data-tooltip);position:fixed;top:var(--tooltip-top);left:var(--tooltip-left);transform:translateY(-50%);z-index:10000;background:#2c3e50;color:#fff;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:500;white-space:nowrap;font-family:var(--font-family-primary);box-shadow:0 4px 12px #00000026;border:1px solid rgba(255,255,255,.1);letter-spacing:.5px;opacity:0;pointer-events:none}.menu-button:hover:after{opacity:1;left:calc(var(--tooltip-left, 92px) + 2px)}.menu-button:before{content:"";position:absolute;top:50%;left:calc(100% + 6px);transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #2c3e50;opacity:0;pointer-events:none;z-index:999}.menu-button:hover:before{opacity:1;transform:translateY(-50%) translate(2px)}.sync-status{position:relative;cursor:pointer;transition:all .3s ease;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:4px}.sync-status.synced{background-color:#27ae60;color:#fff}.sync-status:hover{transform:scale(1.1);box-shadow:0 2px 8px #0003}#main-content{flex:1;display:flex;flex-direction:column;background:#fff;height:100vh;overflow:hidden}.header{display:flex;align-items:center;justify-content:space-between;padding:0 12px;-webkit-user-select:none;user-select:none;flex-shrink:0;background:#fff;border-bottom:1px solid var(--border-color);Optional:visual separation z-index: 10;min-height:60px}.classroom-info{display:flex;align-items:center;gap:20px}.classroom-title{font-size:28px;margin-top:12px;color:#6868b6;font-weight:700;letter-spacing:1.5px;line-height:1;display:flex;align-items:center}.classroom-score{display:flex;align-items:center;gap:8px;padding-left:20px;border-left:1px solid #ccc;height:100%}.score-label{font-size:18px;line-height:1;display:flex;align-items:center}.score-badge{background-color:orange;color:#fff;padding:6px 12px;border-radius:12px;font-size:16px;font-weight:700;box-shadow:var(--shadow)}.header-logo button{background-color:var(--primary-color);color:#fff;border:none;padding:10px 15px;border-radius:5px;cursor:pointer;font-weight:700}.teams-checkbox-container{display:flex;align-items:center;gap:8px;padding-left:20px;border-left:1px solid #ccc;height:100%}.teams-checkbox-container input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary-color);cursor:pointer;border-radius:50%}.teams-checkbox-container label{font-size:18px;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;color:#333;font-family:var(--font-family-primary);font-weight:var(--font-weight-medium)}#student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(120px * var(--zoom-scale)),auto));gap:8px;padding:2px;transition:all .3s ease;z-index:auto}.student-grid-container{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 20px 40px;margin-bottom:78px;background:#fff;min-height:0;z-index:auto}.student-card{display:flex;box-sizing:border-box;flex-direction:column;align-items:center;width:106px;height:148px;border:2px solid var(--border-color);border-radius:12px;background-color:#fff;position:relative;margin:10px;padding:0 6px;box-shadow:var(--shadow);text-align:center;cursor:pointer;transition:box-shadow .3s ease,border-color .3s ease;z-index:1}.student-card.selected{background-color:#c4d6e7;border:2px solid var(--border-color-selected)}.student-avatar{width:82px;height:82px;border-radius:5px;margin-bottom:0;margin-top:6px;object-fit:cover}.student-badge{position:absolute;bottom:-20px;left:-10px;background-color:orange;color:#fff;padding:6px 12px;border-radius:12px;font-size:16px;font-weight:700;box-shadow:var(--shadow)}.student-name{display:block;font-weight:700;color:#555;margin-top:4px;margin-bottom:4px;max-width:200px;font-size:clamp(14px,4vw,16px);line-height:.9;word-break:break-word;overflow-wrap:break-word}.student-checkbox{position:absolute;bottom:-20px;right:-10px;width:30px;height:30px;cursor:pointer;z-index:2;accent-color:rgb(121,121,224);box-shadow:2px 0 8px #0003}.student-card:hover{box-shadow:0 0 16px #0000004d;border-color:#18abbf}.student-card.selected{background-color:#c4d6e7}.student-card.absent{opacity:.8;background-color:#f5f5f5;border-color:#ccc}.student-card.absent:hover{box-shadow:var(--shadow);border-color:#ccc}.student-card.absent .student-avatar,.student-card.absent .student-badge{filter:grayscale(80%)}.student-card.absent .student-checkbox{visibility:hidden}.student-card.team-member-highlighted{box-shadow:0 0 0 4px var(--team-highlight-color);transition:box-shadow .2s ease}.no-students{width:100%;text-align:center;padding:40px;color:#666;font-style:italic}#bottom-menu{position:fixed;bottom:0;left:0;width:100%;background-color:#fff;border-top:1px solid var(--border-color);padding:20px 15px;display:flex;justify-content:flex-start;align-items:center;gap:20px;z-index:10;box-shadow:0 -2px 8px #0000001a;padding-left:calc(var(--menu-width) + 15px)}.menu-section{display:flex;gap:10px;margin-left:-4px}.menu-section+.menu-section{border-left:1px solid var(--border-color);padding-left:20px}.menu-section button{padding:13px;font-size:14px;font-weight:700;cursor:pointer;border:none;border-radius:5px;height:40px;transition:background-color .3s,transform .2s;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;justify-content:flex-start}.menu-section button:hover{transform:scale(1.04)}.menu-section:first-child button:first-child{background-color:#4caf50;color:#fff}.menu-section:first-child button:first-child:hover{background-color:#45a049}.menu-section:first-child button:nth-child(2){background-color:#ff9800;color:#fff}.menu-section:first-child button:nth-child(2):hover{background-color:#f57c00}.menu-section:first-child button:last-child{background-color:#b71c1c;color:#fff}.menu-section:first-child button:last-child:hover{background-color:#8b0000}.menu-section:nth-child(2) button{background-color:var(--primary-color);color:#fff}.menu-section:nth-child(2) button:hover{background-color:#5a8bb8}.menu-section:last-child button{background-color:#94729e;color:#fff}.menu-section:last-child button:hover{background-color:#815d8b}.attendance-button{background-color:#607d8b;color:#fff}.selection-button-content{display:flex;align-items:center;gap:8px;width:100%}.selection-button{font-size:14px;font-weight:700;cursor:pointer;border:none;border-radius:5px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:background-color .3s,transform .2s;background-color:#2b8b6b;color:#fff;justify-content:flex-start;height:40px;overflow:hidden}.selection-button:hover{background-color:#24755a}.selection-button-checkbox{width:20px;height:20px;accent-color:rgb(121,121,224);cursor:pointer;border-radius:50%;flex-shrink:0;pointer-events:none;margin:0}.zoom-button{padding:12px;min-width:40px;font-size:13px;cursor:pointer;border:none;border-radius:5px;overflow:hidden}.zoom-symbol{font-size:24px;font-weight:var(--font-weight-bold);-webkit-user-select:none;user-select:none;margin:-3px;line-height:22px}.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:none;align-items:center;justify-content:center;font-family:var(--font-family-primary)}.modal.active{display:flex}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.modal-close{position:absolute;top:10px;right:15px;font-size:28px;font-weight:700;cursor:pointer;color:#aaa;z-index:1002}.modal-header h3{font-size:20px;font-weight:var(--font-weight-semibold);line-height:1.25;margin:0 0 12px;color:#333}.modal-body input[type=text]{font-family:var(--font-family-primary);font-size:var(--font-size-base);line-height:var(--line-height-normal);width:100%;padding:12px;border:2px solid #ddd;border-radius:5px;margin-bottom:12px;box-sizing:border-box}.modal-body input[type=text]:focus{border-color:var(--primary-color);outline:none}.modal-body select{font-family:var(--font-family-primary);font-size:var(--font-size-base);line-height:var(--line-height-normal);width:100%;padding:12px;border:2px solid #ddd;border-radius:5px;margin-bottom:12px;box-sizing:border-box;background-color:#fff;cursor:pointer}.modal-body select:focus{border-color:var(--primary-color);outline:none}.modal button:disabled{background-color:#ccc;cursor:not-allowed}.modal button:disabled:hover{background-color:#ccc}.error-message{color:red;margin-top:10px;font-size:14px}.drawer{position:fixed;top:0;left:0;width:260px;height:100%;background-color:var(--light-gray);box-shadow:0 4px 20px #0006;transform:translate(-110%);transition:transform .3s ease;display:flex;flex-direction:column;padding:10px;z-index:1150}.drawer.active{transform:translate(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:10px;border-bottom:1px solid var(--border-color);margin-bottom:10px}.drawer-title{font-size:20px;font-weight:700;color:#333}.drawer-close{font-size:32px;cursor:pointer;background:none;border:none;color:#555;line-height:1;padding:4px}.drawer-close:hover{color:tomato;transform:scale(1.1)}.drawer-content{flex:1;overflow-y:auto;padding:10px}.drawer-content h3{font-size:18px;color:#333;margin:15px 0 10px;border-bottom:2px solid var(--primary-color);padding-bottom:5px}.drawer-content button{display:block;width:100%;padding:10px 20px;margin-bottom:12px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;text-align:center;font-weight:700;transition:background-color .3s,transform .3s;font-size:16px}.drawer-content button:hover{background-color:#5a8bb8;transform:scale(1.02)}.classroom-list{margin-bottom:20px}.classroom-item{display:flex;align-items:center}.classroom-button{background-color:#31b248!important;display:flex;align-items:center;justify-content:space-between;padding:8px 12px}.classroom-button:hover{background-color:#3cd157!important}.classroom-button.active{background-color:#59c06c!important}.active-indicator{font-size:12px;margin-left:auto;font-weight:700;color:#fff}.delete-classroom-btn{width:auto!important;min-width:30px;padding:8px 10px!important;margin-bottom:0!important;background-color:var(--danger-color)!important;font-size:18px;font-weight:400}.delete-classroom-btn:hover{background-color:#b85a65!important}.config-option{display:flex;align-items:center;margin-bottom:15px}.config-option input[type=checkbox]{width:20px;height:20px;margin-right:10px;accent-color:var(--primary-color)}.config-option label{font-size:16px;cursor:pointer}.config-option select{margin-left:10px;padding:5px 10px;border:1px solid #ddd;border-radius:5px;background-color:#fff;font-size:14px;cursor:pointer}.config-option select:focus{border-color:var(--primary-color);outline:none}.notification-container{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:10000;pointer-events:none}.notification-item{position:relative;background-color:var(--primary-color, #6595c9);color:#fff;padding:20px 32px;border-radius:12px;box-shadow:0 6px 20px #0000004d;font-size:18px;font-weight:700;opacity:0;transition:all .3s ease;max-width:90vw;min-width:320px;text-align:center;word-wrap:break-word;border:none;line-height:1.4;margin-bottom:10px;cursor:pointer;pointer-events:auto;transform:translateY(-20px)}.notification-item.show{opacity:1;transform:translateY(0)}.notification-item.success{background:#4caf50!important}.notification-item.warning{background:#ff9800!important}.notification-item.error{background:#f44336!important}.notification-item.info{background:#12b081fa!important}.notification-item.points-plus{background:#81c784!important}.notification-item.points-minus{background:#ffb74d!important}.notification-item.points-exchange{background:#64b5f6!important}.notification-item.points-undo{background:#9c27b0!important}.notification-item.recovery{background:#9b59b6!important}.notification-icon{margin-right:8px}.notification-message{flex:1}.radio-group-actions{display:flex;gap:30px;justify-content:left;margin-bottom:20px}.action-source-option{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700;cursor:pointer;padding:15px 20px;border-radius:10px;transition:all .3s ease;border:2px solid transparent}.action-source-option.selected{background-color:#2196f31a;border-color:#2196f3}.action-source-option:hover{background-color:#0000000d}.action-source-option.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.action-source-option.disabled:hover{background-color:transparent}.action-source-option input[type=radio]{display:none}.action-source-circle{width:24px;height:24px;border-radius:50%;border:3px solid}.action-source-circle.blue{background-color:#2196f3;border-color:#1976d2}.action-source-circle.gray{background-color:#e0e0e0;border-color:#bdbdbd}.action-source-option.selected .action-source-circle.gray,.action-source-option.selected .action-source-circle.blue{background-color:#2196f3;border-color:#1976d2}.action-source-option:not(.selected) .action-source-circle.blue{background-color:#e0e0e0;border-color:#bdbdbd}.action-source-option:not(.selected) .action-source-circle.gray{background-color:#e0e0e0;border-color:#bdbdbd}.group-size-selection h4{text-align:center;margin-bottom:20px;font-size:16px;color:#333;font-weight:500;font-family:var(--font-family-primary)}.group-size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;max-width:400px;margin:0 auto}.group-size-button{width:80px;height:80px;border:none;border-radius:10px;background-color:coral;color:#fff;font-size:24px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 8px #ff7f504d;font-family:var(--font-family-primary)}.group-size-button:hover{background-color:tomato;transform:translateY(-2px);box-shadow:0 6px 12px #ff7f5066}.group-size-button:active{transform:translateY(0)}.modal-content:has(.generated-groups-display){max-width:95vw;width:95vw;max-height:90vh;margin:2.5vh auto}.generated-groups-display{max-height:65vh;overflow-y:auto;padding:10px}.groups-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;padding:0}.group-card{background-color:#fff;border:2px solid #ddd;border-radius:12px;padding:15px;box-shadow:0 3px 6px #0000001a;text-align:center;display:flex;flex-direction:column}.group-card-title{margin:0 0 4px;font-size:16px;color:#333;font-weight:var(--font-weight-semibold);font-family:var(--font-family-primary);flex-shrink:0}.group-card-members{display:grid;grid-template-columns:repeat(auto-fit,minmax(50px,1fr));gap:8px;justify-items:center;flex-grow:1;align-content:start}.group-card-member{display:flex;flex-direction:column;align-items:center}.group-card-avatar{width:65px;height:65px;border-radius:6px;object-fit:cover;margin-bottom:6px;border:2px solid #ddd}.group-card-name{font-size:14px;font-weight:var(--font-semibold-medium);color:#555;text-align:center;word-wrap:break-word;font-family:var(--font-family-primary);line-height:1.1;max-width:85px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;word-break:break-all}@media (max-width: 1200px){.groups-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}.group-card{padding:8px}.group-card-avatar{width:55px;height:55px}.group-card-name{font-size:11px}}@media (max-width: 768px){.modal-content:has(.generated-groups-display){max-width:98vw;width:98vw;margin:1vh auto}.groups-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.group-card{padding:8px;min-height:160px}.group-card-avatar{width:50px;height:50px}.group-card-name{font-size:10px;max-width:70px}}@media (max-width: 768px){.notification-item{top:10px;left:10px;right:10px;transform:none;max-width:calc(100vw - 20px);min-width:auto;font-size:16px;padding:16px 24px}.notification-item.show{transform:none}.notification-container{position:fixed;top:10px;left:10px;right:10px;transform:none}}@media (max-width: 1400px){.student-card{transform:scale(.9);width:106px;height:148px}.student-avatar{width:82px;height:82px}}@media (max-width: 1240px){.student-card{transform:scale(.9);width:96px;height:148px}.student-avatar{width:82px;height:82px}.menu-section button{font-size:12px;padding:6px}}@media (max-width: 934px){.menu-section{gap:4px;padding-right:0}.modal-content,.edit-avatar-image{transform:scale(.75)}.drawer{width:210px}.config-option label{font-size:14px}.config-option select{font-size:10px}.drawer-content h3{font-size:16px}.drawer-content button{font-size:14px}}@media (max-width: 768px){.sync-label{font-size:9px;letter-spacing:.3px}.sidebar-footer{padding:10px 8px;gap:4px}.sync-status{width:38px;height:38px}.cloud-icon{width:20px;height:20px}#main-content{flex:1;display:flex;flex-direction:column;background:#fff;height:100vh;overflow:hidden;z-index:auto}#left-menu{transform:translate(-100%)}#bottom-menu{left:0;padding:10px;gap:15px}.drawer{width:100%}}.random-select-content{display:flex;gap:30px;align-items:flex-start}.random-select-left{flex:1;min-width:300px}.random-select-right{flex:1;min-width:250px}.number-selection h4{text-align:center;margin-bottom:20px;font-size:16px;color:#333;font-weight:500;font-family:var(--font-family-primary)}.number-selection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;max-width:400px;margin:0 auto}.number-selection-button{width:80px;height:80px;border:none;border-radius:10px;background-color:coral;color:#fff;font-size:24px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 8px #ff7f504d;font-family:var(--font-family-primary)}.number-selection-button:hover{background-color:tomato;transform:translateY(-2px);box-shadow:0 6px 12px #ff7f5066}.number-selection-button:active{transform:translateY(0)}.selection-info{margin-top:15px;text-align:center}.selection-info p{font-size:14px;color:#666;font-style:italic;margin:0;padding:10px 15px;background-color:#f0f8ff;border-radius:5px;line-height:1.4}.selected-students-container{border:2px solid #ddd;border-radius:10px;background-color:#f9f9f9;min-height:300px;padding:15px}.selected-students-title{font-size:18px;font-weight:var(--font-weight-semibold);color:#333;margin-bottom:15px;text-align:center;font-family:var(--font-family-primary)}.selected-students-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;justify-items:center}.selected-student-card{display:flex;flex-direction:column;align-items:center;background-color:#fff;border:2px solid #ddd;border-radius:12px;padding:12px 8px 8px;box-shadow:0 2px 4px #0000001a;transition:all .2s ease;position:relative;width:100px;min-height:120px}.selected-student-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026;border-color:#cce7ff}.student-order-badge{position:absolute;top:-8px;right:-8px;width:24px;height:24px;background-color:var(--primary-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:2px solid white;box-shadow:0 2px 4px #0003}.selected-student-avatar{width:60px;height:60px;border-radius:6px;object-fit:cover;border:2px solid #ddd;margin-bottom:8px}.selected-student-name{font-size:12px;font-weight:var(--font-weight-medium);color:#333;text-align:center;line-height:1.2;word-wrap:break-word;overflow-wrap:break-word;font-family:var(--font-family-primary);max-width:90px}.hovered-team-display{display:flex;align-items:center;padding-left:8px;pointer-events:none}.hovered-team-name{padding:6px 16px;border-radius:12px;font-size:16px;font-weight:600;white-space:nowrap;animation:teamNameFadeIn .2s ease-out;min-height:20px;display:flex;align-items:center;justify-content:center}@keyframes teamNameFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.header{position:relative}.loading-classroom-message{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;color:#666;font-size:16px}.loading-spinner{width:40px;height:40px;border:3px solid #f3f3f3;border-top:3px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.no-classroom-message,.no-students-message{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;color:#666;text-align:center;font-size:16px}.no-classroom-message p,.no-students-message p{margin:8px 0}.points-config-container{max-height:60vh;overflow-y:auto;border:1px solid #ddd;border-radius:5px;background-color:#fff}.points-config-header{display:grid;grid-template-columns:80px 1fr 100px;gap:10px;padding:15px 20px;background-color:#f4f4f4;border-bottom:2px solid #ddd;font-weight:700;position:sticky;top:0;z-index:10;color:#333}.config-header-visible,.config-header-name,.config-header-points{font-size:14px;font-weight:600;text-align:center}.points-config-item{display:grid;grid-template-columns:80px 1fr 100px;gap:10px;padding:12px 20px;border-bottom:1px solid #eee;align-items:center;transition:background-color .2s ease}.points-config-item:nth-child(2n){background-color:#f9f9f9}.points-config-item:hover{background-color:#e8f4f8}.points-config-item input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary-color);cursor:pointer;margin:0 auto;display:block}.points-config-item input[type=text]{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:3px;font-size:14px;font-family:var(--font-family-primary);box-sizing:border-box;transition:border-color .3s ease}.points-config-item input[type=text]:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 2px #6595c933}.points-config-item input[type=text]::placeholder{color:#999;font-style:italic}.points-config-item input[type=number]{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:3px;font-size:14px;font-family:var(--font-family-primary);text-align:center;box-sizing:border-box;transition:border-color .3s ease}.points-config-item input[type=number]:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 2px #6595c933}.points-config-item input[type=number]::-webkit-outer-spin-button,.points-config-item input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.points-config-item input[type=number]{-moz-appearance:textfield}.modal-content:has(.points-config-container){max-width:800px;width:90%}@media (max-width: 768px){.points-config-header{grid-template-columns:60px 1fr 80px;padding:12px 15px;font-size:12px}.points-config-item{grid-template-columns:60px 1fr 80px;padding:10px 15px}.points-config-item input[type=checkbox]{width:18px;height:18px}.points-config-item input[type=text],.points-config-item input[type=number]{padding:6px 8px;font-size:13px}.modal-content:has(.points-config-container){max-width:95%;margin:10px}}.points-config-container::-webkit-scrollbar{width:8px}.points-config-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.points-config-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.points-config-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.teams-config-container{max-height:54vh;overflow-y:auto;border:1px solid #ddd;border-radius:5px;background-color:#fff}.teams-config-header{display:grid;grid-template-columns:80px 1fr 120px;gap:10px;padding:15px 20px;background-color:#f4f4f4;border-bottom:2px solid #ddd;font-weight:700;position:sticky;top:0;z-index:10;color:#333}.config-header-enabled,.config-header-name,.config-header-color{font-size:14px;font-weight:600;text-align:center}.config-header-name{text-align:left}.teams-config-item{display:grid;grid-template-columns:80px 1fr 120px;gap:10px;padding:12px 20px;border-bottom:1px solid #eee;align-items:center;transition:background-color .2s ease}.teams-config-item:nth-child(2n){background-color:#f9f9f9}.teams-config-item:hover{background-color:#e8f4f8}.teams-config-item input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary-color);cursor:pointer;margin:0 auto;display:block}.teams-config-item input[type=text]{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:3px;font-size:14px;font-family:var(--font-family-primary);box-sizing:border-box;transition:border-color .3s ease}.teams-config-item input[type=text]:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 2px #6595c933}.teams-config-item input[type=text]::placeholder{color:#999;font-style:italic}.teams-config-item input[type=color]{width:100%;height:40px;padding:4px;border:1px solid #ddd;border-radius:3px;cursor:pointer;box-sizing:border-box;transition:border-color .3s ease}.teams-config-item input[type=color]:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 2px #6595c933}.modal-content:has(.teams-config-container){max-width:800px;width:90%}@media (max-width: 768px){.teams-config-header{grid-template-columns:60px 1fr 100px;padding:12px 15px;font-size:12px}.teams-config-item{grid-template-columns:60px 1fr 100px;padding:10px 15px}.teams-config-item input[type=checkbox]{width:18px;height:18px}.teams-config-item input[type=text]{padding:6px 8px;font-size:13px}.teams-config-item input[type=color]{height:35px}.modal-content:has(.teams-config-container){max-width:95%;margin:10px}}.teams-config-container::-webkit-scrollbar{width:8px}.teams-config-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.teams-config-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.teams-config-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.conflicts-container{max-height:60vh;overflow-y:auto;border:1px solid #ddd;border-radius:5px;background-color:#fff;padding:20px;width:500px;margin-top:32px}.conflicts-list{margin-bottom:30px}.conflicts-list h4{font-size:16px;font-weight:600;color:#333;margin-bottom:15px;font-family:var(--font-family-primary)}.conflict-item{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;margin-bottom:8px;background-color:#f9f9f9;border:1px solid #e0e0e0;border-radius:5px;font-family:var(--font-family-primary)}.conflict-item span{font-size:14px;color:#333;flex-grow:1}.remove-conflict-btn{background-color:var(--danger-color);color:#fff;border:none;padding:6px 12px;border-radius:3px;cursor:pointer;font-size:12px;font-weight:500;transition:background-color .3s}.remove-conflict-btn:hover{background-color:#b85a65}.add-conflict{border-top:2px solid #eee;padding-top:20px}.add-conflict h4{font-size:16px;font-weight:600;color:#333;margin-bottom:15px;font-family:var(--font-family-primary)}.conflict-selects{display:flex;gap:15px;margin-bottom:15px}.conflict-selects select{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:3px;font-size:14px;font-family:var(--font-family-primary);background-color:#fff;cursor:pointer}.conflict-selects select:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 2px #6595c933}.add-conflict button{background-color:var(--primary-color);color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .3s}.add-conflict button:hover:not(:disabled){background-color:#5a8bb8}.add-conflict button:disabled{background-color:#ccc;cursor:not-allowed}.points-grid-container{display:grid;grid-template-columns:repeat(3,120px);grid-template-rows:repeat(3,120px);gap:20px;max-height:50vh;min-height:50vh;overflow-y:auto;padding:10px;box-sizing:border-box;border:1px solid #ddd;border-radius:5px;justify-content:center}.points-grid-button{-webkit-user-select:none;user-select:none;width:100px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:15px;cursor:pointer;text-align:center;box-shadow:0 4px 8px #0003;position:relative;font-family:Arial,sans-serif;border:4px solid;transition:all .3s ease}.points-grid-button:hover{transform:scale(1.05);box-shadow:0 6px 12px #0000004d}.points-grid-button.points-plus-button{background-color:#b9fcbf;border-color:#81c784}.points-grid-button.points-minus-button{background-color:#ffe0b2;border-color:#ffb74d}.points-grid-button.points-exchange-button{background-color:#b2dcff;border-color:#4d7cff}.points-grid-button.points-exchange-button.disabled{opacity:1;background-color:#f0f8ff;border-color:#d1e7dd;cursor:not-allowed;pointer-events:none;position:relative}.points-grid-button.points-exchange-button.disabled .circle{color:#a8c8ec;border-color:#a8c8ec;background-color:#f8fbff}.points-grid-button.points-exchange-button.disabled p{color:#b0b8c0;font-weight:400}.points-grid-button.points-exchange-button.disabled:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(200,200,200,.1) 10px,rgba(200,200,200,.1) 20px);border-radius:15px;pointer-events:none}.points-grid-button.points-exchange-button.disabled:hover{transform:none;box-shadow:0 4px 8px #0003}.points-grid-button .circle{font-family:var(--font-family-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);width:50px;height:50px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;top:10px;left:50%;transform:translate(-50%);border:3px solid}.points-grid-button.points-plus-button .circle{color:#388e3c;border-color:#388e3c}.points-grid-button.points-minus-button .circle{color:#f57c00;border-color:#f57c00}.points-grid-button.points-exchange-button .circle{color:#0400f5;border-color:#0400f5}@media (max-width: 768px){.points-grid-container{grid-template-columns:repeat(2,120px);min-height:300px}}:root{--primary-color: #6595c9;--secondary-color: #f8d055;--success-color: #6dc982;--warning-color: #f57c00;--danger-color: #cf636d;--light-gray: #f9f9f9;--border-color: #ccc;--shadow: 0 0 12px rgba(0, 0, 0, .2);--points-plus-color: #4caf50;--points-minus-color: #ff9800;--points-undo-color: #9c27b0;--font-family-primary: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75}*{box-sizing:border-box}body{background:#fff;font-family:var(--font-family-primary);font-size:var(--font-size-base);line-height:var(--line-height-normal);margin:0 0 80px;padding:0;overflow-x:hidden}.demo-controls{text-align:center;margin:20px;padding:20px;background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a}.demo-btn{background:var(--primary-color);color:#fff;border:none;padding:12px 24px;border-radius:5px;font-size:16px;cursor:pointer;margin:5px;transition:background .3s;font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold)}.demo-btn:hover{background:#5a8bb8}#edit-student-history-container,#edit-student-avatar-selection-container{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fff;display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;z-index:1000;padding:20px;border-radius:8px;box-sizing:border-box}.modal-title-label-text{font-weight:var(--font-weight-semibold);color:#333;margin-bottom:15px;font-size:var(--font-size-lg);font-family:var(--font-family-primary);text-align:center;flex-shrink:0}#edit-student-history-content{background:#fff;padding:0;border-radius:10px;flex:1;overflow:hidden;display:flex;flex-direction:column;border:1px solid #ddd;box-sizing:border-box}.history-table-container{flex:1;overflow-y:auto;overflow-x:hidden;border:none;border-radius:0;background:#fff;scroll-behavior:smooth;box-sizing:border-box}.student-history-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;font-family:var(--font-family-primary);min-height:100%}.student-history-table thead.sticky-header{position:sticky;top:0;z-index:10;background:#f8f9fa;box-shadow:0 2px 4px #0000001a}.student-history-table th{background:#f8f9fa;color:#333;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);padding:12px 8px;text-align:left;border-bottom:2px solid #dee2e6;white-space:nowrap;position:relative;font-family:var(--font-family-primary)}.student-history-table tbody tr{border-bottom:1px solid #eee;transition:background-color .15s ease}.student-history-table tbody tr:hover{background-color:#f8f9fa}.student-history-table tbody tr:last-child{border-bottom:none}.student-history-table tbody tr:nth-child(odd){background-color:#fafafa}.student-history-table tbody tr:nth-child(2n){background-color:#fff}.student-history-table td{padding:10px 8px;vertical-align:top;border-bottom:1px solid #eee;font-family:var(--font-family-primary);font-size:var(--font-size-sm)}.student-history-table th:not(:last-child),.student-history-table td:not(:last-child){border-right:1px solid #e0e0e0}.date-cell{min-width:140px;font-size:var(--font-size-xs);color:#666;font-family:var(--font-family-primary)}.type-cell{min-width:80px;font-weight:var(--font-weight-medium);text-transform:capitalize;color:#555}.points-cell{min-width:70px;text-align:center;font-weight:var(--font-weight-semibold);font-family:Courier New,Monaco,Lucida Console,monospace}.total-cell{min-width:70px;text-align:center;font-weight:var(--font-weight-semibold);background-color:#f8f9fa;font-family:Courier New,Monaco,Lucida Console,monospace}.note-cell{word-wrap:break-word;font-style:italic;color:#555;line-height:var(--line-height-normal)}.points-positive{color:var(--points-plus-color)}.points-negative{color:var(--warning-color)}.points-neutral{color:#6c757d}.no-history{text-align:center;color:#999;font-style:italic;padding:60px 20px;font-family:var(--font-family-primary);font-size:var(--font-size-base);height:100%;display:flex;align-items:center;justify-content:center}#button-show-edit-student-history{background-color:var(--primary-color);color:#fff;border:none;padding:8px 16px;border-radius:5px;cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-primary);transition:background-color .3s ease}#button-show-edit-student-history:hover{background-color:#5a8bb8}.edit-student-avatar-selection-content{background:#fff;padding:10px;border-radius:10px;flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));grid-gap:10px;border:1px solid #ddd;box-sizing:border-box}.edit-student-avatar-selection-content img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform .2s ease}.edit-student-avatar-selection-content img:hover{transform:scale(1.1)}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.edit-student-container{flex-direction:column;gap:20px;min-width:auto}.edit-student-avatar-image-container{flex:none}.points-grid-container{grid-template-columns:repeat(2,120px);min-height:300px}#edit-student-history-container,#edit-student-avatar-selection-container{padding:15px}.modal-title-label-text{font-size:var(--font-size-base);margin-bottom:10px}.student-history-table{font-size:var(--font-size-xs)}.student-history-table th,.student-history-table td{padding:8px 6px}.date-cell{min-width:100px;font-size:11px}.note-cell{font-size:11px}.points-cell,.total-cell{min-width:50px}.no-history{padding:40px 15px;font-size:var(--font-size-sm)}.edit-student-avatar-selection-content{grid-template-columns:repeat(auto-fit,minmax(60px,1fr));grid-gap:8px;padding:8px}}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;font-family:var(--font-family-primary)}.modal.active{display:flex;align-items:center;justify-content:center}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080}.modal-content{position:relative;background-color:#fefefe;padding:20px;box-shadow:0 0 15px #0000004d;border-radius:15px;animation:modal-fade-in .3s ease-out;max-width:90%;max-height:90%;overflow-y:auto;min-width:300px;font-family:var(--font-family-primary)}.modal-close{position:absolute;top:10px;right:15px;font-size:28px;font-weight:700;cursor:pointer;color:#aaa}.modal-close:hover{color:#000}.modal-header{margin-bottom:15px}.modal-body{margin-bottom:20px}.modal-footer{display:flex;gap:10px;justify-content:flex-end}.modal-content h1{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin:0 0 16px;color:#333}.modal-content h2{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0 0 16px;color:#333}.modal-content h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0 0 12px;color:#333}.modal-content h4{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);margin:0 0 12px;color:#333}.modal-content p{font-size:var(--font-size-base);line-height:var(--line-height-normal);margin:0 0 12px;color:#666}.modal-content .modal-caption{font-size:var(--font-size-sm);color:#888;line-height:var(--line-height-normal)}.modal button{font-family:var(--font-family-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);line-height:var(--line-height-normal);background-color:coral;color:#fff;border:none;padding:12px 24px;border-radius:5px;cursor:pointer;transition:background-color .3s}.modal button:hover{background-color:tomato}.modal button.primary{background-color:var(--primary-color)}.modal button.primary:hover{background-color:#5a8bb8}.modal button.danger{background-color:var(--danger-color)}.modal button.danger:hover{background-color:#b85a65}.edit-student-header{display:flex;align-items:center;justify-content:flex-start;width:100%;margin-bottom:10px}.edit-student-header h3{font-family:var(--font-family-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}#edit-student-score-badge{background-color:orange;color:#fff;padding:6px 12px;border-radius:12px;margin-left:10px;vertical-align:middle;box-shadow:0 0 12px #0003;font-family:var(--font-family-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}#edit-student-header-history-container{display:flex;justify-content:flex-end;width:100%}.edit-student-container{display:flex;position:relative;flex:1;align-items:flex-start;justify-content:space-between;margin-bottom:20px;margin-right:10px;gap:30px;min-width:600px}.edit-student-avatar-image-container{flex:0 0 auto;display:flex;align-items:center;justify-content:center;flex-direction:column;min-width:150px}.edit-avatar-image{max-width:100%;max-height:100%;min-width:100px;min-height:100px;object-fit:cover;margin-bottom:20px;border-radius:8px}#button-edit-student-avatar-selection{background-color:var(--primary-color);color:#fff;border:none;padding:8px 16px;border-radius:5px;cursor:pointer;margin-bottom:15px;font-size:14px}#button-edit-student-avatar-selection:hover{background-color:#5a8bb8}#team-selection-container{display:flex;align-items:center;gap:8px;margin-top:4px}#team-selection-container>label{color:#333;font-family:var(--font-family-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);text-align:center;padding-bottom:12px}#team-select{font-family:var(--font-family-primary);font-size:var(--font-size-sm);width:164px;padding:8px 12px;border:2px solid #ddd;border-radius:5px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;text-align:left;color:#333}#team-select:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 2px #6595c933}#team-select:hover{border-color:#bbb}.avatar-with-badge{position:relative;display:inline-block}.team-badge{position:absolute;bottom:15px;right:-5px;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#fff;box-shadow:0 2px 6px #0000004d;z-index:10}.team-badge svg{width:42px;height:42px}#attendance-checkbox-container{display:flex;align-items:center;gap:5px;margin-top:4px;justify-content:center}#attendance-checkbox{width:20px;height:20px;margin-right:10px;accent-color:#cecdc8}#attendance-checkbox-container>label{color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-normal)}.points-wrapper{display:flex;flex-direction:column;flex:1}.points-grid-selection-buttons{display:flex;justify-content:center;margin-bottom:20px}.points-grid-selection-buttons span{font-family:var(--font-family-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 15px;cursor:pointer;padding:8px 16px;border-radius:5px;transition:all .3s ease}.points-grid-selection-buttons .selected{background-color:var(--primary-color);color:#fff}.points-grid-selection-buttons .not-selected{background-color:#f0f0f0;color:#666}.points-grid-selection-buttons .not-selected:hover{background-color:#e0e0e0}.points-grid-button p{font-family:var(--font-family-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);margin:60px 0 0;font-size:15px;font-weight:700;color:#789;line-height:1.2;overflow-wrap:break-word;word-wrap:break-word}.sync-banner{position:relative;width:100%;background-color:#ffea4d;color:#000;z-index:1100;box-shadow:0 2px 8px #00000026;border-bottom:1px solid rgba(0,0,0,.1);max-height:0;overflow:hidden;opacity:0;transition:max-height .35s cubic-bezier(.22,1,.36,1),opacity .35s ease,padding .35s ease;padding:0 72px}.sync-banner.visible{max-height:80px;opacity:1;padding:20px 72px 80px}.sync-banner-content{display:flex;align-items:center;justify-content:space-between;max-width:960px;margin:0 auto;width:100%;gap:16px;transition:all .35s ease}.sync-banner-message{flex:1;min-width:0}.sync-banner-text{font-size:15px;line-height:1.5;font-weight:500}.sync-banner-subtext{display:block;font-size:14px;opacity:.8;margin-top:4px}.sync-banner-actions{flex-shrink:0;display:flex;gap:12px}.sync-banner-button{padding:12px 28px;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.sync-banner-button.primary{background:#ff9500;color:#fff}.sync-banner-button.primary:hover{background:#e68600;transform:translateY(-1px);box-shadow:0 4px 12px #ff95004d}.sync-banner-button.secondary{background:transparent;color:#2d3748;border:2px solid #2d3748}.sync-banner-button.secondary:hover{background:#2d3748;color:#ffd93d}.sidebar-footer{margin-top:auto;padding:12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.sync-label{font-size:10px;font-weight:var(--font-weight-medium);color:#666;text-align:center;line-height:1;margin:0;padding:0;font-family:var(--font-family-primary);text-transform:uppercase;letter-spacing:.5px;-webkit-user-select:none;user-select:none}.cloud-status{position:relative;cursor:pointer;transition:all .3s ease;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:4px}.cloud-status:hover{transform:scale(1.1);box-shadow:0 2px 8px #0003}.cloud-status.connected{background-color:#48bb78;color:#fff}.cloud-status.pending{background-color:#ffb366;color:#fff}.cloud-status.syncing{background-color:#4299e1;color:#fff;animation:pulse 2s infinite}.cloud-status.disconnected{background-color:#81868e;color:#fff}@keyframes pulse{0%{box-shadow:0 2px 8px #0000001a}50%{box-shadow:0 4px 16px #4299e166}to{box-shadow:0 2px 8px #0000001a}}.cloud-icon{color:#fff;width:28px;height:28px}.cloud-icon svg{width:100%;height:100%;fill:currentColor}.cloud-svg{width:20px;height:20px;fill:#fff}.modal-overlay.active{display:flex;align-items:center;justify-content:center;z-index:1000}@keyframes modalSlideIn{0%{transform:scale(.95) translateY(-20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.provider-buttons{display:flex;flex-direction:column;gap:14px}.provider-btn{display:flex;align-items:center;gap:16px;padding:16px 20px;border:2px solid #e8ebf7;border-radius:10px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:16px;font-weight:600;color:#2d3748;width:100%;text-align:left}.provider-btn:hover{background:#f8f9ff;border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea26}.provider-icon{width:24px;height:24px;flex-shrink:0}.provider-icon svg{width:100%;height:100%}.provider-name{flex:1}.cloud-modal-content{position:relative;background:#fff;border-radius:16px;padding:40px;max-width:450px;width:90%;box-shadow:0 24px 48px #0000003d;animation:modalSlideIn .3s cubic-bezier(.22,1,.36,1);text-align:center}.cloud-modal-title{font-size:24px;font-weight:700;color:#2d3748;margin-bottom:20px}.cloud-modal-info{margin-bottom:30px}.cloud-modal-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #e8ebf7}.cloud-modal-row:last-child{border-bottom:none}.cloud-modal-label{font-weight:500;color:#718096}.cloud-modal-value{font-weight:600;color:#2d3748}.cloud-modal-status.connected{color:#48bb78}.cloud-modal-status.disconnected{color:#f56565}.reconnect-modal-content{position:relative;background:#fff;border-radius:16px;padding:50px 60px;max-width:700px;width:90%;box-shadow:0 24px 48px #0000003d;animation:modalSlideIn .3s cubic-bezier(.22,1,.36,1);text-align:center}.reconnect-title{font-size:28px;font-weight:700;color:#2d3748;margin-bottom:30px}.reconnect-message{font-size:17px;color:#718096;line-height:1.7;margin-bottom:40px}.reconnect-buttons{display:flex;gap:20px;justify-content:center}.reconnect-btn{padding:14px 36px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.reconnect-btn.primary{background:#5a8fd8;color:#fff}.reconnect-btn.primary:hover{background:#4a7fc8;transform:translateY(-2px);box-shadow:0 4px 12px #5a8fd84d}.reconnect-btn.secondary{background:#9ba5b1;color:#fff}.reconnect-btn.secondary:hover{background:#8b95a1;transform:translateY(-2px);box-shadow:0 4px 12px #9ba5b14d}.tab-conflict-modal-content{position:relative;background:#fff;border-radius:16px;padding:40px;max-width:600px;width:90%;box-shadow:0 24px 48px #0000003d;animation:modalSlideIn .3s cubic-bezier(.22,1,.36,1);text-align:center;border:2px solid #f6ad55}.tab-conflict-title{font-size:24px;font-weight:700;color:#c05621;margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:12px}.tab-conflict-icon{font-size:28px;animation:bounce 2s infinite}@keyframes bounce{0%,20%,53%,80%,to{transform:translateY(0)}40%,43%{transform:translateY(-8px)}70%{transform:translateY(-4px)}90%{transform:translateY(-2px)}}.tab-conflict-info{background:#fef5e7;border:1px solid #f6ad55;border-radius:12px;padding:24px;margin-bottom:30px;text-align:left}.tab-conflict-info p{margin-bottom:12px;line-height:1.6;color:#744210;font-size:15px}.tab-conflict-info p:last-child{margin-bottom:0}.tab-conflict-info strong{color:#c05621;font-weight:600}.tab-conflict-buttons{display:flex;justify-content:center;gap:16px}.tab-conflict-btn{padding:14px 28px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.tab-conflict-btn.primary{background:#ed8936;color:#fff}.tab-conflict-btn.primary:hover{background:#dd6b20;transform:translateY(-2px);box-shadow:0 4px 12px #ed89364d}.modal-close-btn{position:absolute;top:16px;right:16px;background:transparent;border:none;font-size:28px;color:#718096;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s;padding:0;line-height:1}.modal-close-btn:hover{background:#f7fafc;color:#2d3748}.demo-button{padding:12px 24px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;margin:5px;color:#fff}.demo-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.demo-button:disabled{opacity:.5;cursor:not-allowed}.main-content{transition:margin-top .3s ease}@media (max-width: 768px){.sync-banner{padding:0 16px}.sync-banner.visible{padding:16px}.sync-banner-content{flex-direction:column;align-items:stretch;padding:16px 20px;gap:16px}.sync-banner-message{text-align:center}.sync-banner-actions{justify-content:center}.sync-banner-button{flex:1}.reconnect-modal-content{padding:40px 30px;max-width:95%;margin:20px}.reconnect-title{font-size:24px}.reconnect-message{font-size:16px}.reconnect-buttons{flex-direction:column}.reconnect-btn{width:100%}.tab-conflict-modal-content{padding:30px 20px;max-width:95%;margin:20px}.tab-conflict-title{font-size:20px;flex-direction:column;gap:8px}.tab-conflict-info{padding:20px}.tab-conflict-buttons{flex-direction:column}.tab-conflict-btn{width:100%}.cloud-modal-content{max-width:95%;margin:20px;padding:30px 20px}.notification-container{left:10px;right:10px;max-width:none}.notification-item{margin-bottom:8px}}.cloud-status:focus{outline:2px solid #667eea;outline-offset:2px}.provider-btn:focus{outline:2px solid #667eea;outline-offset:2px}.sync-banner-button:focus{outline:2px solid #2d3748;outline-offset:2px}@media (prefers-contrast: high){.cloud-status{border:2px solid currentColor}.notification-item{border-width:2px}.provider-btn{border-width:3px}}@media (prefers-reduced-motion: reduce){.cloud-status.syncing,.tab-conflict-icon{animation:none}.notification-item,.sync-banner{transition:opacity .2s}}.welcome-modal-content{position:relative;background:#fff;border-radius:16px;padding:40px;max-width:600px;width:90%;box-shadow:0 24px 48px #0000003d;animation:modalSlideIn .3s cubic-bezier(.22,1,.36,1);text-align:center}.welcome-logo{max-width:280px;height:auto;margin:0 auto 20px}.welcome-subtitle{font-size:18px;color:#718096;line-height:1.6;margin-bottom:40px}.welcome-options{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}.welcome-option{text-align:center}.welcome-option-title{font-size:17px;color:#2d3748;font-weight:500;margin-bottom:16px;min-height:40px;display:flex;align-items:center;justify-content:center;white-space:nowrap}.welcome-btn{width:100%;padding:14px 24px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease}.welcome-btn.blue{background:#5a8fd8;color:#fff}.welcome-btn.blue:hover{background:#4a7fc8;transform:translateY(-2px);box-shadow:0 4px 12px #5a8fd84d}.welcome-btn.green{background:#5cb85c;color:#fff}.welcome-btn.green:hover{background:#4cae4c;transform:translateY(-2px);box-shadow:0 4px 12px #5cb85c4d}@media (max-width: 768px){.welcome-modal-content{padding:30px 20px}.welcome-options{grid-template-columns:1fr;gap:20px}}