/* Pengaturan. The grid, the sub-page header and the body panel are the CRM's own rules
   (pages-settings.css, pages-template-workspace.css, chassis.css, product-ui.css, redesign.css), applied
   as they are; this sheet adds only what the CRM's sheets do not carry for Lacak:
   - the three cards' tile tints, taken from the CRM's own tints (Koneksi keeps the CRM's Koneksi tint);
   - Lite's connection banners above Koneksi (dashboard.css's copy, scoped here);
   - Lite's standalone connect page (.onboarding-page and its illustration) inside the shell;
   - the widgets inside each sub-page: Koneksi's health strip, WhatsApp panel, slot meters and account
     widgets; Link pelacakan's link widgets and stepped script; Bisnis's identity and Target ROAS control;
   - Link pelacakan's drawer and dialogs;
   - what a finished action changed, marked once. */

/* ---------- Grid and header ---------- */
.settings-hub-tile--koneksi { background: #e9ecfb; color: #4a55c4; }
.settings-hub-tile--link { background: #e6effb; color: #2f62a4; }
.settings-hub-tile--bisnis { background: #fdefe0; color: #c26a15; }
.lacak-settings .page-head { margin-bottom: 24px; }
/* The sliding surfaces stay inside the page while they move. */
.lacak-settings.is-transitioning .settings-stage { overflow-x: clip; }
.lacak-settings .settings-detail-title > strong { display: block; }

/* ---------- Lite's banners, drawn as the Dashboard draws them (dashboard.css), so one banner has one look ---------- */
.lacak-settings .connection-banners { display: grid; gap: 10px; margin-bottom: 16px; }
.lacak-settings .connection-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; overflow: hidden; border: 1px solid #efd5d5; border-radius: 14px; background: #fff1f1; padding: 14px 16px 14px 20px; color: #8f3131; }
.lacak-settings .connection-banner::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: currentColor; }
.lacak-settings .connection-banner.ads { border-color: #f0dfbd; background: #fff7e7; color: #95600b; }
.lacak-settings .connection-banner b { display: block; font-size: 13.5px; font-weight: 700; }
.lacak-settings .connection-banner p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; }
.lacak-settings .connection-banner .btn { flex: 0 0 auto; min-height: 40px; border: 1px solid currentColor; border-radius: 10px; background: transparent; padding: 0 14px; color: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color var(--m-hover) ease; }
.lacak-settings .connection-banner .btn:hover { background: rgba(255, 255, 255, .6); }
.lacak-settings .connection-banner .btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* On Koneksi the failed card is the one loud thing, so the banners above it keep their words, their rule
   and their action in their colour, on the page's white instead of a tinted ground. */
.lacak-settings .connection-banner, .lacak-settings .connection-banner.ads { border-color: var(--line); background: #fff; }
.lacak-settings .connection-banner p { color: var(--muted); }
.lacak-settings .connection-banner .btn:hover { background: var(--soft); }
/* The banners' place holds their margin, so their height can open and close as one (settings.js swapBanners). */
.lacak-banner-slot { display: flow-root; }

/* ---------- Koneksi's view under the banners: the list, or a step of the flow ----------
   It changes as the CRM's settings pages change (pages-template-workspace.css settings-surface-*): 180ms,
   the leaving view 18px the way the person goes, the next one 22px from the other side. */
.lacak-view-stage { display: grid; min-width: 0; }
.lacak-view { min-width: 0; grid-area: 1 / 1; }
.lacak-view--outgoing { z-index: 1; pointer-events: none; }
.lacak-view--incoming { z-index: 2; }
.lacak-view-stage.is-transitioning { overflow-x: clip; }
.lacak-view-stage.direction-forward > .lacak-view--outgoing { animation: settings-surface-out .18s cubic-bezier(.22, .7, .3, 1) both; }
.lacak-view-stage.direction-forward > .lacak-view--incoming { animation: settings-surface-in .18s cubic-bezier(.22, .7, .3, 1) both; }
.lacak-view-stage.direction-back > .lacak-view--outgoing { animation: settings-surface-out-back .18s cubic-bezier(.22, .7, .3, 1) both; }
.lacak-view-stage.direction-back > .lacak-view--incoming { animation: settings-surface-in-back .18s cubic-bezier(.22, .7, .3, 1) both; }
/* ---------- Lite's standalone connect page ---------- */
.lite-setup.lacak-connect { min-width: 0; min-height: 0; background: transparent; }
.lacak-connect .onboarding-shell { width: min(860px, 100%); margin: 0 auto; }
.lacak-connect .connection-flow .onboarding-actions-group { margin-right: 0; flex-wrap: wrap; }
.lacak-connect .onboarding-page { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 12px 34px rgba(23, 32, 51, .07); }
.lacak-connect .onboarding-page-main { display: grid; min-height: 410px; grid-template-columns: minmax(0, 1fr) 290px; }
.lacak-connect .onboarding-copy { display: flex; min-width: 0; flex-direction: column; padding: 36px 30px; }
.lacak-connect .onboarding-provider { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-bottom: 18px; border-radius: 999px; background: var(--soft); padding: 6px 10px; color: var(--muted); font-size: 10px; font-weight: 800; }
.lacak-connect .onboarding-provider svg { width: 18px; height: 18px; }
.lacak-connect .onboarding-copy h2 { margin: 0; font-size: 25px; line-height: 1.14; letter-spacing: -.03em; }
.lacak-connect .onboarding-copy h2:focus { outline: none; }
.lacak-connect .onboarding-copy > p { margin: 11px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.lacak-connect .onboarding-form .empty-action { margin: 0; }
.lacak-connect .onboarding-visual-wrap { display: grid; min-width: 0; place-items: center; background: #f5f7f9; padding: 24px; container-type: inline-size; }

/* Lite's illustrations, redrawn in markup. One em is a hundredth of the picture's width, so the whole
   picture scales with its column as the PNG did; only text sets its own size. */
.lacak-illus { --accent: #1a73e8; --done: #1e8e3e; --ink: #0f1d3a; --mute: #6b7385; --rule: #e6e9ee; width: 100%; font-size: 1cqw; color: var(--ink); user-select: none; }
.lacak-illus--meta { --accent: #0866ff; --done: #0866ff; }
.lacak-illus--whatsapp { --accent: #1b9e4b; --done: #1b9e4b; }
.lacak-illus .li-card { display: grid; grid-template-columns: 15.5em minmax(0, 1fr); grid-template-rows: auto 8em; overflow: hidden; border: 1px solid #dfe4ea; border-radius: 1.4em; background: #fff; box-shadow: 0 12px 30px rgba(23, 32, 51, .09); line-height: 1.3; }
.lacak-illus svg.li-glyph { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lacak-illus b, .lacak-illus small { display: block; }
.lacak-illus small { color: var(--mute); }
.lacak-illus em { font-style: normal; color: #1e8e3e; font-weight: 700; }

.lacak-illus .li-steps { margin: 0; padding: 9em 0 0 2.6em; border-right: 1px solid var(--rule); list-style: none; }
.lacak-illus .li-steps li { position: relative; display: flex; align-items: center; gap: 1em; height: 5.9em; color: #4b5366; font-size: 1.45em; }
.lacak-illus .li-steps li + li::before { content: ""; position: absolute; left: .8em; bottom: calc(50% + 1em); height: 3.9em; border-left: 1px dashed #c9ced8; }
.lacak-illus .li-dot { display: grid; width: 1.6em; height: 1.6em; place-items: center; border-radius: 50%; background: #c3c8d1; color: #fff; font-size: .8em; font-weight: 700; }
.lacak-illus .li-steps li.active, .lacak-illus .li-steps li.done { color: var(--ink); font-weight: 650; }
.lacak-illus .li-steps li.active .li-dot { background: var(--accent); }
.lacak-illus .li-steps li.done .li-dot { background: var(--done); }
.lacak-illus .li-dot svg.li-glyph { width: 1.1em; height: 1.1em; stroke-width: 3; }

.lacak-illus .li-main { display: grid; grid-template-columns: minmax(0, 1fr) 33em; min-width: 0; padding: 5em 2.4em 3.4em 4.4em; }
.lacak-illus .li-copy { min-width: 0; padding-right: 3.6em; }
.lacak-illus .li-logo { display: block; width: 6.4em; height: 6.4em; margin-bottom: 2.6em; }
.lacak-illus .li-logo svg { width: 100%; height: 100%; }
.lacak-illus .li-h { font-size: 3em; font-weight: 760; line-height: 1.12; letter-spacing: -.02em; }
.lacak-illus .li-copy > p { margin: .55em 0 0; color: var(--mute); font-size: 1.45em; line-height: 1.45; }
.lacak-illus .li-feature { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); align-items: center; gap: 1.6em; margin-top: 2em; }
.lacak-illus .li-tile { display: grid; width: 4.6em; height: 4.6em; place-items: center; border-radius: .8em; background: #f1f3f6; color: var(--accent); font-size: 1em; }
.lacak-illus .li-tile svg.li-glyph { width: 2.3em; height: 2.3em; }
.lacak-illus .li-feature b { font-size: 1.45em; }
.lacak-illus .li-feature small { margin-top: .2em; font-size: 1.25em; }
.lacak-illus .li-cta { display: flex; align-items: center; justify-content: center; gap: .7em; width: 100%; height: 3.4em; margin-top: 1.7em; border-radius: .4em; background: var(--accent); color: #fff; font-size: 1.6em; font-weight: 700; }
.lacak-illus .li-cta svg { width: 1.4em; height: 1.4em; padding: .15em; border-radius: .25em; background: #fff; }
.lacak-illus .li-cta svg.li-glyph { padding: 0; background: none; stroke-width: 2.6; }
.lacak-illus .li-note { display: flex; align-items: center; gap: .6em; margin: 1.1em 0 0; color: var(--mute); font-size: 1.3em; }
.lacak-illus .li-label { margin: 2.2em 0 .9em; font-size: 1.45em; font-weight: 700; }
.lacak-illus .li-pick { display: flex; align-items: center; gap: 1.3em; margin-bottom: 1.4em; border: 2px solid var(--accent); border-radius: .8em; padding: 1.3em 1.6em; }
.lacak-illus .li-pick--plain { border: 1px solid var(--rule); }
.lacak-illus .li-check { display: grid; width: 2.2em; height: 2.2em; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; }
.lacak-illus .li-check svg.li-glyph { width: 1.4em; height: 1.4em; stroke-width: 3; }
.lacak-illus .li-pick--radio .li-check { border: 2px solid #c3c8d1; background: #fff; }
.lacak-illus .li-avatar { display: grid; width: 3.8em; height: 3.8em; flex: 0 0 auto; place-items: center; border-radius: .7em; background: #e8f0fe; color: var(--accent); font-size: 1em; }
.lacak-illus .li-avatar, .lacak-illus .li-avatar { font-weight: 600; }
.lacak-illus .li-avatar svg.li-glyph { width: 2em; height: 2em; }
.lacak-illus--whatsapp .li-avatar { border-radius: 50%; background: #e7f6ec; }
.lacak-illus--google .li-avatar { border-radius: 50%; }
.lacak-illus .li-pick-copy { min-width: 0; flex: 1; }
.lacak-illus .li-pick-copy b { overflow: hidden; font-size: 1.4em; text-overflow: ellipsis; white-space: nowrap; }
.lacak-illus .li-pick-copy small { margin-top: .2em; font-size: 1.2em; }
.lacak-illus .li-pick > svg.li-glyph { width: 1.8em; height: 1.8em; color: #4b5366; }
.lacak-illus .li-badge { border-radius: 99em; background: #eef0f3; padding: .3em .8em; color: #4b5366; font-size: 1.15em; }
.lacak-illus .li-active { display: flex; align-items: center; gap: .4em; color: #3b4356; font-size: 1.25em; }
.lacak-illus .li-active i, .lacak-illus .li-tr i, .lacak-illus .li-legend i { width: .6em; height: .6em; border-radius: 50%; background: #1e8e3e; }
.lacak-illus .li-link { display: block; margin-top: 1em; color: #1a73e8; font-size: 1.3em; }

.lacak-illus .li-side { min-width: 0; padding-left: 3em; border-left: 1px solid var(--rule); }
.lacak-illus .li-panel { position: relative; border: 1px solid var(--rule); border-radius: 1.2em; padding: 1.8em 1.4em; }
.lacak-illus .li-panel-title { font-size: 1.35em; font-weight: 700; }
.lacak-illus .li-panel-title--bare { margin: 9em 0 1.2em; }
.lacak-illus .li-panel-sub { margin-top: .2em; font-size: 1.1em; }
.lacak-illus .li-chip { position: absolute; top: 1.5em; right: 1.4em; display: flex; align-items: center; gap: .3em; border: 1px solid var(--rule); border-radius: .4em; padding: .3em .6em; color: #4b5366; font-size: 1em; }
.lacak-illus--google .li-chip { position: static; display: inline-flex; margin-top: 1.4em; }
.lacak-illus--meta .li-panel > .li-panel-title { overflow: hidden; padding-right: 11em; text-overflow: ellipsis; white-space: nowrap; }
.lacak-illus .li-tabs, .lacak-illus .li-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.6em; }
.lacak-illus .li-tabs { overflow: hidden; border: 1px solid var(--rule); border-radius: .5em; }
.lacak-illus .li-tabs span, .lacak-illus .li-tiles span { min-width: 0; padding: .9em .8em; }
.lacak-illus .li-tabs span + span { border-left: 1px solid var(--rule); }
.lacak-illus .li-tabs .is-on { background: var(--accent); }
.lacak-illus .li-tabs .is-on small, .lacak-illus .li-tabs .is-on b { color: #fff; }
.lacak-illus .li-tiles { gap: .8em; }
.lacak-illus .li-tiles span { border: 1px solid var(--rule); border-radius: .6em; }
.lacak-illus .li-tabs small, .lacak-illus .li-tiles small, .lacak-illus .li-grid4 small { overflow: hidden; font-size: .95em; text-overflow: ellipsis; white-space: nowrap; }
.lacak-illus .li-tabs b, .lacak-illus .li-tiles b { margin-top: .3em; overflow: hidden; font-size: 1.1em; text-overflow: ellipsis; white-space: nowrap; }
.lacak-illus .li-tabs span, .lacak-illus .li-tiles span { padding-inline: .6em; }
.lacak-illus .li-tiles em { display: block; margin-top: .3em; font-size: .9em; }
.lacak-illus .li-legend { display: flex; gap: 1.6em; margin-top: 1.6em; color: var(--mute); font-size: 1em; }
.lacak-illus .li-legend span { display: flex; align-items: center; gap: .4em; }
.lacak-illus .li-legend i { background: var(--accent); }
.lacak-illus .li-legend .is-second i { background: #b8bec9; }
.lacak-illus .li-chart { position: relative; height: 10em; margin-top: 1.4em; border-bottom: 1px solid var(--rule); }
.lacak-illus .li-chart--area { height: 9em; background: linear-gradient(transparent 30%, #eef4fe); }
.lacak-illus svg.li-line { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--accent); stroke-width: 1.6; overflow: visible; }
.lacak-illus svg.li-line.is-second { stroke: #b8bec9; }
.lacak-illus .li-ticks { display: flex; justify-content: space-between; margin-top: .5em; color: var(--mute); font-size: .95em; }
.lacak-illus .li-table { margin-top: 1.4em; }
.lacak-illus .li-tr { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); gap: .6em; align-items: center; padding: .75em 0; border-top: 1px solid var(--rule); font-size: 1em; font-variant-numeric: tabular-nums; }
.lacak-illus .li-tr > span { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.lacak-illus .li-tr > span:first-child { display: flex; align-items: center; gap: .5em; text-align: left; font-weight: 600; }
.lacak-illus .li-tr > span:first-child i { flex: 0 0 auto; background: var(--accent); }
.lacak-illus--google .li-tr > span:first-child i { background: #1e8e3e; }
.lacak-illus .li-th { border-top: 0; color: var(--mute); }
.lacak-illus .li-th > span:first-child { font-weight: 400; }
.lacak-illus .li-metrics { margin-top: 1.4em; border: 1px solid var(--rule); border-radius: .6em; }
.lacak-illus .li-metric { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto 5em; align-items: center; gap: .8em; padding: 1.1em 1em; font-size: 1.2em; }
.lacak-illus .li-metric + .li-metric { border-top: 1px solid var(--rule); }
.lacak-illus .li-metric b { font-size: 1.15em; font-weight: 600; font-variant-numeric: tabular-nums; }
.lacak-illus .li-metric em { font-size: .9em; text-align: right; }
.lacak-illus .li-metric-icon { color: var(--accent); }
.lacak-illus .li-metric-icon svg.li-glyph { width: 1.5em; height: 1.5em; }
.lacak-illus .li-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6em 1.6em; }
.lacak-illus .li-grid4 > span { position: relative; min-width: 0; padding-bottom: 4em; }
.lacak-illus .li-grid4 small { font-size: 1.2em; }
.lacak-illus .li-grid4 b { margin-top: .3em; font-size: 1.6em; font-weight: 700; }
.lacak-illus .li-grid4 svg.li-spark { top: auto; height: 3em; }
.lacak-illus .li-verified { display: flex; gap: 1em; margin-top: 2.2em; border-radius: 1em; background: #f3f5f8; padding: 1.8em 1.6em; }
.lacak-illus .li-ok { display: grid; width: 2em; height: 2em; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #1e8e3e; color: #fff; }
.lacak-illus .li-ok svg.li-glyph { width: 1.3em; height: 1.3em; stroke-width: 3; }
.lacak-illus .li-verified b { font-size: 1.35em; }
.lacak-illus .li-verified small { margin-top: .3em; font-size: 1.2em; line-height: 1.4; }

.lacak-illus .li-phone { position: relative; width: 23em; margin: 1.5em auto 0; border: .5em solid #e9ecf0; border-radius: 3.4em; background: #fff; padding: 4.2em 0 1em; box-shadow: 0 1em 2.4em rgba(23, 32, 51, .1); }
.lacak-illus .li-notch { position: absolute; top: 1.2em; left: 50%; width: 5.6em; height: 1.4em; border-radius: 1em; background: #dde1e6; transform: translateX(-50%); }
.lacak-illus .li-phone-bar { display: block; padding: 0 1.6em 1em; }
.lacak-illus .li-phone-bar svg.li-glyph { width: 1.6em; height: 1.6em; }
.lacak-illus .li-phone-head { display: flex; align-items: center; gap: 1em; padding: 1em 1.6em; border-block: 1px solid var(--rule); }
.lacak-illus .li-phone-head .li-avatar { width: 3.2em; height: 3.2em; background: var(--accent); color: #fff; }
.lacak-illus .li-phone-head b { overflow: hidden; font-size: 1.3em; text-overflow: ellipsis; white-space: nowrap; }
.lacak-illus .li-phone-row { display: flex; align-items: center; gap: 1em; padding: 1.2em 1.6em; border-bottom: 1px solid var(--rule); }
.lacak-illus .li-phone-row > svg.li-glyph { width: 1.7em; height: 1.7em; }
.lacak-illus .li-phone-row > span:not(.li-ok) { flex: 1; min-width: 0; font-size: 1.05em; font-weight: 600; }
.lacak-illus .li-phone-row .li-ok { width: 1.6em; height: 1.6em; }
.lacak-illus .li-bar { display: block; height: .5em; margin-top: .5em; border-radius: 1em; background: #e6e9ee; }
.lacak-illus .li-phone-chat { display: grid; gap: 1.2em; height: 13em; padding: 1.6em; background: #f3f4f6; }
.lacak-illus .li-phone-chat i { display: block; width: 70%; height: 3.6em; border-radius: .6em; background: #fff; }
.lacak-illus .li-phone-chat i.out { justify-self: end; background: #d7f5dd; }

.lacak-illus .li-foot { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-end; gap: 1.6em; padding: 0 2.4em; border-top: 1px solid var(--rule); }
.lacak-illus .li-spacer { flex: 1; }
.lacak-illus .li-btn { display: flex; align-items: center; justify-content: center; gap: .5em; min-width: 6.6em; height: 2.9em; border: 1px solid #d5d9e0; border-radius: .3em; padding: 0 1.2em; font-size: 1.6em; font-weight: 650; }
.lacak-illus .li-btn.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.lacak-illus .li-btn.primary.is-off { border-color: #eceef1; background: #eceef1; color: #a2a8b3; }
.lacak-connect .onboarding-actions { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 14px 18px; }
.lacak-connect .onboarding-actions > span { color: var(--muted); font-size: 10px; }
.lacak-connect .onboarding-actions-group { display: flex; gap: 9px; margin-left: auto; }
.lacak-connect .onboarding-actions .btn { min-width: 112px; min-height: 40px; }
/* Lite's WhatsApp page from Integrasi: Kembali, the title, then the card. */
.lacak-connect-whatsapp > .btn { min-height: 38px; }
.lacak-connect-whatsapp > h1 { margin: 18px 0 0; color: #0d1c3b; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.04em; }

/* ---------- Lite's connect page on a phone ---------- */
@media (max-width: 760px) {
  .lacak-connect .onboarding-page-main { min-height: 0; grid-template-columns: 1fr; }
  .lacak-connect .onboarding-copy { padding: 24px 18px 20px; }
  .lacak-connect .onboarding-copy h2 { font-size: 22px; }
  .lacak-connect .onboarding-visual-wrap { padding: 12px; }
  .lacak-connect .onboarding-actions { align-items: stretch; flex-direction: column; padding: 12px; }
  .lacak-connect .onboarding-actions > span { text-align: center; }
  .lacak-connect .onboarding-actions-group { width: 100%; margin: 0; }
  .lacak-connect .onboarding-actions-group { flex-wrap: wrap; }
  .lacak-connect .onboarding-actions .btn { min-width: 0; min-height: 44px; flex: 1; }
  /* The primary action takes its own row at the bottom, within the thumb's reach. */
  .lacak-connect .onboarding-actions .btn.primary { order: 3; flex-basis: 100%; }
}

/* ---------- The widgets inside the sub-pages ----------
   Every widget is the CRM's widget form: a white card, radius 14, one hairline, its logo or mark at the top
   left, its state at the size it is read at, its own action in a fixed place. Colours are the Dashboard's
   (dashboard.css --dx-*): navy for the one dark panel, gold for links, its green, yellow and red pairs.
   The Dashboard's Target ROAS dialog holds Bisnis's widget, so it carries the same colours. */
.lacak-settings, #overlay-roas, #links-layer, #link-pick-layer {
  --hair: #eef1f5; --row-hover: #fafbfd;
  --w-ink: #172033; --w-muted: #5c6a86; --w-line: #e4e8ef; --w-soft: #f5f7fa; --w-navy: #172944;
  --w-good: #1f7a55; --w-good-dot: #1f9d68; --w-good-bg: #e3f3ea;
  --w-warn: #8f5410; --w-warn-dot: #d99a3c; --w-warn-bg: #fbeedb;
  --w-bad: #b4372f; --w-bad-dot: #c9363e; --w-bad-bg: #fbe8e5;
  --w-off: #9aa7b5; --w-off-bg: #eef0f4;
  --w-gold: #c69749; --w-ring: rgb(47 101 172 / .24);
}
.lacak-koneksi, .lacak-bisnis, .lacak-links { container-type: inline-size; }
.lk-logo { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border: 1px solid var(--w-line); border-radius: 10px; background: #fff; }
.lk-logo svg { width: 19px; height: 19px; }
.lk-act { flex: none; min-height: 38px; padding: 0 16px; white-space: nowrap; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease, color var(--m-hover) ease, transform var(--m-hover) ease; }
/* Pressed, an action gives under the finger, as Target ROAS's steppers do; it springs back on release. */
.lk-act:active:not(:disabled) { transform: scale(.97); }
.lk-act:disabled { cursor: not-allowed; opacity: .45; }
.lk-act-hold { display: inline-flex; flex: none; }
.lacak-settings :is(.lk-act, .lk-add, .lk-copy-button, .lk-qr, .lk-step, .lk-link-action, .lk-foot > button):focus-visible { outline: 3px solid var(--w-ring); outline-offset: 2px; }
.lk-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); color: var(--w-muted); font-size: 12px; line-height: 1.45; }
.lk-foot > button { flex: none; min-height: 38px; padding: 0 18px; }

/* The lamp: a dot with a ring of its own tint, and the state word beside it. */
.lk-lamp { display: inline-flex; align-items: center; gap: 8px; color: var(--w-muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.lk-lamp i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--w-off); box-shadow: 0 0 0 4px var(--w-off-bg); transition: background-color var(--m-hover) ease, box-shadow var(--m-hover) ease; }
.lk-lamp.is-connected { color: var(--w-good); }
.lk-lamp.is-connected i { background: var(--w-good-dot); box-shadow: 0 0 0 4px var(--w-good-bg); }
.lk-lamp.is-failed { color: var(--w-bad); }
.lk-lamp.is-failed i { background: var(--w-bad-dot); box-shadow: 0 0 0 4px var(--w-bad-bg); }

/* ---------- Koneksi: the health strip ---------- */
.lk-health { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.lk-health-bar { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 4px; min-width: 0; }
.lk-health-bar i { flex: none; width: 26px; height: 8px; border-radius: 4px; background: #cfd6e0; }
.lk-health-bar i.is-connected { background: var(--w-good-dot); }
.lk-health-bar i.is-connected.is-stale { background: var(--w-warn-dot); }
.lk-health-bar i.is-failed { background: var(--w-bad-dot); }
/* Koneksi arriving: each segment fills from its left in turn, WhatsApp first (settings.js koneksiArrive). */
.lk-health.is-arriving .lk-health-bar i { transform-origin: left center; animation: lk-seg-fill var(--m-move) var(--m-in) calc(var(--i, 0) * 40ms) both; }
@keyframes lk-seg-fill { from { transform: scaleX(0); } }
.lk-health p { flex: none; margin: 0; color: var(--w-ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lk-health.is-failed p { color: var(--w-bad); }

/* ---------- Koneksi: the WhatsApp panel, the page's one dark thing ---------- */
.lk-wa { position: relative; overflow: hidden; border-radius: 18px; background: var(--w-navy); padding: 18px 22px 22px; color: #fff; transition: background-color var(--m-move) ease; }
.lk-wa.is-failed { background: #a8262e; }
.lk-wa-head { display: flex; align-items: center; gap: 10px; }
.lk-wa-head .lk-logo { width: 32px; height: 32px; border: 0; border-radius: 9px; }
.lk-wa-head strong { flex: none; color: #c9d3e5; font-size: 13px; font-weight: 650; }
/* The wire: a hairline from the name to the panel's right edge, plug and socket meeting at its middle. Seated,
   the plug's prongs sit inside the socket and both are the CRM's selected-gold; apart, they stand 22px
   from each other in the panel's quiet ink. Only transform moves, so every frame is the compositor's. */
.lk-wire { display: flex; min-width: 72px; flex: 1; align-items: center; height: 16px; margin-left: 8px; overflow: hidden; }
.lk-wire-a, .lk-wire-b { display: flex; min-width: 0; flex: 1 1 50%; align-items: center; }
.lk-wire i { display: block; height: 1.5px; flex: 1; border-radius: 1px; background: rgb(255 255 255 / .2); }
.lk-wire svg { display: block; flex: none; overflow: visible; }
.lk-plug { width: 21px; height: 14px; }
.lk-socket { position: relative; width: 15px; height: 18px; }
.lk-plug rect { fill: #c69749; }
.lk-plug .lk-prongs { fill: none; stroke: #c69749; stroke-width: 1.7; stroke-linecap: round; }
.lk-socket rect { fill: #e4bf78; }
.lk-wire-a { transform: translateX(6px); }
.lk-wa:not(.is-connected) .lk-wire-a { transform: translateX(-11px); }
.lk-wa:not(.is-connected) .lk-wire-b { transform: translateX(11px); }
.lk-wa.is-off .lk-plug rect, .lk-wa.is-off .lk-socket rect { fill: #8f9bb0; }
.lk-wa.is-off .lk-plug .lk-prongs { stroke: #8f9bb0; }
.lk-wa.is-off .lk-wire i { background: rgb(255 255 255 / .12); }
.lk-wa.is-failed .lk-plug rect, .lk-wa.is-failed .lk-socket rect { fill: #fff; }
.lk-wa.is-failed .lk-plug .lk-prongs { stroke: #fff; }
.lk-wa.is-failed .lk-wire i { background: rgb(255 255 255 / .34); }
/* When an action changed the number's connection, the wire plays it: after Putuskan the plug pulls out where
   the person is looking; back from a saved flow, it waits for the view to land (180ms) and seats. */
.lk-wa.is-changed.is-connected .lk-wire-a { animation: lk-wire-seat-a 420ms var(--m-in) 200ms both; }
.lk-wa.is-changed.is-connected .lk-wire-b { animation: lk-wire-seat-b 420ms var(--m-in) 200ms both; }
.lk-wa.is-changed:not(.is-connected) .lk-wire-a { animation: lk-wire-pull-a 320ms var(--m-in) 60ms both; }
.lk-wa.is-changed:not(.is-connected) .lk-wire-b { animation: lk-wire-pull-b 320ms var(--m-in) 60ms both; }
/* Koneksi arriving with the number connected: the plug seats once, as the strip's WhatsApp segment fills. */
.lk-wa.is-arriving.is-connected .lk-wire-a { animation: lk-wire-seat-a 420ms var(--m-in) 120ms both; }
.lk-wa.is-arriving.is-connected .lk-wire-b { animation: lk-wire-seat-b 420ms var(--m-in) 120ms both; }
@keyframes lk-wire-seat-a { from { transform: translateX(-11px); } }
@keyframes lk-wire-seat-b { from { transform: translateX(11px); } }
@keyframes lk-wire-pull-a { from { transform: translateX(6px); } }
@keyframes lk-wire-pull-b { from { transform: none; } }
.lk-wa-body { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 28px; margin-top: 20px; }
.lk-wa-state .lk-lamp { gap: 14px; margin-left: 6px; color: #8fdcb4; font-size: 30px; font-weight: 750; letter-spacing: -.025em; line-height: 1.05; }
.lk-wa-state .lk-lamp i { width: 14px; height: 14px; background: #4fd08f; box-shadow: 0 0 0 6px rgb(79 208 143 / .2); }
.lk-wa.is-failed .lk-wa-state .lk-lamp { color: #fff; }
.lk-wa.is-failed .lk-wa-state .lk-lamp i { background: #fff; box-shadow: 0 0 0 6px rgb(255 255 255 / .22); }
.lk-wa.is-off .lk-wa-state .lk-lamp { color: #c9d3e5; }
.lk-wa.is-off .lk-wa-state .lk-lamp i { background: #8f9bb0; box-shadow: 0 0 0 6px rgb(143 155 176 / .2); }
.lk-wa-state p { margin: 8px 0 0 34px; color: #b9c4d8; font-size: 13px; line-height: 1.45; }
.lk-wa.is-failed .lk-wa-state p { color: #ffe1de; font-weight: 650; }
.lk-wa-id { display: grid; justify-items: end; gap: 4px; min-width: 0; text-align: right; }
.lk-wa-id b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lk-wa-id > span { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; color: #b9c4d8; font-size: 12.5px; }
.lk-wa-id em { border: 1px solid rgb(255 255 255 / .22); border-radius: 999px; padding: 1px 8px; color: #dbe2ee; font-size: 11px; font-style: normal; font-weight: 650; }
.lk-wa .lk-act.on-dark { min-height: 40px; border: 1px solid rgb(255 255 255 / .35); background: transparent; color: #fff; }
.lk-wa .lk-act.on-dark:hover { background: rgb(255 255 255 / .1); }
.lk-wa .lk-act.on-dark.is-solid { border-color: #fff; background: #fff; color: var(--w-navy); }
.lk-wa.is-failed .lk-act.on-dark.is-solid { color: #a8262e; }
.lk-wa .lk-act.on-dark.is-solid:hover { background: #eef2f8; }
.lk-wa .lk-act:focus-visible { outline-color: rgb(255 255 255 / .55); }
.lk-wa.is-fresh { animation: lk-glow 1.2s ease-out both; }
@keyframes lk-glow { 0%, 35% { box-shadow: 0 0 0 4px #e4bf78; } 100% { box-shadow: 0 0 0 0 rgb(228 191 120 / 0); } }

/* ---------- Koneksi: each platform, its slot meter, its account widgets ---------- */
.lk-platform { margin-top: 26px; }
.lk-platform-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--w-ink); font-size: 14px; font-weight: 700; }
.lk-platform-head .lk-logo { width: 28px; height: 28px; border-radius: 8px; }
.lk-platform-head .lk-logo svg { width: 15px; height: 15px; }
.lk-slots { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; color: var(--w-muted); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.lk-pips { display: inline-flex; gap: 3px; }
.lk-pips i { width: 14px; height: 8px; border-radius: 3px; background: #dfe4ec; transition: background-color var(--m-hover) ease; }
.lk-pips i.is-on { background: var(--w-navy); }
.lk-slots.is-full { color: var(--w-ink); }
/* The height of an account widget, which Tambah akun takes too, on whichever row it falls. */
.lk-grid { --lk-card-h: 148px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lk-grid > .list-state, .lk-grid > .more-marker { grid-column: 1 / -1; }
/* With Tambah akun in the grid, every row is as tall as its tallest card, so a card that grows with a
   two-line name grows Tambah akun with it, on whichever row it falls. Rows loading above keep their own height. */
.lk-grid:has(> .lk-add:not(.is-full)) { grid-auto-rows: 1fr; }
.lk-grid:has(> .lk-add:not(.is-full)):has(> :is(.list-state, .more-marker):first-child) { grid-template-rows: auto; }
.lk-acct { position: relative; display: flex; min-width: 0; min-height: var(--lk-card-h); flex-direction: column; overflow: hidden; border: 1px solid var(--w-line); border-radius: 14px; background: #fff; transition: border-color var(--m-hover) ease; }
/* The edge across the top appears only for what needs a look: none while healthy, so a healthy page is
   calm and the one coloured edge on it is the one to read. Its colour moves when an action changes it. */
.lk-edge { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: rgb(31 157 104 / 0); }
.lk-acct.is-stale .lk-edge { background: var(--w-warn-dot); }
.lk-acct.is-failed .lk-edge { background: var(--w-bad-dot); }
.lk-acct-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 18px 16px 0; }
.lk-acct-name { display: grid; min-width: 0; gap: 2px; }
/* A long name wraps to a second line before it is cut, so two accounts that begin alike stay apart. */
.lk-acct-name strong { display: -webkit-box; overflow: hidden; color: var(--w-ink); font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lk-acct-name small { color: var(--w-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lk-acct-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding: 16px; }
.lk-sync { display: grid; min-width: 0; gap: 2px; }
.lk-sync small { color: var(--w-muted); font-size: 11.5px; font-weight: 600; }
.lk-sync b { display: flex; align-items: center; gap: 6px; color: var(--w-ink); font-size: 18px; font-weight: 730; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.lk-sync b .icon { width: 16px; height: 16px; flex: none; stroke-width: 2; }
.lk-acct.is-off .lk-acct-name strong, .lk-acct.is-off .lk-sync b { color: var(--w-muted); }
/* A stale sync: the amber edge and the figure in amber behind a clock; the lamp still says Tersambung. */
.lk-acct.is-stale .lk-sync b { color: var(--w-warn); }
/* A failed account is loud: the red edge, a red hairline all round with its halo, the sync figure in red, its foot tinted. */
.lk-acct.is-failed { border-color: var(--w-bad-dot); box-shadow: 0 0 0 1px var(--w-bad-dot), 0 10px 24px rgb(201 54 62 / .12); }
.lk-acct.is-failed .lk-acct-foot { margin-top: auto; border-top: 1px solid #f3d3d3; background: #fdf3f2; }
.lk-acct.is-failed .lk-sync b { color: #a8262e; }
/* Tambah akun: quiet, dashed, the height of an account; under the pointer the link's blue. */
.lk-add { display: flex; min-height: 72px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1.5px dashed #c6cfda; border-radius: 14px; background: transparent; color: #2f62a4; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color var(--m-hover) ease, background-color var(--m-hover) ease; }
.lk-add-plus { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #edf3fb; color: #2f62a4; transition: background-color var(--m-hover) ease, color var(--m-hover) ease; }
.lk-add-plus .icon { width: 17px; height: 17px; }
.lk-add:not(.is-full) { min-height: var(--lk-card-h); }
.lk-add:hover { border-color: #8fb0d8; background: #f6f9fd; }
.lk-add:hover .lk-add-plus { background: #2f62a4; color: #fff; }
.lk-add-plus { transition: background-color var(--m-hover) ease, color var(--m-hover) ease, transform var(--m-hover) ease; }
.lk-add:active .lk-add-plus { transform: scale(.94); }
/* While the platform's window is open: Menunggu koneksi… in the same place, the card still. */
.lk-add[aria-busy="true"], .lk-add[aria-busy="true"]:hover { border-color: #8fb0d8; background: #f6f9fd; color: #2f62a4; opacity: 1; cursor: progress; }
.lk-add[aria-busy="true"] .lk-add-plus { background: #edf3fb; }
.lk-act[aria-busy="true"] { display: inline-flex; align-items: center; gap: 8px; cursor: progress; }
/* At the cap: a still tile in Tambah akun's place, the platform's places drawn full with their count. */
.lk-add.is-full { margin: 0; padding: 0 28px; border-style: solid; border-color: #e4e8ef; background: #f7f8fa; color: var(--w-ink); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; cursor: default; }
.lk-add.is-full .lk-pips i { width: 16px; }
@container (max-width: 640px) {
  /* One column: an account widget is as tall as its content, 134px with a one-line name. */
  .lk-grid { --lk-card-h: 134px; grid-template-columns: minmax(0, 1fr); }
  .lk-add { padding: 18px; flex-direction: row; }
  .lk-add.is-full { min-height: 0; }
  .lk-add.is-full { padding: 16px 20px; }
  .lk-wa-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lk-wa-id { justify-items: start; text-align: left; }
  .lk-wa-id > span { justify-content: flex-start; }
  .lk-wa .lk-act { width: 100%; min-height: 44px; }
  .lk-wa-state .lk-lamp { font-size: 26px; }
}

/* What a finished action changed: its widget washes yellow, held a moment, then settles to white, as
   Pelanggan's wash does (lacak.css lacak-wash-band, 1200ms); one that was not there before rises into place. */
.lacak-settings .is-fresh:not(.lk-wa, .lk-acct.is-failed) { animation: koneksi-fresh 1.2s ease-out both; }
/* A failed card brought into view by the banner's Perbaiki keeps its red and rings once instead. */
.lk-acct.is-failed.is-fresh { animation: lk-glow-failed 1.2s ease-out both; }
@keyframes lk-glow-failed { 0%, 35% { box-shadow: 0 0 0 4px #e4bf78, 0 10px 24px rgb(201 54 62 / .12); } 100% { box-shadow: 0 0 0 1px var(--w-bad-dot), 0 10px 24px rgb(201 54 62 / .12); } }
@keyframes koneksi-fresh { 0%, 35% { background-color: #fff5d6; } 100% { background-color: #fff; } }
.lk-acct.is-fresh .lk-lamp { animation: lacak-mark-in var(--m-pop) var(--m-in) both; }
.lk-acct.is-fresh.is-new { animation: koneksi-fresh 1.2s ease-out both, lacak-rise-in var(--m-move) var(--m-in) both; }

/* ---------- Link pelacakan: one widget per link ---------- */
.lacak-links-intro { max-width: 72ch; margin: 0 0 16px; color: var(--w-muted); font-size: 12.5px; line-height: 1.6; }
.lk-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lk-links > .list-state { grid-column: 1 / -1; min-height: 56px; font-size: 11px; }
.lk-links > .more-marker { grid-column: 1 / -1; height: 1px; }
.lk-link-slot { display: flex; min-width: 0; }
.lk-link { display: grid; min-width: 0; flex: 1; align-content: start; gap: 14px; border: 1px solid var(--w-line); border-radius: 14px; background: #fff; padding: 14px 16px 14px 18px; }
.lk-link-head { display: flex; min-width: 0; align-items: center; gap: 10px; }
.lk-link-head h3 { overflow: hidden; margin: 0; color: var(--w-ink); font-size: 15px; font-weight: 700; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.lk-link-actions { display: flex; flex: none; gap: 2px; margin-left: auto; }
.lk-link-action { min-height: 32px; gap: 5px; padding: 0 8px; color: #2f62a4; font-size: 12px; font-weight: 700; white-space: nowrap; transition: background-color var(--m-hover) ease, color var(--m-hover) ease; }
.lk-link-action .icon { width: 14px; height: 14px; flex: none; }
.lk-link-action.is-danger { color: var(--w-muted); }
.lk-link-action.is-danger:hover, .lk-link-action.is-danger:focus-visible { background: #fff2f2; color: #bc353b; }
.lk-link-main { display: grid; grid-template-columns: minmax(0, 1fr) 92px; grid-template-areas: "copy qr" "figs qr"; align-items: start; gap: 14px 16px; }
/* The link, whole, in a pill that copies it: the text selectable by one click, Salin link at its end. */
.lk-copy { display: flex; grid-area: copy; min-width: 0; min-height: 42px; align-items: center; gap: 8px; border: 1px solid var(--w-line); border-radius: 11px; background: var(--w-soft); padding: 4px 4px 4px 12px; transition: border-color var(--m-hover) ease, background-color var(--m-hover) ease; }
.lk-copy-url { overflow: hidden; min-width: 0; flex: 1; color: var(--w-ink); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; user-select: all; cursor: text; }
.lk-copy-button { display: inline-flex; flex: none; min-height: 34px; align-items: center; gap: 6px; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--w-line); padding: 0 12px; color: var(--w-navy); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color var(--m-hover) ease, color var(--m-hover) ease, box-shadow var(--m-hover) ease; }
.lk-copy-button:hover { background: var(--w-navy); box-shadow: 0 0 0 1px var(--w-navy); color: #fff; }
.lk-copy:has(.is-copied) { border-color: #9fd3b7; background: #effaf4; }
.lacak-settings .lk-copy-button.is-copied, .lacak-settings .lk-copy-button.is-copied:hover { background: #fff; box-shadow: 0 0 0 1px #9fd3b7; color: var(--w-good); }
/* The QR, drawn from the link itself, small; it opens large to print. */
.lk-qr { display: block; grid-area: qr; width: 92px; height: 92px; border: 1px solid var(--w-line); border-radius: 12px; background: #fff; padding: 3px; cursor: zoom-in; transition: border-color var(--m-hover) ease, box-shadow var(--m-hover) ease; }
.lk-qr svg { display: block; width: 100%; height: 100%; }
.lk-qr:hover { border-color: #b9c8db; box-shadow: 0 6px 16px rgb(23 32 51 / .09); }
.lk-figs { display: flex; grid-area: figs; flex-wrap: wrap; gap: 10px 24px; }
.lk-fig { display: grid; gap: 1px; }
.lk-fig b { color: var(--w-ink); font-size: 20px; font-weight: 730; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lk-fig small { color: var(--w-muted); font-size: 11.5px; font-weight: 600; }
.lk-fig.is-none { align-self: center; }
.lk-fig.is-none .badge { color: var(--w-muted); font-weight: 650; }
/* Its clicks over the Dashboard's period, in the Dashboard's link gold. */
.lk-spark { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "svg svg" "label total"; align-items: baseline; gap: 4px 10px; padding-top: 12px; border-top: 1px solid var(--hair); }
.lk-spark svg { grid-area: svg; width: 100%; height: 34px; overflow: visible; }
.lk-spark-area { fill: rgb(198 151 73 / .14); }
.lk-spark-line { fill: none; stroke: var(--w-gold); stroke-width: 1.6; stroke-linejoin: round; }
.lk-spark-label { grid-area: label; color: var(--w-muted); font-size: 11.5px; font-weight: 600; }
.lk-spark b { grid-area: total; color: var(--w-ink); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
@container (max-width: 820px) { .lk-links { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 420px) {
  .lk-link { padding: 14px; }
  .lk-link-main { grid-template-columns: minmax(0, 1fr) 76px; grid-template-areas: "copy copy" "figs qr"; }
  .lk-qr { width: 76px; height: 76px; }
  .lk-figs { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 10px 20px; }
  .lk-fig b { font-size: 18px; }
}
.lacak-links-empty { border: 1px solid var(--w-line); border-radius: 14px; background: #fff; }
.lacak-links-empty .lacak-empty { min-height: 0; padding: 34px 24px 30px; }
.lacak-links-empty .lacak-empty > span { max-width: 56ch; }
.lacak-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lacak-settings .settings-detail-actions .primary-button .icon { width: 15px; height: 15px; }
.lacak-settings .is-copied, .lacak-settings .is-copied:hover { color: var(--w-good); }
.lacak-settings .is-copied .icon { width: 14px; height: 14px; }

/* ---------- Link pelacakan: the website script, as three steps ---------- */
.lk-script { margin-top: 22px; border: 1px solid var(--w-line); border-radius: 14px; background: #fff; padding: 18px 22px 6px; }
.lk-script-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lk-script-head h2 { margin: 0; color: var(--w-ink); font-size: 15px; letter-spacing: -.01em; }
.lk-script-head p { max-width: 70ch; margin: 4px 0 0; color: var(--w-muted); font-size: 12.5px; line-height: 1.55; }
.lk-script-count { flex: none; border: 1px solid var(--w-line); border-radius: 999px; background: var(--w-soft); padding: 5px 11px; color: var(--w-ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color var(--m-hover) ease, color var(--m-hover) ease; }
.lk-script-count.is-done { border-color: transparent; background: var(--w-good-bg); color: var(--w-good); }
.lk-steps { margin: 18px 0 0; padding: 0; list-style: none; }
.lk-step-item { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
.lk-step-item:not(:last-child)::before { content: ""; position: absolute; top: 34px; bottom: 2px; left: 14px; border-left: 2px solid var(--w-line); }
.lk-step-item.is-done:not(:last-child)::before { border-left-color: #b9e0c9; }
.lk-step-mark { display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid #cfd6e0; border-radius: 50%; background: #fff; color: var(--w-muted); font-size: 12.5px; font-weight: 750; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease, color var(--m-hover) ease; }
.lk-step-mark.is-done { border-color: var(--w-good); background: var(--w-good); color: #fff; animation: lacak-mark-in var(--m-pop) var(--m-in) both; }
.lk-step-mark .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.lk-step-body { min-width: 0; padding-top: 4px; }
.lk-step-body h3 { margin: 0 0 10px; color: var(--w-ink); font-size: 14px; font-weight: 700; }
.lk-step-item.is-locked h3 { color: var(--w-muted); }
.lk-detect-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.lk-detect { display: flex; align-items: center; gap: 10px; margin: 0; border-radius: 8px; padding: 4px 6px 4px 0; color: var(--w-ink); font-size: 13px; font-weight: 650; }
.lk-detect i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--w-off); box-shadow: 0 0 0 4px var(--w-off-bg); }
.lk-detect.is-seen i { background: var(--w-good-dot); box-shadow: 0 0 0 4px var(--w-good-bg); }
.lk-target-field input::placeholder { color: #b9c2d3; }
.lacak-check { display: flex; max-width: 72ch; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--w-line); border-radius: 10px; background: var(--w-soft); color: var(--w-ink); font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.lacak-check input { width: 17px; height: 17px; flex: none; margin: 1px 0 0; accent-color: var(--w-navy); cursor: pointer; }
.lacak-check:has(input:focus-visible) { outline: 3px solid var(--w-ring); outline-offset: 2px; }
/* The code's step unfolds once the box is ticked: its height opens over 220ms on the decelerating curve
   while its content fades in after it starts; unticked, it folds away on the accelerating curve in 140ms. */
.lacak-script-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--m-exit) var(--m-out); }
.lacak-script-more.is-open { grid-template-rows: 1fr; transition: grid-template-rows var(--m-move) var(--m-in); }
.lacak-script-more > div { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: opacity var(--m-exit) ease, transform var(--m-exit) var(--m-out); }
.lacak-script-more.is-open > div { opacity: 1; transform: none; transition: opacity var(--m-pop) ease 60ms, transform var(--m-move) var(--m-in); }
.lacak-script-more .lacak-script-where { margin-top: 0; color: var(--w-ink); }
.lacak-code { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 8px 8px 14px; border: 1px solid var(--w-line); border-radius: 10px; background: #f6f7f9; transition: border-color var(--m-hover) ease, background-color var(--m-hover) ease; }
.lacak-code:has(.is-copied) { border-color: #9fd3b7; background: #effaf4; }
.lacak-code code { flex: 1; min-width: 0; color: var(--w-ink); font: 500 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }
.lacak-code .secondary-button { flex: none; min-width: 92px; min-height: 36px; }
.lacak-code .secondary-button:focus-visible { outline: 3px solid var(--w-ring); outline-offset: 1px; }
.lacak-script-more p { max-width: 76ch; margin: 10px 0 0; color: var(--w-muted); font-size: 12px; line-height: 1.55; }
.lacak-script-more p code { padding: 1px 5px; border-radius: 5px; background: #f1f3f6; color: var(--w-ink); font: 500 11.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }

/* ---------- Link pelacakan: the page's line, and Cara pakai at its right ---------- */
.lk-intro { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 0 0 16px; }
.lk-intro .lacak-links-intro { margin: 0; }
.lk-guide-toggle { display: inline-flex; flex: none; min-height: 36px; align-items: center; gap: 7px; border: 1px solid var(--w-line); border-radius: 999px; background: #fff; padding: 0 12px 0 13px; color: var(--w-navy); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease; }
.lk-guide-toggle:hover { border-color: #cfd6e0; background: var(--w-soft); }
.lk-guide-toggle[aria-expanded="true"] { border-color: #cdd8e8; background: #eef3fa; }
.lk-guide-toggle .icon { width: 15px; height: 15px; flex: none; }
.lk-guide-toggle [data-icon="down"], .lk-bd-toggle [data-icon="down"] { transition: transform var(--m-move) var(--m-in); }
.lk-guide-toggle[aria-expanded="true"] [data-icon="down"], .lk-bd-toggle[aria-expanded="true"] [data-icon="down"] { transform: rotate(180deg); }
.lacak-settings :is(.lk-guide-toggle, .lk-place-tab, .lk-test-button, .lk-bd-toggle, .lk-chip):focus-visible { outline: 3px solid var(--w-ring); outline-offset: 2px; }
.lk-banner { margin-bottom: 16px; }
.lacak-links-empty[hidden] + .lk-script { margin-top: 6px; }

/* A fold: its height opens over 220ms on the decelerating curve and closes in 140ms on the accelerating
   one, its content fading in after it starts (the script's code step, lacak-script-more). */
.lk-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--m-exit) var(--m-out); }
.lk-fold.is-open { grid-template-rows: 1fr; transition: grid-template-rows var(--m-move) var(--m-in); }
.lk-fold > div { min-height: 0; overflow: hidden; opacity: 0; transition: opacity var(--m-exit) ease; }
.lk-fold.is-open > div { opacity: 1; transition: opacity var(--m-pop) ease 60ms; }

/* ---------- Link pelacakan: the guide ---------- */
.lk-guide { margin: 0 0 16px; border: 1px solid var(--w-line); border-radius: 14px; background: #fff; padding: 20px 22px 22px; container-type: inline-size; }
.lk-guide h2 { margin: 0; color: var(--w-ink); font-size: 15px; letter-spacing: -.01em; }
/* The route: create, place, check, three marks joined by the link's gold dotted line; a mark ticks green
   once the Business is past it. As the guide opens, a gold dot runs the route once. */
.lk-route { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0; padding: 0; list-style: none; }
.lk-route-step { position: relative; min-width: 0; padding-right: 26px; }
.lk-route-step:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: 42px; right: 10px; border-top: 2px dotted var(--w-gold); }
.lk-route-step.is-done:not(:last-child)::after { border-top-style: solid; border-top-color: #b9e0c9; }
.lk-route-step::after { transition: border-color var(--m-move) var(--m-in); }
.lk-route-mark { display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid var(--w-gold); border-radius: 50%; background: #fff; color: #8a6421; font-size: 12.5px; font-weight: 750; transition: background-color var(--m-move) var(--m-in), border-color var(--m-move) var(--m-in), color var(--m-move) var(--m-in); }
.lk-route-step.is-done .lk-route-mark { border-color: var(--w-good); background: var(--w-good); color: #fff; }
/* A mark that has just ticked, or un-ticked, pops its glyph in as the script's step marks do. */
.lk-route-step.just-changed .lk-route-mark { animation: lacak-mark-in var(--m-pop) var(--m-in) both; }
.lk-route-mark .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.lk-route-step h3 { margin: 10px 0 4px; color: var(--w-ink); font-size: 14px; font-weight: 700; }
.lk-route-step p { max-width: 34ch; margin: 0; color: var(--w-muted); font-size: 12.5px; line-height: 1.55; }
.lk-route::before { content: ""; position: absolute; top: 10px; left: 11px; width: 100%; height: 0; opacity: 0; pointer-events: none; }
.lk-guide-fold.is-opening .lk-route::before { height: 10px; background: radial-gradient(circle at 5px 5px, var(--w-gold) 4.5px, transparent 5px) no-repeat; animation: lk-route-run 900ms var(--m-in) 140ms both; }
@keyframes lk-route-run { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(66.67%); } }
.lk-guide-create { margin-top: 18px; }
.lk-places { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair); }
.lk-places h3 { margin: 0 0 10px; color: var(--w-ink); font-size: 13.5px; font-weight: 700; }
.lk-place-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -2px; padding: 2px; scrollbar-width: none; }
.lk-place-tabs::-webkit-scrollbar { display: none; }
.lk-place-tab { flex: none; min-height: 34px; border: 1px solid var(--w-line); border-radius: 999px; background: #fff; padding: 0 13px; color: var(--w-ink); font: inherit; font-size: 12.5px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease, color var(--m-hover) ease; }
.lk-place-tab:hover { border-color: #cfd6e0; background: var(--w-soft); }
.lk-place-tab[aria-selected="true"] { border-color: var(--w-navy); background: var(--w-navy); color: #fff; }
.lk-place-panel { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 22px; margin-top: 14px; }
.lk-place-panel.from-right > * { animation: lk-place-in-right 200ms var(--m-in) both; }
.lk-place-panel.from-left > * { animation: lk-place-in-left 200ms var(--m-in) both; }
.lk-place-panel > :nth-child(2) { animation-delay: 30ms; }
@keyframes lk-place-in-right { from { opacity: 0; transform: translateX(10px); } }
@keyframes lk-place-in-left { from { opacity: 0; transform: translateX(-10px); } }
.lk-place-copy { min-width: 0; padding-top: 4px; }
.lk-place-copy ol { max-width: 64ch; margin: 0; padding-left: 20px; }
.lk-place-copy li { margin: 0 0 8px; padding-left: 2px; color: var(--w-ink); font-size: 13px; line-height: 1.55; }
.lk-place-copy li::marker { color: var(--w-muted); font-weight: 700; }
.lk-warn { display: flex; max-width: 64ch; align-items: flex-start; gap: 9px; margin: 10px 0 0; border-radius: 10px; background: var(--w-warn-bg); padding: 10px 12px; color: var(--w-warn); font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.lk-warn .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.lk-note { display: grid; max-width: 64ch; justify-items: start; gap: 4px; margin-top: 10px; border-radius: 10px; background: var(--w-soft); padding: 10px 12px 6px; }
.lk-note p { margin: 0; color: var(--w-ink); font-size: 12.5px; line-height: 1.5; }
.lk-note .lk-link-action { margin-left: -8px; }

/* The places, drawn small: a phone, a browser, a printed card. Words in them are 9 to 11px; the link is
   the Dashboard's link gold; a place's own WhatsApp button is drawn struck through. */
.lk-scene { display: grid; min-height: 200px; margin: 0; place-items: center; border-radius: 12px; background: var(--w-soft); padding: 16px 12px; color: var(--w-ink); font-size: 10px; line-height: 1.3; user-select: none; }
.lk-scene .icon { width: 11px; height: 11px; flex: none; }
.sc-phone { display: grid; width: 178px; gap: 7px; border: 1px solid var(--w-line); border-radius: 18px; background: #fff; padding: 14px 12px 12px; box-shadow: 0 10px 24px rgb(23 32 51 / .08); }
.sc-phone.is-center { justify-items: center; text-align: center; }
.sc-avatar { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 50%; background: #fdefe0; color: #c26a15; font-size: 11px; font-weight: 760; }
.sc-row { display: flex; align-items: center; gap: 12px; }
.sc-stats { display: flex; flex: 1; gap: 6px; }
.sc-stats i { height: 14px; flex: 1; border-radius: 3px; background: #eef0f4; }
.sc-stats.is-row { width: 100px; flex: none; }
.sc-name { overflow: hidden; color: var(--w-ink); font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sc-line { display: block; width: 78%; height: 6px; border-radius: 3px; background: #eef0f4; }
.sc-line.is-wide { width: 92%; }
.sc-line.is-short { width: 46%; }
.sc-link { display: inline-flex; max-width: 100%; align-items: center; gap: 4px; justify-self: start; border-radius: 6px; background: #fbf3e4; padding: 3px 7px; color: #7d5717; font-size: 10.5px; font-weight: 750; white-space: nowrap; box-shadow: inset 0 0 0 1.5px var(--w-gold); }
.sc-phone.is-center .sc-link { justify-self: center; }
.sc-link.is-plain { background: none; box-shadow: none; padding: 0; color: var(--w-muted); font-weight: 650; }
.sc-buttons { display: flex; gap: 6px; width: 100%; }
.sc-buttons.is-stack { flex-direction: column; }
.sc-btn, .sc-native { display: flex; min-height: 24px; flex: 1; align-items: center; justify-content: center; gap: 4px; border-radius: 6px; background: #eef0f4; padding: 0 6px; color: var(--w-ink); font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.sc-btn.is-gold { background: #fbf3e4; color: #7d5717; box-shadow: inset 0 0 0 1.5px var(--w-gold); }
.sc-native { border: 1px dashed #c9d0db; background: #fff; color: #8b95a7; }
.sc-native s { text-decoration-thickness: 1.5px; text-decoration-color: var(--w-bad-dot); }
.sc-native-note { color: var(--w-warn); font-size: 9px; font-weight: 650; }
.sc-phone.is-page { padding-top: 10px; }
.sc-cover { display: block; height: 38px; border-radius: 10px; background: #dfe6f0; }
.sc-phone.is-page .sc-avatar { margin: -26px 0 0 8px; box-shadow: 0 0 0 3px #fff; }
.sc-browser, .lk-site { position: relative; overflow: hidden; border: 1px solid var(--w-line); border-radius: 10px; background: #fff; box-shadow: 0 10px 24px rgb(23 32 51 / .08); }
.sc-browser { width: 220px; height: 160px; }
.sc-bar { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--w-line); background: #f3f5f8; padding: 7px 9px; }
.sc-bar i { width: 6px; height: 6px; border-radius: 50%; background: #d4d9e1; }
.sc-bar em { overflow: hidden; margin-left: 6px; color: var(--w-muted); font-size: 9.5px; font-style: normal; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.sc-page { display: grid; gap: 8px; justify-items: start; padding: 14px 12px; }
.sc-page .sc-btn { flex: none; padding: 0 10px; }
.sc-fab { position: absolute; right: 12px; bottom: 12px; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--w-gold), 0 6px 14px rgb(23 32 51 / .2); }
.sc-fab svg { width: 19px; height: 19px; fill: #fff; }
.sc-paper { display: grid; width: 168px; justify-items: center; gap: 4px; border-radius: 4px; background: #fff; padding: 14px 12px 12px; box-shadow: 0 10px 24px rgb(23 32 51 / .1); transform: rotate(-2deg); }
.sc-qr { display: block; width: 92px; height: 92px; border-radius: 6px; box-shadow: 0 0 0 2px var(--w-gold); }
.sc-qr svg { display: block; width: 100%; height: 100%; }
.sc-paper b { margin-top: 6px; font-size: 11px; }
.sc-paper small { color: var(--w-muted); font-size: 9.5px; font-weight: 650; }

/* ---------- Link pelacakan: the widget's new parts ---------- */
/* A widget with its breakdown open takes the whole row (links.js toggleBreakdown). */
.lk-link-slot.is-wide { grid-column: 1 / -1; }
.lk-copy-url { color: var(--w-muted); font-weight: 600; }
.lk-copy-url b { color: var(--w-ink); font-weight: 750; }
.lk-test-button { display: inline-flex; flex: none; min-height: 34px; align-items: center; gap: 5px; border: 0; border-radius: 8px; background: transparent; padding: 0 9px; color: #2f62a4; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color var(--m-hover) ease, transform var(--m-hover) ease; }
.lk-test-button:hover { background: #e6eef9; }
.lk-test-button:active, .lk-copy-button:active, .lk-bd-toggle:active { transform: scale(.97); }
.lk-test-button .icon { width: 14px; height: 14px; }
/* No chat yet: the check, in the guide's gold. */
.lk-wait { display: flex; align-items: center; gap: 10px; border: 1px solid #efe0c2; border-radius: 10px; background: #fdf8ee; padding: 6px 6px 6px 12px; }
.lk-wait > i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--w-gold); box-shadow: 0 0 0 4px rgb(198 151 73 / .18); }
.lk-wait p { flex: 1; margin: 0; color: var(--w-ink); font-size: 12.5px; line-height: 1.45; transition: color var(--m-hover) ease; }
.lk-wait p.is-new { animation: lk-fade-up 180ms var(--m-in) both; }
.lk-wait .lk-link-action { flex: none; transition: opacity var(--m-hover) ease; }
.lk-wait.is-busy p { color: var(--w-muted); }
.lk-wait.is-busy .lk-link-action { opacity: .55; cursor: progress; }
.lk-wait.is-busy > i { animation: lk-wait-pulse 760ms ease-in-out infinite alternate; }
@keyframes lk-wait-pulse { to { box-shadow: 0 0 0 7px rgb(198 151 73 / .08); } }
.lk-wait.is-busy .lk-link-action .icon { animation: lk-spin 800ms linear infinite; }
/* The period's clicks with Rincian beside them; the breakdown opens under both. */
.lk-spark-row { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.lk-spark-row .lk-spark { padding-top: 0; border-top: 0; }
.lk-spark-row .lk-fold { grid-column: 1 / -1; }
.lk-bd-toggle { display: inline-flex; min-height: 30px; align-items: center; gap: 4px; margin-bottom: -2px; border: 1px solid var(--w-line); border-radius: 8px; background: #fff; padding: 0 7px 0 10px; color: var(--w-navy); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease, transform var(--m-hover) ease; }
.lk-bd-toggle:hover { border-color: #cfd6e0; background: var(--w-soft); }
.lk-bd-toggle[aria-expanded="true"] { border-color: #cdd8e8; background: #eef3fa; }
.lk-bd-toggle .icon { width: 14px; height: 14px; }
.lk-bd { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px 22px; padding-top: 16px; }
.lk-bd h4 { margin: 0 0 9px; color: var(--w-muted); font-size: 12px; font-weight: 700; }
.lk-bd ul { margin: 0; padding: 0; list-style: none; }
.lk-split { display: flex; height: 10px; gap: 2px; overflow: hidden; border-radius: 5px; background: #eef0f4; }
.lk-split i { width: var(--w); flex: none; transform-origin: left center; }
.lk-split i.is-phone, .lk-devices .is-phone i { background: var(--w-navy); }
.lk-split i.is-desktop, .lk-devices .is-desktop i { background: #9fb0c9; }
.lk-devices { margin-top: 10px !important; }
.lk-devices li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto 46px; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.lk-devices li > i { width: 9px; height: 9px; border-radius: 3px; }
.lk-devices b { color: var(--w-ink); font-weight: 650; }
.lk-devices span, .lk-ref-count { color: var(--w-ink); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.lk-bd em { color: var(--w-muted); font-size: 11.5px; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.lk-refs li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(36px, 1fr) auto 46px; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.lk-refs li + li { border-top: 1px solid var(--hair); }
.lk-ref-name { display: grid; min-width: 0; }
.lk-ref-name b { overflow: hidden; color: var(--w-ink); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.lk-ref-name small { overflow: hidden; color: var(--w-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.lk-refs .is-direct .lk-ref-name b { color: var(--w-muted); }
.lk-ref-bar { height: 8px; border-radius: 4px; background: #f3eee4; }
.lk-ref-bar i { display: block; width: var(--w); height: 100%; border-radius: 4px; background: var(--w-gold); transform-origin: left center; }
.lk-refs .is-direct .lk-ref-bar { background: #eef0f4; }
.lk-refs .is-direct .lk-ref-bar i { background: #b9c2d3; }
.lk-bd-note { margin: 8px 0 0; color: var(--w-muted); font-size: 11.5px; line-height: 1.5; }
.lk-bd-empty { margin: 0; padding-top: 14px; color: var(--w-muted); font-size: 12.5px; }
.lk-refs > .more-marker { height: 1px; padding: 0; border: 0; }
.lk-refs > .lk-refs-more { display: block; padding: 0; }
.lk-refs > .lk-refs-more .list-state { padding: 10px; }
/* A page of rows just loaded rises in, its bars growing from their left in turn. */
.lk-refs li.is-new { animation: lk-fade-up 180ms var(--m-in) both; }
.lk-refs li.is-new .lk-ref-bar i { animation: lk-bar-grow 420ms var(--m-in) calc(60ms + var(--i, 0) * 40ms) both; }
/* As the breakdown opens, its bars grow from their left in turn. */
.lk-fold.is-opening .lk-split i, .lk-fold.is-opening .lk-ref-bar i { animation: lk-bar-grow 420ms var(--m-in) calc(120ms + var(--i, 0) * 40ms) both; }
@keyframes lk-bar-grow { from { transform: scaleX(0); } }
@keyframes lk-spin { to { transform: rotate(360deg); } }
@container (max-width: 520px) {
  .lk-bd { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Link pelacakan: the button step ---------- */
.lk-step-item:has(+ .is-optional)::before { border-left-style: dashed; border-left-color: #cfd6e0 !important; }
.lk-step-mark.is-optional { border-style: dashed; }
.lk-opt { display: inline-block; margin-left: 8px; border: 1px solid var(--w-line); border-radius: 999px; padding: 1px 8px; color: var(--w-muted); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.lk-button-lead { max-width: 72ch; margin: 0 0 12px; color: var(--w-muted); font-size: 12.5px; line-height: 1.55; }
.lk-button-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 20px; }
.lk-button-controls { min-width: 0; }
.lk-button-controls .lacak-script-where { margin: 12px 0 0; color: var(--w-ink); font-size: 12px; line-height: 1.55; }
.lk-select-field { display: grid; gap: 6px; }
.lk-select-field > span { color: var(--w-ink); font-size: 12px; font-weight: 700; }
/* The button's link: a field-shaped trigger with the link's mark, name and address, and the list's chevron
   turning as it opens; the list is the Business picker's (lacak.css .lacak-business-picker). */
.lk-pick-trigger { display: grid; grid-template-columns: 30px minmax(0, 1fr) 14px; align-items: center; gap: 10px; width: 100%; min-height: 48px; border: 1px solid var(--w-line); border-radius: 10px; background: #fff; padding: 6px 12px 6px 8px; color: var(--w-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--m-hover) ease, background-color var(--m-hover) ease; }
.lk-pick-trigger:hover { border-color: #cfd6e0; background: var(--w-soft); }
.lk-pick-trigger[aria-expanded="true"] { border-color: #2f62a4; background: #fff; }
.lk-pick-trigger:focus-visible { outline: 3px solid var(--w-ring); outline-offset: 1px; }
.lk-pick-trigger .icon { width: 14px; height: 14px; color: var(--w-muted); transition: transform var(--m-move) var(--m-in); }
.lk-pick-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
:is(.lk-pick-trigger, .lk-pick-option) .lacak-link-mark { width: 30px; height: 30px; border-radius: 8px; font-size: 10.5px; }
.lk-pick-value { display: grid; min-width: 0; gap: 1px; }
.lk-pick-value b { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.lk-pick-value small { overflow: hidden; color: var(--w-muted); font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lk-link-picker { padding: 6px; overflow: visible; }
.lk-pick-options { display: grid; gap: 2px; overflow-y: auto; overscroll-behavior: contain; }
.lk-pick-option { grid-template-columns: 30px minmax(0, 1fr) 14px; gap: 10px; min-height: 46px; padding: 6px 10px 6px 6px; color: var(--w-ink); transition: background-color var(--m-hover) ease; }
.lk-pick-option.current { cursor: pointer; }
.lk-pick-option:focus-visible { outline: 2px solid rgba(47, 98, 164, .55); outline-offset: -2px; }
.lk-pick-option > .icon { width: 13px; height: 13px; color: #315f96; }
#link-pick-layer > .stage-picker.is-leaving { animation: lacak-picker-out var(--m-exit) var(--m-out) forwards; pointer-events: none; }
#link-pick-layer svg.icon :is(path, circle, rect, line, polyline, ellipse) { vector-effect: non-scaling-stroke; }
#link-pick-layer svg.icon { stroke-width: var(--icon-weight, 1.35px); }
.lk-site { height: 200px; margin: 0; }
.lk-site-page { display: grid; gap: 8px; padding: 14px 12px; }
.lk-site-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.lk-site-tiles i { height: 44px; border-radius: 6px; background: #f1f3f6; }
.lk-site-bubble { position: absolute; right: 58px; bottom: 22px; display: -webkit-box; max-width: 160px; max-height: calc(2.8em + 16px); overflow: hidden; border: 1px solid var(--w-line); border-radius: 12px 12px 4px 12px; background: #fff; padding: 7px 10px; color: var(--w-ink); font-size: 11.5px; line-height: 1.4; box-shadow: 0 6px 16px rgb(23 32 51 / .1); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lk-site .sc-fab { width: 40px; height: 40px; }
.lk-site-bubble.is-new { animation: lk-bubble-in 220ms var(--m-in) both; }
@keyframes lk-bubble-in { from { opacity: 0; transform: translateY(4px) scale(.97); } }
.lacak-code.is-new { animation: lk-code-wash 900ms ease-out both; }
@keyframes lk-code-wash { 0%, 30% { background-color: #fff5d6; } 100% { background-color: #f6f7f9; } }
.lk-button-create { margin-top: 2px; }
@container (max-width: 700px) { .lk-button-grid { grid-template-columns: minmax(0, 1fr); } .lk-site { max-width: 320px; } }

/* ---------- Link pelacakan: where it goes, and the readable address, in the drawer ---------- */
.lk-field-label { color: var(--ink); font-size: 12px; font-weight: 750; }
.lk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lk-chip { min-height: 32px; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 0 12px; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease, color var(--m-hover) ease; }
.lk-chip:hover { border-color: #cfd6e0; background: #f5f7fa; }
.lk-chip[aria-pressed="true"] { border-color: #172944; background: #172944; color: #fff; }
.lk-chip-hint p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.lk-chip-hint .lk-warn { font-size: 12px; }
.lk-chip-hint.is-new > * { animation: lk-fade-up 180ms var(--m-in) both; }
@keyframes lk-fade-up { from { opacity: 0; transform: translateY(3px); } }
.lk-optional { color: var(--muted); font-style: normal; font-weight: 500; }
.lk-path { display: flex; min-height: 42px; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color var(--m-hover) ease, box-shadow var(--m-hover) ease; }
.lk-path:focus-within { border-color: #2f62a4; box-shadow: 0 0 0 3px rgb(47 101 172 / .16); }
.lk-path.is-good { border-color: #8fcdaa; }
.lk-path.is-bad { border-color: var(--danger); }
.lk-path.is-bad:focus-within { box-shadow: 0 0 0 3px rgb(165 61 61 / .12); }
.lk-path-host { flex: none; padding-left: 12px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.lk-path input { min-width: 0; height: 40px; flex: 1; border: 0; background: transparent; padding: 0 12px 0 1px; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; outline: 0; }
.lk-path-status { display: flex; min-height: 18px; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.lk-path-status > span { animation: lk-fade-up 160ms var(--m-in) both; }
.lk-path-status .icon { width: 14px; height: 14px; flex: none; }
.lk-path-status.is-free { color: #1f7a55; }
.lk-path-status.is-taken, .lk-path-status.is-invalid { color: var(--danger); }
.lk-spin { width: 12px; height: 12px; flex: none; border: 2px solid #cfd6e0; border-top-color: #172944; border-radius: 50%; animation: lk-spin 700ms linear infinite; }
.lk-path-warn { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; border-radius: 9px; background: #fbeedb; padding: 8px 10px; color: #8f5410; font-size: 11.5px; font-weight: 600; line-height: 1.45; }
.lk-path-warn[hidden] { display: none; }
.lk-path-warn .icon { width: 14px; height: 14px; flex: none; margin-top: 1px; }

/* ---------- Link pelacakan: narrow ---------- */
@container (max-width: 640px) {
  .lk-guide { padding: 18px 16px; }
  .lk-route { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lk-route::before { display: none; }
  .lk-route-step { padding: 0 0 0 44px; }
  .lk-route-mark { position: absolute; top: 0; left: 0; }
  .lk-route-step h3 { margin-top: 5px; }
  .lk-route-step:not(:last-child)::after { top: 34px; bottom: -12px; left: 14px; right: auto; border-top: 0; border-left: 2px dotted var(--w-gold); }
  .lk-route-step.is-done:not(:last-child)::after { border-left-style: solid; border-left-color: #b9e0c9; }
  .lk-place-panel { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@container (max-width: 420px) {
  .lk-copy { flex-wrap: wrap; padding: 4px; }
  .lk-copy-url { flex-basis: 100%; padding: 8px 8px 4px; }
  .lk-test-button, .lk-copy-button { flex: 1; justify-content: center; }
  .lk-wait { flex-wrap: wrap; }
  .lk-intro { align-items: flex-start; }
}

/* ---------- Bisnis: the identity and the Target ROAS control ---------- */
.lk-bisnis { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); align-items: start; gap: 14px; }
.lk-id, .lk-target { min-width: 0; border: 1px solid var(--w-line); border-radius: 14px; background: #fff; padding: 20px 22px; }
.lk-id-main { display: flex; align-items: center; gap: 14px; }
.lk-id-mark { display: grid; width: 52px; height: 52px; flex: none; place-items: center; border-radius: 14px; background: #fdefe0; color: #c26a15; font-size: 17px; font-weight: 760; letter-spacing: .02em; }
.lk-id-copy { display: grid; min-width: 0; gap: 2px; }
.lk-id-copy small { color: var(--w-muted); font-size: 11.5px; font-weight: 650; }
.lk-id-name { min-width: 0; color: var(--w-ink); font-size: 18px; font-weight: 730; letter-spacing: -.015em; line-height: 1.25; overflow-wrap: anywhere; }
/* What the account holds, read-only: a row each, its label in a column of its own and the value beside it. */
.lk-id-facts { display: grid; margin: 18px 0 0; }
.lk-id-facts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); }
.lk-id-facts dt { color: var(--w-muted); font-size: 12px; font-weight: 600; }
.lk-id-facts dd { min-width: 0; margin: 0; color: var(--w-ink); font-size: 13px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.lk-id .lk-foot { justify-content: flex-end; margin-top: 6px; }
.lk-target-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.lk-target-head h2 { margin: 0; color: var(--w-ink); font-size: 15px; letter-spacing: -.01em; }
.lk-target-period { color: var(--w-muted); font-size: 12px; font-weight: 600; }
.lk-target-value { display: flex; align-items: center; gap: 14px; margin: 14px 0 2px; }
.lk-step { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border: 1px solid var(--w-line); border-radius: 12px; background: #fff; color: var(--w-ink); cursor: pointer; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease, transform var(--m-hover) ease; }
.lk-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.lk-step:hover { border-color: #cfd6e0; background: var(--w-soft); }
.lk-step:active { transform: scale(.94); }
.lk-target-field { display: inline-flex; align-items: baseline; gap: 2px; }
.lk-target-field input { width: 3.4ch; min-width: 1.6ch; field-sizing: content; border: 0; border-bottom: 2px solid var(--w-line); border-radius: 0; background: transparent; padding: 0; color: var(--w-ink); font: inherit; font-size: 40px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; text-align: center; font-variant-numeric: tabular-nums; transition: border-color var(--m-hover) ease, color var(--m-hover) ease; }
.lk-target-field input:focus { border-bottom-color: var(--w-navy); outline: none; }
.lk-target-field input:focus-visible { outline: 3px solid var(--w-ring); outline-offset: 4px; border-radius: 6px; }
.lk-target-field input[aria-invalid="true"] { border-bottom-color: var(--w-bad); color: var(--w-bad); }
.lk-target-field > span { color: var(--w-muted); font-size: 24px; font-weight: 700; }
.lk-target-error { margin: 6px 0 0; }
.lk-target-help { max-width: 64ch; margin: 8px 0 0; color: var(--w-muted); font-size: 12.5px; line-height: 1.55; }
/* The track: the zones the table colours (red below 1×, yellow from 1× to the target, green from the target),
   the accounts on it as markers, and the native slider over it, its thumb a navy handle. The track is inset
   by half the handle, so a value sits under the handle at the same place as on the track. */
.lk-scale { position: relative; margin-top: 20px; padding-top: 6px; }
.lk-track { position: relative; height: 12px; margin: 0 3px; border-radius: 6px; background: #e4e8ef; }
.lk-zone { position: absolute; top: 0; bottom: 0; transition: left var(--m-hover) ease, width var(--m-hover) ease, opacity var(--m-hover) ease; }
.lk-zone.below { left: 0; width: var(--one); border-radius: 6px 0 0 6px; background: #f1c3bc; }
.lk-zone.between { left: var(--one); width: calc(var(--to) - var(--one)); background: #f2d6a6; }
.lk-zone.met { left: var(--to); right: 0; border-radius: 0 6px 6px 0; background: #b6dfc6; }
.lk-scale.is-unset .lk-zone.between, .lk-scale.is-unset .lk-zone.met { opacity: 0; }
.lk-scale:has(.lk-range:active) .lk-zone { transition: none; }
.lk-marker { position: absolute; top: 50%; width: 14px; height: 14px; border: 2.5px solid #fff; border-radius: 50%; background: #8f9bb0; box-shadow: 0 1px 3px rgb(23 32 51 / .3); transform: translate(-50%, -50%); transition: background-color var(--m-hover) ease; }
.lk-marker.met { background: var(--w-good); }
.lk-marker.between { background: var(--w-warn-dot); }
.lk-marker.below { background: var(--w-bad); }
.lk-range { position: absolute; top: -3px; right: 0; left: 0; width: 100%; height: 36px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.lk-range::-webkit-slider-runnable-track { height: 36px; background: transparent; }
.lk-range::-moz-range-track { height: 36px; background: transparent; }
.lk-range::-webkit-slider-thumb { width: 6px; height: 30px; margin-top: 3px; border: 0; border-radius: 3px; background: var(--w-navy); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgb(23 32 51 / .35); cursor: grab; -webkit-appearance: none; appearance: none; }
.lk-range::-moz-range-thumb { width: 6px; height: 30px; border: 0; border-radius: 3px; background: var(--w-navy); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgb(23 32 51 / .35); cursor: grab; }
.lk-range:active::-webkit-slider-thumb { cursor: grabbing; }
.lk-range:focus { outline: none; }
.lk-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--w-ring); }
.lk-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--w-ring); }
.lk-scale.is-unset .lk-range::-webkit-slider-thumb { opacity: 0; }
.lk-scale.is-unset .lk-range::-moz-range-thumb { opacity: 0; }
/* With no target yet the thumb is hidden, so keyboard focus shows it, ringed, where the arrows will move it. */
.lk-scale.is-unset .lk-range:focus-visible::-webkit-slider-thumb { opacity: 1; }
.lk-scale.is-unset .lk-range:focus-visible::-moz-range-thumb { opacity: 1; }
.lk-ticks { position: relative; height: 16px; margin: 12px 3px 0; color: var(--w-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lk-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.lk-ticks span:first-child { transform: none; }
.lk-ticks span:last-child { transform: translateX(-100%); }
.lk-target-list { margin: 16px 0 0; padding: 0; list-style: none; }
.lk-target-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 96px 64px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); }
.lk-target-list .lk-logo { width: 28px; height: 28px; border-radius: 8px; }
.lk-target-list .lk-logo svg { width: 15px; height: 15px; }
.lk-row-name { overflow: hidden; color: var(--w-ink); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.lk-mini { position: relative; height: 6px; border-radius: 3px; background: #edf0f5; }
.lk-mini i { display: block; height: 100%; border-radius: inherit; background: #8f9bb0; transition: background-color var(--m-hover) ease; }
.lk-mini i.met { background: var(--w-good); }
.lk-mini i.between { background: var(--w-warn-dot); }
.lk-mini i.below { background: var(--w-bad); }
.lk-pill { display: inline-flex; justify-self: end; align-items: center; gap: 5px; border-radius: 999px; background: #eef0f4; padding: 3px 9px; color: #5f6c80; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color var(--m-hover) ease, color var(--m-hover) ease; }
.lk-pill::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
.lk-pill.met { background: var(--w-good-bg); color: var(--w-good); }
.lk-pill.between { background: var(--w-warn-bg); color: var(--w-warn); }
.lk-pill.below { background: var(--w-bad-bg); color: var(--w-bad); }
.lk-pill.is-none { grid-column: 3 / -1; background: none; color: var(--w-muted); }
.lk-pill.is-none::before { display: none; }
.lk-target .lk-foot { justify-content: flex-end; }
.lk-target .lacak-empty { min-height: 0; margin-top: 16px; }
@container (max-width: 760px) { .lk-bisnis { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 420px) {
  .lk-id, .lk-target { padding: 18px 16px; }
  .lk-target-value { justify-content: center; }
  .lk-step { width: 52px; height: 52px; }
  .lk-target-list li { grid-template-columns: 28px minmax(0, 1fr) 64px; }
  .lk-mini { display: none; }
  .lk-target .lk-foot > button, .lk-id .lk-foot > button { width: 100%; min-height: 44px; }
  .lk-script { padding: 16px 16px 4px; }
  .lk-script-head { flex-direction: column; gap: 10px; }
  .lk-step-item { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
  .lk-step-mark { width: 26px; height: 26px; }
  .lk-step-item:not(:last-child)::before { left: 12px; top: 30px; }
}

/* ---------- Link pelacakan: the drawer; its QR, Hapus and Buang dialogs are Lacak's (dialogs.css) ---------- */
#links-layer .overlay-scrim { z-index: 90; }
.lacak-link-drawer .modal-head h2 { font-size: 17px; letter-spacing: -.01em; }
/* The CRM's drawer: header, a canvas body with white sections, the footer at the foot. */
.lacak-link-drawer { display: flex; flex-direction: column; }
.lacak-link-drawer .modal-body { flex: 1; }
.lacak-link-form { display: grid; gap: 10px; }
.lacak-link-drawer .detail-section { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-soft); }
.lacak-link-drawer .form-field { display: block; }
.lacak-link-drawer .form-field span { margin-bottom: 6px; }
.lacak-link-drawer .form-field input, .lacak-link-drawer .form-field textarea { font-size: 13px; }
.lacak-link-drawer .form-field textarea { min-height: 96px; line-height: 1.5; }
.lacak-link-drawer .form-field input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgb(165 61 61 / .12); }
.lacak-field-error { margin: 0; color: var(--danger); font-size: 11.5px; font-weight: 650; }
.lacak-field-error:empty { display: none; }
.lacak-field-help { color: var(--muted); font-size: 11px; line-height: 1.45; }
/* It arrives from the right as the CRM's payment panel does, and leaves the same way. */
.lacak-link-drawer.is-entering { animation: lacak-drawer-in 220ms cubic-bezier(.2, .8, .2, 1) both; }
.lacak-link-drawer.is-leaving { animation: lacak-drawer-out 160ms ease-in both; }
/* The drawer's scrim fades in and out with it. */
#links-layer .overlay-scrim.entering { animation: lacak-fade-in 160ms linear both; }
#links-layer .overlay-scrim.is-leaving { animation: lacak-scrim-out 160ms linear both; }
@keyframes lacak-drawer-in { from { opacity: 0; transform: translateX(32px); } }
@keyframes lacak-drawer-out { to { opacity: 0; transform: translateX(32px); } }
@keyframes lacak-scrim-out { to { opacity: 0; } }
/* The link's mark on Hapus's plate: its initials on its tint. */
.lacak-link-mark { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 10px; font-size: 11.5px; font-weight: 760; letter-spacing: .02em; }
.lacak-link-mark.tint-blue { background: #edf3fb; color: #2f62a4; }
.lacak-link-mark.tint-green { background: #edf8f3; color: #147a52; }
.lacak-link-mark.tint-purple { background: #f3effa; color: #6d4aa0; }
.lacak-link-mark.tint-amber { background: #fff4df; color: #95600b; }
.lacak-link-drawer:focus { outline: none; }

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .lacak-settings .settings-detail-head { grid-template-columns: 38px 42px minmax(0, 1fr) auto; }
  .lacak-settings .settings-detail-actions { grid-column: auto; }
  .lacak-settings .connection-banner { align-items: stretch; flex-direction: column; gap: 10px; }
  .lacak-settings .connection-banner .btn { width: 100%; min-height: 44px; }
  .lk-act, .lk-foot > button, .lk-copy-button, .lk-test-button { min-height: 44px; }
  .lk-guide-toggle, .lk-bd-toggle, .lk-place-tab, .lk-chip { min-height: 40px; }
  .lk-pick-option { min-height: 48px; }
  .lk-link-action { min-height: 44px; padding: 0 10px; }
  .lk-copy { min-height: 52px; }
  .lacak-code { align-items: stretch; flex-direction: column; padding: 10px; }
  .lacak-code .secondary-button { min-height: 44px; }
  .lacak-settings .settings-detail-actions .primary-button { min-height: 40px; padding: 0 12px; }
}
@media (max-width: 640px) {
  /* The CRM's settings page sets its own padding; Lacak's phone page padding gives way to it. */
  .page.settings-page-unified { padding: 10px; }
  .lacak-link-drawer .modal-footer > button { min-height: 44px; }
}
@media (max-width: 359px) {
  /* Beside a long title the header's own action keeps its icon and drops its words. */
  .lacak-settings .settings-detail-actions .primary-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lacak-settings .settings-detail-actions .primary-button { width: 40px; padding: 0; }
}
@media (max-width: 480px) {
  .page.settings-page-unified { padding-inline: 0; padding-top: 8px; }
  .lacak-settings .page-head { padding-inline: 16px; }
  .lacak-settings .settings-hub-grid { padding-inline: 10px; }
  .lacak-settings .connection-banners { padding-inline: 10px; }
  .lacak-connect .onboarding-shell { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Every transition and animation on Pengaturan is off; a changed card shows its wash still instead. */
  .lacak-settings *, .lacak-settings *::before, .lacak-settings *::after, #links-layer *, #links-layer *::before, #links-layer *::after, #link-pick-layer * { animation: none !important; transition: none !important; }
  .lacak-settings .is-fresh:not(.lk-wa) { background-color: #fff5d6; }
}