.pod-auth-screen { min-height: 100vh; box-sizing: border-box; background: #f4f6fa; padding: 9vh 20px 40px; color: #1c273c; }
.pod-auth-card { width: min(100%, 440px); box-sizing: border-box; margin: 0 auto; padding: 36px; background: #fff; border: 1px solid #e0e5ee; border-radius: 16px; box-shadow: 0 12px 40px #182f5410; }
.pod-auth-brand { color: #56657e; font-size: 13px; letter-spacing: .08em; }
.pod-auth-card h1 { font-size: 25px; margin: 16px 0 28px; }
.pod-auth-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pod-auth-form label { font-size: 14px; font-weight: 600; margin-top: 6px; }
.pod-auth-form input, .pod-auth-form select, .pod-auth-form button, .pod-auth-menu button, .pod-auth-banner button { box-sizing: border-box; font: inherit; border-radius: 7px; border: 1px solid #ccd4e2; padding: 10px 12px; background: white; color: #223149; min-width: 0; }
.pod-auth-form input:focus-visible, .pod-auth-form select:focus-visible, .pod-auth-form button:focus-visible, .pod-auth-tabs button:focus-visible { outline: 3px solid #a4c8ff; outline-offset: 2px; }
.pod-auth-form button, .pod-auth-tabs button, .pod-auth-menu button, .pod-auth-menu summary, .pod-auth-banner button { cursor: pointer; }
.pod-auth-form button:disabled, .pod-auth-tabs button:disabled { cursor: default; opacity: .55; }
.pod-auth-form .pod-auth-primary { background: #235cca; color: #fff; border-color: #235cca; margin-top: 14px; font-weight: 600; }
.pod-auth-phone, .pod-auth-code { display: flex; gap: 8px; }
.pod-auth-phone input, .pod-auth-code input { flex: 1; width: 0; }
.pod-auth-code button { font-size: 13px; white-space: nowrap; }
.pod-auth-captcha { display: grid; gap: 8px; }
.pod-auth-captcha .pod-auth-code { align-items: center; flex-wrap: wrap; }
.pod-auth-captcha img { flex-shrink: 0; border-radius: 6px; }
.pod-auth-captcha input { width: 100%; }
.pod-auth-captcha small { color: #56657e; line-height: 1.5; }
.pod-auth-tabs { display: flex; border-bottom: 1px solid #e0e5ee; margin-bottom: 18px; }
.pod-auth-tabs button { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 2px; font: inherit; font-size: 14px; }
.pod-auth-tabs button[aria-selected=true] { color: #235cca; border-bottom-color: #235cca; }
.pod-auth-error { color: #b42318; font-size: 14px; }
.pod-auth-overlay { position: fixed; inset: 0; z-index: 10000; background: #18243a80; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; }
.pod-auth-dialog { max-height: 90vh; overflow: auto; margin: 0; }
.pod-auth-dialog h2 { margin: 0 0 16px; }
.pod-auth-help { font-size: 13px; color: #56657e; }
.pod-auth-banner { padding: 12px 20px; background: #fff6dd; color: #664600; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.pod-auth-banner button { padding: 5px 10px; }
.pod-auth-menu { position: relative; font-size: 13px; color: inherit; }
.pod-auth-menu summary { padding: 8px; list-style: none; }
.pod-auth-menu-panel { position: absolute; right: 0; top: 100%; z-index: 100; min-width: 170px; padding: 8px; background: white; color: #223149; border: 1px solid #ccd4e2; border-radius: 8px; box-shadow: 0 8px 20px #18243a20; }
.pod-auth-menu-panel button { width: 100%; text-align: left; margin: 3px 0; }
@media (max-width: 480px) { .pod-auth-card { padding: 24px; } .pod-auth-screen { padding-top: 5vh; } }
.sheet-editor__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 24px; align-items: start; }
.sheet-editor__canvas-wrap { padding: 12px; background: #e2e8f0; overflow: auto; }
.sheet-editor__canvas { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; background: repeating-conic-gradient(#fff 0% 25%, #e5e7eb 0% 50%) 0 / 16px 16px; border: 1px solid #64748b; }
.sheet-editor__canvas g[role="button"] { cursor: move; outline: none; }
.sheet-editor__canvas g[role="button"]:focus > rect:last-child { stroke-width: 1.5; }
.sheet-editor__add { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-editor__menu { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--pod-border, #ddd); border-radius: 6px; }
.sheet-editor__warning { color: #dc2626; }
.sheet-editor__missing { padding: 12px; border: 1px solid #d97706; border-radius: 6px; background: #fffbeb; color: #92400e; }
.sheet-editor__missing > div + div { margin-top: 6px; }
.sheet-editor__field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sheet-editor__field label { flex: 1; }
.sheet-editor__field input.pod-input { width: 100%; }
.sheet-editor__preview { max-width: 100%; max-height: 80vh; object-fit: contain; background: #eee; }
.sheet-template-table { width: 100%; border-collapse: collapse; }
.sheet-template-table th, .sheet-template-table td { text-align: left; padding: 10px; border-bottom: 1px solid var(--pod-border, #ddd); }
@media (max-width: 800px) { .sheet-editor__layout { grid-template-columns: minmax(0, 1fr); } }
/*
 * @pod/ui design tokens + component styles.
 * Operational SaaS: quiet, compact, scan-friendly. No marketing hero, no giant headings,
 * no decorative gradients/orbs, no nested cards, radius <= 8px, neutral surface with one
 * restrained accent. Text must not overflow or overlap on desktop or mobile.
 */

:root {
  --pod-font: -apple-system, 'Segoe UI', system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --pod-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  /* Neutral surface palette (dominant). */
  --c-bg: #f5f6f8;
  --c-surface: #ffffff;
  --c-surface-2: #fafbfc;
  --c-border: #e2e5ea;
  --c-border-strong: #cdd2da;
  --c-text: #1c2430;
  --c-text-2: #5a6473;
  --c-text-3: #8a93a2;

  /* Single restrained accent (used only for active nav, primary action, focus). */
  --c-accent: #2f6f6a;
  --c-accent-weak: #e6f0ef;
  --c-accent-text: #ffffff;

  /* Semantic status tones. */
  --c-success: #1f7a4d;
  --c-success-bg: #e7f4ec;
  --c-warning: #9a6a08;
  --c-warning-bg: #fbf1dc;
  --c-danger: #b02a2a;
  --c-danger-bg: #fbe9e9;
  --c-info: #2b5c9a;
  --c-info-bg: #e7eef8;
  --c-neutral: #566072;
  --c-neutral-bg: #eef0f3;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --shadow-1: 0 1px 2px rgba(20, 28, 40, 0.06);
  --shadow-pop: 0 8px 24px rgba(20, 28, 40, 0.16);

  --nav-w: 232px;
  --top-h: 52px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--pod-font);
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── AppShell ─────────────────────────────────────────────────────────────── */
.pod-shell {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  grid-template-rows: 100%;
  height: 100%;
  overflow: hidden;
}
.pod-shell__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
.pod-shell__content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-5);
}
.pod-shell__content--workspace {
  overflow: hidden;
  padding: 0;
}
.pod-shell__backdrop {
  display: none;
}

/* ── SideNav ──────────────────────────────────────────────────────────────── */
.pod-nav {
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
.pod-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--top-h);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  font-weight: 600;
  font-size: var(--fs-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pod-nav__badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-accent);
  background: var(--c-accent-weak);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}
.pod-nav__groups,
.pod-nav__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pod-nav__groups {
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  overflow-y: auto;
  flex: 1;
}
.pod-nav__group + .pod-nav__group {
  margin-top: var(--sp-2);
}
.pod-nav__section {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  text-align: left;
  cursor: pointer;
}
.pod-nav__section:hover {
  color: var(--c-text-2);
}
.pod-nav__section svg {
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.pod-nav__group.is-expanded > .pod-nav__section svg {
  transform: rotate(90deg);
}
.pod-nav__items.is-nested {
  margin-left: var(--sp-3);
  padding-left: var(--sp-2);
  border-left: 1px solid var(--c-border);
}
.pod-nav__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--r-md);
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pod-nav__link:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
}
.pod-nav__link.is-active {
  background: var(--c-accent-weak);
  color: var(--c-accent);
  font-weight: 600;
}
.pod-nav__link svg {
  flex: 0 0 auto;
}
.pod-nav__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Cached workspace tabs ───────────────────────────────────────────────── */
.pod-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.pod-workspace__tabs {
  display: flex;
  align-items: stretch;
  min-height: 36px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 0 0 auto;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  scrollbar-width: thin;
}
.pod-workspace__tab {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 220px;
  border-right: 1px solid var(--c-border);
  border-bottom: 2px solid transparent;
  color: var(--c-text-2);
}
.pod-workspace__tab:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
}
.pod-workspace__tab.is-active {
  color: var(--c-accent);
  background: var(--c-bg);
  border-bottom-color: var(--c-accent);
}
.pod-workspace__tab-label,
.pod-workspace__tab-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
.pod-workspace__tab-label {
  min-width: 0;
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-workspace__tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: var(--sp-1);
  border-radius: var(--r-sm);
  color: var(--c-text-3);
}
.pod-workspace__tab-close:hover {
  background: var(--c-border);
  color: var(--c-text);
}
.pod-workspace__panes {
  position: relative;
  flex: 1;
  min-height: 0;
}
.pod-workspace__pane {
  display: none;
  height: 100%;
  overflow: auto;
  padding: var(--sp-5);
}
.pod-workspace__pane.is-active {
  display: block;
}

/* ── TopBar ───────────────────────────────────────────────────────────────── */
.pod-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--top-h);
  padding: 0 var(--sp-5);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  flex: 0 0 auto;
}
.pod-top__title {
  font-weight: 600;
  font-size: var(--fs-md);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-top__spacer {
  flex: 1;
}
.pod-top__menu-btn {
  display: none;
}

/* ── Dev banner ───────────────────────────────────────────────────────────── */
.pod-dev-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-warning-bg);
  color: var(--c-warning);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 3px var(--sp-5);
  border-bottom: 1px solid #efdcae;
}

/* ── PageHeader ───────────────────────────────────────────────────────────── */
.pod-page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.pod-page-head__text {
  min-width: 0;
  flex: 1;
}
.pod-page-head__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}
.pod-page-head__desc {
  margin: var(--sp-1) 0 0;
  color: var(--c-text-2);
  font-size: var(--fs-md);
}
.pod-page-head__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.pod-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.pod-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  font-weight: 600;
  font-size: var(--fs-md);
}
.pod-card__body {
  padding: var(--sp-4);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.pod-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1;
  padding: 7px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  white-space: nowrap;
}
.pod-btn:hover {
  background: var(--c-surface-2);
}
.pod-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pod-btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-text);
}
.pod-btn--primary:hover {
  background: #275b57;
}
.pod-btn--danger {
  color: var(--c-danger);
  border-color: #e2b7b7;
}
.pod-btn--ghost {
  border-color: transparent;
  background: transparent;
}
.pod-btn--sm {
  padding: 4px 8px;
  font-size: var(--fs-sm);
}
.pod-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--c-text-2);
  cursor: pointer;
}
.pod-icon-btn:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
}

/* Global focus ring — keyboard accessibility. */
:where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── StatusBadge ──────────────────────────────────────────────────────────── */
.pod-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.pod-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.pod-badge--neutral {
  color: var(--c-neutral);
  background: var(--c-neutral-bg);
}
.pod-badge--success {
  color: var(--c-success);
  background: var(--c-success-bg);
}
.pod-badge--warning {
  color: var(--c-warning);
  background: var(--c-warning-bg);
}
.pod-badge--danger {
  color: var(--c-danger);
  background: var(--c-danger-bg);
}
.pod-badge--info {
  color: var(--c-info);
  background: var(--c-info-bg);
}
.pod-badge--accent {
  color: var(--c-accent);
  background: var(--c-accent-weak);
}

/* ── DataTable ────────────────────────────────────────────────────────────── */
.pod-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.pod-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.pod-table th,
.pod-table td {
  text-align: left;
  padding: 9px var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
  vertical-align: middle;
}
.pod-table th {
  color: var(--c-text-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  background: var(--c-surface-2);
  position: sticky;
  top: 0;
}
.pod-table td.pod-table__wrap {
  white-space: normal;
}
.pod-table tbody tr:last-child td {
  border-bottom: none;
}
.pod-table tbody tr.is-clickable {
  cursor: pointer;
}
.pod-table tbody tr.is-clickable:hover {
  background: var(--c-surface-2);
}
.pod-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Amount ───────────────────────────────────────────────────────────────── */
.pod-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pod-amount--unknown {
  color: var(--c-text-3);
}

/* ── States (empty/error/loading) ─────────────────────────────────────────── */
.pod-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  color: var(--c-text-2);
}
.pod-state__icon {
  color: var(--c-text-3);
}
.pod-state--error .pod-state__icon {
  color: var(--c-danger);
}
.pod-state__title {
  font-weight: 600;
  color: var(--c-text);
}
.pod-state__msg {
  max-width: 40ch;
  font-size: var(--fs-md);
}
.pod-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--c-border-strong);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: pod-spin 0.7s linear infinite;
}
@keyframes pod-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Timeline ─────────────────────────────────────────────────────────────── */
.pod-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pod-timeline__item {
  position: relative;
  padding: 0 0 var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--c-border);
}
.pod-timeline__item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.pod-timeline__dot {
  position: absolute;
  left: -6px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--c-accent);
}
.pod-timeline__time {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}
.pod-timeline__label {
  font-weight: 600;
}
.pod-timeline__detail {
  color: var(--c-text-2);
  font-size: var(--fs-md);
}

/* ── Dialog (ConfirmDialog) ───────────────────────────────────────────────── */
.pod-dialog__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 40, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  /* Above the modal drawer: confirmations opened from a drawer must remain interactive. */
  z-index: 60;
}
.pod-dialog {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  width: min(440px, 100%);
  padding: var(--sp-5);
}
.pod-dialog__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 600;
}
.pod-dialog__body {
  color: var(--c-text-2);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-5);
}
.pod-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.pod-toasts {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: 60;
  max-width: min(360px, calc(100vw - 32px));
}
.pod-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-neutral);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md);
}
.pod-toast--success {
  border-left-color: var(--c-success);
}
.pod-toast--error {
  border-left-color: var(--c-danger);
}
.pod-toast--info {
  border-left-color: var(--c-info);
}

/* ── Stat tiles ───────────────────────────────────────────────────────────── */
.pod-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.pod-stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.pod-stat__label {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.pod-stat__value {
  font-size: 20px;
  font-weight: 600;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.pod-stat__hint {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  margin-top: 2px;
}

/* Utility */
.pod-muted {
  color: var(--c-text-2);
}
.pod-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.pod-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.pod-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Responsive: collapse nav into a drawer on mobile ─────────────────────── */
@media (max-width: 860px) {
  .pod-shell {
    grid-template-columns: 1fr;
    /* One reliable full-height row. The fixed .pod-nav is wrapped in a normal-flow div that
       would otherwise take the first auto row and push content off-screen, so the main column
       is pinned to row 1 / column 1 explicitly; the empty nav-wrapper falls into an implicit
       0-height row. */
    grid-template-rows: minmax(0, 1fr);
  }
  .pod-shell__main {
    grid-column: 1;
    grid-row: 1;
  }
  .pod-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(84vw, var(--nav-w));
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 40;
    box-shadow: var(--shadow-pop);
  }
  .pod-shell.is-nav-open .pod-nav {
    transform: translateX(0);
  }
  .pod-shell.is-nav-open .pod-shell__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 28, 40, 0.4);
    z-index: 35;
  }
  .pod-top__menu-btn {
    display: inline-flex;
  }
  .pod-shell__content {
    padding: var(--sp-4);
  }
}

/* ── Desktop operations components (target 1280–1600) ─────────────────────── */

/* FilterToolbar: a compact wrap row of controls + a right-aligned meta slot. */
.pod-filterbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
}
.pod-filterbar__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  flex-wrap: wrap;
  min-width: 0;
}
.pod-filterbar__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  white-space: nowrap;
}
.pod-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.pod-field__label {
  white-space: nowrap;
}

/* SearchInput */
.pod-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pod-search__icon {
  position: absolute;
  left: 8px;
  color: var(--c-text-3);
  pointer-events: none;
}
.pod-search input {
  font-family: inherit;
  font-size: var(--fs-md);
  height: 32px;
  padding: 0 26px 0 28px;
  width: 220px;
  max-width: 100%;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
}
.pod-search__clear {
  position: absolute;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--c-text-3);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.pod-search__clear:hover {
  color: var(--c-text);
  background: var(--c-surface-2);
}

/* Select (styled native) */
.pod-select {
  font-family: inherit;
  font-size: var(--fs-md);
  height: 32px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  max-width: 100%;
}

/* SegmentedControl: horizontal, scrolls if it overflows. */
.pod-seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow-x: auto;
  max-width: 100%;
}
.pod-seg__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--c-text-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
}
.pod-seg__item:hover {
  color: var(--c-text);
}
.pod-seg__item.is-active {
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
.pod-seg__count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-3);
  background: var(--c-neutral-bg);
  border-radius: 999px;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
}
.pod-seg__item.is-active .pod-seg__count {
  color: var(--c-accent);
  background: var(--c-accent-weak);
}

/* SelectionToolbar (batch actions) */
.pod-seltoolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px var(--sp-4);
  background: var(--c-accent-weak);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-md);
}
.pod-seltoolbar__count {
  font-weight: 600;
  color: var(--c-accent);
}
.pod-seltoolbar__actions {
  display: flex;
  gap: var(--sp-2);
  margin-left: auto;
  flex-wrap: wrap;
}

/* Table selection checkbox column */
.pod-table__check {
  width: 36px;
  text-align: center;
}
.pod-check {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--c-accent);
}

/* SplitLayout: main content + fixed right detail panel. */
.pod-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-4);
  align-items: start;
}
.pod-split__aside {
  position: sticky;
  top: 0;
}
@media (max-width: 1100px) {
  .pod-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .pod-split__aside {
    position: static;
  }
}

/* DetailPanel */
.pod-detail {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.pod-detail__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  font-weight: 600;
  font-size: var(--fs-md);
}
.pod-detail__section {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.pod-detail__section:last-child {
  border-bottom: none;
}
.pod-detail__section-title {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--sp-2);
}
.pod-detail__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* DescList: key/value pairs */
.pod-desc {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px var(--sp-3);
}
.pod-desc dt {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.pod-desc dd {
  margin: 0;
  color: var(--c-text);
  font-size: var(--fs-md);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ═══ Top-module-nav shell (production console; target 1280–1600) ═══════════ */
.pod-appt {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--c-bg);
}
.pod-appbar {
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
  height: var(--top-h);
  flex: 0 0 auto;
  padding: 0 var(--sp-5);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.pod-appbar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-md);
  white-space: nowrap;
  flex: 0 0 auto;
  padding-right: var(--sp-3);
  border-right: 1px solid var(--c-border);
}
.pod-appbar__nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.pod-appbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  flex: 0 0 auto;
}
.pod-topnav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-md);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.pod-topnav__link:hover {
  color: var(--c-text);
  background: var(--c-surface-2);
}
.pod-topnav__link.is-active {
  color: var(--c-accent);
  font-weight: 600;
  border-bottom-color: var(--c-accent);
}
.pod-topnav__link svg {
  flex: 0 0 auto;
}
.pod-appt__main {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.pod-appt__content {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
}

/* Breadcrumb / secondary nav */
.pod-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  margin-bottom: var(--sp-3);
}
.pod-crumbs a {
  color: var(--c-text-2);
  text-decoration: none;
}
.pod-crumbs a:hover {
  color: var(--c-text);
  text-decoration: underline;
}
.pod-crumbs__sep {
  color: var(--c-text-3);
}
.pod-crumbs__current {
  color: var(--c-text);
  font-weight: 600;
}

/* ═══ Thumbnail + media cell (inline product/order info) ═══════════════════ */
.pod-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  overflow: hidden;
  object-fit: cover;
  background: var(--c-surface-2);
  user-select: none;
}
/* Honest no-preview state: muted glyph on a flat surface, never a faux product image. */
.pod-thumb--empty {
  color: var(--c-text-3);
  background: var(--c-surface-2);
}
.pod-thumb--sm {
  width: 28px;
  height: 28px;
}
.pod-media {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.pod-media__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pod-media__title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-media__sub {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-cellsub {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

/* Inline row-action cluster inside table cells */
.pod-actions-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: nowrap;
}
.pod-linkbtn {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-accent);
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--r-sm);
}
.pod-linkbtn:hover:not(:disabled) {
  background: var(--c-accent-weak);
}
.pod-linkbtn:disabled {
  color: var(--c-text-3);
  cursor: not-allowed;
}

/* Tag chips (warnings, spec facets) */
.pod-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--c-neutral-bg);
  color: var(--c-neutral);
  white-space: nowrap;
}
.pod-tag--warning {
  background: var(--c-warning-bg);
  color: var(--c-warning);
}
.pod-tag--danger {
  background: var(--c-danger-bg);
  color: var(--c-danger);
}
.pod-mono {
  font-family: var(--pod-mono);
  font-size: var(--fs-sm);
}

/* ═══ Fulfillment groups (merchant order detail) — one unframed dense section ═ */
.pod-fulfil__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.pod-fulfil__title {
  font-size: var(--fs-md, 14px);
  font-weight: 600;
  margin: 0;
}
.pod-fulfil__agg {
  font-size: var(--fs-sm);
}
.pod-fulfil__note {
  font-size: var(--fs-sm);
  margin: var(--sp-1) 0 var(--sp-2);
  line-height: 1.5;
}
.pod-fulfil__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-border);
}
.pod-fulfil__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
}
.pod-fulfil__group.is-inactive {
  opacity: 0.6;
}
.pod-fulfil__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-width: 0;
}
.pod-fulfil__id {
  font-family: var(--pod-mono);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-fulfil__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.pod-fulfil__alloc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
}
.pod-fulfil__alloc-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  max-width: 100%;
  min-width: 0;
}
.pod-fulfil__sku {
  font-family: var(--pod-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22ch;
}
.pod-fulfil__lineage {
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.pod-fulfil__cmd {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.pod-fulfil__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}
.pod-fulfil__moveline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 96px;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.pod-fulfil__mergeitem {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  min-width: 0;
}
.pod-fulfil__mergeitem .pod-fulfil__sku {
  max-width: 40ch;
}

/* ═══ Drawer (right detail sheet) ══════════════════════════════════════════ */
.pod-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 40, 0.4);
  z-index: 55;
  display: flex;
  justify-content: flex-end;
}
.pod-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: min(480px, 100vw);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
  animation: pod-slide-in 0.18s ease;
}
@keyframes pod-slide-in {
  from {
    transform: translateX(24px);
    opacity: 0.4;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.pod-drawer__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  flex: 0 0 auto;
}
.pod-drawer__title {
  font-weight: 600;
  font-size: var(--fs-md);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-drawer__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.pod-drawer__foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
  flex-wrap: wrap;
}
.pod-drawer__close {
  margin-left: auto;
}

/* Narrow-desktop: let the top nav scroll and tighten workspace padding */
@media (max-width: 1100px) {
  .pod-appt__content {
    padding: var(--sp-4);
  }
}

/* ═══ Form controls (text input, labelled field block, checkbox row) ═══════ */
.pod-input {
  font-family: inherit;
  font-size: var(--fs-md);
  height: 32px;
  padding: 0 10px;
  width: 100%;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
}
.pod-input:disabled {
  background: var(--c-surface-2);
  color: var(--c-text-3);
  cursor: not-allowed;
}
.pod-formfield {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pod-formfield__label {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  font-weight: 600;
}
.pod-formfield__hint {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}
.pod-checkrow {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  cursor: pointer;
}
.pod-checkrow input {
  margin-top: 2px;
  accent-color: var(--c-accent);
}
.pod-checkrow__text {
  min-width: 0;
}
.pod-checkrow__sub {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

/* Compact multi-field entry form (建单 line rows + recipient block) */
.pod-formgrid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.pod-linerow {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
}
.pod-linerow .pod-icon-btn {
  margin-bottom: 2px;
}
.pod-ok {
  color: var(--c-success-fg, var(--c-accent));
}
/* Wider dialog variant for forms */
.pod-dialog--form {
  width: min(520px, 100%);
}
.pod-dialog__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
/*
 * W06 management SDS horizontal shell. Brand-neutral, built on @pod/ui tokens — no vendor
 * colours or bundles. Desktop target 1280x720 / 1440x900; the top bar never wraps to a second
 * row, submenus open as popovers below their group trigger. All classes are scoped to this
 * frame (.mgt-*) and never touch the shared @pod/ui tokens or the other portals.
 */

.mgt-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--c-bg);

  /* Management-local header palette (W06). Scoped to this frame only. The dark-navy bar, light
     labels and violet selected group follow the captured SDS management shell
     (docs/captures/screenshots/management-owned-receipt-confirmed.png in the sds-rebuild
     project). These are brand-local design values eyeballed from that capture, not pixel
     measurements, and reuse the merchant W06 header vocabulary for cross-portal consistency. */
  --mgt-header-bg: #272a63;
  --mgt-header-border: rgba(255, 255, 255, 0.14);
  --mgt-header-fg: #eceefb;
  --mgt-header-fg-muted: #aeb3dc;
  --mgt-header-hover-bg: rgba(255, 255, 255, 0.09);
  --mgt-selected-bg: #4f46c7;
  --mgt-selected-weak: #ecebfa;
  --mgt-selected-fg: #ffffff;
}

/* Top bar: brand · primary groups · secondary 本平台 menu + session. overflow visible so the
   submenu popovers are not clipped. */
.mgt-appbar {
  position: relative;
  display: flex;
  min-width: max-content;
  align-items: stretch;
  gap: var(--sp-4);
  height: var(--top-h);
  flex: 0 0 auto;
  padding: 0 var(--sp-5);
  background: var(--mgt-header-bg);
  color: var(--mgt-header-fg);
  border-bottom: 1px solid var(--mgt-header-border);
  z-index: 20;
}

.mgt-appbar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-md);
  white-space: nowrap;
  flex: 0 0 auto;
  padding-right: var(--sp-3);
  border-right: 1px solid var(--mgt-header-border);
}
.mgt-appbar__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mgt-nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  /* Overflow MUST stay visible: each group's dropdown is an absolute descendant opening below
     the fixed-height bar, so a clipping ancestor here (any overflow other than visible — note
     overflow-x:hidden silently computes overflow-y:auto) would cut the popovers off at the bar
     edge. The bar itself never wraps because the triggers are nowrap and .mgt-appbar__right is
     flex:0 0 auto; at the 1280/1440 desktop targets all eight triggers fit without clipping. */
  overflow: visible;
}

.mgt-appbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
  flex: 0 0 auto;
  /* The session/account cluster must stay legible even on a narrow desktop panel. The eight
     nowrap SDS triggers never wrap and .mgt-nav keeps overflow:visible (so the dropdown popovers
     are never clipped); when the panel is too narrow for all eight (≈770px), the overflowing
     trigger text would otherwise bleed under this transparent cluster and read as overlap. Giving
     the cluster the header background and its own stacking context occludes that overflow so the
     account text stays clean. At the 1280/1440 desktop targets there is no overflow, so this is a
     no-op there; the popovers open BELOW the bar and are unaffected. */
  position: relative;
  z-index: 1;
  padding-left: var(--sp-3);
  background: var(--mgt-header-bg);
}

/* Shared header children (brand badge, SessionMenu) sit on the dark navy bar. Recolour them
   locally for legibility only — scoped to .mgt-appbar, never editing their shared styles or
   affecting the merchant/factory portals. */
.mgt-appbar .pod-nav__badge {
  color: var(--mgt-header-fg);
  background: var(--mgt-header-hover-bg);
}
.mgt-appbar .pod-muted {
  color: var(--mgt-header-fg-muted);
}
.mgt-appbar__right .pod-btn--ghost {
  color: var(--mgt-header-fg);
}
.mgt-appbar__right .pod-btn--ghost:hover {
  background: var(--mgt-header-hover-bg);
}

/* A primary-group trigger (and the 本平台 trigger) resting look. */
.mgt-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  height: 100%;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--mgt-header-fg-muted);
  font: inherit;
  font-size: var(--fs-md);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.mgt-nav__trigger:hover {
  color: var(--mgt-header-fg);
  background: var(--mgt-header-hover-bg);
}
.mgt-nav__group.is-active .mgt-nav__trigger {
  color: var(--mgt-selected-fg);
  font-weight: 600;
  border-bottom-color: var(--mgt-selected-bg);
  background: var(--mgt-selected-bg);
}
/* A captured-but-unavailable group (应用市场): honestly inert, never a hover affordance. */
.mgt-nav__trigger.is-disabled {
  color: var(--mgt-header-fg-muted);
  opacity: 0.55;
  cursor: not-allowed;
}
.mgt-nav__trigger.is-disabled:hover {
  background: transparent;
}
/* Bar sits on dark navy: a light outline reads where the accent would vanish. */
.mgt-nav__trigger:focus-visible {
  outline: 2px solid var(--mgt-header-fg);
  outline-offset: -2px;
}
/* The popover is on the light surface, so it keeps the shared accent outline. */
.mgt-menu__link:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}
.mgt-nav__chevron {
  transition: transform 0.12s ease;
  flex: 0 0 auto;
}
.mgt-nav__group.is-open .mgt-nav__chevron {
  transform: rotate(180deg);
}

.mgt-nav__group {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Submenu popover. */
.mgt-menu {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 196px;
  box-sizing: border-box;
  max-height: min(68vh, calc(100dvh - 112px));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  margin: 0;
  padding: var(--sp-1);
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  z-index: 30;
}
/* The 本平台 secondary menu anchors to the right edge so it never overflows the viewport. */
.mgt-nav__group--platform .mgt-menu {
  left: auto;
  right: 0;
  min-width: 248px;
}
.mgt-menu__row {
  margin: 0;
}
.mgt-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mgt-menu__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: var(--fs-base);
  text-decoration: none;
  white-space: nowrap;
}
.mgt-menu__link > svg {
  flex: 0 0 auto;
  color: var(--c-text-3);
}
.mgt-menu__label {
  flex: 1 1 auto;
}
.mgt-menu__link:hover {
  background: var(--c-surface-2);
}
.mgt-menu__link.is-active {
  color: var(--mgt-selected-bg);
  font-weight: 600;
  background: var(--mgt-selected-weak);
}
.mgt-menu__link.is-active > svg {
  color: var(--mgt-selected-bg);
}
.mgt-menu__link.is-disabled {
  color: var(--c-text-3);
  cursor: not-allowed;
}
.mgt-menu__link.is-disabled:hover {
  background: transparent;
}
/* A disabled captured module shows only its business label; the concise availability reason is
   carried as the entry's accessible description (title), not persistent in-menu commentary. */

/* Grouped sections inside the 本平台 popover. */
.mgt-menu--platform {
  padding: var(--sp-2);
}
.mgt-menu__section + .mgt-menu__section {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-border);
}
.mgt-menu__section-title {
  margin: 0 0 2px;
  padding: 0 10px;
  color: var(--c-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Dense workspace below the bar. */
.mgt-main {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.mgt-content {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
}

@media (max-width: 1280px) {
  .mgt-appbar {
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
  }
  .mgt-nav__trigger {
    padding: 0 9px;
  }
}