/* The shell, sign-in, the access states and the setup wizard: motion, hover and decoration. Loaded last.
   One motion family across the mockup (lacak.css :root --m-*): in on the CRM's decelerating curve, out on
   its accelerating one, 120ms for hover, 160ms for a surface, 220ms for a move, 140ms for an exit; where the
   CRM has its own motion (the rail, the settings pages, the dialogs) it is the CRM's. Nothing moves on its
   own; everything here answers a press, and all of it is off under reduced motion. */

/* ---------- Ciutkan ----------
   The CRM's rail (sidebar.css), but the Business card keeps its building mark when collapsed (lacak.css).
   Its columns stay the same three tracks in both states (the chevron's closing to nothing), so the browser can carry them between the states
   and the mark slides with the card's padding instead of snapping to the middle half-way. At rest it sits
   centred in the 54px card, where the CRM's own collapsed padding (8px 7px) would leave it 1px off. */
.tenant-shell.rail-collapsed .rail-workspace { grid-template-columns: 40px minmax(0, 1fr) 0px; padding: 8px 6px; }
/* The gold marker arrives with a new destination only; the rail drawn again in place keeps it still. */
.tenant-shell .nav-link.active.is-settled::before { animation: none; }

/* ---------- The account menu ----------
   Lite's (lite-merged.html .account-menu and its rows, .account-menu-lang, .lang-segment), its tokens set
   on the menu, copied rule for rule. The CRM's own .account-menu rules (final.css, layout-system.css) are
   set back where they would reach it. app.js places it from the account card: beside it in the rail,
   above it in the phone's drawer. It rises out of the card and goes back into it, 160ms in and 140ms out,
   as the sales list in Pelanggan opens and closes. */
.tenant-shell .lacak-account-menu { --ink: #172033; --muted: #687386; --line: #e5e3df; --soft: #f7f7f5; --navy: #18243a; --blue: #2f62a4; --blue-soft: #edf3fb; position: fixed; z-index: 50; inset: auto; width: min(272px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 14px 36px rgba(23, 32, 51, .14), 0 2px 8px rgba(23, 32, 51, .06); transform-origin: bottom left; --menu-from: 4px; }
.tenant-shell .lacak-account-menu.is-above { max-height: calc(100dvh - 140px); transform-origin: bottom center; }
.lacak-account-menu .account-menu-divider { height: 1px; margin: 0 4px 6px; background: var(--line); }
.lacak-account-menu .account-menu-identity { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 4px; padding: 10px 10px 12px; }
.lacak-account-menu .account-menu-avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-size: 9px; font-weight: 820; }
.lacak-account-menu .account-menu-names { min-width: 0; }
.lacak-account-menu .account-menu-names strong, .lacak-account-menu .account-menu-names span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lacak-account-menu .account-menu-names strong { font-size: 13px; line-height: 1.3; }
.lacak-account-menu .account-menu-names span { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.tenant-shell .lacak-account-menu button[role="menuitem"] { position: relative; display: grid; width: 100%; min-height: 42px; grid-template-columns: 30px minmax(0, 1fr) 14px; align-items: center; gap: 9px; margin: 0; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 11px; font-weight: 700; text-align: left; cursor: pointer; }
.tenant-shell .lacak-account-menu button[role="menuitem"]:hover { background: var(--soft); }
.tenant-shell .lacak-account-menu button[role="menuitem"] + button[role="menuitem"] { margin-top: 2px; }
.lacak-account-menu .account-menu-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: var(--blue-soft); color: var(--blue); }
.lacak-account-menu .account-menu-icon .icon { width: 16px; height: 16px; }
.lacak-account-menu .account-menu-label { display: inline-flex; min-width: 0; align-items: center; gap: 7px; }
.lacak-account-menu .account-menu-arrow { display: grid; place-items: center; color: #a1a9b6; }
.lacak-account-menu .account-menu-arrow .icon { width: 13px; height: 13px; }
.tenant-shell .lacak-account-menu button[data-action="sign-out"] { color: #a53d3d; }
.lacak-account-menu button[data-action="sign-out"] .account-menu-icon { background: #fff1f1; color: #b74343; }
.tenant-shell .lacak-account-menu button[data-action="sign-out"]:hover { background: #fff7f7; }
.lacak-account-menu .account-menu-lang { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-top: 3px; border-top: 1px solid var(--line); padding: 8px 8px 7px; }
.lacak-account-menu .account-menu-lang-copy { min-width: 0; }
.lacak-account-menu .account-menu-lang-copy strong { display: block; font-size: 11px; font-weight: 700; line-height: 1.25; }
.tenant-shell .lacak-account-menu .account-menu-lang + button[role="menuitem"] { margin-top: 3px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; padding-top: 7px; }
.lacak-account-menu .lang-segment { display: inline-flex; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); padding: 2px; }
.tenant-shell .lacak-account-menu .lang-segment button { display: inline-flex; min-width: 34px; min-height: 26px; align-items: center; justify-content: center; margin: 0; border: 0; border-radius: 6px; background: transparent; padding: 0 8px; color: var(--muted); font: inherit; font-size: 10px; font-weight: 820; letter-spacing: .02em; cursor: pointer; }
.tenant-shell .lacak-account-menu .lang-segment button:hover { color: var(--ink); }
.tenant-shell .lacak-account-menu .lang-segment button[aria-checked="true"] { background: var(--navy); color: #fff; }
.lacak-account-menu button:focus-visible { outline: 2px solid rgba(47, 98, 164, .55); outline-offset: -2px; }
.lacak-account-menu .lang-segment button:focus-visible { outline-offset: 1px; }
.lacak-account-menu button[role="menuitem"], .lacak-account-menu .lang-segment button { transition: background-color var(--m-hover) ease, color var(--m-hover) ease; }
.lacak-account-menu.entering { animation: lacak-account-in var(--m-pop) var(--m-in) both; }
.lacak-account-menu.is-leaving { animation: lacak-account-out var(--m-exit) var(--m-out) forwards; pointer-events: none; }
@keyframes lacak-account-in { from { opacity: 0; transform: translateY(var(--menu-from, 4px)) scale(.97); } }
@keyframes lacak-account-out { to { opacity: 0; transform: translateY(var(--menu-from, 4px)) scale(.985); } }
/* The card says its menu is open while it is. */
.tenant-shell .rail-account[aria-expanded="true"], .tenant-shell .rail-account[aria-expanded="true"]:hover { border-color: #d9cfbe; background: #fff; transform: none; }

/* ---------- The phone's frame ----------
   Lite's (lite-merged.html under 1024px), at the CRM's phone width (640px): .mobile-header on top, the
   rail as Lite's .sidebar drawer with .sidebar-close and .sidebar-scrim, no bottom bar. The drawer slides
   in on the mockup's move (220ms, decelerating) and out on its exit (140ms, accelerating), the scrim
   fading with it; the page under it holds still. */
.mobile-header, .sidebar-scrim, .sidebar-close { display: none; }
@media (max-width: 640px) {
  .tenant-shell { --tenant-mobile-nav-height: 0px; }
  .tenant-shell .mobile-header { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; gap: 14px; height: 64px; padding: 10px 16px; border-bottom: 1px solid #e5e3df; background: #fffdfa; }
  .mobile-header-brand { width: 98px; height: auto; }
  .tenant-shell .mobile-header-menu, .tenant-shell .sidebar-close { position: relative; display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; padding: 0; border: 1px solid #e5e3df; border-radius: 9px; background: #fff; color: #172033; cursor: pointer; transition: background-color var(--m-hover) ease; }
  .tenant-shell .mobile-header-menu:hover, .tenant-shell .sidebar-close:hover { background: #f7f7f5; }
  .tenant-shell .mobile-header-menu:focus-visible, .tenant-shell .sidebar-close:focus-visible { outline: 2px solid rgba(47, 98, 164, .55); outline-offset: 2px; }
  .tenant-shell .mobile-header-menu .icon, .tenant-shell .sidebar-close .icon { width: 20px; height: 20px; }
  /* The account's dot, as the rail avatar draws it (sidebar.css .rail-avatar i). */
  .mobile-header-menu i { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--rail-gold); }

  /* The rail, slid in from the left edge over the page. */
  .tenant-shell .desktop-rail, .tenant-shell.rail-collapsed .desktop-rail { display: flex; z-index: 45; width: min(300px, calc(100vw - 48px)); height: 100dvh; padding: 22px 14px 16px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); visibility: hidden; transition: transform var(--m-exit) var(--m-out), visibility 0s linear var(--m-exit); }
  .tenant-shell.drawer-open .desktop-rail { transform: none; visibility: visible; box-shadow: 18px 0 48px rgba(23, 32, 51, .16); transition: transform var(--m-move) var(--m-in), visibility 0s; }
  .tenant-shell .sidebar-scrim { position: fixed; z-index: 44; inset: 0; display: block; padding: 0; border: 0; background: rgba(23, 32, 51, .35); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--m-exit) var(--m-out), visibility 0s linear var(--m-exit); }
  .tenant-shell.drawer-open .sidebar-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--m-move) var(--m-in), visibility 0s; }
  body:has(.tenant-shell.drawer-open) { overflow: hidden; }
  /* Lite's .sidebar spacing: its blocks 24px apart, none with margins of its own. */
  .tenant-shell .desktop-rail { gap: 24px; }
  /* Lite's brand row (.brand, min-height 42px, 10px in from the drawer's side), and its ✕ set on the drawer
     at the top right (.sidebar-close top: 18px; right: 14px), not in the row. */
  .tenant-shell .rail-brand-row { position: static; height: auto; min-height: 42px; }
  .tenant-shell .rail-brand-row .brand-block { width: auto; height: 42px; margin: 0 3px; }
  .tenant-shell .sidebar-close { position: absolute; top: 18px; right: 14px; display: grid; }
  /* Lite hides Ciutkan in its drawer; the account card keeps its place at the foot. */
  .tenant-shell .rail-collapse-row { padding: 0; }
  .tenant-shell .rail-collapse { display: none; }
  /* Lite's .sidebar-footer: the card 12px under the rule, inside the drawer's 24px between blocks. */
  .tenant-shell .rail-account { margin-top: -12px; }

  /* Lite's .nav: rows 7px apart, 50px high, 17px in, the icon 21px with 14px to its label; Pengaturan sits
     under a rule as Lite's .sidebar-utilities does, 24px below the last row and 14px above its own. */
  .tenant-shell .primary-nav { gap: 7px; padding: 0; }
  .tenant-shell .nav-link { gap: 14px; padding: 0 17px; font-size: 13px; font-weight: 700; }
  .tenant-shell .nav-link-icon { width: 21px; height: 21px; flex: 0 0 21px; border-radius: 0; }
  .tenant-shell .nav-link-icon .icon { width: 21px; height: 21px; }
  .tenant-shell .nav-separator { margin: 17px 0 7px; }

  /* In the drawer the card is Lite's at Lite's sizes (lite-merged.html .business-context, .business-trigger,
     .business-context-icon): 68px, the mark in a bordered white tile, on white. */
  .tenant-shell .rail-workspace { min-height: 68px; grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 10px; margin: 0; padding: 11px; border-color: #e3e8ef; border-radius: 10px; background: #fff; box-shadow: none; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease; }
  .tenant-shell .rail-workspace-icon { width: 34px; height: 34px; border: 1px solid #e3e8ef; border-radius: 9px; background: #fff; color: #18243a; }
  .tenant-shell .rail-workspace-icon .icon { width: 18px; height: 18px; }
}

/* ---------- The Business card ----------
   The switcher's control is the whole card, in the rail and in the drawer: the name's button spreads its
   hit area over it, and Lite's chevron (lite-merged.html .business-chevron) in the card's third column
   says it opens, turning over as it does. It answers the pointer with Lite's wash, the keyboard with a
   blue edge. Collapsed, the card only names the Business; its chevron fades with the words. A Business
   just chosen rises into the card in place of the last. */
.tenant-shell .rail-workspace { cursor: pointer; transition: width 520ms var(--rail-ease), min-height 520ms var(--rail-ease), margin 520ms var(--rail-ease), padding 520ms var(--rail-ease), gap 520ms var(--rail-ease), grid-template-columns 520ms var(--rail-ease), border-color var(--m-hover) ease, background-color var(--m-hover) ease; }
.tenant-shell .rail-workspace .business-chevron { display: block; width: 16px; height: 16px; fill: none; stroke: #687386; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--m-pop) var(--m-in), opacity 160ms ease 120ms; }
.tenant-shell.rail-collapsed .rail-workspace .business-chevron { opacity: 0; transition-delay: 0ms; }
/* Open, the copy column holds no transform or clip that would keep the hit area in. */
.tenant-shell:not(.rail-collapsed) .rail-workspace-copy { overflow: visible; transform: none; }
/* The card's hit area lies over everything in it: the chevron turning, or the name and its line rising
   after a switch, carry a transform that would otherwise lift them over it and take the tap. */
.tenant-shell .rail-workspace .lacak-business-trigger::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; }
.tenant-shell:not(.rail-collapsed) .rail-workspace:hover, .tenant-shell .rail-workspace:has([aria-expanded="true"]) { background: #edf2f8; }
.tenant-shell .rail-workspace:has([aria-expanded="true"]) .business-chevron { transform: rotate(180deg); }
.tenant-shell .rail-workspace:has(:focus-visible) { border-color: #2f62a4; }
.tenant-shell .rail-workspace-copy #g5-business-select:focus-visible { outline: 0; }
/* The name and the line under it rise, not the button: a transform on the button, held by the fill, would
   make it the box its hit area fills, and the card would answer only on its name. */
.tenant-shell .rail-workspace.is-switched :is(.lacak-business-trigger > span, .rail-workspace-copy > small) { animation: biz-name-in var(--m-move) var(--m-in) both; }
@keyframes biz-name-in { from { opacity: 0; transform: translateY(5px); } }

/* ---------- The Business list ----------
   One list, two frames. In the rail, the CRM's stage picker surface (product-ui.css .stage-picker: white,
   14px corners, its lifted shadow) under the card, its left edge on the card's; it opens as the picker
   opens (stage-picker-in, 160ms) and leaves back toward the card (140ms). On a phone, the dialogs' bottom
   sheet (dialogs.css .lk-dialog under 640px): its head, its ✕, its slide up from the bottom edge (260ms)
   and back down (160ms), its scrim; the list under the head at the thumb's sizes.
   Inside, each Organization heads its group: its mark, a stack of layers in a small navy tile, and its name
   in ink at the row's weight, held at the top of the list while its own rows pass under it; a hairline
   parts one Organization from the next. A row is the Business's tile, its name, and under it either its
   WhatsApp number in tabular figures beside WhatsApp's mark, or, when it cannot be used as it is, where it
   stands in a quiet pill with the mark of the page it opens on. The current Business carries the rail's
   gold marker at its left edge (sidebar.css .nav-link.active::before), the current wash and a navy tick;
   on a switch those three glide to the row chosen over 180ms before the list leaves. */
.biz-pop { position: fixed; z-index: 130; top: 0; left: 0; display: flex; flex-direction: column; width: min(336px, calc(100vw - 16px)); overflow: hidden; border: 1px solid #d4deea; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(23, 32, 51, .06), 0 18px 46px rgba(23, 32, 51, .19); color: #172033; transform-origin: 24px 0; }
.biz-pop.entering { animation: biz-pop-in var(--m-pop) var(--m-in) both; }
.biz-pop.is-leaving { animation: lacak-picker-out var(--m-exit) var(--m-out) forwards; pointer-events: none; }
@keyframes biz-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes lacak-picker-out { to { opacity: 0; transform: translateY(-4px) scale(.985); } }
.biz-list { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 6px; outline: none; font-variant-numeric: tabular-nums; }
.biz-group + .biz-group { margin-top: 6px; border-top: 1px solid #efeeea; }
/* Held at the top, the head draws a hairline under itself so the rows passing beneath read as passing. */
.biz-org { position: sticky; z-index: 2; top: 0; margin: 0 -6px; background: #fff; color: #24334e; font-size: 12px; font-weight: 720; line-height: 1.3; container-type: scroll-state; }
.biz-org-in { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 10px 14px 6px; border-bottom: 1px solid transparent; transition: border-color var(--m-hover) ease; }
@container scroll-state(stuck: top) { .biz-org-in { border-bottom-color: #efeeea; } }
.biz-org-mark { display: grid; flex: 0 0 20px; width: 20px; height: 20px; place-items: center; border-radius: 6px; background: #18243a; color: #fff; }
.biz-org-mark svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.biz-org-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-row { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 11px; width: 100%; min-height: 52px; margin: 0; padding: 7px 10px 7px 9px; border: 0; border-radius: 10px; background: transparent; color: #172033; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--m-hover) ease; }
.biz-row + .biz-row { margin-top: 2px; }
@media (hover: hover) { .biz-row:hover { background: #f5f7fa; } }
.biz-row:focus-visible { outline: 2px solid rgba(47, 98, 164, .55); outline-offset: -2px; }
.biz-row.is-current, .biz-row.is-current:hover { background: #eef3fa; }
/* The current marker: the rail's gold bar at the row's left edge, centred on it. */
.biz-mark { position: absolute; top: 50%; left: 0; width: 3px; height: 24px; margin-top: -12px; border-radius: 0 3px 3px 0; background: var(--rail-gold, #c8963e); opacity: 0; }
.biz-row.is-current .biz-mark { opacity: 1; }
.biz-tick { display: grid; place-items: center; color: #18243a; opacity: 0; transform: scale(.6); transition: opacity var(--m-hover) ease, transform var(--m-pop) var(--m-in); }
.biz-tick .icon { --icon-weight: 2px; width: 15px; height: 15px; }
.biz-row.is-current .biz-tick { opacity: 1; transform: none; }
.biz-tile { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(23, 32, 51, .05); font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1; }
/* The panel's tints (product-ui.css .cxp-avatar.tint-*), as they are. */
.biz-tile.tint-blue { background: linear-gradient(145deg, #e8effa, #f6f9fd); color: #2a5896; }
.biz-tile.tint-green { background: linear-gradient(145deg, #e4f4ec, #f5fbf8); color: #12704a; }
.biz-tile.tint-purple { background: linear-gradient(145deg, #f0eafa, #faf7fe); color: #63428f; }
.biz-tile.tint-amber { background: linear-gradient(145deg, #fcf1db, #fffaf0); color: #8a5709; }
.biz-tile.tint-slate { background: linear-gradient(145deg, #eef1f5, #f8fafb); color: #5c6675; }
.biz-copy { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.biz-copy strong { max-width: 100%; overflow: hidden; color: #172033; font-size: 13px; font-weight: 650; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.biz-row.is-current strong { color: #18243a; font-weight: 760; }
.biz-row.is-blocked strong { color: #46536a; }
/* Under the name: the number the Customers write to, quiet, in tabular figures beside WhatsApp's mark. */
.biz-number { display: inline-flex; max-width: 100%; align-items: center; gap: 5px; color: #687386; font-size: 11.5px; font-weight: 550; line-height: 1.3; white-space: nowrap; }
.biz-number .brand-icon { flex: 0 0 11px; width: 11px; height: 11px; }
.biz-number > span { overflow: hidden; text-overflow: ellipsis; }
/* Or where it stands: a pill, the mark of the page the Business opens on and that page's name. Setup in
   progress on the soft blue, a half-filled ring; service ended on slate, the clock. */
.biz-state { display: inline-flex; max-width: 100%; min-height: 19px; align-items: center; gap: 4px; padding: 0 7px 0 5px; border-radius: 999px; background: #f0f2f5; color: #5c6675; font-size: 10.5px; font-weight: 650; line-height: 1; white-space: nowrap; }
.biz-state > span { overflow: hidden; text-overflow: ellipsis; }
.biz-state svg { flex: 0 0 11px; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.biz-state svg .fill { fill: currentColor; stroke: none; }
.biz-state.is-setup { background: #eaf1fb; color: #2f5d95; }
.biz-loading { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 12px; color: #687386; font-size: 11.5px; }
/* A page of Businesses that arrives fades in where its loading row stood. */
.biz-row.is-arrived { animation: lacak-fade-in 180ms linear both; }
/* While the marks glide to the Business chosen, nothing else in the list answers the pointer. */
.biz-list.is-choosing { pointer-events: none; }
/* No Business to list: the no-Business page's words, small, with what to do next. */
.biz-empty { display: grid; justify-items: center; gap: 6px; padding: 22px 16px 18px; text-align: center; }
.biz-empty .icon { width: 22px; height: 22px; color: #8a94a6; }
.biz-empty strong { color: #172033; font-size: 13px; font-weight: 700; }
.biz-empty p { max-width: 30ch; margin: 0; color: #687386; font-size: 12px; line-height: 1.45; }
@media (max-width: 640px) {
  .biz-sheet .biz-list { flex: 1 1 auto; padding: 0 10px calc(12px + env(safe-area-inset-bottom)); }
  .biz-sheet .biz-group + .biz-group { margin-top: 8px; }
  .biz-sheet .biz-org { margin: 0 -10px; font-size: 13.5px; }
  .biz-sheet .biz-org-in { gap: 10px; min-height: 50px; padding: 16px 18px 8px; }
  .biz-sheet .biz-org-mark { flex-basis: 24px; width: 24px; height: 24px; border-radius: 7px; }
  .biz-sheet .biz-org-mark svg { width: 14px; height: 14px; }
  .biz-sheet .biz-row { grid-template-columns: 42px minmax(0, 1fr) 20px; gap: 13px; min-height: 64px; padding: 10px 14px 10px 10px; border-radius: 12px; }
  .biz-sheet .biz-mark { height: 30px; margin-top: -15px; width: 4px; }
  .biz-sheet .biz-tile { width: 42px; height: 42px; border-radius: 11px; font-size: 13px; }
  .biz-sheet .biz-copy { gap: 4px; }
  .biz-sheet .biz-copy strong { font-size: 15.5px; }
  .biz-sheet .biz-number { gap: 6px; font-size: 13px; }
  .biz-sheet .biz-number .brand-icon { flex-basis: 13px; width: 13px; height: 13px; }
  .biz-sheet .biz-state { min-height: 23px; gap: 5px; padding: 0 9px 0 6px; font-size: 12px; }
  .biz-sheet .biz-state svg { flex-basis: 13px; width: 13px; height: 13px; }
  .biz-sheet .biz-tick .icon { width: 19px; height: 19px; }
  .biz-sheet .biz-loading { min-height: 64px; padding: 0 14px; font-size: 13px; }
  .biz-sheet .biz-empty { gap: 8px; padding: 32px 20px 28px; }
  .biz-sheet .biz-empty strong { font-size: 15px; }
  .biz-sheet .biz-empty p { font-size: 13.5px; }
}

/* ---------- Rail hover ----------
   The CRM's own (sidebar.css): rows, the brand, Ciutkan and the account answer the pointer. The Business
   card is not a control when collapsed; its mark only says the Business's name. */
.tenant-shell.rail-collapsed .rail-workspace { cursor: default; }

/* ---------- One icon weight ----------
   Every line icon in the shell, Pengaturan, its dialogs, the wizard, the access states and sign-in draws its
   stroke at the same width on screen, whatever its size, as Pelanggan's do (lacak.css): the rail's own. */
:is(#rail, #mobile-top, #mobile-nav, #account-layer, #business-layer, .lacak-settings, #links-layer, .lacak-access, .lite-setup, .g5-access-shell) :is(svg.icon, .no-seat-icon svg, .setup-plan-icon svg) :is(path, circle, rect, line, polyline, ellipse) { vector-effect: non-scaling-stroke; }
:is(#rail, #mobile-top, #mobile-nav, #account-layer, #business-layer, .lacak-settings, #links-layer, .lacak-access, .lite-setup, .g5-access-shell) :is(svg.icon, .no-seat-icon svg, .setup-plan-icon svg) { stroke-width: var(--icon-weight, 1.35px); }

/* ---------- The empty form with its next step ----------
   The CRM's empty form (pages-conversations.css .conversation-empty) with the one control under its words. */
.lacak-empty.has-action > span { color: var(--muted); }
.lacak-empty.has-action > button { margin-top: 14px; }
.lacak-empty.has-action > button .icon { width: 15px; height: 15px; }

/* ---------- Sign-in ----------
   The card's steps share one place: a new step slides in while the old one slides out (app.js morphSignIn),
   and the card's height follows, so the card stays centred without a jump. */
.lacak-signin-stage { position: relative; display: grid; min-width: 0; }
.lacak-signin-body { grid-area: 1 / 1; align-self: start; min-width: 0; }
/* The leaving step lies over the new one without sizing the card, so the card's height is the new step's
   from the first frame and only the morph carries it there. */
.lacak-signin-body.is-outgoing { position: absolute; inset: 0 0 auto; pointer-events: none; }
.lacak-signin-stage.is-morphing { overflow: clip; overflow-clip-margin: 8px; }
/* A refusal is the CRM's red (chassis.css .g5-auth-error), on the field it is about and the line under the form. */
.g5-login .lacak-signin-body .g5-auth-error { margin: 10px 0 0; color: #b34c4c; font-size: 12px; font-weight: 600; line-height: 1.5; }
.g5-login input[aria-invalid="true"] { border-color: #b34c4c; box-shadow: 0 0 0 3px rgba(179, 76, 76, .12); }
.g5-login .form-field input { transition: border-color var(--m-hover) ease, box-shadow var(--m-hover) ease; }
.g5-login .primary-button, .g5-login .secondary-button, .g5-login .quiet-button { transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease, color var(--m-hover) ease; }

/* ---------- The access states ----------
   Lite's refusal card; its one action answers the pointer on the page's 120ms. */
.lacak-access .no-seat-action { transition: background-color var(--m-hover) ease, box-shadow var(--m-hover) ease; }

/* ---------- The setup wizard ----------
   The step's column 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 22px from the other
   side. The steps and the summary stay still; a step just finished shows its tick arriving and a
   connection just made washes its summary row once. */
.lite-setup .setup-wizard-main { position: relative; display: grid; align-content: start; }
.lite-setup .setup-view { display: flex; min-width: 0; flex-direction: column; grid-area: 1 / 1; }
/* The leaving view lies over the column without sizing it: the column's height goes from the old view's to
   the new one's over the same 180ms (setup.js setupTransition), so the phone's summary under it glides
   instead of jumping when the leaving view goes. Below the column and to its sides nothing shows; above
   it the leaving view stays where it was on screen. */
.lite-setup .setup-view--outgoing { position: absolute; inset: 0 0 auto; z-index: 1; pointer-events: none; }
.lite-setup .setup-view--incoming { z-index: 2; }
.lite-setup .setup-wizard-main.is-transitioning { clip-path: inset(-100vh 0 0 0); }
.lite-setup .setup-wizard-main.direction-forward > .setup-view--outgoing { animation: settings-surface-out .18s cubic-bezier(.22, .7, .3, 1) both; }
.lite-setup .setup-wizard-main.direction-forward > .setup-view--incoming { animation: settings-surface-in .18s cubic-bezier(.22, .7, .3, 1) both; }
.lite-setup .setup-wizard-main.direction-back > .setup-view--outgoing { animation: settings-surface-out-back .18s cubic-bezier(.22, .7, .3, 1) both; }
.lite-setup .setup-wizard-main.direction-back > .setup-view--incoming { animation: settings-surface-in-back .18s cubic-bezier(.22, .7, .3, 1) both; }
.lite-setup .setup-step.just-done .setup-step-index { animation: lacak-mark-in var(--m-pop) var(--m-in) both; }
.lite-setup .setup-summary-row.is-fresh { border-radius: 10px; animation: setup-row-fresh 1.2s ease-out both; }
@keyframes setup-row-fresh { 0%, 35% { background-color: #fff5d6; box-shadow: 0 0 0 8px #fff5d6; } 100% { background-color: transparent; box-shadow: 0 0 0 8px transparent; } }
.lite-setup .btn, .lite-setup .setup-exit { transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease, color var(--m-hover) ease; }
.lite-setup .setup-provider-card { transition: border-color var(--m-hover) ease, background-color var(--m-hover) ease; }

@media (prefers-reduced-motion: reduce) {
  .lacak-account-menu, .lacak-account-menu *, .tenant-shell .desktop-rail, .sidebar-scrim, #business-layer, #business-layer *,
  .lite-setup *, .lite-setup *::before, .lite-setup *::after, .g5-login *, .lacak-access *, #rail *, #rail *::before, #account-layer *, #mobile-top * { animation: none !important; transition: none !important; }
  .lite-setup .setup-summary-row.is-fresh { background-color: #fff5d6; }
}