/* Akun, Organisasi and Penagihan, the Pengaturan popup's frame, and the account page's sidebar (identity.js,
   members.js, billing.js, settings.js, app.js), loaded last. Built in the Dashboard's grammar and tokens
   (dashboard.css --dx-*): the page's name as plain type, one navy card that answers the page's question with the
   tiles beside it, then sections that are a plain heading over one white card of rows. Gold is today and the
   current place; colour never says a state alone, a word always does. The one decoration is the Lacak mark's ring,
   faint at the navy card's right edge. Motion answers the person only, in the mockup's one family (lacak.css
   --m-*): folds open and close, a row taken away folds shut, a changed part washes once, a switch's knob slides. */

.lka-page, #settings-popup, .lka-menu, #overlay-organization, #overlay-billing-details {
  --a-navy: #172944; --a-navy-2: #2c3e62; --a-navy-3: #4a5d84;
  --a-ink: #172033; --a-muted: #5c6a86; --a-faint: #7d889e;
  --a-line: #e4e8ef; --a-hair: #eef1f5; --a-soft: #f5f7fa; --a-row-hover: #f8fafd;
  --a-gold: #c69749; --a-gold-light: #e4bf78; --a-gold-deep: #86662a;
  --a-good: #1f7a55; --a-good-dot: #1f9d68; --a-good-bg: #e3f3ea;
  --a-warn: #8f5410; --a-warn-dot: #d99a3c; --a-warn-bg: #fbeedb;
  --a-bad: #b4372f; --a-bad-bg: #fbe8e5;
  --a-on-navy: #b9c4d8; --a-on-navy-line: rgb(255 255 255 / .12);
  --a-ring: rgb(47 98 164 / .3);
}

/* ---------- The page: the Dashboard's frame ---------- */
.lacak-settings.lka-page { max-width: 1680px; padding: 20px 18px 40px; background: transparent; font-variant-numeric: tabular-nums; }
.lka-page .settings-stage { max-width: 1080px; }
/* No panel around a page's content: the cards are the page's, on the canvas as the Dashboard's are. In the popup too. */
:is(.lka-page, .lkp-page) .settings-detail-body { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
/* The renewal banner above Akun and Organisasi stands at the page's edges. */
.lacak-renewal-slot[data-page="account_organization"] { max-width: 1116px; padding: 20px 18px 0; }
.lka-head { display: flex; align-items: center; gap: 12px 24px; min-height: 62px; margin-bottom: 14px; }
.lka-title { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--a-navy); font-size: 24px; font-weight: 700; letter-spacing: -.6px; line-height: 1.04; }
.lka-title:focus { outline: none; }
.lka-head-actions { display: flex; flex: none; gap: 8px; }
.lka-head-actions .secondary-button, .lka-head-button { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; padding: 0 14px; }
.lka-head-actions .icon, .lka-head-button .icon { width: 15px; height: 15px; flex: none; }
.lka-head-actions [aria-busy="true"] { cursor: progress; }
.lka-back { display: grid; width: 40px; height: 40px; flex: none; place-items: center; margin-left: -6px; border: 1px solid var(--a-line); border-radius: 10px; background: #fff; color: var(--a-ink); cursor: pointer; transition: background-color var(--m-hover) ease; }
.lka-back:hover { background: var(--a-soft); }
.lka-back .icon { width: 18px; height: 18px; }

.lka-body { display: grid; gap: 22px; min-width: 0; color: var(--a-ink); container-type: inline-size; }
.lka-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: stretch; gap: 14px; }
.lka-top.is-single { grid-template-columns: minmax(0, 1fr); }
.lka-tiles { display: grid; grid-auto-rows: 1fr; gap: 12px; min-width: 0; }
.lk-security .lka-top:has(.lka-codes) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.45fr); }
.lk-security .lka-tiles:has(.lka-codes) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }

/* ---------- The navy card ---------- */
.lka-hero { position: relative; display: grid; align-content: start; min-width: 0; min-height: 196px; overflow: hidden; border-radius: 18px; background: var(--a-navy); padding: 24px 28px; color: #fff; isolation: isolate; }
.lka-hero-label { margin: 0; color: var(--a-on-navy); font-size: 13px; font-weight: 600; }
/* The Lacak mark's ring, faint, its centre off the card's right edge. */
.lka-ring { position: absolute; z-index: -1; top: 50%; right: -96px; width: 320px; height: 320px; transform: translateY(-50%); pointer-events: none; }
.lka-ring circle { fill: none; stroke: rgb(228 191 120 / .09); stroke-width: 22; }
.lka-ring .lka-ring-outer { stroke: rgb(228 191 120 / .05); stroke-width: 1.5; }
.lka-ring .lka-ring-dot { fill: rgb(228 191 120 / .08); stroke: none; }
/* On navy: the white action (Pelanggan's Catat penjualan), the quiet one in the card's light ink. */
.lka-on-navy { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; background: #fff; padding: 0 16px; color: var(--a-navy); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color var(--m-hover) ease, transform var(--m-hover) ease; }
.lka-on-navy:hover { background: #eef2f8; }
.lka-on-navy:active { transform: scale(.97); }
.lka-quiet { display: inline-flex; min-height: 40px; align-items: center; border: 0; border-radius: 10px; background: transparent; padding: 0 12px; color: #dfe6f2; font: inherit; font-size: 13px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: background-color var(--m-hover) ease, color var(--m-hover) ease; }
.lka-quiet:hover { background: rgb(255 255 255 / .08); color: #fff; }
.lka-hero :is(button, input):focus-visible { outline: 2px solid var(--a-gold-light); outline-offset: 2px; }

/* ---------- Tiles ---------- */
.lka-tile { display: flex; min-width: 0; flex-direction: column; gap: 6px; border: 1px solid var(--a-line); border-radius: 14px; background: #fff; padding: 14px 18px 16px; }
.lka-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.lka-tile-head h2 { margin: 0; min-width: 0; color: var(--a-muted); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.lka-tile-mark { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border-radius: 9px; background: #eef0f4; color: var(--a-muted); transition: background-color var(--m-move) ease, color var(--m-move) ease; }
.lka-tile-mark .icon { width: 17px; height: 17px; }
.lka-tile-figure { overflow: hidden; color: var(--a-ink); font-size: 17px; font-weight: 720; letter-spacing: -.015em; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.lka-tile-note { max-width: 46ch; margin: 0; overflow: hidden; color: var(--a-faint); font-size: 12px; line-height: 1.45; text-overflow: ellipsis; }
.lka-tile-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.lka-tile-foot > button { min-height: 38px; padding: 0 16px; }
.lka-tile-foot .icon { width: 15px; height: 15px; }
.lka-tile-foot .primary-button { display: inline-flex; align-items: center; gap: 8px; }
/* A tile's state as its figure: the dot and the word, large. */
.lka-state { display: inline-flex; align-items: center; gap: 9px; color: var(--a-muted); font-size: 20px; font-weight: 730; letter-spacing: -.015em; line-height: 1.2; }
.lka-state i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #9aa7b5; box-shadow: 0 0 0 4px #eef0f4; transition: background-color var(--m-hover) ease, box-shadow var(--m-hover) ease; }
.lka-state.is-on { color: var(--a-good); }
.lka-state.is-on i { background: var(--a-good-dot); box-shadow: 0 0 0 4px var(--a-good-bg); }
.lka-tile.is-on .lka-tile-mark { background: var(--a-good-bg); color: var(--a-good); }
.lka-quiet-button { min-height: 38px; border: 1px solid var(--a-line); border-radius: 10px; background: #fff; padding: 0 14px; color: var(--a-ink); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: border-color var(--m-hover) ease, background-color var(--m-hover) ease; }
.lka-quiet-button:hover { border-color: var(--a-navy); }
.lka-link { min-height: 32px; margin-right: -8px; border: 0; border-radius: 8px; background: transparent; padding: 0 8px; color: #2f62a4; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color var(--m-hover) ease; }
.lka-link:hover, .lka-link[aria-expanded="true"] { background: #e6eef9; }
.lka-icon { display: grid; width: 32px; height: 32px; flex: none; place-items: center; margin-right: -6px; border: 0; border-radius: 9px; background: transparent; color: var(--a-muted); cursor: pointer; transition: background-color var(--m-hover) ease, color var(--m-hover) ease; }
.lka-icon:hover { background: var(--a-soft); color: var(--a-ink); }
.lka-icon .icon { width: 16px; height: 16px; }

/* ---------- Sections: a plain heading over one white card of rows ---------- */
.lka-section { display: grid; gap: 10px; min-width: 0; }
.lka-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.lka-section-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--a-ink); font-size: 17px; font-weight: 720; letter-spacing: -.015em; }
.lka-count { display: inline-flex; min-width: 24px; justify-content: center; border-radius: 999px; background: #eceff4; padding: 1px 8px; color: var(--a-muted); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.lka-section-head .primary-button { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; padding: 0 16px; }
.lka-section-head .primary-button .icon { width: 15px; height: 15px; }
.lka-card { min-width: 0; overflow: hidden; border: 1px solid var(--a-line); border-radius: 16px; background: #fff; }
.lka-card > .lacak-empty { min-height: 0; padding: 30px 24px 26px; }
.lka-rows { margin: 0; padding: 0; list-style: none; }
.lka-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 62px; padding: 10px 18px; background: #fff; transition: background-color var(--m-hover) ease; }
.lka-row:hover { background: var(--a-row-hover); }
:is(.lka-rows, .lm-body, .lb-lines-body) > * + * { border-top: 1px solid var(--a-hair); }
.lka-row-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: var(--a-soft); color: var(--a-ink); }
.lka-row-mark .icon { width: 18px; height: 18px; }
.lka-row-copy { display: grid; min-width: 0; justify-items: start; gap: 2px; }
.lka-row-copy strong { display: flex; max-width: 100%; min-width: 0; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--a-ink); font-size: 13.5px; font-weight: 680; line-height: 1.35; }
.lka-row-copy strong > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.lka-row-copy small { min-width: 0; color: var(--a-muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.lka-row-action { min-height: 34px; border: 1px solid var(--a-line); border-radius: 9px; background: #fff; padding: 0 12px; color: var(--a-ink); font: inherit; font-size: 12.5px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: border-color var(--m-hover) ease, background-color var(--m-hover) ease, color var(--m-hover) ease; }
.lka-row-action:hover { border-color: var(--a-navy); }
.lka-row-action.is-danger { color: var(--a-muted); }
.lka-row-action.is-danger:hover { border-color: #f0c8c4; background: var(--a-bad-bg); color: var(--a-bad); }
.lka-pill { display: inline-flex; flex: none; align-items: center; gap: 5px; border-radius: 999px; background: #eef0f4; padding: 2px 9px; color: #5f6c80; font-size: 11.5px; font-weight: 680; line-height: 1.45; white-space: nowrap; }
.lka-pill.is-good { background: var(--a-good-bg); color: var(--a-good); }
.lka-pill.is-good::before, .lka-pill.is-warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lka-pill.is-warn { background: var(--a-warn-bg); color: var(--a-warn); }
.lka-pill.is-navy { background: var(--a-navy); color: #fff; }
.lka-end { display: flex; min-height: 40px; align-items: center; }
.lka-end .lk-danger-link { margin-left: -8px; }
.lka-page :is(.lka-quiet-button, .lka-link, .lka-icon, .lka-row-action, .lka-back, .lka-more, .lka-edit, .lb-business-toggle, .lk-danger-link, .lk-switch, .lka-list-row, .lka-select select):focus-visible { outline: 3px solid var(--a-ring); outline-offset: 2px; }

/* ---------- Akun ---------- */
.lka-me { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 20px; align-content: stretch; }
/* The initials at the heart of the mark's ring: the rail avatar's beige, a navy gap, the gold ring. */
.lka-avatar { display: grid; width: 64px; height: 64px; margin: 4px; place-items: center; border-radius: 50%; background: #f3e7d3; color: #5d4524; font-size: 20px; font-weight: 760; letter-spacing: .02em; box-shadow: 0 0 0 4px var(--a-navy), 0 0 0 6px var(--a-gold-light); }
.lka-me-copy { display: grid; min-width: 0; align-content: start; justify-items: start; gap: 2px; padding-top: 8px; margin-left: -8px; }
.lka-name-form { display: grid; max-width: 100%; min-width: 0; justify-items: start; gap: 8px; margin: 0; }
.lka-edit { display: inline-flex; max-width: 100%; min-width: 0; align-items: center; gap: 8px; margin: 0; border: 0; border-radius: 9px; background: transparent; padding: 2px 8px; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--m-hover) ease; }
.lka-edit:hover { background: rgb(255 255 255 / .07); }
.lka-edit .icon { width: 15px; height: 15px; flex: none; color: #8592a6; transition: color var(--m-hover) ease; }
.lka-edit:hover .icon, .lka-edit:focus-visible .icon { color: var(--a-gold-light); }
.lka-name strong { min-width: 0; overflow: hidden; color: #fff; font-size: 26px; font-weight: 730; letter-spacing: -.025em; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.lka-email span { min-width: 0; overflow: hidden; color: var(--a-on-navy); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lka-name-input { width: min(380px, 100%); min-height: 46px; border: 0; border-radius: 11px; background: #fff; padding: 0 14px; color: var(--a-ink); font: inherit; font-size: 18px; font-weight: 700; box-shadow: 0 0 0 3px rgb(228 191 120 / .45); }
.lka-name-input:focus { outline: none; box-shadow: 0 0 0 3px var(--a-gold-light); }
.lka-name-input[aria-invalid="true"] { box-shadow: 0 0 0 3px #f6aaa2; }
.lka-name-actions { display: flex; gap: 6px; }
.lka-name-form.is-editing { animation: lka-swap var(--m-pop) var(--m-in) both; }
.lka-field-error { color: #f6aaa2; font-size: 12.5px; font-weight: 600; }
.lka-lang { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--a-on-navy-line); }
.lka-lang > span:first-child { color: var(--a-on-navy); font-size: 13px; font-weight: 600; }
.lka-me .lk-lang { display: inline-flex; gap: 2px; border: 1px solid rgb(255 255 255 / .14); border-radius: 10px; background: rgb(255 255 255 / .06); padding: 2px; }
.lka-me .lk-lang button { min-width: 48px; min-height: 32px; border: 0; border-radius: 8px; background: transparent; padding: 0 12px; color: var(--a-on-navy); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .02em; cursor: pointer; transition: background-color var(--m-move) var(--m-in), color var(--m-move) var(--m-in); }
.lka-me .lk-lang button:hover { color: #fff; }
.lka-me .lk-lang button[aria-checked="true"] { background: #fff; color: var(--a-navy); }
/* The recovery codes: a pip a code, navy for each left. */
.lka-pips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.lka-pips i { width: 16px; height: 8px; border-radius: 3px; background: #dfe4ec; }
.lka-pips i.is-on { background: var(--a-navy); }
.lka-codes .lka-tile-figure { font-size: 14px; font-weight: 700; }
.lka-codes.is-empty .lka-tile-figure { color: var(--a-bad); }
.lka-codes.is-fresh .lka-pips i.is-on { animation: lk-seg-fill var(--m-move) var(--m-in) both; }
.lka-codes.is-fresh .lka-pips i:nth-child(n+2) { animation-delay: 30ms; }
.lka-codes.is-fresh .lka-pips i:nth-child(n+4) { animation-delay: 60ms; }
.lka-codes.is-fresh .lka-pips i:nth-child(n+6) { animation-delay: 90ms; }
.lka-codes.is-fresh .lka-pips i:nth-child(n+8) { animation-delay: 120ms; }
.lk-sessions .lka-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
.lk-session.is-current .lka-row-mark { background: var(--a-good-bg); color: var(--a-good); }
.lk-session-state .list-state { min-height: 56px; }
.lk-session.is-arrived { animation: lacak-fade-in 180ms linear both; }

/* ---------- Organisasi ---------- */
.lka-org { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; min-height: 0; }
.lka-org-copy { display: grid; min-width: 0; gap: 14px; padding-top: 4px; }
.lka-org-name { margin: 0; color: #fff; font-size: 26px; font-weight: 730; letter-spacing: -.025em; line-height: 1.2; overflow-wrap: anywhere; }
.lka-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lka-chips li { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; border: 1px solid rgb(255 255 255 / .1); border-radius: 999px; background: rgb(255 255 255 / .06); padding: 0 12px 0 10px; color: #e6ebf3; font-size: 13px; font-weight: 600; }
.lka-chips .icon { width: 15px; height: 15px; flex: none; color: var(--a-gold-light); }
.lka-hero-edit { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; border: 1px solid rgb(255 255 255 / .18); border-radius: 10px; background: transparent; padding: 0 13px; color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease; }
.lka-hero-edit:hover { border-color: rgb(255 255 255 / .32); background: rgb(255 255 255 / .07); }
.lka-hero-edit .icon { width: 14px; height: 14px; color: var(--a-gold-light); }
.lka-require .lka-tile-head { align-items: flex-start; }
.lka-require .lka-tile-head h2 { padding-top: 6px; }
.lka-require .lk-switch { flex: none; }
.lacak-members .lm-row { grid-template-columns: minmax(0, 1fr) minmax(120px, auto) 36px; }
.lm-who { display: flex; min-width: 0; align-items: center; gap: 14px; }
.lm-mark { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 760; letter-spacing: .02em; }
.lm-mark.tint-blue { background: #edf3fb; color: #2f62a4; }
.lm-mark.tint-green { background: #edf8f3; color: #147a52; }
.lm-mark.tint-purple { background: #f3effa; color: #6d4aa0; }
.lm-mark.tint-amber { background: #fff4df; color: #95600b; }
.lm-invite-mark { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border: 1px dashed #c9d2df; border-radius: 50%; color: var(--a-muted); }
.lm-invite-mark .icon { width: 17px; height: 17px; }
.lm-role { display: flex; justify-content: flex-end; }
.lacak-members .lm-role-pill { display: inline-flex; align-items: center; border: 1px solid var(--a-line); border-radius: 999px; background: #fff; padding: 3px 11px; color: var(--a-ink); font-size: 12px; font-weight: 680; white-space: nowrap; }
.lacak-members .lm-role-pill.is-primary { border-color: #e7cf94; background: #fdf6e3; color: #7d5717; }
.lacak-members .lm-role-pill.is-owner { border-color: #cdd8e8; background: #eef3fa; color: var(--a-navy-2); }
.lm-actions { display: flex; justify-content: flex-end; }
.lm-state { min-height: 56px; }
/* A role that can change: its pill, as the Dashboard's level control is drawn, with the list's chevron. */
.lka-select { position: relative; display: inline-grid; align-items: center; }
.lka-select select { min-height: 34px; appearance: none; border: 1px solid var(--a-line); border-radius: 999px; background: #fff; padding: 0 30px 0 12px; color: var(--a-ink); font: inherit; font-size: 12.5px; font-weight: 680; cursor: pointer; transition: border-color var(--m-hover) ease, background-color var(--m-hover) ease; }
.lka-select select:hover { border-color: #c9d3e2; background: var(--a-soft); }
.lka-select .icon { position: absolute; right: 10px; width: 14px; height: 14px; color: var(--a-muted); pointer-events: none; }
.lka-more { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--a-muted); cursor: pointer; transition: background-color var(--m-hover) ease, color var(--m-hover) ease; }
.lka-more:hover, .lka-more[aria-expanded="true"] { background: #eceff4; color: var(--a-ink); }
.lka-more .icon { width: 18px; height: 18px; }
.lka-more [data-icon="more"] circle, .lka-menu [data-icon="more"] circle { fill: currentColor; }
/* A row's menu: the channel menu's frame (lacak.css .inbox-menu), a row each, its mark and its words. */
.lka-menu.inbox-menu:not(.is-sheet) .inbox-menu-head { display: none; }
.lka-menu .lka-menu-option { display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 6px 12px; }
.lka-menu .lka-menu-glyph { display: grid; width: 20px; place-items: center; color: var(--a-muted); }
.lka-menu .lka-menu-glyph .icon { width: 16px; height: 16px; }
.lka-menu .lka-menu-option.is-danger, .lka-menu .lka-menu-option.is-danger .lka-menu-glyph { color: var(--a-bad); }
.lka-menu .lka-menu-option.is-danger:hover { background: var(--a-bad-bg); }
.lka-menu.is-above { transform-origin: bottom right; }
/* The company's details and the invoice details in Lacak's dialog: the fields, the pair side by side. */
.lka-dialog-form { display: grid; gap: 10px; margin: 0; }
.lka-dialog-form .lkd-field { display: grid; gap: 6px; color: var(--lkd-muted, #687386); font-size: 11.5px; font-weight: 700; }
.lka-dialog-form .lkd-field > span { color: var(--lkd-muted, #687386); }
.lka-dialog-form :is(input, select, textarea) { width: 100%; min-height: 44px; border: 1px solid #d5d3cf; border-radius: 10px; background: #fff; padding: 0 12px; color: var(--lkd-ink, #172033); font: inherit; font-size: 14px; font-weight: 500; }
.lka-dialog-form textarea { min-height: 80px; resize: vertical; padding: 10px 12px; line-height: 1.5; }
.lka-dialog-form :is(input, select, textarea):focus { border-color: #8fa9cc; outline: none; box-shadow: 0 0 0 3px rgb(47 98 164 / 14%); }
.lka-dialog-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger, #a53d3d); box-shadow: 0 0 0 3px rgb(165 61 61 / .12); }
.lka-dialog-form .lacak-field-error { margin-top: -4px; }
.lka-dialog-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lka-dialog-form .lkd-note { margin: 4px 0 0; color: var(--lkd-muted, #687386); font-size: 12.5px; line-height: 1.5; }

/* ---------- Penagihan ---------- */
/* What is owed: the ledger in navy, a row each. */
.lb-hero { min-height: 0; }
.lb-due-list { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
.lb-due-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who amount" "state pay" "track track"; align-items: center; gap: 6px 16px; padding: 14px 0; }
.lb-due-row + .lb-due-row { border-top: 1px solid var(--a-on-navy-line); }
.lb-due-row:last-child { padding-bottom: 0; }
.lb-due-who { display: flex; grid-area: who; min-width: 0; align-items: center; gap: 12px; }
.lb-due-who .biz-tile { width: 36px; height: 36px; flex: none; border-radius: 10px; }
.lb-due-who > span:last-child { display: grid; min-width: 0; gap: 1px; }
.lb-due-who strong { overflow: hidden; color: #fff; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.lb-due-who small { color: var(--a-on-navy); font-size: 12px; font-weight: 600; }
.lb-due-amount { grid-area: amount; text-align: right; }
.lb-due-amount b { color: #fff; font-size: 24px; font-weight: 740; letter-spacing: -.02em; white-space: nowrap; }
.lb-due-state { grid-area: state; padding-left: 48px; color: #f0c9a0; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.lb-due-state.is-bad { color: #f6aaa2; }
.lb-due-state.is-trial { color: #b9cdf0; }
.lb-due-state:not(.is-warn):not(.is-bad):not(.is-trial) { color: var(--a-on-navy); }
.lb-due-pay { display: flex; grid-area: pay; flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px; }
.lb-due-confirming { color: var(--a-on-navy); font-size: 12.5px; font-weight: 650; }
/* A renewal's days left: from the day it fell due to the last day of service, today on it in gold, the end in red. */
.lb-due-track { grid-area: track; margin: 8px 0 0 48px; --done: 0%; }
.lb-due-bar { position: relative; height: 8px; border-radius: 4px; background: rgb(255 255 255 / .1); }
.lb-due-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--done); border-radius: 4px; background: var(--a-warn-dot); transform-origin: left center; }
.lb-due-today { position: absolute; top: 50%; left: var(--done); width: 14px; height: 14px; border-radius: 50%; background: var(--a-gold-light); box-shadow: 0 0 0 3px var(--a-navy); transform: translate(-50%, -50%); }
.lb-due-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; }
.lb-due-ends span { display: flex; align-items: baseline; gap: 6px; }
.lb-due-ends small { color: var(--a-on-navy); font-size: 11.5px; font-weight: 600; }
.lb-due-ends b { color: #dfe6f2; font-size: 12px; font-weight: 700; }
.lb-due-ends .is-end b { color: #f6aaa2; }
@keyframes lb-due-fresh { 0%, 35% { box-shadow: inset 4px 0 0 var(--a-gold-light); } 100% { box-shadow: inset 4px 0 0 transparent; } }
.lb-due-track.is-arriving .lb-due-fill { animation: lb-fill 560ms var(--m-in) both; }
.lb-due-track.is-arriving .lb-due-today { animation: lb-today 260ms var(--m-in) 420ms both; }
/* Nothing owed: said in the gold of a good figure, then when the next invoice comes. */
.lb-hero.is-clear { align-content: center; gap: 10px; }
.lb-clear { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--a-gold-light); font-size: 30px; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; }
.lb-clear .icon { width: 30px; height: 30px; flex: none; padding: 5px; border-radius: 50%; background: rgb(228 191 120 / .14); stroke-width: 2.4px; }
.lb-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; color: var(--a-on-navy); font-size: 14px; font-weight: 600; }
.lb-next-biz { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.lb-next-biz .biz-tile { width: 26px; height: 26px; border-radius: 8px; font-size: 9.5px; }
/* The method's tile: the default as its figure, then the automatic charging switch across a hairline. */
.lb-method-figure { display: flex; min-width: 0; align-items: center; gap: 12px; }
.lb-method-figure .lb-mark { width: 38px; height: 38px; flex: none; }
.lb-method-figure > span:nth-child(2) { display: grid; min-width: 0; gap: 1px; }
.lb-method-figure strong { color: var(--a-ink); font-size: 16px; font-weight: 720; letter-spacing: -.01em; }
.lb-method-figure small { color: var(--a-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.lb-method-figure .lka-pill { margin-left: auto; align-self: start; }
.lb-auto { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--a-hair); }
.lb-auto-copy { display: grid; min-width: 0; gap: 1px; }
.lb-auto-copy b { color: var(--a-ink); font-size: 13px; font-weight: 680; }
.lb-auto-copy small { display: -webkit-box; overflow: hidden; color: var(--a-faint); font-size: 12px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lb-auto .lk-switch { flex: none; }
.lb-method-empty { display: grid; gap: 2px; margin: 0; }
.lb-method-empty b { color: var(--a-ink); font-size: 15px; font-weight: 700; }
.lb-method-empty small { color: var(--a-faint); font-size: 12px; line-height: 1.45; }
.lb-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; }
.lb-mark .icon { width: 19px; height: 19px; stroke-width: 1.8; }
.lb-mark.is-gopay { background: #e3f5fa; color: #0089ad; }
.lb-mark.is-card { background: #eef0f6; color: var(--a-navy); }
.lb-details-tile .lb-legal { display: block; }
/* A finished change washes once where it shows. Pengaturan's wash (pengaturan.css koneksi-fresh) runs a row's ground
   to white, so the navy cards, the ledger's rows on them and the tiles ring in gold instead, their ground kept. */
.lacak-settings.lka-page .lka-tile.is-fresh { animation: lka-tile-fresh 1.2s ease-out both; }
.lacak-settings.lka-page .lka-hero.is-fresh { animation: lka-hero-fresh 1.2s ease-out both; }
.lacak-settings.lka-page .lacak-settings.lka-page .lka-edit.is-fresh { animation: none; }
@keyframes lka-hero-fresh { 0%, 35% { box-shadow: 0 0 0 3px #f5dc95; } 100% { box-shadow: 0 0 0 3px rgb(245 220 149 / 0); } }
@keyframes lka-tile-fresh { 0%, 35% { box-shadow: 0 0 0 3px #f5dc95; } 100% { box-shadow: 0 0 0 3px rgb(245 220 149 / 0); } }
/* A fold clips what it holds while it opens without becoming a box that scrolls, so bringing a row into view moves
   the page, not the fold's inside. */
.lacak-billing .lk-fold > div { overflow: clip; }
/* The methods, unfolded under the cards. */
.lb-methods .lb-method { grid-template-columns: 36px minmax(0, 1fr) auto; }
.lb-method-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lb-method-state .list-state { min-height: 52px; }
.lb-method.is-arrived { animation: lacak-fade-in 180ms linear both; }
.lb-methods .lb-adds { display: flex; flex-wrap: wrap; border-top: 1px dashed #d9dfe8; }
.lb-methods .lb-adds .lk-add { flex: 1 1 220px; min-height: 52px; padding: 8px 18px; }
.lb-methods .lb-adds .lk-add + .lk-add { border-left: 1px solid var(--a-hair); }

/* Langganan: a line each, its period as a slim track. */
.lb-line { position: relative; background: #fff; }
.lb-line.is-arrived { animation: lacak-fade-in 180ms linear both; }
.lb-line.is-fresh > .lb-line-row { animation: koneksi-fresh 1.2s ease-out both; }
.lb-line-row { display: grid; width: 100%; grid-template-columns: minmax(0, 1.25fr) minmax(110px, 1fr) minmax(128px, auto) 20px; align-items: center; gap: 22px; min-height: 66px; border: 0; background: #fff; padding: 12px 18px; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--m-hover) ease; }
.lb-line-row:hover { background: var(--a-row-hover); }
.lb-line.is-open > .lb-line-row { background: var(--a-soft); }
.lb-line-who { display: flex; min-width: 0; align-items: center; gap: 12px; }
.lb-line-who .biz-tile { width: 36px; height: 36px; flex: none; border-radius: 10px; }
.lb-line-copy { display: grid; min-width: 0; gap: 2px; }
.lb-line-copy strong { overflow: hidden; color: var(--a-ink); font-size: 13.5px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.lb-line-copy small { color: var(--a-muted); font-size: 12px; font-weight: 600; line-height: 1.4; }
.lb-line-copy small.is-trial { color: #2f62a4; }
.lb-line-copy small.is-warn { color: var(--a-warn); }
.lb-line-copy small.is-bad { color: var(--a-bad); }
.lb-line-track { min-width: 0; }
.lb-line-amount { text-align: right; }
.lb-line-amount .lb-price { display: grid; justify-items: end; margin: 0; color: var(--a-muted); font-size: 12px; font-weight: 600; line-height: 1.35; }
.lb-line-amount .lb-price b { margin: 0; color: var(--a-ink); font-size: 15.5px; font-weight: 760; letter-spacing: -.01em; }
.lb-line-chevron { display: grid; place-items: center; color: var(--a-muted); }
.lb-line-chevron .icon { width: 16px; height: 16px; transition: transform var(--m-move) var(--m-in); }
.lb-line.is-open .lb-line-chevron .icon { transform: rotate(180deg); }
.lb-track { --fill: var(--a-navy); --ground: #e4e8ef; position: relative; display: block; height: 8px; border-radius: 4px; background: var(--ground); }
.lb-track.is-due { --fill: var(--a-warn-dot); --ground: var(--a-warn-bg); }
.lb-track.is-trial { --fill: #2f62a4; --ground: #e6eef9; }
.lb-track.is-cancelling { --fill: #9aa7b5; }
.lb-track-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--done); border-radius: 4px; background: var(--fill); transform-origin: left center; }
.lb-track-today { position: absolute; top: 50%; left: var(--done); width: 12px; height: 12px; border-radius: 50%; background: var(--a-gold-light); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgb(23 32 51 / .3); transform: translate(-50%, -50%); }
.lb-track.is-arriving .lb-track-fill { animation: lb-fill 560ms var(--m-in) both; }
.lb-track.is-arriving .lb-track-today { animation: lb-today 260ms var(--m-in) 420ms both; }
.lb-lines-state { min-height: 56px; }
/* The fold under a line: its quota, its period and its price side by side on the soft ground, set in under its name. */
.lb-panel { padding: 4px 18px 18px 66px; background: var(--a-soft); }
.lb-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1.3fr); align-items: start; gap: 18px 28px; }
.lb-panel-cell { display: grid; min-width: 0; justify-items: start; gap: 8px; }
.lb-panel-label { color: var(--a-muted); font-size: 12px; font-weight: 650; }
.lb-panel .lb-quota-preview { margin: 14px 0 0; }
.lb-panel .lb-quota-preview { background: #fff; }
.lb-panel-foot { display: flex; margin-top: 14px; padding-top: 10px; border-top: 1px solid #e6eaf0; }
.lb-panel-foot .lk-danger-link { margin-left: -8px; }
.lb-panel .lb-pending { margin: 0; }
.lb-panel .lk-meter-places { max-width: 200px; }
.lb-panel .lb-stepper { background: #fff; }
/* The price, drawn: its parts as one bar, then each with its amount. */
.lb-line-cost { gap: 10px; padding-top: 2px; }
.lb-price-bar { display: flex; width: 100%; height: 10px; overflow: hidden; border-radius: 5px; background: #e4e8ef; }
.lb-price-bar i { display: block; height: 100%; min-width: 0; }
.lb-price-bar .is-core { background: var(--a-navy); }
.lb-price-bar .is-extra { background: var(--a-navy-3); box-shadow: inset 2px 0 0 #fff; }
.lb-price-bar .is-extra.is-changed { background: repeating-linear-gradient(-45deg, var(--a-gold) 0 3px, #e7c983 3px 6px); }
.lb-price-legend { display: grid; width: 100%; gap: 5px; margin: 0; padding: 0; list-style: none; }
.lb-price-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; color: var(--a-ink); font-size: 12.5px; }
.lb-price-legend li i { width: 10px; height: 10px; border-radius: 3px; background: var(--a-navy); transform: translateY(1px); }
.lb-price-legend li.is-extra i { background: var(--a-navy-3); }
.lb-price-legend li.is-extra.is-changed i { background: var(--a-gold); }
.lb-price-legend li b { font-weight: 720; text-align: right; }
.lb-price-legend li.is-ppn { grid-template-columns: 10px auto minmax(0, 1fr); color: var(--a-muted); }
.lb-price-legend li.is-ppn span { grid-column: 2; }
.lb-price-legend li.is-ppn small { color: var(--a-faint); font-size: 12px; text-align: right; }
/* The invoices: the Dashboard's table inside the section's card. */
.lka-card.lb-table { margin: 0; border-radius: 16px; }
.lb-invoices .lb-inv-row { padding-inline: 18px 14px; }
.lb-invoices .lb-inv-body > .lb-inv-row { transition: background-color var(--m-hover) ease; }
.lb-invoices .lb-inv-body > .lb-inv-row:hover { background: var(--a-row-hover); }
.lb-state .lacak-empty { min-height: 0; padding: 30px 20px; }
/* Loading: the page's shape, still, as the Dashboard's skeleton. */
.lb-skeleton .is-ghost { border: 0; background: #eceff4; }
.lb-skeleton .lka-hero.is-ghost { min-height: 196px; }
.lb-skeleton .lka-tile.is-ghost { min-height: 92px; }
.lka-card.is-ghost-list { padding: 8px 0; }
.lka-card.is-ghost-list i { display: block; height: 14px; margin: 20px 22px; border-radius: 6px; background: #eef1f5; }
.lka-card.is-ghost-list i:nth-child(odd) { width: 58%; }

/* ---------- The account page's sidebar and its list on a phone ---------- */
.tenant-shell.in-account .lka-rail-back { height: auto; min-height: 50px; }
.tenant-shell.in-account .lka-rail-back .nav-link { width: 100%; }
.lka-list { display: grid; overflow: hidden; border: 1px solid var(--a-line); border-radius: 16px; background: #fff; }
.lka-list-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; align-items: center; gap: 14px; min-height: 60px; border: 0; background: #fff; padding: 10px 16px; color: var(--a-ink); font: inherit; font-size: 15px; font-weight: 680; text-align: left; cursor: pointer; transition: background-color var(--m-hover) ease; }
.lka-list-row + .lka-list-row { border-top: 1px solid var(--a-hair); }
.lka-list-row:hover { background: var(--a-row-hover); }
.lka-list-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: var(--a-soft); color: var(--a-navy); }
.lka-list-mark .icon { width: 18px; height: 18px; }
.lka-list-row > .icon { width: 14px; height: 14px; color: var(--a-faint); }

/* ---------- The Pengaturan popup: its pages in a sidebar inside it ---------- */
#settings-popup.lkp { display: grid; grid-template-columns: 232px minmax(0, 1fr); width: min(1100px, calc(100vw - 48px)); height: min(820px, calc(100dvh - 64px)); max-height: calc(100dvh - 64px); top: 32px; padding: 0; }
.lkp-close { position: absolute; z-index: 4; top: 14px; right: 14px; }
.lkp-side { display: flex; min-width: 0; flex-direction: column; gap: 4px; border-right: 1px solid #e5e4e1; background: radial-gradient(circle at 24px 14px, rgb(191 129 24 / .055), transparent 72px), #fffefa; padding: 20px 14px; }
.lkp-name { margin: 0 6px; color: var(--a-navy); font-size: 18px; font-weight: 720; letter-spacing: -.02em; }
.lkp-business { display: flex; min-width: 0; align-items: center; gap: 10px; margin: 10px 0 18px; border: 1px solid #e5e4e1; border-radius: 12px; background: #fff; padding: 9px 10px; color: var(--a-ink); font-size: 13px; font-weight: 680; }
.lkp-business .biz-tile { width: 30px; height: 30px; flex: none; border-radius: 8px; font-size: 10.5px; }
.lkp-business > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#settings-popup .lk-popup-nav { display: grid; gap: 4px; margin: 0; }
#settings-popup .lk-popup-nav .lk-nav-link { position: relative; width: 100%; min-height: 46px; gap: 12px; border-radius: 12px; padding: 0 14px; color: #657083; font-size: 13px; font-weight: 720; }
#settings-popup .lk-popup-nav .lk-nav-link:hover { background: rgb(23 41 68 / .05); color: var(--a-ink); }
#settings-popup .lk-popup-nav .lk-nav-link.is-current { background: linear-gradient(135deg, #172944, #213858); color: #fff; font-weight: 800; box-shadow: 0 10px 24px rgb(23 41 68 / .17); }
#settings-popup .lk-popup-nav .lk-nav-link.is-current .lk-nav-glyph { color: #fff; }
#settings-popup .lk-popup-nav .lk-nav-link.is-current::before { top: 13px; bottom: 13px; background: var(--a-gold-light); }
#settings-popup .lk-nav-glyph .icon { width: 18px; height: 18px; }
.lkp-main { display: flex; min-width: 0; min-height: 0; flex-direction: column; }
#settings-popup .lkp-main > .lkd-scroll { display: block; flex: 1 1 auto; padding: 22px 28px 28px; }
.lkp-page-head { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0 48px 16px 0; }
.lkp-title { margin: 0; color: var(--a-navy); font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.lkp-title:focus { outline: none; }
#settings-popup :is(.lkp-close, .lk-nav-link, .lka-back):focus-visible { outline: 3px solid var(--a-ring); outline-offset: 2px; }

/* ---------- Narrower ---------- */
@container (max-width: 820px) {
  .lka-top, .lk-security .lka-top:has(.lka-codes) { grid-template-columns: minmax(0, 1fr); }
  .lka-tiles { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-auto-rows: auto; }
  .lb-line-row { grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "who amount chevron" "track track track"; gap: 10px 14px; }
  .lb-line-who { grid-area: who; }
  .lb-line-track { grid-area: track; padding-left: 48px; }
  .lb-line-amount { grid-area: amount; }
  .lb-line-chevron { grid-area: chevron; }
  .lb-panel { padding-left: 18px; }
  .lb-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-line-cost { grid-column: 1 / -1; }
}
@container (max-width: 560px) {
  .lka-hero { padding: 20px; min-height: 0; }
  .lka-ring { right: -150px; }
  .lka-me { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; }
  .lka-avatar { width: 50px; height: 50px; margin: 3px; font-size: 16px; }
  .lka-name strong, .lka-org-name { font-size: 21px; }
  .lka-me-copy { padding-top: 4px; }
  .lka-org { grid-template-columns: minmax(0, 1fr); }
  .lka-hero-edit { position: absolute; top: 16px; right: 16px; }
  .lka-org-copy { padding-right: 76px; }
  .lka-tiles, .lk-security .lka-tiles:has(.lka-codes) { grid-template-columns: minmax(0, 1fr); }
  .lka-row { padding-inline: 14px; gap: 12px; }
  .lacak-members .lm-row { grid-template-columns: minmax(0, 1fr) 36px; grid-template-areas: "who actions" "role role"; row-gap: 8px; }
  .lacak-members .lm-who { grid-area: who; }
  .lacak-members .lm-role { grid-area: role; justify-content: flex-start; padding-left: 50px; }
  .lacak-members .lm-actions { grid-area: actions; }
  .lka-select select { min-height: 40px; }
  .lka-more { width: 40px; height: 40px; }
  .lb-due-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "amount" "state" "track" "pay"; gap: 6px; }
  .lb-due-amount { text-align: left; padding-left: 48px; }
  .lb-due-pay { justify-content: stretch; margin-top: 8px; }
  .lb-due-pay > * { flex: 1 1 100%; min-height: 44px; }
  .lb-due-track { margin-top: 4px; }
  .lb-clear { font-size: 24px; }
  .lb-panel-grid { grid-template-columns: minmax(0, 1fr); }
  .lb-line-row { padding-inline: 14px; }
  .lb-panel { padding: 4px 14px 16px; }
  .lb-methods .lb-method { grid-template-columns: 36px minmax(0, 1fr); }
  .lb-method-actions { grid-column: 2; justify-content: flex-start; }
  .lb-methods .lb-adds .lk-add + .lk-add { border-left: 0; border-top: 1px solid var(--a-hair); }
  .lka-dialog-pair { grid-template-columns: minmax(0, 1fr); }
  .lka-row-action, .lka-quiet-button, .lka-tile-foot > button { min-height: 44px; }
  .lka-me .lk-lang button { min-height: 40px; }
}
@media (max-width: 640px) {
  .lacak-settings.lka-page { padding: 14px 16px 32px; }
  .lka-head { min-height: 52px; gap: 12px; margin-bottom: 8px; }
  .lka-title { font-size: 22px; }
  .lka-head-actions .lb-reload span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lka-head-actions .lb-reload { width: 40px; justify-content: center; padding: 0; }
  .lka-section-head .primary-button, .lka-section-head .secondary-button { min-height: 40px; padding: 0 12px; }
  #settings-popup.lkp { inset: 0; display: block; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .lkp-side, .lkp-main { height: 100%; }
  #settings-popup.lkp:not(.is-list) .lkp-side { display: none; }
  #settings-popup.lkp.is-list .lkp-main { display: none; }
  .lkp-side { border-right: 0; padding: 22px 16px; }
  .lkp-name { font-size: 22px; }
  #settings-popup .lk-popup-nav .lk-nav-link { min-height: 52px; font-size: 14px; }
  #settings-popup .lkp-main > .lkd-scroll { padding: 14px 12px 24px; }
  .lkp-close { top: 12px; right: 12px; }
  .lkp-page-head { margin: 0 48px 12px 2px; }
  .lkp-title { font-size: 20px; }
}

/* ---------- Motion ---------- */
@keyframes lka-swap { from { opacity: 0; transform: translateY(4px); } }
.lka-hero.is-fresh .lka-name strong, .lka-hero.is-fresh .lka-org-name, .lka-hero.is-fresh .lka-chips { animation: lka-fresh-text 1.2s ease-out both; }
@keyframes lka-fresh-text { 0%, 35% { color: var(--a-gold-light); } }
.lka-email.is-fresh span { animation: lka-fresh-text 1.2s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .lacak-settings.lka-page .lka-hero.is-fresh { background-color: var(--a-navy); box-shadow: 0 0 0 3px #f5dc95; }
  .lacak-settings.lka-page .lb-due-row.is-fresh, .lacak-settings.lka-page .lka-edit.is-fresh { background-color: transparent; }
  .lka-page *, .lka-page *::before, .lka-page *::after, #settings-popup *, #settings-popup *::before, #settings-popup *::after, .lka-menu, .lka-menu * { animation: none !important; transition: none !important; }
}