:root {
  color-scheme: light;
  --ink: #16191f;
  --ink-soft: #4e5662;
  --muted: #6b7480;
  --faint: #828a95;
  --line: #e0e4ea;
  --line-strong: #cfd5dd;
  --surface: #fff;
  --surface-soft: #f7f8fa;
  --canvas: #edf0f4;
  --accent: #3568e8;
  --accent-soft: #edf3ff;
  --green: #137752;
  --green-soft: #eaf8f2;
  --amber: #966019;
  --amber-soft: #fff7e8;
  --red: #bd2e42;
  --red-soft: #fff0f2;
  --shadow: 0 20px 54px rgba(28,35,47,.12), 0 3px 10px rgba(28,35,47,.05);
  --shadow-soft: 0 7px 20px rgba(28,35,47,.06), 0 1px 3px rgba(28,35,47,.035);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --content: 1320px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--canvas); font-size: 14px; line-height: 1.55; text-rendering: optimizeLegibility; }
button,input,select { font: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #1848bd; }
:focus-visible { outline: 3px solid rgba(53,104,232,.38); outline-offset: 3px; }
h1,h2,p { margin-top: 0; }
h1 { margin-bottom: 7px; font-size: clamp(27px,3.2vw,38px); line-height: 1.12; letter-spacing: -.045em; }
h2 { margin-bottom: 6px; font-size: 18px; line-height: 1.25; letter-spacing: -.025em; }

.skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; padding: 9px 13px; color: #fff; background: #20242a; border-radius: 9px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.brand { display: inline-flex; min-width: 0; align-items: center; gap: 10px; color: inherit; }
.brand__mark { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 auto; border: 1px solid #d7e2ff; border-radius: 12px; color: #2857c6; background: linear-gradient(145deg,#fff,#edf3ff); box-shadow: 0 6px 17px rgba(43,75,150,.11); font-size: 15px; font-weight: 800; }
.brand__copy { display: grid; min-width: 0; gap: 2px; line-height: 1.15; }
.brand__copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.brand__copy span { color: var(--muted); font-size: 10px; }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow--light { color: #b8cbff; }
.lede { max-width: 760px; margin-bottom: 0; color: var(--ink-soft); font-size: 13px; }

.topbar { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid rgba(215,220,228,.9); background: rgba(249,250,252,.9); backdrop-filter: blur(22px) saturate(150%); }
.topbar__inner { display: grid; width: min(calc(100% - 32px),var(--content)); min-height: 66px; margin: 0 auto; align-items: center; grid-template-columns: minmax(200px,auto) 1fr auto; gap: 22px; }
.brand-link { min-width: 0; color: inherit; }
.primary-nav { display: flex; align-items: center; justify-content: center; gap: 3px; }
.primary-nav a { display: inline-flex; min-height: 36px; padding: 8px 13px; align-items: center; border-radius: 10px; color: #59626f; font-size: 11px; font-weight: 700; }
.primary-nav a:hover { color: #27303b; background: #f0f2f5; }
.primary-nav a[aria-current="page"] { color: #214eb8; background: var(--accent-soft); }
.session-tools { display: flex; align-items: center; gap: 9px; }
.session-user { display: inline-flex; align-items: center; gap: 6px; color: #5a6370; font-size: 10px; font-weight: 700; }
.session-user span { color: var(--green); font-size: 7px; }
.logout-form { margin: 0; }

.button { display: inline-flex; min-height: 40px; padding: 9px 15px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-weight: 750; line-height: 1.2; transition: background .13s ease,border-color .13s ease,transform .13s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: none; }
.button--block { width: 100%; }
.button--small { min-height: 34px; padding: 7px 11px; font-size: 10px; }
.button--primary { color: #fff; background: #22262c; box-shadow: 0 7px 18px rgba(25,29,36,.16); }
.button--primary:hover { color: #fff; background: #050607; }
.button--danger { color: #fff; background: var(--red); box-shadow: none; }
.button--danger:hover { color: #fff; background: #9f2134; }
.button--quiet { color: #3e4651; border-color: var(--line); background: #fff; }
.button--quiet:hover { color: #16191f; background: #f5f6f8; }

.page { width: min(calc(100% - 32px),var(--content)); min-height: calc(100vh - 128px); margin: 0 auto; padding: 30px 0 46px; }
.page-heading { display: flex; margin-bottom: 20px; align-items: flex-end; justify-content: space-between; gap: 22px; }
.updated-at { display: grid; min-width: 210px; padding: 10px 12px; justify-items: end; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: #fff; font-size: 9px; box-shadow: var(--shadow-soft); }
.updated-at time,.updated-at span:last-child { color: #373e47; font-weight: 700; }
.section-block { margin-top: 24px; }
.section-heading,.panel__header { display: flex; margin-bottom: 12px; align-items: center; justify-content: space-between; gap: 16px; }
.section-heading h2,.panel__header h2 { margin-bottom: 0; }

.status-grid,.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.status-card,.metric-card,.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
.status-card { position: relative; min-width: 0; padding: 15px; overflow: hidden; }
.status-card::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: #bdc4ce; content: ""; }
.status-card--healthy::before { background: var(--green); }
.status-card--warning::before { background: #d79324; }
.status-card--critical::before { background: var(--red); }
.status-card__topline { display: flex; margin-bottom: 11px; align-items: center; gap: 8px; color: #616a76; font-size: 10px; font-weight: 750; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #8c949f; box-shadow: 0 0 0 4px #f0f2f5; }
.status-card--healthy .status-dot { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.status-card--warning .status-dot { background: #c6811c; box-shadow: 0 0 0 4px var(--amber-soft); }
.status-card--critical .status-dot { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.status-card strong { display: block; overflow: hidden; margin-bottom: 4px; font-size: 20px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.status-card p,.metric-card p { margin-bottom: 0; color: var(--muted); font-size: 10px; }
.metric-card { min-width: 0; padding: 14px 15px; }
.metric-card > span { color: #606976; font-size: 10px; font-weight: 700; }
.metric-card strong { display: block; overflow: hidden; margin: 5px 0 3px; font-size: 24px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.panel { padding: 18px; }
.panel__hint,.panel-intro { color: var(--muted); font-size: 10px; }
.panel-intro { margin: -3px 0 17px; font-size: 12px; }
.task-table-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.page-size-form { display: flex; align-items: center; gap: 7px; }
.page-size-form label { color: var(--ink-soft); font-size: 10px; font-weight: 750; }
.page-size-form select { min-width: 84px; min-height: 34px; padding: 6px 28px 6px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; }
.table-pagination { display: flex; margin-top: 12px; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.table-pagination nav { display: flex; align-items: center; gap: 7px; }
.button.is-disabled { cursor: default; opacity: .42; pointer-events: none; }

.table-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th,td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: #626b77; background: #f5f7f9; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafbfd; }
.mono,code { font-family: "SFMono-Regular",Consolas,"Liberation Mono",monospace; }
.mono { color: #4e5662; font-size: 10px; }

.badge { display: inline-flex; min-height: 23px; padding: 4px 8px; align-items: center; border: 1px solid var(--line); border-radius: 999px; color: #5f6874; background: #f4f6f8; font-size: 9px; font-weight: 800; line-height: 1; }
.badge--success { color: var(--green); border-color: #cce9dc; background: var(--green-soft); }
.badge--processing { color: #2354c4; border-color: #ccdaff; background: var(--accent-soft); }
.badge--failed { color: var(--red); border-color: #efcbd1; background: var(--red-soft); }
.badge--unknown { color: var(--amber); border-color: #edd8b4; background: var(--amber-soft); }
.job-status { position: relative; display: inline-flex; }
.job-status--explained { cursor: help; }
.job-status--explained .badge::after { display: inline-grid; width: 14px; height: 14px; margin-left: 5px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.7); content: "?"; font-size: 9px; }
.job-status__tooltip { position: absolute; z-index: 30; bottom: calc(100% + 8px); left: 50%; width: min(320px,calc(100vw - 32px)); padding: 10px 12px; border-radius: 10px; color: #fff; background: #20242a; box-shadow: 0 15px 35px rgba(25,29,36,.22); font-size: 10px; line-height: 1.55; white-space: normal; transform: translate(-50%,5px); opacity: 0; visibility: hidden; pointer-events: none; transition: .14s ease; }
.job-status--explained:hover .job-status__tooltip,.job-status--explained:focus .job-status__tooltip,.job-status--explained:focus-within .job-status__tooltip { transform: translate(-50%,0); opacity: 1; visibility: visible; }

.empty-state { display: grid; min-height: 110px; padding: 20px; place-items: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); background: rgba(255,255,255,.55); text-align: center; }
.empty-state p { margin-bottom: 0; }
.security-callout { display: flex; padding: 14px 16px; align-items: flex-start; gap: 12px; border: 1px solid #d5e1ff; border-radius: 13px; background: #f3f7ff; }
.security-callout__icon { display: grid; width: 29px; height: 29px; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: var(--accent); font-size: 9px; }
.security-callout h2 { margin-bottom: 3px; color: #234b9f; font-size: 14px; }
.security-callout p { margin-bottom: 0; color: #4c6087; font-size: 10px; }

.config-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 12px; }
.gateway-openai-page .config-layout { grid-template-columns: repeat(2,minmax(0,1fr)); }
.gateway-openai-page .config-layout > .panel:first-child { grid-row: span 2; }
.config-list { margin: 0; }
.config-list > div { display: grid; padding: 11px 0; grid-template-columns: minmax(125px,.42fr) minmax(0,1fr); gap: 13px; border-bottom: 1px solid var(--line); }
.config-list > div:last-child { border-bottom: 0; }
.config-list dt { color: var(--muted); font-size: 10px; font-weight: 700; }
.config-list dd { min-width: 0; margin: 0; color: #333a44; font-size: 10px; font-weight: 650; overflow-wrap: anywhere; }
.config-list code { padding: 3px 6px; border-radius: 6px; color: #315087; background: #f2f5fa; font-size: 9px; }
.lock-label { display: inline-block; margin-left: 6px; color: #2b56b5; font-size: 8px; font-weight: 800; }
.config-note { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 500; }

.form-stack { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { color: #4e5662; font-size: 10px; font-weight: 750; }
.field input,.field select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink); background: #fafbfc; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.field input:hover,.field select:hover { border-color: #b9c0ca; }
.field input:focus,.field select:focus { border-color: #7598ef; box-shadow: 0 0 0 4px rgba(53,104,232,.10); outline: none; }
.field input[readonly] { color: #657080; background: #f1f3f6; }
.field-help { margin: -1px 0 0; color: var(--muted); font-size: 9px; }
.form-warning { padding: 11px 12px; border: 1px solid #ead4ad; border-radius: 10px; color: #805119; background: var(--amber-soft); font-size: 10px; }
.form-warning strong { display: block; margin-bottom: 2px; }
.form-warning p { margin-bottom: 0; }

.notice-stack { display: grid; margin-bottom: 14px; gap: 7px; }
.notice { display: flex; padding: 10px 12px; align-items: flex-start; gap: 9px; border: 1px solid; border-radius: 10px; font-size: 10px; }
.notice p { margin-bottom: 0; }
.notice__dot { width: 7px; height: 7px; margin-top: 5px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.notice--info { color: #2354c4; border-color: #cad8fb; background: var(--accent-soft); }
.notice--success { color: var(--green); border-color: #c9e7d9; background: var(--green-soft); }
.notice--warning { color: var(--amber); border-color: #ecd6af; background: var(--amber-soft); }
.notice--error { color: var(--red); border-color: #efcbd2; background: var(--red-soft); }

.site-footer { width: min(calc(100% - 32px),var(--content)); padding: 15px 0 22px; margin: 0 auto; border-top: 1px solid #dce1e7; color: var(--muted); font-size: 9px; text-align: center; }
.site-footer p { margin-bottom: 0; }

.auth-page { background: linear-gradient(145deg,#e8edf5,#f4f6fa 48%,#e9edf4); }
.auth-main { display: grid; min-height: 100vh; padding: 28px; place-items: center; }
.auth-shell { display: grid; width: min(100%,920px); grid-template-columns: minmax(0,1.05fr) minmax(300px,.8fr); overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.auth-card { padding: clamp(30px,5vw,54px); }
.auth-card__header .brand { margin-bottom: 42px; }
.auth-card__header .lede { margin-bottom: 22px; }
.auth-aside { display: flex; min-height: 570px; padding: clamp(30px,4vw,46px); flex-direction: column; justify-content: center; color: #dce6ff; background: linear-gradient(155deg,#202838,#16243f 56%,#18315f); }
.auth-aside h2 { margin-bottom: 20px; color: #fff; font-size: 26px; }
.assurance-list { display: grid; padding: 0; margin: 0 0 26px; gap: 13px; list-style: none; }
.assurance-list li { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.assurance-list li span { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(171,194,251,.34); border-radius: 8px; color: #dfe8ff; background: rgba(112,143,221,.14); font-size: 10px; }
.aside-note { margin-bottom: 0; color: #aebbd7; font-size: 10px; }

@media (max-width: 980px) {
  .status-grid,.metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gateway-openai-page .config-layout { grid-template-columns: 1fr; }
  .gateway-openai-page .config-layout > .panel:first-child { grid-row: auto; }
  .topbar__inner { grid-template-columns: minmax(0,1fr) auto; padding: 8px 0 0; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; border-top: 1px solid var(--line); }
  .primary-nav a { flex: 0 0 auto; }
}

@media (max-width: 720px) {
  .auth-main { padding: 12px; }
  .auth-shell { grid-template-columns: 1fr; border-radius: 20px; }
  .auth-card { padding: 26px 20px 30px; }
  .auth-card__header .brand { margin-bottom: 34px; }
  .auth-aside { min-height: auto; padding: 28px 20px; }
  .page,.topbar__inner,.site-footer { width: min(calc(100% - 22px),var(--content)); }
  .page { padding: 23px 0 38px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .updated-at { width: 100%; justify-items: start; }
  .session-user { display: none; }
  .config-layout { grid-template-columns: 1fr; }
  .panel { padding: 15px; }
  .task-table-tools { width: 100%; align-items: flex-start; flex-direction: column; }
  .page-size-form { width: 100%; }
  .page-size-form select { flex: 1; }
  .table-pagination { align-items: flex-start; flex-direction: column; }
  .config-list > div { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 500px) {
  .brand__copy span { display: none; }
  .topbar__inner { width: 100%; padding-right: 11px; padding-left: 11px; }
  .primary-nav { margin-right: -11px; margin-left: -11px; padding: 0 7px; }
  .status-grid,.metric-grid { grid-template-columns: 1fr; }
  .section-heading,.panel__header { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .status-dot,.notice__dot,.brand__mark,.security-callout__icon { border: 1px solid currentColor; }
}

/*
 * A/B unified admin design system — 2026-08-26
 * Token values mirror A/assets/admin.css exactly. B keeps its independent
 * gateway identity while sharing typography, color, density and components.
 */
:root {
  --ui-font: Inter, "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --ui-canvas: #f5f7fb;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-sidebar: #07182c;
  --ui-sidebar-soft: #0d2744;
  --ui-text: #101828;
  --ui-text-secondary: #475467;
  --ui-muted: #667085;
  --ui-faint: #98a2b3;
  --ui-border: #e4e7ec;
  --ui-border-strong: #d0d5dd;
  --ui-primary: #155eef;
  --ui-primary-hover: #004eeb;
  --ui-primary-soft: #eff4ff;
  --ui-success: #039855;
  --ui-success-soft: #ecfdf3;
  --ui-warning: #dc6803;
  --ui-warning-soft: #fffaeb;
  --ui-danger: #d92d20;
  --ui-danger-soft: #fef3f2;
  --ui-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.055);
  --ui-shadow-raised: 0 18px 48px rgba(16,24,40,.12);
  --ink: var(--ui-text);
  --ink-soft: var(--ui-text-secondary);
  --muted: var(--ui-muted);
  --faint: var(--ui-faint);
  --line: var(--ui-border);
  --line-strong: var(--ui-border-strong);
  --surface: var(--ui-surface);
  --surface-soft: var(--ui-surface-soft);
  --canvas: var(--ui-canvas);
  --accent: var(--ui-primary);
  --accent-soft: var(--ui-primary-soft);
  --green: var(--ui-success);
  --green-soft: var(--ui-success-soft);
  --amber: var(--ui-warning);
  --amber-soft: var(--ui-warning-soft);
  --red: var(--ui-danger);
  --red-soft: var(--ui-danger-soft);
  --shadow: var(--ui-shadow-raised);
  --shadow-soft: var(--ui-shadow);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --content: 1480px;
  font-family: var(--ui-font);
}
body {
  color: var(--ui-text);
  background: var(--ui-canvas);
  font-family: var(--ui-font);
  font-size: 14px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button,input,select,textarea { font-family: var(--ui-font); }
:focus-visible { outline: 3px solid rgba(21,94,239,.28); outline-offset: 2px; }
a { color: var(--ui-primary); }
a:hover { color: var(--ui-primary-hover); }
h1 { margin-bottom: 6px; color: var(--ui-text); font-size: clamp(28px,2.4vw,34px); font-weight: 780; line-height: 1.2; letter-spacing: -.035em; }
h2 { color: var(--ui-text); font-size: 17px; font-weight: 750; }
.lede { color: var(--ui-muted); font-size: 13px; line-height: 1.6; }
.eyebrow { color: var(--ui-primary); font-size: 10px; font-weight: 750; letter-spacing: .08em; }

.gateway-console { display: grid; min-height: 100vh; grid-template-columns: 276px minmax(0,1fr); background: var(--ui-canvas); }
.gateway-sidebar {
  position: sticky;
  z-index: 40;
  top: 0;
  display: flex;
  height: 100vh;
  min-height: 0;
  padding: 20px 14px 0;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  background: var(--ui-sidebar);
  box-shadow: 10px 0 32px rgba(7,24,44,.08);
}
.gateway-sidebar .brand-link { display: block; padding: 5px 6px; border-radius: 10px; color: #fff; }
.gateway-sidebar .brand-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.gateway-sidebar .brand { gap: 11px; }
.gateway-sidebar .brand__mark {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(125,164,255,.72);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg,#155eef,#004eeb);
  box-shadow: 0 8px 20px rgba(0,56,170,.26);
  font-size: 18px;
}
.gateway-sidebar .brand__copy strong { color: #fff; font-size: 15px; font-weight: 760; }
.gateway-sidebar .brand__copy span { color: #b9c5d3; font-size: 10px; font-weight: 620; }
.gateway-sidebar .primary-nav { display: grid; margin-top: 26px; align-items: stretch; justify-content: stretch; gap: 6px; }
.gateway-sidebar .primary-nav a {
  display: flex;
  min-height: 46px;
  padding: 10px 12px;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #d5dfeb;
  font-size: 13px;
  font-weight: 650;
}
.gateway-sidebar .primary-nav a:hover { border-color: rgba(255,255,255,.08); color: #fff; background: rgba(255,255,255,.07); }
.gateway-sidebar .primary-nav a[aria-current="page"] {
  border-color: rgba(113,153,255,.36);
  color: #fff;
  background: linear-gradient(135deg,#244fbf,#315fd6);
  box-shadow: 0 8px 20px rgba(0,56,170,.26);
}
.nav-icon { display: grid; width: 22px; height: 22px; place-items: center; flex: 0 0 22px; color: inherit; font-size: 17px; line-height: 1; }
.gateway-sidebar .session-tools {
  display: grid;
  min-height: 116px;
  margin: auto -14px 0;
  padding: 15px 18px;
  grid-template-columns: 40px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.session-avatar { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: #17325a; background: #eef4ff; font-size: 14px; font-weight: 800; }
.gateway-sidebar .session-user { display: grid; min-width: 0; grid-template-columns: 8px minmax(0,1fr); align-items: center; column-gap: 6px; color: #fff; font-size: 12px; }
.gateway-sidebar .session-user > span { grid-row: 1; color: #12b76a; }
.gateway-sidebar .session-user strong { overflow: hidden; grid-column: 2; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.gateway-sidebar .session-user small { grid-column: 2; color: #aebdce; font-size: 10px; font-weight: 600; }
.gateway-sidebar .logout-form { grid-column: 1 / -1; }
.gateway-sidebar .logout-form .button { width: 100%; border-color: rgba(255,255,255,.13); color: #d5dfeb; background: rgba(255,255,255,.05); }
.gateway-sidebar .logout-form .button:hover { color: #fff; background: rgba(255,255,255,.10); }

.gateway-workspace { min-width: 0; height: 100vh; overflow: hidden auto; background: var(--ui-canvas); }
.gateway-topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  min-height: 68px;
  padding: 10px 30px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--ui-border);
  background: rgba(255,255,255,.97);
}
.gateway-topbar > div { display: grid; gap: 2px; }
.gateway-topbar > div span { color: var(--ui-faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.gateway-topbar > div strong { color: var(--ui-text); font-size: 16px; font-weight: 750; }
.gateway-topbar__status { display: inline-flex; min-height: 30px; padding: 6px 10px; align-items: center; gap: 7px; border: 1px solid #abefc6; border-radius: 999px; color: #067647; background: var(--ui-success-soft); font-size: 10px; font-weight: 750; }
.gateway-topbar__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-success); }

.gateway-page .page { width: min(calc(100% - 64px),var(--content)); min-height: auto; margin: 0 auto; padding: 28px 0 40px; }
.gateway-page .page-heading { margin-bottom: 22px; align-items: center; }
.gateway-page .page-heading .eyebrow { display: none; }
.updated-at { min-width: 220px; padding: 10px 12px; border-color: var(--ui-border); border-radius: 8px; color: var(--ui-muted); background: #fff; font-size: 10px; box-shadow: none; }
.section-block { margin-top: 20px; }
.section-heading,.panel__header { margin-bottom: 14px; }

.status-grid,.metric-grid { gap: 12px; }
.status-card,.metric-card,.panel {
  border-color: var(--ui-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--ui-shadow);
}
.status-card { padding: 17px; }
.status-card::before { display: none; }
.status-card__topline { color: var(--ui-text-secondary); font-size: 11px; }
.status-card strong { color: var(--ui-text); font-size: 21px; }
.status-card p,.metric-card p { color: var(--ui-muted); font-size: 10px; }
.status-dot { background: var(--ui-faint); box-shadow: 0 0 0 4px #f2f4f7; }
.status-card--healthy .status-dot { background: var(--ui-success); box-shadow: 0 0 0 4px var(--ui-success-soft); }
.status-card--warning .status-dot { background: var(--ui-warning); box-shadow: 0 0 0 4px var(--ui-warning-soft); }
.status-card--critical .status-dot { background: var(--ui-danger); box-shadow: 0 0 0 4px var(--ui-danger-soft); }
.metric-card { min-height: 94px; padding: 16px; }
.metric-card > span { color: var(--ui-text-secondary); font-size: 10px; }
.metric-card strong { color: var(--ui-text); font-size: 24px; }
.panel { padding: 20px; }
.panel__hint,.panel-intro { color: var(--ui-muted); }

.button { min-height: 40px; padding: 9px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; box-shadow: none; }
.button--small { min-height: 34px; padding: 7px 11px; font-size: 10px; }
.button--primary { color: #fff; background: var(--ui-primary); box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.button--primary:hover { color: #fff; background: var(--ui-primary-hover); }
.button--quiet { border-color: var(--ui-border-strong); color: var(--ui-text-secondary); background: #fff; }
.button--quiet:hover { border-color: #98a2b3; color: var(--ui-text); background: var(--ui-surface-soft); }
.button--danger { border-color: #fecdca; color: #b42318; background: var(--ui-danger-soft); }
.button--danger:hover { border-color: var(--ui-danger); color: #fff; background: var(--ui-danger); }

.table-scroll { border-color: var(--ui-border); border-radius: 10px; }
table { color: var(--ui-text-secondary); font-size: 12px; }
th { padding: 12px 14px; color: var(--ui-muted); background: var(--ui-surface-soft); font-size: 10px; font-weight: 700; }
td { padding: 13px 14px; border-bottom-color: var(--ui-border); }
tbody tr:hover td { background: #f9fafb; }
.mono { color: var(--ui-text-secondary); }
.page-size-form select,
.field input,.field select {
  min-height: 42px;
  border-color: var(--ui-border-strong);
  border-radius: 8px;
  color: var(--ui-text);
  background: #fff;
}
.field input:hover,.field select:hover { border-color: #98a2b3; }
.field input:focus,.field select:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 4px rgba(21,94,239,.10); }
.field input[readonly] { color: var(--ui-muted); background: #f2f4f7; }
.field label { color: var(--ui-text-secondary); font-size: 11px; font-weight: 700; }
.field-help { color: var(--ui-muted); font-size: 10px; }
.form-warning { border-color: #fedf89; border-radius: 8px; color: #b54708; background: var(--ui-warning-soft); }

.badge { min-height: 24px; padding: 4px 9px; border-color: var(--ui-border); border-radius: 999px; color: var(--ui-muted); background: #f2f4f7; font-size: 10px; }
.badge--success { border-color: #abefc6; color: #067647; background: var(--ui-success-soft); }
.badge--processing { border-color: #b2ccff; color: #175cd3; background: var(--ui-primary-soft); }
.badge--failed { border-color: #fecdca; color: #b42318; background: var(--ui-danger-soft); }
.badge--unknown { border-color: #fedf89; color: #b54708; background: var(--ui-warning-soft); }
.security-callout { border-color: #b2ccff; border-radius: 10px; background: var(--ui-primary-soft); }
.security-callout__icon { color: #fff; background: var(--ui-primary); }
.security-callout h2 { color: #175cd3; }
.security-callout p { color: #344054; font-size: 11px; }
.notice { border-radius: 8px; }
.notice--info { color: #175cd3; border-color: #b2ccff; background: var(--ui-primary-soft); }
.notice--success { color: #067647; border-color: #abefc6; background: var(--ui-success-soft); }
.notice--warning { color: #b54708; border-color: #fedf89; background: var(--ui-warning-soft); }
.notice--error { color: #b42318; border-color: #fecdca; background: var(--ui-danger-soft); }
.config-list > div { border-bottom-color: var(--ui-border); }
.config-list dt { color: var(--ui-muted); font-size: 10px; }
.config-list dd { color: var(--ui-text-secondary); font-size: 10px; }
.config-list code { color: #175cd3; background: var(--ui-primary-soft); }
.lock-label { color: #175cd3; }
.gateway-openai-page .config-layout { grid-template-columns: repeat(3,minmax(0,1fr)); }
.gateway-openai-page .config-layout > .panel:first-child { grid-row: auto; }

.site-footer { width: min(calc(100% - 64px),var(--content)); padding: 15px 0 24px; border-top-color: var(--ui-border); color: var(--ui-muted); font-size: 10px; }

.auth-page { background: var(--ui-canvas); }
.auth-main { padding: 34px; }
.auth-shell { width: min(100%,1230px); grid-template-columns: minmax(0,1.15fr) minmax(420px,.85fr); border-color: var(--ui-border); border-radius: 16px; box-shadow: var(--ui-shadow-raised); }
.auth-card { padding: clamp(44px,6vw,80px); }
.auth-card__header .brand { margin-bottom: 38px; }
.auth-card .brand__mark { width: 56px; height: 56px; border-color: #84adff; border-radius: 14px; color: #fff; background: linear-gradient(145deg,#155eef,#004eeb); box-shadow: 0 10px 24px rgba(21,94,239,.24); font-size: 28px; }
.auth-card .brand__copy strong { color: var(--ui-text); font-size: 22px; font-weight: 780; }
.auth-card .brand__copy span { color: var(--ui-muted); font-size: 12px; }
.auth-card h1 { margin-top: 8px; font-size: 36px; }
.auth-aside { min-height: 650px; padding: clamp(44px,5vw,72px); color: #dbe7f5; background: var(--ui-sidebar); }
.auth-aside h2 { color: #fff; font-size: 32px; }
.assurance-list li { border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0; color: #f0f5fb; font-size: 13px; }
.assurance-list li span { border-color: rgba(71,205,137,.38); color: #fff; background: var(--ui-success); }
.aside-note { color: #aebdce; }

@media (max-width: 1180px) {
  .gateway-console { grid-template-columns: 232px minmax(0,1fr); }
  .gateway-page .page,.site-footer { width: min(calc(100% - 48px),var(--content)); }
  .gateway-openai-page .config-layout { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gateway-openai-page .config-layout > .panel:first-child { grid-row: span 2; }
}
@media (max-width: 900px) {
  .gateway-console { display: block; }
  .gateway-sidebar { position: static; width: 100%; height: auto; min-height: 0; padding: 12px 14px; }
  .gateway-sidebar .brand-link { width: fit-content; }
  .gateway-sidebar .primary-nav { display: flex; margin-top: 12px; overflow-x: auto; }
  .gateway-sidebar .primary-nav a { min-width: max-content; }
  .gateway-sidebar .session-tools { display: flex; min-height: auto; margin: 12px 0 0; padding: 12px 0 0; border-top-color: rgba(255,255,255,.13); }
  .gateway-sidebar .session-avatar { width: 34px; height: 34px; }
  .gateway-sidebar .logout-form { margin-left: auto; }
  .gateway-sidebar .logout-form .button { width: auto; }
  .gateway-workspace { height: auto; min-height: calc(100vh - 190px); overflow: visible; }
  .gateway-topbar { position: static; padding: 10px 20px; }
  .gateway-page .page,.site-footer { width: min(calc(100% - 32px),var(--content)); }
  .gateway-openai-page .config-layout { grid-template-columns: 1fr; }
  .gateway-openai-page .config-layout > .panel:first-child { grid-row: auto; }
}
@media (max-width: 720px) {
  .auth-main { padding: 12px; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-card { padding: 30px 22px; }
  .auth-aside { min-height: auto; padding: 30px 22px; }
  .gateway-topbar__status { display: none; }
  .gateway-page .page { padding-top: 22px; }
  .gateway-page .page-heading { align-items: flex-start; flex-direction: column; }
  .status-grid,.metric-grid,.config-layout { grid-template-columns: 1fr; }
  .panel { padding: 16px; }
}

/* Full B-console interior reconstruction — 2026-08-26 */
.gateway-topbar { display: none; }
.gateway-page .page {
  width: min(calc(100% - 64px),1480px);
  padding: 30px 0 48px;
}
.gateway-workspace {
  background:
    radial-gradient(circle at 84% 0,rgba(21,94,239,.055),transparent 27%),
    linear-gradient(180deg,#f8faff 0,#f5f7fb 300px,#f5f7fb 100%);
}
.gateway-page .page-heading {
  position: relative;
  min-height: 118px;
  margin-bottom: 18px;
  padding: 24px 26px 22px 29px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #dce5f4;
  border-radius: 15px;
  background:
    radial-gradient(circle at 91% 8%,rgba(21,94,239,.14),transparent 25%),
    #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.03),0 12px 30px rgba(16,24,40,.05);
}
.gateway-page .page-heading::before {
  position: absolute;
  top: 23px;
  bottom: 23px;
  left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg,var(--ui-primary),#7f56d9);
  content: "";
}
.gateway-page .page-heading .eyebrow { display: block; margin-bottom: 6px; font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.gateway-page .page-heading h1 { margin: 0 0 6px; color: #0c1a2e; font-size: clamp(29px,2.3vw,36px); font-weight: 790; }
.gateway-page .page-heading .lede { max-width: 940px; color: #526174; font-size: 12px; }
.updated-at { min-width: 224px; border-color: #cbd8ee; background: rgba(255,255,255,.85); }

.dashboard-block.panel { padding: 17px; }
.dashboard-block .section-heading { min-height: 36px; margin: 0 2px 12px; }
.dashboard-block .section-heading h2 { font-size: 16px; }
.dashboard-status-block .status-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.dashboard-status-block .status-card {
  min-height: 104px;
  padding: 15px 16px;
  border-color: #e0e6ef;
  background: linear-gradient(145deg,#fff,#f9fbff);
  box-shadow: none;
}
.dashboard-status-block .status-card strong { margin-top: 10px; font-size: 17px; }
.dashboard-metrics-block .metric-grid { grid-template-columns: repeat(8,minmax(0,1fr)); }
.dashboard-metrics-block .metric-card {
  position: relative;
  min-height: 112px;
  padding: 16px 13px;
  overflow: hidden;
  border-color: #e0e6ef;
  background: #fff;
  box-shadow: none;
}
.dashboard-metrics-block .metric-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--ui-primary);
  content: "";
  opacity: .85;
}
.dashboard-metrics-block .metric-card:nth-child(4n+2)::before { background: var(--ui-success); }
.dashboard-metrics-block .metric-card:nth-child(4n+3)::before { background: var(--ui-warning); }
.dashboard-metrics-block .metric-card:nth-child(4n)::before { background: #7f56d9; }
.dashboard-metrics-block .metric-card strong { margin-top: 13px; font-size: clamp(19px,1.75vw,26px); letter-spacing: -.035em; }
.dashboard-metrics-block .metric-card p { margin-top: 6px; line-height: 1.4; }
.gateway-dashboard-page .panel.section-block { margin-top: 14px; }
.gateway-dashboard-page .panel__header { min-height: 46px; padding-bottom: 13px; border-bottom: 1px solid #edf0f4; }
.gateway-dashboard-page .table-scroll { border-radius: 10px; }
.gateway-dashboard-page .table-pagination { padding-top: 15px; border-top: 1px solid #edf0f4; }

.gateway-authorization-page .security-callout,
.gateway-openai-page > .gateway-console .security-callout { margin-bottom: 16px; padding: 17px 19px; border-radius: 12px; }
.authorization-layout { grid-template-columns: minmax(330px,.82fr) minmax(0,1.18fr); gap: 18px; align-items: stretch; }
.authorization-summary-panel,
.authorization-form-panel { min-height: 100%; padding: 22px; }
.authorization-summary-panel { border-top: 3px solid var(--ui-primary); }
.authorization-form-panel { border-top: 3px solid var(--ui-danger); }
.authorization-summary-panel .config-list { overflow: hidden; border: 1px solid #e3e8f0; border-radius: 11px; }
.authorization-summary-panel .config-list > div { min-height: 61px; padding: 13px 14px; }
.authorization-summary-panel .config-list > div:nth-child(odd) { background: #fbfcfe; }
.authorization-form-panel .form-stack { gap: 15px; }
.authorization-form-panel .field { display: grid; grid-template-columns: minmax(170px,.72fr) minmax(0,1.28fr); align-items: start; column-gap: 18px; }
.authorization-form-panel .field > label { padding-top: 12px; }
.authorization-form-panel .field > input,
.authorization-form-panel .field > select,
.authorization-form-panel .field > .field-help { grid-column: 2; }
.authorization-form-panel .form-warning,
.authorization-form-panel .button { margin-left: calc(170px + 18px); }
.authorization-form-panel .button { width: calc(100% - 188px); }
.authorization-verification { padding: 19px; }
.verification-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.verification-grid article { display: flex; min-height: 94px; padding: 15px; align-items: flex-start; gap: 11px; border: 1px solid #e1e7ef; border-radius: 10px; background: #fbfcfe; }
.verification-grid strong { display: block; margin-bottom: 5px; color: var(--ui-text); font-size: 12px; }
.verification-grid p { color: var(--ui-muted); font-size: 10px; line-height: 1.55; }
.verification-icon { display: grid; width: 28px; height: 28px; place-items: center; flex: 0 0 28px; border-radius: 50%; color: #175cd3; background: var(--ui-primary-soft); font-size: 12px; font-style: normal; font-weight: 800; }
.verification-icon--success { color: #067647; background: var(--ui-success-soft); }
.verification-icon--warning { color: #b54708; background: var(--ui-warning-soft); }

.gateway-openai-page .openai-control-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: stretch; }
.gateway-openai-page .openai-control-grid > .panel:first-child { grid-row: auto; }
.openai-panel { position: relative; min-height: 100%; padding: 21px; overflow: hidden; border-top: 3px solid var(--ui-primary); }
.openai-panel--protection { border-top-color: var(--ui-warning); }
.openai-panel--rotation { border-top-color: var(--ui-danger); }
.openai-panel .panel__header { min-height: 48px; padding-bottom: 13px; border-bottom: 1px solid #edf0f4; }
.openai-panel .panel__header h2 { display: flex; align-items: center; gap: 9px; }
.panel-step { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; color: #fff; background: var(--ui-primary); font-size: 11px; font-weight: 850; }
.openai-panel--protection .panel-step { background: var(--ui-warning); }
.openai-panel--rotation .panel-step { background: var(--ui-danger); }
.openai-panel .config-list { overflow: hidden; border: 1px solid #e3e8f0; border-radius: 10px; }
.openai-panel .config-list > div { min-height: 51px; padding: 11px 12px; }
.openai-panel .config-list > div:nth-child(odd) { background: #fbfcfe; }
.openai-panel .form-stack { gap: 14px; }
.openai-panel--protection .button--danger { border-color: #f79009; color: #fff; background: #f79009; }
.openai-panel--protection .button--danger:hover { border-color: #dc6803; background: #dc6803; }
.openai-panel--rotation .button--danger { color: #fff; background: var(--ui-danger); }
.openai-audit-note { margin-bottom: 0; }

.auth-shell { overflow: hidden; }
.auth-card--console { position: relative; background: #fff; }
.auth-card--console::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg,var(--ui-primary),#7f56d9);
  content: "";
}
.auth-card--console .form-stack { max-width: 520px; gap: 17px; }
.auth-card--console .button { min-height: 48px; }
.auth-aside--architecture { position: relative; overflow: hidden; }
.auth-aside--architecture::after { position: absolute; right: -110px; bottom: -110px; width: 300px; height: 300px; border: 1px solid rgba(132,173,255,.18); border-radius: 50%; box-shadow: 0 0 0 48px rgba(132,173,255,.05),0 0 0 96px rgba(132,173,255,.025); content: ""; }
.auth-boundary-map { position: relative; z-index: 1; display: grid; margin-top: 28px; padding: 16px; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; border: 1px solid rgba(132,173,255,.22); border-radius: 12px; background: rgba(255,255,255,.055); }
.auth-boundary-map span { padding: 9px 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #fff; background: rgba(255,255,255,.06); font-size: 10px; font-weight: 750; text-align: center; }
.auth-boundary-map i { color: #84adff; font-style: normal; }

@media (max-width: 1320px) {
  .dashboard-metrics-block .metric-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .gateway-openai-page .openai-control-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .openai-panel--connection { grid-row: span 2; }
}

@media (max-width: 1060px) {
  .gateway-page .page { width: min(calc(100% - 40px),1480px); padding-top: 24px; }
  .dashboard-status-block .status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .authorization-layout { grid-template-columns: 1fr; }
  .authorization-form-panel .field { grid-template-columns: minmax(150px,.6fr) minmax(0,1.4fr); }
  .authorization-form-panel .form-warning,
  .authorization-form-panel .button { margin-left: calc(150px + 18px); }
  .authorization-form-panel .button { width: calc(100% - 168px); }
  .verification-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .gateway-page .page { width: min(calc(100% - 32px),1480px); }
  .gateway-page .page-heading { min-height: 0; padding: 21px 20px 20px 24px; }
  .gateway-openai-page .openai-control-grid { grid-template-columns: 1fr; }
  .openai-panel--connection { grid-row: auto; }
}

@media (max-width: 720px) {
  .gateway-page .page { width: min(calc(100% - 24px),1480px); padding: 14px 0 34px; }
  .gateway-page .page-heading { padding: 20px 17px 18px 21px; align-items: flex-start; flex-direction: column; }
  .gateway-page .page-heading h1 { font-size: 27px; }
  .updated-at { width: 100%; min-width: 0; }
  .dashboard-status-block .status-grid,
  .dashboard-metrics-block .metric-grid,
  .verification-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .authorization-form-panel .field { grid-template-columns: 1fr; }
  .authorization-form-panel .field > label { padding-top: 0; }
  .authorization-form-panel .field > input,
  .authorization-form-panel .field > select,
  .authorization-form-panel .field > .field-help { grid-column: auto; }
  .authorization-form-panel .form-warning,
  .authorization-form-panel .button { margin-left: 0; }
  .authorization-form-panel .button { width: 100%; }
  .openai-panel { padding: 17px; }
  .auth-boundary-map { grid-template-columns: 1fr; }
  .auth-boundary-map i { transform: rotate(90deg); text-align: center; }
}

@media (max-width: 480px) {
  .gateway-page .page { width: min(calc(100% - 18px),1480px); }
  .gateway-page .page-heading { border-radius: 12px; }
  .gateway-page .page-heading h1 { font-size: 24px; }
  .dashboard-status-block .status-grid,
  .dashboard-metrics-block .metric-grid,
  .verification-grid { grid-template-columns: 1fr; }
  .dashboard-block.panel,
  .authorization-summary-panel,
  .authorization-form-panel,
  .authorization-verification { padding: 14px; }
}

/* Approved B-console design parity — 2026-08-26. Presentation only. */
@media (min-width: 901px) {
  .gateway-console { grid-template-columns: 284px minmax(0,1fr); }
  .gateway-sidebar { width: auto; }
  .gateway-workspace { height: 100vh; min-height: 0; overflow: auto; }
}

.gateway-page,
.auth-page {
  --ui-canvas: #f7f9fc;
  --ui-sidebar: #061a30;
  --ui-text: #0b1528;
  --ui-text-secondary: #344054;
  --ui-muted: #64748b;
  --ui-border: #e1e7ef;
  --ui-border-strong: #d3dbe7;
  --ui-primary: #1557e8;
  --ui-primary-hover: #0d49cf;
  --ui-primary-soft: #edf3ff;
  --ui-shadow: 0 1px 2px rgba(15,23,42,.025),0 7px 22px rgba(15,23,42,.035);
}
.gateway-sidebar {
  padding: 25px 14px 18px;
  background: linear-gradient(180deg,#06182d 0%,#071d35 100%);
  box-shadow: 6px 0 24px rgba(7,27,49,.07);
}
.gateway-sidebar .brand-link { padding: 0 5px; }
.gateway-sidebar .brand { gap: 12px; }
.gateway-sidebar .brand__mark { width: 51px; height: 51px; border: 2px solid #1764ff; border-radius: 9px; color: #3d79ff; background: rgba(18,71,168,.14); font-size: 29px; box-shadow: 0 6px 18px rgba(0,75,205,.16); }
.gateway-sidebar .brand__copy strong { color: #fff; font-size: 17px; }
.gateway-sidebar .brand__copy span { color: #c4d0dd; font-size: 11px; }
.gateway-sidebar .primary-nav { margin-top: 34px; gap: 10px; }
.gateway-sidebar .primary-nav a { min-height: 52px; padding: 13px 16px; border-radius: 8px; color: #f0f5fb; font-size: 14px; font-weight: 600; }
.gateway-sidebar .primary-nav a[aria-current="page"] { background: linear-gradient(135deg,#204bb4,#2c5bd0); box-shadow: 0 7px 18px rgba(0,54,160,.24); }
.gateway-sidebar .nav-icon { width: 24px; font-size: 20px; }
.gateway-sidebar .session-tools { margin-top: auto; padding: 20px 8px 0; border-top-color: rgba(255,255,255,.13); }
.gateway-sidebar .session-user strong { color: #fff; }
.gateway-sidebar .session-user small { color: #c2cfdd; }

.gateway-workspace { background: var(--ui-canvas); }
.gateway-page .page {
  width: 100%;
  max-width: none;
  padding: 26px 28px 36px 30px;
}
.gateway-page .page-heading {
  min-height: 64px;
  margin: 0 0 16px;
  padding: 0;
  align-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.gateway-page .page-heading::before { display: none; }
.gateway-page .page-heading .eyebrow { display: none; }
.gateway-page .page-heading h1 { margin: 0 0 4px; color: #091426; font-size: 30px; font-weight: 760; letter-spacing: -.035em; }
.gateway-page .page-heading .lede { max-width: 880px; margin: 0; color: #5f6f84; font-size: 13px; }
.gateway-page .updated-at { min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: right; }
.gateway-page .panel,
.gateway-page .security-callout {
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--ui-shadow);
}
.gateway-page .panel { padding: 18px; }
.gateway-page .panel__header { margin-bottom: 12px; }
.gateway-page .panel__header h2,
.gateway-page .section-heading h2 { color: #172033; font-size: 16px; font-weight: 700; }
.gateway-page .button { border-radius: 7px; }

.gateway-dashboard-page .dashboard-block.panel { padding: 14px; }
.gateway-dashboard-page .dashboard-block .section-heading { margin: 0 2px 10px; }
.gateway-dashboard-page .dashboard-status-block .status-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.gateway-dashboard-page .dashboard-status-block .status-card { min-height: 84px; padding: 14px 16px; border-radius: 8px; background: #fff; }
.gateway-dashboard-page .dashboard-status-block .status-card strong { margin-top: 6px; font-size: 15px; }
.gateway-dashboard-page .dashboard-status-block .status-card p { margin-top: 3px; font-size: 10px; }
.gateway-dashboard-page .dashboard-metrics-block .metric-grid { grid-template-columns: repeat(8,minmax(0,1fr)); gap: 10px; }
.gateway-dashboard-page .dashboard-metrics-block .metric-card { min-height: 88px; padding: 13px 12px; border-radius: 8px; }
.gateway-dashboard-page .dashboard-metrics-block .metric-card::before { display: none; }
.gateway-dashboard-page .dashboard-metrics-block .metric-card strong { margin-top: 7px; font-size: clamp(18px,1.6vw,24px); }
.gateway-dashboard-page .dashboard-metrics-block .metric-card p { margin-top: 3px; }
.gateway-dashboard-page .panel.section-block { margin-top: 14px; }
.gateway-dashboard-page .table-scroll { border-radius: 7px; }

.authorization-heading-note { display: flex; min-height: 48px; padding: 11px 16px; align-items: center; gap: 9px; border: 1px solid #b8d1ff; border-radius: 8px; color: #1557e8; background: #f0f5ff; font-size: 13px; font-weight: 650; white-space: nowrap; }
.authorization-heading-note span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #fff; background: var(--ui-primary); }
.gateway-authorization-page .authorization-layout { grid-template-columns: minmax(360px,.76fr) minmax(0,1.24fr); gap: 18px; }
.gateway-authorization-page .authorization-summary-panel,
.gateway-authorization-page .authorization-form-panel { padding: 20px; border-top: 1px solid var(--ui-border); }
.gateway-authorization-page .authorization-summary-panel .config-list > div { min-height: 58px; }
.gateway-authorization-page .authorization-form-panel .field { grid-template-columns: minmax(180px,.72fr) minmax(0,1.28fr); }
.gateway-authorization-page .authorization-form-panel .form-warning,
.gateway-authorization-page .authorization-form-panel .button { margin-left: 198px; }
.gateway-authorization-page .authorization-form-panel .button { width: calc(100% - 198px); }
.gateway-authorization-page .verification-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }

.gateway-openai-page .security-callout { margin-bottom: 18px; padding: 18px 20px; }
.gateway-openai-page .openai-control-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.gateway-openai-page .openai-panel { padding: 18px; border-top: 1px solid var(--ui-border); border-radius: 9px; }
.gateway-openai-page .openai-panel .panel__header { min-height: 44px; }
.gateway-openai-page .panel-step { width: 24px; height: 24px; border-radius: 6px; }

.auth-page { background: #f7f9fc; }
.auth-main { min-height: 100vh; padding: 84px 24px; }
.auth-shell {
  width: min(1232px,100%);
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: auto 56px;
  border: 1px solid #d8e0eb;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(15,23,42,.08);
}
.auth-card--console { min-height: 798px; padding: 88px 104px 70px; }
.auth-card--console::before { display: none; }
.auth-card--console .brand { margin-bottom: 34px; }
.auth-card--console .brand__mark { width: 80px; height: 80px; border-radius: 13px; font-size: 44px; }
.auth-card--console .brand__copy strong { font-size: 29px; }
.auth-card--console .brand__copy span { font-size: 17px; }
.auth-card--console h1 { margin-top: 28px; font-size: 36px; }
.auth-card--console .lede { margin-bottom: 30px; }
.auth-card--console .form-stack { max-width: none; gap: 18px; }
.auth-card--console input { min-height: 52px; }
.auth-card--console .button { min-height: 56px; font-size: 17px; }
.auth-aside--architecture { min-height: 798px; padding: 52px 72px; text-align: center; background: radial-gradient(circle at 50% 26%,#143967 0,#0b2343 42%,#071b35 100%); }
.auth-aside--architecture::after { display: none; }
.auth-shield-visual { position: relative; display: grid; width: 146px; height: 146px; margin: 0 auto 22px; place-items: center; border: 1px solid rgba(104,156,255,.3); border-radius: 50%; color: #9ec3ff; box-shadow: 0 0 0 21px rgba(71,126,226,.055),0 0 0 42px rgba(71,126,226,.025); }
.auth-shield-visual::before { position: absolute; width: 78px; height: 92px; border: 5px solid #397ce8; border-radius: 42% 42% 48% 48% / 28% 28% 65% 65%; content: ""; }
.auth-shield-visual span { position: relative; z-index: 1; font-size: 50px; font-weight: 500; }
.auth-aside--architecture .eyebrow { display: none; }
.auth-aside--architecture h2 { margin: 14px 0 4px; color: #fff; font-size: 34px; }
.auth-aside--architecture h2::after { display: block; margin-top: 8px; color: #b9c9df; content: "专用图片网关"; font-size: 17px; font-weight: 500; }
.auth-aside--architecture .assurance-list { margin-top: 28px; text-align: left; }
.auth-aside--architecture .assurance-list li { padding: 17px 0; }
.auth-footer-note { display: flex; min-height: 56px; margin: 0; grid-column: 1 / -1; align-items: center; justify-content: center; border-top: 1px solid #e4e9f0; color: #64748b; background: #fbfcfe; font-size: 13px; }

@media (max-width: 1320px) {
  .gateway-dashboard-page .dashboard-metrics-block .metric-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .gateway-openai-page .openai-control-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gateway-openai-page .openai-panel--connection { grid-row: span 2; }
}
@media (max-width: 1060px) {
  .gateway-page .page { padding: 22px 20px 34px; }
  .gateway-dashboard-page .dashboard-status-block .status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gateway-authorization-page .authorization-layout { grid-template-columns: 1fr; }
  .gateway-authorization-page .verification-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .gateway-sidebar { padding: 12px 14px; }
  .gateway-sidebar .brand__mark { width: 40px; height: 40px; font-size: 22px; }
  .gateway-sidebar .primary-nav { margin-top: 12px; }
  .gateway-page .page { padding: 20px 16px 32px; }
  .gateway-page .page-heading { min-height: 0; }
  .gateway-openai-page .openai-control-grid { grid-template-columns: 1fr; }
  .gateway-openai-page .openai-panel--connection { grid-row: auto; }
  .auth-main { padding: 20px; }
  .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto auto 54px; }
  .auth-card--console { min-height: 0; padding: 48px 44px; }
  .auth-aside--architecture { min-height: 0; padding: 46px 44px; }
  .auth-footer-note { grid-column: 1; }
}
@media (max-width: 720px) {
  .gateway-sidebar .primary-nav {
    display: grid;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 4px;
    overflow: visible;
  }
  .gateway-sidebar .primary-nav a {
    min-width: 0;
    min-height: 48px;
    padding: 10px 5px;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    white-space: nowrap;
  }
  .gateway-sidebar .nav-icon { width: 19px; font-size: 16px; }
  .gateway-page .page-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .gateway-page .page-heading h1 { font-size: 27px; }
  .authorization-heading-note { width: 100%; white-space: normal; }
  .gateway-dashboard-page .dashboard-status-block .status-grid,
  .gateway-dashboard-page .dashboard-metrics-block .metric-grid,
  .gateway-authorization-page .verification-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gateway-authorization-page .authorization-form-panel .field { grid-template-columns: 1fr; }
  .gateway-authorization-page .authorization-form-panel .field > label { padding-top: 0; }
  .gateway-authorization-page .authorization-form-panel .field > input,
  .gateway-authorization-page .authorization-form-panel .field > select,
  .gateway-authorization-page .authorization-form-panel .field > .field-help { grid-column: auto; }
  .gateway-authorization-page .authorization-form-panel .form-warning,
  .gateway-authorization-page .authorization-form-panel .button { width: 100%; margin-left: 0; }
  .auth-main { padding: 12px; }
  .auth-card--console { padding: 34px 22px; }
  .auth-card--console .brand__mark { width: 58px; height: 58px; font-size: 32px; }
  .auth-card--console .brand__copy strong { font-size: 21px; }
  .auth-card--console .brand__copy span { font-size: 12px; }
  .auth-card--console h1 { font-size: 30px; }
  .auth-aside--architecture { padding: 36px 24px; }
  .auth-shield-visual { width: 112px; height: 112px; }
}
@media (max-width: 480px) {
  .gateway-page .page { padding: 16px 9px 28px; }
  .gateway-dashboard-page .dashboard-status-block .status-grid,
  .gateway-dashboard-page .dashboard-metrics-block .metric-grid,
  .gateway-authorization-page .verification-grid { grid-template-columns: 1fr; }
  .gateway-page .panel { padding: 14px; }
  .auth-footer-note { padding: 12px 18px; text-align: center; }
}

/* Product Design v4 — same approved visual system as the A console. */
.product-design-v4 {
  --pd-canvas: #f8fafc;
  --pd-sidebar: #071b31;
  --pd-sidebar-active: #2357c8;
  --pd-text: #101828;
  --pd-copy: #344054;
  --pd-muted: #667085;
  --pd-faint: #98a2b3;
  --pd-line: #e1e7ef;
  --pd-blue: #2463eb;
  --pd-green: #12a164;
  --pd-orange: #f59e0b;
  --pd-red: #d92d20;
  --pd-radius: 10px;
  --pd-shadow: 0 1px 2px rgba(15,23,42,.025),0 6px 18px rgba(15,23,42,.03);
  color: var(--pd-text);
  background: var(--pd-canvas);
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
}

@media (min-width: 901px) {
  .product-design-v4 .gateway-console { grid-template-columns: 216px minmax(0,1fr); }
  .product-design-v4 .gateway-topbar { display: none; }
  .product-design-v4 .gateway-workspace { height: 100vh; overflow: auto; }
}

.product-design-v4 .gateway-sidebar {
  padding: 22px 12px 0;
  background: linear-gradient(180deg,#06192e 0%,#091f37 100%);
  box-shadow: 6px 0 24px rgba(7,27,49,.06);
}
.product-design-v4 .gateway-sidebar .brand-link { padding: 3px 8px; }
.product-design-v4 .gateway-sidebar .brand { gap: 10px; }
.product-design-v4 .gateway-sidebar .brand__mark {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}
.product-design-v4 .gateway-sidebar .brand__copy strong { color: #fff; font-size: 14px; font-weight: 700; }
.product-design-v4 .gateway-sidebar .brand__copy span { color: #c3cfdd; font-size: 9px; }
.product-design-v4 .gateway-sidebar .primary-nav { margin-top: 28px; gap: 4px; }
.product-design-v4 .gateway-sidebar .primary-nav a {
  min-height: 42px;
  padding: 9px 12px;
  gap: 10px;
  border-radius: 8px;
  color: #e9f0f8;
  font-size: 13px;
  font-weight: 560;
}
.product-design-v4 .gateway-sidebar .primary-nav a:hover { color: #fff; background: rgba(255,255,255,.075); }
.product-design-v4 .gateway-sidebar .primary-nav a[aria-current="page"] { color: #fff; background: linear-gradient(135deg,#1f4db8,#2c5fd3); box-shadow: 0 5px 14px rgba(0,55,166,.25); }
.product-design-v4 .gateway-sidebar .nav-icon { width: 19px; height: 19px; flex: 0 0 19px; filter: brightness(0) invert(1); opacity: .94; }
.product-design-v4 .gateway-sidebar .session-tools { padding: 14px 4px; gap: 9px; border-top-color: rgba(255,255,255,.13); }
.product-design-v4 .gateway-sidebar .session-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #fff; }
.product-design-v4 .gateway-sidebar .session-avatar img { width: 21px; height: 21px; opacity: .56; }
.product-design-v4 .gateway-sidebar .session-user { display: grid; flex: 1; gap: 1px; }
.product-design-v4 .gateway-sidebar .session-user > span { display: none; }
.product-design-v4 .gateway-sidebar .session-user strong { color: #fff; font-size: 11px; }
.product-design-v4 .gateway-sidebar .session-user small { color: #c3cfdd; font-size: 9px; }
.product-design-v4 .gateway-sidebar .logout-form .button { width: 32px; min-height: 32px; padding: 6px; overflow: hidden; border-color: rgba(255,255,255,.15); color: transparent; background: transparent; }
.product-design-v4 .gateway-sidebar .logout-form .button img { width: 18px; height: 18px; flex: 0 0 18px; filter: brightness(0) invert(1); opacity: .86; }

.product-design-v4 .gateway-workspace { min-width: 0; background: var(--pd-canvas); }
.product-design-v4 .page { width: 100%; max-width: none; min-height: 100vh; padding: 24px 26px 38px 28px; }
.product-design-v4 .gateway-breadcrumb {
  display: flex;
  min-height: 22px;
  margin-bottom: 12px;
  align-items: center;
  gap: 10px;
  color: var(--pd-muted);
  font-size: 12px;
}
.product-design-v4 .gateway-breadcrumb i { color: #b0b8c5; font-style: normal; }
.product-design-v4 .gateway-breadcrumb strong { color: #536174; font-weight: 560; }
.product-design-v4 .page-heading {
  min-height: 52px;
  margin: 0 0 16px;
  padding: 0;
  align-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.product-design-v4 .page-heading::before { display: none; }
.product-design-v4 .page-heading > div:first-child { display: flex; min-width: 0; align-items: baseline; flex-wrap: wrap; gap: 5px 22px; }
.product-design-v4 .page-heading .eyebrow { display: none; }
.product-design-v4 .page-heading h1 { margin: 0; color: var(--pd-text); font-size: clamp(27px,2vw,32px); font-weight: 740; letter-spacing: -.035em; }
.product-design-v4 .page-heading .lede { max-width: 840px; margin: 0; color: var(--pd-muted); font-size: 13px; }
.product-design-v4 .updated-at { min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 10px; }

.product-design-v4 .panel,
.product-design-v4 .status-card,
.product-design-v4 .metric-card,
.product-design-v4 .security-callout,
.product-design-v4 .notice,
.product-design-v4 .empty-state {
  border-color: var(--pd-line);
  border-radius: var(--pd-radius);
  background: #fff;
  box-shadow: var(--pd-shadow);
}
.product-design-v4 .panel { padding: 18px; }
.product-design-v4 .panel__header,
.product-design-v4 .section-heading { min-height: 42px; margin-bottom: 15px; padding-bottom: 12px; align-items: flex-start; border-bottom: 1px solid #edf0f4; }
.product-design-v4 .panel__header h2,
.product-design-v4 .section-heading h2 { color: #172033; font-size: 16px; font-weight: 700; }
.product-design-v4 .section-block { margin-top: 16px; }
.product-design-v4 .button { min-height: 39px; border-radius: 7px; font-weight: 650; }
.product-design-v4 .button--primary { border-color: var(--pd-blue); background: var(--pd-blue); box-shadow: 0 4px 10px rgba(36,99,235,.13); }
.product-design-v4 .button--primary:hover { background: #1554d7; }
.product-design-v4 .button--quiet { border-color: #d8dee8; color: #344054; background: #fff; }
.product-design-v4 .button--danger { border-color: var(--pd-red); background: var(--pd-red); }
.product-design-v4 .badge { min-height: 24px; padding: 4px 9px; border-radius: 6px; }
.product-design-v4 .field { gap: 7px; }
.product-design-v4 .field label { color: #344054; font-size: 11px; font-weight: 650; }
.product-design-v4 .field input,
.product-design-v4 .field select { min-height: 42px; border-color: #d5dce6; border-radius: 7px; color: var(--pd-text); background: #fff; }
.product-design-v4 .field input:focus,
.product-design-v4 .field select:focus { border-color: #84adff; box-shadow: 0 0 0 3px rgba(36,99,235,.11); }
.product-design-v4 .field-help { color: var(--pd-muted); }
.product-design-v4 .form-warning { border-color: #fedf89; border-radius: 8px; background: #fffaeb; }
.product-design-v4 .table-scroll { border-color: var(--pd-line); border-radius: 8px; }
.product-design-v4 table { font-size: 12px; }
.product-design-v4 th { padding: 11px 13px; color: #475467; background: #fafbfd; font-size: 11px; font-weight: 650; }
.product-design-v4 td { min-height: 50px; padding: 11px 13px; border-bottom-color: #e8ecf1; }
.product-design-v4 tbody tr:hover td { background: #f8faff; }

.product-design-v4.gateway-dashboard-page .dashboard-status-block,
.product-design-v4.gateway-dashboard-page .dashboard-metrics-block { padding: 16px; }
.product-design-v4.gateway-dashboard-page .dashboard-status-block .status-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.product-design-v4.gateway-dashboard-page .status-card { min-height: 118px; padding: 16px; overflow: hidden; }
.product-design-v4.gateway-dashboard-page .status-card::before { height: 3px; }
.product-design-v4.gateway-dashboard-page .status-card strong { margin-top: 8px; color: var(--pd-text); font-size: 22px; font-weight: 650; }
.product-design-v4.gateway-dashboard-page .status-card p { margin-top: 5px; color: var(--pd-muted); }
.product-design-v4.gateway-dashboard-page .dashboard-metrics-block .metric-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.product-design-v4.gateway-dashboard-page .metric-card { min-height: 106px; padding: 16px; }
.product-design-v4.gateway-dashboard-page .metric-card strong { margin: 7px 0 3px; color: var(--pd-text); font-size: 26px; font-weight: 650; }
.product-design-v4.gateway-dashboard-page .metric-card p { color: var(--pd-muted); }
.product-design-v4.gateway-dashboard-page .panel.section-block { margin-top: 16px; }

.product-design-v4 .authorization-heading-note { min-height: 42px; padding: 8px 12px; border-color: #b7ccff; border-radius: 8px; background: #eff4ff; }
.product-design-v4 .authorization-heading-note img { width: 19px; height: 19px; filter: invert(33%) sepia(95%) saturate(2300%) hue-rotate(213deg) brightness(94%); }
.product-design-v4.gateway-authorization-page .authorization-layout { grid-template-columns: minmax(340px,.8fr) minmax(0,1.2fr); gap: 16px; }
.product-design-v4.gateway-authorization-page .authorization-summary-panel,
.product-design-v4.gateway-authorization-page .authorization-form-panel { padding: 18px; border-top: 1px solid var(--pd-line); }
.product-design-v4.gateway-authorization-page .authorization-form-panel .field { grid-template-columns: minmax(170px,.68fr) minmax(0,1.32fr); }
.product-design-v4.gateway-authorization-page .authorization-form-panel .form-warning,
.product-design-v4.gateway-authorization-page .authorization-form-panel .button { margin-left: 188px; }
.product-design-v4.gateway-authorization-page .authorization-form-panel .button { width: calc(100% - 188px); }
.product-design-v4 .verification-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.product-design-v4 .verification-grid article { min-height: 98px; border-color: var(--pd-line); border-radius: 8px; background: #fbfcfe; }
.product-design-v4 .verification-icon { border-radius: 8px; background: #eff4ff; }
.product-design-v4 .verification-icon img { width: 16px; height: 16px; opacity: .8; }

.product-design-v4.gateway-openai-page .security-callout { margin-bottom: 16px; padding: 16px 18px; }
.product-design-v4 .security-callout__icon { border-radius: 8px; background: var(--pd-blue); }
.product-design-v4 .security-callout__icon img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.product-design-v4.gateway-openai-page .openai-control-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.product-design-v4.gateway-openai-page .openai-panel { padding: 18px; border-top: 1px solid var(--pd-line); border-radius: 10px; }
.product-design-v4 .panel-step { border-radius: 6px; background: var(--pd-blue); }
.product-design-v4 .config-list { border-color: var(--pd-line); border-radius: 8px; }
.product-design-v4 .config-list > div { border-bottom-color: #e8ecf1; }

.product-design-v4.gateway-login-page { background: #f5f7fb; }
.product-design-v4 .auth-main { min-height: 100vh; padding: 48px 24px; }
.product-design-v4 .auth-shell {
  width: min(1120px,100%);
  grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr);
  grid-template-rows: auto 54px;
  border: 1px solid #d9e0ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 42px rgba(15,23,42,.09);
}
.product-design-v4 .auth-card--console { min-height: 690px; padding: 72px 82px 58px; }
.product-design-v4 .auth-card--console::before { display: none; }
.product-design-v4 .auth-card--console .brand { margin-bottom: 36px; }
.product-design-v4 .auth-card--console .brand__mark { width: 58px; height: 58px; padding: 0; border: 0; border-radius: 0; object-fit: contain; background: transparent; box-shadow: none; }
.product-design-v4 .auth-card--console .brand__copy strong { color: var(--pd-text); font-size: 20px; }
.product-design-v4 .auth-card--console .brand__copy span { color: var(--pd-muted); font-size: 11px; }
.product-design-v4 .auth-card--console h1 { margin: 0 0 8px; color: var(--pd-text); font-size: 32px; font-weight: 740; }
.product-design-v4 .auth-card--console .lede { margin-bottom: 26px; }
.product-design-v4 .auth-card--console .button { min-height: 50px; font-size: 15px; }
.product-design-v4 .auth-aside--architecture { min-height: 690px; padding: 56px; background: radial-gradient(circle at 50% 25%,#143967 0,#0b2343 44%,#071b35 100%); }
.product-design-v4 .auth-aside--architecture::after,
.product-design-v4 .auth-shield-visual::before { display: none; }
.product-design-v4 .auth-shield-visual { width: 126px; height: 126px; margin-bottom: 28px; border-color: rgba(126,170,255,.28); background: rgba(45,94,180,.13); box-shadow: 0 0 0 20px rgba(71,126,226,.05),0 0 0 40px rgba(71,126,226,.025); }
.product-design-v4 .auth-shield-visual img { width: 60px; height: 60px; filter: brightness(0) invert(1); opacity: .82; }
.product-design-v4 .auth-aside--architecture h2 { margin: 10px 0 8px; font-size: 28px; }
.product-design-v4 .auth-aside--architecture h2::after { display: none; }
.product-design-v4 .assurance-list li { padding: 10px 0; }
.product-design-v4 .assurance-list li img { width: 20px; height: 20px; filter: brightness(0) invert(1); opacity: .78; }
.product-design-v4 .auth-footer-note { min-height: 54px; border-top-color: var(--pd-line); background: #fbfcfe; }

@media (min-width: 901px) and (max-height: 800px) {
  .product-design-v4 .auth-main { padding: 18px 24px; }
  .product-design-v4 .auth-card--console { min-height: 610px; padding: 46px 68px 38px; }
  .product-design-v4 .auth-card--console .brand { margin-bottom: 26px; }
  .product-design-v4 .auth-card--console .lede { margin-bottom: 20px; }
  .product-design-v4 .auth-aside--architecture { min-height: 610px; padding: 38px 56px; }
  .product-design-v4 .auth-shield-visual { width: 112px; height: 112px; margin-bottom: 20px; }
  .product-design-v4 .auth-footer-note { min-height: 48px; }
}

@media (max-width: 1180px) {
  .product-design-v4.gateway-dashboard-page .dashboard-metrics-block .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-design-v4.gateway-openai-page .openai-control-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-design-v4.gateway-openai-page .openai-panel--connection { grid-row: span 2; }
}
@media (max-width: 900px) {
  .product-design-v4 .gateway-sidebar { padding: 12px 14px; }
  .product-design-v4 .gateway-sidebar .brand__mark { width: 38px; height: 38px; }
  .product-design-v4 .gateway-sidebar .primary-nav { margin-top: 12px; }
  .product-design-v4 .gateway-sidebar .session-tools { margin-top: 12px; }
  .product-design-v4 .page { padding: 20px 16px 32px; }
  .product-design-v4.gateway-authorization-page .authorization-layout,
  .product-design-v4.gateway-openai-page .openai-control-grid { grid-template-columns: 1fr; }
  .product-design-v4.gateway-openai-page .openai-panel--connection { grid-row: auto; }
  .product-design-v4 .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto auto 54px; }
  .product-design-v4 .auth-card--console { min-height: 0; padding: 48px 42px; }
  .product-design-v4 .auth-aside--architecture { min-height: 0; padding: 44px; }
}
@media (max-width: 720px) {
  .product-design-v4 .page-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .product-design-v4 .page-heading > div:first-child { display: block; }
  .product-design-v4 .page-heading .lede { margin-top: 5px; }
  .product-design-v4.gateway-dashboard-page .dashboard-status-block .status-grid,
  .product-design-v4.gateway-dashboard-page .dashboard-metrics-block .metric-grid,
  .product-design-v4 .verification-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-design-v4.gateway-authorization-page .authorization-form-panel .field { grid-template-columns: 1fr; }
  .product-design-v4.gateway-authorization-page .authorization-form-panel .field > label,
  .product-design-v4.gateway-authorization-page .authorization-form-panel .field > input,
  .product-design-v4.gateway-authorization-page .authorization-form-panel .field > select,
  .product-design-v4.gateway-authorization-page .authorization-form-panel .field > .field-help { grid-column: auto; padding-top: 0; }
  .product-design-v4.gateway-authorization-page .authorization-form-panel .form-warning,
  .product-design-v4.gateway-authorization-page .authorization-form-panel .button { width: 100%; margin-left: 0; }
  .product-design-v4 .auth-main { padding: 12px; }
  .product-design-v4 .auth-card--console { padding: 34px 22px; }
  .product-design-v4 .auth-aside--architecture { padding: 36px 24px; }
}
@media (max-width: 480px) {
  .product-design-v4 .page { padding: 16px 10px 28px; }
  .product-design-v4.gateway-dashboard-page .dashboard-status-block .status-grid,
  .product-design-v4.gateway-dashboard-page .dashboard-metrics-block .metric-grid,
  .product-design-v4 .verification-grid { grid-template-columns: 1fr; }
  .product-design-v4 .panel { padding: 14px; }
}

/* Product Design v5 — complete B-console redesign, isolated from A/user UI. */
.product-design-v4 {
  --pd5-canvas: #f5f7fb;
  --pd5-surface: #fff;
  --pd5-sidebar: #071b31;
  --pd5-sidebar-2: #0a223c;
  --pd5-blue: #2463eb;
  --pd5-text: #101828;
  --pd5-copy: #344054;
  --pd5-muted: #667085;
  --pd5-line: #e2e8f0;
  --pd5-radius: 10px;
  --pd5-shadow: 0 1px 2px rgba(15,23,42,.025),0 8px 24px rgba(15,23,42,.035);
  color: var(--pd5-text);
  background: var(--pd5-canvas);
  font-family: "Microsoft YaHei UI","Microsoft YaHei","PingFang SC",system-ui,-apple-system,sans-serif;
}
.product-design-v4 .gateway-console { grid-template-columns: 216px minmax(0,1fr); }
.product-design-v4 .gateway-sidebar {
  padding: 18px 12px 0;
  border-right: 1px solid rgba(255,255,255,.055);
  background: linear-gradient(180deg,var(--pd5-sidebar) 0%,var(--pd5-sidebar-2) 100%);
  box-shadow: 10px 0 28px rgba(7,27,49,.08);
}
.product-design-v4 .gateway-sidebar .brand { gap: 10px; padding: 3px 8px; }
.product-design-v4 .gateway-sidebar .brand__mark { width: 38px; height: 38px; object-fit: contain; }
.product-design-v4 .gateway-sidebar .brand__copy strong { font-size: 15px; }
.product-design-v4 .gateway-sidebar .brand__copy span { color: rgba(221,233,246,.62); font-size: 9px; letter-spacing: .07em; }
.product-design-v4 .gateway-sidebar .primary-nav { display: grid; margin-top: 20px; gap: 2px; }
.product-design-v4 .gateway-sidebar .nav-group-label {
  min-height: 23px;
  margin-top: 7px;
  padding: 6px 11px 3px;
  color: rgba(196,214,234,.46);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}
.product-design-v4 .gateway-sidebar .primary-nav a {
  min-height: 37px;
  padding: 8px 11px;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: rgba(236,244,252,.88);
  font-size: 12px;
  font-weight: 560;
}
.product-design-v4 .gateway-sidebar .primary-nav a:hover { border-color: rgba(255,255,255,.06); background: rgba(255,255,255,.065); }
.product-design-v4 .gateway-sidebar .primary-nav a[aria-current="page"] {
  border-color: rgba(139,177,255,.18);
  background: linear-gradient(135deg,#2259d3 0%,#2d6cf0 100%);
  box-shadow: 0 7px 18px rgba(0,67,177,.23);
}
.product-design-v4 .gateway-sidebar .nav-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.product-design-v4 .gateway-sidebar .session-tools {
  margin: auto -12px 0;
  padding: 13px 18px;
  border-top: 1px solid rgba(255,255,255,.075);
  background: rgba(0,0,0,.08);
}
.product-design-v4 .gateway-sidebar .session-avatar { width: 34px; height: 34px; }
.product-design-v4 .gateway-sidebar .session-user { padding-left: 0; }
.product-design-v4 .gateway-sidebar .session-user::before { display: block; width: 7px; height: 7px; border-radius: 50%; background: #35c77b; content: ""; }

.product-design-v4 .gateway-topbar {
  min-height: 58px;
  padding: 0 26px 0 28px;
  border-bottom: 1px solid var(--pd5-line);
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 0 rgba(15,23,42,.015);
}
.product-design-v4 .gateway-topbar > div span { color: #98a2b3; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.product-design-v4 .gateway-topbar > div strong { color: #243047; font-size: 13px; }
.product-design-v4 .gateway-topbar__status { min-height: 30px; padding: 5px 10px; border: 1px solid #bcebd2; border-radius: 7px; color: #168553; background: #edf8f2; font-size: 10px; }
.product-design-v4 .page { max-width: none; min-width: 0; padding: 22px 28px 42px; background: var(--pd5-canvas); }
.product-design-v4 .gateway-breadcrumb { margin-bottom: 14px; color: #98a2b3; font-size: 11px; }
.product-design-v4 .gateway-breadcrumb strong { color: #475467; }
.product-design-v4 .page-heading {
  position: relative;
  min-height: 58px;
  margin: 0 0 18px;
  padding-left: 58px;
  align-items: center;
}
.product-design-v4 .gateway-page-emblem {
  position: absolute;
  top: 2px;
  left: 0;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #cfddff;
  border-radius: 10px;
  background: linear-gradient(145deg,#f6f9ff,#eaf1ff);
  box-shadow: 0 6px 16px rgba(36,99,235,.075);
}
.product-design-v4 .gateway-page-emblem img { width: 22px; height: 22px; filter: invert(35%) sepia(93%) saturate(2862%) hue-rotate(216deg) brightness(96%) contrast(92%); }
.product-design-v4 .page-heading h1 { margin: 0; color: var(--pd5-text); font-size: clamp(24px,2vw,30px); font-weight: 720; letter-spacing: -.02em; }
.product-design-v4 .page-heading .eyebrow { margin: 0 0 3px; color: var(--pd5-blue); font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.product-design-v4 .page-heading .lede { margin: 4px 0 0; color: var(--pd5-muted); font-size: 12px; line-height: 1.6; }
.product-design-v4 .updated-at,
.product-design-v4 .authorization-heading-note { min-height: 34px; padding: 7px 11px; border: 1px solid #d8e4ff; border-radius: 7px; background: #f1f5ff; font-size: 10px; }

.product-design-v4 .panel,
.product-design-v4 .security-callout {
  border: 1px solid var(--pd5-line);
  border-radius: var(--pd5-radius);
  background: var(--pd5-surface);
  box-shadow: var(--pd5-shadow);
}
.product-design-v4 .panel { padding: 18px; }
.product-design-v4 .section-block { margin-top: 14px; }
.product-design-v4 .panel__header,
.product-design-v4 .section-heading { min-height: 44px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #edf1f5; }
.product-design-v4 .panel h2,
.product-design-v4 .section-heading h2 { color: #172033; font-size: 15px; font-weight: 700; }
.product-design-v4 .panel .eyebrow,
.product-design-v4 .section-heading .eyebrow { color: var(--pd5-blue); font-size: 9px; }
.product-design-v4.gateway-dashboard-page .dashboard-status-block .status-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.product-design-v4.gateway-dashboard-page .status-card {
  min-height: 118px;
  padding: 16px;
  border: 1px solid var(--pd5-line);
  border-top: 3px solid #a8e3c4;
  border-radius: 9px;
  background: #fbfcfe;
}
.product-design-v4.gateway-dashboard-page .status-card--warning { border-top-color: #ffd790; }
.product-design-v4.gateway-dashboard-page .status-card--critical { border-top-color: #f6b9b2; }
.product-design-v4.gateway-dashboard-page .dashboard-metrics-block .metric-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.product-design-v4.gateway-dashboard-page .metric-card {
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--pd5-line);
  border-top: 3px solid #bcd1ff;
  border-radius: 9px;
  background: #fff;
}
.product-design-v4.gateway-dashboard-page .metric-card:nth-child(2n) { border-top-color: #d5c6ff; }
.product-design-v4.gateway-dashboard-page .metric-card:nth-child(3n) { border-top-color: #a8e3c4; }
.product-design-v4.gateway-dashboard-page .metric-card strong { color: var(--pd5-text); font-size: 25px; font-weight: 680; }
.product-design-v4 .table-scroll { border: 1px solid var(--pd5-line); border-radius: 8px; }
.product-design-v4 table th { height: 42px; color: #475467; background: #f8fafc; font-size: 10px; }
.product-design-v4 table td { min-height: 49px; border-bottom-color: #e9edf3; font-size: 11px; }
.product-design-v4 table tbody tr:hover td { background: #f7f9ff; }
.product-design-v4 .button { min-height: 38px; border-radius: 7px; font-size: 11px; font-weight: 650; }
.product-design-v4 input,
.product-design-v4 select { min-height: 40px; border-color: #d5dce6; border-radius: 7px; }
.product-design-v4 input:focus,
.product-design-v4 select:focus { border-color: #84adff; box-shadow: 0 0 0 3px rgba(36,99,235,.11); }
.product-design-v4.gateway-authorization-page .authorization-layout { grid-template-columns: minmax(330px,.72fr) minmax(0,1.28fr); gap: 14px; }
.product-design-v4.gateway-authorization-page .authorization-summary-panel,
.product-design-v4.gateway-authorization-page .authorization-form-panel { padding: 18px; border-top: 3px solid #bcd1ff; }
.product-design-v4 .verification-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.product-design-v4 .verification-grid article { min-height: 104px; border: 1px solid var(--pd5-line); border-radius: 9px; background: #fbfcfe; }
.product-design-v4.gateway-openai-page .security-callout { padding: 16px 18px; }
.product-design-v4.gateway-openai-page .openai-control-grid { grid-template-columns: minmax(0,1.15fr) repeat(2,minmax(280px,.85fr)); gap: 14px; }
.product-design-v4.gateway-openai-page .openai-panel { padding: 18px; border-top: 3px solid #bcd1ff; }
.product-design-v4.gateway-openai-page .openai-panel--protection { border-top-color: #ffd790; }
.product-design-v4.gateway-openai-page .openai-panel--rotation { border-top-color: #f6b9b2; }

.product-design-v4.gateway-login-page { background: #f5f7fb; }
.product-design-v4 .auth-main { min-height: 100vh; padding: 36px 24px; }
.product-design-v4 .auth-shell {
  max-width: 1120px;
  grid-template-columns: minmax(0,1.04fr) minmax(390px,.96fr);
  border: 1px solid #d9e0ea;
  border-radius: 14px;
  box-shadow: 0 18px 54px rgba(15,23,42,.11);
}
.product-design-v4 .auth-card--console { min-height: 650px; padding: 66px 76px 54px; }
.product-design-v4 .auth-aside--architecture { min-height: 650px; padding: 52px; background: radial-gradient(circle at 50% 25%,#143967 0,#0b2343 44%,#071b35 100%); }
.product-design-v4 .auth-card--console .button { min-height: 48px; }

@media (max-width: 1180px) {
  .product-design-v4.gateway-dashboard-page .dashboard-metrics-block .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-design-v4.gateway-openai-page .openai-control-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-design-v4.gateway-openai-page .openai-panel--connection { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 900px) {
  .product-design-v4 .gateway-console { display: block; }
  .product-design-v4 .gateway-sidebar { position: static; min-height: 0; padding: 12px 14px; }
  .product-design-v4 .gateway-sidebar .primary-nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .product-design-v4 .gateway-sidebar .nav-group-label { display: none; }
  .product-design-v4 .gateway-sidebar .session-tools { margin: 12px -14px -12px; }
  .product-design-v4 .page { padding: 18px 16px 34px; }
  .product-design-v4.gateway-authorization-page .authorization-layout,
  .product-design-v4.gateway-openai-page .openai-control-grid { grid-template-columns: 1fr; }
  .product-design-v4.gateway-openai-page .openai-panel--connection { grid-column: auto; }
  .product-design-v4 .auth-shell { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .product-design-v4 .page-heading { min-height: 50px; padding-left: 52px; align-items: flex-start; flex-direction: column; gap: 10px; }
  .product-design-v4 .gateway-page-emblem { width: 40px; height: 40px; }
  .product-design-v4 .gateway-sidebar .primary-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-design-v4.gateway-dashboard-page .dashboard-status-block .status-grid,
  .product-design-v4.gateway-dashboard-page .dashboard-metrics-block .metric-grid,
  .product-design-v4 .verification-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-design-v4 .auth-card--console { padding: 38px 24px; }
  .product-design-v4 .auth-aside--architecture { padding: 38px 26px; }
}
@media (max-width: 480px) {
  .product-design-v4 .page { padding: 14px 10px 28px; }
  .product-design-v4 .gateway-sidebar .primary-nav { grid-template-columns: 1fr; }
  .product-design-v4.gateway-dashboard-page .dashboard-status-block .status-grid,
  .product-design-v4.gateway-dashboard-page .dashboard-metrics-block .metric-grid,
  .product-design-v4 .verification-grid { grid-template-columns: 1fr; }
  .product-design-v4 .panel { padding: 14px; }
  .product-design-v4 .auth-main { padding: 10px; }
}

@media (max-width: 720px) {
  .product-design-v4 .gateway-sidebar {
    display: grid;
    padding: 10px 12px;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 8px 10px;
  }
  .product-design-v4 .gateway-sidebar .brand-link { min-width: 0; }
  .product-design-v4 .gateway-sidebar .brand { padding: 0; }
  .product-design-v4 .gateway-sidebar .brand__mark { width: 34px; height: 34px; }
  .product-design-v4 .gateway-sidebar .brand__copy strong { font-size: 13px; }
  .product-design-v4 .gateway-sidebar .primary-nav {
    display: flex;
    min-width: 0;
    margin: 0;
    padding-top: 8px;
    grid-column: 1 / -1;
    gap: 6px;
    overflow-x: auto;
    border-top: 1px solid rgba(255,255,255,.08);
    scrollbar-width: thin;
  }
  .product-design-v4 .gateway-sidebar .primary-nav a {
    min-width: max-content;
    min-height: 34px;
    padding: 7px 10px;
  }
  .product-design-v4 .gateway-sidebar .session-tools {
    display: block;
    width: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .product-design-v4 .gateway-sidebar .session-avatar,
  .product-design-v4 .gateway-sidebar .session-user { display: none; }
  .product-design-v4 .gateway-sidebar .logout-form { margin: 0; }
  .product-design-v4 .gateway-sidebar .logout-form .button {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-color: rgba(255,255,255,.16);
    color: transparent;
    font-size: 0;
  }
  .product-design-v4 .gateway-sidebar .logout-form .button img { width: 18px; height: 18px; margin: 0; }
}

/* Apple-neutral v7 — B administration only, with no blue navigation surfaces. */
.product-design-v4 {
  --apple-canvas: #f5f5f7;
  --apple-surface: rgba(255,255,255,.84);
  --apple-ink: #1d1d1f;
  --apple-copy: #424245;
  --apple-muted: #6e6e73;
  --apple-faint: #86868b;
  --apple-line: rgba(29,29,31,.09);
  --apple-line-strong: rgba(29,29,31,.16);
  --apple-violet: #7c3aed;
  --apple-violet-soft: rgba(124,58,237,.10);
  --apple-teal: #0f766e;
  --apple-success: #14845f;
  --apple-warning: #a15c0a;
  --apple-danger: #d92d20;
  --apple-shadow: 0 18px 55px rgba(0,0,0,.07),0 2px 10px rgba(0,0,0,.04);
  --apple-shadow-soft: 0 8px 28px rgba(0,0,0,.055),0 1px 4px rgba(0,0,0,.035);
  color: var(--apple-ink);
  background:
    radial-gradient(circle at 14% 8%,rgba(124,58,237,.055),transparent 25%),
    radial-gradient(circle at 90% 92%,rgba(15,118,110,.045),transparent 26%),
    var(--apple-canvas);
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Microsoft YaHei UI",system-ui,sans-serif;
}
.product-design-v4 .gateway-console { grid-template-columns: 238px minmax(0,1fr); background: transparent; }
.product-design-v4 .gateway-sidebar {
  z-index: 40;
  padding: 16px 12px 12px;
  border: 0;
  border-right: 1px solid rgba(29,29,31,.075);
  background: rgba(250,250,252,.88);
  box-shadow: 10px 0 38px rgba(0,0,0,.035);
  backdrop-filter: blur(30px) saturate(165%);
}
.product-design-v4 .gateway-sidebar .brand-link { padding: 5px 7px; border-radius: 13px; color: var(--apple-ink); }
.product-design-v4 .gateway-sidebar .brand-link:hover { color: var(--apple-ink); background: rgba(29,29,31,.045); }
.product-design-v4 .gateway-sidebar .brand { gap: 11px; padding: 0; }
.product-design-v4 .gateway-sidebar .brand__mark { width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 12px; background: transparent; box-shadow: 0 8px 22px rgba(0,0,0,.08); object-fit: contain; }
.product-design-v4 .gateway-sidebar .brand__copy { min-width: 0; }
.product-design-v4 .gateway-sidebar .brand__copy strong { overflow: hidden; color: var(--apple-ink); font-size: 14px; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.product-design-v4 .gateway-sidebar .brand__copy span { color: var(--apple-faint); font-size: 9px; letter-spacing: .06em; }
.product-design-v4 .gateway-sidebar .primary-nav { margin-top: 18px; gap: 3px; }
.product-design-v4 .gateway-sidebar .nav-group-label { min-height: auto; margin-top: 6px; padding: 7px 11px 4px; color: var(--apple-faint); font-size: 9px; letter-spacing: .105em; }
.product-design-v4 .gateway-sidebar .primary-nav a {
  position: relative;
  min-height: 39px;
  padding: 8px 11px;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--apple-copy);
  font-size: 12px;
  font-weight: 600;
}
.product-design-v4 .gateway-sidebar .primary-nav a:hover { border-color: var(--apple-line); color: var(--apple-ink); background: rgba(255,255,255,.88); box-shadow: 0 6px 18px rgba(0,0,0,.045); }
.product-design-v4 .gateway-sidebar .primary-nav a[aria-current="page"] { border-color: rgba(124,58,237,.10); color: #5b21b6; background: linear-gradient(135deg,rgba(124,58,237,.105),rgba(124,58,237,.055)); box-shadow: inset 0 1px 0 rgba(255,255,255,.85); }
.product-design-v4 .gateway-sidebar .primary-nav a[aria-current="page"]::before { position: absolute; top: 9px; bottom: 9px; left: -3px; width: 3px; border-radius: 99px; background: var(--apple-violet); content: ""; }
.product-design-v4 .gateway-sidebar .nav-icon { width: 18px; height: 18px; flex-basis: 18px; opacity: .70; filter: grayscale(1) contrast(1.2); }
.product-design-v4 .gateway-sidebar .primary-nav a[aria-current="page"] .nav-icon { opacity: .96; filter: invert(31%) sepia(77%) saturate(2514%) hue-rotate(253deg) brightness(84%) contrast(96%); }
.product-design-v4 .gateway-sidebar .session-tools {
  display: grid;
  min-height: 0;
  margin: auto 0 0;
  padding: 9px 10px;
  grid-template-columns: 36px minmax(0,1fr) 34px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--apple-line);
  border-radius: 16px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}
.product-design-v4 .gateway-sidebar .session-avatar { width: 36px; height: 36px; border: 0; background: #ececef; }
.product-design-v4 .gateway-sidebar .session-avatar img { filter: none; opacity: .62; }
.product-design-v4 .gateway-sidebar .session-user { grid-column: 2; }
.product-design-v4 .gateway-sidebar .session-user::before { background: var(--apple-success); }
.product-design-v4 .gateway-sidebar .session-user strong { color: var(--apple-ink); }
.product-design-v4 .gateway-sidebar .session-user small { color: var(--apple-muted); }
.product-design-v4 .gateway-sidebar .logout-form { grid-column: 3; justify-self: end; }
.product-design-v4 .gateway-sidebar .logout-form .button { width: 34px; min-height: 34px; padding: 0; justify-content: center; border-color: var(--apple-line); border-radius: 11px; color: transparent; background: #f5f5f7; }
.product-design-v4 .gateway-sidebar .logout-form .button:hover { border-color: var(--apple-line-strong); background: #fff; }
.product-design-v4 .gateway-sidebar .logout-form .button img { width: 17px; height: 17px; filter: none; opacity: .64; }

.product-design-v4 .gateway-workspace { min-width: 0; height: 100vh; overflow: auto; background: rgba(247,247,249,.88); }
.product-design-v4 .gateway-topbar {
  position: sticky;
  z-index: 25;
  top: 0;
  display: flex;
  min-height: 62px;
  padding: 0 24px;
  border-bottom: 1px solid var(--apple-line);
  background: rgba(255,255,255,.72);
  box-shadow: none;
  backdrop-filter: blur(28px) saturate(170%);
}
.product-design-v4 .gateway-topbar > div span { color: var(--apple-faint); font-size: 9px; }
.product-design-v4 .gateway-topbar > div strong { color: var(--apple-ink); font-size: 14px; font-weight: 680; }
.product-design-v4 .gateway-topbar__status { min-height: 30px; padding: 5px 10px; border-color: rgba(20,132,95,.16); border-radius: 999px; color: var(--apple-success); background: rgba(20,132,95,.08); }

.product-design-v4 .page { max-width: 1500px; padding: 22px 28px 42px; background: transparent; }
.product-design-v4 .gateway-breadcrumb { margin-bottom: 13px; color: var(--apple-faint); }
.product-design-v4 .gateway-breadcrumb strong { color: var(--apple-copy); }
.product-design-v4 .page-heading { min-height: 60px; margin-bottom: 20px; padding-left: 62px; }
.product-design-v4 .gateway-page-emblem { width: 46px; height: 46px; border-color: rgba(124,58,237,.12); border-radius: 14px; background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(124,58,237,.075)); box-shadow: 0 10px 24px rgba(124,58,237,.07); }
.product-design-v4 .gateway-page-emblem img { width: 21px; height: 21px; filter: invert(31%) sepia(77%) saturate(2514%) hue-rotate(253deg) brightness(84%) contrast(96%); }
.product-design-v4 .page-heading h1 { color: var(--apple-ink); font-size: clamp(25px,2vw,32px); font-weight: 720; letter-spacing: -.035em; }
.product-design-v4 .page-heading .eyebrow { color: var(--apple-violet); }
.product-design-v4 .page-heading .lede { color: var(--apple-muted); font-size: 12px; }
.product-design-v4 .updated-at,
.product-design-v4 .authorization-heading-note { min-height: 36px; padding: 8px 11px; border-color: var(--apple-line); border-radius: 11px; color: var(--apple-copy); background: rgba(255,255,255,.80); box-shadow: none; }
.product-design-v4 .authorization-heading-note img { filter: invert(31%) sepia(77%) saturate(2514%) hue-rotate(253deg) brightness(84%) contrast(96%); }

.product-design-v4 .panel,
.product-design-v4 .security-callout { border: 1px solid var(--apple-line); border-radius: 18px; background: var(--apple-surface); box-shadow: var(--apple-shadow-soft); backdrop-filter: blur(20px) saturate(145%); }
.product-design-v4 .panel { padding: 20px; }
.product-design-v4 .section-block { margin-top: 16px; }
.product-design-v4 .panel__header,
.product-design-v4 .section-heading { min-height: 46px; margin-bottom: 15px; padding-bottom: 13px; border-bottom-color: var(--apple-line); }
.product-design-v4 .panel h2,
.product-design-v4 .section-heading h2 { color: var(--apple-ink); font-size: 15px; }
.product-design-v4 .panel .eyebrow,
.product-design-v4 .section-heading .eyebrow { color: var(--apple-violet); }

.product-design-v4.gateway-dashboard-page .dashboard-status-block .status-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.product-design-v4.gateway-dashboard-page .status-card {
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--apple-line);
  border-top: 1px solid var(--apple-line);
  border-radius: 15px;
  background: rgba(249,249,251,.84);
}
.product-design-v4.gateway-dashboard-page .status-card strong { color: var(--apple-ink); }
.product-design-v4.gateway-dashboard-page .status-card p { color: var(--apple-muted); }
.product-design-v4.gateway-dashboard-page .dashboard-metrics-block .metric-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.product-design-v4.gateway-dashboard-page .metric-card { min-height: 108px; padding: 16px; border: 1px solid var(--apple-line); border-top: 1px solid var(--apple-line); border-radius: 15px; background: rgba(255,255,255,.82); }
.product-design-v4.gateway-dashboard-page .metric-card strong { color: var(--apple-ink); font-size: 25px; }
.product-design-v4.gateway-dashboard-page .metric-card p { color: var(--apple-muted); }
.product-design-v4 .table-scroll { border-color: var(--apple-line); border-radius: 13px; }
.product-design-v4 table th { color: var(--apple-muted); background: rgba(245,245,247,.82); }
.product-design-v4 table td { border-bottom-color: var(--apple-line); color: var(--apple-copy); }
.product-design-v4 table tbody tr:hover td { background: rgba(124,58,237,.035); }

.product-design-v4 input,
.product-design-v4 select { min-height: 42px; border-color: var(--apple-line-strong); border-radius: 11px; color: var(--apple-ink); background: rgba(255,255,255,.86); }
.product-design-v4 input:focus,
.product-design-v4 select:focus { border-color: rgba(124,58,237,.50); box-shadow: 0 0 0 4px rgba(124,58,237,.10); }
.product-design-v4 .button { min-height: 40px; border-radius: 11px; }
.product-design-v4 .button--primary { border-color: #1d1d1f; color: #fff; background: #1d1d1f; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.product-design-v4 .button--primary:hover { border-color: #000; background: #000; }
.product-design-v4 .button--quiet { border-color: var(--apple-line); color: var(--apple-copy); background: rgba(255,255,255,.82); }
.product-design-v4 .button--danger { border-color: #1d1d1f; color: #fff; background: #1d1d1f; box-shadow: 0 8px 20px rgba(0,0,0,.11); }
.product-design-v4 .button--danger:hover { border-color: #000; background: #000; }
.product-design-v4 .form-warning { border-color: rgba(161,92,10,.20); border-radius: 12px; color: #7a4608; background: rgba(255,248,235,.86); }
.product-design-v4 .badge--success { border-color: rgba(20,132,95,.16); color: var(--apple-success); background: rgba(20,132,95,.08); }
.product-design-v4 .badge--unknown { border-color: rgba(124,58,237,.16); color: #6d28d9; background: var(--apple-violet-soft); }

.product-design-v4.gateway-authorization-page .authorization-layout { grid-template-columns: minmax(340px,.72fr) minmax(520px,1.28fr); gap: 16px; }
.product-design-v4.gateway-authorization-page .authorization-summary-panel,
.product-design-v4.gateway-authorization-page .authorization-form-panel { padding: 20px; border-top: 1px solid var(--apple-line); }
.product-design-v4 .config-list > div { border-bottom-color: var(--apple-line); }
.product-design-v4 .config-list code { color: #5b21b6; background: rgba(124,58,237,.065); }
.product-design-v4 .verification-grid { gap: 12px; }
.product-design-v4 .verification-grid article { min-height: 108px; border-color: var(--apple-line); border-radius: 15px; background: rgba(249,249,251,.84); }

.product-design-v4.gateway-openai-page .security-callout { padding: 17px 19px; }
.product-design-v4 .security-callout__icon { border-radius: 12px; background: var(--apple-violet-soft); }
.product-design-v4 .security-callout__icon img { filter: invert(31%) sepia(77%) saturate(2514%) hue-rotate(253deg) brightness(84%) contrast(96%); }
.product-design-v4.gateway-openai-page .openai-control-grid {
  grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr);
  grid-template-areas: "connection protection" "connection rotation";
  gap: 16px;
  align-items: start;
}
.product-design-v4.gateway-openai-page .openai-panel { padding: 20px; border-top: 1px solid var(--apple-line); border-radius: 18px; }
.product-design-v4.gateway-openai-page .openai-control-grid > .openai-panel--connection { grid-area: connection; }
.product-design-v4.gateway-openai-page .openai-control-grid > .openai-panel--protection { grid-area: protection; }
.product-design-v4.gateway-openai-page .openai-control-grid > .openai-panel--rotation { grid-area: rotation; }
.product-design-v4 .panel-step { border-radius: 9px; color: #6d28d9; background: var(--apple-violet-soft); }

.product-design-v4.gateway-login-page {
  background:
    radial-gradient(circle at 14% 10%,rgba(124,58,237,.07),transparent 27%),
    radial-gradient(circle at 90% 90%,rgba(15,118,110,.045),transparent 28%),
    var(--apple-canvas);
}
.product-design-v4 .auth-main { min-height: 100vh; padding: 34px 24px; }
.product-design-v4 .auth-shell { max-width: 1120px; border-color: var(--apple-line); border-radius: 24px; background: rgba(255,255,255,.80); box-shadow: var(--apple-shadow); overflow: hidden; backdrop-filter: blur(24px); }
.product-design-v4 .auth-card--console { min-height: 650px; padding: 62px 74px 52px; background: rgba(255,255,255,.90); }
.product-design-v4 .auth-card--console .brand__mark { border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.product-design-v4 .auth-card--console .eyebrow { color: var(--apple-violet); }
.product-design-v4 .auth-card--console h1 { color: var(--apple-ink); letter-spacing: -.04em; }
.product-design-v4 .auth-card--console .lede,
.product-design-v4 .auth-card--console .field-help { color: var(--apple-muted); }
.product-design-v4 .auth-aside--architecture {
  min-height: 650px;
  padding: 52px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 24%,rgba(124,58,237,.34),transparent 30%),
    radial-gradient(circle at 82% 80%,rgba(15,118,110,.24),transparent 32%),
    linear-gradient(145deg,#1d1d1f 0%,#2c2b30 58%,#1b1b1d 100%);
}
.product-design-v4 .auth-shield-visual { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); box-shadow: 0 18px 52px rgba(0,0,0,.18); }
.product-design-v4 .auth-shield-visual img,
.product-design-v4 .assurance-list img { filter: brightness(0) invert(1); opacity: .86; }
.product-design-v4 .assurance-list li { border-bottom-color: rgba(255,255,255,.12); }
.product-design-v4 .auth-footer-note { color: var(--apple-muted); background: rgba(250,250,252,.86); }

@media (max-width: 1180px) {
  .product-design-v4 .gateway-console { grid-template-columns: 222px minmax(0,1fr); }
  .product-design-v4.gateway-dashboard-page .dashboard-status-block .status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-design-v4.gateway-openai-page .openai-control-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "connection" "protection" "rotation";
  }
}
@media (max-width: 980px) {
  .product-design-v4.gateway-authorization-page .authorization-layout { grid-template-columns: 1fr; }
  .product-design-v4.gateway-authorization-page .authorization-form-panel .field { grid-template-columns: 1fr; }
  .product-design-v4.gateway-authorization-page .authorization-form-panel .field > label,
  .product-design-v4.gateway-authorization-page .authorization-form-panel .field > input,
  .product-design-v4.gateway-authorization-page .authorization-form-panel .field > select,
  .product-design-v4.gateway-authorization-page .authorization-form-panel .field > .field-help { grid-column: auto; padding-top: 0; }
  .product-design-v4.gateway-authorization-page .authorization-form-panel .form-warning,
  .product-design-v4.gateway-authorization-page .authorization-form-panel .button { width: 100%; margin-left: 0; }
}
@media (max-width: 900px) {
  .product-design-v4 .gateway-console { display: block; }
  .product-design-v4 .gateway-sidebar { position: static; min-height: 0; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--apple-line); box-shadow: none; }
  .product-design-v4 .gateway-sidebar .primary-nav { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .product-design-v4 .gateway-sidebar .nav-group-label { display: none; }
  .product-design-v4 .gateway-sidebar .session-tools { margin-top: 12px; }
  .product-design-v4 .gateway-workspace { height: auto; min-height: calc(100vh - 180px); overflow: visible; }
  .product-design-v4 .gateway-topbar { display: none; }
  .product-design-v4 .page { padding: 18px 16px 34px; }
}
@media (max-width: 720px) {
  .product-design-v4 .gateway-sidebar { display: grid; background: rgba(250,250,252,.94); }
  .product-design-v4 .gateway-sidebar .primary-nav { border-top-color: var(--apple-line); }
  .product-design-v4 .gateway-sidebar .primary-nav a { color: var(--apple-copy); background: rgba(255,255,255,.62); }
  .product-design-v4 .gateway-sidebar .session-tools { background: transparent; box-shadow: none; }
  .product-design-v4 .gateway-sidebar .logout-form .button { border-color: var(--apple-line); }
  .product-design-v4 .gateway-topbar__status { display: none; }
  .product-design-v4 .page-heading { min-height: 52px; padding-left: 54px; align-items: flex-start; }
  .product-design-v4 .gateway-page-emblem { width: 42px; height: 42px; }
  .product-design-v4.gateway-dashboard-page .dashboard-status-block .status-grid,
  .product-design-v4.gateway-dashboard-page .dashboard-metrics-block .metric-grid,
  .product-design-v4 .verification-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-design-v4 .auth-shell { grid-template-columns: 1fr; }
  .product-design-v4 .auth-card--console { min-height: auto; padding: 38px 24px; }
  .product-design-v4 .auth-aside--architecture { min-height: auto; padding: 38px 26px; }
}
@media (max-width: 480px) {
  .product-design-v4 .page { padding: 14px 10px 28px; }
  .product-design-v4 .gateway-sidebar .primary-nav { grid-template-columns: 1fr; }
  .product-design-v4.gateway-dashboard-page .dashboard-status-block .status-grid,
  .product-design-v4.gateway-dashboard-page .dashboard-metrics-block .metric-grid,
  .product-design-v4 .verification-grid { grid-template-columns: 1fr; }
  .product-design-v4 .panel { padding: 16px; border-radius: 16px; }
  .product-design-v4 .auth-main { padding: 10px; }
  .product-design-v4 .auth-shell { border-radius: 18px; }
}

/* Prevent operational controls and data tables from stretching across ultrawide displays. */
.product-design-v4 .page {
  width: 100%;
  max-width: 1520px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

@media (min-width: 1800px) {
  .product-design-v4 .gateway-topbar {
    padding-right: max(24px,calc((100% - 1520px)/2 + 28px));
    padding-left: max(24px,calc((100% - 1520px)/2 + 28px));
  }
}

/* B overview v8 — independent operating cards, centred ultrawide canvas. */
.product-design-v4.b-overview-v8 .page { max-width: 1440px; padding-top: 26px; }
.b-overview-v8 .b-overview-hero { display:flex;align-items:center;justify-content:space-between;min-height:116px;margin-bottom:16px;padding:22px 24px;border:1px solid var(--apple-line);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(250,248,255,.88));box-shadow:var(--apple-shadow-soft); }
.b-overview-v8 .b-overview-hero__title { display:flex;align-items:center;min-width:0;gap:16px; }
.b-overview-v8 .b-overview-hero .gateway-page-emblem { position:static;flex:0 0 52px;width:52px;height:52px; }
.b-overview-v8 .b-overview-hero h1 { margin:2px 0 4px;color:var(--apple-ink);font-size:clamp(26px,2vw,34px);line-height:1.05;letter-spacing:-.04em; }
.b-overview-v8 .b-overview-hero .lede { margin:0;color:var(--apple-muted);font-size:12px; }
.b-overview-v8 .b-overview-hero__actions { display:flex;align-items:center;flex:0 0 auto;gap:10px; }
.b-overview-v8 .b-live-pill { display:inline-flex;align-items:center;min-height:36px;padding:0 12px;gap:7px;border:1px solid rgba(20,132,95,.16);border-radius:999px;color:var(--apple-success);background:rgba(20,132,95,.075);font-size:11px;font-weight:700; }
.b-overview-v8 .b-live-pill i { width:7px;height:7px;border-radius:50%;background:var(--apple-success);box-shadow:0 0 0 4px rgba(20,132,95,.10); }
.b-overview-v8 .b-overview-command { display:grid;grid-template-columns:minmax(300px,1fr) minmax(460px,.92fr);align-items:center;gap:18px;margin-bottom:18px;padding:20px 22px;border:1px solid var(--apple-line);border-radius:20px;color:#fff;background:radial-gradient(circle at 78% -30%,rgba(124,58,237,.32),transparent 52%),linear-gradient(135deg,#1d1d1f,#29282d);box-shadow:0 16px 38px rgba(0,0,0,.10); }
.b-overview-v8 .b-overview-command strong { display:block;margin:4px 0 5px;font-size:18px;letter-spacing:-.02em; }
.b-overview-v8 .b-overview-command p { margin:0;color:rgba(255,255,255,.62);font-size:11px; }
.b-overview-v8 .b-command-kicker { color:#c4b5fd;font-size:9px;font-weight:800;letter-spacing:.12em; }
.b-overview-v8 .b-command-links { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.b-overview-v8 .b-command-links a { display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;min-height:62px;padding:10px 12px;gap:9px;border:1px solid rgba(255,255,255,.11);border-radius:14px;color:#fff;background:rgba(255,255,255,.075);transition:transform .16s ease,background .16s ease; }
.b-overview-v8 .b-command-links a:hover { color:#fff;background:rgba(255,255,255,.12);transform:translateY(-1px); }
.b-overview-v8 .b-command-links img { width:19px;height:19px;padding:7px;border-radius:10px;background:rgba(255,255,255,.10);filter:brightness(0) invert(1);box-sizing:content-box; }
.b-overview-v8 .b-command-links span { font-size:12px;font-weight:700; }
.b-overview-v8 .b-command-links small { display:block;margin-bottom:2px;color:rgba(255,255,255,.55);font-size:9px;font-weight:500; }
.b-overview-v8 .b-command-links b { color:rgba(255,255,255,.42);font-size:20px;font-weight:400; }
.b-overview-v8 .b-overview-section { margin-top:16px;padding:20px;border:1px solid var(--apple-line);border-radius:20px;background:rgba(255,255,255,.84);box-shadow:var(--apple-shadow-soft);backdrop-filter:blur(20px) saturate(145%); }
.b-overview-v8 .b-section-heading { display:flex;align-items:flex-end;justify-content:space-between;min-height:42px;margin-bottom:15px;padding-bottom:13px;border-bottom:1px solid var(--apple-line); }
.b-overview-v8 .b-section-heading h2 { margin:2px 0 0;color:var(--apple-ink);font-size:16px;letter-spacing:-.02em; }
.b-overview-v8 .b-section-heading > span { color:var(--apple-faint);font-size:10px; }
.b-overview-v8 .b-metric-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.b-overview-v8 .b-metric-card { display:grid;grid-template-columns:10px minmax(0,1fr);min-height:116px;padding:16px;gap:12px;border:1px solid var(--apple-line);border-radius:16px;background:linear-gradient(145deg,#fff,#f8f8fa); }
.b-overview-v8 .b-metric-card__icon { width:8px;height:34px;margin-top:3px;border-radius:99px;background:linear-gradient(180deg,#7c3aed,#a78bfa);box-shadow:0 4px 12px rgba(124,58,237,.22); }
.b-overview-v8 .b-metric-card:nth-child(2) .b-metric-card__icon { background:linear-gradient(180deg,#0f766e,#5eead4);box-shadow:0 4px 12px rgba(15,118,110,.20); }
.b-overview-v8 .b-metric-card:nth-child(3) .b-metric-card__icon { background:linear-gradient(180deg,#a15c0a,#fbbf24);box-shadow:0 4px 12px rgba(161,92,10,.18); }
.b-overview-v8 .b-metric-card:nth-child(4) .b-metric-card__icon { background:linear-gradient(180deg,#35353a,#8e8e93);box-shadow:0 4px 12px rgba(0,0,0,.14); }
.b-overview-v8 .b-metric-card span { color:var(--apple-muted);font-size:10px; }
.b-overview-v8 .b-metric-card strong { display:block;margin:5px 0 3px;color:var(--apple-ink);font-size:clamp(22px,2vw,29px);line-height:1;letter-spacing:-.035em; }
.b-overview-v8 .b-metric-card p { margin:0;color:var(--apple-faint);font-size:10px;line-height:1.45; }
.b-overview-v8 .b-section-heading--jobs { align-items:center; }
.b-overview-v8 .b-page-size-form { display:flex;align-items:center;gap:8px; }
.b-overview-v8 .b-page-size-form label { color:var(--apple-muted);font-size:10px; }
.b-overview-v8 .b-page-size-form select { width:82px;min-height:34px;padding:4px 28px 4px 9px;font-size:11px; }
.b-overview-v8 .b-page-size-form .button { min-height:34px; }
.b-overview-v8 .b-job-list { display:grid;gap:10px; }
.b-overview-v8 .b-job-card { display:grid;grid-template-columns:minmax(220px,1.08fr) minmax(400px,1.55fr) auto;align-items:center;min-height:86px;padding:14px 16px;gap:18px;border:1px solid var(--apple-line);border-radius:16px;background:rgba(250,250,252,.76);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.b-overview-v8 .b-job-card:hover { border-color:rgba(124,58,237,.18);box-shadow:0 10px 24px rgba(0,0,0,.055);transform:translateY(-1px); }
.b-overview-v8 .b-job-card__identity { display:flex;align-items:center;min-width:0;gap:11px; }
.b-overview-v8 .b-job-card__mark { display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:12px;background:var(--apple-violet-soft); }
.b-overview-v8 .b-job-card__mark img { width:18px;height:18px;filter:invert(31%) sepia(77%) saturate(2514%) hue-rotate(253deg) brightness(84%) contrast(96%); }
.b-overview-v8 .b-job-card small { display:block;margin-bottom:3px;color:var(--apple-faint);font-size:9px; }
.b-overview-v8 .b-job-card code { display:block;overflow:hidden;max-width:100%;color:var(--apple-copy);font-size:10px;text-overflow:ellipsis;white-space:nowrap; }
.b-overview-v8 .b-job-card__meta { display:grid;grid-template-columns:.72fr .72fr 1.2fr;min-width:0; }
.b-overview-v8 .b-job-card__meta > span { min-width:0;padding:0 14px;border-left:1px solid var(--apple-line); }
.b-overview-v8 .b-job-card__meta strong { display:block;overflow:hidden;color:var(--apple-copy);font-size:11px;font-weight:650;text-overflow:ellipsis;white-space:nowrap; }
.b-overview-v8 .b-job-card__state { justify-self:end; }
.b-overview-v8 .b-pagination { display:flex;align-items:center;justify-content:space-between;margin-top:13px;padding-top:13px;border-top:1px solid var(--apple-line);color:var(--apple-muted);font-size:10px; }
.b-overview-v8 .b-pagination nav { display:flex;gap:7px; }
.b-overview-v8 .b-status-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px; }
.b-overview-v8 .b-status-card { min-height:104px;padding:15px;border:1px solid var(--apple-line);border-radius:15px;background:rgba(249,249,251,.82); }
.b-overview-v8 .b-status-card__topline { display:flex;align-items:center;gap:7px;color:var(--apple-muted);font-size:10px; }
.b-overview-v8 .b-status-card strong { display:block;margin:9px 0 4px;color:var(--apple-ink);font-size:14px; }
.b-overview-v8 .b-status-card p { margin:0;color:var(--apple-faint);font-size:10px;line-height:1.45; }

@media (max-width:1180px) { .b-overview-v8 .b-overview-command{grid-template-columns:1fr}.b-overview-v8 .b-job-card{grid-template-columns:minmax(220px,.8fr) minmax(360px,1.4fr) auto} }
@media (max-width:980px) { .b-overview-v8 .b-metric-grid,.b-overview-v8 .b-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.b-overview-v8 .b-job-card{grid-template-columns:1fr auto}.b-overview-v8 .b-job-card__meta{grid-column:1/-1;grid-row:2} }
@media (max-width:720px) { .b-overview-v8 .b-overview-hero{align-items:flex-start;flex-direction:column;gap:16px}.b-overview-v8 .b-overview-hero__actions{width:100%;justify-content:space-between}.b-overview-v8 .b-command-links{grid-template-columns:1fr}.b-overview-v8 .b-section-heading--jobs{align-items:flex-start;flex-direction:column;gap:12px}.b-overview-v8 .b-page-size-form{width:100%}.b-overview-v8 .b-page-size-form label{margin-right:auto} }
@media (max-width:480px) { .product-design-v4.b-overview-v8 .page{padding-right:10px;padding-left:10px}.b-overview-v8 .b-overview-hero,.b-overview-v8 .b-overview-command,.b-overview-v8 .b-overview-section{padding:16px;border-radius:17px}.b-overview-v8 .b-overview-hero__actions{align-items:flex-start;flex-direction:column}.b-overview-v8 .b-metric-grid,.b-overview-v8 .b-status-grid{grid-template-columns:1fr}.b-overview-v8 .b-job-card{grid-template-columns:1fr}.b-overview-v8 .b-job-card__state{grid-row:1;grid-column:1;justify-self:end}.b-overview-v8 .b-job-card__identity{padding-right:78px}.b-overview-v8 .b-job-card__meta{grid-row:auto;grid-column:auto;grid-template-columns:1fr;gap:8px}.b-overview-v8 .b-job-card__meta>span{padding:8px 0 0;border-top:1px solid var(--apple-line);border-left:0}.b-overview-v8 .b-pagination{align-items:flex-start;flex-direction:column;gap:10px} }

/* B authorization v9 — explicit trust-boundary workflow. */
.product-design-v4.b-authorization-v9 .page { max-width:1440px;padding-top:26px; }
.b-authorization-v9 .b-auth-hero { display:flex;align-items:center;justify-content:space-between;min-height:112px;margin-bottom:16px;padding:22px 24px;border:1px solid var(--apple-line);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(249,255,253,.86));box-shadow:var(--apple-shadow-soft); }
.b-authorization-v9 .b-auth-hero__title { display:flex;align-items:center;min-width:0;gap:16px; }
.b-authorization-v9 .b-auth-hero .gateway-page-emblem { position:static;flex:0 0 52px;width:52px;height:52px; }
.b-authorization-v9 .b-auth-hero h1 { margin:2px 0 4px;color:var(--apple-ink);font-size:clamp(25px,2vw,33px);letter-spacing:-.04em; }
.b-authorization-v9 .b-auth-hero .lede { margin:0;color:var(--apple-muted);font-size:12px; }
.b-authorization-v9 .b-auth-state { display:inline-flex;align-items:center;min-height:38px;padding:0 13px;gap:8px;border:1px solid rgba(217,45,32,.14);border-radius:999px;color:var(--apple-danger);background:rgba(217,45,32,.06);font-size:11px;font-weight:750; }
.b-authorization-v9 .b-auth-state i { width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(217,45,32,.09); }
.b-authorization-v9 .b-auth-state.is-enabled { border-color:rgba(20,132,95,.16);color:var(--apple-success);background:rgba(20,132,95,.07); }
.b-authorization-v9 .b-auth-state.is-enabled i { box-shadow:0 0 0 4px rgba(20,132,95,.10); }
.b-authorization-v9 .b-auth-flow { display:grid;grid-template-columns:repeat(7,auto);align-items:center;justify-content:stretch;margin-bottom:16px;padding:14px 18px;border:1px solid var(--apple-line);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 8px 24px rgba(0,0,0,.04); }
.b-authorization-v9 .b-auth-flow article { display:flex;align-items:center;min-width:0;gap:9px; }
.b-authorization-v9 .b-auth-flow article > span { display:grid;width:31px;height:31px;flex:0 0 31px;place-items:center;border-radius:10px;color:#6d28d9;background:var(--apple-violet-soft);font-size:9px;font-weight:800; }
.b-authorization-v9 .b-auth-flow small { display:block;color:var(--apple-faint);font-size:8px; }
.b-authorization-v9 .b-auth-flow strong { display:block;margin-top:1px;color:var(--apple-copy);font-size:11px; }
.b-authorization-v9 .b-auth-flow > i { justify-self:center;color:#c7c7cc;font-size:18px;font-style:normal; }
.b-authorization-v9 .b-auth-layout { display:grid;grid-template-columns:minmax(320px,.72fr) minmax(560px,1.28fr);align-items:start;gap:16px; }
.b-authorization-v9 .b-auth-summary,.b-authorization-v9 .b-auth-editor,.b-authorization-v9 .b-auth-verification { padding:20px;border:1px solid var(--apple-line);border-radius:20px;background:rgba(255,255,255,.86);box-shadow:var(--apple-shadow-soft); }
.b-authorization-v9 .b-card-heading { display:flex;align-items:center;justify-content:space-between;min-height:45px;margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid var(--apple-line); }
.b-authorization-v9 .b-card-heading h2 { margin:2px 0 0;color:var(--apple-ink);font-size:16px;letter-spacing:-.02em; }
.b-authorization-v9 .b-card-heading > span:not(.badge) { color:var(--apple-faint);font-size:9px; }
.b-authorization-v9 .b-auth-identity__primary { display:flex;align-items:center;padding:14px;border-radius:15px;background:linear-gradient(135deg,#f5f1ff,#faf9fc);gap:11px; }
.b-authorization-v9 .b-auth-identity__icon { display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:#fff;box-shadow:0 7px 18px rgba(124,58,237,.10); }
.b-authorization-v9 .b-auth-identity__icon img { width:20px;height:20px;filter:invert(31%) sepia(77%) saturate(2514%) hue-rotate(253deg) brightness(84%) contrast(96%); }
.b-authorization-v9 .b-auth-identity__primary small { display:block;color:var(--apple-faint);font-size:9px; }
.b-authorization-v9 .b-auth-identity__primary strong { display:block;margin-top:3px;color:var(--apple-ink);font-size:15px; }
.b-authorization-v9 .b-auth-facts { margin:13px 0 0; }
.b-authorization-v9 .b-auth-facts > div { display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;min-height:49px;border-bottom:1px solid var(--apple-line);gap:10px; }
.b-authorization-v9 .b-auth-facts dt { color:var(--apple-faint);font-size:9px; }
.b-authorization-v9 .b-auth-facts dd { min-width:0;margin:0;color:var(--apple-copy);font-size:10px;text-align:right; }
.b-authorization-v9 .b-auth-facts code { display:inline-block;overflow:hidden;max-width:100%;padding:4px 7px;border-radius:7px;color:#5b21b6;background:rgba(124,58,237,.06);text-overflow:ellipsis;white-space:nowrap; }
.b-authorization-v9 .is-empty { color:var(--apple-faint); }
.b-authorization-v9 .b-auth-boundary-note { display:flex;margin-top:15px;padding:13px;gap:10px;border:1px solid rgba(161,92,10,.16);border-radius:14px;background:rgba(255,248,235,.72); }
.b-authorization-v9 .b-auth-boundary-note img { width:18px;height:18px;opacity:.66; }
.b-authorization-v9 .b-auth-boundary-note strong { color:#7a4608;font-size:11px; }
.b-authorization-v9 .b-auth-boundary-note p { margin:3px 0 0;color:#8a5b20;font-size:9px;line-height:1.5; }
.b-authorization-v9 .b-auth-form { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.b-authorization-v9 .b-auth-field { min-width:0; }
.b-authorization-v9 .b-auth-field--wide { grid-column:1/-1; }
.b-authorization-v9 .b-auth-field label { display:flex;align-items:center;margin-bottom:7px;gap:7px;color:var(--apple-copy);font-size:10px;font-weight:700; }
.b-authorization-v9 .b-auth-field label span { display:grid;width:21px;height:21px;place-items:center;border-radius:7px;color:#6d28d9;background:var(--apple-violet-soft);font-size:8px; }
.b-authorization-v9 .b-auth-field input,.b-authorization-v9 .b-auth-field select { width:100%; }
.b-authorization-v9 .b-auth-field input[readonly] { color:var(--apple-muted);background:#f4f4f6; }
.b-authorization-v9 .b-auth-field .field-help { margin:6px 0 0;color:var(--apple-faint);font-size:9px; }
.b-authorization-v9 .b-auth-form__footer { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-top:2px;padding:14px;border-radius:15px;background:#f5f5f7;gap:18px; }
.b-authorization-v9 .b-auth-form__footer strong { color:var(--apple-copy);font-size:11px; }
.b-authorization-v9 .b-auth-form__footer p { margin:3px 0 0;color:var(--apple-faint);font-size:9px; }
.b-authorization-v9 .b-auth-form__footer .button { flex:0 0 auto;min-width:132px; }
.b-authorization-v9 .b-auth-verification { margin-top:16px; }
.b-authorization-v9 .b-auth-checks { grid-template-columns:repeat(4,minmax(0,1fr)); }
.b-authorization-v9 .b-auth-checks article { align-items:flex-start;min-height:120px;padding:15px; }
.b-authorization-v9 .b-auth-checks small { display:block;margin-bottom:5px;color:var(--apple-violet);font-size:8px;font-weight:800;letter-spacing:.07em; }
.b-authorization-v9 .b-auth-checks strong { color:var(--apple-ink);font-size:11px; }
.b-authorization-v9 .b-auth-checks p { margin:5px 0 0;color:var(--apple-muted);font-size:9px;line-height:1.55; }
@media(max-width:1100px){.b-authorization-v9 .b-auth-layout{grid-template-columns:1fr}.b-authorization-v9 .b-auth-checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.b-authorization-v9 .b-auth-hero{align-items:flex-start;flex-direction:column;gap:15px}.b-authorization-v9 .b-auth-flow{grid-template-columns:repeat(4,1fr);gap:9px}.b-authorization-v9 .b-auth-flow>i{display:none}.b-authorization-v9 .b-auth-flow article{flex-direction:column;align-items:flex-start}.b-authorization-v9 .b-auth-form{grid-template-columns:1fr}.b-authorization-v9 .b-auth-field--wide{grid-column:auto}.b-authorization-v9 .b-auth-form__footer{grid-column:auto;align-items:stretch;flex-direction:column}.b-authorization-v9 .b-auth-form__footer .button{width:100%}}
@media(max-width:480px){.product-design-v4.b-authorization-v9 .page{padding-right:10px;padding-left:10px}.b-authorization-v9 .b-auth-hero,.b-authorization-v9 .b-auth-summary,.b-authorization-v9 .b-auth-editor,.b-authorization-v9 .b-auth-verification{padding:16px;border-radius:17px}.b-authorization-v9 .b-auth-flow{grid-template-columns:repeat(2,1fr)}.b-authorization-v9 .b-auth-checks{grid-template-columns:1fr}.b-authorization-v9 .b-auth-facts>div{grid-template-columns:82px minmax(0,1fr)}}

/* B OpenAI v10 — read-only boundary, cost valve and isolated key rotation. */
.product-design-v4.b-openai-v10 .page { max-width:1440px;padding-top:26px; }
.b-openai-v10 .b-openai-hero { display:flex;align-items:center;justify-content:space-between;min-height:112px;margin-bottom:16px;padding:22px 24px;border:1px solid var(--apple-line);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(250,248,255,.88));box-shadow:var(--apple-shadow-soft); }
.b-openai-v10 .b-openai-hero__title { display:flex;align-items:center;min-width:0;gap:16px; }
.b-openai-v10 .b-openai-hero .gateway-page-emblem { position:static;flex:0 0 52px;width:52px;height:52px; }
.b-openai-v10 .b-openai-hero h1 { margin:2px 0 4px;color:var(--apple-ink);font-size:clamp(25px,2vw,33px);letter-spacing:-.04em; }
.b-openai-v10 .b-openai-hero .lede { margin:0;color:var(--apple-muted);font-size:12px; }
.b-openai-v10 .b-openai-hero__status { display:grid;grid-template-columns:auto auto;align-items:center;gap:3px 10px;text-align:right; }
.b-openai-v10 .b-openai-hero__status .badge { grid-row:1/3;align-self:center;margin-right:8px; }
.b-openai-v10 .b-openai-hero__status small { color:var(--apple-faint);font-size:8px; }
.b-openai-v10 .b-openai-hero__status strong { color:var(--apple-copy);font-size:11px; }
.b-openai-v10 .b-openai-boundary { display:grid;grid-template-columns:auto minmax(280px,1fr) auto;align-items:center;padding:17px 19px;gap:13px; }
.b-openai-v10 .b-openai-boundary .eyebrow { color:var(--apple-violet); }
.b-openai-v10 .b-openai-boundary h2 { margin:2px 0 3px;color:var(--apple-ink);font-size:14px; }
.b-openai-v10 .b-openai-boundary p { margin:0;color:var(--apple-muted);font-size:10px; }
.b-openai-v10 .b-boundary-chain { display:flex;align-items:center;padding:9px 11px;gap:7px;border:1px solid var(--apple-line);border-radius:12px;background:#f7f7f9;white-space:nowrap; }
.b-openai-v10 .b-boundary-chain span { padding:5px 7px;border-radius:7px;color:var(--apple-copy);background:#fff;font-size:9px;font-weight:700; }
.b-openai-v10 .b-boundary-chain i { color:#c7c7cc;font-style:normal; }
.b-openai-v10 .openai-control-grid { display:grid;grid-template-columns:minmax(380px,.9fr) minmax(520px,1.1fr);grid-template-areas:'connection protection' 'connection rotation';align-items:start;gap:16px; }
.b-openai-v10 .b-openai-connection { grid-area:connection; }
.b-openai-v10 .b-openai-protection { grid-area:protection; }
.b-openai-v10 .b-openai-rotation { grid-area:rotation; }
.b-openai-v10 .b-openai-panel { padding:20px;border:1px solid var(--apple-line);border-radius:20px;background:rgba(255,255,255,.86);box-shadow:var(--apple-shadow-soft); }
.b-openai-v10 .b-openai-heading { display:flex;align-items:center;justify-content:space-between;min-height:45px;margin-bottom:15px;padding-bottom:13px;border-bottom:1px solid var(--apple-line); }
.b-openai-v10 .b-openai-heading h2 { display:flex;align-items:center;margin:2px 0 0;gap:8px;color:var(--apple-ink);font-size:16px;letter-spacing:-.02em; }
.b-openai-v10 .b-openai-heading > span:not(.badge):not(.b-sensitive-label) { color:var(--apple-faint);font-size:9px; }
.b-openai-v10 .b-openai-key-card { display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid rgba(124,58,237,.10);border-radius:16px;background:linear-gradient(135deg,#f7f3ff,#fbfafc);gap:12px; }
.b-openai-v10 .b-openai-key-card small { display:block;color:var(--apple-faint);font-size:9px; }
.b-openai-v10 .b-openai-key-card strong { display:block;margin:5px 0 3px;color:#5b21b6;font-size:13px; }
.b-openai-v10 .b-openai-key-card p { margin:0;color:var(--apple-muted);font-size:9px; }
.b-openai-v10 .b-key-state { display:inline-flex;align-items:center;min-height:31px;padding:0 10px;gap:6px;border-radius:999px;color:var(--apple-danger);background:rgba(217,45,32,.07);font-size:9px;font-weight:750; }
.b-openai-v10 .b-key-state i { width:6px;height:6px;border-radius:50%;background:currentColor; }
.b-openai-v10 .b-key-state.is-ready { color:var(--apple-success);background:rgba(20,132,95,.08); }
.b-openai-v10 .b-openai-facts { margin-top:12px; }
.b-openai-v10 .b-openai-facts > div { grid-template-columns:132px minmax(0,1fr);min-height:51px; }
.b-openai-v10 .b-openai-facts dd { text-align:right; }
.b-openai-v10 .b-openai-readonly-note { display:flex;margin-top:15px;padding:13px;gap:10px;border-radius:14px;background:#f5f5f7; }
.b-openai-v10 .b-openai-readonly-note img { width:20px;height:20px;opacity:.62; }
.b-openai-v10 .b-openai-readonly-note strong,.b-openai-v10 .b-openai-readonly-note span { display:block; }
.b-openai-v10 .b-openai-readonly-note strong { color:var(--apple-copy);font-size:10px; }
.b-openai-v10 .b-openai-readonly-note span { margin-top:3px;color:var(--apple-faint);font-size:9px; }
.b-openai-v10 .b-quota-preview { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.b-openai-v10 .b-quota-preview article { padding:14px 15px;border:1px solid var(--apple-line);border-radius:15px;background:#fafafa; }
.b-openai-v10 .b-quota-preview small,.b-openai-v10 .b-quota-preview span { color:var(--apple-faint);font-size:9px; }
.b-openai-v10 .b-quota-preview strong { display:block;margin:5px 0 2px;color:var(--apple-ink);font-size:25px;line-height:1;letter-spacing:-.035em; }
.b-openai-v10 .b-panel-intro { margin:12px 0;padding:10px 12px;border-left:3px solid var(--apple-violet);border-radius:0 10px 10px 0;color:var(--apple-muted);background:rgba(124,58,237,.045);font-size:9px;line-height:1.55; }
.b-openai-v10 .b-openai-form { gap:11px; }
.b-openai-v10 .b-openai-form__row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.b-openai-v10 .b-openai-form .field label { margin-bottom:6px;color:var(--apple-copy);font-size:10px;font-weight:650; }
.b-openai-v10 .b-openai-form .field-help { margin:5px 0 0;color:var(--apple-faint);font-size:9px;line-height:1.5; }
.b-openai-v10 .b-form-action { display:flex;align-items:center;justify-content:space-between;margin-top:3px;padding:12px;border-radius:14px;background:#f5f5f7;gap:12px; }
.b-openai-v10 .b-form-action p { margin:0;color:var(--apple-faint);font-size:8px;line-height:1.45; }
.b-openai-v10 .b-form-action .button { flex:0 0 auto; }
.b-openai-v10 .b-sensitive-label { padding:5px 8px;border-radius:999px;color:var(--apple-danger);background:rgba(217,45,32,.07);font-size:8px;font-weight:750; }
.b-openai-v10 .b-rotation-warning { margin-bottom:12px;padding:12px 13px;border:1px solid rgba(161,92,10,.15);border-radius:13px;background:rgba(255,248,235,.72); }
.b-openai-v10 .b-rotation-warning strong { color:#7a4608;font-size:10px; }
.b-openai-v10 .b-rotation-warning p { margin:3px 0 0;color:#8a5b20;font-size:9px; }
.b-openai-v10 .b-openai-audit { display:flex;align-items:center;gap:12px; }
.b-openai-v10 .b-openai-audit h2 { margin:0 0 3px;color:var(--apple-ink);font-size:13px; }
.b-openai-v10 .b-openai-audit p { margin:0;color:var(--apple-muted);font-size:9px; }
.b-openai-v10 .b-openai-audit > span:last-child { margin-left:auto;padding:5px 8px;border-radius:999px;color:#6d28d9;background:var(--apple-violet-soft);font-size:8px;font-weight:750; }
@media(max-width:1180px){.b-openai-v10 .openai-control-grid{grid-template-columns:1fr;grid-template-areas:'connection' 'protection' 'rotation'}}
@media(max-width:820px){.b-openai-v10 .b-openai-boundary{grid-template-columns:auto 1fr}.b-openai-v10 .b-boundary-chain{grid-column:1/-1;justify-content:center}}
@media(max-width:720px){.b-openai-v10 .b-openai-hero{align-items:flex-start;flex-direction:column;gap:15px}.b-openai-v10 .b-openai-hero__status{text-align:left}.b-openai-v10 .b-openai-facts>div{grid-template-columns:1fr}.b-openai-v10 .b-openai-facts dd{text-align:left}.b-openai-v10 .b-form-action{align-items:stretch;flex-direction:column}.b-openai-v10 .b-form-action .button{width:100%}}
@media(max-width:480px){.product-design-v4.b-openai-v10 .page{padding-right:10px;padding-left:10px}.b-openai-v10 .b-openai-hero,.b-openai-v10 .b-openai-panel,.b-openai-v10 .b-openai-boundary{padding:16px;border-radius:17px}.b-openai-v10 .b-openai-boundary{grid-template-columns:1fr}.b-openai-v10 .b-openai-boundary .security-callout__icon{display:none}.b-openai-v10 .b-boundary-chain{display:grid;grid-template-columns:1fr}.b-openai-v10 .b-boundary-chain i{display:none}.b-openai-v10 .b-quota-preview,.b-openai-v10 .b-openai-form__row{grid-template-columns:1fr}.b-openai-v10 .b-openai-key-card{align-items:flex-start;flex-direction:column}.b-openai-v10 .b-openai-audit>span:last-child{display:none}}

/* B runtime diagnostics v11 — visible signal hierarchy without new behaviour. */
.b-overview-v8 .b-runtime-v11 { padding:0;overflow:hidden; }
.b-overview-v8 .b-runtime-v11 .b-runtime-heading { margin:0;padding:19px 20px 15px; }
.b-overview-v8 .b-runtime-summary { display:flex;align-items:center;justify-content:space-between;margin:16px 20px;padding:16px;border:1px solid var(--apple-line);border-radius:16px;background:linear-gradient(135deg,#f7f3ff,#f8fbfa);gap:18px; }
.b-overview-v8 .b-runtime-summary__signal { display:flex;align-items:center;min-width:0;gap:12px; }
.b-overview-v8 .b-runtime-pulse { position:relative;display:grid;width:44px;height:44px;flex:0 0 44px;place-items:center;border-radius:14px;background:#fff;box-shadow:0 8px 20px rgba(124,58,237,.10); }
.b-overview-v8 .b-runtime-pulse i { position:absolute;width:9px;height:9px;border-radius:50%;background:var(--apple-success); }
.b-overview-v8 .b-runtime-pulse i:nth-child(2) { width:24px;height:24px;border:1px solid rgba(20,132,95,.22);background:transparent;animation:b-runtime-ring 2.4s ease-out infinite; }
.b-overview-v8 .b-runtime-pulse i:nth-child(3) { width:38px;height:38px;border:1px solid rgba(20,132,95,.10);background:transparent;animation:b-runtime-ring 2.4s .55s ease-out infinite; }
@keyframes b-runtime-ring { 0%{transform:scale(.65);opacity:.8}70%,100%{transform:scale(1);opacity:.18} }
@media(prefers-reduced-motion:reduce){.b-overview-v8 .b-runtime-pulse i{animation:none!important}}
.b-overview-v8 .b-runtime-summary small { display:block;color:var(--apple-faint);font-size:9px; }
.b-overview-v8 .b-runtime-summary strong { display:block;margin:3px 0;color:var(--apple-ink);font-size:15px; }
.b-overview-v8 .b-runtime-summary p { margin:0;color:var(--apple-muted);font-size:9px; }
.b-overview-v8 .b-runtime-summary__time { padding-left:18px;border-left:1px solid var(--apple-line);text-align:right; }
.b-overview-v8 .b-runtime-summary__time time,.b-overview-v8 .b-runtime-summary__time span { display:block;margin-top:4px;color:var(--apple-copy);font-size:10px;font-weight:650; }
.b-overview-v8 .b-runtime-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--apple-line); }
.b-overview-v8 .b-runtime-card { position:relative;min-height:154px;padding:17px 18px;border-right:1px solid var(--apple-line);background:rgba(255,255,255,.68); }
.b-overview-v8 .b-runtime-card:last-child { border-right:0; }
.b-overview-v8 .b-runtime-card::before { position:absolute;top:0;right:18px;left:18px;height:2px;border-radius:99px;background:var(--apple-success);opacity:.72;content:''; }
.b-overview-v8 .b-runtime-card.b-status-card--warning::before { background:var(--apple-warning); }
.b-overview-v8 .b-runtime-card.b-status-card--failed::before { background:var(--apple-danger); }
.b-overview-v8 .b-runtime-card__status { display:flex;align-items:center;gap:7px;color:var(--apple-muted); }
.b-overview-v8 .b-runtime-card__status small { font-size:9px; }
.b-overview-v8 .b-runtime-card__value { display:flex;align-items:center;justify-content:space-between;margin:13px 0 6px;gap:8px; }
.b-overview-v8 .b-runtime-card__value strong { overflow:hidden;color:var(--apple-ink);font-size:15px;text-overflow:ellipsis;white-space:nowrap; }
.b-overview-v8 .b-runtime-card__value span { padding:4px 6px;border-radius:999px;color:var(--apple-success);background:rgba(20,132,95,.07);font-size:8px; }
.b-overview-v8 .b-runtime-card p { min-height:30px;margin:0;color:var(--apple-faint);font-size:9px;line-height:1.5; }
.b-overview-v8 .b-runtime-card__foot { display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--apple-line);color:var(--apple-faint);font-size:8px; }
.b-overview-v8 .b-runtime-card__foot i { width:18px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--apple-success),rgba(20,132,95,.14)); }
@media(max-width:980px){.b-overview-v8 .b-runtime-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.b-overview-v8 .b-runtime-card:nth-child(2n){border-right:0}.b-overview-v8 .b-runtime-card:nth-child(n+3){border-top:1px solid var(--apple-line)}}
@media(max-width:600px){.b-overview-v8 .b-runtime-summary{align-items:flex-start;flex-direction:column}.b-overview-v8 .b-runtime-summary__time{width:100%;padding:11px 0 0;border-top:1px solid var(--apple-line);border-left:0;text-align:left}.b-overview-v8 .b-runtime-grid{grid-template-columns:1fr}.b-overview-v8 .b-runtime-card{border-top:1px solid var(--apple-line);border-right:0}.b-overview-v8 .b-runtime-card:first-child{border-top:0}}

/* B login v12 — fixed-width Apple-neutral security gateway. */
.product-design-v4.b-login-v12 { min-height:100vh;background:radial-gradient(circle at 14% 10%,rgba(124,58,237,.08),transparent 29%),radial-gradient(circle at 88% 88%,rgba(15,118,110,.06),transparent 28%),#f5f5f7; }
.b-login-v12 .b-login-main { display:grid;min-height:100vh;padding:32px;place-items:center; }
.b-login-v12 .b-login-shell { display:grid;grid-template-columns:minmax(420px,.98fr) minmax(430px,1.02fr);width:min(1080px,100%);min-height:650px;border:1px solid rgba(29,29,31,.09);border-radius:26px;background:rgba(255,255,255,.82);box-shadow:0 28px 80px rgba(0,0,0,.10),0 3px 12px rgba(0,0,0,.04);overflow:hidden;backdrop-filter:blur(28px) saturate(150%); }
.b-login-v12 .b-login-context { position:relative;display:flex;flex-direction:column;min-width:0;padding:30px;color:#fff;background:radial-gradient(circle at 68% 22%,rgba(124,58,237,.33),transparent 34%),radial-gradient(circle at 20% 84%,rgba(15,118,110,.20),transparent 36%),linear-gradient(145deg,#1c1c1e,#2a292e 60%,#19191b);overflow:hidden; }
.b-login-v12 .b-login-context::before { position:absolute;right:-110px;bottom:-130px;width:330px;height:330px;border:1px solid rgba(255,255,255,.06);border-radius:50%;box-shadow:0 0 0 48px rgba(255,255,255,.025),0 0 0 96px rgba(255,255,255,.018);content:''; }
.b-login-v12 .b-login-context__top { position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px; }
.b-login-v12 .b-login-context .brand { gap:10px; }
.b-login-v12 .b-login-context .brand__mark { width:40px;height:40px;border:0;border-radius:12px;background:transparent;box-shadow:0 8px 22px rgba(0,0,0,.20); }
.b-login-v12 .b-login-context .brand__copy strong { color:#fff;font-size:13px; }
.b-login-v12 .b-login-context .brand__copy span { color:rgba(255,255,255,.48);font-size:8px; }
.b-login-v12 .b-login-private { display:inline-flex;align-items:center;min-height:28px;padding:0 9px;gap:6px;border:1px solid rgba(255,255,255,.11);border-radius:999px;color:rgba(255,255,255,.70);background:rgba(255,255,255,.06);font-size:8px;font-weight:650; }
.b-login-v12 .b-login-private i { width:6px;height:6px;border-radius:50%;background:#6ee7b7;box-shadow:0 0 0 3px rgba(110,231,183,.12); }
.b-login-v12 .b-login-context__copy { position:relative;z-index:2;margin:auto 0; }
.b-login-v12 .auth-shield-visual { position:relative;display:grid;width:84px;height:84px;margin-bottom:24px;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:25px;background:rgba(255,255,255,.075);box-shadow:0 20px 54px rgba(0,0,0,.20); }
.b-login-v12 .auth-shield-visual img { z-index:2;width:34px;height:34px;filter:brightness(0) invert(1);opacity:.90; }
.b-login-v12 .auth-shield-visual span { position:absolute;width:102px;height:102px;border:1px solid rgba(255,255,255,.06);border-radius:32px;transform:rotate(10deg); }
.b-login-v12 .auth-shield-visual span:last-child { width:122px;height:122px;opacity:.55;transform:rotate(-8deg); }
.b-login-v12 .b-login-context__copy .eyebrow { color:#c4b5fd;font-size:9px; }
.b-login-v12 .b-login-context__copy h2 { margin:6px 0 8px;color:#fff;font-size:30px;letter-spacing:-.04em; }
.b-login-v12 .b-login-context__copy > p:not(.eyebrow) { max-width:370px;margin:0;color:rgba(255,255,255,.58);font-size:11px;line-height:1.65; }
.b-login-v12 .b-login-boundaries { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:25px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.045);overflow:hidden; }
.b-login-v12 .b-login-boundaries > div { min-width:0;padding:13px;border-right:1px solid rgba(255,255,255,.08); }
.b-login-v12 .b-login-boundaries > div:last-child { border-right:0; }
.b-login-v12 .b-login-boundaries img { width:16px;height:16px;margin-bottom:9px;filter:brightness(0) invert(1);opacity:.70; }
.b-login-v12 .b-login-boundaries small,.b-login-v12 .b-login-boundaries strong { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.b-login-v12 .b-login-boundaries small { color:rgba(255,255,255,.38);font-size:7px; }
.b-login-v12 .b-login-boundaries strong { margin-top:3px;color:rgba(255,255,255,.80);font-size:8px; }
.b-login-v12 .b-login-context__foot { position:relative;z-index:2;margin:0;color:rgba(255,255,255,.30);font-size:8px;letter-spacing:.06em; }
.b-login-v12 .b-login-card { display:flex;flex-direction:column;justify-content:center;min-width:0;padding:64px 70px;background:rgba(255,255,255,.92); }
.b-login-v12 .b-login-card__header { margin-bottom:25px; }
.b-login-v12 .b-login-card__emblem { display:grid;width:46px;height:46px;margin-bottom:21px;place-items:center;border:1px solid var(--apple-line);border-radius:14px;background:linear-gradient(145deg,#fff,#f4f0ff);box-shadow:0 10px 24px rgba(124,58,237,.08); }
.b-login-v12 .b-login-card__emblem img { width:21px;height:21px;filter:invert(31%) sepia(77%) saturate(2514%) hue-rotate(253deg) brightness(84%) contrast(96%); }
.b-login-v12 .b-login-card__header .eyebrow { color:var(--apple-violet);font-size:9px; }
.b-login-v12 .b-login-card__header h1 { margin:6px 0 7px;color:var(--apple-ink);font-size:31px;letter-spacing:-.045em; }
.b-login-v12 .b-login-card__header .lede { margin:0;color:var(--apple-muted);font-size:11px; }
.b-login-v12 .b-login-form { gap:16px; }
.b-login-v12 .b-login-field label { margin-bottom:7px;color:var(--apple-copy);font-size:10px;font-weight:700; }
.b-login-v12 .b-login-input { position:relative; }
.b-login-v12 .b-login-input img { position:absolute;z-index:2;top:50%;left:13px;width:17px;height:17px;opacity:.44;transform:translateY(-50%); }
.b-login-v12 .b-login-input input { width:100%;min-height:48px;padding-left:42px;border-radius:13px;background:#fafafa; }
.b-login-v12 .b-login-input:focus-within img { opacity:.82;filter:invert(31%) sepia(77%) saturate(2514%) hue-rotate(253deg) brightness(84%) contrast(96%); }
.b-login-v12 .b-login-field .field-help { margin:6px 0 0;color:var(--apple-faint);font-size:8px; }
.b-login-v12 .b-login-submit { display:flex;align-items:center;justify-content:space-between;min-height:48px;margin-top:3px;padding:0 17px;border-radius:13px; }
.b-login-v12 .b-login-submit b { font-size:20px;font-weight:400; }
.b-login-v12 .b-login-assurance { display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding:11px 0;border-top:1px solid var(--apple-line);border-bottom:1px solid var(--apple-line);gap:8px; }
.b-login-v12 .b-login-assurance span { display:flex;align-items:center;gap:5px;color:var(--apple-faint);font-size:7px;white-space:nowrap; }
.b-login-v12 .b-login-assurance i { width:5px;height:5px;border-radius:50%;background:var(--apple-success); }
.b-login-v12 .auth-footer-note { margin:15px 0 0;padding:0;color:var(--apple-faint);background:transparent;font-size:8px;text-align:center; }
@media(max-width:900px){.b-login-v12 .b-login-main{padding:20px}.b-login-v12 .b-login-shell{grid-template-columns:1fr;max-width:620px}.b-login-v12 .b-login-context{min-height:340px}.b-login-v12 .b-login-context__copy{margin:40px 0}.b-login-v12 .b-login-card{padding:46px 54px}}
@media(max-width:520px){.b-login-v12 .b-login-main{padding:10px}.b-login-v12 .b-login-shell{border-radius:19px}.b-login-v12 .b-login-context{min-height:auto;padding:20px}.b-login-v12 .b-login-context__copy{margin:34px 0 20px}.b-login-v12 .auth-shield-visual{width:62px;height:62px;margin-bottom:19px;border-radius:19px}.b-login-v12 .auth-shield-visual span{display:none}.b-login-v12 .auth-shield-visual img{width:27px;height:27px}.b-login-v12 .b-login-context__copy h2{font-size:24px}.b-login-v12 .b-login-boundaries{grid-template-columns:1fr}.b-login-v12 .b-login-boundaries>div{display:flex;align-items:center;padding:10px;gap:9px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.b-login-v12 .b-login-boundaries>div:last-child{border-bottom:0}.b-login-v12 .b-login-boundaries img{margin:0}.b-login-v12 .b-login-card{padding:36px 22px}.b-login-v12 .b-login-card__header h1{font-size:28px}.b-login-v12 .b-login-assurance{align-items:flex-start;flex-direction:column}}

/* B mobile navigation v13 — expose all four destinations without horizontal clipping. */
@media(max-width:720px){
  .product-design-v4 .gateway-sidebar .primary-nav { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;gap:7px; }
  .product-design-v4 .gateway-sidebar .primary-nav a { display:flex!important;width:auto!important;min-width:0!important;justify-content:flex-start;white-space:normal; }
}
/* B API-only administration. Content remains centered on ultrawide screens
   and collapses without horizontal overlap on narrow viewports. */
.page-shell{width:min(100% - 48px,1440px);margin:0 auto;padding:34px 0 48px}
.page-heading{display:flex;align-items:flex-start;justify-content:space-between;margin:0 0 24px;gap:24px}
.page-heading h1{margin:4px 0 8px;color:var(--apple-ink);font-size:clamp(28px,2vw,38px);letter-spacing:-.04em;line-height:1.05}
.page-heading>div>p:not(.eyebrow){max-width:760px;margin:0;color:var(--apple-muted);font-size:14px;line-height:1.65}
.panel{min-width:0;margin-top:18px;padding:22px;border:1px solid var(--apple-line);border-radius:22px;background:rgba(255,255,255,.9);box-shadow:0 14px 38px rgba(20,24,35,.045)}
.log-list{display:grid;gap:10px}
.log-list article{display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(130px,.65fr) auto minmax(150px,.8fr) minmax(160px,.8fr);align-items:center;min-width:0;padding:14px 16px;border:1px solid var(--apple-line);border-radius:16px;gap:14px;background:#fff}.log-id,.log-error{min-width:0}.log-id strong,.log-id small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.log-id strong{font-size:13px}.log-id small,.log-error,.log-list time{margin-top:3px;color:var(--apple-faint);font-size:11px}.provider-chip{display:inline-flex;justify-content:center;padding:6px 9px;border:1px solid #d9dee6;border-radius:999px;color:#394150;background:#f6f7f9;font-size:11px;font-weight:700;white-space:nowrap}.provider-chip--desktop{border-color:#d8e6e2;color:#176e60;background:#f0f8f6}
.pagination{display:flex;align-items:center;justify-content:flex-end;margin-top:16px;gap:9px}.pagination>span{margin-right:auto;color:var(--apple-faint);font-size:12px}.pagination form label{display:flex;align-items:center;color:var(--apple-muted);font-size:12px;gap:7px}.pagination select{min-width:86px}.pagination .is-disabled{pointer-events:none;opacity:.45}
.empty-copy{margin:0;padding:28px;text-align:center;color:var(--apple-faint);font-size:13px}
@media(max-width:1120px){.log-list article{grid-template-columns:minmax(0,1fr) auto auto}.log-error,.log-list time{grid-column:1/-1}}
@media(max-width:720px){.page-shell{width:min(100% - 28px,1440px);padding-top:24px}.page-heading{flex-direction:column}.log-list article{grid-template-columns:1fr;align-items:start}.pagination{flex-wrap:wrap;justify-content:flex-start}.pagination>span{width:100%;margin:0}.pagination form{margin-right:auto}}