:root {
  --nav-h: 4.75rem;
}
html { scroll-behavior: smooth; }
body { font-family: "Noto Sans Thai", "Sarabun", system-ui, sans-serif; }
.page-pad { padding-bottom: calc(var(--nav-h) + 1rem); }
@media (min-width: 768px) {
  .page-pad { padding-bottom: 2rem; }
}
.tab-item.active { color: #1d4ed8; }
.tab-item.active .tab-icon {
  background: #eff6ff;
  color: #1d4ed8;
}
.tab-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 1.5rem;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: #facc15;
}
.step-dot.on { background: #1d4ed8; color: #fff; }
.work-card img { aspect-ratio: 4/3; object-fit: cover; }
.swal2-popup { font-family: "Noto Sans Thai", sans-serif !important; }

.tab-item:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; border-radius: .75rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid #93c5fd; outline-offset: 1px; border-color: #3b82f6; }

/* Bright public theme with clear interactive states. */
.light-mode {
  color-scheme: light;
  background: #f8fafc;
  color: #111827;
}
.light-mode .bg-white { background-color: #fff; }
.light-mode .text-slate-800,
.light-mode .text-slate-900 { color: #111827; }
.light-mode header { background-color: rgba(255, 255, 255, .94); border-color: #e2e8f0; }
.light-mode header nav a { color: #475569; }
.light-mode header nav a[aria-current="page"] { background-color: #dbeafe; color: #1e40af; }
.light-mode header nav a:hover,
.light-mode header nav a:focus-visible { background-color: #facc15; color: #111827; }
.light-mode .mobile-tabbar { background-color: rgba(255, 255, 255, .97); border-color: #dbeafe; }
.light-mode .tab-item { margin: .4rem .15rem; border-radius: .85rem; transition: color 150ms ease, background-color 150ms ease; }
.light-mode .tab-item.active { color: #fff; background-color: #1d4ed8; }
.light-mode .tab-item.active .tab-icon { background: transparent; color: #fff; }
.light-mode .tab-item.active::before { display: none; }
.light-mode .tab-item:not(.active):hover,
.light-mode .tab-item:not(.active):focus-visible { color: #111827; background-color: #facc15; }
.light-mode .tab-item:not(.active):hover .tab-icon,
.light-mode .tab-item:not(.active):focus-visible .tab-icon { background: transparent; color: #111827; }
.light-mode .home-primary-cta { background-color: #fff; color: #1e3a8a; }
.light-mode .home-primary-cta:hover { background-color: #eff6ff; }
.light-mode input,
.light-mode select,
.light-mode textarea { background-color: #fff; color: #111827; border-color: #cbd5e1; }
.light-mode input::placeholder,
.light-mode textarea::placeholder { color: #64748b; }
.light-mode .choice { background-color: #fff; border-color: #e2e8f0; }
.light-mode .choice small { color: #64748b; }
.light-mode .choice:has(input:checked) { border-color: #2563eb; background-color: #eff6ff; }
.light-mode .swal2-popup { background: #fff !important; color: #111827 !important; }