/* Shared visual refinement. Existing routing, forms and data presentation stay in their own modules. */
:root {
  --ink: #202936;
  --text: #202936;
  --muted: #657184;
  --line: #e1e6ed;
  --bg: #f6f7f9;
  --primary: #285de5;
  --radius: 10px;
}
.shell { color: var(--text); background: var(--bg); }
.shell :is(h1,h2,h3) { letter-spacing: 0; }
.shell .page-head h1 { font-weight: 600; }
.shell .page-head p { line-height: 1.8; }
.shell :is(.panel,.card,.metric,.insight-strip,.order-overview) { border-color: var(--line); border-radius: 10px; box-shadow: none; }
.shell .panel-head { border-bottom-color: #edf0f4; }
.shell .metric-value { letter-spacing: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.shell .metric-head>.icon { color: #8b98aa; }
.shell :is(.wb-account,.resource-guide,.account-profile-heading) { background: #f8fafc; }
.shell .wb-scene-icon { color: #637b9b; background: #f0f3f8; }
.shell .wb-scene { box-shadow: none; }
.shell .wb-scene:hover { box-shadow: none; background: #fbfcfe; }
.shell :is(.btn,.icon-button) { border-radius: 7px; transition: background-color 150ms,border-color 150ms,color 150ms; }
.shell .btn.primary { background: var(--primary); border-color: var(--primary); }
.shell .btn.primary:hover { background: #204fc8; border-color: #204fc8; }
.shell :is(.field input,.field select,.field textarea,.search,.filter-bar input,.filter-bar select) { border-radius: 7px; }
.shell :is(button,a,summary,input,select,textarea):focus-visible { outline: 2px solid #4c77d6; outline-offset: 3px; }
.shell .nav a.active { color: #244f9e; background: #edf2fa; }
.shell .nav a.active>.icon { color: #426ba8; }
.shell .nav a:hover { background: #f4f6f9; }
.shell .nav-group { margin-top: 4px; }
.shell .nav-group>summary { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 8px 12px; border-radius: 8px; list-style: none; cursor: pointer; color: #505d70; font-size: 13px; }
.shell .nav-group>summary::-webkit-details-marker { display: none; }
.shell .nav-group>summary>.icon { width: 16px; height: 16px; color: #7b8596; }
.shell .nav-group>summary::after { content: ''; width: 6px; height: 6px; margin-left: auto; margin-right: 2px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); transition: transform 150ms; }
.shell .nav-group[open]>summary::after { transform: rotate(45deg); }
.shell .nav-group>summary:hover { background: #f4f6f9; }
.shell .nav-group:has(a.active)>summary { color: #244f9e; }
.shell .nav-group>.nav { margin: 4px 0 8px 20px; padding-left: 8px; border-left: 1px solid var(--line); }
.shell .nav-group>.nav a { min-height: 36px; padding: 8px; }
.shell .nav-indicator { width: 3px; height: 16px; border-radius: 2px; background: #4775bf; }
.shell :is(th,.metric-head,.field label) { color: #59677c; }
.shell tbody tr:hover>td { background-color: #f9fafc; }
/* Keep the first and last columns aligned with each panel's content gutter. */
.shell table tr>:is(th,td):first-child, #modal table tr>:is(th,td):first-child { padding-left: 20px; }
.shell table tr>:is(th,td):last-child, #modal table tr>:is(th,td):last-child { padding-right: 20px; }
.profile-account { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; border: 0; background: transparent; padding: 4px 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.profile-account>.profile-info { flex: 1; min-width: 0; }
.profile-account>.icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.profile-account:hover strong { color: var(--primary); }
.top-avatar { border: 0; cursor: pointer; font: inherit; }
.account-dialog { display: grid; gap: 20px; }
.account-dialog-profile { display: flex; align-items: center; gap: 12px; }
.account-dialog-profile>.avatar { width: 44px; height: 44px; flex-shrink: 0; }
.account-dialog-profile>div { flex: 1; min-width: 0; }
.account-dialog-profile h3 { font-size: 16px; font-weight: 500; margin: 0; }
.account-dialog-profile p { margin: 4px 0 0; color: var(--muted); overflow-wrap: anywhere; font-size: 13px; }
.account-dialog-links { display: flex; gap: 8px; flex-wrap: wrap; }
.account-execution fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.account-execution legend { font-size: 14px; font-weight: 600; padding: 0; }
.account-execution fieldset>p, .account-execution>p { font-size: 12px; color: var(--muted); line-height: 1.7; }
.account-execution label { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; cursor: pointer; }
.account-execution input[type=radio] { width: 16px; height: 16px; flex: 0 0 16px; margin: 2px 0 0; accent-color: var(--primary); }
.account-execution label span { display: grid; gap: 6px; min-width: 0; }
.account-execution label strong { font-size: 13px; font-weight: 500; }
.account-execution label small { font-size: 12px; color: var(--muted); line-height: 1.7; }
.account-execution .form-error { color: var(--danger, #b42318); }
.account-execution [data-preference-status]:empty { display: none; }
.wb-execution-mode { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.account-password { border-block: 1px solid var(--line); padding-block: 16px; }
.account-password>summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.account-password>summary::after { content: '+'; margin-left: auto; }
.account-password[open]>summary::after { content: '−'; }
.account-password form { padding-top: 20px; }
.account-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.key-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-bottom: 20px; }
.key-rules>div { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; padding: 20px; }
.key-rules>div+div { border-left: 1px solid var(--line); }
.key-rules strong { font-size: 13px; font-weight: 500; }
.key-rules .icon { color: var(--muted); }
.key-rules p { grid-column: 2; color: var(--muted); margin: 8px 0 0; line-height: 1.7; font-size: 12px; }
.api-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 20px 0; font-size: 13px; }
.api-flow>.icon { color: var(--muted); width: 16px; }
.payment-support-disclosure>summary { display: flex; align-items: center; gap: 8px; padding: 20px; cursor: pointer; font-weight: 500; }
.payment-support-disclosure>summary::after { content: '+'; margin-left: auto; }
.payment-support-disclosure[open]>summary::after { content: '−'; }
.shell .console-footer { color: #68778b; }
.shell .wb-account>strong { color: var(--ink); letter-spacing: 0; font-weight: 500; }
.shell .wb-scene>strong,.shell .wb-business-form>label { font-weight: 500; }
.shell .wb-business-form textarea { background: #fafbfc; line-height: 1.9; }
.shell .wb-business-form textarea:focus { border-color: #8ca8dc; background: #fff; }
.shell .wb-business-side :is(.wb-route,.wb-shortcuts) { border-color: var(--line); }
.shell .wb-scene>p,.shell .wb-route li small,.shell .wb-shortcuts>p { color: #657184; }
.entry-layout { background: #fafbfc; --entry-ink: #202936; --entry-muted: #657184; --entry-blue: #285de5; }
.entry-layout .entry-card { border-radius: 12px; border-color: var(--line); box-shadow: 0 8px 32px -24px #202c4140; }
.entry-layout .entry-card h1 { letter-spacing: 0; font-weight: 500; }
.entry-layout .entry-card .field input { min-height: 48px; border-radius: 8px; background: #fff; }
.entry-layout .entry-card .auth-form>.auth-submit { min-height: 48px; border-radius: 8px; box-shadow: none; }
.entry-layout .entry-card .auth-form>.auth-submit:hover:not(:disabled) { box-shadow: none; }
.entry-layout .entry-brand { font-weight: 600; letter-spacing: -.5px; }
@media (min-width: 761px) {
  .shell .sidebar-header { height: 72px; }
  .shell .sidebar-header>.brand { padding-inline: 20px; }
  .shell .sidebar-nav { padding: 8px 12px 16px; }
  .shell .nav { gap: 4px; }
  .shell .nav-label { padding: 20px 12px 8px; font-size: 11px; }
  .shell .nav a { min-height: 40px; padding: 10px 12px; border-radius: 8px; gap: 10px; }
  .shell .nav a>.icon { width: 16px; height: 16px; }
  .shell .nav-group>summary { padding: 8px 12px; }
  .shell .sidebar-foot { padding: 16px; }
  .shell .profile { gap: 12px; }
  .shell .profile-info small { font-size: 11px; margin-top: 4px; }
  .shell .topbar { height: 60px; padding-inline: 24px; }
  .shell .content { max-width: 1664px; padding: 24px 24px 0; }
  .shell .page-head { margin-bottom: 24px; min-height: 48px; }
  .shell .page-head h1 { font-size: 24px; }
  .shell .page-head p { margin-top: 8px; }
  .shell .metrics { gap: 16px; margin-bottom: 20px; }
  .shell .metric { padding: 20px; }
  .shell .metric-value { margin-block: 12px 8px; font-size: 26px; }
  .shell .console-overview-grid,.shell .console-detail-grid { gap: 20px; margin-bottom: 20px; }
  .shell .panel-head { padding: 16px 20px; min-height: 56px; }
  .shell .panel-head h2 { font-size: 14px; }
  .shell .panel-body { padding: 16px 20px; }
  .shell .console-status-list { padding: 8px 20px; }
  .shell .console-status-row { padding-block: 8px; min-height: 36px; }
  .shell .console-status-actions { padding: 12px 20px; gap: 8px; }
  .shell .chart-wrap { padding: 16px 16px 0; }
  .shell .chart,.shell .chart-plot { height: 208px; }
  .shell .chart-summary { padding: 12px 20px; }
  .shell .console-substats { padding-block: 12px; }
  .shell .console-substats>div { padding-inline: 20px; }
  .shell .console-substats>a { padding-right: 20px; }
  .shell th,.shell td { padding-block: 13px; }
  .shell .btn:not(.small,.link) { min-height: 36px; padding: 8px 12px; }
  .shell .console-footer { margin-top: 28px; padding-block: 16px 24px; }
  .shell .wb-business-form { padding: 24px; }
  .shell .wb-business-form>label { font-size: 18px; margin-bottom: 16px; }
  .shell .wb-business-form textarea { padding: 16px; }
  .shell .wb-scene { padding: 20px; }
  .shell .wb-scene>p { font-size: 13px; }
  .shell .wb-scene>small { font-size: 11px; }
  .shell .wb-business-side { gap: 20px; }
  .shell .wb-business-side :is(.wb-account,.wb-route,.wb-shortcuts) { padding: 20px; }
  .shell .wb-history-row { padding: 20px 24px; }
}
@media (min-width: 1120px) {
  .shell { grid-template-columns: 224px minmax(0,1fr); }
  .shell .sidebar { width: 224px; }
  .shell .sidebar-header>.brand { font-size: 21px; }
  .shell .content { padding-inline: 32px; }
  .shell .topbar { padding-inline: 32px; }
}
@media (min-width: 761px) and (max-width: 1119px) {
  .shell .metric { padding: 16px; }
  .shell .metric-value { font-size: 23px; }
  .shell .console-overview-grid,.shell .console-detail-grid { gap: 16px; }
  .shell .panel-head { padding-inline: 16px; }
  .shell .content { padding-inline: 20px; }
}
@media (max-width: 760px) {
  .shell .nav-group>summary { min-height: 44px; }
  .shell .nav-group>.nav { grid-template-columns: 1fr; }
  .shell .nav-group>.nav a { min-height: 44px; }
  .shell table tr>:is(th,td):first-child, #modal table tr>:is(th,td):first-child { padding-left: 16px; }
  .shell table tr>:is(th,td):last-child, #modal table tr>:is(th,td):last-child { padding-right: 16px; }
  .key-rules { grid-template-columns: 1fr; }
  .key-rules>div { padding: 16px; }
  .key-rules>div+div { border-left: 0; border-top: 1px solid var(--line); }
  .account-dialog-profile { flex-wrap: wrap; }
  .shell .content { padding: 20px 16px 0; }
  .shell .page-head { margin-bottom: 20px; }
  .shell .page-head h1 { font-size: 21px; }
  .shell .page-head p { line-height: 1.8; }
  .shell .metrics { gap: 12px; margin-bottom: 16px; }
  .shell .metric { padding: 14px; }
  .shell .console-overview-grid,.shell .console-detail-grid { gap: 16px; margin-bottom: 16px; }
  .shell .panel-head { padding: 14px 16px; }
  .shell .panel-body { padding: 14px 16px; }
  .shell .wb-business-form { padding: 20px 16px; }
  .shell .wb-scene { padding: 16px; }
  .shell .wb-scene>p { font-size: 13px; }
  .shell .wb-scene>small { font-size: 11px; }
  .shell :is(.wb-scene-top,.wb-account>div,.wb-capabilities>p,.wb-route li small) { font-size: 11px; }
  .shell .wb-business-side { gap: 16px; }
  .shell .console-footer { font-size: 11px; line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
  .shell *,.entry-layout * { scroll-behavior: auto; transition: none !important; animation: none !important; }
}

/* Tool-level pricing and payment administration follow the existing console palette. */
.tool-markup-cell { min-width:124px; font-variant-numeric:tabular-nums; }
.tool-markup-cell>strong { display:block; font-size:14px; font-weight:500; }
.tool-markup-cell>small { display:block; margin-top:4px; white-space:nowrap; }
.tool-markup-cell>.btn { padding:4px 0; min-height:28px; }
.tool-markup-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; margin-bottom:20px; background:#f7f9fc; border:1px solid var(--line); border-radius:8px; }
.tool-markup-summary>div { display:grid; gap:4px; }
.tool-markup-summary span { font-size:12px; color:var(--muted); }
.tool-markup-summary strong { font-size:24px; font-weight:500; font-variant-numeric:tabular-nums; }
.tool-markup-summary small { font-size:12px; }
.tool-markup-identity { display:grid; gap:4px; margin-bottom:16px; }
.tool-markup-identity strong { font-weight:500; }
.tool-markup-identity small { font-family:monospace; }
.tool-markup-explanation,.tool-markup-note { font-size:12px; line-height:1.8; color:var(--muted); margin:16px 0; }
.tool-markup-inherit { padding:12px 0; align-items:center; margin-bottom:16px; }
.tool-markup-inherit strong { font-weight:500; }
#tool-markup-form input:disabled { background:#f3f5f8; color:#7d8797; }
.payments-admin-page { display:grid; gap:24px; }
.payments-admin-page>.page-head { margin-bottom:0; }
.payments-admin-page .payment-section-heading { margin-bottom:16px; }
.payments-admin-page .payment-section-heading h2 { color:var(--text); font-size:15px; font-weight:500; }
.payments-admin-page .payment-section-heading p { color:var(--muted); margin-top:8px; }
.payments-admin-page .payment-channel-grid { gap:16px; }
.payments-admin-page .payment-channel-card { padding:20px; border-color:var(--line); border-radius:10px; }
.payments-admin-page .payment-channel-heading h3 { color:var(--text); font-weight:500; }
.payments-admin-page .payment-channel-heading p { color:var(--muted); }
.payments-admin-page .payment-channel-status { margin-top:20px; padding-top:16px; border-top:1px solid #edf0f4; color:var(--muted); }
.payments-admin-page .payment-section-count,.payments-admin-page .payment-heading-badge { background:#edf1f6; color:#5d6b80; font-size:11px; padding:4px 8px; }
.payments-admin-page .payment-method-card-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:16px; }
.payments-admin-page .payment-method-card { border-color:var(--line); border-radius:10px; padding:20px; }
.payments-admin-page .payment-method-facts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0; }
.payments-admin-page .payment-method-facts dt { color:var(--muted); margin-bottom:8px; }
.payments-admin-page .payment-method-facts dd { color:var(--text); }
.payments-admin-page .payment-method-no-qr { border-style:solid; background:#f8fafc; color:var(--muted); }
.payments-admin-page .payment-method-card-actions { gap:16px; padding-top:16px; margin-top:16px; border-top:1px solid #edf0f4; }
.payments-admin-page .payment-method-card-actions>.btn { flex:0 1 auto; min-width:120px; background:#fff; }
.payments-admin-page .payment-support-section>.payment-section-heading { padding:20px 24px 0; margin-bottom:0; }
.payments-admin-page .payment-support-layout { padding:24px; gap:32px; }
.payments-admin-page .payment-support-form .field { margin-bottom:20px; }
.payments-admin-page .payment-support-preview { border-color:var(--line); }
.payments-admin-page .payment-preview-card { box-shadow:none; background:#f9fafc; border-color:var(--line); }
.upstream-error-history { min-width:200px; }
.upstream-current-cooldown { color:#9a6700; }
@media (max-width:1100px) { .payments-admin-page .payment-method-facts { grid-template-columns:1fr; gap:16px; } }
@media (max-width:760px) { .payments-admin-page { gap:24px; } .payments-admin-page .payment-section-heading { align-items:flex-start; flex-wrap:wrap; } .payments-admin-page .payment-section-heading>.buttons { width:100%; } .payments-admin-page .payment-section-heading>.buttons>.btn { flex:1; justify-content:center; } .payments-admin-page .payment-channel-card,.payments-admin-page .payment-method-card { padding:16px; } .payments-admin-page .payment-channel-heading { flex-wrap:wrap; } .payments-admin-page .payment-channel-heading .payment-state { margin-left:48px; } .payments-admin-page .payment-support-section>.payment-section-heading { padding:16px 16px 0; } .payments-admin-page .payment-support-layout { padding:16px; gap:24px; } .tool-markup-summary { align-items:flex-start; } }