:root{--font-main:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--bg-page:#f1f5f9;--card-bg:#fff;--card-border:#e2e8f0;--text-title:#0f172a;--text-subtitle:#64748b;--text-label:#334155;--text-input:#1e293b;--text-placeholder:#94a3b8;--input-bg:#fff;--input-border:#cbd5e1;--input-focus:#22c55e;--btn-green:#22c55e;--btn-green-hover:#16a34a;--btn-green-active:#15803d}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-page);color:var(--text-title);-webkit-font-smoothing:antialiased;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem 1rem;display:flex}#root{justify-content:center;align-items:center;width:100%;display:flex}.form-container{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;flex-direction:column;gap:1.5rem;width:100%;max-width:540px;padding:2.5rem 2rem;display:flex;position:relative;box-shadow:0 10px 30px -5px #00000014,0 4px 12px -2px #00000008}.form-header{flex-direction:column;gap:.4rem;display:flex}.form-header h1{color:var(--text-title);letter-spacing:-.02em;font-size:1.4rem;font-weight:800}.form-header p{color:var(--text-subtitle);font-size:.9rem;line-height:1.4}.form-group{flex-direction:column;gap:.5rem;display:flex}.form-label{color:var(--text-label);font-size:.9rem;font-weight:700}.form-input{background-color:var(--input-bg);border:1px solid var(--input-border);width:100%;font-family:var(--font-main);color:var(--text-input);border-radius:10px;outline:none;padding:.85rem 1rem;font-size:.95rem;transition:all .2s}.form-input:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px #22c55e26}.form-input::placeholder{color:var(--text-placeholder)}.btn-submit{background-color:var(--btn-green);color:#fff;width:100%;font-family:var(--font-main);cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:.5rem;margin-top:.5rem;padding:.95rem;font-size:1.05rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 12px #22c55e40}.btn-submit:hover:not(:disabled){background-color:var(--btn-green-hover);transform:translateY(-1px);box-shadow:0 6px 16px #22c55e59}.btn-submit:active:not(:disabled){background-color:var(--btn-green-active);transform:translateY(0)}.btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}.success-alert{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;flex-direction:column;gap:.5rem;padding:1.25rem;font-size:.925rem;animation:.3s fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.admin-gear{color:#cbd5e1;cursor:pointer;background:0 0;border:none;border-radius:50%;padding:6px;transition:color .2s;position:absolute;top:1rem;right:1rem}.admin-gear:hover{color:#64748b;background:#f1f5f9}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-box{background:#fff;border-radius:16px;flex-direction:column;gap:1.25rem;width:100%;max-width:480px;padding:1.75rem;display:flex;box-shadow:0 20px 40px #00000026}.pdf-render-hidden{color:#111827;width:210mm;font-family:var(--font-main);background:#fff;padding:25mm 20mm;font-size:11pt;line-height:1.6;position:absolute;top:-9999px;left:-9999px}.kop-surat{border-bottom:3px double #1e293b;align-items:center;gap:20px;margin-bottom:24px;padding-bottom:12px;display:flex}.kop-logo{color:#fff;background:#065f46;border:3px solid #f59e0b;border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;font-size:20px;font-weight:900;display:flex}.kop-text{text-align:center;flex-grow:1}.kop-text h2{color:#065f46;font-size:15pt;font-weight:800}.kop-text h3{color:#1f2937;font-size:12pt;font-weight:700}.kop-text p{color:#4b5563;font-size:9pt}.surat-meta{justify-content:space-between;margin-bottom:24px;font-size:10.5pt;display:flex}.recipient-box{margin-bottom:24px}.signature-section{justify-content:space-between;margin-top:40px;display:flex}.sig-box{text-align:center;width:180px}.sig-space{height:60px}