/* Pengaturan. The 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 list of pages beside the page, in its three groups, and the title that opens it where there is no room;
   - the pages' mark 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 page: the inbox count against the quota and Koneksi's table, a platform to a band, a row
     per connection with its switch; Link pelacakan's link widgets and stepped script; Bisnis's name and Target ROAS control;
   - Link pelacakan's drawer and dialogs;
   - what a finished action changed, marked once. */

/* ---------- The list of pages and a page's 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; }

/* The list stands at the page's left, on the canvas rather than a card, so it reads as the way around and the page
   beside it as the work; it is held in view as the page scrolls. Each group is headed by whose it is, the
   switcher's tile or mark and the name in ink; its pages under it, each its mark and name in the rail's quiet
   weight. The page on screen sits on white with the rail's gold marker at its edge (sidebar.css), its mark in navy. */
.lacak-settings.has-nav { display: grid; grid-template-columns: 224px minmax(0, 1fr); align-items: start; column-gap: 26px; }
.lacak-settings.has-nav > .settings-stage { min-width: 0; }
.lk-nav { position: sticky; top: 22px; display: grid; align-content: start; gap: 20px; min-width: 0; padding: 6px 0 24px; }
.lk-nav-group { display: grid; gap: 2px; min-width: 0; }
.lk-nav-head { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 30px; margin: 0 0 3px; padding: 0 8px; color: #24334e; font-size: 12.5px; font-weight: 720; line-height: 1.3; }
.lk-nav-head > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-nav-head .biz-tile { width: 24px; height: 24px; flex: none; border-radius: 7px; font-size: 9.5px; }
.lk-nav-head .biz-org-mark { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; }
.lk-nav-avatar { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 50%; background: #f3e7d3; color: #6b4b12; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; }
.lk-nav-link { position: relative; display: flex; width: 100%; min-height: 36px; align-items: center; gap: 11px; border: 0; border-radius: 10px; background: transparent; padding: 0 10px 0 12px; color: #4d5a70; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color var(--m-hover) ease, color var(--m-hover) ease; }
.lk-nav-glyph { display: grid; width: 18px; height: 18px; flex: none; place-items: center; color: #8592a6; transition: color var(--m-hover) ease; }
.lk-nav-glyph .icon { width: 17px; height: 17px; }
.lk-nav-link:hover { background: rgb(23 41 68 / .05); color: var(--ink, #172033); }
.lk-nav-link:hover .lk-nav-glyph { color: #4d5a70; }
.lk-nav-link:focus-visible { outline: 3px solid rgb(47 101 172 / .28); outline-offset: 0; }
.lk-nav-link.is-current { background: #fff; color: var(--ink, #172033); font-weight: 700; box-shadow: 0 0 0 1px #e8e6e1, 0 1px 3px rgb(23 32 51 / .05); }
.lk-nav-link.is-current .lk-nav-glyph { color: var(--navy, #172944); }
.lk-nav-link.is-current::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: #d4a13b; }
.lk-nav-link.is-current.is-arriving::before { animation: lk-nav-arrive var(--m-move) var(--m-in) both; }
@keyframes lk-nav-arrive { from { transform: scaleY(.2); opacity: 0; } }
/* A page's header without Kembali: its mark, its name, its action. */
.lacak-settings .settings-detail-head.is-home { grid-template-columns: 48px minmax(0, 1fr) auto; min-height: 74px; }
/* Where the list is not beside the page, the page's name opens it: the name as it reads, with the list's chevron. */
.lk-nav-title { margin: 0; min-width: 0; font: inherit; }
.lk-nav-toggle { display: inline-flex; max-width: 100%; align-items: center; gap: 6px; margin: -4px 0 -4px -8px; border: 0; border-radius: 9px; background: transparent; padding: 4px 8px; color: var(--sw-ink, #172033); font: inherit; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; cursor: pointer; transition: background-color var(--m-hover) ease; }
.lk-nav-toggle > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-nav-toggle .icon { width: 16px; height: 16px; flex: none; color: #687489; transition: transform var(--m-move) var(--m-in); }
.lk-nav-toggle:hover { background: var(--soft, #f4f4f2); }
.lk-nav-toggle[aria-expanded="true"] { background: #eef3fa; }
.lk-nav-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.lk-nav-toggle:focus-visible { outline: 3px solid rgb(47 101 172 / .28); outline-offset: 2px; }
/* The list from the title: in the period menu's frame (lacak.css .inbox-menu), the same groups and pages. */
.lk-nav-menu .lk-nav { position: static; gap: 14px; padding: 6px 8px 12px; overflow-y: auto; }
.lk-nav-menu.is-sheet .lk-nav { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.lk-nav-menu .lk-nav-link { min-height: 44px; }
.lk-nav-menu .lk-nav-link.is-current { background: #eef3fa; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .lk-nav-link.is-current::before { animation: none; } }

/* ---------- 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, .pg-biz-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, .pg-biz-roas { 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; }
.lacak-settings :is(.lk-switch, .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); }

/* ---------- The inbox count against the quota (settings.js inboxMeterHtml) ----------
   Koneksi's, setup's Selesai's and Penagihan's line's one count: a place for each inbox the quota buys, navy for
   one taken, red for a failed one, empty for a free one; then the count in words. With room the words are quiet;
   full, the places all navy and the words in ink. */
.lk-meter { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.lk-meter-places { display: inline-flex; flex-wrap: wrap; gap: 3px; max-width: 240px; }
.lk-meter-places i { width: 12px; height: 8px; border-radius: 3px; background: #dfe4ec; transition: background-color var(--m-hover) ease; }
.lk-meter-places i.is-on { background: var(--w-navy, #172944); }
.lk-meter-places i.is-failed { background: var(--w-bad-dot, #c9363e); }
.lk-meter-count { color: var(--w-muted, #5c6a86); font-size: 12.5px; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; }
.lk-meter.is-full .lk-meter-count { color: var(--w-ink, #172033); }
/* Koneksi arriving: the places fill from the left in turn (settings.js koneksiArrive). */
.lk-meter.is-arriving .lk-meter-places i { animation: lk-seg-fill var(--m-move) var(--m-in) both; }
.lk-meter.is-arriving .lk-meter-places i:nth-child(n+2) { animation-delay: 40ms; }
.lk-meter.is-arriving .lk-meter-places i:nth-child(n+3) { animation-delay: 80ms; }
.lk-meter.is-arriving .lk-meter-places i:nth-child(n+4) { animation-delay: 120ms; }
.lk-meter.is-arriving .lk-meter-places i:nth-child(n+5) { animation-delay: 160ms; }
@keyframes lk-seg-fill { from { transform: scaleX(0); } }

/* ---------- Koneksi: the table ----------
   One table, a platform to a band: the platform in the shaded column at the left, level with its first row, and
   its connections at the right, a row each, with Tambah akun under an ad platform's rows. A row reads across:
   who it is, its state, its last sync (for WhatsApp, whether chats arrive), its switch. Platforms part with the
   table's own line, rows within one with the page's hairline, Tambah akun with a dashed one. */
.lk-table { overflow: hidden; border: 1px solid var(--w-line); border-radius: 14px; background: #fff; }
.lk-platform { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.lk-platform + .lk-platform { border-top: 1px solid var(--w-line); }
/* The column spans the band's rows and shares their tracks, so its heading sits level with the first row,
   however tall that row grows. */
.lk-side { display: grid; grid-row: 1 / span var(--n, 1); grid-template-rows: subgrid; border-right: 1px solid var(--w-line); background: var(--w-soft); }
.lk-platform-head { display: flex; grid-row: var(--head, 1); align-self: center; align-items: center; gap: 14px; min-width: 0; margin: 0; padding: 12px 20px; color: var(--w-ink); font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; }
.lk-platform-head .lk-logo { width: 34px; height: 34px; border-radius: 10px; }
.lk-platform-head .lk-logo svg { width: 18px; height: 18px; }
.lk-platform-name { display: grid; min-width: 0; gap: 5px; }
.lk-cell { grid-column: 2; min-width: 0; }
.lk-cell:not(.more-marker) + .lk-cell:not(.more-marker) { border-top: 1px solid var(--hair); }
.lk-cell.list-state { min-height: 56px; }
.lk-refusal.lk-cell { margin: 0; border-radius: 0; padding: 14px 20px; }

/* A row: who, state, sync, switch, in columns that hold their place from row to row. The switch's column holds
   its longest word, Hubungkan lagi, on one line; the room for it comes from the sync, whose figure is short, so
   the number and the name with its mode keep one line each. */
.lk-row { position: relative; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(104px, 1fr) minmax(128px, 1.2fr) 156px; align-items: center; gap: 12px; min-height: 76px; padding: 14px 18px; background: #fff; }
/* The edge down the left appears only for what needs a look: none while healthy, so a healthy table is calm and
   the one coloured edge on it is the one to read; the row stays white, its lamp, figure and switch carry the rest.
   Its colour moves when an action changes it. */
.lk-edge { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: rgb(31 157 104 / 0); }
.lk-row.is-stale .lk-edge { background: var(--w-warn-dot); }
.lk-row.is-failed .lk-edge { background: var(--w-bad-dot); }
.lk-who { display: grid; min-width: 0; gap: 3px; }
/* A long name wraps to a second line before it is cut, so two accounts that begin alike stay apart. */
.lk-who 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-who small { color: var(--w-muted); font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.lk-number { color: var(--w-ink); font-size: 16px; font-weight: 700; letter-spacing: .01em; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lk-who-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.lk-who-mode em { border: 1px solid var(--w-line); border-radius: 999px; padding: 1px 8px; color: var(--w-ink); font-size: 11px; font-style: normal; font-weight: 650; }
.lk-state { display: flex; min-width: 0; }
.lk-state .lk-lamp { white-space: normal; line-height: 1.3; }
.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: 14px; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; }
.lk-sync b .icon { width: 15px; height: 15px; flex: none; stroke-width: 2; }
.lk-row.is-off :is(.lk-who strong, .lk-number, .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-row.is-stale .lk-sync b { color: var(--w-warn); }
.lk-row.is-failed .lk-sync b { color: #a8262e; }

/* The switch: the action's word, then the track. On, the connected green with the knob at the right and Putuskan
   quiet; off, the quiet grey with Hubungkan in ink; failed, off with its track ringed in the failed red and
   Hubungkan lagi in that red, where the repair is. Pressed, the knob stretches toward where it would go. The word
   and the track are one control, and its hit area reaches past them to a finger's size. */
.lk-toggle { display: flex; min-width: 0; justify-content: flex-end; }
.lk-switch-hold { display: inline-flex; min-width: 0; }
.lk-switch { position: relative; display: inline-flex; min-width: 0; min-height: 28px; align-items: center; gap: 8px; margin: 0; border: 0; border-radius: 999px; background: none; padding: 0 0 0 4px; color: var(--w-muted); font: inherit; cursor: pointer; }
.lk-switch::before { content: ""; position: absolute; inset: -8px -6px; }
/* Hubungkan lagi fits on one line; Menunggu koneksi… takes two, so the column never moves. */
.lk-switch-word { min-width: 0; max-width: 100px; font-size: 12.5px; font-weight: 700; line-height: 1.25; text-align: right; text-wrap: balance; transition: color var(--m-hover) ease; }
.lk-switch-word > span { display: block; }
.lk-switch.is-off { color: var(--w-ink); }
.lk-switch.is-failed { color: var(--w-bad); }
.lk-switch-track { position: relative; display: block; width: 46px; height: 28px; flex: none; border-radius: 999px; background: #cbd3de; transition: background-color var(--m-hover) ease, box-shadow var(--m-hover) ease; }
.lk-knob { position: absolute; top: 3px; left: 3px; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(23 32 51 / .22), 0 0 0 .5px rgb(23 32 51 / .05); transform-origin: left center; transition: transform var(--m-move) var(--m-in); }
.lk-switch[aria-checked="true"] .lk-switch-track { background: var(--w-good-dot); }
.lk-switch[aria-checked="true"] .lk-knob { transform: translateX(18px); transform-origin: right center; }
.lk-switch:hover .lk-switch-track { background: #b9c3d0; }
.lk-switch[aria-checked="true"]:hover { color: var(--w-ink); }
.lk-switch[aria-checked="true"]:hover .lk-switch-track { background: #1a8a5b; }
.lk-switch.is-failed .lk-switch-track { background: var(--w-bad-bg); box-shadow: inset 0 0 0 1.5px var(--w-bad-dot); }
.lk-switch.is-failed:hover .lk-switch-track { background: #f7d8d3; }
.lk-switch:active:not(:disabled, [aria-disabled="true"]) .lk-knob { transform: scaleX(1.18); }
.lk-switch[aria-checked="true"]:active:not(:disabled, [aria-disabled="true"]) .lk-knob { transform: translateX(18px) scaleX(1.18); }
.lk-switch:disabled { cursor: not-allowed; opacity: .45; }
.lk-switch:disabled:hover .lk-switch-track { background: #cbd3de; }
/* While the platform's window is open: Menunggu koneksi… in the link's blue, as Tambah akun's waiting; the knob
   turns where it stands, and the switch waits. */
.lk-switch[aria-busy="true"] { color: #2f62a4; cursor: progress; }
.lk-switch[aria-busy="true"] .lk-switch-track, .lk-switch[aria-busy="true"]:hover .lk-switch-track { background: #cbd3de; box-shadow: none; }
.lk-knob-spin { width: 12px; height: 12px; border: 2px solid rgb(23 32 51 / .14); border-top-color: var(--w-navy); border-radius: 50%; animation: lk-spin 800ms linear infinite; }
/* Back from a flow that connected it, the switch turns on once the view has landed (180ms). Changed in place, the
   redraw moves it instead (settings.js morphPlay). */
.lk-row.is-changed.is-connected .lk-switch-track { animation: lk-switch-on var(--m-move) ease 200ms both; }
.lk-row.is-changed.is-connected .lk-knob { animation: lk-knob-on 260ms var(--m-in) 200ms both; }
@keyframes lk-switch-on { from { background-color: #cbd3de; } }
@keyframes lk-knob-on { from { transform: none; } }

/* Tambah akun: a quiet row in the link's blue under the platform's last account, across its dashed line; under
   the pointer its plus fills. */
.lk-add { display: flex; width: 100%; min-height: 56px; align-items: center; gap: 12px; margin: 0; border: 0; background: #fff; padding: 10px 20px; color: #2f62a4; font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; transition: background-color var(--m-hover) ease; }
.lk-cell:not(.more-marker) + .lk-add.lk-cell { border-top: 1px dashed #d9dfe8; }
.lk-add-plus { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 50%; background: #edf3fb; color: #2f62a4; transition: background-color var(--m-hover) ease, color var(--m-hover) ease, transform var(--m-hover) ease; }
.lk-add-plus .icon { width: 15px; height: 15px; }
.lk-add-plus .lw-spin { width: 14px; height: 14px; flex-basis: 14px; }
.lk-add:hover { background: #f6f9fd; }
.lk-add:hover .lk-add-plus { background: #2f62a4; color: #fff; }
.lk-add:active .lk-add-plus { transform: scale(.92); }
.lacak-settings .lk-add:focus-visible { outline: 3px solid var(--w-ring); outline-offset: -3px; }
/* While the platform's window is open: Menunggu koneksi… in the same place, the row still. */
.lk-add[aria-busy="true"], .lk-add[aria-busy="true"]:hover { background: #f6f9fd; color: #2f62a4; cursor: progress; }
.lk-add[aria-busy="true"] .lk-add-plus { background: #edf3fb; }

/* ---------- Koneksi: the two groups ----------
   The inboxes, then the ad accounts, each its own table under its name at the sub-page's reading size. An inbox's
   row has no sync to show, so its switch keeps the last column and its lamp stays level with the ad accounts'. */
.lk-group + .lk-group { margin-top: 28px; }
.lk-group-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin: 0 0 12px; }
.lk-group-head > .lk-meter { padding-bottom: 1px; }
.lk-group-copy { display: grid; flex: 1 1 360px; min-width: 0; max-width: 80ch; gap: 3px; }
.lk-group-copy h2 { margin: 0; color: var(--w-ink); font-size: 15px; font-weight: 750; line-height: 1.3; letter-spacing: -.01em; }
:is(.lk-row--wa, .lk-row--inbox) .lk-toggle { grid-column: 4; }
/* Tambah kotak masuk: the inboxes' one add row, across the table under every channel, in Tambah akun's quiet blue.
   With the quota full a still row in its place: its plus greyed, the refusal's words in ink, and where to go next,
   Penagihan's button at its end, or whom to ask under the words. */
.lk-add.lk-add--group { border-top: 1px dashed #d9dfe8; }
.lk-table > .lk-add--group:first-child { border-top: 0; }
.lk-add.is-full, .lk-add.is-full:hover { background: #fafbfc; color: var(--w-ink); cursor: default; }
.lk-add.is-full .lk-add-plus, .lk-add.is-full:hover .lk-add-plus { background: #eef0f4; color: #9aa7b5; }
.lk-full-copy { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.lk-full-copy b { color: var(--w-ink, #172033); font-size: 13px; font-weight: 700; line-height: 1.4; }
.lk-full-copy small { color: var(--w-muted, #5c6a86); font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.lk-full-action { flex: none; min-height: 36px; padding: 0 14px; font-size: 12.5px; }
/* No inbox yet: the CRM's empty form inside the table, where the channels' bands would start, Tambah kotak masuk
   under it across the dashed line. */
.lk-table > .lk-empty .lacak-empty { min-height: 0; padding: 30px 24px 26px; }
.lk-table > .lk-empty .lacak-empty > span { max-width: 52ch; }
/* For a role that cannot change connections: no switch; a failed row asks for the Owner or an Admin where its switch
   would be, in the failed red. */
.lk-ask { max-width: 184px; color: var(--w-bad); font-size: 12px; font-weight: 650; line-height: 1.35; text-align: right; text-wrap: balance; }
/* An ad platform with no account: one still row where its rows would be, its state at the left and, for a role that
   cannot add, whom to ask at the switch's place, in the quiet muted: nothing has failed. Its dot stands in a slot as
   wide as Tambah akun's plus, so the dot and the plus, and their words, keep one line down the band. */
.lk-row.lk-row--empty { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "state toggle"; min-height: 56px; padding: 12px 20px; }
.lk-row--empty .lk-state { grid-area: state; justify-content: flex-start; padding-top: 0; }
.lk-row--empty .lk-lamp { gap: 12px; }
.lk-row--empty .lk-lamp i { margin-inline: 9.5px; }
.lk-row--empty .lk-toggle { grid-area: toggle; }
.lk-row--empty .lk-ask { max-width: 260px; color: var(--w-muted); }
@container (max-width: 680px) {
  /* Stacked, the copy takes its own height: its row basis would otherwise become a column height. */
  .lk-group-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .lk-group-copy { flex: none; }
  .lk-ask { max-width: none; }
  .lk-row.lk-row--empty { grid-template-columns: minmax(0, 1fr); grid-template-areas: "state" "toggle"; gap: 6px; padding-inline: 16px; }
  .lk-row--empty .lk-toggle { padding-left: 40px; }
  .lk-row--empty .lk-toggle { justify-content: flex-start; }
  .lk-row--empty .lk-ask { max-width: none; text-align: left; }
}

/* Narrower: the platform becomes the shaded band over its rows; narrower still, a row takes two lines, as the
   account card did: who it is with its lamp, then its sync with its switch. */
@container (max-width: 896px) {
  .lk-platform { grid-template-columns: minmax(0, 1fr); }
  .lk-side { display: block; grid-row: auto; border-right: 0; border-bottom: 1px solid var(--w-line); }
  .lk-platform-head { padding: 11px 16px; }
  .lk-platform-head .lk-logo { width: 30px; height: 30px; border-radius: 9px; }
  .lk-platform-head .lk-logo svg { width: 16px; height: 16px; }
  .lk-platform-name { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
  .lk-cell { grid-column: 1; }
}
@container (max-width: 680px) {
  /* The lamp keeps a track of its own, so the switch under it never narrows the name; a long state word takes
     two lines there before the number is crowded. */
  .lk-row { grid-template-columns: minmax(0, 1fr) auto fit-content(100px); grid-template-areas: "who who state" "sync toggle toggle"; align-items: center; gap: 12px 14px; min-height: 0; padding: 14px 16px; }
  .lk-who { grid-area: who; align-self: start; }
  .lk-state { grid-area: state; align-self: start; justify-content: flex-end; padding-top: 2px; }
  .lk-sync { grid-area: sync; }
  .lk-toggle, :is(.lk-row--wa, .lk-row--inbox) .lk-toggle { grid-area: toggle; }
  /* An inbox has no sync line, so its switch stands beside who it is, and its lamp goes under the name. */
  :is(.lk-row--wa, .lk-row--inbox) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who toggle" "state toggle"; gap: 8px 14px; }
  :is(.lk-row--wa, .lk-row--inbox) .lk-state { justify-content: flex-start; padding-top: 0; }
  .lk-add { min-height: 52px; padding-inline: 16px; }
  .lk-refusal.lk-cell { padding-inline: 16px; }
}
/* The narrowest phones: the lamp takes its own line under the name. */
@container (max-width: 330px) {
  .lk-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who who" "state state" "sync toggle"; gap: 10px 12px; }
  .lk-state { justify-content: flex-start; padding-top: 0; }
}

/* What a finished action changed: its row 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-row.is-failed) { animation: koneksi-fresh 1.2s ease-out both; }
/* A failed row brought into view by the banner's Perbaiki keeps its red and rings once instead. */
.lk-row.is-failed.is-fresh { animation: lk-glow-failed 1.2s ease-out both; }
@keyframes lk-glow-failed { 0%, 35% { box-shadow: inset 0 0 0 2px #e4bf78; } 100% { box-shadow: inset 0 0 0 2px rgb(228 191 120 / 0); } }
@keyframes koneksi-fresh { 0%, 35% { background-color: #fff5d6; } 100% { background-color: #fff; } }
.lk-row.is-fresh .lk-lamp { animation: lacak-mark-in var(--m-pop) var(--m-in) both; }
.lk-row.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: flex-start; 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; }
/* Under the name, the inbox the link opens: the channel's mark and the inbox, as Pelanggan's rows name it. */
.lk-link-title { display: grid; min-width: 0; gap: 3px; padding-top: 4px; }
.lk-link-inbox { display: flex; min-width: 0; align-items: center; gap: 6px; color: var(--w-muted); font-size: 12px; font-weight: 600; }
.lk-link-inbox .channel-mark { width: 13px; height: 13px; flex-basis: 13px; }
.lk-link-inbox > span { min-width: 0; overflow: hidden; 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, .sc-fab img { 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; }
/* Kotak masuk: the inboxes the link can open, under their channel's mark and name, as the inbox filter groups
   them; each the form's own radio in a row the whole of which picks it, the chosen one in the selected blue, a
   number's number under its name. Past six rows the choices scroll in a box of their own, inset so a focused
   row's ring is never cut, its scroll kept from the drawer's; a page loading shows the list's loading row in
   a row's place (lacak.css .inbox-page-state). */
.lk-inbox-groups { display: grid; gap: 12px; max-height: 332px; margin: -1px -5px 0; padding: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cbd2dc transparent; }
.lk-inbox-group { display: grid; gap: 6px; }
.lk-inbox-group > .more-marker { margin-top: -6px; }
.lk-inbox-group > .inbox-page-state { min-height: 44px; padding: 0 12px; }
.lk-inbox-head { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.lk-inbox-head .channel-mark { width: 13px; height: 13px; flex-basis: 13px; }
.lk-inbox-choice { display: flex; min-height: 44px; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 7px 12px; cursor: pointer; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease; }
.lk-inbox-choice:hover { border-color: #cfd6e0; background: #f5f7fa; }
.lk-inbox-choice:has(input:checked) { border-color: #9fb6d6; background: #edf3fb; }
.lk-inbox-choice:has(input:focus-visible) { outline: 3px solid rgba(47, 98, 164, .3); outline-offset: 2px; }
.lk-inbox-choice input { width: 16px; height: 16px; flex: none; margin: 0; accent-color: #172944; cursor: pointer; }
.lk-inbox-choice input:focus-visible { outline: none; }
.lk-inbox-copy { display: grid; min-width: 0; gap: 1px; line-height: 1.3; }
.lk-inbox-copy b { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.lk-inbox-copy small { color: var(--muted); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.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; }
/* The Business's name as one small form: the field beside the initials, as wide as the card lets it be, and Simpan
   right under it at the form's end, with no rule between them, as Akun's name has it. Saved, the form washes once
   inside a margin of its own, so nothing around it moves. */
.lk-name-form { display: grid; gap: 8px; margin: 0; }
.lk-name-form .lk-id-copy { flex: 1; }
.lk-name-form .form-field span { margin-bottom: 6px; }
.lk-name-form input { width: 100%; }
.lk-name-save { display: flex; justify-content: flex-end; }
.lk-name-save .primary-button { min-height: 38px; padding: 0 18px; }
.lacak-settings :is(.lk-name-form, .lk-org-form).is-fresh { border-radius: 4px; animation: lk-form-fresh 1.2s ease-out both; }
@keyframes lk-form-fresh { 0%, 35% { background-color: #fff5d6; box-shadow: 0 0 0 10px #fff5d6; } 100% { background-color: rgb(255 245 214 / 0); box-shadow: 0 0 0 10px rgb(255 245 214 / 0); } }
/* 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: 3px; height: 12px; border: 0; border-radius: 0; background: #8f9bb0; box-shadow: none; 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-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%); }
.lacak-bisnis .lk-ticks span { white-space: nowrap; }
.lacak-bisnis .lk-ticks span:nth-child(2) { margin-left: max(0px, calc(4ch - var(--one))); }
.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, .lk-name-save .primary-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, .lacak-settings .settings-detail-head.is-home { grid-template-columns: 42px minmax(0, 1fr) auto; min-height: 68px; }
  .lacak-settings .settings-detail-actions { grid-column: auto; }
  .lk-nav-toggle { font-size: 17px; }
  .lacak-settings .connection-banner { align-items: stretch; flex-direction: column; gap: 10px; }
  .lacak-settings .connection-banner .btn { width: 100%; min-height: 44px; }
  .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 { background-color: #fff5d6; }
}

/* Settings reuse the dialog frame; its own navigation stays inside the popup. */
body.settings-popup-open { overflow: hidden; }
#settings-layer { position: relative; z-index: 100; }
#settings-layer .lkd-scrim { z-index: 100; }
#settings-popup { z-index: 101; width: min(1060px, calc(100vw - 48px)); top: 32px; max-height: calc(100dvh - 64px); }
#settings-popup > .lkd-scroll { display: block; }
#settings-popup .page.settings-page-unified { padding: 0; }
.lk-popup-nav { display: flex; gap: 8px; margin-bottom: 14px; }
.lk-popup-nav .lk-nav-link { width: auto; }
@media (max-width: 640px) {
  #settings-popup { inset: 0; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

.lk-target-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }