body { font-family: 'Poppins', 'Battambang', sans-serif; background: #f6f7fb; overflow-x: hidden; }

/* ---------- components (plain CSS: Tailwind CDN doesn't run @apply in external sheets) ---------- */
.lbl { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .25rem; }
.inp { width: 100%; border: 1px solid #e5e7eb; padding: .625rem .75rem; border-radius: .75rem; background: #fff; transition: border-color .2s, box-shadow .2s; }
.inp:focus { outline: none; border-color: #3b6cff; box-shadow: 0 0 0 4px #dbe6ff; }
.opt { padding: .75rem; border: 2px solid #e5e7eb; border-radius: .75rem; text-align: center; font-size: .875rem; font-weight: 600; transition: all .2s; }
.peer:checked + .opt { border-color: #2553f0; background: #eef3ff; color: #1b3fd1; }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; }
.btn-primary { padding: .5rem 1rem; border-radius: .75rem; background: #2553f0; color: #fff; font-size: .875rem; font-weight: 600; transition: background .2s; }
.btn-primary:hover { background: #1b3fd1; }
.btn-ghost { padding: .5rem 1rem; border-radius: .75rem; background: #fff; border: 1px solid #e5e7eb; font-size: .875rem; font-weight: 600; transition: background .2s; }
.btn-ghost:hover { background: #f9fafb; }
.chip-sm { font-size: .75rem; padding: .25rem .625rem; border-radius: .5rem; border: 1px solid #e5e7eb; background: #fff; }
.chip-sm:hover { background: #f9fafb; }
.tab-btn { white-space: nowrap; padding: .5rem 1rem; border-radius: .75rem; font-size: .875rem; font-weight: 600; transition: all .2s; }
.tab-btn.active { background: #0b1020; color: #fff; }
.toggle { position: relative; display: inline-flex; cursor: pointer; }
.toggle div { width: 2.75rem; height: 1.5rem; background: #e5e7eb; border-radius: 999px; transition: background .2s; position: relative; }
.toggle div::after { content: ''; position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; background: #fff; border-radius: 999px; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle input:checked + div { background: #0ea5e9; }
.toggle input:checked + div::after { transform: translateX(1.25rem); }
.stock-in { width: 3.5rem; text-align: center; border: 1px solid #e5e7eb; border-radius: .5rem; padding: .25rem; }
.stock-in:focus { outline: none; border-color: #3b6cff; }
.stock-in.zero { background: #fff1f2; color: #e11d48; }

/* ---------- motion: only transform/opacity animate → compositor-only, no layout/paint per frame ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@keyframes heroIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1.18); } to { transform: scale(1); } }
.hero-text > * { opacity: 0; }
.swiper-slide-active .hero-text > * { animation: heroIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
.swiper-slide-active .hero-text > *:nth-child(2) { animation-delay: .15s; }
.swiper-slide-active .hero-text > *:nth-child(3) { animation-delay: .3s; }
.swiper-slide-active .hero-img { animation: kenburns 7s ease-out forwards; }
.swiper-pagination-bullet-active { background: #fff !important; width: 28px !important; border-radius: 6px !important; transition: width .3s; }

@keyframes marq { to { transform: translateX(-50%); } }
.marquee { animation: marq 28s linear infinite; }

.chip { transition: all .25s; }
.chip.active { background: #0b1020; color: #fff; border-color: #0b1020; box-shadow: 0 8px 20px rgba(11,16,32,.2); }

.drawer { transform: translateX(100%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.drawer.open { transform: none; }
.overlay, .modal { opacity: 0; pointer-events: none; transition: opacity .3s; }
.overlay.open, .modal.open { opacity: 1; pointer-events: auto; }
.modal-box { transform: scale(.94) translateY(12px); opacity: 0; transition: all .35s cubic-bezier(.2,.8,.2,1); }
.modal.open .modal-box { transform: none; opacity: 1; }

.skeleton { background: linear-gradient(90deg,#eef0f5 25%,#e2e6ee 37%,#eef0f5 63%); background-size: 400% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@keyframes bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.35); } }
.bump { animation: bump .45s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
.toast { animation: toastIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes shake { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)} }
.shake { animation: shake .45s; }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } }
.panel-in { animation: panelIn .4s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.modal.open .pop { animation: pop .5s .15s cubic-bezier(.2,.8,.2,1) both; }
.bar { transform-origin: bottom; animation: grow .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes grow { from { transform: scaleY(0); } }
.hbar { transform-origin: left; animation: growX .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes growX { from { transform: scaleX(0); } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(37,83,240,.45); } 100% { box-shadow: 0 0 0 14px rgba(37,83,240,0); } }
.pulse-ring { animation: pulseRing 1.6s infinite; }
.step-line { transform-origin: left; transition: transform .8s cubic-bezier(.2,.8,.2,1); }

#nav.scrolled { height: 64px; box-shadow: 0 10px 30px rgba(15,23,42,.08); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .hero-text > * { opacity: 1 !important; transform: none !important; }
}

.badge { display: inline-flex; align-items: center; font-size: .75rem; padding: .25rem .5rem; border-radius: .375rem; white-space: nowrap; }