/* ============================================================
   PayKita Elegant UI · light + dark
   Reference direction: calm merchant dashboard, Inter,
   JetBrains Mono for technical values, separated sidebar sections.
   UI-only override layer. Backend/form behavior is untouched.
   ============================================================ */

:root,
html[data-theme="light"] {
  --pk-brand:#174d9b;
  --pk-brand-strong:#123f82;
  --pk-brand-soft:#edf2f9;
  --pk-success:#19744a;
  --pk-success-soft:#e7f2ec;
  --pk-pending:#8f6200;
  --pk-pending-soft:#f7f0dd;
  --pk-danger:#a93030;
  --pk-danger-soft:#f7e9e9;
  --pk-ink:#191c1d;
  --pk-text:#344054;
  --pk-muted:#687284;
  --pk-faint:#9aa3b2;
  --pk-line:#e4e8ef;
  --pk-line-strong:#d3d9e2;
  --pk-surface:#f5f6f8;
  --pk-card:#ffffff;
  --pk-card-alt:#fafbfc;
  --pk-hover:#f8fafd;
  --pk-input:#ffffff;
  --pk-code:#101722;
  --pk-code-text:#e8edf5;
  --pk-sidebar:248px;
  --pk-radius:12px;
  --pk-shadow:0 1px 2px rgba(16,24,40,.035);
  --pk-shadow-pop:0 18px 44px rgba(16,24,40,.10);
  --pk-overlay:rgba(16,24,40,.32);
}

html[data-theme="dark"] {
  --pk-brand:#4585d8;
  --pk-brand-strong:#6b9fe2;
  --pk-brand-soft:#17243a;
  --pk-success:#4fb083;
  --pk-success-soft:#13291f;
  --pk-pending:#d7a63f;
  --pk-pending-soft:#2b2312;
  --pk-danger:#dd7f7f;
  --pk-danger-soft:#2d1a1a;
  --pk-ink:#e6eaf1;
  --pk-text:#cbd2dc;
  --pk-muted:#97a1b1;
  --pk-faint:#6c7686;
  --pk-line:#232a35;
  --pk-line-strong:#303846;
  --pk-surface:#0e1116;
  --pk-card:#151a22;
  --pk-card-alt:#121821;
  --pk-hover:#1a212b;
  --pk-input:#11161d;
  --pk-code:#0a0e14;
  --pk-code-text:#dfe6ef;
  --pk-shadow:0 1px 2px rgba(0,0,0,.18);
  --pk-shadow-pop:0 20px 54px rgba(0,0,0,.34);
  --pk-overlay:rgba(0,0,0,.58);
}

html,
body {
  background:var(--pk-surface) !important;
  color:var(--pk-ink) !important;
}

html body,
html body button,
html body input,
html body select,
html body textarea,
html body .app-shell,
html body .app-shell *:not(code):not(pre):not(kbd):not(samp) {
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}

html body code,
html body pre,
html body kbd,
html body samp,
html body .mono,
html body [class*="order-id"],
html body [class*="endpoint-path"],
html body [class*="-code"],
html body [class*="-timer"],
html body [class*="-count"],
html body .dbs-trend,
html body .dbs-chip,
html body .dbs-summary,
html body .dbs-chart-legend,
html body .dbs-day small,
html body .dbs-filters a,
html body .dbs-table th,
html body .dbs-pagination,
html body .ads-pill,
html body .ads-tool small,
html body .ads-table th,
html body .ads-footer {
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace !important;
}

::selection { background:var(--pk-brand-soft); color:var(--pk-brand); }

/* V6 typography: Inter — neutral, compact, editorial UI rhythm. */
html body h1,
html body h2,
html body h3 {
  letter-spacing:-.025em;
}

html body .side-nav a,
html body .mobile-nav a,
html body button,
html body .btn {
  letter-spacing:-.005em;
}

/* ---------- shell ---------- */
html body .app-shell,
html body .app-shell.sidebar-collapsed {
  display:grid !important;
  grid-template-columns:var(--pk-sidebar) minmax(0,1fr) !important;
  min-height:100vh !important;
  background:var(--pk-surface) !important;
}

html body .app-shell > main.content {
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  padding:34px 36px 56px !important;
  background:var(--pk-surface) !important;
  color:var(--pk-ink) !important;
}

html body .app-shell > main.content > * {
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ---------- separated sidebar ---------- */
html body .app-shell #paykita-sidebar.pk-sidebar {
  position:sticky !important;
  top:0 !important;
  align-self:start !important;
  width:var(--pk-sidebar) !important;
  min-width:var(--pk-sidebar) !important;
  max-width:var(--pk-sidebar) !important;
  height:100vh !important;
  min-height:100vh !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  background:var(--pk-card) !important;
  color:var(--pk-text) !important;
  border:0 !important;
  border-right:1px solid var(--pk-line) !important;
  box-shadow:none !important;
}

html body #paykita-sidebar .pk-sidebar-brand-row,
html body #paykita-sidebar .retro-sidebar-top {
  flex:0 0 auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:22px 20px 18px !important;
  display:flex !important;
  align-items:center !important;
  background:var(--pk-card) !important;
  border:0 !important;
  border-bottom:1px solid var(--pk-line) !important;
}

html body #paykita-sidebar .sidebar-brand {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  width:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  text-decoration:none !important;
  background:transparent !important;
}

.pk-brand-mark {
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--pk-brand);
  color:#fff;
  font-size:14px;
  font-weight:700;
}

html body #paykita-sidebar .sidebar-brand-copy {
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.pk-brand-name {
  display:block;
  color:var(--pk-ink);
  font-size:15px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.01em;
}

html body #paykita-sidebar .sidebar-brand-copy small {
  display:block !important;
  margin-top:2px !important;
  color:var(--pk-faint) !important;
  font-size:10.5px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.pk-sidebar-scroll {
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px 12px 18px;
  scrollbar-width:thin;
  scrollbar-color:var(--pk-line-strong) transparent;
}

.pk-nav-section + .pk-nav-section { margin-top:7px; }
.pk-nav-heading {
  padding:12px 10px 7px;
  color:var(--pk-faint);
  font-size:10px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}

html body #paykita-sidebar .pk-nav-list,
html body #paykita-sidebar .retro-nav.pk-nav-list {
  display:flex !important;
  flex:0 0 auto !important;
  flex-direction:column !important;
  align-content:initial !important;
  gap:2px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}

html body #paykita-sidebar .pk-nav-list a,
html body #paykita-sidebar .retro-nav.pk-nav-list a {
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:100% !important;
  min-height:38px !important;
  margin:0 !important;
  padding:8px 10px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:var(--pk-muted) !important;
  text-decoration:none !important;
  font-size:12.5px !important;
  line-height:1.35 !important;
  font-weight:500 !important;
  box-shadow:none !important;
  transform:none !important;
  transition:background .15s ease,color .15s ease !important;
}

html body #paykita-sidebar .pk-nav-list a::before { display:none !important; }
html body #paykita-sidebar .pk-nav-list a:hover {
  background:var(--pk-surface) !important;
  color:var(--pk-ink) !important;
}
html body #paykita-sidebar .pk-nav-list a.active {
  background:var(--pk-brand-soft) !important;
  color:var(--pk-brand) !important;
  font-weight:600 !important;
}

html body #paykita-sidebar .nav-icon {
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  display:grid !important;
  place-items:center !important;
  color:inherit !important;
}
html body #paykita-sidebar .nav-icon svg {
  width:17px !important;
  height:17px !important;
  display:block !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.6 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
html body #paykita-sidebar .nav-label {
  min-width:0 !important;
  flex:1 1 auto !important;
  color:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
}

html body #paykita-sidebar .pk-sidebar-footer,
html body #paykita-sidebar .retro-sidebar-footer.pk-sidebar-footer {
  flex:0 0 auto !important;
  margin:0 !important;
  padding:14px 14px 16px !important;
  display:block !important;
  background:var(--pk-card) !important;
  border:0 !important;
  border-top:1px solid var(--pk-line) !important;
}
html body #paykita-sidebar .pk-sidebar-footer::before { display:none !important; }

.pk-sidebar-user {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:0 2px 12px;
  color:var(--pk-ink);
  text-decoration:none;
}
.pk-sidebar-avatar {
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border:1px solid var(--pk-line);
  border-radius:50%;
  background:var(--pk-surface);
  color:var(--pk-muted);
  font-size:11px;
  font-weight:600;
}
html body #paykita-sidebar .pk-sidebar-user-copy {
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
}
html body #paykita-sidebar .pk-sidebar-user-copy strong {
  display:block !important;
  color:var(--pk-ink) !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html body #paykita-sidebar .pk-sidebar-user-copy small {
  display:block !important;
  margin-top:2px !important;
  color:var(--pk-faint) !important;
  font-size:10px !important;
  line-height:1.3 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.pk-sidebar-footer-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pk-sidebar-footer-actions form { margin:0 !important; }
.pk-theme-button,
html body #paykita-sidebar .retro-logout {
  width:100% !important;
  min-height:36px !important;
  margin:0 !important;
  padding:7px 9px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:8px !important;
  background:var(--pk-card-alt) !important;
  color:var(--pk-muted) !important;
  font-size:10.5px !important;
  line-height:1 !important;
  font-weight:600 !important;
  cursor:pointer !important;
  text-decoration:none !important;
}
.pk-theme-button:hover,
html body #paykita-sidebar .retro-logout:hover {
  background:var(--pk-surface) !important;
  color:var(--pk-ink) !important;
}
.pk-theme-button svg {
  width:15px;
  height:15px;
  flex:0 0 15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
html[data-theme="light"] .pk-theme-sun,
html[data-theme="dark"] .pk-theme-moon { display:none; }
html[data-theme="light"] .pk-theme-moon,
html[data-theme="dark"] .pk-theme-sun { display:block; }

/* ---------- mobile header ---------- */
.pk-mobile-actions { display:flex; align-items:center; gap:7px; }
.pk-theme-button-mobile { width:34px !important; min-height:34px !important; padding:0 !important; }
html body .paykita-mobile-header {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-ink) !important;
  box-shadow:none !important;
}
html body .paykita-mobile-profile {
  border-color:var(--pk-line) !important;
  background:var(--pk-surface) !important;
  color:var(--pk-brand) !important;
}
html body .mobile-sidebar-burger,
html body .sidebar-mobile-close {
  color:var(--pk-muted) !important;
  background:transparent !important;
}
html body .mobile-sidebar-clickout { background:var(--pk-overlay) !important; }

/* ---------- page headings ---------- */
html body .page-head,
html body .dbs-head,
html body [class$="-head"]:not(.panel-head):not(.cks-head):not(.pk-announcement-head) {
  border-color:var(--pk-line) !important;
}
html body .page-head h1,
html body .content h1,
html body .dbs-head h1,
html body .ads-head h1 {
  color:var(--pk-ink) !important;
  font-size:27px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  letter-spacing:-.025em !important;
}
html body .content h2,
html body .content h3,
html body .content h4,
html body .dbs-card-head h2,
html body .dbs-orders-top h2,
html body .ads-card-title h2 {
  color:var(--pk-ink) !important;
}
html body .muted,
html body .page-head p,
html body .dbs-head p,
html body .ads-head p,
html body [class$="-sub"],
html body [class*="-help"] { color:var(--pk-muted) !important; }

/* ---------- cards / panels ---------- */
html body .content .card,
html body .dbs-card,
html body .dbs-metric,
html body .ads-card,
html body .project-card,
html body .provider-card,
html body .subscription-card,
html body .settings-card,
html body .profile-card,
html body .listener-card,
html body .api-section,
html body [class$="-panel"]:not(.panel-head),
html body [class$="-box"]:not(.status-box):not(.sandbox-box) {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-text) !important;
  box-shadow:var(--pk-shadow) !important;
}
html body .content .card,
html body .dbs-card,
html body .dbs-metric,
html body .ads-card { border-radius:var(--pk-radius) !important; }

html body .dbs-metrics {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:0 !important;
  overflow:hidden !important;
  margin-bottom:24px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:var(--pk-radius) !important;
  background:var(--pk-card) !important;
}
html body .dbs-metric {
  min-height:132px !important;
  margin:0 !important;
  padding:22px 24px !important;
  border:0 !important;
  border-left:1px solid var(--pk-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
html body .dbs-metric:first-child { border-left:0 !important; }
html body .dbs-metric-top { color:var(--pk-muted) !important; }
html body .dbs-metric-top span:first-child { font-size:12px !important; font-weight:500 !important; }
html body .dbs-metric-icon { color:var(--pk-faint) !important; background:transparent !important; width:auto !important; height:auto !important; }
html body .dbs-metric strong {
  margin-top:16px !important;
  color:var(--pk-ink) !important;
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  font-size:25px !important;
  line-height:1 !important;
  font-weight:500 !important;
  letter-spacing:-.025em !important;
}
html body .dbs-trend { margin-top:10px !important; color:var(--pk-success) !important; font-size:10px !important; }
html body .dbs-trend.neutral { color:var(--pk-faint) !important; }

/* ---------- dashboard ---------- */
html body .dbs-page { max-width:1180px !important; color:var(--pk-ink) !important; }
html body .dbs-head {
  padding:22px 0 30px !important;
  margin:0 !important;
  border-bottom:0 !important;
  align-items:center !important;
}
html body .dbs-statuses {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  max-width:680px !important;
}
html body .app-shell > main.content .dbs-statuses .dbs-chip {
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  min-height:30px !important;
  padding:6px 10px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:999px !important;
  background:var(--pk-card) !important;
  color:var(--pk-muted) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04) !important;
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif !important;
  font-size:10.5px !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}
html body .app-shell > main.content .dbs-statuses .dbs-chip::before {
  content:"" !important;
  display:block !important;
  width:6px !important;
  height:6px !important;
  flex:0 0 6px !important;
  border-radius:50% !important;
  background:var(--pk-faint) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pk-faint) 13%,transparent) !important;
}
html body .app-shell > main.content .dbs-statuses .dbs-chip.ok {
  background:var(--pk-success-soft) !important;
  color:var(--pk-success) !important;
  border-color:color-mix(in srgb,var(--pk-success) 24%,var(--pk-line)) !important;
}
html body .app-shell > main.content .dbs-statuses .dbs-chip.ok::before {
  background:var(--pk-success) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pk-success) 13%,transparent) !important;
}
html body .app-shell > main.content .dbs-statuses .dbs-chip.bad {
  background:var(--pk-danger-soft) !important;
  color:var(--pk-danger) !important;
  border-color:color-mix(in srgb,var(--pk-danger) 24%,var(--pk-line)) !important;
}
html body .app-shell > main.content .dbs-statuses .dbs-chip.bad::before {
  background:var(--pk-danger) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pk-danger) 13%,transparent) !important;
}
html[data-theme="dark"] body .app-shell > main.content .dbs-statuses .dbs-chip {
  box-shadow:none !important;
}
html body .dbs-card { margin-bottom:24px !important; padding:0 !important; overflow:hidden !important; }
html body .dbs-card-head,
html body .dbs-orders-top { padding:20px 24px 17px !important; margin:0 !important; border-color:var(--pk-line) !important; }
html body .dbs-card-head h2,
html body .dbs-orders-top h2 { font-size:15px !important; font-weight:600 !important; letter-spacing:-.01em !important; }
html body .dbs-summary { margin-top:4px !important; color:var(--pk-muted) !important; font-size:10px !important; }
html body .dbs-summary strong { color:var(--pk-text) !important; font-weight:500 !important; }
html body .dbs-export summary {
  padding:6px 10px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:7px !important;
  background:var(--pk-card) !important;
  color:var(--pk-muted) !important;
  font-size:10.5px !important;
}
html body .dbs-export-menu {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
  box-shadow:var(--pk-shadow-pop) !important;
}
html body .dbs-export-menu a { color:var(--pk-text) !important; }
html body .dbs-export-menu a:hover { background:var(--pk-hover) !important; }
html body .dbs-chart-box {
  margin:0 24px 20px !important;
  min-height:210px !important;
  padding:14px 12px 8px !important;
  border:0 !important;
  border-top:1px solid var(--pk-line) !important;
  border-radius:0 !important;
  background:var(--pk-card) !important;
  box-shadow:none !important;
}
html body .dbs-chart-legend { color:var(--pk-muted) !important; }
html body .dbs-legend i { background:color-mix(in srgb,var(--pk-brand) 25%,var(--pk-card)) !important; }
html body .dbs-legend.paid i { background:var(--pk-success) !important; }
html body .dbs-bar { background:color-mix(in srgb,var(--pk-brand) 24%,var(--pk-card)) !important; }
html body .dbs-bar.paid { background:var(--pk-success) !important; opacity:.65 !important; }
html body .dbs-day small { color:var(--pk-faint) !important; }
html body .dbs-orders-card { padding:0 !important; }
html body .dbs-filters { padding:0 !important; border:0 !important; background:transparent !important; gap:2px !important; }
html body .dbs-filters a { min-width:auto !important; padding:6px 10px !important; color:var(--pk-muted) !important; border-radius:7px !important; }
html body .dbs-filters a.active { background:var(--pk-brand-soft) !important; color:var(--pk-brand) !important; box-shadow:none !important; }

/* ---------- tables ---------- */
html body .table-wrap,
html body .dbs-table-wrap,
html body .ads-table-wrap {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
}
html body table,
html body .dbs-table,
html body .ads-table { color:var(--pk-text) !important; }
html body table th,
html body .dbs-table th,
html body .ads-table th {
  padding:10px 20px !important;
  background:var(--pk-card-alt) !important;
  color:var(--pk-faint) !important;
  border-color:var(--pk-line) !important;
  font-size:9.5px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
html body table td,
html body .dbs-table td,
html body .ads-table td {
  color:var(--pk-text) !important;
  border-color:var(--pk-line) !important;
}
html body table tbody tr:hover,
html body .dbs-table tbody tr:hover,
html body .ads-table tbody tr:hover { background:var(--pk-hover) !important; }
html body .dbs-order-link { color:var(--pk-ink) !important; }
html body .dbs-provider { color:var(--pk-faint) !important; }
html body .dbs-action,
html body .text-link,
html body .back-link { color:var(--pk-brand) !important; }
html body .dbs-pagination,
html body .ads-footer { color:var(--pk-muted) !important; border-color:var(--pk-line) !important; }
html body .dbs-pagebtns a,
html body .dbs-pagebtns span,
html body .ads-pages a,
html body .ads-pages span {
  background:var(--pk-card) !important;
  color:var(--pk-muted) !important;
  border-color:var(--pk-line) !important;
}

/* ---------- statuses ---------- */
html body .badge,
html body .status-chip,
html body .dbs-badge,
html body .ads-pill,
html body [class*="-status"] {
  box-shadow:none !important;
}
html body .badge.paid,
html body .badge.success,
html body .dbs-badge.paid,
html body .ads-pill.ok,
html body .status-chip.ok { background:var(--pk-success-soft) !important; color:var(--pk-success) !important; }
html body .badge.pending,
html body .dbs-badge.pending { background:var(--pk-pending-soft) !important; color:var(--pk-pending) !important; }
html body .badge.expired,
html body .badge.cancelled,
html body .dbs-badge.expired,
html body .dbs-badge.cancelled,
html body .ads-pill.off,
html body .status-chip.bad { background:var(--pk-danger-soft) !important; color:var(--pk-danger) !important; }
html body .badge.neutral { background:var(--pk-card-alt) !important; color:var(--pk-muted) !important; }

/* ---------- forms ---------- */
html body label { color:var(--pk-text) !important; }
html body input,
html body textarea,
html body select,
html body .content input,
html body .content textarea,
html body .content select {
  background:var(--pk-input) !important;
  color:var(--pk-ink) !important;
  border-color:var(--pk-line-strong) !important;
  box-shadow:none !important;
}
html body input::placeholder,
html body textarea::placeholder { color:var(--pk-faint) !important; }
html body input:focus,
html body textarea:focus,
html body select:focus {
  border-color:var(--pk-brand) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pk-brand) 14%,transparent) !important;
}
html body .btn,
html body button.btn,
html body a.btn {
  border-radius:8px !important;
  box-shadow:none !important;
}
html body .btn-primary,
html body .content .btn-primary {
  background:var(--pk-brand) !important;
  border-color:var(--pk-brand) !important;
  color:#fff !important;
}
html body .btn-primary:hover { background:var(--pk-brand-strong) !important; border-color:var(--pk-brand-strong) !important; }
html body .btn:not(.btn-primary):not(.btn-danger) {
  background:var(--pk-card) !important;
  color:var(--pk-text) !important;
  border-color:var(--pk-line-strong) !important;
}
html body .btn:not(.btn-primary):not(.btn-danger):hover { background:var(--pk-hover) !important; }
html body .btn-danger { background:var(--pk-danger-soft) !important; color:var(--pk-danger) !important; border-color:color-mix(in srgb,var(--pk-danger) 32%,var(--pk-line)) !important; }

/* ---------- admin ---------- */
html body .ads-page { color:var(--pk-ink) !important; }
html body .ads-tool { background:var(--pk-card-alt) !important; border-color:var(--pk-line) !important; }
html body .ads-tool strong { color:var(--pk-ink) !important; }
html body .ads-tool small { color:var(--pk-muted) !important; }
html body .ads-search input,
html body .ads-price-input,
html body .ads-field input,
html body .ads-field textarea { background:var(--pk-input) !important; border-color:var(--pk-line-strong) !important; color:var(--pk-ink) !important; }
html body .ads-price-input span,
html body .ads-pricing-actions p,
html body .ads-help { color:var(--pk-muted) !important; }
html body .ads-price-field label,
html body .ads-field label,
html body .ads-publish-toggle { color:var(--pk-text) !important; }
html body .ads-pricing-save,
html body .ads-announcement-save { background:var(--pk-brand) !important; color:#fff !important; }
html body .ads-announcement-preview { background:var(--pk-card-alt) !important; border-color:var(--pk-line) !important; }
html body .ads-announcement-preview h3 { color:var(--pk-ink) !important; }
html body .ads-announcement-preview p,
html body .ads-announcement-preview small { color:var(--pk-muted) !important; }
html body .ads-actions button { background:var(--pk-card) !important; color:var(--pk-text) !important; border-color:var(--pk-line-strong) !important; }

/* ---------- notes, api/docs, details ---------- */
html body .api-note,
html body .status-box,
html body .key-help > div,
html body .sandbox-box,
html body .empty,
html body .provider-info-note,
html body .provider-standby-note,
html body .qris-inline-empty,
html body [class*="-notice"],
html body [class*="-note"] {
  background:var(--pk-card-alt) !important;
  color:var(--pk-muted) !important;
  border-color:var(--pk-line) !important;
}
html body .details > div,
html body hr { border-color:var(--pk-line) !important; }
html body .details dt { color:var(--pk-muted) !important; }
html body .details dd { color:var(--pk-ink) !important; }
html body pre {
  background:var(--pk-code) !important;
  color:var(--pk-code-text) !important;
  border:1px solid var(--pk-line) !important;
}

/* ---------- auth + checkout ---------- */
html body .login-wrap,
html body .checkout-wrap,
html body .login-stitch,
html body .cks-page {
  background:var(--pk-surface) !important;
  color:var(--pk-ink) !important;
}
html body .login-card,
html body .checkout-card,
html body .login-stitch-card,
html body .cks-card {
  background:var(--pk-card) !important;
  color:var(--pk-ink) !important;
  border-color:var(--pk-line) !important;
  box-shadow:var(--pk-shadow-pop) !important;
}
html body .login-stitch-brand h1,
html body .login-stitch-title h2,
html body .cks-head h1,
html body .cks-amount { color:var(--pk-ink) !important; }
html body .login-stitch-brand p,
html body .login-stitch-title p,
html body .cks-order,
html body .cks-amount-label { color:var(--pk-muted) !important; }
html body .login-stitch-google { background:var(--pk-card) !important; color:var(--pk-text) !important; border-color:var(--pk-line-strong) !important; }
html body .login-stitch-google:hover { background:var(--pk-hover) !important; }
html body .login-stitch-divider { color:var(--pk-muted) !important; }
html body .login-stitch-divider::before,
html body .login-stitch-divider::after { background:var(--pk-line) !important; }
html body .cks-top { background:var(--pk-card) !important; border-color:var(--pk-line) !important; }
html body .cks-head,
html body .cks-meta { border-color:var(--pk-line) !important; }
html body .cks-info,
html body .cks-sandbox { background:var(--pk-card-alt) !important; border-color:var(--pk-line) !important; color:var(--pk-muted) !important; }
html body .checkout-qr img,
html body .cks-qr img,
html body .qr-image { background:#fff !important; }

/* ---------- provider / qris legacy hardcoded surfaces ---------- */
html[data-theme="dark"] body .qris-builder-panel,
html[data-theme="dark"] body .qris-order-preview,
html[data-theme="dark"] body .qris-inline-empty,
html[data-theme="dark"] body [class*="provider-"][class*="card"],
html[data-theme="dark"] body [class*="provider-"][class*="panel"],
html[data-theme="dark"] body [class*="listener-"][class*="card"],
html[data-theme="dark"] body [class*="project-"][class*="card"],
html[data-theme="dark"] body [class*="subscription-"][class*="card"] {
  background:var(--pk-card) !important;
  color:var(--pk-text) !important;
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body .panel-head { background:#17243a !important; color:var(--pk-brand) !important; border-color:var(--pk-line) !important; }
html[data-theme="dark"] body .qris-pay-head,
html[data-theme="dark"] body .qris-breakdown,
html[data-theme="dark"] body .panel-lead { color:var(--pk-muted) !important; }
html[data-theme="dark"] body .qris-delete-btn { background:var(--pk-card-alt) !important; color:var(--pk-text) !important; border-color:var(--pk-line-strong) !important; }

/* ---------- announcement/support ---------- */
html body .pk-announcement-overlay { background:var(--pk-overlay) !important; }
html body .pk-announcement-card { background:var(--pk-card) !important; color:var(--pk-ink) !important; border-color:var(--pk-line) !important; box-shadow:var(--pk-shadow-pop) !important; }
html body .pk-announcement-head h3 { color:var(--pk-ink) !important; }
html body .pk-announcement-close { color:var(--pk-muted) !important; }
html body .pk-announcement-close:hover { background:var(--pk-hover) !important; color:var(--pk-ink) !important; }
html body .pk-announcement-scroll { background:var(--pk-card-alt) !important; border-color:var(--pk-line) !important; }
html body .pk-announcement-message { color:var(--pk-text) !important; }
html body .pk-announcement-read { background:var(--pk-brand) !important; }
html body .paykita-support-float { background:var(--pk-card) !important; color:var(--pk-ink) !important; border-color:var(--pk-line) !important; box-shadow:var(--pk-shadow-pop) !important; }
html body .paykita-support-copy strong { color:var(--pk-ink) !important; }
html body .paykita-support-copy small { color:var(--pk-muted) !important; }

/* ---------- general dark-mode cleanup for custom page styles ---------- */
html[data-theme="dark"] body .content [style*="background:#fff"],
html[data-theme="dark"] body .content [style*="background: #fff"] { background:var(--pk-card) !important; }
html[data-theme="dark"] body .content [style*="color:#191c1d"],
html[data-theme="dark"] body .content [style*="color: #191c1d"],
html[data-theme="dark"] body .content [style*="color:#101828"],
html[data-theme="dark"] body .content [style*="color: #101828"] { color:var(--pk-ink) !important; }

/* ---------- responsive ---------- */
@media (max-width:1050px) {
  html body .dbs-metrics { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html body .dbs-metric:nth-child(3) { border-left:0 !important; }
  html body .dbs-metric:nth-child(n+3) { border-top:1px solid var(--pk-line) !important; }
  html body .dbs-head { flex-direction:column !important; gap:14px !important; }
  html body .dbs-statuses { justify-content:flex-start !important; max-width:100% !important; }
}

@media (max-width:767px) {
  html body .app-shell,
  html body .app-shell.sidebar-collapsed { display:block !important; }
  html body .app-shell > main.content { padding:22px 16px 44px !important; }

  html body .app-shell #paykita-sidebar.pk-sidebar,
  html body:not(.paykita-mobile-sidebar-open) .app-shell #paykita-sidebar.pk-sidebar,
  html body.paykita-mobile-sidebar-open .app-shell #paykita-sidebar.pk-sidebar {
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:min(286px,86vw) !important;
    min-width:0 !important;
    max-width:min(286px,86vw) !important;
    height:100dvh !important;
    z-index:1300 !important;
    border-right:1px solid var(--pk-line) !important;
    box-shadow:var(--pk-shadow-pop) !important;
  }
  html body:not(.paykita-mobile-sidebar-open) .app-shell #paykita-sidebar.pk-sidebar { transform:translateX(-104%) !important; }
  html body.paykita-mobile-sidebar-open .app-shell #paykita-sidebar.pk-sidebar { transform:translateX(0) !important; }

  .pk-theme-label { display:none; }
  .pk-sidebar-footer-actions { grid-template-columns:42px 1fr; }
  .pk-theme-button { padding:0 !important; }

  html body .dbs-head { padding-top:10px !important; }
  html body .dbs-head h1,
  html body .page-head h1,
  html body .content h1,
  html body .ads-head h1 { font-size:24px !important; }
  html body .dbs-metrics { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html body .dbs-metric { min-height:118px !important; padding:17px 15px !important; }
  html body .dbs-metric strong { font-size:21px !important; }
  html body .dbs-card-head,
  html body .dbs-orders-top { padding:17px 16px 14px !important; }
  html body .dbs-chart-box { margin:0 16px 16px !important; }
}

@media (max-width:430px) {
  html body .dbs-metric { padding:15px 12px !important; }
  html body .dbs-metric-top span:first-child { font-size:11px !important; }
  html body .dbs-metric strong { font-size:19px !important; }
  html body .dbs-trend { font-size:8.5px !important; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* Standalone/auth theme switch */
.pk-floating-theme {
  position:fixed;
  top:18px;
  right:18px;
  z-index:1400;
  width:38px;
  height:38px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--pk-line);
  border-radius:9px;
  background:var(--pk-card);
  color:var(--pk-muted);
  box-shadow:var(--pk-shadow);
  cursor:pointer;
}
.pk-floating-theme:hover { color:var(--pk-ink); background:var(--pk-hover); }
.pk-floating-theme svg {
  grid-area:1/1;
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ============================================================
   DARK MODE STABILITY V2
   Keep legacy PayKita components on the same palette as the
   elegant layer. This intentionally aliases the original tokens
   because many older page-level styles still use them directly.
   ============================================================ */
:root,
html[data-theme="light"] {
  --bg:var(--pk-surface) !important;
  --card:var(--pk-card) !important;
  --text:var(--pk-ink) !important;
  --muted:var(--pk-muted) !important;
  --line:var(--pk-line) !important;
  --primary:var(--pk-brand) !important;
  --success:var(--pk-success) !important;
  --success-bg:var(--pk-success-soft) !important;
  --warning:var(--pk-pending) !important;
  --warning-bg:var(--pk-pending-soft) !important;
  --danger:var(--pk-danger) !important;
  --danger-bg:var(--pk-danger-soft) !important;
  --shadow:var(--pk-shadow) !important;
}

html[data-theme="dark"] {
  --bg:var(--pk-surface) !important;
  --card:var(--pk-card) !important;
  --text:var(--pk-ink) !important;
  --muted:var(--pk-muted) !important;
  --line:var(--pk-line) !important;
  --primary:var(--pk-brand) !important;
  --success:var(--pk-success) !important;
  --success-bg:var(--pk-success-soft) !important;
  --warning:var(--pk-pending) !important;
  --warning-bg:var(--pk-pending-soft) !important;
  --danger:var(--pk-danger) !important;
  --danger-bg:var(--pk-danger-soft) !important;
  --shadow:var(--pk-shadow) !important;
}

/* Real PayKita wordmark in desktop sidebar */
html body #paykita-sidebar .pk-sidebar-brand-copy {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:3px !important;
  overflow:visible !important;
}
html body #paykita-sidebar .pk-sidebar-logo {
  display:block !important;
  width:auto !important;
  height:28px !important;
  max-width:142px !important;
  object-fit:contain !important;
  filter:none !important;
  opacity:1 !important;
}
html body #paykita-sidebar .pk-sidebar-brand-copy small {
  margin:0 !important;
  padding-left:1px !important;
  color:var(--pk-faint) !important;
  font-size:9.5px !important;
  line-height:1.2 !important;
  letter-spacing:.025em !important;
}

/* ---------- stable global dark surfaces ---------- */
html[data-theme="dark"] body,
html[data-theme="dark"] body .content,
html[data-theme="dark"] body main,
html[data-theme="dark"] body .app-shell {
  background:var(--pk-surface) !important;
  color:var(--pk-ink) !important;
}
html[data-theme="dark"] body .card,
html[data-theme="dark"] body .panel,
html[data-theme="dark"] body .modal-card,
html[data-theme="dark"] body [class$="-card"],
html[data-theme="dark"] body [class$="-panel"] {
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body h1,
html[data-theme="dark"] body h2,
html[data-theme="dark"] body h3,
html[data-theme="dark"] body h4,
html[data-theme="dark"] body strong {
  color:var(--pk-ink);
}
html[data-theme="dark"] body .muted,
html[data-theme="dark"] body small,
html[data-theme="dark"] body .help,
html[data-theme="dark"] body .hint {
  color:var(--pk-muted);
}
html[data-theme="dark"] body a:not(.btn):not(.pk-sidebar-user) {
  text-decoration-color:color-mix(in srgb,var(--pk-brand) 45%,transparent);
}
html[data-theme="dark"] body input,
html[data-theme="dark"] body textarea,
html[data-theme="dark"] body select {
  background:var(--pk-input) !important;
  color:var(--pk-ink) !important;
  border-color:var(--pk-line-strong) !important;
}
html[data-theme="dark"] body input::placeholder,
html[data-theme="dark"] body textarea::placeholder { color:var(--pk-faint) !important; }
html[data-theme="dark"] body input:focus,
html[data-theme="dark"] body textarea:focus,
html[data-theme="dark"] body select:focus {
  border-color:var(--pk-brand) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pk-brand) 18%,transparent) !important;
}
html[data-theme="dark"] body .btn:not(.btn-primary):not(.btn-danger),
html[data-theme="dark"] body button.btn:not(.btn-primary):not(.btn-danger) {
  background:var(--pk-card-alt) !important;
  color:var(--pk-text) !important;
  border-color:var(--pk-line-strong) !important;
}
html[data-theme="dark"] body .btn:not(.btn-primary):not(.btn-danger):hover,
html[data-theme="dark"] body button.btn:not(.btn-primary):not(.btn-danger):hover {
  background:var(--pk-hover) !important;
  color:var(--pk-ink) !important;
}
html[data-theme="dark"] body table,
html[data-theme="dark"] body tbody,
html[data-theme="dark"] body tr { color:var(--pk-text); }
html[data-theme="dark"] body th {
  background:var(--pk-card-alt) !important;
  color:var(--pk-faint) !important;
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body td { color:var(--pk-text) !important; border-color:var(--pk-line) !important; }
html[data-theme="dark"] body tbody tr:hover { background:var(--pk-hover) !important; }

/* ---------- Documentation / API pages ---------- */
html[data-theme="dark"] body .documentation-page,
html[data-theme="dark"] body .api-page {
  color:var(--pk-ink) !important;
}
html[data-theme="dark"] body .documentation-page .card,
html[data-theme="dark"] body .api-page .card {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-text) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body .documentation-page .api-steps,
html[data-theme="dark"] body .documentation-page .api-section > p,
html[data-theme="dark"] body .documentation-page .api-section > .muted,
html[data-theme="dark"] body .documentation-page .api-hero p,
html[data-theme="dark"] body .api-page .api-steps,
html[data-theme="dark"] body .api-page .api-section > p,
html[data-theme="dark"] body .api-page .api-section > .muted,
html[data-theme="dark"] body .api-page .api-hero p {
  color:var(--pk-muted) !important;
}
html[data-theme="dark"] body .documentation-page .api-steps strong,
html[data-theme="dark"] body .api-page .api-steps strong { color:var(--pk-ink) !important; }
html[data-theme="dark"] body .documentation-page .api-nav a,
html[data-theme="dark"] body .api-page .api-nav a {
  background:var(--pk-card) !important;
  color:var(--pk-text) !important;
  border-color:var(--pk-line-strong) !important;
}
html[data-theme="dark"] body .documentation-page .api-nav a:hover,
html[data-theme="dark"] body .api-page .api-nav a:hover {
  background:var(--pk-hover) !important;
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .documentation-page .api-note,
html[data-theme="dark"] body .documentation-page .api-note.warning,
html[data-theme="dark"] body .api-page .api-note,
html[data-theme="dark"] body .api-page .api-note.warning {
  background:var(--pk-card-alt) !important;
  color:var(--pk-text) !important;
  border-color:var(--pk-line-strong) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body .documentation-page .api-note.success,
html[data-theme="dark"] body .api-page .api-note.success {
  background:var(--pk-success-soft) !important;
  color:var(--pk-success) !important;
  border-color:color-mix(in srgb,var(--pk-success) 35%,var(--pk-line)) !important;
}
html[data-theme="dark"] body .documentation-page .status-box,
html[data-theme="dark"] body .documentation-page .key-help > div,
html[data-theme="dark"] body .api-page .status-box,
html[data-theme="dark"] body .api-page .key-help > div {
  background:var(--pk-card-alt) !important;
  color:var(--pk-text) !important;
  border-color:var(--pk-line-strong) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body .documentation-page .status-box small,
html[data-theme="dark"] body .documentation-page .key-help small,
html[data-theme="dark"] body .api-page .status-box small,
html[data-theme="dark"] body .api-page .key-help small { color:var(--pk-muted) !important; }
html[data-theme="dark"] body .documentation-page .table-wrap,
html[data-theme="dark"] body .api-page .table-wrap {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body .documentation-page table td,
html[data-theme="dark"] body .api-page table td { color:var(--pk-text) !important; }
html[data-theme="dark"] body .documentation-page .endpoint-path,
html[data-theme="dark"] body .documentation-page .mode-tag,
html[data-theme="dark"] body .api-page .endpoint-path,
html[data-theme="dark"] body .api-page .mode-tag {
  background:var(--pk-brand-soft) !important;
  color:var(--pk-brand) !important;
  border-color:transparent !important;
}
html[data-theme="dark"] body .documentation-page .method.post,
html[data-theme="dark"] body .api-page .method.post { background:var(--pk-success-soft) !important; color:var(--pk-success) !important; }
html[data-theme="dark"] body .documentation-page .method.get,
html[data-theme="dark"] body .api-page .method.get { background:var(--pk-brand-soft) !important; color:var(--pk-brand) !important; }
html[data-theme="dark"] body .documentation-page .code-title,
html[data-theme="dark"] body .api-page .code-title {
  background:var(--pk-card-alt) !important;
  color:var(--pk-text) !important;
  border-color:var(--pk-line-strong) !important;
}
html[data-theme="dark"] body .documentation-page .code-title strong,
html[data-theme="dark"] body .api-page .code-title strong {
  background:var(--pk-brand-soft) !important;
  color:var(--pk-brand) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 35%,var(--pk-line)) !important;
}
html[data-theme="dark"] body .documentation-page .copy-code-btn,
html[data-theme="dark"] body .api-page .copy-code-btn {
  background:var(--pk-input) !important;
  color:var(--pk-brand) !important;
  border-color:var(--pk-line-strong) !important;
}
html[data-theme="dark"] body .documentation-page .copy-code-btn:hover,
html[data-theme="dark"] body .api-page .copy-code-btn:hover { background:var(--pk-hover) !important; }
html[data-theme="dark"] body .documentation-page .code-title + pre,
html[data-theme="dark"] body .api-page .code-title + pre {
  background:var(--pk-code) !important;
  color:var(--pk-code-text) !important;
  border-color:var(--pk-line-strong) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body .documentation-page .code-title + pre code,
html[data-theme="dark"] body .api-page .code-title + pre code { color:var(--pk-code-text) !important; }
html[data-theme="dark"] body .documentation-page code:not(pre code),
html[data-theme="dark"] body .api-page code:not(pre code) {
  background:var(--pk-brand-soft) !important;
  color:var(--pk-brand) !important;
}

/* ---------- Admin page hard-coded light colors ---------- */
html[data-theme="dark"] body .ads-page { color:var(--pk-ink) !important; }
html[data-theme="dark"] body .ads-head p,
html[data-theme="dark"] body .ads-user small,
html[data-theme="dark"] body .ads-expiry small,
html[data-theme="dark"] body .ads-footer,
html[data-theme="dark"] body .ads-empty { color:var(--pk-muted) !important; }
html[data-theme="dark"] body .ads-card {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body .ads-card-head,
html[data-theme="dark"] body .ads-table td { border-color:var(--pk-line) !important; }
html[data-theme="dark"] body .ads-tool {
  background:var(--pk-card-alt) !important;
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body .ads-tool-logo { background:var(--pk-brand-soft) !important; color:var(--pk-brand) !important; }
html[data-theme="dark"] body .ads-table th { background:var(--pk-card-alt) !important; color:var(--pk-faint) !important; }
html[data-theme="dark"] body .ads-avatar { background:var(--pk-brand-soft) !important; color:var(--pk-brand) !important; }
html[data-theme="dark"] body .ads-actions button,
html[data-theme="dark"] body .ads-pages a,
html[data-theme="dark"] body .ads-pages span {
  background:var(--pk-card-alt) !important;
  color:var(--pk-text) !important;
  border-color:var(--pk-line-strong) !important;
}
html[data-theme="dark"] body .ads-price-input,
html[data-theme="dark"] body .ads-field input,
html[data-theme="dark"] body .ads-field textarea,
html[data-theme="dark"] body .ads-search input { background:var(--pk-input) !important; color:var(--pk-ink) !important; border-color:var(--pk-line-strong) !important; }
html[data-theme="dark"] body .ads-price-input input { color:var(--pk-ink) !important; }
html[data-theme="dark"] body .ads-announcement-preview { background:var(--pk-card-alt) !important; border-color:var(--pk-line) !important; }
html[data-theme="dark"] body .ads-announcement-preview h3 { color:var(--pk-ink) !important; }
html[data-theme="dark"] body .ads-announcement-preview p,
html[data-theme="dark"] body .ads-announcement-preview small { color:var(--pk-muted) !important; }

/* ---------- Projects / modal hard-coded light colors ---------- */
html[data-theme="dark"] body .projects-page .project-stat,
html[data-theme="dark"] body .project-detail-page .project-counter,
html[data-theme="dark"] body .project-detail-page .project-api-box,
html[data-theme="dark"] body .project-modal-card {
  background:var(--pk-card-alt) !important;
  color:var(--pk-text) !important;
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body .project-modal-close {
  background:var(--pk-card-alt) !important;
  color:var(--pk-muted) !important;
  border-color:var(--pk-line-strong) !important;
}
html[data-theme="dark"] body .project-modal-close:hover { background:var(--pk-hover) !important; color:var(--pk-ink) !important; }

/* ---------- Checkout hard-coded light colors ---------- */
html[data-theme="dark"] body .cks-page { background:var(--pk-surface) !important; color:var(--pk-ink) !important; }
html[data-theme="dark"] body .cks-top,
html[data-theme="dark"] body .cks-card,
html[data-theme="dark"] body .cks-footer { background:var(--pk-card) !important; border-color:var(--pk-line) !important; color:var(--pk-text) !important; }
html[data-theme="dark"] body .cks-head,
html[data-theme="dark"] body .cks-meta,
html[data-theme="dark"] body .cks-summary,
html[data-theme="dark"] body .cks-summary-row { border-color:var(--pk-line) !important; }
html[data-theme="dark"] body .cks-amount,
html[data-theme="dark"] body .cks-success h2,
html[data-theme="dark"] body .cks-summary-row strong { color:var(--pk-ink) !important; }
html[data-theme="dark"] body .cks-head small,
html[data-theme="dark"] body .cks-amount-label,
html[data-theme="dark"] body .cks-order,
html[data-theme="dark"] body .cks-steps,
html[data-theme="dark"] body .cks-success p,
html[data-theme="dark"] body .cks-summary-row span,
html[data-theme="dark"] body .cks-footer { color:var(--pk-muted) !important; }
html[data-theme="dark"] body .cks-info,
html[data-theme="dark"] body .cks-sandbox { background:var(--pk-card-alt) !important; color:var(--pk-muted) !important; border-color:var(--pk-line-strong) !important; }
html[data-theme="dark"] body .cks-timer { color:var(--pk-brand) !important; }

/* ---------- Auth hard-coded light colors ---------- */
html[data-theme="dark"] body .login-stitch,
html[data-theme="dark"] body .login-wrap { background:var(--pk-surface) !important; color:var(--pk-ink) !important; }
html[data-theme="dark"] body .login-stitch-card,
html[data-theme="dark"] body .login-card { background:var(--pk-card) !important; border-color:var(--pk-line) !important; color:var(--pk-ink) !important; }
html[data-theme="dark"] body .login-stitch-brand p,
html[data-theme="dark"] body .login-stitch-title p,
html[data-theme="dark"] body .login-stitch-footer,
html[data-theme="dark"] body .login-stitch-divider { color:var(--pk-muted) !important; }
html[data-theme="dark"] body .login-stitch-form label { color:var(--pk-text) !important; }
html[data-theme="dark"] body .login-stitch-form input,
html[data-theme="dark"] body .login-stitch-google { background:var(--pk-input) !important; color:var(--pk-text) !important; border-color:var(--pk-line-strong) !important; }
html[data-theme="dark"] body .login-stitch-google:hover { background:var(--pk-hover) !important; }
html[data-theme="dark"] body .login-stitch-divider::before,
html[data-theme="dark"] body .login-stitch-divider::after { background:var(--pk-line) !important; }

/* Make floating support card belong to dark theme too */
html[data-theme="dark"] body .paykita-support-float {
  background:var(--pk-card) !important;
  border-color:var(--pk-line-strong) !important;
  color:var(--pk-ink) !important;
}
html[data-theme="dark"] body .paykita-support-copy strong { color:var(--pk-ink) !important; }
html[data-theme="dark"] body .paykita-support-copy small { color:var(--pk-muted) !important; }

/* ============================================================
   DARK MODE HARDENING V3
   Static fallback. A duplicate late-cascade version is injected by
   theme.js after page-local <style> blocks so legacy light rules cannot
   leak through in dark mode.
   ============================================================ */
html[data-theme="dark"] body .content table,
html[data-theme="dark"] body .content table thead,
html[data-theme="dark"] body .content table tbody,
html[data-theme="dark"] body .content table tr,
html[data-theme="dark"] body .content table td {
  background:var(--pk-card) !important;
}
html[data-theme="dark"] body .content table th {
  background:var(--pk-card-alt) !important;
}
html[data-theme="dark"] body .content table tbody tr:hover,
html[data-theme="dark"] body .content table tbody tr:hover td {
  background:var(--pk-hover) !important;
}
html[data-theme="dark"] body .documentation-page .table-wrap,
html[data-theme="dark"] body .api-page .table-wrap {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
}

/* ---------- dark sidebar brand header fix · v5 ---------- */
html[data-theme="dark"] body #paykita-sidebar.pk-sidebar,
html[data-theme="dark"] body #paykita-sidebar .pk-sidebar-brand-row,
html[data-theme="dark"] body #paykita-sidebar .retro-sidebar-top {
  background:var(--pk-card) !important;
  color:var(--pk-ink) !important;
  border-color:var(--pk-line) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body #paykita-sidebar .sidebar-brand,
html[data-theme="dark"] body #paykita-sidebar .brand.sidebar-brand,
html[data-theme="dark"] body #paykita-sidebar .pk-sidebar-brand-copy {
  background:transparent !important;
  color:var(--pk-ink) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body #paykita-sidebar .pk-sidebar-brand-copy small {
  color:var(--pk-muted) !important;
}
html[data-theme="dark"] body #paykita-sidebar .pk-sidebar-logo {
  background:transparent !important;
  filter:none !important;
}


/* ---------- V7 · Inter sidebar typography refinement ---------- */
html body #paykita-sidebar.pk-sidebar,
html body #paykita-sidebar.pk-sidebar *:not(code):not(pre):not(kbd):not(samp) {
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}

html body #paykita-sidebar .pk-nav-heading {
  font-size:9.5px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
  letter-spacing:.105em !important;
}

html body #paykita-sidebar .pk-nav-list a,
html body #paykita-sidebar .retro-nav.pk-nav-list a {
  font-size:14px !important;
  line-height:1.42 !important;
  font-weight:500 !important;
  letter-spacing:-.01em !important;
}

html body #paykita-sidebar .pk-nav-list a.active,
html body #paykita-sidebar .retro-nav.pk-nav-list a.active {
  font-weight:600 !important;
  letter-spacing:-.012em !important;
}

html body #paykita-sidebar .nav-label {
  font-size:inherit !important;
  line-height:inherit !important;
  font-weight:inherit !important;
  letter-spacing:inherit !important;
}

html body #paykita-sidebar .pk-sidebar-user-copy strong {
  font-size:12.75px !important;
  font-weight:600 !important;
  letter-spacing:-.012em !important;
}

html body #paykita-sidebar .pk-sidebar-user-copy small {
  font-size:10.5px !important;
  font-weight:400 !important;
  letter-spacing:-.004em !important;
}

html body #paykita-sidebar .retro-logout {
  font-size:12.5px !important;
  font-weight:500 !important;
  letter-spacing:-.008em !important;
}


/* ---------- V8 · Sidebar text tuned to dashboard subtitle ---------- */
html body #paykita-sidebar .pk-nav-list a,
html body #paykita-sidebar .retro-nav.pk-nav-list a {
  font-size:14px !important;
  font-weight:500 !important;
  line-height:1.45 !important;
  letter-spacing:-.01em !important;
}
html body #paykita-sidebar .pk-nav-list a.active,
html body #paykita-sidebar .retro-nav.pk-nav-list a.active {
  font-weight:600 !important;
}

/* ---------- V10 · Sidebar typography correction ---------- */
/* Keep sidebar proportional and calm: Inter, not monospace/typewriter. */
html body #paykita-sidebar .pk-nav-list a,
html body #paykita-sidebar .retro-nav.pk-nav-list a,
html body #paykita-sidebar .pk-nav-list a .nav-label,
html body #paykita-sidebar .retro-nav.pk-nav-list a .nav-label {
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.42 !important;
  letter-spacing:-.006em !important;
}

html body #paykita-sidebar .pk-nav-list a.active,
html body #paykita-sidebar .retro-nav.pk-nav-list a.active,
html body #paykita-sidebar .pk-nav-list a.active .nav-label,
html body #paykita-sidebar .retro-nav.pk-nav-list a.active .nav-label {
  font-weight:600 !important;
  letter-spacing:-.01em !important;
}


/* ============================================================
   V11 · Integration UX / webhook onboarding
   ============================================================ */
.webhook-secret-card { margin-top:24px !important; }
.webhook-secret-copy {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px; border:1px solid var(--pk-line); border-radius:12px;
  background:var(--pk-card-alt);
}
.webhook-secret-copy > div { min-width:0; display:grid; gap:6px; }
.webhook-secret-label { font-size:10px; font-weight:600; letter-spacing:.08em; color:var(--pk-faint); }
.webhook-secret-copy code { overflow-wrap:anywhere; color:var(--pk-ink); font-size:12px; }
.webhook-help-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }
.webhook-help-item { padding:14px; border:1px solid var(--pk-line); border-radius:10px; background:var(--pk-card); }
.webhook-help-item strong { display:block; margin-bottom:5px; font-size:12px; color:var(--pk-ink); }
.webhook-help-item span { display:block; font-size:11.5px; line-height:1.55; color:var(--pk-muted); }
.webhook-secret-warning { margin:0 0 14px; padding:11px 13px; border-radius:9px; background:var(--pk-pending-soft); color:var(--pk-pending); font-size:12px; }

.project-webhook-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0 16px; }
.project-webhook-steps > div { display:flex; gap:9px; padding:11px; border:1px solid var(--pk-line); border-radius:10px; background:var(--pk-card-alt); }
.project-webhook-steps b { width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center; border-radius:50%; background:var(--pk-brand-soft); color:var(--pk-brand); font-size:10px; }
.project-webhook-steps span { min-width:0; }
.project-webhook-steps strong, .project-webhook-steps small { display:block; }
.project-webhook-steps strong { font-size:11.5px; color:var(--pk-ink); }
.project-webhook-steps small { margin-top:3px; color:var(--pk-muted); line-height:1.45; }
.project-webhook-hint { display:flex; justify-content:space-between; gap:12px; margin-top:-4px; font-size:11px; color:var(--pk-muted); }
.project-webhook-hint a { color:var(--pk-brand); text-decoration:none; font-weight:600; }
.project-webhook-test { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:16px; padding:13px 14px; border:1px solid var(--pk-line); border-radius:10px; background:var(--pk-card-alt); }
.project-webhook-test > div { display:grid; gap:3px; }
.project-webhook-test strong { font-size:12px; color:var(--pk-ink); }
.project-webhook-test span { font-size:11px; color:var(--pk-muted); }
.project-webhook-advanced { margin-top:12px; color:var(--pk-muted); font-size:11.5px; }
.project-webhook-advanced summary, .doc-advanced-details summary { cursor:pointer; color:var(--pk-brand); font-weight:600; }
.project-webhook-advanced p { margin:9px 0 0; line-height:1.55; }

.webhook-onboarding-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:16px 0; }
.webhook-onboarding-grid > div { padding:14px; border:1px solid var(--pk-line); border-radius:10px; background:var(--pk-card-alt); }
.webhook-onboarding-grid b { display:grid; place-items:center; width:24px; height:24px; margin-bottom:10px; border-radius:50%; background:var(--pk-brand-soft); color:var(--pk-brand); font-size:10px; }
.webhook-onboarding-grid strong, .webhook-onboarding-grid span { display:block; }
.webhook-onboarding-grid strong { font-size:12px; margin-bottom:4px; color:var(--pk-ink); }
.webhook-onboarding-grid span { font-size:11px; line-height:1.5; color:var(--pk-muted); }
.doc-section-kicker { margin-bottom:5px; font-size:10px; font-weight:700; letter-spacing:.09em; color:var(--pk-brand); }
.webhook-signature-explainer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0; }
.webhook-signature-explainer > div { padding:11px 12px; border:1px solid var(--pk-line); border-radius:9px; background:var(--pk-card-alt); }
.webhook-signature-explainer span, .webhook-signature-explainer strong { display:block; }
.webhook-signature-explainer span { font-size:10px; color:var(--pk-faint); margin-bottom:3px; }
.webhook-signature-explainer strong { font-size:11.5px; color:var(--pk-ink); }
.doc-advanced-details { margin-top:16px; }

.webhook-log-list { display:grid; gap:10px; }
.webhook-log-item { padding:12px; border:1px solid var(--pk-line); border-radius:10px; background:var(--pk-card-alt); }
.webhook-log-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.webhook-log-url { display:block; margin-top:7px; overflow-wrap:anywhere; font-size:10.5px; color:var(--pk-muted); }
.webhook-log-meta { display:flex; gap:12px; flex-wrap:wrap; margin-top:7px; font-size:10.5px; color:var(--pk-faint); }
.webhook-log-error { margin-top:8px; padding:8px 9px; border-radius:8px; background:var(--pk-danger-soft); color:var(--pk-danger); font-size:11px; line-height:1.45; }

@media (max-width:900px) {
  .webhook-help-grid, .webhook-onboarding-grid { grid-template-columns:1fr 1fr; }
  .project-webhook-steps { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .webhook-secret-copy, .project-webhook-test, .project-webhook-hint { align-items:stretch; flex-direction:column; }
  .webhook-help-grid, .webhook-onboarding-grid, .webhook-signature-explainer { grid-template-columns:1fr; }
}

/* ============================================================
   V12 · Profile page dark mode leak fix
   Keep profile surfaces aligned with dark theme tokens.
   ============================================================ */
html[data-theme="dark"] body .profile-page hr {
  border:0 !important;
  border-top:1px solid var(--pk-line) !important;
}

html[data-theme="dark"] body .profile-page .surface-card,
html[data-theme="dark"] body .profile-page .profile-panel,
html[data-theme="dark"] body .profile-page .profile-api-panel,
html[data-theme="dark"] body .profile-page .profile-api-live-card,
html[data-theme="dark"] body .profile-page .profile-security-card,
html[data-theme="dark"] body .profile-page .webhook-help-item,
html[data-theme="dark"] body .profile-page .webhook-secret-copy,
html[data-theme="dark"] body .profile-page .profile-api-security-card,
html[data-theme="dark"] body .profile-page .surface-action-box,
html[data-theme="dark"] body .profile-page .surface-empty-state,
html[data-theme="dark"] body .profile-page .surface-info-row,
html[data-theme="dark"] body .profile-page .surface-twofa-secret,
html[data-theme="dark"] body .profile-page .profile-api-email-row,
html[data-theme="dark"] body .profile-page .profile-api-code-form.polished,
html[data-theme="dark"] body .profile-page .profile-api-key-box,
html[data-theme="dark"] body .profile-page .profile-api-details > div,
html[data-theme="dark"] body .profile-page .profile-api-legacy-note.polished,
html[data-theme="dark"] body .profile-page .profile-main-panel.surface-card .profile-info-item {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-text) !important;
  box-shadow:none !important;
}

html[data-theme="dark"] body .profile-page .profile-api-header,
html[data-theme="dark"] body .profile-page .surface-card-head,
html[data-theme="dark"] body .profile-page .profile-main-panel.surface-card > .panel-head,
html[data-theme="dark"] body .profile-page .profile-api-modal-head {
  background:var(--pk-card-alt) !important;
  border-color:var(--pk-line) !important;
}

html[data-theme="dark"] body .profile-page .profile-api-header h2,
html[data-theme="dark"] body .profile-page .surface-card-head h2,
html[data-theme="dark"] body .profile-page .profile-display-name,
html[data-theme="dark"] body .profile-page .profile-api-live-title-row strong,
html[data-theme="dark"] body .profile-page .profile-api-email-row strong,
html[data-theme="dark"] body .profile-page .profile-api-security-card strong,
html[data-theme="dark"] body .profile-page .surface-action-box-head strong,
html[data-theme="dark"] body .profile-page .surface-empty-state strong,
html[data-theme="dark"] body .profile-page .surface-twofa-secret code,
html[data-theme="dark"] body .profile-page .profile-info-item strong,
html[data-theme="dark"] body .profile-page .profile-api-details strong,
html[data-theme="dark"] body .profile-page .webhook-help-item strong,
html[data-theme="dark"] body .profile-page .surface-info-row strong,
html[data-theme="dark"] body .profile-page .profile-api-modal-head h3,
html[data-theme="dark"] body .profile-page .profile-api-modal-form label,
html[data-theme="dark"] body .profile-page .profile-security-form label {
  color:var(--pk-ink) !important;
}

html[data-theme="dark"] body .profile-page .profile-role,
html[data-theme="dark"] body .profile-page .profile-api-header p,
html[data-theme="dark"] body .profile-page .surface-card-head p,
html[data-theme="dark"] body .profile-page .profile-api-live-card-head p,
html[data-theme="dark"] body .profile-page .profile-api-email-row span,
html[data-theme="dark"] body .profile-page .profile-api-security-card p,
html[data-theme="dark"] body .profile-page .surface-action-box-head span,
html[data-theme="dark"] body .profile-page .surface-empty-state p,
html[data-theme="dark"] body .profile-page .surface-card-footer-link .muted,
html[data-theme="dark"] body .profile-page .profile-info-item span,
html[data-theme="dark"] body .profile-page .profile-api-details span,
html[data-theme="dark"] body .profile-page .webhook-help-item span,
html[data-theme="dark"] body .profile-page .surface-info-row span,
html[data-theme="dark"] body .profile-page .profile-api-modal-copy,
html[data-theme="dark"] body .profile-page .profile-main-panel.surface-card > .panel-head .panel-badge,
html[data-theme="dark"] body .profile-page .surface-card-eyebrow,
html[data-theme="dark"] body .profile-page .profile-api-eyebrow,
html[data-theme="dark"] body .profile-page .profile-api-modal-eyebrow,
html[data-theme="dark"] body .profile-page .webhook-secret-label {
  color:var(--pk-muted) !important;
}

html[data-theme="dark"] body .profile-page .profile-avatar,
html[data-theme="dark"] body .profile-page .profile-api-header-icon,
html[data-theme="dark"] body .profile-page .surface-card-icon,
html[data-theme="dark"] body .profile-page .profile-api-security-icon,
html[data-theme="dark"] body .profile-page .surface-empty-icon,
html[data-theme="dark"] body .profile-page .profile-api-live-badge {
  background:var(--pk-brand-soft) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 28%, var(--pk-line)) !important;
  color:var(--pk-brand) !important;
}

html[data-theme="dark"] body .profile-page .profile-api-doc-button,
html[data-theme="dark"] body .profile-page .profile-api-secondary-btn,
html[data-theme="dark"] body .profile-page .profile-api-modal-close,
html[data-theme="dark"] body .profile-page .surface-secondary-full {
  background:var(--pk-card-alt) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-ink) !important;
}

html[data-theme="dark"] body .profile-page .profile-api-doc-button:hover,
html[data-theme="dark"] body .profile-page .profile-api-secondary-btn:hover,
html[data-theme="dark"] body .profile-page .profile-api-modal-close:hover,
html[data-theme="dark"] body .profile-page .surface-secondary-full:hover {
  background:color-mix(in srgb,var(--pk-card-alt) 70%, #fff) !important;
}

html[data-theme="dark"] body .profile-page .profile-api-key-box.revealed,
html[data-theme="dark"] body .profile-page .surface-twofa-setup .twofa-qr,
html[data-theme="dark"] body .profile-page .profile-api-modal-dialog {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
}

html[data-theme="dark"] body .profile-page .profile-api-key-box code,
html[data-theme="dark"] body .profile-page .surface-twofa-secret code,
html[data-theme="dark"] body .profile-page .webhook-secret-copy code {
  color:var(--pk-brand) !important;
}

html[data-theme="dark"] body .profile-page .profile-api-live-status.empty,
html[data-theme="dark"] body .profile-page .surface-card-status.inactive {
  background:var(--pk-card-alt) !important;
  color:var(--pk-muted) !important;
}
html[data-theme="dark"] body .profile-page .profile-api-live-status.empty i,
html[data-theme="dark"] body .profile-page .surface-card-status.inactive i {
  background:var(--pk-faint) !important;
}

html[data-theme="dark"] body .profile-page .profile-api-modal-actions,
html[data-theme="dark"] body .profile-page .surface-card-footer-link {
  border-color:var(--pk-line) !important;
}

html[data-theme="dark"] body .profile-page .profile-api-rotate-alert {
  border-color:color-mix(in srgb,var(--pk-danger) 28%, var(--pk-line)) !important;
  background:var(--pk-danger-soft) !important;
}
html[data-theme="dark"] body .profile-page .profile-api-rotate-alert strong {
  color:var(--pk-danger) !important;
}
html[data-theme="dark"] body .profile-page .profile-api-rotate-alert span {
  color:color-mix(in srgb,var(--pk-danger) 72%, #fff) !important;
}

html[data-theme="dark"] body .profile-page .profile-ok {
  color:var(--pk-success) !important;
}

/* ============================================================
   V13 · Settings center
   One home for profile, project API keys, webhooks and security.
   ============================================================ */
html body .settings-page { max-width:none !important; }
html body .settings-page-head { padding-bottom:24px !important; }

html body .settings-tabs-card {
  margin-bottom:16px !important;
  overflow:hidden !important;
  border:1px solid var(--pk-line) !important;
  border-radius:12px !important;
  background:var(--pk-card) !important;
  box-shadow:var(--pk-shadow) !important;
}
html body .settings-tabs {
  display:flex !important;
  align-items:center !important;
  gap:26px !important;
  padding:0 18px !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
}
html body .settings-tabs::-webkit-scrollbar { display:none !important; }
html body .settings-tab {
  position:relative !important;
  flex:0 0 auto !important;
  min-height:56px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:0 2px !important;
  border:0 !important;
  color:var(--pk-muted) !important;
  font-size:12.5px !important;
  line-height:1 !important;
  font-weight:600 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}
html body .settings-tab::after {
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:2px !important;
  border-radius:2px 2px 0 0 !important;
  background:transparent !important;
}
html body .settings-tab:hover { color:var(--pk-ink) !important; }
html body .settings-tab.is-active { color:var(--pk-brand) !important; }
html body .settings-tab.is-active::after { background:var(--pk-brand) !important; }

html body .settings-panel { display:none !important; }
html body .settings-panel.is-active { display:block !important; }

html body .settings-section-card {
  margin-bottom:16px !important;
  overflow:hidden !important;
  border:1px solid var(--pk-line) !important;
  border-radius:12px !important;
  background:var(--pk-card) !important;
  color:var(--pk-text) !important;
  box-shadow:var(--pk-shadow) !important;
}
html body .settings-section-head {
  min-height:82px !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  padding:18px 20px !important;
  border-bottom:1px solid var(--pk-line) !important;
  background:var(--pk-card-alt) !important;
}
html body .settings-section-head-split { justify-content:space-between !important; }
html body .settings-section-head > div { min-width:0 !important; }
html body .settings-kicker {
  display:block !important;
  margin-bottom:3px !important;
  color:var(--pk-brand) !important;
  font-size:9px !important;
  font-weight:700 !important;
  letter-spacing:.09em !important;
}
html body .settings-section-head h2 {
  margin:0 0 4px !important;
  color:var(--pk-ink) !important;
  font-size:16px !important;
  line-height:1.25 !important;
  font-weight:650 !important;
  letter-spacing:-.02em !important;
}
html body .settings-section-head p {
  margin:0 !important;
  max-width:760px !important;
  color:var(--pk-muted) !important;
  font-size:11.5px !important;
  line-height:1.55 !important;
}
html body .settings-section-body { padding:20px !important; }

html body .settings-profile-hero {
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin-bottom:16px !important;
}
html body .settings-avatar {
  width:46px !important;
  height:46px !important;
  flex:0 0 46px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid color-mix(in srgb,var(--pk-brand) 24%,var(--pk-line)) !important;
  border-radius:10px !important;
  background:var(--pk-brand-soft) !important;
  color:var(--pk-brand) !important;
  font-size:16px !important;
  font-weight:700 !important;
}
html body .settings-profile-hero strong,
html body .settings-profile-hero span { display:block !important; }
html body .settings-profile-hero strong { color:var(--pk-ink) !important; font-size:15px !important; font-weight:650 !important; }
html body .settings-profile-hero span { margin-top:2px !important; color:var(--pk-muted) !important; font-size:11px !important; }

html body .settings-info-grid {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  margin-bottom:18px !important;
  overflow:hidden !important;
  border:1px solid var(--pk-line) !important;
  border-radius:10px !important;
}
html body .settings-info-item {
  min-height:76px !important;
  padding:13px 14px !important;
  border-right:1px solid var(--pk-line) !important;
  border-bottom:1px solid var(--pk-line) !important;
  background:var(--pk-card) !important;
}
html body .settings-info-item:nth-child(2n) { border-right:0 !important; }
html body .settings-info-item:nth-last-child(-n+2) { border-bottom:0 !important; }
html body .settings-info-item span,
html body .settings-info-item strong,
html body .settings-info-item small { display:block !important; }
html body .settings-info-item span { margin-bottom:5px !important; color:var(--pk-faint) !important; font-size:9.5px !important; }
html body .settings-info-item strong { color:var(--pk-ink) !important; font-size:11.5px !important; font-weight:600 !important; }
html body .settings-info-item small { margin-top:4px !important; font-size:9.5px !important; }
html body .settings-success { color:var(--pk-success) !important; }
html body .settings-warning { color:var(--pk-pending) !important; }

html body .settings-form-block,
html body .settings-password-form,
html body .settings-webhook-form { display:grid !important; gap:12px !important; }
html body .settings-form-block label,
html body .settings-password-form label,
html body .settings-webhook-form label,
html body .settings-code-form label {
  margin:0 !important;
  color:var(--pk-text) !important;
  font-size:11px !important;
  font-weight:600 !important;
}
html body .settings-page input[type="text"],
html body .settings-page input[type="password"],
html body .settings-page input[type="url"],
html body .settings-page input[type="email"] {
  width:100% !important;
  margin-top:6px !important;
  border:1px solid var(--pk-line-strong) !important;
  border-radius:8px !important;
  background:var(--pk-input) !important;
  color:var(--pk-ink) !important;
  box-shadow:none !important;
}
html body .settings-page input:focus {
  border-color:color-mix(in srgb,var(--pk-brand) 55%,var(--pk-line)) !important;
  outline:2px solid color-mix(in srgb,var(--pk-brand) 12%,transparent) !important;
  outline-offset:0 !important;
}
html body .settings-actions { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; }
html body .settings-actions-split { justify-content:space-between !important; }
html body .settings-actions-split > span { max-width:680px !important; color:var(--pk-muted) !important; font-size:10.5px !important; line-height:1.5 !important; }
html body .settings-divider { height:1px !important; margin:20px 0 !important; background:var(--pk-line) !important; }

html body .settings-subsection-head {
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin-bottom:12px !important;
}
html body .settings-subsection-head h3 { margin:0 0 3px !important; color:var(--pk-ink) !important; font-size:13px !important; font-weight:650 !important; }
html body .settings-subsection-head p { margin:0 !important; color:var(--pk-muted) !important; font-size:10.5px !important; }

html body .settings-status-pill {
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  flex:0 0 auto !important;
  min-height:27px !important;
  padding:5px 9px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:999px !important;
  background:var(--pk-card-alt) !important;
  color:var(--pk-muted) !important;
  font-size:9.5px !important;
  line-height:1 !important;
  font-weight:600 !important;
}
html body .settings-status-pill i { width:6px !important; height:6px !important; border-radius:50% !important; background:var(--pk-faint) !important; }
html body .settings-status-pill.ok { color:var(--pk-success) !important; background:var(--pk-success-soft) !important; border-color:color-mix(in srgb,var(--pk-success) 22%,var(--pk-line)) !important; }
html body .settings-status-pill.ok i { background:var(--pk-success) !important; }
html body .settings-status-pill.warn { color:var(--pk-pending) !important; background:var(--pk-pending-soft) !important; border-color:color-mix(in srgb,var(--pk-pending) 22%,var(--pk-line)) !important; }
html body .settings-status-pill.warn i { background:var(--pk-pending) !important; }
html body .settings-status-pill.neutral { color:var(--pk-muted) !important; }

html body .settings-inline-card,
html body .settings-api-base,
html body .settings-secret-row,
html body .settings-webhook-test-row,
html body .settings-info-single,
html body .settings-empty-state {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:13px 14px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:9px !important;
  background:var(--pk-card-alt) !important;
}
html body .settings-inline-card > div,
html body .settings-webhook-test-row > div { min-width:0 !important; }
html body .settings-inline-card strong,
html body .settings-inline-card span,
html body .settings-webhook-test-row strong,
html body .settings-webhook-test-row span,
html body .settings-empty-state strong,
html body .settings-empty-state span { display:block !important; }
html body .settings-inline-card strong,
html body .settings-webhook-test-row strong,
html body .settings-empty-state strong { color:var(--pk-ink) !important; font-size:11px !important; font-weight:650 !important; }
html body .settings-inline-card span,
html body .settings-webhook-test-row span,
html body .settings-empty-state span { margin-top:3px !important; color:var(--pk-muted) !important; font-size:10px !important; line-height:1.5 !important; }

html body .settings-code-form {
  display:grid !important;
  grid-template-columns:minmax(220px,360px) auto !important;
  align-items:end !important;
  gap:10px !important;
  margin-top:10px !important;
  padding:12px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:9px !important;
  background:var(--pk-card-alt) !important;
}
html body .settings-success-box,
html body .settings-note-box,
html body .settings-warning-box {
  margin-top:10px !important;
  padding:11px 12px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:9px !important;
  font-size:10.5px !important;
  line-height:1.55 !important;
}
html body .settings-success-box { background:var(--pk-success-soft) !important; color:var(--pk-success) !important; }
html body .settings-note-box { background:var(--pk-card-alt) !important; color:var(--pk-muted) !important; }
html body .settings-note-box strong { color:var(--pk-ink) !important; }
html body .settings-warning-box { display:grid !important; gap:3px !important; background:var(--pk-pending-soft) !important; color:var(--pk-pending) !important; }
html body .settings-warning-box strong { color:var(--pk-pending) !important; }
html body .settings-warning-box span { color:color-mix(in srgb,var(--pk-pending) 76%,var(--pk-text)) !important; }
html body .settings-warning-box a { margin-top:4px !important; color:var(--pk-brand) !important; font-weight:600 !important; text-decoration:none !important; }

html body .settings-explainer-grid {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:9px !important;
  margin-bottom:14px !important;
}
html body .settings-explainer-grid > div {
  position:relative !important;
  min-height:88px !important;
  padding:13px 13px 13px 44px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:9px !important;
  background:var(--pk-card-alt) !important;
}
html body .settings-explainer-grid b {
  position:absolute !important;
  left:13px !important;
  top:13px !important;
  width:22px !important;
  height:22px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  background:var(--pk-brand-soft) !important;
  color:var(--pk-brand) !important;
  font-size:9px !important;
}
html body .settings-explainer-grid strong,
html body .settings-explainer-grid span { display:block !important; }
html body .settings-explainer-grid strong { color:var(--pk-ink) !important; font-size:11px !important; font-weight:650 !important; }
html body .settings-explainer-grid span { margin-top:4px !important; color:var(--pk-muted) !important; font-size:10px !important; line-height:1.5 !important; }
html body .settings-explainer-grid code { color:var(--pk-brand) !important; font-size:9.5px !important; }

html body .settings-api-base { margin-bottom:14px !important; }
html body .settings-api-base > span { flex:0 0 auto !important; color:var(--pk-faint) !important; font-size:9.5px !important; font-weight:600 !important; }
html body .settings-api-base code { min-width:0 !important; flex:1 !important; overflow-wrap:anywhere !important; color:var(--pk-ink) !important; font-size:11px !important; }

html body .settings-project-list { display:grid !important; gap:12px !important; }
html body .settings-project-card {
  overflow:hidden !important;
  border:1px solid var(--pk-line) !important;
  border-radius:10px !important;
  background:var(--pk-card) !important;
}
html body .settings-project-head {
  min-height:68px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:14px 15px !important;
  border-bottom:1px solid var(--pk-line) !important;
  background:var(--pk-card-alt) !important;
}
html body .settings-project-title-row { display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; }
html body .settings-project-title-row h3 { margin:0 !important; color:var(--pk-ink) !important; font-size:13px !important; font-weight:650 !important; }
html body .settings-project-head p { margin:4px 0 0 !important; color:var(--pk-muted) !important; font-size:9.5px !important; }
html body .settings-project-head code { color:var(--pk-brand) !important; font-size:9px !important; }
html body .settings-default-badge {
  display:inline-flex !important;
  align-items:center !important;
  min-height:20px !important;
  padding:3px 6px !important;
  border:1px solid color-mix(in srgb,var(--pk-brand) 25%,var(--pk-line)) !important;
  border-radius:5px !important;
  background:var(--pk-brand-soft) !important;
  color:var(--pk-brand) !important;
  font-size:8px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
}

html body .settings-key-row {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin:14px 15px 0 !important;
  padding:12px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:9px !important;
  background:var(--pk-card-alt) !important;
}
html body .settings-key-row.revealed { border-color:color-mix(in srgb,var(--pk-brand) 30%,var(--pk-line)) !important; }
html body .settings-key-row > div:first-child { min-width:0 !important; flex:1 !important; }
html body .settings-key-row span { display:block !important; margin-bottom:5px !important; color:var(--pk-faint) !important; font-size:8px !important; font-weight:700 !important; letter-spacing:.08em !important; }
html body .settings-key-row code { display:block !important; overflow:hidden !important; color:var(--pk-brand) !important; font-size:11px !important; font-weight:600 !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
html body .settings-key-actions { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:7px !important; flex-wrap:wrap !important; }
html body .settings-key-actions form { margin:0 !important; }
html body .settings-project-meta {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 15px 14px !important;
}
html body .settings-project-meta > div { min-width:0 !important; }
html body .settings-project-meta span,
html body .settings-project-meta strong { display:block !important; }
html body .settings-project-meta span { margin-bottom:3px !important; color:var(--pk-faint) !important; font-size:8.5px !important; }
html body .settings-project-meta strong { color:var(--pk-text) !important; font-size:9.5px !important; font-weight:600 !important; }
html body .settings-project-meta a { color:var(--pk-brand) !important; font-size:10px !important; font-weight:600 !important; text-decoration:none !important; }
html body .settings-project-card > .settings-note-box { margin:0 15px 14px !important; }

html body .settings-secret-row > div:first-child { min-width:0 !important; flex:1 !important; }
html body .settings-secret-row > div:first-child > span { display:block !important; margin-bottom:5px !important; color:var(--pk-faint) !important; font-size:8.5px !important; font-weight:700 !important; letter-spacing:.08em !important; }
html body .settings-secret-row input {
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:var(--pk-brand) !important;
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  font-size:11px !important;
  box-shadow:none !important;
}
html body .settings-secret-actions { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:7px !important; flex-wrap:wrap !important; }
html body .settings-secret-actions form { margin:0 !important; }
html body .settings-webhook-projects-card { margin-top:0 !important; }
html body .settings-webhook-form { padding:14px 15px !important; }
html body .settings-webhook-test-row { margin:0 15px 14px !important; }
html body .settings-webhook-test-row button:disabled { opacity:.45 !important; cursor:not-allowed !important; }

html body .settings-password-form { max-width:620px !important; }
html body .settings-info-single { margin-bottom:14px !important; }
html body .settings-info-single span { color:var(--pk-muted) !important; font-size:10px !important; }
html body .settings-info-single strong { color:var(--pk-ink) !important; font-size:10.5px !important; }
html body .settings-danger-zone {
  padding:14px !important;
  border:1px solid color-mix(in srgb,var(--pk-danger) 25%,var(--pk-line)) !important;
  border-radius:10px !important;
  background:var(--pk-danger-soft) !important;
}
html body .settings-danger-zone > div { margin-bottom:13px !important; }
html body .settings-danger-zone > div strong,
html body .settings-danger-zone > div span { display:block !important; }
html body .settings-danger-zone > div strong { color:var(--pk-danger) !important; font-size:11.5px !important; }
html body .settings-danger-zone > div span { margin-top:3px !important; color:color-mix(in srgb,var(--pk-danger) 72%,var(--pk-text)) !important; font-size:10px !important; }
html body .settings-twofa-grid { display:grid !important; grid-template-columns:220px minmax(0,1fr) !important; gap:18px !important; align-items:start !important; }
html body .settings-twofa-qr { padding:10px !important; border:1px solid var(--pk-line) !important; border-radius:10px !important; background:#fff !important; }
html body .settings-twofa-qr img { display:block !important; width:100% !important; height:auto !important; }
html body .settings-twofa-copy h3 { margin:0 0 4px !important; color:var(--pk-ink) !important; font-size:13px !important; }
html body .settings-twofa-copy > p { margin:0 0 12px !important; color:var(--pk-muted) !important; font-size:10.5px !important; line-height:1.55 !important; }
html body .settings-secret-manual { margin-bottom:12px !important; padding:11px 12px !important; border:1px solid var(--pk-line) !important; border-radius:9px !important; background:var(--pk-card-alt) !important; }
html body .settings-secret-manual span,
html body .settings-secret-manual code { display:block !important; }
html body .settings-secret-manual span { margin-bottom:4px !important; color:var(--pk-faint) !important; font-size:8.5px !important; font-weight:700 !important; letter-spacing:.06em !important; }
html body .settings-secret-manual code { overflow-wrap:anywhere !important; color:var(--pk-brand) !important; font-size:10px !important; }
html body .settings-cancel-form { margin-top:8px !important; }
html body .settings-empty-state { justify-content:flex-start !important; margin-bottom:14px !important; }
html body .settings-empty-icon { width:32px !important; height:32px !important; flex:0 0 32px !important; display:grid !important; place-items:center !important; border-radius:8px !important; background:var(--pk-brand-soft) !important; color:var(--pk-brand) !important; }

/* Ensure old modal surfaces follow the active theme inside Settings. */
html body .settings-page .profile-api-modal-dialog,
html body .settings-page .profile-api-modal-head {
  border-color:var(--pk-line) !important;
  background:var(--pk-card) !important;
  color:var(--pk-ink) !important;
}
html body .settings-page .profile-api-modal-head { background:var(--pk-card-alt) !important; }
html body .settings-page .profile-api-modal-head h3,
html body .settings-page .profile-api-modal-form label { color:var(--pk-ink) !important; }
html body .settings-page .profile-api-modal-copy { color:var(--pk-muted) !important; }
html body .settings-page .profile-api-modal-actions { border-color:var(--pk-line) !important; }
html body .settings-page .profile-api-modal-close { background:var(--pk-card-alt) !important; border-color:var(--pk-line) !important; color:var(--pk-muted) !important; }

@media (max-width:900px) {
  html body .settings-explainer-grid { grid-template-columns:1fr !important; }
  html body .settings-project-meta { grid-template-columns:1fr 1fr !important; }
  html body .settings-project-meta a { grid-column:1 / -1 !important; }
  html body .settings-twofa-grid { grid-template-columns:180px minmax(0,1fr) !important; }
}

@media (max-width:720px) {
  html body .settings-tabs { gap:20px !important; padding:0 14px !important; }
  html body .settings-tab { min-height:52px !important; font-size:12px !important; }
  html body .settings-section-head,
  html body .settings-section-head-split { align-items:flex-start !important; flex-direction:column !important; }
  html body .settings-section-head .btn { width:100% !important; justify-content:center !important; }
  html body .settings-info-grid { grid-template-columns:1fr !important; }
  html body .settings-info-item { border-right:0 !important; border-bottom:1px solid var(--pk-line) !important; }
  html body .settings-info-item:last-child { border-bottom:0 !important; }
  html body .settings-code-form { grid-template-columns:1fr !important; }
  html body .settings-key-row,
  html body .settings-secret-row,
  html body .settings-inline-card,
  html body .settings-webhook-test-row,
  html body .settings-actions-split { align-items:stretch !important; flex-direction:column !important; }
  html body .settings-key-actions,
  html body .settings-secret-actions { justify-content:flex-start !important; }
  html body .settings-project-meta { grid-template-columns:1fr !important; }
  html body .settings-project-meta a { grid-column:auto !important; }
  html body .settings-twofa-grid { grid-template-columns:1fr !important; }
  html body .settings-twofa-qr { width:210px !important; max-width:100% !important; margin:0 auto !important; }
}

@media (max-width:520px) {
  html body .settings-section-body { padding:15px !important; }
  html body .settings-section-head { padding:15px !important; }
  html body .settings-project-head { align-items:flex-start !important; flex-direction:column !important; }
  html body .settings-project-head .settings-status-pill { align-self:flex-start !important; }
  html body .settings-key-actions,
  html body .settings-secret-actions { width:100% !important; }
  html body .settings-key-actions .btn,
  html body .settings-key-actions form,
  html body .settings-secret-actions .btn,
  html body .settings-secret-actions form { flex:1 1 auto !important; }
}


/* ============================================================
   V13.2 · Settings polish + reliable copy feedback
   ============================================================ */
html body .settings-page .settings-secret-row {
  align-items:flex-end !important;
  padding:16px 18px !important;
}
html body .settings-page .settings-secret-row > div:first-child {
  display:grid !important;
  gap:7px !important;
  padding-left:2px !important;
}
html body .settings-page .settings-secret-row > div:first-child > span {
  margin:0 !important;
  padding-left:2px !important;
}
html body .settings-page .settings-secret-row input {
  width:100% !important;
  min-height:42px !important;
  padding:9px 12px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:8px !important;
  background:var(--pk-card) !important;
  color:var(--pk-ink) !important;
}
html body .settings-page .settings-secret-actions {
  padding-bottom:1px !important;
}
html body .settings-page [data-pk-copy-state="success"],
html body .documentation-page [data-pk-copy-state="success"] {
  border-color:color-mix(in srgb,var(--pk-success) 32%,var(--pk-line)) !important;
  background:var(--pk-success-soft) !important;
  color:var(--pk-success) !important;
}
html body .settings-page [data-pk-copy-state="failed"],
html body .documentation-page [data-pk-copy-state="failed"] {
  border-color:color-mix(in srgb,var(--pk-danger) 32%,var(--pk-line)) !important;
  background:var(--pk-danger-soft) !important;
  color:var(--pk-danger) !important;
}
@media (max-width:720px) {
  html body .settings-page .settings-secret-row { align-items:stretch !important; }
  html body .settings-page .settings-secret-actions { padding-bottom:0 !important; }
}

/* ============================================================
   V13.3 · Mobile sidebar fix
   Backdrop must sit behind the drawer, never above it.
   ============================================================ */
@media (max-width:767px) {
  html body .app-shell #paykita-sidebar.pk-sidebar,
  html body:not(.paykita-mobile-sidebar-open) .app-shell #paykita-sidebar.pk-sidebar,
  html body.paykita-mobile-sidebar-open .app-shell #paykita-sidebar.pk-sidebar {
    z-index:1600 !important;
    width:min(292px,84vw) !important;
    min-width:0 !important;
    max-width:min(292px,84vw) !important;
    height:100dvh !important;
    background:var(--pk-card) !important;
    border-right:1px solid var(--pk-line) !important;
    box-shadow:18px 0 44px rgba(0,0,0,.18) !important;
    isolation:isolate !important;
  }

  html body .mobile-sidebar-clickout,
  html body.paykita-mobile-sidebar-open .mobile-sidebar-clickout {
    z-index:1500 !important;
    background:var(--pk-overlay) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html body #paykita-sidebar .pk-sidebar-brand-row,
  html body #paykita-sidebar .retro-sidebar-top,
  html body #paykita-sidebar .pk-sidebar-scroll,
  html body #paykita-sidebar .pk-sidebar-footer,
  html body #paykita-sidebar .retro-sidebar-footer.pk-sidebar-footer {
    background:var(--pk-card) !important;
    color:var(--pk-text) !important;
  }

  html body #paykita-sidebar .pk-sidebar-brand-row,
  html body #paykita-sidebar .retro-sidebar-top {
    padding:18px 16px 15px !important;
  }

  html body #paykita-sidebar .pk-sidebar-scroll {
    padding:8px 10px 14px !important;
    overscroll-behavior:contain !important;
  }

  html body #paykita-sidebar .pk-nav-heading {
    padding:11px 9px 6px !important;
    font-size:9px !important;
  }

  html body #paykita-sidebar .pk-nav-list a,
  html body #paykita-sidebar .retro-nav.pk-nav-list a {
    min-height:40px !important;
    padding:8px 9px !important;
    border-radius:8px !important;
  }

  html body #paykita-sidebar .sidebar-mobile-close {
    top:18px !important;
    right:12px !important;
    z-index:2 !important;
    background:var(--pk-card-alt) !important;
    border:1px solid var(--pk-line) !important;
    color:var(--pk-muted) !important;
  }

  html body #paykita-sidebar .sidebar-mobile-close:hover,
  html body #paykita-sidebar .sidebar-mobile-close:active {
    background:var(--pk-hover) !important;
    color:var(--pk-ink) !important;
  }

  html body #paykita-sidebar .pk-sidebar-footer,
  html body #paykita-sidebar .retro-sidebar-footer.pk-sidebar-footer {
    padding:12px 12px 14px !important;
  }

  html body.paykita-mobile-sidebar-open .paykita-mobile-header {
    z-index:1250 !important;
  }
}

/* ============================================================
   V13.4 · QRIS page cleanup
   Scoped to /qris only. No backend/order/provider behavior changed.
   ============================================================ */
html body .qris-page .qris-builder-grid {
  align-items:start !important;
  gap:16px !important;
}

html body .qris-page .qris-builder-panel {
  overflow:hidden !important;
  background:var(--pk-card) !important;
  color:var(--pk-text) !important;
  border:1px solid var(--pk-line) !important;
  border-radius:var(--pk-radius) !important;
  box-shadow:var(--pk-shadow) !important;
}

html body .qris-page .qris-builder-panel > .panel-head {
  min-height:50px !important;
  display:flex !important;
  align-items:center !important;
  padding:14px 18px !important;
  background:var(--pk-card-alt) !important;
  border:0 !important;
  border-bottom:1px solid var(--pk-line) !important;
  color:var(--pk-ink) !important;
}

html body .qris-page .qris-builder-panel > .panel-head .panel-badge {
  color:var(--pk-brand) !important;
  font-size:10px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  letter-spacing:.075em !important;
}

html body .qris-page .qris-active-provider-box,
html body .qris-page .provider-qris-box,
html body .qris-page .qris-order-preview,
html body .qris-page .qris-auto-detector,
html body .qris-page .qris-inline-empty,
html body .qris-page .provider-standby-note,
html body .qris-page .qris-mode-box {
  background:var(--pk-card-alt) !important;
  color:var(--pk-text) !important;
  border-color:var(--pk-line) !important;
  box-shadow:none !important;
}

html body .qris-page .qris-active-provider-box {
  padding:16px !important;
}
html body .qris-page .qris-active-provider-box span {
  color:var(--pk-faint) !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.075em !important;
}
html body .qris-page .qris-active-provider-box strong {
  margin-top:7px !important;
  color:var(--pk-success) !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:650 !important;
}
html body .qris-page .qris-active-provider-box.is-empty strong {
  color:var(--pk-pending) !important;
}
html body .qris-page .qris-active-provider-box small {
  margin-top:6px !important;
  color:var(--pk-muted) !important;
  font-size:11px !important;
  line-height:1.45 !important;
}

html body .qris-page .provider-qris-box {
  padding:16px !important;
}
html body .qris-page .provider-qris-status-row {
  margin-bottom:11px !important;
  padding-bottom:10px !important;
  border-bottom:1px solid var(--pk-line) !important;
  color:var(--pk-ink) !important;
}
html body .qris-page .provider-qris-status-row strong {
  color:var(--pk-ink) !important;
  font-size:11.5px !important;
  font-weight:650 !important;
  letter-spacing:-.005em !important;
}
html body .qris-page .qris-status-line {
  padding:8px 0 4px !important;
  color:var(--pk-success) !important;
  font-size:12px !important;
}
html body .qris-page .qris-status-line strong,
html body .qris-page .provider-qris-box .muted strong {
  color:var(--pk-ink) !important;
}

html body .qris-page .qris-auto-detector {
  box-sizing:border-box !important;
  width:auto !important;
  margin:15px 18px 0 !important;
  padding:13px 15px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:14px !important;
}
html body .qris-page .qris-auto-detector span {
  color:var(--pk-muted) !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
html body .qris-page .qris-auto-detector strong {
  margin:0 !important;
  color:var(--pk-brand) !important;
  font-size:12px !important;
  line-height:1.4 !important;
  font-weight:650 !important;
  text-align:right !important;
}

/* Notes inside QRIS should never become bright light strips in dark mode. */
html body .qris-page .api-note {
  box-sizing:border-box !important;
  width:auto !important;
  margin-left:18px !important;
  margin-right:18px !important;
  padding:11px 13px !important;
  background:var(--pk-card-alt) !important;
  border:1px solid var(--pk-line) !important;
  border-radius:9px !important;
  color:var(--pk-muted) !important;
  font-size:11.5px !important;
  line-height:1.5 !important;
}
html body .qris-page .api-note strong { color:var(--pk-ink) !important; }
html body .qris-page .api-note.success {
  background:var(--pk-success-soft) !important;
  border-color:color-mix(in srgb,var(--pk-success) 26%,var(--pk-line)) !important;
  color:var(--pk-success) !important;
}
html body .qris-page .api-note.success strong { color:var(--pk-success) !important; }

html body .qris-page form.stack,
html body .qris-page .compact-stack {
  gap:12px !important;
}
html body .qris-page label {
  color:var(--pk-text) !important;
  font-size:11px !important;
  line-height:1.4 !important;
  font-weight:600 !important;
}
html body .qris-page small.muted,
html body .qris-page p.muted {
  color:var(--pk-muted) !important;
}
html body .qris-page input,
html body .qris-page select,
html body .qris-page textarea {
  background:var(--pk-input) !important;
  color:var(--pk-ink) !important;
  border-color:var(--pk-line-strong) !important;
}
html body .qris-page input[type="file"] {
  padding:0 !important;
  overflow:hidden !important;
}
html body .qris-page input[type="file"]::file-selector-button {
  min-height:42px !important;
  margin:0 12px 0 0 !important;
  padding:0 12px !important;
  border:0 !important;
  border-right:1px solid var(--pk-line) !important;
  background:var(--pk-card-alt) !important;
  color:var(--pk-text) !important;
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif !important;
  font-weight:600 !important;
  cursor:pointer !important;
}

html body .qris-page .qris-mode-box .qris-mode-options {
  gap:9px !important;
}
html body .qris-page .qris-mode-box .qris-mode-option {
  background:var(--pk-input) !important;
  border-color:var(--pk-line-strong) !important;
  color:var(--pk-text) !important;
}
html body .qris-page .qris-mode-box .qris-mode-option:hover {
  background:var(--pk-hover) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 28%,var(--pk-line-strong)) !important;
}
html body .qris-page .qris-mode-box .qris-mode-option span {
  color:var(--pk-text) !important;
  font-size:12px !important;
  font-weight:600 !important;
}

html body .qris-page hr {
  border:0 !important;
  border-top:1px solid var(--pk-line) !important;
}
html body .qris-page details > summary.text-link {
  color:var(--pk-brand) !important;
  font-size:11.5px !important;
  font-weight:600 !important;
}

html body .qris-page .qris-order-preview {
  padding:15px !important;
}
html body .qris-page .qris-breakdown {
  color:var(--pk-muted) !important;
  font-size:12px !important;
  line-height:1.65 !important;
}
html body .qris-page .qris-breakdown strong {
  color:var(--pk-ink) !important;
}
html body .qris-page .qris-pay-head {
  color:var(--pk-muted) !important;
  font-size:11px !important;
  font-weight:600 !important;
}
html body .qris-page .qris-pay-amount {
  color:var(--pk-brand) !important;
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  font-size:30px !important;
  font-weight:600 !important;
}

html body .qris-page .qris-delete-btn {
  background:var(--pk-card-alt) !important;
  color:var(--pk-text) !important;
  border-color:var(--pk-line-strong) !important;
}
html body .qris-page .qris-delete-btn:hover {
  background:var(--pk-hover) !important;
  color:var(--pk-ink) !important;
}
html body .qris-page .qris-wide-btn {
  min-height:42px !important;
  border-radius:8px !important;
}

html[data-theme="dark"] body .qris-page .qris-builder-panel,
html[data-theme="dark"] body .qris-page .qris-active-provider-box,
html[data-theme="dark"] body .qris-page .provider-qris-box,
html[data-theme="dark"] body .qris-page .qris-order-preview,
html[data-theme="dark"] body .qris-page .qris-auto-detector,
html[data-theme="dark"] body .qris-page .qris-inline-empty,
html[data-theme="dark"] body .qris-page .qris-mode-box {
  box-shadow:none !important;
}

@media (max-width:980px) {
  html body .qris-page .qris-builder-grid {
    grid-template-columns:1fr !important;
  }
}
@media (max-width:620px) {
  html body .qris-page .qris-auto-detector {
    grid-template-columns:1fr !important;
    gap:5px !important;
  }
  html body .qris-page .qris-auto-detector strong {
    text-align:left !important;
  }
  html body .qris-page .api-note {
    margin-left:14px !important;
    margin-right:14px !important;
  }
}

/* ============================================================
   V13.5 · GLOBAL THEME CONSISTENCY AUDIT
   Dark-mode compatibility for legacy/custom page components.
   Keeps business logic untouched; only normalizes visual tokens.
   ============================================================ */

/* ---- shared legacy headings / pills ---- */
html[data-theme="dark"] body .content .panel-head {
  background:var(--pk-card-alt) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-ink) !important;
}
html[data-theme="dark"] body .content .panel-head .panel-badge,
html[data-theme="dark"] body .content .panel-badge {
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .status-chip.neutral,
html[data-theme="dark"] body .badge.neutral {
  background:var(--pk-card-alt) !important;
  border-color:var(--pk-line-strong) !important;
  color:var(--pk-muted) !important;
}
html[data-theme="dark"] body .status-chip.info,
html[data-theme="dark"] body .badge.info,
html[data-theme="dark"] body .status-chip.warn {
  background:var(--pk-brand-soft) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 28%,var(--pk-line)) !important;
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .empty,
html[data-theme="dark"] body .details,
html[data-theme="dark"] body .sandbox-box {
  background:var(--pk-card-alt) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-muted) !important;
}

/* ============================================================
   SUBSCRIPTION
   ============================================================ */
html[data-theme="dark"] body .subscription-page .card {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-text) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body .subscription-page .card .card {
  background:var(--pk-card-alt) !important;
}
html[data-theme="dark"] body .subscription-page .subscription-status-topline,
html[data-theme="dark"] body .subscription-page small.muted {
  color:var(--pk-faint) !important;
}
html[data-theme="dark"] body .subscription-page .subscription-status-title,
html[data-theme="dark"] body .subscription-page h2,
html[data-theme="dark"] body .subscription-page strong {
  color:var(--pk-ink) !important;
}
html[data-theme="dark"] body .subscription-page .subscription-status-desc,
html[data-theme="dark"] body .subscription-page > .card > p.muted {
  color:var(--pk-muted) !important;
}
html[data-theme="dark"] body .subscription-page table,
html[data-theme="dark"] body .subscription-page .table-wrap {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
}

/* ============================================================
   PROVIDER PAGES · Shopee / GoPay
   ============================================================ */
html[data-theme="dark"] body .provider-modern-page .qris-builder-panel,
html[data-theme="dark"] body .provider-modern-page .provider-dashboard-card,
html[data-theme="dark"] body .provider-modern-page .provider-recent-card,
html[data-theme="dark"] body .provider-modern-page .card {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-text) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-section-title {
  background:var(--pk-card-alt) !important;
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-section-title h2,
html[data-theme="dark"] body .provider-modern-page .provider-setting-row strong,
html[data-theme="dark"] body .provider-modern-page .provider-qris-summary-line strong,
html[data-theme="dark"] body .provider-modern-page .provider-upload-box strong,
html[data-theme="dark"] body .provider-modern-page .provider-hybrid-example-list span,
html[data-theme="dark"] body .provider-modern-page .provider-page-title h1 {
  color:var(--pk-ink) !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-section-title small,
html[data-theme="dark"] body .provider-modern-page .provider-setting-row small,
html[data-theme="dark"] body .provider-modern-page .provider-qris-summary-line small,
html[data-theme="dark"] body .provider-modern-page .provider-upload-box small,
html[data-theme="dark"] body .provider-modern-page .provider-hybrid-copy,
html[data-theme="dark"] body .provider-modern-page .provider-mode-state,
html[data-theme="dark"] body .provider-modern-page .muted {
  color:var(--pk-muted) !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-read-required {
  background:var(--pk-brand-soft) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 28%,var(--pk-line)) !important;
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-read-required-icon,
html[data-theme="dark"] body .provider-modern-page .provider-brand-icon,
html[data-theme="dark"] body .provider-modern-page .provider-section-icon {
  background:var(--pk-brand-soft) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 28%,var(--pk-line)) !important;
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-read-required strong {
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-read-required small {
  color:var(--pk-muted) !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-risk-required {
  background:var(--pk-danger-soft) !important;
  border-color:color-mix(in srgb,var(--pk-danger) 30%,var(--pk-line)) !important;
  color:var(--pk-danger) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-risk-required-icon {
  background:color-mix(in srgb,var(--pk-danger-soft) 75%,var(--pk-card)) !important;
  border-color:color-mix(in srgb,var(--pk-danger) 30%,var(--pk-line)) !important;
  color:var(--pk-danger) !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-risk-required strong { color:var(--pk-danger) !important; }
html[data-theme="dark"] body .provider-modern-page .provider-risk-required small { color:color-mix(in srgb,var(--pk-danger) 68%,var(--pk-muted)) !important; }
html[data-theme="dark"] body .provider-modern-page .provider-info-note,
html[data-theme="dark"] body .provider-modern-page .provider-qris-summary-line,
html[data-theme="dark"] body .provider-modern-page .provider-upload-box,
html[data-theme="dark"] body .provider-modern-page .provider-hybrid-example-list > div,
html[data-theme="dark"] body .provider-modern-page .provider-standby-note,
html[data-theme="dark"] body .provider-modern-page .provider-qris-box {
  background:var(--pk-card-alt) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-text) !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-info-note {
  color:var(--pk-brand) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 25%,var(--pk-line)) !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-info-note.success-note {
  background:var(--pk-success-soft) !important;
  border-color:color-mix(in srgb,var(--pk-success) 28%,var(--pk-line)) !important;
  color:var(--pk-success) !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-hybrid-example-list strong {
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-setting-row {
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body .provider-modern-page .provider-inline-doc-link {
  color:var(--pk-brand) !important;
}

/* ============================================================
   TUTORIAL
   ============================================================ */
html[data-theme="dark"] body .tutorial-page .tutorial-hero-card,
html[data-theme="dark"] body .tutorial-page .tutorial-jump-nav,
html[data-theme="dark"] body .tutorial-page .tutorial-section,
html[data-theme="dark"] body .tutorial-page .tutorial-check-card,
html[data-theme="dark"] body .tutorial-page .tutorial-step-list article,
html[data-theme="dark"] body .tutorial-page .tutorial-recommend-grid article,
html[data-theme="dark"] body .tutorial-page .tutorial-feature-grid article,
html[data-theme="dark"] body .tutorial-page .tutorial-faq-list details,
html[data-theme="dark"] body .tutorial-page .tutorial-provider-grid a {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-text) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-hero-card {
  background:linear-gradient(135deg,var(--pk-card) 0%,var(--pk-card-alt) 100%) !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-hero-card h2,
html[data-theme="dark"] body .tutorial-page .tutorial-section h2,
html[data-theme="dark"] body .tutorial-page .tutorial-step-list h3,
html[data-theme="dark"] body .tutorial-page .tutorial-feature-grid h3,
html[data-theme="dark"] body .tutorial-page .tutorial-check-card strong,
html[data-theme="dark"] body .tutorial-page .tutorial-provider-grid strong,
html[data-theme="dark"] body .tutorial-page .tutorial-recommend-grid strong,
html[data-theme="dark"] body .tutorial-page .tutorial-faq-list summary {
  color:var(--pk-ink) !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-hero-card p,
html[data-theme="dark"] body .tutorial-page .tutorial-section > p,
html[data-theme="dark"] body .tutorial-page .tutorial-lead,
html[data-theme="dark"] body .tutorial-page .tutorial-check-card small,
html[data-theme="dark"] body .tutorial-page .tutorial-provider-grid small,
html[data-theme="dark"] body .tutorial-page .tutorial-step-list p,
html[data-theme="dark"] body .tutorial-page .tutorial-feature-grid p,
html[data-theme="dark"] body .tutorial-page .tutorial-recommend-grid p,
html[data-theme="dark"] body .tutorial-page .tutorial-faq-list p,
html[data-theme="dark"] body .tutorial-page .tutorial-number-list {
  color:var(--pk-muted) !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-kicker,
html[data-theme="dark"] body .tutorial-page .tutorial-section-label,
html[data-theme="dark"] body .tutorial-page .tutorial-check-card > span,
html[data-theme="dark"] body .tutorial-page .tutorial-check-card b {
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-jump-nav a,
html[data-theme="dark"] body .tutorial-page .tutorial-hybrid-demo > div {
  background:var(--pk-card-alt) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-text) !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-jump-nav a:hover,
html[data-theme="dark"] body .tutorial-page .tutorial-provider-grid a:hover {
  background:var(--pk-hover) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 28%,var(--pk-line)) !important;
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-section code {
  background:var(--pk-code) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-code-text) !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-info,
html[data-theme="dark"] body .tutorial-page .tutorial-tip {
  background:var(--pk-brand-soft) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 26%,var(--pk-line)) !important;
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-info strong,
html[data-theme="dark"] body .tutorial-page .tutorial-tip strong {
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-info p,
html[data-theme="dark"] body .tutorial-page .tutorial-tip p {
  color:var(--pk-muted) !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-warning {
  background:var(--pk-pending-soft) !important;
  border-color:color-mix(in srgb,var(--pk-pending) 28%,var(--pk-line)) !important;
  color:var(--pk-pending) !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-warning strong { color:var(--pk-pending) !important; }
html[data-theme="dark"] body .tutorial-page .tutorial-warning p { color:var(--pk-muted) !important; }
html[data-theme="dark"] body .tutorial-page .tutorial-danger {
  background:var(--pk-danger-soft) !important;
  border-color:color-mix(in srgb,var(--pk-danger) 30%,var(--pk-line)) !important;
  color:var(--pk-danger) !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-danger strong { color:var(--pk-danger) !important; }
html[data-theme="dark"] body .tutorial-page .tutorial-danger p { color:var(--pk-muted) !important; }
html[data-theme="dark"] body .tutorial-page .tutorial-provider-logo,
html[data-theme="dark"] body .tutorial-page .tutorial-section-provider-icon {
  background:var(--pk-brand-soft) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 28%,var(--pk-line)) !important;
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .tutorial-page .tutorial-hero-badge {
  background:var(--pk-success-soft) !important;
  border-color:color-mix(in srgb,var(--pk-success) 28%,var(--pk-line)) !important;
  color:var(--pk-success) !important;
}

/* ============================================================
   PRIVACY / LEGAL
   ============================================================ */
html[data-theme="dark"] body .privacy-public-shell,
html[data-theme="dark"] body .privacy-page {
  background:var(--pk-surface) !important;
  color:var(--pk-text) !important;
}
html[data-theme="dark"] body .privacy-public-header {
  background:color-mix(in srgb,var(--pk-card) 94%,transparent) !important;
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body .privacy-page .privacy-hero,
html[data-theme="dark"] body .privacy-page .privacy-jump-nav,
html[data-theme="dark"] body .privacy-page .privacy-section,
html[data-theme="dark"] body .privacy-page .privacy-provider-list article,
html[data-theme="dark"] body .privacy-page .privacy-data-grid article,
html[data-theme="dark"] body .privacy-page .privacy-risk-card {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-text) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body .privacy-page .privacy-summary-card {
  background:var(--pk-brand-soft) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 26%,var(--pk-line)) !important;
}
html[data-theme="dark"] body .privacy-page .privacy-hero h1,
html[data-theme="dark"] body .privacy-page .privacy-section h2,
html[data-theme="dark"] body .privacy-page .privacy-section h3,
html[data-theme="dark"] body .privacy-page .privacy-risk-title,
html[data-theme="dark"] body .privacy-page .privacy-risk-title strong,
html[data-theme="dark"] body .privacy-page .privacy-provider-list strong,
html[data-theme="dark"] body .privacy-page .privacy-data-grid strong {
  color:var(--pk-ink) !important;
}
html[data-theme="dark"] body .privacy-page .privacy-hero p,
html[data-theme="dark"] body .privacy-page .privacy-hero small,
html[data-theme="dark"] body .privacy-page .privacy-section p,
html[data-theme="dark"] body .privacy-page .privacy-section li,
html[data-theme="dark"] body .privacy-page .privacy-provider-list p,
html[data-theme="dark"] body .privacy-page .privacy-data-grid p,
html[data-theme="dark"] body .privacy-page .privacy-summary-card span {
  color:var(--pk-muted) !important;
}
html[data-theme="dark"] body .privacy-page .privacy-kicker,
html[data-theme="dark"] body .privacy-page .privacy-summary-card strong {
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .privacy-page .privacy-jump-nav a {
  color:var(--pk-muted) !important;
}
html[data-theme="dark"] body .privacy-page .privacy-jump-nav a:hover {
  background:var(--pk-brand-soft) !important;
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .privacy-page .privacy-section-no,
html[data-theme="dark"] body .privacy-page .privacy-provider-icon {
  background:var(--pk-brand-soft) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 28%,var(--pk-line)) !important;
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .privacy-page .privacy-section code {
  background:var(--pk-code) !important;
  color:var(--pk-code-text) !important;
}
html[data-theme="dark"] body .privacy-page .privacy-note {
  background:var(--pk-brand-soft) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 26%,var(--pk-line)) !important;
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .privacy-page .privacy-danger,
html[data-theme="dark"] body .privacy-page .privacy-risk-card-strong {
  background:var(--pk-danger-soft) !important;
  border-color:color-mix(in srgb,var(--pk-danger) 30%,var(--pk-line)) !important;
  color:var(--pk-danger) !important;
}
html[data-theme="dark"] body .privacy-page .privacy-danger p,
html[data-theme="dark"] body .privacy-page .privacy-risk-card-strong p,
html[data-theme="dark"] body .privacy-page .privacy-risk-card-strong li {
  color:var(--pk-muted) !important;
}

/* ============================================================
   LISTENER HUB
   ============================================================ */
html[data-theme="dark"] body .listener-hub-page .card,
html[data-theme="dark"] body .listener-hub-page .listener-head-status,
html[data-theme="dark"] body .listener-hub-page .listener-summary-card,
html[data-theme="dark"] body .listener-hub-page .listener-app-brand,
html[data-theme="dark"] body .listener-hub-page .listener-detector-row,
html[data-theme="dark"] body .listener-hub-page .listener-device-item,
html[data-theme="dark"] body .listener-hub-page .listener-source-chip,
html[data-theme="dark"] body .listener-hub-page .listener-empty-state {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-text) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body .listener-hub-page .listener-app-meta {
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body .listener-hub-page .listener-app-meta > div,
html[data-theme="dark"] body .listener-hub-page .listener-signal,
html[data-theme="dark"] body .listener-hub-page .listener-mode-pill,
html[data-theme="dark"] body .listener-hub-page .listener-note-box {
  background:var(--pk-card-alt) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-muted) !important;
}
html[data-theme="dark"] body .listener-hub-page .listener-section-head h2,
html[data-theme="dark"] body .listener-hub-page .listener-summary-card > strong,
html[data-theme="dark"] body .listener-hub-page .listener-app-brand strong,
html[data-theme="dark"] body .listener-hub-page .listener-app-meta strong,
html[data-theme="dark"] body .listener-hub-page .listener-detector-provider strong,
html[data-theme="dark"] body .listener-hub-page .listener-device-main strong,
html[data-theme="dark"] body .listener-hub-page .listener-steps strong,
html[data-theme="dark"] body .listener-hub-page .listener-source-chip strong,
html[data-theme="dark"] body .listener-hub-page .listener-empty-state strong {
  color:var(--pk-ink) !important;
}
html[data-theme="dark"] body .listener-hub-page .listener-head-status small,
html[data-theme="dark"] body .listener-hub-page .listener-summary-card > span,
html[data-theme="dark"] body .listener-hub-page .listener-summary-card > small,
html[data-theme="dark"] body .listener-hub-page .listener-app-brand span,
html[data-theme="dark"] body .listener-hub-page .listener-app-meta span,
html[data-theme="dark"] body .listener-hub-page .listener-detector-provider small,
html[data-theme="dark"] body .listener-hub-page .listener-device-main small,
html[data-theme="dark"] body .listener-hub-page .listener-device-status small,
html[data-theme="dark"] body .listener-hub-page .listener-device-permissions,
html[data-theme="dark"] body .listener-hub-page .listener-steps p,
html[data-theme="dark"] body .listener-hub-page .listener-download-help,
html[data-theme="dark"] body .listener-hub-page .listener-empty-state p {
  color:var(--pk-muted) !important;
}
html[data-theme="dark"] body .listener-hub-page .listener-kicker,
html[data-theme="dark"] body .listener-hub-page .listener-section-kicker,
html[data-theme="dark"] body .listener-hub-page .listener-official-badge,
html[data-theme="dark"] body .listener-hub-page .listener-note-box strong {
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .listener-hub-page .listener-official-badge,
html[data-theme="dark"] body .listener-hub-page .listener-steps li > span,
html[data-theme="dark"] body .listener-hub-page .listener-device-icon {
  background:var(--pk-brand-soft) !important;
  border-color:color-mix(in srgb,var(--pk-brand) 28%,var(--pk-line)) !important;
  color:var(--pk-brand) !important;
}
html[data-theme="dark"] body .listener-hub-page .listener-signal.is-on {
  background:var(--pk-success-soft) !important;
  border-color:color-mix(in srgb,var(--pk-success) 28%,var(--pk-line)) !important;
  color:var(--pk-success) !important;
}
html[data-theme="dark"] body .listener-hub-page .listener-signal.is-on b,
html[data-theme="dark"] body .listener-hub-page .listener-device-permissions .is-ok b,
html[data-theme="dark"] body .listener-hub-page .listener-head-status.is-ready strong {
  color:var(--pk-success) !important;
}
html[data-theme="dark"] body .listener-hub-page .listener-device-permissions b,
html[data-theme="dark"] body .listener-hub-page .listener-signal b {
  color:var(--pk-text) !important;
}
html[data-theme="dark"] body .listener-hub-page .listener-source-wrap {
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body .listener-hub-page .listener-warning-box {
  background:var(--pk-pending-soft) !important;
  border-color:color-mix(in srgb,var(--pk-pending) 28%,var(--pk-line)) !important;
  color:var(--pk-pending) !important;
}

/* ============================================================
   PROJECTS / ORDERS / ORDER DETAIL · residual surfaces
   ============================================================ */
html[data-theme="dark"] body .projects-page .project-stat,
html[data-theme="dark"] body .project-detail-page .project-counter,
html[data-theme="dark"] body .project-detail-page .project-name-card,
html[data-theme="dark"] body .orders-page .form-grid,
html[data-theme="dark"] body .order-detail-page .grid-2 > .card,
html[data-theme="dark"] body .order-detail-page .webhook-log-item {
  background:var(--pk-card-alt) !important;
  border-color:var(--pk-line) !important;
  color:var(--pk-text) !important;
}
html[data-theme="dark"] body .projects-page .project-name,
html[data-theme="dark"] body .project-detail-page .project-counter strong,
html[data-theme="dark"] body .order-detail-page .pay-big {
  color:var(--pk-ink) !important;
}

/* ============================================================
   ADMIN / SETTINGS / DOCS · final safety pass
   ============================================================ */
html[data-theme="dark"] body .ads-page .ads-card-head,
html[data-theme="dark"] body .settings-page .settings-section-head,
html[data-theme="dark"] body .documentation-page .card-head {
  background:var(--pk-card-alt) !important;
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body .settings-page .settings-inline-card,
html[data-theme="dark"] body .settings-page .settings-project-card,
html[data-theme="dark"] body .settings-page .settings-note-box,
html[data-theme="dark"] body .settings-page .settings-empty-state,
html[data-theme="dark"] body .settings-page .settings-explainer-grid > div {
  background:var(--pk-card-alt) !important;
  border-color:var(--pk-line) !important;
}

/* Prevent stale hardcoded light surfaces from reappearing in known app pages. */
html[data-theme="dark"] body .content .tutorial-page [style*="background: #fff"],
html[data-theme="dark"] body .content .tutorial-page [style*="background:#fff"],
html[data-theme="dark"] body .content .provider-modern-page [style*="background: #fff"],
html[data-theme="dark"] body .content .provider-modern-page [style*="background:#fff"],
html[data-theme="dark"] body .content .listener-hub-page [style*="background: #fff"],
html[data-theme="dark"] body .content .listener-hub-page [style*="background:#fff"] {
  background:var(--pk-card) !important;
}

/* Responsive consistency on long educational/configuration pages. */
@media (max-width:900px) {
  html body .tutorial-page .tutorial-checklist-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html body .listener-hub-page .listener-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:620px) {
  html body .tutorial-page .tutorial-checklist-grid,
  html body .tutorial-page .tutorial-provider-grid,
  html body .tutorial-page .tutorial-recommend-grid,
  html body .tutorial-page .tutorial-feature-grid,
  html body .listener-hub-page .listener-summary-grid { grid-template-columns:1fr !important; }
  html body .privacy-page .privacy-hero,
  html body .privacy-page .privacy-section { border-radius:12px !important; }
}

/* ============================================================
   V13.6 · Subscription pricing redesign
   Inspired by a compact premium pricing grid; PayKita data and
   checkout logic remain unchanged.
   ============================================================ */
.subscription-v136 { max-width:1320px !important; }
.subscription-v136 .subscription-page-head { margin-bottom:20px !important; }

.subscription-current {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:16px;
  padding:17px 20px;
  border:1px solid var(--pk-line);
  border-radius:14px;
  background:var(--pk-card);
}
.subscription-current-copy { min-width:0; }
.subscription-current-kicker,
.subscription-section-kicker {
  display:block;
  margin-bottom:7px;
  color:var(--pk-faint);
  font-size:9px;
  line-height:1;
  font-weight:700;
  letter-spacing:.105em;
}
.subscription-current-title-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.subscription-current-title-row > strong { color:var(--pk-ink); font-size:14px; font-weight:650; }
.subscription-state-dot { width:7px; height:7px; border-radius:50%; background:var(--pk-faint); }
.subscription-state-dot.ok { background:var(--pk-success); box-shadow:0 0 0 4px color-mix(in srgb,var(--pk-success) 13%,transparent); }
.subscription-state-dot.info { background:var(--pk-brand); box-shadow:0 0 0 4px color-mix(in srgb,var(--pk-brand) 13%,transparent); }
.subscription-current-badge {
  display:inline-flex; align-items:center; min-height:22px; padding:3px 8px;
  border:1px solid var(--pk-line); border-radius:999px;
  color:var(--pk-muted); background:var(--pk-card-alt);
  font-size:9px; font-weight:700; letter-spacing:.04em;
}
.subscription-current-badge.ok { color:var(--pk-success); background:var(--pk-success-soft); border-color:color-mix(in srgb,var(--pk-success) 25%,var(--pk-line)); }
.subscription-current-badge.info { color:var(--pk-brand); background:var(--pk-brand-soft); border-color:color-mix(in srgb,var(--pk-brand) 25%,var(--pk-line)); }
.subscription-current-copy p { margin:7px 0 0; color:var(--pk-muted); font-size:11.5px; line-height:1.55; }
.subscription-current-copy p strong { color:var(--pk-ink); }
.subscription-current-link {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  min-height:36px; padding:8px 12px; border:1px solid var(--pk-line);
  border-radius:9px; color:var(--pk-ink); background:var(--pk-card-alt);
  text-decoration:none; font-size:11px; font-weight:600;
}
.subscription-current-link:hover { border-color:var(--pk-line-strong); color:var(--pk-brand); }

.subscription-tabs {
  width:max-content; max-width:100%; display:flex; align-items:center; gap:4px;
  margin:0 auto 34px; padding:5px; border:1px solid var(--pk-line);
  border-radius:11px; background:var(--pk-card);
}
.subscription-tabs a {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:38px; padding:8px 15px; border-radius:8px;
  color:var(--pk-muted); text-decoration:none; font-size:11px; font-weight:600;
}
.subscription-tabs a svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.subscription-tabs a.active { color:var(--pk-ink); background:var(--pk-card-alt); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.subscription-tabs a:hover { color:var(--pk-ink); }

.subscription-pricing-section { scroll-margin-top:24px; }
.subscription-section-heading { margin-bottom:22px; text-align:center; }
.subscription-section-heading h2,
.subscription-history-head h2 { margin:0; color:var(--pk-ink); font-size:20px; font-weight:650; letter-spacing:-.025em; }
.subscription-section-heading p,
.subscription-history-head p { max-width:720px; margin:7px auto 0; color:var(--pk-muted); font-size:11.5px; line-height:1.6; }

.subscription-plan-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.subscription-plan-card {
  position:relative;
  min-width:0;
  min-height:440px;
  display:flex;
  flex-direction:column;
  padding:25px 22px 20px;
  border:1px solid var(--pk-line);
  border-radius:15px;
  background:var(--pk-card);
  color:var(--pk-text);
  box-shadow:none;
}
.subscription-plan-card.featured {
  border-color:var(--pk-line-strong);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pk-ink) 24%,transparent);
}
.subscription-plan-ribbon {
  position:absolute; top:-12px; left:18px;
  display:inline-flex; align-items:center; gap:5px;
  min-height:25px; padding:5px 10px;
  border:1px solid var(--pk-line-strong); border-radius:999px;
  background:var(--pk-ink); color:var(--pk-card);
  font-size:8px; line-height:1; font-weight:800; letter-spacing:.09em;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.subscription-plan-ribbon svg { width:11px; height:11px; fill:currentColor; stroke:currentColor; stroke-width:1; }
.subscription-plan-top { min-height:128px; }
.subscription-plan-period { display:block; margin-bottom:10px; color:var(--pk-faint); font-size:9px; font-weight:700; letter-spacing:.1em; }
.subscription-plan-price { color:var(--pk-ink); font-size:28px; line-height:1.05; font-weight:700; letter-spacing:-.035em; }
.subscription-plan-top p { min-height:34px; margin:8px 0 0; color:var(--pk-muted); font-size:10.5px; line-height:1.55; }
.subscription-plan-rate { margin-top:9px; color:var(--pk-faint); font-size:9.5px; font-weight:500; }
.subscription-saving-chip {
  width:max-content; max-width:100%; display:inline-flex; align-items:center; gap:5px;
  margin-top:9px; padding:4px 8px; border:1px solid color-mix(in srgb,var(--pk-success) 28%,var(--pk-line));
  border-radius:999px; background:var(--pk-success-soft); color:var(--pk-success);
  font-size:8px; line-height:1.2; font-weight:700;
}
.subscription-saving-chip svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.subscription-plan-divider { height:1px; margin:17px 0; background:var(--pk-line); }
.subscription-benefit-list { list-style:none; display:grid; gap:11px; margin:0; padding:0; }
.subscription-benefit-list li { display:flex; align-items:flex-start; gap:9px; color:var(--pk-muted); font-size:10.5px; line-height:1.45; }
.subscription-benefit-list li span { color:var(--pk-success); font-weight:800; }
.subscription-buy-form { margin-top:auto; padding-top:22px; }
.subscription-buy-button {
  width:100%; min-height:45px; display:flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--pk-line-strong); border-radius:10px;
  background:var(--pk-card-alt); color:var(--pk-ink);
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif; font-size:11.5px; font-weight:700;
  cursor:pointer; transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.subscription-buy-button svg { width:15px; height:15px; fill:currentColor; stroke:currentColor; stroke-width:1.2; }
.subscription-buy-button:hover { transform:translateY(-1px); border-color:var(--pk-ink); }
.subscription-buy-button.featured { background:var(--pk-ink); color:var(--pk-card); border-color:var(--pk-ink); }

.subscription-included {
  margin-top:28px;
  overflow:hidden;
  border:1px solid var(--pk-line);
  border-radius:14px;
  background:var(--pk-card);
}
.subscription-included-title { padding:13px 18px; border-bottom:1px solid var(--pk-line); color:var(--pk-faint); font-size:8.5px; font-weight:750; letter-spacing:.085em; }
.subscription-included-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.subscription-included-grid > div { display:flex; align-items:center; gap:9px; min-height:48px; padding:12px 18px; border-top:1px solid transparent; color:var(--pk-muted); font-size:10.5px; }
.subscription-included-grid > div span { width:18px; height:18px; display:grid; place-items:center; border:1px solid var(--pk-line); border-radius:5px; color:var(--pk-success); font-size:10px; font-weight:800; }

.subscription-history {
  scroll-margin-top:24px;
  margin-top:30px;
  overflow:hidden;
  border:1px solid var(--pk-line);
  border-radius:14px;
  background:var(--pk-card);
}
.subscription-history-head { padding:18px 20px 15px; border-bottom:1px solid var(--pk-line); }
.subscription-history-head p { margin-left:0; }
.subscription-history-table-wrap { background:transparent !important; border:0 !important; }
.subscription-empty-history { padding:28px 20px; color:var(--pk-muted); font-size:11.5px; text-align:center; }

html[data-theme="dark"] body .subscription-v136 .subscription-plan-card,
html[data-theme="dark"] body .subscription-v136 .subscription-current,
html[data-theme="dark"] body .subscription-v136 .subscription-tabs,
html[data-theme="dark"] body .subscription-v136 .subscription-included,
html[data-theme="dark"] body .subscription-v136 .subscription-history {
  background:var(--pk-card) !important;
  border-color:var(--pk-line) !important;
}
html[data-theme="dark"] body .subscription-v136 .subscription-plan-card.featured { border-color:var(--pk-line-strong) !important; }
html[data-theme="dark"] body .subscription-v136 .subscription-plan-ribbon,
html[data-theme="dark"] body .subscription-v136 .subscription-buy-button.featured {
  background:#f1f3f7 !important;
  color:#111318 !important;
  border-color:#f1f3f7 !important;
}
html[data-theme="dark"] body .subscription-v136 .subscription-tabs a.active,
html[data-theme="dark"] body .subscription-v136 .subscription-current-link,
html[data-theme="dark"] body .subscription-v136 .subscription-buy-button:not(.featured) {
  background:var(--pk-card-alt) !important;
  color:var(--pk-ink) !important;
}

@media (max-width:1100px) {
  .subscription-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .subscription-current { align-items:flex-start; flex-direction:column; }
  .subscription-current-link { width:100%; justify-content:center; }
  .subscription-tabs { width:100%; }
  .subscription-tabs a { flex:1; padding-inline:9px; }
  .subscription-plan-grid { grid-template-columns:1fr; gap:18px; }
  .subscription-plan-card { min-height:0; padding:24px 20px 18px; }
  .subscription-plan-top { min-height:0; }
  .subscription-included-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .subscription-tabs { align-items:stretch; flex-direction:column; }
  .subscription-tabs a { width:100%; }
  .subscription-included-grid { grid-template-columns:1fr; }
}

/* ============================================================
   V13.7 · Sidebar redesign
   Direction: compact dark navigation, light active pill, stacked account footer.
   Sidebar only — routes and application behavior are untouched.
   ============================================================ */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --pk-sidebar:244px;
}

html body #paykita-sidebar.pk-sidebar {
  --sb-bg:#15171f;
  --sb-bg-hover:#1d2029;
  --sb-border:#2b2e38;
  --sb-text:#c9ccd6;
  --sb-muted:#858a9b;
  --sb-icon:#a7adbd;
  --sb-active-bg:#eceef2;
  --sb-active-text:#17181d;
  --sb-avatar:#22252f;
  background:var(--sb-bg) !important;
  color:var(--sb-text) !important;
  border-right:1px solid var(--sb-border) !important;
}

html body #paykita-sidebar .pk-sidebar-brand-row,
html body #paykita-sidebar .retro-sidebar-top {
  min-height:98px !important;
  padding:20px 16px 18px !important;
  background:var(--sb-bg) !important;
  border-bottom:1px solid var(--sb-border) !important;
}

html body #paykita-sidebar .sidebar-brand {
  align-items:flex-start !important;
}

html body #paykita-sidebar .pk-sidebar-brand-copy {
  gap:4px !important;
}

html body #paykita-sidebar .pk-sidebar-logo {
  height:30px !important;
  max-width:154px !important;
}

html body #paykita-sidebar .pk-sidebar-brand-copy small {
  color:#8c91a2 !important;
  font-size:9.5px !important;
  font-weight:500 !important;
  letter-spacing:.015em !important;
}

html body #paykita-sidebar .pk-sidebar-scroll {
  padding:10px 8px 18px !important;
  background:var(--sb-bg) !important;
  scrollbar-color:#353945 transparent !important;
}

html body #paykita-sidebar .pk-nav-section + .pk-nav-section {
  margin-top:7px !important;
}

html body #paykita-sidebar .pk-nav-heading {
  padding:12px 9px 7px !important;
  color:#747a8e !important;
  font-size:9px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  letter-spacing:.13em !important;
}

html body #paykita-sidebar .pk-nav-list,
html body #paykita-sidebar .retro-nav.pk-nav-list {
  gap:2px !important;
}

html body #paykita-sidebar .pk-nav-list a,
html body #paykita-sidebar .retro-nav.pk-nav-list a,
html body #paykita-sidebar .pk-nav-list a .nav-label,
html body #paykita-sidebar .retro-nav.pk-nav-list a .nav-label {
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  line-height:1.3 !important;
  letter-spacing:-.006em !important;
}

html body #paykita-sidebar .pk-nav-list a,
html body #paykita-sidebar .retro-nav.pk-nav-list a {
  min-height:41px !important;
  padding:9px 11px !important;
  gap:11px !important;
  border-radius:10px !important;
  background:transparent !important;
  color:var(--sb-text) !important;
}

html body #paykita-sidebar .pk-nav-list a:hover,
html body #paykita-sidebar .retro-nav.pk-nav-list a:hover {
  background:var(--sb-bg-hover) !important;
  color:#f2f3f6 !important;
}

html body #paykita-sidebar .pk-nav-list a.active,
html body #paykita-sidebar .retro-nav.pk-nav-list a.active {
  background:var(--sb-active-bg) !important;
  color:var(--sb-active-text) !important;
  font-weight:600 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.18) !important;
}

html body #paykita-sidebar .pk-nav-list a.active .nav-label,
html body #paykita-sidebar .retro-nav.pk-nav-list a.active .nav-label {
  color:var(--sb-active-text) !important;
  font-weight:600 !important;
}

html body #paykita-sidebar .nav-icon {
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  color:var(--sb-icon) !important;
}

html body #paykita-sidebar .nav-icon svg {
  width:18px !important;
  height:18px !important;
  stroke-width:1.65 !important;
}

html body #paykita-sidebar .pk-nav-list a:hover .nav-icon {
  color:#d8dbe3 !important;
}

html body #paykita-sidebar .pk-nav-list a.active .nav-icon {
  color:#24262d !important;
}

/* Account area mirrors the reference: identity first, actions underneath. */
html body #paykita-sidebar .pk-sidebar-footer,
html body #paykita-sidebar .retro-sidebar-footer.pk-sidebar-footer {
  padding:12px 10px 14px !important;
  background:var(--sb-bg) !important;
  border-top:1px solid var(--sb-border) !important;
}

html body #paykita-sidebar .pk-sidebar-user {
  gap:10px !important;
  padding:2px 6px 12px !important;
  color:#f1f2f5 !important;
}

html body #paykita-sidebar .pk-sidebar-avatar {
  width:34px !important;
  height:34px !important;
  flex-basis:34px !important;
  background:var(--sb-avatar) !important;
  border:1px solid #343844 !important;
  color:#d9dce4 !important;
  font-size:11px !important;
  font-weight:600 !important;
}

html body #paykita-sidebar .pk-sidebar-user-copy strong {
  color:#f0f1f4 !important;
  font-size:12px !important;
  font-weight:600 !important;
}

html body #paykita-sidebar .pk-sidebar-user-copy small {
  color:#777d90 !important;
  font-size:9.5px !important;
  font-weight:400 !important;
}

html body #paykita-sidebar .pk-sidebar-footer-actions {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:2px !important;
}

html body #paykita-sidebar .pk-sidebar-footer-actions form {
  width:100% !important;
}

html body #paykita-sidebar .pk-theme-button,
html body #paykita-sidebar .retro-logout {
  width:100% !important;
  min-height:39px !important;
  padding:8px 10px !important;
  justify-content:flex-start !important;
  gap:10px !important;
  border:0 !important;
  border-radius:9px !important;
  background:transparent !important;
  color:#b8bdca !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  box-shadow:none !important;
}

html body #paykita-sidebar .pk-theme-button:hover,
html body #paykita-sidebar .retro-logout:hover {
  background:var(--sb-bg-hover) !important;
  color:#f2f3f6 !important;
}

html body #paykita-sidebar .pk-theme-button svg,
html body #paykita-sidebar .retro-logout .nav-icon,
html body #paykita-sidebar .retro-logout .nav-icon svg {
  color:#989eae !important;
  width:18px !important;
  height:18px !important;
}

html body #paykita-sidebar .pk-theme-label,
html body #paykita-sidebar .retro-logout .nav-label {
  flex:0 1 auto !important;
  color:inherit !important;
  font-size:12.5px !important;
  font-weight:500 !important;
}

/* Sidebar is intentionally dark in both app themes; only page content changes theme. */
html[data-theme="light"] body #paykita-sidebar.pk-sidebar,
html[data-theme="dark"] body #paykita-sidebar.pk-sidebar,
html[data-theme="light"] body #paykita-sidebar .pk-sidebar-brand-row,
html[data-theme="dark"] body #paykita-sidebar .pk-sidebar-brand-row,
html[data-theme="light"] body #paykita-sidebar .pk-sidebar-scroll,
html[data-theme="dark"] body #paykita-sidebar .pk-sidebar-scroll,
html[data-theme="light"] body #paykita-sidebar .pk-sidebar-footer,
html[data-theme="dark"] body #paykita-sidebar .pk-sidebar-footer {
  background:var(--sb-bg) !important;
}

@media (max-width:767px) {
  html body .app-shell #paykita-sidebar.pk-sidebar,
  html body:not(.paykita-mobile-sidebar-open) .app-shell #paykita-sidebar.pk-sidebar,
  html body.paykita-mobile-sidebar-open .app-shell #paykita-sidebar.pk-sidebar {
    width:min(282px,82vw) !important;
    max-width:min(282px,82vw) !important;
    background:var(--sb-bg) !important;
    border-right:1px solid var(--sb-border) !important;
  }

  html body #paykita-sidebar .pk-sidebar-brand-row,
  html body #paykita-sidebar .retro-sidebar-top {
    min-height:88px !important;
    padding:17px 14px 15px !important;
    background:var(--sb-bg) !important;
  }

  html body #paykita-sidebar .pk-sidebar-scroll {
    padding:7px 8px 12px !important;
    background:var(--sb-bg) !important;
  }

  html body #paykita-sidebar .pk-sidebar-footer,
  html body #paykita-sidebar .retro-sidebar-footer.pk-sidebar-footer {
    padding:10px 9px 12px !important;
    background:var(--sb-bg) !important;
  }

  html body #paykita-sidebar .sidebar-mobile-close {
    background:#20232c !important;
    border:1px solid #343844 !important;
    color:#c9ccd5 !important;
  }

  html body #paykita-sidebar .sidebar-mobile-close:hover,
  html body #paykita-sidebar .sidebar-mobile-close:active {
    background:#292c36 !important;
    color:#fff !important;
  }
}

/* ============================================================
   V13.8 · Sidebar micro-polish
   Smaller typography, cleaner active pill, no legacy accent line.
   ============================================================ */

/* Hide the internal scrollbar visually while keeping wheel/touch scrolling. */
html body #paykita-sidebar .pk-sidebar-scroll {
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  padding:9px 10px 16px !important;
}
html body #paykita-sidebar .pk-sidebar-scroll::-webkit-scrollbar {
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* Section labels: slightly smaller and quieter. */
html body #paykita-sidebar .pk-nav-heading {
  padding:11px 8px 6px !important;
  font-size:8.5px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  letter-spacing:.125em !important;
}

/* Menu typography and geometry closer to the reference. */
html body #paykita-sidebar .pk-nav-list a,
html body #paykita-sidebar .retro-nav.pk-nav-list a,
html body #paykita-sidebar .pk-nav-list a .nav-label,
html body #paykita-sidebar .retro-nav.pk-nav-list a .nav-label {
  font-size:12.25px !important;
  line-height:1.3 !important;
  font-weight:500 !important;
  letter-spacing:-.004em !important;
}

html body #paykita-sidebar .pk-nav-list a,
html body #paykita-sidebar .retro-nav.pk-nav-list a {
  min-height:37px !important;
  padding:8px 10px !important;
  gap:10px !important;
  border-radius:9px !important;
  box-shadow:none !important;
}

html body #paykita-sidebar .pk-nav-list a.active,
html body #paykita-sidebar .retro-nav.pk-nav-list a.active {
  font-weight:600 !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
}
html body #paykita-sidebar .pk-nav-list a.active .nav-label,
html body #paykita-sidebar .retro-nav.pk-nav-list a.active .nav-label {
  font-weight:600 !important;
}

/* Kill the old Digikita active indicator completely. */
html body #paykita-sidebar .pk-nav-list a::before,
html body #paykita-sidebar .retro-nav a::before,
html body #paykita-sidebar .pk-nav-list a.active::before,
html body #paykita-sidebar .retro-nav a.active::before,
html body #paykita-sidebar .retro-nav.pk-nav-list a.active::before,
html body #paykita-sidebar .pk-nav-list a::after,
html body #paykita-sidebar .retro-nav a::after {
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Slightly smaller icons to match the reduced text size. */
html body #paykita-sidebar .nav-icon {
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
}
html body #paykita-sidebar .nav-icon svg {
  width:16px !important;
  height:16px !important;
  stroke-width:1.6 !important;
}

/* Brand and footer also get a subtle scale-down. */
html body #paykita-sidebar .pk-sidebar-brand-row,
html body #paykita-sidebar .retro-sidebar-top {
  min-height:94px !important;
  padding:18px 16px 16px !important;
}
html body #paykita-sidebar .pk-sidebar-logo {
  height:28px !important;
  max-width:146px !important;
}
html body #paykita-sidebar .pk-sidebar-brand-copy small {
  font-size:9px !important;
}
html body #paykita-sidebar .pk-sidebar-user-copy strong {
  font-size:11.5px !important;
}
html body #paykita-sidebar .pk-sidebar-user-copy small {
  font-size:9px !important;
}
html body #paykita-sidebar .pk-theme-button,
html body #paykita-sidebar .retro-logout,
html body #paykita-sidebar .pk-theme-label,
html body #paykita-sidebar .retro-logout .nav-label {
  font-size:11.75px !important;
}

@media (max-width:767px) {
  html body #paykita-sidebar .pk-sidebar-scroll {
    padding:7px 9px 12px !important;
  }
  html body #paykita-sidebar .pk-nav-list a,
  html body #paykita-sidebar .retro-nav.pk-nav-list a,
  html body #paykita-sidebar .pk-nav-list a .nav-label,
  html body #paykita-sidebar .retro-nav.pk-nav-list a .nav-label {
    font-size:12px !important;
  }
}

/* ============================================================
   V13.9 · Unified data/list surface standard
   Bring legacy tables in line with the clean subscription benefit grid.
   ============================================================ */
html body .table-wrap,
html body .dbs-table-wrap,
html body .ads-table-wrap {
  overflow:auto !important;
  border:1px solid var(--pk-line) !important;
  border-radius:14px !important;
  background:var(--pk-card) !important;
  box-shadow:none !important;
}

html body .table-wrap table,
html body .dbs-table,
html body .ads-table,
html body table.pk-data-table {
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  background:transparent !important;
}

html body .table-wrap table thead th,
html body .dbs-table thead th,
html body .ads-table thead th,
html body table.pk-data-table thead th {
  padding:12px 18px !important;
  background:var(--pk-card-alt) !important;
  color:var(--pk-faint) !important;
  border:0 !important;
  border-bottom:1px solid var(--pk-line) !important;
  text-align:left !important;
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif !important;
  font-size:9px !important;
  line-height:1.25 !important;
  font-weight:650 !important;
  letter-spacing:.075em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

html body .table-wrap table tbody td,
html body .dbs-table tbody td,
html body .ads-table tbody td,
html body table.pk-data-table tbody td {
  padding:14px 18px !important;
  border:0 !important;
  border-bottom:1px solid var(--pk-line) !important;
  background:var(--pk-card) !important;
  color:var(--pk-text) !important;
  font-size:11.5px !important;
  line-height:1.45 !important;
  vertical-align:middle !important;
}

html body .table-wrap table tbody tr:last-child td,
html body .dbs-table tbody tr:last-child td,
html body .ads-table tbody tr:last-child td,
html body table.pk-data-table tbody tr:last-child td {
  border-bottom:0 !important;
}

html body .table-wrap table tbody tr,
html body .dbs-table tbody tr,
html body .ads-table tbody tr,
html body table.pk-data-table tbody tr {
  transition:background-color .15s ease !important;
}

html body .table-wrap table tbody tr:hover td,
html body .dbs-table tbody tr:hover td,
html body .ads-table tbody tr:hover td,
html body table.pk-data-table tbody tr:hover td {
  background:var(--pk-hover) !important;
}

html body .table-wrap table td strong,
html body .dbs-table td strong,
html body .ads-table td strong,
html body table.pk-data-table td strong {
  color:var(--pk-ink) !important;
  font-weight:600 !important;
}

html body .table-wrap .status-chip,
html body .dbs-table .dbs-badge,
html body .ads-table .ads-pill,
html body table.pk-data-table .status-chip {
  min-height:24px !important;
  padding:4px 8px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:999px !important;
  box-shadow:none !important;
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:650 !important;
  letter-spacing:.015em !important;
}

/* Embedded table sections already have their own outer card; avoid double borders. */
html body .dbs-orders-card .dbs-table-wrap,
html body .ads-card .ads-table-wrap,
html body .subscription-history .subscription-history-table-wrap {
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-radius:0 !important;
}
html body .dbs-orders-card .dbs-table-wrap,
html body .ads-card .ads-table-wrap {
  border-top:1px solid var(--pk-line) !important;
}
html body .subscription-history .subscription-history-table-wrap {
  border-top:0 !important;
}

/* Subscription history should visually continue the clean benefit grid above. */
.subscription-history-table thead th {
  padding-top:13px !important;
  padding-bottom:13px !important;
}
.subscription-history-table tbody td {
  min-height:48px !important;
  padding-top:13px !important;
  padding-bottom:13px !important;
}
.subscription-history-table td:nth-child(2),
.subscription-history-table td:nth-child(3) {
  color:var(--pk-ink) !important;
  font-weight:500 !important;
}
.subscription-history-table td:last-child .btn {
  min-height:30px !important;
  padding:6px 10px !important;
  border-radius:8px !important;
  font-size:10px !important;
}

/* Technical/documentation tables keep mono only where the content is actually technical. */
html body .documentation-page .table-wrap code,
html body .api-page .table-wrap code,
html body .endpoint-table code,
html body .field-table code {
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace !important;
}

/* Empty states use the same restrained surface language. */
html body .empty,
html body .dbs-empty,
html body .ads-empty,
html body .subscription-empty-history {
  padding:24px 18px !important;
  color:var(--pk-muted) !important;
  background:transparent !important;
  text-align:center !important;
  font-size:11.5px !important;
}

@media (max-width:700px) {
  /* Subscription payment history becomes a readable stack instead of a wide table. */
  .subscription-history-table-wrap { overflow:visible !important; }
  .subscription-history-table { min-width:0 !important; }
  .subscription-history-table thead { display:none !important; }
  .subscription-history-table tbody { display:grid !important; gap:10px !important; padding:12px !important; }
  .subscription-history-table tbody tr {
    display:grid !important;
    grid-template-columns:1fr !important;
    overflow:hidden !important;
    border:1px solid var(--pk-line) !important;
    border-radius:11px !important;
    background:var(--pk-card) !important;
  }
  .subscription-history-table tbody td {
    display:grid !important;
    grid-template-columns:110px minmax(0,1fr) !important;
    align-items:center !important;
    gap:12px !important;
    min-height:44px !important;
    padding:10px 12px !important;
    border-bottom:1px solid var(--pk-line) !important;
    text-align:right !important;
  }
  .subscription-history-table tbody td:last-child { border-bottom:0 !important; }
  .subscription-history-table tbody td::before {
    content:attr(data-label);
    color:var(--pk-faint) !important;
    font-size:8.5px !important;
    line-height:1.25 !important;
    font-weight:650 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    text-align:left !important;
  }
  .subscription-history-table tbody td > * { justify-self:end; }
}

/* ============================================================
   V15 · QRIS Checkout smooth layout
   Scoped to /qris. Visual-only: no QRIS/order/provider logic changes.
   ============================================================ */
html body .qris-page {
  max-width:1240px !important;
}
html body .qris-page > .page-head {
  margin-bottom:18px !important;
  padding-bottom:22px !important;
}
html body .qris-page > .page-head h1 {
  font-size:28px !important;
  font-weight:650 !important;
  letter-spacing:-.03em !important;
}
html body .qris-page > .page-head p {
  max-width:900px !important;
  margin-top:6px !important;
  font-size:12.5px !important;
  line-height:1.65 !important;
}

html body .qris-page .qris-trial-banner {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
  margin-bottom:18px !important;
  padding:16px 18px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:13px !important;
  background:var(--pk-card) !important;
  box-shadow:none !important;
}
html body .qris-page .qris-trial-banner > div { min-width:0 !important; }
html body .qris-page .qris-kicker {
  display:block !important;
  margin-bottom:5px !important;
  color:var(--pk-brand) !important;
  font-size:9px !important;
  font-weight:700 !important;
  letter-spacing:.085em !important;
}
html body .qris-page .qris-trial-banner strong {
  display:block !important;
  color:var(--pk-ink) !important;
  font-size:13px !important;
  font-weight:650 !important;
}
html body .qris-page .qris-trial-banner p {
  margin:4px 0 0 !important;
  color:var(--pk-muted) !important;
  font-size:11px !important;
  line-height:1.55 !important;
}
html body .qris-page .qris-trial-banner .btn { flex:0 0 auto !important; }

html body .qris-page .qris-builder-grid {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:18px !important;
  align-items:start !important;
}
html body .qris-page .qris-builder-panel {
  overflow:hidden !important;
  border:1px solid var(--pk-line) !important;
  border-radius:14px !important;
  background:var(--pk-card) !important;
  box-shadow:none !important;
}
html body .qris-page .qris-builder-panel > .qris-step-head {
  min-height:92px !important;
  padding:18px 20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  background:var(--pk-card) !important;
  border-bottom:1px solid var(--pk-line) !important;
}
html body .qris-page .qris-step-head-copy { min-width:0 !important; }
html body .qris-page .qris-step-head .panel-badge {
  display:block !important;
  margin-bottom:5px !important;
  color:var(--pk-brand) !important;
  font-size:8.5px !important;
  font-weight:700 !important;
  letter-spacing:.095em !important;
}
html body .qris-page .qris-step-head h2 {
  margin:0 !important;
  color:var(--pk-ink) !important;
  font-size:17px !important;
  line-height:1.25 !important;
  font-weight:650 !important;
  letter-spacing:-.018em !important;
}
html body .qris-page .qris-step-head p {
  margin:5px 0 0 !important;
  color:var(--pk-muted) !important;
  font-size:10.5px !important;
  line-height:1.5 !important;
}
html body .qris-page .qris-step-index {
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid var(--pk-line) !important;
  border-radius:10px !important;
  background:var(--pk-card-alt) !important;
  color:var(--pk-faint) !important;
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  font-size:10px !important;
  font-weight:600 !important;
}

/* Uniform inner rhythm: no random edge-to-edge blocks. */
html body .qris-page .qris-builder-panel > .qris-active-provider-box,
html body .qris-page .qris-builder-panel > .provider-qris-box,
html body .qris-page .qris-builder-panel > .qris-auto-detector,
html body .qris-page .qris-builder-panel > .api-note,
html body .qris-page .qris-builder-panel > form,
html body .qris-page .qris-builder-panel > .qris-order-preview,
html body .qris-page .qris-builder-panel > .qris-inline-empty {
  margin-left:18px !important;
  margin-right:18px !important;
}
html body .qris-page .qris-builder-panel > .qris-active-provider-box { margin-top:18px !important; }
html body .qris-page .qris-builder-panel > .provider-qris-box { margin-top:12px !important; }

html body .qris-page .qris-active-provider-box,
html body .qris-page .provider-qris-box,
html body .qris-page .qris-auto-detector,
html body .qris-page .qris-order-preview,
html body .qris-page .qris-inline-empty,
html body .qris-page .qris-mode-box {
  border:1px solid var(--pk-line) !important;
  border-radius:11px !important;
  background:var(--pk-card-alt) !important;
  box-shadow:none !important;
}

html body .qris-page .qris-active-provider-box {
  position:relative !important;
  padding:15px 16px !important;
}
html body .qris-page .qris-active-provider-box strong {
  font-size:14px !important;
  font-weight:650 !important;
}
html body .qris-page .qris-active-provider-box small {
  font-size:10.5px !important;
}

html body .qris-page .provider-qris-box {
  padding:15px 16px !important;
}
html body .qris-page .provider-qris-status-row {
  margin-bottom:12px !important;
  padding-bottom:10px !important;
  border-bottom:1px solid var(--pk-line) !important;
}
html body .qris-page .provider-qris-status-row strong {
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:.025em !important;
}
html body .qris-page .qris-status-line {
  font-size:11.5px !important;
  line-height:1.5 !important;
}

html body .qris-page .qris-delete-btn {
  width:calc(100% - 36px) !important;
  margin-left:18px !important;
  margin-right:18px !important;
  min-height:38px !important;
  border-radius:9px !important;
}
html body .qris-page .provider-qris-box .qris-delete-btn { width:auto !important; margin-left:0 !important; margin-right:0 !important; }

/* Account/order settings are a clean lower section instead of a loose legacy form. */
html body .qris-page .qris-settings-form {
  margin-top:18px !important;
  padding:18px !important;
  border-top:1px solid var(--pk-line) !important;
  background:transparent !important;
}
html body .qris-page .qris-settings-form::before {
  content:"PENGATURAN NOMINAL" !important;
  display:block !important;
  margin-bottom:2px !important;
  color:var(--pk-brand) !important;
  font-size:8.5px !important;
  font-weight:700 !important;
  letter-spacing:.09em !important;
}
html body .qris-page .qris-settings-form .triple-grid {
  gap:10px !important;
  margin-bottom:2px !important;
}

html body .qris-page label {
  color:var(--pk-muted) !important;
  font-size:9.5px !important;
  line-height:1.35 !important;
  font-weight:650 !important;
  letter-spacing:.025em !important;
}
html body .qris-page input:not([type="checkbox"]),
html body .qris-page select,
html body .qris-page textarea {
  min-height:42px !important;
  margin-top:6px !important;
  border:1px solid var(--pk-line-strong) !important;
  border-radius:9px !important;
  background:var(--pk-input) !important;
  color:var(--pk-ink) !important;
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif !important;
  font-size:12px !important;
  font-weight:500 !important;
  box-shadow:none !important;
}
html body .qris-page textarea { min-height:108px !important; resize:vertical !important; padding-top:11px !important; }
html body .qris-page input:focus,
html body .qris-page select:focus,
html body .qris-page textarea:focus {
  border-color:color-mix(in srgb,var(--pk-brand) 48%,var(--pk-line-strong)) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pk-brand) 10%,transparent) !important;
  outline:0 !important;
}
html body .qris-page small.muted,
html body .qris-page p.muted {
  font-size:10.5px !important;
  line-height:1.55 !important;
}

html body .qris-page details {
  margin-top:12px !important;
  padding-top:10px !important;
  border-top:1px solid var(--pk-line) !important;
}
html body .qris-page details > summary.text-link {
  list-style:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  min-height:34px !important;
  color:var(--pk-muted) !important;
  font-size:10.5px !important;
  font-weight:600 !important;
}
html body .qris-page details > summary.text-link::after {
  content:"+" !important;
  color:var(--pk-faint) !important;
  font-size:15px !important;
}
html body .qris-page details[open] > summary.text-link::after { content:"−" !important; }

/* Create-order column */
html body .qris-page .qris-auto-detector {
  margin-top:18px !important;
  padding:12px 14px !important;
  grid-template-columns:minmax(0,1fr) auto !important;
}
html body .qris-page .qris-auto-detector strong {
  font-size:11px !important;
  font-weight:650 !important;
}
html body .qris-page .api-note {
  margin-top:10px !important;
  margin-bottom:0 !important;
  padding:10px 12px !important;
  border-radius:9px !important;
  font-size:10.5px !important;
}
html body .qris-page .qris-create-order-form {
  margin-top:16px !important;
  padding:0 !important;
  gap:11px !important;
}
html body .qris-page .qris-create-order-form::before {
  content:"ORDER BARU" !important;
  display:block !important;
  margin-bottom:1px !important;
  color:var(--pk-brand) !important;
  font-size:8.5px !important;
  font-weight:700 !important;
  letter-spacing:.09em !important;
}
html body .qris-page .qris-wide-btn {
  min-height:42px !important;
  margin-top:2px !important;
  border-radius:9px !important;
  font-size:11.5px !important;
  font-weight:650 !important;
}

html body .qris-page .qris-order-preview {
  margin-top:14px !important;
  margin-bottom:18px !important;
  padding:16px !important;
}
html body .qris-page .qris-breakdown {
  display:grid !important;
  gap:5px !important;
  padding-bottom:13px !important;
  border-bottom:1px solid var(--pk-line) !important;
  color:var(--pk-muted) !important;
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
  font-size:10.5px !important;
  line-height:1.45 !important;
}
html body .qris-page .qris-pay-head {
  margin-top:13px !important;
  color:var(--pk-faint) !important;
  font-size:8.5px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
html body .qris-page .qris-pay-amount {
  margin-top:5px !important;
  color:var(--pk-ink) !important;
  font-size:28px !important;
  font-weight:600 !important;
  letter-spacing:-.035em !important;
}
html body .qris-page .qris-order-preview .qris-inline-empty {
  margin:13px 0 0 !important;
  padding:11px 12px !important;
  text-align:left !important;
  background:transparent !important;
}
html body .qris-page .qris-live-image {
  display:block !important;
  width:min(240px,100%) !important;
  margin:16px auto !important;
  padding:10px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:12px !important;
  background:#fff !important;
}
html body .qris-page .qris-preview-meta {
  padding-top:12px !important;
  border-top:1px solid var(--pk-line) !important;
}
html body .qris-page .qris-preview-actions {
  gap:8px !important;
  margin-top:12px !important;
}

html[data-theme="dark"] body .qris-page .qris-builder-panel,
html[data-theme="dark"] body .qris-page .qris-trial-banner,
html[data-theme="dark"] body .qris-page .qris-active-provider-box,
html[data-theme="dark"] body .qris-page .provider-qris-box,
html[data-theme="dark"] body .qris-page .qris-auto-detector,
html[data-theme="dark"] body .qris-page .qris-order-preview,
html[data-theme="dark"] body .qris-page .qris-inline-empty,
html[data-theme="dark"] body .qris-page .qris-mode-box {
  box-shadow:none !important;
}

@media (max-width:980px) {
  html body .qris-page .qris-builder-grid { grid-template-columns:1fr !important; }
}
@media (max-width:680px) {
  html body .qris-page .qris-trial-banner { align-items:flex-start !important; flex-direction:column !important; }
  html body .qris-page .qris-trial-banner .btn { width:100% !important; justify-content:center !important; }
  html body .qris-page .qris-step-index { display:none !important; }
  html body .qris-page .qris-builder-panel > .qris-step-head { min-height:0 !important; padding:16px !important; }
  html body .qris-page .qris-builder-panel > .qris-active-provider-box,
  html body .qris-page .qris-builder-panel > .provider-qris-box,
  html body .qris-page .qris-builder-panel > .qris-auto-detector,
  html body .qris-page .qris-builder-panel > .api-note,
  html body .qris-page .qris-builder-panel > form,
  html body .qris-page .qris-builder-panel > .qris-order-preview,
  html body .qris-page .qris-builder-panel > .qris-inline-empty {
    margin-left:14px !important;
    margin-right:14px !important;
  }
  html body .qris-page .qris-settings-form { padding:16px 14px !important; margin-left:0 !important; margin-right:0 !important; }
  html body .qris-page .qris-settings-form .triple-grid { grid-template-columns:1fr !important; }
  html body .qris-page .qris-auto-detector { grid-template-columns:1fr !important; gap:4px !important; }
  html body .qris-page .qris-auto-detector strong { text-align:left !important; }
}

/* ============================================================
   V15.1 · Smooth core — Dashboard, Projects, Settings, Admin
   One visual language: quiet borders, grouped rows, precise type.
   ============================================================ */
html body .smooth-kicker {
  display:block !important;
  margin-bottom:5px !important;
  color:var(--pk-brand) !important;
  font-size:9px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
}
html body .smooth-section-card {
  margin-bottom:18px !important;
  overflow:hidden !important;
  border:1px solid var(--pk-line) !important;
  border-radius:14px !important;
  background:var(--pk-card) !important;
  color:var(--pk-text) !important;
  box-shadow:var(--pk-shadow) !important;
}
html body .smooth-section-head {
  min-height:78px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:18px 20px !important;
  border-bottom:1px solid var(--pk-line) !important;
  background:var(--pk-card-alt) !important;
}
html body .smooth-section-head > div { min-width:0 !important; }
html body .smooth-section-head h2 {
  margin:0 0 4px !important;
  color:var(--pk-ink) !important;
  font-size:16px !important;
  line-height:1.25 !important;
  font-weight:650 !important;
  letter-spacing:-.02em !important;
}
html body .smooth-section-head p {
  margin:0 !important;
  color:var(--pk-muted) !important;
  font-size:11px !important;
  line-height:1.55 !important;
}
html body .smooth-section-body { padding:20px !important; }
html body .smooth-form-footer {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin-top:14px !important;
  padding-top:14px !important;
  border-top:1px solid var(--pk-line) !important;
}
html body .smooth-form-footer > span {
  max-width:720px !important;
  color:var(--pk-muted) !important;
  font-size:10.5px !important;
  line-height:1.55 !important;
}
html body .smooth-segmented {
  display:flex !important;
  align-items:center !important;
  gap:3px !important;
  padding:3px !important;
  overflow-x:auto !important;
  border:1px solid var(--pk-line) !important;
  border-radius:9px !important;
  background:var(--pk-card-alt) !important;
  scrollbar-width:none !important;
}
html body .smooth-segmented::-webkit-scrollbar { display:none !important; }
html body .smooth-segmented a {
  flex:0 0 auto !important;
  min-height:31px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:6px 10px !important;
  border-radius:6px !important;
  color:var(--pk-muted) !important;
  font-size:10.5px !important;
  line-height:1 !important;
  font-weight:600 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}
html body .smooth-segmented a:hover { color:var(--pk-ink) !important; }
html body .smooth-segmented a.is-active {
  background:var(--pk-card) !important;
  color:var(--pk-brand) !important;
  box-shadow:0 1px 3px rgba(16,24,40,.08) !important;
}
html[data-theme="dark"] body .smooth-segmented a.is-active { box-shadow:none !important; }
html body .smooth-table-wrap { overflow:auto !important; }
html body .smooth-data-table {
  width:100% !important;
  min-width:760px !important;
  border-collapse:collapse !important;
  background:transparent !important;
}
html body .smooth-data-table th {
  padding:11px 18px !important;
  border-bottom:1px solid var(--pk-line) !important;
  background:var(--pk-card-alt) !important;
  color:var(--pk-faint) !important;
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif !important;
  font-size:9px !important;
  line-height:1.2 !important;
  font-weight:650 !important;
  letter-spacing:.055em !important;
  text-transform:uppercase !important;
  text-align:left !important;
}
html body .smooth-data-table td {
  padding:14px 18px !important;
  border-bottom:1px solid var(--pk-line) !important;
  background:var(--pk-card) !important;
  color:var(--pk-text) !important;
  font-size:11px !important;
  line-height:1.45 !important;
  vertical-align:middle !important;
}
html body .smooth-data-table tbody tr:last-child td { border-bottom:0 !important; }
html body .smooth-data-table tbody tr:hover td { background:var(--pk-hover) !important; }
html body .smooth-data-table td strong { color:var(--pk-ink) !important; font-weight:650 !important; }
html body .smooth-table-footer {
  min-height:52px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:10px 18px !important;
  border-top:1px solid var(--pk-line) !important;
  color:var(--pk-muted) !important;
  font-size:10.5px !important;
}
html body .smooth-empty-state {
  padding:34px 20px !important;
  color:var(--pk-muted) !important;
  font-size:11.5px !important;
  text-align:center !important;
}
html body .table-subtext { display:block !important; margin-top:3px !important; color:var(--pk-faint) !important; font-size:9px !important; }
html body .smooth-status-pill {
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  min-height:28px !important;
  padding:5px 9px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:999px !important;
  background:var(--pk-card-alt) !important;
  color:var(--pk-muted) !important;
  font-size:9.5px !important;
  line-height:1 !important;
  font-weight:600 !important;
  white-space:nowrap !important;
}
html body .smooth-status-pill i { width:6px !important; height:6px !important; flex:0 0 6px !important; border-radius:50% !important; background:var(--pk-faint) !important; }
html body .smooth-status-pill.ok { color:var(--pk-success) !important; background:var(--pk-success-soft) !important; border-color:color-mix(in srgb,var(--pk-success) 22%,var(--pk-line)) !important; }
html body .smooth-status-pill.ok i { background:var(--pk-success) !important; }
html body .smooth-status-pill.bad { color:var(--pk-danger) !important; background:var(--pk-danger-soft) !important; border-color:color-mix(in srgb,var(--pk-danger) 22%,var(--pk-line)) !important; }
html body .smooth-status-pill.bad i { background:var(--pk-danger) !important; }

/* ---------- Projects ---------- */
html body .projects-smooth-page,
html body .project-detail-smooth-page { max-width:1180px !important; margin:0 auto !important; }
html body .projects-smooth-head { align-items:flex-end !important; padding-bottom:22px !important; }
html body .projects-summary-strip,
html body .project-detail-metrics {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  margin-bottom:18px !important;
  overflow:hidden !important;
  border:1px solid var(--pk-line) !important;
  border-radius:14px !important;
  background:var(--pk-card) !important;
  box-shadow:var(--pk-shadow) !important;
}
html body .projects-summary-strip > div,
html body .project-detail-metrics > div {
  min-width:0 !important;
  padding:17px 18px !important;
  border-left:1px solid var(--pk-line) !important;
}
html body .projects-summary-strip > div:first-child,
html body .project-detail-metrics > div:first-child { border-left:0 !important; }
html body .projects-summary-strip span,
html body .project-detail-metrics span { display:block !important; color:var(--pk-faint) !important; font-size:8.5px !important; font-weight:650 !important; letter-spacing:.055em !important; }
html body .projects-summary-strip strong,
html body .project-detail-metrics strong { display:block !important; margin-top:8px !important; color:var(--pk-ink) !important; font-size:19px !important; line-height:1.1 !important; font-weight:650 !important; letter-spacing:-.025em !important; }
html body .projects-summary-strip small,
html body .project-detail-metrics small { display:block !important; margin-top:6px !important; color:var(--pk-muted) !important; font-size:9.5px !important; }
html body .project-detail-metrics { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
html body .projects-smooth-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; }
html body .project-smooth-card {
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  overflow:hidden !important;
  border:1px solid var(--pk-line) !important;
  border-radius:14px !important;
  background:var(--pk-card) !important;
  box-shadow:var(--pk-shadow) !important;
}
html body .project-smooth-card-head {
  min-height:78px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:17px 18px !important;
  border-bottom:1px solid var(--pk-line) !important;
  background:var(--pk-card-alt) !important;
}
html body .project-title-row,
html body .project-detail-title-row { display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; }
html body .project-title-row h2 { margin:0 !important; color:var(--pk-ink) !important; font-size:15px !important; font-weight:650 !important; }
html body .project-smooth-card-head p { margin:5px 0 0 !important; color:var(--pk-muted) !important; font-size:9.5px !important; }
html body .project-default-pill {
  display:inline-flex !important; align-items:center !important; min-height:20px !important; padding:3px 6px !important;
  border:1px solid color-mix(in srgb,var(--pk-brand) 24%,var(--pk-line)) !important; border-radius:5px !important;
  background:var(--pk-brand-soft) !important; color:var(--pk-brand) !important; font-size:8px !important; font-weight:700 !important; letter-spacing:.055em !important;
}
html body .project-health-pill {
  display:inline-flex !important; align-items:center !important; gap:6px !important; padding:5px 8px !important; border-radius:999px !important;
  background:var(--pk-success-soft) !important; color:var(--pk-success) !important; font-size:8.5px !important; font-weight:650 !important; white-space:nowrap !important;
}
html body .project-health-pill i { width:5px !important; height:5px !important; border-radius:50% !important; background:currentColor !important; }
html body .project-health-pill.pending { background:var(--pk-pending-soft) !important; color:var(--pk-pending) !important; }
html body .project-monitor-grid { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
html body .project-monitor-grid > div { min-width:0 !important; padding:16px 17px !important; border-left:1px solid var(--pk-line) !important; }
html body .project-monitor-grid > div:first-child { border-left:0 !important; }
html body .project-monitor-grid span { display:block !important; color:var(--pk-faint) !important; font-size:8px !important; font-weight:650 !important; letter-spacing:.05em !important; }
html body .project-monitor-grid strong { display:block !important; margin-top:7px !important; color:var(--pk-ink) !important; font-size:15px !important; font-weight:650 !important; letter-spacing:-.02em !important; }
html body .project-smooth-card-foot { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin-top:auto !important; padding:13px 17px !important; border-top:1px solid var(--pk-line) !important; color:var(--pk-muted) !important; font-size:9.5px !important; }
html body .project-action-buttons { display:flex !important; gap:7px !important; flex-wrap:wrap !important; justify-content:flex-end !important; }
html body .project-create-card { margin-bottom:14px !important; }
html body .project-create-form { display:grid !important; gap:12px !important; }
html body .project-create-form label,
html body .project-modal-form label { color:var(--pk-text) !important; font-size:10.5px !important; font-weight:600 !important; }
html body .project-create-form input,
html body .project-modal-form input,
html body .project-name-form input { width:100% !important; margin-top:6px !important; border:1px solid var(--pk-line-strong) !important; border-radius:8px !important; background:var(--pk-input) !important; color:var(--pk-ink) !important; }
html body .project-modal[hidden] { display:none !important; }
html body .project-modal { position:fixed !important; inset:0 !important; z-index:1800 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:18px !important; }
html body .project-modal-backdrop { position:absolute !important; inset:0 !important; background:var(--pk-overlay) !important; }
html body .project-modal-card { position:relative !important; width:min(520px,100%) !important; overflow:hidden !important; border:1px solid var(--pk-line) !important; border-radius:14px !important; background:var(--pk-card) !important; box-shadow:var(--pk-shadow-pop) !important; }
html body .project-modal-head { display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:14px !important; padding:18px 20px !important; border-bottom:1px solid var(--pk-line) !important; background:var(--pk-card-alt) !important; }
html body .project-modal-head h2 { margin:0 0 4px !important; color:var(--pk-ink) !important; font-size:16px !important; }
html body .project-modal-head p { margin:0 !important; color:var(--pk-muted) !important; font-size:10.5px !important; line-height:1.5 !important; }
html body .project-modal-close { width:32px !important; height:32px !important; display:grid !important; place-items:center !important; border:1px solid var(--pk-line) !important; border-radius:8px !important; background:var(--pk-card) !important; color:var(--pk-muted) !important; cursor:pointer !important; font-size:18px !important; }
html body .project-modal-form { display:grid !important; gap:14px !important; padding:20px !important; }
html body .project-modal-actions { display:flex !important; justify-content:flex-end !important; gap:8px !important; }
html body.project-modal-open { overflow:hidden !important; }
html body .project-detail-head { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:16px !important; margin-bottom:18px !important; padding-bottom:20px !important; border-bottom:1px solid var(--pk-line) !important; }
html body .project-detail-head h1 { margin:5px 0 0 !important; color:var(--pk-ink) !important; font-size:27px !important; font-weight:650 !important; }
html body .project-detail-head p { margin:5px 0 0 !important; color:var(--pk-muted) !important; font-size:11.5px !important; }
html body .project-name-form { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:end !important; gap:10px !important; }
html body .project-name-form label { margin:0 !important; color:var(--pk-text) !important; font-size:10.5px !important; font-weight:600 !important; }
html body .project-history-head { align-items:flex-end !important; }
html body .project-history-table-wrap { border-top:0 !important; }
html body .project-pager { margin:0 !important; }

/* ---------- Dashboard ---------- */
html body .dashboard-smooth-page { max-width:none !important; }
html body .dashboard-smooth-wrap { max-width:1180px !important; margin:0 auto !important; }
html body .dashboard-smooth-head {
  display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:24px !important;
  margin-bottom:18px !important; padding-bottom:20px !important; border-bottom:1px solid var(--pk-line) !important;
}
html body .dashboard-smooth-head h1 { margin:0 !important; color:var(--pk-ink) !important; font-size:27px !important; line-height:1.15 !important; font-weight:650 !important; }
html body .dashboard-smooth-head p { margin:6px 0 0 !important; color:var(--pk-muted) !important; font-size:11.5px !important; }
html body .dashboard-statuses { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:7px !important; flex-wrap:wrap !important; max-width:660px !important; }
html body .dashboard-metric-strip {
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; margin-bottom:18px !important;
  overflow:hidden !important; border:1px solid var(--pk-line) !important; border-radius:14px !important; background:var(--pk-card) !important; box-shadow:var(--pk-shadow) !important;
}
html body .dashboard-metric-strip article { min-height:132px !important; padding:20px 22px !important; border-left:1px solid var(--pk-line) !important; }
html body .dashboard-metric-strip article:first-child { border-left:0 !important; }
html body .dashboard-metric-strip article > div { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; color:var(--pk-muted) !important; font-size:11.5px !important; }
html body .dashboard-metric-strip article > div b { color:var(--pk-faint) !important; font-weight:500 !important; }
html body .dashboard-metric-strip strong { display:block !important; margin-top:17px !important; color:var(--pk-ink) !important; font-size:25px !important; line-height:1 !important; font-weight:600 !important; letter-spacing:-.025em !important; }
html body .dashboard-metric-strip small { display:block !important; margin-top:10px !important; color:var(--pk-faint) !important; font-size:9.5px !important; }
html body .dashboard-metric-strip small.ok { color:var(--pk-success) !important; }
html body .dashboard-card-head { min-height:82px !important; }
html body .dashboard-summary { display:flex !important; gap:13px !important; flex-wrap:wrap !important; margin-top:6px !important; color:var(--pk-muted) !important; font-size:9.5px !important; }
html body .dashboard-summary strong { color:var(--pk-text) !important; font-weight:650 !important; }
html body .dashboard-export { position:relative !important; }
html body .dashboard-export summary { list-style:none !important; cursor:pointer !important; min-height:34px !important; display:inline-flex !important; align-items:center !important; padding:7px 10px !important; border:1px solid var(--pk-line) !important; border-radius:8px !important; background:var(--pk-card) !important; color:var(--pk-muted) !important; font-size:10px !important; font-weight:600 !important; }
html body .dashboard-export summary::-webkit-details-marker { display:none !important; }
html body .dashboard-export-menu { position:absolute !important; right:0 !important; top:42px !important; z-index:20 !important; min-width:170px !important; padding:6px !important; border:1px solid var(--pk-line) !important; border-radius:10px !important; background:var(--pk-card) !important; box-shadow:var(--pk-shadow-pop) !important; }
html body .dashboard-export-menu a { display:block !important; padding:7px 9px !important; border-radius:6px !important; color:var(--pk-text) !important; font-size:10px !important; text-decoration:none !important; }
html body .dashboard-export-menu a:hover { background:var(--pk-hover) !important; color:var(--pk-brand) !important; }
html body .dashboard-chart-box { padding:17px 20px 19px !important; background:var(--pk-card) !important; }
html body .dashboard-chart-legend { display:flex !important; justify-content:flex-end !important; gap:16px !important; margin-bottom:12px !important; color:var(--pk-muted) !important; font-size:9px !important; }
html body .dashboard-chart-legend span { display:flex !important; align-items:center !important; gap:5px !important; }
html body .dashboard-chart-legend i { width:8px !important; height:8px !important; border-radius:2px !important; background:color-mix(in srgb,var(--pk-brand) 28%,var(--pk-card)) !important; }
html body .dashboard-chart-legend .paid i { background:var(--pk-success) !important; }
html body .dashboard-chart { height:190px !important; display:grid !important; grid-template-columns:repeat(14,minmax(22px,1fr)) !important; gap:10px !important; align-items:end !important; padding-top:4px !important; border-top:1px solid var(--pk-line) !important; }
html body .dashboard-day { height:100% !important; display:grid !important; grid-template-rows:1fr auto !important; gap:7px !important; align-items:end !important; text-align:center !important; }
html body .dashboard-track { height:100% !important; display:flex !important; align-items:flex-end !important; justify-content:center !important; gap:2px !important; }
html body .dashboard-bar { width:42% !important; max-width:17px !important; display:block !important; border-radius:3px 3px 0 0 !important; background:color-mix(in srgb,var(--pk-brand) 30%,var(--pk-card)) !important; }
html body .dashboard-bar.paid { width:28% !important; background:var(--pk-success) !important; opacity:.78 !important; }
html body .dashboard-day small { color:var(--pk-faint) !important; font-family:"Inter",ui-sans-serif,system-ui,sans-serif !important; font-size:8px !important; }
html body .dashboard-orders-head { align-items:flex-end !important; }
html body .dashboard-orders-table { min-width:900px !important; }
html body .dashboard-orders-table td:last-child { white-space:nowrap !important; }

/* ---------- Settings polish ---------- */
html body .settings-page { max-width:1180px !important; margin:0 auto !important; }
html body .settings-page-head { margin-bottom:18px !important; padding-bottom:20px !important; border-bottom:1px solid var(--pk-line) !important; }
html body .settings-tabs-card { margin-bottom:18px !important; padding:6px !important; border-radius:14px !important; }
html body .settings-tabs { gap:3px !important; padding:0 !important; }
html body .settings-tab {
  min-height:38px !important; padding:0 12px !important; border-radius:8px !important; color:var(--pk-muted) !important; font-size:11px !important; font-weight:600 !important;
}
html body .settings-tab::after { display:none !important; }
html body .settings-tab.is-active { background:var(--pk-brand-soft) !important; color:var(--pk-brand) !important; }
html body .settings-section-card { margin-bottom:18px !important; border-radius:14px !important; }
html body .settings-section-head { min-height:78px !important; padding:18px 20px !important; }
html body .settings-section-body { padding:20px !important; }
html body .settings-project-card { border-radius:12px !important; }
html body .settings-project-head { min-height:66px !important; }
html body .settings-explainer-grid > div { border-radius:10px !important; }
html body .settings-secret-row,
html body .settings-inline-card,
html body .settings-api-base,
html body .settings-webhook-test-row,
html body .settings-info-single,
html body .settings-empty-state { border-radius:10px !important; }

/* ---------- Admin matches Settings ---------- */
html body .admin-settings-page { max-width:1180px !important; margin:0 auto !important; }
html body .admin-settings-head { margin-bottom:18px !important; padding-bottom:20px !important; border-bottom:1px solid var(--pk-line) !important; }
html body .admin-tabs-card { margin-bottom:18px !important; }
html body .admin-panel { display:none !important; }
html body .admin-panel.is-active { display:block !important; }
html body .admin-section-card { margin-bottom:18px !important; }
html body .admin-tool-list { display:grid !important; gap:0 !important; overflow:hidden !important; border:1px solid var(--pk-line) !important; border-radius:11px !important; }
html body .admin-tool-row { min-height:72px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; padding:12px 14px !important; border-bottom:1px solid var(--pk-line) !important; background:var(--pk-card) !important; }
html body .admin-tool-row:last-child { border-bottom:0 !important; }
html body .admin-tool-main { min-width:0 !important; display:flex !important; align-items:center !important; gap:11px !important; }
html body .admin-tool-logo { width:34px !important; height:34px !important; flex:0 0 34px !important; display:grid !important; place-items:center !important; margin:0 !important; border-radius:8px !important; background:var(--pk-brand-soft) !important; color:var(--pk-brand) !important; font-size:10px !important; font-weight:750 !important; line-height:1 !important; text-align:center !important; }
html body .admin-tool-main strong,
html body .admin-tool-main > div > span { display:block !important; }
html body .admin-tool-main strong { color:var(--pk-ink) !important; font-size:11.5px !important; font-weight:650 !important; }
html body .admin-tool-main > div > span { margin-top:3px !important; color:var(--pk-muted) !important; font-size:9.5px !important; }
html body .admin-tool-state { display:flex !important; align-items:center !important; gap:10px !important; }
html body .admin-tool-state form { margin:0 !important; }
html body .admin-switch { width:42px !important; height:24px !important; position:relative !important; padding:0 !important; border:0 !important; border-radius:999px !important; background:var(--pk-line-strong) !important; cursor:pointer !important; }
html body .admin-switch::after { content:"" !important; position:absolute !important; top:3px !important; left:3px !important; width:18px !important; height:18px !important; border-radius:50% !important; background:#fff !important; box-shadow:0 1px 3px rgba(0,0,0,.18) !important; transition:left .18s ease !important; }
html body .admin-switch.on { background:var(--pk-brand) !important; }
html body .admin-switch.on::after { left:21px !important; }
html body .admin-search { display:flex !important; align-items:center !important; gap:7px !important; }
html body .admin-search input { width:220px !important; min-height:36px !important; border:1px solid var(--pk-line-strong) !important; border-radius:8px !important; background:var(--pk-input) !important; color:var(--pk-ink) !important; padding:7px 10px !important; font-size:10.5px !important; }
html body .admin-user-table { min-width:850px !important; }
html body .admin-user-cell { display:flex !important; align-items:center !important; gap:10px !important; }
html body .admin-avatar { width:32px !important; height:32px !important; flex:0 0 32px !important; display:grid !important; place-items:center !important; margin:0 !important; border-radius:50% !important; background:var(--pk-brand-soft) !important; color:var(--pk-brand) !important; font-size:9.5px !important; font-weight:700 !important; line-height:1 !important; text-align:center !important; }
html body .admin-user-cell strong,
html body .admin-user-cell > div > span { display:block !important; }
html body .admin-user-cell strong { color:var(--pk-ink) !important; font-size:10.5px !important; }
html body .admin-user-cell > div > span { margin-top:2px !important; color:var(--pk-muted) !important; font-size:9px !important; }
html body .admin-sub-actions { display:flex !important; align-items:center !important; gap:5px !important; flex-wrap:wrap !important; }
html body .admin-sub-actions form { margin:0 !important; }
html body .admin-page-number { display:inline-flex !important; align-items:center !important; color:var(--pk-muted) !important; font-size:10px !important; }
html body .admin-price-grid { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:10px !important; }
html body .admin-price-grid label { display:block !important; margin:0 !important; padding:14px !important; border:1px solid var(--pk-line) !important; border-radius:10px !important; background:var(--pk-card-alt) !important; }
html body .admin-price-grid label > span { display:block !important; margin-bottom:8px !important; color:var(--pk-ink) !important; font-size:11px !important; font-weight:650 !important; }
html body .admin-price-grid label > small { display:block !important; margin-top:7px !important; color:var(--pk-muted) !important; font-size:9px !important; }
html body .admin-price-input { display:flex !important; align-items:center !important; min-height:40px !important; overflow:hidden !important; border:1px solid var(--pk-line-strong) !important; border-radius:8px !important; background:var(--pk-input) !important; }
html body .admin-price-input b { padding-left:10px !important; color:var(--pk-muted) !important; font-size:10px !important; }
html body .admin-price-input input { width:100% !important; min-width:0 !important; border:0 !important; outline:0 !important; background:transparent !important; color:var(--pk-ink) !important; padding:9px 10px 9px 5px !important; font-size:11px !important; font-weight:600 !important; }
html body .admin-announcement-grid { display:grid !important; grid-template-columns:minmax(0,1fr) 310px !important; gap:16px !important; align-items:start !important; }
html body .admin-announcement-form { display:grid !important; gap:12px !important; }
html body .admin-announcement-form > label { margin:0 !important; color:var(--pk-text) !important; font-size:10.5px !important; font-weight:600 !important; }
html body .admin-announcement-form input[type="text"],
html body .admin-announcement-form input:not([type]),
html body .admin-announcement-form textarea { width:100% !important; margin-top:6px !important; border:1px solid var(--pk-line-strong) !important; border-radius:8px !important; background:var(--pk-input) !important; color:var(--pk-ink) !important; padding:10px 11px !important; font-size:10.5px !important; }
html body .admin-announcement-form textarea { min-height:155px !important; resize:vertical !important; }
html body .admin-form-help { margin:0 !important; color:var(--pk-muted) !important; font-size:9.5px !important; line-height:1.5 !important; }
html body .admin-publish-toggle { display:flex !important; align-items:center !important; gap:7px !important; color:var(--pk-text) !important; font-size:10px !important; font-weight:600 !important; }
html body .admin-publish-toggle input { width:16px !important; height:16px !important; accent-color:var(--pk-brand) !important; }
html body .admin-announcement-preview { min-height:100% !important; padding:16px !important; border:1px solid var(--pk-line) !important; border-radius:11px !important; background:var(--pk-card-alt) !important; }
html body .admin-announcement-preview h3 { margin:13px 0 7px !important; color:var(--pk-ink) !important; font-size:14px !important; font-weight:650 !important; }
html body .admin-announcement-preview p { margin:0 !important; white-space:pre-line !important; color:var(--pk-muted) !important; font-size:10.5px !important; line-height:1.6 !important; }
html body .admin-announcement-preview small { display:block !important; margin-top:12px !important; color:var(--pk-faint) !important; font-size:9px !important; }

/* Dashboard announcement follows the active theme. */
html body .pk-announcement-card { border-color:var(--pk-line) !important; background:var(--pk-card) !important; color:var(--pk-ink) !important; box-shadow:var(--pk-shadow-pop) !important; }
html body .pk-announcement-head h3 { color:var(--pk-ink) !important; }
html body .pk-announcement-close { color:var(--pk-muted) !important; }
html body .pk-announcement-close:hover { background:var(--pk-hover) !important; color:var(--pk-ink) !important; }
html body .pk-announcement-scroll { border-color:var(--pk-line) !important; background:var(--pk-card-alt) !important; scrollbar-color:var(--pk-line-strong) transparent !important; }
html body .pk-announcement-message { color:var(--pk-text) !important; }
html body .pk-announcement-read { background:var(--pk-brand) !important; }
html body .pk-announcement-read:hover { background:var(--pk-brand-strong) !important; }

@media (max-width:1000px) {
  html body .projects-smooth-grid { grid-template-columns:1fr !important; }
  html body .project-detail-metrics { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  html body .project-detail-metrics > div:nth-child(4) { border-left:0 !important; border-top:1px solid var(--pk-line) !important; }
  html body .project-detail-metrics > div:nth-child(5) { border-top:1px solid var(--pk-line) !important; }
  html body .dashboard-smooth-head { align-items:flex-start !important; flex-direction:column !important; }
  html body .dashboard-statuses { justify-content:flex-start !important; max-width:none !important; }
  html body .admin-price-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html body .admin-announcement-grid { grid-template-columns:1fr !important; }
}
@media (max-width:760px) {
  html body .smooth-section-head { align-items:flex-start !important; flex-direction:column !important; padding:16px !important; }
  html body .smooth-section-body { padding:16px !important; }
  html body .smooth-form-footer { align-items:stretch !important; flex-direction:column !important; }
  html body .smooth-form-footer .button-row,
  html body .smooth-form-footer .btn { width:100% !important; }
  html body .smooth-table-footer { align-items:flex-start !important; flex-direction:column !important; }
  html body .projects-summary-strip,
  html body .dashboard-metric-strip { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html body .projects-summary-strip > div:nth-child(3),
  html body .dashboard-metric-strip article:nth-child(3) { border-left:0 !important; border-top:1px solid var(--pk-line) !important; }
  html body .projects-summary-strip > div:nth-child(4),
  html body .dashboard-metric-strip article:nth-child(4) { border-top:1px solid var(--pk-line) !important; }
  html body .project-monitor-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html body .project-monitor-grid > div:nth-child(3) { border-left:0 !important; border-top:1px solid var(--pk-line) !important; }
  html body .project-monitor-grid > div:nth-child(4) { border-top:1px solid var(--pk-line) !important; }
  html body .project-smooth-card-foot { align-items:flex-start !important; flex-direction:column !important; }
  html body .project-action-buttons { width:100% !important; justify-content:flex-start !important; }
  html body .project-detail-head { align-items:flex-start !important; flex-direction:column !important; }
  html body .project-detail-metrics { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html body .project-detail-metrics > div { border-top:0 !important; }
  html body .project-detail-metrics > div:nth-child(odd):not(:first-child) { border-left:0 !important; border-top:1px solid var(--pk-line) !important; }
  html body .project-detail-metrics > div:nth-child(even):not(:nth-child(2)) { border-top:1px solid var(--pk-line) !important; }
  html body .project-detail-metrics > div:nth-child(5) { grid-column:1/-1 !important; border-left:0 !important; border-top:1px solid var(--pk-line) !important; }
  html body .project-name-form { grid-template-columns:1fr !important; }
  html body .project-history-head { align-items:flex-start !important; }
  html body .project-filter { width:100% !important; }
  html body .dashboard-metric-strip article { min-height:112px !important; padding:16px !important; }
  html body .dashboard-metric-strip strong { font-size:22px !important; }
  html body .dashboard-chart { grid-template-columns:repeat(14,34px) !important; gap:6px !important; overflow-x:auto !important; justify-content:start !important; }
  html body .dashboard-orders-head { align-items:flex-start !important; }
  html body .dashboard-filters { width:100% !important; }
  html body .settings-tabs-card,
  html body .admin-tabs-card { padding:5px !important; }
  html body .settings-tab { min-height:36px !important; padding:0 10px !important; font-size:10.5px !important; }
  html body .admin-users-head { align-items:stretch !important; }
  html body .admin-search { width:100% !important; flex-wrap:wrap !important; }
  html body .admin-search input { flex:1 !important; width:auto !important; min-width:170px !important; }
  html body .admin-price-grid { grid-template-columns:1fr !important; }
  html body .admin-tool-row { align-items:flex-start !important; }
  html body .admin-tool-state { flex-direction:column !important; align-items:flex-end !important; }
}
@media (max-width:520px) {
  html body .projects-summary-strip,
  html body .dashboard-metric-strip { grid-template-columns:1fr 1fr !important; }
  html body .project-smooth-card-head { flex-direction:column !important; }
  html body .project-health-pill { align-self:flex-start !important; }
  html body .dashboard-statuses { gap:5px !important; }
  html body .smooth-status-pill { font-size:8.5px !important; }
}

/* =========================================================
   Settings credentials · match QRIS PayKita developer UI
   ========================================================= */
html body .settings-page .settings-credential-block {
  margin:14px 15px 0 !important;
}
html body .settings-page .settings-credential-block.revealed .settings-credential-input {
  border-color:color-mix(in srgb,var(--pk-brand) 30%,var(--pk-line)) !important;
}
html body .settings-page .settings-credential-label {
  display:block !important;
  margin:0 0 6px !important;
  color:var(--pk-faint) !important;
  font-size:8.5px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
}
html body .settings-page .settings-credential-row {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 72px 86px !important;
  gap:8px !important;
  align-items:center !important;
}
html body .settings-page .settings-credential-row > form { margin:0 !important; }
html body .settings-page .settings-credential-control {
  position:relative !important;
  min-width:0 !important;
}
html body .settings-page .settings-credential-input {
  width:100% !important;
  height:44px !important;
  min-height:44px !important;
  margin:0 !important;
  padding:10px 44px 10px 12px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:9px !important;
  outline:0 !important;
  background:var(--pk-input) !important;
  color:var(--pk-ink) !important;
  font:500 10.5px/1.4 "JetBrains Mono",ui-monospace,monospace !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}
html body .settings-page .settings-credential-input.is-secret-masked {
  -webkit-text-security:disc !important;
  text-security:disc !important;
}
html body .settings-page .settings-credential-input.is-masked-display {
  color:var(--pk-brand) !important;
}
html body .settings-page .settings-eye-form {
  position:absolute !important;
  inset:0 0 0 auto !important;
  width:44px !important;
  margin:0 !important;
  pointer-events:none !important;
}
html body .settings-page .settings-eye-form .settings-credential-eye {
  pointer-events:auto !important;
}
html body .settings-page .settings-credential-eye {
  position:absolute !important;
  top:50% !important;
  right:7px !important;
  transform:translateY(-50%) !important;
  width:32px !important;
  height:32px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  color:var(--pk-muted) !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
html body .settings-page .settings-credential-eye:hover {
  background:var(--pk-hover) !important;
  color:var(--pk-ink) !important;
}
html body .settings-page .settings-credential-eye svg {
  width:17px !important;
  height:17px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
html body .settings-page .settings-credential-eye .settings-eye-slash { display:block !important; }
html body .settings-page .settings-credential-eye.is-visible .settings-eye-slash { display:none !important; }
html body .settings-page .settings-credential-btn {
  width:100% !important;
  height:44px !important;
  min-height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 10px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:9px !important;
  background:var(--pk-card-alt) !important;
  color:var(--pk-text) !important;
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  box-sizing:border-box !important;
}
html body .settings-page .settings-credential-btn:hover {
  background:var(--pk-hover) !important;
  color:var(--pk-ink) !important;
}
html body .settings-page .settings-credential-link { text-decoration:none !important; }
html body .settings-page .settings-webhook-credential {
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
html body .settings-page .settings-webhook-credential + .settings-explainer-grid {
  margin-top:16px !important;
}
@media(max-width:820px){
  html body .settings-page .settings-credential-row { grid-template-columns:minmax(0,1fr) 68px 82px !important; }
}
@media(max-width:560px){
  html body .settings-page .settings-credential-row { grid-template-columns:1fr 1fr !important; }
  html body .settings-page .settings-credential-control { grid-column:1/-1 !important; }
  html body .settings-page .settings-credential-spacer { display:none !important; }
  html body .settings-page .settings-credential-row > form { margin:0 !important; }
  html body .settings-page .settings-credential-btn { width:100% !important; }
}

/* Dashboard chart: follow active light/dark theme instead of legacy white canvas. */
html body .dashboard-smooth-page .dashboard-chart {
  background: transparent !important;
  background-color: transparent !important;
}
html[data-theme="dark"] body .dashboard-smooth-page .dashboard-chart {
  background: transparent !important;
  background-color: transparent !important;
}


/* Admin · Listener APK release */
html body .admin-listener-upload-form {
  margin-top:16px !important;
  padding:16px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:12px !important;
  background:var(--pk-card-alt) !important;
}
html body .admin-listener-upload-form > label > span {
  display:block !important;
  margin-bottom:7px !important;
  color:var(--pk-ink) !important;
  font-size:11px !important;
  font-weight:650 !important;
}
html body .admin-listener-upload-form small {
  display:block !important;
  margin-top:7px !important;
  color:var(--pk-muted) !important;
  font-size:9px !important;
  line-height:1.5 !important;
}
html body .admin-listener-file-field input[type="file"] {
  width:100% !important;
  padding:10px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:9px !important;
  background:var(--pk-bg) !important;
  color:var(--pk-ink) !important;
  font:inherit !important;
}
html body .admin-listener-notes-field { display:block !important; margin-top:14px !important; }
html body .admin-listener-notes-field textarea {
  width:100% !important;
  box-sizing:border-box !important;
  resize:vertical !important;
  min-height:86px !important;
  padding:11px 12px !important;
  border:1px solid var(--pk-line) !important;
  border-radius:9px !important;
  outline:none !important;
  background:var(--pk-bg) !important;
  color:var(--pk-ink) !important;
  font:inherit !important;
}
html body .admin-listener-upload-footer {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin-top:14px !important;
}
html body .listener-release-help { margin-top:12px !important; }
@media (max-width:640px) {
  html body .admin-listener-upload-footer { align-items:stretch !important; flex-direction:column !important; }
  html body .admin-listener-upload-footer .btn { width:100% !important; }
}