/* KumisID Account (/akun) and the payment page (/pembayaran): builds on onboarding.css (tokens --ob-*, buttons,
   fields, notes, split-screen sign-in shell). This file adds the dashboard shell (dark sidebar), stores, invoices,
   plans, cancellation and payment layouts. Type: 400 body, 500 navigation and labels, 600 headings, 700 rarely. */

/* Warmer neutrals for the dashboard and the payment page only; the brand accent stays as it is. */
.ka {
  --ob-bg-2: #f7f7f5;
  --ob-ink: #1c1d21;
  --ob-muted: #686b73;
  --ob-line: #e8e8e4;
  --ob-line-strong: #d5d5cf;
  --ka-canvas: #f7f7f5;
  --ka-fill: #f2f2ef;
  --ka-side: #1c1d20;
  --ka-side-ink: #f5f5f3;
  --ka-side-muted: rgba(245, 245, 243, .62);
  --ka-side-line: rgba(255, 255, 255, .08);
  --ka-radius: 14px;
  --ka-radius-btn: 10px;
}

body.ka { margin: 0; min-height: 100vh; background: var(--ka-canvas); color: var(--ob-ink); font: 400 15px/1.6 var(--ob-font); -webkit-font-smoothing: antialiased; }
.ka h1, .ka h2, .ka h3 { font-weight: 600; letter-spacing: -.01em; }

/* Buttons and notes, softened for the dashboard */
.ka .ob-btn { min-height: 42px; border-radius: var(--ka-radius-btn); padding: 0 16px; font-size: 14.5px; font-weight: 600; transition: background-color .15s var(--ob-ease), border-color .15s var(--ob-ease), color .15s var(--ob-ease); }
.ka .ob-btn-secondary { border-color: var(--ob-line-strong); }
.ka .ob-btn-secondary:hover { background: var(--ka-fill); }
.ka .ob-btn svg { width: 16px; height: 16px; flex: none; }
.ob-btn-sm { min-height: 36px !important; padding: 0 14px !important; font-size: 14px !important; }
.ob-btn-danger { background: var(--ob-bad); color: #fff !important; }
.ob-btn-danger:hover { background: #b91c1c; }
.ob-btn:disabled { cursor: not-allowed; opacity: .45; }
.ka .ob-note { border-radius: 12px; padding: 12px 16px; font-size: 14px; }
.ka .ob-alert { border-radius: 12px; font-size: 14px; }
.ka .ob-help { font-size: 13.5px; }
.ka .ob-foot { font-size: 13px; }

/* Shell: compact dark sidebar + workspace */
.ka-app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.ka-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 28px; height: 100vh; overflow-y: auto; padding: 20px 14px 16px; background: var(--ka-side); color: var(--ka-side-ink); }
.ka-side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; color: var(--ka-side-ink) !important; font-size: 15px; font-weight: 600; text-decoration: none; }
.ka-side-brand img { width: 30px; height: 30px; flex: none; border-radius: 8px; background: #fff; padding: 3px; object-fit: contain; }
.ka-side-brand small { color: var(--ka-side-muted); font-size: 15px; font-weight: 500; }
.ka-side-nav { display: grid; gap: 2px; }
.ka-side-link {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; border: 0; border-radius: var(--ka-radius-btn);
  padding: 0 10px; background: none; color: var(--ka-side-muted) !important; font: 500 14.5px/1 var(--ob-font);
  text-decoration: none; text-align: left; cursor: pointer; transition: background-color .15s var(--ob-ease), color .15s var(--ob-ease);
}
.ka-side-link svg { width: 18px; height: 18px; flex: none; }
.ka-side-link:hover { background: rgba(255, 255, 255, .06); color: var(--ka-side-ink) !important; }
.ka-side-link[aria-current="page"] { background: rgba(255, 255, 255, .1); color: #fff !important; }
.ka-side-link[aria-current="page"] svg { color: #a9bdf8; }
.ka-side-account { display: grid; gap: 2px; margin-top: auto; border-top: 1px solid var(--ka-side-line); padding-top: 14px; }
.ka-side-account form { margin: 0; }
.ka-side-me { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 10px 8px; }
.ka-side-me > span:last-child { display: grid; min-width: 0; line-height: 1.35; }
.ka-side-me b, .ka-side-me small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-side-me b { color: var(--ka-side-ink); font-size: 14px; font-weight: 500; }
.ka-side-me small { color: var(--ka-side-muted); font-size: 12.5px; }
.ka-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(169, 189, 248, .16); color: #c9d6fb; font-size: 13px; font-weight: 600; }

.ka-content { display: flex; flex-direction: column; min-width: 0; }
.ka-main { flex: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 44px 40px 48px; animation: ob-enter .22s var(--ob-ease) both; }
.ka-main:focus { outline: none; }
.ka-stack { display: grid; gap: 40px; }
.ka-flash { margin: 0 0 24px; }
.ka-stack > .ob-note { margin: 0; }
.ka [id] { scroll-margin-top: 24px; }

/* Headings */
.ka-intro h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.3; letter-spacing: -.015em; }
.ka-intro p { margin: 0; max-width: 64ch; color: var(--ob-muted); font-size: 15px; }
.ka-eyebrow { margin: 0 0 6px; color: var(--ob-accent); font-size: 13.5px; font-weight: 500; }
.ka-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ka-section-head h2 { margin: 0; font-size: 17px; }
.ka-section-head small { color: var(--ob-muted); font-size: 13.5px; }
.ka-surface { border: 1px solid var(--ob-line); border-radius: var(--ka-radius); background: var(--ob-bg); }
.ka-empty { padding: 32px 20px; color: var(--ob-muted); font-size: 14px; text-align: center; }
.ka-empty b { display: block; margin-bottom: 2px; color: var(--ob-ink); font-size: 15px; font-weight: 600; }

/* Badges: the label always says the state; colour only supports it. */
.ka-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px 3px 9px; font-size: 12.5px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.ka-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ka-badge-good { background: var(--ob-good-soft); color: var(--ob-good); }
.ka-badge-accent { background: var(--ob-accent-soft); color: var(--ob-accent); }
.ka-badge-warn { background: var(--ob-warn-soft); color: var(--ob-warn); }
.ka-badge-bad { background: var(--ob-bad-soft); color: var(--ob-bad); }
.ka-badge-muted { background: var(--ka-fill); color: var(--ob-muted); }

/* Stores: one card each, the app button is the main action */
.ka-stores { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ka-store-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 20px 22px 18px; }
.ka-store-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ob-accent-soft); color: var(--ob-accent); font-size: 17px; font-weight: 600; }
.ka-store-name { min-width: 0; }
.ka-store-name h3 { margin: 0 0 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16.5px; }
.ka-store-name a { color: var(--ob-muted) !important; font-size: 14px; text-decoration: none; overflow-wrap: anywhere; }
.ka-store-name a:hover { color: var(--ob-accent) !important; text-decoration: underline; }
.ka-store-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.4fr); gap: 16px; margin: 0; border-top: 1px solid var(--ob-line); padding: 14px 22px; }
.ka-store-facts dt { color: var(--ob-muted); font-size: 13px; font-weight: 500; }
.ka-store-facts dd { margin: 2px 0 0; font-size: 14.5px; }
.ka-store-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--ob-line); padding: 14px 22px; }
.ka-link-quiet { margin-right: auto; border-radius: 8px; padding: 6px 8px; margin-left: -8px; color: var(--ob-muted) !important; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .15s var(--ob-ease), color .15s var(--ob-ease); }
.ka-link-quiet:hover { background: var(--ob-bad-soft); color: var(--ob-bad) !important; }

/* Invoices: compact table, stacked cards on phones */
.ka-table-wrap { overflow-x: auto; }
.ka-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ka-table th { padding: 11px 18px; border-bottom: 1px solid var(--ob-line); color: var(--ob-muted); font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; }
.ka-table td { padding: 12px 18px; border-top: 1px solid var(--ob-line); vertical-align: middle; }
.ka-table tbody tr:first-child td { border-top: 0; }
.ka-table tbody tr { transition: background-color .15s var(--ob-ease); }
.ka-table tbody tr:hover { background: #fbfbfa; }
.ka-table .ka-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ka-table .ka-code { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ka-table .ka-action { width: 1%; text-align: right; white-space: nowrap; }

/* Help */
.ka-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ka-help > div { padding: 18px 22px 20px; border-left: 1px solid var(--ob-line); }
.ka-help > div:first-child { border-left: 0; }
.ka-help h3 { margin: 0 0 4px; font-size: 15px; }
.ka-help p { margin: 0; color: var(--ob-muted); font-size: 14px; }
.ka-help a { font-weight: 500; text-decoration: none; }
.ka-help a:hover { text-decoration: underline; }
.ka-contact { margin: 14px 0 0; color: var(--ob-muted); font-size: 14px; }
.ka-contact a { font-weight: 500; }

/* Plans */
.ka-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ka-plan { display: grid; align-content: start; gap: 14px; padding: 22px 22px 24px; }
.ka-plan.is-current { border-color: color-mix(in srgb, var(--ob-accent) 55%, transparent); box-shadow: 0 0 0 3px var(--ob-accent-soft); }
.ka-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.ka-plan h2 { margin: 0; font-size: 18px; }
.ka-plan-tagline { margin: -8px 0 0; color: var(--ob-muted); font-size: 14px; }
.ka-plan-price { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.ka-plan-price small { color: var(--ob-muted); font-size: 13.5px; font-weight: 400; letter-spacing: 0; }
.ka-plan-price.is-tba { color: var(--ob-muted); font-size: 15.5px; font-weight: 500; }
.ka-plan ul { display: grid; gap: 8px; margin: 0; border-top: 1px solid var(--ob-line); padding: 14px 0 0; list-style: none; font-size: 14px; }
.ka-plan li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.ka-plan li::before { content: ''; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--ob-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.4 9.2l2.4 2.4 4.8-5' fill='none' stroke='%23315de5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.ka-plan-for { margin: 0; border-radius: 10px; padding: 8px 12px; background: var(--ob-accent-soft); color: var(--ob-ink); font-size: 13.5px; }
.ka-plan-for b { font-weight: 500; }

/* Focused flows: cancellation and payment */
.ka-focus { max-width: 600px; margin: 0 auto; }
.ka-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; border-radius: 8px; padding: 4px 8px; margin-left: -8px; color: var(--ob-muted) !important; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .15s var(--ob-ease), color .15s var(--ob-ease); }
.ka-back:hover { background: var(--ka-fill); color: var(--ob-ink) !important; }
.ka-panel { padding: 28px; }
.ka-panel h1 { margin: 0 0 6px; font-size: 24px; line-height: 1.3; letter-spacing: -.015em; }
.ka-panel .ka-sub { margin: 0 0 22px; color: var(--ob-muted); font-size: 15px; }
.ka-panel .ka-sub b { color: var(--ob-ink); font-weight: 600; }
.ka-panel > :last-child, .ka-panel form > :last-child { margin-bottom: 0; }
.ka-panel-title { margin: 0 0 6px; font-size: 17px; }
.ka-muted { color: var(--ob-muted); font-size: 13.5px; font-weight: 400; }
.ka-facts { display: grid; margin: 0 0 20px; border: 1px solid var(--ob-line); border-radius: 12px; }
.ka-facts > div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ob-line); }
.ka-facts > div:first-child { border-top: 0; }
.ka-facts dt { color: var(--ob-muted); font-size: 14px; }
.ka-facts dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ka-caution { margin: 0 0 20px; border: 1px solid color-mix(in srgb, var(--ob-warn) 22%, transparent); border-radius: 12px; padding: 14px 16px; background: var(--ob-warn-soft); }
.ka-caution h2 { margin: 0 0 8px; color: var(--ob-warn); font-size: 15px; }
.ka-caution ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: 14px; }
.ka-caution b { font-weight: 600; }
.ka-info { border-color: var(--ob-line); background: var(--ka-fill); }
.ka-info h2 { color: var(--ob-ink); }
.ka-check { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--ob-line); border-radius: 12px; padding: 14px 16px; cursor: pointer; font-size: 14.5px; transition: border-color .15s var(--ob-ease), background-color .15s var(--ob-ease); }
.ka-check:hover { border-color: var(--ob-line-strong); }
.ka-check:has(input:checked) { border-color: color-mix(in srgb, var(--ob-bad) 35%, transparent); background: var(--ob-bad-soft); }
.ka-check:has(input[aria-invalid="true"]) { border-color: var(--ob-bad); }
.ka-check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--ob-bad); }
.ka-check + .ob-error { margin: 8px 0 0; font-size: 13px; }
.ka-panel .ob-actions { margin-top: 24px; }
.ka-panel .ob-actions .ob-btn-danger { margin-left: auto; }
.ka-amount { margin: 0 0 20px; }
.ka-amount small { display: block; color: var(--ob-muted); font-size: 14px; }
.ka-amount strong { display: block; font-size: 32px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.ka-pay-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.ka-panel .ka-pay-title h1 { margin: 0; }

/* Payment page header (public: no sidebar, no JS, no external font; see PublicPaymentHeaders) */
.ka-header { border-bottom: 1px solid var(--ob-line); background: var(--ob-bg); }
.ka-header-in { display: flex; align-items: center; gap: 16px; max-width: 648px; height: 60px; margin: 0 auto; padding: 0 24px; }
.ka-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ob-ink) !important; text-decoration: none; }
.ka-brand img { width: 28px; height: 28px; object-fit: contain; }
.ka-brand b { font-size: 15px; font-weight: 600; }
.ka-brand small { color: var(--ob-muted); font-size: 15px; font-weight: 500; }
.ka-secure { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ob-muted); font-size: 13px; }
.ka-secure svg { width: 14px; height: 14px; color: var(--ob-good); }
.ka-header + .ka-main { max-width: 648px; padding-left: 24px; padding-right: 24px; }

/* Sign-in brand panel: a sketch of the account's store list (decorative; used by account/auth) */
.ka-vis-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 4px; }
.ka-vis-head b { width: 72px; height: 7px; border-radius: 3px; background: rgba(255, 255, 255, .5); }
.ka-vis-head i { width: 44px; height: 7px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.ka-vis-list { display: grid; padding: 4px 14px 10px; }
.ka-vis-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ob-on-dark-line); }
.ka-vis-row:first-child { border-top: 0; }
.ka-vis-row > i { width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--ob-on-dark-line); }
.ka-vis-row b, .ka-vis-row em { display: block; height: 6px; border-radius: 3px; }
.ka-vis-row b { width: 62%; background: rgba(255, 255, 255, .5); }
.ka-vis-row em { width: 42%; margin-top: 7px; background: rgba(255, 255, 255, .14); }
.ka-vis-row:nth-child(2) b { width: 48%; }
.ka-vis-row:nth-child(2) em { width: 56%; }
.ka-vis-row:nth-child(3) b { width: 70%; }
.ka-vis-pill { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.ka-vis-pill.is-good { background: rgba(34, 197, 94, .16); color: #86efac; }
.ka-vis-pill.is-trial { background: rgba(49, 93, 229, .3); color: #c7d4fb; }
.ka-vis-pill.is-due { background: rgba(245, 158, 11, .16); color: #fcd34d; }

/* Tablet */
@media (max-width: 1080px) {
  .ka-app { grid-template-columns: 216px minmax(0, 1fr); }
  .ka-main { padding: 36px 28px 40px; }
  .ka-plans { grid-template-columns: 1fr; }
  .ka-help { grid-template-columns: 1fr; }
  .ka-help > div { border-left: 0; border-top: 1px solid var(--ob-line); }
  .ka-help > div:first-child { border-top: 0; }
}

/* Phone: the sidebar becomes a compact dark bar with the menu as a row of pills */
@media (max-width: 767px) {
  .ka-app { display: block; }
  .ka-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 8px; overflow: visible; padding: 12px 16px; }
  .ka-side-brand { padding: 0; }
  .ka-side-brand small { display: none; }
  .ka-side-account { display: flex; align-items: center; gap: 4px; margin: 0 0 0 auto; border: 0; padding: 0; }
  .ka-side-me { padding: 0 4px 0 0; }
  .ka-side-me > span:last-child { display: none; }
  .ka-side-account .ka-side-link { min-height: 36px; padding: 0 10px; }
  .ka-side-nav { order: 3; display: flex; gap: 4px; flex-basis: 100%; overflow-x: auto; margin: 0 -4px; padding: 2px 4px; }
  .ka-side-nav .ka-side-link { width: auto; min-height: 36px; padding: 0 12px; white-space: nowrap; }
  .ka-main { padding: 24px 16px 32px; }
  .ka-stack { gap: 32px; }
  .ka-intro h1 { font-size: 23px; }
  .ka-store-head { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .ka-store-mark { width: 40px; height: 40px; font-size: 16px; }
  .ka-store-head .ka-badge { grid-column: 2; justify-self: start; }
  .ka-store-facts { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
  .ka-store-facts > div { display: grid; grid-template-columns: 104px 1fr; gap: 8px; }
  .ka-store-facts dd { margin: 0; }
  .ka-store-foot { flex-direction: column-reverse; align-items: stretch; gap: 4px; padding: 14px 16px 12px; }
  .ka-store-foot .ob-btn { width: 100%; }
  .ka-link-quiet { margin: 0; text-align: center; }
  /* Invoices: one block per invoice, labels from data-label. */
  .ka-table thead { display: none; }
  .ka-table, .ka-table tbody, .ka-table tr, .ka-table td { display: block; width: 100%; }
  .ka-table tr { border-top: 1px solid var(--ob-line); padding: 14px 16px; }
  .ka-table tbody tr:first-child { border-top: 0; }
  .ka-table tbody tr:hover { background: none; }
  .ka-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; text-align: right; }
  .ka-table td::before { content: attr(data-label); color: var(--ob-muted); text-align: left; }
  .ka-table td.ka-action { width: 100%; padding-top: 10px; }
  .ka-table td.ka-action::before { content: none; }
  .ka-table td.ka-action .ob-btn { width: 100%; }
  .ka-table td.ka-action:empty { display: none; }
  .ka-panel { padding: 20px; }
  .ka-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .ka-header-in { padding: 0 16px; }
  .ka-header + .ka-main { padding-left: 16px; padding-right: 16px; }
  .ka-brand small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ka-main { animation: none; }
  .ka *, .ka *::before, .ka *::after { transition: none !important; }
}