.logout-btn{background:var(--cream);color:var(--dark-green);border:3px solid #2c3e2c;border-radius:10px;padding:10px 20px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;text-decoration:none;box-shadow:4px 4px #2c3e2c}.logout-btn:hover{background:#2c3e2c;color:var(--cream);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--dark-green)}.logout-btn:active{transform:translate(0);box-shadow:2px 2px #2c3e2c}.whatsapp-button{position:fixed;bottom:25px;right:25px;background:linear-gradient(135deg,#25d366,#128c7e);border:3px solid #075E54;border-radius:50px;padding:15px 20px;cursor:pointer;transition:all .3s ease;box-shadow:6px 6px #075e54;z-index:1000}.whatsapp-button:hover{transform:translate(-3px,-3px);box-shadow:9px 9px #075e54}.whatsapp-content{display:flex;align-items:center;gap:10px}.whatsapp-icon{width:30px;height:30px;filter:brightness(0) invert(1)}.whatsapp-text{color:#fff;font-weight:700;font-size:.9rem;white-space:nowrap}@media (max-width: 768px){.whatsapp-button{bottom:20px;right:20px;padding:12px 15px}.whatsapp-text{display:none}.whatsapp-content{gap:0}}.layout-container{min-height:100vh;background:linear-gradient(135deg,var(--cream) 0%,#f8faf0 100%)}.layout-nav{background:var(--dark-green);border-bottom:4px solid #2c3e2c;box-shadow:0 4px #2c3e2c;padding:0 20px}.nav-content{display:flex;justify-content:space-between;align-items:center;padding:15px 0;max-width:1200px;margin:0 auto}.nav-brand{display:flex;align-items:center;gap:12px}.nav-logo{font-size:2rem}.nav-title{color:var(--cream);font-size:1.4rem;font-weight:800;text-shadow:2px 2px 0px #2c3e2c}.nav-links{display:flex;gap:30px;align-items:center}.nav-link{color:var(--cream);text-decoration:none;font-weight:600;padding:10px 20px;border:3px solid transparent;border-radius:10px;transition:all .3s ease;background:#edf1d61a}.nav-link:hover{background:var(--medium-green);border-color:var(--cream);transform:translateY(-2px);box-shadow:4px 4px 0 var(--cream)}.nav-link.active{background:var(--medium-green);border:3px solid var(--cream);box-shadow:4px 4px 0 var(--cream);font-weight:700}.nav-right{display:flex;align-items:center}.layout-outlet{max-width:1200px;margin:0 auto;padding:0 20px}@media (max-width: 768px){.nav-content{flex-direction:column;gap:15px;padding:15px 0}.nav-links{gap:15px}.nav-link{padding:8px 15px;font-size:.9rem}.nav-title{font-size:1.2rem}}.page-home{padding:20px;background:linear-gradient(135deg,var(--cream) 0%,#f8faf0 100%);min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding:20px;background:var(--dark-green);border:4px solid #2c3e2c;border-radius:12px;box-shadow:8px 8px #2c3e2c}.page-title{color:var(--cream);font-size:2rem;font-weight:800;margin:0;text-shadow:2px 2px 0px #2c3e2c}.user-info.subscriber{background:var(--medium-green);padding:12px 20px;border:3px solid var(--dark-green);border-radius:8px;color:var(--cream);font-weight:600;box-shadow:4px 4px 0 var(--dark-green)}.user-info.subscriber p{margin:0;font-size:1rem}.statistics-section{margin-bottom:40px}.statistics-title{color:var(--dark-green);font-size:1.5rem;font-weight:800;margin-bottom:20px;text-align:center;text-shadow:2px 2px 0px var(--light-green)}.statistics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:var(--cream);border:4px solid var(--dark-green);border-radius:16px;padding:25px;display:flex;align-items:center;gap:20px;box-shadow:6px 6px 0 var(--dark-green);transition:all .3s ease;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--dark-green),var(--medium-green),var(--light-green))}.stat-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--dark-green)}.stat-icon{font-size:2.5rem;min-width:60px;text-align:center}.stat-content{flex:1}.stat-value{color:var(--dark-green);font-size:2.2rem;font-weight:800;margin:0 0 5px;line-height:1}.stat-label{color:var(--medium-green);font-size:1rem;font-weight:700;margin:0 0 10px;text-transform:uppercase;letter-spacing:.5px}.stat-details{display:flex;flex-direction:column;gap:4px}.stat-detail-item{color:var(--dark-green);font-size:.85rem;font-weight:500;background:#6099661a;padding:4px 8px;border-radius:6px;border:1px solid var(--light-green)}.stat-card.total{border-color:var(--dark-green)}.stat-card.pembinaan{border-color:var(--medium-green)}.stat-card.pendidikan{border-color:var(--light-green)}.stat-card.gender{border-color:#8b4513}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50vh}.loading-text{color:var(--dark-green);font-size:1.2rem;font-weight:600}.empty-state{text-align:center;padding:60px 20px;background:var(--cream);border:4px solid var(--dark-green);border-radius:16px;box-shadow:8px 8px 0 var(--dark-green)}.empty-icon{font-size:4rem;margin-bottom:20px}.empty-text{color:var(--dark-green);font-size:1.5rem;font-weight:700;margin-bottom:10px}.empty-subtext{color:#666;font-size:1rem}.generus-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:25px;padding:20px 0}.generus-card{background:var(--cream);border:4px solid var(--dark-green);border-radius:16px;padding:25px;cursor:pointer;transition:all .3s ease;box-shadow:8px 8px 0 var(--dark-green);position:relative;overflow:hidden}.generus-card:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:linear-gradient(90deg,var(--dark-green),var(--medium-green),var(--light-green))}.generus-card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px #2c3e2c}.generus-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.generus-name{color:var(--dark-green);font-size:1.4rem;font-weight:800;margin:0 15px 0 0;line-height:1.3;flex:1}.gender-badge{background:#60996633;padding:6px 12px;border:2px solid var(--medium-green);border-radius:20px;font-size:.85rem;font-weight:600;color:var(--dark-green);white-space:nowrap}.gender-badge.female{background:#9dc08b4d;border-color:var(--light-green);color:var(--dark-green)}.generus-details{margin-bottom:20px}.detail-item{display:flex;align-items:center;margin-bottom:12px;padding:8px 0;border-bottom:2px dashed rgba(96,153,102,.3)}.detail-icon{margin-right:12px;font-size:1.1rem;min-width:24px}.detail-item span:last-child{color:var(--dark-green);font-weight:500;font-size:.95rem}.detail-badges{margin-bottom:20px}.detail-badge{background:linear-gradient(135deg,var(--medium-green),var(--dark-green));color:var(--cream);padding:8px 16px;border:2px solid var(--dark-green);border-radius:20px;font-size:.9rem;font-weight:600;display:inline-block;box-shadow:3px 3px 0 var(--dark-green)}.detail-button{width:100%;background:var(--dark-green);color:var(--cream);border:3px solid #2c3e2c;border-radius:10px;padding:14px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;box-shadow:4px 4px #2c3e2c}.detail-button:hover{background:#2c3e2c;transform:translate(-2px,-2px);box-shadow:6px 6px #1a291a}@media (max-width: 768px){.page-home{padding:15px}.page-header{flex-direction:column;gap:15px;text-align:center}.page-title{font-size:1.6rem}.statistics-grid{grid-template-columns:1fr}.stat-card{padding:20px}.generus-list{grid-template-columns:1fr;gap:20px}.generus-header{flex-direction:column;gap:10px}.generus-name{margin-right:0}}.stat-detail-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding:4px 0}.stat-detail-label{color:var(--dark-green);font-size:.85rem;font-weight:500;text-align:left;flex:1}.stat-detail-value{color:var(--dark-green);font-size:.9rem;font-weight:700;text-align:right;min-width:30px;background:#60996633;padding:2px 8px;border-radius:12px;border:1px solid var(--medium-green)}.section-divider{display:flex;align-items:center;justify-content:center;margin:40px 0 30px;gap:20px}.divider-line{flex:1;height:4px;background:linear-gradient(90deg,transparent,var(--medium-green),transparent);border-radius:2px}.section-title{color:var(--dark-green);font-size:1.5rem;font-weight:800;text-align:center;text-shadow:2px 2px 0px var(--light-green);padding:0 20px}.admin-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.overview-card{background:var(--cream);border:4px solid var(--dark-green);border-radius:16px;padding:25px;display:flex;align-items:center;gap:20px;box-shadow:6px 6px 0 var(--dark-green);transition:all .3s ease}.overview-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--dark-green)}.overview-icon{font-size:3rem;min-width:60px;text-align:center}.overview-content{flex:1}.overview-value{color:var(--dark-green);font-size:2.5rem;font-weight:800;margin:0 0 5px;line-height:1}.overview-label{color:var(--medium-green);font-size:1.1rem;font-weight:700;margin:0;text-transform:uppercase;letter-spacing:.5px}.kelompok-section{margin-bottom:40px}.kelompok-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:25px;margin-top:20px}.kelompok-card{background:var(--cream);border:4px solid var(--medium-green);border-radius:16px;padding:25px;cursor:pointer;transition:all .3s ease;box-shadow:6px 6px 0 var(--medium-green);position:relative;overflow:hidden}.kelompok-card:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--dark-green),var(--medium-green),var(--light-green))}.kelompok-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--dark-green)}.kelompok-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.kelompok-name{color:var(--dark-green);font-size:1.3rem;font-weight:800;margin:0 15px 0 0;line-height:1.3;flex:1}.kelompok-badge{background:var(--medium-green);color:var(--cream);padding:6px 12px;border:2px solid var(--dark-green);border-radius:20px;font-size:.85rem;font-weight:700;white-space:nowrap;box-shadow:2px 2px 0 var(--dark-green)}.kelompok-stats{margin-bottom:20px}.kelompok-stat{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:8px 0;border-bottom:2px dashed rgba(96,153,102,.3)}.kelompok-stat:last-child{border-bottom:none}.kelompok-stat .stat-label{color:var(--dark-green);font-weight:600;font-size:.9rem}.kelompok-stat .stat-value{color:var(--dark-green);font-weight:700;font-size:1rem;background:#60996633;padding:4px 10px;border-radius:12px;border:1px solid var(--medium-green)}.kelompok-button{width:100%;background:var(--medium-green);color:var(--cream);border:3px solid var(--dark-green);border-radius:10px;padding:12px;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;box-shadow:4px 4px 0 var(--dark-green)}.kelompok-button:hover{background:var(--dark-green);transform:translate(-2px,-2px);box-shadow:6px 6px #2c3e2c}.modal-overlay{position:fixed;inset:0;background:#40513bcc;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.modal-content{background:var(--cream);border:4px solid var(--dark-green);border-radius:20px;width:95%;max-width:1200px;max-height:90vh;overflow-y:auto;box-shadow:12px 12px 0 var(--dark-green);position:relative}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:25px 30px;background:var(--dark-green);border-bottom:4px solid #2c3e2c}.modal-title{color:var(--cream);font-size:1.5rem;font-weight:800;margin:0;text-shadow:2px 2px 0px #2c3e2c}.modal-close{background:var(--cream);color:var(--dark-green);border:3px solid #2c3e2c;border-radius:8px;width:40px;height:40px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:3px 3px #2c3e2c}.modal-close:hover{background:#2c3e2c;color:var(--cream);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--dark-green)}.modal-body{padding:30px}.modal-subtitle{color:var(--dark-green);font-size:1.3rem;font-weight:800;margin-bottom:20px;text-align:center;text-shadow:2px 2px 0px var(--light-green)}.modal-statistics{margin-bottom:40px}.modal-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.modal-generus-list{border-top:4px dashed var(--medium-green);padding-top:30px}.modal-list{max-height:400px;overflow-y:auto;padding:10px}.modal-card{margin-bottom:15px}@media (max-width: 768px){.admin-overview,.kelompok-grid{grid-template-columns:1fr}.modal-content{width:100%;margin:10px}.modal-header,.modal-body{padding:20px}.modal-grid{grid-template-columns:1fr}}.clickable{cursor:pointer;transition:all .3s ease}.clickable:hover{transform:translate(-2px,-2px)}.export-btn{background:var(--medium-green);color:var(--cream);border:3px solid var(--dark-green);border-radius:10px;padding:10px 16px;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;box-shadow:4px 4px 0 var(--dark-green);display:flex;align-items:center;gap:8px}.export-btn:hover{background:var(--dark-green);transform:translate(-2px,-2px);box-shadow:6px 6px #2c3e2c}.export-btn.small{padding:8px 12px;font-size:.8rem}.export-mini-btn{background:var(--light-green);color:var(--dark-green);border:2px solid var(--dark-green);border-radius:6px;padding:6px 8px;font-size:.8rem;cursor:pointer;transition:all .3s ease;box-shadow:2px 2px 0 var(--dark-green);margin-top:8px}.export-mini-btn:hover{background:var(--medium-green);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--dark-green)}.statistics-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:15px}.modal-actions{display:flex;align-items:center;gap:10px}.user-info.subscriber,.user-info.admin{display:flex;align-items:center;gap:15px;flex-wrap:wrap}@media (max-width: 768px){.statistics-header,.user-info.subscriber,.user-info.admin{flex-direction:column;align-items:flex-start}.modal-actions{flex-direction:column;width:100%}.export-btn{width:100%;justify-content:center}}.detail-generus-container{padding:20px;background:linear-gradient(135deg,var(--cream) 0%,#f8faf0 100%);min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding:25px;background:var(--dark-green);border:4px solid #2c3e2c;border-radius:16px;box-shadow:8px 8px #2c3e2c}.detail-title{color:var(--cream);font-size:2rem;font-weight:800;margin:0;text-shadow:2px 2px 0px #2c3e2c}.header-badge{display:flex;gap:15px}.kelompok-badge{background:var(--medium-green);color:var(--cream);padding:10px 20px;border:3px solid var(--cream);border-radius:25px;font-size:1rem;font-weight:700;box-shadow:4px 4px 0 var(--cream)}.detail-generus-content{display:grid;gap:25px;margin-bottom:30px}.detail-section{background:var(--cream);border:4px solid var(--dark-green);border-radius:16px;padding:0;overflow:hidden;box-shadow:8px 8px 0 var(--dark-green)}.section-header h3{color:var(--cream);font-size:1.4rem;font-weight:800;margin:0;text-shadow:2px 2px 0px #2c3e2c}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;padding:0}.detail-item{display:flex;flex-direction:column;padding:20px 25px;border-bottom:2px dashed rgba(96,153,102,.3);background:var(--cream);transition:all .3s ease}.detail-item:hover{background:#6099660d}.detail-item:last-child{border-bottom:none}.detail-item.full-width{grid-column:1 / -1}.detail-label{color:var(--dark-green);font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;opacity:.8}.detail-value{color:var(--dark-green);font-size:1.1rem;font-weight:600;line-height:1.4}.empty-value{color:#999;font-style:italic;font-weight:500}.gender-value{display:flex;align-items:center;gap:8px;font-weight:700}.blood-type{background:#ff00001a;padding:4px 12px;border-radius:20px;border:2px solid #d32f2f;font-weight:700;display:inline-block}.kelompok-value{background:#60996633;padding:6px 14px;border-radius:20px;border:2px solid var(--medium-green);font-weight:700;display:inline-block}.pembinaan-value{background:#9dc08b4d;padding:6px 14px;border-radius:20px;border:2px solid var(--light-green);font-weight:700;display:inline-block}.array-container{display:flex;flex-wrap:wrap;gap:8px}.array-item{background:#60996633;color:var(--dark-green);padding:6px 12px;border:2px solid var(--medium-green);border-radius:15px;font-size:.9rem;font-weight:600;box-shadow:2px 2px 0 var(--medium-green)}.detail-actions{display:flex;gap:15px;justify-content:center;padding:25px;background:var(--cream);border:4px solid var(--dark-green);border-radius:16px;box-shadow:8px 8px 0 var(--dark-green)}.action-button{padding:15px 25px;border:3px solid;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;box-shadow:4px 4px;display:flex;align-items:center;gap:8px}.back-button{background:var(--light-green);color:var(--dark-green);border-color:var(--dark-green);box-shadow:4px 4px 0 var(--dark-green)}.back-button:hover{background:var(--medium-green);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--dark-green)}.edit-button{background:var(--medium-green);color:var(--cream);border-color:var(--dark-green);box-shadow:4px 4px 0 var(--dark-green)}.edit-button:hover{background:var(--dark-green);transform:translate(-2px,-2px);box-shadow:6px 6px #2c3e2c}.delete-button{background:#ffebee;color:#d32f2f;border-color:#d32f2f;box-shadow:4px 4px #d32f2f}.delete-button:hover{background:#d32f2f;color:#fff;transform:translate(-2px,-2px);box-shadow:6px 6px #b71c1c}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50vh;text-align:center}.loading-text,.error-text{color:var(--dark-green);font-size:1.2rem;font-weight:600;margin-bottom:20px}.error-icon{font-size:3rem;margin-bottom:20px}@media (max-width: 768px){.detail-generus-container{padding:15px}.detail-header{flex-direction:column;gap:15px;text-align:center}.detail-title{font-size:1.6rem}.detail-grid{grid-template-columns:1fr}.detail-actions{flex-direction:column}.action-button{justify-content:center}}.form-tambah-generus{max-width:1000px;margin:0 auto;padding:20px}.form-section{margin-bottom:40px;padding:25px;background:#f8f9fa;border-radius:10px;border-left:4px solid #667eea}.section-title:before{content:"";width:4px;height:20px;background:#667eea;border-radius:2px}.form-row{display:contents}.form-input:focus,.form-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 15px #667eea4d}.btn-outline{background:transparent;border:2px solid #667eea;color:#667eea}.btn-outline:hover{background:#667eea;color:#fff}.add-field-btn:hover{background:#e9ecef;border-color:#667eea;color:#667eea}.submit-btn{background:linear-gradient(135deg,#28a745,#20c997);color:#fff;padding:15px 40px;font-size:1.1rem;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;font-weight:600}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #28a7454d}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@media (max-width: 768px){.form-tambah-generus{padding:15px}.form-container{padding:20px}.form-section{padding:20px;margin-bottom:30px}.form-grid{grid-template-columns:1fr;gap:15px}.nested-grid{grid-template-columns:1fr}.section-title{font-size:1.2rem}.form-title{font-size:2rem}}@media (max-width: 480px){.form-tambah-generus{padding:10px}.form-container,.form-section{padding:15px}.array-item{flex-direction:column;align-items:stretch}.submit-btn{width:100%;padding:12px 20px}}.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2340513B' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}.form-update-generus{max-width:1000px;margin:0 auto;padding:20px}.form-header{text-align:center;margin-bottom:30px}.form-title{color:#2c3e50;font-size:2.5rem;margin-bottom:10px;font-weight:700}.form-subtitle{color:#7f8c8d;font-size:1.1rem}.form-container{background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 20px #0000001a;border:1px solid #e1e8ed}.form-section{margin-bottom:40px;padding:25px;background:#f8f9fa;border-radius:10px;border-left:4px solid #ff6b6b}.section-title{color:#2c3e50;font-size:1.4rem;margin-bottom:20px;font-weight:600;display:flex;align-items:center;gap:10px}.section-title:before{content:"";width:4px;height:20px;background:#ff6b6b;border-radius:2px}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.form-group{margin-bottom:20px}.form-label{display:block;margin-bottom:8px;font-weight:600;color:#2c3e50;font-size:.95rem}.form-input,.form-select{width:100%;padding:12px 15px;border:2px solid #e1e8ed;border-radius:8px;font-size:16px;transition:all .3s ease;background:#fff;box-sizing:border-box}.form-input:focus,.form-select:focus{outline:none;border-color:#ff6b6b;box-shadow:0 0 0 3px #ff6b6b1a}.form-input::placeholder{color:#aab7c4}.form-input:read-only{background-color:#f8f9fa;border-color:#dee2e6;color:#6c757d;cursor:not-allowed}.form-input:read-only:focus{border-color:#dee2e6;box-shadow:none}.nested-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px}.array-group{background:#fff;padding:15px;border-radius:8px;border:1px solid #e1e8ed;margin-bottom:15px}.array-item:last-child{margin-bottom:0}.array-input{flex:1}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px}.btn-primary{background:linear-gradient(135deg,#ff6b6b,#ee5a52);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 15px #ff6b6b4d}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#5a6268;transform:translateY(-1px)}.btn-outline{background:transparent;border:2px solid #ff6b6b;color:#ff6b6b}.btn-outline:hover{background:#ff6b6b;color:#fff}.btn-sm{padding:8px 16px;font-size:12px}.btn-full{width:100%;justify-content:center}.add-field-btn{background:#f8f9fa;border:2px dashed #dee2e6;color:#6c757d;padding:10px 15px;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:14px;display:flex;align-items:center;gap:8px;justify-content:center;margin-top:10px}.add-field-btn:hover{background:#e9ecef;border-color:#ff6b6b;color:#ff6b6b}.submit-section{text-align:center;margin-top:40px;padding-top:30px;border-top:2px solid #e9ecef}.submit-btn{background:linear-gradient(135deg,#ff6b6b,#ee5a52);color:#fff;padding:15px 40px;font-size:1.1rem;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;font-weight:600}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b4d}.submit-btn:active{transform:translateY(0)}.submit-btn:disabled{background:#bdc3c7;cursor:not-allowed;transform:none;box-shadow:none}.loading-form{text-align:center;padding:40px;color:#6c757d}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #ff6b6b;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}.read-only-info{background:#e3f2fd;border:1px solid #bbdefb;border-radius:6px;padding:10px 15px;margin-bottom:15px;font-size:.9rem;color:#1565c0;display:flex;align-items:center;gap:8px}@media (max-width: 768px){.form-update-generus{padding:15px}.form-container{padding:20px}.form-section{padding:20px;margin-bottom:30px}.form-grid{grid-template-columns:1fr;gap:15px}.nested-grid{grid-template-columns:1fr}.section-title{font-size:1.2rem}.form-title{font-size:2rem}}@media (max-width: 480px){.form-update-generus{padding:10px}.form-container,.form-section{padding:15px}.array-item{flex-direction:column;align-items:stretch}.submit-btn{width:100%;padding:12px 20px}}.form-input:invalid:not(:focus):not(:placeholder-shown){border-color:#e74c3c}.form-input:valid:not(:focus):not(:placeholder-shown){border-color:#27ae60}.form-label.required:after{content:" *";color:#e74c3c}.form-section{animation:slideInUp .5s ease-out}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.admin-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:500;display:inline-flex;align-items:center;gap:5px;margin-left:10px}.form-tambah-generus,.form-update-generus{padding:20px;background:linear-gradient(135deg,var(--cream) 0%,#f8faf0 100%);min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.form-header{background:var(--dark-green);border:4px solid #2c3e2c;border-radius:16px;padding:25px 30px;margin-bottom:30px;box-shadow:8px 8px #2c3e2c;position:relative;overflow:hidden}.form-header:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--dark-green),var(--medium-green),var(--light-green))}.form-title{color:var(--cream);font-size:2rem;font-weight:800;margin:0 0 10px;text-shadow:2px 2px 0px #2c3e2c}.form-subtitle{color:var(--light-green);font-size:1.1rem;font-weight:600;margin:0}.admin-badge{background:var(--medium-green);color:var(--cream);padding:8px 16px;border:2px solid var(--cream);border-radius:20px;font-size:.9rem;font-weight:700;display:inline-block;margin-top:10px;box-shadow:3px 3px 0 var(--cream)}.form-container{max-width:1200px;margin:0 auto}.form-section{background:var(--cream);border:4px solid var(--dark-green);border-radius:16px;margin-bottom:25px;overflow:hidden;box-shadow:8px 8px 0 var(--dark-green)}.section-header{background:var(--dark-green);padding:20px 25px;border-bottom:4px solid #2c3e2c}.section-title{color:var(--cream);font-size:1.4rem;font-weight:800;margin:0;text-shadow:2px 2px 0px #2c3e2c}.form-grid,.nested-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:25px}.form-group{display:flex;flex-direction:column}.form-label{color:var(--dark-green);font-size:1rem;font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.form-label.required:after{content:" *";color:#d32f2f}.form-input,.form-select{background:#fff;border:3px solid var(--dark-green);border-radius:12px;padding:14px 16px;font-size:1rem;font-weight:600;color:var(--dark-green);box-shadow:4px 4px 0 var(--dark-green);transition:all .3s ease;outline:none;width:100%}.form-input:focus,.form-select:focus{border-color:var(--medium-green);box-shadow:6px 6px 0 var(--medium-green);transform:translate(-2px,-2px)}.form-input:disabled,.form-select:disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2340513B' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}.array-item{display:flex;gap:10px;align-items:center;margin-bottom:10px}.array-input{flex:1;margin-bottom:0}.remove-field-btn{background:#ffebee;color:#d32f2f;border:2px solid #d32f2f;border-radius:8px;padding:10px 12px;font-size:.9rem;cursor:pointer;transition:all .3s ease;box-shadow:2px 2px #d32f2f;flex-shrink:0}.remove-field-btn:hover{background:#d32f2f;color:#fff;transform:translate(-1px,-1px);box-shadow:3px 3px #b71c1c}.add-field-btn{background:var(--light-green);color:var(--dark-green);border:2px solid var(--dark-green);border-radius:8px;padding:10px 16px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:3px 3px 0 var(--dark-green);margin-top:5px}.add-field-btn:hover{background:var(--medium-green);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--dark-green)}.read-only-info{background:#9dc08b4d;border:2px solid var(--light-green);border-radius:12px;padding:15px;margin:0 25px 20px;color:var(--dark-green);font-weight:600;text-align:center;box-shadow:3px 3px 0 var(--light-green)}.submit-section{text-align:center;padding:30px}.submit-btn{background:var(--dark-green);color:var(--cream);border:3px solid #2c3e2c;border-radius:12px;padding:18px 40px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:6px 6px #2c3e2c;display:inline-flex;align-items:center;gap:12px}.submit-btn:hover:not(:disabled){background:#2c3e2c;transform:translate(-2px,-2px);box-shadow:8px 8px #1a291a}.submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none;box-shadow:6px 6px #2c3e2c}.loading-form{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50vh;text-align:center}.loading-spinner{width:50px;height:50px;border:5px solid var(--cream);border-top:5px solid var(--dark-green);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.loading-spinner-small{width:20px;height:20px;border:3px solid var(--cream);border-top:3px solid var(--dark-green);border-radius:50%;animation:spin 1s linear infinite;display:inline-block}.loading-form p{color:var(--dark-green);font-size:1.2rem;font-weight:600}@media (max-width: 768px){.form-tambah-generus,.form-update-generus{padding:15px}.form-header{padding:20px}.form-title{font-size:1.6rem}.form-grid,.nested-grid{grid-template-columns:1fr;padding:20px;gap:15px}.array-item{flex-direction:column;gap:8px}.remove-field-btn{align-self:flex-end}.submit-btn{width:100%;justify-content:center}}:root{--dark-green: #40513B;--medium-green: #609966;--light-green: #9DC08B;--cream: #EDF1D6}.login-container{min-height:100vh;background:linear-gradient(135deg,var(--cream) 0%,#f8faf0 100%);display:flex;justify-content:center;align-items:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.login-form{background:var(--cream);border:4px solid var(--dark-green);border-radius:20px;padding:40px;width:100%;max-width:450px;box-shadow:12px 12px 0 var(--dark-green);position:relative;overflow:hidden}.login-form:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:linear-gradient(90deg,var(--dark-green),var(--medium-green),var(--light-green))}.login-header{text-align:center;margin-bottom:30px}.login-icon{font-size:3.5rem;margin-bottom:15px}.login-title{color:var(--dark-green);font-size:2rem;font-weight:800;margin:0 0 10px;text-shadow:2px 2px 0px var(--light-green)}.login-subtitle{color:var(--medium-green);font-size:.95rem;font-weight:600;margin:0;opacity:.9}.input-group{margin-bottom:25px}.input-field{position:relative;margin-bottom:20px;display:flex;align-items:center}.input-icon{position:absolute;left:15px;font-size:1.2rem;z-index:2}.login-input{width:100%;background:#fff;border:3px solid var(--dark-green);border-radius:12px;padding:15px 15px 15px 45px;font-size:1rem;font-weight:600;color:var(--dark-green);box-shadow:4px 4px 0 var(--dark-green);transition:all .3s ease;outline:none}.login-input:focus{border-color:var(--medium-green);box-shadow:6px 6px 0 var(--medium-green);transform:translate(-2px,-2px)}.login-input:disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.password-toggle{position:absolute;right:15px;background:var(--light-green);border:2px solid var(--dark-green);border-radius:8px;padding:8px;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:2px 2px 0 var(--dark-green)}.password-toggle:hover{background:var(--medium-green);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--dark-green)}.password-toggle:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:2px 2px 0 var(--dark-green)}.login-button{width:100%;background:var(--dark-green);color:var(--cream);border:3px solid #2c3e2c;border-radius:12px;padding:16px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;box-shadow:6px 6px #2c3e2c;display:flex;justify-content:center;align-items:center;gap:10px}.login-button:hover:not(:disabled){background:#2c3e2c;transform:translate(-2px,-2px);box-shadow:8px 8px #1a291a}.login-button:disabled{opacity:.7;cursor:not-allowed;transform:none;box-shadow:6px 6px #2c3e2c}.loading-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{background:#ffebee;border:3px solid #d32f2f;border-radius:12px;padding:15px;margin-bottom:20px;color:#d32f2f;font-weight:600;text-align:center;box-shadow:4px 4px #d32f2f}.login-footer{text-align:center;margin-top:25px;padding-top:20px;border-top:2px dashed var(--light-green)}.login-footer p{color:var(--medium-green);font-size:.9rem;font-weight:600;margin:0}@media (max-width: 768px){.login-form{padding:10px 12px}.login-title{font-size:1.7rem}.login-icon{font-size:3rem}}