/* pyrotool console. Shared controls and scoped page layouts. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  color: #252b37;
  background: #f6f7f9;
  font-size: 13px;
  --ink: #252b37;
  --text: #252b37;
  --muted: #667085;
  --line: #e4e7ec;
  --bg: #f6f7f9;
  --primary: #2563eb;
  --green: #2563eb;
  --red: #c4323c;
  --radius: 6px;
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: -.3px; }
h2 { font-size: 14px; line-height: 1.5; font-weight: 600; }
h3 { font-size: 13px; font-weight: 600; }
small { font-size: 12px; }
.muted, small { color: var(--muted); }
.mono, code, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12px; }
.mono, .numeric, .metric-value { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.numeric { text-align: right; white-space: nowrap; }
.full { width: 100%; }
.preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
.icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.dot { width: 5px; height: 5px; background: #159669; display: inline-block; flex-shrink: 0; border-radius: 50%; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:is(button, a, summary):focus-visible { outline: 2px solid #497bf1; outline-offset: 3px; }
::selection { color: #163983; background: #dce9ff; }

/* Fixed navigation and compact application header. */
.shell { min-height: 100vh; display: grid; grid-template-columns: 196px minmax(0,1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 196px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: #202735; font-size: 18px; font-weight: 650; letter-spacing: -.4px; }
.brand img { width: 27px; height: 27px; }
.brand small { display: block; font-size: 10px; font-weight: 400; letter-spacing: .1px; color: var(--muted); margin-top: 1px; }
.sidebar-header { height: 63px; flex-shrink: 0; border-bottom: 1px solid #f0f1f4; }
.sidebar-header>.brand { height: 100%; padding: 0 17px; }
.sidebar-header>.mobile-navigation-toggle { display: none; }
.sidebar-nav { padding: 5px 10px 12px; min-height: 0; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #d3d8e0 transparent; }
.nav-label { color: var(--muted); font-size: 11px; padding: 14px 10px 6px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 7px 10px; border-radius: 5px; color: #505a6d; font-size: 13px; }
.nav a>.icon { width: 15px; height: 15px; color: #7b8596; }
.nav a:hover { background: #f4f6f9; color: #28384e; }
.nav a.active { color: #215bca; background: #edf3ff; font-weight: 550; }
.nav a.active>.icon { color: #3269d4; }
.nav-indicator { margin-left: auto; width: 4px; height: 4px; background: #3975e3; border-radius: 50%; }
.sidebar-foot { padding: 10px 13px; border-top: 1px solid var(--line); background: #fff; }
.profile { display: flex; align-items: center; gap: 8px; }
.media-upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; }
.media-upload-form>.field { flex: 1; min-width: 220px; margin: 0; }
.media-upload-form>.form-error { flex-basis: 100%; margin: 0; }
.media-upload-form>.form-error:empty { display: none; }
.task-budget-table .table-name { min-width: 155px; }
.profile-info { flex: 1; min-width: 0; }
.profile-info strong { display: block; font-size: 12px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.profile-info small { display: block; font-size: 10px; margin-top: 2px; }
.avatar { width: 29px; height: 29px; flex-shrink: 0; display: grid; place-items: center; background: #edf1f8; color: #59708f; border-radius: 50%; font-size: 12px; font-weight: 550; }
.main { grid-column: 2; min-width: 0; }
.topbar { height: 50px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); background: #fff; }
.crumb { display: flex; align-items: center; gap: 10px; font-size: 12px; white-space: nowrap; color: #8992a2; }
.crumb strong { color: #3e485b; font-weight: 500; }
.crumb-separator { color: #bdc4cf; }
.top-actions { display: flex; align-items: center; gap: 17px; font-size: 12px; color: #667085; }
.top-help { display: inline-flex; align-items: center; gap: 4px; }
.top-help .icon { width: 12px; height: 12px; }
.top-role { font-size: 11px; border-left: 1px solid var(--line); padding-left: 17px; }
.service-label, .demo-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.service-label.paused { color: #855d1c; }
.service-label.paused .dot, .demo-label .dot { background: #c28d31; }
.demo-label { color: #99732d; }
.top-avatar { width: 27px; height: 27px; }
.content { max-width: 1920px; margin: 0 auto; padding: 18px 22px 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; min-height: 44px; }
.page-head p { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.page-head>.buttons { flex-shrink: 0; }
.buttons { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.console-footer { margin-top: 20px; padding: 12px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); }
.console-footer span>span { padding: 0 7px; color: #b0b7c3; }
.console-footer a { color: var(--muted); }
.eyebrow { color: var(--muted); font-size: 11px; display: block; margin-bottom: 7px; }

/* Controls use a single 32px scale. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #d8dde6; background: #fff; border-radius: 5px; color: #475467; font-size: 12px; font-weight: 500; line-height: 1.4; padding: 6px 11px; min-height: 32px; white-space: nowrap; }
.btn:hover { background: #f8f9fb; border-color: #aebbcf; color: #2e4f82; }
.btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn.primary:hover { background: #1e56d0; border-color: #1e56d0; color: #fff; }
.btn.small { min-height: 26px; padding: 4px 8px; font-size: 12px; }
.btn.link { color: #326bce; background: none; border: 0; padding: 2px 0; min-height: 24px; }
.btn.link:hover { color: #184fae; text-decoration: underline; }
.btn.danger { color: #c4323c; border-color: #edcfd2; }
.btn.danger:hover { background: #fff6f6; }
.btn .icon { width: 14px; height: 14px; }
.icon-button { display: inline-flex; justify-content: center; align-items: center; background: transparent; color: var(--muted); border: 0; padding: 5px; min-width: 27px; min-height: 27px; border-radius: 4px; }
.icon-button:hover { background: #edf2f9; color: #3269ce; }
.period-switch, .tabs { display: inline-flex; align-items: center; gap: 0; padding: 2px; background: #f0f2f6; border: 1px solid #e8ebf0; border-radius: 5px; }
.period-switch button, .tabs button { border: 0; background: none; color: #667085; padding: 4px 10px; min-height: 25px; font-size: 12px; border-radius: 3px; white-space: nowrap; }
.period-switch button.active, .tabs button.active { background: #fff; color: #245fc7; box-shadow: 0 1px 3px #18233112; font-weight: 500; }
.tabs button { padding-inline: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field label, .field-label { display: block; color: #475467; font-size: 12px; font-weight: 500; }
.field input, .field select, .field textarea, .search, .filter-bar input, .filter-bar select, .toolbar input, .toolbar select { width: 100%; min-width: 0; background: #fff; color: #344054; border: 1px solid #d8dee8; border-radius: 5px; padding: 6px 10px; min-height: 33px; outline: none; font-size: 13px; }
.field input:focus, .field select:focus, .field textarea:focus, .search:focus, .filter-bar input:focus, .filter-bar select:focus, .toolbar input:focus, .toolbar select:focus { border-color: #6b96ef; box-shadow: 0 0 0 2px #2563eb10; }
input::placeholder, textarea::placeholder { color: #667085; font-size: 12px; }
.field textarea { resize: vertical; min-height: 76px; line-height: 1.7; }
.field small, .field-hint { color: var(--muted); font-size: 12px; line-height: 1.65; }
.field input[type=file] { font-size: 12px; height: auto; padding: 8px; }
.field input[type=checkbox] { width: auto; min-height: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 14px; }
.checkbox { display: flex; align-items: flex-start; gap: 8px; margin: 13px 0; color: #667085; font-size: 12px; line-height: 1.7; }
.checkbox input { accent-color: #2563eb; margin-top: 4px; }
.form-error { color: #b42332; background: #fff1f2; border-radius: 4px; padding: 8px 10px; font-size: 12px; margin: 10px 0; line-height: 1.6; }
.form-error:empty { display: none; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 13px; margin-top: 16px; border-top: 1px solid var(--line); }
.toolbar, .workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .search { max-width: 300px; }
.toolbar>small { font-size: 12px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.filter-search { min-width: 200px; flex: 1; position: relative; display: flex; align-items: center; }
.filter-search>.icon { position: absolute; left: 10px; width: 14px; height: 14px; color: #98a2b3; pointer-events: none; }
.filter-search input { padding-left: 32px; }
.filter-bar>select { width: auto; max-width: 160px; font-size: 12px; }
.date-range-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex-basis: 100%; padding-top: 12px; margin-top: 4px; border-top: 1px solid #eef0f4; font-size: 12px; }
.date-range-caption { display: inline-flex; align-items: center; gap: 6px; color: #7a8597; }
.date-range-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.date-range-presets button, .date-range-custom { border: 1px solid transparent; background: transparent; color: #5d6b82; border-radius: 6px; padding: 6px 10px; min-height: 32px; }
.date-range-presets button:hover, .date-range-custom:hover { background: #f4f7fc; }
.date-range-presets button.active, .date-range-custom.active { background: #edf3ff; color: #245cc0; }
.date-range-custom { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; border-color: #e3e8ef; background: #fff; }
.usage-scope-note { margin: -1px 0 14px; color: #788498; font-size: 12px; line-height: 1.8; }
#modal:has(#date-picker) { width: 420px; max-width: calc(100vw - 28px); }
.date-picker-selection { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.date-picker-selection button { background: #fafbfc; border: 1px solid #e4e8ef; padding: 10px; border-radius: 7px; text-align: left; min-width: 0; }
.date-picker-selection button.active { background: #f2f6ff; border-color: #7ca0e8; }
.date-picker-selection span { display: block; color: #7b8798; font-size: 11px; margin-bottom: 4px; }
.date-picker-selection strong { font-size: 12px; font-weight: 500; color: #344766; }
.date-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.date-calendar-head>div { display: flex; gap: 8px; }
.date-calendar-head select { padding: 6px; border: 1px solid #e4e8ef; border-radius: 5px; color: #344766; background: #fff; }
.date-calendar-head button { font-size: 24px; min-width: 36px; min-height: 36px; }
.date-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px 0; }
.date-weekday { text-align: center; color: #8c98a9; padding: 7px 0; font-size: 12px; }
.date-calendar-grid button { border: 0; border-radius: 5px; background: #fff; color: #42516b; min-height: 40px; font-variant-numeric: tabular-nums; }
.date-calendar-grid button:hover { background: #e8f0ff; }
.date-calendar-grid button.in-range { background: #edf3ff; border-radius: 0; color: #245cc0; }
.date-calendar-grid button.selected { background: #2563eb; color: #fff; }
.date-calendar-grid button[aria-current=date] { text-decoration: underline; text-underline-offset: 5px; font-weight: 650; }
.date-picker-hint { color: #718099; font-size: 11px; min-height: 36px; margin-top: 18px; }
.date-picker-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 14px; border-top: 1px solid #eef0f4; }
.filter-bar .form-error { flex-basis: 100%; margin: 0; }
.catalog-toolbar select { width: auto; min-width: 130px; font-size: 12px; }
.catalog-toolbar .filter-search { max-width: 440px; }
.capability-item { padding: 13px 14px; }
.capability-item+.capability-item { border-top: 1px solid var(--line); }
.capability-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px 12px; }
.capability-heading h3 { font-size: 13px; overflow-wrap: anywhere; }
.capability-item>p { margin-top: 5px; color: #667085; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.capability-item>small { display: block; font-size: 11px; margin-top: 5px; overflow-wrap: anywhere; }
.capability-item>.btn, .capability-item>.buttons { margin-top: 8px; }
.capability-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.capability-heading>.btn { flex-shrink: 0; }
.connection-diagnostic { align-items: flex-start; }
.connection-diagnostic p { overflow-wrap: anywhere; }
.finance-summary.metrics { grid-template-columns: repeat(6,minmax(0,1fr)); }

/* Data surfaces. Whitespace is allocated to reading, not decoration. */
.panel, .card, .metric { background: #fff; border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
.panel { overflow: hidden; }
.card { padding: 16px; }
.card>h2 { margin-bottom: 8px; }
.card>p { color: #667085; font-size: 12px; line-height: 1.7; margin: 6px 0 12px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #edf0f4; min-height: 43px; }
.panel-head h2 { font-size: 13px; font-weight: 600; }
.panel-head p { font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 3px; }
.panel-head .btn.link { font-size: 12px; }
.panel-body { padding: 12px 14px; }
.detail-section { margin-top: 14px; }
.card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.console-metrics { grid-template-columns: repeat(6,minmax(0,1fr)); }
.metric { padding: 12px 14px; }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; color: #667085; }
.metric-head .icon { width: 14px; height: 14px; color: #98a2b3; }
.metric-value { color: #26334b; font-size: 23px; line-height: 1.25; font-weight: 600; margin: 8px 0 5px; letter-spacing: -.3px; overflow-wrap: anywhere; }
.metric-value span, .metric-value small { font-size: 13px; color: #8691a3; font-weight: 400; margin-inline: 2px; }
.metric-foot { font-size: 11px; color: var(--muted); line-height: 1.5; }
.metric-foot a { color: #4e78bf; }
.metric-foot .icon { width: 11px; height: 11px; }
.console-overview-grid, .console-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 286px; gap: 12px; margin-bottom: 12px; align-items: stretch; }
.console-detail-grid { align-items: start; }
.console-status-list { padding: 4px 14px; }
.console-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #f0f2f6; font-size: 12px; min-height: 29px; }
.console-status-row:last-child { border: 0; }
.console-status-row>span:first-child { color: #667085; flex-shrink: 0; }
.console-status-row>div { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.console-status-row strong { font-size: 12px; font-weight: 500; color: #3e4c63; }
.console-status-row a { color: #326bce; }
.console-status-row code { overflow-wrap: anywhere; text-align: right; font-size: 11px; }
.console-status-actions { display: flex; gap: 7px; flex-wrap: wrap; border-top: 1px solid #edf0f4; padding: 10px 14px; }
.console-substats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto; align-items: center; border-top: 1px solid #edf0f4; padding: 9px 0; }
.console-substats>a { padding-right: 14px; color: #617fab; font-size: 11px; white-space: nowrap; }
.console-substats>a .icon { width: 11px; height: 11px; }
.console-substats>div { min-width: 0; padding: 0 14px; border-right: 1px solid #edf0f4; font-size: 12px; }
.console-substats>div:last-child { border: 0; }
.console-substats span { color: var(--muted); font-size: 11px; }
.console-substats strong { display: block; color: #3e4c63; font-size: 13px; font-weight: 550; margin-top: 3px; overflow-wrap: anywhere; }
.console-summary-note, .page-note { color: var(--muted); font-size: 11px; line-height: 1.65; margin: 10px 0; }
.console-summary-note a, .page-note a { color: #4c73b2; }
.chart-wrap { padding: 8px 12px 0; }
.chart { display: block; width: 100%; height: 170px; overflow: visible; }
.chart-grid { stroke: #e9edf3; stroke-dasharray: 3 4; }
.chart-label { fill: #667085; font-size: 12px; }
.chart-line { fill: none; stroke: #3975dc; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: #fff; stroke: #3975dc; stroke-width: 1.5; opacity: 0; }
.chart:hover .chart-point, .chart:focus-within .chart-point { opacity: 1; }
.chart-point:hover { r: 5; }
.chart-legend { display: inline-flex; align-items: center; gap: 5px; color: #7c889b; font-size: 11px; white-space: nowrap; }
.chart-legend .dot { background: #3975dc; }
.chart-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 14px 10px; font-size: 11px; color: var(--muted); }
.chart-summary a { color: #4b75b9; }
.chart-summary .icon { width: 11px; height: 11px; }
.leader { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.leader:last-child { border: 0; }
.rank { width: 18px; color: #98a2b3; font-family: Consolas,monospace; font-size: 12px; }
.leader-info { flex: 1; min-width: 0; }
.leader-info strong { display: block; font-size: 12px; color: #475467; font-weight: 500; margin-bottom: 6px; }
.leader-count { text-align: right; color: #475467; font-size: 13px; }
.leader-count small { font-size: 10px; color: #98a2b3; margin-left: 4px; }
progress { display: block; appearance: none; width: 100%; height: 3px; border: 0; background: #f0f3f8; border-radius: 2px; overflow: hidden; accent-color: #7699d4; }
progress::-webkit-progress-bar { background: #f0f3f8; }
progress::-webkit-progress-value { background: #7699d4; border-radius: 2px; }
progress::-moz-progress-bar { background: #7699d4; border-radius: 2px; }
.insight-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 12px 0; margin-bottom: 12px; }
.insight-strip>div { padding: 0 16px; border-right: 1px solid var(--line); }
.insight-strip>div:last-child { border: 0; }
.insight-strip span, .insight-strip>div>small { display: block; color: var(--muted); font-size: 11px; }
.insight-strip strong { display: block; font-size: 18px; margin: 4px 0; font-weight: 550; color: #34445d; }
.insight-strip strong small { font-size: 11px; margin-left: 5px; }
.grid-main { display: grid; grid-template-columns: minmax(0,2fr) minmax(250px,1fr); gap: 12px; margin-bottom: 12px; }

/* Tables are the primary interaction surface. */
.table-wrap { overflow: auto; scrollbar-width: thin; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
th { padding: 9px 13px; color: #667085; background: #f9fafb; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; white-space: nowrap; }
td { padding: 9px 13px; color: #475467; border-bottom: 1px solid #edf0f4; line-height: 1.5; font-size: 12px; vertical-align: middle; }
tbody tr:last-child>td { border-bottom: 0; }
tbody tr:hover { background: #fafbfd; }
.table-name { color: #344054; font-weight: 500; }
.table-name small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 3px; }
.row-link { cursor: pointer; }
.row-link:hover { background: #f6f9ff; }
.id-cell { font-size: 11px; color: var(--muted); }
.account-cell { max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.finance-ledger { min-width: 880px; }
.finance-ledger td { white-space: nowrap; }
.finance-ledger .table-name { width: 300px; min-width: 280px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.finance-ledger .table-name small { max-width: 294px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finance-ledger td:last-child, .finance-ledger th:last-child { width: 112px; min-width: 112px; text-align: right; }
.job-table .table-name { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-table td, .job-table th { padding-inline: 10px; }
.console-ranking .muted { font-size: 11px; }
.ranked-tool { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ranked-tool>.rank { width: 13px; font-size: 11px; }
.ranked-tool>span:last-child { max-width: 115px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.action-cell { text-align: right; white-space: nowrap; }
.action-cell .btn { font-size: 12px; }
.table-empty { padding: 27px 16px; text-align: center; color: var(--muted); font-size: 12px; font-weight: 400; }
.table-empty a { color: #4678ce; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.table-footer strong { font-weight: 500; color: #475467; }
.table-footer .buttons { gap: 9px; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; background: #edf8f2; color: #1d704e; border: 1px solid #daeee2; border-radius: 4px; font-size: 11px; font-weight: 400; line-height: 1.45; white-space: nowrap; }
.tag.gray { color: #667085; background: #f4f5f8; border-color: #e9ecf1; }
.tag.warn { color: #855d1c; background: #fff8e9; border-color: #f5e7bf; }
.tag.error { color: #bf4551; background: #fff0f1; border-color: #f6dce0; }
.tag .dot { width: 4px; height: 4px; }
.money-positive { color: #23845d; font-variant-numeric: tabular-nums; }
.money-negative { color: #4f6080; font-variant-numeric: tabular-nums; }
.action-label { font-size: 11px; font-family: Consolas,monospace; background: #f2f5fa; border: 1px solid #e7edf4; padding: 3px 6px; border-radius: 4px; color: #526988; }
.catalog-table { min-width: 730px; }
.catalog-table td { padding-block: 12px; }
.tool-description { color: var(--muted); font-size: 12px; line-height: 1.6; max-width: 480px; }
.tool-id { font-size: 11px; color: var(--muted); font-family: Consolas,monospace; }
.tool-icon { width: 31px; height: 31px; display: grid; place-items: center; background: #eff4fc; color: #6d8cb8; border-radius: 5px; }
.price-detail { margin: 14px 0; padding: 13px 15px; border: 1px solid #dce7f7; background: #f7faff; border-radius: 5px; }
.price-detail>span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.price-detail strong { color: #315f9e; font-weight: 600; font-size: 22px; }
.price-detail strong small { font-size: 12px; margin-left: 5px; color: var(--muted); font-weight: 400; }
.price-detail p { color: var(--muted); font-size: 12px; margin-top: 5px; }
.parameter-details { margin: 14px 0; }
.parameter-details summary { cursor: pointer; color: #617b9f; padding: 8px 0; font-size: 12px; }

/* Status and explanatory content stay subordinate to the data. */
.notice, .operator-note, .attention-strip { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 10px 0 12px; border: 1px solid #dce7f7; background: #f6f9ff; color: #607598; border-radius: 5px; font-size: 12px; line-height: 1.6; }
.notice.amber, .attention-strip { background: #fffbf2; border-color: #f0e5c9; color: #805f24; }
.notice>.icon, .operator-note>.icon { align-self: flex-start; margin-top: 2px; width: 15px; height: 15px; }
.notice strong, .operator-note strong { font-weight: 500; }
.notice p, .operator-note p { font-size: 12px; margin-top: 2px; }
.notice a { color: #4576c5; text-decoration: underline; }
.operator-note>div { flex: 1; }
.attention-strip { flex-wrap: wrap; gap: 9px 18px; }
.attention-strip a { color: #937339; }
.attention-strip .icon { width: 13px; height: 13px; }
.privacy-note { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.7; padding: 11px 0; }
.privacy-note>.icon { width: 13px; height: 13px; margin-top: 3px; }
.privacy-note a { color: #6c89b2; }
.empty { text-align: center; color: var(--muted); font-size: 12px; padding: 26px 16px; line-height: 1.7; }
.empty>.icon { width: 19px; height: 19px; color: #b0bbc9; margin-bottom: 7px; }
.empty strong { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.empty p { font-size: 12px; margin: 5px auto 10px; max-width: 440px; }
.empty .btn { margin-top: 6px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid #edf0f4; font-size: 12px; }
.setting-row:last-child { border: 0; }
.setting-row>span:first-child { color: #667085; flex-shrink: 0; }
.setting-row>:last-child { min-width: 0; overflow-wrap: anywhere; }
.setting-row>span:last-child { color: #475467; text-align: right; overflow-wrap: anywhere; }
.setting-row code { overflow-wrap: anywhere; }
.setting-row a { color: #4176c9; }
.endpoint { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid #e3e9f1; padding: 7px 10px; border-radius: 5px; }
.endpoint code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #667a98; font-size: 12px; }
.code-example { padding: 12px; background: #f8fafc; border: 1px solid #e3e9f1; color: #667a98; border-radius: 5px; overflow: auto; line-height: 1.8; }
.secret-key { width: 100%; padding: 11px; margin: 7px 0 14px; resize: vertical; background: #f8faff; border: 1px solid #cfdcf2; border-radius: 5px; color: #435d85; font: 12px/1.7 Consolas,monospace; overflow-wrap: anywhere; }

/* Connection guide and task preparation. */
.integration-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,1fr); gap: 12px; margin-bottom: 12px; align-items: start; }
.setup-checklist { list-style: none; margin: 0; padding: 0 14px; }
.setup-check { display: flex; gap: 11px; padding: 13px 0; border-bottom: 1px solid #edf0f4; }
.setup-check:last-child { border: 0; }
.setup-step-index { width: 23px; height: 23px; display: grid; place-items: center; flex-shrink: 0; border-radius: 4px; background: #eff3f9; border: 1px solid #e0e7f1; color: #7186a8; font-size: 11px; margin-top: 1px; }
.setup-step-index .icon { width: 13px; height: 13px; }
.setup-step-content { flex: 1; min-width: 0; }
.setup-step-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 6px; }
.setup-step-heading h3 { margin: 0; }
.setup-instructions { list-style: decimal; padding-left: 17px; font-size: 12px; color: #75849a; line-height: 1.8; margin: 7px 0; }
.setup-instructions li { margin-bottom: 3px; }
.verification-prompt { margin: 8px 0 0; border: 1px solid #e3eaf5; background: #f8faff; border-radius: 4px; padding: 9px 11px; font-size: 12px; color: #667085; line-height: 1.8; overflow-wrap: anywhere; }
.panel-note { padding: 9px 14px; border-top: 1px solid #edf0f4; color: var(--muted); font-size: 11px; line-height: 1.6; }
.integration-help { color: var(--muted); font-size: 12px; line-height: 1.8; }
.integration-help>.faq-section { margin: 0; padding: 0 14px; }
.integration-help>.faq-section details:last-child { border-bottom: 0; }
.integration-help p { margin-bottom: 6px; }
.integration-help a { color: #557eb7; }
.setup-step-content h3 { font-size: 13px; font-weight: 550; margin-bottom: 5px; }
.setup-step-content p { font-size: 12px; color: var(--muted); line-height: 1.7; margin-bottom: 8px; }
.setup-step-content small { font-size: 11px; color: var(--muted); }
.setup-step-content details { margin-top: 7px; }
.setup-step-content summary { cursor: pointer; color: #667c9e; font-size: 12px; }
.setup-step-content ol { padding-left: 17px; margin: 7px 0; color: var(--muted); font-size: 12px; line-height: 1.85; }
.integration-onboarding { grid-template-columns: minmax(0,1.6fr) minmax(270px,1fr); }
.integration-sidebar { display: grid; gap: 12px; min-width: 0; }
.integration-onboarding .setup-check { padding-block: 15px; }
.integration-onboarding .setup-step-index { background: #edf3ff; color: #3d6db2; border-color: #dbe6f8; font-weight: 600; }
.integration-onboarding .setup-step-content p:last-child { margin-bottom: 0; }
.integration-onboarding .setup-step-content strong { color: #475467; font-weight: 550; }
.integration-account { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 12px; color: var(--muted); }
.integration-account strong { overflow-wrap: anywhere; }
.integration-check-result { margin-top: 8px; }
.integration-next { padding: 13px 14px 10px; }
.integration-next strong { display: block; font-size: 13px; font-weight: 550; color: #475467; }
.integration-next p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.integration-onboarding .console-status-list { display: block; }
.integration-use { padding-bottom: 12px; }
.integration-use>p { margin: 12px 14px 9px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.integration-use>a { display: flex; align-items: center; gap: 5px; width: fit-content; margin: 7px 14px 0; font-size: 12px; color: #557eb7; }
.integration-use>.integration-service-note { padding-top: 9px; margin-bottom: 0; border-top: 1px solid #edf0f4; font-size: 11px; }
.integration-diagnostics { margin-bottom: 12px; min-width: 0; }
.integration-diagnostics>summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; cursor: pointer; list-style: none; font-size: 12px; color: #475467; }
.integration-diagnostics>summary::-webkit-details-marker { display: none; }
.integration-diagnostics>summary>span { display: inline-flex; align-items: center; gap: 7px; }
.integration-diagnostics>summary .icon { width: 13px; height: 13px; }
.integration-diagnostics[open]>summary { border-bottom: 1px solid #edf0f4; }
.integration-diagnostic-overview { padding: 2px 14px 9px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; }
.integration-diagnostic-overview code { overflow-wrap: anywhere; }
.connection-table { min-width: 0; }
.connection-table table { min-width: 650px; }
.prompt-card { padding: 12px 14px; background: #f8fafc; border: 1px solid #e7ecf3; border-radius: 5px; }
.prompt-card>div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.prompt-card p { color: #65758e; font-size: 12px; line-height: 1.8; }
.prompt-card .tag { background: #eff3f9; border-color: #e1e7f1; color: #74839b; }
.prompt-card .btn { font-size: 11px; }
.panel>.prompt-card { margin: 12px 14px; }
.task-composer { border: 0; background: transparent; }
.task-composer .panel-head { padding: 11px 14px; }
.task-composer form { padding: 12px 14px; }
.task-composer textarea { min-height: 72px; }
.task-composer small { font-size: 11px; color: var(--muted); }
.suggestion-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 7px 0 12px; color: var(--muted); font-size: 11px; }
.suggestion-chips button { border: 1px solid #e1e6ef; background: #fafbfd; color: #7387a5; font-size: 11px; padding: 4px 7px; border-radius: 4px; }
.suggestion-chips button:hover { background: #eef4ff; color: #4b73b6; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 9px; }
.budget-field { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #667085; }
.budget-field>span { font-size: 11px; color: #8b98ac; }
.budget-field input { border: 1px solid #d8dee8; border-radius: 5px; padding: 6px 8px; width: 80px; color: #475467; font-size: 12px; }
.composer-feedback { color: #23845d; font-size: 12px; margin-top: 8px; }
.composer-feedback:empty { display: none; }
.compact-composer, .advanced-panel, .workspace-help { border: 1px solid var(--line); border-radius: 6px; background: #fff; margin: 12px 0; overflow: hidden; }
:is(.compact-composer,.advanced-panel,.workspace-help)>summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; font-size: 12px; color: #5d6b81; cursor: pointer; list-style: none; min-height: 40px; }
:is(.compact-composer,.advanced-panel,.workspace-help)>summary::-webkit-details-marker { display: none; }
:is(.compact-composer,.advanced-panel,.workspace-help)>summary::after { content: '+'; color: #95a0b2; font-size: 16px; margin-left: auto; }
:is(.compact-composer,.advanced-panel,.workspace-help)[open]>summary { border-bottom: 1px solid #edf0f4; }
:is(.compact-composer,.advanced-panel,.workspace-help)[open]>summary::after { content: '−'; }
:is(.compact-composer,.advanced-panel,.workspace-help)>summary>span:last-child { color: var(--muted); font-size: 11px; }
.compact-composer>.panel { border: 0; }
.compact-composer>form { padding: 12px 14px; }
.compact-composer>summary>span:last-child>.icon { display: none; }
.advanced-panel .panel-head { border-bottom: 0; }
.workspace-help>div, .workspace-help>p { padding: 12px 14px; }
.workspace-help>p { color: var(--muted); font-size: 12px; line-height: 1.75; }
.faq-section { margin-top: 15px; }
.faq-section>h2 { font-size: 13px; margin-bottom: 8px; }
.faq-section details { border-bottom: 1px solid var(--line); }
.faq-section summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; cursor: pointer; font-size: 12px; color: #6a7991; list-style: none; }
.faq-section summary .icon { width: 13px; height: 13px; color: #9ba5b6; }
.faq-section details p { padding: 0 0 12px; font-size: 12px; line-height: 1.8; color: var(--muted); }

/* Wallet, credentials, setup and payment administration. */
.console-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; margin-bottom: 12px; }
.console-summary>div { padding: 12px 16px; border-right: 1px solid var(--line); min-width: 0; }
.console-summary>div:last-child { border-right: 0; }
.console-summary span { display: block; font-size: 12px; color: var(--muted); }
.console-summary strong { display: block; font-size: 21px; font-weight: 600; line-height: 1.35; color: #34445f; margin-top: 5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.console-summary small { font-size: 11px; display: block; color: var(--muted); margin-top: 4px; }
.workspace-meta { font-size: 12px; color: var(--muted); line-height: 1.7; }
.workspace-meta code { color: #5c759b; }
.workspace-split { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(290px,1fr); align-items: start; gap: 12px; }
.workspace-toolbar { min-height: 30px; font-size: 12px; color: var(--muted); }
.panel>.workspace-toolbar { margin: 0; padding: 9px 14px; border-top: 1px solid #edf0f4; }
.panel-head>.workspace-toolbar { min-height: 0; margin: 0; justify-content: flex-start; gap: 10px; }
.workspace-description { max-width: 490px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.workspace-empty { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 9px; padding: 18px 12px; color: var(--muted); font-size: 12px; }
.workspace-empty>strong { color: #708198; font-weight: 500; }
.workspace-instructions { padding: 11px 14px; border-top: 1px solid #edf0f4; font-size: 12px; color: var(--muted); }
.workspace-instructions>strong { display: block; font-size: 12px; font-weight: 500; color: #677c9b; margin-bottom: 5px; }
.workspace-form { padding: 14px; }
.endpoint-table { min-width: 640px; }
.endpoint-table td:first-child { width: 105px; }
.endpoint-table .endpoint { border: 0; background: transparent; padding: 0; }
.panel>.workspace-help { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.workspace-help>div p { font-size: 12px; color: var(--muted); line-height: 1.8; margin-bottom: 7px; }
.workspace-help a { color: #4b79bb; }
.console-summary strong small { display: inline; font-size: 12px; font-weight: 400; margin-top: 0; }
.setup-table { min-width: 760px; }
.setup-table td { padding-block: 12px; }
.setup-table td:first-child { width: 80px; }
.setup-table td:last-child { text-align: right; white-space: nowrap; }
.setup-table .workspace-meta { max-width: 520px; }
.payment-table { min-width: 660px; }
.payment-table td { padding-block: 11px; }
.payment-method-option { padding: 12px 14px; }
.payment-method-option+.payment-method-option { border-top: 1px solid var(--line); }
.payment-method-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.payment-method-heading .inline-payment { min-width: 0; overflow-wrap: anywhere; }
.payment-method-heading .table-name { min-width: 0; }
.payment-method-action { flex-shrink: 0; }
.payment-method-meta { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 8px 16px; margin: 9px 0 0 39px; }
.payment-method-meta>div { min-width: 0; }
.payment-method-meta dt { color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.payment-method-meta dd { font-size: 12px; margin: 0; overflow-wrap: anywhere; }
.wallet-readiness { justify-content: space-between; flex-wrap: wrap; }
.wallet-readiness>div:first-child { flex: 1; min-width: min(100%,250px); }
.wallet-readiness .buttons { flex-shrink: 0; }
.inline-payment { display: flex; align-items: center; gap: 9px; }
.inline-payment strong { display: block; font-size: 12px; font-weight: 500; }
.inline-payment small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.payment-symbol { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 5px; background: #eff3f9; color: #6d82a0; flex-shrink: 0; font-size: 14px; font-weight: 550; }
.payment-symbol.wechat { color: #339b6e; background: #edf7f0; }
.payment-symbol.alipay { color: #4885bf; background: #edf5fb; }
.payment-symbol.bank { color: #8078a4; background: #f3f0f9; }
.payment-methods { padding: 10px 14px; }
.payment-choice { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px; margin-bottom: 7px; border: 1px solid #e4e9f0; border-radius: 5px; background: #fff; text-align: left; }
.payment-choice:last-child { margin-bottom: 0; }
.payment-choice:hover { border-color: #afc6e9; background: #f9fbff; }
.payment-choice>span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.payment-choice strong { display: block; font-size: 13px; color: #475467; font-weight: 500; }
.payment-choice small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.payment-choice>.icon { color: #96a5bd; width: 14px; height: 14px; }
.payment-instructions, .support-contact { border-top: 1px solid #edf0f4; padding: 12px 0; margin: 0 14px; }
.payment-instructions h3 { font-size: 12px; color: #63738c; margin-bottom: 6px; }
.payment-instructions p { font-size: 12px; color: var(--muted); line-height: 1.8; }
.support-contact span { color: var(--muted); font-size: 12px; }
.support-contact strong { display: block; font-size: 12px; color: #657996; font-weight: 500; overflow-wrap: anywhere; margin-top: 5px; }
.payment-detail { display: flex; align-items: center; gap: 17px; padding: 13px; margin-bottom: 16px; background: #fafbfd; border: 1px solid #e3e9f1; border-radius: 6px; }
.payment-detail>div { min-width: 0; flex: 1; }
.payment-detail h3 { font-size: 13px; margin: 8px 0; color: #586e8d; }
.payment-detail p { font-size: 12px; color: var(--muted); margin-top: 7px; line-height: 1.8; }
.payment-qr { width: 150px; height: 150px; object-fit: contain; background: #fff; border: 1px solid #e0e7f1; border-radius: 4px; padding: 6px; flex-shrink: 0; }
.payment-qr.small { width: 90px; height: 90px; display: block; margin: 8px 0; }
.amount-presets { display: flex; gap: 8px; margin-bottom: 16px; }
.amount-presets button { flex: 1; border: 1px solid #dce5f3; color: #6682ad; background: #f8faff; border-radius: 5px; padding: 7px 10px; font-size: 12px; }
.amount-presets button:hover { border-color: #8fb1e5; background: #edf4ff; }
.payment-customer-table .payment-merchant { max-width: 270px; white-space: normal; line-height: 1.65; }
.payment-account-summary { display: grid; gap: 4px; max-width: 290px; line-height: 1.6; overflow-wrap: anywhere; }
.payment-account-summary>small { color: var(--muted); font-size: 11px; }
.payment-account-summary>code { color: #475b77; font-size: 12px; }
.payment-admin-table { min-width: 900px; }
.payment-admin-table td:last-child { white-space: nowrap; }
.payment-table-account { display: flex; align-items: center; gap: 6px; max-width: 245px; }
.payment-table-account>code { overflow-wrap: anywhere; min-width: 0; font-size: 12px; }
.payment-table-account>.icon-button { flex-shrink: 0; }
.payment-thumbnail { display: inline-flex; align-items: center; gap: 8px; padding: 3px; border: 0; border-radius: 4px; color: #426da9; background: transparent; font-size: 11px; white-space: nowrap; }
.payment-thumbnail:hover { background: #f0f5fc; }
.payment-thumbnail>img { display: block; width: 34px; height: 46px; object-fit: contain; border: 1px solid #e2e7ee; background: #fff; }
.payment-checkout { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 17px; overflow: hidden; }
.payment-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.modal-body .payment-section-head h3 { font-size: 13px; margin: 0; font-weight: 600; color: #42536e; }
.payment-checkout>.payment-section-head { padding: 10px 13px; margin: 0; border-bottom: 1px solid var(--line); background: #f8fafc; }
.payment-checkout-main { display: flex; align-items: flex-start; gap: 14px; padding: 12px 13px; }
.payment-checkout-info { min-width: 0; flex: 1; }
.payment-code-preview { width: 138px; margin: 0; flex: 0 0 138px; text-align: center; }
.payment-code-preview>img { display: block; width: 100%; height: 192px; object-fit: contain; background: #fff; border: 1px solid #e2e7ee; }
.payment-code-preview>figcaption { font-size: 10px; line-height: 1.6; color: var(--muted); margin-top: 5px; }
.payment-recipient { margin: 0; font-size: 12px; }
.payment-recipient-row { padding: 7px 0; border-bottom: 1px solid #edf0f4; }
.payment-recipient-row:first-child { padding-top: 0; }
.payment-recipient-row:last-child { border-bottom: 0; padding-bottom: 0; }
.payment-recipient-row dt { color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.payment-recipient-row dd { display: flex; align-items: center; gap: 6px; margin: 0; color: #34445f; line-height: 1.65; }
.payment-recipient-row dd>span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.payment-recipient-row dd>.icon-button { flex-shrink: 0; width: 27px; height: 27px; }
.payment-checkout-note { font-size: 12px; color: #687b97; line-height: 1.75; margin-top: 10px; }
.payment-qr-viewer { border: 1px solid var(--line); border-radius: 5px; margin-top: 10px; overflow: hidden; }
.payment-qr-viewer>summary { display: flex; align-items: center; gap: 9px; padding: 9px 12px; color: #426da9; font-size: 12px; cursor: pointer; list-style: none; background: #f8fafc; }
.payment-qr-viewer>summary::-webkit-details-marker { display: none; }
.payment-qr-viewer>summary>span:first-child { flex: 1; }
.payment-qr-viewer>summary::after { content: '+'; font-size: 15px; color: #8191a8; }
.payment-qr-viewer[open]>summary::after { content: '−'; }
.payment-qr-viewer[open]>summary { border-bottom: 1px solid var(--line); }
.payment-checkout>.payment-qr-viewer { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.payment-qr-viewer-body { padding: 11px 12px 12px; }
.payment-image-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; font-size: 11px; line-height: 1.7; color: var(--muted); margin-bottom: 10px; }
.payment-image-toolbar>span { flex: 1 1 190px; }
.payment-image-toolbar>.btn { flex-shrink: 0; }
.payment-qr-original { padding: 8px; background: #f1f4f8; border: 1px solid #e2e7ee; border-radius: 4px; }
.payment-qr-original>img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; background: #fff; }
.payment-request-form .payment-amount-presets { align-items: center; gap: 6px; margin: -4px 0 14px; }
.payment-amount-presets>span { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.payment-amount-presets>button { flex: 0 1 auto; padding: 5px 11px; background: #fff; }
.payment-request-form>.notice { font-size: 12px; line-height: 1.7; margin-bottom: 0; }
.payment-request-form>.form-actions { margin-top: 13px; }
.review-amount { font-size: 18px; font-weight: 600; color: #305f9c; }
.wallet-layout { display: grid; grid-template-columns: minmax(260px,1fr) 2fr; gap: 12px; margin-bottom: 12px; }
.balance-card { padding: 16px; background: #fff; border: 1px solid #d7e3f4; border-radius: 6px; }
.balance-title { display: flex; justify-content: space-between; color: #647a9b; font-size: 12px; }
.balance-title>span { color: #8a9bb5; font-size: 11px; }
.balance-amount { font-size: 28px; color: #305b99; font-weight: 600; margin: 10px 0; font-variant-numeric: tabular-nums; }
.balance-amount>span { font-size: 16px; margin-right: 4px; font-weight: 400; }
.balance-meta { display: flex; gap: 16px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.balance-meta strong { color: #647a9b; font-weight: 500; margin-left: 5px; }
.balance-card>a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #547fbf; margin-top: 12px; }
.wallet-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.wallet-stats .metric { padding: 16px; }
.wallet-stats .metric-value { margin-top: 20px; }
.billing-flow { display: flex; align-items: center; gap: 15px; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 10px 14px; margin-bottom: 12px; font-size: 12px; color: #7d8da5; flex-wrap: wrap; }
.billing-flow b { font-size: 11px; color: #95a4b9; margin-right: 6px; font-weight: 400; }
.billing-flow>.icon { width: 12px; color: #b6c1d2; }
.billing-flow>a { margin-left: auto; color: #587eaf; }
.onboarding-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.onboarding-flow a { color: #326bce; }
.reversal-history { font-size: 12px; }
@media (max-width: 1100px) {
  .finance-summary.metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Dialogs and ordinary authentication forms. */
dialog { padding: 0; color: var(--text); border: 1px solid #dce2eb; background: #fff; border-radius: 8px; width: 650px; max-width: calc(100vw - 28px); max-height: 90vh; box-shadow: 0 18px 70px #13233e26; }
dialog::backdrop { background: #17263f66; }
.reauth-dialog { width: 420px; max-width: 92vw; padding: 22px; }
.reauth-dialog::backdrop { background: #17263f80; }
.reauth-form>h2 { font-size: 17px; margin-bottom: 6px; }
.reauth-form>p:not(.form-error) { color: var(--muted); font-size: 12px; margin-bottom: 18px; }
.reauth-form>.buttons { justify-content: flex-end; margin-top: 18px; }
.route-state { display: flex; align-items: flex-start; gap: 12px; padding: 23px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.route-state>.icon { margin-top: 3px; color: var(--red); }
.route-state h2 { font-size: 14px; font-weight: 500; }
.route-state p { margin-top: 5px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.route-state .buttons { margin-top: 14px; }
.route-standalone { max-width: 480px; margin: 48px auto; padding: 0 20px; }
.route-standalone>.brand { margin-bottom: 22px; }
.loading-spinner { width: 18px; height: 18px; border: 2px solid #dce6f7; border-top-color: var(--primary); border-radius: 50%; animation: loading-spin .8s linear infinite; margin-top: 1px; flex-shrink: 0; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 15px; }
.modal-body { padding: 17px 19px; max-height: calc(90vh - 54px); overflow: auto; }
.modal-body>p, .modal-body form>p { font-size: 12px; color: var(--muted); line-height: 1.75; margin-bottom: 13px; }
.modal-body pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow: auto; background: #f8fafc; border: 1px solid #e5eaf1; border-radius: 5px; padding: 12px; line-height: 1.8; color: #647996; }
.modal-body h3 { margin: 12px 0 7px; }
.detail-list { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 10px 13px; margin: 0 0 16px; font-size: 12px; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; color: #4b5c76; overflow-wrap: anywhere; }
#toast { position: fixed; z-index: 100; top: 64px; left: 50%; transform: translate(-50%,-6px); opacity: 0; pointer-events: none; background: #fff; border: 1px solid #dce5df; color: #3b7057; border-radius: 6px; padding: 11px 18px; max-width: calc(100vw - 32px); box-shadow: 0 5px 22px #1c2f4017; font-size: 12px; transition: opacity .15s, transform .15s; }
#toast.visible { opacity: 1; transform: translate(-50%,0); }
#toast.error { color: #b3424c; border-color: #ecd9dc; background: #fffafb; }
.boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 15px; color: #7d8ba1; }
.boot img { width: 35px; }
.auth-layout { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #f6f8fc; }
.auth-topbar { min-height: 68px; background: #fff; border-bottom: 1px solid var(--line); padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-topbar>a:last-child { display: inline-flex; align-items: center; gap: 5px; color: #52647c; font-size: 13px; }
.auth-topbar .icon { width: 13px; height: 13px; }
.auth-main { display: flex; align-items: center; justify-content: center; flex: 1; padding: 40px 20px; }
.auth-card { width: 440px; max-width: 100%; background: #fff; border: 1px solid #dfe5ef; border-radius: 14px; padding: 30px; box-shadow: 0 8px 30px #243b6610; }
.auth-kicker { color: #536781; font-size: 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.auth-card h1 { font-size: 25px; font-weight: 650; color: #1f2d43; margin-bottom: 8px; letter-spacing: -.5px; }
.auth-card>p, .auth-heading>p { font-size: 13px; color: #667085; line-height: 1.8; margin-bottom: 23px; }
.auth-role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #f1f4f8; padding: 4px; border: 1px solid #e9edf3; border-radius: 8px; margin-bottom: 26px; }
.auth-role-switch a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; color: #5b6a7e; border: 1px solid transparent; border-radius: 5px; font-size: 13px; }
.auth-role-switch a[aria-current="page"] { background: #fff; border-color: #e0e6ef; color: #245fce; box-shadow: 0 1px 3px #2336570a; font-weight: 600; }
.auth-entry-admin .auth-role-switch a[aria-current="page"] { color: #304560; }
.auth-card .field { margin-bottom: 18px; }
.auth-card .field label { font-size: 13px; color: #344054; margin-bottom: 7px; }
.auth-card .field input { min-height: 44px; border-radius: 6px; padding: 10px 12px; font-size: 14px; }
.auth-card .field input::placeholder { color: #7d899c; }
.auth-card .field small { font-size: 12px; line-height: 1.7; color: #667085; margin-top: 7px; }
.auth-form>.btn, .auth-card #email-code-form>.btn { width: 100%; min-height: 44px; font-size: 14px; border-radius: 6px; }
.auth-submit-label { display: inline-flex; justify-content: center; align-items: center; gap: 9px; }
.auth-submit-pending { display: none; }
.auth-form[data-submitting="true"] .auth-submit { opacity: .7; cursor: progress; }
.auth-form[data-submitting="true"] .auth-submit-label { display: none; }
.auth-form[data-submitting="true"] .auth-submit-pending { display: inline; }
.auth-form .form-error:not(:empty) { background: #fff5f5; border: 1px solid #f1d8dc; border-radius: 6px; padding: 10px 12px; margin: 0 0 14px; color: #a93140; font-size: 13px; line-height: 1.75; }
.password-input { position: relative; }
.auth-card .password-input input { padding-right: 76px; }
.password-toggle { position: absolute; right: 4px; top: 4px; min-width: 64px; height: 36px; padding: 0 7px; border: 0; border-radius: 4px; background: none; color: #64748b; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; }
.password-toggle:hover { background: #f1f4f9; color: #245fce; }
.password-toggle[aria-pressed="true"] { color: #245fce; background: #edf3ff; }
.password-toggle .icon { width: 15px; height: 15px; }
.auth-card .field .caps-lock-hint { color: #956016; }
.caps-lock-hint[hidden] { display: none; }
.signup-code-row { display: grid; grid-template-columns: minmax(0,1fr) 112px; gap: 10px; align-items: end; }
.signup-code-row .field { margin: 0; }
.signup-code-row>.btn { min-height: 44px; padding-inline: 8px; font-size: 12px; border-radius: 6px; }
.signup-code-row+.field-hint { font-size: 12px; line-height: 1.8; color: #667085; margin: 8px 0 16px; overflow-wrap: anywhere; }
.auth-card .checkbox { font-size: 12px; line-height: 1.9; margin: 17px 0; align-items: flex-start; gap: 8px; }
.auth-card .checkbox input { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; }
.auth-card .checkbox a { color: #245fce; text-decoration: underline; text-underline-offset: 3px; }
.auth-switch { font-size: 13px; color: #667085; margin-top: 20px; text-align: center; }
.auth-switch button { padding: 6px 3px; border: 0; background: none; color: #245fce; font-size: 13px; font-weight: 600; margin-left: 5px; }
.auth-context { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: #f4f7fe; border: 1px solid #dfe8f6; border-radius: 7px; margin: 0 0 20px; }
.auth-context>.icon { color: #426ca8; margin-top: 3px; }
.auth-context strong, .auth-context span { display: block; }
.auth-context strong { font-size: 13px; color: #3b587d; font-weight: 500; }
.auth-context span { font-size: 12px; color: #667085; margin-top: 4px; line-height: 1.7; }
.auth-context-admin { background: #f6f8fb; border-color: #e2e7ef; }
.auth-steps { display: flex; justify-content: space-between; gap: 7px; padding: 0; margin: -4px 0 24px; list-style: none; }
.auth-step { font-size: 12px; color: #667085; display: flex; align-items: center; gap: 6px; }
.auth-step>span { background: #f1f4f9; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; }
.auth-step.active { color: #245fce; }
.auth-step.active>span { background: #e7effc; color: #245fce; }
.auth-notice { padding: 11px 12px; margin: 0 0 20px; border: 1px solid #efdcae; border-radius: 6px; background: #fffbf0; color: #795b20; font-size: 12px; line-height: 1.8; }
.auth-invite-note { margin-top: 17px; color: #667085; font-size: 12px; line-height: 1.8; text-align: center; }
.auth-help { margin-top: 17px; font-size: 12px; color: #667085; }
.auth-help summary { width: fit-content; margin: auto; padding: 4px; cursor: pointer; }
.auth-help[open] { padding: 10px 12px; background: #f8fafc; border: 1px solid #e7ecf3; border-radius: 6px; }
.auth-help[open] summary { color: #344054; }
.auth-help p { margin-top: 8px; font-size: 12px; line-height: 1.85; }
.auth-onboarding { margin-top: 23px; padding-top: 20px; border-top: 1px solid #e9edf3; }
.auth-onboarding-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.auth-onboarding-heading strong { color: #44546b; font-weight: 600; }
.auth-onboarding-heading a { display: inline-flex; align-items: center; gap: 3px; color: #245fce; }
.auth-onboarding-heading .icon { width: 12px; height: 12px; }
.auth-onboarding ol { display: flex; justify-content: space-between; gap: 7px; margin: 14px 0 10px; padding: 0; list-style: none; }
.auth-onboarding li { display: flex; align-items: center; gap: 5px; color: #536279; font-size: 12px; white-space: nowrap; }
.auth-onboarding li span { color: #5877a4; width: 20px; height: 20px; background: #f0f4fb; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.auth-onboarding>p { font-size: 11px; line-height: 1.8; color: #667085; }
.auth-alternate { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; padding-top: 17px; margin-top: 18px; border-top: 1px solid #edf0f4; font-size: 12px; color: #667085; }
.auth-alternate>span { color: #a6b0bf; }
.auth-demo { display: flex; align-items: center; gap: 12px; padding: 12px; margin-top: 20px; background: #fffaf0; border: 1px solid #eddfbd; border-radius: 6px; }
.auth-demo>div { flex: 1; }
.auth-demo strong { display: block; font-size: 12px; color: #756033; font-weight: 600; }
.auth-demo span { display: block; font-size: 11px; line-height: 1.7; color: #756033; margin-top: 4px; }
.auth-demo .btn { font-size: 12px; flex-shrink: 0; }
.auth-demo-badge { color: #8a621e; background: #fff5db; border-radius: 4px; padding: 2px 6px; font-size: 10px; }
.auth-footer { text-align: center; padding: 19px 16px; color: #667085; font-size: 11px; }
.auth-footer>span { padding: 0 8px; color: #a6b0bf; }
.consent-logo { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 20px 0; }
.consent-logo img { width: 35px; }
.permission { display: flex; align-items: flex-start; gap: 9px; border-bottom: 1px solid #edf0f4; padding: 11px 0; font-size: 12px; color: #7a8ba3; line-height: 1.75; }
.permission>.icon { width: 14px; height: 14px; color: #6c8bb9; margin-top: 3px; }
.consent-user { font-size: 12px; color: #7186a4; margin: 16px 0; line-height: 1.8; overflow-wrap: anywhere; }
.consent-user small { color: var(--muted); font-size: 10px; }
.auth-privacy { font-size: 11px; color: var(--muted); line-height: 1.8; text-align: center; margin-top: 16px; }
.auth-privacy a { color: #7492bc; }
.auth-privacy .btn { font-size: 11px; }

/* Standalone guides inherit the same plain document typography. */
.prose { max-width: 950px; margin: 30px auto; padding: 28px 34px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.prose>.brand { margin-bottom: 20px; }
.prose h1 { font-size: 25px; margin: 8px 0 16px; }
.prose h2 { font-size: 17px; margin: 25px 0 10px; }
.prose h3 { margin: 18px 0 8px; }
.prose p, .prose li { color: #66758d; font-size: 13px; line-height: 1.9; }
.prose p { margin-bottom: 10px; }
.prose ol, .prose ul { padding-left: 23px; }
.prose li { margin-bottom: 9px; }
.prose code { background: #f0f4fa; color: #5c7ca9; padding: 2px 5px; border-radius: 3px; overflow-wrap: anywhere; }
.prose pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f7f9fc; color: #7188a8; border: 1px solid #e5ebf3; border-radius: 5px; padding: 13px 15px; font-size: 12px; line-height: 1.85; }
.prose a:not(.btn):not(.brand) { color: #4576c1; text-decoration: underline; }

/* Responsive density changes preserve readable text and horizontal table scrolling. */
@media (min-width: 1600px) {
  .content { padding-inline: 26px; }
  .console-overview-grid, .console-detail-grid { grid-template-columns: minmax(0,1fr) 325px; }
  .chart { height: 190px; }
}
@media (max-width: 1200px) {
  .content { padding-inline: 17px; }
  .topbar { padding-inline: 17px; }
  .console-overview-grid, .console-detail-grid { grid-template-columns: minmax(0,1fr) 260px; }
  .console-metrics .metric { padding: 11px; }
  .console-metrics .metric-head { font-size: 11px; }
  .console-metrics .metric-head .icon { display: none; }
  .console-metrics .metric-value { font-size: 21px; }
  .console-metrics .metric-foot { font-size: 11px; }
  .page-head { align-items: flex-start; }
  .page-head>.buttons { flex-wrap: wrap; justify-content: flex-end; }
  .filter-search { min-width: 190px; }
  .integration-grid { grid-template-columns: minmax(0,1.3fr) minmax(270px,1fr); }
  .workspace-split { grid-template-columns: minmax(0,1.3fr) minmax(270px,1fr); }
  .wallet-layout { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .console-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .console-overview-grid, .console-detail-grid { grid-template-columns: 1fr; }
  .console-status-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 22px; }
  .console-detail-grid .panel:last-child .panel-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
  .metrics:not(.console-metrics) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .integration-grid, .workspace-split { grid-template-columns: 1fr; }
  .grid-main { grid-template-columns: 1fr; }
  .page-head { flex-wrap: wrap; gap: 10px; }
  .page-head>.buttons { justify-content: flex-start; }
  .card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .integration-onboarding .btn { min-height: 44px; }
  .integration-onboarding .setup-checklist { padding-inline: 12px; }
  .integration-onboarding .setup-check { gap: 9px; }
  .integration-diagnostic-overview { grid-template-columns: 1fr; }
  .integration-diagnostics>summary { min-height: 48px; padding-inline: 12px; }
  .integration-use>a { min-height: 36px; margin-block: 0; }
  .shell { display: block; }
  .sidebar { position: static; width: auto; display: block; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-header { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; border: 0; }
  .sidebar-header>.brand { padding: 0; font-size: 17px; }
  .sidebar-header>.brand img { width: 24px; height: 24px; }
  .sidebar-header>.mobile-navigation-toggle { display: inline-flex; min-height: 44px; border-color: transparent; background: transparent; }
  .brand small { display: none; }
  .sidebar-nav, .sidebar-foot { display: none; }
  .navigation-open .sidebar-nav { display: block; padding: 0 10px 10px; }
  .navigation-open .sidebar-foot { display: block; padding: 7px 16px; }
  .nav-label { padding: 9px 9px 4px; font-size: 11px; }
  .nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px 6px; }
  .nav a { padding: 8px 9px; font-size: 13px; min-height: 44px; gap: 8px; }
  .nav a>.icon { width: 15px; height: 15px; }
  .topbar { min-height: 46px; height: auto; padding: 1px 13px; gap: 10px; }
  .top-actions { gap: 10px; }
  .top-help, .top-role { display: none; }
  .top-avatar { width: 44px; height: 44px; font-size: 12px; background: radial-gradient(circle,#edf1f8 14px,transparent 15px); }
  .crumb { gap: 7px; font-size: 11px; }
  .service-label, .demo-label { font-size: 10px; }
  .content { padding: 15px 13px 0; }
  .page-head { margin-bottom: 12px; }
  .page-head h1 { font-size: 19px; }
  .page-head p { font-size: 12px; }
  .page-head>.buttons { gap: 6px; }
  .btn, .btn.small { min-height: 40px; font-size: 12px; }
  .page-head .btn, .form-actions .btn, .payment-method-action.btn, .reauth-form .btn { min-height: 44px; }
  .icon-button { min-width: 44px; min-height: 44px; }
  .period-switch button, .tabs button { min-height: 36px; }
  .btn.link { padding-inline: 6px; }
  .metrics { gap: 8px; }
  .finance-summary.metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric { padding: 11px; }
  .metric-value { font-size: 22px; }
  .console-metrics .metric-value { font-size: 20px; }
  .metric-head { font-size: 12px; }
  .metric-foot { font-size: 11px; }
  .console-overview-grid, .console-detail-grid { gap: 11px; margin-bottom: 11px; }
  .chart { height: 175px; }
  .panel-head { padding: 11px 12px; }
  .panel-body { padding: 11px 12px; }
  .console-status-list { padding-inline: 12px; gap: 0 16px; }
  .console-status-row { font-size: 12px; }
  .console-substats { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 8px; }
  .console-substats>div { padding-inline: 12px; }
  .console-substats>div:nth-child(3) { border-right: 0; }
  .console-substats strong { display: block; margin: 3px 0 0; }
  .console-substats>a { grid-column: 1 / -1; justify-self: end; padding-right: 12px; }
  .console-detail-grid .panel:last-child .panel-body { display: block; }
  .filter-bar { padding: 10px; gap: 7px; }
  .filter-bar>.filter-search { min-width: 100%; }
  .filter-bar>select { flex: 1; max-width: none; }
  .date-range-bar { gap: 8px; }
  .date-range-caption { width: 100%; }
  .date-range-custom { max-width: 100%; font-size: 11px; }
  .date-range-presets button { min-height: 40px; }
  .filter-bar>.btn { flex: 1; }
  th, td { padding-inline: 11px; }
  .job-table { min-width: 680px; }
  .table-footer { padding: 10px 12px; flex-wrap: wrap; font-size: 11px; }
  .console-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .console-summary>div { border-bottom: 1px solid var(--line); padding: 12px; }
  .console-summary>div:nth-child(2n) { border-right: 0; }
  .console-summary strong { font-size: 20px; }
  .console-summary>div:nth-last-child(2):nth-child(odd), .console-summary>div:last-child { border-bottom: 0; }
  .insight-strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 0; }
  .insight-strip>div:nth-child(2) { border: 0; }
  .insight-strip strong { font-size: 17px; }
  .wallet-stats { gap: 8px; }
  .wallet-stats .metric { padding: 11px; }
  .wallet-stats .metric-value { font-size: 19px; margin-top: 14px; }
  .wallet-stats .metric-head .icon { display: none; }
  .toolbar .tabs { max-width: 100%; overflow-x: auto; }
  .catalog-toolbar .filter-search { width: 100%; flex-basis: 100%; max-width: none; }
  .catalog-toolbar>.buttons { width: 100%; }
  .catalog-toolbar select { flex: 1; }
  .capability-item { padding: 12px; }
  .finance-ledger td:last-child, .finance-ledger th:last-child { position: sticky; right: 0; z-index: 1; background: #fff; border-left: 1px solid var(--line); box-shadow: -4px 0 8px -6px #34405466; }
  .finance-ledger th:last-child { z-index: 2; background: #f9fafb; }
  .finance-ledger tr:hover>td:last-child { background: #fafbfd; }
  .field input, .field select, .field textarea, .search, .filter-bar input, .filter-bar select, .toolbar input, .toolbar select { font-size: 16px; min-height: 44px; }
  .field input[type=checkbox] { min-height: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .card { padding: 14px; }
  .modal-body { padding: 15px; }
  .modal-head { padding: 12px 15px; }
  .payment-detail { gap: 13px; }
  .payment-method-meta { grid-template-columns: 1fr; gap: 5px; }
  .payment-method-meta>div { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 7px; }
  .payment-method-meta dt { margin: 0; }
  .payment-qr { width: 125px; height: 125px; }
  .payment-checkout-main { padding: 11px; gap: 11px; }
  .payment-code-preview { width: 116px; flex-basis: 116px; }
  .payment-code-preview>img { height: 164px; }
  .payment-qr-viewer>summary { padding: 9px 11px; }
  .payment-section-head>.workspace-meta { font-size: 10px; }
  .auth-topbar { min-height: 60px; padding: 0 20px; }
  .auth-card { padding: 24px; border-radius: 10px; }
  .auth-main { align-items: flex-start; padding: 24px 16px; }
  .auth-card .field input { min-height: 46px; font-size: 16px; }
  .password-toggle { top: 5px; }
  .signup-code-row>.btn { min-height: 46px; }
  .prose { margin: 16px; padding: 22px; }
  .prose h1 { font-size: 22px; }
  .console-footer { font-size: 10px; gap: 10px; }
}
@media (max-width: 420px) {
  .auth-card { padding: 22px 19px; }
  .auth-role-switch { margin-bottom: 22px; }
  .auth-main { padding: 20px 12px; }
  .auth-topbar { padding: 0 18px; }
  .auth-onboarding ol { gap: 5px; }
  .auth-onboarding li { gap: 4px; font-size: 11px; }
  .auth-step { font-size: 11px; gap: 4px; }
  .auth-step>span { width: 19px; height: 19px; }
  .auth-footer { font-size: 10px; }

  .console-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .console-status-list { grid-template-columns: 1fr; }
  .composer-footer>.btn { width: 100%; }
  .payment-detail { flex-direction: column; align-items: stretch; }
  .payment-method-heading { flex-wrap: wrap; gap: 9px; }
  .payment-method-action { width: 100%; }
  .payment-method-meta { margin-left: 0; }
  .payment-detail>.payment-qr { align-self: center; width: 160px; height: 160px; }
  .payment-checkout-main { flex-direction: column; }
  .payment-code-preview { width: 135px; flex-basis: auto; align-self: center; }
  .payment-code-preview>img { height: 185px; }
  .payment-checkout-info { width: 100%; }
  .payment-amount-presets>button { padding-inline: 8px; }
  .wallet-stats { grid-template-columns: 1fr; }
  .wallet-stats .metric { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
  .wallet-stats .metric-value { grid-column: 2; grid-row: 1/3; margin: 0; align-self: center; }
  .wallet-stats .metric-foot { grid-column: 1; }
  .console-footer { align-items: flex-start; }
  .console-footer>span:last-child { text-align: right; }
}
/* Capability library and personal account. */
.guide-page, .account-page { max-width: 1380px; margin: 0 auto; }
.guide-page>.page-head, .account-page>.page-head { margin: 4px 0 22px; }
.guide-page .page-head h1, .account-page .page-head h1 { font-size: 25px; letter-spacing: -.6px; }
.guide-page .btn, .account-page .btn { min-height: 40px; padding: 9px 14px; border-radius: 8px; font-size: 13px; }
.guide-layout { display: grid; grid-template-columns: 212px minmax(0,1fr); gap: 22px; align-items: start; }
.guide-sidebar { position: sticky; top: 20px; padding: 16px 8px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; min-width: 0; }
.guide-sidebar>h2 { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 14px; font-size: 13px; }
.guide-sidebar>h2>span { color: #8390a5; font-size: 12px; font-weight: 400; }
.guide-category-panel>summary { list-style: none; align-items: center; gap: 9px; padding: 14px; cursor: pointer; font-weight: 500; }
.guide-category-panel>summary::-webkit-details-marker { display: none; }
.guide-category-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.guide-category-toggle>.icon { width: 14px; height: 14px; }
.guide-category-panel[open] .guide-category-toggle>.icon { transform: rotate(45deg); }
.guide-categories { display: flex; flex-direction: column; gap: 3px; padding: 2px; max-height: calc(100vh - 190px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #dbe1ea transparent; }
.guide-category { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 39px; border: 0; border-radius: 7px; padding: 9px 10px; background: transparent; color: #58657a; text-align: left; font-size: 12px; line-height: 1.5; }
.guide-category>.icon { width: 15px; height: 15px; color: #8895a9; }
.guide-category>span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.guide-category small { color: #7d8a9d; font-size: 11px; font-variant-numeric: tabular-nums; }
.guide-category:hover { background: #f5f7fa; color: #244c91; }
.guide-category[aria-current="page"] { background: #eaf1ff; color: #225ccd; font-weight: 600; }
.guide-category[aria-current="page"] :is(.icon,small) { color: #225ccd; }
.guide-results { min-width: 0; }
.guide-filter { padding: 20px; border: 1px solid #dce3ee; border-radius: 12px; background: #fff; }
.guide-search-row { display: flex; align-items: stretch; gap: 10px; }
.guide-search { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0 14px; border: 1px solid #d9e1ed; border-radius: 8px; background: #f8fafc; color: #7c8ba2; }
.guide-search:focus-within { background: #fff; border-color: #6b96ef; box-shadow: 0 0 0 3px #2563eb0d; }
.guide-search>.icon { width: 18px; height: 18px; }
.guide-search input { width: 100%; min-width: 0; min-height: 45px; padding: 10px 0; border: 0; background: transparent; color: #26354b; font-size: 14px; outline: none; }
.guide-search input::placeholder { font-size: 13px; color: #8691a3; }
.guide-search-row>.btn { min-height: 46px; padding-inline: 18px; gap: 12px; }
.guide-filter-options { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.guide-select { display: flex; align-items: center; flex: 1 1 175px; min-width: 0; gap: 8px; }
.guide-select>span { font-size: 12px; color: #6b778c; white-space: nowrap; }
.guide-select select { width: 0; flex: 1; min-width: 0; min-height: 36px; padding: 7px 24px 7px 9px; border: 1px solid #e1e6ee; border-radius: 6px; background: #fff; color: #40516b; font-size: 12px; outline: none; text-overflow: ellipsis; }
.guide-select select:focus-visible { border-color: #6b96ef; box-shadow: 0 0 0 2px #2563eb10; }
.guide-filter-options>.checkbox { align-items: center; gap: 7px; margin: 0; min-height: 36px; color: #53627a; }
.guide-filter-options .checkbox input { width: 15px; height: 15px; min-height: 0; padding: 0; margin: 0; flex-shrink: 0; }
.guide-reset { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 6px 0; border: 0; background: transparent; color: #66758c; font-size: 12px; }
.guide-reset:hover { color: #2563eb; }
.guide-reset>.icon { width: 13px; height: 13px; }
.guide-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 63px; padding: 12px 2px; }
.guide-results-head h2 { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.guide-results-head h2>span { padding: 2px 7px; border-radius: 5px; background: #e9edf3; color: #64738b; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.guide-results-head>span { color: #8490a2; font-size: 12px; }
.guide-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.guide-ability-card { display: flex; flex-direction: column; min-width: 0; padding: 19px 20px 0; border: 1px solid #e2e7ef; border-radius: 11px; background: #fff; box-shadow: 0 2px 4px #253c6003; transition: border-color .15s, box-shadow .15s; }
.guide-ability-card:hover, .guide-ability-card:focus-within { border-color: #b9ccee; box-shadow: 0 3px 12px #253c6009; }
.guide-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guide-card-category { display: inline-flex; align-items: center; gap: 8px; color: #64738a; font-size: 12px; min-width: 0; }
.guide-card-category>.icon { box-sizing: content-box; padding: 7px; border-radius: 8px; background: #eff4fc; color: #6284bd; width: 16px; height: 16px; }
.guide-availability { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; border: 1px solid #eceff4; border-radius: 5px; padding: 3px 6px; color: #68778d; font-size: 11px; line-height: 1.4; }
.guide-availability.available { color: #16805c; background: #f0faf5; border-color: #dcefe5; }
.guide-ability-card>h3 { font-size: 16px; line-height: 1.5; margin: 13px 0 8px; color: #25334b; overflow-wrap: anywhere; }
.guide-description { color: #6b778b; font-size: 13px; line-height: 1.8; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; margin-bottom: 17px; min-height: 46.8px; }
.guide-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; border-top: 1px solid #eff1f5; min-height: 49px; }
.guide-card-bottom>span { color: #6d7b90; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.guide-detail-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px; border: 0; background: transparent; color: #3569bd; font-size: 12px; font-weight: 500; padding: 10px 0 10px 5px; min-height: 44px; }
.guide-detail-button:hover { color: #174ca3; }
.guide-detail-button>.icon { width: 14px; height: 14px; }
.guide-card-grid>.empty { grid-column: 1/-1; padding: 64px 20px; border: 1px dashed #d6deeb; border-radius: 12px; background: #fff; }
.guide-results>.table-footer { margin-top: 20px; padding: 15px 0; }
.guide-results>.table-footer .btn { min-height: 36px; font-size: 12px; padding: 7px 12px; }
.guide-scene-note { padding: 14px 18px; border: 1px solid #dde6f5; background: #f0f5fd; border-radius: 9px; margin-bottom: 14px; color: #4f6690; }
.guide-scene-note>summary { cursor: pointer; font-size: 13px; overflow-wrap: anywhere; }
.guide-scene-note>summary>.icon { margin-right: 6px; }
.guide-detail-labels { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guide-detail-description { margin: 20px 0; color: #53627a; font-size: 14px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.guide-detail-scene { background: #f5f8fc; border: 1px solid #e6ecf5; border-radius: 9px; padding: 17px; }
.guide-detail-scene>h3 { color: #314768; font-size: 14px; margin: 0 0 12px; }
:is(.guide-detail-scene,.guide-scene-note) dl { display: grid; gap: 14px; margin: 14px 0 0; }
:is(.guide-detail-scene,.guide-scene-note) dt { color: #607695; font-size: 12px; margin-bottom: 4px; }
:is(.guide-detail-scene,.guide-scene-note) dd { color: #485972; font-size: 13px; line-height: 1.8; margin: 0; overflow-wrap: anywhere; }
.guide-detail-reference { display: flex; justify-content: space-between; gap: 10px; color: #7d899b; font-size: 12px; margin: 18px 0 0; }
.guide-detail>.btn { min-height: 42px; border-radius: 7px; margin-top: 22px; }
.account-page { max-width: 1180px; }
.account-page .page-head p { color: #7a879a; font-size: 13px; margin-top: 7px; }
.account-layout { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(0,1.15fr); gap: 20px; }
.account-profile, .account-security { min-width: 0; display: flex; flex-direction: column; border: 1px solid #dfe5ee; border-radius: 12px; background: #fff; }
.account-profile-heading { display: flex; align-items: center; gap: 17px; padding: 24px 26px; background: #f7faff; border-bottom: 1px solid #e9eff8; border-radius: 12px 12px 0 0; }
.account-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; height: 64px; border: 1px solid #d9e6ff; border-radius: 20px; background: #e8f0ff; color: #3c6bba; font-size: 27px; font-weight: 500; box-shadow: inset 0 0 0 4px #f1f6ff; }
.account-profile-heading>div { min-width: 0; }
.account-section-label { color: #6d7b90; font-size: 12px; }
.account-profile-heading h2 { font-size: 22px; color: #273851; margin: 2px 0 4px; overflow-wrap: anywhere; }
.account-role { color: #637da6; font-size: 12px; }
.account-facts { margin: 0; padding: 5px 26px; }
.account-facts>div { padding: 15px 0; }
.account-facts>div+div { border-top: 1px solid #f0f2f6; }
.account-facts dt { color: #6d7b90; font-size: 12px; margin-bottom: 7px; }
.account-facts dd { margin: 0; color: #40516b; font-size: 14px; overflow-wrap: anywhere; }
.account-verified { display: flex; align-items: center; gap: 4px; color: #248160; font-size: 11px; margin-top: 6px; }
.account-verified>.icon { width: 13px; height: 13px; }
.account-verified.pending { color: #9d7028; }
.account-id { display: flex; align-items: center; gap: 7px; }
.account-id>.mono { font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.account-id>.icon-button { flex-shrink: 0; min-width: 34px; min-height: 34px; margin-left: auto; border: 1px solid #e7ebf2; border-radius: 6px; }
.account-profile-footer { padding: 13px 26px 23px; margin-top: auto; }
.account-profile-footer>.btn { width: 100%; color: #6d7b90; background: #fafbfc; }
.account-security { padding: 26px; }
.account-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.account-section-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border: 1px solid #e5edf8; border-radius: 11px; background: #f3f7fd; color: #6388c1; }
.account-section-icon>.icon { width: 20px; height: 20px; }
.account-section-head h2 { font-size: 16px; color: #2e405d; }
.account-section-head p { font-size: 12px; color: #6d7b90; margin-top: 3px; }
.account-security>form { display: flex; flex: 1; flex-direction: column; }
.account-security .field { margin-bottom: 21px; gap: 9px; }
.account-security .field label { font-size: 13px; color: #52627c; }
.account-security .field input { min-height: 45px; border-radius: 8px; padding: 11px 13px; font-size: 14px; border-color: #dce3ed; }
.account-security .field input::placeholder { color: #9aa4b4; font-size: 13px; }
.account-security .field small { color: #6d7b90; font-size: 12px; }
.account-password-footer { padding-top: 22px; margin-top: auto; border-top: 1px solid #edf0f5; }
.account-password-footer>p { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: #7a8ba4; line-height: 1.7; margin-bottom: 16px; }
.account-password-footer>p>.icon { width: 14px; height: 14px; margin-top: 3px; }
.account-password-footer>.btn { gap: 13px; }
.account-connections { grid-column: 1/-1; padding: 22px 26px 24px; border: 1px solid #e0e6ee; border-radius: 12px; background: #fff; }
.account-connections-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.account-connections-heading h2 { font-size: 14px; color: #3c4d69; }
.account-connections-heading p { color: #6d7b90; font-size: 12px; }
.account-connection-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.account-connection-link { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid #e5eaf2; border-radius: 9px; transition: border-color .15s, background .15s; min-width: 0; }
.account-connection-link:hover { border-color: #b9ccee; background: #f9fbff; }
.account-connection-link>span:nth-child(2) { min-width: 0; }
.account-connection-link strong { display: block; color: #435777; font-size: 14px; font-weight: 500; }
.account-connection-link small { display: block; color: #6d7b90; font-size: 12px; margin-top: 4px; overflow-wrap: anywhere; }
.account-connection-link>.icon { margin-left: auto; color: #7c94b8; }
@media (min-width: 1101px) {
  .guide-category-panel>summary { display: none; }
  .guide-category-panel:not([open])>.guide-categories { display: flex; }
  .guide-category-panel::details-content { content-visibility: visible; }
}
@media (max-width: 1100px) {
  .guide-layout { grid-template-columns: 1fr; gap: 16px; }
  .guide-sidebar { position: static; padding: 0; }
  .guide-sidebar>h2 { display: none; }
  .guide-category-panel>summary { display: flex; }
  .guide-category-panel[open]>summary { border-bottom: 1px solid #e9edf4; }
  .guide-categories { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-height: 260px; padding: 8px; }
  .guide-category { min-height: 44px; }
  .guide-filter-options { gap: 10px 16px; }
  .guide-select { flex-basis: calc(50% - 16px); }
  .guide-filter-options>.guide-reset { margin-left: auto; }
  .account-layout { grid-template-columns: minmax(250px,.85fr) minmax(0,1.15fr); gap: 16px; }
  .account-profile-heading, .account-security, .account-connections { padding: 22px; }
  .account-facts { padding-inline: 22px; }
  .account-profile-footer { padding-inline: 22px; }
  .account-connection-links { gap: 12px; }
  .account-connection-link { padding: 12px; gap: 10px; }
}
@media (max-width: 900px) {
  .guide-card-grid { grid-template-columns: 1fr; }
  .guide-categories { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .account-layout { grid-template-columns: 1fr; }
  .account-connection-links { grid-template-columns: 1fr; }
  .account-security .field { margin-bottom: 20px; }
}
@media (max-width: 720px) {
  .guide-page>.page-head, .account-page>.page-head { margin: 3px 0 18px; }
  .guide-page .page-head h1, .account-page .page-head h1 { font-size: 23px; }
  .guide-page .page-head { flex-direction: row; align-items: center; }
  .guide-page .page-head>.buttons { width: auto; }
  .guide-page .page-head .btn { padding: 8px 10px; font-size: 12px; min-height: 40px; }
  .guide-layout { gap: 12px; }
  .guide-category { padding: 8px; gap: 6px; }
  .guide-category small { font-size: 10px; }
  .guide-filter { padding: 14px; }
  .guide-search-row { flex-wrap: wrap; gap: 10px; }
  .guide-search { flex-basis: 100%; }
  .guide-search input, .guide-select select { font-size: 16px; min-height: 44px; }
  .guide-search input::placeholder { font-size: 12px; }
  .guide-search-row>.btn { width: 100%; min-height: 42px; }
  .guide-filter-options { gap: 10px; margin-top: 14px; }
  .guide-select { display: block; flex-basis: calc(50% - 5px); }
  .guide-select>span { display: block; margin-bottom: 6px; }
  .guide-select select { width: 100%; padding: 7px; }
  .guide-filter-options>.checkbox { min-height: 44px; }
  .guide-filter-options>.guide-reset { min-height: 44px; padding-inline: 4px; }
  .guide-results-head { min-height: 58px; gap: 8px; }
  .guide-results-head>span { display: none; }
  .guide-ability-card { padding: 16px 16px 0; }
  .guide-ability-card>h3 { font-size: 16px; }
  .guide-card-grid { gap: 12px; }
  .guide-description { margin-bottom: 14px; }
  .guide-card-bottom { gap: 8px; }
  .guide-results>.table-footer { padding-top: 14px; margin-top: 16px; }
  .guide-results>.table-footer .buttons { justify-content: space-between; width: 100%; }
  .guide-results>.table-footer .btn { min-height: 44px; }
  .account-page .page-head p { font-size: 12px; }
  .account-profile-heading, .account-security, .account-connections { padding: 20px; }
  .account-profile-heading { gap: 15px; }
  .account-profile-heading h2 { font-size: 21px; }
  .account-facts { padding-inline: 20px; }
  .account-profile-footer { padding: 10px 20px 20px; }
  .account-id>.icon-button { min-width: 44px; min-height: 44px; }
  .account-security .field input { font-size: 16px; min-height: 46px; }
  .account-password-footer>.btn { width: 100%; min-height: 44px; }
  .account-connections-heading { display: block; }
  .account-connections-heading p { margin-top: 3px; }
  .account-connection-link { padding: 14px 10px; }
  .account-connection-link .account-section-icon { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Administrator collection channels, orders and payment instructions. */
.payments-admin-page { max-width: 1380px; margin: 0 auto; min-width: 0; }
.payments-admin-page>.page-head { margin: 4px 0 26px; }
.payments-admin-page>.page-head h1 { font-size: 25px; letter-spacing: -.6px; }
.payments-admin-page>.page-head p { font-size: 13px; color: #748198; margin-top: 6px; }
.payment-section-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: -5px 0 24px; }
.payment-section-nav>a { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 11px 14px; border: 1px solid #e0e7f2; border-radius: 8px; background: #fff; color: #61799d; font-size: 12px; }
.payment-section-nav>a:hover { border-color: #b8ccec; background: #f8fbff; color: #3265b6; }
.payment-section-nav .icon { width: 15px; height: 15px; }
.payments-admin-page [id$="-title"] { scroll-margin-top: 20px; }
.payments-admin-page .btn { border-radius: 7px; min-height: 38px; font-size: 12px; padding: 8px 12px; gap: 7px; }
.payments-admin-page>section+section { margin-top: 26px; }
.payment-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; min-width: 0; }
.payment-section-heading>div { min-width: 0; }
.payment-section-heading h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 16px; color: #2e405b; }
.payment-section-heading p { color: #75829a; font-size: 12px; line-height: 1.7; margin-top: 5px; }
.payment-section-count, .payment-heading-badge { color: #63758f; background: #eaf0f8; font-size: 11px; padding: 4px 9px; border-radius: 6px; white-space: nowrap; font-weight: 400; }
.payment-section-heading>.buttons { flex-shrink: 0; }
.payment-channel-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; }
.payment-channel-card { min-width: 0; border: 1px solid #dfe6f0; border-radius: 12px; background: #fff; padding: 20px; }
.payment-channel-heading, .payment-method-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.payment-channel-heading>.inline-payment, .payment-method-card-head>.inline-payment { min-width: 0; gap: 12px; }
.payment-channel-heading .inline-payment>div, .payment-method-card-head .inline-payment>div { min-width: 0; }
.payment-channel-heading .payment-symbol, .payment-method-card-head .payment-symbol { width: 42px; height: 42px; border-radius: 12px; font-size: 19px; }
.payment-channel-heading h3, .payment-method-card-head h3 { color: #2d405e; font-size: 15px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.payment-channel-heading p, .payment-method-card-head p { color: #76859c; font-size: 12px; margin-top: 3px; }
.payment-state { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border-radius: 6px; padding: 5px 8px; color: #6b7990; background: #f1f4f8; border: 1px solid #e7ecf2; font-size: 11px; line-height: 1.4; white-space: nowrap; }
.payment-state>span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.payment-state.paid { color: #20865d; background: #eff9f3; border-color: #dbeee3; }
.payment-state.pending, .payment-state.creating { color: #3e6dac; background: #eff5ff; border-color: #dce8fc; }
.payment-state.review, .payment-state.unknown { color: #a06c22; background: #fff8eb; border-color: #f3e5c8; }
.payment-channel-status { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: #6b7c96; font-size: 12px; }
.payment-channel-status>.icon { width: 15px; height: 15px; color: #8d9db5; }
.payment-channel-status strong { font-weight: 600; color: #8a683b; }
.payment-config-details { margin-top: 16px; border-top: 1px solid #edf1f6; padding-top: 12px; }
.payment-config-details>summary, .payment-method-instructions>summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; font-size: 12px; color: #536e98; min-height: 24px; }
.payment-config-details>summary::-webkit-details-marker, .payment-method-instructions>summary::-webkit-details-marker { display: none; }
.payment-config-details>summary>.icon, .payment-method-instructions>summary>.icon { width: 14px; height: 14px; }
.payment-config-details[open]>summary>.icon, .payment-method-instructions[open]>summary>.icon { transform: rotate(45deg); }
.payment-config-details ul { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 13px 0 0; list-style: none; }
.payment-config-details li { max-width: 100%; padding: 5px 8px; color: #6e7c92; background: #f6f8fc; border: 1px solid #e9edf5; border-radius: 5px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.payment-admin-panel { border: 1px solid #dfe6f0; border-radius: 12px; background: #fff; overflow: hidden; min-width: 0; }
.payment-admin-panel>.payment-section-heading { margin: 0; padding: 21px 22px 17px; }
.payment-order-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 22px 18px; min-width: 0; }
.payment-order-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 4px; max-width: 100%; min-width: 0; border: 1px solid #e9edf4; border-radius: 8px; background: #f5f7fb; }
.payment-order-filter { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 15px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #66758d; font-size: 12px; white-space: nowrap; }
.payment-order-filter:hover { color: #285db7; background: #edf2fb; }
.payment-order-filter.primary { border-color: #dce6f9; background: #fff; color: #2563ce; box-shadow: 0 1px 3px #1f3e7010; font-weight: 600; }
.payment-page-size { font-size: 11px; color: #7d8ba1; }
#admin-payment-orders { min-width: 0; }
.admin-orders-table { width: 100%; min-width: 0; table-layout: fixed; }
.admin-orders-table .order-number-col { width: 22%; }
.admin-orders-table .order-customer-col { width: 26%; }
.admin-orders-table .order-channel-col { width: 14%; }
.admin-orders-table .order-amount-col { width: 14%; }
.admin-orders-table .order-state-col { width: 14%; }
.admin-orders-table .order-action-col { width: 10%; }
.admin-orders-table th { color: #7b899f; background: #f8fafc; font-size: 11px; padding: 12px 16px; border-top: 1px solid #eaf0f7; border-bottom: 1px solid #eaf0f7; }
.admin-orders-table td { padding: 17px 16px; min-width: 0; border-color: #edf1f6; }
.admin-orders-table :is(th,td):first-child { padding-left: 22px; }
.admin-orders-table :is(th,td):last-child { padding-right: 22px; text-align: right; }
.admin-orders-table tbody tr:hover { background: #fafcff; }
.admin-order-number>.mono { display: block; color: #4a607f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.admin-order-number>small { display: block; color: #7d8ba1; font-size: 11px; margin-top: 5px; }
.payment-order-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.payment-customer-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; color: #6b86ad; background: #edf2fa; font-size: 13px; }
.payment-order-person>div { min-width: 0; }
.payment-order-person strong, .payment-order-person>div>span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.payment-order-person strong { font-size: 12px; font-weight: 500; color: #3c506d; }
.payment-order-person>div>span { font-size: 11px; color: #75849b; margin-top: 4px; }
.payment-order-channel { display: flex; align-items: center; gap: 7px; color: #596e8e; font-size: 12px; white-space: nowrap; }
.payment-order-channel>.payment-symbol { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
.admin-order-amount>span { color: #2c4363; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-order-state>small { display: block; color: #9b783e; font-size: 10px; margin-top: 5px; }
.payment-order-open { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 0; border: 0; background: transparent; color: #3568ba; font-size: 12px; white-space: nowrap; }
.payment-order-open>.icon { width: 14px; height: 14px; }
.payment-order-open:hover { color: #19499a; }
.payments-admin-page .table-footer { padding: 14px 22px; flex-wrap: wrap; gap: 12px; border-top-color: #edf1f6; }
.payment-admin-empty { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; padding: 48px 20px; gap: 10px; text-align: center; }
.payment-admin-empty>.icon { box-sizing: content-box; width: 24px; height: 24px; padding: 15px; border-radius: 17px; color: #8da5c9; background: #f0f5fc; margin-bottom: 5px; }
.payment-admin-empty>strong { font-size: 14px; color: #526887; font-weight: 500; }
.payment-admin-empty>p { color: #7c8ba1; font-size: 12px; line-height: 1.8; }
.payment-admin-empty>.btn { margin-top: 5px; }
.payment-method-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.payment-method-card-grid>.payment-admin-empty { border: 1px dashed #d7e2f1; border-radius: 12px; background: #fff; }
.payment-method-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #dfe6f0; border-radius: 12px; padding: 20px; }
.payment-method-card-head { align-items: flex-start; }
.payment-method-card-head h3 { font-size: 14px; }
.payment-method-card-head .payment-symbol { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
.payment-method-card-head>.payment-state { font-size: 10px; padding: 4px 6px; margin-top: 3px; }
.payment-method-facts { display: grid; gap: 13px; margin: 22px 0 18px; }
.payment-method-facts dt { color: #78869b; font-size: 11px; margin-bottom: 5px; }
.payment-method-facts dd { color: #4f6381; font-size: 12px; line-height: 1.7; margin: 0; overflow-wrap: anywhere; }
.payment-method-account { display: flex; align-items: center; gap: 8px; }
.payment-method-account>.mono { min-width: 0; font-size: 12px; }
.payment-method-account>.icon-button { flex-shrink: 0; margin-left: auto; width: 32px; height: 32px; border: 1px solid #e4ebf5; border-radius: 6px; }
.payment-method-qr { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; text-align: left; padding: 10px; background: #f8faff; border: 1px solid #e7edf7; border-radius: 8px; }
.payment-method-qr:hover { border-color: #bfd0ed; background: #f1f6ff; }
.payment-method-qr>img { width: 38px; height: 48px; object-fit: contain; flex-shrink: 0; border: 1px solid #e2e9f4; background: #fff; border-radius: 3px; }
.payment-method-qr>span { flex: 1; min-width: 0; }
.payment-method-qr strong { display: block; color: #566f96; font-size: 12px; font-weight: 500; }
.payment-method-qr small { display: block; color: #7c8ca4; font-size: 11px; margin-top: 4px; }
.payment-method-qr>.icon { color: #7f97bb; width: 16px; height: 16px; }
.payment-method-no-qr { display: flex; align-items: center; gap: 9px; min-height: 60px; color: #8290a5; font-size: 12px; padding: 12px; background: #f8fafc; border: 1px dashed #e4eaf4; border-radius: 8px; }
.payment-method-instructions { margin: 13px 0 0; }
.payment-method-instructions>summary { color: #71819a; }
.payment-method-instructions>p { margin-top: 9px; color: #687b97; font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.payment-method-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; margin-top: auto; }
.payment-method-card-actions>.btn { flex: 1; background: #f9fbff; border-color: #e0e8f6; color: #56739e; }
.payment-remove { border: 0; background: none; color: #a1797e; font-size: 12px; padding: 9px 4px; min-height: 38px; }
.payment-remove:hover { color: #c23546; }
.payment-support-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 32px; padding: 6px 22px 24px; }
.payment-support-form { min-width: 0; }
.payment-support-form .field label, #payment-method-form .field label { color: #526783; font-size: 13px; }
.payment-support-form .field input, .payment-support-form .field textarea, #payment-method-form .field :is(input:not([type=checkbox]),select) { border-color: #dbe3ef; border-radius: 7px; padding: 10px 12px; min-height: 42px; font-size: 13px; }
.payment-support-form .field textarea { min-height: 126px; }
.payment-support-form>.btn { min-width: 108px; }
.payment-support-preview { min-width: 0; background: #f4f7fc; border: 1px solid #e8edf6; border-radius: 10px; padding: 18px; align-self: start; }
.payment-preview-label { display: flex; align-items: center; gap: 7px; color: #7388a8; font-size: 12px; margin-bottom: 14px; }
.payment-preview-label>.icon { width: 14px; height: 14px; }
.payment-preview-card { background: #fff; border: 1px solid #e4ebf7; border-radius: 8px; padding: 20px; min-width: 0; }
.payment-preview-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: #eff5ff; color: #6287c1; margin-bottom: 12px; }
.payment-preview-card h3 { font-size: 14px; color: #40597c; }
.payment-preview-contact { color: #5879aa; font-size: 12px; overflow-wrap: anywhere; margin-top: 7px; white-space: pre-wrap; }
.payment-preview-instructions { border-top: 1px solid #edf1f8; padding-top: 14px; margin-top: 16px; }
.payment-preview-instructions h4 { font-size: 12px; color: #5e728f; font-weight: 500; margin: 0 0 6px; }
.payment-preview-instructions p { color: #76859b; font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; }
.payment-preview-note { color: #7c8ba1; font-size: 11px; line-height: 1.7; margin-top: 12px; }
#payment-method-form .form-actions>.btn { min-height: 40px; border-radius: 7px; padding-inline: 14px; }
#payment-method-form input[type=file]::file-selector-button { border: 0; border-radius: 5px; color: #4c6e9e; background: #edf3fd; padding: 7px 10px; margin-right: 10px; cursor: pointer; }
.payment-detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #f4f8ff; border: 1px solid #e0eafa; border-radius: 9px; padding: 20px; }
.payment-detail-hero>div>span { display: block; color: #6c819f; font-size: 12px; }
.payment-detail-hero strong { display: block; color: #2e4a73; font-size: 30px; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }
.payment-detail-facts { display: grid; gap: 17px; margin: 22px 0; }
.payment-detail-facts dt { font-size: 11px; color: #7788a1; margin-bottom: 5px; }
.payment-detail-facts dd { margin: 0; color: #4c6384; font-size: 12px; overflow-wrap: anywhere; }
.payment-detail-facts dd>strong { display: block; font-size: 13px; color: #3b5275; font-weight: 500; margin-bottom: 4px; }
.payment-detail-id { display: flex; align-items: center; gap: 9px; }
.payment-detail-id>code { min-width: 0; }
.payment-detail-id>.icon-button { margin-left: auto; flex-shrink: 0; min-width: 34px; min-height: 34px; border: 1px solid #e4eaf5; border-radius: 6px; }
.payment-order-timeline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; padding: 20px 0; margin: 0; list-style: none; border-top: 1px solid #edf1f7; border-bottom: 1px solid #edf1f7; }
.payment-order-timeline>li { display: flex; flex-direction: column; align-items: flex-start; position: relative; min-width: 0; padding-right: 10px; }
.payment-order-timeline>li:not(:last-child)::after { content: ''; position: absolute; top: 4px; left: 16px; right: 9px; height: 1px; background: #e4eaf4; }
.payment-order-timeline>li>span { width: 9px; height: 9px; border: 2px solid #cbd6e7; border-radius: 50%; background: #fff; margin-bottom: 10px; }
.payment-order-timeline>li.complete>span { border-color: #6d95d2; background: #6d95d2; }
.payment-order-timeline>li.paid>span { background: #37a477; border-color: #37a477; }
.payment-order-timeline strong { color: #607796; font-size: 12px; font-weight: 500; }
.payment-order-timeline time { margin-top: 4px; color: #7b8da5; font-size: 11px; overflow-wrap: anywhere; }
.payment-detail-error { display: flex; gap: 10px; margin-top: 18px; padding: 13px; border: 1px solid #f1e4cb; border-radius: 7px; background: #fffaf0; color: #a27e3e; }
.payment-detail-error>div { min-width: 0; }
.payment-detail-error strong { font-size: 12px; font-weight: 500; }
.payment-detail-error code { display: block; margin-top: 5px; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.payment-detail-footer { margin-top: 20px; }
.payment-detail-footer p { font-size: 12px; color: #778aa6; line-height: 1.7; margin-bottom: 14px; }
.payment-detail-footer>.btn { min-height: 40px; border-radius: 7px; padding: 9px 14px; }
@media (max-width: 1250px) {
  .payment-method-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1100px) {
  .admin-orders-table, .admin-orders-table tbody { display: block; }
  .admin-orders-table colgroup { display: none; }
  .admin-orders-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .admin-orders-table tbody { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 0 18px 18px; }
  .admin-orders-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px 12px; border: 1px solid #e3eaf4; border-radius: 9px; padding: 16px; min-width: 0; }
  .admin-orders-table td, .admin-orders-table :is(th,td):first-child, .admin-orders-table :is(th,td):last-child { display: block; padding: 0; border: 0; }
  .admin-order-number { grid-column: 1; grid-row: 1; }
  .admin-order-state { grid-column: 2; grid-row: 1; text-align: right; }
  .admin-order-customer { grid-column: 1/-1; grid-row: 2; }
  .admin-order-channel { grid-column: 1; grid-row: 3; align-self: center; }
  .admin-order-amount { grid-column: 2; grid-row: 3; text-align: right; }
  .admin-order-amount>span { font-size: 17px; }
  .admin-orders-table td.admin-order-action { grid-column: 1/-1; grid-row: 4; border-top: 1px solid #edf1f7; padding-top: 5px; margin-top: -3px; }
  .payment-order-open { min-height: 36px; }
  .payment-support-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; }
}
@media (max-width: 850px) {
  .payment-channel-grid, .payment-method-card-grid, .payment-support-layout { grid-template-columns: 1fr; }
  .admin-orders-table tbody { grid-template-columns: 1fr; }
  .payment-support-preview { margin-top: 4px; }
  .payment-section-heading { flex-wrap: wrap; }
  .payment-section-heading>.buttons { flex-shrink: 1; }
  .payment-order-toolbar { align-items: flex-start; }
}
@media (max-width: 720px) {
  .payments-admin-page>.page-head { margin: 3px 0 22px; }
  .payment-section-nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: -4px; }
  .payment-section-nav>a { padding: 10px; gap: 7px; }
  .payments-admin-page>.page-head h1 { font-size: 23px; }
  .payments-admin-page>.page-head p { font-size: 12px; }
  .payments-admin-page>.page-head>.buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .payments-admin-page>.page-head .btn { min-height: 42px; }
  .payment-section-heading { gap: 12px; margin-bottom: 13px; }
  .payment-section-heading h2 { font-size: 15px; gap: 8px; }
  .payment-section-heading p { font-size: 12px; }
  .payment-section-count { font-size: 10px; padding: 4px 7px; }
  .payment-channel-grid { gap: 12px; }
  .payment-channel-card, .payment-method-card { padding: 17px; }
  .payment-channel-heading { gap: 10px; }
  .payment-channel-heading .payment-symbol { width: 36px; height: 36px; border-radius: 10px; font-size: 17px; }
  .payment-channel-heading h3 { font-size: 14px; }
  .payment-channel-heading p { font-size: 11px; }
  .payment-config-details>summary, .payment-method-instructions>summary { min-height: 36px; }
  .payment-admin-panel>.payment-section-heading { padding: 18px 15px 14px; }
  .payment-order-toolbar { padding: 0 14px 15px; gap: 10px; }
  .payment-order-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; gap: 5px; padding: 5px; }
  .payment-order-filter { min-height: 40px; padding: 7px 8px; }
  .payment-page-size { display: none; }
  .admin-orders-table tbody { padding: 0 14px 14px; gap: 12px; }
  .admin-orders-table tr { padding: 14px; gap: 16px 10px; }
  .payment-order-open { min-height: 44px; }
  .payments-admin-page .table-footer { padding: 12px 14px; }
  .payments-admin-page .table-footer>.buttons { width: 100%; justify-content: space-between; }
  .payments-admin-page .table-footer .btn { min-height: 42px; }
  .payment-methods-section>.payment-section-heading>.buttons { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .payment-methods-section>.payment-section-heading .btn, .payment-method-card-actions .btn, .payment-remove { min-height: 42px; }
  .payment-method-account>.icon-button { width: 42px; height: 42px; }
  .payment-support-layout { padding: 0 15px 18px; gap: 20px; }
  .payment-support-form .field input, .payment-support-form .field textarea, #payment-method-form .field :is(input:not([type=checkbox]),select) { font-size: 16px; min-height: 44px; }
  .payment-support-form>.btn { width: 100%; min-height: 44px; }
  .payment-support-preview { padding: 14px; }
  .payment-preview-card { padding: 16px; }
  .payment-detail-hero { padding: 16px; }
  .payment-detail-hero strong { font-size: 27px; }
  .payment-detail-id>.icon-button { min-width: 44px; min-height: 44px; }
  .payment-detail-footer>.btn { width: 100%; min-height: 44px; }
}

/* System settings: status overview, focused settings and readable history. */
.system-settings-page { max-width: 1380px; margin: 0 auto; color: #334764; }
.system-settings-page>.page-head { margin: 6px 0 23px; }
.system-settings-page>.page-head h1 { font-size: 25px; color: #293c59; letter-spacing: -.5px; }
.system-settings-page>.page-head p { font-size: 13px; color: #738198; margin-top: 6px; }
.system-settings-page .btn { min-height: 38px; padding: 8px 13px; border-radius: 7px; }
.system-settings-page :is(h2,h3) { color: #354b6b; }
.system-settings-page h2 { scroll-margin-top: 22px; }
.settings-overview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 23px; }
.settings-overview-card { min-width: 0; background: #fff; border: 1px solid #e0e7f1; border-radius: 11px; padding: 17px 19px; }
.settings-overview-card>div { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #6c7e98; font-size: 12px; }
.settings-overview-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: #f0f3f8; color: #7c8da7; }
.settings-overview-icon.good { color: #3c9b7b; background: #edf8f3; }
.settings-overview-icon.blue { color: #5a87cc; background: #eff5ff; }
.settings-overview-icon.violet { color: #8c78c3; background: #f4f1fb; }
.settings-overview-icon.amber { color: #ac8544; background: #fff7e9; }
.settings-overview-card>strong { display: block; font-size: 23px; font-weight: 600; color: #334b6d; margin: 3px 0 9px; letter-spacing: -.4px; }
.settings-overview-card>p { display: flex; align-items: center; gap: 6px; color: #7c8ba0; font-size: 11px; line-height: 1.7; }
.settings-overview-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #94a2b8; }
.settings-overview-dot.good { background: #4ca887; }
.settings-overview-dot.blue { background: #7b9ed3; }
.settings-overview-dot.violet { background: #a293cb; }
.settings-overview-dot.amber { background: #c69b56; }
.settings-section-nav { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 15px; margin-bottom: 21px; border-bottom: 1px solid #e0e7f0; }
.settings-section-nav>a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 14px; border-radius: 7px; color: #677c9a; font-size: 12px; }
.settings-section-nav>a>.icon { width: 14px; height: 14px; color: #8499b7; }
.settings-section-nav>a:hover { background: #eaf1fc; color: #3569b9; }
.settings-main-grid { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,1fr); gap: 20px; margin-bottom: 20px; }
.settings-card { min-width: 0; border: 1px solid #dfe6f0; border-radius: 12px; background: #fff; padding: 22px; }
.system-settings-page>.settings-card { margin-top: 20px; }
.settings-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.settings-section-label { display: flex; align-items: center; gap: 11px; min-width: 0; }
.settings-section-label>div { min-width: 0; }
.settings-section-icon { display: grid; place-items: center; width: 37px; height: 37px; flex-shrink: 0; color: #6488be; background: #f0f5fd; border-radius: 10px; }
.settings-section-icon>.icon { width: 18px; height: 18px; }
.settings-section-label h2 { font-size: 16px; font-weight: 600; }
.settings-section-label p { font-size: 12px; color: #7b8aa1; line-height: 1.7; margin-top: 3px; }
.settings-source-label { flex-shrink: 0; font-size: 11px; color: #8593a8; padding: 5px 8px; border: 1px solid #e7ecf3; border-radius: 5px; white-space: nowrap; }
.settings-state { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #7b8a9e; background: #f3f5f8; border: 1px solid #e8edf3; border-radius: 6px; padding: 4px 8px; font-size: 11px; white-space: nowrap; flex-shrink: 0; line-height: 1.6; }
.settings-state>span { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.settings-state.good { color: #298764; background: #f0f9f4; border-color: #dbefe4; }
.settings-state.blue { color: #4a78bc; background: #eff5ff; border-color: #deebfd; }
.settings-state.amber { color: #a07937; background: #fff8eb; border-color: #f0e4cc; }
.settings-rate-display { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid #eaf0f7; }
.settings-rate-display>div>span { color: #7a8ba4; font-size: 12px; }
.settings-rate-display>div>div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.settings-rate-base { color: #6982a7; font-size: 13px; white-space: nowrap; }
.settings-rate-base>span { padding-left: 6px; color: #a0adc0; }
.settings-rate-display strong { font-size: 31px; font-weight: 600; color: #2d5287; letter-spacing: -.6px; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.settings-rate-unit { color: #6681a7; font-size: 12px; }
.settings-price-facts { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 12px; padding: 20px 0; }
.settings-price-facts>div>span { display: block; color: #7c8ba0; font-size: 11px; margin-bottom: 7px; }
.settings-price-facts strong { color: #486183; font-size: 18px; font-weight: 550; font-variant-numeric: tabular-nums; }
.settings-price-facts strong small { color: #8492a7; font-size: 11px; font-weight: 400; margin-left: 3px; }
.settings-rate-form { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 10px; align-items: end; padding-top: 5px; }
.settings-rate-form .field { margin: 0; }
.system-settings-page .field label { font-size: 12px; color: #59708f; }
.system-settings-page .field :is(input,textarea) { border-color: #dce4f0; padding: 10px 12px; min-height: 42px; border-radius: 7px; font-size: 13px; }
.settings-rate-input { position: relative; }
.settings-rate-form .settings-rate-input>input { padding-right: 58px; }
.settings-rate-input>span { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: #8596af; font-size: 11px; pointer-events: none; }
.settings-rate-form>.btn { min-height: 42px; }
.settings-rate-form>.form-error { grid-column: 1/-1; }
.settings-form-note { grid-column: 1/-1; color: #8090a7; font-size: 11px; margin-top: 9px; line-height: 1.7; }
.settings-price-example { margin-top: 22px; background: #f4f8ff; border: 1px solid #e2ebfa; border-radius: 9px; padding: 14px 16px; }
.settings-example-label { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; color: #8b9bb3; font-size: 10px; }
.settings-example-label>span:first-child { color: #6b87ad; font-size: 11px; display: inline-flex; align-items: center; gap: 5px; }
.settings-example-label .icon { width: 13px; height: 13px; }
.settings-formula { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.25fr); align-items: center; gap: 6px; margin-top: 14px; }
.settings-formula>div { min-width: 0; }
.settings-formula>span { color: #9cacc3; padding-top: 16px; font-size: 12px; }
.settings-formula small { display: block; color: #7c91af; font-size: 10px; }
.settings-formula strong { display: block; color: #54739f; font-size: 15px; font-weight: 500; margin-top: 4px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.settings-formula .settings-formula-result strong { color: #376fbe; font-weight: 600; }
.settings-facts { margin: 0; display: grid; gap: 13px; }
.settings-facts>div { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.settings-facts dt { color: #7c8ba1; font-size: 12px; }
.settings-facts dd { margin: 0; color: #597292; font-size: 12px; overflow-wrap: anywhere; text-align: right; }
.settings-fx-facts { padding: 7px 0 4px; }
.settings-inline-note { display: flex; align-items: center; gap: 7px; color: #6d86a8; font-size: 12px; padding: 11px 0; }
.settings-alert { display: flex; align-items: flex-start; gap: 8px; margin-top: 17px; padding: 12px; border: 1px solid #f2e5ce; background: #fffbf2; border-radius: 7px; color: #a17d45; font-size: 12px; line-height: 1.8; }
.settings-alert>.icon { margin-top: 2px; }
.settings-service { display: flex; flex-direction: column; }
.settings-service>.settings-section-head { margin-bottom: 12px; }
.settings-service-row { display: flex; align-items: center; gap: 11px; padding: 17px 0; }
.settings-service-row+.settings-service-row { border-top: 1px solid #edf1f7; }
.settings-service-icon { color: #92a6c1; display: grid; place-items: center; width: 27px; flex-shrink: 0; }
.settings-service-row>div { min-width: 0; flex: 1; }
.settings-service-row h3 { font-size: 12px; font-weight: 500; color: #4d6586; }
.settings-service-row p { color: #8493a8; font-size: 11px; margin-top: 4px; line-height: 1.7; }
.settings-service-row>strong { font-size: 12px; color: #5f789c; font-weight: 500; }
.settings-service-row>strong small { color: #8799b2; font-size: 11px; }
.settings-platform-url { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 14px; background: #f7f9fc; border: 1px solid #e8edf5; border-radius: 8px; }
.settings-platform-url>div { min-width: 0; flex: 1; }
.settings-platform-url span { font-size: 11px; color: #8a99af; }
.settings-platform-url code { display: block; margin-top: 5px; color: #607b9f; font-size: 12px; overflow-wrap: anywhere; }
.settings-platform-url>.icon-button { flex-shrink: 0; border: 1px solid #dfe7f2; border-radius: 6px; min-width: 34px; min-height: 34px; color: #7c96bb; background: #fff; }
.settings-card-link { display: flex; align-items: center; justify-content: space-between; gap: 9px; font-size: 12px; color: #6a85ab; padding: 17px 0 0; }
.settings-card-link>.icon { width: 14px; height: 14px; }
.settings-mail-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.8fr); gap: 30px; align-items: stretch; }
.settings-mail-channel { display: flex; align-items: flex-start; gap: 15px; border: 1px solid #e6edf7; background: #f7faff; padding: 20px; border-radius: 9px; }
.settings-mail-mark { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid #e2eaf8; background: #fff; color: #7695c1; border-radius: 12px; }
.settings-mail-mark>.icon { width: 22px; height: 22px; }
.settings-mail-channel>div>span:first-child { color: #8b9cb4; font-size: 11px; }
.settings-mail-channel h3 { font-size: 18px; color: #4e6b94; font-weight: 550; margin: 4px 0 11px; }
.settings-mail-channel p { color: #7e91ac; font-size: 11px; line-height: 1.7; margin-top: 12px; }
.settings-mail-verification { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 2px 0 19px; }
.settings-mail-verification h3 { font-size: 13px; font-weight: 500; }
.settings-mail-verification p { font-size: 12px; color: #8292aa; margin-top: 5px; }
.settings-mail-limits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; border-top: 1px solid #e9eef6; padding-top: 20px; }
.settings-mail-limits>div+div { border-left: 1px solid #e9eef6; padding-left: 25px; }
.settings-mail-limits span { color: #8193ad; font-size: 11px; }
.settings-mail-limits strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; color: #4a6389; font-size: 25px; font-weight: 550; margin-top: 6px; font-variant-numeric: tabular-nums; }
.settings-mail-limits small { color: #899ab2; font-size: 11px; font-weight: 400; }
.settings-mail-failures { margin-top: 22px; border-top: 1px solid #edf1f7; padding-top: 14px; }
.settings-mail-failures summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; min-height: 32px; color: #a38759; font-size: 12px; }
.settings-mail-failures summary::-webkit-details-marker { display: none; }
.settings-mail-failures summary>span { display: inline-flex; align-items: center; gap: 7px; }
.settings-mail-failures summary>span:last-child { color: #8f9bb0; font-size: 11px; padding-right: 4px; }
.settings-mail-failures summary .icon { width: 14px; height: 14px; }
.settings-mail-failures summary b { background: #faf3e7; color: #ad894e; font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 4px; }
.settings-mail-failures[open] summary>span:last-child>.icon { transform: rotate(45deg); }
.settings-mail-failures ul { padding: 0; margin: 9px 0 0; list-style: none; }
.settings-mail-failures li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; }
.settings-mail-failures li+li { border-top: 1px dashed #edf0f5; }
.settings-mail-failures code { color: #968568; font-size: 11px; overflow-wrap: anywhere; }
.settings-mail-failures time { color: #8b99ad; font-size: 11px; white-space: nowrap; }
.settings-text-link { display: inline-flex; align-items: center; gap: 6px; color: #6c89b4; font-size: 12px; white-space: nowrap; }
.settings-text-link>.icon { width: 14px; height: 14px; }
.settings-support-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 36px; }
.settings-support-layout>form { min-width: 0; }
.settings-support-layout textarea { min-height: 132px; }
.settings-save-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.settings-save-row>span { font-size: 11px; color: #8797af; }
.settings-save-row>.btn { min-width: 112px; }
.settings-support-preview { min-width: 0; align-self: start; background: #f5f8fc; border: 1px solid #e7edf6; border-radius: 10px; padding: 17px; }
.settings-preview-heading { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #7c93b3; margin-bottom: 13px; }
.settings-preview-heading>.icon { width: 14px; height: 14px; }
.settings-preview-heading>span { font-size: 10px; color: #94a4bc; margin-left: auto; }
.settings-preview-body { padding: 20px; border-radius: 8px; background: #fff; border: 1px solid #e4ebf6; }
.settings-preview-icon { display: grid; place-items: center; width: 32px; height: 32px; background: #edf4ff; border-radius: 9px; color: #7a99c7; margin-bottom: 12px; }
.settings-preview-body h3 { color: #4b658a; font-size: 14px; }
.settings-preview-body p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font-size: 12px; color: #7b8ea9; margin-top: 6px; }
.settings-preview-body>p { color: #6485b3; }
.settings-preview-body>div { margin-top: 18px; border-top: 1px solid #edf1f7; padding-top: 12px; }
.settings-preview-body h4 { font-size: 12px; color: #627a9b; font-weight: 500; margin: 0; }
.settings-preview-body>div>p { max-height: 220px; overflow-y: auto; }
.settings-card.settings-audit { padding: 0; overflow: hidden; }
.settings-audit>.settings-section-head { padding: 22px 22px 0; margin-bottom: 20px; }
.settings-audit-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px 19px; }
.settings-audit-search { position: relative; flex: 1; max-width: 410px; }
.settings-audit-search>.icon { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: #90a3bf; width: 15px; height: 15px; }
.settings-audit-search>input, .settings-audit-toolbar>select { width: 100%; min-width: 0; border: 1px solid #dfe6f1; border-radius: 7px; background: #fff; color: #5c7395; min-height: 38px; padding: 8px 12px; font-size: 12px; }
.settings-audit-search>input { padding-left: 35px; }
.settings-audit-search>input::placeholder { color: #93a2b8; }
.settings-audit-toolbar>select { width: 142px; flex-shrink: 0; }
.settings-audit-toolbar :is(input,select):focus-visible { outline: 2px solid #91b1e7; outline-offset: 2px; }
.settings-audit-table { width: 100%; min-width: 0; table-layout: fixed; }
.settings-audit-action-col { width: 29%; }
.settings-audit-person-col { width: 27%; }
.settings-audit-target-col { width: 27%; }
.settings-audit-time-col { width: 17%; }
.settings-audit-table th { color: #8393ac; background: #f8fafc; border-top: 1px solid #eaf0f7; border-bottom: 1px solid #eaf0f7; font-size: 11px; padding: 12px 16px; font-weight: 400; }
.settings-audit-table td { padding: 17px 16px; border-color: #edf1f7; font-size: 12px; color: #637b9d; overflow-wrap: anywhere; }
.settings-audit-table :is(th,td):first-child { padding-left: 22px; }
.settings-audit-table :is(th,td):last-child { padding-right: 22px; text-align: right; }
.settings-audit-table tbody tr:hover { background: #fafcff; }
.settings-audit-action { display: flex; align-items: center; gap: 10px; min-width: 0; }
.settings-audit-action>div { min-width: 0; }
.settings-audit-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: #f0f4fb; color: #7b98c2; }
.settings-audit-icon.account { background: #f2f0fa; color: #9b8abb; }
.settings-audit-icon.finance { background: #edf7f3; color: #6ba58d; }
.settings-audit-icon.tools { background: #fdf5e9; color: #b39a74; }
.settings-audit-icon>.icon { width: 15px; height: 15px; }
.settings-audit-action strong { display: block; font-weight: 500; font-size: 12px; color: #4e688d; }
.settings-audit-action code { display: block; color: #91a2ba; font-size: 10px; margin-top: 4px; overflow-wrap: anywhere; }
.settings-audit-target code { font-size: 11px; color: #8397b3; overflow-wrap: anywhere; }
.settings-audit-time time { white-space: nowrap; font-size: 11px; color: #8094b0; font-variant-numeric: tabular-nums; }
.settings-audit-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 22px; border-top: 1px solid #edf1f7; }
.settings-audit-footer>span { color: #8c9db4; font-size: 11px; }
.settings-audit-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 18px; gap: 10px; }
.settings-audit-empty>.icon { box-sizing: content-box; padding: 14px; width: 22px; height: 22px; background: #f2f6fc; color: #91a7c8; border-radius: 14px; margin-bottom: 4px; }
.settings-audit-empty strong { font-size: 13px; font-weight: 500; color: #617d9e; }
.settings-audit-empty p { font-size: 12px; color: #8a9cb4; }
@media (max-width: 1200px) {
  .settings-main-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .settings-card { padding: 19px; }
  .settings-overview { gap: 10px; }
  .settings-overview-card { padding: 14px; }
  .settings-section-head { align-items: flex-start; gap: 10px; }
  .settings-main-grid .settings-section-head { flex-wrap: wrap; }
  .settings-main-grid .settings-section-head>.settings-source-label { display: none; }
  .settings-rate-display { flex-wrap: wrap; gap: 10px; }
  .settings-price-facts { gap: 8px; }
  .settings-price-facts strong { font-size: 16px; }
  .settings-price-example { padding: 13px; }
  .settings-formula strong { font-size: 13px; }
  .settings-support-layout, .settings-mail-layout { gap: 22px; }
  .settings-mail-layout { grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); }
  .settings-mail-channel { padding: 16px; gap: 11px; }
  .settings-mail-mark { width: 36px; height: 36px; }
}
@media (max-width: 1020px) {
  .settings-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-main-grid { grid-template-columns: 1fr; }
  .settings-main-grid .settings-section-head>.settings-source-label { display: inline-flex; }
  .settings-rate-display { flex-wrap: nowrap; }
  .settings-service-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 25px; margin-bottom: 14px; }
  .settings-service-row:nth-child(2) { border-top: 0; }
  .settings-formula strong { font-size: 16px; }
  .settings-mail-layout { grid-template-columns: 1fr; gap: 22px; }
  .settings-mail-channel { padding: 17px; }
  .settings-mail-channel p { margin-top: 8px; }
  .settings-audit-table, .settings-audit-table tbody { display: block; }
  .settings-audit-table colgroup { display: none; }
  .settings-audit-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .settings-audit-table tbody { padding: 0 20px 18px; }
  .settings-audit-table tr { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px 16px; border: 1px solid #e6ecf5; border-radius: 8px; padding: 16px; margin-top: 10px; }
  .settings-audit-table td, .settings-audit-table :is(th,td):first-child, .settings-audit-table :is(th,td):last-child { display: block; padding: 0; border: 0; }
  .settings-audit-table tr>td:first-child { grid-row: 1; grid-column: 1; }
  .settings-audit-table .settings-audit-time { grid-row: 1; grid-column: 2; align-self: start; }
  .settings-audit-table :is(.settings-audit-person,.settings-audit-target) { grid-column: 1/-1; display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 10px; font-size: 11px; }
  .settings-audit-table [data-label]::before { content: attr(data-label); font-size: 11px; color: #96a6bd; }
  .settings-support-layout { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  .system-settings-page>.page-head { margin: 4px 0 20px; }
  .system-settings-page>.page-head h1 { font-size: 23px; }
  .system-settings-page>.page-head p { font-size: 12px; }
  .system-settings-page>.page-head>.buttons { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .system-settings-page .btn { min-height: 42px; }
  .settings-overview { gap: 10px; margin-bottom: 16px; }
  .settings-overview-card { padding: 13px; }
  .settings-overview-card>div { font-size: 11px; }
  .settings-overview-card>strong { font-size: 21px; margin-top: 5px; }
  .settings-overview-card>p { font-size: 10px; align-items: baseline; }
  .settings-overview-icon { width: 27px; height: 27px; border-radius: 8px; }
  .settings-overview-icon>.icon { width: 14px; height: 14px; }
  .settings-section-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-bottom: 17px; padding-bottom: 16px; }
  .settings-section-nav>a { min-height: 40px; padding: 8px 6px; font-size: 11px; gap: 5px; background: #eef2f8; }
  .settings-section-nav>a>.icon { width: 13px; height: 13px; }
  .settings-card { padding: 17px; border-radius: 10px; }
  .settings-section-head { flex-wrap: wrap; margin-bottom: 21px; row-gap: 14px; }
  .settings-section-label h2 { font-size: 15px; }
  .settings-section-label p { font-size: 11px; }
  .settings-section-label { gap: 9px; }
  .settings-section-icon { width: 32px; height: 32px; border-radius: 9px; }
  .settings-section-icon>.icon { width: 16px; height: 16px; }
  .settings-main-grid { gap: 16px; margin-bottom: 16px; }
  .system-settings-page>.settings-card { margin-top: 16px; }
  .settings-rate-display { flex-wrap: wrap; }
  .settings-rate-display strong { font-size: 29px; }
  .settings-rate-display>.settings-state { margin-left: auto; }
  .settings-price-facts { grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; padding: 18px 0; }
  .settings-price-facts>div>span { font-size: 10px; }
  .settings-price-facts strong { font-size: 16px; }
  .settings-price-facts strong small { font-size: 10px; }
  .settings-price-facts>div:first-child strong small { display: block; margin: 4px 0 0; }
  .system-settings-page .field :is(input,textarea) { font-size: 16px; min-height: 44px; }
  .settings-rate-form { column-gap: 8px; }
  .settings-rate-form>.btn { min-height: 44px; padding-inline: 11px; }
  .settings-price-example { padding: 13px 11px; margin-top: 18px; }
  .settings-formula { gap: 4px; }
  .settings-formula strong { font-size: 13px; }
  .settings-formula small { font-size: 10px; }
  .settings-formula>span { font-size: 10px; }
  .settings-service-list { grid-template-columns: 1fr; column-gap: 0; margin-bottom: 12px; }
  .settings-service-row { padding: 16px 0; }
  .settings-service-row:nth-child(2) { border-top: 1px solid #edf1f7; }
  .settings-service-row>strong { text-align: right; }
  .settings-platform-url { padding: 12px; }
  .settings-platform-url>.icon-button { min-width: 42px; min-height: 42px; }
  .settings-card-link { min-height: 44px; }
  .settings-mail>.settings-section-head>.btn { margin-left: 41px; min-height: 34px; font-size: 11px; }
  .settings-mail-layout { gap: 22px; }
  .settings-mail-limits { gap: 16px; padding-top: 18px; }
  .settings-mail-limits>div+div { padding-left: 16px; }
  .settings-mail-limits strong { font-size: 24px; gap: 5px; }
  .settings-mail-verification p { font-size: 11px; }
  .settings-mail-failures summary { min-height: 44px; font-size: 11px; }
  .settings-mail-failures li { flex-wrap: wrap; gap: 5px; }
  .settings-mail-failures time { margin-left: auto; }
  .settings-support-layout { grid-template-columns: 1fr; gap: 24px; }
  .settings-text-link { min-height: 32px; }
  .settings-support-preview { padding: 14px; }
  .settings-preview-body { padding: 17px; }
  .settings-save-row { margin-top: 16px; }
  .settings-save-row>.btn { min-height: 44px; }
  .settings-audit>.settings-section-head { padding: 18px 16px 0; margin-bottom: 17px; }
  .settings-audit-toolbar { padding: 0 16px 8px; flex-wrap: wrap; gap: 10px; }
  .settings-audit-search { flex-basis: 100%; max-width: none; }
  .settings-audit-search>input, .settings-audit-toolbar>select { min-height: 44px; font-size: 16px; }
  .settings-audit-search>input::placeholder { font-size: 12px; }
  .settings-audit-toolbar>select { width: 100%; }
  .settings-audit-table tbody { padding: 0 14px 14px; }
  .settings-audit-table tr { padding: 14px; gap: 12px 9px; }
  .settings-audit-action { gap: 8px; }
  .settings-audit-action strong { font-size: 11px; }
  .settings-audit-icon { width: 27px; height: 27px; border-radius: 7px; }
  .settings-audit-time time { font-size: 10px; }
  .settings-audit-action code { font-size: 9px; }
  .settings-audit-footer { padding: 13px 16px; }
  .settings-audit-footer>.buttons { gap: 7px; }
  .settings-audit-footer .btn { padding-inline: 11px; min-height: 40px; }
}
/* Task preparation and result views extend the existing console components. */
.task-template-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.task-template{padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.task-template h3,.task-template p,.task-template dl{margin:0}.task-template p,.task-template dd{line-height:1.7}
.task-template dt{color:#637083;font-size:12px;margin-top:8px}.task-template dd{margin:0;font-size:13px}
.task-template small{color:#637083;font-size:11px;line-height:1.6}.task-template .btn{margin-top:auto;align-self:flex-start}
.task-template summary{font-size:12px;cursor:pointer}.task-template details p{font-size:12px;padding-top:8px}
.task-composer-panel>form{padding:24px}.task-composer-panel fieldset{border:0;margin:0;padding:0;min-width:0}
.task-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}.task-form-grid section{min-width:0}
.task-search{display:flex;gap:8px}.task-search input{min-width:0;flex:1}.task-choices{max-height:230px;overflow:auto;margin:12px 0}
.task-choice{display:flex;gap:10px;align-items:flex-start;padding:10px 4px;font-size:13px;line-height:1.6}.task-choice input{width:16px;height:16px;flex:none;margin-top:3px}
.task-requirements{background:#f7f9fc;border:1px solid #e7ebf1;border-radius:8px;padding:14px;font-size:12px;line-height:1.7}.task-requirements p{margin:6px 0}.task-requirements>div+div{margin-top:12px}
.task-budget-notice{font-size:13px;color:#526174;line-height:1.7}.task-composer-panel textarea{width:100%;resize:vertical}
.task-history{padding:0 24px 20px}.task-history>a{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid #e7ebf1;color:inherit;line-height:1.6}.task-history span{font-size:12px;color:#637083;flex-shrink:0}
.task-resume{justify-content:space-between;margin:16px 0}.result-summary{background:#f7f9fc;border:1px solid #e7ebf1;border-radius:10px;padding:18px;margin-bottom:24px}.result-summary p{font-size:13px;line-height:1.7}
.result-costs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.result-costs dt{font-size:12px;color:#637083}.result-costs dd{margin:6px 0;font-size:19px;font-weight:600;overflow-wrap:anywhere}
.result-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;padding:18px;background:#fafbfc;border:1px solid #e7ebf1;border-radius:8px;max-height:60vh;overflow:auto;margin-bottom:16px}
.result-content{min-width:0}.result-artifact{margin:20px 0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}.result-artifact audio,.result-artifact img{max-width:100%;width:100%}.result-artifact img{max-height:55vh;object-fit:contain}.result-download-help{font-size:12px;color:#637083;line-height:1.6}.result-table td{max-width:340px;white-space:pre-wrap;overflow-wrap:anywhere}.result-table{margin:20px 0}.result-advanced{margin-top:24px}.result-generic{white-space:pre-wrap;overflow-wrap:anywhere}.result-content .muted{font-size:12px;line-height:1.7}
@media(max-width:1100px){.task-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.task-template-grid,.task-form-grid{grid-template-columns:minmax(0,1fr)}.task-composer-panel>form{padding:16px}.task-history>a{flex-direction:column;gap:4px}.task-template{padding:16px}.task-form-grid{gap:16px}.result-costs dd{font-size:16px}.task-resume{flex-wrap:wrap}.task-composer-panel .buttons>.btn{flex:1}.task-composer-panel textarea,.task-composer-panel input,.task-composer-panel select{font-size:16px;max-width:100%}}
.task-search input{border:1px solid var(--border,#dbe2ec);border-radius:6px;background:#fff;padding:9px 11px;font:inherit;font-size:13px;outline-color:#2563eb}
@media(max-width:600px){.page-head>.buttons{max-width:100%;min-width:0;flex-shrink:1;flex-wrap:wrap}.task-history span{flex-shrink:1;overflow-wrap:anywhere}}
/* A single workbench and guide reuse the console's panels and category cards. */
.guide-sections{display:flex;gap:24px;margin:0 0 24px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.guide-sections a{padding:0 0 13px;color:var(--muted);font-size:14px;border-bottom:2px solid transparent}
.guide-sections a[aria-current=page]{color:var(--blue,#2563eb);border-color:currentColor;font-weight:600}
.guide-card-facts{display:flex;flex-wrap:wrap;gap:6px 14px;color:#637083;font-size:11px;margin:0 0 12px}
.guide-unavailable-reason{font-size:12px;line-height:1.6;color:#846029;margin:0 0 14px;overflow-wrap:anywhere}
.workbench-templates{margin:0 0 22px;border-bottom:1px solid #e7ebf1;padding-bottom:16px}
.workbench-templates>summary{cursor:pointer;font-size:13px;color:#426087}
.workbench-templates .task-template-grid{margin:16px 0 0;grid-template-columns:repeat(2,minmax(0,1fr))}
.workbench-progress{border-top:1px solid #e7ebf1}.workbench-progress>#task-costs{padding:0 24px 24px}
.workbench-cost-heading{display:flex;gap:12px;justify-content:space-between;font-size:13px;line-height:1.7;margin-bottom:18px}
.workbench-cost-heading>span{color:#637083}.workbench-costs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0 0 16px}
.workbench-costs dt{font-size:12px;color:#637083}.workbench-costs dd{margin:6px 0;font-size:16px;font-weight:600;overflow-wrap:anywhere}
#task-costs>.muted{font-size:12px;line-height:1.8;margin:8px 0}.workbench-call{width:100%;display:flex;gap:18px;justify-content:space-between;align-items:center;text-align:left;padding:14px 0;background:none;border:0;border-top:1px solid #e7ebf1;cursor:pointer;color:inherit;font:inherit;font-size:13px}.workbench-call strong,.workbench-call small{display:block;line-height:1.7}.workbench-call small{font-size:12px;color:#637083}.workbench-call>span:last-child{color:#2563eb;white-space:nowrap}
.library-actions{margin:16px 0}.workbench-library>p{line-height:1.8;font-size:13px;color:#637083}
dialog:has(.workbench-library){width:1050px}
.workbench-library .media-upload-form{flex-wrap:wrap}.workbench-library .media-upload-form input{max-width:100%}
@media(max-width:800px){.task-composer-panel>.panel-head{flex-wrap:wrap;gap:14px}.workbench-costs{grid-template-columns:repeat(2,minmax(0,1fr))}.workbench-cost-heading{flex-direction:column;gap:4px}.workbench-call{flex-wrap:wrap}.workbench-progress>#task-costs{padding:0 16px 16px}}
@media(max-width:600px){.workbench-templates .task-template-grid{grid-template-columns:minmax(0,1fr)}.guide-sections{gap:18px}.guide-sections a{font-size:13px}.workbench-library .media-upload-form>.field{min-width:0;flex-basis:100%}.workbench-library .table-wrap{max-width:100%}}

.task-upload-help{display:block;margin-top:10px;font-size:12px;line-height:1.7;color:#637083}
/* The workbench has one handoff flow; file management stays in its context. */
.wb { max-width: 1280px; margin: 0 auto; padding-bottom: 32px; }
.wb .page-head { margin-bottom: 24px; }
.wb .page-head h1 { font-size: 23px; letter-spacing: -.5px; }
.wb .page-head p { font-size: 13px; margin-top: 7px; }
.wb-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 22px; align-items: start; }
.wb-main,.wb-side { min-width: 0; }
.wb .panel { border-radius: 12px; box-shadow: 0 2px 4px #23354d03; overflow: hidden; }
.wb-section-head { padding: 24px 24px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wb-section-head h2 { font-size: 17px; font-weight: 600; margin: 0; }
.wb-section-head p { color: var(--muted); font-size: 13px; margin: 8px 0 0; line-height: 1.7; }
.wb-section-head>div:last-child:not(:first-child) { display: flex; align-items: center; gap: 20px; font-size: 12px; }
.wb-step-label { font-size: 11px; color: #64748b; font-weight: 500; }
.wb-link { border: 0; background: none; color: #285fc3; font: inherit; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; cursor: pointer; }
.wb-link:hover { color: #164397; }
.wb-link:disabled { color: #7e8999; cursor: default; }
.wb-link .icon { width: 14px; height: 14px; }
.wb-back { display: inline-block; font-size: 12px; color: #5c6c82; margin: -7px 0 16px; }
.wb-templates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 6px 24px 24px; }
.wb-template { width: 100%; display: flex; align-items: flex-start; gap: 12px; border: 1px solid #e2e7ef; border-radius: 9px; padding: 20px 16px; text-align: left; background: #fff; cursor: pointer; color: inherit; font: inherit; transition: background .15s,border-color .15s; }
.wb-template:hover { background: #f7faff; border-color: #95b4ec; }
.wb-template-icon { display: grid; place-items: center; width: 34px; height: 34px; background: #edf3ff; color: #3266bb; border-radius: 9px; flex-shrink: 0; }
.wb-template-icon .icon { width: 19px; height: 19px; }
.wb-template>span:nth-child(2) { flex: 1; min-width: 0; }
.wb-template strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.6; }
.wb-template small { display: block; font-size: 12px; line-height: 1.75; color: #677487; margin-top: 6px; }
.wb-template>.icon { width: 14px; color: #8a99ae; margin-top: 5px; }
.wb-other { border-top: 1px solid #edf0f5; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fbfcfe; }
.wb-other>a { font-size: 12px; color: #637187; }
.wb-other>a .icon { width: 13px; }
.wb-resume { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #f5f8fe; margin: 0 24px 18px; border: 1px solid #e4ebf7; border-radius: 8px; padding: 13px 15px; font-size: 13px; color: #345584; }
.wb-resume>span { min-width: 0; }
.wb-resume small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #738298; font-size: 12px; margin-top: 6px; }
.wb-how { display: flex; gap: 12px; padding: 24px 4px; }
.wb-how>span { color: #65809f; padding-top: 1px; }
.wb-how strong { font-size: 13px; font-weight: 500; color: #45556d; }
.wb-how p { font-size: 12px; line-height: 1.8; color: #677487; margin: 8px 0; }
.wb-how a { font-size: 12px; }
.wb-how a .icon { width: 13px; }
.wb-file-panel .wb-section-head { padding: 20px 20px 16px; }
.wb-file-panel h2 { font-size: 14px; }
.wb-file-panel h2 span { font-size: 11px; color: #7a879a; margin-left: 6px; font-weight: 400; }
.wb-upload-zone { width: calc(100% - 40px); margin: 0 20px 12px; padding: 18px 8px; border: 1px dashed #b9c9df; border-radius: 8px; background: #fafcff; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #38639c; cursor: pointer; font: inherit; }
.wb-upload-zone:hover { background: #f2f7ff; border-color: #5f8bc6; }
.wb-upload-zone>.icon { width: 22px; height: 22px; margin-bottom: 4px; }
.wb-upload-zone strong { font-size: 13px; font-weight: 500; }
.wb-upload-zone span { font-size: 11px; color: #728096; line-height: 1.8; }
.wb-upload-zone:disabled { cursor: progress; opacity: .6; }
#workbench-files { padding: 0 20px; }
.wb-file-row { display: flex; gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px solid #eef1f6; }
.wb-file-row:last-child { border-bottom: 0; }
.wb-file-row>.icon { width: 18px; height: 18px; color: #6d83a0; }
.wb-file-row>span { min-width: 0; flex: 1; }
.wb-file-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; color: #3c4a61; line-height: 1.6; }
.wb-file-row small { display: block; color: #778499; font-size: 10px; line-height: 1.7; margin-top: 3px; }
.wb-icon-button { border: 1px solid #e2e8f1; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; background: #fff; color: #426c9f; flex-shrink: 0; cursor: pointer; }
.wb-icon-button:disabled { opacity: .5; cursor: default; }
.wb-icon-button:hover:enabled { background: #edf4ff; }
.wb-icon-button .icon { width: 13px; height: 13px; }
.wb-retention { border-top: 1px solid #edf0f5; font-size: 10px; color: #7b8798; padding: 12px 20px; margin: 8px 0 0; }
.wb-empty-files { font-size: 12px; line-height: 1.9; color: #7a8799; text-align: center; margin: 18px 0; }
.wb-side-help { display: flex; gap: 9px; padding: 18px 8px; color: #7b8b9f; }
.wb-side-help .icon { margin-top: 2px; }
.wb-side-help p { font-size: 11px; line-height: 1.8; margin: 0; }
#task-upload-status { font-size: 11px; line-height: 1.7; color: #4c668c; padding: 0 20px; }
#task-upload-status:not(:empty) { margin-bottom: 10px; }
.wb-compose .wb-section-head { border-bottom: 1px solid #edf0f5; padding-block: 20px; }
.wb-compose .wb-section-head h2 { margin-top: 6px; }
.wb-compose form { padding: 22px 24px 24px; }
.wb-compose fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wb-compose .field { margin: 0; }
.wb-compose label { font-size: 13px; font-weight: 500; color: #37465c; }
.wb-compose textarea { width: 100%; border: 1px solid #dbe2ec; border-radius: 8px; padding: 13px 14px; font-size: 13px; line-height: 1.9; margin-top: 10px; background: #fff; resize: vertical; min-height: 120px; }
.wb-selected-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 24px; }
.wb-selected-tools>span { font-size: 10px; color: #6d7c90; display: inline-flex; gap: 5px; align-items: center; }
.wb-selected-tools .icon { width: 12px; height: 12px; }
.wb-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wb-field-heading>div { display: flex; gap: 16px; }
#task-file-count { color: #8b97a7; font-size: 11px; font-weight: 400; }
.wb-attachment { border: 1px solid #e5eaf1; border-radius: 8px; padding: 12px; display: flex; gap: 10px; align-items: center; margin-bottom: 8px; background: #fafbfd; }
.wb-attachment>.icon { color: #6484ad; }
.wb-attachment>span { flex: 1; min-width: 0; }
.wb-attachment strong { display: block; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.wb-attachment small { display: block; font-size: 11px; color: #79869a; margin-top: 4px; }
.wb-requirements { font-size: 11px; line-height: 1.8; color: #7a8799; }
.wb-requirements p { margin: 7px 0; }
.wb-validation { padding: 10px 12px; background: #fff5ed; color: #995a2a; border-radius: 6px; font-size: 12px; margin-top: 10px; }
.wb-budget-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #edf0f5; }
.wb-cap { display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.wb-amount { border: 1px solid #dbe2ec; border-radius: 7px; display: flex; align-items: center; gap: 6px; width: 150px; padding-left: 12px; font-size: 15px; color: #3e506d; }
.wb-amount input { min-width: 0; width: 100%; border: 0; background: transparent; border-radius: 7px; font-size: 16px; font-variant-numeric: tabular-nums; padding: 9px 10px 9px 0; outline-color: #2563eb; }
#task-cap-help { font-size: 11px; line-height: 1.8; color: #79869a; margin: 10px 0; }
.wb-budget-options { margin-top: 12px; font-size: 11px; color: #6c7c92; }
.wb-budget-options summary { cursor: pointer; }
.wb-budget-options select { display: block; margin-top: 12px; max-width: 100%; width: 100%; background: #fff; border: 1px solid #dbe2ec; border-radius: 6px; padding: 9px; font: inherit; }
#task-budget-help { line-height: 1.8; margin: 8px 0 0; }
.wb-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.wb-submit>.btn { min-height: 41px; padding-inline: 18px; font-size: 13px; }
.wb-submit>span { font-size: 11px; color: #79869a; }
.wb-example { margin: 18px 4px 22px; font-size: 12px; color: #62728a; }
.wb-example summary { cursor: pointer; }
.wb-example dl { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 12px; font-size: 12px; line-height: 1.8; padding: 16px 0 0; }
.wb-example dd { margin: 0; color: #45556e; }
.wb-example small { font-size: 11px; color: #8390a2; }
.wb-handoff { padding: 26px; }
.wb-handoff-top { display: flex; align-items: flex-start; gap: 15px; }
.wb-handoff-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; color: #277252; border-radius: 12px; background: #edf8f1; }
.wb-handoff-icon .icon { width: 23px; height: 23px; }
.wb-handoff-top h2 { font-size: 20px; font-weight: 600; margin: 7px 0 10px; }
.wb-handoff-top p { font-size: 12px; color: #708098; line-height: 1.8; margin: 0; }
.wb-handoff-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 24px; }
.wb-handoff-actions .btn { min-height: 40px; }
.wb-handoff-actions>a { font-size: 11px; }
.wb-handoff-actions>a .icon { width: 12px; }
.wb-task-summary { border-top: 1px solid #edf0f5; margin-top: 24px; padding-top: 19px; }
.wb-task-summary>p { font-size: 13px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; margin: 0 0 12px; }
.wb-task-summary>div { display: flex; gap: 8px 18px; flex-wrap: wrap; color: #728197; font-size: 11px; }
.wb-task-details { margin-top: 18px; font-size: 11px; color: #6c7c92; line-height: 1.9; }
.wb-task-details summary { cursor: pointer; }
.wb-task-details textarea { width: 100%; resize: vertical; margin: 14px 0 10px; font-size: 12px; line-height: 1.8; border: 1px solid #dbe2ec; border-radius: 7px; padding: 12px; }
#task-copy-status { font-size: 12px; color: #287a53; margin-top: 12px; }
#task-copy-status:empty { display: none; }
.wb-progress { margin-top: 20px; }
.wb-progress[hidden] { display: none; }
.wb-progress #task-costs { padding: 0 24px 20px; }
.wb-progress .workbench-costs { grid-template-columns: repeat(3,minmax(0,1fr)); border-radius: 8px; background: #f8fafc; padding: 18px; gap: 20px 12px; }
.wb-progress .workbench-costs dt { font-size: 11px; }
.wb-progress .workbench-costs dd { font-size: 17px; font-variant-numeric: tabular-nums; margin-top: 8px; }
.wb-progress .workbench-calls { margin-top: 15px; }
.wb-progress .workbench-call { gap: 12px; }
.wb-progress .workbench-call .icon { width: 12px; }
.wb-progress-footer { border-top: 1px solid #edf0f5; padding: 15px 24px; display: flex; flex-direction: column; gap: 6px; }
.wb-progress-footer a { font-size: 12px; }
.wb-progress-footer span { color: #7c8a9c; font-size: 10px; }
.wb-cost-detail { margin-top: 10px; }
.wb-waiting { display: flex; gap: 13px; padding: 10px 0 0; color: #7b8b9f; }
.wb-waiting>.icon { margin-top: 2px; }
.wb-waiting strong { font-size: 13px; font-weight: 500; color: #53657f; }
.wb-waiting p { font-size: 12px; line-height: 1.8; margin: 7px 0 0; }
.wb-history { margin-top: 24px; }
.wb-history .wb-section-head { padding: 19px 24px; }
.wb-history .wb-section-head h2 { font-size: 15px; }
.wb-history-row { padding: 16px 24px; border: 0; border-top: 1px solid #edf0f5; display: flex; align-items: center; gap: 14px; color: inherit; background: #fff; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.wb-history-row:hover { background: #f9fbfe; }
.wb-history-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #e6ebf2; border-radius: 8px; color: #7387a2; flex-shrink: 0; }
.wb-history-row>span:nth-child(2) { min-width: 0; flex: 1; }
.wb-history-row strong { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-history-row small { display: block; font-size: 11px; color: #7b899c; margin-top: 7px; }
.wb-state { font-size: 11px; color: #58739b; white-space: nowrap; }
.wb-state .icon { width: 13px; margin-left: 12px; }
.wb-history-empty { border-top: 1px solid #edf0f5; padding: 26px 24px; font-size: 12px; color: #7d8b9f; }
.wb-file-picker>p,.wb-picker-note { font-size: 12px; line-height: 1.8; color: #708098; margin: 0 0 15px; }
.wb-picker-files { max-height: 55vh; overflow-y: auto; margin-bottom: 20px; }
.wb-file-picker .wb-file-row { padding: 14px 0; }
.wb-file-picker .wb-file-row strong { font-size: 13px; }
.wb-file-picker .wb-file-row small { font-size: 11px; }
.wb-file-picker .wb-file-row .btn { flex-shrink: 0; }
.wb-tool-picker .wb-templates { padding: 0 0 24px; }
.wb-tool-picker .wb-template { padding: 15px 12px; }
.wb-tool-picker .wb-template>.icon { display: none; }
.wb-tool-picker .task-search { margin-bottom: 15px; }
#task-search-results { max-height: 38vh; overflow: auto; margin-bottom: 12px; }
.wb-search-result { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; border: 0; border-top: 1px solid #edf0f5; background: #fff; color: inherit; padding: 12px 0; text-align: left; cursor: pointer; }
.wb-search-result>span { min-width: 0; }
.wb-search-result strong { display: block; font-size: 13px; font-weight: 500; }
.wb-search-result small { display: block; font-size: 11px; line-height: 1.7; color: #7c899d; margin-top: 6px; max-height: 4.9em; overflow: hidden; }
@media(min-width:1500px) { .wb { padding-top: 10px; }.wb-layout { grid-template-columns: minmax(0,1fr) 320px; gap: 26px; } }
@media(max-width:1050px) { .wb-layout { grid-template-columns: minmax(0,1fr) 265px; gap: 16px; }.wb-templates { grid-template-columns: minmax(0,1fr); }.wb-template { padding: 15px; }.wb-template small { margin-top: 3px; }.wb-submit>span { width: 100%; } }
@media(max-width:780px) { .wb-layout { grid-template-columns: minmax(0,1fr); }.wb-templates { grid-template-columns: repeat(2,minmax(0,1fr)); }.wb-side-help { display: none; }.wb-history { margin-top: 18px; }.wb-file-panel .wb-upload-zone { padding: 16px; }.wb-file-panel .wb-upload-zone span br { display: none; }.wb .page-head { align-items: flex-start; }.wb .page-head>.buttons .btn { font-size: 11px; }.wb .page-head h1 { font-size: 21px; } }
@media(max-width:520px) {
  .wb .page-head { margin-bottom: 20px; flex-wrap: wrap; }.wb .page-head>.buttons { width: 100%; }.wb .page-head>.buttons .btn { border: 0; padding: 0; background: none; color: #3465b5; min-height: 25px; }
  .wb-templates { grid-template-columns: minmax(0,1fr); padding: 0 18px 18px; gap: 10px; }.wb-template { padding: 14px; }.wb-template strong { font-size: 14px; }.wb-template small { font-size: 11px; }.wb-template-icon { width: 32px; height: 32px; }
  .wb-section-head { padding: 20px 18px 17px; }.wb-section-head h2 { font-size: 16px; }.wb-section-head>.wb-step-label { display: none; }
  .wb-other { padding: 12px 18px; }.wb-other>a { font-size: 11px; }.wb-how { padding: 18px 3px 5px; }.wb-how strong { font-size: 12px; }
  .wb-compose form { padding: 19px 18px; }.wb-compose textarea { font-size: 16px; min-height: 140px; }.wb-budget-options select { font-size: 16px; }.wb-compose .wb-section-head { padding: 17px 18px; }
  .wb-cap { gap: 10px; }.wb-amount { width: 130px; flex-shrink: 0; }.wb-cap>label { font-size: 12px; }.wb-field-heading>div { gap: 14px; }.wb-field-heading label { font-size: 12px; }
  .wb-submit>.btn { width: 100%; }.wb-submit>span { text-align: center; font-size: 10px; }.wb-example { margin-bottom: 10px; }.wb-example dl { grid-template-columns: 64px minmax(0,1fr); gap: 9px; }
  .wb-resume { margin-inline: 18px; font-size: 12px; }.wb-handoff { padding: 20px 18px; }.wb-handoff-top { gap: 11px; }.wb-handoff-icon { width: 34px; height: 34px; border-radius: 9px; }.wb-handoff-top h2 { font-size: 18px; }.wb-handoff-top p { font-size: 11px; }
  .wb-handoff-actions { gap: 14px; }.wb-handoff-actions>.btn { width: 100%; }.wb-task-summary>div { gap: 7px 12px; font-size: 10px; }.wb-task-details textarea { font-size: 16px; }
  .wb-progress #task-costs { padding: 0 18px 18px; }.wb-progress .workbench-costs { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 14px; }.wb-progress .workbench-costs dd { font-size: 15px; }.wb-progress .workbench-call { font-size: 12px; }.wb-progress-footer { padding: 14px 18px; }
  .wb-history .wb-section-head { padding: 17px 18px; gap: 10px; flex-wrap: wrap; }.wb-history .wb-section-head>div:last-child { gap: 12px; }.wb-history .wb-section-head a,.wb-history .wb-link { font-size: 10px; }
  .wb-history-row { padding: 15px 18px; gap: 10px; flex-wrap: wrap; }.wb-history-icon { display: none; }.wb-history-row>span:nth-child(2) { min-width: 100%; }.wb-history-row strong { font-size: 12px; }.wb-state { font-size: 10px; }.wb-history-empty { padding: 20px 18px; line-height: 1.8; }
  .wb-tool-picker .wb-templates { grid-template-columns: minmax(0,1fr); }.wb-tool-picker .task-search input { font-size: 16px; }.wb-file-picker .wb-file-row { flex-wrap: wrap; }.wb-file-picker .wb-file-row>span { min-width: 60%; }
}

.wb-more-history { margin: 10px 24px; }

/* Upstream account administration: keep balances and their observation times distinct. */
.upstream-summary{padding:16px 18px;margin-bottom:16px}
.upstream-summary p{margin:0 0 8px;line-height:1.65}
.upstream-summary p:last-child{margin-bottom:0}
.upstream-table td small{display:block;margin-top:5px;color:var(--muted,#64748b);font-size:12px;line-height:1.5}
.upstream-table td{vertical-align:top}
.upstream-table td:last-child{min-width:180px}

/* Business outcomes lead the workbench; files are a supporting resource. */
.wb-business-home{max-width:1440px}.wb-business-home .page-head{margin-bottom:18px}
.wb-business-home .wb-layout{grid-template-columns:minmax(0,1fr) 264px;gap:18px}
.wb-business-form{padding:20px 22px 16px}.wb-business-form>label{display:block;font-size:17px;font-weight:650;margin-bottom:12px;color:#172b4d}
.wb-business-form textarea,.wb-business-prompt{display:block;width:100%;resize:vertical;border:1px solid #dbe3ef;border-radius:8px;padding:12px 14px;font:inherit;font-size:13px;line-height:1.8;background:#f9fbfe;color:#233654}
.wb-business-form textarea:focus{outline:2px solid #9dbdff;outline-offset:2px;background:#fff}
.wb-business-submit{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0 6px}
.wb-business-submit>label{font-size:12px;color:#63738a;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wb-business-submit>label>span{display:flex;align-items:center;gap:6px}.wb-business-submit input{width:88px;min-width:0;border:1px solid #dce4ee;border-radius:6px;padding:8px;font:inherit;color:#233654;background:#fff}
.wb-business-form>small{font-size:11px;color:#7b8798;line-height:1.8}.wb-business-form .form-error:empty{display:none}.wb-business-prompt{margin:16px 0}
.wb-scenarios .wb-section-head{padding:20px 0 12px}.wb-scenarios .wb-section-head h2{font-size:15px}.wb-scenarios .wb-section-head p{font-size:12px;margin-top:5px}.wb-scenarios .wb-section-head>a{font-size:12px;white-space:nowrap}
.wb-scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wb-scene{border:1px solid #e0e6ef;border-radius:10px;padding:15px;text-align:left;font:inherit;color:inherit;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:0}
.wb-scene:hover,.wb-scene:focus-visible{border-color:#789ee0;box-shadow:0 3px 12px #233c7010;outline-offset:3px}
.wb-scene-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:#7d8a9d;font-size:10px}.wb-scene-top>.icon:last-child{margin-left:auto;width:13px;height:13px}.wb-scene-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:7px;background:#eaf2ff;color:#315ea7}.wb-scene-icon .icon{width:17px;height:17px}.tone-1{background:#e7f4ee;color:#237259}.tone-2{background:#f0ecfa;color:#7552ad}.tone-3{background:#eaf0f8;color:#43618d}.tone-4{background:#fff2e8;color:#a36c35}.tone-5{background:#e8f5f8;color:#297a8c}
.wb-scene>strong{font-size:14px;line-height:1.6;font-weight:650;display:block}.wb-scene>p{font-size:12px;line-height:1.75;color:#66758a;margin:6px 0 12px;min-height:42px}.wb-scene>small{display:block;font-size:10px;line-height:1.7;border-top:1px solid #eef1f6;padding-top:10px;color:#49648b}
.wb-capabilities{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:14px 16px;margin-top:14px}.wb-capabilities>div{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:12px}.wb-capabilities span{color:#687a92}.wb-capabilities a{font-size:12px}.wb-capabilities>p{width:100%;font-size:10px;line-height:1.6;color:#8090a3;margin:0}
.wb-utility-tools{margin-top:14px}.wb-utility-tools>summary{display:flex;align-items:center;gap:8px;font-size:12px;padding:14px 16px;cursor:pointer}.wb-utility-tools>summary>span{margin-left:auto;font-size:10px;color:#7c8b9f}.wb-utility-tools .wb-template{padding:12px}.wb-utility-tools .wb-templates{padding:10px 16px 16px;gap:8px}.wb-utility-tools .wb-template strong{font-size:12px}.wb-utility-tools .wb-template small{font-size:11px;margin-top:3px}
.wb-business-side{display:grid;gap:14px}.wb-account{padding:20px;background:linear-gradient(125deg,#f4f8ff,#fff)}.wb-account>span{font-size:12px;color:#63738a}.wb-account>strong{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:27px;color:#233e6f;letter-spacing:-.5px;margin:10px 0 16px;overflow-wrap:anywhere}.wb-account>strong>small{font-size:11px;letter-spacing:0;color:#7a8da6;font-weight:400}.wb-account>div{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#7889a0}.wb-account>a{display:flex;justify-content:space-between;border-top:1px solid #e3ebf8;padding-top:12px;margin-top:14px;font-size:12px}
.wb-route,.wb-shortcuts{padding:18px}.wb-business-side h2{font-size:13px;font-weight:650;margin:0 0 14px}.wb-route ol{list-style:none;padding:0;margin:0}.wb-route li{display:flex;gap:12px;margin:0 0 17px}.wb-route b{font-family:monospace;font-size:12px;font-weight:500;color:#5d80b8;padding-top:3px}.wb-route li strong{font-size:12px;display:block;font-weight:550}.wb-route li small{font-size:10px;color:#8290a3;line-height:1.7;display:block;margin-top:3px}.wb-route>a{display:flex;align-items:center;gap:6px;font-size:11px;border-top:1px solid #e7edf6;padding-top:12px}.wb-shortcuts>button,.wb-shortcuts>a{display:flex;align-items:center;gap:8px;background:none;border:0;width:100%;font:inherit;font-size:12px;color:#526b8a;padding:9px 0;cursor:pointer;text-align:left}.wb-shortcuts>button>span,.wb-shortcuts>a>.icon:last-child{margin-left:auto;font-size:11px;color:#8796a9}.wb-shortcuts>p{font-size:10px;line-height:1.8;color:#8796a9;border-top:1px solid #edf0f5;padding-top:12px;margin:8px 0 0}.wb-business-home .wb-history{margin-top:18px}.wb-business-home .wb-history .wb-section-head{padding:16px 20px}.wb-business-home .wb-history .wb-section-head h2{font-size:14px}
@media(min-width:1500px){.wb-scene{padding:18px}.wb-scene>p{min-height:42px}}
@media(max-width:1150px){.wb-business-home .wb-layout{grid-template-columns:minmax(0,1fr) 225px}.wb-scene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wb-scene>p{min-height:0}}
@media(max-width:850px){.wb-business-home .wb-layout{grid-template-columns:minmax(0,1fr)}.wb-business-side{grid-template-columns:repeat(2,minmax(0,1fr))}.wb-business-side .wb-route{display:none}.wb-business-submit{flex-wrap:wrap}.wb-account>strong{font-size:22px}}
@media(max-width:540px){.wb-business-form{padding:16px}.wb-business-form>label{font-size:16px}.wb-business-form textarea{font-size:16px}.wb-business-submit{gap:10px}.wb-business-submit>.btn{width:100%;justify-content:center}.wb-business-submit input{font-size:16px}.wb-scene-grid{grid-template-columns:minmax(0,1fr)}.wb-scene{padding:14px}.wb-scene-top{margin-bottom:6px}.wb-scene>p{margin:4px 0 8px}.wb-scene>small{padding-top:7px}.wb-scenarios .wb-section-head{align-items:flex-start}.wb-scenarios .wb-section-head>a{font-size:11px}.wb-business-side{grid-template-columns:minmax(0,1fr)}.wb-utility-tools>summary{flex-wrap:wrap}.wb-utility-tools>summary>span{margin-left:0;display:block;width:100%;padding-left:24px}.wb-utility-tools .wb-templates{grid-template-columns:minmax(0,1fr)}.wb-business-home .wb-history .wb-section-head{align-items:flex-start;gap:10px}.wb-business-home .wb-history .wb-section-head>div:last-child{flex-wrap:wrap;gap:8px}}

/* Order center, resource guidance and progressively disclosed developer controls. */
.nav-advanced { margin-top: 5px; }
.nav-advanced>summary { padding: 8px 10px; color: var(--muted); font-size: 12px; cursor: pointer; }
.nav-advanced[open]>summary { margin-bottom: 3px; }
.order-center-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.order-center-tabs>a { padding: 3px 0 12px; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 550; }
.order-center-tabs>a.active { color: var(--primary); border-bottom-color: var(--primary); }
.order-overview { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 10px; background: #fff; margin: 0 0 18px; overflow: hidden; }
.order-overview>a { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; border-right: 1px solid var(--line); }
.order-overview>a:last-child { border-right: 0; }
.order-overview>a:hover { background: #f8faff; }
.order-overview span { color: var(--muted); font-size: 12px; }
.order-overview strong { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.orders-center>.page-note { margin: 0 0 18px; }
.orders-center>.payment-admin-panel { margin-top: 20px; }
.payment-state.expired { background: #f2f4f7; color: #667085; }
.payment-state.expired>span { background: #98a2b3; }
.console-disclosure { margin-top: 16px; }
.console-disclosure>summary { display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; font-weight: 550; }
.console-disclosure>summary::before { content: '›'; color: #98a2b3; font-size: 20px; line-height: 16px; transition: transform .15s; }
.console-disclosure[open]>summary::before { transform: rotate(90deg); }
.console-disclosure>summary::-webkit-details-marker { display: none; }
.console-disclosure>summary>.workspace-meta { margin-left: auto; text-align: right; font-weight: 400; }
.disclosure-body { border-top: 1px solid var(--line); padding: 18px 22px; min-width: 0; }
.disclosure-body>.muted { margin-bottom: 18px; max-width: 840px; line-height: 1.8; }
.disclosure-body .table-wrap { max-width: 100%; }
.keys-active .workspace-empty p { margin-top: 8px; }
.resource-guide { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; border: 1px solid #dfe8f6; background: #f5f8fd; border-radius: 10px; padding: 26px 30px; margin-bottom: 22px; }
.resource-guide-icon { display: inline-flex; padding: 9px; background: #e6efff; color: var(--primary); border-radius: 9px; margin-bottom: 12px; }
.resource-guide h2 { font-size: 16px; margin-bottom: 10px; }
.resource-guide p { color: var(--muted); line-height: 1.8; margin-top: 6px; }
.resource-guide p a { color: var(--primary); }
.resource-guide ol { list-style: none; margin: 0; padding: 0; display: grid; align-content: center; gap: 20px; }
.resource-guide li { display: flex; gap: 20px; align-items: baseline; }
.resource-guide li strong { flex: 0 0 65px; font-weight: 550; color: #315c9b; }
.resource-guide li span { color: var(--muted); line-height: 1.7; }
.resource-empty { padding: 46px 24px; text-align: center; }
.resource-empty>.icon { width: 28px; height: 28px; color: #98a2b3; margin-bottom: 16px; }
.resource-empty>p { margin: 8px auto 22px; color: var(--muted); max-width: 440px; line-height: 1.8; }
.resource-empty>.btn { margin: 4px; }
@media(max-width:900px) {
  .resource-guide { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 22px; }
  .order-overview>a { padding: 14px; }
}
@media(max-width:540px) {
  .order-center-tabs { gap: 20px; font-size: 12px; margin-bottom: 18px; }
  .order-overview { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .order-overview>a:nth-child(3) { border-right: 0; }
  .order-overview>a:nth-child(n+4) { border-top: 1px solid var(--line); }
  .order-overview strong { font-size: 22px; }
  .resource-guide { padding: 18px; }
  .resource-guide li { gap: 12px; }
  .resource-empty { padding: 32px 18px; }
  .console-disclosure>summary,.disclosure-body { padding: 16px; }
  .console-disclosure>summary { flex-wrap: wrap; gap: 8px; }
  .console-disclosure>summary>.workspace-meta { font-size: 11px; }
}