:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #16191d;
  background: #f3f5f6;
  font-synthesis: none;
  --ink: #16191d;
  --muted: #697179;
  --line: #dce1e4;
  --surface: #ffffff;
  --soft: #f7f8f8;
  --green: #177a52;
  --green-dark: #0f5e3e;
  --blue: #2869a7;
  --red: #b33a32;
  --amber: #a66313;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #e9edef;
}
.login-panel { width: min(390px, 100%); background: var(--surface); border: 1px solid var(--line); padding: 34px; box-shadow: 0 14px 36px rgba(25, 32, 38, .08); }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ink); color: white; font-weight: 750; font-size: 20px; margin-bottom: 24px; }
.brand-mark.small { width: 34px; height: 34px; margin: 0; font-size: 16px; }
.product-name, .eyebrow, #page-eyebrow { color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: .12em; margin: 0 0 6px; }
.login-panel h1 { margin: 0 0 28px; font-size: 27px; letter-spacing: 0; }
.stack-form, .dialog-form { display: grid; gap: 18px; }
label { display: grid; gap: 7px; color: #4f575e; font-size: 13px; font-weight: 600; }
input, select, textarea { min-width: 0; border: 1px solid #cbd2d6; background: white; color: var(--ink); padding: 10px 11px; border-radius: 4px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23, 122, 82, .12); }
textarea { resize: vertical; }
.form-error { min-height: 18px; margin: 0; color: var(--red); font-size: 13px; font-weight: 500; }

.primary, .secondary, .quiet, .danger, .table-action { border: 1px solid transparent; border-radius: 4px; padding: 9px 14px; font-weight: 650; }
.primary { color: white; background: var(--green); }
.primary:hover { background: var(--green-dark); }
.secondary { color: var(--ink); background: white; border-color: #cbd2d6; }
.quiet { padding: 5px 0; color: #505a61; background: transparent; }
.danger { color: var(--red); background: #fff; border-color: #e7c4c1; }
.full { width: 100%; }
button:disabled { cursor: not-allowed; opacity: .5; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: #1d2226; color: white; padding: 22px 14px 18px; }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 8px 24px; border-bottom: 1px solid #333a3f; }
.brand-lockup strong, .brand-lockup span { display: block; letter-spacing: 0; }
.brand-lockup strong { font-size: 15px; }.brand-lockup span { margin-top: 2px; color: #9ca5ab; font-size: 11px; }
nav { display: grid; gap: 4px; margin-top: 20px; }
.nav-item { width: 100%; border: 0; border-left: 3px solid transparent; border-radius: 3px; padding: 10px 12px; color: #b9c0c5; background: transparent; text-align: left; font-weight: 600; }
.nav-item:hover { color: white; background: #282e33; }.nav-item.active { color: white; border-left-color: #41b987; background: #2a3135; }
.sidebar-footer { margin-top: auto; padding: 16px 9px 0; border-top: 1px solid #333a3f; display: grid; gap: 3px; overflow-wrap: anywhere; }
.sidebar-footer span { color: #aab2b7; font-size: 12px; }.sidebar-footer .quiet { color: white; text-align: left; }

.workspace { min-width: 0; padding: 0 34px 48px; }
.topbar { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.topbar h1 { margin: 0; font-size: 25px; line-height: 1.2; letter-spacing: 0; }
#page-actions { display: flex; gap: 8px; }
.page-content { padding-top: 28px; }
.notice { margin-top: 18px; padding: 11px 14px; border: 1px solid #a9d6c3; border-radius: 4px; color: #0f5e3e; background: #ecf8f3; font-size: 13px; }
.notice.error { color: var(--red); background: #fff0ef; border-color: #e5b4b0; }

.stat-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 12px; }
.stat-card { min-height: 112px; padding: 17px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.stat-card span { color: var(--muted); font-size: 12px; }.stat-card strong { display: block; margin-top: 13px; font-size: 28px; font-weight: 720; letter-spacing: 0; }
.funds-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.funds-toolbar strong { font-size: 16px; }.funds-toolbar p { max-width: 760px; margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.funds-toolbar .settlement-account-summary { margin-top: 10px; color: var(--ink); }
.funds-stats { grid-template-columns: repeat(5, minmax(130px, 1fr)); }.stat-card.featured { border-color: #9bcdb8; background: #f2faf6; }
.balance-query-time { margin: 10px 0 0; color: var(--muted); font-size: 12px; text-align: right; }
.funds-warning { margin: 0 0 18px; padding: 11px 14px; border: 1px solid #e6c995; border-radius: 4px; color: #795015; background: #fff8e9; font-size: 13px; }
.funds-warning a { color: var(--blue); font-weight: 700; }.withdrawal-confirm-amount { margin: 0; padding: 16px; border: 1px solid #e6c995; border-radius: 4px; color: #795015; background: #fff8e9; font-size: 18px; font-weight: 750; text-align: center; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 32px 0 13px; }
.section-heading h2 { margin: 0; font-size: 17px; letter-spacing: 0; }.section-heading span { color: var(--muted); font-size: 12px; }
.chart { height: 220px; display: flex; align-items: end; gap: 6px; padding: 20px 16px 12px; background: var(--surface); border: 1px solid var(--line); overflow-x: auto; }
.chart-column { min-width: 22px; flex: 1 0 22px; height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 7px; }
.chart-bar { width: min(18px, 70%); min-height: 2px; background: var(--green); border-radius: 2px 2px 0 0; }.chart-column:nth-child(3n) .chart-bar { background: var(--blue); }
.chart-bar.height-1 { height: 13px; }.chart-bar.height-2 { height: 26px; }.chart-bar.height-3 { height: 39px; }.chart-bar.height-4 { height: 52px; }.chart-bar.height-5 { height: 65px; }.chart-bar.height-6 { height: 78px; }.chart-bar.height-7 { height: 91px; }.chart-bar.height-8 { height: 104px; }.chart-bar.height-9 { height: 117px; }.chart-bar.height-10 { height: 130px; }
.chart-label { color: #858d93; font-size: 9px; writing-mode: vertical-rl; height: 46px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.table-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.table-toolbar label { width: min(360px, 100%); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 11px 13px; color: #626b72; background: var(--soft); border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; text-transform: uppercase; white-space: nowrap; }
td { padding: 13px; border-bottom: 1px solid #e8ebed; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }.muted { color: var(--muted); }.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 700; background: #edf0f1; color: #566068; white-space: nowrap; }
.badge.active, .badge.published, .badge.success { background: #e6f5ee; color: var(--green-dark); }.badge.suspended, .badge.error, .badge.rejected, .badge.disabled { background: #fae9e7; color: var(--red); }.badge.pending, .badge.platform_review, .badge.provider_review { background: #fff2df; color: var(--amber); }.badge.superseded, .badge.draft { background: #edf0f1; color: #566068; }
.badge.succeeded { background: #e6f5ee; color: var(--green-dark); }.badge.failed { background: #fae9e7; color: var(--red); }.badge.creating, .badge.unknown { background: #fff2df; color: var(--amber); }
.badge.paid, .badge.direct { background: #e6f5ee; color: var(--green-dark); }.badge.expired, .badge.cancelled, .badge.reversed { background: #fae9e7; color: var(--red); }.badge.not_applicable { background: #edf0f1; color: #566068; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }.table-action { padding: 5px 8px; color: var(--blue); background: transparent; }.table-action:hover { background: #eef4f9; }.table-action.destructive { color: var(--red); }
.empty-state { padding: 48px 18px; color: var(--muted); text-align: center; background: var(--surface); border: 1px solid var(--line); }
.log-stat-grid { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
.log-filter-form { display: grid; grid-template-columns: 150px 150px minmax(240px, 1fr) auto auto; gap: 10px; align-items: end; margin-top: 18px; padding: 16px; border: 1px solid var(--line); background: var(--surface); }
.log-filter-form button { min-height: 40px; }
.recharge-filter-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; margin-bottom: 18px; padding: 16px; border: 1px solid var(--line); background: var(--surface); }
.recharge-filter-form button { min-height: 40px; }
.recharge-order-stats { grid-template-columns: repeat(5, minmax(130px, 1fr)); }
.recharge-orders-table { min-width: 1500px; }
.log-preview { max-width: 420px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.badge.warn { background: #fff2df; color: var(--amber); }
.badge.info { background: #edf0f1; color: #566068; }
.log-detail-metadata { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 9px 18px; margin: 0; padding: 16px; border: 1px solid var(--line); background: var(--soft); }
.log-detail-metadata dt { color: var(--muted); }.log-detail-metadata dd { margin: 0; overflow-wrap: anywhere; }
.log-detail-section { display: grid; gap: 8px; }.log-detail-section h3 { margin: 0; font-size: 15px; }.log-detail-section pre { max-height: 320px; margin: 0; padding: 16px; border: 1px solid var(--line); background: var(--soft); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow: auto; overflow-wrap: anywhere; }
.recharge-packages-form { display: grid; gap: 16px; }
.recharge-package-list { display: grid; gap: 10px; }
.recharge-package-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(130px, .8fr) 110px 80px auto;
  align-items: end;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.recharge-package-row .package-option { display: flex; align-items: center; gap: 7px; min-height: 40px; }
.recharge-package-row .package-option input { width: 17px; height: 17px; }
.package-row-actions { min-height: 40px; display: flex; align-items: center; justify-content: end; gap: 5px; }
.package-row-actions .secondary { min-width: 38px; padding-inline: 10px; }
.recharge-package-footer { display: flex; justify-content: space-between; gap: 12px; }

dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; border-radius: 6px; padding: 0; box-shadow: 0 24px 70px rgba(15, 20, 24, .24); }
#password-dialog { width: min(460px, calc(100vw - 32px)); }
#credit-dialog { width: min(460px, calc(100vw - 32px)); }
#withdrawal-dialog { width: min(520px, calc(100vw - 32px)); }
#settlement-account-dialog { width: min(760px, calc(100vw - 32px)); }
#maker-key-dialog, #maker-token-dialog { width: min(520px, calc(100vw - 32px)); }
#partner-detail-dialog, #partner-payment-accounts-dialog { width: min(1120px, calc(100vw - 48px)); }
dialog::backdrop { background: rgba(20, 24, 27, .48); }
.dialog-form { padding: 24px; overflow-y: auto; }
.wide-dialog { width: min(1120px, calc(100vw - 48px)); max-height: calc(100vh - 48px); }
.partner-export-actions { margin-bottom: 16px; }
.partner-export-actions a { display: inline-flex; align-items: center; text-decoration: none; }
select[multiple] { min-height: 128px; }
.dialog-form header, .dialog-form footer { display: flex; align-items: start; justify-content: space-between; gap: 16px; }.dialog-form header h2 { margin: 0; font-size: 20px; }.dialog-form footer { justify-content: end; padding-top: 3px; }
.icon-button { width: 34px; height: 34px; border: 0; background: #f0f2f3; color: #4e565c; border-radius: 4px; font-size: 24px; line-height: 1; }
.form-grid { display: grid; gap: 16px; }.form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }.span-two { grid-column: span 2; }
fieldset { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 4px; } fieldset legend { padding: 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; }.compact-fields { gap: 12px; }
.checkbox-label { display: flex; flex-direction: row; align-items: center; align-self: end; min-height: 40px; }.checkbox-label input { width: 17px; height: 17px; }
label span { color: var(--muted); font-size: 11px; font-weight: 400; }
.dialog-context { margin: -5px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.credit-dialog-balance { margin: -6px 0 0; padding: 11px 12px; border: 1px solid #b9dfce; border-radius: 4px; color: var(--green-dark); background: #ecf8f3; font-size: 14px; font-weight: 700; }
.secret-value { display: block; min-height: 76px; padding: 14px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--soft); overflow-wrap: anywhere; user-select: all; }
.payment-application { margin-top: 20px; }.payment-application .section-heading { margin-top: 0; }.payment-application h3 { margin: 0; }.payment-application pre { max-height: 360px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--soft); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.inline-selection-form { display: grid; grid-template-columns: minmax(320px, 1fr) auto auto; gap: 10px; align-items: end; margin: 20px 0 12px; }.inline-selection-form button { min-height: 40px; }.inline-selection-form button:disabled { cursor: not-allowed; opacity: .5; }.payment-option-list { display: grid; gap: 8px; margin-bottom: 20px; }.payment-option-list article { display: grid; grid-template-columns: minmax(260px, 1fr) auto 72px; gap: 12px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }.payment-option-list article div { display: grid; gap: 3px; }.payment-option-list article.unavailable { color: #858d93; background: var(--soft); opacity: .68; }option:disabled { color: #858d93; }
.upload-progress { height: 7px; background: #e2e6e8; border-radius: 4px; overflow: hidden; }.upload-progress span { display: block; width: 35%; height: 100%; background: var(--green); animation: upload 1.1s infinite ease-in-out; }
@keyframes upload { 0% { transform: translateX(-110%); } 100% { transform: translateX(350%); } }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 76px minmax(0, 1fr); }.sidebar { padding-inline: 9px; }.brand-lockup { justify-content: center; padding-inline: 0; }.brand-lockup > div:last-child, .sidebar-footer span { display: none; }.nav-item { padding: 10px 5px; text-align: center; font-size: 11px; border-left: 0; border-bottom: 3px solid transparent; }.nav-item.active { border-bottom-color: #41b987; }.sidebar-footer .quiet { text-align: center; }
  .workspace { padding-inline: 20px; }.stat-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }.funds-toolbar { align-items: stretch; flex-direction: column; }
  .recharge-package-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .log-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }.log-filter-form label:nth-child(3) { grid-column: span 2; }
  .recharge-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }.recharge-filter-form label:nth-child(4) { grid-column: span 2; }
  .package-row-actions { grid-column: span 2; justify-content: start; }
}
@media (max-width: 600px) {
  .app-shell { display: block; }.sidebar { position: static; width: 100%; height: auto; padding: 10px 12px; flex-direction: row; align-items: center; overflow-x: auto; }.brand-lockup { border: 0; padding: 0 10px 0 0; }.sidebar nav { display: flex; margin: 0; }.nav-item { width: auto; white-space: nowrap; }.sidebar-footer { display: none; }.workspace { padding: 0 14px 34px; }.topbar { min-height: 88px; }.topbar h1 { font-size: 21px; }.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.stat-card { min-height: 96px; }.stat-card strong { font-size: 24px; }.form-grid.two-columns { grid-template-columns: 1fr; }.span-two { grid-column: span 1; } dialog { width: calc(100vw - 20px); }
  .log-filter-form { grid-template-columns: 1fr; }.log-filter-form label:nth-child(3) { grid-column: span 1; }
  .recharge-filter-form { grid-template-columns: 1fr; }.recharge-filter-form label:nth-child(4) { grid-column: span 1; }
}