:root { --bg: #020205; --accent: #a855f7; --card: #0c0c14; }
        body {
            background-image: 
                radial-gradient(circle at 50% -20%, rgba(168, 85, 247, 0.15), transparent),
                linear-gradient(rgba(255, 255, 255, 0.02) 1.5px, transparent 1.5px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1.5px, transparent 1.5px);
            background-size: 100% 100%, 50px 50px, 50px 50px;
        }
        body { 
            background: var(--bg); color: #fff; 
            font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; 
        }
        body::before { content: ""; position: fixed; inset: 0; background: url('https://grainy-gradients.vercel.app/noise.svg'); opacity: 0.04; pointer-events: none; z-index: 99; }
        
        .purple-glow { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%); top: -50px; left: 50%; transform: translateX(-50%); z-index: -1; }
        @media (min-width: 768px) { .purple-glow { width: 800px; height: 600px; } }

        .border-glow { position: relative; border-radius: 32px; background: #08080c; z-index: 10; }
        .border-glow::after { content: ""; position: absolute; inset: -1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 200% 100%; animation: move 4s linear infinite; border-radius: 32px; z-index: -1; opacity: 0.3; }
        @keyframes move { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        .custom-select { position: relative; background: #12121a; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; cursor: pointer; padding: 14px 18px; font-size: 13px; font-weight: 700; }
        .select-options { position: absolute; top: 110%; left: 0; width: 100%; background: #11111d; border: 1px solid #222; border-radius: 16px; z-index: 100; display: none; box-shadow: 0 40px 80px #000; overflow-y: auto; max-height: 250px; }
        .option-item { padding: 15px; color: #888; transition: 0.2s; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.03); }
        .option-item:hover { background: var(--accent); color: white; }

        .gradient-text { background: linear-gradient(to right, #fff, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .btn-weapon { background: linear-gradient(135deg, #a855f7, #6366f1); font-weight: 800; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .btn-weapon:hover { transform: scale(1.03); box-shadow: 0 0 60px rgba(168, 85, 247, 0.5); }

        .output-card { background: #0d0d16; border: 1px solid rgba(255,255,255,0.05); border-radius: 28px; transition: 0.5s; opacity: 0; transform: translateY(20px); }
        .output-card.reveal { opacity: 1; transform: translateY(0); }
        .output-card:hover { border-color: var(--accent); background: #121222; }
        
        .pulse-copy { animation: copyGlow 0.6s ease-out; }
        @keyframes copyGlow { 0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.8); } 100% { box-shadow: 0 0 40px 10px rgba(168, 85, 247, 0); } }

        .live-preview { background: #161625; border: 1px solid rgba(168, 85, 247, 0.2); box-shadow: 0 0 40px rgba(0,0,0,0.5); }
        .preview-case { background: #161625; border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; transition: 0.3s; }
        .preview-case:hover { border-color: var(--accent); background: #1c1c2e; }

        .shimmer { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); background-size: 200% 100%; animation: shimmer 2s infinite; }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        /* ─── BEFORE vs AFTER BLOCK ─── */
        .before-block { background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.12); border-radius: 16px; padding: 14px; margin-bottom: 10px; }
        .before-block .label { font-size: 7px; color: #ef4444; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; display: block; margin-bottom: 4px; }
        .before-block .text { font-size: 10px; color: rgba(255,255,255,0.3); text-decoration: line-through; font-weight: 600; }

        .arrow-down { text-align: center; color: rgba(255,255,255,0.15); font-size: 11px; margin: 6px 0; letter-spacing: 2px; }

        .after-block { background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.15); border-radius: 16px; padding: 14px; margin-bottom: 6px; }
        .after-block .label { font-size: 7px; color: #22c55e; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; display: block; margin-bottom: 4px; }
        .after-block .text { font-size: 12px; color: #fff; font-weight: 800; line-height: 1.5; }
        /* ─── TRENDING BAR ─── */
        .trend-card { 
            background: rgba(255,255,255,0.03); 
            border: 1px solid rgba(255,255,255,0.06); 
            border-radius: 12px; 
            padding: 10px 8px; /* Dikecilin sikit */
            min-height: 50px; 
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .trend-label { 
            font-weight: 900; 
            letter-spacing: 0px; /* Buang letter spacing biar muat */
            text-transform: uppercase; 
            white-space: nowrap; 
        }
        .trend-change { font-weight: 900; }
        .trend-change.up { color: #22c55e; }
        .trend-change.down { color: #ef4444; }
        .trend-bar-wrap { width: 100%; height: 3px; background: rgba(255,255,255,0.06); border-radius: 10px; margin-top: 8px; overflow: hidden; }
        .trend-bar-fill { height: 100%; border-radius: 10px; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); }
        /* ─── EXIT INTENT ─── */
        #exitOverlay.show { display: flex; }
        #exitOverlay.show #exitPopup { transform: scale(1); opacity: 1; }
        /* ─── HOOK BREAKDOWN ─── */
        .breakdown-wrap { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.04); }
        .breakdown-label { font-size: 7px; color: rgba(255,255,255,0.2); font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 6px; }
        .breakdown-item { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.6); padding: 4px 0; }
        .breakdown-item::before { content: "✔"; font-size: 8px; color: #22c55e; font-weight: 900; }
        #hookForm { position: relative; z-index: 50 !important; pointer-events: auto !important; }
        .custom-select { z-index: 60 !important; }
        .sb-drawer { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 9999; display: none; align-items: center; justify-content: center; backdrop-blur: 20px; padding: 20px; }
        .sb-card { background: #08080c; border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 32px; width: 100%; max-width: 650px; max-height: 80vh; overflow-y: auto; p: 30px; position: relative; }
        @keyframes borderBeam {
            0% { offset-distance: 0%; }
            100% { offset-distance: 100%; }
        }
        .border-beam {
            position: relative;
            overflow: hidden;
        }
        .border-beam::after {
            content: "";
            position: absolute;
            inset: 0;
            border: 2px solid transparent;
            border-radius: inherit;
            background: conic-gradient(from 0deg, transparent 60%, var(--accent), transparent 100%) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
            animation: rotate-beam 4s linear infinite;
        }
        @keyframes rotate-beam {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        #lives {
            transition: all 0.5s ease;
            min-height: 48px; /* Jaga biar card gak goyang-goyang tingginya */
            display: block;
        }