*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-brand-primary:#59b2e3;--color-brand-hover:#38bdf8;--color-brand-light:#e0f2fe;--color-brand-dark:#0284c7;--color-navy-900:#0f172a;--color-navy-800:#1e293b;--color-success:#10b981;--color-success-50:#ecfdf5;--color-success-100:#d1fae5;--color-error:#ef4444;--color-error-50:#fef2f2;--color-warning:#f59e0b;--color-warning-50:#fffbeb;--color-gray-50:#f8fafc;--color-gray-100:#f1f5f9;--color-gray-200:#e2e8f0;--color-gray-300:#cbd5e1;--color-gray-400:#94a3b8;--color-gray-500:#64748b;--color-gray-600:#475569;--color-gray-700:#334155;--color-gray-800:#1e293b;--color-gray-900:#0f172a;--font-sans:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--border-radius-lg:20px;--border-radius-md:14px;--border-radius-sm:10px;--shadow-card:0 8px 32px 0 #59b2e31f, 0 2px 6px -1px #00000005;--shadow-button:0 4px 14px 0 #59b2e359}html{font-size:16px;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);color:var(--color-gray-800);background-color:#f4f9fc;background-image:radial-gradient(at 0 0,#59b2e338 0,#0000 50%),radial-gradient(at 100% 0,#0f172a1f 0,#0000 50%),radial-gradient(at 50% 100%,#59b2e326 0,#0000 50%);background-attachment:fixed;min-height:100vh;line-height:1.6}.app-container{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:32px 16px;display:flex}.card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-card);background:#fffffffa;border:1px solid #59b2e333;width:100%;max-width:580px;animation:.4s ease-out slideUp;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card-header{text-align:center;background:linear-gradient(#e0f2fe80 0%,#fff0 100%);padding:28px 32px 0}.card-body{padding:12px 32px 32px}.brand-logo-img{object-fit:contain;width:auto;max-width:320px;height:96px;margin:0 auto 8px;display:block}.brand-title{color:var(--color-navy-900);letter-spacing:-.02em;margin-bottom:4px;font-size:1.5rem;font-weight:800}.brand-subtitle{color:var(--color-brand-dark);text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px;font-size:.875rem;font-weight:600}.greeting-box{background:var(--color-brand-light);border-radius:var(--border-radius-md);border:1px solid #59b2e34d;margin-bottom:24px;padding:18px 22px}.greeting-name{color:var(--color-navy-900);margin-bottom:4px;font-size:1rem;font-weight:700}.greeting-message{color:var(--color-gray-600);font-size:.875rem;line-height:1.5}.upload-section-title{color:var(--color-navy-900);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;font-size:.8125rem;font-weight:700}.upload-slot{border-radius:var(--border-radius-md);cursor:pointer;background:#fafcfe;border:2px dashed #59b2e366;margin-bottom:14px;padding:20px;transition:all .2s}.upload-slot:hover{border-color:var(--color-brand-primary);background:var(--color-brand-light);box-shadow:0 4px 12px #59b2e31f}.upload-slot.has-file{border-color:var(--color-success);background:var(--color-success-50);border-style:solid}.upload-slot.uploading{border-color:var(--color-brand-primary);background:var(--color-brand-light);pointer-events:none;border-style:solid}.upload-slot.error{border-color:var(--color-error);background:var(--color-error-50);border-style:solid}.upload-slot-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.upload-slot-name{color:var(--color-navy-900);font-size:.9375rem;font-weight:700}.upload-slot-status{border-radius:20px;padding:4px 12px;font-size:.75rem;font-weight:700}.upload-slot-status.pending{background:var(--color-warning-50);color:var(--color-warning);border:1px solid #f59e0b4d}.upload-slot-status.uploaded{background:var(--color-success-100);color:var(--color-success);border:1px solid #10b9814d}.upload-slot-status.uploading{background:var(--color-brand-light);color:var(--color-brand-dark);border:1px solid #59b2e34d}.upload-slot-body{margin-top:12px}.upload-slot-hint{color:var(--color-gray-500);align-items:center;gap:8px;font-size:.8125rem;font-weight:500;display:flex}.upload-slot-file{color:var(--color-gray-700);align-items:center;gap:10px;font-size:.8125rem;font-weight:600;display:flex}.upload-slot-file-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.upload-slot-file-size{color:var(--color-gray-400);flex-shrink:0;font-weight:500}.upload-slot-remove{color:var(--color-gray-400);cursor:pointer;background:0 0;border:none;border-radius:6px;flex-shrink:0;padding:4px;transition:all .15s}.upload-slot-remove:hover{color:var(--color-error);background:var(--color-error-50)}.file-input-hidden{display:none}.progress-bar-track{background:var(--color-gray-200);border-radius:3px;width:100%;height:6px;margin-top:12px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--color-brand-primary) 0%, var(--color-brand-dark) 100%);border-radius:3px;height:100%;transition:width .3s}.submit-btn{border-radius:var(--border-radius-md);background:linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-dark) 100%);color:#fff;width:100%;font-size:.9375rem;font-weight:700;font-family:var(--font-sans);cursor:pointer;box-shadow:var(--shadow-button);border:none;justify-content:center;align-items:center;gap:8px;margin-top:24px;padding:15px 24px;transition:all .2s;display:flex}.submit-btn:hover:not(:disabled){background:linear-gradient(135deg, var(--color-brand-hover) 0%, var(--color-brand-dark) 100%);transform:translateY(-2px);box-shadow:0 8px 22px #59b2e373}.submit-btn:active:not(:disabled){transform:translateY(0)}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.success-container{text-align:center;padding:48px 32px}.success-icon{background:var(--color-success-100);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 24px;animation:.4s ease-out scaleIn;display:flex}@keyframes scaleIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.success-title{color:var(--color-navy-900);margin-bottom:8px;font-size:1.375rem;font-weight:800}.success-message{color:var(--color-gray-600);font-size:.875rem;line-height:1.6}.error-container{text-align:center;padding:48px 32px}.error-icon{background:var(--color-error-50);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 24px;display:flex}.error-title{color:var(--color-navy-900);margin-bottom:8px;font-size:1.375rem;font-weight:800}.error-message{color:var(--color-gray-600);font-size:.875rem;line-height:1.6}.loading-container{text-align:center;padding:64px 32px}.spinner{border:3px solid var(--color-gray-200);border-top-color:var(--color-brand-primary);border-radius:50%;width:40px;height:40px;margin:0 auto 16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--color-gray-600);font-size:.875rem;font-weight:600}.footer{text-align:center;color:var(--color-navy-800);padding:24px 20px 12px;font-size:.8125rem;font-weight:500}.footer a{color:var(--color-brand-dark);font-weight:700;text-decoration:none}.footer a:hover{text-decoration:underline}.file-size-info{color:var(--color-gray-400);text-align:center;margin-top:10px;font-size:.75rem;font-weight:500}@media (width<=480px){.card-header{padding:28px 20px 8px}.card-body{padding:16px 20px 28px}.brand-title{font-size:1.25rem}.upload-slot{padding:16px}}