/* Shared management shell. Consumer portal and workbench styles stay separate. */
.admin-layout {
  --admin-bg: #f6f7f9; --admin-surface: #fff; --admin-ink: #202125;
  --admin-muted: #73757e; --admin-border: #e7e8ec; --admin-accent: #0875e1;
  display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100dvh;
  color: var(--admin-ink); background: var(--admin-bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px; line-height: 1.5;
}
.admin-layout *, .admin-layout *::before, .admin-layout *::after { box-sizing: border-box; }
.admin-layout button, .admin-layout input, .admin-layout select, .admin-layout textarea { font: inherit; }
.admin-layout button { cursor: pointer; }
.admin-layout button:disabled { cursor: default; opacity: .5; }
.admin-layout :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--admin-accent); outline-offset: 3px; }
.admin-layout .admin-sidebar { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100dvh; padding: 28px 15px 20px; overflow-y: auto; border-right: 1px solid var(--admin-border); background: var(--admin-surface); z-index: 40; }
.admin-layout .admin-sidebar-brand { width: 100%; min-height: 49px; padding: 0 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border: 0; border-radius: 0; background: transparent; color: var(--admin-ink); font-size: 27px; font-weight: 650; letter-spacing: -1.35px; text-align: left; text-decoration: none; }
.admin-layout .admin-sidebar-brand .brand { font-size: 27px; font-weight: 650; color: var(--admin-ink); letter-spacing: -1.35px; }
.admin-layout .admin-sidebar-brand > :is(small, span) { font-size: 10px; font-weight: 500; letter-spacing: 0; color: var(--admin-muted); }
.admin-layout .admin-nav { display: flex; flex-direction: column; gap: 5px; }
.admin-layout .admin-nav-group-label { margin: 16px 14px 6px; color: var(--admin-muted); font-size: 10px; }
.admin-layout .admin-nav-link { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; color: #646670; font-size: 13px; text-align: left; text-decoration: none; }
.admin-layout .admin-nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.admin-layout .admin-nav-link:hover:enabled { background: #f5f6f8; color: var(--admin-ink); }
.admin-layout .admin-nav-link[aria-current="page"], .admin-layout .admin-nav-link.active { background: #edf4ff; color: #066acb; font-weight: 550; }
.admin-layout .admin-sidebar-footer { margin-top: auto; padding: 15px 13px 0; border-top: 1px solid var(--admin-border); color: var(--admin-muted); font-size: 11px; }
.admin-layout .admin-sidebar-footer strong { display: block; color: #555c68; font-size: 11px; font-weight: 550; overflow-wrap: anywhere; }
.admin-layout .admin-sidebar-footer span { display: block; margin-top: 4px; font-size: 10px; }
.admin-layout .admin-main { min-width: 0; max-width: none; width: 100%; padding: 0; margin: 0; }
.admin-layout .admin-header { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 72px; padding: 16px 32px; border-bottom: 1px solid var(--admin-border); background: #ffffffed; backdrop-filter: blur(16px); }
.admin-layout .admin-header-title { margin: 0; font-size: 14px; font-weight: 550; }
.admin-layout .admin-header-title small { display: block; margin-top: 3px; color: var(--admin-muted); font-size: 10px; font-weight: 400; }
.admin-layout .admin-header-actions { display: flex; align-items: center; gap: 14px; min-width: 0; }
.admin-layout .admin-menu-toggle { display: none; align-items: center; justify-content: center; width: 36px; min-height: 36px; padding: 8px; border: 1px solid var(--admin-border); border-radius: 9px; background: var(--admin-surface); }
.admin-layout .admin-menu-toggle svg { width: 18px; height: 18px; }
.admin-layout .admin-sidebar-backdrop { display: none; }
.admin-layout .admin-content { max-width: 1500px; padding: 30px 32px 38px; margin-inline: auto; min-width: 0; }
.admin-layout .admin-page-heading, .admin-layout .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 25px; padding: 0; }
.admin-layout .admin-page-heading h1, .admin-layout .page-heading h1 { margin: 0; color: var(--admin-ink); font-size: 27px; font-weight: 600; letter-spacing: -.8px; line-height: 1.3; }
.admin-layout .admin-page-heading p, .admin-layout .page-heading p { margin: 8px 0 0; color: var(--admin-muted); font-size: 12px; }
.admin-layout .admin-dashboard-tools { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.admin-layout .admin-action { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 36px; padding: 8px 12px; border: 1px solid var(--admin-border); border-radius: 9px; background: var(--admin-surface); color: #50525b; white-space: nowrap; font-size: 12px; text-decoration: none; }
.admin-layout .admin-action svg { width: 15px; height: 15px; flex-shrink: 0; }
.admin-layout .admin-action:hover:enabled { background: #f6f7f9; }
.admin-layout .admin-action-primary { background: var(--admin-ink); color: #fff; border-color: var(--admin-ink); }
.admin-layout .admin-menu-toggle { display: none; }
.admin-layout .admin-select { min-height: 36px; padding: 8px 30px 8px 11px; border: 1px solid var(--admin-border); border-radius: 9px; background: var(--admin-surface); color: #50525b; font-size: 12px; }
.admin-layout .admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.admin-layout .admin-metric { min-width: 0; padding: 19px 20px 16px; border: 1px solid var(--admin-border); border-radius: 15px; background: var(--admin-surface); }
.admin-layout .admin-metric-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--admin-muted); font-size: 11px; }
.admin-layout .admin-metric-label svg { width: 15px; height: 15px; color: #9fa5b1; }
.admin-layout .admin-metric-value { display: block; margin-top: 14px; overflow-wrap: anywhere; color: var(--admin-ink); font-size: clamp(23px, 2.25vw, 31px); font-weight: 600; letter-spacing: -.9px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.admin-layout .admin-metric-detail { margin: 8px 0 0; overflow-wrap: anywhere; color: var(--admin-muted); font-size: 10px; line-height: 1.65; }
.admin-layout .admin-metric-throughput .admin-metric-value { font-size: clamp(21px, 2vw, 28px); }
.admin-layout .admin-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; padding: 8px; border: 1px solid var(--admin-border); border-radius: 15px; background: var(--admin-surface); }
.admin-layout .admin-quick-action { display: flex; align-items: center; justify-content: flex-start; gap: 11px; min-width: 0; min-height: 65px; padding: 11px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--admin-ink); text-align: left; }
.admin-layout .admin-quick-action:hover:enabled { background: #f7f8fa; }
.admin-layout .admin-quick-action > span:nth-child(2) { min-width: 0; }
.admin-layout .admin-quick-action strong { display: block; font-size: 12px; font-weight: 550; }
.admin-layout .admin-quick-action > svg { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; color: #a2a6af; }
.admin-layout .admin-quick-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: #f2f5fa; color: #708098; }
.admin-layout .admin-quick-icon svg { width: 17px; height: 17px; }
.admin-layout .admin-subtext { display: block; margin-top: 5px; color: var(--admin-muted); font-size: 10px; font-weight: 400; overflow-wrap: anywhere; }
.admin-layout .admin-period-summary { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px 32px; margin: 26px 2px 18px; color: var(--admin-muted); font-size: 10px; }
.admin-layout .admin-period-summary > span { min-width: 85px; }
.admin-layout .admin-period-summary > span:last-child { margin-left: auto; text-align: right; }
.admin-layout .admin-period-summary strong { display: block; margin-top: 5px; color: #50525b; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.admin-layout .admin-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; }
.admin-layout .admin-panel { min-width: 0; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--admin-border); border-radius: 15px; background: var(--admin-surface); }
.admin-layout .admin-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 21px 22px 12px; }
.admin-layout .admin-panel-header h2 { margin: 0; color: var(--admin-ink); font-size: 13px; font-weight: 600; }
.admin-layout .admin-panel-header p { margin: 5px 0 0; color: var(--admin-muted); font-size: 10px; }
.admin-layout .admin-panel-header .admin-action { min-height: 29px; padding: 5px 8px; border: 0; background: transparent; color: var(--admin-accent); font-size: 11px; }
.admin-layout .admin-table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.admin-layout .admin-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.admin-layout .admin-table th { padding: 13px 18px; border-bottom: 1px solid var(--admin-border); color: var(--admin-muted); font-size: 10px; font-weight: 400; }
.admin-layout .admin-table td { padding: 15px 18px; border-bottom: 1px solid #f0f1f4; color: #50525b; font-size: 11px; font-variant-numeric: tabular-nums; }
.admin-layout .admin-table th:first-child, .admin-layout .admin-table td:first-child { padding-left: 22px; }
.admin-layout .admin-table th:last-child, .admin-layout .admin-table td:last-child { padding-right: 22px; }
.admin-layout .admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-layout .admin-table-name { color: var(--admin-ink); font-weight: 500; }
.admin-layout .admin-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 207px; padding: 28px 24px; text-align: center; }
.admin-layout .admin-empty > svg { width: 24px; height: 24px; color: #bbc2cf; margin-bottom: 13px; }
.admin-layout .admin-empty strong { color: #69717e; font-size: 12px; font-weight: 500; }
.admin-layout .admin-empty p { max-width: 320px; margin: 7px 0 0; color: #979da7; font-size: 11px; line-height: 1.7; }
.admin-layout .admin-chart { padding: 12px 21px 15px; }
.admin-layout .admin-chart > svg { display: block; width: 100%; height: auto; min-height: 170px; }
.admin-layout .admin-chart-legend { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding-bottom: 10px; color: var(--admin-muted); font-size: 10px; }
.admin-layout .admin-chart-legend span { display: flex; align-items: center; gap: 5px; }
.admin-layout .admin-chart-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.admin-layout .admin-chart-grid { stroke: #eceef3; stroke-width: 1; }
.admin-layout .admin-chart-label { fill: #9298a3; font: 11px -apple-system, BlinkMacSystemFont, sans-serif; }
.admin-layout .admin-series-input { stroke: #3484e8; fill: #3484e8; background: #3484e8; }
.admin-layout .admin-series-output { stroke: #28a188; fill: #28a188; background: #28a188; }
.admin-layout .admin-series-cache { stroke: #a590da; fill: #a590da; background: #a590da; }
.admin-layout .admin-chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-layout .admin-chart-note { margin: 7px 0 0; color: #9298a3; font-size: 9px; }
.admin-layout .admin-status { display: inline-block; padding: 3px 7px; border-radius: 5px; background: #f0f2f5; color: #767d87; font-size: 10px; }
.admin-layout .admin-status-success { background: #edf8f1; color: #388761; }
.admin-layout .admin-status-pending, .admin-layout .admin-status-uncertain { background: #fff6e7; color: #96743d; }
.admin-layout .admin-status-blocked, .admin-layout .admin-status-failed, .admin-layout .admin-status-error { background: #fbefef; color: #b16868; }
.admin-layout .admin-data-note { margin: 6px 3px 0; color: #8e949f; font-size: 10px; line-height: 1.8; }
.admin-layout .admin-system-links { display: flex; gap: 9px; flex-wrap: wrap; }
.admin-layout .admin-key-prefix { color: #68707d; font: 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.admin-layout .admin-key-manage { min-height: 30px; padding: 5px 9px; font-size: 11px; }
.admin-layout .admin-empty > .admin-action { margin-top: 17px; }
.admin-layout .admin-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Existing management pages use the same quieter materials and compact spacing. */
.admin-layout .panel { border: 1px solid var(--admin-border); border-radius: 15px; background: var(--admin-surface); margin-bottom: 20px; }
.admin-layout .panel-header { padding: 21px 22px 0; }
.admin-layout .panel-header h2 { font-size: 13px; }
.admin-layout .panel-header p { font-size: 10px; }
.admin-layout .panel-body { padding: 21px 22px; }
.admin-layout .button { min-height: 35px; border-radius: 9px; font-size: 12px; }
.admin-layout .button.primary { background: var(--admin-ink); border-color: var(--admin-ink); color: white; }
.admin-layout .button.secondary { background: var(--admin-surface); border-color: var(--admin-border); }
.admin-layout .button.ghost { color: var(--admin-accent); }
.admin-layout .input { min-height: 39px; padding: 10px 12px; border-radius: 9px; border-color: var(--admin-border); background: var(--admin-surface); font-size: 12px; }
.admin-layout .data-table th { padding: 15px 22px 13px; font-size: 10px; }
.admin-layout .data-table td { padding: 17px 22px; font-size: 11px; }
.admin-layout .metric { padding: 21px; border: 1px solid var(--admin-border); border-radius: 15px; background: var(--admin-surface); }
.admin-layout .metric-value { font-size: 30px; margin-top: 17px; }
.admin-layout .workspace-footer { margin-top: 25px; padding-top: 20px; }
.admin-layout .topbar { padding-top: 0; }
/* The management shell intentionally does not inherit the consumer theme. */
.admin-layout .ui-account-menu { position: relative; flex: 0 0 auto; min-width: 0; margin-left: auto; }
.admin-layout .ui-account-trigger { display: flex; align-items: center; gap: 7px; min-height: 38px; max-width: 225px; padding: 6px 0 6px 9px; color: #515865; font-size: 12px; line-height: 1.5; list-style: none; white-space: nowrap; cursor: pointer; }
.admin-layout .ui-account-trigger::-webkit-details-marker { display: none; }
.admin-layout .ui-account-trigger::after { display: none; content: none; }
.admin-layout .ui-account-trigger > svg { width: 13px; height: 13px; flex-shrink: 0; color: #9299a4; transition: transform .16s; }
.admin-layout .ui-account-menu[open] > .ui-account-trigger > svg { transform: rotate(180deg); }
.admin-layout .ui-account-name { min-width: 0; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-layout .ui-account-role { flex-shrink: 0; padding: 3px 6px; border-radius: 5px; background: #f1f3f7; color: #848b97; font-size: 10px; line-height: 1.4; }
.admin-layout .ui-account-panel { position: absolute; z-index: 60; top: calc(100% + 10px); right: 0; width: 235px; max-width: calc(100vw - 34px); max-height: min(460px, calc(100dvh - 95px)); padding: 7px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--admin-border); border-radius: 13px; background: var(--admin-surface); color: var(--admin-ink); box-shadow: 0 10px 32px #15273e17; scrollbar-width: thin; }
.admin-layout .ui-account-menu:not([open]) > .ui-account-panel { display: none; }
.admin-layout .ui-account-heading { margin: 0 0 5px; padding: 8px 9px 11px; border-bottom: 1px solid var(--admin-border); color: var(--admin-muted); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.admin-layout .ui-account-heading > button { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.admin-layout .ui-account-item { display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; min-height: 38px; padding: 9px; border: 0; border-radius: 7px; background: transparent; color: #515865; font-size: 12px; line-height: 1.5; text-align: left; }
.admin-layout .ui-account-item:hover:enabled { background: #f5f6f8; color: var(--admin-ink); }
.admin-layout .ui-account-item > svg { width: 16px; height: 16px; flex-shrink: 0; color: #9299a4; }
.admin-layout .ui-account-logout { margin-top: 4px; border-top: 1px solid var(--admin-border); border-radius: 0 0 7px 7px; color: var(--admin-muted); }
@media (max-width: 1200px) {
  .admin-layout { grid-template-columns: 195px minmax(0, 1fr); }
  .admin-layout .admin-header { padding-inline: 25px; }
  .admin-layout .admin-content { padding-inline: 25px; }
  .admin-layout .admin-metrics { gap: 11px; }
  .admin-layout .admin-metric { padding: 17px 15px; }
  .admin-layout .admin-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-layout .admin-dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 760px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-layout .admin-sidebar { display: none; position: fixed; inset: 0 auto 0 0; width: 230px; max-width: calc(100vw - 56px); box-shadow: 15px 0 45px #00000014; }
  .admin-layout[data-sidebar-open="true"] .admin-sidebar { display: flex; z-index: 71; }
  .admin-layout[data-sidebar-open="true"] .admin-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 70; border: 0; border-radius: 0; background: #10162440; }
  .admin-layout .admin-menu-toggle { display: inline-flex; flex-shrink: 0; }
  .admin-layout .admin-header { justify-content: flex-start; gap: 12px; padding: 13px 22px; min-height: 67px; }
  .admin-layout .admin-header-actions { margin-left: auto; }
  .admin-layout .admin-content { padding: 26px 22px; }
  .admin-layout .admin-metric-value { font-size: 26px; }
}
@media (max-width: 600px) {
  .admin-layout .admin-header { padding-inline: 17px; }
  .admin-layout .admin-header-title small { display: none; }
  .admin-layout .admin-header-actions { gap: 8px; }
  .admin-layout .admin-content { padding: 22px 17px 28px; }
  .admin-layout .admin-page-heading, .admin-layout .page-heading { align-items: flex-start; flex-wrap: wrap; gap: 17px; margin-bottom: 20px; }
  .admin-layout .admin-page-heading h1, .admin-layout .page-heading h1 { font-size: 24px; }
  .admin-layout .admin-page-heading p, .admin-layout .page-heading p { font-size: 11px; }
  .admin-layout .admin-dashboard-tools { width: 100%; justify-content: space-between; }
  .admin-layout .admin-select { flex: 1 1 auto; }
  .admin-layout .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .admin-layout .admin-metric { padding: 15px 13px 14px; border-radius: 12px; }
  .admin-layout .admin-metric-value { font-size: 26px; }
  .admin-layout .admin-metric-throughput .admin-metric-value { font-size: 23px; }
  .admin-layout .admin-metric-detail { min-height: 31px; font-size: 9px; }
  .admin-layout .admin-quick-actions { gap: 3px; padding: 6px; }
  .admin-layout .admin-quick-action { padding: 11px 8px; gap: 8px; }
  .admin-layout .admin-quick-action > svg { display: none; }
  .admin-layout .admin-quick-action .admin-subtext { font-size: 9px; }
  .admin-layout .admin-quick-icon { width: 27px; height: 27px; flex-basis: 27px; }
  .admin-layout .admin-period-summary { gap: 16px 24px; margin: 21px 2px 18px; }
  .admin-layout .admin-period-summary > span { min-width: calc(50% - 24px); }
  .admin-layout .admin-period-summary > span:last-child { margin-left: 0; text-align: left; }
  .admin-layout .admin-panel-header { padding: 19px 18px 9px; }
  .admin-layout .admin-table th:first-child, .admin-layout .admin-table td:first-child { padding-left: 18px; }
  .admin-layout .admin-table th:last-child, .admin-layout .admin-table td:last-child { padding-right: 18px; }
  .admin-layout .admin-chart { padding-inline: 12px; }
  .admin-layout .admin-chart > svg { min-height: 120px; }
  .admin-layout .admin-empty { min-height: 183px; padding: 27px 20px; }
  .admin-layout .panel-body { padding: 19px 18px; }
  .admin-layout .data-table th, .admin-layout .data-table td { padding-inline: 18px; }
  .admin-layout .admin-data-note { font-size: 9px; }
}