.colorful-login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2);background-size:cover;background-position:center;position:relative;overflow:hidden}.colorful-login-bg:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#667eeacc,#764ba2cc,#ff9a9ecc,#fad0c4cc,#d4fc79cc);animation:gradientShift 8s ease-in-out infinite}@keyframes gradientShift{0%,to{opacity:.8}50%{opacity:.6}}.colorful-login-card{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:40px;width:100%;max-width:420px;box-shadow:0 25px 50px #00000026,0 0 0 1px #ffffff4d,inset 0 1px #fffc;position:relative;z-index:1;animation:cardFloat 6s ease-in-out infinite}@keyframes cardFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.colorful-header{text-align:center;margin-bottom:32px}.colorful-logo{display:flex;flex-direction:column;align-items:center;gap:16px}.logo-gradient{width:80px;height:80px;background:linear-gradient(135deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57);background-size:300% 300%;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:gradientRotate 4s ease-in-out infinite;box-shadow:0 10px 30px #0003}@keyframes gradientRotate{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.logo-gradient i{font-size:36px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}.colorful-logo h1{font-size:32px;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;letter-spacing:-1px}.colorful-logo p{font-size:16px;color:#6c757d;margin:0;font-weight:500}.colorful-error{background:linear-gradient(135deg,#ff6b6b,#ee5a52);color:#fff;padding:16px 20px;border-radius:16px;margin-bottom:24px;display:flex;align-items:center;gap:12px;font-weight:500;box-shadow:0 8px 25px #ff6b6b4d;animation:errorPulse 2s ease-in-out infinite}@keyframes errorPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.colorful-form{display:flex;flex-direction:column;gap:24px}.colorful-field{display:flex;flex-direction:column;gap:12px}.field-label{display:flex;align-items:center;gap:8px;font-weight:600;color:#495057;font-size:14px}.field-label i{font-size:16px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.colorful-input{position:relative;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:16px;padding:2px;box-shadow:0 4px 15px #0000001a}.colorful-input input{width:100%;padding:18px 50px 18px 20px;border:none;border-radius:14px;font-size:16px;background:#fff;color:#495057;outline:none;transition:all .3s ease;box-sizing:border-box}.colorful-input input:focus{box-shadow:0 0 0 3px #667eea33;transform:translateY(-2px)}.colorful-input input::placeholder{color:#adb5bd}.password-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:20px;transition:transform .3s ease;z-index:10;-webkit-user-select:none;user-select:none}.password-icon:hover{transform:translateY(-50%) scale(1.2)}.colorful-submit{width:100%;padding:18px 24px;background:linear-gradient(135deg,#667eea,#764ba2,#ff6b6b);background-size:200% 200%;color:#fff;border:none;border-radius:16px;font-size:18px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px;box-shadow:0 10px 30px #667eea66;animation:buttonGradient 3s ease-in-out infinite}@keyframes buttonGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.colorful-submit:hover{transform:translateY(-3px);box-shadow:0 15px 40px #667eea80}.colorful-submit:active{transform:translateY(-1px)}.colorful-submit:disabled{opacity:.7;cursor:not-allowed;transform:none}.colorful-submit i{font-size:20px}.colorful-spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top:3px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.colorful-footer{text-align:center;margin-top:32px;padding-top:24px;border-top:1px solid rgba(0,0,0,.1)}.security-info{display:inline-flex;align-items:center;gap:8px;color:#28a745;font-weight:500;font-size:14px}.security-info i{font-size:18px;background:linear-gradient(135deg,#28a745,#20c997);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media (max-width: 480px){.colorful-login-card{padding:32px 24px;margin:16px;border-radius:20px}.colorful-logo h1{font-size:28px}.logo-gradient{width:70px;height:70px}.logo-gradient i{font-size:32px}.colorful-input input{padding:16px 18px}}*{box-sizing:border-box}body{font-family:Arial,sans-serif;background:#f9f9f9;margin:0;font-size:16px;-webkit-user-select:none;user-select:none;-moz-user-select:none;-webkit-user-drag:none}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap}.header select{padding:10px;font-size:1rem;border-radius:5px;margin-bottom:10px}.header h2{background:#007bff;color:#fff;padding:14px;border-radius:6px;text-align:center;font-size:1.6rem;flex:1;margin-left:20px}.section{background:#fff;padding:20px;margin-bottom:30px;border-radius:6px;box-shadow:0 3px 6px #00000014}.scrollable{cursor:grab;-webkit-user-select:none;user-select:none}.scrollable:active{cursor:grabbing}h3{margin-top:0;font-size:1.2rem;color:#333}table{width:100%;border-collapse:collapse;margin-top:10px;display:table;table-layout:fixed;min-width:100%;box-sizing:border-box}th,td{border:1px solid #ccc;padding:10px;text-align:left;font-size:1rem;width:auto;min-width:0;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}th{background:#f0f0f0;font-weight:700}input[type=text],select,input[type=date]{width:100%;padding:10px 12px;font-size:1rem;border:1px solid #ccc;border-radius:5px}button{padding:12px 18px;margin-top:12px;border:none;border-radius:5px;font-size:1rem;cursor:pointer}button.remove{background:#dc3545;padding:10px 14px;font-size:.95rem}.submit-btn{background:#007bff;width:100%;margin-top:15px;font-size:1.1rem;font-weight:700}.pdf-btn{background:#17a2b8}.output-section{background:#fff;padding:20px;margin-top:40px;border-radius:8px;box-shadow:0 2px 5px #0000001a}.hidden{display:none}@media screen and (max-width: 768px){body{font-size:18px}.header{flex-direction:column;align-items:flex-start}.header h2{font-size:1.8rem;width:100%;margin-top:10px}h3{font-size:1.3rem}th,td{font-size:1rem;padding:12px 10px}input[type=text],select,input[type=date]{font-size:1rem;padding:12px 14px}button{width:100%;font-size:1.05rem}.submit-btn{font-size:1.2rem;padding:14px}}.container{max-width:100%;padding:1rem;box-sizing:border-box}table{width:100%;border-collapse:collapse;margin-bottom:1rem;table-layout:fixed;min-width:100%;box-sizing:border-box}th,td{padding:.5rem;text-align:left;word-break:break-word;width:auto;min-width:0;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}tr{width:100%;display:table-row}@media (max-width: 768px){table,thead,tbody,th,td,tr{display:block}thead{display:none}tr{margin-bottom:1rem}td{position:relative;padding-left:50%}td:before{content:attr(data-label);position:absolute;left:0;width:45%;padding-left:1rem;font-weight:700}}.input-responsive{width:100%;padding:.5rem;box-sizing:border-box}.save-button{background-color:#007bff;color:#fff!important;border:none;padding:6px 12px;margin-top:10px;cursor:pointer;border-radius:4px}