/* ===== White card + black shadow (readability) ===== */
    .card-shadow-dark {
        background-color: #FFFFFF;
        border: 1px solid rgba(0,0,0,0.10) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.18) !important;
    }
    .card-shadow-dark:hover {
        box-shadow: 0 14px 34px rgba(0,0,0,0.38), 0 4px 10px rgba(0,0,0,0.22) !important;
    }
    html.dark .card-shadow-dark { background-color: #1E1E1E; border-color: rgba(255,255,255,0.10) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.7) !important; }
    .phone-preview-white { background-color: #FFFFFF !important; }
    html.dark .phone-preview-white { background-color: #111111 !important; }
    body { 
        font-family: 'Kantumruy Pro', 'Suwannaphum', sans-serif; 
        background-color: #FDFBF7; 
        transition: background-color 0.5s ease, color 0.5s ease;
    }

    /* បន្ថែមកូដថ្មីនេះ ដើម្បីឲ្យ Input ទាំងអស់ប្រើ Suwannaphum */
    input, textarea, select {
        font-family: 'Suwannaphum', serif !important;
    }
    /* -------------------------------------------------- */
    
    html.dark body {
        background-color: #000000;
        color: #e0e0e0;
    }
    html.dark .bg-white {
        background-color: #1E1E1E;
        color: #e0e0e0;
        border-color: #333;
    }
    html.dark .bg-\[\#FDFBF7\] {
        background-color: #121212;
    }
    
    .font-dangrek { font-family: 'Moul', cursive !important; }
    .font-moul { font-family: 'Moul', cursive !important; }
    .font-suwannaphum { font-family: 'Suwannaphum', serif !important; font-style: italic !important; }
    
    .font-cinzel { font-family: 'Cinzel', serif; }
    .font-script { font-family: 'Great Vibes', cursive; }
    
    ::-webkit-scrollbar { width: 8px; height: 0px; }
    ::-webkit-scrollbar:horizontal { height: 0px; display: none; }
    ::-webkit-scrollbar-track { background: #f1f1f1; }
    ::-webkit-scrollbar-thumb { background: #D4AF37; border-radius: 4px; }
    
    .scrollbar-hide::-webkit-scrollbar { display: none; }
    .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
    
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
    
    @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    .animate-up { animation: slideUp 0.3s ease-out forwards; }
    
    @keyframes float {
        0% { transform: translateY(0px) rotate(6deg); }
        50% { transform: translateY(-10px) rotate(6deg); }
        100% { transform: translateY(0px) rotate(6deg); }
    }
    .animate-float { animation: float 6s ease-in-out infinite; }

    /* --- SOLID GLOWING GOLD FIX --- */
    .main-title, .section-title, .cover-title { 
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: #FFD700 !important; 
    font-family: 'Moul', cursive !important;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.7), 
        0 0 20px rgba(255, 215, 0, 0.4), 
        2px 2px 5px rgba(0, 0, 0, 0.9) !important;
    line-height: 1.8 !important;
    display: block;
    width: 100%;
}

    /* --- MUSIC BUTTON STYLES (Retained for template use even if button removed from App) --- */
    .music-float-btn {
        position: fixed;
        bottom: 80px; /* Above nav bar */
        right: 20px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid #FFD700;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFD700;
        z-index: 9999;
        cursor: pointer;
        transition: transform 0.3s, background 0.3s;
        backdrop-filter: blur(4px);
    }
    .music-float-btn:hover {
        background: rgba(0, 0, 0, 0.8);
        transform: scale(1.1);
    }
    .spin-icon {
        animation: spin 4s linear infinite;
    }
    .paused-icon {
        animation: none;
        opacity: 0.7;
    }
    @keyframes spin {
        100% { transform: rotate(360deg); }
    }

    .wish-msg { 
        color: #E91E63 !important; 
        font-family: 'Suwannaphum', serif; 
        font-size: 1rem; 
        line-height: 1.4; 
        word-wrap: break-word;
        font-style: italic;
    }

    /* ===== Mobile Auto-Hide Header (Phone only) =====
       ពេល Scroll ចុះ ក្បាលទំព័រ (Logo / ចូលប្រើ / សមាជិកថ្មី / Menu) បាត់ទាំងស្រុង
       ហើយមិនទុកផ្ទៃសរ (white space) នៅខាងលើទេ។
       នៅលើ Computer (min-width: 768px) វានៅដដែល។ */
    @media (max-width: 767px) {
      .mobile-autohide-header {
        transition: max-height .30s ease, padding .30s ease,
                    opacity .22s ease, transform .30s ease, border-width .3s ease;
        max-height: 80vh;
        will-change: max-height, transform;
      }
      .mobile-autohide-header.mobile-header-hidden {
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-width: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        opacity: 0;
        overflow: hidden !important;
        transform: translateY(-14px);
        pointer-events: none;
      }
    }

    /* --- FIXED: Darker Overlay (50%) --- */
    #bg-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
    .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 0; }


    /* ===== PREMIUM TEMPLATE CARD ($12.99 + Intro) =====
       ស៊ុមមាសជុំវិញ Card + ស្លាក Crown + ប៊ូតុងមាស ដើម្បីឱ្យដឹងភ្លាមថាជាម៉ូត Premium */
    /* ដកស៊ុមមាសខាងក្រៅ និងពន្លឺមាសជុំវិញ Card Premium ចេញ (ទុកតែ Card ធម្មតា) */
    .card-shadow-dark.premium-card {
        position: relative;
    }
    .premium-card .premium-info {
        background: linear-gradient(180deg, #FFFDF6 0%, #FFF4D6 100%) !important;
        border-top: 1px solid rgba(212,175,55,0.45) !important;
    }
    html.dark .premium-card .premium-info {
        background: linear-gradient(180deg, #1d1a12 0%, #17140d 100%) !important;
        border-top-color: rgba(212,175,55,0.35) !important;
    }
    .premium-price { color: #8A6200; }
    html.dark .premium-price { color: #FFD700; }

    .premium-perk {
        text-align: center;
        font-family: 'Suwannaphum', serif;
        font-size: 12px;
        color: #8A6200;
        margin-bottom: 14px;
    }
    html.dark .premium-perk { color: #E9C65A; }

    /* ស្លាក PREMIUM ជ្រុងលើឆ្វេង */
    .premium-badge {
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px 5px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.08em;
        color: #2B1D00;
        background: linear-gradient(135deg, #FFF1B8 0%, #E3B93C 45%, #B98A12 100%);
        border: 1px solid rgba(255,255,255,0.7);
        box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 12px rgba(255,215,0,0.45);
    }
    .premium-badge-sub {
        margin-left: 2px;
        padding-left: 6px;
        border-left: 1px solid rgba(43,29,0,0.35);
        font-weight: 700;
        font-size: 9px;
    }

    /* ប៊ូតុង Upgrade ពណ៌មាស */
    .premium-cta {
        position: relative;
        overflow: hidden;
        color: #2B1D00;
        background: linear-gradient(135deg, #FBE58A 0%, #D4AF37 50%, #A87B0E 100%);
        border: 1px solid rgba(255,255,255,0.55);
        box-shadow: 0 6px 18px rgba(184,134,11,0.5), inset 0 1px 0 rgba(255,255,255,0.6);
    }
    .premium-cta:hover { filter: brightness(1.06); }

    /* ពន្លឺរំកិលកាត់ ស្លាក និងប៊ូតុង (ម្ដងក្នុងរយៈពេលវែង) */
    .premium-badge::after, .premium-cta::after {
        content: "";
        position: absolute;
        top: 0; bottom: 0; left: -60%;
        width: 40%;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,0.75), transparent);
        transform: skewX(-20deg);
        animation: premiumShine 4.5s ease-in-out infinite;
        pointer-events: none;
    }
    @keyframes premiumShine {
        0%, 55% { left: -60%; }
        100% { left: 140%; }
    }
    @media (prefers-reduced-motion: reduce) {
        .premium-badge::after, .premium-cta::after { animation: none; display: none; }
    }

    /* ===== PROMO PRICE (តម្លៃប្រូម៉ូសិន: តម្លៃពេញឆូតកាត់ + តម្លៃបញ្ចុះ) ===== */
    .promo-price { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.15; }
    .promo-top { display: inline-flex; align-items: center; gap: 8px; }
    .promo-old {
        position: relative;
        font-family: 'Kantumruy Pro', sans-serif;
        font-weight: 700; font-size: 25px; font-style: italic;
        color: #6B7280;
        text-decoration: line-through;
        text-decoration-color: #E11D1D;
        text-decoration-thickness: 2px;
    }
    .promo-off {
        font-family: 'Suwannaphum', serif; font-style: normal;
        font-size: 11px; font-weight: 800; color: #fff;
        padding: 2px 8px; border-radius: 999px;
        background: linear-gradient(135deg, #FF4D4D 0%, #D40000 100%);
        box-shadow: 0 2px 8px rgba(212,0,0,0.4);
        animation: promoPulse 2.2s ease-in-out infinite;
    }
    .promo-main { display: inline-flex; align-items: baseline; gap: 8px; }
    .promo-label { font-family: 'Suwannaphum', serif; font-weight: 700; font-size: 14px; color: #6B7280; }
    .promo-now {
        font-family: 'Kantumruy Pro', sans-serif;
        font-weight: 900; font-style: italic;
        font-size: 38px; letter-spacing: -0.02em;
        color: #D40000;
        text-shadow: 0 2px 0 rgba(212,0,0,0.12);
    }
    .promo-price.is-compact .promo-now { font-size: 30px; }
    .promo-price.is-compact { align-items: center; }
    .promo-price.is-premium .promo-now { color: #8A6200; text-shadow: 0 2px 0 rgba(212,175,55,0.25); }
    .promo-price.is-premium .promo-off { background: linear-gradient(135deg, #F3CF5B 0%, #B98A12 100%); color: #2B1D00; box-shadow: 0 2px 8px rgba(184,134,11,0.45); }
    html.dark .promo-old { color: #9CA3AF; }
    html.dark .promo-label { color: #9CA3AF; }
    html.dark .promo-now { color: #FF5A5A; text-shadow: none; }
    html.dark .promo-price.is-premium .promo-now { color: #FFD700; }
    @keyframes promoPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
    @media (prefers-reduced-motion: reduce) { .promo-off { animation: none; } }