:root {
  --font-display: "General Sans", "Helvetica Neue", sans-serif;
  --font-body: "Satoshi", "Helvetica Neue", sans-serif;
  --text-xs: clamp(.75rem, .7rem + .25vw, .875rem);
  --text-sm: clamp(.875rem, .8rem + .35vw, 1rem);
  --text-base: clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + .75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --color-bg: #f3f6f8;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafb;
  --color-offset: #edf1f4;
  --color-border: #dbe3e8;
  --color-text: #16232d;
  --color-muted: #687984;
  --color-faint: #9caab3;
  --color-primary: #147ca7;
  --color-primary-hover: #0d658a;
  --color-primary-soft: #dff1f8;
  --color-success: #23845b;
  --color-success-soft: #def3e9;
  --color-error: #a43b43;
  --color-error-soft: #f8e4e6;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --shadow: 0 18px 50px rgba(31, 62, 77, .09);
  --transition: 180ms cubic-bezier(.16, 1, .3, 1);
}

[data-theme="dark"] {
  --color-bg: #10171b;
  --color-surface: #172126;
  --color-surface-2: #1c292f;
  --color-offset: #23323a;
  --color-border: #31434c;
  --color-text: #e7eef1;
  --color-muted: #93a6af;
  --color-faint: #657780;
  --color-primary: #55b5d9;
  --color-primary-hover: #7ac8e5;
  --color-primary-soft: #183d4b;
  --color-success: #6bc89e;
  --color-success-soft: #173d30;
  --color-error: #ef858b;
  --color-error-soft: #45252a;
  --shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html { color-scheme: light; text-size-adjust: none; -webkit-font-smoothing: antialiased; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}
button, input { font: inherit; color: inherit; }
select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .62; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.skip-link { position: fixed; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus-visible { top: var(--space-4); left: var(--space-4); z-index: 10; width: auto; height: auto; margin: 0; padding: var(--space-3); overflow: visible; clip: auto; background: var(--color-surface); color: var(--color-text); }
.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(var(--space-5), 5vw, var(--space-16));
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; font-family: var(--font-display); font-weight: 600; }
.brand-mark { width: 30px; height: 30px; }
.brand-mark path { fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.top-actions { display: flex; align-items: center; gap: var(--space-5); }
.security-label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 4px var(--color-success-soft); }
.icon-button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.shell { width: min(1120px, calc(100% - 2 * var(--space-5))); margin: 0 auto; padding: clamp(var(--space-10), 7vw, var(--space-16)) 0 var(--space-8); }
.intro { max-width: 680px; margin-bottom: var(--space-10); }
.eyebrow, .step-label { color: var(--color-primary); font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1, h2 { font-family: var(--font-display); letter-spacing: -.025em; line-height: 1.15; }
h1 { font-size: var(--text-xl); margin: var(--space-2) 0 var(--space-3); }
.intro > p:last-child, .view-header p { color: var(--color-muted); max-width: 58ch; }
.workspace { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-6); align-items: stretch; }
.steps { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.steps ol { list-style: none; display: grid; gap: var(--space-2); }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-md); color: var(--color-faint); transition: background var(--transition), color var(--transition); }
.steps li > span { font: 500 var(--text-xs) var(--font-display); }
.steps strong, .steps small { display: block; }
.steps strong { font-size: var(--text-sm); }
.steps small { font-size: var(--text-xs); margin-top: 2px; }
.steps li.active { color: var(--color-text); background: var(--color-surface); box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.steps li.active > span { color: var(--color-primary); }
.steps li.complete { color: var(--color-muted); }
.steps li.complete > span { color: var(--color-success); }
.panel { min-height: 450px; padding: clamp(var(--space-6), 5vw, var(--space-12)); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow); }
.dashboard-mode .shell { width: min(1320px, calc(100% - 2 * var(--space-5))); }
.dashboard-mode .intro { margin-bottom: var(--space-6); }
.dashboard-mode .workspace { grid-template-columns: 220px minmax(0, 1fr); }
.dashboard-mode .panel { padding: var(--space-6); }
.view { animation: reveal 280ms cubic-bezier(.16,1,.3,1); }
.view[hidden] { display: none; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.view-header { margin-bottom: var(--space-8); }
.view-header h2 { font-size: var(--text-lg); margin: var(--space-2) 0 var(--space-2); }
form { display: grid; gap: var(--space-3); max-width: 520px; }
label { font-size: var(--text-sm); font-weight: 600; }
input { width: 100%; min-height: 52px; padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); transition: border-color var(--transition), box-shadow var(--transition); }
select { width: 100%; min-height: 52px; padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); }
input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); outline: none; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 100px; }
.password-toggle { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); }
.code-input { font-family: ui-monospace, monospace; font-size: var(--text-lg); letter-spacing: .2em; }
.field-hint { color: var(--color-muted); font-size: var(--text-xs); }
.api-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: 520px; margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.api-summary strong, .summary-label { display: block; }
.summary-label { color: var(--color-muted); font-size: var(--text-xs); }
.api-summary strong { margin-top: var(--space-1); font-size: var(--text-sm); }
.compact-button { min-height: 42px; flex: none; }
code { padding: 2px 5px; border-radius: var(--radius-sm); background: var(--color-offset); }
.primary-button, .secondary-button, .danger-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); padding: 0 var(--space-5); border-radius: var(--radius-md); font-weight: 700; border: 1px solid transparent; transition: transform var(--transition), background var(--transition); }
.primary-button { margin-top: var(--space-3); color: white; background: var(--color-primary); }
.primary-button:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.secondary-button { background: var(--color-surface-2); border-color: var(--color-border); }
.danger-button { color: var(--color-error); background: var(--color-error-soft); }
.text-button { color: var(--color-primary); background: transparent; border: 0; font-size: var(--text-sm); }
.back-button { justify-self: start; padding: var(--space-2) 0; }
.alert { margin-bottom: var(--space-6); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--color-error); background: var(--color-error-soft); font-size: var(--text-sm); }
.alert.success { color: var(--color-success); background: var(--color-success-soft); }
.profile-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.avatar { width: 52px; height: 52px; display: grid; place-items: center; flex: none; color: white; background: var(--color-primary); border-radius: 50%; font-family: var(--font-display); font-weight: 600; }
.profile-copy { min-width: 0; flex: 1; }
.profile-copy strong, .profile-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy span { color: var(--color-muted); font-size: var(--text-sm); }
.connected-badge { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-success); font-size: var(--text-xs); font-weight: 700; }
.connected-badge span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.profile-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-5) 0; }
.profile-meta div { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.profile-meta dt { color: var(--color-muted); font-size: var(--text-xs); }
.profile-meta dd { margin-top: var(--space-1); font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.button-row { display: flex; gap: var(--space-3); }
.success-text { color: var(--color-success); }
.footer { display: flex; justify-content: space-between; margin-top: var(--space-8); color: var(--color-faint); font-size: var(--text-xs); }
.footer p span { margin: 0 var(--space-2); }
.skeleton { background: linear-gradient(90deg, var(--color-offset) 25%, var(--color-surface-2) 50%, var(--color-offset) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); }
.skeleton-heading { width: 45%; height: 30px; margin-bottom: var(--space-4); }
.skeleton-text { width: 75%; height: 18px; margin-bottom: var(--space-8); }
.skeleton-field { width: 100%; height: 52px; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (max-width: 760px) {
  .security-label { display: none; }
  .shell { width: min(100% - 2 * var(--space-4), 560px); padding-top: var(--space-8); }
  .intro { margin-bottom: var(--space-6); }
  .workspace { grid-template-columns: 1fr; }
  .steps { overflow-x: auto; padding: var(--space-2); }
  .steps ol { display: flex; min-width: 500px; }
  .steps li { flex: 1; grid-template-columns: 28px 1fr; padding: var(--space-2); }
  .steps small { display: none; }
  .panel { min-height: 430px; padding: var(--space-6) var(--space-5); }
  .profile-meta { grid-template-columns: 1fr; }
  .button-row { flex-direction: column; }
  .api-summary { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.simpay-dashboard { display: grid; gap: var(--space-6); }
.dashboard-head, .section-heading, .batch-toolbar, .batch-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.dashboard-head h2 { margin: var(--space-1) 0; }
.dashboard-head p { color: var(--color-muted); font-size: var(--text-sm); }
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.kpi-card { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.kpi-card span, .kpi-card small { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.kpi-card strong { display: block; margin: var(--space-2) 0; font-family: var(--font-display); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.dashboard-grid { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); gap: var(--space-4); align-items: start; }
.operation-card, .history-card { min-width: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.section-heading { margin-bottom: var(--space-5); }
.section-heading h3 { margin-top: var(--space-1); font: 600 var(--text-lg) var(--font-display); }
.count-badge, .status-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-3); border-radius: 999px; font-size: var(--text-xs); font-weight: 700; }
.count-badge { color: var(--color-primary); background: var(--color-primary-soft); }
.count-badge[hidden] { display: none; }
.phone-rows { display: grid; gap: var(--space-2); }
.phone-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(110px, .8fr) 40px; gap: var(--space-2); align-items: center; }
.phone-row input { min-height: 46px; }
.amount-input { position: relative; }
.amount-input input { padding-right: var(--space-8); font-variant-numeric: tabular-nums; }
.amount-input span { position: absolute; right: var(--space-3); top: 50%; translate: 0 -50%; color: var(--color-muted); }
.remove-row { width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-muted); background: var(--color-surface); font-size: var(--text-lg); }
.batch-toolbar { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }
.batch-total { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.batch-total strong { font-variant-numeric: tabular-nums; }
.history-table-wrap { overflow-x: auto; overscroll-behavior: contain; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; white-space: nowrap; }
th { color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }
td { font-variant-numeric: tabular-nums; }
code { font-family: "IBM Plex Mono", monospace; font-size: var(--text-xs); }
.status-new, .status-pending { color: var(--color-primary); background: var(--color-primary-soft); }
.status-paid, .status-success { color: var(--color-success); background: var(--color-success-soft); }
.status-error, .status-failed { color: var(--color-error); background: var(--color-error-soft); }
.empty-state { display: grid; place-items: center; min-height: 250px; text-align: center; color: var(--color-muted); }
.empty-state[hidden] { display: none; }
.empty-state strong, .empty-state span { display: block; }
.empty-state span { font-size: var(--text-sm); margin-top: var(--space-1); }
.danger-button { min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-md); color: #fff; background: var(--color-error); font-weight: 700; }
.danger-button:hover { filter: brightness(.92); }
.danger-button:disabled { opacity: .6; cursor: wait; }
.channel-switch { margin: 0 0 var(--space-5); padding: 0; border: 0; }
.channel-switch legend { margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.channel-switch > div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.channel-option {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.channel-option strong, .channel-option span { display: block; }
.channel-option span { color: var(--color-muted); font-size: var(--text-xs); }
.channel-option.active { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.channel-option.active strong { color: var(--color-primary); }
.mobile-setup-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.mobile-setup-prompt[hidden], .mobile-setup-panel[hidden], #mobileTopupForm[hidden] { display: none; }
.mobile-setup-prompt strong, .mobile-setup-prompt span { display: block; }
.mobile-setup-prompt span { margin-top: var(--space-1); color: var(--color-muted); font-size: var(--text-xs); }
.mobile-setup-panel { margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.mobile-setup-panel .section-heading { margin-bottom: var(--space-3); }
.mobile-setup-panel h3 { margin-top: var(--space-1); font: 600 var(--text-base) var(--font-display); }
.mobile-setup-panel form { gap: var(--space-2); }
.mobile-setup-panel input { min-height: 46px; }
.operation-result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.operation-result[hidden], #simpayChannel[hidden], #mobileChannel[hidden] { display: none; }
.operation-result span, .operation-result strong { display: block; }
.operation-result > div > span { color: var(--color-muted); font-size: var(--text-xs); }
.operation-result > div > strong { margin-top: var(--space-1); overflow-wrap: anywhere; font-size: var(--text-sm); }

@media (max-width: 1050px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .dashboard-mode .workspace { grid-template-columns: 1fr; }
  .dashboard-mode .steps { display: none; }
  .dashboard-mode .panel { padding: var(--space-4); }
  .kpi-grid { grid-template-columns: 1fr; }
  .dashboard-head { align-items: flex-start; }
}

@media (max-width: 520px) {
  .phone-row { grid-template-columns: 1fr 112px 40px; }
  .dashboard-head, .section-heading { flex-wrap: wrap; }
  .channel-switch > div, .operation-result { grid-template-columns: 1fr; }
  .mobile-setup-prompt { align-items: stretch; flex-direction: column; }
}