@import url("/design-system/tokens.css");

:root {
  /* ============================================================
     Global Typography Tokens (唯一字体入口, 2026-08-19)
     业务页面不得自行定义 font-family, 一律引用 --app-font-family。
     中文优先 PingFang SC, EN/RU 走系统 UI 字体(SF Pro / Segoe UI)。
     单一字体栈覆盖三语言, 不打包任何字体文件。
     ============================================================ */
  --app-font-family: var(--pm-font-family-sans);
  /* 字号体系 */
  --font-size-xs: var(--pm-font-size-xs);
  --font-size-sm: var(--pm-font-size-sm);
  --font-size-base: var(--pm-font-size-base);
  --font-size-md: var(--pm-font-size-md);
  --font-size-lg: var(--pm-font-size-lg);
  --font-size-xl: var(--pm-font-size-xl);
  --font-size-2xl: var(--pm-font-size-2xl);
  /* 字重体系(PingFang 400/500/600 最自然) */
  --font-weight-normal: var(--pm-font-weight-normal);
  --font-weight-medium: var(--pm-font-weight-medium);
  --font-weight-semibold: var(--pm-font-weight-semibold);
  /* 行高体系 */
  --line-height-tight: var(--pm-line-height-tight);
  --line-height-snug: var(--pm-line-height-snug);
  --line-height-base: var(--pm-line-height-base);

  --platform-navy: var(--pm-color-brand-strong);
  --platform-navy-2: var(--pm-color-brand-strong-alt);
  --platform-blue: var(--pm-color-brand-primary);
  --platform-text: var(--pm-color-text-primary);
  --platform-muted: var(--pm-color-text-secondary);
  --platform-line: var(--pm-color-border-default);
  --platform-bg: var(--pm-color-bg-platform);
  --platform-sidebar-width: var(--pm-sidebar-width);
  --platform-topbar-height: var(--pm-header-height);
}

/* 全局字体应用层: 表单与表格元素继承统一字体 */
body,
button,
input,
select,
textarea,
table,
dialog {
  font-family: var(--app-font-family);
}

/* While a saved non-Chinese language is being applied on load, keep the body
   hidden so the first painted frame never flashes the hard-coded Chinese text.
   The class is added by an inline head script and removed by the page's i18n
   init (or by the shell after localizePage), with a timeout failsafe. */
html.lang-pending body {
  visibility: hidden;
}

body.platform-shell-page {
  box-sizing: border-box;
  min-height: 100vh;
  /* Reserve shell chrome before first paint so JS injection never reflows the page. */
  padding-top: var(--platform-topbar-height) !important;
  padding-left: var(--platform-sidebar-width) !important;
}

/* Paint a placeholder bar in the reserved strip so the JS-injected topbar
   appears with zero visual change. Sits under the real topbar (z-index 1100). */
body.platform-shell-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: var(--platform-sidebar-width);
  right: 0;
  z-index: 1099;
  height: var(--platform-topbar-height);
  border-bottom: 1px solid var(--platform-line);
  background: var(--pm-color-surface);
  pointer-events: none;
}

/* Sidebar placeholder: paint the navy sidebar strip before the shell injects it,
   so page navigation shows zero visual change (no flash of empty white gutter).
   Sits under the real sidebar (z-index 1200). */
body.platform-shell-page::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--platform-sidebar-width);
  z-index: 1098;
  background: var(--platform-navy);
  pointer-events: none;
}

/* 侧边栏隐藏(移动端抽屉模式)时, 占位条也隐藏, 避免左侧残留深蓝条 */
@media (max-width: 820px) {
  body.platform-shell-page::after {
    display: none;
  }
}

.platform-shell-sidebar,
.platform-shell-sidebar *,
.platform-shell-toggle,
.platform-shell-mask,
.platform-parts-group,
.platform-parts-group * {
  box-sizing: border-box;
}

.platform-shell-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1200;
  display: flex;
  width: var(--platform-sidebar-width);
  flex-direction: column;
  color: #dbe5f2;
  background: var(--platform-navy);
  font-family: var(--app-font-family);
  font-size: var(--pm-font-size-base);
  line-height: var(--pm-line-height-base);
}

.platform-shell-brand {
  display: flex;
  height: var(--pm-sidebar-brand-height);
  flex: 0 0 var(--pm-sidebar-brand-height);
  align-items: center;
  gap: 11px;
  padding: 0 18px;
  border-bottom: 1px solid #ffffff14;
  color: inherit;
  text-decoration: none;
}

.platform-shell-emblem {
  width: 60px;
  height: 63px;
  flex: none;
}

.platform-shell-emblem img {
  display: block;
  width: 60px;
  max-width: none;
  height: auto;
}

.platform-shell-brand span,
.platform-shell-brand strong,
.platform-shell-brand small {
  display: block;
}

.platform-shell-brand strong {
  color: #fff;
  font-size: 15px;
  letter-spacing: .2px;
}

.platform-shell-brand small {
  margin-top: 2px;
  color: #8395ac;
  font-size: 10px;
}

.platform-shell-nav {
  flex: 1;
  padding: 14px 11px 18px;
  overflow-y: auto;
  background: var(--platform-navy);
  background-clip: border-box;
  scrollbar-color: #435b75 var(--platform-navy);
  scrollbar-width: thin;
}

.platform-shell-nav::-webkit-scrollbar {
  width: 8px;
  -webkit-appearance: none;
  background: var(--platform-navy);
}

.platform-shell-nav::-webkit-scrollbar-track,
.platform-shell-nav::-webkit-scrollbar-track-piece,
.platform-shell-nav::-webkit-scrollbar-corner {
  -webkit-appearance: none;
  background: var(--platform-navy);
}

.platform-shell-nav::-webkit-scrollbar-thumb {
  -webkit-appearance: none;
  min-height: 48px;
  border: 2px solid var(--platform-navy);
  border-radius: 999px;
  background: #435b75;
}

.platform-shell-nav::-webkit-scrollbar-thumb:hover {
  background: #58718c;
}

/* Safari's always-visible native scrollbar ignores WebKit track colors and
   paints an opaque light rail. Keep navigation scrollable, but hide that
   Safari-only rail so the sidebar remains visually continuous. */
html.platform-shell-safari .platform-shell-nav {
  scrollbar-width: none;
}

html.platform-shell-safari .platform-shell-nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.platform-shell-nav-group {
  margin: 0 0 13px;
}

.platform-shell-nav-label,
.platform-parts-label {
  padding: 5px 11px 6px;
  color: #6f8198;
  font-size: 10px;
  letter-spacing: 1.2px;
}

.platform-shell-nav-item,
.platform-parts-item {
  display: flex;
  width: 100%;
  min-height: var(--pm-sidebar-item-min-height);
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--pm-radius-control);
  color: #aebdce;
  background: transparent;
  font-size: 12px;
  text-decoration: none;
  transition: color .16s, background .16s, box-shadow .16s;
}

.platform-shell-icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.platform-shell-skip-link {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 2000;
  padding: 8px 12px;
  border-radius: 8px;
  color: #fff;
  background: var(--platform-navy);
  transform: translateY(-150%);
  transition: transform .16s ease;
}

.platform-shell-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #8eb8ff;
  outline-offset: 2px;
}

.platform-shell-nav-item:hover,
.platform-parts-item:hover {
  color: #fff;
  background: #ffffff0e;
}

.platform-shell-nav-item.active,
.platform-parts-item.active {
  color: #fff;
  background: #28476a;
  box-shadow: inset 3px 0 #4b84f4;
}

.platform-shell-nav-item:active,
.platform-parts-item:active {
  transform: scale(.985);
}

body.platform-shell-navigating .platform-shell-nav-item {
  pointer-events: none;
}

.platform-shell-content-frame {
  position: fixed;
  top: var(--platform-topbar-height);
  right: 0;
  bottom: 0;
  left: var(--platform-sidebar-width);
  z-index: 1000;
  display: block;
  width: calc(100vw - var(--platform-sidebar-width));
  height: calc(100vh - var(--platform-topbar-height));
  border: 0;
  background: var(--platform-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity .12s ease;
}

body.platform-shell-navigating .platform-shell-content-frame {
  opacity: 0;
  visibility: hidden;
}

.platform-shell-content-loading {
  position: fixed;
  top: var(--platform-topbar-height);
  right: 0;
  bottom: 0;
  left: var(--platform-sidebar-width);
  z-index: 1001;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #607086;
  background: var(--platform-bg);
  font-size: 13px;
}

body.platform-shell-navigating .platform-shell-content-loading {
  display: flex;
}

.platform-shell-loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #cfdbeb;
  border-top-color: var(--platform-blue);
  border-radius: 50%;
  animation: platform-shell-spin .75s linear infinite;
}

.platform-shell-content-loading.failed .platform-shell-loading-spinner {
  display: none;
}

.platform-shell-content-loading button {
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid #b9cbe4;
  border-radius: var(--pm-radius-control);
  color: var(--platform-blue);
  background: var(--pm-color-surface);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

@keyframes platform-shell-spin {
  to { transform: rotate(360deg); }
}

body.platform-shell-frame-active {
  overflow: hidden !important;
}

body.platform-shell-page.platform-shell-embedded {
  min-height: 100vh;
  padding: 0 !important;
}

body.platform-shell-page.platform-shell-embedded::before,
body.platform-shell-page.platform-shell-embedded::after {
  display: none;
}

.platform-shell-user {
  display: flex;
  min-height: 67px;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  margin: 0 10px 10px;
  padding: 10px;
  border: 1px solid #ffffff0f;
  border-radius: 9px;
  background: #ffffff0b;
}

.platform-shell-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: #245bb5;
  background: #dfe9fb;
  font-size: 12px;
  font-weight: 700;
}

.platform-shell-user-copy {
  min-width: 0;
  flex: 1;
}

.platform-shell-user-copy strong,
.platform-shell-user-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-shell-user-copy strong {
  color: #fff;
  font-size: 12px;
}

.platform-shell-user-copy small {
  color: #788ba2;
  font-size: 10px;
}

.platform-shell-user button {
  min-width: 38px;
  height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 7px;
  color: #8fa0b4;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
}

.platform-shell-user button:hover,
.platform-shell-user button:focus-visible {
  color: #fff;
  background: #ffffff14;
}

.platform-shell-toggle,
.platform-shell-mask {
  display: none;
}

.platform-parts-group {
  margin: 0 0 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid #ffffff14;
  font-family: var(--app-font-family);
}

.platform-parts-label {
  text-transform: uppercase;
}

/* Native business pages reuse the Parts Atlas surface and control tokens. */
body.platform-shell-page {
  color: var(--platform-text) !important;
  background: var(--platform-bg) !important;
  font-family: var(--app-font-family);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* Shared content baseline: keep type, controls and navigation aligned across native pages. */
.platform-shell-page button,
.platform-shell-page input,
.platform-shell-page select,
.platform-shell-page textarea {
  font: inherit;
  line-height: 1.25;
}

.platform-shell-page .platform-shell-nav-item,
.platform-shell-page .platform-parts-item,
.platform-shell-page .platform-shell-control,
.platform-shell-page .platform-shell-icon-button {
  line-height: 1.2;
}

/* Native pages use the same compact utility bar as Parts Atlas.
   Fixed (not sticky/in-flow): the bar is injected by JS after load, so it must
   never occupy document flow — its space is reserved via body padding-top. */
.platform-shell-notif-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#dc2626;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px #fff}
.platform-shell-icon-button{position:relative}
.platform-shell-notification-list{display:flex;flex-direction:column;gap:2px;margin-top:6px;max-height:min(60vh,380px);overflow-y:auto}
.platform-shell-notification-item{display:flex;gap:8px;align-items:flex-start;text-align:left;padding:8px 10px;border-radius:8px;border:0;background:transparent;cursor:pointer;width:100%}
.platform-shell-notification-item:hover{background:rgba(23,49,79,.06)}
.platform-shell-notification-item .platform-shell-notification-dot{width:7px;height:7px;border-radius:50%;background:#cbd5e1;margin-top:5px;flex:none}
.platform-shell-notification-item.unread .platform-shell-notification-dot{background:#dc2626}
.platform-shell-notification-item .platform-shell-notification-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.platform-shell-notification-item b{font-size:12.5px;color:#17314f}
.platform-shell-notification-item small{font-size:11.5px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.platform-shell-notification-item small.time{color:#94a3b8;font-size:10.5px}
.platform-shell-notification-item.unread b{color:#b91c1c}
.platform-shell-topbar {
  position: fixed;
  top: 0;
  left: var(--platform-sidebar-width);
  right: 0;
  z-index: 1100;
  display: flex;
  min-height: var(--pm-header-height);
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  border-bottom: 1px solid var(--platform-line);
  background: var(--pm-color-surface);
  color: var(--platform-text);
}

/* A page title belongs to page content. It must never become a second sticky
   application bar beside the single shell header above it. */
body.platform-shell-page .header {
  position: static;
  top: auto;
  z-index: auto;
}

body.platform-shell-page .home-topbar {
  position: static;
  top: auto;
  z-index: auto;
}

.platform-shell-topbar-left {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.platform-shell-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.platform-shell-topbar-item,
.platform-shell-user-menu,
.platform-shell-topbar .top-item {
  position: relative;
}

.platform-shell-language {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #dfe5ec;
  border-radius: var(--pm-radius-control-rounded);
  background: #f8fafc;
}

.platform-shell-lang {
  min-width: 31px;
  height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 6px;
  color: #718095;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
}

.platform-shell-lang:hover,
.platform-shell-lang:focus-visible {
  color: var(--platform-blue);
  background: #edf4ff;
}

.platform-shell-lang.active {
  color: #fff;
  background: var(--platform-navy);
}

.platform-shell-control {
  display: flex;
  min-height: var(--pm-control-height-default);
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid #dfe5ec;
  border-radius: var(--pm-radius-control-rounded);
  color: #516176;
  background: var(--pm-color-surface);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

.platform-shell-control:hover,
.platform-shell-control:focus-visible {
  border-color: #b9cbe4;
  color: var(--platform-blue);
}

.platform-shell-status-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #2cbd76;
  box-shadow: 0 0 0 3px #2cbd761c;
}

.platform-shell-icon-button {
  display: grid;
  width: var(--pm-control-height-default);
  height: var(--pm-control-height-default);
  place-items: center;
  padding: 0;
  border: 1px solid #dfe5ec;
  border-radius: var(--pm-radius-control-rounded);
  color: #55657b;
  background: var(--pm-color-surface);
  cursor: pointer;
  font-size: 14px;
}

.platform-shell-icon-button:hover,
.platform-shell-icon-button:focus-visible {
  border-color: #b9cbe4;
  color: var(--platform-blue);
  background: #f8fbff;
}

.platform-shell-topbar .platform-shell-avatar {
  width: 24px;
  height: 24px;
  color: var(--platform-blue);
  background: #dfe9fb;
  font-size: 11px;
}

.platform-shell-user-button {
  min-width: 72px;
  padding: 0 8px;
}

.platform-shell-caret {
  margin-left: 1px;
  color: #8794a5;
  font-size: 11px;
}

.platform-shell-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1300;
  min-width: 190px;
  padding: 12px;
  border: 1px solid var(--platform-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px #16283e1f;
}

.platform-shell-popover[hidden] {
  display: none;
}

.platform-shell-popover strong,
.platform-shell-popover small {
  display: block;
}

.platform-shell-popover strong {
  color: var(--platform-text);
  font-size: 12px;
}

.platform-shell-popover small {
  margin-top: 4px;
  color: var(--platform-muted);
  font-size: 11px;
}

.platform-shell-popover button {
  width: 100%;
  min-height: 32px;
  margin-top: 10px;
  border: 1px solid #f0d2d2;
  border-radius: 7px;
  color: #b42318;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
}

.platform-shell-popover button:hover,
.platform-shell-popover button:focus-visible {
  background: #fff4f2;
}

/* The warning page already owns a working top-action group; move it into the shared bar. */
.platform-shell-topbar .top-actions {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin-left: 0;
}

.platform-shell-topbar .top-actions .top-item {
  position: relative;
}

.platform-shell-topbar .top-actions .top-btn {
  min-height: var(--pm-control-height-default);
  border-radius: var(--pm-radius-control-rounded);
  border-color: #dfe5ec;
  color: #516176;
  background: var(--pm-color-surface);
}

.platform-shell-topbar .top-actions .top-btn:hover {
  border-color: #b9cbe4;
  color: var(--platform-blue);
  background: #f8fbff;
}

.platform-shell-topbar .top-actions .lang-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #dfe5ec;
  border-radius: 9px;
  background: #f8fafc;
}

.platform-shell-topbar .top-actions .lang-switch .lang-btn {
  min-width: 31px;
  height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 6px;
  color: #718095;
  background: transparent;
  font-size: 10px;
}

.platform-shell-topbar .top-actions .lang-switch .lang-btn.active {
  color: #fff !important;
  background: var(--platform-navy) !important;
}

.platform-shell-topbar .top-actions .top-popover {
  top: calc(100% + 8px);
  z-index: 1300;
}

/* Remove each native page's duplicate title, nav and utility header. */
body.platform-shell-page > .header,
body.platform-shell-page > .topbar {
  display: none !important;
}

.platform-shell-page .header .sub,
.platform-shell-page .hero p,
.platform-shell-page .meta {
  color: var(--platform-muted) !important;
}

.platform-shell-page .nv a,
.platform-shell-page .nav a,
.platform-shell-page .tools-menu summary {
  color: #66758a !important;
}

.platform-shell-page .nv a:hover,
.platform-shell-page .nav a:hover,
.platform-shell-page .tools-menu summary:hover,
.platform-shell-page .nv a.ac,
.platform-shell-page .nav a.active,
.platform-shell-page .tools-menu.active summary,
.platform-shell-page .tools-menu[open] summary {
  color: #182536 !important;
  background: transparent !important;
  border-bottom-color: var(--platform-blue) !important;
}

.platform-shell-page .badge-v,
.platform-shell-page .pill {
  color: var(--platform-blue) !important;
  background: #edf4ff !important;
  border-color: #c9dafb !important;
}

.platform-shell-page .lang-btn.active,
.platform-shell-page .lang-btn.act {
  color: #fff !important;
  background: var(--platform-navy-2) !important;
  border-color: var(--platform-navy-2) !important;
}

.platform-shell-page .card,
.platform-shell-page .cd,
.platform-shell-page .kpi,
.platform-shell-page .kpi-c,
.platform-shell-page .brand-card,
.platform-shell-page .table-wrap,
.platform-shell-page .risk-kpi {
  border: 1px solid var(--platform-line) !important;
  border-radius: var(--pm-radius-panel-sm) !important;
  background: var(--pm-color-surface) !important;
  box-shadow: var(--pm-shadow-hairline) !important;
}

.platform-shell-page .toolbar {
  border-color: var(--platform-line) !important;
  border-radius: var(--pm-radius-panel-sm) !important;
  background: var(--pm-color-surface) !important;
  box-shadow: var(--pm-shadow-hairline) !important;
}

.platform-shell-page input,
.platform-shell-page select,
.platform-shell-page .field input,
.platform-shell-page .field select {
  border-color: #dfe5ed !important;
  border-radius: var(--pm-radius-control) !important;
  background: var(--pm-color-surface) !important;
}

.platform-shell-page input:focus-visible,
.platform-shell-page select:focus-visible,
.platform-shell-page .field input:focus-visible,
.platform-shell-page .field select:focus-visible {
  border-color: #b8cff9 !important;
  box-shadow: 0 0 0 3px #edf4ff !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: var(--pm-duration-reduced-motion) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--pm-duration-reduced-motion) !important;
  }
}

.platform-shell-page .btn.primary,
.platform-shell-page .btn-p,
.platform-shell-page .btn.mint,
.platform-shell-page .sync-btn,
.platform-shell-page .toolbar .sync-btn,
.platform-shell-page .filter-btn.active {
  color: #fff !important;
  background: var(--platform-blue) !important;
  border-color: var(--platform-blue) !important;
  box-shadow: 0 4px 10px #2c6bed2e !important;
}

.platform-shell-page .filter-btn,
.platform-shell-page .btn,
.platform-shell-page button {
  border-radius: var(--pm-radius-control);
}

.platform-shell-page .nv a {
  transition: color .2s, background-color .2s, border-color .2s;
}

.platform-shell-page .lang-btn {
  transition: color .12s, background-color .12s, border-color .12s;
}

.platform-shell-page .btn,
.platform-shell-page .kpi-c,
.platform-shell-page .gc-d {
  transition: transform .2s, box-shadow .2s, border-color .2s, background-color .2s, color .2s;
}

.platform-shell-page .gr-h {
  transition: filter .15s, background-color .15s;
}

.platform-shell-page .gv div {
  transition: opacity .15s;
}

.platform-shell-page .gr-h:focus-visible,
.platform-shell-page .gv div:focus-visible,
.platform-shell-page .gc-d:focus-visible {
  outline: 3px solid #4b84f466;
  outline-offset: 2px;
}

.platform-shell-page th,
.platform-shell-page table th {
  color: #66758a !important;
  background: #fafbfc !important;
}

.platform-shell-nav-item:focus-visible,
.platform-parts-item:focus-visible,
.platform-shell-user button:focus-visible,
.platform-shell-toggle:focus-visible {
  outline: 3px solid #4b84f466;
  outline-offset: 1px;
}

@media (max-width: 820px) {
  body.platform-shell-page {
    --platform-topbar-height: var(--pm-header-height-mobile);
    padding-left: 0 !important;
  }

  body.platform-shell-page::before {
    left: 0;
  }

  .platform-shell-sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease;
  }

  .platform-shell-sidebar.open {
    transform: translateX(0);
    box-shadow: 20px 0 60px #0c1b2c40;
  }

  .platform-shell-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1190;
    display: block;
    height: var(--pm-control-height-default);
    padding: 0 12px;
    border: 1px solid var(--platform-line);
    border-radius: var(--pm-radius-control-rounded);
    color: var(--platform-text);
    background: var(--pm-color-surface);
    box-shadow: 0 5px 18px #2230451f;
    cursor: pointer;
    font: 12px/1 var(--app-font-family);
  }

  .platform-shell-mask {
    position: fixed;
    inset: 0;
    z-index: 1195;
    display: none;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0c1a2c61;
  }

  .platform-shell-mask.open {
    display: block;
  }

  .platform-shell-topbar {
    left: 0;
    min-height: var(--pm-header-height-mobile);
    padding: 0 14px;
  }

  .platform-shell-content-frame {
    left: 0;
    width: 100vw;
  }

  .platform-shell-content-loading {
    left: 0;
  }

  .platform-shell-topbar-actions {
    gap: 5px;
  }

  .platform-shell-control {
    padding: 0 8px;
  }

  .platform-shell-control > span:last-child {
    display: none;
  }
}
/* ============================================================
   Russian layout adaptation (2026-08-19)
   俄文比中文/英文长 15–30%。全局规则: 允许按钮/标签换行、
   标题断词, 避免溢出与截断。仅布局, 不改字号。
   注意: 不得改变导航项/侧边栏的盒模型(height/align/padding),
   否则语言切换瞬间会造成侧边栏跳动(2026-08-19 修复)。
   ============================================================ */
html[lang="ru"] body.platform-shell-page {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

html[lang="ru"] .platform-shell-page button,
html[lang="ru"] .platform-shell-page .button,
html[lang="ru"] .platform-shell-page .btn,
html[lang="ru"] .platform-shell-page .mini,
html[lang="ru"] .platform-shell-page .chip,
html[lang="ru"] .platform-shell-page .tag {
  /* 只允许文本换行; 不改 line-height/height, 避免按钮高度突变 */
  white-space: normal;
  text-align: center;
}

/* shell 自身的顶栏/侧边栏控件按钮保持单行, 防止语言切换时外壳跳动 */
html[lang="ru"] .platform-shell-topbar button,
html[lang="ru"] .platform-shell-sidebar button,
html[lang="ru"] .platform-shell-user button {
  white-space: nowrap;
}

html[lang="ru"] .platform-shell-nav-item,
html[lang="ru"] .platform-parts-item {
  /* 盒模型与 zh/en 完全一致(min-height 37px + center + 同一行高)—— 
     俄文长文本只需换行, 高度随内容自然增加, 切换语言不跳动。 */
  white-space: normal;
  text-align: left;
}

html[lang="ru"] .platform-shell-nav-item > svg,
html[lang="ru"] .platform-parts-item > svg {
  flex: none;
}

html[lang="ru"] .platform-shell-brand {
  /* 保持固定 74px, 品牌文字不换行不撑高 */
  white-space: normal;
  overflow-wrap: anywhere;
}

html[lang="ru"] .platform-shell-notification-item strong,
html[lang="ru"] .platform-shell-notification-item small {
  overflow-wrap: anywhere;
  line-height: 1.4;
}

/* 页面级: 通用标题/表格/弹窗兜底 —— 只断词, 不改 line-height(避免行高突变) */
html[lang="ru"] .platform-shell-page h1,
html[lang="ru"] .platform-shell-page h2,
html[lang="ru"] .platform-shell-page h3,
html[lang="ru"] .platform-shell-page th,
html[lang="ru"] .platform-shell-page td {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

html[lang="ru"] .platform-shell-page dialog .modal-head,
html[lang="ru"] .platform-shell-page dialog .modal-footer,
html[lang="ru"] .platform-shell-page dialog .field-grid {
  flex-wrap: wrap;
}

/* 工具页(tools)专用: 输入区/表格可换行 */
html[lang="ru"] .platform-shell-page .filters,
html[lang="ru"] .platform-shell-page .toolbar,
html[lang="ru"] .platform-shell-page .section-head {
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  html[lang="ru"] .platform-shell-page .field-grid,
  html[lang="ru"] .platform-shell-page .form-grid,
  html[lang="ru"] .platform-shell-page .arrival-row {
    grid-template-columns: 1fr;
  }
}