/* ========== Page styles: index ========== */
/* 主控台 Token — 使用共享 tokens.css 默认值 */

    /* ========== Root Container ========== */
    .page {
      width: var(--layout-canvas-width);
      min-height: var(--layout-canvas-min-height);
      background:
        radial-gradient(ellipse 58% 46% at 50% 36%, rgba(10, 78, 128, 0.26) 0%, transparent 68%),
        radial-gradient(ellipse 32% 42% at 9% 58%, rgba(0, 72, 118, 0.14) 0%, transparent 70%),
        radial-gradient(ellipse 32% 42% at 91% 58%, rgba(0, 72, 118, 0.14) 0%, transparent 70%),
        var(--bg-page);
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
    }

    /* 设计画布定位 — 仅用于还原 MasterGo 绝对坐标区域 */
    .abs {
      position: absolute;
    }

    /* 装饰层专用 */
    .layer-deco {
      position: absolute;
      pointer-events: none;
    }

    .header {
      left: 0;
      top: 0;
      width: var(--layout-canvas-width);
      height: 6.6875rem;
      overflow: hidden;
      z-index: 10;
      pointer-events: none;
      background-color: transparent;
      background-image: url("../../assets/header-bg-dark.png");
      background-position: center top;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .header::after {
      content: none;
    }

    .header__deco {
      left: 0;
      top: 0;
      width: 100%;
      height: 4.742875rem;
      opacity: 0.3;
      line-height: 0;
    }

    .header__deco svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .header__title {
      position: absolute;
      left: 43rem;
      top: 1.1875rem;
      width: 34.0625rem;
      height: 3rem;
      font: var(--font-title);
      letter-spacing: 0.125rem;
      color: #eaf4ff;
      white-space: nowrap;
      pointer-events: auto;
      text-shadow:
        0 0 1.125rem rgba(4, 222, 255, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 10px rgba(0, 8, 20, 0.45);
    }

    .win-btn--minus {
      width: 0.729rem;
      height: 0.081rem;
      background: var(--text-secondary);
      display: block;
    }

    /* ========== Shared Dropdown（选择器-展开项 255:5958 / 251:7128） ========== */
    .dropdown {
      position: relative;
      z-index: 200;
      pointer-events: auto;
    }

    .dropdown.is-open .dropdown__chevron {
      transform: rotate(180deg);
    }

    .dropdown__chevron {
      transition: transform 0.2s ease;
    }

    .dropdown-panel {
      position: absolute;
      top: calc(100% + 0.5rem);
      left: 0;
      width: var(--dropdown-width);
      display: none;
      flex-direction: column;
      gap: var(--space-12);
      padding: var(--space-12);
      border-radius: var(--dropdown-radius);
      border: 1px solid var(--dropdown-border);
      background: var(--dropdown-bg); /* 03.容器/弹窗/展开框&二级 */
      box-shadow:
        var(--dropdown-shadow),
        inset 0 1px 0 rgba(164, 214, 255, 0.12);
      backdrop-filter: var(--dropdown-blur);
      -webkit-backdrop-filter: var(--dropdown-blur);
      list-style: none;
      margin: 0;
      z-index: 60;
    }

    /* !important：压过 UA [hidden]{display:none!important} */
    .dropdown.is-open > .dropdown-panel {
      display: flex !important;
    }

    .dropdown-panel__group {
      display: flex;
      flex-direction: column;
      width: var(--dropdown-item-width);
      flex-shrink: 0;
    }

    .dropdown-item {
      width: var(--dropdown-item-width);
      height: var(--dropdown-item-height);
      padding: 5px 8px;
      border: none;
      border-radius: var(--dropdown-item-radius);
      background: transparent;
      font: var(--font-14); /* 中文/14px（常规体） */
      color: var(--text-secondary); /* 02.文本&图标/次要 */
      text-align: left;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s ease;
    }

    .dropdown-item:hover,
    .dropdown-item.is-hover,
    .dropdown-item[aria-selected="true"] {
      background: var(--theme-hover); /* 01.主题色/主色扩展/悬停 */
    }

    .dropdown-item:active {
      background: var(--theme-selected);
    }

    .dropdown--user .dropdown-panel {
      left: auto;
      right: 0;
    }

    .dropdown--user .dropdown-item {
      color: #ffffff;
    }

    /* ========== Section 9: Project Switch（组 590 — 返回 + 项目名称切换） ========== */
    .project-dropdown {
      left: 18px;
      top: 23px; /* 232:8152 */
      z-index: 200;
      overflow: visible;
    }

    .project-nav {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px; /* 组 590 flex gap */
      height: 24px;
    }

    /* 255:01700 — Line/left 返回项目列表 */
    .project-back {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: rgba(0, 149, 255, 0.3); /* paint_255:01850 */
      display: inline-flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      text-decoration: none;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }

    .project-back:hover {
      background: rgba(0, 149, 255, 0.5);
      box-shadow: 0 0 0.5rem rgba(4, 222, 255, 0.35);
    }

    .project-back:active {
      background: rgba(0, 149, 255, 0.65);
    }

    .project-back__icon {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
    }

    .project-back__icon > span {
      width: 6px;
      height: 10px;
      display: flex;
    }

    .project-back__icon svg {
      width: 100%;
      height: 100%;
    }

    .project-dropdown .dropdown-panel {
      width: max-content;
      min-width: var(--dropdown-width);
      gap: var(--space-8);
    }

    .project-dropdown .dropdown-panel__group {
      width: auto;
      gap: var(--space-8);
    }

    .project-dropdown .dropdown-item {
      width: auto;
      min-width: var(--dropdown-item-width);
      color: var(--surface-text, #fff);
      white-space: nowrap;
    }

    .project-switch {
      width: auto;
      min-width: 120px;
      height: 24px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      color: inherit;
      font: inherit;
    }

    .project-switch:hover {
      opacity: 1;
      filter: brightness(1.15);
      text-shadow: 0 0 0.5rem rgba(4, 222, 255, 0.6);
    }

    .project-switch:active {
      opacity: 0.72;
      transform: translateY(1px);
    }

    .project-switch__label {
      font: var(--font-16);
      color: var(--nav-text, var(--icon-white));
      white-space: nowrap;
    }

    .project-switch__icon {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .project-switch__icon > span {
      width: 13.001253128051758px;
      height: 7.0017876625061035px;
      display: flex;
    }

    .project-switch__icon svg {
      width: 100%;
      height: 100%;
    }

    /* ========== Section 8: User / Window Controls ========== */
    .top-right {
      left: 1647px;
      top: 0;
      width: 273px;
      height: 63px;
      z-index: 200;
      overflow: visible;
      pointer-events: none;
    }

    .user-dropdown {
      position: absolute;
      left: 0;
      top: 18px;
      width: 152px;
      z-index: 201;
      pointer-events: auto;
      overflow: visible;
    }

    .user-entry {
      width: 152px;
      height: 34px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      color: inherit;
      font: inherit;
      text-align: left;
    }

    .user-entry:hover {
      opacity: 1;
      filter: brightness(1.1);
    }

    .user-entry:hover .user-avatar {
      background: rgba(27, 126, 242, 0.7);
      box-shadow: 0 0 0.5rem rgba(4, 222, 255, 0.5);
    }

    .user-entry:active {
      opacity: 0.72;
    }

    .user-avatar {
      width: 34px;
      height: 34px;
      border-radius: 20px;
      background: var(--theme-selected); /* 01.主题色/主色扩展/选中 */
      backdrop-filter: blur(724px);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.2s ease, box-shadow 0.2s ease;
      box-shadow:
        inset 0 0 0 1px rgba(164, 220, 255, 0.38),
        0 0 0.75rem rgba(27, 126, 242, 0.28);
    }

    .user-avatar__icon {
      width: 20px;
      height: 20px;
      display: flex;
    }

    .user-avatar__icon svg {
      width: 100%;
      height: 100%;
    }

    .user-meta {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
    }

    .user-meta__phone {
      font: var(--font-14);
      color: var(--text-primary-alt); /* 02.文本&图标/主要 */
      white-space: nowrap;
    }

    .user-meta__chevron {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .user-meta__chevron > span {
      width: 13.001253128051758px;
      height: 7.0017876625061035px;
      display: flex;
    }

    .user-meta__chevron svg {
      width: 100%;
      height: 100%;
    }

    .win-controls {
      position: absolute;
      left: 150px;
      top: 0;
      width: 123px;
      height: 36px;
      pointer-events: auto;
    }

    .win-controls__bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 123px;
      height: 36px;
      line-height: 0;
    }

    .win-controls__bg svg {
      width: 100%;
      height: 100%;
    }

    .win-controls__btns {
      position: absolute;
      left: 24px;
      top: 5px;
      display: flex;
      flex-direction: row;
      gap: 8px;
    }

    .win-btn {
      width: 25.920063018798828px;
      height: 25.920063018798828px;
      border-radius: 5.184012413024902px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      position: relative;
    }

    .win-btn:hover {
      background: var(--theme-hover);
      box-shadow: 0 0 0.375rem rgba(4, 222, 255, 0.35);
    }

    .win-btn:active {
      background: var(--theme-selected);
    }

    .win-btn--close:hover {
      background: rgba(255, 56, 56, 0.25);
    }

    .win-btn--close:active {
      background: rgba(255, 56, 56, 0.45);
    }

    .win-btn--unplus > span {
      width: 11.664029121398926px;
      height: 1.2960032224655151px;
      display: flex;
    }

    .win-btn--zoom-box {
      width: 12.960031509399414px;
      height: 12.960031509399414px;
      border-radius: 2.592006206512451px;
      border: 1.0368025302886963px solid var(--text-secondary); /* 02.文本&图标/次要 */
    }

    .win-btn--close > span {
      width: 11.664029121398926px;
      height: 11.664029121398926px;
      display: flex;
    }

    .win-btn svg {
      width: 100%;
      height: 100%;
    }

    /* ========== Section 15 + 16: 操作区 Tab ========== */
    .op-tab {
      left: 335px;
      top: 128px;
      width: 89px;
      height: 40px;
      overflow: hidden;
      z-index: 3;
    }

    .op-tab__bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 89px;
      height: 40px;
      line-height: 0;
    }

    .op-tab__bg svg {
      width: 100%;
      height: 100%;
    }

    .op-tab__label {
      position: absolute;
      left: 14px;
      top: 8px;
      width: auto;
      max-width: calc(100% - 18px);
      height: 24px;
      font: var(--font-16-medium);
      color: var(--icon-white);
      text-align: center;
      letter-spacing: 0.06em;
      text-shadow: 0 0 0.5rem rgba(125, 188, 255, 0.45);
      white-space: nowrap;
      line-height: 24px;
    }

    .op-tab-ext {
      left: 420px;
      top: 139px;
      width: 56px;
      height: 19px;
      line-height: 0;
      z-index: 3;
    }

    .op-tab-ext svg {
      width: 100%;
      height: 100%;
    }

    /* ========== Section 7: Large Nav Buttons ========== */
    .nav-large {
      left: 772px;
      top: 113px;
      width: 376.5px;
      height: 46px;
      display: flex;
      flex-direction: row;
      gap: 12px;
      z-index: 4;
    }

    .btn-large {
      position: relative;
      width: 117.5px;
      height: 46px;
      background: url("../../assets/btn-large-bg.png") center / 100% 100% no-repeat;
      border: none;
      border-radius: var(--btn-action-radius, 0);
      cursor: pointer;
      padding: 0;
    }

    .btn-large:hover {
      filter: brightness(1.12) saturate(1.08);
      box-shadow:
        0 0 0.875rem rgba(4, 222, 255, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    .btn-large:active {
      filter: brightness(0.92);
      transform: translateY(1px);
    }

    .btn-large__shape-fb,
    .btn-large__cap-fb,
    .btn-large__bar {
      display: none;
    }

    .btn-large__label {
      position: absolute;
      left: 25.5px;
      top: 12px;
      width: 64px;
      height: 24px;
      font: var(--font-16-medium);
      color: #FFFFFF;
      white-space: nowrap;
      pointer-events: none;
      letter-spacing: 0.04em;
      text-shadow: 0 1px 6px rgba(0, 20, 40, 0.55);
    }

    .btn-large__cap {
      position: absolute;
      left: 46.5px;
      top: 0;
      width: 25px;
      height: 3.5px;
      line-height: 0;
    }

    .btn-large__cap svg {
      width: 100%;
      height: 100%;
    }

    /* ========== Section 6: Small Stop Buttons ========== */
    .nav-small {
      left: 1346px;
      top: 120px;
      width: 237px;
      height: 35px;
      display: flex;
      flex-direction: row;
      gap: 12px;
      z-index: 4;
    }

    .btn-small {
      position: relative;
      width: 71px;
      height: 35px;
      background: url("../../assets/btn-small-bg.png") center / 100% 100% no-repeat;
      border: none;
      border-radius: var(--btn-action-radius, 0);
      cursor: pointer;
      padding: 0;
    }

    .btn-small:hover {
      filter: brightness(1.12) saturate(1.08);
      box-shadow:
        0 0 0.75rem rgba(0, 255, 180, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    .btn-small:active {
      filter: brightness(0.92);
      transform: translateY(1px);
    }

    .btn-small__shape {
      display: none;
    }

    .btn-small__label {
      position: absolute;
      left: 20.5px;
      top: 5px;
      width: 28px;
      height: 22px;
      font: var(--font-14-medium);
      color: #FFFFFF;
      white-space: nowrap;
      pointer-events: none;
      letter-spacing: 0.06em;
      text-shadow: 0 1px 6px rgba(0, 20, 40, 0.55);
    }

    .btn-small__underline {
      display: none;
    }

    /* ========== Section 5: Model Area ========== */
    .model-area {
      left: 335px;
      top: 168px;
      width: 1247.50927734375px;
      height: 696px;
      background:
        linear-gradient(#00c8ff, #00c8ff) 0 0 / 18px 2px no-repeat,
        linear-gradient(#00c8ff, #00c8ff) 0 0 / 2px 18px no-repeat,
        linear-gradient(#00c8ff, #00c8ff) 100% 0 / 18px 2px no-repeat,
        linear-gradient(#00c8ff, #00c8ff) 100% 0 / 2px 18px no-repeat,
        linear-gradient(#00c8ff, #00c8ff) 0 100% / 18px 2px no-repeat,
        linear-gradient(#00c8ff, #00c8ff) 0 100% / 2px 18px no-repeat,
        linear-gradient(#00c8ff, #00c8ff) 100% 100% / 18px 2px no-repeat,
        linear-gradient(#00c8ff, #00c8ff) 100% 100% / 2px 18px no-repeat,
        rgba(2, 58, 79, 0.22);
      border: 1px solid rgba(0, 186, 220, 0.34);
      box-shadow:
        inset 0 0 4.5rem rgba(0, 90, 140, 0.16),
        0 0 1.5rem rgba(0, 80, 140, 0.1);
      display: flex;
      flex-direction: column;
      z-index: 1;
    }

    .model-area__inner {
      flex: 1 1 0;
      display: flex;
      flex-direction: row;
      gap: 10px;
      padding: 24px;
    }

    .model-area__stage {
      position: relative;
      flex: 1 1 0;
      width: 1199.50927734375px;
      height: 648px;
      overflow: hidden;
      background:
        radial-gradient(ellipse 78% 58% at 50% 46%, rgba(0, 68, 108, 0.42) 0%, #000000 74%);
      box-shadow: inset 0 0 0 1px rgba(0, 186, 220, 0.12);
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 10px;
      padding: 10px;
    }

    .model-area__label {
      position: relative;
      z-index: 1;
      font: var(--font-20);
      color: var(--chart-2); /* 图表配色/2 — textColor overrides fill */
      white-space: nowrap;
      letter-spacing: 0.22em;
      text-shadow: 0 0 1.25rem rgba(0, 255, 238, 0.38);
      opacity: 0.88;
    }

    /* ========== Split: Media Cards Row ========== */
    .media-row {
      left: 335px;
      top: 889px;
      width: 1248px;
      height: 168.75px;
      z-index: 2;
    }

    /* ========== Media Card (sections 1–4) ========== */
    .media-card {
      position: absolute;
      top: 0;
      width: 300px;
      height: 168.75px;
      background: #0a1a28;
      overflow: hidden;
      cursor: pointer;
      box-shadow: inset 0 0 0 1px rgba(0, 186, 220, 0.28);
    }

    .media-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(
        180deg,
        rgba(0, 8, 18, 0.28) 0%,
        transparent 32%,
        transparent 58%,
        rgba(0, 8, 18, 0.55) 100%
      );
    }

    .media-card:hover {
      box-shadow:
        inset 0 0 0 1px rgba(0, 255, 238, 0.48),
        0 0 1.25rem rgba(0, 143, 255, 0.28);
      filter: brightness(1.06) saturate(1.06);
    }

    .media-card--1 { left: 0; }
    .media-card--2 { left: 316px; }
    .media-card--3 { left: 632px; }
    .media-card--4 { left: 948px; }

    /* 视频画面 / 预览帧 */
    .media-card__thumb {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      z-index: 0;
      pointer-events: none;
      user-select: none;
    }

    .media-card__play {
      position: absolute;
      left: 124px;
      top: 58.375px;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--mask-light); /* 05.蒙层/轻（60%） */
      backdrop-filter: var(--blur-bg); /* 背景模糊 */
      -webkit-backdrop-filter: var(--blur-bg);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      overflow: hidden;
      line-height: 0;
      z-index: 2;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.22),
        0 0.25rem 1rem rgba(0, 0, 0, 0.42);
    }

    .media-card__play:hover {
      background: rgba(0, 0, 0, 0.72);
      box-shadow: 0 0 0.75rem rgba(4, 222, 255, 0.45);
      transform: scale(1.06);
    }

    .media-card:hover .media-card__play {
      background: rgba(0, 0, 0, 0.65);
    }

    .media-card__play:active {
      background: rgba(0, 0, 0, 0.85);
      transform: scale(0.96);
    }

    .media-card__play:focus-visible {
      outline: 2px solid var(--color-focus-ring);
      outline-offset: 2px;
    }

    /* 播放三角：设计稿 14×21，光学居中略偏右 */
    .media-card__play-icon {
      position: relative;
      left: 1px;
      width: 14px;
      height: 21px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      pointer-events: none;
    }

    .media-card__play-icon svg {
      width: 14px;
      height: 21px;
      display: block;
    }

    .media-card__badge {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      flex-direction: column;
      padding: 1px 8px;
      background: var(--mask-light); /* 05.蒙层/轻（60%） */
      border-radius: 2px;
      z-index: 2;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .media-card__badge-text {
      font: var(--font-12); /* 文本12（常规体） */
      color: var(--text-primary); /* 02.文本&图标/主要 */
      white-space: nowrap;
    }

    .media-card__close {
      position: absolute;
      left: 260px;
      top: 0;
      width: 40px;
      height: 24px;
      z-index: 2;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      line-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .media-card__close-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 40px;
      height: 24px;
      line-height: 0;
      pointer-events: none;
    }

    .media-card__close-bg svg {
      width: 40px;
      height: 24px;
      display: block;
    }

    .media-card__close-icon {
      position: relative;
      z-index: 1;
      width: 12px;
      height: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 4px; /* 斜切后视觉中心偏右 */
      pointer-events: none;
    }

    .media-card__close-icon svg {
      width: 12px;
      height: 12px;
      display: block;
    }

    .media-card__close:hover {
      filter: brightness(1.25);
    }

    .media-card__close:hover .media-card__close-icon svg path {
      stroke: var(--icon-white);
    }

    .media-card__close:active {
      filter: brightness(0.9);
      transform: scale(0.96);
    }

    /* ========== Split: Right Panels ========== */
    .right-panels {
      left: 1599px;
      top: 106px;
      width: 300px;
      height: 952px;
      z-index: 2;
    }

    /* ========== Panel Chrome ========== */
    .panel {
      position: relative;
      width: 300px;
      background:
        linear-gradient(180deg, rgba(20, 86, 128, 0.22) 0%, rgba(7, 25, 39, 0) 32%),
        var(--panel-bg);
      border-style: solid;
      border-width: 1px 1px 0;
      border-image: var(--panel-stroke) 1;
      border-radius: var(--panel-radius, 0) var(--panel-radius, 0) 0 0;
      display: flex;
      flex-direction: column;
      box-shadow: inset 0 1px 0 rgba(164, 214, 255, 0.1);
    }

    .panel__header {
      position: relative;
      width: 300px;
      height: 34px;
      background: var(--panel-header-bg);
      border-bottom: 1px solid transparent;
      border-image: var(--panel-header-border) 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 6px 16px;
      flex-shrink: 0;
      transition: filter 0.2s ease;
      box-shadow: 0 1px 12px rgba(0, 143, 255, 0.12);
    }

    .panel:hover .panel__header {
      filter: brightness(1.12);
    }

    .panel__title {
      font: var(--font-14-medium); /* 文本14（中黑体） */
      color: var(--icon-white);
      white-space: nowrap;
      letter-spacing: 0.08em;
      text-shadow:
        0 0 0.75rem rgba(0, 180, 255, 0.4),
        var(--panel-title-shadow, 0 0 0.625rem #001E1C);
    }

    .panel__corner {
      position: absolute;
      top: 0;
      width: 8px;
      height: 8px;
      line-height: 0;
      filter: drop-shadow(0 0 3px rgba(0, 143, 255, 0.85));
    }

    .panel__corner--l { left: 0; }
    .panel__corner--r { left: 292px; }

    .panel__corner svg {
      width: 100%;
      height: 100%;
    }

    /* Section 10 */
    .panel-robot {
      position: absolute;
      left: 0;
      top: 0;
      width: 300px;
      height: 318px;
    }

    .panel-robot .panel {
      width: 300px;
      height: 318px;
    }

    .robot-list {
      position: absolute;
      left: 13px;
      top: 48px;
      width: 269px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .robot-item {
      width: 269px;
      height: 52px;
      display: flex;
      flex-direction: row;
      align-items: center;
      cursor: pointer;
    }

    .robot-item:hover .robot-item__body {
      background: linear-gradient(270deg, rgba(0, 143, 255, 0.1) 0%, rgba(0, 143, 255, 0.35) 100%);
      box-shadow: inset 0.125rem 0 0 var(--panel-accent);
    }

    .robot-item__body {
      flex: 1 1 0;
      width: 269px;
      height: 52px;
      background: var(--row-bg);
      display: flex;
      flex-direction: row;
      padding: 4px 12px;
      box-shadow:
        inset 0 1px 0 rgba(180, 220, 255, 0.08),
        inset 2px 0 0 rgba(0, 143, 255, 0.55);
    }

    .robot-item__info {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
    }

    .robot-item__name {
      font: var(--font-14);
      color: var(--surface-text, #FFFFFF);
      white-space: nowrap;
    }

    .robot-item__tool {
      font: var(--font-12);
      color: var(--text-muted);
      white-space: nowrap;
    }

    .robot-item__tag {
      width: auto;
      min-width: 40px;
      height: 22px;
      border-radius: 4px;
      background: var(--tag-error-bg);
      border: 1px solid var(--tag-error-border);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 1px 8px;
      flex-shrink: 0;
      margin-left: auto;
      align-self: flex-start;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .robot-item__tag-text {
      font: var(--font-12-pf); /* 中文/12px（常规体） */
      color: var(--func-error); /* 06.功能色/错误 */
      text-align: center;
      white-space: nowrap;
    }

    /* 状态：故障（默认） */
    .robot-item__tag--fault {
      background: var(--tag-error-bg);
      border-color: var(--tag-error-border);
    }

    .robot-item__tag--fault .robot-item__tag-text {
      color: var(--func-error);
    }

    /* 状态：作业中 */
    .robot-item__tag--working {
      background: var(--tag-working-bg);
      border-color: var(--tag-working-border);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0.5rem rgba(0, 255, 238, 0.22);
    }

    .robot-item__tag--working .robot-item__tag-text {
      color: var(--tag-working-text);
      text-shadow: 0 0 0.4rem rgba(0, 255, 238, 0.35);
    }

    /* 状态：待命 */
    .robot-item__tag--idle {
      background: var(--tag-idle-bg);
      border-color: var(--tag-idle-border);
    }

    .robot-item__tag--idle .robot-item__tag-text {
      color: var(--tag-idle-text);
    }

    /* Section 11 */
    .panel-stats {
      position: absolute;
      left: 0;
      top: 334px;
      width: 300px;
      height: 138px;
    }

    .panel-stats .panel {
      width: 300px;
      height: 138px;
    }

    .stats-row {
      position: absolute;
      left: 13px;
      top: 50px;
      width: 274px;
      height: 68px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .stat-card {
      width: 60px;
      height: 68px;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 10px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .stat-card:hover {
      filter: brightness(1.2);
      transform: translateY(-0.125rem);
      box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
    }

    .stat-card--pending {
      background: linear-gradient(180deg, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0.5) 100%);
    }

    .stat-card--resolved {
      background: linear-gradient(180deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0.5) 100%);
    }

    .stat-card--abnormal {
      background: linear-gradient(180deg, rgba(0, 132, 255, 0) 0%, rgba(0, 132, 255, 0.5) 100%);
    }

    .stat-card--processing {
      background: linear-gradient(180deg, rgba(255, 123, 0, 0) 0%, rgba(255, 123, 0, 0.5) 100%);
    }

    .stat-card__num {
      font: var(--font-oppo-16);
      color: #FFFFFF;
      font-variant-numeric: tabular-nums;
      text-shadow: 0 0 0.75rem rgba(255, 255, 255, 0.35);
    }

    .stat-card__label {
      font: var(--font-14);
      color: #FFFFFF;
      white-space: nowrap;
    }

    /* Section 12 */
    .panel-progress {
      position: absolute;
      left: 0;
      top: 488px;
      width: 300px;
      height: 172px;
    }

    .panel-progress .panel {
      width: 300px;
      height: 172px;
    }

    .progress-list {
      position: absolute;
      left: 13px;
      top: 54px;
      width: 275px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .progress-row {
      width: 275px;
      height: 22px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      border-radius: 0.25rem;
      padding: 0 0.25rem;
      margin: 0 -0.25rem;
    }

    .progress-row:hover {
      background: rgba(0, 143, 255, 0.12);
    }

    .progress-row:hover .progress-row__bar {
      filter: brightness(1.15);
    }

    .progress-row__name {
      font: var(--font-14);
      color: var(--surface-text, var(--icon-white)); /* 图标颜色/纯白 → 浅色稿正文 */
      white-space: nowrap;
      width: 56px;
      flex-shrink: 0;
    }

    .progress-row__track {
      flex: 1 1 0;
      height: 8px;
      position: relative;
      overflow: hidden;
      border-radius: 4px;
      background: rgba(0, 28, 52, 0.72);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
    }

    .progress-row__bar {
      position: relative;
      height: 8px;
      width: 100%;
      border-style: solid;
      border-width: 1px;
      border-radius: 4px;
      overflow: hidden;
    }

    .progress-row__bar--full {
      background: linear-gradient(90deg, #22559C 0%, #3CA3E1 100%);
      border-color: #00B4FF;
      box-shadow: 0 0 0.5rem rgba(0, 180, 255, 0.35);
    }

    .progress-row__bar--mid {
      background: linear-gradient(90deg, #66430C 0%, #CA9E3B 100%);
      border-color: #EAB33B;
      box-shadow: 0 0 0.5rem rgba(234, 179, 59, 0.28);
    }

    .progress-row__bar--low {
      background: linear-gradient(90deg, #566140 0%, #85B64C 100%);
      border-color: #9CCF61;
      box-shadow: 0 0 0.5rem rgba(156, 207, 97, 0.28);
    }

    .progress-row__pct {
      font: var(--font-oppo-14);
      color: var(--surface-text, var(--icon-white));
      white-space: nowrap;
      width: 32px;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }

    /* Section 13 */
    .panel-alert {
      position: absolute;
      left: 0;
      top: 676px;
      width: 300px;
      height: 276px;
    }

    .panel-alert .panel {
      position: absolute;
      left: 0;
      top: -3px;
      width: 300px;
      height: 276px;
    }

    .alert-summary {
      position: absolute;
      left: 17px;
      top: 43px;
      width: 256px;
      height: 54px;
      display: flex;
      flex-direction: row;
      gap: 16px;
      z-index: 1;
    }

    .alert-summary__card {
      flex: 1 1 0;
      width: 120px;
      height: 54px;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 4px;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    .alert-summary__card:hover {
      filter: brightness(1.25);
      transform: translateY(-0.125rem);
    }

    .alert-summary__card--pending {
      background: linear-gradient(0deg, rgba(255, 0, 9, 0.3) 0%, rgba(255, 0, 9, 0) 100%);
    }

    .alert-summary__card--done {
      background: linear-gradient(0deg, rgba(38, 255, 143, 0.3) 0%, rgba(38, 255, 143, 0) 100%);
    }

    .alert-summary__num {
      font: var(--font-oppo-16-22);
      color: var(--icon-white);
      font-variant-numeric: tabular-nums;
      text-shadow: 0 0 0.625rem rgba(255, 255, 255, 0.28);
    }

    .alert-summary__label {
      font: var(--font-14);
      color: #FFFFFF;
      white-space: nowrap;
    }

    .alert-list {
      position: absolute;
      left: 16px;
      top: 108px;
      width: 269px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      z-index: 1;
    }

    .alert-item {
      width: 269px;
      height: 50px;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      padding: 4px 12px;
      border-style: solid;
      border-width: 0 0 0 1px;
      cursor: pointer;
    }

    .alert-item:hover {
      filter: brightness(1.2);
      border-left-width: 2px;
      padding-left: 11px;
    }

    .alert-item--danger {
      background: linear-gradient(270deg, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0.22) 100%);
      border-color: #FF0000;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .alert-item--ok {
      background: linear-gradient(270deg, rgba(0, 255, 60, 0) 0%, rgba(0, 255, 85, 0.22) 100%);
      border-color: #00EE4F;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .alert-item__row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 245px;
      height: 22px;
      flex-shrink: 1;
    }

    .alert-item__title {
      font: var(--font-14);
      color: var(--surface-text, #FFFFFF);
      white-space: nowrap;
    }

    .alert-item__status {
      font: var(--font-14);
      color: var(--chart-2); /* 图表配色/2 */
      white-space: nowrap;
    }

    .alert-item__time {
      font: var(--font-12);
      color: var(--text-muted);
      white-space: nowrap;
    }

    /* ========== Section 14: Left Log Panel ========== */
    .left-panel {
      left: 18px;
      top: 106px;
      width: 300px;
      height: 952px;
      z-index: 2;
    }

    .left-panel .panel {
      width: 300px;
      height: 952px;
    }

    .log-list {
      position: absolute;
      left: 0;
      top: 46px;
      width: 300px;
      height: 882px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      overflow: hidden;
    }

    .log-card {
      width: 300px;
      flex-shrink: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 12px 16px;
      border-style: solid;
      border-width: 0 0 0 2px;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .log-card:hover {
      filter: brightness(1.18);
      border-left-width: 3px;
      padding-left: 15px;
    }

    .log-card--info:hover {
      box-shadow: inset 0.1875rem 0 0.75rem rgba(0, 132, 255, 0.35);
    }

    .log-card--danger:hover {
      box-shadow: inset 0.1875rem 0 0.75rem rgba(255, 0, 0, 0.35);
    }

    .log-card--success:hover {
      box-shadow: inset 0.1875rem 0 0.75rem rgba(25, 202, 84, 0.35);
    }

    .log-card--info {
      background: var(--log-info-bg);
      border-color: #0084FF;
    }

    .log-card--danger {
      background: var(--log-danger-bg);
      border-color: #FF0000;
    }

    .log-card--success {
      background: var(--log-success-bg);
      border-color: #19CA54;
    }

    .log-card--danger .log-card__title {
      text-shadow: 0 0 0.5rem rgba(255, 56, 56, 0.35);
    }

    .log-card--success .log-card__title {
      text-shadow: 0 0 0.5rem rgba(25, 202, 84, 0.28);
    }

    .log-card__title {
      font: var(--font-14-medium);
      color: var(--surface-text, #FFFFFF);
      white-space: nowrap;
      letter-spacing: 0.02em;
    }

    .log-card__body {
      font: var(--font-14);
      color: var(--text-muted);
      width: 268px;
      flex-shrink: 1;
    }

    .log-card__time {
      font: var(--font-12);
      color: var(--text-muted);
      white-space: nowrap;
    }

    /* ========== 实时监控画面弹窗 ========== */
    .monitor-overlay {
      position: fixed;
      inset: 0;
      z-index: 1100;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.6); /* 05.蒙层/轻（60%） */
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      padding: 1.5rem;
    }

    .monitor-overlay.is-open {
      display: flex !important;
    }

    .monitor-dialog {
      position: relative;
      width: min(64rem, 100%); /* 1024px */
      max-height: min(40rem, calc(100vh - 3rem));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 11px;
      border: 1px solid #104C91; /* 04.线/通用组件/默认 */
      background: linear-gradient(180deg, rgba(5, 25, 48, 0.95) 0%, rgba(1, 6, 12, 0.95) 100%);
      box-shadow:
        0 0 0 1px rgba(27, 126, 242, 0.25),
        0 0.75rem 2.5rem rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(164, 203, 250, 0.15);
      color: var(--icon-white);
    }

    .monitor-dialog__close {
      position: absolute;
      top: 4px;
      right: 4px;
      z-index: 5;
      width: 40px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      cursor: pointer;
      padding: 0;
      line-height: 0;
      overflow: hidden;
    }

    .monitor-dialog__close-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 40px;
      height: 24px;
      line-height: 0;
      pointer-events: none;
    }

    .monitor-dialog__close-bg svg {
      width: 40px;
      height: 24px;
      display: block;
    }

    .monitor-dialog__close-icon {
      position: relative;
      z-index: 1;
      width: 12px;
      height: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 4px;
      pointer-events: none;
    }

    .monitor-dialog__close-icon svg {
      width: 12px;
      height: 12px;
      display: block;
    }

    .monitor-dialog__close:hover {
      filter: brightness(1.25);
    }

    .monitor-dialog__close:hover .monitor-dialog__close-icon svg path {
      stroke: var(--icon-white);
    }

    .monitor-dialog__close:active {
      filter: brightness(0.9);
      transform: scale(0.96);
    }

    .monitor-dialog__header {
      position: relative;
      flex-shrink: 0;
      height: 50px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 52px 0 16px;
      overflow: hidden;
      background: linear-gradient(270deg, rgba(13, 63, 121, 0) 0%, rgba(13, 63, 121, 0) 38%, rgba(22, 101, 194, 0.1) 100%);
      border-bottom: 1px solid rgba(27, 126, 242, 0.35);
    }

    .monitor-dialog__header-deco {
      position: absolute;
      left: 0;
      top: 0;
      width: 280px;
      height: 50px;
      background: url("../../assets/modal-header-deco.png") left top / 100% 100% no-repeat;
      pointer-events: none;
      opacity: 0.9;
    }

    .monitor-dialog__title {
      position: relative;
      z-index: 1;
      margin: 0;
      font: var(--font-16-medium);
      color: var(--icon-white);
      white-space: nowrap;
    }

    .monitor-dialog__live {
      position: relative;
      z-index: 1;
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 22px;
      padding: 0 8px;
      border-radius: 2px;
      background: rgba(234, 54, 54, 0.2);
      border: 1px solid rgba(234, 54, 54, 0.55);
      font: var(--font-12);
      letter-spacing: 0.06em;
      color: #ff6b6b;
    }

    .monitor-dialog__live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ea3636;
      box-shadow: 0 0 0.375rem rgba(234, 54, 54, 0.8);
      animation: monitor-live-pulse 1.2s ease-in-out infinite;
    }

    @keyframes monitor-live-pulse {
      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }
      50% {
        opacity: 0.45;
        transform: scale(0.85);
      }
    }

    .monitor-dialog__body {
      flex: 1 1 auto;
      min-height: 0;
      padding: 16px;
    }

    .monitor-dialog__stage {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      max-height: calc(100vh - 10rem);
      overflow: hidden;
      border-radius: 6px;
      border: 1px solid rgba(27, 126, 242, 0.45);
      background: #02080f;
      box-shadow: inset 0 0 0 1px rgba(4, 222, 255, 0.08);
    }

    .monitor-dialog__feed {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background: #02080f;
      filter: contrast(1.05) saturate(1.08);
    }

    .monitor-dialog__stage.is-paused .monitor-dialog__scan {
      animation-play-state: paused;
    }

    .monitor-dialog__hud {
      position: absolute;
      left: 12px;
      right: 12px;
      top: 12px;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      pointer-events: none;
    }

    .monitor-dialog__site,
    .monitor-dialog__clock {
      padding: 2px 8px;
      border-radius: 2px;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      font: var(--font-12);
      color: #f3f8fe;
      white-space: nowrap;
    }

    .monitor-dialog__scan {
      position: absolute;
      left: 0;
      right: 0;
      height: 28%;
      top: -30%;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(
        180deg,
        rgba(4, 222, 255, 0) 0%,
        rgba(4, 222, 255, 0.12) 50%,
        rgba(4, 222, 255, 0) 100%
      );
      animation: monitor-scan 3.6s linear infinite;
    }

    /* 底部视频播放控件 */
    .monitor-player {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 4;
      display: flex;
      align-items: center;
      gap: 10px;
      height: 48px;
      padding: 0 12px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 8, 18, 0.88) 40%, rgba(0, 8, 18, 0.96) 100%);
      color: #f3f8fe;
      pointer-events: auto;
    }

    .monitor-player__btn {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: inherit;
      cursor: pointer;
      padding: 0;
    }

    .monitor-player__btn:hover {
      background: rgba(27, 126, 242, 0.35);
      color: #ffffff;
    }

    .monitor-player__btn:focus-visible {
      outline: 2px solid var(--color-focus-ring, #04deff);
      outline-offset: 2px;
    }

    .monitor-player__time {
      flex-shrink: 0;
      min-width: 6.5rem;
      font: var(--font-12);
      color: rgba(243, 248, 254, 0.9);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .monitor-player__progress {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
    }

    .monitor-player__seek,
    .monitor-player__volume {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.22);
      outline: none;
      cursor: pointer;
    }

    .monitor-player__volume {
      width: 72px;
      flex-shrink: 0;
    }

    .monitor-player__seek::-webkit-slider-thumb,
    .monitor-player__volume::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #04deff;
      border: 2px solid #ffffff;
      box-shadow: 0 0 0.375rem rgba(4, 222, 255, 0.55);
      cursor: pointer;
    }

    .monitor-player__seek::-moz-range-thumb,
    .monitor-player__volume::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #04deff;
      border: 2px solid #ffffff;
      cursor: pointer;
    }

    .monitor-player__seek::-moz-range-track,
    .monitor-player__volume::-moz-range-track {
      height: 4px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.22);
    }

    @keyframes monitor-scan {
      0% {
        top: -30%;
      }
      100% {
        top: 110%;
      }
    }

    @media (max-width: 48rem) {
      .monitor-dialog {
        width: 100%;
      }

      .monitor-dialog__stage {
        aspect-ratio: 4 / 3;
      }

      .monitor-player__volume {
        display: none;
      }

      .monitor-player__time {
        min-width: 4.5rem;
      }
    }

    /* ========== 工序弹窗（MasterGo 233:00377 墙体砌筑） ========== */
    .process-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.6); /* 05.蒙层/轻（60%） */
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      padding: 1.5rem;
    }

    /* !important：压过 UA [hidden]{display:none!important} */
    .process-overlay.is-open {
      display: flex !important;
    }

    .process-dialog {
      position: relative;
      width: min(96rem, 100%); /* 1536px */
      max-height: min(53.6875rem, calc(100vh - 3rem)); /* 859px */
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 11px;
      border: 1px solid #104C91; /* 04.线/通用组件/默认 */
      background: linear-gradient(180deg, rgba(5, 25, 48, 0.9) 0%, rgba(1, 6, 12, 0.9) 100%);
      box-shadow:
        0 0 0 1px rgba(27, 126, 242, 0.25),
        0 0.75rem 2.5rem rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(164, 203, 250, 0.15);
      color: var(--icon-white);
    }

    /* 关闭按钮：与媒体卡一致（斜切底 rgba(0,0,0,0.6) + X 图标） */
    .process-dialog__close {
      position: absolute;
      top: 4px;
      right: 4px;
      z-index: 5;
      width: 40px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
      backdrop-filter: blur(8px); /* 背景模糊 */
      -webkit-backdrop-filter: blur(8px);
      cursor: pointer;
      padding: 0;
      line-height: 0;
      overflow: hidden;
    }

    .process-dialog__close-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 40px;
      height: 24px;
      line-height: 0;
      pointer-events: none;
    }

    .process-dialog__close-bg svg {
      width: 40px;
      height: 24px;
      display: block;
    }

    .process-dialog__close-icon {
      position: relative;
      z-index: 1;
      width: 12px;
      height: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 4px; /* 斜切后视觉中心偏右 */
      pointer-events: none;
    }

    .process-dialog__close-icon svg {
      width: 12px;
      height: 12px;
      display: block;
    }

    .process-dialog__close:hover {
      filter: brightness(1.25);
    }

    .process-dialog__close:hover .process-dialog__close-icon svg path {
      stroke: var(--icon-white);
    }

    .process-dialog__close:active {
      filter: brightness(0.9);
      transform: scale(0.96);
    }

    .process-dialog__header {
      position: relative;
      flex-shrink: 0;
      height: 50px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      overflow: hidden;
      background: linear-gradient(270deg, rgba(13, 63, 121, 0) 0%, rgba(13, 63, 121, 0) 38%, rgba(22, 101, 194, 0.1) 100%); /* paint_233:7127 */
      border-bottom: 1px solid rgba(27, 126, 242, 0.35);
    }

    .process-dialog__header-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    .process-dialog__header-bg svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .process-dialog__header-deco {
      position: absolute;
      left: 0;
      top: 0;
      width: 300px; /* 资源 600×100 @2x → 300×50 */
      height: 50px;
      pointer-events: none;
      z-index: 1;
      background: url("../../assets/modal-header-deco.png") left top / 100% 100% no-repeat;
      border-radius: 11px 0 0 0;
    }

    .process-dialog__header-deco::before {
      content: none;
    }

    .process-dialog__header-line {
      display: none;
    }

    .process-dialog__header-glow {
      display: none;
    }

    .process-dialog__title {
      position: relative;
      z-index: 3;
      font: 600 var(--font-size-16)/1.5 var(--font-family-base);
      color: var(--text-primary); /* 02.文本&图标/主要 */
      text-shadow: 0 0 10px #1B7EF2; /* 文字/默认 */
      white-space: nowrap;
    }

    .process-dialog__body {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: row;
      gap: 16px;
      padding: 24px;
      overflow: auto;
    }

    .process-dialog__main {
      width: 846px;
      max-width: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
      flex-shrink: 1;
    }

    .process-dialog__intro {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      min-height: 26px;
    }

    .process-dialog__intro-name {
      font: 500 1.125rem/1.444 var(--font-family-base);
      color: var(--chart-2); /* 图表配色/2 */
      white-space: nowrap;
    }

    .process-dialog__intro-desc {
      font: var(--font-12);
      color: rgba(255, 255, 255, 0.7);
      white-space: nowrap;
    }

    .process-card {
      border-radius: 12px;
      background: rgba(0, 48, 144, 0.3);
      border: none;
      box-shadow: none;
      padding: 16px 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .process-card__title {
      font: var(--font-16-medium);
      color: var(--icon-white);
    }

    .process-card__title--accent {
      font: 500 1.125rem/1.444 var(--font-family-base);
      color: var(--chart-2);
    }

    .process-card__fields {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 24px;
      width: 100%;
    }

    /* 墙体尺寸 / 工艺参数：三组一行，随卡片宽度均分 */
    .process-card__fields--triple {
      flex-wrap: nowrap;
    }

    .process-card__fields--triple .process-field {
      flex: 1 1 0;
      width: auto;
      min-width: 0;
    }

    /* 铺贴区域 / 地砖规格：两组一行均分 */
    .process-card__fields--dual {
      flex-wrap: nowrap;
    }

    .process-card__fields--dual .process-field {
      flex: 1 1 0;
      width: auto;
      min-width: 0;
    }

    .process-field {
      width: 250px;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .process-field__label {
      display: block;
      width: auto;
      min-width: 94px;
      height: 22px;
      font: var(--font-14); /* 中文/14px（常规体） */
      color: var(--text-secondary); /* 02.文本&图标/次要 #B2BECC */
      line-height: 22px;
      white-space: nowrap;
    }

    .process-field__control {
      width: 100%;
      height: 46px;
      border-radius: 8px;
      border: 1px solid #104C91; /* 04.线/通用组件/默认 */
      background: rgba(4, 19, 36, 0.7); /* 03.容器/通用组件/默认 */
      color: var(--text-primary);
      font: var(--font-14);
      padding: 5px 12px;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
    }

    .process-field__control::placeholder {
      color: #6C8097; /* 02.文本&图标/微弱&失效 */
      opacity: 1;
    }

    .process-field__control--placeholder {
      color: #6C8097;
    }

    .process-field__control--filled,
    .process-field__control[value],
    .process-field__control:not(:placeholder-shown) {
      color: var(--text-primary); /* 02.文本&图标/主要 #F3F8FE */
    }

    /* 选择 / 聚焦态：蓝色描边 1px（无外圈 shadow） */
    .process-field__control--filled,
    .process-field__control:focus,
    .process-field__control--select:focus,
    .process-field__control--select:not([data-empty="true"]) {
      border: 1px solid #1B7EF2; /* 主题蓝 */
      box-shadow: none;
      outline: none;
    }

    .process-field__control:focus {
      color: var(--text-primary);
    }

    .process-field__control--select {
      padding-right: 32px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%236C8097' d='M2.1 4.6L7 9.5l4.9-4.9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      color: #6C8097; /* 02.文本&图标/微弱&失效 */
    }

    .process-field__control--select:not([data-empty="true"]) {
      color: var(--text-primary);
    }

    .process-preview-rows {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .process-preview-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 16px;
      font: var(--font-14);
      color: rgba(255, 255, 255, 0.7);
      line-height: 22px;
    }

    .process-dialog__side {
      flex: 1;
      min-width: 0;
      min-height: 667px;
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(27, 126, 242, 0.3);
      box-shadow: inset 0 0 0 1px rgba(16, 76, 145, 0.4);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .process-dialog__side-head {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
    }

    .process-dialog__side-title {
      font: 500 1.125rem/1.444 var(--font-family-base);
      color: var(--chart-2);
    }

    .process-dialog__side-badge {
      font: var(--font-14);
      color: var(--icon-white);
    }

    .process-dialog__preview {
      flex: 1;
      min-height: 0;
      border-radius: 8px;
      overflow: hidden;
      background: #041324;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .process-dialog__preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .process-dialog__footer {
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 24px;
      padding: 24px;
      border-top: 1px solid rgba(0, 123, 255, 0.2); /* paint_233:03897 */
      border-radius: 0 0 11px 11px;
      background: linear-gradient(180deg, rgba(5, 25, 48, 0.35) 0%, rgba(1, 6, 12, 0.55) 100%);
    }

    .process-btn {
      width: 120px;
      height: 46px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 16px;
      cursor: pointer;
      font: var(--font-16);
      border: 1px solid transparent;
      transition: filter 0.15s ease, transform 0.15s ease;
    }

    .process-btn:hover {
      filter: brightness(1.12);
    }

    .process-btn:active {
      transform: translateY(1px);
    }

    .process-btn--secondary {
      background: rgba(4, 19, 36, 0.7);
      border-color: #104C91; /* 04.线/通用组件/默认 */
      color: var(--text-secondary);
      font: var(--font-16);
    }

    .process-btn--primary {
      background: linear-gradient(180deg, #1B7EF2 0%, #041324 100%); /* 03.容器/通用组件/主要 */
      border-color: rgba(255, 255, 255, 0.15); /* 04.线/分割线 */
      color: #FFFFFF;
      font: var(--font-16-medium);
    }

    @media (max-width: 75rem) {
      .process-dialog__body {
        flex-direction: column;
      }

      .process-dialog__main,
      .process-dialog__side {
        width: 100%;
        min-height: 0;
      }

      .process-dialog__intro-desc {
        white-space: normal;
      }
    }

    /* ========== 响应式：画布缩放 + 字号 clamp ========== */
    @media (max-width: 75rem) {
      :root {
        font-size: clamp(14px, 2.5vw, 16px);
      }

      .page {
        width: 100%;
        min-width: 0;
      }
    }

/* ========== Visual quality: atmosphere / material / light ========== */
.page-console .page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 46%, rgba(0, 4, 12, 0.28) 100%);
}

.page-console .page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.page-console .model-area__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 200, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 200, 255, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, #000 28%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, #000 28%, transparent 78%);
}

.page-console .model-area__stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 220, 255, 0) 0%,
    rgba(0, 220, 255, 0.07) 50%,
    rgba(0, 220, 255, 0) 100%
  );
  animation: console-model-scan 9s linear infinite;
}

.page-console .progress-row__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 48%,
    transparent 100%
  );
  transform: translateX(-120%);
  animation: console-bar-sheen 3.6s ease-in-out infinite;
}

.page-console .stat-card::after,
.page-console .alert-summary__card::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
}

.page-console .alert-summary__card {
  position: relative;
  overflow: hidden;
}

.page-console .project-switch__label {
  text-shadow: 0 0 0.5rem rgba(4, 222, 255, 0.18);
}

.page-console .user-meta__phone {
  letter-spacing: 0.02em;
}

.page-console .log-card--info {
  background: linear-gradient(270deg, rgba(27, 126, 242, 0) 0%, rgba(27, 126, 242, 0.34) 100%);
}

.page-console .log-card--danger {
  background: linear-gradient(270deg, rgba(242, 27, 27, 0) 0%, rgba(242, 27, 27, 0.34) 100%);
}

.page-console .log-card--success {
  background: linear-gradient(270deg, rgba(25, 202, 84, 0) 0%, rgba(25, 202, 84, 0.34) 100%);
}

.page-console .process-dialog,
.page-console .monitor-dialog {
  box-shadow:
    0 0 0 1px rgba(27, 126, 242, 0.28),
    0 1.25rem 3rem rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(164, 203, 250, 0.18);
}

@keyframes console-model-scan {
  0% {
    top: -24%;
  }
  100% {
    top: 108%;
  }
}

@keyframes console-bar-sheen {
  0%,
  28% {
    transform: translateX(-120%);
  }
  58%,
  100% {
    transform: translateX(120%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-console .model-area__stage::after,
  .page-console .progress-row__bar::after {
    animation: none;
  }

  .page-console .model-area__stage::after {
    top: 38%;
    opacity: 0.45;
  }

  .page-console .progress-row__bar::after {
    display: none;
  }
}

/* ========== Light theme overrides ========== */
html[data-theme="light"] .page-console .page,
html[data-theme="light"].page-console .page,
html[data-theme="light"] body.page-console .page {
  background: var(--bg-page);
}

html[data-theme="light"] .header {
  background-image: url("../../assets/header-bg-light.png");
}

.header__deco {
  display: none !important;
}

html[data-theme="light"] .header__title {
  color: #ffffff;
  animation: none;
  text-shadow: 0 1px 2px rgba(12, 48, 110, 0.22);
}

html[data-theme="light"] .page-console .page::before {
  background: radial-gradient(ellipse at center, transparent 58%, rgba(150, 170, 196, 0.06) 100%);
}

html[data-theme="light"] .page-console .page::after {
  opacity: 0.012;
  mix-blend-mode: multiply;
}

html[data-theme="light"] .project-switch__label {
  color: #2c333a;
  text-shadow: none;
}

html[data-theme="light"] .project-switch:hover {
  text-shadow: none;
  filter: none;
  color: #1677ff;
}

html[data-theme="light"] .project-back__icon svg path,
html[data-theme="light"] .user-avatar__icon svg path {
  fill: #ffffff;
}

html[data-theme="light"] .project-switch__icon svg path,
html[data-theme="light"] .user-meta__chevron svg path {
  fill: #8a93a0;
}

html[data-theme="light"] .op-tab,
html[data-theme="light"] .op-tab-ext {
  display: none;
}

html[data-theme="light"] .user-meta__phone {
  color: var(--nav-text);
}

html[data-theme="light"] .user-avatar {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 2px 8px rgba(22, 119, 255, 0.18);
}

html[data-theme="light"] .win-controls__bg svg path {
  fill: var(--win-controls-fill);
}

html[data-theme="light"] .win-btn--minus {
  background: #ffffff;
}

html[data-theme="light"] .win-btn--zoom-box {
  border-color: #ffffff;
}

html[data-theme="light"] .dropdown-panel {
  background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: 8px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--dropdown-shadow);
}

html[data-theme="light"] .dropdown-item {
  color: var(--text-primary);
  border-radius: 6px;
}

html[data-theme="light"] .btn-large,
html[data-theme="light"] .btn-small {
  background: var(--btn-action-bg);
  border-radius: var(--btn-action-radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 2px 8px rgba(22, 119, 255, 0.16);
}

html[data-theme="light"] .btn-large__label,
html[data-theme="light"] .btn-small__label {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: none;
  letter-spacing: 0.04em;
}

html[data-theme="light"] .btn-large:hover,
html[data-theme="light"] .btn-small:hover {
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 4px 12px rgba(22, 119, 255, 0.22);
}

html[data-theme="light"] .panel {
  border: 1px solid var(--panel-border);
  border-image: none;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-bg);
  box-shadow:
    0 8px 24px rgba(15, 40, 80, 0.06),
    0 1px 2px rgba(15, 40, 80, 0.04);
}

html[data-theme="light"] .left-panel .panel {
  background: #ffffff;
}

html[data-theme="light"] .panel__header {
  border-image: none;
  border-bottom: 1px solid rgba(22, 119, 255, 0.08);
  background: url("../../assets/panel-header-light.svg") left top / 100% 100% no-repeat;
  justify-content: center;
  align-items: flex-start;
  padding: 0.375rem 1rem 0.375rem 1.6875rem;
  box-shadow: none;
}

html[data-theme="light"] .panel__title {
  color: #ffffff;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px rgba(12, 48, 110, 0.2);
}

html[data-theme="light"] .panel__corner {
  display: none;
}

html[data-theme="light"] .robot-item {
  border-radius: 8px;
}

html[data-theme="light"] .robot-item__body {
  border-radius: 8px;
  background: #f5f8fc;
  box-shadow: inset 2px 0 0 #8eb8f0;
}

html[data-theme="light"] .robot-item:hover .robot-item__body {
  background: #eef4fc;
  box-shadow: inset 2px 0 0 #2f7efe;
}

html[data-theme="light"] .alert-item {
  background: #f7f9fc;
  border-radius: 8px;
}

html[data-theme="light"] .alert-item__status,
html[data-theme="light"] .progress-row__pct {
  color: var(--surface-text);
}

html[data-theme="light"] .progress-row__track {
  background: #eef2f7;
  box-shadow: none;
  border-radius: 99px;
}

html[data-theme="light"] .log-card {
  border-radius: 8px;
  border-width: 0 0 0 3px;
  box-shadow: none;
}

html[data-theme="light"] .log-card:hover {
  filter: none;
}

html[data-theme="light"] .log-card--info {
  background: var(--log-info-bg);
}

html[data-theme="light"] .log-card--danger {
  background: var(--log-danger-bg);
}

html[data-theme="light"] .log-card--success {
  background: var(--log-success-bg);
}

html[data-theme="light"] .log-card--danger .log-card__title,
html[data-theme="light"] .log-card--success .log-card__title {
  text-shadow: none;
}

html[data-theme="light"] .model-area {
  border-radius: 12px;
  border: 1px solid #e6ecf2;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 40, 80, 0.05);
}

html[data-theme="light"] .model-area__stage {
  border-radius: 8px;
  background: radial-gradient(ellipse 78% 58% at 50% 46%, #f7fafd 0%, #ffffff 74%);
  box-shadow: inset 0 0 0 1px #eef2f7;
}

html[data-theme="light"] .model-area__stage::before {
  background-image:
    linear-gradient(rgba(22, 119, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 119, 255, 0.045) 1px, transparent 1px);
}

html[data-theme="light"] .model-area__stage::after {
  background: linear-gradient(
    180deg,
    rgba(47, 126, 254, 0) 0%,
    rgba(47, 126, 254, 0.05) 50%,
    rgba(47, 126, 254, 0) 100%
  );
}

html[data-theme="light"] .model-area__label {
  color: #5b8fd9;
  text-shadow: none;
  opacity: 0.72;
}

html[data-theme="light"] .media-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px #e6ecf2,
    0 4px 14px rgba(15, 40, 80, 0.05);
}

html[data-theme="light"] .media-card::before {
  background: linear-gradient(
    180deg,
    rgba(15, 30, 50, 0.08) 0%,
    transparent 34%,
    transparent 62%,
    rgba(15, 30, 50, 0.16) 100%
  );
}

html[data-theme="light"] .media-card:hover {
  filter: none;
  box-shadow:
    inset 0 0 0 1px rgba(47, 126, 254, 0.28),
    0 8px 20px rgba(15, 40, 80, 0.08);
}

html[data-theme="light"] .media-card__badge-text {
  color: #ffffff;
}

html[data-theme="light"] .stat-card,
html[data-theme="light"] .alert-summary__card {
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

html[data-theme="light"] .stat-card--pending,
html[data-theme="light"] .alert-summary__card--pending {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), #e85a5a;
}

html[data-theme="light"] .stat-card--resolved,
html[data-theme="light"] .alert-summary__card--done {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), #2bb673;
}

html[data-theme="light"] .stat-card--abnormal {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), #4d94e8;
}

html[data-theme="light"] .stat-card--processing {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%), #f08a3a;
}

html[data-theme="light"] .monitor-dialog,
html[data-theme="light"] .process-dialog {
  background: #ffffff;
  border: 1px solid #e6ecf2;
  color: #2c333a;
  box-shadow:
    0 16px 40px rgba(15, 35, 70, 0.1),
    0 2px 8px rgba(15, 35, 70, 0.04);
}

html[data-theme="light"] .monitor-dialog__header,
html[data-theme="light"] .process-dialog__header {
  background: #f7f9fc;
  border-bottom: 1px solid #e6ecf2;
}

html[data-theme="light"] .monitor-dialog__title {
  color: #2c333a;
}

html[data-theme="light"] .monitor-dialog__stage {
  border-color: #e6ecf2;
  background: #f7f9fc;
  box-shadow: none;
}