/* KAIRO UI v3.0 — isolated presentation layer.
   Every rule is scoped to html.kairo-v3 so the v20.10.144 baseline remains reversible. */

/* Plus Jakarta Sans, self-hosted (SIL OFL 1.1, see fonts/OFL-PlusJakartaSans.txt). */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html.kairo-v3{
  --v3-ink:#173a59;
  --v3-ink-soft:#31556f;
  --v3-primary:#25b9b0;
  --v3-primary-dark:#168f8a;
  --v3-primary-soft:#e6f8f6;
  --v3-accent:#173a59;
  --v3-on-primary:#082f35;
  --v3-sky:#f1f9fb;
  --v3-sky-strong:#b8dfe9;
  --v3-gold:#dfa94a;
  --v3-gold-soft:#fff5d7;
  --v3-canvas:#f7faf9;
  --v3-surface:#fff;
  --v3-surface-subtle:#f9fcfc;
  --v3-line:#d9e9ed;
  --v3-muted:#62798a;
  --v3-danger:#c94d62;
  --v3-success:#287d68;
  --v3-container:1240px;
  --v3-page-gutter:32px;
  --v3-section-gap:24px;
  --v3-card-gap:16px;
  --v3-card-padding:20px;
  --v3-r-sm:12px;
  --v3-r-md:16px;
  --v3-r-lg:18px;
  --v3-shadow:0 8px 24px rgba(23,58,89,.055);
  --v3-shadow-hover:0 12px 30px rgba(23,58,89,.085);
}
html.kairo-v3 body{font-family:"Plus Jakarta Sans",Arial,sans-serif;color:var(--v3-ink)}
html.kairo-v3 #kairo-mobile-notif-sheet{display:none}

/* Public landing/auth moved to the isolated KAIRO UI v3.3 source below. */

/* KAIRO UI v3.4 — authenticated shell and reusable internal card system. */
html.kairo-v3 body.authenticated {
  background: var(--v3-canvas) !important;
  color: var(--v3-ink) !important;
}

/* Living Origami background (kairo.css + kairo-app.js), in the KAIRO / workspace layout colours
   and tuned to read through the gaps between cards. Kept light: no drop-shadow filters, few
   cranes on phones, paused while the tab is hidden (kairo-app.js) or with reduced motion. */
html.kairo-v3 .living-origami-bg {
  /* Softened: cranes mix the layout colours with the canvas so they never look loud. */
  --brand-primary: color-mix(in srgb, var(--v3-primary) 72%, var(--v3-canvas));
  --brand-accent: color-mix(in srgb, var(--v3-accent) 55%, var(--v3-canvas));
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--v3-primary) 14%, transparent), transparent 38%),
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--v3-accent) 8%, transparent), transparent 40%),
    radial-gradient(circle at 70% 92%, color-mix(in srgb, var(--v3-primary) 9%, transparent), transparent 42%),
    linear-gradient(150deg, color-mix(in srgb, var(--v3-primary) 4%, var(--v3-canvas)), color-mix(in srgb, var(--v3-accent) 4%, var(--v3-canvas)));
}

html.kairo-v3 body.saas-dark .living-origami-bg {
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--v3-primary) 13%, transparent), transparent 38%),
    radial-gradient(circle at 88% 14%, color-mix(in srgb, #5b8fd6 9%, transparent), transparent 40%),
    radial-gradient(circle at 70% 92%, color-mix(in srgb, var(--v3-primary) 8%, transparent), transparent 42%),
    var(--v3-canvas);
}

html.kairo-v3 .origami-part {
  filter: none;
}

html.kairo-v3 body.authenticated .origami-drifter {
  opacity: .5 !important;
}

html.kairo-v3 body.authenticated.saas-dark .origami-drifter {
  opacity: .4 !important;
}

/* Dark mode: navy wings would vanish on the dark canvas, so they use a lighter blue. */
html.kairo-v3 body.saas-dark .living-origami-bg {
  --brand-accent: #7f9fc8;
}

@media (max-width: 760px) {
  html.kairo-v3 body.authenticated .origami-drifter {
    opacity: .4 !important;
  }

  html.kairo-v3 body.authenticated.saas-dark .origami-drifter {
    opacity: .32 !important;
  }
}

html.kairo-v3 #app-shell .header {
  background: color-mix(in srgb, var(--v3-surface) 94%, transparent) !important;
  border-bottom: 1px solid var(--v3-line) !important;
  box-shadow: none !important;
}

html.kairo-v3 #app-shell main.container {
  width: auto;
  max-width: var(--v3-container);
  padding: 30px var(--v3-page-gutter) 80px !important;
}

html.kairo-v3 #app-shell main.container > .toolbar.kairo-page-header {
  align-items: center !important;
  gap: 20px;
  margin: 0 0 22px !important;
  padding: 0 0 20px !important;
  border-bottom: 1px solid var(--v3-line);
}

html.kairo-v3 .page-title {
  color: var(--v3-ink) !important;
  font-size: clamp(25px, 2.5vw, 32px) !important;
  font-weight: 800;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
}

html.kairo-v3 .page-sub,
html.kairo-v3 .muted {
  color: var(--v3-muted) !important;
  line-height: 1.55;
}

/* Sidebar and content use the same visual grid. */
html.kairo-v3 #saas-sidebar {
  background: var(--v3-surface) !important;
  border-color: var(--v3-line) !important;
  box-shadow: 8px 0 24px rgba(23, 58, 89, .045) !important;
}

html.kairo-v3 #saas-sidebar::before {
  background: linear-gradient(180deg, var(--v3-sky), transparent) !important;
}

/* Logo workspace (default: ikon KAIRO; diganti logo upload user). Ukuran sama saat sidebar diperkecil supaya tidak bergeser. */
html.kairo-v3 #saas-sidebar .saas-side-brand img,
html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar .saas-side-brand img {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  object-fit: cover !important;
}

html.kairo-v3 .saas-side-brand-copy strong {
  color: var(--v3-ink) !important;
}

html.kairo-v3 .saas-sidebar-nav .tab,
html.kairo-v3 .saas-settings-side-btn {
  min-height: 42px;
  border-radius: 12px !important;
  color: var(--v3-muted) !important;
}

html.kairo-v3 .saas-sidebar-nav .tab:hover,
html.kairo-v3 .saas-settings-side-btn:hover {
  background: var(--v3-sky) !important;
  border-color: var(--v3-line) !important;
  box-shadow: none !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 .saas-sidebar-nav .tab.active,
html.kairo-v3 .saas-settings-side-btn.active {
  background: var(--v3-sky) !important;
  border-color: var(--v3-sky-strong) !important;
  box-shadow: inset 3px 0 0 var(--v3-primary) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 .saas-sidebar-nav .tab.active .saas-nav-icon,
html.kairo-v3 .saas-settings-side-btn.active .saas-nav-icon {
  color: var(--v3-primary-dark);
}

/* Minimized sidebar (desktop): a 76px rail where every icon keeps the exact x
   position it has when expanded, so expand/minimize only animates the rail width
   and fades the labels instead of jumping. */
@media (min-width: 901px) {
  html.kairo-v3 {
    --sidebar-mini: 96px;
    --kairo-rail-ease: cubic-bezier(.2, .7, .2, 1);
  }

  html.kairo-v3 #saas-sidebar {
    overflow: hidden;
    transition: width .26s var(--kairo-rail-ease) !important;
  }

  html.kairo-v3 #app-shell main.container {
    transition: margin-left .26s var(--kairo-rail-ease) !important;
  }

  html.kairo-v3 #app-shell .header {
    transition: left .26s var(--kairo-rail-ease), width .26s var(--kairo-rail-ease) !important;
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar {
    width: calc(var(--sidebar-mini) - 20px);
  }

  html.kairo-v3 .saas-sidebar-nav .tab,
  html.kairo-v3 .saas-settings-side-btn {
    overflow: hidden;
    white-space: nowrap;
  }

  /* Labels fade and collapse their width instead of display:none. */
  html.kairo-v3 #saas-sidebar :is(.saas-nav-label, .saas-side-brand-copy) {
    max-width: 170px;
    opacity: 1;
    transition: opacity .18s ease .08s, max-width .26s var(--kairo-rail-ease);
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar .saas-nav-label {
    display: inline-block;
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar .saas-side-brand-copy {
    display: block;
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar :is(.saas-nav-label, .saas-side-brand-copy) {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease, max-width .26s var(--kairo-rail-ease);
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar .saas-side-brand {
    padding: 4px 7px 10px;
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar .saas-sidebar-nav {
    padding-right: 0;
  }

  /* Same padding as expanded, fixed rail-sized box: icon stays put, nothing is clipped. */
  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar :is(.saas-sidebar-nav .tab, .saas-settings-side-btn) {
    width: 52px;
    min-width: 52px;
    padding: 11px 12px;
    justify-content: flex-start;
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar .kairo-feedback-link {
    width: 52px !important;
    min-width: 52px !important;
    height: 38px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html.kairo-v3 body.saas-sidebar-collapsed #saas-sidebar .saas-collapse-btn {
    width: 52px;
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  html.kairo-v3 :is(#saas-sidebar, #app-shell main.container, #app-shell .header),
  html.kairo-v3 #saas-sidebar :is(.saas-nav-label, .saas-side-brand-copy) {
    transition: none !important;
  }
}

/* Settings > Workspace & Branding: heading + Reset above the layout colours. */
html.kairo-v3 .kairo-layout-colors-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--v3-line);
}

html.kairo-v3 .kairo-layout-colors-title {
  color: var(--v3-ink);
  font-size: 14px;
  font-weight: 800;
}

html.kairo-v3 .kairo-layout-colors-head .page-sub {
  margin-top: 3px;
  font-size: 12px;
}

html.kairo-v3 .kairo-layout-colors-head .btn {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
}

/* Settings > Topik: rows have no price column, so they get their own 3-column grid
   (kairo.css forced the 4-column package grid and stacked the buttons). Actions sit in
   one row like Package & Harga. */
html.kairo-v3 #settings .settings-master-row.settings-topic-master-row {
  grid-template-columns: minmax(110px, .7fr) minmax(240px, 2.5fr) auto !important;
}

html.kairo-v3 #settings .settings-topic-master-row .settings-master-actions {
  flex-wrap: nowrap;
}

@media (max-width: 700px) {
  html.kairo-v3 #settings .settings-master-row.settings-topic-master-row {
    grid-template-columns: 1fr 1.4fr !important;
  }

  html.kairo-v3 #settings .settings-topic-master-row .settings-master-actions {
    flex-wrap: wrap;
  }
}

/* Accent buttons: text colour picked for contrast against the workspace accent. */
html.kairo-v3 .btn-pink {
  color: var(--kairo-on-accent, #fff) !important;
}

/* Dark mode contrast fixes (audited per menu). Light mode is unchanged. */
html.kairo-v3 body.saas-dark #app-shell .table-wrap {
  background: var(--v3-surface) !important;
}

html.kairo-v3 body.saas-dark #app-shell .customer-db-name-btn {
  color: color-mix(in srgb, var(--v3-primary) 55%, #fff) !important;
}

html.kairo-v3 body.saas-dark #app-shell .btn-gold {
  background: var(--v3-gold-soft) !important;
  border-color: #6b5826 !important;
  color: #f1d58c !important;
}

/* Row hover: kairo.css paints the hovered <tr> near-white (also in dark) and only gives the
   cells a 3.5% overlay, so light text disappeared. Dark mode uses one solid, dark highlight. */
html.kairo-v3 body.saas-dark #app-shell table tbody tr:hover {
  background: transparent !important;
}

html.kairo-v3 body.saas-dark #app-shell #dashboard table tbody tr:nth-child(n):hover > td,
html.kairo-v3 body.saas-dark #app-shell table tbody tr:nth-child(n):hover > td {
  background: var(--v3-sky) !important;
}

html.kairo-v3 body.saas-dark #app-shell :is(.sh-select-trigger, .sh-select-label, .sh-select-option) {
  color: var(--v3-ink) !important;
}

html.kairo-v3 body.saas-dark #app-shell .sh-select-trigger.placeholder,
html.kairo-v3 body.saas-dark #app-shell .sh-select-trigger.placeholder .sh-select-label {
  color: var(--v3-muted) !important;
}

html.kairo-v3 body.saas-dark #app-shell :is(.sh-select-option:hover, .sh-select-option:focus-visible, .sh-select-option.selected) {
  background: var(--v3-sky) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 body.saas-dark #app-shell .notice {
  background: var(--v3-gold-soft) !important;
  border-color: #6b5826 !important;
  color: #f1d58c !important;
}

html.kairo-v3 body.saas-dark #app-shell :is(#tx-total, .total-box, .total-box strong, .customer-selected-note) {
  color: var(--v3-ink) !important;
}

html.kairo-v3 body.saas-dark #app-shell .shift-stat-value {
  color: var(--v3-ink) !important;
}

html.kairo-v3 body.saas-dark #app-shell .platform-growth-up {
  color: #7fd6a8 !important;
}

html.kairo-v3 body.saas-dark #app-shell .platform-growth-down {
  color: #ff9aa5 !important;
}

html.kairo-v3 body.saas-dark #app-shell .platform-growth-flat {
  color: var(--v3-muted) !important;
}

html.kairo-v3 body.saas-dark #close-shift-btn:not(:disabled) {
  background: rgba(229, 72, 77, .16) !important;
  border-color: rgba(229, 72, 77, .42) !important;
  color: #ffa3ab !important;
}

html.kairo-v3 body.saas-dark #kairo-v3-dashboard-head small {
  color: var(--v3-primary);
}

html.kairo-v3 body.saas-dark #app-shell #saas-workspace-pill {
  background: var(--v3-surface-subtle) !important;
  border-color: var(--v3-line) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 body.saas-dark #app-shell #saas-plan-pill {
  background: var(--v3-gold-soft) !important;
  border-color: #6b5826 !important;
  color: #f1d58c !important;
}

html.kairo-v3 body.saas-dark #app-shell #saas-plan-pill :is(strong, small) {
  color: inherit !important;
}

html.kairo-v3 body.saas-dark #app-shell #saas-plan-pill small {
  opacity: .82;
}

/* Light/dark switch: a short whole-page cross-fade (View Transitions API). */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .32s;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}

/* Header notifications (bell next to the dark-mode toggle). */
html.kairo-v3 .kairo-notif {
  position: relative;
  display: flex;
}

html.kairo-v3 .kairo-notif-btn {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--v3-line);
  border-radius: 11px;
  background: var(--v3-surface);
  color: var(--v3-ink);
  cursor: pointer;
}

html.kairo-v3 .kairo-notif-btn:hover,
html.kairo-v3 .kairo-notif-btn[aria-expanded="true"] {
  background: var(--v3-sky);
}

html.kairo-v3 .kairo-notif-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

html.kairo-v3 .kairo-notif-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--v3-surface);
  border-radius: 50%;
  background: #e5484d;
}

html.kairo-v3 .kairo-notif-dot[hidden] {
  display: none;
}

/* Order 30+ menit masih On Progress: titik merah berdenyut sampai order dicentang selesai.
   Denyut = lingkaran ::after yang membesar & memudar (transform + opacity dijalankan GPU). Dulu box-shadow yang
   dianimasikan: dihitung ulang CPU tiap frame selama ada order terlambat (~2-4% CPU terus-menerus). */
html.kairo-v3 :is(.kairo-notif-btn, .kairo-mobile-notif-icon) { isolation: isolate; }  /* lingkaran denyut tetap di belakang titik */
html.kairo-v3 .kairo-notif-dot.is-urgent::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  border-radius: 50%;
  background: rgba(229, 72, 77, .55);
  pointer-events: none;
  animation: kairoNotifPulse 1.6s ease-out infinite;
}

@keyframes kairoNotifPulse {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(2.75); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.kairo-v3 .kairo-notif-dot.is-urgent::after { animation: none; display: none; }
}

html.kairo-v3 .kairo-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  width: min(330px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-md);
  background: var(--v3-surface);
  box-shadow: 0 18px 44px rgba(13, 30, 45, .18);
  color: var(--v3-ink);
}

html.kairo-v3 .kairo-notif-panel[hidden] {
  display: none;
}

html.kairo-v3 .kairo-notif-head {
  display: grid;
  gap: 2px;
  padding: 2px 4px 10px;
  border-bottom: 1px solid var(--v3-line);
}

html.kairo-v3 .kairo-notif-head strong {
  font-size: 14px;
}

html.kairo-v3 .kairo-notif-head span,
html.kairo-v3 .kairo-notif-empty {
  color: var(--v3-muted);
  font-size: 12px;
}

html.kairo-v3 .kairo-notif-list {
  display: grid;
  max-height: 300px;
  overflow: auto;
  padding: 6px 0;
}

html.kairo-v3 .kairo-notif-empty {
  padding: 14px 4px;
  text-align: center;
}

html.kairo-v3 .kairo-notif-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 6px;
  border-radius: 10px;
}

html.kairo-v3 .kairo-notif-item + .kairo-notif-item {
  border-top: 1px solid var(--v3-line);
}

html.kairo-v3 .kairo-notif-item div {
  display: grid;
  min-width: 0;
}

html.kairo-v3 .kairo-notif-item strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.kairo-v3 .kairo-notif-item span {
  color: var(--v3-muted);
  font-size: 11px;
}

html.kairo-v3 .kairo-notif-item em {
  flex: none;
  color: var(--v3-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

html.kairo-v3 .kairo-notif-item.is-urgent em {
  color: #e5484d;
}

html.kairo-v3 body.saas-dark .kairo-notif-item.is-urgent em {
  color: #ff7d82;
}

html.kairo-v3 .kairo-notif-open {
  width: 100%;
  min-height: 36px;
  margin-top: 4px;
  border: 1px solid var(--v3-line);
  border-radius: 10px;
  background: var(--v3-sky);
  color: var(--v3-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Page toolbar: the period filter and Export Excel only apply to Dashboard,
   Performance and Withdraw. Orders, Customer Database, Petty Cash and
   Settings keep just Refresh. Plan-independent, so it applies to every package. */
html.kairo-v3 #app-shell main.container:has(> section.section.active:is(#input, #customers, #cash, #settings, #subscriptions, #pos-products, #po-plans, #po-finance)) > .toolbar :is(#period-group, #custom-range, .btn[onclick^="exportExcel"]) {
  display: none !important;
}

/* Page enter animation (kairo.css sectionIn) used fill-mode "both", so a finished page kept a
   transform and trapped every position:fixed child inside it (e.g. the mobile Orders tool menu
   opened ~1,400px below the screen). Keep the entrance, drop the leftover transform. */
html.kairo-v3 #app-shell .section.active {
  animation-fill-mode: backwards;
}

/* Orders "Manual / Autofill" picker: on phones too it drops down right under its button, like
   desktop (it used to be a sheet fixed above the bottom nav, far from the button). */
html.kairo-v3 #input .orders-tool-item { touch-action: manipulation; }
@media (max-width: 700px) {
  html.kairo-v3 #input .orders-tool-menu { width: min(360px, calc(100vw - 56px)); }
}

/* Alert pop-ups (showToast): stack fixed at the top right so it stays in view while scrolling. */
html.kairo-v3 .kairo-toast-stack {
  position: fixed;
  top: calc(var(--kairo-toast-top, 16px) + env(safe-area-inset-top));
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

html.kairo-v3 .kairo-toast {
  --toast-tone: #2b6cb0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  border: 1px solid color-mix(in srgb, var(--toast-tone) 38%, var(--v3-line));
  border-radius: 12px;
  /* Beda dari kartu menu (owner Okt 2026): latar diwarnai tipis sesuai jenis + garis aksen kiri. */
  background: color-mix(in srgb, var(--toast-tone) 9%, var(--v3-surface));
  color: var(--v3-ink);
  box-shadow: inset 4px 0 0 var(--toast-tone), 0 14px 34px rgba(15, 35, 55, .22);
  pointer-events: auto;
  animation: kairo-toast-in .22s cubic-bezier(.2, .7, .2, 1);
  transition: opacity .2s ease, transform .2s ease;
}

html.kairo-v3 .kairo-toast.is-leaving {
  opacity: 0;
  transform: translateX(16px);
}

@keyframes kairo-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

html.kairo-v3 .kairo-toast-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}




html.kairo-v3 .kairo-toast.is-success { --toast-tone: #0f7b5f; }
html.kairo-v3 .kairo-toast.is-info { --toast-tone: #2b6cb0; }
html.kairo-v3 .kairo-toast.is-warning { --toast-tone: #b26a00; }
html.kairo-v3 .kairo-toast.is-error { --toast-tone: #c8323a; }
html.kairo-v3 body.saas-dark .kairo-toast { background: color-mix(in srgb, var(--toast-tone) 16%, var(--v3-surface)); box-shadow: inset 4px 0 0 var(--toast-tone), 0 16px 40px rgba(0, 0, 0, .55); }
html.kairo-v3 body.saas-dark .kairo-toast.is-success { --toast-tone: #4fd1a5; }
html.kairo-v3 body.saas-dark .kairo-toast.is-info { --toast-tone: #7fb2ff; }
html.kairo-v3 body.saas-dark .kairo-toast.is-warning { --toast-tone: #f5b83d; }
html.kairo-v3 body.saas-dark .kairo-toast.is-error { --toast-tone: #ff7d82; }
html.kairo-v3 .kairo-toast-icon { color: var(--toast-tone); }

html.kairo-v3 .kairo-toast-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

html.kairo-v3 .kairo-toast-copy strong {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

html.kairo-v3 .kairo-toast-copy span {
  color: var(--v3-ink-soft);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

html.kairo-v3 .kairo-toast-close {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: -4px -2px 0 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--v3-muted);
  cursor: pointer;
}

html.kairo-v3 .kairo-toast-close:hover,
html.kairo-v3 .kairo-toast-close:focus-visible {
  background: var(--v3-sky);
  color: var(--v3-ink);
}

html.kairo-v3 .kairo-toast-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Petty Cash: shared date filter above "Riwayat Pengeluaran" and "Riwayat Pemasukan". */
html.kairo-v3 .cash-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
}

html.kairo-v3 .cash-filter-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html.kairo-v3 .cash-filter-copy strong {
  color: var(--v3-ink);
  font-size: 13px;
}

html.kairo-v3 .cash-filter-copy small {
  color: var(--v3-muted);
  font-size: 11px;
  font-weight: 700;
}

html.kairo-v3 .cash-filter-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

html.kairo-v3 .cash-filter-controls .history-filter-select {
  flex: 0 0 auto;
  min-width: 180px;
}

html.kairo-v3 .cash-filter-custom {
  display: flex;
  align-items: center;
  gap: 6px;
}

html.kairo-v3 .cash-filter-custom[hidden] {
  display: none;
}

html.kairo-v3 .cash-filter-custom span {
  color: var(--v3-muted);
  font-size: 12px;
}

html.kairo-v3 .cash-filter-custom .history-filter-date {
  flex: 0 0 auto;
  width: 150px;
}

@media (max-width: 640px) {
  html.kairo-v3 .cash-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  html.kairo-v3 .cash-filter-controls,
  html.kairo-v3 .cash-filter-controls .history-filter-select {
    width: 100%;
  }

  html.kairo-v3 .cash-filter-custom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: 100%;
  }

  html.kairo-v3 .cash-filter-custom .history-filter-date {
    width: 100%;
    min-width: 0;
  }
}

/* Date fields next to the history/petty-cash filter selects: kairo.css gives them a near-white
   fill with no dark-mode rule, so their light text was unreadable in dark mode. */
html.kairo-v3 body.saas-dark .history-filter-date {
  border-color: var(--v3-line);
  background: var(--v3-surface);
  color: var(--v3-ink);
  color-scheme: dark;
}

/* Refresh / Export Excel: SVG icons instead of glyphs (iOS draws ⬇ as an emoji). */
html.kairo-v3 #app-shell main.container > .toolbar .btn:is(.kairo-refresh-btn, [onclick^="exportExcel"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

html.kairo-v3 .kairo-btn-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.kairo-v3 .kairo-refresh-btn.is-refreshing {
  cursor: progress;
  opacity: .8;
}

html.kairo-v3 .kairo-refresh-btn.is-refreshing .kairo-btn-icon {
  animation: kairo-spin .8s linear infinite;
}

@keyframes kairo-spin {
  to { transform: rotate(360deg); }
}

html.kairo-v3 .saas-collapse-btn {
  background: var(--v3-surface) !important;
  border-color: var(--v3-line) !important;
  box-shadow: none !important;
  color: var(--v3-ink) !important;
}

/* Base, information and list cards share one source of truth. */
html.kairo-v3 #app-shell .card,
html.kairo-v3 #app-shell .kpi {
  box-sizing: border-box;
  background: var(--v3-surface) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-lg) !important;
  box-shadow: var(--v3-shadow) !important;
}

html.kairo-v3 #app-shell .card {
  padding: var(--v3-card-padding) !important;
}

/* One card-title style everywhere (owner Okt 2026: dulu campur serif kecil & sans besar). */
html.kairo-v3 #app-shell .card-title,
html.kairo-v3 #app-shell #cash-capital-card .cash-filter-copy strong {
  color: var(--v3-ink) !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  font-style: normal !important;
  line-height: 1.3;
  letter-spacing: -.01em;
}

html.kairo-v3 #app-shell .kairo-list-card,
html.kairo-v3 #app-shell .kairo-information-card {
  overflow: hidden;
}

/* Dashboard page header: context left, bounded actions right. */
html.kairo-v3 #kairo-v3-dashboard-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin: 0 0 var(--v3-section-gap);
  padding: 16px 22px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-lg);
  background: var(--v3-sky);
}

html.kairo-v3 #kairo-v3-dashboard-head small {
  color: var(--v3-primary-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
}

html.kairo-v3 #kairo-v3-dashboard-head h2 {
  margin: 4px 0 3px;
  color: var(--v3-ink);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.2;
  letter-spacing: -.035em;
}

html.kairo-v3 #kairo-v3-dashboard-head p {
  margin: 0;
  color: var(--v3-muted);
  font-size: 11px;
}

html.kairo-v3 .kairo-live-clock {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 128px;
  padding: 8px 14px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-sm);
  background: var(--v3-surface);
}

html.kairo-v3 .kairo-live-clock strong {
  color: var(--v3-ink);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
}

html.kairo-v3 .kairo-live-clock span {
  color: var(--v3-muted);
  font-size: 11px;
  font-weight: 700;
}






/* Stat cards (compact): icon on the left, label + value stacked beside it. */
html.kairo-v3 #dashboard .kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: var(--v3-section-gap);
}

/* Seller template adds a Profit card (5 cards): three on top, two wider below. */
@media (min-width: 1241px) {
  html.kairo-v3 body.seller-app-premium #dashboard .kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html.kairo-v3 body.seller-app-premium #dashboard .kpi-grid > .kpi {
    grid-column: span 2;
  }

  html.kairo-v3 body.seller-app-premium #dashboard .kpi-grid > .kpi:nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* Kas tidak aktif (Gratis / Pro dengan Kas dimatikan): kartu Saldo Kas disembunyikan, grid menyesuaikan. */
html.kairo-v3 #dashboard .kpi-grid > .kpi[hidden] { display: none !important; }
/* Menu Petty Cash disembunyikan saat Kas dimatikan (Pro); CSS menu lama memakai display !important. */
html.kairo-v3 [data-tab="cash"][hidden], html.kairo-v3 .saas-mobile-nav-btn[data-mobile-tab="cash"][hidden] { display: none !important; }
@media (min-width: 1241px) {
  html.kairo-v3 body.kairo-no-cash:not(.seller-app-premium) #dashboard .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html.kairo-v3 body.kairo-no-cash.seller-app-premium #dashboard .kpi-grid > .kpi { grid-column: span 3; }
}
@media (max-width: 1240px) {
  html.kairo-v3 body.kairo-no-cash:not(.seller-app-premium) #dashboard .kpi-grid > .kpi:last-child { grid-column: 1 / -1; }
  html.kairo-v3 body.kairo-no-cash.seller-app-premium #dashboard .kpi-grid > .kpi:last-child { grid-column: auto; }
}

html.kairo-v3 #dashboard .kpi {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-width: 0;
  padding: 14px 16px !important;
  overflow: hidden;
  align-content: center;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
}

html.kairo-v3 #dashboard .kpi > .kairo-stat-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
}

html.kairo-v3 #dashboard .kpi > :not(.kairo-stat-icon) {
  grid-column: 2;
  min-width: 0;
}

html.kairo-v3 #dashboard .kpi .kpi-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}

html.kairo-v3 #dashboard .kpi .kpi-label {
  margin: 0;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 0;
}

html.kairo-v3 #dashboard .kpi .kpi-value {
  font-size: clamp(17px, 1.5vw, 21px) !important;
  letter-spacing: -.03em;
}

html.kairo-v3 #dashboard .kpi .kpi-eye {
  width: 24px;
  height: 24px;
  margin: -4px -4px -4px 0;
}

html.kairo-v3 #dashboard .kpi .kpi-eye svg {
  width: 14px;
  height: 14px;
}

html.kairo-v3 #dashboard .kpi::before {
  display: none !important;
}

html.kairo-v3 .kairo-stat-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  background: var(--v3-primary-soft);
  color: var(--v3-primary-dark);
}

html.kairo-v3 .kairo-stat-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.kairo-v3 .kpi[data-v3-tone="gold"] .kairo-stat-icon {
  background: var(--v3-gold-soft);
  color: #8a6421;
}

html.kairo-v3 .kpi[data-v3-tone="sky"] .kairo-stat-icon {
  background: var(--v3-sky);
  color: var(--v3-ink-soft);
}

html.kairo-v3 .kpi-head {
  align-items: center;
  min-width: 0;
}

html.kairo-v3 .kpi-label {
  color: var(--v3-muted) !important;
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 750;
  line-height: 1.35;
}

html.kairo-v3 .kpi-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--v3-ink) !important;
  font-size: clamp(20px, 2.1vw, 28px) !important;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.04em;
}

html.kairo-v3 .kpi-eye {
  width: 28px;
  height: 28px;
  border-color: var(--v3-line) !important;
  background: var(--v3-surface) !important;
  color: var(--v3-muted) !important;
}

/* Content grids and operational list panels. */
html.kairo-v3 #dashboard > .shift-card,
html.kairo-v3 #dashboard > #transaction-history-card,
html.kairo-v3 #dashboard > #seller-dashboard-history-card,
html.kairo-v3 #dashboard > #seller-dashboard-alert-row {
  margin-top: var(--v3-section-gap) !important;
}

/* Open Store card: controls + session stats on the left, Riwayat Open Store on the right.
   Same markup and IDs as before (kairo-app.js keeps updating them); layout only. */
/* Plain block (not the column flex-wrap from kairo.css): Safari stretched the
   buttons behind the stats with the flex version. */
html.kairo-v3 #dashboard > .shift-card .shift-top {
  display: block;
  align-self: start;
}

html.kairo-v3 #dashboard > .shift-card .shift-actions {
  display: grid;
  width: 100%;
  margin-top: 14px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 8px;
}

html.kairo-v3 #dashboard > .shift-card .shift-actions .btn {
  width: 100%;
  height: 40px;
  min-height: 0;
  margin: 0;
  align-self: start;
}

html.kairo-v3 #dashboard > .shift-card .shift-stat {
  padding: 11px 14px;
}

html.kairo-v3 #dashboard > .shift-card .shift-stat-label {
  font-size: 11px;
}

html.kairo-v3 #dashboard > .shift-card .shift-history-head .card-title {
  font-size: 15px !important;
}

html.kairo-v3 #dashboard > .shift-card .shift-history :is(th, td) {
  text-align: center;
  white-space: nowrap;
}

html.kairo-v3 #dashboard > .shift-card .shift-history td.empty {
  white-space: normal;
}

@media (min-width: 901px) {
  html.kairo-v3 #dashboard > .shift-card {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    align-items: start;
  }

  /* Explicit lines: left column = controls (row 1) then stats (row 2); history spans both. */
  html.kairo-v3 #dashboard > .shift-card .shift-top {
    grid-column: 1;
    grid-row: 1;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-grid {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* History never sets the card height: height:0 + min-height:100% makes it fill
     exactly the left column (bottom aligned with Durasi); extra rows scroll inside. */
  html.kairo-v3 #dashboard > .shift-card .shift-history {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    height: 0;
    min-height: 100%;
    margin-top: 0;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history .table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
  }
}

/* Mobile: each Riwayat Open Store row becomes a card.
   Omzet ........ Status
   Mulai          Tutup
   Durasi         Transaksi
   [Hapus] */
@media (max-width: 700px) {
  html.kairo-v3 #dashboard > .shift-card .shift-history .table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent !important;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history table {
    display: block;
    min-width: 0;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history thead {
    display: none;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody {
    display: grid;
    gap: 10px;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody tr {
    display: grid;
    padding: 12px 14px;
    border: 1px solid var(--v3-line);
    border-radius: var(--v3-r-sm);
    background: var(--v3-surface);
    grid-template-areas:
      "omzet status"
      "mulai tutup"
      "durasi trx"
      "aksi aksi";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 12px;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody tr.shift-row-active {
    border-color: var(--v3-primary);
  }

  html.kairo-v3 body #dashboard > .shift-card .shift-history tbody td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: 13px;
    text-align: left;
    white-space: normal;
  }

  /* Beats kairo.css cell, zebra and active-row backgrounds so each card has one surface. */
  html.kairo-v3 body #dashboard > .shift-card .shift-history tbody tr:nth-child(n) td {
    background: transparent !important;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4))::before {
    display: block;
    margin-bottom: 2px;
    color: var(--v3-muted);
    font-size: 11px;
    font-weight: 600;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(1) { grid-area: mulai; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(1)::before { content: "Mulai"; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(2) { grid-area: tutup; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(2)::before { content: "Tutup"; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(3) { grid-area: durasi; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(3)::before { content: "Durasi"; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(4) { grid-area: trx; }
  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(4)::before { content: "Transaksi"; }

  html.kairo-v3 body #dashboard > .shift-card .shift-history tbody td:nth-child(5) {
    grid-area: omzet;
    align-self: center;
    font-size: 16px;
  }

  html.kairo-v3 body #dashboard > .shift-card .shift-history tbody td:nth-child(6) {
    grid-area: status;
    align-self: center;
    justify-self: end;
  }

  html.kairo-v3 body #dashboard > .shift-card .shift-history tbody td:nth-child(7) {
    grid-area: aksi;
    padding-top: 10px;
    border-top: 1px solid var(--v3-line);
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td:nth-child(7) .shift-delete-btn {
    width: 100%;
    min-height: 34px;
  }

  html.kairo-v3 body #dashboard > .shift-card .shift-history tbody td.empty {
    grid-column: 1 / -1;
    padding: 10px 0;
    color: var(--v3-muted);
    text-align: center;
  }

  html.kairo-v3 #dashboard > .shift-card .shift-history tbody td.empty::before {
    content: none;
  }
}

/* Riwayat Transaksi: compact 7-column table. Qty, Topic, Add On, Tip and
   Pembayaran stay in the DOM (kairo-app.js renders 12 cells) and move to the
   Detail dialog opened from the Aksi column (see kairo-v3.js). */
html.kairo-v3 #transaction-history-card .history-table-wrap table {
  width: 100%;
  min-width: 720px;
}

html.kairo-v3 #transaction-history-card .history-table-wrap :is(th, td):is(:nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(11)) {
  display: none;
}

html.kairo-v3 #dashboard #transaction-history-card .history-table-wrap thead th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--v3-line);
  background: var(--v3-surface-subtle) !important;
  color: var(--v3-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

html.kairo-v3 #transaction-history-card .history-table-wrap td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--v3-line);
  color: var(--v3-ink);
  font-size: 13px;
  line-height: 1.4;
  vertical-align: middle;
}

html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(1),
html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(2) {
  white-space: nowrap;
}

html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(3) {
  font-weight: 650;
}

html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(5) .badge {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

/* Every visible column is centred, header and content alike. */
html.kairo-v3 #dashboard #transaction-history-card .history-table-wrap :is(thead th, tbody td) {
  text-align: center;
}

html.kairo-v3 #transaction-history-card .history-table-wrap .reading-status-wrap {
  justify-content: center;
}

html.kairo-v3 #dashboard #transaction-history-card .history-table-wrap :is(th, td):nth-child(10) {
  white-space: nowrap;
}

html.kairo-v3 #dashboard #transaction-history-card .history-table-wrap :is(th, td):nth-child(12) {
  width: 1%;
  white-space: nowrap;
}

html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(12) > div {
  flex-wrap: nowrap !important;
  justify-content: center;
  gap: 6px !important;
}

/* Original Struk / Hapus buttons stay in the row for kairo-app.js; the Aksi menu clicks them. */
html.kairo-v3 #transaction-history-card .history-table-wrap .kairo-tx-original-action {
  display: none !important;
}

html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(12) button {
  min-height: 30px;
  padding: 0 10px !important;
  border-radius: 9px;
  font-size: 12px !important;
  font-weight: 700;
  white-space: nowrap;
}

html.kairo-v3 #transaction-history-card .history-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

html.kairo-v3 #transaction-history-card .history-table-wrap tbody tr:hover td {
  background: var(--v3-sky);
}

html.kairo-v3 #transaction-history-card .history-table-wrap td.empty {
  padding: 22px 14px;
  color: var(--v3-muted);
  text-align: center;
}

/* Mobile: each history row becomes a card.
   name ......... total
   date · start   status
   paket
   [Detail] [Struk] [Hapus / Cancel] */
@media (max-width: 700px) {
  html.kairo-v3 #transaction-history-card .history-table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent !important;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap table {
    display: block;
    min-width: 0;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap thead {
    display: none;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody {
    display: grid;
    gap: 10px;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody tr {
    display: grid;
    padding: 12px 14px;
    border: 1px solid var(--v3-line);
    border-radius: var(--v3-r-sm);
    background: var(--v3-surface);
    grid-template-areas:
      "name name total"
      "date start status"
      "paket paket paket"
      "aksi aksi aksi";
    grid-template-columns: max-content minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 6px;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody tr:hover td {
    background: transparent;
  }

  html.kairo-v3 body #dashboard #transaction-history-card .history-table-wrap tbody td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
  }

  /* Beats kairo.css zebra rows (tr:nth-child(2n) td) so cards keep one surface. */
  html.kairo-v3 body #dashboard #transaction-history-card .history-table-wrap tbody tr:nth-child(n) td {
    background: transparent !important;
  }

  html.kairo-v3 body #dashboard #transaction-history-card .history-table-wrap tbody td:is(:nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(11)) {
    display: none;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(1) {
    grid-area: date;
    color: var(--v3-muted);
    font-size: 12px;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(2) {
    grid-area: start;
    color: var(--v3-muted);
    font-size: 12px;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(2)::before {
    content: "· ";
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(3) {
    grid-area: name;
    overflow: hidden;
    font-size: 14px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(4) {
    grid-area: status;
    justify-self: end;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(5) {
    grid-area: paket;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap tbody td:nth-child(5) .badge {
    max-width: 100%;
  }

  html.kairo-v3 body #dashboard #transaction-history-card .history-table-wrap tbody td:nth-child(10) {
    grid-area: total;
    justify-self: end;
    font-size: 14px;
    text-align: right;
  }

  html.kairo-v3 #dashboard #transaction-history-card .history-table-wrap tbody td:nth-child(12) {
    width: auto;
    grid-area: aksi;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--v3-line);
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(12) > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  html.kairo-v3 #transaction-history-card .history-table-wrap td:nth-child(12) button {
    min-height: 34px;
  }

  html.kairo-v3 body #dashboard #transaction-history-card .history-table-wrap tbody td.empty {
    grid-column: 1 / -1;
    padding: 10px 0;
  }
}

html.kairo-v3 :is(.kairo-tx-detail-btn, .kairo-tx-menu-btn) {
  border: 1px solid var(--v3-line);
  background: var(--v3-surface);
  color: var(--v3-ink);
  cursor: pointer;
}

html.kairo-v3 :is(.kairo-tx-detail-btn, .kairo-tx-menu-btn):hover,
html.kairo-v3 .kairo-tx-menu-btn[aria-expanded="true"] {
  border-color: var(--v3-sky-strong);
  background: var(--v3-sky);
}

html.kairo-v3 .kairo-tx-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

html.kairo-v3 .kairo-tx-menu-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

html.kairo-v3 .kairo-tx-menu {
  position: fixed;
  z-index: 100001;
  display: grid;
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-sm);
  background: var(--v3-surface);
  box-shadow: 0 16px 40px rgba(13, 30, 45, .18);
}

html.kairo-v3 .kairo-tx-menu[hidden] {
  display: none;
}

html.kairo-v3 .kairo-tx-menu button {
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--v3-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

html.kairo-v3 .kairo-tx-menu button:is(:hover, :focus-visible) {
  background: var(--v3-sky);
  outline: none;
}

html.kairo-v3 .kairo-tx-menu button.is-danger {
  color: var(--v3-danger);
}

/* Detail dialog for a history row. */
html.kairo-v3 .kairo-tx-detail {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  padding: 16px;
  place-items: center;
}

html.kairo-v3 .kairo-tx-detail[hidden] {
  display: none;
}

html.kairo-v3 .kairo-tx-detail-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(13, 30, 45, .48);
  cursor: default;
}

html.kairo-v3 .kairo-tx-detail-card {
  position: relative;
  width: min(100%, 440px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-lg);
  background: var(--v3-surface);
  box-shadow: 0 24px 64px rgba(13, 30, 45, .22);
  color: var(--v3-ink);
}

html.kairo-v3 .kairo-tx-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--v3-line);
  border-radius: 9px;
  background: var(--v3-surface);
  color: var(--v3-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

html.kairo-v3 .kairo-tx-detail-card h3 {
  margin: 0 40px 4px 0;
  font-size: 17px;
  font-weight: 800;
}

html.kairo-v3 .kairo-tx-detail-card > p {
  margin: 0 0 16px;
  color: var(--v3-muted);
  font-size: 13px;
}

html.kairo-v3 .kairo-tx-detail-card dl {
  display: grid;
  margin: 0;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0;
}

html.kairo-v3 .kairo-tx-detail-card :is(dt, dd) {
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid var(--v3-line);
  font-size: 13px;
  line-height: 1.45;
}

html.kairo-v3 .kairo-tx-detail-card dt {
  padding-right: 18px;
  color: var(--v3-muted);
  font-weight: 600;
}

html.kairo-v3 .kairo-tx-detail-card dd {
  font-weight: 650;
  text-align: right;
  overflow-wrap: anywhere;
}

html.kairo-v3 #dashboard .seller-dashboard-alert-row {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--v3-card-gap);
  align-items: stretch;
}

html.kairo-v3 #dashboard .seller-dashboard-alert-row > .card {
  height: 100%;
  margin: 0 !important;
}

html.kairo-v3 #dashboard .seller-expiry-row,
html.kairo-v3 #dashboard .seller-history-card {
  border-color: var(--v3-line);
  border-radius: var(--v3-r-sm);
  background: var(--v3-surface-subtle);
}

html.kairo-v3 #dashboard .seller-expiry-list,
html.kairo-v3 #dashboard .seller-history-list {
  gap: 8px;
}

html.kairo-v3 #dashboard .seller-dashboard-history-head,
html.kairo-v3 #dashboard .seller-expiry-head {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--v3-line);
}

html.kairo-v3 .table-wrap {
  overflow-x: auto;
  border: 1px solid var(--v3-line) !important;
  border-radius: var(--v3-r-md) !important;
  background: var(--v3-surface);
}

html.kairo-v3 table thead th {
  background: var(--v3-sky) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 table tbody td {
  border-color: var(--v3-line) !important;
}

html.kairo-v3 .btn,
html.kairo-v3 .period-btn {
  border-radius: var(--v3-r-sm) !important;
}

html.kairo-v3 .btn-green,
html.kairo-v3 .period-btn.active {
  background: var(--v3-primary) !important;
  border-color: var(--v3-primary) !important;
  color: var(--v3-on-primary) !important;
}

html.kairo-v3 .btn-gold {
  background: var(--v3-gold-soft) !important;
  border-color: #efd68d !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 .btn-light,
html.kairo-v3 .period-btn:not(.active) {
  background: var(--v3-surface) !important;
  border-color: var(--v3-line) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 .input,
html.kairo-v3 .control,
html.kairo-v3 select,
html.kairo-v3 textarea {
  background: var(--v3-surface) !important;
  border-color: var(--v3-line) !important;
  border-radius: var(--v3-r-sm) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 .input:focus,
html.kairo-v3 .control:focus,
html.kairo-v3 select:focus,
html.kairo-v3 textarea:focus {
  outline: 0 !important;
  border-color: var(--v3-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-primary) 17%, transparent) !important;
}

html.kairo-v3 .notice {
  border: 1px solid color-mix(in srgb, var(--v3-gold) 30%, var(--v3-line)) !important;
  border-radius: var(--v3-r-sm) !important;
  background: var(--v3-gold-soft) !important;
  color: #765919 !important;
}

/* Existing operational pages consume the same foundation without layout rewrites. */
html.kairo-v3 .chart-wrap {
  padding: 8px;
  border-radius: var(--v3-r-md);
  background: var(--v3-surface-subtle);
}

html.kairo-v3 #input > .card {
  max-width: 1080px;
  margin-inline: auto;
}

html.kairo-v3 .modal-card {
  border-color: var(--v3-line) !important;
  border-radius: var(--v3-r-lg) !important;
  box-shadow: 0 24px 60px rgba(23, 58, 89, .18) !important;
}

/* Dark mode keeps the same hierarchy and role mapping. */
html.kairo-v3 body.saas-dark {
  --v3-ink:#edf5f8;
  --v3-ink-soft:#c5d8e2;
  --v3-canvas:#0e1926;
  --v3-surface:#142436;
  --v3-surface-subtle:#182b3f;
  --v3-line:#2a4156;
  --v3-muted:#aabcc9;
  --v3-primary-soft:#153d40;
  --v3-sky:#172f42;
  --v3-sky-strong:#315a70;
  --v3-gold-soft:#3a311c;
  --v3-shadow:0 8px 24px rgba(0,0,0,.16);
  background: var(--v3-canvas) !important;
}

html.kairo-v3 body.saas-dark #saas-sidebar,
html.kairo-v3 body.saas-dark #app-shell .header {
  background: var(--v3-surface) !important;
  border-color: var(--v3-line) !important;
}

html.kairo-v3 body.saas-dark .saas-sidebar-nav .tab.active,
html.kairo-v3 body.saas-dark .saas-settings-side-btn.active {
  background: var(--v3-sky) !important;
  border-color: var(--v3-sky-strong) !important;
  color: var(--v3-ink) !important;
}

html.kairo-v3 body.saas-dark .seller-expiry-row,
html.kairo-v3 body.saas-dark .seller-history-card {
  background: var(--v3-surface-subtle) !important;
  border-color: var(--v3-line) !important;
}

/* Seller App Premium, dark mode: status colours lifted so they pass WCAG AA on the dark cards. */
html.kairo-v3 body.saas-dark .seller-expiry-badge.is-active,
html.kairo-v3 body.saas-dark .seller-history-expiry.is-active {
  color: #6fd9bd;
}

html.kairo-v3 body.saas-dark .seller-expiry-badge.is-soon,
html.kairo-v3 body.saas-dark .seller-history-expiry.is-soon {
  color: #e7c77f;
}

html.kairo-v3 body.saas-dark .seller-expiry-badge.is-urgent,
html.kairo-v3 body.saas-dark .seller-history-expiry.is-urgent {
  color: #f4a77c;
}

html.kairo-v3 body.saas-dark .seller-expiry-badge.is-expired,
html.kairo-v3 body.saas-dark .seller-history-expiry.is-expired {
  color: #f59aa2;
}

html.kairo-v3 body.saas-dark .seller-settings-db-status {
  background: color-mix(in srgb, var(--v3-primary) 16%, transparent);
  color: #7fe0d9;
}

/* Seller primary buttons use the same dark ink on teal as .btn-green (white on teal is ~2.4:1). */
html.kairo-v3 body.seller-app-premium .seller-choice.active,
html.kairo-v3 body.seller-app-premium .seller-selection button,
html.kairo-v3 body.seller-app-premium .seller-save-btn,
html.kairo-v3 body.seller-app-premium .seller-add-product-btn,
html.kairo-v3 body.seller-app-premium .seller-add-product-save,
html.kairo-v3 body.seller-app-premium .seller-setting-save,
html.kairo-v3 body.seller-app-premium .seller-settings-category-tabs button.active {
  color: var(--v3-on-primary);
}

/* Customer history dialog: kairo.css darkens the stat boxes but left the contact boxes white;
   give them the same dark box as the stats beneath them. */
html.kairo-v3 body.saas-dark .customer-contact-item {
  background: #292e35 !important;
  border-color: #3e4651 !important;
}

html.kairo-v3 body.saas-dark .customer-contact-item span {
  color: #cdd5df;
}

html.kairo-v3 body.saas-dark .customer-contact-item strong {
  color: #fff;
}

@media (max-width: 1120px) {
  html.kairo-v3 {
    --v3-page-gutter: 24px;
  }
}

/* Four compact stat cards in a row only fit when the large values stay on one line. */
@media (max-width: 1240px) {
  html.kairo-v3 #dashboard .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* An odd last card (seller: 5 cards) takes the full row instead of sitting alone. */
  html.kairo-v3 #dashboard .kpi-grid > .kpi:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  html.kairo-v3 {
    --v3-page-gutter: 16px;
    --v3-section-gap: 18px;
    --v3-card-gap: 12px;
    --v3-card-padding: 17px;
  }

  html.kairo-v3 #app-shell main.container {
    max-width: none;
    padding: 20px var(--v3-page-gutter) 112px !important;
  }

  html.kairo-v3 #app-shell main.container > .toolbar.kairo-page-header {
    align-items: flex-start !important;
    margin-bottom: 18px !important;
  }

  html.kairo-v3 #kairo-v3-dashboard-head {
    gap: 18px;
    padding: 19px;
  }

  html.kairo-v3 #dashboard .seller-dashboard-alert-row,
  html.kairo-v3 .platform-analytics-grid,
  html.kairo-v3 .grid-main,
  html.kairo-v3 .grid-2,
  html.kairo-v3 .withdraw-history-grid {
    grid-template-columns: 1fr !important;
  }

  html.kairo-v3 #dashboard .seller-dashboard-alert-row > .card {
    height: auto;
  }
}

@media (max-width: 520px) {
  html.kairo-v3 #kairo-v3-dashboard-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  html.kairo-v3 .kairo-live-clock {
    justify-items: start;
    justify-self: start;
  }

  /* Phone: icon beside the label, value gets the full card width so it never wraps. */
  html.kairo-v3 #dashboard .kpi {
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 12px !important;
    column-gap: 8px;
    row-gap: 6px;
  }

  html.kairo-v3 #dashboard .kpi > .kairo-stat-icon {
    grid-row: 1;
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  html.kairo-v3 #dashboard .kpi .kairo-stat-icon svg {
    width: 15px;
    height: 15px;
  }

  html.kairo-v3 #dashboard .kpi > .kpi-value {
    grid-column: 1 / -1;
    font-size: 17px !important;
  }
}

@media (max-width: 900px) {
  /* Notifications sheet (bottom nav, 4th button): opens like the More sheet. */
  html.kairo-v3 #kairo-mobile-notif-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 121;
    pointer-events: none;
    visibility: hidden;
  }

  html.kairo-v3 #kairo-mobile-notif-sheet.open {
    pointer-events: auto;
    visibility: visible;
  }

  html.kairo-v3 #kairo-mobile-notif-sheet.open .kairo-mobile-more-backdrop {
    opacity: 1;
  }

  html.kairo-v3 #kairo-mobile-notif-sheet.open .kairo-mobile-more-panel {
    transform: none;
    opacity: 1;
  }

  html.kairo-v3 .kairo-mobile-notif-panel .kairo-notif-list {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    margin-bottom: 8px;
  }

  html.kairo-v3 .kairo-mobile-notif-panel .kairo-notif-open {
    min-height: 42px;
  }

  /* The centre Orders button keeps its gradient when Orders is the open page
     (kairo.css paints every active nav button with a pale fill). */
  html.kairo-v3 #saas-mobile-bottom .kairo-mobile-orders-main.active {
    background: linear-gradient(155deg, color-mix(in srgb, var(--brand-accent) 92%, #fff), var(--brand-primary)) !important;
    color: #fff !important;
  }

  html.kairo-v3 .kairo-mobile-notif-icon {
    position: relative;
  }

  html.kairo-v3 .kairo-mobile-notif-icon .kairo-notif-dot {
    top: -2px;
    right: -3px;
    border-color: var(--v3-surface);
  }

  /* Toolbar: period filter, custom dates, Refresh and Export share one height and type size. */
  html.kairo-v3 #app-shell main.container > .toolbar .filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
  }

  html.kairo-v3 #app-shell main.container > .toolbar #period-group {
    display: grid !important;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
  }

  html.kairo-v3 #app-shell main.container > .toolbar #custom-range.show {
    display: grid !important;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  html.kairo-v3 #app-shell main.container > .toolbar :is(.period-btn, .btn, #custom-range .control) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    white-space: normal;
    text-align: center;
  }

  html.kairo-v3 #app-shell main.container > .toolbar .btn {
    font-size: 13px !important;
  }

  /* Pages where Refresh is alone get a full-width button. */
  html.kairo-v3 #app-shell main.container:has(> section.section.active:is(#input, #customers, #cash, #settings, #subscriptions, #pos-products, #po-plans, #po-finance)) > .toolbar .kairo-refresh-btn,
  html.kairo-v3 body.kairo-mobile-history #app-shell main.container > .toolbar .kairo-refresh-btn {
    grid-column: 1 / -1;
  }

  /* History (bottom nav): the Dashboard page showing only the transaction history,
     which in turn is left out of the mobile Dashboard. */
  html.kairo-v3 body:not(.kairo-mobile-history) #dashboard > :is(#transaction-history-card, #seller-dashboard-history-card) {
    display: none !important;
  }

  html.kairo-v3 body.kairo-mobile-history #dashboard > :not(#transaction-history-card, #seller-dashboard-history-card) {
    display: none !important;
  }

  html.kairo-v3 body.kairo-mobile-history #app-shell main.container > .toolbar :is(#period-group, #custom-range, .btn[onclick^="exportExcel"]) {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.kairo-v3 *,
  html.kairo-v3 *::before,
  html.kairo-v3 *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* KAIRO UI v3.5 — single-source public landing adapted from selected component structures.
   All public styles are scoped to #kairo-entry so authenticated screens remain untouched. */
html.kairo-v3 {
  --kairo-delft: #173a59;
  --kairo-delft-soft: #31556f;
  --kairo-turquoise: #25b9b0;
  --kairo-turquoise-dark: #168f8a;
  --kairo-sky-050: #f3fafb;
  --kairo-sky-100: #dceff4;
  --kairo-sky-200: #b8dfe9;
  --kairo-gold: #dfa94a;
  --kairo-gold-050: #fff5d7;
  --kairo-warm-050: #fff9e9;
  --kairo-off-white: #fbfcf8;
  --kairo-white: #ffffff;
  --kairo-entry-line: #d9e9ed;
  --kairo-entry-muted: #4b6174;
  --kairo-entry-shadow: 0 24px 64px rgba(23, 58, 89, .12);
  --kairo-entry-shadow-soft: 0 14px 36px rgba(23, 58, 89, .08);
  --kairo-entry-container: 1180px;
  scroll-behavior: smooth;
}

html.kairo-v3 body.auth-locked {
  background: var(--kairo-off-white) !important;
}

html.kairo-v3 body.authenticated #kairo-entry {
  display: none;
}

html.kairo-v3 body.auth-locked #kairo-entry {
  display: block;
}

/* Restore landing content hidden by kairo.css auth-locked header/main rule. */
html.kairo-v3 body.auth-locked #kairo-entry main.kairo-landing-main {
  display: block !important;
}

html.kairo-v3 body.auth-locked #kairo-entry .kairo-lp-section-head {
  display: block !important;
}

html.kairo-v3 body.auth-locked #kairo-entry .kairo-lp-dash-main > header {
  display: flex !important;
}

/* Landing pages: Home, Features, Solutions, Pricing, About (hash-based, see kairo-v3.js). */
html.kairo-v3 #kairo-entry[data-page] .kairo-landing-main > section {
  display: none;
}

html.kairo-v3 #kairo-entry[data-page="home"] .kairo-landing-main > :is(#home, #home-highlights, #home-plans, .kairo-lp-cta, #faq),
html.kairo-v3 #kairo-entry[data-page="features"] .kairo-landing-main > :is(#features, .kairo-lp-cta),
html.kairo-v3 #kairo-entry[data-page="solutions"] .kairo-landing-main > :is(#solutions, .kairo-lp-cta),
html.kairo-v3 #kairo-entry[data-page="pricing"] .kairo-landing-main > :is(#pricing, .kairo-lp-cta),
html.kairo-v3 #kairo-entry[data-page="about"] .kairo-landing-main > :is(#about, .kairo-lp-cta),
html.kairo-v3 #kairo-entry[data-page="syarat"] .kairo-landing-main > #syarat,
html.kairo-v3 #kairo-entry[data-page="privasi"] .kairo-landing-main > #privasi {
  display: block;
}

/* Halaman Syarat & Ketentuan / Kebijakan Privasi (link di footer). */
html.kairo-v3 .kairo-lp-legal { padding: clamp(56px, 7vw, 88px) 0 8px; background: var(--kairo-white); }
html.kairo-v3 .kairo-lp-legal-inner { max-width: 760px; }
html.kairo-v3 .kairo-lp-legal h2 { margin: 0; color: var(--kairo-delft); font-size: clamp(28px, 4vw, 38px); letter-spacing: -.02em; }
html.kairo-v3 .kairo-lp-legal-date { margin: 8px 0 22px; color: var(--kairo-entry-muted); font-size: 13px; font-weight: 700; }
html.kairo-v3 .kairo-lp-legal h3 { margin: 26px 0 8px; color: var(--kairo-delft); font-size: 16px; }
html.kairo-v3 .kairo-lp-legal p,
html.kairo-v3 .kairo-lp-legal li { color: #3f5568; font-size: 14px; line-height: 1.7; }
html.kairo-v3 .kairo-lp-legal p { margin: 0 0 10px; }
html.kairo-v3 .kairo-lp-legal ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
html.kairo-v3 .kairo-lp-legal a { color: var(--kairo-delft); font-weight: 700; }

/* Logged out, #app-shell only holds hidden header/main; kairo.css forces it visible
   with a 100vh min-height, which left an empty screen below the landing footer. */
html.kairo-v3 body.auth-locked #app-shell {
  display: none !important;
}

html.kairo-v3 .kairo-lp-footer-wrap {
  padding-bottom: 34px;
}

/* Sebelum kairo-v3.js jalan (data-page belum ada), pengguna "Ingat saya" tidak boleh melihat landing sekejap. */
html.kairo-v3[data-kairo-masuk] #kairo-entry:not([data-page]) :is(.kairo-landing-main, .kairo-lp-footer-wrap) {
  display: none !important;
}

/* #masuk: direct login link for existing customers, no landing content behind the dialog. */
html.kairo-v3 #kairo-entry[data-page="masuk"] .kairo-lp-footer-wrap {
  display: none;
}

html.kairo-v3 .kairo-login-home {
  display: none;
  margin: 12px 0 0;
  font-size: 11px;
  text-align: center;
}

html.kairo-v3 #kairo-entry[data-page="masuk"] .kairo-login-home {
  display: block;
}

html.kairo-v3 .kairo-login-home a {
  color: var(--kairo-entry-muted);
  font-weight: 700;
}

html.kairo-v3 .kairo-login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin: 2px 0 14px;
  color: var(--kairo-delft);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

html.kairo-v3 .kairo-login-remember input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--kairo-turquoise-dark);
}

html.kairo-v3 .kairo-lp-footer-wrap > .kairo-lp-footer {
  margin-top: 38px;
}

html.kairo-v3 .kairo-nav-links a[aria-current="page"] {
  color: var(--kairo-delft);
}

html.kairo-v3 .kairo-nav-links a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

html.kairo-v3 body.kairo-dialog-open {
  overflow: hidden;
}

html.kairo-v3 .kairo-entry,
html.kairo-v3 .kairo-entry *,
html.kairo-v3 .kairo-entry *::before,
html.kairo-v3 .kairo-entry *::after {
  box-sizing: border-box;
}

html.kairo-v3 .kairo-entry {
  min-height: 100vh;
  overflow: clip;
  background: var(--kairo-off-white);
  color: var(--kairo-delft);
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
}

html.kairo-v3 .kairo-entry button,
html.kairo-v3 .kairo-entry a,
html.kairo-v3 .kairo-entry input {
  font-family: inherit;
}

html.kairo-v3 .kairo-entry img,
html.kairo-v3 .kairo-entry svg {
  display: block;
}

html.kairo-v3 .kairo-entry svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

html.kairo-v3 .kairo-entry-container {
  width: min(calc(100% - 48px), var(--kairo-entry-container));
  margin-inline: auto;
}

html.kairo-v3 .kairo-entry [id] {
  scroll-margin-top: 92px;
}

html.kairo-v3 .kairo-entry-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(217, 233, 237, .82);
  background: rgba(251, 252, 248, .92);
  backdrop-filter: blur(16px);
}

html.kairo-v3 .kairo-nav-inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

html.kairo-v3 .kairo-entry-brand,
html.kairo-v3 .kairo-login-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--kairo-delft);
  text-decoration: none;
}

/* Logo resmi (simbol + wordmark digambar, jangan diketik ulang); min. lebar 120px sesuai panduan logo. */
html.kairo-v3 .kairo-brand-lockup {
  display: block;
  width: auto;
  height: 46px;
}

html.kairo-v3 .kairo-nav-menu,
html.kairo-v3 .kairo-nav-links,
html.kairo-v3 .kairo-nav-actions {
  display: flex;
  align-items: center;
}

html.kairo-v3 .kairo-nav-menu {
  flex: 1;
  justify-content: flex-end;
  gap: clamp(26px, 4vw, 58px);
}

html.kairo-v3 .kairo-nav-links {
  gap: 28px;
}

html.kairo-v3 .kairo-nav-links a {
  position: relative;
  padding: 10px 0;
  color: var(--kairo-delft-soft);
  font-size: 14.5px;
  font-weight: 750;
  text-decoration: none;
}

html.kairo-v3 .kairo-nav-links a::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--kairo-turquoise);
  content: "";
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .18s ease, transform .18s ease;
}

html.kairo-v3 .kairo-nav-links a:hover::after,
html.kairo-v3 .kairo-nav-links a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

html.kairo-v3 .kairo-nav-actions {
  gap: 10px;
}

html.kairo-v3 .kairo-nav-actions .kairo-button {
  font-size: 13.5px;
}

html.kairo-v3 .kairo-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html.kairo-v3 .kairo-button:hover {
  transform: translateY(-1px);
}

html.kairo-v3 .kairo-button-primary {
  background: var(--kairo-turquoise);
  color: #082f3b;
  box-shadow: 0 10px 22px rgba(37, 185, 176, .18);
}

html.kairo-v3 .kairo-button-primary:hover {
  background: #31c7bd;
}

html.kairo-v3 .kairo-button-secondary {
  border-color: var(--kairo-entry-line);
  background: var(--kairo-white);
  color: var(--kairo-delft);
}

html.kairo-v3 .kairo-button-text {
  background: transparent;
  color: var(--kairo-delft);
}

html.kairo-v3 .kairo-button-large {
  min-height: 50px;
  padding: 14px 20px;
  border-radius: 15px;
  font-size: 13px;
}

html.kairo-v3 .kairo-lp-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 104px) 0 clamp(72px, 9vw, 112px);
  background:
    radial-gradient(circle at 6% 16%, rgba(255, 245, 215, .96) 0 14%, transparent 34%),
    radial-gradient(circle at 95% 42%, rgba(220, 239, 244, .9) 0 16%, transparent 37%),
    var(--kairo-off-white);
}

html.kairo-v3 .kairo-lp-hero::before {
  position: absolute;
  top: 17%;
  right: 9%;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(37, 185, 176, .16);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

html.kairo-v3 .kairo-lp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(540px, 1.18fr);
  align-items: center;
  gap: clamp(42px, 6vw, 84px);
}

html.kairo-v3 .kairo-lp-hero-copy {
  min-width: 0;
}

html.kairo-v3 .kairo-lp-hero h1 {
  max-width: 660px;
  margin: 22px 0 19px;
  color: var(--kairo-delft);
  font-size: clamp(44px, 5.4vw, 70px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.058em;
}

html.kairo-v3 .kairo-entry mark {
  padding: 0;
  background: transparent;
  color: var(--kairo-turquoise-dark);
}

html.kairo-v3 .kairo-lp-hero-copy > p {
  max-width: 610px;
  margin: 0;
  color: var(--kairo-entry-muted);
  font-size: 16px;
  line-height: 1.75;
}

html.kairo-v3 .kairo-lp-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
}

html.kairo-v3 .kairo-lp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 24px;
  color: var(--kairo-entry-muted);
  font-size: 12.5px;
  font-weight: 700;
}

html.kairo-v3 .kairo-lp-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html.kairo-v3 .kairo-lp-trust i {
  display: grid;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--kairo-sky-100);
  color: var(--kairo-turquoise-dark);
  font-size: 10px;
  font-style: normal;
  place-items: center;
}

html.kairo-v3 .kairo-lp-hero-visual {
  position: relative;
  min-width: 0;
  padding: 24px 0 34px;
}

html.kairo-v3 .kairo-lp-preview {
  overflow: hidden;
  border: 1px solid var(--kairo-sky-200);
  border-radius: 18px;
  background: var(--kairo-white);
  box-shadow: var(--kairo-entry-shadow);
}

html.kairo-v3 .kairo-lp-preview-main {
  position: relative;
  z-index: 2;
  transform: rotate(.35deg);
}

html.kairo-v3 .kairo-lp-windowbar {
  display: grid;
  min-height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--kairo-entry-line);
  background: var(--kairo-sky-050);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

html.kairo-v3 .kairo-lp-dots {
  display: flex;
  gap: 5px;
}

html.kairo-v3 .kairo-lp-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kairo-sky-200);
}

html.kairo-v3 .kairo-lp-dots i:nth-child(2) {
  background: var(--kairo-gold);
}

html.kairo-v3 .kairo-lp-dots i:nth-child(3) {
  background: var(--kairo-turquoise);
}

html.kairo-v3 .kairo-lp-address {
  min-width: 190px;
  padding: 5px 16px;
  border: 1px solid var(--kairo-entry-line);
  border-radius: 999px;
  background: var(--kairo-white);
  color: var(--kairo-entry-muted);
  font-size: 7px;
  font-weight: 700;
  text-align: center;
}

html.kairo-v3 .kairo-lp-status {
  justify-self: end;
  color: var(--kairo-entry-muted);
  font-size: 7px;
  font-weight: 800;
}

html.kairo-v3 .kairo-lp-status i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--kairo-turquoise);
}

html.kairo-v3 .kairo-lp-dashboard {
  display: grid;
  min-height: 410px;
  grid-template-columns: 118px minmax(0, 1fr);
}

html.kairo-v3 .kairo-lp-dashboard aside {
  padding: 17px 10px;
  border-right: 1px solid var(--kairo-entry-line);
  background: #f8fbfc;
}

html.kairo-v3 .kairo-lp-dash-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 6px 20px;
  font-size: 8px;
}

html.kairo-v3 .kairo-lp-dashboard aside > span {
  display: flex;
  min-height: 31px;
  align-items: center;
  gap: 7px;
  margin: 3px 0;
  padding: 0 8px;
  border-radius: 9px;
  color: var(--kairo-entry-muted);
  font-size: 7px;
  font-weight: 750;
}

html.kairo-v3 .kairo-lp-dashboard aside > span i {
  width: 10px;
  height: 10px;
  border: 1.3px solid currentColor;
  border-radius: 3px;
}

html.kairo-v3 .kairo-lp-dashboard aside > span.is-active {
  background: var(--kairo-sky-100);
  color: var(--kairo-delft);
}

html.kairo-v3 .kairo-lp-dashboard aside > span.is-active i {
  border-color: var(--kairo-turquoise-dark);
  background: var(--kairo-turquoise);
}

html.kairo-v3 .kairo-lp-dash-main {
  min-width: 0;
  padding: 20px;
}

html.kairo-v3 .kairo-lp-dash-main > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

html.kairo-v3 .kairo-lp-dash-main header small {
  color: var(--kairo-entry-muted);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .09em;
}

html.kairo-v3 .kairo-lp-dash-main header h2 {
  margin: 5px 0 3px;
  color: var(--kairo-delft);
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -.035em;
}

html.kairo-v3 .kairo-lp-dash-main header p {
  margin: 0;
  color: var(--kairo-entry-muted);
  font-size: 7px;
}

html.kairo-v3 .kairo-lp-dash-main header > b {
  display: grid;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  background: var(--kairo-delft);
  color: var(--kairo-white);
  font-size: 8px;
  place-items: center;
}

html.kairo-v3 .kairo-lp-stat-grid {
  display: grid;
  margin: 18px 0 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

html.kairo-v3 .kairo-lp-stat-grid article {
  display: flex;
  min-width: 0;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--kairo-entry-line);
  border-top: 3px solid var(--kairo-turquoise);
  border-radius: 11px;
  background: var(--kairo-white);
  flex-direction: column;
}

html.kairo-v3 .kairo-lp-stat-grid article.is-gold {
  border-top-color: var(--kairo-gold);
  background: var(--kairo-warm-050);
}

html.kairo-v3 .kairo-lp-stat-grid article.is-sky {
  border-top-color: var(--kairo-sky-200);
  background: var(--kairo-sky-050);
}

html.kairo-v3 .kairo-lp-stat-grid span,
html.kairo-v3 .kairo-lp-stat-grid small {
  overflow: hidden;
  color: var(--kairo-entry-muted);
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.kairo-v3 .kairo-lp-stat-grid strong {
  margin: auto 0 3px;
  overflow: hidden;
  color: var(--kairo-delft);
  font-size: 11px;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.kairo-v3 .kairo-lp-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(165px, .8fr);
  gap: 8px;
}

html.kairo-v3 .kairo-lp-chart,
html.kairo-v3 .kairo-lp-orders {
  min-width: 0;
  min-height: 182px;
  padding: 12px;
  border: 1px solid var(--kairo-entry-line);
  border-radius: 12px;
  background: var(--kairo-white);
}

html.kairo-v3 .kairo-lp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

html.kairo-v3 .kairo-lp-card-head > span {
  display: grid;
  gap: 2px;
}

html.kairo-v3 .kairo-lp-card-head strong {
  color: var(--kairo-delft);
  font-size: 8px;
}

html.kairo-v3 .kairo-lp-card-head small {
  color: var(--kairo-entry-muted);
  font-size: 6px;
}

html.kairo-v3 .kairo-lp-card-head > b {
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--kairo-sky-050);
  color: #0f7a75;
  font-size: 6px;
}

html.kairo-v3 .kairo-lp-chart > svg {
  width: 100%;
  height: 122px;
  margin-top: 9px;
}

html.kairo-v3 .kairo-lp-chart .area {
  fill: var(--kairo-sky-050);
  stroke: none;
}

html.kairo-v3 .kairo-lp-chart .line {
  fill: none;
  stroke: var(--kairo-turquoise);
  stroke-width: 4;
}

html.kairo-v3 .kairo-lp-orders > div:not(.kairo-lp-card-head) {
  display: grid;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--kairo-entry-line);
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

html.kairo-v3 .kairo-lp-orders > div:last-child {
  border-bottom: 0;
}

html.kairo-v3 .kairo-lp-orders > div > i {
  display: grid;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--kairo-sky-100);
  color: var(--kairo-delft);
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
  place-items: center;
}

html.kairo-v3 .kairo-lp-orders > div > span {
  display: grid;
  min-width: 0;
}

html.kairo-v3 .kairo-lp-orders > div strong,
html.kairo-v3 .kairo-lp-orders > div small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.kairo-v3 .kairo-lp-orders > div strong {
  color: var(--kairo-delft);
  font-size: 6px;
}

html.kairo-v3 .kairo-lp-orders > div small {
  color: var(--kairo-entry-muted);
  font-size: 5px;
}

html.kairo-v3 .kairo-lp-orders em {
  padding: 4px 5px;
  border-radius: 999px;
  background: var(--kairo-sky-050);
  color: #0f7a75;
  font-size: 5px;
  font-style: normal;
  font-weight: 800;
}

html.kairo-v3 .kairo-lp-mini {
  position: absolute;
  z-index: 3;
  display: flex;
  border: 1px solid rgba(184, 223, 233, .92);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--kairo-entry-shadow-soft);
}

html.kairo-v3 .kairo-lp-mini-order {
  top: 0;
  right: -24px;
  width: 138px;
  padding: 14px;
  flex-direction: column;
}

html.kairo-v3 .kairo-lp-mini-order span,
html.kairo-v3 .kairo-lp-mini-order small {
  color: var(--kairo-entry-muted);
  font-size: 7px;
}

html.kairo-v3 .kairo-lp-mini-order strong {
  margin: 4px 0 1px;
  color: var(--kairo-delft);
  font-size: 22px;
  letter-spacing: -.04em;
}

html.kairo-v3 .kairo-lp-mini-receipt {
  right: 28px;
  bottom: 0;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
}

html.kairo-v3 .kairo-lp-mini-receipt svg {
  width: 26px;
  height: 26px;
  color: var(--kairo-gold);
}

html.kairo-v3 .kairo-lp-mini-receipt span {
  display: grid;
  gap: 2px;
}

html.kairo-v3 .kairo-lp-mini-receipt strong {
  color: var(--kairo-delft);
  font-size: 8px;
}

html.kairo-v3 .kairo-lp-mini-receipt small {
  color: var(--kairo-entry-muted);
  font-size: 6px;
}

html.kairo-v3 .kairo-lp-features,
html.kairo-v3 .kairo-lp-about,
html.kairo-v3 .kairo-lp-compare,
html.kairo-v3 .kairo-lp-pricing,
html.kairo-v3 .kairo-lp-cta,
html.kairo-v3 .kairo-lp-faq {
  padding: clamp(72px, 8vw, 104px) 0;
}

html.kairo-v3 .kairo-lp-features,
html.kairo-v3 .kairo-lp-pricing {
  background: var(--kairo-white);
}

html.kairo-v3 .kairo-lp-about,
html.kairo-v3 .kairo-lp-faq {
  background: var(--kairo-sky-050);
}

html.kairo-v3 .kairo-lp-compare,
html.kairo-v3 .kairo-lp-cta {
  background: var(--kairo-off-white);
}

html.kairo-v3 .kairo-lp-section-head {
  max-width: 760px;
}

html.kairo-v3 .kairo-lp-section-head-center {
  margin-inline: auto;
  text-align: center;
}

html.kairo-v3 .kairo-lp-section-head h2,
html.kairo-v3 .kairo-lp-about-copy h2,
html.kairo-v3 .kairo-lp-cta-panel h2 {
  margin: 0;
  color: var(--kairo-delft);
  font-size: clamp(30px, 4.1vw, 48px);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.048em;
}

html.kairo-v3 .kairo-lp-section-head > p,
html.kairo-v3 .kairo-lp-about-copy > p,
html.kairo-v3 .kairo-lp-cta-panel p {
  max-width: 650px;
  margin: 15px 0 0;
  color: var(--kairo-entry-muted);
  font-size: 15px;
  line-height: 1.72;
}

html.kairo-v3 .kairo-lp-section-head-center > p {
  margin-inline: auto;
}

html.kairo-v3 .kairo-lp-feature-list {
  display: grid;
  margin-top: 46px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html.kairo-v3 .kairo-lp-feature-list article {
  display: grid;
  min-width: 0;
  padding: 4px 24px;
  border-left: 1px solid var(--kairo-entry-line);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 13px;
}

html.kairo-v3 .kairo-lp-feature-list article:first-child {
  padding-left: 0;
  border-left: 0;
}

html.kairo-v3 .kairo-lp-feature-list article:last-child {
  padding-right: 0;
}

html.kairo-v3 .kairo-lp-icon {
  display: grid;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
  place-items: center;
}

html.kairo-v3 .kairo-lp-icon.is-sky {
  background: var(--kairo-sky-100);
}

html.kairo-v3 .kairo-lp-icon.is-gold {
  background: #f4d48d;
}

html.kairo-v3 .kairo-lp-icon.is-warm {
  background: var(--kairo-gold-050);
}

html.kairo-v3 .kairo-lp-icon svg {
  width: 19px;
  height: 19px;
}

html.kairo-v3 .kairo-lp-feature-list h3 {
  margin: 1px 0 5px;
  color: var(--kairo-delft);
  font-size: 13px;
  line-height: 1.35;
}

html.kairo-v3 .kairo-lp-feature-list p {
  margin: 0;
  color: var(--kairo-entry-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

html.kairo-v3 .kairo-lp-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(50px, 7vw, 94px);
}

html.kairo-v3 .kairo-lp-about-visual {
  position: relative;
  min-width: 0;
  padding: 34px 48px 34px 28px;
}

html.kairo-v3 .kairo-lp-about-visual::before {
  position: absolute;
  inset: 0 8% 0 0;
  border-radius: 72px 138px 44px 108px;
  background: var(--kairo-delft);
  box-shadow: 0 24px 60px rgba(23, 58, 89, .14);
  content: "";
}

html.kairo-v3 .kairo-lp-about-visual::after {
  position: absolute;
  top: -24px;
  left: -20px;
  width: 122px;
  height: 122px;
  border: 1px solid rgba(37, 185, 176, .28);
  border-radius: 50%;
  content: "";
}

html.kairo-v3 .kairo-lp-flow {
  position: relative;
  z-index: 1;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--kairo-entry-shadow);
}

html.kairo-v3 .kairo-lp-flow-label {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--kairo-sky-100);
  color: var(--kairo-delft);
  font-size: 9px;
  font-weight: 800;
}

html.kairo-v3 .kairo-lp-flow > div {
  display: grid;
  padding: 13px 0;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

html.kairo-v3 .kairo-lp-flow > div i {
  display: grid;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  place-items: center;
}

html.kairo-v3 .kairo-lp-flow > div:nth-of-type(2) i {
  background: var(--kairo-sky-100);
}

html.kairo-v3 .kairo-lp-flow > div:nth-of-type(3) i {
  background: #f4d48d;
}

html.kairo-v3 .kairo-lp-flow > div:nth-of-type(4) i {
  background: var(--kairo-gold-050);
}

html.kairo-v3 .kairo-lp-flow > div span {
  display: grid;
  gap: 3px;
}

html.kairo-v3 .kairo-lp-flow strong {
  color: var(--kairo-delft);
  font-size: 12px;
}

html.kairo-v3 .kairo-lp-flow small {
  color: var(--kairo-entry-muted);
  font-size: 10px;
}

html.kairo-v3 .kairo-lp-flow > b {
  display: block;
  height: 8px;
  margin-left: 17px;
  color: var(--kairo-sky-200);
  font-size: 12px;
  line-height: 8px;
}

html.kairo-v3 .kairo-lp-about-copy {
  min-width: 0;
}

html.kairo-v3 .kairo-lp-about-copy ul {
  display: grid;
  gap: 17px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

html.kairo-v3 .kairo-lp-about-copy li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 11px;
}

html.kairo-v3 .kairo-lp-about-copy li > span {
  display: grid;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
  font-size: 11px;
  font-weight: 900;
  place-items: center;
}

html.kairo-v3 .kairo-lp-about-copy li div {
  display: grid;
  gap: 3px;
}

html.kairo-v3 .kairo-lp-about-copy li strong {
  color: var(--kairo-delft);
  font-size: 13px;
}

html.kairo-v3 .kairo-lp-about-copy li small {
  color: var(--kairo-entry-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

html.kairo-v3 .kairo-lp-compare-grid {
  display: grid;
  margin-top: 46px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

html.kairo-v3 .kairo-lp-compare-card {
  position: relative;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--kairo-entry-line);
  border-radius: 18px;
  background: var(--kairo-white);
}

html.kairo-v3 .kairo-lp-compare-card.is-before {
  background: #f9faf9;
}

html.kairo-v3 .kairo-lp-compare-card.is-after {
  border-color: var(--kairo-sky-200);
  background: var(--kairo-sky-050);
}

html.kairo-v3 .kairo-lp-compare-badge {
  position: absolute;
  top: -13px;
  left: 26px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

html.kairo-v3 .kairo-lp-compare-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  color: var(--kairo-delft);
  font-size: 14px;
  text-transform: uppercase;
}

html.kairo-v3 .kairo-lp-compare-card.is-after h3 {
  margin-top: 8px;
}

html.kairo-v3 .kairo-lp-compare-card h3 span,
html.kairo-v3 .kairo-lp-compare-card li > i {
  display: grid;
  border-radius: 50%;
  font-style: normal;
  place-items: center;
}

html.kairo-v3 .kairo-lp-compare-card h3 span {
  width: 26px;
  height: 26px;
  background: #edf1f2;
  color: #7a8a94;
}

html.kairo-v3 .kairo-lp-compare-card.is-after h3 span {
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
}

html.kairo-v3 .kairo-lp-compare-card ul {
  display: grid;
  gap: 19px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.kairo-v3 .kairo-lp-compare-card li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 11px;
}

html.kairo-v3 .kairo-lp-compare-card li > i {
  width: 24px;
  height: 24px;
  background: #edf1f2;
  color: #7a8a94;
  font-size: 11px;
  font-weight: 900;
}

html.kairo-v3 .kairo-lp-compare-card.is-after li > i {
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
}

html.kairo-v3 .kairo-lp-compare-card li > span {
  display: grid;
  gap: 3px;
}

html.kairo-v3 .kairo-lp-compare-card li strong {
  color: var(--kairo-delft);
  font-size: 12px;
}

html.kairo-v3 .kairo-lp-compare-card li small {
  color: var(--kairo-entry-muted);
  font-size: 12px;
  line-height: 1.55;
}

html.kairo-v3 .kairo-lp-price-grid {
  display: grid;
  margin-top: 46px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

html.kairo-v3 .kairo-lp-price-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 330px;
  padding: 28px;
  border: 1px solid var(--kairo-entry-line);
  border-radius: 18px;
  background: var(--kairo-white);
  flex-direction: column;
}

html.kairo-v3 .kairo-lp-price-card.is-featured {
  border-color: var(--kairo-delft);
  background: var(--kairo-delft);
  color: var(--kairo-white);
  box-shadow: 0 22px 50px rgba(23, 58, 89, .15);
}

html.kairo-v3 .kairo-lp-price-badge {
  position: absolute;
  top: -13px;
  left: 26px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--kairo-gold);
  color: #503b12;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

html.kairo-v3 .kairo-lp-price-card h3 {
  margin: 0;
  color: var(--kairo-delft);
  font-size: 17px;
}

html.kairo-v3 .kairo-lp-price-card.is-featured h3 {
  color: var(--kairo-white);
}

html.kairo-v3 .kairo-lp-price-card > strong {
  margin-top: 28px;
  color: var(--kairo-delft);
  font-size: clamp(22px, 2.6vw, 31px);
  line-height: 1.14;
  letter-spacing: -.04em;
}

html.kairo-v3 .kairo-lp-price-card.is-featured > strong {
  color: var(--kairo-white);
}

html.kairo-v3 .kairo-lp-price-card > p {
  margin: 13px 0 0;
  color: var(--kairo-entry-muted);
  font-size: 13.5px;
  line-height: 1.65;
}

html.kairo-v3 .kairo-lp-price-card.is-featured > p,
html.kairo-v3 .kairo-lp-price-card.is-featured > small {
  color: #c6d5de;
}

html.kairo-v3 .kairo-lp-price-action {
  display: inline-flex;
  min-height: 46px;
  margin-top: auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 15px;
  border: 1px solid var(--kairo-turquoise);
  border-radius: 12px;
  background: var(--kairo-turquoise);
  color: var(--kairo-delft);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

html.kairo-v3 .kairo-lp-price-action.is-secondary {
  border-color: var(--kairo-delft);
  background: var(--kairo-white);
  color: var(--kairo-delft);
}

/* Feature list inside each pricing card. */
html.kairo-v3 .kairo-lp-price-list {
  display: grid;
  gap: 9px;
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
}

html.kairo-v3 .kairo-lp-price-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--kairo-delft);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

html.kairo-v3 .kairo-lp-price-list svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  fill: none;
  stroke: var(--kairo-turquoise);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.kairo-v3 .kairo-lp-price-card.is-featured .kairo-lp-price-list li {
  color: #eef5f8;
}

html.kairo-v3 .kairo-lp-price-card > small {
  margin-top: 12px;
  color: var(--kairo-entry-muted);
  font-size: 11px;
  line-height: 1.5;
}

html.kairo-v3 .kairo-lp-cta {
  padding-top: 0;
}

html.kairo-v3 .kairo-lp-cta-panel {
  position: relative;
  display: grid;
  overflow: hidden;
  padding: clamp(36px, 5vw, 60px);
  border-radius: 22px;
  background: var(--kairo-delft);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
}

html.kairo-v3 .kairo-lp-cta-panel::after {
  position: absolute;
  right: -80px;
  bottom: -150px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(37, 185, 176, .28);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(37, 185, 176, .06), 0 0 0 70px rgba(37, 185, 176, .035);
  content: "";
  pointer-events: none;
}

html.kairo-v3 .kairo-lp-cta-panel > * {
  position: relative;
  z-index: 1;
}

html.kairo-v3 .kairo-lp-cta-panel h2 {
  max-width: 760px;
  color: var(--kairo-white);
}

html.kairo-v3 .kairo-lp-cta-panel h2 mark {
  color: #75d9d2;
}

html.kairo-v3 .kairo-lp-cta-panel p {
  color: #c6d5de;
}

html.kairo-v3 .kairo-lp-cta-panel > .kairo-button {
  min-width: 190px;
}

html.kairo-v3 .kairo-lp-faq {
  padding-bottom: 34px;
  background-image:
    linear-gradient(rgba(23, 58, 89, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 58, 89, .025) 1px, transparent 1px);
  background-size: 72px 72px;
}

html.kairo-v3 .kairo-lp-faq-grid {
  display: grid;
  margin-top: 46px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(34px, 6vw, 78px);
  row-gap: 0;
}

html.kairo-v3 .kairo-lp-faq-grid article {
  display: grid;
  min-width: 0;
  padding: 21px 0;
  border-bottom: 1px dashed rgba(23, 58, 89, .18);
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: flex-start;
  gap: 13px;
}

html.kairo-v3 .kairo-lp-faq-grid article > span {
  display: grid;
  width: 38px;
  height: 38px;
  border: 1px solid var(--kairo-sky-200);
  border-radius: 11px;
  background: var(--kairo-white);
  color: #0f7a75;
  font-size: 11.5px;
  font-weight: 900;
  place-items: center;
}

html.kairo-v3 .kairo-lp-faq-grid h3 {
  margin: 0;
  color: var(--kairo-delft);
  font-size: 14.5px;
  line-height: 1.45;
}

html.kairo-v3 .kairo-lp-faq-grid p {
  margin: 4px 0 0;
  color: var(--kairo-entry-muted);
  font-size: 13.5px;
  line-height: 1.62;
}

html.kairo-v3 .kairo-lp-footer {
  display: grid;
  margin-top: 72px;
  padding: 28px 0 4px;
  border-top: 1px solid var(--kairo-entry-line);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

html.kairo-v3 .kairo-lp-footer p {
  margin: 0;
  color: var(--kairo-entry-muted);
  font-size: 12.5px;
  text-align: center;
}

html.kairo-v3 .kairo-lp-footer-mid { display: grid; justify-items: center; gap: 8px; }
html.kairo-v3 .kairo-lp-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
html.kairo-v3 .kairo-lp-footer-links a { color: var(--kairo-delft); font-size: 13px; font-weight: 700; text-decoration: none; }
html.kairo-v3 .kairo-lp-footer-links a:hover { text-decoration: underline; }
html.kairo-v3 .kairo-lp-footer-mid small { color: var(--kairo-entry-muted); font-size: 12px; }

html.kairo-v3 .kairo-lp-footer > a:last-child {
  justify-self: end;
  color: var(--kairo-delft);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

html.kairo-v3 body.kairo-reveal-ready .kairo-entry [data-kairo-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .52s ease, transform .52s ease;
}

html.kairo-v3 body.kairo-reveal-ready .kairo-entry [data-kairo-reveal].is-visible {
  opacity: 1;
  transform: none;
}

html.kairo-v3 .kairo-login-dialog[hidden] {
  display: none !important;
}

html.kairo-v3 .kairo-login-dialog {
  position: fixed;
  inset: 0;
  z-index: 120000;
  display: grid;
  padding: 24px;
  place-items: center;
}

html.kairo-v3 .kairo-login-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(15, 42, 63, .58);
  cursor: default;
  opacity: 0;
  transition: opacity .18s ease;
}

html.kairo-v3 .kairo-login-card {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 32px;
  border: 1px solid var(--kairo-entry-line);
  border-radius: 20px;
  background: var(--kairo-white);
  box-shadow: 0 28px 80px rgba(15, 42, 63, .24);
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity .18s ease, transform .18s ease;
}

html.kairo-v3 .kairo-login-dialog.is-open .kairo-login-backdrop,
html.kairo-v3 .kairo-login-dialog.is-open .kairo-login-card {
  opacity: 1;
}

html.kairo-v3 .kairo-login-dialog.is-open .kairo-login-card {
  transform: none;
}

html.kairo-v3 .kairo-login-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--kairo-entry-line);
  border-radius: 11px;
  background: var(--kairo-sky-050);
  color: var(--kairo-delft);
  font: 500 22px/1 Arial, sans-serif;
  cursor: pointer;
  place-items: center;
}

html.kairo-v3 .kairo-login-brand {
  margin-bottom: 12px;
}

html.kairo-v3 .kairo-login-card .auth-title {
  margin: 0;
  color: var(--kairo-delft) !important;
  font-size: 21px !important;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
}

html.kairo-v3 .kairo-login-intro {
  margin: 9px 0 24px;
  color: var(--kairo-entry-muted);
  font-size: 13px;
  line-height: 1.6;
}

html.kairo-v3 .kairo-login-card .form-group {
  margin-bottom: 16px;
}

html.kairo-v3 .kairo-login-card .label {
  display: block;
  margin-bottom: 7px;
  color: var(--kairo-delft-soft) !important;
  font-size: 11px;
  font-weight: 800;
}

html.kairo-v3 .kairo-login-card .input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--kairo-entry-line) !important;
  border-radius: 13px !important;
  background: var(--kairo-white) !important;
  color: var(--kairo-delft) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: none !important;
}

html.kairo-v3 .kairo-login-card .input:focus {
  border-color: var(--kairo-turquoise) !important;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(37, 185, 176, .14) !important;
}

html.kairo-v3 .kairo-login-card .auth-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  border: 0 !important;
  border-radius: 13px !important;
  background: var(--kairo-turquoise) !important;
  color: #092f3e !important;
  font-weight: 800;
  box-shadow: none !important;
}

html.kairo-v3 .kairo-login-card .auth-error {
  display: none;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid #efc3ca;
  border-radius: 11px;
  background: #fff2f4;
  color: #9d3044;
  font-size: 11px;
  line-height: 1.5;
}

html.kairo-v3 .kairo-login-card .kairo-password-wrap {
  position: relative;
}

html.kairo-v3 .kairo-login-card .kairo-eye {
  color: var(--kairo-entry-muted);
}

html.kairo-v3 .kairo-login-card .kairo-auth-secondary {
  display: block;
  margin: 13px auto 0;
  border: 0;
  background: none;
  color: var(--kairo-delft-soft);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

html.kairo-v3 .kairo-login-signup {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--kairo-entry-line);
  color: var(--kairo-entry-muted);
  font-size: 11px;
  text-align: center;
}

html.kairo-v3 .kairo-login-signup button {
  padding: 0;
  border: 0;
  background: none;
  color: #0f7a75;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

html.kairo-v3 .kairo-entry :focus-visible {
  outline: 3px solid rgba(37, 185, 176, .35);
  outline-offset: 3px;
}

@media (max-width: 1020px) {
  html.kairo-v3 .kairo-lp-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  html.kairo-v3 .kairo-lp-hero-copy {
    max-width: 760px;
  }

  html.kairo-v3 .kairo-lp-hero h1 {
    max-width: 760px;
  }

  html.kairo-v3 .kairo-lp-hero-visual {
    width: min(820px, 100%);
    margin-inline: auto;
  }

  html.kairo-v3 .kairo-lp-feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }

  html.kairo-v3 .kairo-lp-feature-list article:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 900px) {
  html.kairo-v3 .kairo-entry-container {
    width: min(100% - 40px, var(--kairo-entry-container));
  }

  /* Menu selalu terlihat (tanpa hamburger): baris 1 = logo + Masuk/Coba Gratis, baris 2 = tautan halaman. */
  html.kairo-v3 .kairo-nav-inner {
    min-height: 0;
    flex-wrap: wrap;
    gap: 0 12px;
    padding-top: 8px;
  }

  html.kairo-v3 .kairo-nav-menu {
    display: contents;
  }

  html.kairo-v3 .kairo-nav-actions {
    order: 2;
    gap: 8px;
  }

  html.kairo-v3 .kairo-nav-actions .kairo-button {
    min-height: 40px;
    padding: 8px 14px;
  }

  html.kairo-v3 .kairo-nav-links {
    order: 3;
    flex: 0 0 100%;
    justify-content: space-between;
    gap: 18px;
    margin-top: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html.kairo-v3 .kairo-nav-links::-webkit-scrollbar {
    display: none;
  }

  html.kairo-v3 .kairo-nav-links a {
    flex: 0 0 auto;
    font-size: 14px;
  }

  html.kairo-v3 .kairo-lp-about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  html.kairo-v3 .kairo-lp-about-visual {
    width: min(680px, 100%);
    margin-inline: auto;
  }

  html.kairo-v3 .kairo-lp-about-copy {
    width: min(680px, 100%);
    margin-inline: auto;
  }

  html.kairo-v3 .kairo-lp-price-grid {
    grid-template-columns: 1fr;
    width: min(650px, 100%);
    margin-inline: auto;
    margin-top: 46px;
  }

  html.kairo-v3 .kairo-lp-price-card {
    min-height: 290px;
  }

  html.kairo-v3 .kairo-lp-cta-panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  html.kairo-v3 .kairo-lp-cta-panel > .kairo-button {
    width: max-content;
  }
}

@media (max-width: 700px) {
  html.kairo-v3 .kairo-entry-container {
    width: min(100% - 32px, var(--kairo-entry-container));
  }

  html.kairo-v3 .kairo-brand-lockup {
    height: 40px;
  }

  html.kairo-v3 .kairo-lp-hero {
    padding: 50px 0 62px;
  }

  html.kairo-v3 .kairo-lp-hero h1 {
    margin: 20px 0 16px;
    font-size: clamp(38px, 12vw, 54px);
  }

  html.kairo-v3 .kairo-lp-hero-copy > p {
    font-size: 15px;
    line-height: 1.65;
  }

  html.kairo-v3 .kairo-lp-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    margin-top: 24px;
  }

  html.kairo-v3 .kairo-lp-trust {
    display: grid;
    gap: 9px;
  }

  html.kairo-v3 .kairo-lp-hero-visual {
    padding-block: 12px 24px;
  }

  html.kairo-v3 .kairo-lp-mini {
    display: none;
  }

  html.kairo-v3 .kairo-lp-windowbar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  html.kairo-v3 .kairo-lp-status {
    display: none;
  }

  html.kairo-v3 .kairo-lp-address {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.kairo-v3 .kairo-lp-dashboard {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  html.kairo-v3 .kairo-lp-dashboard aside {
    display: none;
  }

  html.kairo-v3 .kairo-lp-dash-main {
    padding: 15px;
  }

  html.kairo-v3 .kairo-lp-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.kairo-v3 .kairo-lp-dash-grid {
    grid-template-columns: 1fr;
  }

  html.kairo-v3 .kairo-lp-orders {
    display: none;
  }

  html.kairo-v3 .kairo-lp-chart {
    min-height: 168px;
  }

  html.kairo-v3 .kairo-lp-chart > svg {
    height: 105px;
  }

  html.kairo-v3 .kairo-lp-features,
  html.kairo-v3 .kairo-lp-about,
  html.kairo-v3 .kairo-lp-compare,
  html.kairo-v3 .kairo-lp-pricing,
  html.kairo-v3 .kairo-lp-cta,
  html.kairo-v3 .kairo-lp-faq {
    padding: 64px 0;
  }

  html.kairo-v3 .kairo-lp-section-head h2,
  html.kairo-v3 .kairo-lp-about-copy h2,
  html.kairo-v3 .kairo-lp-cta-panel h2 {
    font-size: clamp(29px, 9vw, 40px);
  }

  html.kairo-v3 .kairo-lp-feature-list {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 34px;
  }

  html.kairo-v3 .kairo-lp-feature-list article,
  html.kairo-v3 .kairo-lp-feature-list article:first-child,
  html.kairo-v3 .kairo-lp-feature-list article:nth-child(3),
  html.kairo-v3 .kairo-lp-feature-list article:last-child {
    padding: 17px 0;
    border-top: 1px solid var(--kairo-entry-line);
    border-left: 0;
  }

  html.kairo-v3 .kairo-lp-feature-list article:first-child {
    padding-top: 0;
    border-top: 0;
  }

  html.kairo-v3 .kairo-lp-about-visual {
    padding: 22px 22px 22px 12px;
  }

  html.kairo-v3 .kairo-lp-about-visual::before {
    border-radius: 44px 82px 28px 62px;
  }

  html.kairo-v3 .kairo-lp-flow {
    padding: 19px;
  }

  html.kairo-v3 .kairo-lp-compare-grid,
  html.kairo-v3 .kairo-lp-faq-grid {
    grid-template-columns: 1fr;
  }

  html.kairo-v3 .kairo-lp-compare-grid {
    gap: 24px;
    margin-top: 40px;
  }

  html.kairo-v3 .kairo-lp-compare-card {
    padding: 22px 18px;
  }

  html.kairo-v3 .kairo-lp-price-grid {
    margin-top: 40px;
  }

  html.kairo-v3 .kairo-lp-price-card {
    min-height: 300px;
    padding: 24px;
  }

  html.kairo-v3 .kairo-lp-cta {
    padding-top: 0;
  }

  html.kairo-v3 .kairo-lp-cta-panel {
    padding: 32px 22px;
    border-radius: 18px;
  }

  html.kairo-v3 .kairo-lp-cta-panel > .kairo-button {
    width: 100%;
  }

  html.kairo-v3 .kairo-lp-faq-grid {
    margin-top: 34px;
  }

  html.kairo-v3 .kairo-lp-footer {
    margin-top: 54px;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  html.kairo-v3 .kairo-lp-footer p {
    text-align: left;
  }

  html.kairo-v3 .kairo-lp-footer-mid { justify-items: start; }
  html.kairo-v3 .kairo-lp-footer-links { justify-content: flex-start; }

  html.kairo-v3 .kairo-lp-footer > a:last-child {
    justify-self: start;
  }

  html.kairo-v3 .kairo-login-dialog {
    padding: 16px;
    align-items: end;
  }

  html.kairo-v3 .kairo-login-card {
    width: 100%;
    max-height: calc(100vh - 32px);
    padding: 26px 22px;
    border-radius: 20px;
  }

  html.kairo-v3 .kairo-login-brand {
    margin-bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.kairo-v3 {
    scroll-behavior: auto;
  }

  html.kairo-v3 body.kairo-reveal-ready .kairo-entry [data-kairo-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* Signup plan picker — cards in the landing pricing style (white / delft featured / white),
   then a collapsible comparison of only what differs. Markup: plan-compare block in kairo-app.js. */
html.kairo-v3 .kairo-pp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; padding-top: 10px; }
html.kairo-v3 .kairo-pp-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 20px 18px 16px; text-align: left; font: inherit; color: var(--kairo-delft); cursor: pointer;
  background: var(--kairo-white); border: 1px solid var(--kairo-entry-line); border-radius: 20px;
  box-shadow: var(--kairo-entry-shadow-soft); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
html.kairo-v3 .kairo-pp-card:hover { transform: translateY(-2px); box-shadow: var(--kairo-entry-shadow); }
html.kairo-v3 .kairo-pp-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--kairo-turquoise) 45%, transparent); outline-offset: 2px; }
html.kairo-v3 .kairo-pp-card.is-featured { background: var(--kairo-delft); border-color: var(--kairo-delft); color: #fff; }
html.kairo-v3 .kairo-pp-card.selected { border-color: var(--kairo-turquoise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kairo-turquoise) 28%, transparent), var(--kairo-entry-shadow); }
html.kairo-v3 .kairo-pp-badge {
  position: absolute; top: -11px; left: 18px; padding: 4px 10px; border-radius: 999px;
  background: var(--kairo-gold); color: var(--kairo-delft); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
html.kairo-v3 .kairo-pp-check {
  position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--kairo-entry-line); background: var(--kairo-white); color: transparent;
}
html.kairo-v3 .kairo-pp-card.is-featured .kairo-pp-check { border-color: rgba(255, 255, 255, .35); background: transparent; }
html.kairo-v3 .kairo-pp-card.selected .kairo-pp-check { border-color: var(--kairo-turquoise); background: var(--kairo-turquoise); color: var(--kairo-delft); }
html.kairo-v3 .kairo-pp-check svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
html.kairo-v3 .kairo-pp-name { font-size: 15px; font-weight: 800; }
html.kairo-v3 .kairo-pp-price { margin: 10px 0 6px; padding-right: 26px; font-size: 22px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
html.kairo-v3 .kairo-pp-copy { font-size: 12.5px; line-height: 1.5; color: var(--kairo-entry-muted); }
html.kairo-v3 .kairo-pp-card.is-featured .kairo-pp-copy { color: #c9dbe6; }
html.kairo-v3 .kairo-pp-points { list-style: none; margin: 14px 0 16px; padding: 0; display: grid; gap: 8px; }
html.kairo-v3 .kairo-pp-points li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
html.kairo-v3 .kairo-pp-points svg,
html.kairo-v3 .kairo-pp-included svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: var(--kairo-turquoise-dark); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
html.kairo-v3 .kairo-pp-card.is-featured .kairo-pp-points svg { stroke: var(--kairo-turquoise); }
html.kairo-v3 .kairo-pp-foot {
  margin-top: auto; width: 100%; padding-top: 12px; border-top: 1px solid var(--kairo-entry-line);
  font-size: 11px; font-weight: 700; color: var(--kairo-entry-muted);
}
html.kairo-v3 .kairo-pp-card.is-featured .kairo-pp-foot { border-color: rgba(255, 255, 255, .16); color: #c9dbe6; }

/* Pro duration picker (1 bulan / 6 bulan) - only shown while Pro is selected. */
html.kairo-v3 .kairo-pp-period { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--kairo-entry-line); border-radius: 18px; background: var(--kairo-white); }
html.kairo-v3 .kairo-pp-period[hidden] { display: none; }
html.kairo-v3 .kairo-pp-period-title { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 800; color: var(--kairo-delft); }
html.kairo-v3 .kairo-pp-period-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
html.kairo-v3 .kairo-pp-period-options button {
  display: grid; gap: 3px; justify-items: start; padding: 12px 14px; text-align: left; font: inherit; cursor: pointer;
  color: var(--kairo-delft); background: var(--kairo-white); border: 1.5px solid var(--kairo-entry-line); border-radius: 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
html.kairo-v3 .kairo-pp-period-options button strong { font-size: 14px; font-weight: 800; }
html.kairo-v3 .kairo-pp-period-options button span { font-size: 12.5px; font-weight: 700; color: var(--kairo-entry-muted); }
html.kairo-v3 .kairo-pp-period-options button s { font-weight: 600; }
html.kairo-v3 .kairo-pp-period-options button[aria-checked="true"] { border-color: var(--kairo-turquoise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kairo-turquoise) 24%, transparent); }
html.kairo-v3 .kairo-pp-period-options button[aria-checked="true"] span { color: var(--kairo-delft); }
html.kairo-v3 .kairo-pp-period-options button:focus-visible { outline: 3px solid color-mix(in srgb, var(--kairo-turquoise) 45%, transparent); outline-offset: 2px; }

html.kairo-v3 .kairo-pp-compare { margin-top: 16px; border: 1px solid var(--kairo-entry-line); border-radius: 18px; background: var(--kairo-white); overflow: hidden; }
html.kairo-v3 .kairo-pp-compare-title { padding: 14px 18px 4px; font-size: 13px; font-weight: 800; color: var(--kairo-delft); }
html.kairo-v3 .kairo-pp-compare:not(.is-open) .is-extra,
html.kairo-v3 .kairo-pp-compare:not(.is-open) .kairo-pp-included { display: none; }
html.kairo-v3 .kairo-pp-included { padding: 14px 18px 16px; border-top: 1px solid var(--kairo-entry-line); background: var(--kairo-sky-050); }
html.kairo-v3 .kairo-pp-included strong { display: block; margin-bottom: 9px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kairo-turquoise-dark); }
html.kairo-v3 .kairo-pp-more {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 46px; padding: 10px 16px;
  border: 0; border-top: 1px solid var(--kairo-entry-line); background: var(--kairo-white);
  font: inherit; font-size: 13px; font-weight: 800; color: var(--kairo-turquoise-dark); cursor: pointer;
}
html.kairo-v3 .kairo-pp-more:hover { background: var(--kairo-sky-050); }
html.kairo-v3 .kairo-pp-more:focus-visible { outline: 3px solid color-mix(in srgb, var(--kairo-turquoise) 45%, transparent); outline-offset: -3px; }
html.kairo-v3 .kairo-pp-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
html.kairo-v3 .kairo-pp-more[aria-expanded="true"] svg { transform: rotate(180deg); }
html.kairo-v3 .kairo-pp-included ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 16px; }
html.kairo-v3 .kairo-pp-included li { display: flex; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--kairo-delft); }
html.kairo-v3 .kairo-pp-table-wrap { background: var(--kairo-white); }
html.kairo-v3 .kairo-pp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
html.kairo-v3 .kairo-pp-table th,
html.kairo-v3 .kairo-pp-table td { padding: 11px 10px; border-bottom: 1px solid var(--kairo-entry-line); font-size: 12.5px; text-align: center; vertical-align: middle; color: var(--kairo-delft); background: transparent; white-space: normal; overflow-wrap: anywhere; }
html.kairo-v3 .kairo-pp-table tbody tr:last-child > * { border-bottom: 0; }
html.kairo-v3 .kairo-pp-table th[scope="row"],
html.kairo-v3 .kairo-pp-table thead th:first-child { width: 40%; padding-left: 18px; text-align: left; font-weight: 600; }
html.kairo-v3 .kairo-pp-table thead th { font-size: 12px; font-weight: 800; }
html.kairo-v3 .kairo-pp-table thead th:first-child { color: var(--kairo-entry-muted); }
html.kairo-v3 .kairo-pp-table .is-selected { background: color-mix(in srgb, var(--kairo-turquoise) 9%, transparent); }
html.kairo-v3 .kairo-pp-table thead .is-selected { color: var(--kairo-turquoise-dark); }
html.kairo-v3 .kairo-pp-yes,
html.kairo-v3 .kairo-pp-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
html.kairo-v3 .kairo-pp-yes { background: color-mix(in srgb, var(--kairo-turquoise) 16%, #fff); color: var(--kairo-turquoise-dark); }
html.kairo-v3 .kairo-pp-no { color: #9aaab6; }
html.kairo-v3 .kairo-pp-yes svg,
html.kairo-v3 .kairo-pp-no svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
html.kairo-v3 .kairo-pp-note { font-size: 11.5px; font-weight: 700; line-height: 1.3; }

@media (max-width: 760px) {
  /* Phone: compact header and card so the form starts sooner. */
  html.kairo-v3 #kairo-account-page { padding: 16px 12px 28px; }
  html.kairo-v3 .kairo-account-top { align-items: center; margin-bottom: 14px; }
  html.kairo-v3 .kairo-account-brand strong { font-size: 17px; }
  html.kairo-v3 .kairo-account-brand span { font-size: 10px; }
  html.kairo-v3 .kairo-back { flex: none; padding: 9px 12px; font-size: 12px; white-space: nowrap; }
  html.kairo-v3 .kairo-account-card { padding: 20px 16px; border-radius: 20px; }
  html.kairo-v3 .kairo-account-card h2 { font-size: 21px; }
  /* Plan cards: unselected = name, price and one line; details only on the chosen plan. */
  html.kairo-v3 .kairo-pp-grid { grid-template-columns: 1fr; gap: 10px; }
  html.kairo-v3 .kairo-pp-card { padding: 14px 14px 12px; border-radius: 16px; }
  html.kairo-v3 .kairo-pp-card.is-featured { margin-top: 6px; }
  html.kairo-v3 .kairo-pp-check { top: 13px; right: 13px; }
  html.kairo-v3 .kairo-pp-name { font-size: 13px; }
  html.kairo-v3 .kairo-pp-price { margin: 4px 0 2px; font-size: 19px; }
  html.kairo-v3 .kairo-pp-card:not(.selected) .kairo-pp-copy,
  html.kairo-v3 .kairo-pp-card:not(.selected) .kairo-pp-points { display: none; }
  html.kairo-v3 .kairo-pp-card:not(.selected) .kairo-pp-foot { margin-top: 2px; padding-top: 0; border-top: 0; }
  html.kairo-v3 .kairo-pp-points { margin: 10px 0 12px; gap: 7px; }
  html.kairo-v3 .kairo-pp-copy { font-size: 12px; }
  html.kairo-v3 .kairo-pp-included ul { grid-template-columns: 1fr; }
  html.kairo-v3 .kairo-pp-compare-title { padding: 12px 14px 2px; }
  html.kairo-v3 .kairo-pp-included { padding: 12px 14px 14px; }
  html.kairo-v3 .kairo-pp-table th,
  html.kairo-v3 .kairo-pp-table td { padding: 10px 4px; font-size: 11.5px; }
  html.kairo-v3 .kairo-pp-table th[scope="row"],
  html.kairo-v3 .kairo-pp-table thead th:first-child { width: 38%; padding-left: 14px; }
  html.kairo-v3 .kairo-pp-note { font-size: 10.5px; }
  /* Business type options: one compact row each (kairo.css sets these with !important). */
  html.kairo-v3 .kairo-business-grid { gap: 8px !important; }
  html.kairo-v3 .kairo-business-option { min-height: 0 !important; padding: 12px 40px 12px 12px !important; align-items: center !important; }
  html.kairo-v3 .kairo-business-icon { width: 36px !important; height: 36px !important; border-radius: 11px !important; }
  html.kairo-v3 .kairo-business-icon svg { width: 20px !important; height: 20px !important; }
  html.kairo-v3 .kairo-business-option strong { font-size: 13px; }
  html.kairo-v3 .kairo-business-option small { font-size: 11px !important; }
  html.kairo-v3 .kairo-business-option.selected::before { top: 50% !important; right: 12px !important; transform: translateY(-50%); }
}

/* Orders: missed required field — red outline + short shake (kairo-v3.js). */
@keyframes kairoFieldShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
html.kairo-v3 #tx-form .kairo-field-shake { animation: kairoFieldShake .45s ease; }
html.kairo-v3 #tx-form .kairo-field-missing > .label,
html.kairo-v3 #tx-form .kairo-field-missing > label { color: var(--v3-danger) !important; }
html.kairo-v3 #tx-form .kairo-field-missing .input:not(.master-list *),
html.kairo-v3 #tx-form .kairo-field-missing .sh-select-trigger,
html.kairo-v3 #tx-form .kairo-field-missing .master-list {
  border-color: var(--v3-danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-danger) 18%, transparent) !important;
}
html.kairo-v3 #tx-form .kairo-field-missing .master-list { border: 1px solid var(--v3-danger) !important; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { html.kairo-v3 #tx-form .kairo-field-shake { animation: none; } }
html.kairo-v3 body.saas-dark #tx-form .kairo-field-missing { --v3-danger: #ff7d82; }

/* Pro price: monthly price + 6-month deal (normal price struck through). */
html.kairo-v3 .kairo-lp-price-card > strong > span { margin-left: 2px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--kairo-entry-muted); }
html.kairo-v3 .kairo-lp-price-card.is-featured > strong > span { color: #c6d5de; }
html.kairo-v3 .kairo-lp-price-deal {
  display: grid; gap: 2px;
  margin-top: 14px; padding: 11px 13px; border-radius: 12px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
html.kairo-v3 .kairo-lp-price-deal > span { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #c6d5de; }
html.kairo-v3 .kairo-lp-price-deal > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
html.kairo-v3 .kairo-lp-price-deal s { font-size: 13px; color: #b4c7d4; }
html.kairo-v3 .kairo-lp-price-deal b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--kairo-white); }
html.kairo-v3 .kairo-pp-price small { margin-left: 2px; font-size: 13px; font-weight: 700; letter-spacing: 0; opacity: .75; }
html.kairo-v3 .kairo-pp-deal {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin: 0 0 8px; padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 700;
}
html.kairo-v3 .kairo-pp-deal span { color: #c9dbe6; }
html.kairo-v3 .kairo-pp-deal s { color: #b4c7d4; }
html.kairo-v3 .kairo-pp-deal b { color: var(--kairo-gold); font-weight: 800; }

/* Home: "Kenapa KAIRO" strip (reuses .kairo-lp-feature-list) + Gratis/Pro summary. */
html.kairo-v3 .kairo-lp-more-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 34px;
  color: var(--kairo-delft); font-size: 14px; font-weight: 800;
  text-decoration: underline; text-decoration-color: var(--kairo-turquoise); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
html.kairo-v3 .kairo-lp-more-link:hover { color: var(--kairo-turquoise-dark); }
html.kairo-v3 .kairo-lp-more-link.is-center { display: flex; justify-content: center; }
html.kairo-v3 .kairo-lp-plans-lite { padding: clamp(64px, 7vw, 92px) 0; background: var(--kairo-sky-050); }
html.kairo-v3 .kairo-lp-plan-lite-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  width: min(820px, 100%); margin: 40px auto 0;
}
html.kairo-v3 .kairo-lp-plan-lite {
  display: flex; flex-direction: column; min-width: 0; padding: 26px;
  border: 1px solid var(--kairo-entry-line); border-radius: 18px; background: var(--kairo-white);
}
html.kairo-v3 .kairo-lp-plan-lite.is-featured { border-color: var(--kairo-delft); background: var(--kairo-delft); box-shadow: 0 22px 50px rgba(23, 58, 89, .15); }
html.kairo-v3 .kairo-lp-plan-lite h3 { margin: 0; color: var(--kairo-delft); font-size: 17px; }
html.kairo-v3 .kairo-lp-plan-lite > strong { margin-top: 18px; color: var(--kairo-delft); font-size: clamp(24px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -.04em; }
html.kairo-v3 .kairo-lp-plan-lite > strong > span { margin-left: 2px; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--kairo-entry-muted); }
html.kairo-v3 .kairo-lp-plan-lite.is-featured h3,
html.kairo-v3 .kairo-lp-plan-lite.is-featured > strong { color: var(--kairo-white); }
html.kairo-v3 .kairo-lp-plan-lite.is-featured > strong > span { color: #c6d5de; }
html.kairo-v3 .kairo-lp-plan-lite-deal { margin: 10px 0 0; color: #c6d5de; font-size: 13px; font-weight: 700; }
html.kairo-v3 .kairo-lp-plan-lite-deal s { margin: 0 4px; color: #b4c7d4; font-weight: 600; }
html.kairo-v3 .kairo-lp-plan-lite-deal b { color: var(--kairo-gold); }
html.kairo-v3 .kairo-lp-plan-lite .kairo-lp-price-list { margin: 18px 0 22px; }
html.kairo-v3 .kairo-lp-plan-lite.is-featured .kairo-lp-price-list li { color: #eef5f8; }

/* Features page: real screenshots (demo data) + compact list of other features. */
html.kairo-v3 .kairo-lp-pro-tag {
  display: inline-flex; margin-left: 4px; padding: 2px 7px; border-radius: 999px; vertical-align: 1px;
  background: var(--kairo-gold-050); color: #7a5410; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
html.kairo-v3 .kairo-lp-showcase { display: grid; gap: clamp(48px, 7vw, 88px); margin-top: 52px; }
html.kairo-v3 .kairo-lp-showcase-row {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 64px);
}
html.kairo-v3 .kairo-lp-showcase-row.is-flipped { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
html.kairo-v3 .kairo-lp-showcase-row.is-flipped .kairo-lp-shot { grid-column: 2; grid-row: 1; }
html.kairo-v3 .kairo-lp-showcase-row.is-flipped .kairo-lp-showcase-copy { grid-column: 1; grid-row: 1; }
html.kairo-v3 .kairo-lp-shot {
  margin: 0; padding: 12px; border: 1px solid var(--kairo-entry-line); border-radius: 22px;
  background: var(--kairo-sky-050); box-shadow: var(--kairo-entry-shadow-soft);
}
html.kairo-v3 .kairo-lp-shot img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--kairo-white); }
html.kairo-v3 .kairo-lp-shot.is-tall { justify-self: center; width: min(420px, 100%); }
html.kairo-v3 .kairo-lp-showcase-copy h3 { margin: 0; color: var(--kairo-delft); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.03em; }
html.kairo-v3 .kairo-lp-showcase-copy > p { margin: 12px 0 0; color: var(--kairo-entry-muted); font-size: 15px; line-height: 1.7; }
html.kairo-v3 .kairo-lp-showcase-copy .kairo-lp-price-list { margin: 18px 0 0; }
html.kairo-v3 .kairo-lp-more-features { margin-top: clamp(56px, 7vw, 88px); padding-top: 32px; border-top: 1px solid var(--kairo-entry-line); }
html.kairo-v3 .kairo-lp-more-features h3 { margin: 0; color: var(--kairo-delft); font-size: 18px; }
html.kairo-v3 .kairo-lp-more-features ul {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; margin: 22px 0 0; padding: 0; list-style: none;
}
html.kairo-v3 .kairo-lp-more-features li { display: grid; gap: 4px; }
html.kairo-v3 .kairo-lp-more-features strong { color: var(--kairo-delft); font-size: 14px; }
html.kairo-v3 .kairo-lp-more-features li > span { color: var(--kairo-entry-muted); font-size: 13px; line-height: 1.55; }

@media (max-width: 860px) {
  html.kairo-v3 .kairo-lp-showcase-row,
  html.kairo-v3 .kairo-lp-showcase-row.is-flipped { grid-template-columns: 1fr; gap: 22px; }
  html.kairo-v3 .kairo-lp-showcase-row.is-flipped :is(.kairo-lp-shot, .kairo-lp-showcase-copy) { grid-column: 1; grid-row: auto; }
  html.kairo-v3 .kairo-lp-more-features ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  html.kairo-v3 .kairo-lp-plan-lite-grid { grid-template-columns: 1fr; margin-top: 30px; }
  html.kairo-v3 .kairo-lp-plan-lite { padding: 22px; }
  html.kairo-v3 .kairo-lp-shot { padding: 8px; border-radius: 16px; }
  html.kairo-v3 .kairo-lp-shot img { border-radius: 10px; }
  html.kairo-v3 .kairo-lp-shot.is-tall { width: min(300px, 100%); }
  html.kairo-v3 .kairo-lp-more-features ul { grid-template-columns: 1fr; gap: 16px; }
}

/* Dashboard upgrade hint (Gratis only, kairo-v3.js): clear but quiet — one slim row, dismissible. */
html.kairo-v3 #kairo-upgrade-hint:not([hidden]) {
  display: flex; align-items: center; gap: 14px; margin: 0 0 var(--v3-card-gap, 16px); padding: 12px 14px 12px 16px;
  border: 1px solid color-mix(in srgb, var(--v3-primary) 28%, var(--v3-line)); border-radius: var(--v3-r-md, 16px);
  background: color-mix(in srgb, var(--v3-primary) 6%, var(--v3-surface));
}
html.kairo-v3 .kairo-upgrade-hint-icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: color-mix(in srgb, var(--v3-primary) 16%, var(--v3-surface)); color: var(--v3-primary-dark);
}
html.kairo-v3 .kairo-upgrade-hint-icon svg,
html.kairo-v3 .kairo-upgrade-hint-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.kairo-v3 .kairo-upgrade-hint-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
html.kairo-v3 .kairo-upgrade-hint-copy strong { color: var(--v3-ink); font-size: 13.5px; }
html.kairo-v3 .kairo-upgrade-hint-copy span { color: var(--v3-ink-soft); font-size: 12.5px; line-height: 1.45; }
html.kairo-v3 .kairo-upgrade-hint-actions { flex: none; display: flex; align-items: center; gap: 6px; }
html.kairo-v3 .kairo-upgrade-hint-copy .is-short { display: none; }
html.kairo-v3 .kairo-upgrade-hint-cta {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--v3-primary); color: var(--v3-on-primary); font: inherit; font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
html.kairo-v3 .kairo-upgrade-hint-cta:hover { background: var(--v3-primary-dark); color: #fff; }
/* Paket Gratis: riwayat 60 hari (notice di Riwayat Transaksi, riwayat seller, Petty Cash). */
html.kairo-v3 .kairo-history-limit {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--v3-primary) 28%, var(--v3-line)); border-radius: 12px;
  background: color-mix(in srgb, var(--v3-primary) 6%, var(--v3-surface)); color: var(--v3-ink-soft); font-size: 12.5px; line-height: 1.45;
}
html.kairo-v3 #cash .kairo-history-limit { margin-top: 16px; }
html.kairo-v3 .kairo-history-limit span { flex: 1; min-width: 0; }
html.kairo-v3 .kairo-history-limit b { color: var(--v3-ink); }
html.kairo-v3 .kairo-history-limit-btn {
  flex: none; min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--v3-primary); color: var(--v3-on-primary); font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap;
}
html.kairo-v3 .kairo-history-limit-btn:hover { background: var(--v3-primary-dark); color: #fff; }
html.kairo-v3 .kairo-history-limit-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--v3-primary) 45%, transparent); outline-offset: 2px; }
@media (max-width: 520px) {
  html.kairo-v3 .kairo-history-limit { flex-direction: column; align-items: stretch; }
  html.kairo-v3 .kairo-history-limit-btn { min-height: 40px; }
}
html.kairo-v3 .kairo-upgrade-hint-close {
  display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--v3-muted);
}
html.kairo-v3 .kairo-upgrade-hint-close:hover { background: color-mix(in srgb, var(--v3-ink) 7%, transparent); color: var(--v3-ink); }
html.kairo-v3 :is(.kairo-upgrade-hint-cta, .kairo-upgrade-hint-close):focus-visible { outline: 3px solid color-mix(in srgb, var(--v3-primary) 45%, transparent); outline-offset: 2px; }
@media (max-width: 640px) {
  html.kairo-v3 #kairo-upgrade-hint:not([hidden]) { display: grid; grid-template-columns: 36px minmax(0, 1fr) 32px; gap: 10px 12px; padding: 12px; align-items: start; }
  html.kairo-v3 .kairo-upgrade-hint-actions { display: contents; }
  html.kairo-v3 .kairo-upgrade-hint-copy .is-long { display: none; }
  html.kairo-v3 .kairo-upgrade-hint-copy .is-short { display: inline; }
  html.kairo-v3 .kairo-upgrade-hint-close { grid-column: 3; grid-row: 1; }
  html.kairo-v3 .kairo-upgrade-hint-cta { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 40px; }
}

/* ---- Kontras light mode (owner Okt 2026): teks minimal 4.5:1 terhadap latarnya. ----
   Hanya light mode; dark mode sudah diaudit terpisah. Warna brand tetap dipakai, cuma
   dicampur lebih gelap untuk teks supaya terbaca di latar tint-nya sendiri. */
html.kairo-v3 body:not(.saas-dark) {
  --muted: #526175;
  --v3-muted: #4e6475;
  --danger: #a3384a;
  --btn-danger: #a3384a;
}
html.kairo-v3 body:not(.saas-dark) #app-shell .btn-gold {
  background: color-mix(in srgb, var(--brand-blend) 68%, #1f2937) !important;
}
html.kairo-v3 body:not(.saas-dark) #app-shell .reading-status-pill.progress,
html.kairo-v3 body:not(.saas-dark) #app-shell .customer-db-rank,
html.kairo-v3 body:not(.saas-dark) #customer-history-modal .reading-status-pill.progress,
html.kairo-v3 body:not(.saas-dark) #app-shell .badge {
  color: color-mix(in srgb, var(--brand-accent) 42%, #1f2937) !important;
}
html.kairo-v3 body:not(.saas-dark) #app-shell .reading-status-pill.done,
html.kairo-v3 body:not(.saas-dark) #app-shell .customer-db-repeat,
html.kairo-v3 body:not(.saas-dark) #customer-history-modal .reading-status-pill.done {
  color: color-mix(in srgb, var(--brand-primary) 52%, #1f2937) !important;
}
html.kairo-v3 body:not(.saas-dark) .saas-settings-submenu-btn.active {
  color: color-mix(in srgb, var(--brand-accent) 42%, var(--ink)) !important;
}
html.kairo-v3 body:not(.saas-dark) .sh-select-trigger.placeholder {
  color: #6c5a61;
}
html.kairo-v3 body:not(.saas-dark) #kairo-v3-dashboard-head small {
  color: color-mix(in srgb, var(--v3-primary-dark) 72%, #000);
}
html.kairo-v3 body:not(.saas-dark) #saas-mobile-bottom .saas-mobile-nav-btn.active:not(.kairo-mobile-orders-main) {
  color: color-mix(in srgb, var(--brand-accent) 42%, #2b1a21) !important;
}
/* Template Seller (light): status, tombol "Lihat Semua", dan total keranjang. */
html.kairo-v3 body.seller-app-premium:not(.saas-dark) .seller-cart-total strong,
html.kairo-v3 body.seller-app-premium:not(.saas-dark) .seller-history-toggle,
html.kairo-v3 body.seller-app-premium:not(.saas-dark) .seller-order-status-pill.is-new,
html.kairo-v3 body.seller-app-premium:not(.saas-dark) .seller-settings-db-status {
  color: color-mix(in srgb, var(--v3-primary) 62%, #000);
}
html.kairo-v3 body.seller-app-premium:not(.saas-dark) .seller-expiry-badge.is-active,
html.kairo-v3 body.seller-app-premium:not(.saas-dark) .seller-history-expiry.is-active,
html.kairo-v3 body.seller-app-premium:not(.saas-dark) .seller-order-status-pill.is-done {
  color: #1f6655;
}
html.kairo-v3 body.seller-app-premium:not(.saas-dark) .seller-expiry-badge.is-urgent,
html.kairo-v3 body.seller-app-premium:not(.saas-dark) .seller-history-expiry.is-urgent {
  color: #96461f;
}
html.kairo-v3 body.seller-app-premium:not(.saas-dark) .seller-expiry-badge.is-soon,
html.kairo-v3 body.seller-app-premium:not(.saas-dark) .seller-history-expiry.is-soon,
html.kairo-v3 body.seller-app-premium:not(.saas-dark) .seller-order-status-pill.is-progress {
  color: color-mix(in srgb, var(--gold, #C9A45C) 45%, #3f2a05);
}

/* Settings › Profit: saklar "Pakai Kas" (Pro). */
html.kairo-v3 .kairo-cash-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--v3-line); border-radius: 12px; background: color-mix(in srgb, var(--v3-primary) 5%, var(--v3-surface)); }
html.kairo-v3 .kairo-cash-toggle > div { display: grid; gap: 2px; min-width: 0; }
html.kairo-v3 .kairo-cash-toggle strong { color: var(--v3-ink); font-size: 13.5px; }
html.kairo-v3 .kairo-cash-toggle small { color: var(--v3-ink-soft); font-size: 12px; line-height: 1.45; }
html.kairo-v3 .kairo-cash-toggle.is-locked { opacity: .8; }
html.kairo-v3 .kairo-switch { position: relative; flex: none; width: 46px; height: 26px; cursor: pointer; }
html.kairo-v3 .kairo-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
html.kairo-v3 .kairo-switch span { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--v3-ink) 22%, var(--v3-surface)); transition: background .2s ease; }
html.kairo-v3 .kairo-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease; }
html.kairo-v3 .kairo-switch input:checked + span { background: var(--v3-primary); }
html.kairo-v3 .kairo-switch input:checked + span::after { transform: translateX(20px); }
html.kairo-v3 .kairo-switch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--v3-primary) 45%, transparent); outline-offset: 2px; }
html.kairo-v3 .kairo-switch input:disabled { cursor: not-allowed; }
html.kairo-v3 .kairo-switch input:disabled + span { opacity: .55; }
html.kairo-v3 .kairo-switch .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Seller App Premium › Tracker Langganan (owner Okt 2026). */
html.kairo-v3 .seller-tracker-card { display: grid; gap: 14px; }
html.kairo-v3 .seller-tracker-head .card-title { margin: 0 0 3px; }
html.kairo-v3 .seller-tracker-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html.kairo-v3 .seller-tracker-stat { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--v3-line); border-radius: 12px; background: var(--v3-surface-subtle); }
html.kairo-v3 .seller-tracker-stat span { color: var(--v3-ink-soft); font-size: 12px; }
html.kairo-v3 .seller-tracker-stat b { color: var(--v3-ink); font-size: 22px; line-height: 1.2; }
html.kairo-v3 .seller-tracker-stat.is-soon b { color: #a15c07; }
html.kairo-v3 .seller-tracker-stat.is-expired b { color: #b42c36; }
html.kairo-v3 body.saas-dark .seller-tracker-stat.is-soon b { color: #f5b83d; }
html.kairo-v3 body.saas-dark .seller-tracker-stat.is-expired b { color: #ff8a8f; }
html.kairo-v3 .seller-tracker-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
html.kairo-v3 .seller-tracker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html.kairo-v3 .seller-tracker-chips button { min-height: 34px; padding: 0 12px; border: 1px solid var(--v3-line); border-radius: 999px; background: var(--v3-surface); color: var(--v3-ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
html.kairo-v3 .seller-tracker-chips button.is-active { border-color: var(--v3-primary); background: var(--v3-primary); color: var(--v3-on-primary); }
html.kairo-v3 #seller-tracker-search { width: min(320px, 100%); min-height: 38px; }
html.kairo-v3 .seller-tracker-list { display: grid; gap: 8px; }
html.kairo-v3 .seller-tracker-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--v3-line); border-radius: var(--v3-r-sm, 10px); background: var(--v3-surface-subtle); }
html.kairo-v3 .seller-tracker-copy { display: grid; gap: 2px; min-width: 0; }
html.kairo-v3 .seller-tracker-copy strong { color: var(--v3-ink); font-size: 13.5px; }
html.kairo-v3 .seller-tracker-copy small { color: var(--v3-ink-soft); font-size: 12px; overflow-wrap: anywhere; }
html.kairo-v3 .seller-tracker-when { display: grid; justify-items: end; gap: 4px; text-align: right; }
html.kairo-v3 .seller-tracker-when span { color: var(--v3-ink-soft); font-size: 12px; white-space: nowrap; }
html.kairo-v3 .seller-tracker-actions { display: flex; gap: 6px; }
html.kairo-v3 .seller-tracker-btn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--v3-line); border-radius: 10px; background: var(--v3-surface); color: var(--v3-ink); font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
html.kairo-v3 .seller-tracker-btn.is-primary { border-color: var(--v3-primary); background: var(--v3-primary); color: var(--v3-on-primary); }
html.kairo-v3 .seller-tracker-btn:focus-visible, html.kairo-v3 .seller-tracker-chips button:focus-visible { outline: 3px solid color-mix(in srgb, var(--v3-primary) 45%, transparent); outline-offset: 2px; }
html.kairo-v3 .seller-tracker-empty { padding: 18px 14px; border: 1px dashed var(--v3-line); border-radius: 12px; color: var(--v3-ink-soft); text-align: center; font-size: 13px; }
@media (max-width: 640px) {
  html.kairo-v3 .seller-tracker-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  html.kairo-v3 .seller-tracker-stat { padding: 10px; }
  html.kairo-v3 .seller-tracker-stat b { font-size: 18px; }
  html.kairo-v3 .seller-tracker-stat span { font-size: 10.5px; }
  html.kairo-v3 .seller-tracker-row { grid-template-columns: minmax(0, 1fr) auto; }
  html.kairo-v3 .seller-tracker-actions { grid-column: 1 / -1; }
  html.kairo-v3 .seller-tracker-actions > * { flex: 1; justify-content: center; }
  html.kairo-v3 #seller-tracker-search { width: 100%; }
}

/* Performance › Penjualan per Produk (owner Okt 2026). */
html.kairo-v3 .product-sales-card { display: grid; gap: 14px; margin-bottom: 18px; }
html.kairo-v3 .product-sales-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
html.kairo-v3 .product-sales-head .card-title { margin: 0 0 3px; }
html.kairo-v3 .product-sales-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
html.kairo-v3 .product-sales-tools label { display: grid; gap: 4px; }
html.kairo-v3 .product-sales-tools label > span { color: var(--v3-ink-soft); font-size: 11.5px; font-weight: 700; }
html.kairo-v3 .product-sales-tools select { min-width: 180px; }
html.kairo-v3 .product-sales-custom { display: flex; align-items: center; gap: 6px; }
html.kairo-v3 .product-sales-custom[hidden] { display: none; }
html.kairo-v3 .product-sales-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
html.kairo-v3 .product-sales-summary:empty { display: none; }
html.kairo-v3 .product-sales-summary > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--v3-line); border-radius: 12px; background: var(--v3-surface-subtle); }
html.kairo-v3 .product-sales-summary span { color: var(--v3-ink-soft); font-size: 12px; }
html.kairo-v3 .product-sales-summary b { color: var(--v3-ink); font-size: 17px; }
@media (max-width: 640px) {
  html.kairo-v3 .product-sales-tools, html.kairo-v3 .product-sales-tools label { width: 100%; }
  html.kairo-v3 .product-sales-tools select { width: 100%; min-width: 0; }
  html.kairo-v3 .product-sales-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Paket Gratis: tanpa partner tambahan & pembagian persentase (owner Okt 2026). HPP per produk tetap tampil:
   laba bersih = harga jual dikurangi harga modal, 100% untuk pemilik. */
html.kairo-v3[data-workspace-plan="basic"] #profit-share-editor-form,html.kairo-v3[data-workspace-plan="basic"] #kairo-add-partner,html.kairo-v3[data-workspace-plan="basic"] #profit-share-active-label{ display: none !important; }
html.kairo-v3 .kairo-cash-off-panel { display: grid; gap: 10px; margin: -6px 0 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #b26a00 40%, var(--v3-line)); border-radius: 12px; background: color-mix(in srgb, #b26a00 7%, var(--v3-surface)); }
html.kairo-v3 .kairo-cash-off-panel[hidden] { display: none; }
html.kairo-v3 .kairo-cash-off-panel > div:first-child { display: grid; gap: 2px; }
html.kairo-v3 .kairo-cash-off-panel strong { color: var(--v3-ink); font-size: 13.5px; }
html.kairo-v3 .kairo-cash-off-panel small { color: var(--v3-ink-soft); font-size: 12px; line-height: 1.45; }
html.kairo-v3 .kairo-cash-off-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.kairo-v3 .kairo-cash-off-actions .control { min-height: 40px; }

/* Performance: summary row above the charts (replaces the old "Performance" title card). */
html.kairo-v3 #performance .perf-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
html.kairo-v3 #performance .perf-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0 !important;
  padding: 16px 18px !important;
}
html.kairo-v3 #performance .perf-kpi-label {
  color: var(--v3-muted);
  font-size: 12px;
  font-weight: 700;
}
html.kairo-v3 #performance .perf-kpi strong {
  color: var(--v3-ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.kairo-v3 #performance .perf-kpi small {
  color: var(--v3-muted);
  font-size: 12px;
  font-weight: 600;
}
@media (max-width: 1100px) {
  html.kairo-v3 #performance .perf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 520px) {
  html.kairo-v3 #performance .perf-kpi { padding: 12px 14px !important; }
  html.kairo-v3 #performance .perf-kpi strong { font-size: 16px; }
}

/* ---- Layout konsisten (owner Okt 2026): kartu & tabel simetris dan proporsional di semua menu/template. ---- */
/* Toolbar di dalam kartu tidak membawa jarak atas toolbar halaman (dulu judul turun 22px). */
html.kairo-v3 #app-shell .card > .toolbar:first-child { padding: 0 0 10px !important; margin-top: 0 !important; }
html.kairo-v3 #app-shell #cash-capital-card > .cash-filter-bar:first-child { padding-top: 0 !important; margin-top: 0 !important; }
/* Subjudul kartu: sans, tidak miring, satu ukuran. Subjudul halaman (di bawah judul besar) tetap gaya lama. */
html.kairo-v3 #app-shell .card .page-sub,
html.kairo-v3 #app-shell .seller-expiry-head .muted {
  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-style: normal !important;
  font-size: 12.5px !important;
  line-height: 1.45;
  color: var(--v3-muted) !important;
}
html.kairo-v3 #app-shell .product-sales-head { align-items: flex-start; }
/* Dua kolom di Performance pakai perbandingan lebar yang sama; kartu sendirian di barisnya memakai lebar penuh. */
html.kairo-v3 #performance .platform-analytics-grid,
html.kairo-v3 #performance > .grid-main { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 18px; }
html.kairo-v3 #performance > .grid-main:has(> .card.seller-template-hidden),
html.kairo-v3 #performance > .grid-main:has(> .card:only-child) { grid-template-columns: minmax(0, 1fr); }
/* Settings: kolom kanan mengikuti tinggi kolom kiri, kartu pertama tidak melar kosong. */
html.kairo-v3 #settings .settings-stack { align-content: start; grid-template-rows: auto 1fr; }
/* Kartu angka kecil (Petty Cash, Customer Database): angka tidak patah, garis kiri ikut warna brand. */
html.kairo-v3 #cash .kpi .kpi-value,
html.kairo-v3 #customers .kpi .kpi-value {
  font-size: clamp(17px, 1.45vw, 23px) !important;
  overflow-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ukuran Teks (Settings): angka satu baris di kartu kecil ini naik maksimal 10% supaya tidak terpotong "…". */
html.kairo-v3[data-kfs] body #cash .kpi .kpi-value,
html.kairo-v3[data-kfs] body #customers .kpi .kpi-value { font-size: calc(clamp(17px, 1.45vw, 23px) * min(var(--kfs, 1), 1.1)) !important; }
html.kairo-v3 #cash .kpi,
html.kairo-v3 #customers .kpi { border-left-color: color-mix(in srgb, var(--v3-primary) 55%, var(--v3-line)) !important; }
@media (max-width: 900px) {
  html.kairo-v3 #performance .platform-analytics-grid,
  html.kairo-v3 #performance > .grid-main { grid-template-columns: minmax(0, 1fr); }
  html.kairo-v3 #settings .settings-stack { grid-template-rows: none; }
}

/* Seller App Premium: the app stays hidden until the template (and the workspace theme) is in place,
   so the generic dashboard never flashes first. kairo-app.js removes the class (failsafe 5 s). */
html.kairo-template-pending body.authenticated #app-shell,
html.kairo-template-pending body.authenticated #saas-sidebar,
html.kairo-template-pending body.authenticated #saas-mobile-bottom,
html.kairo-template-pending body.authenticated #kairo-mobile-brandbar { visibility: hidden !important; }
html.kairo-template-pending body.authenticated::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid var(--v3-line);
  border-top-color: var(--v3-primary);
  border-radius: 50%;
  animation: kairo-spin .8s linear infinite;
  z-index: 50;
}

/* Settings › Identitas Workspace: buka lagi Setup Wizard (Pro). */
html.kairo-v3 .kairo-setup-entry {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--v3-primary) 28%, var(--v3-line)); border-radius: 12px;
  background: color-mix(in srgb, var(--v3-primary) 6%, var(--v3-surface)); color: var(--v3-ink-soft); font-size: 12.5px; line-height: 1.45;
}
html.kairo-v3 .kairo-setup-entry span { flex: 1; min-width: 0; }
html.kairo-v3 .kairo-setup-entry b { display: block; color: var(--v3-ink); font-size: 13px; }
html.kairo-v3 .kairo-setup-entry-btn {
  flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--v3-primary); color: var(--v3-on-primary); font: inherit; font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
html.kairo-v3 .kairo-setup-entry-btn:hover { background: var(--v3-primary-dark); color: #fff; }
html.kairo-v3 .kairo-setup-entry-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--v3-primary) 45%, transparent); outline-offset: 2px; }

/* Settings › Ukuran Teks (slider 4 pilihan, kairo-v3.js). */
html.kairo-v3 .kairo-font-scale { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--v3-line); }
html.kairo-v3 .kairo-font-scale-control { display: grid; gap: 10px; margin-top: 8px; }
html.kairo-v3 .kairo-font-scale input[type=range] {
  width: 100%; height: 6px; margin: 8px 0 0; border-radius: 999px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, var(--v3-primary) var(--kfs-fill, 33%), color-mix(in srgb, var(--v3-primary) 18%, var(--v3-line)) var(--kfs-fill, 33%));
}
html.kairo-v3 .kairo-font-scale input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 999px; background: var(--v3-surface); border: 3px solid var(--v3-primary); box-shadow: 0 2px 6px rgba(0,0,0,.18); }
html.kairo-v3 .kairo-font-scale input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 999px; background: var(--v3-surface); border: 3px solid var(--v3-primary); }
html.kairo-v3 .kairo-font-scale input[type=range]:focus-visible { outline: 3px solid color-mix(in srgb, var(--v3-primary) 40%, transparent); outline-offset: 6px; }
/* Label tepat di bawah tiap titik slider (titik = 11px + (lebar - 22px) * i/3); label pertama/terakhir rata tepi. */
html.kairo-v3 .kairo-font-scale-opts { position: relative; height: 30px; }
html.kairo-v3 .kairo-font-scale-opts button {
  position: absolute; top: 0; left: calc(11px + (100% - 22px) * var(--i) / 3); transform: translateX(-50%);
  min-height: 30px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--v3-muted);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
html.kairo-v3 .kairo-font-scale-opts button[style*="--i:0"] { left: 0; transform: none; }
html.kairo-v3 .kairo-font-scale-opts button[style*="--i:3"] { left: auto; right: 0; transform: none; }
html.kairo-v3 .kairo-font-scale-opts button:hover { color: var(--v3-ink); background: color-mix(in srgb, var(--v3-primary) 8%, var(--v3-surface)); }
html.kairo-v3 .kairo-font-scale-opts button.is-active { color: var(--v3-ink); background: color-mix(in srgb, var(--v3-primary) 14%, var(--v3-surface)); }
/* Orders › Penyesuaian Harga: kolom boleh menyusut (dulu ikut lebar teks pilihan), jadi teks besar (Ukuran Teks) tidak
   mendorong form melebihi layar HP. Teks pilihan yang kepanjangan dipotong "…". */
html.kairo-v3 .price-adjustment-grid > * { min-width: 0; }
html.kairo-v3 .price-adjustment-grid .sh-select-trigger { min-width: 0; max-width: 100%; }
html.kairo-v3 .price-adjustment-grid .sh-select-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ukuran Teks: label menu sidebar desktop (lebar sidebar tetap) naik maksimal 10%; label panjang turun ke baris kedua. */
html.kairo-v3[data-kfs] body:not(.saas-sidebar-collapsed) #saas-sidebar .saas-nav-label { font-size: calc(12px * min(var(--kfs, 1), 1.1)) !important; min-width: 0; white-space: normal; line-height: 1.15; }
html.kairo-v3[data-kfs] body .kairo-font-scale-opts button { font-size: 12.5px !important; }

/* Orders: produk & add-on dipilih dengan klik kartu; jumlah = berapa kali diklik (tombol − mengurangi). */
html.kairo-v3 .pick-hidden { display: none !important; }
html.kairo-v3 .pick-card { cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
html.kairo-v3 .pick-card:focus-visible { outline: 2px solid var(--v3-primary); outline-offset: 2px; }
html.kairo-v3 .pick-card:active { transform: scale(.992); }
html.kairo-v3 .pick-qty { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 12px; border-radius: 999px; background: var(--v3-primary); color: var(--v3-on-primary, #fff); font-size: 13px; font-weight: 800; }
html.kairo-v3 .pick-qty[hidden] { display: none; }
html.kairo-v3 .pick-minus { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .28); color: inherit; font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
html.kairo-v3 .pick-minus:hover { background: rgba(255, 255, 255, .45); }

/* ---- Perbaikan mobile (Okt 2026) ---- */
/* Filter tanggal Kustom: dua kolom tanggal sama lebar, "s/d" di tengah, tidak melebar keluar layar (Safari iOS). */
@media (max-width: 900px) {
  html.kairo-v3 #app-shell main.container > .toolbar #custom-range.show {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    gap: 4px;
    overflow: hidden;
  }

  html.kairo-v3 #app-shell main.container > .toolbar #custom-range.show > span {
    justify-self: center;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
  }

  html.kairo-v3 #app-shell main.container > .toolbar #custom-range .control {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    inline-size: 100%;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
  }

  html.kairo-v3 #custom-range .control::-webkit-date-and-time-value {
    min-width: 0;
    text-align: center;
  }
}

/* Pop-up Notifikasi & Menu Lainnya (mode terang): latar solid, bukan tembus pandang. */
html.kairo-v3 body:not(.saas-dark) .kairo-mobile-more-backdrop {
  background: rgba(24, 18, 28, .55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.kairo-v3 body:not(.saas-dark) .kairo-mobile-more-panel {
  background: color-mix(in srgb, var(--v3-primary) 5%, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--v3-ink) 24%, #ffffff) !important;
  box-shadow: 0 -10px 40px rgba(20, 24, 40, .28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.kairo-v3 body:not(.saas-dark) .kairo-mobile-more-item,
html.kairo-v3 body:not(.saas-dark) .kairo-mobile-sheet-tip,
html.kairo-v3 body:not(.saas-dark) .kairo-mobile-sheet-close {
  background: #ffffff !important;
  border-color: color-mix(in srgb, var(--v3-ink) 22%, #ffffff) !important;
  box-shadow: 0 1px 2px rgba(20, 24, 40, .08);
}

html.kairo-v3 body:not(.saas-dark) .kairo-mobile-more-item > span:last-child,
html.kairo-v3 body:not(.saas-dark) .kairo-mobile-sheet-head strong {
  color: var(--v3-ink) !important;
}

html.kairo-v3 body:not(.saas-dark) .kairo-mobile-sheet-head small,
html.kairo-v3 body:not(.saas-dark) .kairo-mobile-sheet-tip small {
  color: var(--v3-muted) !important;
}

/* Settings › baris Package / Add-on / Topik di HP: satu kolom, tombol sama lebar. */

@media (max-width: 700px) {
  html.kairo-v3 #settings .settings-master-row,
  html.kairo-v3 #settings .settings-master-row.settings-topic-master-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  html.kairo-v3 #settings .settings-master-row > .form-group,
  html.kairo-v3 #settings .settings-master-row > .master-name-field {
    grid-column: 1 !important;
    min-width: 0;
  }

  html.kairo-v3 #settings .settings-master-row .settings-master-actions {
    grid-column: 1 !important;
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    flex-wrap: nowrap;
  }

  html.kairo-v3 #settings .settings-master-row .settings-master-actions .btn {
    min-width: 0 !important;
    width: 100%;
    height: 44px !important;
    padding: 0 6px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
}

/* Settings › Package / Add-on: Kode | Nama | Harga | Modal | Pembagian dalam satu baris; tombol di baris yang sama bila
   kartu cukup lebar (container query), kalau tidak di bawahnya (rata kanan, satu baris).
   Nominal manual per partner muncul hanya bila metode "Nominal manual". */
html.kairo-v3 #settings :is(#settings-package-list, #settings-addon-list) { container-type: inline-size; }

@media (min-width: 701px) {
  html.kairo-v3 #settings .settings-master-row:has(.master-price-field) {
    grid-template-columns: minmax(70px, .5fr) minmax(150px, 1.7fr) minmax(104px, 1fr) minmax(104px, 1fr) minmax(140px, 1.1fr) !important;
    gap: 10px !important;
    align-items: end !important;
  }

  html.kairo-v3 #settings .settings-master-row:has(.master-price-field) .settings-master-actions {
    grid-column: 1 / -1;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
  }

  html.kairo-v3 #settings .settings-master-row:has(.master-price-field) .settings-master-actions .btn {
    min-width: 0 !important;
    padding: 9px 14px;
    font-size: 12.5px;
  }
}

@container (min-width: 1180px) {
  html.kairo-v3 #settings .settings-master-row:has(.master-price-field) {
    grid-template-columns: minmax(70px, .45fr) minmax(150px, 1.5fr) minmax(100px, .85fr) minmax(100px, .85fr) minmax(138px, 1fr) auto !important;
  }

  html.kairo-v3 #settings .settings-master-row:has(.master-price-field) .settings-master-actions {
    grid-column: auto;
  }
}

html.kairo-v3 #settings .master-manual {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--v3-ink) 22%, transparent);
}

html.kairo-v3 #settings .master-manual[hidden] { display: none; }
html.kairo-v3 #settings .master-manual-field .label { margin-bottom: 4px; }
html.kairo-v3 #settings .master-manual-note { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--v3-muted); }
html.kairo-v3 #settings .master-manual-note.invalid { color: var(--v3-danger, #a3384a); }

@media (max-width: 700px) {
  /* Harga & Modal berdampingan, sisanya satu kolom. */
  html.kairo-v3 #settings .settings-master-row:has(.master-price-field) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  html.kairo-v3 #settings .settings-master-row:has(.master-price-field) > .master-price-field { grid-column: 1 !important; }
  html.kairo-v3 #settings .settings-master-row:has(.master-price-field) > .master-cost-field { grid-column: 2 !important; }

  html.kairo-v3 #settings .settings-master-row:has(.master-price-field) > :is(.master-name-field, .master-split-field, .master-manual, .settings-master-actions, .form-group:first-child) {
    grid-column: 1 / -1 !important;
  }
}

/* Landing: tombol hero tidak memecah teks jadi dua baris; baris baru bila kolom sempit. */
html.kairo-v3 .kairo-lp-actions { flex-wrap: wrap; }
html.kairo-v3 .kairo-lp-actions .kairo-button { white-space: nowrap; }

/* Landing HP: "Coba KAIRO Gratis" dan "Coba Demo" sebaris seperti di desktop; link "Lihat Cara Kerjanya" di bawahnya. */
@media (max-width: 900px) {
  html.kairo-v3 .kairo-lp-actions { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 10px; }
  html.kairo-v3 .kairo-lp-actions > .kairo-button:not(.kairo-button-text) { flex: 1 1 0; min-width: 0; padding-inline: 10px; justify-content: center; }
  html.kairo-v3 .kairo-lp-actions > .kairo-button-text { flex: 1 1 100%; justify-content: center; }
}

/* Tautan WhatsApp: logo + teks (nomor tidak ditampilkan). */
html.kairo-v3 .kairo-wa-link { display: inline-flex; align-items: center; gap: 7px; }
html.kairo-v3 .kairo-wa-ico { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Login PIN (owner Okt 2026) ---- */
html.kairo-v3 .kairo-pin-pad { display: grid; justify-items: center; gap: 6px; }
html.kairo-v3 .kairo-pin-pad:focus, html.kairo-v3 .kairo-pin-pad:focus-visible { outline: none !important; box-shadow: none !important; }
html.kairo-v3 .kairo-pin-title { font-size: 18px; font-weight: 800; color: var(--v3-ink); }
html.kairo-v3 .kairo-pin-sub { font-size: 12.5px; color: var(--v3-muted); text-align: center; }
html.kairo-v3 .kairo-pin-dots { display: flex; gap: 16px; margin: 14px 0 4px; }
html.kairo-v3 .kairo-pin-dots i { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--v3-primary-dark); background: transparent; transition: background .12s ease, transform .12s ease; }
html.kairo-v3 .kairo-pin-dots i.on { background: var(--v3-primary-dark); transform: scale(1.1); }
html.kairo-v3 .kairo-pin-msg { min-height: 18px; font-size: 12.5px; font-weight: 700; color: var(--v3-muted); }
html.kairo-v3 .kairo-pin-msg.bad { color: var(--v3-danger); }
html.kairo-v3 .kairo-pin-keys { display: grid; grid-template-columns: repeat(3, 62px); gap: 14px; margin-top: 6px; }
html.kairo-v3 .kairo-pin-keys button {
  height: 62px; border: 1px solid var(--v3-line); border-radius: 999px; padding: 0; background: var(--v3-surface-subtle);
  color: var(--v3-ink); font-size: 28px; font-weight: 700; line-height: 1; font-family: inherit; cursor: pointer; touch-action: manipulation;
}
html.kairo-v3 .kairo-pin-keys button:active { background: color-mix(in srgb, var(--v3-primary) 18%, var(--v3-surface)); }
html.kairo-v3 .kairo-pin-keys button:focus-visible { outline: 3px solid color-mix(in srgb, var(--v3-primary) 45%, transparent); outline-offset: 2px; }
html.kairo-v3 .kairo-pin-pad.is-busy .kairo-pin-keys { opacity: .5; pointer-events: none; }
html.kairo-v3 .kairo-pin-alt { display: block; margin: 14px auto 0; padding: 8px 12px; border: 0; background: none; color: var(--v3-primary-dark); font-size: 13px; font-weight: 700; line-height: 1; font-family: inherit; cursor: pointer; }
html.kairo-v3 #kairo-pin-login { padding: 6px 0 2px; }
html.kairo-v3 .kairo-login-card.has-pin .kairo-login-intro { display: none; }
html.kairo-v3 .kairo-pin-modal { position: fixed; inset: 0; z-index: 2600; display: grid; place-items: center; padding: 16px; background: rgba(8, 24, 38, .6); }
html.kairo-v3 .kairo-pin-modal-card, html.kairo-v3 .kairo-pin-modal-card *:focus { outline: none; }
html.kairo-v3 .kairo-pin-modal-card { width: min(100%, 340px); padding: 26px 20px 18px; border-radius: 20px; background: var(--v3-surface); border: 1px solid var(--v3-line); box-shadow: 0 28px 80px rgba(8, 24, 38, .35); }
html.kairo-v3 .kairo-pin-settings { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--v3-line); }
html.kairo-v3 .kairo-pin-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
html.kairo-v3 .kairo-pin-state { font-weight: 800; color: var(--v3-ink); }
html.kairo-v3 .kairo-pin-btns { display: flex; flex-wrap: wrap; gap: 8px; }
html.kairo-v3 .kairo-pin-btns [hidden] { display: none; }

/* Settings › Metode Pembayaran (semua template, assets/kairo-payments.js): tiap baris = kolom nama yang bisa diganti + tombol hapus. */
html.kairo-v3 .kpay-rows { display: grid; gap: 8px; margin: 12px 0; }
html.kairo-v3 .kpay-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
html.kairo-v3 .kpay-row .input { min-height: 40px; }
html.kairo-v3 .kpay-del { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
html.kairo-v3 .kpay-del:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
html.kairo-v3 .kpay-empty { color: var(--v3-muted, #4e6475); font-size: 13px; }
html.kairo-v3 .kpay-add { display: flex; gap: 8px; margin-bottom: 12px; }
html.kairo-v3 .kpay-add .input { flex: 1; min-width: 0; }
html.kairo-v3 .kpay-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Masuk layar penuh di HP untuk pengguna "Ingat saya"/PIN (owner Okt 2026): tanpa kartu melayang di atas landing; tombol X di pojok
   kanan atas kembali ke landing (#home). Isinya (keypad PIN atau form password) diletakkan di tengah dan bisa digulir bila layar pendek. */
@media (max-width: 700px) {
  html.kairo-v3[data-kairo-remembered] .kairo-login-dialog {
    padding: 0;
    align-items: stretch;
    background: var(--kairo-white);
  }

  html.kairo-v3[data-kairo-remembered] .kairo-login-backdrop,
  html.kairo-v3[data-kairo-remembered] .kairo-login-home {
    display: none !important;
  }

  html.kairo-v3[data-kairo-remembered] .kairo-login-card {
    display: flex;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 28px) 28px calc(env(safe-area-inset-bottom, 0px) + 28px);
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, var(--kairo-warm-050) 0, var(--kairo-white) 38%);
    box-shadow: none;
    transform: none;
  }

  /* Pengisi atas/bawah: isi tetap di tengah, tetapi tidak terpotong saat layar pendek. */
  html.kairo-v3[data-kairo-remembered] .kairo-login-card::before,
  html.kairo-v3[data-kairo-remembered] .kairo-login-card::after {
    flex: 1 1 0;
    content: "";
  }

  html.kairo-v3[data-kairo-remembered] .kairo-login-close {
    position: fixed;
    z-index: 3;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 26px;
  }

  html.kairo-v3[data-kairo-remembered] .kairo-login-brand {
    margin-bottom: 18px;
    justify-content: center;
  }

  /* Keypad PIN punya judul sendiri ("Masukkan PIN"); judul form tidak diulang. */
  html.kairo-v3[data-kairo-remembered] .kairo-login-card.has-pin .auth-title {
    display: none;
  }

  html.kairo-v3[data-kairo-remembered] .kairo-login-brand .kairo-brand-lockup {
    display: inline-block;
    height: 52px;
  }

  html.kairo-v3[data-kairo-remembered] .kairo-login-card .auth-title,
  html.kairo-v3[data-kairo-remembered] .kairo-login-intro {
    text-align: center;
  }

  html.kairo-v3[data-kairo-remembered] .kairo-login-card .auth-title {
    font-size: 24px !important;
  }

  /* Keypad PIN lebih besar di layar penuh. */
  html.kairo-v3[data-kairo-remembered] .kairo-login-card .kairo-pin-keys {
    grid-template-columns: repeat(3, 76px);
    gap: 16px;
  }

  html.kairo-v3[data-kairo-remembered] .kairo-login-card .kairo-pin-keys button {
    width: 76px;
    height: 76px;
    font-size: 26px;
  }

  html.kairo-v3[data-kairo-remembered] .kairo-login-card .kairo-pin-dots {
    gap: 20px;
    margin: 20px 0 8px;
  }

  html.kairo-v3[data-kairo-remembered] .kairo-login-card .kairo-pin-title {
    font-size: 20px;
  }
}

/* Layar sangat sempit (<=380px): logo + tombol + menu tetap muat tanpa turun baris. */
@media (max-width: 380px) {
  html.kairo-v3 .kairo-brand-lockup {
    height: 34px;
  }

  html.kairo-v3 .kairo-nav-actions .kairo-button {
    padding: 8px 10px;
    font-size: 12.5px;
  }

  html.kairo-v3 .kairo-nav-links {
    gap: 10px;
  }

  html.kairo-v3 .kairo-nav-links a {
    font-size: 13px;
  }
}

/* Teks kecil di halaman Daftar: kontras minimal 4,5 (dulu teal #168f8a dan abu #718096 sekitar 3,9-4,4). */
html.kairo-v3 #kairo-account-page .kairo-account-brand span,
html.kairo-v3 #kairo-account-page .kairo-inline-note,
html.kairo-v3 #kairo-account-page .username-hint:not(.ok):not(.bad) {
  color: var(--kairo-entry-muted);
}

html.kairo-v3 #kairo-account-page .kairo-step-label {
  color: #0f7a75;
}

/* Tombol yang sedang memproses (login, simpan penjualan, bayar Kasir, dll): spinner + tulisan "Loading".
   Hanya transform yang beranimasi (GPU); tidak mengubah tata letak tombol. */
html.kairo-v3 .kairo-loading::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  vertical-align: -.15em;
  animation: kairo-spin .75s linear infinite;
}

html.kairo-v3 .kairo-loading:disabled {
  cursor: progress;
  opacity: .88;
}

@keyframes kairo-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.kairo-v3 .kairo-loading::before { animation-duration: 1.6s; }
}

/* ---- Harga Pro per template + promo trial 14 hari (owner Okt 2026, PREVIEW) ---- */
html.kairo-v3 .kairo-lp-trial {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  width: fit-content; max-width: 100%; margin: 28px auto 0; padding: 9px 18px; border-radius: 999px;
  border: 1px solid #ecd9a8; background: #fdf3d6; color: #503b12; font-size: 14px; font-weight: 700; text-align: center;
}
html.kairo-v3 .kairo-lp-trial b { padding: 3px 9px; border-radius: 999px; background: var(--kairo-gold); color: #503b12; font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
html.kairo-v3 .kairo-lp-trial + .kairo-lp-price-grid { margin-top: 36px; }
html.kairo-v3 .kairo-lp-price-card > strong > em,
html.kairo-v3 .kairo-lp-plan-lite > strong > em { margin-right: 6px; font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: 0; color: #c6d5de; }

/* Pilihan template di Pricing: dropdown terbuka dulu, menutup setelah memilih */
html.kairo-v3 .kairo-lp-tplpick { position: relative; max-width: 560px; margin: 30px auto 0; }
html.kairo-v3 .kairo-lp-tplpick + .kairo-lp-price-grid { margin-top: 28px; }
html.kairo-v3 .kairo-lp-tplpick-label { display: block; margin-bottom: 8px; color: var(--kairo-delft); font-size: 13px; font-weight: 800; text-align: center; }
html.kairo-v3 .kairo-lp-tplpick-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 1.5px solid var(--kairo-delft); border-radius: 14px; background: var(--kairo-white); color: var(--kairo-delft); font: inherit; text-align: left; cursor: pointer; }
html.kairo-v3 .kairo-lp-tplpick-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--kairo-turquoise) 40%, transparent); outline-offset: 2px; }
html.kairo-v3 .kairo-lp-tplpick-cur { display: grid; gap: 2px; min-width: 0; }
html.kairo-v3 .kairo-lp-tplpick-cur strong { font-size: 16px; font-weight: 800; }
html.kairo-v3 .kairo-lp-tplpick-cur small { color: var(--kairo-entry-muted); font-size: 12.5px; font-weight: 600; }
html.kairo-v3 .kairo-lp-tplpick-btn svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
html.kairo-v3 .kairo-lp-tplpick.is-open .kairo-lp-tplpick-btn svg { transform: rotate(180deg); }
html.kairo-v3 .kairo-lp-tplpick-list { display: none; margin: 8px 0 0; padding: 6px; list-style: none; border: 1px solid var(--kairo-entry-line); border-radius: 16px; background: var(--kairo-white); box-shadow: 0 16px 36px rgba(23, 58, 89, .10); }
html.kairo-v3 .kairo-lp-tplpick.is-open .kairo-lp-tplpick-list { display: block; }
html.kairo-v3 .kairo-lp-tplpick-list button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 11px; background: transparent; color: var(--kairo-delft); font: inherit; text-align: left; cursor: pointer; }
html.kairo-v3 .kairo-lp-tplpick-list button:hover { background: #f1f8f8; }
html.kairo-v3 .kairo-lp-tplpick-list button[aria-selected="true"] { background: #e6f6f4; box-shadow: inset 0 0 0 1.5px var(--kairo-turquoise); }
html.kairo-v3 .kairo-lp-tplpick-icon { display: grid; flex: none; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: #e6f6f4; color: #0f7a75; }
html.kairo-v3 .kairo-lp-tplpick-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.kairo-v3 .kairo-lp-tplpick-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
html.kairo-v3 .kairo-lp-tplpick-text strong { font-size: 14.5px; font-weight: 800; }
html.kairo-v3 .kairo-lp-tplpick-text small { color: var(--kairo-entry-muted); font-size: 12.5px; line-height: 1.4; }
html.kairo-v3 .kairo-lp-tplpick-price { flex: none; font-size: 15px; font-weight: 800; white-space: nowrap; }
html.kairo-v3 .kairo-lp-tplpick-price small { margin-left: 2px; color: var(--kairo-entry-muted); font-size: 12px; font-weight: 700; }
@media (max-width: 560px) {
  html.kairo-v3 .kairo-lp-trial { border-radius: 16px; font-size: 13.5px; }
  html.kairo-v3 .kairo-lp-tplpick-text small { display: none; }
}
html.kairo-v3 .kairo-pp-period-note { margin: 10px 0 0; color: var(--kairo-entry-muted); font-size: 12.5px; line-height: 1.55; }
html.kairo-v3 .kairo-pp-deal b { font-weight: 800; }
html.kairo-v3 .kairo-pp-price small:first-child { margin: 0 4px 0 0; }
html.kairo-v3 .kairo-trial-note { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #e6f6f4; color: #0b5f5b; font-size: 13.5px; line-height: 1.6; }
html.kairo-v3 .kairo-trial-note.is-warn { background: #fdf3d6; color: #6b4a0a; }
html.kairo-v3 .kairo-lp-price-card > strong > i { font-style: normal; }

/* Harga & promo trial dari database (owner Okt 2026): selama data belum datang (maks 1,2 dtk, html[data-pricing-wait]) angka harga jadi kotak abu
   dan teks promo trial disembunyikan, supaya tidak ada angka lama yang berganti. Hanya warna/visibility, tanpa animasi. */
html.kairo-v3[data-pricing-wait] [data-kp],
html.kairo-v3[data-pricing-wait] [data-kp] * { color: transparent !important; text-shadow: none !important; }
html.kairo-v3[data-pricing-wait] [data-kp] { width: fit-content; max-width: 100%; border-radius: 10px; background: rgba(150, 170, 190, .22); }
html.kairo-v3[data-pricing-wait] [data-trial-only] { visibility: hidden; }
html.kairo-v3 [data-trial-only][hidden],
html.kairo-v3 [data-trial-off][hidden] { display: none !important; }

/* Orders: belum ada Topik/Kategori -> petunjuk + tombol ke Settings (owner Okt 2026) */
html.kairo-v3 .kairo-topic-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--v3-primary, #25b9b0) 45%, transparent); background: color-mix(in srgb, var(--v3-primary, #25b9b0) 7%, transparent); font-size: 13.5px; }
html.kairo-v3 .kairo-topic-empty span { flex: 1 1 220px; min-width: 0; }

/* ---- Jasa Online (owner Okt 2026, html.kairo-jasa dari loader template): bagian yang tidak dipakai usaha jasa disembunyikan.
   Modal (HPP) + pembagian laba manual per paket/add-on, Kas Modal (selalu Rp0 tanpa HPP) dan Printer struk thermal. Data lama tetap tersimpan. ---- */
html.kairo-v3.kairo-jasa #settings :is(.master-cost-field, .master-split-field, .master-manual),
html.kairo-v3.kairo-jasa #cash-capital-card,
html.kairo-v3.kairo-jasa #kairo-printer-card { display: none !important; }
/* Orders: WhatsApp, Catatan, Tip dilipat ke "Tambahan (opsional)" (kairo-v3.js foldJasaExtras). */
html.kairo-v3 #tx-form .kairo-tx-extra { grid-column: 1 / -1; border: 1px solid var(--v3-line); border-radius: var(--v3-r-md, 14px); padding: 0 14px; background: color-mix(in srgb, var(--v3-primary) 4%, transparent); }
html.kairo-v3 #tx-form .kairo-tx-extra > summary { cursor: pointer; padding: 12px 0; font-weight: 800; font-size: 13.5px; color: var(--v3-ink); list-style: none; display: flex; align-items: center; gap: 8px; }
html.kairo-v3 #tx-form .kairo-tx-extra > summary::-webkit-details-marker { display: none; }
html.kairo-v3 #tx-form .kairo-tx-extra > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
html.kairo-v3 #tx-form .kairo-tx-extra[open] > summary::before { transform: rotate(45deg); }
html.kairo-v3 #tx-form .kairo-tx-extra > summary small { font-weight: 600; color: var(--v3-muted); }
html.kairo-v3 #tx-form .kairo-tx-extra-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding-bottom: 14px; }
html.kairo-v3 #tx-form .kairo-tx-extra-body > .full { grid-column: 1 / -1; }
@media (max-width: 700px) { html.kairo-v3 #tx-form .kairo-tx-extra-body { grid-template-columns: minmax(0, 1fr); } }

/* Pembagian omzet per handler (Jasa Online) */
html.kairo-v3 .kairo-handler-card { margin: 0 0 16px; }
html.kairo-v3 .kairo-handler-card .kairo-cash-toggle { margin-bottom: 12px; }
html.kairo-v3 .kh-table { display: grid; gap: 8px; margin: 0 0 12px; }
html.kairo-v3 .kh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 132px; gap: 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--v3-line); border-radius: 12px; background: var(--v3-surface); }
html.kairo-v3 .kh-row.is-off { opacity: .66; }
html.kairo-v3 .kh-head { padding: 0 14px; border: 0; background: transparent; color: var(--v3-muted); font-size: 12.5px; font-weight: 700; }
html.kairo-v3 .kh-head span:nth-child(2) { text-align: center; }
html.kairo-v3 .kh-name { display: grid; gap: 2px; min-width: 0; }
html.kairo-v3 .kh-name strong { color: var(--v3-ink); font-size: 14.5px; overflow-wrap: anywhere; }
html.kairo-v3 .kh-name small { color: var(--v3-muted); font-size: 12.5px; line-height: 1.4; }
html.kairo-v3 .kh-pct { display: flex; align-items: center; gap: 6px; color: var(--v3-muted); font-size: 13px; }
html.kairo-v3 .kh-pct .input { width: 84px; min-width: 0; padding: 8px 10px; }
html.kairo-v3 .kh-pair { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 14px; border: 1px dashed var(--v3-line); border-radius: 12px; }
html.kairo-v3 .kh-pair label { color: var(--v3-ink); font-size: 13.5px; font-weight: 700; }
html.kairo-v3 .kh-note { margin: 0 0 12px; color: var(--v3-muted); font-size: 12.5px; line-height: 1.5; }
html.kairo-v3 .kh-label .input { width: 180px; }
html.kairo-v3 .kh-warn { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, #d99a00 14%, transparent); color: var(--v3-ink); font-size: 13px; }
html.kairo-v3 .kh-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
html.kairo-v3 .kh-status { font-size: 13px; color: var(--v3-muted); }
html.kairo-v3 .kh-status.is-bad { color: #a3384a; }
body.saas-dark .kh-status.is-bad { color: #ff9fb0; }
@media (max-width: 640px) {
  html.kairo-v3 .kh-row { grid-template-columns: minmax(0, 1fr) auto; }
  html.kairo-v3 .kh-row .kh-pct { grid-column: 1 / -1; }
  html.kairo-v3 .kh-head { display: none; }
  html.kairo-v3 .kh-actions .btn { width: 100%; }
}