:root {
  color-scheme: light;
  --color-primary: oklch(43% .09 157);
  --color-primary-content: oklch(98% .01 157);
  --color-secondary: oklch(58% .12 75);
  --color-secondary-content: oklch(98% .01 75);
  --color-accent: oklch(70% .14 78);
  --color-accent-content: oklch(20% .03 78);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "IBM Plex Sans Thai", system-ui, sans-serif; background-image: radial-gradient(circle at 15% 10%, rgba(180, 125, 32, .09), transparent 26%), radial-gradient(circle at 90% 30%, rgba(20, 81, 61, .08), transparent 24%); }
.hero-shell { background: linear-gradient(125deg, #123d30 0%, #1d5a45 60%, #9b681c 145%); }
.brand-mark { display: block; width: 4.25rem; height: 4.25rem; flex: none; border: 1px solid rgba(255,255,255,.28); border-radius: 1.4rem; background: white; object-fit: cover; box-shadow: 0 16px 35px rgba(0,0,0,.2); }
.sticky-progress { box-shadow: 0 8px 25px rgba(23, 45, 36, .05); }
.form-card { border: 1px solid color-mix(in srgb, var(--color-base-content) 12%, transparent); background: color-mix(in srgb, var(--color-base-100) 96%, transparent); }
.section-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.section-heading > span { display: grid; width: 3.2rem; height: 3.2rem; flex: none; place-items: center; border-radius: 1rem; color: white; background: linear-gradient(145deg,#1d5a45,#123d30); font-weight: 700; }
.section-heading h2 { font-size: clamp(1.25rem,3vw,1.65rem); font-weight: 700; }
.section-heading p { color: color-mix(in srgb, var(--color-base-content) 55%, transparent); font-size: .9rem; }
.form-control { display: flex; flex-direction: column; gap: .45rem; }
.label-text { font-weight: 500; }
.required::after { content: " *"; color: var(--color-error); }
.option-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; min-height: 3rem; }
.option-row label { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.photo-uploader { display: grid; aspect-ratio: 1/1; cursor: pointer; place-items: center; overflow: hidden; border: 2px dashed color-mix(in srgb, var(--color-primary) 45%, transparent); border-radius: 1.5rem; background: color-mix(in srgb, var(--color-primary) 5%, white); text-align: center; transition: .2s ease; }
.photo-uploader:hover, .photo-uploader.is-dragging { border-color: var(--color-primary); transform: translateY(-2px); }
.photo-uploader small { display: block; margin-top: .5rem; color: color-mix(in srgb, var(--color-base-content) 55%, transparent); }
.photo-uploader img { width: 100%; height: 100%; object-fit: cover; }
.question-card { border: 1px solid color-mix(in srgb, var(--color-base-content) 12%, transparent); border-radius: 1rem; padding: 1rem; background: color-mix(in srgb, var(--color-base-100) 88%, var(--color-base-200)); }
.input:focus, .select:focus, .textarea:focus { outline-offset: 1px; }
.invalid-field { border-color: var(--color-error) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 15%, transparent); }
.repeater-row { animation: rowIn .22s ease-out; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 640px) { .card-body { padding: 1.15rem; } .sticky-progress { top: 0; } .btn { min-height: 2.75rem; height: auto; } }
@media print { .hero-shell, .sticky-progress, .btn, #toast { display: none !important; } .form-step { display: block !important; break-inside: avoid; box-shadow: none; margin-bottom: 1rem; } body { background: white; } }

/* DaisyUI ตั้ง white-space: nowrap ให้ป้ายกำกับ ข้อความยาวเลยดันจนหน้าจอมือถือแตก */
.label-text { white-space: normal; min-width: 0; flex: 1 1 auto; }