:root {
    --jb-black: #0b0c0d;
    --jb-white: #fff;
    --jb-pink: #f8b8c9; /* เปลี่ยนสีหลักเป็นโทนชมพู */
    --jb-green: #2b6e5d;     /* เปลี่ยนเส้นทองเป็นเขียวเข้ม */
    --jb-gray-900: #0f1113;
    --jb-gray-700: #374151;
    --jb-gray-500: #6b7280;
    --jb-gray-200: #e5e7eb;
    --jb-gray-100: #b5adb2;
    --jb-white-background: #f6eee3;
}

html,
body {
    font-family: 'Sarabun', 'Noto Sans Khmer', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
    background: var(--jb-pink);
    color: #111827;
    overflow: hidden;
    overscroll-behavior: none;
    height: 100%;
    touch-action: manipulation;
}

.safe-bottom {
    padding-bottom: max(env(safe-area-inset-bottom), .75rem)
}

.safe-top {
    padding-top: max(env(safe-area-inset-top), .25rem)
}

.card {
    transition: transform .18s ease, box-shadow .18s ease
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08)
}

.glass {
    backdrop-filter: saturate(140%) blur(10px)
}

.ptr::before {
    content: "";
    display: block;
    height: 6px;
    width: 56px;
    background: #e5e7eb;
    border-radius: 999px;
    margin: .5rem auto
}

.nav-active {
    color: var(--jb-pink);
}

.gold-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--jb-white-background), transparent);
}

.green-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--jb-green), transparent);
}

* {
    -webkit-tap-highlight-color: transparent
}

@keyframes badgePop {
    0% { transform: scale(0); opacity: 0 }
    60% { transform: scale(1.2); opacity: 1 }
    100% { transform: scale(1) }
}

.badge-animate {
    animation: badgePop .4s ease-out
}

.bg-brand-grad {
    background: var(--jb-green);
}

:focus-visible {
    outline: 3px solid var(--jb-viridian);
    outline-offset: 2px;
    border-radius: .5rem
}

header .max-w-md {
    min-height: 48px;
}

@media (prefers-reduced-motion: reduce) {
    .pulse::after { animation: none }
}

button,
a {
    touch-action: manipulation
}

#loadingOverlay.show {
    display: flex;
    animation: fadeIn 0.2s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}