.niqr-yi-wrapper { font-family: 'Inter', sans-serif; max-width: 900px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.yi-step { display: none; animation: fadeIn 0.4s ease; }
.yi-step.active { display: block; }

.yi-progress-bar { width: 100%; background: #e2e8f0; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.yi-progress-fill { height: 100%; background: #4f46e5; width: 20%; transition: width 0.3s ease; }
.yi-progress-text { font-size: 13px; color: #64748b; font-weight: bold; text-align: right; margin-bottom: 30px; }

.yi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.yi-grid div { display: flex; flex-direction: column; }
.yi-grid label, .yi-textarea-wrap label { font-size: 13px; font-weight: 700; color: #475569; margin-bottom: 6px; }
.yi-grid input, .yi-grid select, .yi-textarea-wrap textarea { padding: 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 15px; width: 100%; box-sizing: border-box; }

.yi-textarea-wrap { margin-bottom: 25px; position: relative; }
.yi-textarea-wrap textarea { height: 120px; resize: vertical; }
.wc-display { font-size: 11px; color: #64748b; font-weight: bold; position: absolute; bottom: -20px; right: 0; }

.yi-btn { background: #4f46e5; color: white; border: none; padding: 12px 24px; font-size: 15px; font-weight: bold; border-radius: 6px; cursor: pointer; transition: 0.2s; }
.yi-btn:hover { background: #4338ca; }
.yi-btn-secondary { background: #e2e8f0; color: #475569; }
.yi-btn-secondary:hover { background: #cbd5e1; }
.yi-btn-small { padding: 8px 15px; font-size: 12px; margin-top: 5px; }

.fee-display-box { background: #ecfdf5; border: 2px solid #a7f3d0; padding: 20px; border-radius: 8px; text-align: center; margin-bottom: 30px; }
.fee-display-box h2 { margin: 10px 0 0 0; color: #047857; font-size: 32px; font-weight: 900; }

.declaration-box label { display: block; background: #f8fafc; padding: 15px; border-radius: 6px; margin-bottom: 10px; border: 1px solid #e2e8f0; cursor: pointer; font-size: 14px; font-weight: 600; }
.declaration-box input { margin-right: 10px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }