/* Shared console controls. Cashier and client payment pages keep their own layout. */
.console-app {
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --muted: #59616b;
  --border: #e3e6eb;
  --danger: #b42318;
  --surface: #fff;
  --page: #f5f6f8;
  --text: #1f2329;
  --nav: #20252d;
  background: var(--page);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
.console-app h1 { font-size: 20px; line-height: 1.4; letter-spacing: normal; margin: 0; font-weight: 600; }
.console-app h2 { font-size: 16px; line-height: 1.5; margin-bottom: 16px; font-weight: 600; }
.console-app h3 { font-size: 14px; font-weight: 600; }
.console-app button { min-height: 36px; border-radius: 4px; padding: 6px 14px; font-weight: 400; background: white; }
.console-app button:hover { background: #f5f7fb; border-color: #c6ccd5; }
.console-app button:disabled { cursor: not-allowed; opacity: .48; }
.console-app button[aria-busy="true"] { cursor: wait; }
.console-app button[aria-busy="true"]::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: console-progress .8s linear infinite; }
@keyframes console-progress { to { transform: rotate(360deg); } }
.console-app button.primary { background: var(--accent); border-color: var(--accent); color: white; }
.console-app button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.console-app button.text-btn, .console-app .row-actions .small-btn { background: transparent; color: var(--accent); border-color: transparent; }
.console-app button.text-btn:hover, .console-app .row-actions .small-btn:hover { background: #eff4ff; }
.console-app button.danger { color: var(--danger); }
.console-app button.primary.danger { background: var(--danger); border-color: var(--danger); color: white; }
.console-app button.primary.danger:hover { background: #912018; border-color: #912018; }
.console-app .small-btn { min-height: 30px; font-size: 13px; padding: 3px 8px; }
.console-app .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; padding: 0; flex: 0 0 auto; }
.ui-icon { width: 18px; height: 18px; flex: 0 0 18px; vertical-align: middle; }
.console-app .brand { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: 0; }
.console-app .row { gap: 8px; }
.console-app .panel { border-radius: 6px; padding: 20px; }
.console-app .stack { gap: 16px; }
.console-app .help { font-size: 12px; line-height: 1.6; margin-top: 4px; }
.console-app .badge { border-radius: 3px; padding: 2px 7px; color: #56606c; background: #f0f2f5; line-height: 1.5; }
.console-app .badge.good { color: #14743a; background: #edf7f0; }
.console-app .badge.warn { color: #975712; background: #fff5e5; }
.console-app .notice { font-size: 13px; border: 1px solid #dbe5fc; border-left: 3px solid #8faeee; background: #f4f7ff; color: #3d5278; border-radius: 4px; padding: 10px 12px; margin-bottom: 16px; }
.console-app .page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.console-app .page-heading-text { min-width: 0; }
.console-app .page-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 6px 0 0; max-width: 720px; }
.console-app .page-actions { flex-shrink: 0; }
.console-app .page-loading { padding: 32px 0; color: var(--muted); }
.console-app .field { gap: 6px; margin-bottom: 16px; min-width: 0; }
.console-app .field > span { font-weight: 400; }
.console-app .field:has(> :required) > span::after { content: " *"; color: var(--danger); }
.console-app .field input, .console-app .field select, .console-app .field textarea {
  border-radius: 4px; border: 1px solid #cdd2da; min-height: 36px; padding: 6px 10px; line-height: 1.5; color: var(--text); background: white;
}
.console-app .field input::placeholder, .console-app .field textarea::placeholder { color: #747d89; }
.console-app .field input:focus, .console-app .field select:focus, .console-app .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px #1d4ed814; }
.console-app .field input:disabled, .console-app .field select:disabled { background: #f5f6f8; }
.console-app .field textarea { min-height: 84px; resize: vertical; overflow-wrap: anywhere; }
.console-app .field input[type=file] { font-size: 13px; padding: 6px; }
.console-app input::file-selector-button { border: 0; border-radius: 3px; background: #f0f3f8; padding: 5px 10px; margin-right: 10px; cursor: pointer; color: #364354; }
.console-app .field.check { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.console-app .field.check input { width: 16px; height: 16px; min-height: 16px; order: -1; accent-color: var(--accent); }
.console-app .field.check .help { flex-basis: 100%; padding-left: 24px; }
.console-app .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.console-app .channel-dialog { width: min(680px, calc(100vw - 32px)); }
.console-app .account-config-links > div + div { margin-top: 12px; }
.console-app .account-config-link { padding: 0; min-height: 32px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.console-app .account-config-links small, .console-app .account-limits small { display: block; }
.console-app .account-config-list { margin: 0 0 16px; padding-left: 20px; }
.console-app .account-config-list li + li { margin-top: 12px; }
.console-app .account-config-list small { display: block; }
.console-app .account-method { margin: 0 0 16px; color: var(--muted); }
.console-app .channel-form input[readonly] { background: var(--page); color: var(--muted); }
.console-app .channel-upload-result { display: flex; align-items: center; gap: 12px; margin: -4px 0 16px; }
.console-app .channel-upload-result > div { min-width: 0; flex: 1; }
.console-app .channel-upload-result .help { margin: 0; }
.console-app .channel-code-preview { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--border); border-radius: 4px; }
.console-app .channel-note { margin: 0 0 12px; }
.console-app .channel-product-context { margin: 0 0 20px; font-size: 12px; color: var(--muted); }
.console-app .channel-dialog .dialog-header h2 { flex: 1; }
.console-app .dialog-back { padding: 4px 8px 4px 0; white-space: nowrap; }
.console-app .product-categories { display: flex; border-bottom: 1px solid var(--border); gap: 24px; }
.console-app .product-categories > button { border: 0; border-radius: 0; background: transparent; padding: 8px 4px 12px; color: var(--muted); border-bottom: 2px solid transparent; }
.console-app .product-categories > button[aria-pressed=true] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.console-app .product-category-help { font-size: 12px; color: var(--muted); margin: 14px 0; }
.console-app .product-list { border-top: 1px solid var(--border); }
.console-app .product-option { display: grid; width: 100%; grid-template-columns: minmax(0,1fr) 64px 120px; align-items: center; gap: 16px; text-align: left; white-space: normal; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 15px 12px; background: white; }
.console-app .product-option:hover:enabled { background: #f7f9fd; }
.console-app .product-option-copy { min-width: 0; overflow-wrap: anywhere; }
.console-app .product-option strong { font-size: 14px; font-weight: 500; }
.console-app .product-option small { display: block; color: var(--muted); margin-top: 4px; line-height: 1.6; font-size: 12px; }
.console-app .product-option-method { color: var(--muted); font-size: 12px; }
.console-app .product-option-action { min-width: 0; color: var(--accent); font-size: 13px; text-align: right; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.console-app .product-option:disabled { opacity: 1; background: #fafbfc; }
.console-app .product-option:disabled .product-option-action { color: var(--muted); }
.console-app .field-error { color: var(--danger); font-size: 12px; }
.console-app [aria-invalid=true] { border-color: var(--danger) !important; }
.console-app .form-message:empty { display: none; }
.console-app .error { margin: 0; font-size: 13px; padding: 10px 12px; border-radius: 4px; }
.console-app .empty { padding: 44px 20px; }
.console-app .empty h2 { font-size: 14px; margin-bottom: 6px; color: var(--text); }
.console-app .empty p { font-size: 13px; margin-bottom: 0; }
.console-app .list-panel { background: white; border: 1px solid var(--border); border-radius: 6px; min-width: 0; }
.console-app .list-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); }
.console-app .list-filters .field { margin: 0; flex: 0 1 164px; }
.console-app .list-filters .field > span { font-size: 12px; color: var(--muted); }
.console-app .list-filters .keyword-field { flex: 0 1 260px; }
.console-app .order-filters { gap: 12px 10px; }
.console-app .order-filters .field { flex: 0 1 138px; }
.console-app .order-filters .keyword-field { flex: 0 1 240px; }
.console-app .order-filters .order-filter-merchant_no { flex: 0 1 120px; }
.console-app .order-filters .order-filter-channel_id { flex: 0 1 174px; }
.console-app .order-filters .field.check { flex: 0 0 auto; margin-left: auto; }
.console-app .order-filter-dates { display: flex; flex: 0 1 286px; gap: 10px; min-width: 0; }
.console-app .order-filter-dates .field { flex: 1 1 0; }
.console-app .order-search-error { flex: 1 0 100%; margin: 0; }
.console-app .order-number { min-height: 0; padding: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; font: inherit; }
.console-app .order-numbers, .console-app .order-channel { overflow-wrap: anywhere; }
.console-app .order-money > span { display: block; margin-bottom: 4px; }
.console-app .order-money .amount { font-weight: 600; color: var(--text); }
.console-app .order-status .badge { white-space: nowrap; }
.console-app .filter-actions { display: flex; gap: 8px; }
.console-app .list-scope { margin: 0; font-size: 12px; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--border); }
.console-app .list-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.console-app .pagination { display: flex; align-items: center; gap: 8px; }
.console-app .pagination button, .console-app .pagination select { min-height: 30px; padding: 3px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 4px; background: white; color: var(--text); }
.console-app .page-number { white-space: nowrap; padding: 0 4px; }
.console-app .table-wrap { width: 100%; overflow: auto; }
.console-app table { font-size: 13px; }
.console-app th { color: #59616b; background: #fafbfc; font-weight: 500; font-size: 12px; white-space: nowrap; }
.console-app th, .console-app td { padding: 12px 16px; border-color: #edf0f3; }
.console-app tbody tr:hover { background: #fafbfe; }
.console-app td { overflow-wrap: anywhere; }
.console-app td small { font-size: 12px; margin-top: 3px; }
.console-app .record-name { font-weight: 500; color: var(--text); }
.console-app .record-id, .console-app .mono { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.console-app .amount-cell { text-align: right; white-space: nowrap; }
.console-app .actions-cell { min-width: 148px; width: 1%; }
.console-app .row-actions { align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
.console-app .row-actions > * { flex-shrink: 0; }
.console-app .row-actions a { padding: 4px 8px; white-space: nowrap; }
.console-app .row-more { display: inline-flex; align-items: center; gap: 6px; }
.console-app .row-more::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.console-app .row-more[aria-expanded=true] { background: #eff4ff; }
.console-app .row-action-menu { position: fixed; z-index: 150; display: flex; flex-direction: column; min-width: 152px; max-width: calc(100vw - 16px); margin: 0; padding: 4px; background: white; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 20px #18243b24; overflow: auto; overscroll-behavior: contain; }
.console-app .row-action-menu > button, .console-app .row-action-menu > a { display: flex; align-items: center; flex-shrink: 0; width: 100%; min-height: 36px; padding: 7px 12px; border: 0; border-radius: 3px; background: transparent; color: var(--text); font-size: 13px; text-align: left; white-space: nowrap; text-decoration: none; }
.console-app .row-action-menu > :hover, .console-app .row-action-menu > :focus-visible { background: #eff4ff; color: var(--accent); }
.console-app .row-action-menu > .danger { color: var(--danger); }
.console-app .row-action-menu > .danger:hover, .console-app .row-action-menu > .danger:focus-visible { background: #fff1ef; }
.console-app .row-action-menu > .danger:not(:first-child) { border-top: 1px solid var(--border); border-radius: 0 0 3px 3px; margin-top: 4px; padding-top: 10px; }
.console-app .summary, .console-app .management-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); background: white; border: 1px solid var(--border); border-radius: 6px; gap: 0; margin-bottom: 20px; padding: 0; }
.console-app .summary > div, .console-app .management-stat { padding: 16px 20px; min-width: 0; border-right: 1px solid var(--border); }
.console-app .summary > div:last-child, .console-app .management-stat:last-child { border-right: 0; }
.console-app .summary strong, .console-app .management-stat strong { display: block; font-size: 24px; line-height: 1.3; font-weight: 600; color: var(--text); margin-top: 8px; font-variant-numeric: tabular-nums; }
.console-app .stat-label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); }
.console-app .stat-label a { display: inline-flex; padding: 4px; }
.console-app .quick-links { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; }
.console-app .quick-link { display: flex; gap: 12px; align-items: flex-start; padding: 18px; color: inherit; border-right: 1px solid var(--border); }
.console-app .quick-link:last-child { border-right: 0; }
.console-app .quick-link > .ui-icon { color: var(--muted); margin-top: 2px; }
.console-app .quick-link:hover { background: #f7f9fd; text-decoration: none; }
.console-app .quick-link small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 400; }
.console-app .overview-section { background: white; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 20px; }
.console-app .overview-section > h2 { padding: 14px 18px; margin: 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.console-app .workspace-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; background: #fff9ed; color: #78551b; border-bottom: 1px solid #ecdcbf; font-size: 13px; }
.console-app .workspace-banner > div { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.console-app .workspace-banner strong { font-weight: 500; }
.console-app .workspace-banner span { font-size: 12px; }
.console-app .workspace-banner button { flex-shrink: 0; color: #76531a; border-color: #e4d4b9; background: white; }
.console-app .form-dialog { max-width: 560px; padding: 0; border-radius: 6px; border: 1px solid var(--border); max-height: 92dvh; overflow: hidden; color: var(--text); }
.console-app .form-dialog.wide { max-width: 800px; }
.console-app .dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; gap: 12px; border-bottom: 1px solid var(--border); }
.console-app .dialog-header h2 { margin: 0; font-size: 16px; }
.console-app .dialog-close { font-size: 24px; font-weight: 300; min-width: 32px; padding: 0; border: 0; color: var(--muted); }
.console-app .dialog-body { padding: 24px; overflow-y: auto; max-height: calc(92dvh - 148px); overscroll-behavior: contain; }
.console-app .dialog-actions { margin: 0; padding: 14px 24px; border-top: 1px solid var(--border); background: #fff; }
.console-app .dialog-actions button { min-width: 76px; }
.console-app .grant-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.console-app .grant-row > span { min-width: 0; overflow-wrap: anywhere; }
.console-app .grant-row > button { flex-shrink: 0; }
.console-app .form-section { margin-bottom: 24px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.console-app .form-section:last-child { border: 0; padding-bottom: 0; margin-bottom: 0; }
.console-app .form-section h3, .console-app .form-section > legend { font-size: 14px; margin: 0 0 16px; font-weight: 600; padding: 0; }
.console-app .form-section .field:last-child { margin-bottom: 16px; }
.console-app .form-section .field-grid { display: grid; }
.console-app .form-section .field:has(textarea) { grid-column: 1 / -1; }
.console-app .merchant-access-section { min-width: 0; padding: 0 0 8px; margin-inline: 0; border: 0; border-bottom: 1px solid var(--border); }
.console-app .merchant-permission-options { display: grid; gap: 8px; margin-bottom: 16px; }
.console-app .merchant-permission-option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px;
  min-height: 68px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 5px;
  background: #fff; cursor: pointer; user-select: none;
}
.console-app .merchant-permission-option:hover { border-color: #c5cfdf; background: #fafbfe; }
.console-app .merchant-permission-option.is-enabled { border-color: #cbd9f8; background: #f8faff; }
.console-app .merchant-permission-copy { min-width: 0; }
.console-app .merchant-permission-title { display: block; font-size: 14px; font-weight: 500; }
.console-app .merchant-permission-copy .help { display: block; margin: 3px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.console-app .merchant-permission-control { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.console-app .merchant-permission-state { min-width: 36px; color: var(--muted); font-size: 12px; text-align: right; }
.console-app .merchant-permission-option.is-enabled .merchant-permission-state { color: var(--accent); }
.console-app .merchant-permission-switch { position: relative; display: inline-flex; width: 42px; height: 24px; flex: 0 0 42px; }
.console-app .merchant-permission-switch input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.console-app .merchant-permission-track {
  position: absolute; inset: 0; border: 1px solid #aeb7c4; border-radius: 999px; background: #b8bec8;
  transition: background-color .16s ease, border-color .16s ease;
}
.console-app .merchant-permission-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .16s ease;
}
.console-app .merchant-permission-switch input:checked + .merchant-permission-track { border-color: var(--accent); background: var(--accent); }
.console-app .merchant-permission-switch input:checked + .merchant-permission-track::after { transform: translateX(18px); }
.console-app .merchant-permission-switch input:focus-visible + .merchant-permission-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.console-app .merchant-permission-summary { display: block; max-width: 260px; margin-top: 6px; white-space: normal; }
.console-app .channel-enabled-option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px;
  min-height: 68px; margin-top: 16px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 5px;
  background: #fff; cursor: pointer; user-select: none;
}
.console-app .channel-enabled-option:hover { border-color: #c5cfdf; background: #fafbfe; }
.console-app .channel-enabled-option.is-enabled { border-color: #cbd9f8; background: #f8faff; }
.console-app .channel-enabled-option.is-disabled { cursor: not-allowed; opacity: .7; }
.console-app .channel-enabled-copy { min-width: 0; }
.console-app .channel-enabled-copy strong { display: block; font-size: 14px; font-weight: 500; }
.console-app .channel-enabled-copy .help { display: block; margin: 3px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.console-app .channel-enabled-control { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.console-app .channel-enabled-state { min-width: 36px; color: var(--muted); font-size: 12px; text-align: right; }
.console-app .channel-enabled-option.is-enabled .channel-enabled-state { color: var(--accent); }
.console-app .channel-enabled-switch { position: relative; display: inline-flex; width: 42px; height: 24px; flex: 0 0 42px; }
.console-app .channel-enabled-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.console-app .channel-enabled-switch input:disabled { cursor: not-allowed; }
.console-app .channel-enabled-track { position: absolute; inset: 0; border: 1px solid #aeb7c4; border-radius: 999px; background: #b8bec8; transition: background-color .16s ease, border-color .16s ease; }
.console-app .channel-enabled-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .16s ease; }
.console-app .channel-enabled-switch input:checked + .channel-enabled-track { border-color: var(--accent); background: var(--accent); }
.console-app .channel-enabled-switch input:checked + .channel-enabled-track::after { transform: translateX(18px); }
.console-app .channel-enabled-switch input:focus-visible + .channel-enabled-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.console-app .merchant-application-options { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.console-app .merchant-application-options .merchant-application-option { padding: 12px 4px; margin: 0; border-bottom: 1px solid var(--border); }
.console-app .merchant-application-options .merchant-application-option:last-child { border-bottom: 0; }
.console-app .merchant-application-option > span, .console-app .merchant-application-option .help { overflow-wrap: anywhere; }
.console-app .material-form { background: #fafbfc; border: 1px solid var(--border); border-radius: 4px; padding: 16px; margin-bottom: 24px; }
.console-app .material-form legend { font-size: 14px; font-weight: 600; padding: 0 6px; }
.console-app .material-form > .row, .console-app .material-upload > .row { margin: 10px 0; }
.console-app details:not(.row-more) > summary { cursor: pointer; font-size: 13px; padding: 8px 0; color: var(--accent); }
.console-app .discard-confirm { background: #fff8e9; border: 1px solid #ead8b5; padding: 12px; border-radius: 4px; margin-top: 16px; font-size: 13px; }
.console-app .discard-confirm p { margin-bottom: 10px; }
.console-app .code { background: #f7f8fa; border: 1px solid var(--border); border-radius: 4px; min-width: 0; line-height: 1.65; color: #394555; }
.console-app .integration-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 20px; align-items: start; }
.console-app .integration-row { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.console-app .integration-row > p { font-size: 13px; margin: 8px 0 0; }
.console-app .integration-row .row { flex-wrap: nowrap; align-items: flex-start; }
.console-app .integration-row .code { flex: 1; }
.console-app .integration-row button { flex-shrink: 0; }
.console-app .integration-layout h2 { margin: 0; }
.console-app .detail-list { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 14px 20px; font-size: 13px; }
.console-app .detail-list dt { color: var(--muted); }
.console-app .detail-list dd { margin: 0; overflow-wrap: anywhere; }
.console-app .grant-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.console-app .toast { background: #252d38; border-radius: 4px; box-shadow: 0 3px 16px #1822331a; padding: 10px 18px; font-size: 13px; z-index: 100; }
.console-app .login { max-width: 400px; margin: min(16vh,120px) auto; padding: 32px; border-radius: 6px; }
.console-app .login h1 { margin: 24px 0 8px; }
.console-app .login .divider { display: none; }
.console-app .login .muted { font-size: 13px; margin-bottom: 24px; }
.console-app .login .actions button { width: 100%; }
.console-app .navigation-drawer { color: #e8ebf0; background: var(--nav); position: fixed; margin: 0; top: 0; bottom: 0; left: 0; height: 100dvh; max-height: 100dvh; width: 264px; max-width: calc(100vw - 36px); border: 0; border-radius: 0; padding: 0; overflow-y: auto; }
.console-app .drawer-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.console-app .drawer-heading button { background: transparent; border: 0; color: white; }
.console-app .drawer-identity { margin: 0 20px 16px; padding-bottom: 16px; border-bottom: 1px solid #3b424d; font-size: 13px; }
.console-app .drawer-identity small { display: block; margin-top: 4px; color: #b7bfcb; overflow-wrap: anywhere; }
.console-app .drawer-footer { display: flex; align-items: center; justify-content: space-between; margin: 24px 20px; }
.console-app .drawer-footer .environment-label, .console-app .drawer-footer .text-btn { color: #bdc6d3; }
.console-app .nav { display: flex; flex-direction: column; gap: 22px; padding: 16px 12px; }
.console-app .nav-group { display: grid; gap: 4px; }
.console-app .nav-group-label { color: #9ea9b8; font-size: 12px; padding: 0 12px 8px; }
.console-app .nav-link { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 4px; color: #d7dce3; text-decoration: none; position: relative; }
.console-app .nav-link:hover { background: #2b323d; text-decoration: none; }
.console-app .nav-link[aria-current=page] { background: #303947; color: white; }
.console-app .nav .nav-link[aria-current=page]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: #8aaeff; border-radius: 2px; }
.console-app .skip-link { position: fixed; top: -60px; left: 12px; z-index: 200; padding: 10px 16px; background: white; border: 1px solid var(--accent); }
.console-app .skip-link:focus { top: 8px; }
.console-app :is(button,a,summary,select):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.console-app .nav :is(button,a,summary):focus-visible { outline-color: #a9c2ff; }
@media (prefers-reduced-motion: reduce) { .console-app * { scroll-behavior: auto !important; } .console-app button[aria-busy="true"]::before { animation: none; } }

.console-app .management-stat { display: block; text-decoration: none; }
.console-app .management-stat:hover { background: #fafbfe; text-decoration: none; }
.console-app .product-section:has(> .product-options:empty) { display: none; }
.console-app .bulk-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; background: #f4f7ff; border-bottom: 1px solid var(--border); }
.console-app .bulk-bar > span { margin-right: auto; }
.console-app .selectable-table :is(th,td):first-child { width: 44px; min-width: 44px; }
.console-app .selectable-table input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.console-app .row-select-hit { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.console-app .page-jump { display: flex; gap: 6px; }
.console-app .page-jump input { width: 60px; border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; }
.console-app .pagination { flex-wrap: wrap; }
.console-app .batch-targets { max-height: 220px; overflow: auto; padding-left: 20px; }
.console-app .dialog-actions:has(.discard-confirm) { justify-content: stretch; }
.console-app .dialog-actions .discard-confirm { width: 100%; margin: 0; padding: 0; background: transparent; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.console-app .dialog-actions .discard-confirm p { margin: 0; }
.console-app .entry-qr { width: 240px; max-width: 100%; height: auto; display: block; margin: 16px auto; }
.console-app .material-upload { border: 0; padding: 0; margin: 0; min-width: 0; }
.console-app .entry-link { display: inline-flex; min-height: 36px; align-items: center; padding: 6px 14px; border-radius: 4px; background: var(--accent); color: white; text-decoration: none; }
.console-app .payment-result, .console-app .collection-card { text-align: center; }
.console-app .payment-state strong { display: block; font-size: 26px; margin-bottom: 8px; }
.console-app .payment-result .row { justify-content: center; }
.console-app .collection-management { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 32px; }
.console-app .collection-card { padding: 12px 24px; border-right: 1px solid var(--border); }
.console-app .test-diagnosis { margin-top: 12px; }
.console-app .related-account-actions { margin-bottom: 16px; }
.console-app .mobile-select-page { display: none; }
@media(max-width:900px) { .console-app .collection-management { grid-template-columns: minmax(0,1fr); gap: 20px; } .console-app .collection-card { border: 0; border-bottom: 1px solid var(--border); padding-bottom: 16px; } }

/* Integration identity and protocol documents. No credentials in examples. */
.console-app .integration-summary { padding-top: 4px; padding-bottom: 4px; }
.console-app .integration-summary .integration-row:last-child { border-bottom: 0; }
.console-app .integration-value { padding: 8px 0; overflow-wrap: anywhere; }
.console-app .integration-guides { margin-top: 20px; }
.console-app .integration-guides h2 { margin: 0; font-size: 16px; }
.console-app .integration-guide { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.console-app .integration-guide h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.console-app .integration-guide p { margin: 0; color: var(--muted); }
.console-app .integration-guide button { white-space: nowrap; flex-shrink: 0; }
.console-app .integration-footnote { margin: 16px 0 0; }
.console-app .integration-document { display: grid; grid-template-columns: 176px minmax(0,1fr); gap: 24px; align-items: start; }
.console-app .document-nav { position: sticky; top: 80px; display: flex; flex-direction: column; max-height: calc(100dvh - 100px); overflow-y: auto; gap: 3px; }
.console-app .document-nav-link { padding: 8px 10px; text-align: left; color: var(--muted); border: 0; background: transparent; font-size: 13px; white-space: normal; }
.console-app .document-nav-link:hover, .console-app .document-nav-link:focus-visible { color: var(--accent); background: #edf2fa; }
.console-app .document-body { min-width: 0; }
.console-app .document-section { scroll-margin-top: 88px; }
.console-app .document-section + .document-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.console-app .document-section h2 { margin: 0 0 16px; font-size: 17px; }
.console-app .document-section p { line-height: 1.8; overflow-wrap: anywhere; }
.console-app .document-section .table-wrap { margin-top: 12px; }
.console-app .document-section table { min-width: 540px; }
.console-app .document-section th, .console-app .document-section td { padding: 12px; vertical-align: top; line-height: 1.7; }
.console-app .document-section td:first-child { font-weight: 500; }
.console-app .document-section td { white-space: normal; overflow-wrap: anywhere; }
.console-app .document-code { margin: 16px 0; }
.console-app .document-code > button { display: block; margin: 0 0 6px auto; }
.console-app .document-code pre { margin: 0; overflow-x: auto; white-space: pre; font-size: 12px; padding: 16px; }
.console-app .document-key { padding-top: 16px; }
.console-app .document-open { padding: 8px 14px; border: 1px solid var(--border); border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.console-app .document-open:hover { background: #f7f8fa; }
/* Payment plugin declarations use the existing console controls and dialogs. */
.plugin-fingerprint { display: block; white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
.plugin-package-summary { margin: 16px 0; padding-top: 12px; border-top: 1px solid var(--border, #e5e7eb); }
.plugin-products small { display: block; margin-bottom: 6px; }
.plugin-grant-list { margin-bottom: 16px; }