/* KuyzPay — application design system */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ── */
:root {
  --bg-primary: #0b1426;
  --bg-secondary: #111d35;
  --bg-card: #162040;
  --bg-card-hover: #1a2850;
  --bg-input: #0d1830;
  --bg-sidebar: #0a1225;
  --border: #1e3055;
  --border-light: #253d66;

  --text-primary: #e8edf5;
  --text-secondary: #8e9bbd;
  --text-muted: #5a6b8f;
  --text-heading: #ffffff;

  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-light: rgba(59, 130, 246, 0.15);
  --accent-glow: rgba(59, 130, 246, 0.3);

  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.12);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.12);
  --info: #06b6d4;
  --info-bg: rgba(6, 182, 212, 0.12);

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --transition: 0.2s ease;

  --sidebar-width: 250px;
  --header-height: 64px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ── Login Page ── */
.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
  background: linear-gradient(135deg, #060d1f 0%, #0b1a36 50%, #0f234a 100%);
}
.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%; max-width: 420px;
  box-shadow: var(--shadow), 0 0 60px rgba(59,130,246,0.08);
}
.login-card .logo {
  text-align: center; margin-bottom: 32px;
}
.login-card .logo h1 {
  font-size: 2rem; font-weight: 700; color: var(--text-heading);
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.login-card .logo p { color: var(--text-secondary); margin-top: 4px; font-size: 0.9rem; }
.login-tabs {
  display: flex; gap: 0; margin-bottom: 24px; background: var(--bg-input);
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
}
.login-tabs button {
  flex: 1; padding: 10px; border: none; background: transparent;
  color: var(--text-secondary); font-weight: 500; cursor: pointer;
  transition: var(--transition); font-size: 0.95rem;
}
.login-tabs button.active {
  background: var(--accent); color: #fff;
}

/* ── Forms ── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; margin-bottom: 6px; font-size: 0.85rem;
  font-weight: 500; color: var(--text-secondary);
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-input);
  color: var(--text-primary); font-size: 0.95rem; font-family: inherit;
  transition: var(--transition); outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light);
}
.form-group input::placeholder { color: var(--text-muted); }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border: none; border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: var(--transition);
  text-decoration: none; line-height: 1.4;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 16px var(--accent-glow); }
.btn-success { background: var(--success); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-outline {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 6px 14px; font-size: 0.82rem; }
.btn-block { width: 100%; justify-content: center; }
.btn-icon { padding: 8px; border-radius: var(--radius-sm); }

/* ── Dashboard Layout ── */
.app-layout { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: var(--sidebar-width); background: var(--bg-sidebar);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  transition: transform 0.3s ease;
}
.sidebar-header {
  padding: 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.sidebar-header h1 {
  font-size: 1.3rem; font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 20px;
  color: var(--text-secondary); font-size: 0.9rem; font-weight: 500;
  cursor: pointer; transition: var(--transition); border-left: 3px solid transparent;
}
.nav-item:hover { color: var(--text-primary); background: var(--bg-card); }
.nav-item.active {
  color: var(--accent); background: var(--accent-light);
  border-left-color: var(--accent);
}
.nav-item .icon { width: 20px; text-align: center; font-size: 1.1rem; }
.nav-section {
  padding: 8px 20px 4px; font-size: 0.72rem; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 8px;
}
.sidebar-footer {
  padding: 16px 20px; border-top: 1px solid var(--border);
  font-size: 0.82rem; color: var(--text-muted);
}
.sidebar-footer .user-name { color: var(--text-primary); font-weight: 600; }

/* Main content */
.main-content {
  flex: 1; margin-left: var(--sidebar-width); padding: 28px 32px;
  min-height: 100vh;
}
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.page-header h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-heading); }
.page-header p { color: var(--text-secondary); font-size: 0.9rem; margin-top: 2px; }

/* ── Cards ── */
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  transition: var(--transition);
}
.card:hover { border-color: var(--border-light); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.card-header h3 { font-size: 1rem; font-weight: 600; color: var(--text-heading); }
.card-title { font-size: 1rem; font-weight: 600; color: var(--text-heading); margin-bottom: 12px; }

/* Stat cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.stat-card.blue::before { background: linear-gradient(90deg, #3b82f6, #06b6d4); }
.stat-card.green::before { background: linear-gradient(90deg, #10b981, #34d399); }
.stat-card.orange::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.stat-card.purple::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.stat-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stat-value { font-size: 1.6rem; font-weight: 700; color: var(--text-heading); margin-top: 4px; }
.stat-sub { font-size: 0.82rem; color: var(--text-secondary); margin-top: 2px; }

/* ── Tables ── */
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; padding: 12px 16px; font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 0.9rem; vertical-align: middle;
}
tbody tr { transition: var(--transition); }
tbody tr:hover { background: var(--bg-card-hover); }
tbody tr:last-child td { border-bottom: none; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 20px; font-size: 0.76rem; font-weight: 600;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-default { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.auth-session-note { display:block; max-width:190px; margin-top:4px; color:var(--text-muted); font-size:.58rem; line-height:1.35; white-space:normal; }

/* ── Filters ── */
.filters {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
  align-items: flex-end;
}
.filters input, .filters select {
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-input);
  color: var(--text-primary); font-size: 0.9rem; font-family: inherit;
  outline: none; min-width: 160px;
}
.filters input:focus, .filters select:focus { border-color: var(--accent); }

/* ── Transaction detail ── */
.tx-link { display:grid; gap:2px; padding:0; border:0; color:var(--accent); background:transparent; text-align:left; cursor:pointer; }
.tx-link code { color:inherit; font-size:.78rem; font-weight:700; }.tx-link span { color:var(--text-muted); font-size:.62rem; }
.tx-link:hover code { text-decoration:underline; }
.detail-toolbar,.detail-title,.detail-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.detail-toolbar { min-height:36px; margin-bottom:14px; }.detail-back { font-size:.78rem; }.detail-actions { display:flex; gap:8px; }
.detail-title { align-items:flex-end; margin-bottom:20px; }.detail-title h2 { margin:8px 0 0; color:var(--text-heading); font-size:1.55rem; letter-spacing:-.035em; }.detail-title p { margin:2px 0 0; color:var(--text-muted); font-size:.75rem; }
.detail-badges { display:flex; gap:7px; }.transaction-detail-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(290px,.75fr); gap:16px; align-items:start; }
.detail-main,.detail-side { display:grid; gap:16px; }.detail-section { padding:20px; }.detail-section h3 { margin:0 0 16px; color:var(--text-heading); font-size:.9rem; }
.detail-section-head h3 { margin:0; }.detail-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 22px; }.detail-stack { display:grid; gap:16px; }
.detail-field { min-width:0; }.detail-field span,.detail-field strong,.detail-field code { display:block; }.detail-field span { margin-bottom:4px; color:var(--text-muted); font-size:.64rem; }.detail-field strong,.detail-field code { overflow-wrap:anywhere; color:var(--text-primary); font-size:.76rem; font-weight:650; }
.payment-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }.payment-metric { min-width:0; padding:13px; border:1px solid var(--border); border-radius:9px; background:var(--bg-primary); }.payment-metric span,.payment-metric strong { display:block; }.payment-metric span { color:var(--text-muted); font-size:.62rem; }.payment-metric strong { margin-top:6px; color:var(--text-heading); font-size:.9rem; }.payment-metric.primary { background:var(--accent-light); }.payment-metric.primary strong { color:var(--accent); }.payment-metric.success { background:var(--success-bg); }.payment-metric.success strong { color:var(--success); }
.detail-url { margin:11px 0 14px; overflow-wrap:anywhere; color:var(--text-secondary); font-size:.68rem; }.webhook-attempts { display:grid; gap:9px; }.webhook-attempt { display:grid; grid-template-columns:1fr auto; gap:9px; padding:11px; border:1px solid var(--border); border-radius:9px; }.webhook-attempt strong,.webhook-attempt small { display:block; }.webhook-attempt strong { font-size:.7rem; }.webhook-attempt small { margin-top:2px; color:var(--text-muted); font-size:.58rem; }.webhook-attempt code { grid-column:1 / -1; max-height:72px; overflow:auto; padding:8px; border-radius:6px; color:var(--text-secondary); background:var(--bg-primary); font-size:.6rem; white-space:pre-wrap; word-break:break-word; }
.btn:disabled { opacity:.48; cursor:not-allowed; transform:none; }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: 0.3s ease;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px; width: 90%; max-width: 520px;
  max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow);
  transform: scale(0.95); transition: 0.3s ease;
}
.modal-overlay.active .modal { transform: scale(1); }
.modal h3 { font-size: 1.15rem; margin-bottom: 20px; color: var(--text-heading); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ── Secret display ── */
.secret-box {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px;
  font-family: 'Courier New', monospace; font-size: 0.9rem;
  word-break: break-all; display: flex; align-items: center; gap: 12px;
}
.secret-box .value { flex: 1; }
.secret-box button { flex-shrink: 0; }

/* ── Alert ── */
.alert {
  padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 16px;
  font-size: 0.9rem; line-height: 1.65;
}
.alert-info { background: var(--info-bg); border: 1px solid rgba(6,182,212,0.2); color: var(--info); }
.alert-success { background: var(--success-bg); border: 1px solid rgba(16,185,129,0.2); color: var(--success); }
.alert-warning { background: var(--warning-bg); border: 1px solid rgba(245,158,11,0.2); color: var(--warning); }
.alert-danger { background: var(--danger-bg); border: 1px solid rgba(239,68,68,0.2); color: var(--danger); }
.alert :is(a, strong, code) { color: inherit; }
.alert a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Compact, readable context for the account's single merchant. */
.merchant-scope {
  display: grid;
  width: fit-content;
  max-width: 100%;
  grid-template-columns: auto minmax(0, auto) minmax(0, auto);
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid rgba(6,182,212,.24);
  border-radius: 10px;
  color: var(--text-primary);
  background: var(--info-bg);
}
.merchant-scope-label {
  color: var(--info);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.merchant-scope-name { min-width: 0; color: var(--text-heading); font-weight: 700; }
.merchant-scope-id {
  min-width: 0;
  padding: 4px 7px;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  background: var(--bg-card);
  font-size: .72rem;
}
.inline-form-row { display:flex; align-items:stretch; gap:12px; margin-bottom:16px; }
.inline-form-row input {
  min-width:0; flex:1; padding:8px 14px; border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text-primary); background:var(--bg-input);
  font:inherit; outline:none;
}
.inline-form-row input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }

/* ── Chart ── */
.chart-container { position: relative; height: 280px; margin-top: 16px; }
.chart-container canvas { width: 100% !important; height: 100% !important; }

/* ── Loading ── */
.spinner {
  width: 24px; height: 24px; border: 3px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay {
  position: fixed; inset: 0; background: rgba(11,20,38,0.8);
  display: flex; align-items: center; justify-content: center; z-index: 2000;
}

/* ── Empty state ── */
.empty-state {
  text-align: center; padding: 48px 20px; color: var(--text-muted);
}
.empty-state .icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.5; }
.empty-state p { font-size: 0.95rem; }

/* ── Toast ── */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 3000; }
.toast {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 20px; margin-bottom: 8px;
  box-shadow: var(--shadow); min-width: 300px; max-width: 400px;
  animation: slideIn 0.3s ease; font-size: 0.9rem;
}
.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }
@keyframes slideIn { from { opacity: 0; transform: translateX(40px); } }

/* ── Playground ── */
.playground-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.playground-layout > * { min-width: 0; max-width: 100%; }
.code-block {
  background: #0a0f1a; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; font-family: 'Courier New', monospace; font-size: 0.82rem;
  overflow-x: auto; line-height: 1.7; color: #a5d6ff; white-space: pre;
}
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs button {
  padding: 10px 18px; background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--text-secondary); font-weight: 500; cursor: pointer; transition: var(--transition);
  font-size: 0.9rem; font-family: inherit;
}
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.tabs button:hover { color: var(--text-primary); }

/* ── Checkout page ── */
.checkout-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
  background: linear-gradient(135deg, #060d1f 0%, #0b1a36 50%, #0f234a 100%);
}
.checkout-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px; width: 100%; max-width: 440px;
  text-align: center; box-shadow: var(--shadow);
}
.checkout-card .amount {
  font-size: 2rem; font-weight: 700; color: var(--text-heading); margin: 16px 0;
}
.checkout-card .qr-wrapper {
  background: #fff; border-radius: var(--radius); padding: 16px;
  display: inline-block; margin: 16px 0;
}
.checkout-card .qr-wrapper canvas, .checkout-card .qr-wrapper img { display: block; }
.checkout-card .timer { font-size: 1.1rem; color: var(--warning); font-weight: 600; }
.checkout-card .status-paid { color: var(--success); font-size: 1.3rem; font-weight: 700; }

/* ── Toggle switch ── */
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
  position: absolute; inset: 0; background: var(--border);
  border-radius: 24px; cursor: pointer; transition: var(--transition);
}
.toggle .slider::before {
  content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: var(--transition);
}
.toggle input:checked + .slider { background: var(--accent); }
.toggle input:checked + .slider::before { transform: translateX(20px); }

/* ── Account profile ── */
.profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.profile-card { min-width:0; }
.profile-card .card-header p { margin-top:3px; color:var(--text-secondary); font-size:.78rem; }
.profile-card form { display:grid; gap:2px; }
.profile-card .btn { width:fit-content; min-width:150px; justify-content:center; }
.profile-card input[readonly] { color:var(--text-secondary); background:var(--bg-primary); cursor:not-allowed; }
.profile-card .form-group small { display:block; margin-top:6px; color:var(--text-muted); font-size:.72rem; line-height:1.5; }
.profile-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:2px 0 20px; }
.profile-meta > div { min-width:0; padding:12px; border:1px solid var(--border); border-radius:9px; background:var(--bg-primary); }
.profile-meta span,.profile-meta strong { display:block; }
.profile-meta span { margin-bottom:5px; color:var(--text-muted); font-size:.65rem; }
.profile-meta strong { overflow-wrap:anywhere; color:var(--text-primary); font-size:.78rem; }
.profile-meta .profile-ok { color:var(--success); }
.profile-meta .profile-warn { color:var(--warning); }
.profile-security-note { margin-top:18px; }
/* ── Responsive ── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; padding: 20px 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .playground-layout { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }
  .filters { flex-direction: column; }
  .filters input, .filters select { width: 100%; min-width: unset; }
  .profile-grid { grid-template-columns:1fr; }
  .transaction-detail-grid { grid-template-columns:1fr; }.detail-fields { grid-template-columns:1fr 1fr; }.payment-metrics { grid-template-columns:1fr 1fr; }
  .detail-toolbar { align-items:flex-start; flex-direction:column; }.detail-actions { width:100%; }.detail-actions .btn { flex:1; justify-content:center; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .profile-meta { grid-template-columns:1fr; }
  .profile-card .btn { width:100%; }
  .login-card { padding: 24px; }
  .detail-fields,.payment-metrics { grid-template-columns:1fr; }.detail-title h2 { font-size:1.2rem; overflow-wrap:anywhere; }
}

/* ── KuyzPay dashboard refresh ── */
.app-layout {
  --accent: #1746c7;
  --accent-hover: #1039ac;
  --accent-light: rgba(23,70,199,.10);
  --accent-glow: rgba(23,70,199,.22);
  --success: #08af98;
  --bg-primary: #f5f7fb;
  --bg-secondary: #edf1f7;
  --bg-card: #ffffff;
  --bg-card-hover: #f7f9fc;
  --bg-input: #ffffff;
  --bg-sidebar: #ffffff;
  --border: #e1e7ef;
  --border-light: #cfd9e7;
  --text-primary: #1b2940;
  --text-secondary: #69758a;
  --text-muted: #667389;
  --text-heading: #13213a;
  --shadow: 0 18px 50px rgba(30,58,94,.10);
  --shadow-sm: 0 5px 18px rgba(30,58,94,.08);
  background: var(--bg-primary);
}

.app-layout .sidebar { background:#fff; box-shadow:4px 0 20px rgba(39,67,102,.035); }
.app-layout .sidebar-header { min-height:73px; padding:0 20px; }
.dashboard-brand { display:flex; align-items:center; gap:10px; color:#142039; font-size:1.08rem; letter-spacing:-.03em; }
.dashboard-brand:hover { text-decoration:none; }
.dashboard-brand span { position:relative; overflow:hidden; display:block; width:36px; height:36px; border:1px solid #e1e7f0; border-radius:10px; background:#fff; box-shadow:0 8px 20px rgba(23,70,199,.13); }
.dashboard-brand span img { position:absolute; top:50%; left:50%; width:65px; max-width:none; transform:translate(-50%,-50%); }
.sidebar-online { width:8px; height:8px; margin-left:auto; border-radius:50%; background:#08bda5; box-shadow:0 0 0 5px rgba(8,189,165,.1); }
.app-layout .nav-item { margin:2px 10px; padding:10px 12px; border:1px solid transparent; border-radius:9px; }
.app-layout .nav-item:hover { color:var(--text-primary); background:#f4f7fb; }
.app-layout .nav-item.active { color:#1746c7; border-color:#dce3fb; border-left-color:#dce3fb; background:#edf2ff; }
.app-layout .sidebar-footer { display:grid; grid-template-columns:34px 1fr 28px; align-items:center; gap:9px; padding:15px 17px; }
.sidebar-avatar { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; color:#fff; background:#1746c7; font-size:.75rem; font-weight:750; }
.sidebar-user-copy { min-width:0; }
.sidebar-user-copy span { display:block; overflow:hidden; margin-top:1px; color:var(--text-muted); font-size:.65rem; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-logout { width:28px; height:28px; border:0; border-radius:7px; color:#8a96a8; background:#f1f4f8; cursor:pointer; transform:rotate(45deg); }
.sidebar-logout:hover { color:var(--danger); background:var(--danger-bg); }
#burgerBtn { display:none; position:fixed; top:16px; left:16px; z-index:200; }

.app-layout .card, .app-layout .stat-card { box-shadow:0 2px 5px rgba(29,52,82,.025); }
.stat-head { display:flex; align-items:center; justify-content:space-between; }
.stat-icon { display:grid; width:31px; height:31px; place-items:center; border-radius:9px; font-size:.72rem; font-weight:800; }
.blue-icon { color:#2979c7; background:#eaf3fc; }.green-icon { color:#0f936d; background:#e7f7f1; }.orange-icon { color:#bd7810; background:#fff3df; }.purple-icon { color:#754ebc; background:#f0ebfa; }

.dashboard-welcome { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:22px; }
.dashboard-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:8px; color:#7a879b; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.dashboard-eyebrow i { width:7px; height:7px; border-radius:50%; background:#08bda5; box-shadow:0 0 0 4px rgba(8,189,165,.1); }
.dashboard-welcome h2 { margin:0; color:var(--text-heading); font-size:1.85rem; letter-spacing:-.045em; }
.dashboard-welcome p { margin:5px 0 0; color:var(--text-secondary); font-size:.82rem; }
.dashboard-actions { display:flex; gap:9px; }

.account-summary { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:28px; margin-bottom:18px; padding:18px 20px; border:1px solid #dce4ee; border-radius:12px; background:linear-gradient(100deg,#fff,#f7fbff); }
.account-plan { display:flex; align-items:center; gap:12px; }.account-mark { position:relative; overflow:hidden; display:block; width:44px; height:44px; flex:0 0 44px; border:1px solid #e1e7f0; border-radius:12px; background:#fff; box-shadow:0 7px 17px rgba(23,70,199,.1); }
.account-mark img { position:absolute; top:50%; left:50%; width:78px; max-width:none; transform:translate(-50%,-50%); }
.account-plan small,.account-plan strong,.account-plan div > span { display:block; }.account-plan small { color:#929daf; font-size:.57rem; font-weight:800; letter-spacing:.08em; }.account-plan strong { margin:2px 0; color:#1b2940; font-size:.84rem; }.account-plan div > span { color:#168866; font-size:.64rem; }
.account-metrics { display:flex; gap:26px; }.account-metrics div { min-width:58px; padding-left:20px; border-left:1px solid #e2e8f0; }.account-metrics small,.account-metrics strong { display:block; }.account-metrics small { color:#8a96a7; font-size:.58rem; }.account-metrics strong { margin-top:3px; color:#1b2940; font-size:1.1rem; }

.dashboard-panels { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(350px,.82fr); gap:16px; margin-top:18px; }
.card-header p { margin:3px 0 0; color:var(--text-muted); font-size:.68rem; }.chart-panel .chart-container { height:300px; }.plain-link { border:0; color:#1265bd; background:transparent; font-size:.68rem; font-weight:700; cursor:pointer; }
.recent-list { display:grid; }.recent-item { display:grid; width:100%; grid-template-columns:9px 1fr auto; align-items:center; gap:11px; min-height:59px; border:0; border-bottom:1px solid var(--border); color:inherit; background:transparent; font-family:inherit; text-align:left; cursor:pointer; }.recent-item:hover { background:var(--bg-card-hover); }.recent-item:last-child { border-bottom:0; }
.recent-status { width:8px; height:8px; border-radius:50%; background:#98a4b4; }.recent-status.success,.recent-status.completed { background:#12a47a; box-shadow:0 0 0 4px rgba(18,164,122,.1); }.recent-status.unpaid { background:#eea523; box-shadow:0 0 0 4px rgba(238,165,35,.1); }
.recent-item strong,.recent-item small { display:block; }.recent-item > div > strong { color:#334158; font-size:.72rem; }.recent-item small { max-width:210px; overflow:hidden; margin-top:3px; color:#8a96a8; font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; }.recent-amount { text-align:right; }.recent-amount > strong { margin-bottom:4px; }
.empty-state.compact { padding:35px 14px; }.empty-state.compact small { color:var(--text-muted); font-size:.72rem; }.empty-symbol { display:grid; width:42px; height:42px; margin:0 auto 12px; place-items:center; border-radius:12px; color:#1265bd; background:#eaf3fc; font-weight:800; }

.quick-section { margin-top:26px; }.quick-heading { display:flex; justify-content:space-between; margin-bottom:13px; }.quick-heading h3 { margin:0; color:var(--text-heading); font-size:.95rem; }.quick-heading p { margin:3px 0 0; color:var(--text-muted); font-size:.68rem; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.quick-grid button { display:grid; min-height:89px; grid-template-columns:31px 1fr auto; align-items:center; gap:10px; padding:15px; border:1px solid var(--border); border-radius:11px; color:inherit; background:#fff; font-family:inherit; text-align:left; cursor:pointer; transition:.2s ease; }
.quick-grid button:hover { transform:translateY(-2px); border-color:#cbd8e7; box-shadow:var(--shadow-sm); }.quick-grid button > span { display:grid; width:31px; height:31px; place-items:center; border-radius:9px; color:#1265bd; background:#eaf3fc; font-size:.58rem; font-weight:800; }
.quick-grid strong,.quick-grid small { display:block; }.quick-grid strong { color:#2e3b50; font-size:.72rem; }.quick-grid small { margin-top:4px; color:#8a96a7; font-size:.56rem; line-height:1.4; }.quick-grid b { color:#9aa5b5; font-size:.8rem; }

@media (max-width:1100px) {
  .dashboard-panels { grid-template-columns:1fr; }.quick-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  #burgerBtn { display:block; }.main-content { padding-top:72px; }.dashboard-welcome { align-items:flex-start; flex-direction:column; }.dashboard-actions { width:100%; }.dashboard-actions .btn { flex:1; }
  .account-summary { grid-template-columns:1fr auto; }.account-metrics { grid-column:1 / -1; grid-row:2; }.account-metrics div:first-child { padding-left:0; border-left:0; }
}
@media (max-width:480px) {
  .dashboard-welcome h2 { font-size:1.55rem; }.dashboard-actions { flex-direction:column; }.account-summary { grid-template-columns:1fr; }.account-metrics { grid-column:auto; grid-row:auto; }.account-summary > .btn { width:100%; justify-content:center; }
  .quick-grid { grid-template-columns:1fr; }.recent-item { grid-template-columns:8px 1fr; }.recent-amount { grid-column:2; display:flex; align-items:center; justify-content:space-between; text-align:left; }
}

/* ── API Playground ── */
.playground-page { background:#f5f7fb; }
.playground-page .main-content { max-width:1500px; }
.playground-header { align-items:flex-end; }
.playground-header h2 { margin:0; font-size:1.85rem; letter-spacing:-.045em; }
.playground-sidebar-footer { display:grid; gap:7px; padding:16px 18px; border-top:1px solid var(--border); }
.playground-sidebar-footer span { display:flex; align-items:center; gap:8px; color:#4d5a70; font-size:.68rem; font-weight:700; }.playground-sidebar-footer i { width:7px; height:7px; border-radius:50%; background:#08bda5; box-shadow:0 0 0 4px rgba(8,189,165,.1); }.playground-sidebar-footer small { color:#8a96a8; font-size:.58rem; line-height:1.5; }
.playground-notice { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding:13px 15px; border:1px solid #d5e2f5; border-radius:10px; background:#f2f7ff; }.playground-notice > span { display:grid; width:29px; height:29px; flex:0 0 29px; place-items:center; border-radius:8px; color:#1746c7; background:#e5edff; font-size:.72rem; font-weight:800; }.playground-notice p { margin:0; }.playground-notice strong,.playground-notice small { display:block; }.playground-notice strong { color:#40506a; font-size:.72rem; }.playground-notice small { margin-top:3px; color:#8290a4; font-size:.62rem; }
.playground-page #apiTabs { gap:5px; padding:5px; overflow-x:auto; border:1px solid var(--border); border-radius:11px; background:#edf1f6; }
.playground-page #apiTabs button { flex:0 0 auto; border:0; border-radius:7px; }.playground-page #apiTabs button.active { border-bottom-color:transparent; color:#1d2b42; background:#fff; box-shadow:0 4px 12px rgba(29,52,84,.08); }
.playground-page .playground-layout { align-items:start; }.playground-page .card { border-radius:13px; box-shadow:0 6px 26px rgba(27,52,84,.045); }.playground-page .card-header h3 { margin:0; }.playground-page .card-header p { margin:3px 0 0; }
.playground-page .form-group input,.playground-page .form-group select { min-height:43px; }.playground-run { min-height:46px; justify-content:space-between; margin-top:7px; }
.playground-page .code-block { color:#cbd9ec; border-color:#17365f; border-radius:9px; background:#091b36; }
.playground-page #codeTabs { gap:3px; }.playground-page #codeTabs button { border:0; border-radius:7px; }.playground-page #codeTabs button.active { color:#1746c7; border:0; background:#edf2ff; }
.playground-page .nav-item .icon { color:#1746c7; font-size:.58rem; font-weight:800; }

/* ── Branded checkout ── */
.checkout-body { background:#eef3f9; }
.checkout-page { position:relative; padding:45px 20px; background:radial-gradient(circle at 14% 10%,rgba(23,70,199,.10),transparent 30%),radial-gradient(circle at 88% 84%,rgba(8,189,165,.10),transparent 30%),#f5f8fc; }
.checkout-page::before { content:''; position:fixed; inset:0; pointer-events:none; background:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,black,transparent 78%); }
.checkout-page .checkout-card { position:relative; z-index:1; max-width:475px; padding:0; overflow:hidden; border-color:#dce4ee; border-radius:18px; color:#1a2840; background:#fff; box-shadow:0 30px 80px rgba(30,58,94,.16); }
.checkout-brand-row { display:flex; min-height:70px; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid #e5eaf1; }
.checkout-brand { display:flex; align-items:center; gap:9px; color:#18263e; }.checkout-brand:hover { text-decoration:none; }.checkout-brand > span { position:relative; overflow:hidden; width:35px; height:35px; border:1px solid #e2e8f1; border-radius:10px; background:#fff; box-shadow:0 6px 16px rgba(23,70,199,.12); }.checkout-brand img { position:absolute; top:50%; left:50%; width:64px; max-width:none; transform:translate(-50%,-50%); }.checkout-brand strong { font-size:.86rem; letter-spacing:-.025em; }
.secure-badge { display:flex; align-items:center; gap:7px; color:#667389; font-size:.58rem; font-weight:650; }.secure-badge i { width:7px; height:7px; border-radius:50%; background:#08af98; box-shadow:0 0 0 4px rgba(8,175,152,.1); }
.checkout-loading { padding:75px 40px; }.checkout-loading p { margin:13px 0 0; color:#667389; font-size:.75rem; }
#paymentContent { padding:29px 30px 24px; }.checkout-kicker { display:block; margin-bottom:5px; color:#667389; font-size:.58rem; font-weight:800; letter-spacing:.11em; }.checkout-page .checkout-card .amount { margin:4px 0; color:#14223a; font-size:2.15rem; letter-spacing:-.055em; }.checkout-hint { margin:0 0 20px; color:#667389; font-size:.66rem; }
.checkout-page .qr-wrapper { position:relative; margin:5px auto 17px; padding:16px 16px 35px; border:1px solid #dce4ed; border-radius:15px; background:#fff; box-shadow:0 12px 35px rgba(28,54,87,.08); }.checkout-page .qr-wrapper::before,.checkout-page .qr-wrapper::after { content:''; position:absolute; width:29px; height:29px; border-color:#1746c7; }.checkout-page .qr-wrapper::before { top:8px; left:8px; border-top:3px solid #1746c7; border-left:3px solid #1746c7; border-radius:7px 0 0; }.checkout-page .qr-wrapper::after { top:8px; right:8px; border-top:3px solid #08bda5; border-right:3px solid #08bda5; border-radius:0 7px 0 0; }.qr-label { position:absolute; right:0; bottom:11px; left:0; color:#667389; font-size:.56rem; font-weight:800; letter-spacing:.14em; }
.timer-label { margin:5px 0 5px; color:#7f8b9e; font-size:.65rem; }.checkout-page .timer { color:#1746c7; font:750 1.15rem ui-monospace,Consolas,monospace; letter-spacing:.07em; }
.checkout-cancel { display:flex; margin-top:15px; align-items:center; justify-content:center; flex-direction:column; gap:7px; }.checkout-cancel .btn { width:100%; min-height:42px; }.checkout-cancel small { color:#8793a5; font-size:.6rem; }
.payment-state-icon { display:grid; width:62px; height:62px; margin:24px auto 16px; place-items:center; border-radius:50%; font-size:1.6rem; font-weight:800; }.payment-state-icon.success { color:#fff; background:linear-gradient(145deg,#08bda5,#07937f); box-shadow:0 12px 30px rgba(8,189,165,.25); }.payment-state-icon.expired { color:#d9596d; background:#fff0f3; }.payment-state-icon.warning { color:#9a6400; background:#fff3d6; }.payment-state-title { margin:0; color:#253249; font-size:1rem; font-weight:750; }.payment-state-title.expired { color:#c64258; }.payment-state-title.warning { color:#9a6400; }.payment-state-copy { margin:7px 0 0; color:#7d899c; font-size:.72rem; }.checkout-page .status-paid { color:#07977f; }
.checkout-guide { margin-top:24px; padding:19px 0 3px; border-top:1px solid #e5eaf1; text-align:left; }.checkout-guide > strong { color:#344157; font-size:.72rem; }.checkout-guide ol { display:grid; gap:10px; margin:13px 0 0; padding:0; list-style:none; }.checkout-guide li { display:flex; align-items:center; gap:10px; color:#6d798d; font-size:.68rem; }.checkout-guide li span { display:grid; width:23px; height:23px; flex:0 0 23px; place-items:center; border-radius:7px; color:#1746c7; background:#edf2ff; font-size:.56rem; font-weight:800; }
.checkout-reference { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:20px; padding:10px 12px; border-radius:8px; background:#f5f7fa; }.checkout-reference span { color:#8a95a7; font-size:.57rem; text-transform:uppercase; letter-spacing:.07em; }.checkout-reference code { overflow:hidden; color:#526078; font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }
.checkout-footer { display:flex; min-height:49px; align-items:center; justify-content:space-between; padding:0 24px; border-top:1px solid #e5eaf1; color:#929daf; background:#fafbfd; font-size:.55rem; }.checkout-footer span:first-child { display:flex; align-items:center; gap:6px; }.checkout-footer i { width:6px; height:6px; border-radius:50%; background:#08bda5; }

@media(max-width:768px) { .playground-header { align-items:flex-start; flex-direction:column; }.playground-header .btn { width:100%; justify-content:center; } }
@media(max-width:480px) { .checkout-page { padding:12px; }.checkout-page .checkout-card { border-radius:15px; }.checkout-brand-row { padding:0 18px; } #paymentContent { padding:25px 20px 21px; }.checkout-footer { padding:0 18px; } }

.integration-banner { display:flex; margin-bottom:18px; padding:14px 16px; align-items:center; justify-content:space-between; gap:16px; border:1px solid var(--border); border-radius:12px; background:var(--bg-card); }.integration-banner>div { display:flex; align-items:center; gap:9px; }.integration-banner small { color:var(--text-muted); }.integration-banner.is-ready { border-color:rgba(8,189,165,.35); background:rgba(8,189,165,.08); }.integration-banner.needs-action { border-color:rgba(230,161,39,.4); background:rgba(230,161,39,.09); }.integration-dot { width:9px; height:9px; border-radius:50%; background:var(--warning); box-shadow:0 0 0 5px rgba(230,161,39,.12); }.integration-banner.is-ready .integration-dot { background:var(--success); box-shadow:0 0 0 5px rgba(8,189,165,.12); }
.integration-flow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); margin-bottom:20px; align-items:stretch; gap:10px; }.integration-node { min-width:0; padding:17px; border:1px solid var(--border); border-radius:12px; background:var(--bg-card); }.integration-node>span { display:grid; width:28px; height:28px; margin-bottom:13px; place-items:center; border-radius:8px; color:var(--accent); background:var(--accent-light); font-size:.66rem; font-weight:800; }.integration-node small { display:block; color:var(--text-muted); font-size:.58rem; font-weight:800; letter-spacing:.08em; }.integration-node strong { display:block; overflow:hidden; margin-top:5px; color:var(--text-heading); text-overflow:ellipsis; white-space:nowrap; }.integration-node p { margin:5px 0 0; color:var(--text-muted); font-size:.68rem; overflow-wrap:anywhere; }.integration-arrow { display:grid; place-items:center; color:var(--accent); font-weight:800; }
.integration-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.integration-check { display:flex; min-width:0; padding:12px; align-items:flex-start; gap:10px; border:1px solid var(--border); border-radius:10px; background:var(--bg-secondary); }.integration-check>span { display:grid; width:24px; height:24px; flex:0 0 24px; place-items:center; border-radius:50%; font-size:.68rem; font-weight:800; }.integration-check.ok>span { color:var(--success); background:rgba(8,189,165,.12); }.integration-check.fail>span { color:var(--warning); background:rgba(230,161,39,.14); }.integration-check strong,.integration-check small { display:block; }.integration-check strong { color:var(--text-heading); font-size:.72rem; }.integration-check small { margin-top:3px; color:var(--text-muted); font-size:.63rem; overflow-wrap:anywhere; }
@media(max-width:1000px) { .integration-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }.integration-arrow { display:none; } }
@media(max-width:640px) { .integration-banner { align-items:flex-start; flex-direction:column; }.integration-flow,.integration-checks { grid-template-columns:1fr; } }

/* ── Isolated Sandbox / Live environments ── */
.environment-switcher { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:11px 14px 3px; padding:5px; border:1px solid var(--border); border-radius:11px; background:var(--bg-secondary); }
.environment-switcher button { display:flex; min-width:0; min-height:34px; align-items:center; justify-content:center; gap:7px; padding:7px 9px; border:0; border-radius:7px; color:var(--text-muted); background:transparent; font-family:inherit; font-size:.68rem; font-weight:700; cursor:pointer; }
.environment-switcher button span,.environment-context i { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#e3a321; }
.environment-switcher button[data-environment="live"] span,.environment-context.live i { background:#08af98; }
.environment-switcher button.active { color:var(--text-heading); background:var(--bg-card); box-shadow:0 3px 11px rgba(29,52,84,.09); }
.environment-switcher button[data-environment="sandbox"].active { color:#a26507; }
.environment-switcher button[data-environment="live"].active { color:#078a78; }
.page-title-with-env { display:flex; align-items:center; flex-wrap:wrap; gap:11px; }
.page-title-with-env h2 { margin:0; }
.environment-context { display:inline-flex; min-height:25px; align-items:center; gap:7px; padding:4px 9px; border:1px solid var(--border); border-radius:999px; color:var(--text-secondary); background:var(--bg-card); font-size:.67rem; font-weight:750; }
.environment-context.sandbox { color:#9a650d; border-color:rgba(227,163,33,.28); background:rgba(227,163,33,.09); }
.environment-context.live { color:#087e6f; border-color:rgba(8,175,152,.26); background:rgba(8,175,152,.09); }
body[data-environment="sandbox"] .dashboard-eyebrow i { background:#e3a321; box-shadow:0 0 0 4px rgba(227,163,33,.12); }

@media (max-width:768px) {
  .page-header { align-items:flex-start; flex-direction:column; gap:13px; }
  .page-header > div:last-child,.page-header > button { width:100%; }
  .page-header > div:last-child .btn,.page-header > button { justify-content:center; }
  .secret-box { align-items:stretch; flex-wrap:wrap; }
  .secret-box .value { flex:1 0 100%; }
  .card { padding:16px; }
  .modal { width:calc(100% - 24px); padding:20px; }
  .merchant-scope { width:100%; grid-template-columns:1fr auto; }
  .merchant-scope-label { grid-column:1 / -1; }
}
@media (max-width:480px) {
  .main-content { padding-right:12px; padding-left:12px; }
  .environment-switcher { margin-right:10px; margin-left:10px; }
  .toast-container { right:12px; left:12px; }.toast { min-width:0; max-width:none; }
  .modal-actions { align-items:stretch; flex-direction:column-reverse; }.modal-actions .btn { justify-content:center; }
  .detail-actions { flex-direction:column; }
  .merchant-scope { grid-template-columns:1fr; gap:5px; }
  .merchant-scope-label { grid-column:auto; }
  .merchant-scope-id { width:fit-content; max-width:100%; }
  .inline-form-row { flex-direction:column; }
  .inline-form-row .btn { width:100%; justify-content:center; }
}

/* ── Wallet and manual withdrawal ── */
.wallet-notice { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; padding:15px 17px; border:1px solid rgba(0,191,166,.30); border-radius:12px; color:var(--text-primary); background:rgba(0,191,166,.08); }
.dashboard-wallet-strip { display:grid; grid-template-columns:auto minmax(220px,1fr) auto; align-items:center; gap:24px; margin:-2px 0 18px; padding:15px 18px; border:1px solid rgba(0,191,166,.30); border-radius:12px; background:rgba(0,191,166,.07); }
.dashboard-wallet-strip small,.dashboard-wallet-strip strong,.dashboard-wallet-strip span { display:block; }
.dashboard-wallet-strip small { color:var(--text-muted); font-size:.64rem; font-weight:800; letter-spacing:.08em; }
.dashboard-wallet-strip strong { margin:2px 0; color:var(--text-heading); font:700 1.12rem 'Sora',sans-serif; }
.dashboard-wallet-strip span,.dashboard-wallet-strip p { color:var(--text-secondary); font-size:.72rem; }
.dashboard-wallet-strip p { margin:0; line-height:1.55; }
.wallet-notice strong { color:var(--text-heading); white-space:nowrap; }
.wallet-notice span { color:var(--text-secondary); font-size:.82rem; text-align:right; }
.wallet-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; margin-top:18px; }
.wallet-grid .card { min-width:0; }
.wallet-credit { color:var(--success); font-weight:700; }
.wallet-debit { color:var(--danger); font-weight:700; }
.withdraw-actions { display:flex; flex-wrap:wrap; gap:7px; min-width:220px; }
.withdraw-actions .btn { white-space:nowrap; }
.form-group small { display:block; margin-top:5px; color:var(--text-muted); font-size:.72rem; }

@media (max-width:768px) {
  .wallet-notice { align-items:flex-start; flex-direction:column; }
  .wallet-notice span { text-align:left; }
  .wallet-stats { grid-template-columns:1fr; }
  .dashboard-wallet-strip { grid-template-columns:1fr; gap:10px; }
  .dashboard-wallet-strip .btn { width:100%; justify-content:center; }
}