.login-container{min-height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,var(--gray-50) 0%,var(--gray-100) 100%);padding:2rem}.login-box{background:var(--white);padding:3rem;border-radius:12px;box-shadow:0 4px 24px #00000014;max-width:450px;width:100%}.login-content{margin-top:2rem}.login-content h2{font-size:1.5rem;color:var(--gray-800);margin-bottom:.75rem;text-align:center}.login-content>p{color:var(--gray-600);text-align:center;margin-bottom:2rem;font-size:.95rem}.google-signin-btn{width:100%;padding:1rem;background:var(--white);color:var(--gray-800);border:2px solid var(--gray-300);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.75rem;transition:all .2s}.google-signin-btn:hover:not(:disabled){border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.google-signin-btn:disabled{opacity:.6;cursor:not-allowed}.google-icon{width:20px;height:20px}.error-message{margin-top:1rem;padding:.75rem;background-color:#fee;border:1px solid #fcc;border-radius:6px;color:#c33;font-size:.875rem;text-align:center}.login-info{margin-top:1.5rem;padding:1rem;background-color:var(--gray-50);border-radius:8px;text-align:center}.login-info p{font-size:.875rem;color:var(--gray-600);margin:0}.login-info strong{color:var(--primary)}@media (max-width: 480px){.login-box{padding:2rem 1.5rem}.login-content h2{font-size:1.25rem}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #9d231f;--primary-light: #c92e29;--primary-dark: #7a1c19;--black: #000000;--gray-50: #fafafa;--gray-100: #f5f5f5;--gray-200: #e5e5e5;--gray-300: #d4d4d4;--gray-400: #a3a3a3;--gray-600: #525252;--gray-700: #404040;--gray-800: #262626;--white: #ffffff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--gray-50);color:var(--black)}#root{min-height:100vh}.header{background-color:var(--primary);color:var(--white);padding:1.25rem 2rem;box-shadow:0 2px 8px #0000001a}.header-content{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.header h1{font-size:1.375rem;font-weight:600;letter-spacing:-.5px}.change-btn{background-color:var(--white);color:var(--primary);border:none;padding:.5rem 1.25rem;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.change-btn:hover{background-color:var(--gray-100);transform:translateY(-1px)}.selection-container{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;background:linear-gradient(135deg,var(--gray-50) 0%,var(--gray-100) 100%)}.selection-box{background:var(--white);padding:3rem;border-radius:12px;box-shadow:0 4px 24px #00000014;max-width:500px;width:100%}.school-logo{text-align:center;margin-bottom:2rem}.school-logo h1{color:var(--primary);font-size:1.75rem;font-weight:700;margin-bottom:.25rem}.school-logo p{color:var(--gray-600);font-size:.875rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--gray-800);font-size:.875rem}.form-group select{width:100%;padding:.75rem;border:2px solid var(--gray-200);border-radius:8px;font-size:1rem;background-color:var(--white);color:var(--black);cursor:pointer;transition:border-color .2s}.form-group select:focus{outline:none;border-color:var(--primary)}.variation-group{display:flex;gap:1rem;margin-top:.5rem}.variation-btn{flex:1;padding:.875rem;border:2px solid var(--gray-200);background-color:var(--white);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s;color:var(--gray-800)}.variation-btn:hover{border-color:var(--primary)}.variation-btn.active{background-color:var(--primary);color:var(--white);border-color:var(--primary)}.submit-btn{width:100%;padding:1rem;background-color:var(--primary);color:var(--white);border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:1rem}.submit-btn:hover:not(:disabled){background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #9d231f4d}.submit-btn:disabled{background-color:var(--gray-300);cursor:not-allowed}.timetable-container{max-width:1600px;margin:0 auto;padding:2rem}.teacher-info{background:var(--white);padding:1.25rem 1.5rem;border-radius:10px;margin-bottom:1.5rem;box-shadow:0 2px 8px #0000000d;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.teacher-info h2{font-size:1.25rem;color:var(--gray-800);font-weight:600}.variation-badge{background-color:var(--primary);color:var(--white);padding:.5rem 1rem;border-radius:6px;font-size:.875rem;font-weight:500}.timetable-grid{background:var(--white);border-radius:10px;overflow:hidden;box-shadow:0 2px 8px #0000000d;overflow-x:auto}.timetable-table{width:100%;border-collapse:collapse;font-size:.9rem;table-layout:fixed}.timetable-table th,.timetable-table td{padding:.875rem .75rem;text-align:left;border:1px solid var(--gray-200);vertical-align:top}.timetable-table th{background-color:var(--gray-800);color:var(--white);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;vertical-align:middle}.period-col{width:80px;text-align:center;font-weight:600;vertical-align:middle}.time-col{width:150px;font-size:.8rem;color:var(--gray-600);white-space:nowrap;vertical-align:middle}.day-header{background-color:var(--gray-800);color:var(--white);font-weight:600;text-align:center}.day-header.current-day{background-color:var(--primary);color:var(--white)}.current-row{background-color:#9d231f08}.current-row .period-col,.current-row .time-col{font-weight:600;color:var(--primary)}.period-cell{min-height:75px;height:75px;vertical-align:top;background-color:var(--white)}.period-cell.empty{background-color:var(--gray-50)}.period-cell.empty:after{content:"";display:block}.period-cell.break-cell{background-color:var(--gray-100);text-align:center;vertical-align:middle;font-weight:600;color:var(--gray-700);font-size:.875rem;letter-spacing:.5px;padding:1rem}.period-cell.current-period{background-color:#9d231f14;border-left:3px solid var(--primary);position:relative}.period-cell.upcoming-period{background-color:#9d231f08}.period-content{display:flex;flex-direction:column;gap:.35rem}.subject-name{font-weight:600;color:var(--gray-800);font-size:.9rem;line-height:1.3}.grade-name{color:var(--gray-600);font-size:.8rem;line-height:1.3}.room-name{color:var(--primary);font-size:.75rem;font-style:italic;margin-top:.15rem}.legend{margin-top:1.5rem;text-align:center;color:var(--gray-600);font-size:.875rem;padding:1rem;background:var(--white);border-radius:8px;box-shadow:0 2px 8px #0000000d}.legend p{display:flex;justify-content:center;align-items:center;gap:2rem;flex-wrap:wrap}.legend-dot{display:inline-flex;align-items:center;gap:.5rem}.legend-dot:before{content:"";width:16px;height:16px;border-radius:3px}.legend-dot.current:before{background-color:#9d231f14;border-left:3px solid var(--primary)}.legend-dot.upcoming:before{background-color:#9d231f08;border:1px solid var(--gray-300)}@media (max-width: 768px){.header-content{flex-direction:column;text-align:center}.header h1{font-size:1.125rem}.selection-box{padding:2rem 1.5rem}.timetable-container{padding:1rem}.timetable-grid{overflow-x:auto;-webkit-overflow-scrolling:touch}.timetable-table{min-width:900px}.timetable-table th,.timetable-table td{padding:.65rem .5rem;font-size:.8rem}.subject-name{font-size:.85rem}.grade-name{font-size:.75rem}.legend p{gap:1rem}}@media (max-width: 480px){.variation-group{flex-direction:column}.school-logo h1{font-size:1.5rem}}.view-type-tabs{display:flex;gap:.5rem;margin-bottom:2rem;background:var(--gray-100);padding:.25rem;border-radius:10px}.tab-btn{flex:1;padding:.75rem;background:transparent;border:none;border-radius:8px;font-size:.95rem;font-weight:500;color:var(--gray-600);cursor:pointer;transition:all .2s}.tab-btn:hover{color:var(--gray-800)}.tab-btn.active{background:var(--white);color:var(--primary);box-shadow:0 2px 4px #0000000d}select optgroup{font-weight:600;font-style:normal;color:var(--gray-800);background:var(--gray-50)}select option{padding:.5rem}.view-type-label{font-size:.875rem;color:var(--gray-600);margin-top:.25rem}.view-mode-controls{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:1rem}.view-mode-toggle{display:flex;gap:.5rem;background:var(--gray-100);padding:.25rem;border-radius:10px;width:fit-content}.view-mode-btn{padding:.625rem 1.5rem;background:transparent;border:none;border-radius:8px;font-size:.875rem;font-weight:500;color:var(--gray-600);cursor:pointer;transition:all .2s;white-space:nowrap}.view-mode-btn:hover{color:var(--gray-800)}.view-mode-btn.active{background:var(--white);color:var(--primary);box-shadow:0 2px 4px #0000000d}.day-selector{display:flex;gap:.5rem;flex-wrap:wrap}.day-btn{padding:.5rem 1rem;background:var(--white);border:2px solid var(--gray-200);border-radius:8px;font-size:.875rem;font-weight:500;color:var(--gray-700);cursor:pointer;transition:all .2s;min-width:60px}.day-btn:hover{border-color:var(--primary);transform:translateY(-1px)}.day-btn.active{background:var(--primary);color:var(--white);border-color:var(--primary)}.day-btn.today{border-color:var(--primary);font-weight:600}.day-btn.today:not(.active){background:#9d231f0d}.teacher-name{color:var(--gray-700);font-size:.8rem;line-height:1.3;font-weight:500}@media (max-width: 768px){.view-mode-controls{align-items:stretch}.view-mode-toggle{width:100%}.view-mode-btn{flex:1}.day-selector{justify-content:space-between}.day-btn{flex:1;min-width:auto}}.timetable-grid.day-view .day-header{min-width:200px;max-width:300px}.timetable-grid.day-view table{width:auto}.searchable-select{position:relative}.search-input{width:100%;padding:.75rem;border:2px solid var(--gray-300);border-radius:8px;font-size:1rem;transition:border-color .2s}.search-input:focus{outline:none;border-color:var(--primary)}.dropdown-list{position:absolute;top:100%;left:0;right:0;max-height:300px;overflow-y:auto;background:var(--white);border:2px solid var(--gray-300);border-top:none;border-radius:0 0 8px 8px;z-index:100;box-shadow:0 4px 12px #0000001a}.dropdown-item{padding:.75rem;cursor:pointer;transition:background .2s}.dropdown-item:hover{background:var(--gray-50)}.dropdown-item.selected{background:var(--primary);color:var(--white)}.dropdown-item.disabled{color:var(--gray-400);cursor:default}.dropdown-item.disabled:hover{background:transparent}.header-actions{display:flex;gap:.5rem}.signout-btn{padding:.625rem 1.25rem;background:var(--white);color:var(--gray-700);border:2px solid var(--gray-300);border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.signout-btn:hover{border-color:var(--primary);color:var(--primary)}.grade-name{font-weight:600;font-size:.875rem;color:var(--gray-800);margin-bottom:.25rem}.subject-name{font-size:.8rem;color:var(--gray-600);line-height:1.3}.edit-mode-btn{padding:.625rem 1.25rem;background:var(--white);color:var(--primary);border:2px solid var(--white);border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.375rem}.edit-mode-btn:hover{background:var(--gray-100);transform:translateY(-1px)}.edit-mode-btn.active{background:var(--primary-dark);color:var(--white);border-color:var(--primary-dark)}.editable-empty{background-color:#f0f9ff!important;border:2px dashed #3b82f6!important;position:relative}.editable-empty:hover{background-color:#dbeafe!important;border-color:#2563eb!important}.editable-custom{background-color:#fef3c7!important;border:2px solid #f59e0b!important;position:relative}.editable-custom:hover{background-color:#fde68a!important;border-color:#d97706!important}.non-editable{opacity:.6;cursor:not-allowed!important}.add-indicator{font-size:2rem;color:#3b82f6;display:flex;align-items:center;justify-content:center;height:100%;opacity:.5;transition:opacity .2s}.editable-empty:hover .add-indicator{opacity:1}.custom-indicator{position:absolute;top:4px;right:4px;background:#ef4444;color:#fff;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;cursor:pointer;transition:all .2s}.custom-indicator:hover{background:#dc2626;transform:scale(1.1)}.period-content{position:relative}.edit-mode-hint{margin-left:1.5rem;font-size:.875rem;color:var(--gray-600);font-style:italic}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 20px 60px #0000004d;max-width:400px;width:90%;animation:slideUp .3s}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-content h3{margin-bottom:1.5rem;color:var(--gray-800);font-size:1.25rem}.modal-form{display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.875rem;font-weight:500;color:var(--gray-700)}.form-group input{padding:.75rem;border:2px solid var(--gray-300);border-radius:8px;font-size:.9375rem;transition:border-color .2s}.form-group input:focus{outline:none;border-color:var(--primary)}.modal-actions{display:flex;gap:.75rem;margin-top:.5rem}.cancel-btn,.save-btn{flex:1;padding:.75rem;border-radius:8px;font-size:.9375rem;font-weight:500;cursor:pointer;transition:all .2s;border:none}.cancel-btn{background:var(--gray-200);color:var(--gray-700)}.cancel-btn:hover{background:var(--gray-300)}.save-btn{background:var(--primary);color:#fff}.save-btn:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px)}.save-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.edit-mode-hint{display:block;margin-left:0;margin-top:.5rem}.modal-content{padding:1.5rem}.custom-indicator{width:20px;height:20px;font-size:.8rem}}