/* ============================================================
   AI-ANCHOR: CSS_V99109_ONBOARDING — onboarding /onboarding (v0.99.112 fase 2: percakapan coach berskrip, gaya chat app)
   Token HANYA dari css/brand.css. Mobile: layar penuh (100dvh + safe-area). Desktop: jendela chat 480px di tengah.
   Motion: transform/opacity saja (60 fps); reduced-motion dimatikan global oleh brand.css (js juga menghapus jeda mengetik).
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
html.i18n-wait body { visibility: hidden; }
body { height: 100%; margin: 0; min-width: 320px; overflow: hidden; }
h1, h2, h3, p, ul, ol { margin: 0; }
button { color: inherit; font: inherit; }
a { color: inherit; }
svg { display: block; }
/* spesifisitas nol (:where) → ukuran ikon per komponen selalu menang */
:where(.cx) :where(svg:not([width])) { width: 100%; height: 100%; }
@keyframes cx-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cx-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes cx-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes cx-ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3); opacity: 0; } }
@keyframes cx-spin { to { transform: rotate(360deg); } }
@keyframes cx-glow { 0%, 100% { box-shadow: 0 10px 26px rgba(var(--brand-rgb), .22); } 50% { box-shadow: 0 10px 34px rgba(var(--brand-rgb), .45); } }

/* TASK-046 (owner #54): radius bertingkat onboarding — kartu/lembar 14 · blok di dalam kartu 10 · sel/tombol di dalam blok 6 (chip = --radius-sm) */
.cx { --ob-r1: 14px; --ob-r2: 10px; --ob-r3: 6px; }
.cx { position: relative; display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: radial-gradient(120% 40% at 50% 0%, rgba(var(--brand-rgb), .14), rgba(var(--brand-rgb), 0) 60%), var(--bg); }
.c-wa { color: #25D366; } .c-tg { color: #2AABEE; } .c-tt { color: #FFFFFF; } .c-ig { color: #E1306C; } .c-fb { color: #1877F2; } .c-yt { color: #FF0033; } .c-x { color: #FFFFFF; }

/* ---------- header coach ---------- */
.cx-head { position: relative; z-index: 3; flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 44px; align-items: center; gap: 12px; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; border-bottom: 1px solid var(--line); background: rgba(var(--bg-rgb), .86); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .cx-head { background: rgba(var(--bg-rgb), .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } }
.cx-logo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); color: var(--txt); }
.cx-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cx-who b { overflow: hidden; font-size: 16px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.cx-who > span { display: inline-flex; align-items: center; gap: 8px; color: var(--mut); font: 600 12px/1 var(--font-data); }
.cx-who i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; }
.cx-who i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3DDC84; animation: cx-ping 2.4s var(--motion-ease) infinite; }
.cx-lang { display: inline-flex; overflow: hidden; border: 1px solid var(--line2); border-radius: var(--radius-md); }
.cx-lang button { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--mut); font: 700 12px/1 var(--font-data); cursor: pointer; }
.cx-lang button + button { border-left: 1px solid var(--line2); }
.cx-lang button.on { background: rgba(var(--brand-rgb), .16); color: var(--brand2); }
.cx-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--mut); cursor: pointer; }
.cx-icon:hover { background: var(--card2); color: var(--txt); }
.cx-prog { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; }
.cx-prog i { display: block; height: 100%; background: var(--surface-btn-primary); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--motion-slow) var(--motion-ease); }

/* AI-ANCHOR: CSS_V99109_ONB_WELCOME — utas & bubble */
.cx-thread { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 24px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* pesan menempel ke bawah dekat composer (pola app chat) — margin-top:auto, bukan justify-content:flex-end (yang memotong scroll atas) */
.cx-thread > :first-child { margin-top: auto; }
.cx-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; animation: cx-in .32s var(--motion-ease) both; }
.cx-row.me { justify-content: flex-end; }
/* TASK-048: avatar 24 + jarak 8 = 32 = indentasi kartu (satu garis kiri bubble & kartu) */
.cx-av { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); }
.cx-row.cont .cx-av { visibility: hidden; }
.cx-b { max-width: min(82%, 380px); padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); color: var(--txt); font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.cx-b b { color: var(--brand2); }
.cx-row.me .cx-b { border-radius: 16px 16px 4px 16px; background: var(--surface-btn-primary); box-shadow: none; color: var(--on-brand); font-weight: 600; }
.cx-typing { display: inline-flex; gap: 4px; padding: 16px 16px; }
.cx-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mut); animation: cx-dot 1.1s ease-in-out infinite; }
.cx-typing i:nth-child(2) { animation-delay: .15s; }
.cx-typing i:nth-child(3) { animation-delay: .3s; }
.cx-sys { align-self: center; padding: 8px 12px; border-radius: var(--radius-md); background: rgba(var(--brand-rgb), .12); color: var(--brand2); font: 700 12px/1.3 var(--font-data); animation: cx-in .32s var(--motion-ease) both; }
.cx-card { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 4px 32px; padding: 16px; border-radius: var(--ob-r1); background: var(--surface-card-bg); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); animation: cx-in .4s var(--motion-ease) both; }
.cx-card-t { color: var(--mut); font: 700 12px/1.4 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }

/* AI-ANCHOR: CSS_V99109_ONB_OPTIONS — composer: pilihan cepat bergambar (≥ 44px), multi, input nama */
/* B30 (owner #129): kotak "kamu bayar" ikut menampilkan harga daftar dicoret + baris perpanjangan,
   supaya angkanya sama persis dengan blok UNLOCK, tombol bawah, dan kartu level. */
.pw-vwas { align-self: baseline; color: var(--mut); font: 700 14px/1.2 var(--font-data); text-decoration-thickness: 2px; }
.pw-vthen { margin: 0; color: var(--mut); font-size: 12px; line-height: 1.45; }

/* TASK-068 B28 (owner #128): tiap kartu level tampil dengan diskon — harga daftar dicoret di atas harga bulan pertama */
.lv-was { color: var(--mut); font: 700 12px/1.2 var(--font-data); text-decoration-thickness: 2px; }
.lv-then { color: var(--mut); font-size: 12px; line-height: 1.45; }

/* AI-ANCHOR: CSS_ONB_HAND — TASK-068 B24 (owner #125): tangan tutorial ala game. Melayang di atas halaman,
   tidak pernah menangkap ketukan, dan hanya memakai transform/opacity (murah, 60 fps). Animasi berhenti saat
   tab tersembunyi (.hold) atau target keluar layar (.off). prefers-reduced-motion → tangan tidak dipakai sama sekali. */
.cx-hand { position: fixed; left: 0; top: 0; z-index: 40; width: 40px; height: 48px; opacity: 0; pointer-events: none; will-change: transform; }
.cx-hand.on { opacity: 1; }
.cx-hand.off, .cx-hand.hold { opacity: 0; }
.cx-hand-ic { position: absolute; left: 0; top: 8px; width: 40px; height: 40px; filter: drop-shadow(0 6px 12px rgba(3, 7, 18, .55)); }
.cx-hand.on .cx-hand-ic { animation: hand-tap 1.6s var(--motion-ease) infinite; }
.cx-hand-ring { position: absolute; left: 50%; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 2px solid var(--brand); border-radius: 50%; opacity: 0; }
.cx-hand.on .cx-hand-ring { animation: hand-ring 1.6s var(--motion-ease) infinite; }
.cx-hand.off .cx-hand-ic, .cx-hand.off .cx-hand-ring, .cx-hand.hold .cx-hand-ic, .cx-hand.hold .cx-hand-ring { animation-play-state: paused; }
@keyframes hand-tap { 0%, 100% { transform: translate3d(0, 6px, 0) scale(1); } 45% { transform: translate3d(0, -4px, 0) scale(.92); } 60% { transform: translate3d(0, 2px, 0) scale(1.02); } }
@keyframes hand-ring { 0%, 40% { opacity: 0; transform: scale(.4); } 55% { opacity: .85; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.7); } }
/* target yang ditunjuk ikut berdenyut pelan — "ini kotaknya" */
.cx-tapme { position: relative; animation: tapme 2s var(--motion-ease) infinite; }
@keyframes tapme { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .45); } 50% { box-shadow: 0 0 0 8px rgba(var(--brand-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .cx-hand { display: none; } .cx-tapme { animation: none; } }

/* AI-ANCHOR: CSS_ONB_PW_SECTIONS — TASK-068 B23 (owner #124): halaman ① paywall = bagian berurutan.
   Satu bagian tampil sekali, masuk dengan gerakan bertahap (anak-anaknya naik + memudar berurutan) supaya terasa
   seperti adegan, bukan dinding teks. Hanya transform/opacity — 60 fps di HP kelas menengah. */
.pw-dots { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pw-dots i { flex: 1 1 auto; height: 4px; border-radius: 999px; background: var(--line2); transition: background var(--motion-fast) var(--motion-ease); }
.pw-dots i.done { background: var(--brand2); }
.pw-dots i.on { background: var(--brand); box-shadow: 0 0 12px rgba(var(--brand-rgb), .5); }
.pw-sec { display: flex; flex-direction: column; gap: 16px; }
.pw-sec.in > * { animation: pw-rise .42s var(--motion-ease) both; }
.pw-sec.in > :nth-child(2) { animation-delay: .07s; }
.pw-sec.in > :nth-child(3) { animation-delay: .14s; }
.pw-sec.in > :nth-child(4) { animation-delay: .21s; }
.pw-sec.in > :nth-child(5) { animation-delay: .28s; }
.pw-sec.in > :nth-child(n+6) { animation-delay: .35s; }
@keyframes pw-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pw-sec.in > * { animation: none; } }

/* AI-ANCHOR: CSS_ONB_SESSION — TASK-068 B22 (owner #123): layar "sesi" — satu bagian berat = satu layar penuh,
   digulir dari atas, dengan titik progres dan tombol Lanjut. Menggantikan utas chat (header & meter tetap terlihat). */
.cx-screen { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.cs-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 8px; }
.cs-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cs-dots i { width: 16px; height: 4px; border-radius: 999px; background: var(--line2); transition: background var(--motion-fast) var(--motion-ease), width var(--motion-fast) var(--motion-ease); }
.cs-dots i.done { background: var(--brand2); }
.cs-dots i.on { width: 28px; background: var(--brand); }
.cs-k { flex: none; color: var(--mut); font: 700 10px/1.2 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.cs-body { flex: 1 1 auto; min-height: 0; padding: 0 16px 16px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* isi pendek ditaruh di tengah layar (tidak menggantung di atas ruang kosong), isi panjang tetap mulai dari atas
   dan bisa digulir penuh — "safe" mencegah bagian atas terpotong di browser lama */
.cs-body { display: grid; align-content: start; }
.cs-body { align-content: safe center; }
.cs-body > * { min-width: 0; }
.cs-body > .cx-card { margin: 0; animation: none; }
.cs-bar { flex: none; display: flex; padding: 12px 16px; border-top: 1px solid var(--line); background: rgba(var(--bg-rgb), .92); }
.cs-next { flex: 1 1 auto; min-height: 52px; }
/* animasi masuk sesi: satu gerakan halus (transform + opacity saja), isi kartu ikut naik sedikit */
.cx-screen.in .cs-top { animation: cs-fade .32s var(--motion-ease) both; }
.cx-screen.in .cs-body { animation: cs-rise .42s var(--motion-ease) .04s both; }
.cx-screen.in .cs-bar { animation: cs-rise .38s var(--motion-ease) .12s both; }
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cx-screen.in .cs-top, .cx-screen.in .cs-body, .cx-screen.in .cs-bar { animation: none; } }

.cx-comp { position: relative; z-index: 3; flex: none; display: flex; flex-direction: column; gap: 4px; min-height: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: rgba(var(--bg-rgb), .9); }
.cx-comp:empty { padding-top: 0; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); border-top-color: transparent; }
.cx-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cx-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid rgba(var(--brand-rgb), .55); border-radius: 999px; background: var(--card); color: var(--txt); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); animation: cx-in .3s var(--motion-ease) both; }
.cx-chip:nth-child(2) { animation-delay: .04s; } .cx-chip:nth-child(3) { animation-delay: .08s; } .cx-chip:nth-child(4) { animation-delay: .12s; } .cx-chip:nth-child(n+5) { animation-delay: .16s; }
.cx-chip:hover { background: rgba(var(--brand-rgb), .12); }
.cx-chip:active { transform: scale(.96); }
.cx-chip.on { border-color: var(--brand); background: rgba(var(--brand-rgb), .2); }
.cx-chip .ic { flex: none; width: 20px; height: 20px; color: var(--brand2); }
.cx-chip .sw { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--sw-bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.cx-chip.primary { justify-content: center; width: 100%; min-height: 52px; border: 0; border-radius: var(--radius-md); background: var(--surface-btn-primary); color: var(--on-brand); font-size: 16px; font-weight: 700; animation: cx-in .3s var(--motion-ease) both, cx-glow 2.4s var(--motion-ease) 1s infinite; }
.cx-chip.primary:disabled { opacity: .35; animation: none; cursor: not-allowed; }
.cx-chip.ghost { border-color: var(--line2); color: var(--mut); }
.cx-chip.num { font-family: var(--font-data); font-size: 16px; font-weight: 800; }
/* pilihan jawaban = grid 2 kolom (tinggi 52, satu garis kiri); jumlah ganjil → kartu terakhir selebar penuh */
.cx-chips.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-chips.grid .cx-chip { justify-content: flex-start; min-height: 52px; padding: 8px 12px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.25; }
.cx-chips.grid .cx-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cx-chips.grid .cx-chip.num { justify-content: center; font-size: 16px; }
/* TASK-058: target = angka besar + keinginan kecil di bawahnya, rata kiri satu garis */
.cx-chips.grid .cx-chip.num.goal { justify-content: flex-start; min-height: 64px; text-align: left; }
.cx-chip.num .tx small { font-family: var(--font-ui); font-weight: 500; letter-spacing: 0; }
/* multi pilih: centang jelas (umpan balik status, bukan hanya warna) */
.cx-chip .tk { flex: none; width: 20px; height: 20px; margin-right: -4px; padding: 4px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line2); color: transparent; transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
.cx-chip.on .tk { background: var(--brand); box-shadow: none; color: var(--on-brand); animation: cx-pop .4s var(--spring) both; }
.cx-chips.grid .cx-chip .tk { margin: 0 0 0 auto; }
.cx-chip[data-v="friendly"] { --sw-bg: linear-gradient(160deg, #3a5bd0, #0b1022); }
.cx-chip[data-v="pro"] { --sw-bg: linear-gradient(160deg, #e8f2ee, #111); }
.cx-chip[data-v="bold"] { --sw-bg: linear-gradient(160deg, #4D7EFF, #0a0a0a); }
.cx-chip[data-v="calm"] { --sw-bg: linear-gradient(160deg, #f4f1ea, #cfc7b4); }
.cx-inrow { display: flex; gap: 8px; }
.cx-input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 24px; background: var(--card2); color: var(--txt); font: 500 16px/1.2 var(--font-ui); }
.cx-input::placeholder { color: var(--mut); }
.cx-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .25); }
.cx-send { flex: none; width: 48px; height: 48px; padding: 12px; border: 0; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); cursor: pointer; }
.cx-send:disabled { opacity: .35; cursor: not-allowed; }
.cx-link { align-self: center; display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--brand2); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.cx-link.mut { color: var(--mut); font-weight: 500; }

/* AI-ANCHOR: CSS_V99112_ONB_HOW — kartu mekanisme + 2 produk + bukti */
.ob-flow { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; }
.ob-flow::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 17px; width: 2px; background: linear-gradient(var(--brand), rgba(var(--brand-rgb), .1)); }
.ob-flow li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; align-items: center; animation: cx-in .4s var(--motion-ease) both; }
.ob-flow li:nth-child(2) { animation-delay: .12s; } .ob-flow li:nth-child(3) { animation-delay: .24s; } .ob-flow li:nth-child(4) { animation-delay: .36s; }
.ob-flow b { font-size: 14px; }
.ob-flow small { color: var(--mut); font-size: 12px; }
.ob-ico { display: flex; flex: none; width: 36px; height: 36px; padding: 8px; border-radius: var(--radius-md); background: rgba(var(--brand-rgb), .15); color: var(--brand2); }
.ob-flow .ob-ico { grid-row: span 2; }
.ob-ico.hot { background: var(--surface-btn-primary); color: var(--on-brand); }
.cx-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cx-duo > div { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-md); background: var(--card); }
.cx-duo b { font-family: var(--font-title); font-size: 16px; font-weight: 400; }
.cx-duo ul { display: flex; flex-direction: column; gap: 4px; padding: 0; list-style: none; }
.cx-duo li { color: var(--brand2); font: 700 12px/1.3 var(--font-data); }
.cx-duo .hot { background: linear-gradient(155deg, rgba(var(--brand-rgb), .24), rgba(var(--panel-rgb), .95) 60%); }
.cx-proof { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; }
.cx-proof li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--card); animation: cx-in .4s var(--motion-ease) both; }
.cx-proof li:nth-child(2) { animation-delay: .1s; } .cx-proof li:nth-child(3) { animation-delay: .2s; }
.cx-proof .ob-ico { width: 28px; height: 28px; padding: 8px; }
.cx-proof span { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.cx-proof em { color: var(--brand2); font: 800 12px/1 var(--font-data); font-style: normal; }
.cx-honest { color: rgba(var(--txt-rgb), .8); font-size: 12px; line-height: 1.45; }

/* AI-ANCHOR: CSS_V99109_ONB_BUILD */
.ob-build { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; }
.ob-build li { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--mut); font: 500 14px/1.4 var(--font-data); overflow-wrap: anywhere; opacity: .45; transition: opacity var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease); }
.ob-build li::before { content: ""; flex: none; width: 18px; height: 18px; border: 2px solid var(--line2); border-radius: 50%; }
.ob-build li.active, .ob-build li.done { color: var(--txt); opacity: 1; }
.ob-build li.active::before { border-color: var(--brand) var(--brand) var(--line2) var(--line2); animation: cx-spin .8s linear infinite; }
.ob-build li.done::before { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.ob-build-bar { height: 4px; overflow: hidden; border-radius: 2px; background: var(--line); }
.ob-build-bar i { display: block; height: 100%; background: var(--surface-btn-primary); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s linear; }

/* AI-ANCHOR: CSS_V99109_ONB_PREVIEW — toko milik user (gaya dari jawaban) + daftar kepemilikan */
.ob-mock { overflow: hidden; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow-glow); }
.ob-mock-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ob-mock-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); }
.ob-mock-bar span { margin-left: 8px; overflow: hidden; color: var(--brand2); font: 600 12px/1 var(--font-data); white-space: nowrap; text-overflow: ellipsis; }
.ob-mock-body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 16px 16px; text-align: center; background: radial-gradient(110% 70% at 50% 0%, rgba(var(--brand-rgb), .18), rgba(var(--brand-rgb), 0) 65%); }
.ob-mock-av { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); font: 800 20px/1 var(--font-ui); }
.ob-mock-name { font-size: 12px; font-weight: 700; }
.ob-mock-body h2 { color: var(--txt); font-size: 20px; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.ob-mock-body p { color: rgba(var(--txt-rgb), .72); font-size: 12px; line-height: 1.45; }
.ob-mock[data-style="friendly"] h2 { color: var(--brand2); }
.ob-mock[data-style="bold"] h2 { font-family: var(--font-title); font-size: 20px; font-weight: 400; text-transform: uppercase; }
.ob-mock[data-style="calm"] h2 { font-weight: 400; }
.ob-mock-cta { display: block; align-self: stretch; padding: 12px; border-radius: var(--radius-md); background: var(--surface-btn-primary); color: var(--on-brand); font-size: 14px; font-weight: 700; }
.ob-owned { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
.ob-owned li { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--card); font-size: 12px; font-weight: 600; }
.ob-owned svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--brand); color: var(--on-brand); animation: cx-pop .45s var(--motion-ease) both; }
.ob-owned li:nth-child(1) svg { animation-delay: .3s; } .ob-owned li:nth-child(2) svg { animation-delay: .45s; } .ob-owned li:nth-child(3) svg { animation-delay: .6s; } .ob-owned li:nth-child(4) svg { animation-delay: .75s; }

/* AI-ANCHOR: CSS_V99112_ONB_PLAN — rencana: angka besar, titik orang, slider, chip level, tantangan */
.ob-big { display: flex; flex-direction: column; gap: 4px; }
.ob-big b { background: var(--surface-btn-primary); -webkit-background-clip: text; background-clip: text; color: transparent; font: 800 clamp(40px, 12vw, 48px)/1 var(--font-data); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ob-big span { color: var(--mut); font-size: 12px; }
.ob-line { color: var(--txt); font-size: 14px; font-weight: 600; line-height: 1.45; }
.ob-dots { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 4px; }
.ob-dots i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--line); transform: scale(.7); transition: background-color var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease); }
.ob-dots i.on { background: var(--brand); transform: none; }
.ob-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; color: var(--mut); font-size: 12px; }
.ob-range b { color: var(--txt); font: 800 16px/1 var(--font-data); }
.ob-range input { grid-column: 1 / -1; width: 100%; height: 34px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ob-range input::-webkit-slider-runnable-track { height: 6px; border-radius: 2px; background: var(--line2); }
.ob-range input::-moz-range-track { height: 6px; border-radius: 2px; background: var(--line2); }
.ob-range input::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -12px; border: 0; border-radius: 50%; background: var(--surface-btn-primary); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .25); -webkit-appearance: none; appearance: none; }
.ob-range input::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .25); }
.ob-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.ob-chips button, .ob-chips > span { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 48px; padding: 8px 4px; border: 1px solid var(--line2); border-radius: var(--radius-md); background: var(--card); cursor: pointer; }
.ob-chips button b, .ob-chips > span b { font: 700 10px/1 var(--font-ui); }
.ob-chips button span, .ob-chips > span span { color: var(--mut); font: 700 10px/1 var(--font-data); }
.ob-chips button.on, .ob-chips > span.on { border-color: var(--brand); background: rgba(var(--brand-rgb), .14); }
.ob-chips button.on span, .ob-chips > span.on span { color: var(--brand2); }
.ob-note { color: var(--mut); font-size: 12px; line-height: 1.45; }
.ob-hookline { padding: 12px 12px; border-left: 3px solid var(--brand); background: rgba(var(--brand-rgb), .08); font-size: 12px; line-height: 1.45; }
.ob-challenges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ob-ch { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-md); background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); }
.ob-ch em { align-self: flex-start; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--surface-btn-primary); color: var(--on-brand); font: 800 10px/1 var(--font-data); font-style: normal; }
.ob-ch b { font-size: 12px; }
.ob-ch small { color: var(--mut); font-size: 12px; line-height: 1.4; }
.ob-ch .pace { color: var(--brand2); font: 700 12px/1.3 var(--font-data); }

/* AI-ANCHOR: CSS_V99112_ONB_PAYWALL — kartu level (radio), tertinggi dulu, rekomendasi disorot */
.ob-tiers { display: flex; flex-direction: column; gap: 8px; }
.ob-tier { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 12px 12px; border: 1px solid var(--line2); border-radius: var(--radius-md); background: var(--card); color: var(--txt); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); animation: cx-in .4s var(--motion-ease) both; }
.ob-tier:nth-child(2) { animation-delay: .06s; } .ob-tier:nth-child(3) { animation-delay: .12s; } .ob-tier:nth-child(4) { animation-delay: .18s; } .ob-tier:nth-child(5) { animation-delay: .24s; }
.ob-tier:active { transform: scale(.98); }
.ob-tier.on { border-color: var(--brand); background: linear-gradient(150deg, rgba(var(--brand-rgb), .2), rgba(var(--panel-rgb), .95) 60%); box-shadow: var(--shadow-glow); }
.ob-tier-n { display: flex; align-items: center; gap: 8px; font-family: var(--font-title); font-size: 16px; letter-spacing: .02em; }
.ob-best { padding: 4px 8px; border-radius: var(--radius-sm); background: var(--surface-btn-primary); color: var(--on-brand); font: 800 10px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.ob-tier-p { text-align: right; }
.ob-tier-p b { display: block; font: 800 20px/1 var(--font-data); }
.ob-tier-p small { color: var(--mut); font-size: 10px; }
.ob-tier-bar { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 2px; background: var(--line); }
.ob-tier-bar i { display: block; height: 100%; background: var(--surface-btn-primary); transform-origin: 0 50%; }
.ob-tier-t { grid-column: 1 / -1; color: rgba(var(--txt-rgb), .8); font-size: 12px; line-height: 1.35; }
.ob-tier-t b { color: var(--brand2); }
.ob-incl { padding: 12px; border-radius: var(--radius-md); background: var(--card); }
.ob-incl small { color: var(--mut); font: 700 10px/1.3 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.ob-incl ul, .ob-trust { display: grid; gap: 8px; margin-top: 8px; padding: 0; list-style: none; }
.ob-incl li, .ob-trust li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; }
.ob-incl svg, .ob-trust svg { flex: none; width: 18px; height: 18px; color: var(--brand2); }
/* TASK-068 B11 (owner #109): kolom mengikuti JUMLAH item (dulu dipaksa 3 → 2 item tampak miring ke kiri);
   tiap item lebar sama (minmax(0,1fr)) + rata tengah optik. */
.ob-trust { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-items: center; margin-top: 0; }
.ob-trust li { flex-direction: column; gap: 8px; color: var(--mut); font-size: 12px; line-height: 1.4; text-align: center; }
.ob-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 0 24px; border: 0; border-radius: var(--radius-md); background: var(--surface-btn-primary); color: var(--on-brand); font: 700 16px/1.15 var(--font-ui); text-align: center; text-decoration: none; cursor: pointer; animation: cx-glow 2.4s var(--motion-ease) infinite; }
.ob-btn:active { transform: scale(.98); }
.ob-btn.duo { flex-direction: column; gap: 4px; min-height: 56px; padding: 8px 16px; }
.ob-btn.duo small { max-width: 100%; font: 700 12px/1.35 var(--font-data); opacity: .8; text-align: center; }

/* ---------- desktop: jendela chat di tengah layar ---------- */
@media (min-width: 640px) {
	body { display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(60% 50% at 50% 30%, rgba(var(--brand-rgb), .12), rgba(var(--brand-rgb), 0)), var(--bg); }
	.cx { max-width: 480px; height: min(900px, calc(100vh - 48px)); height: min(900px, calc(100dvh - 48px)); border: 1px solid var(--line2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(var(--brand-rgb), .08); }
	.cx-thread { padding-left: 16px; padding-right: 16px; }
}

/* AI-ANCHOR: CSS_V99112_ONB_SPRING — easing spring (linear(), cadangan cubic-bezier) untuk bubble, chip, kartu + kartu channel pilihan */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); }
@supports (animation-timing-function: linear(0, 1)) {
	:root { --spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1); }
}
.cx-row, .cx-chip, .cx-card, .cx-sys { animation-duration: .55s; animation-timing-function: var(--spring); }
.cx-chip.primary { animation-timing-function: var(--spring), var(--motion-ease); }
.cx-picked { display: flex; flex-wrap: wrap; gap: 12px; }
.cx-picked span { display: flex; width: 48px; height: 48px; padding: 12px; border-radius: 14px; background: var(--card2); box-shadow: 0 10px 22px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line2); animation: cx-pop .6s var(--spring) both; }
/* TASK-056 (#75): ikon = tombol kirim (target sentuh 48 px), ketuk = tekan, terkirim = cincin hijau */
.cx-pick-b { position: relative; display: flex; padding: 0; border: 0; border-radius: 14px; background: none; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease); }
.cx-pick-b:active { transform: scale(.92); }
.cx-pick-b:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cx-pick-b.sent span { box-shadow: 0 10px 22px rgba(0, 0, 0, .45), inset 0 0 0 2px #3DDC84; }
.cx-pick-b:nth-child(2) span { animation-delay: .08s; } .cx-pick-b:nth-child(3) span { animation-delay: .16s; } .cx-pick-b:nth-child(4) span { animation-delay: .24s; }
.cx-pick-b:nth-child(n+5) span { animation-delay: .32s; }
.cx-pick-tip { color: var(--mut); font-size: 12px; line-height: 1.5; }
.ob-trust .pair { display: flex; gap: 4px; }
.ob-trust .pair svg { width: 18px; height: 18px; }

/* ============================================================
   AI-ANCHOR: CSS_V99112_ONB_V3 — sampul hook layar penuh, story "cara kerja" 4 slide, marquee semua app, HP merakit toko,
   kalender tantangan 7 hari, paywall v3 (tujuan + manfaat + batang biaya vs tujuan + level). Grid 4/8 px, sentuh >= 44 px.
   ============================================================ */
@keyframes cv-tilt { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes cv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cx-marq { to { transform: translateX(-50%); } }
@keyframes sto-grow { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes sto-fly { from { opacity: 0; transform: translate(0, 0) scale(.4); } to { opacity: 1; transform: translate(var(--x), var(--y)); } }
@keyframes sto-up { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes pw-fill { from { transform: scaleX(0); } }
/* sampul */
.cx-cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: calc(16px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px)); overflow: hidden; background: radial-gradient(120% 60% at 50% 0%, rgba(var(--brand-rgb), .3), rgba(var(--brand-rgb), 0) 62%), var(--bg); text-align: center; transition: opacity .4s var(--motion-ease), transform .55s var(--spring); }
.cx-cover.out { opacity: 0; transform: scale(1.05); pointer-events: none; }
.cv-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.cv-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-title); font-size: 16px; letter-spacing: .04em; }
.cv-tag { color: var(--brand2); font: 700 10px/1.3 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
/* panggung mengisi sisa tinggi → judul + CTA turun ke zona jempol (bawah), tidak ada ruang kosong di bawah tombol */
.cv-stage { position: relative; flex: 1 1 auto; width: 100%; min-height: 240px; }
.cv-stage::before { content: ""; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -96px 0 0 -96px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--brand-rgb), .38), rgba(var(--brand-rgb), 0)); }
.cv-phone { position: absolute; top: 50%; left: 50%; width: 176px; height: 300px; margin: -96px 0 0 -96px; padding: 8px; border-radius: 24px; background: linear-gradient(160deg, var(--card2), var(--panel)); box-shadow: 0 0 0 1px var(--line2), 0 30px 70px rgba(0, 0, 0, .7); animation: cv-tilt 8s ease-in-out infinite; }
.cv-screen { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 32px 8px 8px; overflow: hidden; border-radius: 20px; background: radial-gradient(120% 60% at 50% 0%, rgba(var(--brand-rgb), .28), rgba(var(--brand-rgb), 0) 60%), var(--bg); }
.cv-note { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: rgba(23, 23, 23, .95); box-shadow: inset 0 0 0 1px var(--line2); text-align: left; animation: sto-up .55s var(--spring) both; }
.cv-note .ic { display: flex; width: 24px; height: 24px; padding: 4px; border-radius: 6px; background: var(--surface-btn-primary); color: var(--on-brand); }
.cv-note b { display: block; font-size: 10px; line-height: 1.4; overflow-wrap: normal; hyphens: auto; }
.cv-note small { display: block; margin-top: 4px; color: var(--mut); font-size: 10px; line-height: 1.4; }
.cv-note em { color: var(--brand2); font: 800 10px/1 var(--font-data); font-style: normal; }
.cv-orb { position: absolute; display: flex; width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: var(--card2); box-shadow: 0 0 0 1px var(--line2), 0 12px 26px rgba(0, 0, 0, .55); animation: cv-float 6s ease-in-out infinite; }
.cv-orb.o1 { top: 6%; left: 6%; } .cv-orb.o2 { top: 2%; right: 8%; animation-delay: -1s; } .cv-orb.o3 { top: 42%; left: 0; animation-delay: -2s; }
.cv-orb.o4 { top: 46%; right: 0; animation-delay: -3s; } .cv-orb.o5 { bottom: 4%; left: 10%; animation-delay: -4s; } .cv-orb.o6 { bottom: 0; right: 12%; animation-delay: -5s; }
.cx-cover h1 { max-width: 14ch; font-family: var(--font-title); font-size: clamp(32px, 8.6vw, 40px); font-weight: 400; line-height: 1.02; text-wrap: balance; }
.cv-paid { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 600 12px/1.3 var(--font-data); }
.cv-paid[hidden] { display: none; }
.cv-paid i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; }
.cv-paid i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3DDC84; animation: cx-ping 2.4s var(--motion-ease) infinite; }
.cx-cover .ob-btn { max-width: 420px; }
/* story cara kerja */
.cx-card-how { gap: 12px; padding: 12px; }
.sto-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.sto-bars i { height: 3px; overflow: hidden; border-radius: 2px; background: var(--line2); }
.sto-bars b { display: block; height: 100%; background: var(--brand2); transform-origin: 0 50%; transform: scaleX(0); }
.sto-bars i.done b { transform: scaleX(1); }
.sto-bars i.on b { transform: scaleX(1); transition: transform 2.8s linear; }
.sto-stage { position: relative; height: 276px; overflow: hidden; border-radius: 10px; background: radial-gradient(110% 70% at 50% 0%, rgba(var(--brand-rgb), .24), rgba(var(--brand-rgb), 0) 65%), var(--panel); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sto-sl { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 16px 16px; text-align: center; opacity: 0; transform: translateX(28px); transition: opacity .35s var(--motion-ease), transform .6s var(--spring); pointer-events: none; }
.sto-sl.on { opacity: 1; transform: none; }
.sto-sl > b { font-size: 16px; }
.sto-sl > small { color: var(--mut); font-size: 12px; }
.sto-vis { position: relative; flex: 1 1 auto; width: 100%; }
.sto-ph { position: absolute; top: 4px; left: 50%; display: flex; flex-direction: column; gap: 8px; width: 118px; height: 168px; margin-left: -64px; padding: 16px 12px 12px; border-radius: 20px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2), 0 16px 30px rgba(0, 0, 0, .5); }
.sto-ph .blk { display: block; height: 8px; border-radius: 2px; background: rgba(var(--txt-rgb), .85); transform-origin: 0 50%; }
.sto-ph .blk.av { align-self: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-btn-primary); transform-origin: 50% 50%; }
.sto-ph .blk.w2 { width: 60%; background: rgba(var(--mut-rgb), .6); }
.sto-ph .blk.lnk { height: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); }
.sto-ph .blk.btn { height: 20px; margin-top: auto; background: var(--surface-btn-primary); }
.s1.on .blk { animation: sto-grow .5s var(--spring) both; }
.s1.on .blk:nth-child(2) { animation-delay: .15s; } .s1.on .blk:nth-child(3) { animation-delay: .3s; } .s1.on .blk:nth-child(4) { animation-delay: .45s; }
.s1.on .blk:nth-child(5) { animation-delay: .6s; } .s1.on .blk:nth-child(6) { animation-delay: .8s; }
.sto-link { position: absolute; top: 72px; left: 50%; z-index: 1; padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface-btn-primary); color: var(--on-brand); font: 800 12px/1 var(--font-data); white-space: nowrap; transform: translateX(-50%); box-shadow: 0 10px 26px rgba(var(--brand-rgb), .4); }
.sto-rad span { position: absolute; top: 70px; left: 50%; display: flex; width: 38px; height: 38px; margin-left: -16px; padding: 8px; border-radius: 50%; background: var(--card2); box-shadow: 0 0 0 1px var(--line2), 0 10px 22px rgba(0, 0, 0, .5); opacity: 0; }
.s2.on .sto-rad span { animation: sto-fly .8s var(--spring) both; }
.sto-ph.chat { gap: 8px; }
.sto-ph .bb { display: block; width: 78%; height: 16px; border-radius: 8px 8px 8px 2px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); opacity: 0; }
.sto-ph .bb.me { align-self: flex-end; border-radius: 8px 8px 2px 8px; background: var(--brand); box-shadow: none; }
.sto-ph .bb.short { width: 48%; }
.s3.on .bb { animation: sto-up .45s var(--spring) both; }
.s3.on .bb:nth-child(2) { animation-delay: .35s; } .s3.on .bb:nth-child(3) { animation-delay: .7s; } .s3.on .bb:nth-child(4) { animation-delay: 1.05s; }
.s3.on .blk.btn { animation: sto-grow .5s var(--spring) 1.4s both; }
.sto-coins { position: absolute; top: 12px; left: 50%; display: flex; flex-direction: column; gap: 8px; width: 170px; margin-left: -96px; }
.sto-coins span { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(23, 23, 23, .95); box-shadow: inset 0 0 0 1px var(--line2), 0 10px 22px rgba(0, 0, 0, .45); opacity: 0; }
.sto-coins .ic { display: flex; width: 26px; height: 26px; padding: 4px; border-radius: 6px; background: var(--surface-btn-primary); color: var(--on-brand); }
.sto-coins em { color: var(--brand2); font: 800 14px/1 var(--font-data); font-style: normal; }
.s4.on .sto-coins span { animation: sto-up .55s var(--spring) both; }
.s4.on .sto-coins span:nth-child(2) { animation-delay: .35s; } .s4.on .sto-coins span:nth-child(3) { animation-delay: .7s; }
/* marquee semua app di kartu bukti */
.cx-marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.cx-marq-row { display: flex; gap: 12px; width: max-content; animation: cx-marq 40s linear infinite; }
.cx-marq-row span { display: flex; flex: none; width: 40px; height: 40px; padding: 12px; border-radius: 10px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); }
/* HP merakit toko */
.bd { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; }
.bd-ph { position: relative; display: flex; flex-direction: column; gap: 8px; height: 156px; padding: 16px 12px 12px; border-radius: 16px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2), 0 14px 28px rgba(0, 0, 0, .5); }
.bd-ph i { display: block; height: 7px; border-radius: 2px; background: rgba(var(--txt-rgb), .85); opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .3s var(--motion-ease), transform .55s var(--spring); }
.bd-ph .av { align-self: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-btn-primary); }
.bd-ph .w2 { width: 62%; background: rgba(var(--mut-rgb), .6); }
.bd-ph .lnk { height: 13px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); }
.bd-ph .btn { height: 18px; margin-top: auto; background: var(--surface-btn-primary); }
.bd-ph .live { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 4px rgba(61, 220, 132, .25); }
.cx-card-build.s1 .k1, .cx-card-build.s2 .k2, .cx-card-build.s3 .k3, .cx-card-build.s4 .k4 { opacity: 1; transform: none; }
/* kalender tantangan 7 hari */
.cal { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; }
.cal li { display: grid; grid-template-columns: 52px 32px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--card); animation: cx-in .5s var(--spring) both; }
.cal li:nth-child(2) { animation-delay: .06s; } .cal li:nth-child(3) { animation-delay: .12s; } .cal li:nth-child(4) { animation-delay: .18s; }
.cal li:nth-child(5) { animation-delay: .24s; } .cal li:nth-child(6) { animation-delay: .3s; } .cal li:nth-child(7) { animation-delay: .36s; }
.cal li.now { box-shadow: inset 0 0 0 1px var(--brand), var(--shadow-glow); }
.cal em { color: var(--brand2); font: 800 10px/1 var(--font-data); font-style: normal; }
.cal .ic { display: flex; width: 32px; height: 32px; padding: 8px; border-radius: 10px; background: var(--card2); color: var(--brand2); }
.cal span { font-size: 12px; line-height: 1.35; }
/* paywall v3 */
/* TASK-046: paywall = komponen penuh → selebar utas (tanpa indentasi avatar 36 px) supaya tab & kartu level tidak sesak di 320–375 px */
.cx-card-paywall { gap: 16px; margin-left: 0; }
/* TASK-048: kartu pembuka (undangan) juga selebar utas — angka "awal → level teratas" tidak keluar kotak di 320 px */
.cx-card-invite { margin-left: 0; }
/* pil "1 langkah lagi" menempel di pojok kanan atas (sebaris label kecil) → angka tujuan dapat lebar penuh, tidak pernah meluber */
.pw-goal { position: relative; display: block; padding: 12px 16px; border-radius: var(--ob-r2); background: linear-gradient(150deg, rgba(var(--brand-rgb), .24), rgba(var(--panel-rgb), .95) 62%); box-shadow: var(--shadow-glow); }
.pw-goal small { display: block; margin-bottom: 4px; color: var(--mut); font: 700 10px/1.4 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.pw-goal b { font: 800 24px/1.1 var(--font-data); }
.pw-step { position: absolute; top: 12px; right: 12px; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--surface-btn-primary); color: var(--on-brand); font: 800 10px/1.4 var(--font-data); white-space: nowrap; }
.pw-up { color: var(--mut); font-size: 12px; line-height: 1.5; text-align: center; }
@media (max-width: 360px) {
	/* 3 + 2 di tengah (baris kedua tidak menyisakan lubang) */
	.pw-tiers { display: flex; flex-wrap: wrap; justify-content: center; }
	.pw-tiers button { flex: 0 0 calc((100% - 12px) / 3); }
	.cv-orb { width: 40px; height: 40px; padding: 8px; }
}
/* layar tinggi (HP modern ≥ 700 px): HP sampul lebih besar → notifikasi terbaca utuh */
@media (min-height: 700px) and (min-width: 360px) {
	.cv-phone { width: 208px; height: 360px; margin: -96px 0 0 -96px; border-radius: 32px; }
	.cv-screen { gap: 8px; padding: 32px 12px 12px; border-radius: 24px; }
	.cv-note { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
	.cv-note .ic { width: 28px; height: 28px; padding: 8px; }
	.cv-note b { font-size: 12px; }
	.cv-note small { font-size: 10px; }
	.cv-note em { font-size: 12px; }
}

/* ============================================================
   AI-ANCHOR: CSS_V99112_ONB_V4 — onboarding v4 (TASK-030): nomor tes, kartu pengundang / top earner (+ chip di sampul), kartu tes,
   hasil tes (profil), hasil di depan (grid 6), bagian cara kerja terkunci, kalender terkunci per gaya, manfaat kunci di paywall.
   Grid 4/8 px, sentuh >= 44 px, motion transform/opacity (blur hanya pada elemen statis kecil).
   ============================================================ */
@keyframes rs-spin { to { transform: rotate(360deg); } }
.cx-qn { align-self: flex-start; color: var(--brand2); font: 700 10px/1.3 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.cx-chip .tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cx-chip .tx small { color: var(--mut); font-size: 12px; font-weight: 500; line-height: 1.25; }
/* pengundang / top earner */
.cx-card-invite { gap: 12px; background: linear-gradient(150deg, rgba(var(--brand-rgb), .22), rgba(var(--panel-rgb), .95) 62%); box-shadow: var(--shadow-glow), inset 0 0 0 1px rgba(var(--brand-rgb), .35); }
.iv-top { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; }
.iv-av { display: flex; flex: none; align-items: center; justify-content: center; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); font: 400 20px/1 var(--font-title); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .35); animation: cx-pop .6s var(--spring) both; }
.iv-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iv-av.ic { padding: 16px; }
.iv-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.iv-who small { color: var(--brand2); font: 700 10px/1.3 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.iv-who b { font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.iv-chips, .rs-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 8px 12px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); font: 700 12px/1.4 var(--font-data); animation: cx-in .5s var(--spring) .15s both; }
.iv-badge svg { flex: none; width: 16px; height: 16px; color: var(--brand2); }
.iv-badge.hot { background: rgba(61, 220, 132, .12); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .45); color: #3DDC84; }
.iv-badge.hot svg { color: #3DDC84; }
.cv-inv { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 8px 16px 8px 8px; border-radius: 32px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45), var(--shadow-glow); text-align: left; animation: cx-in .5s var(--spring) both; }
.cv-inv[hidden] { display: none; }
.cv-inv .iv-av { width: 44px; height: 44px; font-size: 16px; }
.cv-inv > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cv-inv b { font-size: 14px; line-height: 1.25; }
.cv-inv small { color: #3DDC84; font: 700 12px/1.25 var(--font-data); }
/* kartu tes */
.ts-hd { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; }
.ts-ic { display: flex; width: 48px; height: 48px; padding: 12px; border-radius: 14px; background: var(--surface-btn-primary); color: var(--on-brand); animation: cx-glow 2.4s var(--motion-ease) 3; }
.ts-hd small, .rs-hd small { display: block; color: var(--brand2); font: 700 10px/1.3 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.ts-hd b { display: block; font-family: var(--font-title); font-size: 20px; font-weight: 400; line-height: 1.1; }
.ts-sub { color: var(--mut); font-size: 14px; line-height: 1.45; }
.ts-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
.ts-list li { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px; border-radius: var(--ob-r3); background: var(--card); font-size: 12px; font-weight: 600; line-height: 1.4; }
.ts-list .ic { display: flex; flex: none; width: 32px; height: 32px; padding: 8px; border-radius: var(--ob-r3); background: rgba(var(--brand-rgb), .15); color: var(--brand2); }
/* hasil tes */
.rs-hd { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px; }
.rs-ring { position: relative; display: flex; width: 64px; height: 64px; padding: 16px; border-radius: 50%; background: var(--card2); color: var(--brand2); animation: cx-pop .6s var(--spring) both; }
.rs-ring::before { content: ""; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; border-radius: 50%; background: conic-gradient(var(--brand), var(--brand2), rgba(var(--brand-rgb), 0) 70%, var(--brand)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); animation: rs-spin 1.6s linear 3; }
.rs-ring svg { position: relative; z-index: 1; }
.cx-card-result.calc > :not(.rs-scan) { display: none; }
.rs-scan { display: flex; flex-direction: column; gap: 8px; }
.rs-scan b { color: var(--mut); font: 700 12px/1.3 var(--font-data); }
.rs-scan i { display: block; height: 6px; overflow: hidden; border-radius: 2px; background: var(--line); }
.rs-scan s { display: block; height: 100%; border-radius: 2px; background: var(--surface-btn-primary); transform-origin: 0 50%; animation: pw-fill 1.4s var(--motion-ease) both; text-decoration: none; }
.rs-hd b { display: block; font-family: var(--font-title); font-size: 24px; font-weight: 400; line-height: 1.1; }
.rs-traits { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; }
.rs-traits li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 8px; font-size: 14px; line-height: 1.4; animation: cx-in .5s var(--spring) both; }
.rs-traits li:nth-child(2) { animation-delay: .12s; } .rs-traits li:nth-child(3) { animation-delay: .24s; }
.rs-traits svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.rs-path { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-md); background: linear-gradient(150deg, rgba(var(--brand-rgb), .22), rgba(var(--panel-rgb), .95) 62%); font-size: 14px; font-weight: 700; line-height: 1.35; }
.rs-path .ic { display: flex; width: 32px; height: 32px; padding: 8px; border-radius: 10px; background: var(--surface-btn-primary); color: var(--on-brand); }
/* hasil di depan */
.oc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
.oc-grid li { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 104px; padding: 12px; border-radius: var(--ob-r2); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); animation: cx-in .5s var(--spring) both; }
.oc-grid li:nth-child(2) { animation-delay: .06s; } .oc-grid li:nth-child(3) { animation-delay: .12s; } .oc-grid li:nth-child(4) { animation-delay: .18s; }
.oc-grid li:nth-child(5) { animation-delay: .24s; } .oc-grid li:nth-child(6) { animation-delay: .3s; }
.oc-grid .ic { display: flex; width: 32px; height: 32px; margin-bottom: 4px; padding: 8px; border-radius: var(--ob-r3); background: rgba(var(--brand-rgb), .15); color: var(--brand2); }
.oc-grid .oc-daily .ic, .oc-grid .oc-monthly .ic { background: var(--surface-btn-primary); color: var(--on-brand); }
.oc-grid b { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; hyphens: auto; }
.oc-grid small { color: var(--mut); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
/* cara kerja: slide rahasia terkunci (menggantung — owner #22) */
.sto-locked > :not(.sto-lock) { opacity: .7; filter: blur(6px); }
.sto-lock { position: absolute; top: 64px; left: 50%; z-index: 1; display: flex; width: 56px; height: 56px; margin-left: -32px; padding: 16px; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); box-shadow: 0 12px 30px rgba(var(--brand-rgb), .45); }
.s3.on .sto-lock { animation: cx-pop .6s var(--spring) .2s both; }
/* kalender terkunci per gaya */
.cal.locked li { grid-template-columns: 32px minmax(0, 1fr) 20px; gap: 12px; padding: 12px 12px; }
.cal-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-t em { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.cal-t b { font-size: 12px; font-weight: 700; line-height: 1.35; }
.cal-blur { display: block; width: 88%; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(var(--txt-rgb), .35), rgba(var(--txt-rgb), .1)); filter: blur(2px); }
.cal .lk { display: flex; width: 20px; height: 20px; color: var(--mut); }
.cal li.now .lk { color: var(--brand2); }
.cal-note { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: 12px; line-height: 1.35; }
.cal-note svg { flex: none; width: 16px; height: 16px; color: var(--brand2); }

/* ============================================================
   AI-ANCHOR: CSS_V99112_ONB_LOCK — TASK-031 (owner #24–#29): visual jawaban & balasan coach (10% teks / 90% visual), bar segmen tes,
   kartu pengundang ±$X/minggu (estimasi), gembok + blur untuk semua "cara" (rencana orang, judul 7 hari, langkah 5 menit).
   Grid 4/8 px; blur hanya pada elemen statis kecil (hemat GPU); animasi transform/opacity sekali jalan.
   ============================================================ */
@keyframes rx-in { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
/* bubble jawaban user dengan ikon pilihan */
.cx-b.ico { display: inline-flex; align-items: center; gap: 8px; }
.cx-b.ico .ic { display: flex; flex: none; width: 20px; height: 20px; color: var(--on-brand); }
/* balasan coach bervisual */
.cx-b.rxb { display: flex; flex-direction: column; gap: 12px; }
.cx-b.rxb > p { margin: 0; }
.rx { display: flex; align-items: center; gap: 12px; }
.rx.wide { flex-direction: column; align-items: flex-start; gap: 4px; }
.rx-ic { display: flex; flex: none; width: 44px; height: 44px; padding: 12px; border-radius: 14px; background: rgba(var(--brand-rgb), .16); color: var(--brand2); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .35); animation: rx-in .55s var(--spring) both; }
.rx-ic.hot, .rx-ic.rx-av { background: var(--surface-btn-primary); color: var(--on-brand); box-shadow: 0 8px 20px rgba(var(--brand-rgb), .35); }
.rx-ic.ok { background: rgba(61, 220, 132, .14); color: #3DDC84; box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .45); }
.rx-ic.rx-av { align-items: center; justify-content: center; padding: 0; border-radius: 50%; font: 400 20px/1 var(--font-title); }
.rx-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rx-t small { color: var(--brand2); font: 700 10px/1.4 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.rx-t b { color: var(--txt); font-size: 14px; line-height: 1.4; }
.rx-t.strike b { color: var(--mut); text-decoration: line-through; text-decoration-color: #3DDC84; text-decoration-thickness: 2px; }
.rx-num { background: var(--surface-btn-primary); -webkit-background-clip: text; background-clip: text; color: transparent; font: 800 32px/1 var(--font-data); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rx.wide > small { color: var(--mut); font: 700 10px/1.4 var(--font-data); }
.rx-ring { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: conic-gradient(var(--brand) calc(var(--p, .25) * 360deg), var(--line) 0); animation: rx-in .55s var(--spring) both; }
.rx-ring::before { content: ""; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; border-radius: 50%; background: var(--card2); }
.rx-ring b { position: relative; color: var(--txt); font: 800 14px/1 var(--font-data); }
.rx-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rx-row .rx-ic { width: 36px; height: 36px; padding: 8px; border-radius: 10px; }
/* counter tes + bar segmen */
.cx-qh { display: flex; flex-direction: column; gap: 8px; }
.cx-qbar { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; }
.cx-qbar i { display: block; height: 4px; border-radius: 2px; background: var(--line2); }
.cx-qbar i.done { background: var(--brand); }
.cx-qbar i.on { background: var(--surface-btn-primary); animation: cx-glow 2.4s var(--motion-ease) 2; }
/* kartu pengundang: ±$X/minggu (estimasi) */
.iv-earn { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--ob-r2); background: rgba(61, 220, 132, .08); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .35); animation: cx-in .5s var(--spring) .1s both; }
/* TASK-048 (owner #60): judul angka kartu pembuka + dua angka berlabel (awal → level teratas) */
.iv-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--txt); font: 800 10px/1.4 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.iv-cap .ic { display: flex; flex: none; width: 24px; height: 24px; padding: 4px; border-radius: var(--ob-r3); background: rgba(61, 220, 132, .16); color: #3DDC84; }
/* TASK-065: label "estimasi" ada di atas kartu pengundang yang bernada biru → --mut kurang kontras (3,85:1); pakai abu terang (≈6,2:1) */
.iv-cap em { padding: 0 8px; border-radius: var(--radius-sm); background: rgba(var(--txt-rgb), .08); color: #C7D2CD; font: 700 10px/1.6 var(--font-data); font-style: normal; letter-spacing: .04em; }
.iv-row { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; align-items: center; gap: 8px; }
.iv-row > .iv-n:only-child { grid-column: 1 / -1; }
.iv-n { display: flex; flex-direction: column; gap: 4px; }
/* TASK-068: label kecil ini duduk di kartu pengundang bernada biru → --mut hanya 4,13:1; abu terang ≈ 6,2:1 (pola TASK-065) */
.iv-n small { color: #C7D2CD; font: 700 10px/1.4 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.iv-arrow { position: relative; height: 2px; margin-bottom: 24px; border-radius: 999px; background: linear-gradient(90deg, rgba(61, 220, 132, .25), #3DDC84); }
.iv-arrow i { position: absolute; top: 50%; right: -1px; width: 8px; height: 8px; border-top: 2px solid #3DDC84; border-right: 2px solid #3DDC84; transform: translateY(-50%) rotate(45deg); }
.iv-num { color: #3DDC84; font: 800 clamp(20px, 7vw, 32px)/1 var(--font-data); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rs-tools { display: flex; flex-direction: column; gap: 8px; }
.rs-tools small { color: var(--mut); font: 700 10px/1.3 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
/* gembok + blur (rencana orang, judul hari, langkah 5 menit) */
.lockwrap { position: relative; }
.lockbox { display: flex; flex-direction: column; gap: 12px; opacity: .55; filter: blur(6px); pointer-events: none; -webkit-user-select: none; user-select: none; }
/* overlay pusat via flex (bukan transform — animasi kartu memakai transform) */
.lock-ov { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; padding: 8px; }
.lock-card { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(100%, 280px); padding: 16px 16px; border-radius: 14px; background: rgba(var(--bg-rgb), .82); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45), var(--shadow-glow); text-align: center; animation: cx-in .5s var(--spring) .1s both; }
.lock-card .ic { display: flex; width: 36px; height: 36px; margin-bottom: 4px; padding: 8px; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); }
.lock-card b { font-size: 14px; line-height: 1.4; }
.lock-card small { color: var(--mut); font-size: 12px; line-height: 1.35; }
.cal.locked .cal-t b { filter: blur(5px); opacity: .8; -webkit-user-select: none; user-select: none; }
.ob-ch .lockline { display: inline-flex; align-items: center; gap: 8px; color: var(--mut); font: 600 12px/1.3 var(--font-ui); }
.ob-ch .lockline svg { flex: none; width: 14px; height: 14px; color: var(--brand2); }
/* riset #30: skor "Income readiness" (dial), loader bersegmen, hadiah tengah tes, member live di paywall */
.rs-score { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 10px; background: linear-gradient(150deg, rgba(var(--brand-rgb), .2), rgba(var(--panel-rgb), .95) 62%); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .35); }
.rs-dial { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: conic-gradient(var(--brand2), var(--brand) calc(var(--p, .8) * 360deg), var(--line) 0); animation: rx-in .6s var(--spring) both; }
.rs-dial::before { content: ""; position: absolute; top: 6px; right: 6px; bottom: 6px; left: 6px; border-radius: 50%; background: var(--card2); }
.rs-dial b { position: relative; color: var(--txt); font: 800 20px/1 var(--font-data); font-variant-numeric: tabular-nums; }
.rs-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 0; list-style: none; }
.rs-steps li { display: flex; align-items: center; gap: 8px; color: var(--txt); font-size: 12px; font-weight: 600; animation: cx-in .4s var(--spring) both; }
.rs-steps svg { flex: none; width: 18px; height: 18px; padding: 4px; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.cx-sys.cheer { display: inline-flex; align-items: center; gap: 8px; background: rgba(61, 220, 132, .12); color: #3DDC84; }
.cx-sys.cheer svg { width: 14px; height: 14px; }
.pw-live { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--txt); font: 700 12px/1.4 var(--font-data); }
.pw-live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; }
.pw-live i::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: #3DDC84; animation: cx-ping 2.4s var(--motion-ease) 3; }

/* ============================================================
   AI-ANCHOR: CSS_V99112_ONB_V5 — TASK-036 (owner #33–#38, #41): meter estimasi penghasilan yang menempel, pilih nama toko
   (aibio.store/<handle> + saran), galeri 14 tema toko, kartu "cara A·B·C" terkunci, tangga tantangan 7·30·100, paywall
   estimasi-dulu-baru-harga + tumpukan fasilitas.
   Grid 4/8 px · target sentuh ≥ 44 px · ukuran fluid clamp() · animasi transform/opacity saja (60 fps, sekali jalan).
   Warna tema toko datang dari css/store.css (.as-t-<id>) — satu sumber dengan /u/<handle>, bukan salinan.
   ============================================================ */
@keyframes mt-bump { 0% { transform: none; } 40% { transform: scale(1.04); } 100% { transform: none; } }

/* ---------- B4/K6: meter penghasilan (di bawah header, terlihat sampai paywall) ---------- */
.cx-meter { position: relative; z-index: 2; flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--brand-rgb), .12), rgba(var(--brand-rgb), 0)); }
.cx-meter.bump { animation: mt-bump .5s var(--spring) both; }
.mt-v { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.mt-v b { max-width: 100%; overflow: hidden; color: var(--txt); font: 800 clamp(14px, 4.2vw, 16px)/1 var(--font-data); text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mt-v small { color: var(--mut); font: 700 10px/1 var(--font-data); white-space: nowrap; }
.mt-v:nth-child(4) b { color: #3DDC84; }
/* TASK-048 (owner #60): baris judul meter — ikon toko + "PENDAPATAN TOKOMU" kiri, chip "estimasi · level" kanan */
.mt-k { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.mt-l { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--txt); font: 800 10px/1.4 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.mt-l svg { flex: none; width: 16px; height: 16px; color: var(--brand2); }
.mt-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-meter em { flex: none; padding: 0 8px; border-radius: var(--radius-sm); background: rgba(var(--brand-rgb), .16); color: var(--brand2); font: 700 10px/1.6 var(--font-data); font-style: normal; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }

/* ---------- B2/K1: nama toko + cek ketersediaan ---------- */
.hd { display: flex; flex-direction: column; gap: 8px; }
.hd-row { align-items: center; padding: 0 12px 0 16px; border: 1px solid var(--line2); border-radius: 24px; background: var(--card2); }
.hd-pre { flex: none; color: var(--mut); font: 600 14px/1 var(--font-data); }
.hd-in { min-width: 0; padding: 0 4px; border: 0; border-radius: 0; background: transparent; font-family: var(--font-data); font-weight: 700; }
.hd-in:focus { box-shadow: none; }
.hd-flag { display: flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--mut); }
.hd-flag svg { width: 18px; height: 18px; }
.hd[data-s="ok"] .hd-row { border-color: #3DDC84; }
.hd[data-s="ok"] .hd-flag { color: #3DDC84; }
.hd[data-s="bad"] .hd-row { border-color: #FF5B5B; }
.hd[data-s="bad"] .hd-flag { color: #FF5B5B; }
.hd-msg { min-height: 16px; color: var(--mut); font-size: 12px; line-height: 1.4; }
.hd[data-s="ok"] .hd-msg { color: #3DDC84; }
.hd[data-s="bad"] .hd-msg { color: #FF8A8A; }
.hd-sug { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hd-sug:empty { display: none; }
.cx-chip.hd-chip { justify-content: center; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-md); font: 700 14px/1.25 var(--font-data); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- B3/K3: galeri 14 tema toko (≥ 90% visual) ---------- */
.th-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: min(46vh, 360px); padding: 4px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; grid-auto-rows: max-content; }
.th-grid > button { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 44px; padding: 8px; border: 1px solid var(--line2); border-radius: var(--radius-md); background: var(--card); color: var(--txt); cursor: pointer; -webkit-tap-highlight-color: transparent; animation: cx-in .4s var(--spring) both; transition: transform var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
.th-grid > button:active { transform: scale(.97); }
.th-grid > button.on { border-color: var(--brand); box-shadow: var(--shadow-glow); transform: scale(1.03); }
.th-mini { display: flex; flex: none; flex-direction: column; align-items: center; gap: 4px; height: 88px; padding: 12px 12px 8px; overflow: hidden; border-radius: 6px; background-color: var(--as-bg); background-image: var(--as-bg2); background-repeat: no-repeat; box-shadow: inset 0 0 0 1px var(--as-line); }
.th-mini i { display: block; flex: none; width: 100%; border-radius: 2px; }
.th-mini .th-av { width: 18px; height: 18px; border-radius: 50%; background: var(--as-acc); }
.th-mini .th-l1 { width: 52%; height: 5px; background: var(--as-txt); opacity: .9; }
.th-mini .th-l2 { width: 72%; height: 4px; background: var(--as-mut); opacity: .8; }
.th-mini .th-btn { height: 11px; background: var(--as-card); box-shadow: inset 0 0 0 1px var(--as-line); }
.th-mini .th-btn.b2 { background: var(--as-acc); box-shadow: none; }
.th-mini .th-pc { height: 14px; margin-top: auto; border-radius: 4px; background: var(--as-card2); box-shadow: inset 0 0 0 1px var(--as-line); }
.th-n { display: block; flex: none; overflow: hidden; color: var(--txt); font: 700 12px/1.2 var(--font-ui); white-space: nowrap; text-align: center; text-overflow: ellipsis; }
.th-tk { position: absolute; top: 10px; right: 10px; display: flex; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--brand); color: var(--on-brand); opacity: 0; transform: scale(.5); transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-base) var(--spring); }
.th-grid > button.on .th-tk { opacity: 1; transform: none; }
/* 3 kolom di semua lebar (onboarding desktop = jendela app 440 px): 14 tema = 5 baris, kartu ±96–130 px */

/* pratinjau toko & HP perakit memakai warna tema pilihan */
.ob-mock.themed { border-color: var(--as-line); background: var(--as-card); }
.ob-mock.themed .ob-mock-bar { border-bottom-color: var(--as-line); background: var(--as-card2); }
.ob-mock.themed .ob-mock-bar i { background: var(--as-line); }
.ob-mock.themed .ob-mock-bar span { color: var(--as-acc); }
.ob-mock.themed .ob-mock-body { background-color: var(--as-bg); background-image: var(--as-bg2); background-repeat: no-repeat; }
.ob-mock.themed .ob-mock-av { background: var(--as-acc); color: var(--as-acc-txt); }
.ob-mock.themed .ob-mock-name, .ob-mock.themed .ob-mock-body h2 { color: var(--as-txt); }
.ob-mock.themed[data-style="friendly"] h2 { color: var(--as-acc); }
.ob-mock.themed .ob-mock-body p { color: var(--as-mut); }
.ob-mock.themed .ob-mock-cta { background: var(--as-acc); color: var(--as-acc-txt); }
.bd-ph.themed { background-color: var(--as-bg); background-image: var(--as-bg2); background-repeat: no-repeat; box-shadow: inset 0 0 0 1px var(--as-line), 0 14px 28px rgba(0, 0, 0, .5); }
.bd-ph.themed i { background: var(--as-txt); }
.bd-ph.themed .av, .bd-ph.themed .btn { background: var(--as-acc); }
.bd-ph.themed .w2 { background: var(--as-mut); }
.bd-ph.themed .lnk { background: var(--as-card); box-shadow: inset 0 0 0 1px var(--as-line); }

/* ---------- B4: baris estimasi di kartu build & pratinjau ---------- */
.est-line { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--ob-r3); background: rgba(61, 220, 132, .08); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .3); }
.est-line .ic { display: flex; flex: none; width: 24px; height: 24px; padding: 4px; border-radius: var(--ob-r3); background: rgba(61, 220, 132, .16); color: #3DDC84; }
.est-line > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.est-line b { color: var(--txt); font: 700 12px/1.4 var(--font-data); overflow-wrap: anywhere; }
.est-line > span > span { color: #3DDC84; font: 700 12px/1.4 var(--font-data); }
.est-line em { margin-left: auto; flex: none; padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(var(--txt-rgb), .08); color: var(--mut); font: 700 10px/1.2 var(--font-data); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- B4: 3 cara A · B · C (angka tampil, isi tidak dirender) ---------- */
.wy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wy-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 128px; padding: 12px 8px; border-radius: var(--radius-md); background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); animation: cx-in .45s var(--spring) both; }
.wy-tag { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); font: 800 12px/1 var(--font-data); }
.wy-blur { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; filter: blur(4px); opacity: .5; }
.wy-blur i { display: block; height: 6px; width: 82%; border-radius: 2px; background: rgba(var(--txt-rgb), .7); }
.wy-blur i.w2 { width: 56%; }
.wy-v { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: auto; }
.wy-v b { color: #3DDC84; font: 800 clamp(14px, 4.6vw, 20px)/1 var(--font-data); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wy-v small { color: var(--mut); font: 700 10px/1 var(--font-data); }
.wy-lk { position: absolute; top: 8px; right: 8px; display: flex; width: 18px; height: 18px; padding: 4px; border-radius: 50%; background: rgba(var(--bg-rgb), .8); color: var(--brand2); }

/* ---------- B7/K4: tangga tantangan 7 · 30 · 100 hari ---------- */
.ob-tracks { display: flex; flex-direction: column; gap: 8px; }
.ob-tr { display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; align-items: center; gap: 12px; min-height: 64px; padding: 12px 12px; border-radius: var(--radius-md); background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); animation: cx-in .45s var(--spring) both; }
.ob-tr.now { box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .5); }
.tr-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 52px; height: 52px; border-radius: 50%; background: rgba(var(--brand-rgb), .14); box-shadow: inset 0 0 0 1.5px rgba(var(--brand-rgb), .45); }
.ob-tr.now .tr-badge { background: var(--surface-btn-primary); box-shadow: none; }
.tr-badge b { color: var(--brand2); font: 800 16px/1 var(--font-data); }
.tr-badge small { color: var(--mut); font: 700 10px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.ob-tr.now .tr-badge b, .ob-tr.now .tr-badge small { color: var(--on-brand); }
.tr-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tr-tx > b { color: var(--txt); font-size: 12px; font-weight: 600; line-height: 1.35; }
.tr-est { display: inline-flex; align-items: baseline; gap: 4px; }
.tr-est strong { color: #3DDC84; font: 800 14px/1 var(--font-data); font-variant-numeric: tabular-nums; }
.tr-est small { color: var(--mut); font: 700 10px/1.4 var(--font-data); }
.tr-lock { display: flex; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: rgba(var(--txt-rgb), .06); color: var(--mut); }

/* ---------- B8/B11: paywall — estimasi dulu (besar), harga terakhir (kecil) ---------- */
.pw-est { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--ob-r2); background: linear-gradient(150deg, rgba(61, 220, 132, .16), rgba(var(--panel-rgb), .95) 62%); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .35); }
.pw-est-k { color: var(--mut); font: 700 10px/1.4 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.pw-est-n { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pw-est-n b { color: #3DDC84; font: 800 32px/1 var(--font-data); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pw-est-n strong { color: var(--txt); font: 800 20px/1 var(--font-data); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pw-est-n small { color: var(--mut); font: 700 12px/1 var(--font-data); }
/* TASK-068: label "estimasi" duduk di kartu bernada hijau → --mut hanya 3,9:1; abu terang ≈ 6,2:1 (sama dengan perbaikan TASK-065) */
.pw-est em { align-self: flex-start; padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(var(--txt-rgb), .1); color: #C7D2CD; font: 700 10px/1.2 var(--font-data); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.pw-all { padding: 12px 16px; border-left: 4px solid var(--brand); border-radius: 0 var(--ob-r3) var(--ob-r3) 0; background: rgba(var(--brand-rgb), .08); font-size: 14px; font-weight: 600; line-height: 1.45; }
/* harga = angka kecil di bawah nilai (B8: nilai dulu, harga terakhir) */

/* ---------- K8: tempat modul akun / pasang di HP (TASK-037) ---------- */
.cx-gate { margin: 4px 0 4px 32px; }
.cx-gate:empty { display: none; }

/* AI-ANCHOR: CSS_ONB_VALUE_STACK — TASK-039 (owner #46): nilai per fasilitas + total dicoret → "kamu cukup bayar" (anchor harga) */
.pw-val { display: inline-flex; align-items: center; gap: 4px; color: var(--mut); font: 700 12px/1 var(--font-data); font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-vbox { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--ob-r2); background: linear-gradient(150deg, rgba(var(--brand-rgb), .18), rgba(var(--panel-rgb), .95) 65%); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45); }
.pw-vtot, .pw-vpay { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.pw-vtot span { min-width: 0; color: var(--mut); font-size: 12px; font-weight: 600; line-height: 1.4; }
.pw-vtot s { color: #FF8A8A; font: 800 24px/1 var(--font-data); text-decoration-thickness: 2px; font-variant-numeric: tabular-nums; }
.pw-vpay span { color: var(--txt); font-size: 14px; font-weight: 700; line-height: 1.4; }
/* TASK-063 (owner #86 screenshot): angka besar tidak boleh menimpa label — baris bayar = grid label | angka | /bulan, rata baseline */
.pw-vpay { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 4px; }
.pw-vpay b { color: #3DDC84; font: 800 32px/1.15 var(--font-data); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pw-vpay small { color: var(--mut); font: 700 12px/1.25 var(--font-data); }
.pw-vsave { color: var(--brand2); font: 700 12px/1.5 var(--font-data); }
.pw-vnote { color: var(--mut); font-size: 12px; line-height: 1.5; }

/* AI-ANCHOR: CSS_ONB_AUTO — TASK-040 (owner #47): kartu "cara kerja 10 detik" — 4 langkah bersambung, badge setup 1×, gembok, linimasa estimasi */
.au-flow { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.au-flow::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 19px; width: 2px; background: linear-gradient(180deg, var(--brand), #3DDC84); opacity: .45; }
.au-flow li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; animation: cx-in .45s var(--spring) both; }
.au-ic { display: flex; width: 40px; height: 40px; padding: 12px; border-radius: 10px; background: var(--card2); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45); color: var(--brand2); }
.au-flow li:nth-child(3) .au-ic, .au-flow li:nth-child(4) .au-ic { box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .5); color: #3DDC84; }
.au-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.au-tx b { font-size: 14px; line-height: 1.4; }
.au-tx small { color: var(--mut); font-size: 12px; line-height: 1.4; }
.au-once { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(61, 220, 132, .12); color: #3DDC84; font: 700 12px/1.4 var(--font-data); }
.au-once svg { flex: none; width: 16px; height: 16px; }
.au-job { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 12px; border-radius: var(--radius-md); background: rgba(var(--brand-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .35); }
.au-lk { display: flex; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); }
.au-tl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.au-c { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 12px 4px; border-radius: var(--ob-r3); background: var(--card2); }
.au-c b { max-width: 100%; overflow: hidden; color: var(--txt); font: 800 clamp(12px, 3.9vw, 16px)/1 var(--font-data); letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.au-c:nth-child(4) b { color: #3DDC84; }
.au-c small { color: var(--mut); font: 700 10px/1.4 var(--font-data); text-align: center; }
.au-after { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; color: var(--txt); font-size: 14px; font-weight: 700; }
.au-after svg { width: 16px; height: 16px; color: #3DDC84; }
.au-after em { padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .08); color: var(--mut); font: 700 10px/1.4 var(--font-data); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .au-flow li { animation: none; } }

/* AI-ANCHOR: CSS_ONB_BUILDCHIP — TASK-041 (owner #48): chip "bagian toko dibangun" di utas — setiap jawaban menambah satu bagian + estimasi */
.cx-build { display: grid; grid-template-columns: 20px 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; align-self: stretch; margin: 4px 0 4px 32px; padding: 8px 12px; border-radius: var(--radius-md); background: rgba(61, 220, 132, .07); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .28); }
.cx-build.live { animation: cx-in .45s var(--spring) both; }
.bc-ic { display: flex; width: 28px; height: 28px; padding: 8px; border-radius: 6px; background: rgba(61, 220, 132, .16); color: #3DDC84; }
.bc-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bc-tx b { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.bc-tx small { color: var(--mut); font: 700 10px/1.2 var(--font-data); }
.bc-bar { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.bc-bar s { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--brand), #3DDC84); text-decoration: none; }
.cx-build.live .bc-bar s { animation: bc-grow .8s var(--motion-ease) both; transform-origin: left center; }
@keyframes bc-grow { from { transform: scaleX(.6); } to { transform: none; } }
.bc-v { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bc-v b { color: #3DDC84; font: 800 12px/1 var(--font-data); font-variant-numeric: tabular-nums; }
.bc-v small { color: var(--mut); font: 700 10px/1 var(--font-data); white-space: nowrap; }
.bc-ok { display: flex; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: rgba(61, 220, 132, .2); color: #3DDC84; }
@media (max-width: 360px) { .cx-build { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .cx-build.live, .cx-build.live .bc-bar s { animation: none; } }

/* AI-ANCHOR: CSS_ONB_LEVELS — TASK-042 (owner #49): toggle paket + kartu per level (harga · yang didapat · estimasi) */
.pw-bill { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--ob-r2); background: var(--card2); }
.pw-bill button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 48px; padding: 4px 8px; border: 0; border-radius: var(--ob-r3); background: transparent; color: var(--mut); font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; }
.pw-bill button.on { background: var(--card); box-shadow: inset 0 0 0 1px var(--brand); color: var(--txt); }
.pw-bill em { padding: 0 4px; border-radius: var(--radius-sm); background: rgba(61, 220, 132, .16); color: #3DDC84; font: 800 10px/1.6 var(--font-data); font-style: normal; }
.pw-lv { display: flex; flex-direction: column; gap: 8px; }
.pw-lvc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 0; border-radius: var(--ob-r2); background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); color: var(--txt); text-align: left; cursor: pointer; transition: box-shadow var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.pw-lvc:active { transform: scale(.985); }
.pw-lvc.on { background: rgba(var(--brand-rgb), .1); box-shadow: inset 0 0 0 2px var(--brand), var(--shadow-glow); }
.lv-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.lv-h b { font-size: 16px; line-height: 1.25; }
.lv-share { padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(var(--brand-rgb), .16); color: var(--brand2); font: 800 12px/1 var(--font-data); }
.lv-best { padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(61, 220, 132, .16); color: #3DDC84; font: 800 10px/1.4 var(--font-data); letter-spacing: .02em; }
.lv-p { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.lv-p strong { font: 800 20px/1 var(--font-data); font-variant-numeric: tabular-nums; }
.lv-p small { color: var(--mut); font: 700 12px/1 var(--font-data); }
.lv-eq { grid-column: 1 / -1; justify-self: start; color: #3DDC84; font: 700 12px/1.4 var(--font-data); }
/* TASK-043 (owner #50): bar potensi per level (linear terhadap level teratas) + kelipatan vs level terbawah + penjelas batas level */
.lv-pot { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lv-bar { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--card2); }
.lv-bar s { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #3DDC84); transform-origin: left center; transition: transform .6s var(--motion-ease); }
.pw-cap { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: var(--ob-r2); background: rgba(61, 220, 132, .08); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .28); color: var(--txt); font-size: 14px; line-height: 1.5; }
.pw-cap .ic { display: flex; flex: none; width: 32px; height: 32px; padding: 8px; border-radius: var(--ob-r3); background: rgba(61, 220, 132, .16); color: #3DDC84; }
@media (prefers-reduced-motion: reduce) { .lv-bar s { transition: none; } }
.pw-gap { margin: 0; color: #FFB86B; font-size: 12px; font-weight: 600; line-height: 1.5; }
/* AI-ANCHOR: CSS_ONB_PAYWALL_STEPS — TASK-044 (owner #51): paywall 2 langkah (tab langkah · halaman · tombol lanjut/kembali · biaya per hari) */
.pw-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--ob-r2); background: var(--card2); }
.pw-stp { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 4px 8px; border: 0; border-radius: var(--ob-r3); background: transparent; color: var(--mut); font-size: 14px; font-weight: 700; cursor: pointer; }
.pw-stp b { display: flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line2); color: var(--txt); font: 800 12px/1 var(--font-data); }
.pw-stp span { min-width: 0; line-height: 1.4; text-align: left; overflow-wrap: anywhere; }
.pw-stp.on { background: var(--card); box-shadow: inset 0 0 0 1px var(--brand); color: var(--txt); }
.pw-stp.on b { background: var(--surface-btn-primary); color: var(--on-brand); }
.pw-pg { display: flex; flex-direction: column; gap: 16px; min-width: 0; animation: pw-in .28s var(--motion-ease) both; }
@keyframes pw-in { from { opacity: 0; transform: translateY(8px); } }
.pw-est-m { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.pw-cap > span { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 4px; }
.pw-cap small { color: var(--mut); font-size: 12px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .pw-pg { animation: none; } }
/* AI-ANCHOR: CSS_ONB_VALUE_TILES — TASK-047 (owner #55/#58/#59): tile fasilitas 2 kolom · flash offer asli · biaya menunda · benefit kartu
   terpilih · tabel perbandingan (kolom level lengket, gulir di dalam wadah). Grid 4/8, skala tipe 10–40, radius --ob-r*. Motion: transform/opacity. */
.pw-grp { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; }
/* TASK-068 B27 (owner #127): tiap harga dicoret berurutan + centang "termasuk", lalu total bagian di BAWAH
   (harga coret + baris "semua termasuk di <level>"). Coretan = pseudo-element yang melebar (transform saja). */
.pw-grp-sum { color: var(--mut); font: 800 12px/1.4 var(--font-data); font-style: normal; white-space: nowrap; text-decoration: none; }
.pw-val s { position: relative; text-decoration: none; }
.pw-val s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; }
.pw-tiles.struck .pw-val s::after { animation: pw-strike .34s var(--motion-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.pw-inc { display: flex; width: 14px; height: 14px; color: #3DDC84; opacity: 0; transform: scale(.6); }
.pw-inc svg { width: 14px; height: 14px; }
.pw-tiles.struck .pw-inc { animation: pw-inc .3s var(--spring) both; animation-delay: calc(var(--i, 0) * 90ms + 220ms); }
@keyframes pw-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pw-inc { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
/* B29: chip harga yang terbang ke kotak total (efek "menumpuk") — fixed, tanpa pointer, transform+opacity saja */
.pw-fly { position: fixed; z-index: 30; color: #3DDC84; font: 800 12px/1 var(--font-data); pointer-events: none; opacity: 0; will-change: transform, opacity; animation: pw-fly .85s var(--motion-ease) both; }
@keyframes pw-fly { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.9); } 15% { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.1); } 100% { opacity: 0; transform: translate3d(var(--dx, 0), var(--dy, 0), 0) scale(.7); } }
@media (prefers-reduced-motion: reduce) { .pw-fly { display: none; } }
.pw-grp-tot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: var(--ob-r2); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); }
.pw-gt-k { color: var(--mut); font: 700 10px/1.2 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.pw-grp-tot .pw-grp-sum { position: relative; margin-right: auto; color: var(--txt); font-size: 16px; }
.pw-grp-tot .pw-grp-sum::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; border-radius: 2px; background: #FF6B6B; transform: scaleX(0); transform-origin: left center; }
/* total bagian ikut DICORET (harga kalau beli satuan) — coretannya ditarik setelah harga-harga di atasnya */
.pw-grp-tot.struck .pw-grp-sum::after { animation: pw-strike .4s var(--motion-ease) both; animation-delay: .9s; }
.pw-gt-in { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(61, 220, 132, .14); color: #3DDC84; font: 800 12px/1.3 var(--font-data); }
.pw-gt-in .ic { display: flex; width: 14px; height: 14px; }
.pw-gt-in svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .pw-val s::after, .pw-grp-tot .pw-grp-sum::after { transform: scaleX(1); } .pw-inc { opacity: 1; transform: none; } }
.pw-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pw-tile { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; gap: 8px; min-width: 0; padding: 12px; border-radius: var(--ob-r2); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); animation: cx-in .5s var(--spring) both; }
.pw-tile.key { background: rgba(var(--brand-rgb), .12); box-shadow: inset 0 0 0 1px var(--brand); }
.pw-tile .ic { display: flex; width: 32px; height: 32px; padding: 8px; border-radius: var(--ob-r3); background: rgba(var(--brand-rgb), .15); color: var(--brand2); }
.pw-tile .ic.pair { gap: 0; padding: 4px; }
.pw-tile .ic.pair svg { width: 12px; height: 12px; }
.pw-tile .pw-val { justify-self: end; align-self: center; }
.pw-tl { grid-column: 1 / -1; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.pw-vpct { padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(61, 220, 132, .16); color: #3DDC84; font: 800 12px/1.2 var(--font-data); font-style: normal; }
.pw-vday { margin: 0; color: var(--txt); font: 700 12px/1.5 var(--font-data); }
.pw-flash { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; overflow: hidden; border: 0; border-radius: var(--ob-r2); background: linear-gradient(120deg, rgba(255, 91, 91, .2), rgba(255, 184, 107, .14)); box-shadow: inset 0 0 0 1px rgba(255, 138, 138, .5); color: var(--txt); text-align: left; cursor: pointer; animation: cx-in .4s var(--spring) both; }
.pw-flash::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent); transform: translateX(0); animation: fl-sheen 2.8s var(--motion-ease) 3; pointer-events: none; }
@keyframes fl-sheen { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(350%); } }
.pw-flash .ic { display: flex; width: 32px; height: 32px; padding: 8px; border-radius: var(--ob-r3); background: rgba(255, 138, 138, .22); color: #FF8A8A; }
.fl-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fl-t small { color: #FF8A8A; font: 800 10px/1.4 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.fl-t b { font-size: 14px; line-height: 1.4; }
.fl-p { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fl-p s { color: var(--mut); font: 700 12px/1 var(--font-data); }
.fl-p b { color: #3DDC84; font: 800 16px/1 var(--font-data); font-variant-numeric: tabular-nums; }
.fl-tm { padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .3); color: #FFB86B; font: 800 12px/1 var(--font-data); font-variant-numeric: tabular-nums; }
.pw-flash.end { opacity: .5; cursor: default; }
.pw-wait { margin: 0; color: #FFB86B; font: 700 12px/1.4 var(--font-data); text-align: center; }
.lv-ben { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); animation: pw-in .3s var(--motion-ease) both; }
.lv-bi { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 8px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.lv-bi svg { width: 16px; height: 16px; color: #3DDC84; }
.pw-cmp-w { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--ob-r2); box-shadow: inset 0 0 0 1px var(--line); overscroll-behavior-x: contain; }
.pw-cmp { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font: 700 12px/1.4 var(--font-data); font-variant-numeric: tabular-nums; }
.pw-cmp caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pw-cmp th, .pw-cmp td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
.pw-cmp thead th { color: var(--mut); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.pw-cmp tbody tr:last-child th, .pw-cmp tbody tr:last-child td { border-bottom: 0; }
.pw-cmp th:first-child { position: sticky; left: 0; z-index: 1; padding-left: 12px; background: var(--surface-card-bg); box-shadow: 1px 0 0 var(--line); }
.pw-cmp tbody th b { display: block; font: 800 14px/1.25 var(--font-ui); }
.pw-cmp tbody th small { display: block; color: #3DDC84; font-size: 10px; }
.pw-cmp tr.on th, .pw-cmp tr.on td { background: rgba(var(--brand-rgb), .1); }
.pw-cmp tr.on th:first-child { background: rgba(var(--brand-rgb), .16); }
.pw-cmp .es { color: #3DDC84; }
.pw-cmp-b { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-width: 72px; min-height: 44px; padding: 4px 8px; border: 0; border-radius: var(--ob-r3); background: transparent; color: var(--txt); text-align: left; cursor: pointer; }
.pw-cmp-b b { font: 800 14px/1.25 var(--font-data); }
.pw-cmp-b small { color: var(--mut); font: 700 10px/1.4 var(--font-data); }
.pw-cmp-b.on { background: var(--surface-btn-primary); color: var(--on-brand); }
.pw-cmp-b.on small { color: var(--on-brand); opacity: .8; }
.pw-cmp-hint { margin: 0; color: var(--mut); font-size: 12px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .pw-flash::after { animation: none; } .pw-tile, .pw-flash, .lv-ben { animation: none; } }
/* AI-ANCHOR: CSS_ONB_WHERE — TASK-049 (owner #61): pilih lokasi (tebakan · lokasiku · kota lain) + kartu lokal (pin berdenyut, 3 angka asli,
   pionir / bergabung, "sistem baru"). Grid 4/8, skala tipe, motion transform/opacity (berhenti setelah 3 siklus, reduced-motion mati). */
.wh { display: flex; flex-direction: column; gap: 8px; }
.wh-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--ob-r2); background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); transition: box-shadow var(--motion-base) var(--motion-ease); }
.wh-card.hit { box-shadow: inset 0 0 0 2px #3DDC84; }
.wh-pin { display: flex; width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: rgba(61, 220, 132, .16); color: #3DDC84; }
.wh-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wh-t small { color: var(--mut); font: 700 10px/1.4 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.wh-t b { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.wh-msg { margin: 0; color: var(--mut); font-size: 12px; line-height: 1.5; }
.wh-cc { min-height: 48px; }
.cx-card-local { gap: 16px; margin-left: 0; }
.lc-hd { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 16px; }
.lc-pin { position: relative; display: flex; width: 56px; height: 56px; }
.lc-pin .ic { position: relative; z-index: 1; display: flex; width: 56px; height: 56px; padding: 16px; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); box-shadow: var(--shadow-glow); }
.lc-pin i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: rgba(var(--brand-rgb), .35); animation: cx-ping 2.4s var(--motion-ease) 3; }
.lc-pin i + i { animation-delay: 1.2s; }
.lc-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lc-t small { color: var(--brand2); font: 700 10px/1.4 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.lc-t b { font: 800 24px/1.1 var(--font-ui); overflow-wrap: anywhere; }
.lc-t span { color: var(--mut); font-size: 14px; line-height: 1.4; }
.lc-st { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.lc-c { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px; border-radius: var(--ob-r2); background: var(--card2); }
.lc-c b { font: 800 24px/1 var(--font-data); font-variant-numeric: tabular-nums; }
.lc-c small { color: var(--mut); font: 700 10px/1.4 var(--font-data); overflow-wrap: break-word; }
.lc-c.main { background: rgba(var(--brand-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45); }
.lc-c.main b { color: var(--brand2); }
.lc-note { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 12px; padding: 16px; border-radius: var(--ob-r2); animation: cx-in .5s var(--spring) both; }
.lc-note .ic { display: flex; width: 32px; height: 32px; padding: 8px; border-radius: var(--ob-r3); }
.lc-note > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 4px; }
.lc-note b { font-size: 16px; line-height: 1.4; }
.lc-note small { color: var(--mut); font-size: 12px; line-height: 1.5; }
.lc-note.pio { background: linear-gradient(120deg, rgba(255, 184, 107, .18), rgba(61, 220, 132, .1)); box-shadow: inset 0 0 0 1px rgba(255, 184, 107, .5); }
.lc-note.pio .ic { background: rgba(255, 184, 107, .22); color: #FFB86B; }
.lc-note.join { background: rgba(61, 220, 132, .08); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .35); }
.lc-note.join .ic { background: rgba(61, 220, 132, .16); color: #3DDC84; }
.lc-new { margin: 0; color: var(--txt); font: 700 12px/1.5 var(--font-data); }
@media (prefers-reduced-motion: reduce) { .lc-pin i, .lc-note { animation: none; } }
/* AI-ANCHOR: CSS_ONB_SAVE_PLEDGE — TASK-050 (owner #62): kartu simpan tempatmu (WhatsApp · salin · bookmark) + janji tahan-untuk-tanda-tangan
   (cincin SVG terisi 1,2 dtk, cap muncul dengan skala halus). Grid 4/8, target sentuh ≥ 44, motion transform/opacity + stroke, reduced-motion. */
.sv-hd { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; }
.sv-hd .ic { display: flex; width: 40px; height: 40px; padding: 8px; border-radius: var(--ob-r3); background: rgba(var(--brand-rgb), .16); color: var(--brand2); }
.sv-hd span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sv-hd b { font-size: 16px; line-height: 1.4; }
.sv-hd small { color: var(--mut); font-size: 12px; line-height: 1.5; }
.sv-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sv-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 80px; padding: 12px 8px; border: 0; border-radius: var(--ob-r2); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); color: var(--txt); font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease); }
.sv-b:active { transform: scale(.97); }
.sv-b .ic { display: flex; width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: rgba(var(--brand-rgb), .16); color: var(--brand2); }
.sv-b.wa { background: rgba(37, 211, 102, .12); box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .45); }
.sv-b.wa .ic { padding: 0; background: transparent; }
.sv-b span { overflow-wrap: break-word; }
.sv-hint { margin: 0; padding: 8px 12px; border-radius: var(--ob-r3); background: rgba(61, 220, 132, .1); color: #3DDC84; font: 700 12px/1.5 var(--font-data); overflow-wrap: anywhere; animation: cx-in .3s var(--motion-ease) both; }
.cx-card-save.saved .sv-hd .ic { background: rgba(61, 220, 132, .16); color: #3DDC84; }
.pl-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pl-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 14px; font-weight: 600; line-height: 1.4; animation: cx-in .4s var(--spring) both; }
.pl-list .ic { display: flex; width: 32px; height: 32px; padding: 8px; border-radius: var(--ob-r3); background: rgba(var(--brand-rgb), .15); color: var(--brand2); }
.pl-area { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; }
.pl-hold { position: relative; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--on-brand); cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pl-hold > svg { position: absolute; top: 0; left: 0; width: 96px; height: 96px; transform: rotate(-90deg); }
.pl-rbg { fill: none; stroke: var(--line2); stroke-width: 4; }
.pl-rfg { fill: none; stroke: #3DDC84; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; transition: stroke-dashoffset .2s var(--motion-ease); }
.pl-hold.hold .pl-rfg { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s linear; }
.pl-hold .ic { display: flex; width: 72px; height: 72px; padding: 24px; border-radius: 50%; background: var(--surface-btn-primary); box-shadow: var(--shadow-glow); transition: transform var(--motion-base) var(--motion-ease); }
.pl-hold.hold .ic { transform: scale(.92); }
.pl-lab { color: var(--txt); font: 700 12px/1.4 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.pl-skip { min-height: 44px; }
.pl-skip-t { margin: 0; color: var(--mut); font-size: 12px; line-height: 1.5; }
.pl-stamp { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-radius: var(--ob-r2); background: rgba(61, 220, 132, .1); box-shadow: inset 0 0 0 2px #3DDC84; }
.pl-stamp.in { animation: pl-in .5s var(--spring) both; }
@keyframes pl-in { from { opacity: 0; transform: scale(.9) rotate(-2deg); } }
.pl-stamp .ic { display: flex; width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: #3DDC84; color: #04150b; }
.pl-stamp span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-stamp b { font-size: 16px; line-height: 1.4; }
.pl-stamp small { color: var(--mut); font: 700 12px/1.4 var(--font-data); }
@media (prefers-reduced-motion: reduce) { .pl-rfg, .pl-hold .ic { transition: none; } .pl-stamp.in, .pl-list li, .sv-hint { animation: none; } }
/* AI-ANCHOR: CSS_ONB_ROI — TASK-045 (owner #53): kartu level = biaya/hari vs bisa menghasilkan/hari + bar bulanan + kelipatan; CTA menempel */
.lv-roi { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lv-c { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 12px; border-radius: var(--ob-r3); background: var(--card2); }
.lv-c small { color: var(--mut); font: 700 10px/1.4 var(--font-data); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.lv-v { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; }
.lv-c b { font: 800 16px/1.25 var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-c i { color: var(--mut); font: 700 12px/1.25 var(--font-data); font-style: normal; white-space: nowrap; }
.lv-c.earn { background: rgba(61, 220, 132, .1); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .3); }
.lv-c.earn b, .lv-c.earn i { color: #3DDC84; }
.lv-pot-t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.lv-pot-t small { color: var(--txt); font: 700 12px/1.4 var(--font-data); }
.lv-x { padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(var(--brand-rgb), .16); color: var(--brand2); font: 800 10px/1.2 var(--font-data); font-style: normal; }
button.cx-link { border: 0; background: transparent; cursor: pointer; }
.cx-comp .pw-signin { min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.cx-comp .pw-cta, .cx-comp .pw-next { box-shadow: var(--shadow-glow); }
/* TASK-059: bilah bawah langkah ① = 2 tombol (coba plan lain · mulai dengan level terbaik), tinggi sama 56, primer 3fr : 2fr */
.pw-duo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; }
.pw-duo .ob-btn { min-width: 0; padding: 8px; }
.pw-duo .pw-other span { font-size: 14px; }
@media (max-width: 359px) { .pw-duo .ob-btn small { white-space: normal; overflow: visible; font-size: 10px; } }
.pw-duo .ob-btn span, .pw-duo .ob-btn small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ob-btn.ghost { background: var(--card2); box-shadow: inset 0 0 0 1px var(--brand); color: var(--txt); animation: none; }
.cx-comp .pw-other { box-shadow: inset 0 0 0 1px var(--brand); }
.of-ov { --ob-r1: 14px; --ob-r2: 10px; --ob-r3: 6px; }
/* AI-ANCHOR: CSS_ONB_OFFER_SHEET — lembar penawaran 1× (overlay bawah, zona jempol) */
.of-ov { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .62); animation: of-fade .2s ease both; }
@keyframes of-fade { from { opacity: 0; } }
.of-sh { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: var(--ob-r1); background: var(--panel); box-shadow: 0 -10px 40px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(var(--brand-rgb), .4); animation: of-up .35s var(--spring) both; }
@keyframes of-up { from { transform: translateY(40px); opacity: 0; } }
.of-wait { padding: 24px 0; color: var(--mut); text-align: center; }
.of-x { position: absolute; top: 8px; right: 8px; display: flex; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 50%; background: transparent; color: var(--mut); cursor: pointer; }
.of-badge { align-self: flex-start; padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(255, 91, 91, .16); color: #FF8A8A; font: 800 12px/1.2 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.of-t { margin: 0; padding-right: 48px; font-size: 20px; line-height: 1.25; }
.of-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.of-p s { color: var(--mut); font: 700 20px/1 var(--font-data); }
.of-p b { color: #3DDC84; font: 800 40px/1 var(--font-data); letter-spacing: -.03em; }
.of-p em { padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(61, 220, 132, .16); color: #3DDC84; font: 800 12px/1.2 var(--font-data); font-style: normal; }
.of-tm { display: flex; align-items: center; gap: 8px; color: #FFB86B; font: 800 14px/1.4 var(--font-data); font-variant-numeric: tabular-nums; }
.of-tm svg { width: 16px; height: 16px; }
.of-s { color: var(--mut); font-size: 14px; line-height: 1.5; }
.of-yes { width: 100%; }
.of-yes:disabled { opacity: .45; }
.of-no { align-self: center; min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--mut); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .of-ov, .of-sh { animation: none; } }

/* TASK-042: badge meter 2 baris (ESTIMATE / <LEVEL>) supaya 4 sel angka tidak terpotong di 320–375 px */

/* TASK-042: toggle paket — tag diskon di bawah label supaya muat di 320 px (ID: "Seumur hidup") */
.pw-bill button span { max-width: 100%; line-height: 1.4; overflow-wrap: anywhere; }

/* TASK-046 (owner #54) — 320–360 px: header muat utuh tanpa mengecilkan target sentuh — pemilih bahasa jadi SATU tombol 44 × 44 berisi
   bahasa lain (EN aktif → "ID"), jarak 8 · meter: jarak 4, badge tanpa spasi huruf, angka turun ke 12 px (clamp) supaya tidak terpotong.
   Diletakkan di akhir file supaya menang urutan atas aturan dasar. */
@media (max-width: 360px) {
	.cx-head { gap: 8px; }
	.cx-lang button.on { display: none; }
	.cx-lang button + button { border-left: 0; }
	.cx-meter { gap: 4px; }
	.cx-meter em { padding-right: 4px; padding-left: 4px; letter-spacing: 0; }
	.mt-v b { font-size: clamp(12px, 3.8vw, 16px); letter-spacing: -.04em; }
	/* kartu hasil 2 kolom: kata panjang (ID "Penghasilan") muat tanpa terpotong */
	.oc-grid li { padding: 8px; }
	.oc-grid b { font-size: 12px; }
	/* linimasa kartu cara kerja: 4 angka muat tanpa terpotong */
	.au-tl { gap: 4px; }
	/* HP sampul di 320 px: kolom ikon & jarak dirapatkan supaya kata ("Recurring") tidak terbelah */
	.cv-note { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px; }
	.cv-note .ic { width: 20px; height: 20px; padding: 4px; }
	.au-c b { font-size: clamp(12px, 3.6vw, 16px); letter-spacing: -.04em; }
}

/* AI-ANCHOR: CSS_ONB_GATE — TASK-056 (owner #72): gerbang wajib bagikan → simpan → notifikasi. Stepper 3 titik (aktif berdenyut, selesai = centang
   hijau), grid channel 4 kolom (≥ 44 px), pratinjau postingan, panel konfirmasi 2× (kedua = aksen merah). Gerak transform/opacity saja. */
/* TASK-068 (owner #115): jumlah kolom mengikuti jumlah langkah (sekarang 4: janji · bagikan · simpan · notifikasi) */
.gt-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.gt-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--mut); font: 700 10px/1.2 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.gt-steps .ic { position: relative; z-index: 1; display: flex; width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); color: var(--mut); transition: background-color .3s var(--motion-ease), color .3s var(--motion-ease); }
.gt-steps .gt-line { position: absolute; top: 16px; left: calc(50% + 20px); width: calc(100% - 40px); height: 2px; border-radius: 2px; background: var(--line2); }
.gt-steps li.on { color: var(--brand2); }
.gt-steps li.on .ic { background: rgba(var(--brand-rgb), .2); box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand2); animation: gt-ping 1.8s var(--motion-ease) infinite; }
.gt-steps li.done { color: #3DDC84; }
.gt-steps li.done .ic { background: rgba(61, 220, 132, .16); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .5); color: #3DDC84; animation: cx-pop .5s var(--spring) both; }
.gt-steps li.done .gt-line { background: rgba(61, 220, 132, .5); }
@keyframes gt-ping { 0%, 100% { box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 0 rgba(var(--brand-rgb), .45); } 50% { box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 8px rgba(var(--brand-rgb), 0); } }
.gt-body { display: flex; flex-direction: column; gap: 12px; }
.gt-ch { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.gt-chb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 72px; padding: 8px 4px; border: 0; border-radius: var(--ob-r2); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); color: var(--txt); font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer; animation: cx-pop .5s var(--spring) both; transition: transform var(--motion-fast) var(--motion-ease); }
.gt-chb:active { transform: scale(.95); }
.gt-chb .ic { display: flex; width: 32px; height: 32px; }
.gt-chb span { max-width: 100%; white-space: nowrap; text-align: center; }
.gt-chb.whatsapp { background: rgba(37, 211, 102, .12); box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .45); }
.gt-chb:nth-child(2) { animation-delay: .04s; } .gt-chb:nth-child(3) { animation-delay: .08s; } .gt-chb:nth-child(4) { animation-delay: .12s; }
.gt-chb:nth-child(5) { animation-delay: .16s; } .gt-chb:nth-child(6) { animation-delay: .2s; } .gt-chb:nth-child(7) { animation-delay: .24s; }
/* TASK-077 (owner #143): pratinjau post tampil sebagai GELEMBUNG pesan keluar (ekor kanan bawah), bukan paragraf.
   Link toko dipisah jadi chip supaya terbaca sebagai tautan yang akan diketuk teman. */
.gt-msg { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gt-msg small { align-self: flex-start; color: var(--mut); font: 700 10px/1.2 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.gt-bub { position: relative; display: flex; flex-direction: column; gap: 8px; max-width: min(92%, 420px); padding: 12px; border-radius: 16px 16px 4px 16px; background: rgba(37, 211, 102, .12); box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .35); animation: cx-in .35s var(--motion-ease) both; }
.gt-bub p { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.gt-bub-m { color: #3DDC84; font-weight: 800; font-variant-numeric: tabular-nums; }
.gt-bub-l { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 8px; border-radius: var(--ob-r3); background: rgba(var(--brand-rgb), .16); color: var(--brand2); font: 700 12px/1.45 var(--font-data); }
.gt-bub-l svg { flex: none; width: 16px; height: 16px; }
.gt-bub-l span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-bub-t { position: absolute; right: -4px; bottom: 0; width: 8px; height: 8px; background: rgba(37, 211, 102, .12); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.sv-b.prime { background: rgba(var(--brand-rgb), .16); box-shadow: inset 0 0 0 1px var(--brand); }
.gt-confirm { animation: cx-in .3s var(--motion-ease) both; }
.gt-cf { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--ob-r2); background: rgba(var(--brand-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45); }
.gt-cf.second { background: rgba(255, 90, 106, .08); box-shadow: inset 0 0 0 1px rgba(255, 90, 106, .45); animation: cx-pop .4s var(--spring) both; }
.gt-cf b { font-size: 16px; line-height: 1.4; }
.gt-cf small { color: var(--mut); font-size: 14px; line-height: 1.5; }
.gt-cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.gt-cf-row .cx-chip { justify-content: center; min-height: 48px; margin: 0; }
.gt-cta { width: 100%; }
.gt-skip { align-self: center; }
.gt-warn { margin: 0; padding: 8px 12px; border-radius: var(--ob-r3); background: rgba(255, 184, 107, .1); color: #FFB86B; font-size: 12px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
	.gt-steps li.on .ic, .gt-chb, .gt-cf.second { animation: none; }
	/* TASK-076/077: kilau kartu janji, ubin, dan gelembung post = langsung diam */
	.gt-pledge, .gt-pledge::after, .gt-tiles li, .gt-bub, .gt-home, .gt-push { animation: none; }
}

/* AI-ANCHOR: CSS_ONB_PLATFORM — TASK-060 (owner #77 #79): kartu chat "1 hari = 1 pelanggan" (loop 4 ikon, persamaan, kalender 100 kotak,
   putar + lompat 7·30·100) + kartu pohon 10 level (css/tree.css) + 2 langkah autopilot. Grid 4/8, gerak transform/opacity. */
.pl-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pl-loop li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.pl-loop li + li::before { content: ""; position: absolute; top: 20px; left: -8px; width: 8px; height: 2px; background: var(--brand); opacity: .6; }
.pl-lic { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; max-width: 64px; height: 40px; border-radius: var(--ob-r2); background: rgba(var(--brand-rgb), .14); color: var(--brand2); animation: pl-beat 3.2s ease-in-out infinite; }
.pl-loop li:nth-child(2) .pl-lic { animation-delay: .8s; } .pl-loop li:nth-child(3) .pl-lic { animation-delay: 1.6s; } .pl-loop li:nth-child(4) .pl-lic { animation-delay: 2.4s; }
.pl-lic svg { width: 20px; height: 20px; }
.pl-loop li.soc .pl-lic svg { width: 12px; height: 12px; }
/* B33: di 320 px kolomnya ± 50 px — kata seperti "pelanggan" jangan pernah dipenggal di tengah kata */
.pl-loop li small { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
@media (max-width: 359px) { .pl-loop li small { font-size: 10px; } }
.pl-loop li.hot .pl-lic { background: var(--surface-btn-primary); color: var(--on-brand); }
.pl-loop small { max-width: 100%; color: var(--mut); font-size: 10px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
@keyframes pl-beat { 0%, 20%, 100% { transform: none; } 8% { transform: translateY(-4px); } }
.pl-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.pl-eq > b { font-size: 20px; font-weight: 800; line-height: 1.2; }
.pl-eq > span:not(.pl-day) { color: var(--mut); font-size: 16px; }
.pl-day { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(var(--brand-rgb), .16); color: var(--brand2); font: 700 12px/1.25 var(--font-data); text-transform: uppercase; }
.pl-day b { font-size: 14px; }
.pl-tot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.pl-tot strong { color: #3DDC84; font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.pl-tot small { color: var(--mut); font-size: 14px; font-weight: 700; }
.pl-tot em { color: var(--mut); font-size: 12px; font-style: normal; }
.pl-full .pl-tot strong { animation: pl-glow 1.2s ease-out; }
@keyframes pl-glow { 30% { transform: scale(1.06); } }
.pl-cal { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.pl-cal i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s ease; }
.pl-cal i.on { background: rgba(61, 220, 132, .75); box-shadow: none; }
.pl-cal i.ten.on { background: #3DDC84; }
.pl-cal i.pop { animation: pl-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pl-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.3); } 100% { transform: none; } }
.pl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pl-play { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--ob-r2); background: var(--surface-btn-primary); color: var(--on-brand); font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.25; cursor: pointer; }
.pl-jump { display: flex; gap: 8px; }
.pl-jump button { min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--ob-r2); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); color: var(--txt); font: 800 14px/1 var(--font-data); cursor: pointer; }
.pl-jump button.on { background: rgba(61, 220, 132, .16); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .6); color: #3DDC84; }
.pl-note { margin: 0; color: var(--mut); font-size: 12px; line-height: 1.5; }
.pl-tree { min-width: 0; }
.pl-two { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pl-two li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; }
.pl-two span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); font: 800 14px/1 var(--font-data); }
.pl-two b { font-size: 16px; line-height: 1.45; } /* B23: di 320 px kalimat ini 2 baris — tinggi baris isi (§8.17) */
.pl-live { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #3DDC84; font: 700 14px/1.45 var(--font-data); }
.pl-live i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; animation: pl-live 2s ease-out infinite; }
@keyframes pl-live { 0% { opacity: 1; transform: scale(1); } 70%, 100% { opacity: .35; transform: scale(1.5); } }
.pl-need { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } /* B11: rata tengah */
.pl-need li { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border-radius: 999px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); font-size: 12px; font-weight: 700; }
.pl-need svg { width: 16px; height: 16px; color: var(--brand2); }
@media (prefers-reduced-motion: reduce) {
	.pl-lic, .pl-cal i.pop, .pl-full .pl-tot strong, .pl-live i { animation: none; }
}

/* AI-ANCHOR: CSS_ONB_PW_DAILY — TASK-060: pengingat "1 pelanggan/hari × level" di paywall ① (3 tile 7·30·100 + pohon 10 level dalam <details>) */
.pw-daily { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--ob-r2); background: rgba(61, 220, 132, .06); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .28); }
.pw-daily-tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pw-daily-c { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 12px 8px; border-radius: var(--ob-r3); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); }
.pw-daily-c:last-child { box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .6); }
.pw-daily-c b { max-width: 100%; color: #3DDC84; font: 800 16px/1.4 var(--font-data); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* B10: tile level termurah bisa 2 baris → tinggi baris isi */
.pw-daily-c b em { display: block; color: var(--mut); font-size: 10px; font-style: normal; font-weight: 700; line-height: 1.2; }
.pw-daily-c small { color: var(--mut); font-size: 12px; font-weight: 700; line-height: 1.45; }
.pw-daily-tree summary { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--brand2); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.pw-daily-tree summary::-webkit-details-marker { display: none; }
.pw-daily-tree summary svg { width: 16px; height: 16px; }
.pw-daily-tree[open] summary { margin-bottom: 8px; }

/* AI-ANCHOR: CSS_ONB_EASY — TASK-063 (owner #86): kartu aha "semudah ini" — 2 tap kamu, 5 baris otomatis tercentang berurutan */
.ez-t { font-size: 20px; line-height: 1.25; }
.ez-you { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ez-you li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 16px; font-weight: 700; line-height: 1.25; }
.ez-tap { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); }
.ez-tap svg { width: 20px; height: 20px; }
.ez-div { color: #3DDC84; font: 700 12px/1.25 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.ez-auto { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ez-auto li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: var(--ob-r3); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; line-height: 1.25; }
.ez-auto li svg { width: 16px; height: 16px; color: var(--mut); }
.ez-auto em { color: #3DDC84; font: 800 12px/1.25 var(--font-data); font-style: normal; opacity: 0; transform: translateX(8px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.ez-auto li.on { box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .45); }
.ez-auto li.on svg { color: #3DDC84; }
.ez-auto li.on em { opacity: 1; transform: none; }
.ez-done { display: flex; align-items: center; gap: 8px; margin: 0; color: #3DDC84; font-size: 16px; font-weight: 800; line-height: 1.25; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
.ez-done svg { flex: none; width: 20px; height: 20px; }
.ez-all .ez-done { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.ez-auto em, .ez-done { transition: none; }
}

/* AI-ANCHOR: CSS_ONB_WHAT — TASK-068 B3 (owner #101): jawaban lengkap "apa itu AIBIO?" — 4 tile (ikon + label + baris kecil)
   + baris terkunci. Grid 2 kolom di HP, 4 kolom mulai 768 px; tiap tile minmax(0,1fr) supaya tidak ada yang melar. */
.wh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.wh-grid li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 12px; border-radius: var(--radius-md); background: var(--card); }
.wh-grid .ic { width: 32px; height: 32px; padding: 8px; margin-bottom: 4px; border-radius: var(--radius-sm); background: rgba(var(--brand-rgb), .14); color: var(--brand2); }
.wh-grid b { font-size: 14px; line-height: 1.45; overflow-wrap: break-word; }
.wh-grid small { color: var(--mut); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.wh-grid em { color: var(--mut); font: 700 10px/1.4 var(--font-data); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.wh-c { background: linear-gradient(155deg, rgba(61, 220, 132, .18), rgba(var(--panel-rgb), .95) 65%); }
.wh-c small { color: #C7D2CD; }
.wh-lock { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; padding: 12px; border-radius: var(--radius-md); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); }
.wh-lock .ic { flex: none; width: 32px; height: 32px; padding: 8px; border-radius: 999px; background: rgba(var(--brand-rgb), .14); color: var(--brand2); }
.wh-lock span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wh-lock b { font-size: 14px; line-height: 1.45; }
.wh-lock small { color: var(--mut); font-size: 12px; line-height: 1.45; }
/* 4 kolom baru mulai 1024 px: di 768 px kotaknya hanya ~66 px — kata Indonesia pecah di tengah (AGRETO_DENSE) */
@media (min-width: 1024px) { .wh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* AI-ANCHOR: CSS_ONB_SHARE_GATE — TASK-068 B5–B7 (owner #103 #104 #105): tutorial langkah 1·2·3, tombol share bawaan HP,
   salin post/link, dan baris "langkah berikutnya" di gerbang bagikan. Grid 4/8 px · target sentuh ≥ 44 px. */
.gt-native { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px; border: 0; border-radius: var(--ob-r2); background: var(--surface-btn-primary); color: var(--on-brand); font-family: inherit; text-align: left; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease); }
.gt-native:active { transform: scale(.98); }
.gt-native .ic { display: flex; flex: none; width: 24px; height: 24px; }
.gt-native span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gt-native b { font-size: 16px; line-height: 1.25; }
.gt-native small { font-size: 12px; line-height: 1.4; opacity: .85; }
.gt-or { align-self: center; color: var(--mut); font: 700 10px/1.2 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.gt-cp { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gt-cp .cx-chip { margin: 0; }
.gt-next { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 999px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); color: var(--mut); font-size: 12px; line-height: 1.45; text-align: center; }
.gt-next .ic { display: flex; flex: none; width: 16px; height: 16px; color: var(--brand2); }

/* AI-ANCHOR: CSS_ONB_WAVE2 — TASK-068 B10 (owner #108): gelombang penawaran ke-2 (kartu meyakinkan setelah penawaran pertama ditolak). */
.cx-card-wave { box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45); }
.w2-t { font-family: var(--font-title); font-size: 20px; font-weight: 400; line-height: 1.25; }
.w2-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.w2-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 32px; font-size: 14px; line-height: 1.45; animation: cx-in .4s var(--motion-ease) both; }
.w2-list .ic { display: flex; width: 32px; height: 32px; padding: 8px; border-radius: 999px; background: rgba(var(--brand-rgb), .14); color: var(--brand2); }
.w2-est { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px; margin: 0; padding: 12px; border-radius: var(--ob-r3); background: rgba(61, 220, 132, .1); text-align: center; }
.w2-est b { color: #3DDC84; font: 800 24px/1.2 var(--font-data); }
.w2-est small { color: var(--mut); font-size: 12px; }
.w2-est em { color: var(--mut); font: 700 10px/1.4 var(--font-data); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.w2-cta { width: 100%; }
.w2-no { align-self: center; }
/* B7: gerbang kini pasti 4 channel → 2×2 di HP, 4 kolom mulai 480 px (auto-fill lama menyisakan 3 + 1 yang timpang) */
.gt-ch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) { .gt-ch { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* AI-ANCHOR: CSS_ONB_GATE_CHAT — TASK-068 (owner #114): gerbang ditulis seperti percakapan —
   gelembung pelatih (.gt-say) → pilihan baris penuh yang menjelaskan akibatnya (.gt-opt) → gelembung "kamu" (.gt-me). */
.gt-say { display: flex; flex-direction: column; gap: 4px; max-width: min(92%, 420px); margin: 0; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; animation: cx-in .35s var(--motion-ease) both; }
.gt-say small { color: var(--mut); font-size: 12px; line-height: 1.45; }
.gt-me { align-self: flex-end; max-width: min(82%, 380px); margin: 0; padding: 8px 16px; border-radius: 16px 16px 4px 16px; background: var(--surface-btn-primary); color: var(--on-brand); font-size: 14px; font-weight: 600; line-height: 1.45; animation: cx-in .3s var(--motion-ease) both; }
.gt-opts { display: flex; flex-direction: column; gap: 8px; }
.gt-opt { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px; border: 1px solid var(--line2); border-radius: var(--ob-r2); background: var(--card2); color: var(--txt); font-family: inherit; text-align: left; cursor: pointer; animation: cx-in .35s var(--motion-ease) both; transition: transform var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
.gt-opt:active { transform: scale(.98); }
.gt-opt:nth-child(2) { animation-delay: .05s; } .gt-opt:nth-child(3) { animation-delay: .1s; }
.gt-opt .ic { display: flex; width: 40px; height: 40px; padding: 8px; border-radius: 999px; background: rgba(var(--brand-rgb), .14); color: var(--brand2); }
.gt-opt span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gt-opt b { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.gt-opt small { color: var(--mut); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.gt-opt.prime { border-color: rgba(var(--brand-rgb), .55); background: rgba(var(--brand-rgb), .1); }
.gt-opt.wa .ic { padding: 8px; background: rgba(37, 211, 102, .14); color: #25D366; }
.gt-opt:disabled { opacity: .55; cursor: default; }

/* AI-ANCHOR: CSS_ONB_GATE_NO — TASK-068 (owner #115): nomor di tiap langkah + label DICORET saat langkah itu selesai,
   dan kartu janji (langkah ①) dengan 3 baris janji bernomor. */
.gt-no { position: absolute; right: -2px; bottom: -2px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line2); color: var(--mut); font: 800 10px/1 var(--font-data); font-style: normal; }
.gt-steps li.on .gt-no { background: var(--brand); box-shadow: none; color: var(--on-brand); }
.gt-steps li.done .gt-no { background: rgba(61, 220, 132, .9); box-shadow: none; color: #06210F; }
.gt-steps li.done span { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .75; }
/* TASK-076 (owner #142): KARTU JANJI — satu-satunya titik fokus langkah ①. Label kecil -> angka besar (estimasi per bulan)
   -> alamat toko user. Kilau menyapu sekali saat muncul (hanya transform/opacity). 3 kalimat janji lama diganti 3 ubin 2-3 kata. */
.gt-pledge { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; border-radius: var(--ob-r1); background: radial-gradient(120% 100% at 50% 0, rgba(var(--brand-rgb), .22), rgba(var(--brand-rgb), .06) 60%, transparent), var(--card2); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45), 0 12px 32px rgba(var(--brand-rgb), .18); overflow: hidden; animation: cx-in .45s var(--motion-ease) both; }
.gt-pledge::after { content: ""; position: absolute; inset: 0 auto 0 -40%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .1), transparent); transform: translateX(0); animation: gt-sheen 1.6s .35s var(--motion-ease) 1 both; pointer-events: none; }
@keyframes gt-sheen { to { transform: translateX(350%); } }
.gt-pl-k { max-width: 20ch; color: var(--brand2); font: 700 12px/1.45 var(--font-data); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.gt-pl-v { display: inline-flex; align-items: baseline; gap: 4px; }
.gt-pl-v span { background: var(--surface-btn-primary); -webkit-background-clip: text; background-clip: text; color: transparent; font: 800 32px/1.1 var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.gt-pl-v em { color: var(--mut); font: 700 14px/1.2 var(--font-data); font-style: normal; }
.gt-pl-u { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 12px; border-radius: 999px; background: rgba(var(--brand-rgb), .16); color: var(--brand2); font: 700 12px/1.45 var(--font-data); }
.gt-pl-u svg, .gt-pl-u .i { flex: none; width: 16px; height: 16px; }
.gt-pl-u span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.gt-tiles li { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; min-height: 96px; padding: 12px 8px; border-radius: var(--ob-r2); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); text-align: center; animation: cx-in .4s var(--motion-ease) both; }
.gt-tiles .ic { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: rgba(var(--brand-rgb), .16); color: var(--brand2); }
.gt-tiles b { color: var(--txt); font: 700 12px/1.45 var(--font-data); overflow-wrap: anywhere; }
/* TASK-078 (owner #144): langkah SIMPAN — ikon aplikasi seperti di layar HP (hasilnya ditunjukkan, bukan dijelaskan). */
.gt-home { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--ob-r2); background: radial-gradient(120% 120% at 0 0, rgba(var(--brand-rgb), .18), transparent 70%), var(--card2); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .3); animation: cx-in .4s var(--motion-ease) both; }
.gt-home-i { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: var(--card); box-shadow: 0 8px 24px rgba(3, 7, 18, .5), inset 0 0 0 1px var(--line2); overflow: hidden; }
.gt-home-i img { width: 56px; height: 56px; object-fit: cover; }
.gt-home-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gt-home-t b { color: var(--txt); font: 800 16px/1.25 var(--font-data); letter-spacing: .04em; }
.gt-home-t small { color: var(--mut); font-size: 12px; line-height: 1.45; }
/* langkah NOTIFIKASI — banner push contoh: persis bentuk yang akan muncul di HP. */
.gt-push { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border-radius: var(--ob-r2); background: var(--card2); box-shadow: 0 12px 32px rgba(3, 7, 18, .5), inset 0 0 0 1px var(--line2); animation: gt-push-in .5s var(--motion-ease) both; }
@keyframes gt-push-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.gt-push-i { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; overflow: hidden; }
.gt-push-i img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.gt-push-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gt-push-h { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.gt-push-h b { color: var(--txt); font: 800 12px/1.2 var(--font-data); letter-spacing: .04em; }
.gt-push-h i { color: var(--mut); font: 600 10px/1.2 var(--font-data); font-style: normal; }
.gt-push-m { color: var(--txt); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.gt-push-x { position: absolute; top: 8px; right: 8px; padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(var(--brand-rgb), .16); color: var(--brand2); font: 700 10px/1.2 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.gt-tiles.num li { position: relative; }
.gt-tl-n { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(var(--brand-rgb), .24); color: var(--brand2); font: 800 10px/1 var(--font-data); }
@media (min-width: 400px) { .gt-pl-v span { font-size: 40px; } }

/* TASK-068 (owner #116): nomor urut — di chip bagian yang selesai (.bc-no) dan di tiap pilihan dalam langkah (.gt-on) */
.bc-no { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(61, 220, 132, .16); color: #3DDC84; font: 800 10px/1 var(--font-data); font-variant-numeric: tabular-nums; }
.gt-opt.numbered { grid-template-columns: 24px 40px minmax(0, 1fr); }
.gt-on { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); color: var(--mut); font: 800 12px/1 var(--font-data); }
.gt-opt.prime .gt-on { background: var(--brand); box-shadow: none; color: var(--on-brand); }
/* TASK-068 (owner #117): tombol arahan setelah pelatih membalas — selalu ada langkah berikutnya yang bisa diketuk */
.gt-go { display: flex; flex-wrap: wrap; gap: 8px; }
.gt-go-b { flex: 1 1 160px; min-height: 48px; padding: 8px 16px; border: 0; border-radius: var(--ob-r2); background: var(--surface-btn-primary); color: var(--on-brand); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease); animation: cx-in .3s var(--motion-ease) both; }
.gt-go-b:active { transform: scale(.98); }
.gt-go-b:disabled { opacity: .55; cursor: default; }
.gt-go-alt { flex: 0 1 auto; min-height: 48px; padding: 8px 16px; border: 1px solid var(--line2); border-radius: var(--ob-r2); background: var(--card2); color: var(--txt); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; animation: cx-in .3s var(--motion-ease) .05s both; }
/* TASK-068 (owner #119): sorotan lembut "ini yang harus diketuk" — berdenyut 3 kali lalu tenang, hanya box-shadow (murah, tanpa layout) */
.gt-tap { position: relative; animation: gt-glow 2s var(--motion-ease) 3; }
@keyframes gt-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .5); } 50% { box-shadow: 0 0 0 10px rgba(var(--brand-rgb), 0); } }
.gt-opt.gt-tap { animation: gt-glow-o 2s var(--motion-ease) 3; }
@keyframes gt-glow-o { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .45); } 50% { box-shadow: 0 0 0 8px rgba(var(--brand-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .gt-tap, .gt-opt.gt-tap { animation: none; } }
/* TASK-068 B20 (owner #122): pilihan yang sudah dijawab dibekukan — redup & tidak bisa diketuk, jadi mata user
   jatuh ke arahan terbaru saja. Tetap terbaca (opacity .45 di atas latar gelap) supaya riwayat percakapan utuh. */
.gt-off { opacity: .45; pointer-events: none; filter: saturate(.6); transition: opacity var(--motion-fast) var(--motion-ease); }
.gt-off .gt-tap { animation: none; }

/* AI-ANCHOR: CSS_ONB_UNLOCK — TASK-068 (owner #120): baris "buka metodenya" + tangga harga (daftar dicoret → harga hari ini) di atas bilah tombol */
.pw-unlock { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 16px; border-radius: var(--ob-r2); background: linear-gradient(150deg, rgba(var(--brand-rgb), .18), rgba(var(--panel-rgb), .95) 62%); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45); }
.pw-un-k { display: flex; align-items: center; gap: 8px; color: var(--brand2); font: 800 10px/1.2 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.pw-un-k svg { width: 16px; height: 16px; }
.pw-un-t { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.pw-un-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.pw-un-p s { color: var(--mut); font: 700 14px/1.2 var(--font-data); }
.pw-un-p strong { color: #3DDC84; font: 800 32px/1 var(--font-data); letter-spacing: -.02em; }
.pw-un-p small { color: var(--mut); font: 700 12px/1.2 var(--font-data); }
.pw-un-then { color: var(--mut); font-size: 12px; line-height: 1.45; }