:root {
  --hh-global-rail-width: 76px;
  --hh-global-rail-logo-width: 68px;
  --hh-global-rail-logo-height: 88px;
  --hh-global-rail-item-height: 54px;
  --hh-global-rail-gap: 8px;
  --hh-global-rail-bg: linear-gradient(180deg, rgba(4, 13, 24, .96), rgba(6, 17, 31, .84));
  --hh-global-rail-line: rgba(217, 173, 99, .24);
  --hh-global-rail-text: rgba(237, 246, 255, .76);
  --hh-global-rail-active-bg: rgba(79, 166, 255, .14);
  --hh-global-rail-active-line: rgba(217, 173, 99, .36);
  --hh-global-rail-active-text: #fff;
  --hh-global-rail-gold: #f1c887;
  --hh-global-rail-focus: #66c9ff;
  --hh-global-rail-logo-image: var(--hhv-side-user-logo, url("/wp-content/uploads/2026/07/hanhai-side-user-logo.png"));
}

html[data-hhv-appearance="day"] {
  --hh-global-rail-bg: linear-gradient(180deg, rgba(255, 255, 255, .985), rgba(241, 247, 252, .97));
  --hh-global-rail-line: rgba(55, 96, 129, .22);
  --hh-global-rail-text: #344a61;
  --hh-global-rail-active-bg: #dfeffa;
  --hh-global-rail-active-line: #93bddb;
  --hh-global-rail-active-text: #0a3656;
  --hh-global-rail-gold: #684400;
  --hh-global-rail-focus: #0568bd;
}

html[data-hhv-appearance="night"] {
  --hh-global-rail-bg: linear-gradient(180deg, rgba(2, 5, 10, .99), rgba(7, 10, 15, .985));
  --hh-global-rail-line: rgba(126, 145, 166, .28);
  --hh-global-rail-text: #d8dee7;
  --hh-global-rail-active-bg: #10263a;
  --hh-global-rail-active-line: #65717e;
  --hh-global-rail-active-text: #fff;
  --hh-global-rail-gold: #f1c887;
  --hh-global-rail-focus: #8fd8ff;
}

@media (min-width: 981px) {
  body.hanhai-3d-standalone .h3d-app {
    grid-template-columns: var(--hh-global-rail-width) minmax(0, 1fr) !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail, .hhsw-rail, .h3d-rail, .site-rail)[data-hanhai-global-rail="v1"] {
    display: flex !important;
    width: var(--hh-global-rail-width) !important;
    min-width: var(--hh-global-rail-width) !important;
    max-width: var(--hh-global-rail-width) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 18px 4px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-right: 1px solid var(--hh-global-rail-line) !important;
    background: var(--hh-global-rail-bg) !important;
    box-shadow: 12px 0 42px rgba(0, 0, 0, .24) !important;
    backdrop-filter: blur(22px) !important;
  }

  /* Keep each renderer in its native layout model. Home and Canvas reserve
     their fixed rail through existing content offsets; Workbench and 3D
     reserve the first grid column with an in-flow sticky rail. */
  body.hhv-home-visual .hh-rail[data-hanhai-global-rail="v1"],
  body.hanhai-canvas-standalone .site-rail[data-hanhai-global-rail="v1"] {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 80 !important;
  }

  /* Canvas owns a private tool rail in addition to the primary site rail.
     Keep its native --rail-w as the private width and reserve both columns
     for the stage, while the global top bar only starts after the site rail. */
  body.hanhai-canvas-standalone .topbar {
    left: var(--hh-global-rail-width) !important;
  }

  body.hanhai-canvas-standalone .canvas-stage {
    left: calc(var(--hh-global-rail-width) + var(--rail-w)) !important;
  }

  body.hhv-home-visual .hhsw-rail[data-hanhai-global-rail="v1"],
  body.hanhai-3d-standalone .h3d-rail[data-hanhai-global-rail="v1"] {
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    z-index: 80 !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail, .hhsw-rail, .h3d-rail, .site-rail)[data-hanhai-global-rail="v1"]::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-logo, .hhsw-logo, .h3d-brandmark, .site-rail-logo)[data-hanhai-global-logo="v1"] {
    position: relative !important;
    display: block !important;
    flex: 0 0 var(--hh-global-rail-logo-height) !important;
    width: var(--hh-global-rail-logo-width) !important;
    min-width: var(--hh-global-rail-logo-width) !important;
    height: var(--hh-global-rail-logo-height) !important;
    min-height: var(--hh-global-rail-logo-height) !important;
    margin: 12px auto 16px !important;
    padding: 0 !important;
    overflow: visible !important;
    color: transparent !important;
    text-indent: -9999px !important;
    font-size: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--hh-global-rail-logo-image) center / contain no-repeat !important;
    box-shadow: none !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-logo, .hhsw-logo, .h3d-brandmark, .site-rail-logo)[data-hanhai-global-logo="v1"] > * {
    visibility: hidden !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: var(--hh-global-rail-gap) !important;
    margin: 42px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] > :is(a, button) {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--hh-global-rail-item-height) !important;
    flex: 0 0 var(--hh-global-rail-item-height) !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    color: var(--hh-global-rail-text) !important;
    font: 800 12px/1.15 Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    appearance: none !important;
    transform: none !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] > :is(a, button)::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    flex: 0 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: currentColor !important;
    -webkit-mask: var(--hh-global-nav-icon) center / 20px 20px no-repeat !important;
    mask: var(--hh-global-nav-icon) center / 20px 20px no-repeat !important;
    box-shadow: none !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="home"] {
    --hh-global-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.2 12 3l9 8.2'/%3E%3Cpath d='M5.5 9.5V21h13V9.5M9 21v-6h6v6'/%3E%3C/svg%3E");
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="studio"] {
    --hh-global-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 1.7 5.3L19 9l-5.3 1.7L12 16l-1.7-5.3L5 9l5.3-1.7L12 2Z'/%3E%3Cpath d='m19 15 .8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15Z'/%3E%3C/svg%3E");
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="3d"] {
    --hh-global-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.8 8 4.5v9.4l-8 4.5-8-4.5V7.3l8-4.5Z'/%3E%3Cpath d='m4.3 7.5 7.7 4.4 7.7-4.4M12 12v9'/%3E%3C/svg%3E");
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="assets"] {
    --hh-global-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2.5'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m5.5 18 4.3-4.6 3.2 3 2.4-2.5 3.1 4.1'/%3E%3C/svg%3E");
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="inspiration"] {
    --hh-global-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 15.5A7 7 0 1 1 15.6 15.5c-1 .7-1.6 1.5-1.6 2.5h-4c0-1-.6-1.8-1.6-2.5Z'/%3E%3Cpath d='M9.5 21h5M12 6v3M8.5 9.5l2 2M15.5 9.5l-2 2'/%3E%3C/svg%3E");
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="announcements"] {
    --hh-global-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11v3.5A2.5 2.5 0 0 0 6.5 17H8l2 4h3l-1.7-4H13l7 3V5l-7 3H7a3 3 0 0 0-3 3Z'/%3E%3Cpath d='M20 9a3 3 0 0 1 0 6'/%3E%3C/svg%3E");
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="canvas"] {
    --hh-global-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='15' rx='2.5'/%3E%3Cpath d='M7 8h10M8 22l4-3 4 3M12 4V2'/%3E%3C/svg%3E");
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="lingbaoge"] {
    --hh-global-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 12 3l9 6M5 10h14M6 10v10m6-10v10m6-10v10M3 21h18'/%3E%3C/svg%3E");
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] > :is(a, button) > :is(i, svg, .hhsw-announcement-rail-icon) {
    display: none !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] > :is(a, button) > :is(b, span) {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    flex-shrink: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: inherit !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] > :is(a, button):hover,
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] > :is(a, button)[aria-current="page"] {
    color: var(--hh-global-rail-active-text) !important;
    border-color: var(--hh-global-rail-active-line) !important;
    background: var(--hh-global-rail-active-bg) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .26) !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] > :is(a, button):focus-visible,
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-logo, .hhsw-logo, .h3d-brandmark, .site-rail-logo)[data-hanhai-global-logo="v1"]:focus-visible,
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-bottom, .hhsw-rail-bottom, .h3d-account-cluster, .site-rail-bottom)[data-hanhai-global-bottom="v1"] :is(a, button):focus-visible {
    outline: 3px solid var(--hh-global-rail-focus) !important;
    outline-offset: 2px !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-bottom, .hhsw-rail-bottom, .h3d-account-cluster, .site-rail-bottom)[data-hanhai-global-bottom="v1"] {
    display: flex !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin: auto 0 0 !important;
    padding: 0 5px 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-global-bottom="v1"] > .hhv-language-switcher {
    display: flex !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 46px !important;
    min-height: 46px !important;
    flex: 0 0 46px !important;
    margin: 0 !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-global-bottom="v1"] > :is(.hh-points-mini, .hhsw-credit, .h3d-account-points, .site-rail-points) {
    display: flex !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    min-height: 42px !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 6px 3px !important;
    overflow: hidden !important;
    color: var(--hh-global-rail-gold) !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    border: 1px solid var(--hh-global-rail-active-line) !important;
    border-radius: 14px !important;
    background: var(--hh-global-rail-active-bg) !important;
    box-sizing: border-box !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-global-bottom="v1"] > :is(.hh-avatar, .hhsw-avatar, .h3d-account, .site-rail-avatar, [data-hh-account-menu-anchor="v1"]),
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-global-bottom="v1"] > :is(.hh-help, .hhsw-help, .site-rail-help) {
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--hh-global-rail-gold) !important;
    border: 1px solid var(--hh-global-rail-active-line) !important;
    border-radius: 50% !important;
    background-color: var(--hh-global-rail-active-bg) !important;
    box-sizing: border-box !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-global-bottom="v1"] > :is(.hh-avatar, .hhsw-avatar, .h3d-account, .site-rail-avatar, [data-hh-account-menu-anchor="v1"]) img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
  }
}

@media (min-width: 981px) and (max-height: 820px) {
  :root {
    --hh-global-rail-logo-width: 58px;
    --hh-global-rail-logo-height: 58px;
    --hh-global-rail-item-height: 44px;
    --hh-global-rail-gap: 4px;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail, .hhsw-rail, .h3d-rail, .site-rail)[data-hanhai-global-rail="v1"] {
    padding: 10px 4px !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-logo, .hhsw-logo, .h3d-brandmark, .site-rail-logo)[data-hanhai-global-logo="v1"] {
    margin: 4px auto 6px !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] {
    margin-top: 8px !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-bottom, .hhsw-rail-bottom, .h3d-account-cluster, .site-rail-bottom)[data-hanhai-global-bottom="v1"] {
    gap: 6px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-global-bottom="v1"] > .hhv-language-switcher {
    height: 38px !important;
    min-height: 38px !important;
    flex-basis: 38px !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-global-bottom="v1"] > :is(.hh-points-mini, .hhsw-credit, .h3d-account-points, .site-rail-points) {
    min-height: 36px !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-global-bottom="v1"] > :is(.hh-avatar, .hhsw-avatar, .h3d-account, .site-rail-avatar, [data-hh-account-menu-anchor="v1"], .hh-help, .hhsw-help, .site-rail-help) {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    flex-basis: 38px !important;
  }
}

/* Private rails remain second-level. Workbench threads already occupy the
   second grid inside .hhsw-studio, so they must not receive a second offset.
   Canvas tools are fixed and therefore explicitly start after the site rail. */
@media (min-width: 981px) {
  body.hanhai-canvas-standalone .tool-rail[data-hanhai-secondary-rail="canvas-tools"] {
    left: var(--hh-global-rail-width) !important;
  }
}

/* Every renderer previously chose a different compact navigation: Workbench
   moved the rail to the top, 3D moved it to the bottom, and Canvas removed it.
   GlobalRail uses one bottom navigation for all four renderers.  Horizontal
   scrolling is contained inside the nav at 320px; it never widens the page. */
@media (max-width: 980px) {
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) {
    max-width: 100% !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  body.hhv-home-visual .hhsw-shell,
  body.hanhai-3d-standalone .h3d-app {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: calc(100dvh - 64px - env(safe-area-inset-bottom)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail, .hhsw-rail, .h3d-rail, .site-rail)[data-hanhai-global-rail="v1"] {
    position: fixed !important;
    z-index: 2147482000 !important;
    inset: auto 0 0 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: calc(64px + env(safe-area-inset-bottom)) !important;
    min-height: calc(64px + env(safe-area-inset-bottom)) !important;
    max-height: calc(64px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 5px 7px calc(5px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid var(--hh-global-rail-line) !important;
    background: var(--hh-global-rail-bg) !important;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, .28) !important;
    /* A filter/backdrop-filter on this fixed parent creates a containing block
       for the fixed language/points/account cluster and clips it into the
       64px bottom bar. Keep the opaque gradient and shadow, but leave the
       mobile rail free of fixed-position containing-block properties. */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    perspective: none !important;
    contain: none !important;
    box-sizing: border-box !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-logo, .hhsw-logo, .h3d-brandmark, .site-rail-logo)[data-hanhai-global-logo="v1"] {
    display: none !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    grid-template-columns: repeat(7, minmax(48px, 1fr)) !important;
    align-items: stretch !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"]::-webkit-scrollbar {
    display: none !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] > :is(a, button) {
    position: relative !important;
    display: flex !important;
    width: auto !important;
    min-width: 48px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 3px 1px !important;
    overflow: hidden !important;
    color: var(--hh-global-rail-text) !important;
    font: 800 8px/1.05 Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] > :is(a, button)::before {
    display: grid !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    place-items: center !important;
    color: currentColor !important;
    font: 900 16px/1 Inter, "Segoe UI Symbol", sans-serif !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    transform: none !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="home"]::before { content: "⌂" !important; }
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="studio"]::before { content: "✦" !important; }
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="3d"]::before { content: "⬡" !important; }
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="assets"]::before { content: "▣" !important; }
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="inspiration"]::before { content: "✧" !important; }
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="announcements"]::before { content: "!" !important; }
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="canvas"]::before { content: "▢" !important; }
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-nav-key="lingbaoge"]::before { content: "⌑" !important; }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] > :is(a, button) > :is(i, svg, .hhsw-announcement-rail-icon) {
    display: none !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] > :is(a, button) > :is(b, span) {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    color: inherit !important;
    font: inherit !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] > :is(a, button):is(:hover, :focus-visible, [aria-current="page"]) {
    color: var(--hh-global-rail-active-text) !important;
    border-color: var(--hh-global-rail-active-line) !important;
    background: var(--hh-global-rail-active-bg) !important;
    box-shadow: none !important;
  }

  /* Language, points and account remain reachable without adding a second
     primary nav.  They are compact fixed header controls on small screens. */
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone) :is(.hh-rail-bottom, .hhsw-rail-bottom, .site-rail-bottom)[data-hanhai-global-bottom="v1"] {
    position: fixed !important;
    z-index: 2147482001 !important;
    inset: 8px 8px auto auto !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 1px !important;
    overflow: visible !important;
    border-radius: 12px !important;
    background: rgba(4, 15, 27, .88) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .24) !important;
    backdrop-filter: blur(16px) !important;
  }

  body.hanhai-canvas-standalone .site-rail-bottom[data-hanhai-global-bottom="v1"] {
    right: 56px !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone) [data-hanhai-global-bottom="v1"] > .hhv-language-switcher {
    display: flex !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    margin: 0 !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone) [data-hanhai-global-bottom="v1"] > :is(.hh-points-mini, .hhsw-credit, .site-rail-points) {
    display: flex !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    min-height: 40px !important;
    flex: 0 0 50px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 3px 2px !important;
    overflow: hidden !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone) [data-hanhai-global-bottom="v1"] > :is(.hh-avatar, .hhsw-avatar, .site-rail-avatar, [data-hh-account-menu-anchor="v1"]) {
    display: grid !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
  }

  :is(body.hhv-home-visual, body.hanhai-canvas-standalone) [data-hanhai-global-bottom="v1"] > :is(.hh-help, .hhsw-help, .site-rail-help) {
    display: none !important;
  }

  /* 3D already owns a header account trigger and language slot.  Keep only
     its points summary from the rail to avoid duplicate account controls. */
  body.hanhai-3d-standalone .h3d-account-cluster[data-hanhai-global-bottom="v1"] {
    position: fixed !important;
    z-index: 2147482001 !important;
    inset: 10px 58px auto auto !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  body.hanhai-3d-standalone .h3d-account-cluster[data-hanhai-global-bottom="v1"] > .h3d-account {
    display: none !important;
  }

  body.hanhai-canvas-standalone .topbar {
    left: 0 !important;
  }

  /* Canvas' old compact CSS hides the primary site rail, zeroes --rail-w,
     then a 390px fallback moves the private tool rail to left:80px. Once the
     shared primary rail becomes the fixed bottom navigation those values leave
     a blank gutter and put tools over the stage. Keep one slim, scrollable
     private tool strip at the viewport edge and reserve exactly that width. */
  body.hanhai-canvas-standalone {
    --rail-w: 56px !important;
  }

  body.hanhai-canvas-standalone .tool-rail[data-hanhai-secondary-rail="canvas-tools"] {
    display: flex !important;
    left: 0 !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    scrollbar-width: none !important;
  }

  body.hanhai-canvas-standalone .tool-rail[data-hanhai-secondary-rail="canvas-tools"]::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  body.hanhai-canvas-standalone .canvas-stage {
    left: 56px !important;
  }

  body.hanhai-canvas-standalone :is(.canvas-stage, .right-panel, .tool-rail) {
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
}

/* Preserve renderer-owned nodes while excluding duplicate or page-private
   direct children from every user-facing interaction tree.  This rule follows
   both geometry blocks so a native display declaration cannot revive them. */
:is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) :is(.hh-rail-nav, .hhsw-nav, .h3d-rail-nav, .site-rail-nav)[data-hanhai-global-nav="v1"] > [data-hanhai-global-suppressed="1"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-global-rail="v1"] *,
  :is(body.hhv-home-visual, body.hanhai-canvas-standalone, body.hanhai-3d-standalone) [data-hanhai-global-nav="v1"] * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}