:root {
  --bg: #0b0f19;
  --surface: #121826;
  --surface-2: #1a2233;
  --border: rgba(255,255,255,.08);
  --text: #eef2ff;
  --muted: #94a3b8;
  --primary: #6366f1;
  --primary-hover: #818cf8;
  --accent: #f59e0b;
  --success: #10b981;
  --warn: #fbbf24;
  --fail: #f87171;
  --manual: #cbd5e1;
  --radius: 14px;
  --shadow: 0 20px 50px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  color-scheme: dark;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.25), transparent),
              radial-gradient(900px 500px at 100% 0%, rgba(245,158,11,.12), transparent),
              var(--bg);
  color: var(--text);
}

.app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

.sidebar {
  background: rgba(18,24,38,.95);
  border-right: 1px solid var(--border);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand { display: flex; gap: .75rem; align-items: center; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #f59e0b);
  display: grid; place-items: center; font-weight: 700;
}
.brand span { display: block; color: var(--muted); font-size: .75rem; }

.nav { display: flex; flex-direction: column; gap: .35rem; }
.nav-link {
  color: var(--muted); text-decoration: none; padding: .65rem .85rem;
  border-radius: 10px; transition: .15s ease;
}
.nav-link:hover, .nav-link.active {
  color: var(--text); background: rgba(99,102,241,.15);
}
.nav-link.external::after { content: " ↗"; font-size: .75rem; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }
.env-pill {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
}
.env-test { background: rgba(16,185,129,.15); color: #6ee7b7; }
.env-production { background: rgba(248,113,113,.15); color: #fca5a5; }

.pay-live-banner {
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  border: 2px solid rgba(248,113,113,.55);
  background: rgba(127,29,29,.35);
  color: #fecaca;
  text-align: center;
}
.pay-live-checklist ol.pay-live-steps { margin: .75rem 0 0; padding-left: 1.25rem; }
.pay-live-checklist li { margin-bottom: .5rem; color: var(--muted); }
.pay-live-checklist li.done { color: #86efac; }
.pay-live-badge-prod { background: rgba(248,113,113,.25); color: #fca5a5; }
.env-production-pill { margin-left: .5rem; }
.btn-danger {
  background: #dc2626;
  color: #fff;
  border: 1px solid #b91c1c;
}
.btn-danger:hover:not(:disabled) { background: #b91c1c; }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }

.main { padding: 1.5rem 2rem 3rem; overflow-x: hidden; }

.page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; margin-bottom: 1.5rem;
}
.page-header h1 { margin: 0 0 .35rem; font-size: 1.75rem; }
.page-header p { margin: 0; color: var(--muted); max-width: 60ch; }

.card {
  background: rgba(26,34,51,.85);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 960px) { .app-shell { grid-template-columns: 1fr; } .sidebar { height: auto; position: relative; } .grid-2 { grid-template-columns: 1fr; } }

.btn {
  border: none; border-radius: 10px; padding: .65rem 1rem;
  font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-success { background: var(--success); color: #052e1c; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-sm { padding: .4rem .75rem; font-size: .85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.score-card { display: flex; gap: 1.5rem; align-items: center; }
.score-ring { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.score-ring svg { transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 10; }
.ring-fg { fill: none; stroke: url(#grad); stroke-width: 10; stroke-linecap: round; }
.score-value {
  position: absolute; inset: 0; display: grid; place-content: center;
  font-size: 1.75rem; font-weight: 700;
}
.score-value small { font-size: .85rem; color: var(--muted); }

.status-badge {
  display: inline-block; padding: .25rem .65rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
.money-badge {
  font-variant-numeric: tabular-nums;
  min-width: 5.5rem;
  text-align: center;
}
.money-badge.money-billed.money-tier-low { background: rgba(16,185,129,.12); color: #86efac; }
.money-badge.money-billed.money-tier-mid { background: rgba(16,185,129,.2); color: #6ee7b7; }
.money-badge.money-billed.money-tier-high { background: rgba(5,150,105,.28); color: #a7f3d0; }
.money-badge.money-vat.money-tier-low { background: rgba(245,158,11,.12); color: #fde68a; }
.money-badge.money-vat.money-tier-mid { background: rgba(245,158,11,.2); color: #fcd34d; }
.money-badge.money-vat.money-tier-high { background: rgba(217,119,6,.28); color: #fef08a; }
.money-badge.money-commission.money-tier-low { background: rgba(99,102,241,.14); color: #c7d2fe; }
.money-badge.money-commission.money-tier-mid { background: rgba(99,102,241,.22); color: #a5b4fc; }
.money-badge.money-commission.money-tier-high { background: rgba(79,70,229,.3); color: #ddd6fe; }
.money-badge.money-zero { background: rgba(255,255,255,.06); color: var(--muted); }
.negotiation-badge { background: rgba(56,189,248,.14); color: #7dd3fc; max-width: 11rem; white-space: normal; line-height: 1.25; }
.tenant-status-active { background: rgba(16,185,129,.18); color: #6ee7b7; }
.tenant-status-inactive { background: rgba(248,113,113,.15); color: #fca5a5; }
.tenant-platform { background: rgba(59,130,246,.2); color: #93c5fd; margin-left: .35rem; }
.tenant-platform-row td:first-child strong { color: #93c5fd; }
.platform-setup-card { border-color: rgba(59,130,246,.35); }
.status-NOT_CONFIGURED, .status-BLOCKED { background: rgba(248,113,113,.15); color: #fca5a5; }
.status-TEST_PARTIAL, .status-CONFIGURED_UNVERIFIED { background: rgba(251,191,36,.15); color: #fde68a; }
.status-TEST_GATEWAY_READY, .status-CONFIGURED { background: rgba(16,185,129,.15); color: #6ee7b7; }
.status-pending, .status-awaiting_payment { background: rgba(99,102,241,.15); color: #c7d2fe; }
.status-approved { background: rgba(16,185,129,.15); color: #6ee7b7; }
.status-rejected, .status-voided { background: rgba(248,113,113,.15); color: #fca5a5; }

.checks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; }
.check-item {
  border: 1px solid var(--border); border-radius: 12px; padding: .85rem;
  background: rgba(0,0,0,.15);
}
.check-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.check-icon { font-size: .7rem; text-transform: uppercase; font-weight: 700; }
.check-pass .check-icon { color: var(--success); }
.check-warn .check-icon { color: var(--warn); }
.check-fail .check-icon { color: var(--fail); }
.check-manual .check-icon { color: var(--manual); }
.check-weight { margin-left: auto; color: var(--muted); font-size: .75rem; }
.check-msg { margin: 0 0 .25rem; font-size: .9rem; }
.check-fix { margin: 0; color: var(--muted); font-size: .8rem; }

.action-tile {
  display: block; padding: .85rem; border-radius: 12px; margin-bottom: .5rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  text-decoration: none; color: inherit; transition: .15s;
}
.action-tile:hover { border-color: rgba(99,102,241,.4); transform: translateY(-1px); }
.action-tile span { display: block; color: var(--muted); font-size: .85rem; margin-top: .15rem; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .65rem; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-size: .8rem; text-transform: uppercase; }

/* Wizard */
.wizard-resume-banner { margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.wizard-resume-banner.hidden { display: none !important; }
.callout-success { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.35); }
.wizard-step-status {
  margin-bottom: 1rem; padding: .75rem 1rem; border-radius: 10px; font-size: .9rem;
  background: rgba(0,0,0,.2); border: 1px solid var(--border);
}
.wizard-step-status.hidden { display: none !important; }
.wizard-step-status.ok { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.35); color: #6ee7b7; }
.wizard-step-status.warn { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.35); color: #fcd34d; }
.wizard-step-status.error { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.35); color: #fca5a5; }
.wizard-progress { height: 4px; background: rgba(255,255,255,.06); }
.wizard-progress-bar {
  height: 100%; background: linear-gradient(90deg, #6366f1, #f59e0b);
  transition: width .3s ease;
}
.wizard-steps-nav {
  list-style: none; display: flex; flex-wrap: wrap; gap: .35rem;
  margin: 1rem 0; padding: 0;
}
.wizard-steps-nav li {
  padding: .35rem .65rem; border-radius: 999px; font-size: .8rem;
  background: rgba(255,255,255,.04); color: var(--muted);
}
.wizard-steps-nav li.active { background: rgba(99,102,241,.25); color: #c7d2fe; }
.wizard-steps-nav li.done { color: var(--success); background: rgba(16,185,129,.1); }
.wizard-steps-nav li.incomplete { color: var(--warn); border: 1px solid rgba(245,158,11,.35); }
.wizard-steps-nav li.locked { opacity: .75; cursor: pointer; }

.wizard-step { display: none; animation: fadeIn .25s ease; }
.wizard-step.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.wizard-form h2 { margin-top: 0; }
.form-grid { display: grid; gap: 1rem; }
.form-grid label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; }
.form-grid input, .form-grid select, .select {
  background: rgba(0,0,0,.25); border: 1px solid var(--border);
  border-radius: 10px; padding: .65rem .75rem; color: var(--text);
  font-family: inherit;
}
.form-grid input:focus, .select:focus { outline: 2px solid rgba(99,102,241,.45); }

/* Controles unificados — evita selects blancos del sistema en Windows */
.ui-input,
.ui-select,
.filter-toolbar input[type="search"],
.filter-toolbar input[type="text"],
.filter-toolbar input[type="date"],
.filter-toolbar select,
.dash-range-select {
  width: 100%;
  min-height: 2.5rem;
  padding: .55rem .85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background-color: rgba(8, 12, 22, .85);
  color: var(--text);
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.35;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.ui-select,
.filter-toolbar select,
.dash-range-select,
.form-grid select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.25rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1rem;
}
.ui-input:hover,
.ui-select:hover,
.filter-toolbar input:hover,
.filter-toolbar select:hover,
.dash-range-select:hover {
  border-color: rgba(99,102,241,.35);
  background-color: rgba(12, 18, 32, .95);
}
.ui-input:focus,
.ui-select:focus,
.filter-toolbar input:focus,
.filter-toolbar select:focus,
.dash-range-select:focus {
  outline: none;
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.ui-input::placeholder,
.filter-toolbar input::placeholder {
  color: #64748b;
}
.filter-toolbar select option,
.form-grid select option,
.dash-range-select option {
  background: #1a2233;
  color: var(--text);
}
.ui-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}
.ui-field-compact { min-width: 10.5rem; flex: 0 1 auto; }
.ui-field-grow { flex: 1 1 16rem; min-width: 14rem; }

.env-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.env-card {
  border: 2px solid var(--border); border-radius: 12px; padding: 1rem;
  cursor: pointer; display: block;
}
.env-card:has(input:checked) { border-color: var(--primary); background: rgba(99,102,241,.1); }
.env-card input { display: none; }
.env-card strong { display: block; }
.env-card span { color: var(--muted); font-size: .85rem; }

.checkbox-card {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem; border-radius: 12px; border: 1px solid var(--border);
  cursor: pointer;
}
.callout { padding: .85rem 1rem; border-radius: 10px; margin: 1rem 0; font-size: .9rem; }
.callout-info { background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.25); }
.pay-api-howto { margin: .5rem 0 0; padding-left: 1.25rem; }
.pay-api-howto li { margin: .35rem 0; }
.callout-warn { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.25); }

.input-copy { display: flex; gap: .5rem; }
.input-copy input { flex: 1; }

.wizard-actions {
  display: flex; justify-content: flex-end; gap: .5rem;
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border);
}

.doc-links { display: flex; gap: 1rem; margin-top: 1rem; }
.doc-links a { color: var(--primary-hover); }

.test-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.test-card { background: rgba(0,0,0,.2); border-radius: 12px; padding: 1rem; }
.endpoint-list { font-size: .85rem; line-height: 1.6; }

.validation-box, .env-export { margin-top: 1rem; padding: 1rem; border-radius: 10px; background: rgba(0,0,0,.2); }
.validation-box.error { border: 1px solid rgba(248,113,113,.4); }
.validation-box.ok { border: 1px solid rgba(16,185,129,.4); }
.hidden { display: none !important; }
.env-export textarea { width: 100%; background: #0a0f18; color: #cbd5e1; border: 1px solid var(--border); border-radius: 8px; padding: .75rem; font-family: ui-monospace, monospace; font-size: .8rem; }

.code-block {
  background: #0a0f18; border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem; overflow: auto; font-size: .8rem; max-height: 280px;
}
.pay-frame {
  width: 100%; min-height: 420px; border: 1px solid var(--border);
  border-radius: 12px; background: white;
}
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.doc-card a { color: var(--primary-hover); }
.muted { color: var(--muted); }
.checklist { color: var(--muted); line-height: 1.7; }

.api-endpoints { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.api-endpoint {
  display: grid; grid-template-columns: 56px 1fr auto; gap: .75rem; align-items: center;
  padding: .55rem .75rem; border-radius: 10px; background: rgba(0,0,0,.2);
  border: 1px solid var(--border); font-size: .85rem;
}
.api-endpoint span:last-child { color: var(--muted); text-align: right; }
.method {
  font-size: .65rem; font-weight: 700; padding: .2rem .4rem; border-radius: 6px; text-align: center;
}
.method.get { background: rgba(16,185,129,.2); color: #6ee7b7; }
.method.post { background: rgba(99,102,241,.2); color: #c7d2fe; }

.toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; padding: .75rem 1rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); transition: .2s;
  pointer-events: none; z-index: 100;
}
.toast.show { opacity: 1; transform: none; }

.wizard-steps-nav li { cursor: pointer; user-select: none; }
.wizard-steps-nav li:not(.active) { opacity: .85; }
.wizard-steps-nav li.active { opacity: 1; }

/* Docs viewer */
.docs-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 960px) { .docs-layout { grid-template-columns: 1fr; } }
.docs-sidebar { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
.docs-search {
  width: 100%; margin-bottom: 1rem; background: rgba(0,0,0,.25);
  border: 1px solid var(--border); border-radius: 10px; padding: .55rem .75rem; color: var(--text);
}
.docs-nav-group h3 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 1rem 0 .35rem;
}
.docs-nav-group ul { list-style: none; padding: 0; margin: 0; }
.docs-nav-link {
  display: block; padding: .45rem .6rem; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-size: .88rem;
}
.docs-nav-link:hover, .docs-nav-link.active {
  background: rgba(99,102,241,.15); color: #c7d2fe;
}
.doc-official-link {
  display: inline-block; margin-bottom: 1rem; color: var(--accent); font-size: .9rem;
}
.markdown-body { line-height: 1.65; font-size: .95rem; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: 1.5rem; }
.markdown-body h1 { font-size: 1.5rem; margin-top: 0; }
.markdown-body code {
  background: rgba(0,0,0,.35); padding: .15rem .4rem; border-radius: 6px; font-size: .85em;
}
.markdown-body pre {
  background: #0a0f18; border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem; overflow: auto; font-size: .82rem;
}
.markdown-body pre code { background: none; padding: 0; }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: .5rem .65rem; text-align: left; }
.markdown-body a { color: var(--primary-hover); }
.docs-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .8rem; }

/* Pay demo live */
.pay-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 340px); gap: 1rem; margin-bottom: 1rem; }
.pay-layout > .card { min-width: 0; overflow: hidden; }
@media (max-width: 1200px) { .pay-layout { grid-template-columns: 1fr; } }

.pay-controls label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .9rem;
  min-width: 0;
}
.pay-controls .select,
.pay-controls select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pay-controls .btn-row .btn {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}
.pay-controls .pay-status-strip {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pay-quick-form {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.pay-quick-form .input {
  width: 100%;
  box-sizing: border-box;
  padding: .5rem .65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.25);
  color: inherit;
  font-family: inherit;
}
.pay-amount-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 .75rem; }
.pay-section-title { margin: .75rem 0 .5rem; font-size: 1rem; }
.btn-block { width: 100%; }
.pm-card-clickable { cursor: pointer; transition: border-color .15s; }
.pm-card-clickable:hover { border-color: rgba(99,102,241,.5); }
.pay-mode-tabs { display: flex; gap: .35rem; margin: 1rem 0; flex-wrap: wrap; }
.pay-tab {
  flex: 1; min-width: 90px; padding: .5rem .65rem; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(0,0,0,.2); color: var(--muted);
  cursor: pointer; font-family: inherit; font-size: .82rem; font-weight: 600;
}
.pay-tab.active { background: rgba(99,102,241,.2); color: #c7d2fe; border-color: rgba(99,102,241,.4); }
.pay-preview-panel {
  min-height: 280px; display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(99,102,241,.08), rgba(245,158,11,.06));
  border-radius: 12px; border: 1px dashed var(--border); padding: 1.5rem;
}
.pay-preview-placeholder { text-align: center; color: var(--muted); }
.preview-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.pay-live-card { width: 100%; max-width: 360px; text-align: center; }
.pay-live-header { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.pay-live-badge {
  display: inline-block; align-self: center; padding: .2rem .6rem; border-radius: 999px;
  background: rgba(99,102,241,.2); color: #c7d2fe; font-size: .75rem; font-weight: 700;
}
.pay-live-amount { font-size: 2rem; font-weight: 700; margin-bottom: .5rem; }
.pay-status-strip {
  margin-top: 1rem; padding: .65rem .75rem; border-radius: 10px;
  background: rgba(0,0,0,.2); font-size: .85rem;
}
.pay-button-host { padding: 1rem; min-height: 120px; }
.pay-iframe-fallback { margin-top: 1rem; }
.pay-iframe-fallback summary { cursor: pointer; color: var(--muted); font-size: .85rem; margin-bottom: .5rem; }

.pay-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 768px) { .pay-compare-grid { grid-template-columns: 1fr; } }
.pay-compare-card { padding: 1rem; border-radius: 12px; border: 1px solid var(--border); }
.pay-compare-card ul { margin: .75rem 0; padding-left: 1.1rem; font-size: .88rem; color: var(--muted); }
.pay-compare-card li { margin-bottom: .35rem; }
.pay-compare-badge { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pay-compare-button { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.35); }
.pay-compare-api { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.35); }
.pay-shared-order { margin-bottom: 1rem; }
.pay-quick-inline { display: grid; grid-template-columns: minmax(14rem, 1.2fr) 1fr 1fr auto auto; gap: .75rem; align-items: end; margin-bottom: 1rem; }
.pay-tenant-field { min-width: 0; }
@media (max-width: 900px) { .pay-quick-inline { grid-template-columns: 1fr; } }
.pay-integration-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.pay-integration-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  padding: .85rem 1rem; border-radius: 12px; border: 2px solid var(--border);
  background: rgba(0,0,0,.2); cursor: pointer; font-family: inherit; color: var(--muted); text-align: left;
}
.pay-integration-tab strong { color: var(--text); font-size: 1rem; }
.pay-integration-tab span { font-size: .8rem; }
.pay-integration-tab.active { border-color: rgba(99,102,241,.6); background: rgba(99,102,241,.12); color: #c7d2fe; }
.pay-integration-tab[data-integration="api"].active { border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.1); color: #fde68a; }
.pay-integration-panel.hidden { display: none; }
.pay-hint, .pay-endpoint-hint { font-size: .85rem; margin: .35rem 0 .75rem; }
.pay-api-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 1000px) { .pay-api-steps { grid-template-columns: 1fr; } }
.pay-api-step-head { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .75rem; }
.pay-step-num {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(99,102,241,.25); font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.pay-api-step h3 { margin: 0; font-size: 1rem; }
.api-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .75rem 0; }
.api-method-fields label { display: block; margin-bottom: .5rem; font-size: .85rem; }
.pm-grid-compact { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.pm-card-button-only { opacity: .85; border-style: dashed; }

.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; margin-top: 1rem; }
.pm-grid-compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.pm-card {
  padding: .85rem; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(0,0,0,.2);
}
.pm-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .35rem; }
.pm-card p { margin: 0 0 .5rem; font-size: .82rem; }
.pm-api { font-size: .7rem; background: rgba(99,102,241,.2); padding: .15rem .4rem; border-radius: 6px; }
.pm-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.pm-tag {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  padding: .15rem .4rem; border-radius: 6px; background: rgba(255,255,255,.06); color: var(--muted);
}
.pm-tag-button_gateway { background: rgba(16,185,129,.15); color: #6ee7b7; }
.pm-tag-api_online { background: rgba(99,102,241,.15); color: #c7d2fe; }
.pm-chip {
  padding: .5rem .65rem; border-radius: 10px; border: 1px solid var(--border);
  background: rgba(0,0,0,.15); font-size: .85rem;
}
.pm-chip small { display: block; color: var(--muted); font-size: .7rem; margin-top: .15rem; }
.pm-foot { margin-top: 1rem; font-size: .8rem; }

.login-page {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
}
.login-card {
  width: 100%; max-width: 420px;
  background: rgba(26,34,51,.95); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow);
}
.login-brand { margin-bottom: 1.5rem; }
.login-form { display: grid; gap: 1rem; }
.login-form label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; }
.login-form input {
  background: rgba(0,0,0,.25); border: 1px solid var(--border);
  border-radius: 10px; padding: .65rem .75rem; color: var(--text); font-family: inherit;
}
.btn-block { width: 100%; }
.login-foot { margin-top: 1rem; font-size: .8rem; text-align: center; }
.login-error { margin-bottom: 1rem; }

.user-pill {
  padding: .5rem .65rem; border-radius: 10px; background: rgba(0,0,0,.25);
  margin-bottom: .5rem; font-size: .8rem;
}
.user-pill strong { display: block; word-break: break-all; }
.user-pill small { color: var(--muted); text-transform: uppercase; font-size: .7rem; }
.logout-form { margin-bottom: .75rem; }
.access-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 100%;
}
.access-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: end;
}
.access-form-row-actions {
  grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1.4fr) auto;
}
.access-form-row-actions.access-form-row-admin {
  grid-template-columns: minmax(10rem, 1fr) auto;
}
.access-form .ui-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .9rem;
  margin: 0;
}
.access-form-submit {
  display: flex;
  align-items: flex-end;
  padding-bottom: 1px;
}
.access-form-submit .btn { white-space: nowrap; }
@media (max-width: 768px) {
  .access-form-row,
  .access-form-row-actions {
    grid-template-columns: 1fr;
  }
  .access-form-submit { padding-bottom: 0; }
  .access-form-submit .btn { width: 100%; }
}
.access-users-list .access-actions { display: flex; gap: .35rem; flex-wrap: wrap; }

.wizard-live-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.wizard-live-steps li {
  padding: .4rem .75rem;
  border-radius: 999px;
  font-size: .8rem;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.2);
  color: var(--muted);
}
.wizard-live-steps li.done {
  border-color: rgba(16,185,129,.4);
  background: rgba(16,185,129,.12);
  color: #6ee7b7;
}
.wizard-live-steps li.current {
  border-color: rgba(99,102,241,.5);
  background: rgba(99,102,241,.2);
  color: var(--text);
  font-weight: 600;
}
.wizard-live-steps li.pending { opacity: .65; }

.wizard-integration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 960px) { .wizard-integration-grid { grid-template-columns: 1fr; } }

.integration-status-card {
  background: rgba(26,34,51,.9);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow);
}
.integration-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .75rem;
}
.integration-card-head h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.integration-score-ring {
  --pct: 0;
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: conic-gradient(#6366f1 calc(var(--pct) * 1%), rgba(255,255,255,.08) 0);
  position: relative;
}
.integration-score-ring::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(18,24,38,.95);
}
.integration-score-ring span {
  position: relative; z-index: 1; font-weight: 700; font-size: .95rem;
}
.integration-score-ring small { font-size: .65rem; font-weight: 500; opacity: .8; }
.integration-badge {
  display: inline-block; padding: .2rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; margin-bottom: .5rem;
}
.integration-badge-ready { background: rgba(16,185,129,.2); color: #6ee7b7; }
.integration-badge-almost { background: rgba(99,102,241,.2); color: #c7d2fe; }
.integration-badge-progress { background: rgba(245,158,11,.15); color: #fcd34d; }
.integration-badge-pending { background: rgba(255,255,255,.06); color: var(--muted); }
.integration-badge-blocked { background: rgba(248,113,113,.15); color: #fca5a5; }
.integration-meta { font-size: .82rem; color: var(--muted); margin: 0 0 .75rem; }
.integration-checks { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .35rem; }
.integration-check {
  display: flex; gap: .5rem; align-items: flex-start; font-size: .82rem;
  padding: .35rem .5rem; border-radius: 8px; background: rgba(0,0,0,.15);
}
.integration-check.done { border-left: 3px solid var(--success); }
.integration-check.pending { border-left: 3px solid rgba(245,158,11,.5); opacity: .9; }
.integration-check-icon { width: 1rem; flex-shrink: 0; }
.integration-check small { display: block; color: var(--muted); font-size: .75rem; }
.integration-highlights {
  margin: 0 0 .75rem; padding-left: 1.1rem; font-size: .78rem; color: var(--muted);
}
.integration-highlights li { margin-bottom: .2rem; }
.wizard-subtitle { margin: 1.25rem 0 .75rem; font-size: .95rem; color: #c7d2fe; }

.integration-status-card.active-config {
  border-color: #6366f1;
  box-shadow: 0 0 0 1px rgba(99,102,241,.35), var(--shadow);
}
.integration-card-actions {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.wizard-keys-section.integration-focus {
  border: 1px solid rgba(99,102,241,.45);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  background: rgba(99,102,241,.06);
}
.wizard-keys-section.integration-dimmed { opacity: .55; }
.wizard-keys-section.integration-dimmed input,
.wizard-keys-section.integration-dimmed select { opacity: 1; }
.wizard-focus-banner { margin-bottom: 1rem; }
.env-single-file-note { margin-bottom: 1rem; font-size: .82rem; }
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.kpi-grid-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .kpi-grid, .kpi-grid-6 { grid-template-columns: 1fr 1fr; } }
.kpi-card.kpi-vat strong { color: #fbbf24; }
.kpi-card.kpi-commission strong { color: #818cf8; }

.finance-breakdown-card { margin-bottom: 1rem; }
.finance-breakdown-card h2 { margin: 0 0 .75rem; font-size: 1rem; }
.finance-breakdown { display: flex; flex-direction: column; gap: .6rem; }
.fin-row { display: grid; grid-template-columns: 8.5rem 1fr 6rem; gap: .5rem; align-items: center; font-size: .85rem; }
.fin-label { color: var(--muted); }
.fin-track { height: 12px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
.fin-fill { height: 100%; border-radius: 6px; }
.fin-bar-billed { background: linear-gradient(90deg, #22c55e, #4ade80); }
.fin-bar-vat { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.fin-bar-commission { background: linear-gradient(90deg, #6366f1, #818cf8); }
.fin-bar-merchant { background: linear-gradient(90deg, #38bdf8, #60a5fa); }
.fin-value { text-align: right; font-size: .8rem; }

.tenant-field-pct.hidden,
.tenant-field-fixed.hidden { display: none; }
.form-grid .ui-input,
.form-grid .ui-select { width: 100%; }
.kpi-card {
  background: rgba(26,34,51,.9);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.kpi-label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .35rem; }
.kpi-card strong { font-size: 1.35rem; }
.kpi-card.kpi-approved strong { color: #4ade80; }
.kpi-card.kpi-rate strong { color: #818cf8; }
.kpi-sub {
  display: block;
  margin-top: .35rem;
  font-size: .75rem;
  color: var(--muted);
  font-weight: 500;
}
.kpi-grid-tx { grid-template-columns: repeat(4, 1fr); margin-top: 1rem; }
.tx-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem 0 1rem;
}
@media (max-width: 900px) { .kpi-grid-tx { grid-template-columns: 1fr 1fr; } }

.dash-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 960px) { .dash-charts-grid { grid-template-columns: 1fr; } }
.chart-card h2 { font-size: 1rem; margin: 0 0 .75rem; }
.chart-card-half { min-height: 220px; }

.commerce-chart {
  display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: .5rem;
}
.commerce-chart-tall { height: 160px; }
.chart-empty { text-align: center; padding: 2rem 0; font-size: .85rem; }

.chart-bar {
  flex: 1; background: linear-gradient(180deg, #6366f1, #4f46e5);
  border-radius: 4px 4px 0 0; min-width: 8px; position: relative;
}
.chart-bar-volume span,
.chart-group-label {
  position: absolute; bottom: -1.2rem; left: 50%; transform: translateX(-50%);
  font-size: .6rem; color: var(--muted); white-space: nowrap;
}
.chart-group {
  flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  min-width: 12px; height: 100%; position: relative; padding-bottom: 1.2rem;
}
.chart-bar-approved { background: linear-gradient(180deg, #22c55e, #16a34a); width: 45%; flex: none; }
.chart-bar-rejected { background: linear-gradient(180deg, #ef4444, #dc2626); width: 45%; flex: none; }

.chart-legend { display: flex; gap: 1rem; margin-top: .5rem; font-size: .75rem; color: var(--muted); }
.legend-approved::before, .legend-rejected::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem;
}
.legend-approved::before { background: #22c55e; }
.legend-rejected::before { background: #ef4444; }

.donut-wrap { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.donut-chart {
  width: 120px; height: 120px; border-radius: 50%; position: relative; flex-shrink: 0;
}
.donut-hole {
  position: absolute; inset: 22%; background: var(--bg, #0f1419); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem;
}
.donut-legend { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.donut-legend li { margin-bottom: .35rem; display: flex; align-items: center; gap: .4rem; }
.donut-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.hbar-chart { display: flex; flex-direction: column; gap: .55rem; }
.hbar-row { display: grid; grid-template-columns: 5.5rem 1fr 5rem; gap: .5rem; align-items: center; font-size: .8rem; }
.hbar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 10px; background: rgba(255,255,255,.06); border-radius: 5px; overflow: hidden; }
.hbar-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #818cf8); border-radius: 5px; }
.hbar-value { text-align: right; font-size: .75rem; color: var(--muted); }

.filter-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.filter-toolbar-inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .65rem;
}
.filter-toolbar-inline .ui-field-grow { flex: 1 1 220px; }
.filter-search { flex: 1; min-width: 0; }
.filter-label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .15rem;
}
.filter-selects {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: flex-end;
}
.filter-check {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  color: var(--muted);
  min-height: 2.5rem;
  padding: 0 .25rem;
  user-select: none;
}
.filter-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
  cursor: pointer;
}
.filter-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding-top: .1rem;
}
.filter-toolbar-inline .filter-actions { padding-top: 0; }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
  .form-grid-3 { grid-template-columns: 1fr; }
  .hbar-row { grid-template-columns: 4rem 1fr 4rem; }
  .filter-selects { flex-direction: column; align-items: stretch; }
  .ui-field-compact { min-width: 0; width: 100%; }
}

.dash-range-select { width: auto; min-width: 11rem; }
.tx-filters .form-grid { margin-bottom: .75rem; }
.filter-date-presets {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin-top: .5rem;
}
.filter-date-presets .btn.active {
  background: var(--accent-muted, rgba(59, 130, 246, .15));
  color: var(--accent, #3b82f6);
}