body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*,:focus{outline:none}div,h1,h2,h3,h4,h5,h6,p,span,table,td,th,tr{outline:none!important;-webkit-user-select:none;user-select:none}[contenteditable=true],input,textarea{-webkit-user-select:text;user-select:text}.clickable,a,button{cursor:pointer}[contenteditable],body:focus{outline:none}.App{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh;text-align:center}.app-layout{display:flex;min-height:100vh}.sidebar{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:2px 0 10px #0000001a;color:#fff;display:flex;flex-direction:column;padding:0;width:280px}.sidebar-header{border-bottom:1px solid #ffffff1a;padding:30px 20px;text-align:center}.sidebar-header h2{font-size:18px;font-weight:700;margin:0 0 5px}.sidebar-header p{font-size:14px;margin:0;opacity:.8}.nav-items{flex:1 1;padding:20px 0}.nav-item{align-items:center;border-left:3px solid #0000;display:flex;padding:15px 20px;transition:all .3s ease}.nav-item,.nav-item:hover{color:#fff;text-decoration:none}.nav-item:hover{background:#ffffff1a;border-left-color:#fff}.nav-item.active{background:#fff3;border-left-color:#fff}.nav-icon{font-size:20px;margin-right:15px;text-align:center;width:24px}.nav-label{font-size:16px;font-weight:500}.sidebar-footer{border-top:1px solid #ffffff1a;padding:20px}.user-info{margin-bottom:15px;text-align:center}.user-info span{display:block;font-size:14px;margin-bottom:5px}.user-type{font-size:12px!important;font-style:italic;opacity:.7}.logout-btn{background:#fff3;border:1px solid #ffffff4d;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;padding:10px;transition:all .3s ease;width:100%}.logout-btn:hover{background:#ffffff4d;transform:translateY(-1px)}.main-content{background:#f8f9fa;flex:1 1;overflow-y:auto}.page-container{margin:0 auto;max-width:1400px;padding:30px}.page-container h1{color:#333;font-size:28px;font-weight:700;margin-bottom:20px;text-align:center}.page-container p{color:#666;font-size:16px;text-align:center}.loading-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;flex-direction:column;height:100vh;justify-content:center}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:50px;margin-bottom:20px;width:50px}.not-found-container{margin:0 auto;max-width:600px;padding:50px 20px;text-align:center}.not-found-container h1{color:#e74c3c;font-size:3rem;font-weight:700;margin-bottom:20px}.not-found-container p{color:#666;font-size:1.2rem;line-height:1.6;margin-bottom:30px}.back-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;box-shadow:0 4px 15px #667eea4d;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:12px 24px;transition:all .3s ease}.back-button:hover{box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.error-message{border-radius:6px}.mobile-logout-btn{display:none}@media (max-width:768px){.app-layout{flex-direction:column}.sidebar{height:auto;width:100%}.nav-items{display:flex;overflow-x:auto;padding:10px}.nav-item{border-bottom:3px solid #0000;border-left:none;flex-shrink:0;padding:10px 15px}.nav-item.active,.nav-item:hover{border-bottom-color:#fff;border-left-color:#0000}.sidebar-footer{display:none}.mobile-logout-btn{background:#dc3545e6;border:none;border-radius:25px;box-shadow:0 4px 15px #0003;color:#fff;cursor:pointer;display:block;font-size:14px;font-weight:600;padding:10px 15px;position:fixed;right:20px;top:20px;transition:all .3s ease;z-index:1000}.mobile-logout-btn:hover{background:#dc3545;box-shadow:0 6px 20px #0000004d;transform:translateY(-2px)}}.login-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;justify-content:center;min-height:100vh;padding:20px}.login-card{animation:slideUp .6s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-radius:20px;box-shadow:0 20px 40px #0000001a;max-width:450px;padding:40px;width:100%}.login-header{margin-bottom:30px;text-align:center}.login-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;color:#333;font-size:28px;font-weight:700;margin-bottom:8px}.login-header p{color:#666;font-size:16px;margin:0}.error-message{background-color:#fee;border:1px solid #fcc;color:#c33;font-size:14px;font-weight:500;padding:12px;text-align:center}.user-type-selector{display:flex;gap:10px;margin-bottom:30px}.type-btn{align-items:center;background:#fff;border:2px solid #e1e5e9;border-radius:12px;color:#666;cursor:pointer;display:flex;flex:1 1;flex-direction:column;font-size:14px;font-weight:600;gap:8px;padding:15px;transition:all .3s ease}.type-btn:hover{box-shadow:0 5px 15px #667eea33}.type-btn.active,.type-btn:hover{border-color:#667eea;transform:translateY(-2px)}.type-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 8px 25px #667eea4d;color:#fff}.type-btn .icon{font-size:24px}.login-form{display:flex;flex-direction:column;gap:20px}.form-group input{background:#fff;border:2px solid #e1e5e9;border-radius:12px;font-size:16px;padding:15px;transition:all .3s ease}.form-group input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.form-group input::placeholder{color:#999}.login-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;margin-top:10px;padding:15px;transition:all .3s ease}.login-btn:hover:not(:disabled){box-shadow:0 8px 25px #667eea4d;transform:translateY(-2px)}.login-btn:disabled{cursor:not-allowed;opacity:.7}.loading{align-items:center;display:flex;gap:10px;justify-content:center}.spinner{animation:spin 1s linear infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:20px;width:20px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.login-footer{border-top:1px solid #e1e5e9;margin-top:30px;padding-top:20px;text-align:center}.login-footer p{color:#666;font-size:14px;margin-bottom:10px}.demo-credentials{background:#f8f9fa;border-radius:8px;color:#666;font-size:12px;padding:15px}.demo-credentials div{margin-bottom:5px}.demo-credentials div:last-child{margin-bottom:0}.demo-credentials strong{color:#333}@media (max-width:480px){.login-card{padding:30px 20px}.login-header h1{font-size:24px}.user-type-selector{flex-direction:column}.type-btn{flex-direction:row;justify-content:center}}.landing-page{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;min-height:100vh}.hero{align-items:center;display:flex;justify-content:space-between;min-height:100vh;overflow:hidden;padding:0 5%;position:relative}.hero:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpattern id='a' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10 0H0v10' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='.5'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M0 0h100v100H0z'/%3E%3C/svg%3E");bottom:0;content:"";left:0;opacity:.3;position:absolute;right:0;top:0;z-index:1}.hero-content{flex:1 1;max-width:600px;position:relative;z-index:2}.hero-title{font-size:4rem;font-weight:700;line-height:1.2;margin-bottom:1rem}.gradient-text{-webkit-text-fill-color:#0000;animation:gradient-shift 3s ease-in-out infinite;background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4);-webkit-background-clip:text;background-clip:text;background-size:300% 300%}@keyframes gradient-shift{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.hero-subtitle{font-size:1.5rem;font-weight:300;margin-bottom:1rem;opacity:.9}.hero-description{font-size:1.1rem;line-height:1.6;margin-bottom:2rem;opacity:.8}.cta-button{background:linear-gradient(45deg,#ff6b6b,#4ecdc4);border:none;border-radius:50px;box-shadow:0 4px 15px #0003;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;padding:15px 30px;transition:all .3s ease}.cta-button:hover{box-shadow:0 6px 20px #0000004d;transform:translateY(-2px)}.cta-button.secondary{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:2px solid #ffffff4d}.hero-buttons{display:flex;flex-wrap:wrap;gap:1rem}@media (max-width:480px){.hero-buttons{align-items:center;flex-direction:column}}.hero-visual{flex:1 1;height:500px;position:relative;z-index:2}.floating-card{animation:float 6s ease-in-out infinite;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;box-shadow:0 8px 32px #0000001a;padding:20px;position:absolute;text-align:center}.floating-card:first-child{animation-delay:0s}.floating-card:nth-child(2){animation-delay:1.5s}.floating-card:nth-child(3){animation-delay:3s}.floating-card:nth-child(4){animation-delay:4.5s}.card-1{left:10%;top:10%}.card-2{right:20%;top:20%}.card-3{bottom:30%;left:20%}.card-4{bottom:10%;right:10%}.card-icon{font-size:2rem;margin-bottom:10px}.card-text{font-size:.9rem;font-weight:600}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.features{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;padding:80px 5%}.section-title{font-size:2.5rem;font-weight:600;margin-bottom:3rem;text-align:center}.features-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:0 auto;max-width:1200px}.feature-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;padding:2rem;text-align:center;transition:all .3s ease}.feature-card:hover{box-shadow:0 10px 30px #0003;transform:translateY(-5px)}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-card h3{font-size:1.3rem;font-weight:600;margin-bottom:1rem}.feature-card p{line-height:1.6;opacity:.8}.cta-section{background:linear-gradient(135deg,#667eea,#764ba2);padding:80px 5%;text-align:center}.cta-content h2{font-size:2.5rem;font-weight:600;margin-bottom:1rem}.cta-content p{font-size:1.2rem;margin-bottom:2rem;opacity:.9}@media (max-width:768px){.hero{flex-direction:column;padding:2rem 5%;text-align:center}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.2rem}.hero-visual{height:300px;margin-top:2rem}.floating-card{padding:15px}.card-icon{font-size:1.5rem}.features-grid{grid-template-columns:1fr}.cta-content h2,.section-title{font-size:2rem}}@media (max-width:480px){.hero-title{font-size:2rem}.cta-button,.hero-description,.hero-subtitle{font-size:1rem}.cta-button{padding:12px 24px}}.contact-form-overlay{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.contact-form-modal{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff2;border:1px solid #fff3;border-radius:20px;box-shadow:0 20px 60px #0000004d;max-height:90vh;max-width:500px;overflow-y:auto;padding:0;width:100%}.contact-form-header{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px 20px 0 0;color:#fff;padding:30px;position:relative}.contact-form-header h2{font-size:1.8rem;font-weight:600;margin:0 0 10px}.contact-form-header p{font-size:1rem;margin:0;opacity:.9}.close-button{align-items:center;background:#fff3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:16px;height:30px;justify-content:center;position:absolute;right:20px;top:20px;transition:all .3s ease;width:30px}.close-button:hover{background:#ffffff4d;transform:scale(1.1)}.contact-form{padding:30px}.form-group{margin-bottom:20px}.form-group label{display:block}.form-group input,.form-group textarea{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffc;border:2px solid #e1e5e9;border-radius:10px;font-size:1rem;padding:12px 16px;transition:all .3s ease;width:100%}.form-group input:focus,.form-group textarea:focus{background:#fff;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.form-group textarea{font-family:inherit;min-height:100px}.cancel-button,.submit-button{border:none;border-radius:10px;cursor:pointer;flex:1 1;font-size:1rem;font-weight:600;padding:12px 24px;transition:all .3s ease}.cancel-button{background:#f8f9fa;border:2px solid #e9ecef;color:#6c757d}.cancel-button:hover{background:#e9ecef;color:#495057}.submit-button{background:linear-gradient(45deg,#667eea,#764ba2);box-shadow:0 4px 15px #667eea4d;color:#fff}.submit-button:hover:not(:disabled){box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.submit-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.error-message{font-size:.9rem;margin-top:15px;padding:12px 16px}.success-message{color:#333;padding:40px 30px;text-align:center}.success-icon{color:#28a745;font-size:3rem;margin-bottom:20px}.success-message h3{color:#28a745;font-size:1.5rem;margin:0 0 10px}.success-message p{line-height:1.6;margin:0;opacity:.8}@media (max-width:600px){.contact-form-overlay{padding:10px}.contact-form-modal{max-width:100%}.contact-form-header{padding:20px}.contact-form-header h2{font-size:1.5rem}.contact-form{padding:20px}.form-actions{flex-direction:column}.cancel-button,.submit-button{width:100%}}.contact-form-overlay{animation:fadeIn .3s ease-out}.contact-form-modal{animation:slideUp .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.dashboard-container{margin:0 auto;max-width:1400px;padding:30px}.dashboard-header{margin-bottom:40px;text-align:center}.dashboard-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;color:#333;font-size:32px;font-weight:700;margin-bottom:10px}.dashboard-header p{color:#666;font-size:18px;margin:0}.stats-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:40px}.stat-card{align-items:center;background:#fff;border-radius:16px;box-shadow:0 4px 20px #0000001a;display:flex;gap:20px;padding:25px;transition:all .3s ease}.stat-card:hover{box-shadow:0 8px 30px #00000026;transform:translateY(-5px)}.stat-icon{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;color:#fff;display:flex;font-size:40px;height:60px;justify-content:center;width:60px}.stat-content h3{color:#666;font-size:14px;font-weight:600;letter-spacing:.5px;margin:0 0 5px;text-transform:uppercase}.stat-number{color:#333;font-size:28px;font-weight:700;margin:0}.modules-grid{grid-gap:25px;display:grid;gap:25px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.module-card{align-items:center;background:#fff;border-radius:16px;box-shadow:0 4px 20px #0000001a;display:flex;gap:20px;padding:30px;transition:all .3s ease}.module-card,.module-card:hover{color:inherit;text-decoration:none}.module-card:hover{box-shadow:0 8px 30px #00000026;transform:translateY(-5px)}.module-icon{align-items:center;border-radius:12px;color:#fff;display:flex;flex-shrink:0;font-size:30px;height:60px;justify-content:center;width:60px}.module-content h3{color:#333;font-size:20px;font-weight:700;margin:0 0 8px}.module-content p{color:#666;font-size:14px;line-height:1.5;margin:0}@media (max-width:768px){.dashboard-container{padding:20px}.dashboard-header h1{font-size:24px}.stats-grid{gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.modules-grid{gap:20px;grid-template-columns:1fr}.module-card,.stat-card{padding:20px}}.students-container{margin:0 auto;max-width:1400px;padding:30px}.students-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:30px}.students-header h1{color:#333;font-size:28px;font-weight:700;margin:0}.students-table{background:#fff;border-radius:16px;box-shadow:0 4px 20px #0000001a;overflow:hidden}.students-table table{border-collapse:collapse;width:100%}.students-table th{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:14px;font-weight:600;padding:15px;text-align:left}.students-table td{border-bottom:1px solid #e1e5e9;font-size:14px;padding:15px}.students-table tr:hover{background:#f8f9fa}@media (max-width:768px){.students-container{padding:20px}.students-header{align-items:stretch;flex-direction:column;gap:20px}.students-header h1{font-size:24px;text-align:center}.modal{margin:20px;padding:20px}.form-grid{gap:15px;grid-template-columns:1fr}.form-actions{flex-direction:column}.students-table{overflow-x:auto}.students-table table{min-width:800px}}.teachers-container{margin:0 auto;max-width:1400px;padding:30px}.teachers-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:30px}.teachers-header h1{color:#333;font-size:28px;font-weight:700;margin:0}.form-group input,.form-group select{background:#fff;border:2px solid #e1e5e9;border-radius:8px;font-size:16px;padding:12px;transition:all .3s ease}.form-group input:focus,.form-group select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.teachers-table{background:#fff;border-radius:16px;box-shadow:0 4px 20px #0000001a;overflow:hidden}.teachers-table table{border-collapse:collapse;width:100%}.teachers-table th{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:14px;font-weight:600;padding:15px;text-align:left}.teachers-table td{border-bottom:1px solid #e1e5e9;font-size:14px;padding:15px}.teachers-table tr:hover{background:#f8f9fa}@media (max-width:768px){.teachers-container{padding:20px}.teachers-header{align-items:stretch;flex-direction:column;gap:20px}.teachers-header h1{font-size:24px;text-align:center}.modal{margin:20px;padding:20px}.form-grid{gap:15px;grid-template-columns:1fr}.form-actions{flex-direction:column}.teachers-table{overflow-x:auto}.teachers-table table{min-width:800px}.action-buttons{flex-direction:column;gap:4px}}.subjects-container{margin:0 auto;max-width:1400px;padding:30px}.subjects-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:30px}.subjects-header h1{color:#333;font-size:28px;font-weight:700;margin:0}.filter-select{background:#fff;border:2px solid #e1e5e9;border-radius:8px;font-size:16px;min-width:200px;padding:10px 15px}.filter-select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.modal{max-width:800px}.subjects-table{background:#fff;border-radius:16px;box-shadow:0 4px 20px #0000001a;overflow:hidden}.subjects-table table{border-collapse:collapse;width:100%}.subjects-table th{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:14px;font-weight:600;padding:15px;text-align:left}.subjects-table td{border-bottom:1px solid #e1e5e9;font-size:14px;padding:15px}.subjects-table tr:hover{background:#f8f9fa}.subject-info{display:flex;flex-direction:column;gap:4px}.subject-info strong{color:#333;font-size:14px}.subject-info small{color:#666;font-size:12px;line-height:1.4}.toggle-btn{border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;padding:6px 12px;transition:all .3s ease}.toggle-btn.activate{background:#17a2b8;color:#fff}.toggle-btn.activate:hover{background:#138496;transform:translateY(-1px)}.toggle-btn.deactivate{background:#ffc107;color:#212529}.toggle-btn.deactivate:hover{background:#e0a800;transform:translateY(-1px)}.status-badge{border-radius:12px;font-size:12px;letter-spacing:.5px;padding:4px 8px;text-transform:uppercase}.status-badge.active{background:#d4edda;border:1px solid #c3e6cb;color:#155724}.status-badge.inactive{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24}@media (max-width:768px){.subjects-container{padding:20px}.subjects-header{align-items:stretch;flex-direction:column;gap:20px}.subjects-header h1{font-size:24px;text-align:center}.modal{margin:20px;padding:20px}.form-grid{gap:15px;grid-template-columns:1fr}.form-actions{flex-direction:column}.subjects-table{overflow-x:auto}.subjects-table table{min-width:800px}.action-buttons{flex-direction:column;gap:4px}}.grades-container{margin:0 auto;max-width:1400px;padding:30px}.grades-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:30px}.grades-header h1{color:#333;font-size:28px;font-weight:700;margin:0}.add-btn{font-size:16px}.add-btn:hover{box-shadow:0 8px 25px #667eea4d}.filter-input,.filter-select{border:2px solid #e1e5e9;font-size:16px;transition:all .3s ease}.autocomplete-container{width:100%}.autocomplete-dropdown{border:2px solid #667eea;box-shadow:0 4px 12px #00000026}.autocomplete-item{border-bottom:1px solid #f0f0f0;transition:all .2s ease}.autocomplete-item .item-name{color:#333;font-size:14px;font-weight:600;margin-bottom:2px}.autocomplete-item .item-detail{color:#666;font-size:12px}.autocomplete-item.no-results{color:#666;cursor:default;font-style:italic}.autocomplete-item.no-results:hover{background:#fff}.modal{border-radius:16px;box-shadow:0 20px 40px #0003;max-width:900px;padding:30px;width:90%}.modal-header{border-bottom:1px solid #e1e5e9;margin-bottom:30px;padding-bottom:20px}.modal-header h2{color:#333;font-size:24px;font-weight:700}.close-btn{color:#666;font-size:24px;height:30px;padding:0;transition:all .3s ease;width:30px}.close-btn:hover{background:#f0f0f0;color:#333}.form-grid{margin-bottom:30px}.form-group{gap:8px}.form-group label{color:#333;font-size:14px}.form-group input,.form-group select,.form-group textarea{border:2px solid #e1e5e9;font-family:inherit;font-size:16px;padding:12px}.save-btn{border-radius:8px;font-size:16px;font-weight:600;padding:12px 24px;transition:all .3s ease}.save-btn:hover{box-shadow:0 8px 25px #667eea4d}.cancel-btn{background:#f8f9fa;border:2px solid #e1e5e9;border-radius:8px;color:#666;cursor:pointer;font-size:16px;font-weight:600;padding:12px 24px;transition:all .3s ease}.cancel-btn:hover{background:#e9ecef;border-color:#adb5bd}.grades-table{background:#fff;border-radius:16px;box-shadow:0 4px 20px #0000001a;overflow:hidden}.grades-table table{border-collapse:collapse;width:100%}.grades-table th{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:14px;font-weight:600;padding:15px;text-align:left}.grades-table td{border-bottom:1px solid #e1e5e9;font-size:14px;padding:15px}.grades-table tr:hover{background:#f8f9fa}.no-data{color:#666}.action-buttons{flex-wrap:wrap}.edit-btn{background:#28a745;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;padding:6px 12px;transition:all .3s ease}.edit-btn:hover{background:#218838}.delete-btn{border-radius:6px;font-size:12px;font-weight:600;padding:6px 12px;transition:all .3s ease}.grade-badge{border-radius:50%;box-shadow:0 2px 4px #0003;color:#fff;display:inline-block;font-size:14px;font-weight:700;height:32px;line-height:32px;text-align:center;text-transform:uppercase;transition:all .3s ease;width:32px}.grade-badge:hover{box-shadow:0 4px 8px #0000004d;transform:scale(1.1)}.grade-badge.grade-1{background:linear-gradient(135deg,#dc3545,#c82333);border:2px solid #bd2130}.grade-badge.grade-2{background:linear-gradient(135deg,#fd7e14,#e55a00);border:2px solid #d63384}.grade-badge.grade-3{background:linear-gradient(135deg,#ffc107,#e0a800);border:2px solid #d39e00;color:#212529}.grade-badge.grade-4{background:linear-gradient(135deg,#20c997,#17a2b8);border:2px solid #138496}.grade-badge.grade-5{background:linear-gradient(135deg,#28a745,#20c997);border:2px solid #1e7e34}.grade-type-badge{background:linear-gradient(135deg,#6c757d,#495057);border:1px solid #495057;border-radius:16px;box-shadow:0 1px 3px #0003;color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;padding:6px 12px;text-transform:uppercase;transition:all .3s ease}.grade-type-badge:hover{box-shadow:0 2px 6px #0000004d;transform:translateY(-1px)}.semester-badge{background:#6f42c1;border:2px solid #5a32a3;border-radius:50%;color:#fff;display:inline-block;font-size:12px;font-weight:700;height:24px;line-height:24px;text-align:center;width:24px}@media (max-width:768px){.grades-container{padding:20px}.grades-header{align-items:stretch;flex-direction:column;gap:20px}.grades-header h1{font-size:24px;text-align:center}.filters{flex-direction:column;gap:10px}.filter-group{min-width:auto}.modal{margin:20px;padding:20px}.form-grid{gap:15px;grid-template-columns:1fr}.form-actions{flex-direction:column}.grades-table{overflow-x:auto}.grades-table table{min-width:900px}.action-buttons{flex-direction:column;gap:4px}.autocomplete-dropdown{max-height:150px}}.diplomas-container{margin:0 auto;max-width:1200px;padding:20px}.diplomas-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:30px}.diplomas-header h1{color:#2c3e50;font-size:2rem;margin:0}.add-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;box-shadow:0 4px 15px #667eea4d;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 24px;transition:all .3s ease}.add-btn:hover{box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.filters{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:30px}.filter-group{flex:1 1;min-width:200px}.filter-input,.filter-select{background:#fff;border:2px solid #e1e8ed;border-radius:8px;font-size:1rem;padding:10px 15px;transition:border-color .3s ease;width:100%}.filter-input:focus,.filter-select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.modal-overlay{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;max-height:90vh;max-width:90vw;overflow-y:auto;padding:0;position:relative}.modal-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:2px solid #f8f9fa;border-radius:12px 12px 0 0;color:#fff;display:flex;justify-content:space-between;padding:20px 30px}.modal-header h2{font-size:1.5rem;margin:0}.close-btn{align-items:center;background:none;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:40px;justify-content:center;padding:5px;transition:background-color .3s ease;width:40px}.close-btn:hover{background:#fff3}.modal form{padding:30px}.form-section{background:#f8f9fa;border-left:4px solid #667eea;border-radius:8px;margin-bottom:30px;padding:20px}.form-section h3{color:#2c3e50;font-size:1.2rem;font-weight:600;margin:0 0 20px}.form-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.form-group{display:flex;flex-direction:column}.form-group.full-width{grid-column:1/-1}.form-group label{color:#2c3e50;font-size:.9rem;font-weight:600;margin-bottom:8px}.form-group input,.form-group select,.form-group textarea{background:#fff;border:2px solid #e1e8ed;border-radius:8px;font-size:1rem;padding:12px 15px;transition:all .3s ease}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.form-group textarea{min-height:80px;resize:vertical}.form-actions{border-top:2px solid #f8f9fa;display:flex;gap:15px;justify-content:flex-end;margin-top:30px;padding-top:20px}.cancel-btn,.save-btn{border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 24px;transition:all .3s ease}.save-btn{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px #667eea4d}.save-btn:hover{box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.cancel-btn{background:#e1e8ed;color:#2c3e50}.cancel-btn:hover{background:#d1d8dd}.diplomas-table{background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000001a;overflow:hidden}.diplomas-table table{border-collapse:collapse;width:100%}.diplomas-table th{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:.9rem;font-weight:600;padding:15px;text-align:left}.diplomas-table td{border-bottom:1px solid #f8f9fa;font-size:.9rem;padding:15px}.diplomas-table tr:hover{background:#f8f9fa}.diploma-type-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.diploma-type-badge,.status-badge{border-radius:20px;display:inline-block;font-size:.8rem;font-weight:600;padding:6px 12px}.status-badge.issued{background:linear-gradient(135deg,#56ab2f,#a8e6cf);color:#fff}.status-badge.preparing{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.status-badge.cancelled{background:linear-gradient(135deg,#ffecd2,#fcb69f);color:#2c3e50}.action-buttons{display:flex;gap:8px}.delete-btn,.edit-btn{border:none;border-radius:6px;cursor:pointer;font-size:.8rem;padding:6px 12px;transition:all .3s ease}.edit-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.edit-btn:hover{box-shadow:0 4px 12px #667eea4d;transform:translateY(-1px)}.delete-btn{background:linear-gradient(135deg,#ff6b6b,#ee5a24)}.delete-btn:hover{box-shadow:0 4px 12px #ff6b6b4d;transform:translateY(-1px)}.no-data{color:#7f8c8d;font-style:italic;padding:40px!important;text-align:center}.autocomplete-container{position:relative}.autocomplete-dropdown{background:#fff;border:2px solid #e1e8ed;border-radius:0 0 8px 8px;border-top:none;box-shadow:0 4px 12px #0000001a;left:0;max-height:200px;overflow-y:auto;position:absolute;right:0;top:100%;z-index:1000}.autocomplete-item{border-bottom:1px solid #f8f9fa;cursor:pointer;padding:12px 15px;transition:background-color .2s ease}.autocomplete-item:hover{background:#f8f9fa}.autocomplete-item:last-child{border-bottom:none}.item-name{color:#2c3e50;font-weight:600;margin-bottom:4px}.item-detail{color:#7f8c8d;font-size:.8rem}.no-results{color:#7f8c8d;cursor:default;font-style:italic}.no-results:hover{background:#fff!important}.loading-message{background:#f8f9fa;color:#666;font-size:18px;padding:40px;text-align:center}.error-message,.loading-message{border-radius:8px;margin-bottom:20px}.error-message{border:1px solid #f5c6cb;padding:15px 20px}.error-message button{align-items:center;border-radius:50%;display:flex;height:20px;justify-content:center;padding:0;width:20px}.error-message button:hover{background:#f5c6cb}@media (max-width:768px){.diplomas-header{align-items:stretch;gap:15px}.diplomas-header,.filters{flex-direction:column}.form-grid{grid-template-columns:1fr}.action-buttons,.form-actions{flex-direction:column}.diplomas-table{overflow-x:auto}.modal{max-height:95vh;max-width:95vw}.modal form{padding:20px}}.react-resizable-handle{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgd2lkdGg9IjYiIGhlaWdodD0iNiI+PHBhdGggZD0iTTYgNkgwVjQuMmg0LjJWMEg2djZaIiBvcGFjaXR5PSIuMzAyIi8+PC9zdmc+);background-origin:content-box;background-position:100% 100%;background-repeat:no-repeat;box-sizing:border-box;height:20px;padding:0 3px 3px 0;width:20px}.react-resizable-handle-sw{bottom:0;cursor:sw-resize;left:0;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;cursor:se-resize;right:0}.react-resizable-handle-nw{cursor:nw-resize;left:0;top:0;transform:rotate(180deg)}.react-resizable-handle-ne{cursor:ne-resize;right:0;top:0;transform:rotate(270deg)}.react-resizable-handle-e,.react-resizable-handle-w{cursor:ew-resize;margin-top:-10px;top:50%}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{cursor:ns-resize;left:50%;margin-left:-10px}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.diploma-editor-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}.editor-header{align-items:center;background:#fff;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;padding:20px}.editor-header h1{color:#333;font-size:24px;margin:0}.add-template-btn{background:#4caf50;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:10px 20px}.add-template-btn:hover{background:#45a049}.editor-layout{display:flex;flex:1 1;min-height:0;overflow:auto}.template-panel{background:#fff;border-right:1px solid #ddd;flex-shrink:0;overflow-y:auto;padding:20px;width:250px;z-index:2}.template-panel h3{color:#333;font-size:16px;margin:0 0 15px}.template-list{display:flex;flex-direction:column;gap:10px}.template-item{align-items:center;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;display:flex;justify-content:space-between;padding:12px;transition:all .2s ease}.template-item:hover{border-color:#007bff;box-shadow:0 2px 4px #0000001a}.template-item.selected{background:#e3f2fd;border-color:#007bff}.template-info h4{color:#333;font-size:14px;margin:0 0 5px}.template-info p{color:#666;font-size:12px;margin:0}.delete-btn{align-items:center;background:#dc3545;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:14px;height:24px;justify-content:center;width:24px}.delete-btn:hover{background:#c82333}.canvas-container{background:#f5f5f5;display:flex;flex:1 1;flex-direction:column;min-width:0;overflow:visible}.canvas-controls{align-items:center;background:#fff;border-bottom:1px solid #ddd;display:flex;flex-shrink:0;gap:20px;justify-content:space-between;padding:10px 20px;z-index:2}.canvas-wrapper{align-items:flex-start;background:#f0f0f0;display:flex;flex:0 0 auto;justify-content:center;min-height:0;min-width:0;overflow:visible;padding:20px}.canvas-scaler{background:#e0e0e0;border-radius:4px;padding:0;transform:scale(1);transform-origin:top center}.diploma-canvas{background-color:#fff;background-position:50%;background-repeat:no-repeat;box-shadow:0 0 10px #0000001a;flex-shrink:0;margin:0 auto;position:relative}.grid-overlay{background-image:linear-gradient(90deg,#0000001a 1px,#0000 0),linear-gradient(180deg,#0000001a 1px,#0000 0);background-size:59.05512px 59.05512px;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.controls-panel{background:#fff;border-left:1px solid #ddd;flex-shrink:0;overflow-y:auto;padding:20px;width:300px;z-index:2}.control-section{border-bottom:1px solid #e0e0e0;margin-bottom:25px;padding-bottom:20px}.control-section:last-child{border-bottom:none;margin-bottom:0}.control-section h3{color:#333;font-size:16px;margin:0 0 15px}.field-form{display:flex;flex-direction:column;gap:10px}.field-form input,.field-form select{border:1px solid #ddd;border-radius:4px;font-size:14px;padding:8px 12px}.field-form input[type=color]{height:40px;padding:4px}.field-form label{align-items:center;color:#333;display:flex;font-size:14px;gap:8px}.field-form button{background:#007bff;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;margin-top:10px;padding:10px}.field-form button:hover{background:#0056b3}.field-actions{display:flex;gap:10px;margin-top:10px}.field-actions button{flex:1 1}.field-actions .delete-btn{background:#dc3545}.field-actions .delete-btn:hover{background:#c82333}.save-btn{background:#28a745;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:12px 20px;width:100%}.save-btn:hover{background:#218838}.field-element{position:relative;-webkit-user-select:none;user-select:none;white-space:normal;z-index:2}.field-element.resize-mode{border:1px solid #007bff;overflow:auto!important;padding-right:12px;resize:horizontal!important;z-index:1000}.field-element.resize-mode:after{background:linear-gradient(90deg,#0000,#007bff1a);bottom:0;content:"";cursor:col-resize;height:100%;position:absolute;right:0;width:12px}.field-content{word-wrap:break-word;align-items:center;background:#fff3;border:1px dashed #0000;border-radius:4px;display:flex!important;justify-content:flex-start;min-height:1em;position:relative;transition:all .2s ease;white-space:normal}.field-content[style*="text-align: center"]{justify-content:center}.field-content[style*="text-align: right"]{justify-content:flex-end}.field-element:hover .field-content{background:#ffffff4d;border-color:#007bff}.field-element.selected .field-content{background:#fff6;border-color:#007bff;box-shadow:0 0 0 2px #007bff4d}.field-controls{align-items:center;display:flex;gap:8px;left:0;position:absolute;top:calc(100% + 5px);z-index:1001}.apply-btn,.cancel-btn,.edit-width-btn{border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:2px 6px;pointer-events:auto;transition:all .2s ease}.edit-width-btn{background:#007bff}.edit-width-btn:hover{background:#0056b3}.resize-controls{display:flex;gap:4px}.apply-btn{background:#28a745}.apply-btn:hover{background:#218838}.cancel-btn{background:#dc3545}.cancel-btn:hover{background:#c82333}.field-info{background:#000c;border-radius:4px;color:#fff;font-size:12px;left:0;padding:4px 8px;pointer-events:none;position:absolute;top:calc(100% + 5px);white-space:nowrap;z-index:1000}.react-resizable{background:#0000;position:relative}.react-resizable-handle{background:#0000;cursor:col-resize;height:100%;position:absolute;right:0;top:0;width:10px;z-index:10}.react-resizable-handle:after{background:linear-gradient(90deg,#0000,#007bff33);content:"";height:100%;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s ease;width:4px}.field-element:hover .react-resizable-handle:after{opacity:1}.field-element.selected .react-resizable-handle:after{background:linear-gradient(90deg,#0000,#007bff66);opacity:1}.text-align-group{margin:10px 0}.text-align-group label{color:#333;display:block;font-weight:500;margin-bottom:5px}.text-align-buttons{display:flex;gap:5px}.align-btn{align-items:center;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;display:flex;flex:1 1;font-size:16px;justify-content:center;padding:8px;transition:all .2s ease}.align-btn:hover{background:#f8f9fa;border-color:#007bff}.align-btn.active{background:#007bff;border-color:#007bff;color:#fff}.align-btn.active:after{border-left:4px solid #0000;border-right:4px solid #0000;border-top:4px solid #007bff;bottom:-2px;content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0}.field-type-group{margin:10px 0}.field-type-group label{color:#333;display:block;font-weight:500;margin-bottom:5px}.field-type-group select{border:1px solid #ddd;border-radius:4px;font-size:14px;padding:8px;width:100%}.character-count-group{margin:10px 0}.character-count-group label{color:#333;display:block;font-weight:500;margin-bottom:5px}.character-count-group input[type=range]{margin:5px 0;width:100%}.coordinate-display,.field-coordinates{background:#000c;border-radius:4px;box-shadow:0 2px 4px #0003;color:#fff;font-size:12px;padding:8px 12px;pointer-events:none;position:fixed;white-space:nowrap;z-index:1000}.grid-controls{display:flex;flex-direction:column;gap:10px;margin-bottom:15px}.grid-controls label{align-items:center;color:#333;cursor:pointer;display:flex;font-size:14px;gap:8px}.grid-controls input[type=checkbox]{cursor:pointer;margin:0}.grid-controls label:has(input[type=checkbox]:checked){color:#007bff;font-weight:500}.loading{color:#666;padding:20px;text-align:center}.error-message{align-items:center;background:#f8d7da;border-radius:4px;color:#721c24;display:flex;justify-content:space-between;margin:10px 20px;padding:10px 15px}.error-message button{background:none;border:none;color:#721c24;cursor:pointer;font-size:18px}.no-template{align-items:center;color:#666;display:flex;font-size:18px;height:100%;justify-content:center}.print-btn{background-color:#28a745;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:16px;margin-top:10px;padding:10px;width:100%}.print-btn:hover{background-color:#218838}.print-preview{background:#fff;height:100%;overflow:auto;width:100%}@media print{.print-preview{height:auto;overflow:visible;position:static;width:auto}}.image-source-tabs{display:flex;gap:5px;margin-bottom:10px}.tab-btn{background:#fff;border:1px solid #ddd;border-radius:4px;color:#666;cursor:pointer;flex:1 1;font-size:12px;padding:8px 12px;transition:all .2s ease}.tab-btn:hover{background:#f8f9fa;border-color:#ced4da;color:#333}.tab-btn.active{background:#e3f2fd;border-color:#007bff;color:#007bff;font-weight:500}.folder-images-container{background:#f8f9fa;border:1px solid #ddd;border-radius:4px;max-height:300px;overflow-y:auto;padding:10px}.image-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.image-item{align-items:center;background:#fff;border:2px solid #0000;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;padding:8px;transition:all .2s ease}.image-item:hover{border-color:#007bff;box-shadow:0 2px 4px #0000001a}.image-item.selected{background:#e3f2fd;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.image-item img{border-radius:4px;margin-bottom:5px}.image-name{font-size:11px;max-width:100px;word-break:break-word}.image-name,.no-images{color:#666;text-align:center}.no-images{padding:20px}.no-images p{margin:5px 0}.no-images code{background:#f1f1f1;border-radius:3px;font-size:12px;padding:2px 4px}.printable-diploma{background:#fff;height:297mm;margin:0;padding:0;position:relative;width:210mm}.diploma-background{height:100%;position:relative;width:100%}.diploma-field{box-sizing:border-box;margin:0;padding:0;position:absolute;white-space:pre-wrap}@media print{.diploma-background{background-color:initial!important;background-image:none!important}.diploma-field{background-color:initial!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.printable-diploma{background:#0000;height:297mm;margin:0;padding:0;width:210mm}}.field-input-group{margin-bottom:15px}.field-input-group label{color:#333;display:block;font-weight:500;margin-bottom:5px}.field-input-group input{border:1px solid #ddd;border-radius:4px;font-size:14px;padding:8px 12px;width:100%}.field-input-group input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff40;outline:none}.required{color:#dc3545;font-weight:700}.print-preview{align-items:center;background:#000c;display:flex;height:100vh;justify-content:center;left:0;padding:20px;position:fixed;top:0;width:100vw;z-index:9999}.print-preview .printable-diploma{background:#fff;box-shadow:0 10px 30px #0000004d;max-height:90vh;max-width:90vw;transform:scale(.8);transform-origin:center}@media print{.print-preview{background:none;padding:0;position:static}.print-preview .printable-diploma{box-shadow:none;max-height:none;max-width:none;transform:none}}