html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.6;color:#333}#root{height:100%}a{text-decoration:none;color:inherit}button{border:none;background:none;font-family:inherit;cursor:pointer}input{font-family:inherit;border:none;outline:none}.home-container{min-height:100vh;background:#04214a;position:relative;overflow-x:hidden}.welcome-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#04214a;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;color:#fff;text-align:center}.graduation-cap{font-size:4rem;margin-bottom:1rem;animation:bounce 2s infinite}.welcome-text{font-size:2rem;font-weight:700;margin-bottom:.5rem;opacity:0;animation:slideIn 1s ease-out .5s forwards}.subtitle{font-size:1.2rem;opacity:0;animation:slideIn 1s ease-out 1s forwards}.hiraku-button-container{margin-top:30px;opacity:0;animation:fadeInButton 1.5s ease-in-out 2s forwards}.hiraku-button{position:relative;padding:16px 64px;color:#fff;font-size:2rem;font-weight:500;border-radius:50px;border:none;background:linear-gradient(to right,#d97706,#eab308,#fbbf24);transform:translateY(0);transition:all .3s ease-out;cursor:pointer;overflow:hidden}.hiraku-button:hover{background:linear-gradient(to right,#eab308,#fbbf24,#fde047);transform:scale(1.05);box-shadow:0 10px 25px #fbbf2480}.hiraku-button:active{transform:scale(.95)}.button-text{position:relative;z-index:10}.warning-text{font-size:.7rem;margin-top:10px;color:#ffeb3b;text-shadow:1px 1px 4px rgba(0,0,0,.5)}.button-glow{position:absolute;inset:0;border-radius:50px;background:linear-gradient(to right,#fbbf24,#d97706);opacity:0;transition:opacity .3s ease;filter:blur(40px)}.hiraku-button:hover .button-glow{opacity:.2}.button-shine{position:absolute;inset:0;border-radius:50px;background:linear-gradient(to right,transparent,white,transparent);opacity:0;transition:opacity .5s ease;transform:skew(-12deg)}.hiraku-button:hover .button-shine{opacity:.1}@keyframes fadeInButton{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1}80%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes slideIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999}.particle{position:absolute;width:4px;height:4px;background:gold;border-radius:50%;animation:fall linear infinite}@keyframes fall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(360deg);opacity:0}}.main-content{padding:10px;position:relative;z-index:1;width:100%;max-width:100%}.hero{text-align:center;color:#fff;padding:30px 20px 20px}.hero h1{font-size:2rem;margin-bottom:15px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.family-image-container{display:flex;justify-content:center;margin-bottom:20px;width:100%}.family-image{width:100%;max-width:500px;height:auto;border-radius:15px;rgba(0,0,0,.3);transition:all .3s ease;opacity:0;animation:fadeInImage 1s ease-in-out 1s forwards}.family-image:hover{transform:scale(1.05);box-shadow:0 12px 35px #0006}@keyframes fadeInImage{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.family-title-container{text-align:center;margin-top:30px;margin-bottom:20px}.family-title{position:relative;display:inline-block;font-size:2.5rem;font-weight:700;color:#fff;text-shadow:2px 2px 8px rgba(0,0,0,.5),0 0 20px rgba(255,255,255,.5);letter-spacing:3px;opacity:0;animation:fadeInTitle 1.5s ease-in-out 2s forwards,titleGlow 3s ease-in-out infinite}@keyframes titleGlow{0%,to{text-shadow:2px 2px 8px rgba(0,0,0,.5),0 0 20px rgba(255,255,255,.5)}50%{text-shadow:2px 2px 8px rgba(0,0,0,.5),0 0 30px rgba(255,255,255,.8),0 0 40px rgba(255,235,59,.6)}}.glitter-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.glitter{position:absolute;top:0;left:0;width:4px;height:4px;background:radial-gradient(circle,#fff,#ffeb3b,#fff);box-shadow:0 0 15px #fff,0 0 25px #ffeb3b,0 0 35px #fff;animation:glitterMove 2s linear infinite;border-radius:50%}.glitter:nth-child(1){left:10%;top:20%;animation-delay:0s}.glitter:nth-child(2){left:25%;top:60%;animation-delay:.2s}.glitter:nth-child(3){left:40%;top:10%;animation-delay:.4s}.glitter:nth-child(4){left:55%;top:70%;animation-delay:.6s}.glitter:nth-child(5){left:70%;top:30%;animation-delay:.8s}.glitter:nth-child(6){left:85%;top:50%;animation-delay:1s}.glitter:nth-child(7){left:15%;top:80%;animation-delay:1.2s}.glitter:nth-child(8){left:35%;top:40%;animation-delay:1.4s}.glitter:nth-child(9){left:60%;top:90%;animation-delay:1.6s}.glitter:nth-child(10){left:80%;top:15%;animation-delay:1.8s}.glitter:nth-child(11){left:5%;top:45%;animation-delay:.1s}.glitter:nth-child(12){left:45%;top:75%;animation-delay:.3s}.glitter:nth-child(13){left:65%;top:25%;animation-delay:.5s}.glitter:nth-child(14){left:90%;top:65%;animation-delay:.7s}.glitter:nth-child(15){left:30%;top:55%;animation-delay:.9s}@keyframes glitterMove{0%{transform:translateY(0) scale(0) rotate(0);opacity:0}20%{transform:translateY(-5px) scale(1) rotate(90deg);opacity:1}80%{transform:translateY(-15px) scale(1.2) rotate(270deg);opacity:1}to{transform:translateY(-30px) scale(0) rotate(360deg);opacity:0}}@keyframes fadeInTitle{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.family-subtitle{font-size:1.8rem;font-weight:300;color:#fff;text-shadow:1px 1px 6px rgba(0,0,0,.4);letter-spacing:2px;margin-top:15px;opacity:0;animation:fadeInSubtitle 2s ease-in-out 2.5s forwards,gentleFloat 4s ease-in-out infinite;position:relative}.family-subtitle:before{content:"";position:absolute;top:-5px;left:50%;width:0;height:2px;background:linear-gradient(90deg,transparent,#ffeb3b,transparent);transform:translate(-50%);animation:lineExpand 2s ease-in-out 3s forwards}.family-subtitle:after{content:"";position:absolute;bottom:-5px;left:50%;width:0;height:2px;background:linear-gradient(90deg,transparent,#ffeb3b,transparent);transform:translate(-50%);animation:lineExpand 2s ease-in-out 3.2s forwards}@keyframes fadeInSubtitle{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes gentleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes lineExpand{0%{width:0;opacity:0}50%{opacity:1}to{width:120%;opacity:.8}}.form-container{max-width:800px;margin:0 auto;padding:20px;opacity:0;animation:fadeInForm 1s ease-in-out 3s forwards}.graduation-form{width:100%;height:80vh;min-height:700px;border:none;border-radius:10px;background:#fff;box-shadow:0 10px 30px #0003}@keyframes fadeInForm{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.family-image{width:95%;max-width:95%}.family-title{font-size:2.5rem;letter-spacing:2px}.family-title-container{margin-top:20px}.family-subtitle{font-size:1.5rem;letter-spacing:1.5px;margin-top:12px}.graduation-cap{font-size:3rem}.welcome-text{font-size:1.5rem}.graduation-form{height:85vh;min-height:600px}}@media (max-width: 480px){.family-image{width:98%;max-width:98%}.family-title{font-size:2.5rem;letter-spacing:1px}.family-title-container{margin-top:15px}.family-subtitle{font-size:1.5rem;letter-spacing:1px;margin-top:10px}.graduation-form{height:90vh;min-height:550px}}.audio-controls{position:fixed;top:20px;right:20px;z-index:1001;display:flex;align-items:center;gap:10px;background:#ffffffe6;padding:10px 15px;border-radius:25px;box-shadow:0 4px 15px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.audio-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;width:40px;height:40px;border-radius:50%;color:#fff;font-size:16px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.audio-btn:hover{transform:scale(1.1);box-shadow:0 4px 15px #667eea4d}.audio-btn:active{transform:scale(.95)}.audio-btn.playing{animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #667eeab3}70%{box-shadow:0 0 0 10px #667eea00}to{box-shadow:0 0 #667eea00}}.audio-status{font-size:12px;color:#666;font-weight:500;white-space:nowrap}audio{display:none}@media (max-width: 768px){.audio-controls{top:15px;right:15px;padding:8px 12px}.audio-btn{width:35px;height:35px;font-size:14px}.audio-status{font-size:11px}}.admin-login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e3c72,#2a5298);padding:20px}.login-wrapper{width:100%;max-width:400px}.login-form{background:#fff;padding:40px;border-radius:15px;box-shadow:0 20px 40px #00000026;animation:slideUp .6s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-header{text-align:center;margin-bottom:30px}.login-header h2{color:#333;margin-bottom:10px;font-size:1.8rem}.login-header p{color:#666;font-size:.95rem}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:#555;font-weight:500;font-size:.95rem}.form-group input{width:100%;padding:14px;border:2px solid #e1e5e9;border-radius:8px;font-size:16px;transition:all .3s ease;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group input:disabled{background-color:#f8f9fa;cursor:not-allowed}.btn{width:100%;padding:14px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease;margin-bottom:15px}.btn:disabled{cursor:not-allowed;opacity:.6}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #667eea4d}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover:not(:disabled){background:#5a6268;transform:translateY(-1px)}.login-info{background:#f8f9fa;padding:15px;border-radius:8px;margin:20px 0;text-align:center;border-left:4px solid #667eea}.login-info p{margin:5px 0;font-size:.9rem;color:#555}.login-info p:first-child{font-weight:600;color:#333;margin-bottom:10px}@media (max-width: 480px){.login-form{padding:30px 20px}.login-header h2{font-size:1.5rem}.form-group input,.btn{padding:12px;font-size:15px}}.admin-dashboard{min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.dashboard-header{background:#fff;box-shadow:0 2px 10px #0000001a;padding:20px 0;position:sticky;top:0;z-index:100}.header-content{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.dashboard-header h1{color:#333;margin:0;font-size:1.8rem}.logout-btn{background:linear-gradient(135deg,#ff6b6b,#ee5a52);color:#fff;border:none;padding:10px 20px;border-radius:25px;cursor:pointer;font-weight:500;transition:all .3s ease}.logout-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #ff6b6b4d}.dashboard-content{max-width:1200px;margin:0 auto;padding:30px 20px}.search-section{margin-bottom:30px}.search-container{background:#fff;padding:25px;border-radius:15px;box-shadow:0 5px 20px #0000001a}.search-header{display:flex;gap:15px;margin-bottom:15px;align-items:flex-start;flex-wrap:wrap}.action-buttons{display:flex;gap:15px;align-items:center;flex-wrap:wrap}.view-toggle{display:flex;background:#f8f9fa;border-radius:8px;padding:4px;gap:2px}.toggle-btn{background:transparent;border:none;padding:8px 15px;border-radius:6px;cursor:pointer;font-weight:500;font-size:14px;color:#666;transition:all .3s ease;white-space:nowrap}.toggle-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #667eea4d}.toggle-btn:hover:not(.active){background:#e9ecef;color:#333}.search-input{flex:1;padding:15px 20px;border:2px solid #e1e5e9;border-radius:10px;font-size:16px;transition:all .3s ease}.export-btn{background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;padding:15px 25px;border-radius:10px;cursor:pointer;font-weight:500;font-size:14px;transition:all .3s ease;white-space:nowrap;min-width:140px}.export-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #28a7454d}.refresh-btn{background:linear-gradient(135deg,#17a2b8,#138496);color:#fff;border:none;padding:15px 20px;border-radius:10px;cursor:pointer;font-weight:500;font-size:14px;transition:all .3s ease;white-space:nowrap;min-width:110px}.refresh-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #17a2b84d}.search-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.search-info{color:#666;font-size:14px;font-weight:500;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.data-source{background:#e8f4fd;color:#06c;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600}.students-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px;margin-bottom:30px}.student-card{background:#fff;border-radius:15px;padding:25px;box-shadow:0 5px 20px #0000001a;transition:all .3s ease;border:1px solid #f0f0f0}.student-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #00000026}.student-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #f8f9fa}.student-header h3{color:#333;margin:0;font-size:1.3rem;font-weight:600}.timestamp{background:#667eea;color:#fff;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:500}.student-info{margin-bottom:20px}.info-item{margin-bottom:12px;line-height:1.5}.info-item strong{color:#555;display:inline-block;min-width:120px}.info-item.message{background:#f8f9fa;padding:12px;border-radius:8px;border-left:4px solid #667eea;margin-top:15px}.view-detail-btn{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px;border-radius:8px;cursor:pointer;font-weight:500;transition:all .3s ease}.view-detail-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea4d}.table-container{background:#fff;border-radius:15px;box-shadow:0 5px 20px #0000001a;overflow:hidden}.table-wrapper{overflow-x:auto}.students-table{width:100%;border-collapse:collapse;font-size:14px}.students-table th,.students-table td{padding:15px 12px;text-align:left;border-bottom:1px solid #f1f3f4}.students-table th{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px;position:sticky;top:0;z-index:10}.students-table tbody tr{transition:all .3s ease}.students-table tbody tr:hover{background:#f8f9fa}.students-table tbody tr:nth-child(2n){background:#fdfdfd}.students-table tbody tr:nth-child(2n):hover{background:#f8f9fa}.timestamp-cell{font-family:Courier New,monospace;font-size:12px;color:#666;white-space:nowrap}.name-cell{font-weight:600;color:#333;min-width:150px}.valuable-person-cell{color:#667eea;font-weight:500}.message-cell{max-width:200px}.message-preview{display:block;color:#555;font-style:italic;line-height:1.4}.table-detail-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;width:35px;height:35px;border-radius:50%;cursor:pointer;font-size:14px;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.table-detail-btn:hover{transform:scale(1.1);box-shadow:0 4px 12px #667eea66}.no-results{text-align:center;background:#fff;padding:50px;border-radius:15px;box-shadow:0 5px 20px #0000001a}.no-results p{color:#666;font-size:1.1rem;margin:0}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh}.loading-spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-detail{color:#888;font-size:14px;margin-top:10px}.error-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;text-align:center;padding:40px}.error-container h2{color:#dc3545;margin-bottom:20px;font-size:1.8rem}.error-container p{color:#666;margin-bottom:20px;max-width:600px;line-height:1.6}.retry-btn{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;border:none;padding:15px 30px;border-radius:10px;cursor:pointer;font-weight:500;font-size:16px;transition:all .3s ease;margin-bottom:20px}.retry-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #dc35454d}.fallback-note{background:#fff3cd;color:#856404;padding:15px;border-radius:8px;border-left:4px solid #ffc107;font-size:14px;margin-top:20px}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:15px;width:100%;max-width:700px;max-height:90vh;overflow-y:auto;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:25px;border-bottom:2px solid #f8f9fa}.modal-header h2{color:#333;margin:0;font-size:1.5rem}.close-btn{background:#f8f9fa;border:none;width:35px;height:35px;border-radius:50%;cursor:pointer;font-size:18px;color:#666;transition:all .3s ease}.close-btn:hover{background:#e9ecef;color:#333}.modal-body{padding:25px}.detail-section{margin-bottom:30px}.detail-section h3{color:#333;margin-bottom:15px;font-size:1.2rem;border-bottom:2px solid #667eea;padding-bottom:8px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.detail-item{display:flex;flex-direction:column;gap:5px}.detail-item.full-width{grid-column:1 / -1}.detail-item label{font-weight:600;color:#555;font-size:14px}.detail-item span{color:#333;padding:8px 12px;background:#f8f9fa;border-radius:6px;border-left:3px solid #667eea}@media (max-width: 768px){.header-content{flex-direction:column;gap:15px;text-align:center}.dashboard-header h1{font-size:1.5rem}.search-header{flex-direction:column;gap:10px}.search-input{width:100%}.action-buttons{flex-direction:column;width:100%;gap:10px}.view-toggle{width:100%;justify-content:center}.toggle-btn{flex:1;text-align:center}.refresh-btn,.export-btn{width:100%;min-width:auto}.search-info{flex-direction:column;align-items:flex-start;gap:5px}.students-grid{grid-template-columns:1fr}.student-header{flex-direction:column;gap:10px}.detail-grid{grid-template-columns:1fr}.modal-content{margin:10px;max-height:95vh}.error-container{padding:20px}.error-container h2{font-size:1.5rem}.students-table{font-size:12px}.students-table th,.students-table td{padding:10px 8px}.message-cell{max-width:120px}.table-detail-btn{width:30px;height:30px;font-size:12px}}*{margin:0;padding:0;box-sizing:border-box}#root{width:100%;min-height:100vh}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.6}