/* Sign-in and the setup wizard, the app's (lite-app auth-panel.tsx, setup-wizard-frame.tsx, wizard-progress.tsx,
   setup-task.tsx, and the Button, Field, Checkbox, Banner, Loading and Error they use), its Tailwind classes
   written out with its tokens (tokens/theme.css). The app's Inter is loaded under its own name, so no other page's type changes. */
@font-face {
  font-family: "Lite Inter";
  src: url("../assets/lite/InterVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
.auth-page, .lw-setup {
  --lw-ink: #172033;
  --lw-muted: #687386;
  --lw-border: #e5e3df;
  --lw-primary: #18243a;
  --lw-navy: #0d2741;
  --lw-gold: #f5c66c;
  --lw-success: #147a52;
  --lw-success-soft: #edf8f3;
  --lw-secondary: #f7f7f5;
  --lw-accent: #edf3fb;
  --lw-accent-ink: #2f62a4;
  --lw-danger: #a53d3d;
  --lw-shadow-sm: 0 1px 3px rgb(42 38 32 / 9%);
  color: var(--lw-ink);
  font-family: "Lite Inter", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.auth-page *, .auth-page *::before, .auth-page *::after,
.lw-setup *, .lw-setup *::before, .lw-setup *::after { box-sizing: border-box; }
.auth-page :where(h1, h2, h3, h4, p, ul, ol, li), .lw-setup :where(h1, h2, h3, h4, p, ul, ol, li) { margin: 0; padding: 0; }
.auth-page :where(button, input, select), .lw-setup :where(button, input, select) { font: inherit; color: inherit; letter-spacing: normal; }
.auth-page :focus-visible, .lw-setup :focus-visible { outline: 2px solid var(--lw-accent-ink); outline-offset: 3px; }
.lw-setup h1:focus, .auth-page h1:focus { outline: none; }

/* The app's spinner (LoaderCircle) on a busy button. */
.lw-spin { width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid rgb(255 255 255 / 35%); border-top-color: #fff; border-radius: 50%; animation: lw-spin .8s linear infinite; }
.lw-spin--ink { border-color: rgb(23 32 51 / 18%); border-top-color: var(--lw-ink); }
@keyframes lw-spin { to { transform: rotate(360deg); } }

/* ---------- Sign-in (auth-panel.tsx) ---------- */
.auth-page { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; background: #11223a; color: #fff; }
.auth-frame { display: grid; width: 100%; max-width: 1318px; min-height: 100vh; min-height: 100dvh; grid-template-rows: auto 1fr auto; margin: 0 auto; padding: 36px 32px; }
.auth-top { display: flex; min-width: 0; min-height: 44px; align-items: center; justify-content: space-between; gap: 20px; }
.auth-brand { display: flex; min-width: 0; align-items: center; gap: 16px; }
.auth-brand img { width: auto; height: 34px; flex-shrink: 0; }
.auth-lang { display: flex; flex-shrink: 0; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.auth-lang > span { color: rgb(255 255 255 / 25%); }
.auth-lang-btn { min-width: 44px; min-height: 44px; border: 0; border-radius: 9px; background: transparent; padding: 0 8px; color: #8f9db3 !important; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.auth-lang-btn[aria-pressed="true"] { color: #fff !important; }
.auth-lang-btn:hover { background: rgb(255 255 255 / 10%); }
.auth-page .auth-lang-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #f7bd58; }
.auth-middle { display: flex; align-items: center; padding: 32px 0; }
.auth-card { display: grid; width: 100%; overflow: hidden; border: 1px solid rgb(255 255 255 / 15%); border-radius: 22px; background: #11223a; box-shadow: 0 30px 80px rgb(2 12 28 / 28%); }
.auth-hero { position: relative; display: none; overflow: hidden; padding: 64px; }
.auth-rings { position: absolute; inset: 0; opacity: .55; }
.auth-rings span { position: absolute; border: 1px solid rgb(255 255 255 / 10%); border-radius: 50%; }
.auth-rings span:nth-child(1) { top: 4%; left: -9%; width: 300px; height: 300px; }
.auth-rings span:nth-child(2) { top: -9%; left: -18%; width: 500px; height: 500px; }
.auth-rings span:nth-child(3) { top: -21%; left: -31%; width: 720px; height: 720px; }
.auth-hero-copy { position: relative; z-index: 1; }
.auth-hero-title { max-width: 510px; font-size: clamp(2.6rem, 4vw, 3.45rem); font-weight: 700; line-height: 1.05; letter-spacing: -.045em; }
.auth-hero-title span { color: #f7bd58; }
.auth-hero-art { position: relative; z-index: 1; width: 100%; max-width: 510px; height: auto; margin-top: 40px; object-fit: contain; }
.auth-panel { display: flex; align-items: center; background: #fffdf9; padding: 56px 40px; color: #11223a; }
.auth-panel-in { display: grid; width: 100%; max-width: 455px; gap: 36px; margin: 0 auto; }
.auth-titles { display: grid; gap: 8px; }
.auth-titles h1 { font-size: clamp(1.8rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.25; letter-spacing: -.035em; }
.auth-titles p { color: #68768b; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.auth-titles b { color: #11223a; font-weight: 600; }
.auth-stage { position: relative; display: grid; min-width: 0; }
.auth-body { grid-area: 1 / 1; display: grid; min-width: 0; align-self: start; gap: 20px; }
.auth-body.is-outgoing { position: absolute; inset: 0 0 auto; pointer-events: none; }
.auth-form { display: grid; gap: 20px; }
.auth-field { display: grid; gap: 8px; }
.auth-label { color: var(--lw-ink); font-size: 14px; font-weight: 600; }
.auth-input { width: 100%; min-width: 0; height: 48px; border: 1px solid #d6dce5; border-radius: 9px; background: #fff; padding: 4px 14px; color: var(--lw-ink); font-size: 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.auth-input::placeholder { color: #98a2b1; }
.auth-page .auth-input:focus-visible { outline: none; border-color: #536d94; box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgb(83 109 148 / 20%); }
.auth-input[aria-invalid="true"] { border-color: var(--lw-danger); }
.auth-input:disabled { opacity: .5; }
.auth-input--code { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: .32em; }
.auth-field-error { color: var(--lw-danger); font-size: 12px; line-height: 1.6; }
.auth-submit { display: inline-flex; width: 100%; height: 52px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 9px; background: var(--lw-primary); padding: 0 24px; color: #fff !important; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .15s ease; }
.auth-submit:hover { background: rgb(24 36 58 / 90%); }
.auth-submit:disabled { cursor: not-allowed; opacity: .5; }
.auth-submit[aria-busy="true"] { opacity: .8; }
.auth-page .auth-submit:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgb(24 36 58 / 30%); }
.auth-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: #68768b; font-size: 12px; }
.auth-or::before, .auth-or::after { content: ""; border-top: 1px solid var(--lw-border); }
.auth-providers { display: grid; gap: 12px; }
/* Google's button, light theme, rectangular (Sign in with Google branding guidelines): fill #FFFFFF, stroke
   #747775 1px inside, Google Sans Medium 14/20 in #1F1F1F, the standard G at 20px, 12px from the edge and 10px
   from the words; 40px, the size Google's own large button is. Hover, focus and disabled are the states
   Google's own button takes (an #303030 layer at 8% and 12%, its two-part shadow, content at 38%). */
@font-face {
  font-family: "Google Sans";
  src: url("../assets/fonts/GoogleSans-Medium-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
.auth-google { position: relative; display: flex; width: 100%; height: 40px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #747775; border-radius: 4px; background: #fff; padding: 0 12px; color: #1f1f1f !important; font-family: "Google Sans", Roboto, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: .25px; cursor: pointer; transition: box-shadow .218s; }
.auth-google::before { content: ""; position: absolute; inset: 0; background: #303030; opacity: 0; transition: opacity .218s; }
.auth-google-in { position: relative; display: inline-flex; min-width: 0; align-items: center; gap: 10px; }
.auth-google-in > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-google .auth-provider-logo { width: 20px; height: 20px; flex: 0 0 20px; }
.auth-google:hover { box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%); }
.auth-google:hover::before { opacity: .08; }
.auth-google:focus-visible::before { opacity: .12; }
.auth-google:disabled { cursor: default; border-color: rgb(31 31 31 / 12%); background: rgb(255 255 255 / 38%); box-shadow: none; }
.auth-google:disabled::before { opacity: 0; }
.auth-google:disabled .auth-google-in { opacity: .38; }
/* Apple's button, black (Sign in with Apple, Human Interface Guidelines, and the web button Apple's
   appleid.auth.js draws): black fill, Apple's own title with its logo, half the button's height, centred, at
   least 8% from each side; as tall as Google's, so neither is the smaller. */
.auth-apple { display: flex; width: 100%; height: 40px; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: #000; padding: 0 8%; cursor: pointer; }
.auth-apple-title { display: block; width: auto; max-width: 100%; height: 50%; }
.auth-apple:disabled { cursor: default; }
.auth-apple:disabled .auth-apple-title { opacity: .38; }
.auth-page .auth-google:focus-visible, .auth-page .auth-apple:focus-visible { outline: 2px solid var(--lw-accent-ink); outline-offset: 2px; }
.auth-status { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--lw-muted); font-size: 14px; }
.auth-quiet { justify-self: center; min-height: 44px; border: 0; border-radius: 9px; background: transparent; padding: 0 12px; color: var(--lw-accent-ink) !important; font-size: 14px; font-weight: 600; cursor: pointer; }
.auth-quiet:hover { text-decoration: underline; text-underline-offset: 4px; }
.auth-foot { min-width: 0; padding-bottom: 4px; }

/* ---------- A new person's steps in the same panel (register.js) ----------
   The big self-serve products' one short form per screen, in this card's own fields and button: the field,
   the button, and under it the one quiet line it carries (the terms, or where payment happens). */
.reg-submit { display: grid; gap: 12px; }
.reg-terms { color: #68768b; font-size: 12.5px; line-height: 1.55; text-align: center; }
.reg-terms a { color: var(--lw-ink) !important; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(23 32 51 / 30%); text-underline-offset: 3px; }
.reg-terms a:hover { text-decoration-color: currentColor; }
.reg-hint { color: #68768b; font-size: 12px; line-height: 1.5; }
.reg-place { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; gap: 12px; }
.auth-select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23687386' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; padding-right: 36px; text-overflow: ellipsis; cursor: pointer; }
.auth-select:invalid, .auth-select:has(option[value=""]:checked) { color: #98a2b1; }
.auth-select option { color: var(--lw-ink); }
.reg-periods { display: grid; gap: 10px; min-width: 0; margin: 0; border: 0; padding: 0; }
.reg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reg-period { position: relative; display: grid; min-height: 60px; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid #d6dce5; border-radius: 9px; background: #fff; padding: 0 16px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.reg-period:hover { background: #fbfaf7; }
.reg-period input { position: absolute; width: 20px; height: 20px; margin: 0; opacity: 0; }
.reg-radio { display: grid; width: 20px; height: 20px; place-items: center; border: 1.5px solid #98a2b1; border-radius: 50%; background: #fff; transition: border-color .15s ease; }
.reg-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lw-primary); transform: scale(0); transition: transform .16s cubic-bezier(.22,.8,.25,1); }
.reg-period.is-on, .reg-period:has(input:checked) { border-color: var(--lw-primary); box-shadow: inset 0 0 0 1px var(--lw-primary); }
.reg-period:has(input:checked) .reg-radio { border-color: var(--lw-primary); }
.reg-period:has(input:checked) .reg-radio::after { transform: none; }
.reg-period:has(input:focus-visible) { outline: 2px solid var(--lw-accent-ink); outline-offset: 3px; }
.reg-period-name { font-size: 15px; font-weight: 600; }
.reg-period-price { color: var(--lw-ink); font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.reg-period:not(:has(input:checked)) .reg-period-price { color: #68768b; }
@media (max-width: 420px) {
  .reg-place { grid-template-columns: minmax(0, 1fr); }
  .reg-period { grid-template-columns: 20px minmax(0, 1fr); padding: 10px 14px; }
  .reg-period-price { grid-column: 2; text-align: left; }
}
/* The app's LegalLinks: muted and small under the wizard's tasks; on the sign-in page's navy, its inverse. */
.lw-legal { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; color: var(--lw-muted); font-size: 12px; }
.lw-legal a { color: inherit !important; text-decoration: none; text-underline-offset: 4px; }
.lw-legal a:hover { color: var(--lw-ink) !important; text-decoration: underline; }
.lw-legal--inverse { gap: 8px 24px; color: #aebbd0; font-size: 14px; }
.lw-legal--inverse a:hover { color: #fff !important; }
@media (min-width: 768px) {
  .auth-card { min-height: 570px; grid-template-columns: 52% 48%; }
  .auth-hero { display: flex; flex-direction: column; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .auth-frame { padding: 48px 40px; }
  .auth-middle { padding: 48px 0; }
  .auth-hero { padding: 66px; }
  .auth-panel { padding: 56px 78px; }
}
@media (max-width: 767px) {
  .auth-frame { padding: 20px 16px; }
  .auth-middle { padding: 24px 0; }
  .auth-input { font-size: 16px; }
}
@media (max-width: 639px) {
  .auth-top { gap: 8px; }
  .auth-brand { gap: 10px; }
  .auth-brand img { height: 28px; }
  .auth-lang { gap: 0; }
  .auth-panel { padding: 36px 24px; }
  .auth-panel-in { gap: 28px; }
  .lw-legal--inverse { gap: 8px 16px; font-size: 12px; }
}

/* ---------- The wizard in the shell's main column (setup-wizard-frame.tsx) ---------- */
.tenant-shell.in-setup .main-content { padding: 0; background: #fbfaf7; }
/* The progress column is the shell's sidebar during setup (setup-sidebar.css); the step fills the main column. */
.lw-setup { min-height: 100vh; min-height: 100dvh; background: #fbfaf7; }
.lw-rail-art { width: 100%; max-height: 42vh; margin-top: auto; object-fit: contain; object-position: bottom; opacity: .95; }
.lw-progress { min-width: 0; }
.lw-progress-title { display: block; margin-bottom: 20px; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -.035em; }
.lw-steps { display: grid; gap: 4px; list-style: none; }
.lw-step { position: relative; display: grid; min-height: 80px; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: 12px; }
.lw-step + .lw-step::before { content: ""; position: absolute; top: -12px; left: 21.6px; height: 24px; border-left: 2px dotted rgb(255 255 255 / 35%); }
.lw-step-mark { display: grid; width: 44px; height: 44px; place-items: center; border: 2px solid rgb(255 255 255 / 45%); border-radius: 50%; color: rgb(255 255 255 / 75%); font-size: 14px; font-weight: 600; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.lw-step-mark .lw-icon { width: 16px; height: 16px; }
.lw-step-label { min-width: 0; color: rgb(255 255 255 / 60%); font-size: 14px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.lw-step.is-current .lw-step-mark { border-color: var(--lw-gold); background: var(--lw-gold); color: var(--lw-navy); }
.lw-step.is-current .lw-step-label { color: #fff; }
.lw-step.is-done .lw-step-mark { border-color: rgb(255 255 255 / 70%); background: rgb(255 255 255 / 10%); color: #fff; }
/* A step the person's last connection finished: its tick arrives. */
.lw-step.is-just-done .lw-step-mark .lw-icon { animation: lw-tick .32s cubic-bezier(.22,.8,.25,1) both; }
@keyframes lw-tick { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.lw-content { min-width: 0; padding: 28px 32px; }
.lw-content-in { display: flex; width: 100%; max-width: 800px; min-width: 0; flex-direction: column; margin: 0 auto; padding-bottom: 28px; }
.lw-stage { position: relative; display: grid; min-width: 0; }
.lw-view { grid-area: 1 / 1; min-width: 0; }
.lw-view.is-outgoing { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.lw-head { display: grid; gap: 6px; }
.lw-head h1 { color: var(--lw-ink); font-size: clamp(1.75rem, 2.5vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -.04em; }
.lw-head p { color: var(--lw-muted); font-size: 14px; line-height: 1.625; }
/* The free trial's one quiet line under the description: its clock and the date it ends. */
.lw-head .lw-trial { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: #4f5b6e; font-size: 13px; }
.lw-trial .lw-icon { width: 15px; height: 15px; color: #a86d05; }
/* Facebook returned more Ad Accounts than the Business may connect (the wizard's Meta card, Koneksi's flow). */
.lw-refusal { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; border: 1px solid #e8a9a9; border-radius: 9px; background: #fff3f1; padding: 10px 12px; color: #5c2222; font-size: 13px; line-height: 1.5; text-align: left; outline: none; }
.lw-refusal-icon { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; background: var(--lw-danger, #a53d3d); color: #fff; }
.lw-refusal-icon .lw-icon { width: 14px; height: 14px; }
.lw-refusal:focus-visible { box-shadow: 0 0 0 3px rgb(165 61 61 / 25%); }
.lw-body { min-width: 0; margin-top: 20px; }
.lw-icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons (button.tsx): default, outline, whatsapp; touch is 44px. */
.lw-btn { display: inline-flex; height: 40px; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 9px; padding: 8px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, opacity .15s ease; }
.lw-btn--touch { height: 44px; padding: 0 12px; }
.lw-btn--full { width: 100%; }
.lw-btn--primary { background: var(--lw-primary); color: #fff !important; }
.lw-btn--primary:hover { background: rgb(24 36 58 / 90%); }
.lw-btn--wa { background: #0b7a3e; color: #fff !important; }
.lw-btn--wa:hover { background: #096a35; }
.lw-btn--wa:active { background: #07572c; }
.lw-btn--outline { border: 1px solid var(--lw-border); background: #f8f8f6; color: var(--lw-ink) !important; box-shadow: 0 1px 2px rgb(0 0 0 / 5%); }
.lw-btn--outline:hover { background: var(--lw-accent); }
.lw-btn:disabled { cursor: not-allowed; opacity: .5; }
.lw-btn[aria-busy="true"] { cursor: progress; opacity: .8; }
.lw-setup .lw-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgb(24 36 58 / 30%); }
.lw-setup .lw-btn--wa:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgb(11 122 62 / 35%); }
.lw-btn-glyph { width: 20px; height: 20px; object-fit: contain; }

/* The WhatsApp step (SetupTask, SetupInfoPanel, SetupNoticeList, Checkbox row). */
.lw-task { display: grid; gap: 12px; }
.lw-card { border: 1px solid var(--lw-border); border-radius: 13px; background: #fff; box-shadow: var(--lw-shadow-sm); }
.lw-info { padding: 16px; }
.lw-info-row, .lw-notice { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 12px; }
.lw-round { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: #f1f3f5; color: var(--lw-navy); }
.lw-info-copy { display: grid; gap: 4px; }
.lw-info-copy h3, .lw-list h3 { font-size: 16px; font-weight: 600; line-height: 1.25; }
.lw-info-copy h4 { font-size: 14px; font-weight: 600; line-height: 1.25; }
.lw-info-copy p { font-size: 14px; line-height: 1.625; }
.lw-info-row p { color: var(--lw-muted); }
.lw-notice { margin-top: 12px; border: 1px solid #edc66f; border-radius: 9px; background: #fff5d9; padding: 12px 14px; }
.lw-notice-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #a86d05; color: #fff; }
.lw-list { overflow: hidden; }
.lw-list header { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: 12px; border-bottom: 1px solid var(--lw-border); padding: 12px 16px; }
.lw-list ul { list-style: none; }
.lw-list li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.625; }
.lw-list li + li { border-top: 1px solid var(--lw-border); }
.lw-list-icon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--lw-navy); }
.lw-check { position: relative; display: flex; width: 100%; min-height: 44px; align-items: center; gap: 10px; border-radius: 9px; padding: 8px 10px; font-size: 14px; line-height: 1.625; cursor: pointer; transition: background-color .15s ease; }
.lw-check:hover { background: var(--lw-accent); }
.lw-check input { position: absolute; width: 18px; height: 18px; margin: 0; opacity: 0; }
.lw-box { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; border: 1px solid var(--lw-border); border-radius: 4px; background: #fff; color: transparent; transition: background-color .15s ease, border-color .15s ease; }
.lw-box .lw-icon { width: 12px; height: 12px; stroke-width: 2.4; }
.lw-check input:checked + .lw-box { border-color: var(--lw-primary); background: var(--lw-primary); color: #fff; }
.lw-check input:focus-visible + .lw-box { outline: 2px solid var(--lw-accent-ink); outline-offset: 3px; }
.lw-task > .lw-legal, .lw-ads > .lw-legal { margin-top: 12px; }

/* The ads step (SetupProviderGrid, SetupProviderCard) and the success Banner. */
.lw-ads { display: grid; gap: 24px; }
.lw-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lw-provider { display: flex; min-width: 0; min-height: 328px; flex-direction: column; align-items: center; border: 1px solid var(--lw-border); border-radius: 16px; background: rgb(255 255 255 / 90%); padding: 28px; text-align: center; box-shadow: var(--lw-shadow-sm); transition: border-color .2s ease, box-shadow .2s ease; }
.lw-provider.is-connected { border-color: rgb(20 122 82 / 50%); box-shadow: 0 0 0 2px rgb(20 122 82 / 10%), var(--lw-shadow-sm); }
.lw-provider-tile { display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid var(--lw-border); border-radius: 16px; background: #fff; box-shadow: var(--lw-shadow-sm); }
.lw-provider-head { display: grid; justify-items: center; gap: 10px; margin-top: 20px; }
.lw-provider-head h3 { font-size: 16px; font-weight: 600; line-height: 1.25; }
.lw-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--lw-secondary); padding: 4px 10px; color: var(--lw-muted); font-size: 12px; }
.lw-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--lw-muted); }
.lw-pill.is-on { background: var(--lw-success-soft); color: var(--lw-success); }
.lw-pill.is-on i { background: var(--lw-success); }
.lw-provider-copy { min-height: 48px; margin-top: 20px !important; color: var(--lw-muted); font-size: 14px; line-height: 1.625; }
.lw-provider-action { width: 100%; margin-top: auto; padding-top: 24px; }
.lw-mark { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; }
.lw-mark img { width: 100%; height: 100%; object-fit: contain; }
.lw-mark--lg { width: 36px; height: 36px; }
.lw-mark--md { width: 24px; height: 24px; }
.lw-mark--meta img { width: 135%; max-width: none; }
.lw-banner { display: flex; align-items: center; gap: 12px; border: 1px solid #9fceb9; border-radius: 13px; background: #f1faf6; padding: 16px; text-align: left; box-shadow: var(--lw-shadow-sm); }
.lw-banner strong { min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.lw-banner-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 50%; background: var(--lw-success); color: #fff; }
.lw-banner-icon .lw-icon { width: 16px; height: 16px; }

/* The done step (SetupCompletion, SetupWizardActions). */
.lw-done { display: grid; min-height: 384px; align-content: center; justify-items: center; border-radius: 16px; background: rgb(255 255 255 / 90%); padding: 36px; }
.lw-done-mark { display: grid; width: 92px; height: 92px; place-items: center; border-radius: 50%; background: var(--lw-success-soft); color: var(--lw-success); }
.lw-done-list { width: 100%; max-width: 520px; margin-top: 24px; overflow: hidden; border: 1px solid var(--lw-border); border-radius: 16px; }
.lw-done-row { display: grid; min-height: 64px; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 16px; }
.lw-done-row + .lw-done-row { border-top: 1px solid var(--lw-border); }
.lw-done-row strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lw-done-row small { color: var(--lw-success); font-size: 12px; }
.lw-done-note { margin-top: 24px !important; color: var(--lw-muted); font-size: 12px; line-height: 1.625; text-align: center; }
.lw-actions { display: flex; min-height: 72px; align-items: center; justify-content: flex-end; gap: 16px; }
.lw-actions .lw-btn { height: 44px; min-width: 208px; }

/* Google's page in the step, drawn in the app's card. */
.lw-flow { display: grid; justify-items: start; gap: 12px; padding: 24px; }
.lw-flow-provider { display: inline-flex; align-items: center; gap: 8px; color: var(--lw-muted); font-size: 12px; font-weight: 600; }
.lw-flow h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.lw-flow p { color: var(--lw-muted); font-size: 14px; line-height: 1.625; }
.lw-flow .lacak-empty { width: 100%; }
.lw-field { display: grid; width: 100%; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 600; }
.lw-select { width: 100%; height: 48px; border: 1px solid #d6dce5; border-radius: 9px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23687386' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; padding: 0 40px 0 14px; appearance: none; color: var(--lw-ink); font-size: 14px; font-weight: 400; }
.lw-actions .lw-btn--outline { min-width: 120px; }

/* The app's Loading and Error. */
.lw-loading { display: grid; gap: 12px; border: 1px solid var(--lw-border); border-radius: 13px; background: #fffdfa; padding: 20px; box-shadow: var(--lw-shadow-sm); }
.lw-loading span { height: 14px; border-radius: 999px; background: #e8ebee; animation: lw-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.lw-loading span:last-child { width: 66%; background: #dfe4e8; }
@keyframes lw-pulse { 50% { opacity: .5; } }
.lw-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border: 1px solid #e8a9a9; border-radius: 13px; background: #fff3f1; padding: 16px; box-shadow: var(--lw-shadow-sm); }
.lw-error strong { flex: 1; min-width: 160px; font-size: 14px; font-weight: 600; }
.lw-error-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--lw-danger); color: #fff; }

@media (max-width: 639px) {
  .lw-setup { min-height: 0; }
  .lw-content { padding: 20px 16px; }
  .lw-provider-grid { grid-template-columns: minmax(0, 1fr); }
  .lw-provider { min-height: 296px; padding: 24px 20px; }
  .lw-done { min-height: 352px; padding: 16px; }
  .lw-done-row { grid-template-columns: 2.25rem minmax(0, 1fr); padding-top: 12px; }
  .lw-done-row small { grid-column: 2; padding-bottom: 12px; }
  .lw-actions { min-height: 64px; gap: 10px; }
  .lw-actions { flex-wrap: wrap; }
  .lw-actions .lw-btn { width: 100%; min-width: 0; flex: 1; }
  /* Three actions do not fit a row: the primary takes its own, last, under the thumb. */
  .lw-actions .lw-btn--primary { flex-basis: 100%; }
}

/* Reduced motion: nothing moves; a busy control keeps its words, and its spinner stands still. */
@media (prefers-reduced-motion: reduce) {
  .auth-page *, .lw-setup * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Koneksi's buttons waiting for a provider's window keep their spinner apart from their words. */
.lacak-connect .btn[aria-busy="true"] { gap: 8px; }