html { scroll-behavior: smooth; font-size: clamp(16px, 1.5vw + 0.25rem, 22px); }
body { font-family: 'Kantumruy Pro', sans-serif; background-color: #f1f5f9; color: #0f172a; }

/* Input Styles */
input, select { 
    background-color: #ffffff; 
    border-color: #cbd5e1; 
    color: #334155; 
    border-width: 1px; 
    font-weight: 600; 
}

input:focus, select:focus { --tw-ring-color: #10b981; border-color: #10b981; outline: 2px solid transparent; outline-offset: 2px; --tw-ring-width: 2px; }
input[readonly] { background-color: #f8fafc; color: #475569; }
input:disabled, select:disabled { background-color: #f1f5f9; cursor: not-allowed; color: #94a3b8; }

label { color: #475569; font-weight: 500; }
h2.section-title { color: #0f172a; font-size: 1.25rem; border-bottom: 2px solid #e2e8f0; padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
.section-card { background: white; padding: 2rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; }
.live-preview { background-color: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; transition: all 0.3s ease-in-out; }
.live-preview.h-0 { padding-top: 0; padding-bottom: 0; margin-top: 0; border-width: 0; overflow: hidden; }

/* Modal Styles */
.modal-bg { background-color: rgba(0, 0, 0, 0.6); }
.modal-content { background-color: #ffffff; }

.user-data {
    color: #172554;
    font-weight: 800;
    font-size: 1.25rem;
    font-family: 'Kantumruy Pro', sans-serif;
}
.user-data div { margin-top: 0.25rem; }

.loading-box { background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,0.15); text-align: center; border: 1px solid #e2e8f0; position: relative; max-width: 90%; }
.hidden { display: none !important; }