/* Cloven AI — halaman akun (masuk, daftar, lupa sandi, syarat). Satu desain split: panel brand kiri, form kanan. */
:root {
  --brand: #2457f5; --brand-600: #1a45d6; --brand-700: #1536a8; --brand-50: #eef3ff; --brand-100: #dce6ff;
  --violet: #7c5cff; --mint: #10b981;
  --ink: #0b1530; --text: #2a3650; --muted: #5e6b85; --line: #dfe5f0; --soft: #f5f7fc;
  --red: #dc2626; --green: #0f9f6e;
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible { outline: 3px solid #8fb0ff; outline-offset: 3px; border-radius: 8px; }
/* Judul yang difokuskan lewat skrip (tabindex=-1) tidak perlu kotak fokus. */
[tabindex="-1"]:focus, h1:focus { outline: none; }

.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(420px, 46%) 1fr; }

/* ---------- panel brand ---------- */
.auth-side { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 36px 52px; color: #c9d5f5;
  background: radial-gradient(640px 420px at 100% 0%, rgba(124,92,255,.5), transparent 60%), radial-gradient(560px 460px at 0% 100%, rgba(16,185,129,.28), transparent 60%), linear-gradient(160deg, #0d1a45 0%, #13297a 55%, #1d44c4 100%); }
.auth-side::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%); pointer-events: none; }
.auth-side > * { position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.03em; color: var(--ink); }
.brand:hover { text-decoration: none; }
.auth-side .brand { color: #fff; align-self: flex-start; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: #2A4BF2; box-shadow: 0 8px 18px -8px rgba(36,87,245,.8); flex: none; }
.auth-side .brand-mark { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.side-copy { margin: auto 0; max-width: 470px; padding: 32px 0; }
.side-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: #a9bcf3; }
.side-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(16,185,129,.2); }
.side-copy h2 { color: #fff; font-family: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Heading", "Sitka Text", Cambria, Georgia, "Noto Serif", "DejaVu Serif", serif; font-size: clamp(32px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; margin: 16px 0 14px; }
.side-copy > p { font-size: 16px; color: #c9d5f5; margin: 0; max-width: 420px; }

/* contoh percakapan statis (tanpa animasi) */
.side-chat { margin: 28px 0 0; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; max-width: 440px; }
.sc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #eef0f5; }
.sc-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #2A4BF2; }
.sc-head b { display: block; color: var(--ink); font-size: 13.5px; line-height: 1.25; }
.sc-head small { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; }
.sc-head small i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.sc-badge { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 750; color: #0b7a3e; background: #e3f7ea; padding: 3px 9px; border-radius: 999px; }
.sc-body { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.sb { max-width: 84%; padding: 8px 12px; border-radius: 16px; font-size: 13px; line-height: 1.45; }
.sb.me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.sb.ai { align-self: flex-start; background: #f3f4f8; color: var(--ink); border-top-left-radius: 5px; }
.sc-product { align-self: flex-start; display: flex; gap: 10px; align-items: center; width: 84%; padding: 7px; border: 1px solid #e8ebf2; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px -14px rgba(15,23,42,.35); }
.sc-product img { flex: none; width: 76px; height: 57px; object-fit: cover; border-radius: 9px; background: #eef1f5; display: block; }
.sc-product b { display: block; font-size: 13px; color: var(--ink); line-height: 1.3; }
.sc-product small { display: block; font-size: 11px; color: var(--muted); line-height: 1.35; }
.sc-price { display: block; margin-top: 3px; font-size: 14px; font-weight: 800; color: var(--ink); }
.sc-price em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.sc-note { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 4px 11px; border-radius: 999px; background: #ecfaf3; color: #0b7a52; border: 1px solid #c9eedc; font-size: 11.5px; font-weight: 650; }
.side-foot { font-size: 12.5px; color: #8fa2d6; margin: 0; }

/* ---------- area form ---------- */
.auth-main { display: flex; flex-direction: column; align-items: center; padding: 28px 48px 40px; background: #fff; min-width: 0; }
.auth-top { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 16px; font-size: 14px; }
.auth-top .back { color: var(--muted); font-weight: 550; padding: 6px 10px; border-radius: 9px; }
.auth-top .back:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.secure-label { color: #8a96ad; font-size: 12.5px; }
.brand.mobile { display: none; margin-right: auto; }
.auth-card { width: 100%; max-width: 420px; margin: auto; padding: 32px 0; animation: cardIn .5s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.form-mark { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-weight: 800; margin-bottom: 22px; background: #2A4BF2; box-shadow: 0 10px 22px -10px rgba(36,87,245,.8); }
.auth-card h1 { margin: 0 0 8px; font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -0.035em; line-height: 1.15; }
.lead { color: var(--muted); margin: 0 0 26px; font-size: 15px; line-height: 1.6; }
.step-label { font-size: 11.5px; letter-spacing: .1em; color: var(--brand); font-weight: 750; margin: 0 0 10px; text-transform: uppercase; }

.f { margin-bottom: 16px; }
label { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 7px; }
label small { color: var(--muted); font-weight: 400; }
.lbl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lbl-row a { font-size: 13px; font-weight: 600; }
input[type=text], input[type=email], input[type=tel], input[type=password], select { width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; font-size: 15px; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
input::placeholder { color: #a1abbe; }
input:hover, select:hover { border-color: #c8d2e4; }
input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(36,87,245,.12); }
input.bad, input:user-invalid { border-color: var(--red); }
.pw { position: relative; }
.pw input { padding-right: 104px; }
.pw-toggle { position: absolute; right: 7px; top: 7px; height: 34px; padding: 0 11px; border: 0; border-radius: 8px; background: var(--soft); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.pw-toggle:hover { color: var(--ink); background: #ebeff7; }
.hint { display: block; color: var(--muted); font-size: 12.5px; margin: 6px 0 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 14px; color: var(--text); margin: 4px 0 12px; cursor: pointer; line-height: 1.5; }
.check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }
.msg { border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 6px 0 14px; line-height: 1.5; }
.msg.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.msg.ok { background: #f0fdf4; color: #14532d; border: 1px solid #bbf7d0; }
.msg a { font-weight: 650; }
.btn { width: 100%; height: 50px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; margin-top: 6px; box-shadow: 0 12px 24px -12px rgba(36,87,245,.8); transition: background .15s, transform .15s, box-shadow .15s; }
.btn:hover { background: var(--brand-600); transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn.is-loading { cursor: progress; }
.btn.is-loading::before { content: ""; display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; margin-right: 9px; vertical-align: -2px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.switch { text-align: center; color: var(--muted); margin: 20px 0 0; font-size: 14px; }
.switch a { font-weight: 650; }
.switch.small { font-size: 13px; margin-top: 12px; }

/* tawaran daftar di bawah form masuk */
.signup-offer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-50), #f3eeff); border: 1px solid #dbe4ff; text-align: left; }
.signup-offer span { color: var(--text); font-size: 14px; line-height: 1.4; }
.signup-offer span b { display: block; color: var(--ink); font-size: 15px; }
.signup-offer a { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 10px; background: #fff; border: 1.5px solid var(--brand); color: var(--brand-700); font-weight: 700; font-size: 14px; }
.signup-offer a:hover { background: var(--brand); color: #fff; text-decoration: none; }
.divider { display: flex; align-items: center; gap: 12px; color: #9aa5ba; font-size: 12.5px; margin: 24px 0 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* onboarding (daftar) */
.stepper { display: flex; gap: 8px; margin-bottom: 24px; }
.step-node { flex: 1; border-top: 3px solid #e8ecf4; padding-top: 9px; display: flex; gap: 6px; align-items: center; color: #9aa5ba; transition: border-color .3s, color .3s; }
.step-node.active { border-color: var(--brand); color: var(--brand-700); }
.step-node span { font-size: 11.5px; font-weight: 750; }
.step-node small { font-size: 12px; font-weight: 600; }
.onboard-actions { display: flex; gap: 12px; align-items: center; margin-top: 24px; }
.onboard-actions .btn { flex: 1; margin: 0; }
.back-button, .resend { background: transparent; border: 0; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 12px 6px; border-radius: 8px; }
.back-button:hover { color: var(--ink); }
.resend { color: var(--brand); padding: 6px 0; }
.resend:disabled { color: #9aa5ba; cursor: default; }
.privacy-note { font-size: 12.5px; text-align: center; color: #8a96ad; line-height: 1.6; margin: 22px 0 0; }
.plan-chip { display: inline-flex; align-items: center; gap: 8px; margin: -10px 0 22px; padding: 7px 12px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-size: 13px; font-weight: 650; border: 1px solid var(--brand-100); }
.plan-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.closed-box { margin: 4px 0 8px; padding: 20px; border-radius: 16px; background: #fff8eb; border: 1px solid #fde3b0; color: #6b4a07; }
.closed-box b { display: block; color: #4a3305; font-size: 16px; margin-bottom: 6px; }
.closed-box p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; }
.closed-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.closed-actions a { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 11px; font-weight: 700; font-size: 14px; }
.closed-actions .wa { background: #1fae5b; color: #fff; }
.closed-actions .mail { background: #fff; color: var(--ink); border: 1px solid #e8d7b0; }
.closed-actions a:hover { text-decoration: none; filter: brightness(.96); }

/* ---------- pendaftaran: link verifikasi + onboarding 4 langkah ---------- */
.req { color: var(--red); font-weight: 700; }
label .opt { color: #8a96ad; font-weight: 500; font-size: 13px; }
.signup-card { max-width: 440px; }
.signup-card .lead b { color: var(--ink); font-weight: 650; }
.signup-card .lead .em { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(36,87,245,.35); cursor: pointer; }
.link-btn:hover { text-decoration-color: currentColor; }
select.sel, .phone select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='%235e6b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
select.sel:invalid, select.sel option[value=""] { color: #8a96ad; }
select.sel option { color: var(--ink); }
.phone { display: flex; height: 48px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.phone:hover { border-color: #c8d2e4; }
.phone:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(36,87,245,.12); }
.phone select { width: auto; flex: none; height: 100%; border: 0; border-right: 1.5px solid var(--line); border-radius: 11px 0 0 11px; padding-left: 12px; padding-right: 32px; background-position: right 9px center; font-weight: 600; box-shadow: none !important; }
.phone input { border: 0 !important; height: 100%; box-shadow: none !important; border-radius: 0 11px 11px 0; min-width: 0; }
.signup-card .pw input { padding-right: 52px; }
.pw-eye { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: #5e6b85; cursor: pointer; }
.pw-eye:hover { background: var(--soft); color: var(--ink); }
.bad-hint { color: var(--red); }

/* langkah onboarding: kartu bergaris dengan footer + progress di tepi bawah */
.signup-card.ob { max-width: 540px; margin: 48px auto auto; padding: 36px 40px 0; border: 1px solid #e3e8f2; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 24px 48px -28px rgba(16,24,40,.25); overflow: hidden; }
.signup-card.ob h1 { font-size: 28px; }
.signup-card.ob .step-label { color: #8a96ad; font-size: 12.5px; margin-bottom: 14px; }
.signup-card.ob .step-label b { color: var(--brand); font-weight: 800; }
.foot-wrap { margin-top: 8px; }
.card-foot { display: flex; align-items: center; gap: 12px; }
.card-foot .grow { flex: 1; }
.card-foot .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.signup-card:not(.ob) .card-foot .btn { width: 100%; }
.signup-card:not(.ob) .card-foot .grow { display: none; }
.signup-card.ob .foot-wrap { margin: 28px -40px 0; }
.signup-card.ob .card-foot { padding: 18px 40px; border-top: 1px solid #e8ecf4; }
.signup-card.ob .card-foot .btn { width: auto; min-width: 150px; padding: 0 22px; margin: 0; height: 48px; }
.signup-card .btn:disabled, .signup-card .btn:disabled:hover { background: #eef1f6; color: #9aa5ba; box-shadow: none; opacity: 1; transform: none; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-weight: 650; font-size: 15px; cursor: pointer; transition: border-color .15s, background .15s; }
.btn-outline:hover:not(:disabled) { border-color: #c3cde0; background: var(--soft); }
.btn-outline:disabled { color: #9aa5ba; cursor: default; }
.btn-outline.wide { width: 100%; }
.btn-text { height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-weight: 650; font-size: 15px; cursor: pointer; }
.btn-text:hover { background: var(--soft); }
.progress { height: 4px; background: #e8ecf4; }
.progress i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 0 4px 4px 0; transition: width .45s var(--ease); }

/* layar "Cek email Anda" */
.sent-hero { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 16px; background: var(--soft); border: 1px solid #e8ecf4; margin-bottom: 18px; }
.sent-ic { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: #2A4BF2; box-shadow: 0 10px 22px -10px rgba(36,87,245,.8); }
.sent-tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 13.5px; color: var(--text); line-height: 1.5; }
.sent-tips li { display: flex; gap: 8px; }
.sent-tips li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-top: 8px; }
.sent-actions { display: grid; gap: 10px; }
.btn.btn-link { display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.btn.btn-link:hover { text-decoration: none; color: #fff; }
.dev-box { margin-top: 16px; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed #f0c36d; background: #fffaf0; display: grid; gap: 4px; }
.dev-box small { color: #8a6514; font-size: 12.5px; }
.dev-box a { font-weight: 700; color: #a15c00; }

/* meter & aturan kata sandi */
.pw-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 2px 0 16px; }
.pw-meter i { height: 5px; background: #e3e8f0; border-radius: 4px; transition: background .25s; }
.pw-meter.s1 i:nth-child(-n+1), .pw-meter.s2 i:nth-child(-n+2) { background: #ef4444; }
.pw-meter.s3 i:nth-child(-n+3) { background: #f59e0b; }
.pw-meter.s4 i:nth-child(-n+4) { background: #84cc16; }
.pw-meter.s5 i { background: var(--mint); }
.pw-head { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.pw-rules { padding: 0; list-style: none; font-size: 14px; color: var(--muted); display: grid; grid-template-columns: 1fr; gap: 7px; margin: 0 0 20px; }
.pw-rules li { display: flex; align-items: center; gap: 9px; transition: color .2s; }
.pw-rules li::before { content: none; }
.pw-rules .ic { display: grid; place-items: center; color: #9aa5ba; }
.pw-rules li.passed { color: var(--ink); }
.pw-rules li.passed .ic { color: var(--mint); }
.signup-card .check { margin: 2px 0 10px; }
.signup-card .check a { text-decoration: underline; text-underline-offset: 3px; }

/* syarat penggunaan */
.terms-page { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; font-size: 16px; line-height: 1.8; }
.terms-page h1 { font-size: clamp(30px, 5vw, 40px); letter-spacing: -0.035em; color: var(--ink); margin: 6px 0 14px; line-height: 1.15; }
.terms-page h2 { font-size: 20px; margin: 34px 0 8px; color: var(--ink); letter-spacing: -0.02em; }
.terms-page p { color: #4e5c78; margin: 0 0 12px; }
.terms-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.terms-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* ---------- responsif ---------- */
@media (max-width: 1100px) { .auth-side { padding: 32px 36px; } .auth-main { padding: 26px 32px 36px; } }
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .brand.mobile { display: inline-flex; }
  .auth-main { min-height: 100vh; min-height: 100dvh; background: linear-gradient(180deg, #f5f8ff, #fff 260px); }
  .secure-label { display: none; }
  .auth-card { margin: 28px auto auto; }
}
@media (max-width: 480px) {
  .auth-main { padding: 16px 16px 28px; }
  .auth-card { padding: 16px 0; }
  .auth-card h1 { font-size: 27px; }
  .form-mark { display: none; }
  .auth-top .back { font-size: 13px; }
  .step-node small { font-size: 11px; }
  .signup-offer { flex-direction: column; align-items: stretch; text-align: center; }
  .signup-offer a { justify-content: center; }
}
@media (max-width: 900px) {
  body.onboarding .auth-main { background: #fff; padding-bottom: 0; }
  .signup-card.ob { max-width: 560px; margin: 8px auto 0; border: 0; box-shadow: none; border-radius: 0; padding: 20px 0 0; overflow: visible; }
  .signup-card.ob .foot-wrap { position: sticky; bottom: 0; z-index: 5; margin: 24px -32px 0; background: #fff; }
  .signup-card.ob .card-foot { padding: 14px 32px; }
}
@media (max-width: 480px) {
  .signup-card.ob h1 { font-size: 25px; }
  .signup-card.ob .foot-wrap { margin: 24px -16px 0; }
  .signup-card.ob .card-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 8px; }
  .signup-card.ob .card-foot .btn { min-width: 0; padding: 0 18px; }
  .btn-outline { padding: 0 14px; }
  .sent-hero { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Password recovery appears below the input, before the submit button. */
.password-help{display:flex;justify-content:flex-end;margin-top:8px}
.password-help[hidden]{display:none}
.password-help a{font-size:13px;font-weight:600;line-height:1.5;padding:3px 0}

/* ===== TEMA GELAP: dibuat otomatis oleh tools/gen_dark_css.py — jangan diedit manual ===== */
:root[data-theme="dark"]{--brand:#4a7cfa;--brand-600:#487bfe;--brand-700:#4f7df4;--brand-50:#1a202f;--brand-100:#121c3c;--violet:#8169fa;--mint:#10b981;--ink:#9babcf;--text:#9cabcb;--muted:#9dabc7;--line:#2d313a;--soft:#101319;--red:#ec3934;--green:#0f9f6e;--ease:cubic-bezier(.2,.7,.2,1)}
:root[data-theme="dark"] body{color:var(--text);background:#171b21}
:root[data-theme="dark"] a{color:var(--brand);text-decoration:none}
:root[data-theme="dark"] a:hover{text-decoration:underline}
:root[data-theme="dark"] a:focus-visible,
:root[data-theme="dark"] button:focus-visible{outline:3px solid #8fb0ff;outline-offset:3px}
:root[data-theme="dark"] [tabindex="-1"]:focus,
:root[data-theme="dark"] h1:focus{outline:none}
:root[data-theme="dark"] .auth-side{color:#c9d5f5;background:radial-gradient(640px 420px at 100% 0%, rgba(124,92,255,0.5), transparent 60%), radial-gradient(560px 460px at 0% 100%, rgba(16,185,129,0.28), transparent 60%), linear-gradient(160deg, #1b2a57 0%, #13297a 55%, #1d44c4 100%)}
:root[data-theme="dark"] .auth-side::before{background-image:linear-gradient(rgba(23,27,33,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(23,27,33,0.05) 1px, transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #eaeff7 20%, transparent 75%);mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #eaeff7 20%, transparent 75%)}
:root[data-theme="dark"] .brand{color:var(--ink)}
:root[data-theme="dark"] .brand:hover{text-decoration:none}
:root[data-theme="dark"] .auth-side .brand{color:#ffffff}
:root[data-theme="dark"] .brand-mark{color:#ffffff;background:#2a4bf2;box-shadow:0 8px 18px -8px rgba(62,115,255,0.8)}
:root[data-theme="dark"] .auth-side .brand-mark{background:rgba(23,27,33,0.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)}
:root[data-theme="dark"] .side-eyebrow{color:#a9bcf3}
:root[data-theme="dark"] .side-eyebrow::before{background:var(--mint);box-shadow:0 0 0 4px rgba(16,185,129,0.2)}
:root[data-theme="dark"] .side-copy h2{color:#ffffff}
:root[data-theme="dark"] .side-copy > p{color:#c9d5f5}
:root[data-theme="dark"] .side-chat{background:#171b21;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.06)}
:root[data-theme="dark"] .sc-head{border-bottom:1px solid #2b2f37}
:root[data-theme="dark"] .sc-av{color:#ffffff;background:#2a4bf2}
:root[data-theme="dark"] .sc-head b{color:var(--ink)}
:root[data-theme="dark"] .sc-head small{color:var(--muted)}
:root[data-theme="dark"] .sc-head small i{background:var(--mint)}
:root[data-theme="dark"] .sc-badge{color:#64c281;background:#072716}
:root[data-theme="dark"] .sb.me{background:var(--ink);color:#ffffff}
:root[data-theme="dark"] .sb.ai{background:#0d1016;color:var(--ink)}
:root[data-theme="dark"] .sc-product{border:1px solid #2c3038;background:#171b21;box-shadow:0 8px 18px -14px rgba(0,0,0,0.65)}
:root[data-theme="dark"] .sc-product img{background:#0b1016}
:root[data-theme="dark"] .sc-product b{color:var(--ink)}
:root[data-theme="dark"] .sc-product small{color:var(--muted)}
:root[data-theme="dark"] .sc-price{color:var(--ink)}
:root[data-theme="dark"] .sc-price em{color:var(--muted)}
:root[data-theme="dark"] .sc-note{background:#11251d;color:#64c194;border:1px solid #064933}
:root[data-theme="dark"] .side-foot{color:#96a9de}
:root[data-theme="dark"] .auth-main{background:#171b21}
:root[data-theme="dark"] .auth-top .back{color:var(--muted)}
:root[data-theme="dark"] .auth-top .back:hover{background:var(--soft);color:var(--ink);text-decoration:none}
:root[data-theme="dark"] .secure-label{color:#9fabc3}
:root[data-theme="dark"] .form-mark{color:#ffffff;background:#2a4bf2;box-shadow:0 10px 22px -10px rgba(62,115,255,0.8)}
:root[data-theme="dark"] .auth-card h1{color:var(--ink)}
:root[data-theme="dark"] .lead{color:var(--muted)}
:root[data-theme="dark"] .step-label{color:var(--brand)}
:root[data-theme="dark"] label{color:var(--ink)}
:root[data-theme="dark"] label small{color:var(--muted)}
:root[data-theme="dark"] input[type=text],
:root[data-theme="dark"] input[type=email],
:root[data-theme="dark"] input[type=tel],
:root[data-theme="dark"] input[type=password],
:root[data-theme="dark"] select{border:1.5px solid var(--line);color:var(--ink);background:#171b21}
:root[data-theme="dark"] input::placeholder{color:#7c8598}
:root[data-theme="dark"] input:hover,
:root[data-theme="dark"] select:hover{border-color:#2e3644}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(62,115,255,0.12)}
:root[data-theme="dark"] input.bad,
:root[data-theme="dark"] input:user-invalid{border-color:var(--red)}
:root[data-theme="dark"] .pw-toggle{border:0;background:var(--soft);color:var(--muted)}
:root[data-theme="dark"] .pw-toggle:hover{color:var(--ink);background:#0c0f16}
:root[data-theme="dark"] .hint{color:var(--muted)}
:root[data-theme="dark"] .check{color:var(--text)}
:root[data-theme="dark"] .check input{accent-color:var(--brand)}
:root[data-theme="dark"] .msg.error{background:#2d1b1b;color:#f98478;border:1px solid #64262a}
:root[data-theme="dark"] .msg.ok{background:#13261a;color:#7fbc90;border:1px solid #0b492a}
:root[data-theme="dark"] .btn{border:0;background:var(--brand);color:#ffffff;box-shadow:0 12px 24px -12px rgba(62,115,255,0.8)}
:root[data-theme="dark"] .btn:hover{background:var(--brand-600)}
:root[data-theme="dark"] .btn.is-loading::before{border:2px solid rgba(39,43,52,0.4);border-top-color:#272b34}
:root[data-theme="dark"] .switch{color:var(--muted)}
:root[data-theme="dark"] .signup-offer{background:linear-gradient(135deg, var(--brand-50), #231b31);border:1px solid #2e3a65}
:root[data-theme="dark"] .signup-offer span{color:var(--text)}
:root[data-theme="dark"] .signup-offer span b{color:var(--ink)}
:root[data-theme="dark"] .signup-offer a{background:#171b21;border:1.5px solid var(--brand);color:var(--brand-700)}
:root[data-theme="dark"] .signup-offer a:hover{background:var(--brand);color:#ffffff;text-decoration:none}
:root[data-theme="dark"] .divider{color:#7f899e}
:root[data-theme="dark"] .divider::before,
:root[data-theme="dark"] .divider::after{background:var(--line)}
:root[data-theme="dark"] .step-node{border-top:3px solid #2c3038;color:#7f899e}
:root[data-theme="dark"] .step-node.active{border-color:var(--brand);color:var(--brand-700)}
:root[data-theme="dark"] .back-button,
:root[data-theme="dark"] .resend{background:transparent;border:0;color:var(--muted)}
:root[data-theme="dark"] .back-button:hover{color:var(--ink)}
:root[data-theme="dark"] .resend{color:var(--brand)}
:root[data-theme="dark"] .resend:disabled{color:#7f899e}
:root[data-theme="dark"] .privacy-note{color:#9fabc3}
:root[data-theme="dark"] .plan-chip{background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-100)}
:root[data-theme="dark"] .plan-chip::before{background:var(--brand)}
:root[data-theme="dark"] .closed-box{background:#291f0d;border:1px solid #4f3901;color:#c9a46a}
:root[data-theme="dark"] .closed-box b{color:#c2a67b}
:root[data-theme="dark"] .closed-actions .wa{background:#1fae5b;color:#ffffff}
:root[data-theme="dark"] .closed-actions .mail{background:#171b21;color:var(--ink);border:1px solid #4d3a01}
:root[data-theme="dark"] .closed-actions a:hover{text-decoration:none;filter:brightness(.96)}
:root[data-theme="dark"] .req{color:var(--red)}
:root[data-theme="dark"] label .opt{color:#9fabc3}
:root[data-theme="dark"] .signup-card .lead b{color:var(--ink)}
:root[data-theme="dark"] .link-btn{background:none;border:0;color:var(--brand);text-decoration:underline;text-decoration-color:rgba(131,169,252,0.35)}
:root[data-theme="dark"] .link-btn:hover{text-decoration-color:currentColor}
:root[data-theme="dark"] select.sel,
:root[data-theme="dark"] .phone select{background:#171b21 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='%235e6b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px}
:root[data-theme="dark"] select.sel:invalid,
:root[data-theme="dark"] select.sel option[value=""]{color:#9fabc3}
:root[data-theme="dark"] select.sel option{color:var(--ink)}
:root[data-theme="dark"] .phone{border:1.5px solid var(--line);background:#171b21}
:root[data-theme="dark"] .phone:hover{border-color:#2e3644}
:root[data-theme="dark"] .phone:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(62,115,255,0.12)}
:root[data-theme="dark"] .phone select{border:0;border-right:1.5px solid var(--line);background-position:right 9px center;box-shadow:none !important}
:root[data-theme="dark"] .phone input{border:0 !important;box-shadow:none !important}
:root[data-theme="dark"] .pw-eye{border:0;background:transparent;color:#9dabc7}
:root[data-theme="dark"] .pw-eye:hover{background:var(--soft);color:var(--ink)}
:root[data-theme="dark"] .bad-hint{color:var(--red)}
:root[data-theme="dark"] .signup-card.ob{border:1px solid #2c3139;background:#171b21;box-shadow:0 1px 2px rgba(0,0,0,0.144), 0 24px 48px -28px rgba(0,0,0,0.65)}
:root[data-theme="dark"] .signup-card.ob .step-label{color:#9fabc3}
:root[data-theme="dark"] .signup-card.ob .step-label b{color:var(--brand)}
:root[data-theme="dark"] .signup-card.ob .card-foot{border-top:1px solid #2c3038}
:root[data-theme="dark"] .signup-card .btn:disabled,
:root[data-theme="dark"] .signup-card .btn:disabled:hover{background:#0c1016;color:#7f899e;box-shadow:none}
:root[data-theme="dark"] .btn-outline{border:1.5px solid var(--line);background:#171b21;color:var(--ink)}
:root[data-theme="dark"] .btn-outline:hover:not(:disabled){border-color:#2f3746;background:var(--soft)}
:root[data-theme="dark"] .btn-outline:disabled{color:#7f899e}
:root[data-theme="dark"] .btn-text{border:0;background:transparent;color:var(--ink)}
:root[data-theme="dark"] .btn-text:hover{background:var(--soft)}
:root[data-theme="dark"] .progress{background:#21242b}
:root[data-theme="dark"] .progress i{background:var(--brand)}
:root[data-theme="dark"] .sent-hero{background:var(--soft);border:1px solid #2c3038}
:root[data-theme="dark"] .sent-ic{color:#ffffff;background:#2a4bf2;box-shadow:0 10px 22px -10px rgba(62,115,255,0.8)}
:root[data-theme="dark"] .sent-tips{color:var(--text)}
:root[data-theme="dark"] .sent-tips li::before{background:var(--brand)}
:root[data-theme="dark"] .btn.btn-link:hover{text-decoration:none;color:#ffffff}
:root[data-theme="dark"] .dev-box{border:1.5px dashed #503902;background:#282010}
:root[data-theme="dark"] .dev-box small{color:#cca45b}
:root[data-theme="dark"] .dev-box a{color:#e29851}
:root[data-theme="dark"] .pw-meter i{background:#161f2d}
:root[data-theme="dark"] .pw-meter.s1 i:nth-child(-n+1),
:root[data-theme="dark"] .pw-meter.s2 i:nth-child(-n+2){background:#ef4444}
:root[data-theme="dark"] .pw-meter.s3 i:nth-child(-n+3){background:#f59e0b}
:root[data-theme="dark"] .pw-meter.s4 i:nth-child(-n+4){background:#84cc16}
:root[data-theme="dark"] .pw-meter.s5 i{background:var(--mint)}
:root[data-theme="dark"] .pw-head{color:var(--muted)}
:root[data-theme="dark"] .pw-rules{color:var(--muted)}
:root[data-theme="dark"] .pw-rules .ic{color:#7f899e}
:root[data-theme="dark"] .pw-rules li.passed{color:var(--ink)}
:root[data-theme="dark"] .pw-rules li.passed .ic{color:var(--mint)}
:root[data-theme="dark"] .signup-card .check a{text-decoration:underline}
:root[data-theme="dark"] .terms-page h1{color:var(--ink)}
:root[data-theme="dark"] .terms-page h2{color:var(--ink)}
:root[data-theme="dark"] .terms-page p{color:#9babca}
:root[data-theme="dark"] .terms-top{border-bottom:1px solid var(--line)}
:root[data-theme="dark"] .terms-foot{border-top:1px solid var(--line);color:var(--muted)}
@media (max-width: 900px) {
  :root[data-theme="dark"] .auth-main{background:linear-gradient(180deg, #11141a, #171b21 260px)}
}
@media (max-width: 900px) {
  :root[data-theme="dark"] body.onboarding .auth-main{background:#171b21}
  :root[data-theme="dark"] .signup-card.ob{border:0;box-shadow:none}
  :root[data-theme="dark"] .signup-card.ob .foot-wrap{background:#171b21}
}