:root {
      --bg-0: #04070f;
      --bg-1: #0a1326;
      --bg-2: #0f1f39;
      --layout-page-pad: clamp(16px, 1.05vw, 22px);
      --layout-shell-gap: clamp(14px, 0.95vw, 18px);
      --layout-section-gap: clamp(16px, 1vw, 20px);
      --layout-card-gap: clamp(12px, 0.85vw, 16px);
      --layout-inline-gap: clamp(10px, 0.75vw, 14px);
      --layout-card-pad: clamp(16px, 0.95vw, 20px);
      --layout-card-pad-lg: clamp(18px, 1.15vw, 24px);
      --layout-surface-radius: 20px;
      --layout-surface-radius-sm: 14px;
      --panel: rgba(8, 16, 30, 0.72);
      --panel-strong: rgba(7, 15, 28, 0.88);
      --line: rgba(126, 194, 255, 0.25);
      --line-strong: rgba(150, 213, 255, 0.38);
      --text: #e5f4ff;
      --muted: #87a5c7;
      --collect: #4f97ff;
      --update: #4f97ff;
      --manual: #4f97ff;
      --completion: #4f97ff;
      --danger: #7e95b3;
      --warn: #7a8faa;
      --ok: #8fa9c9;
      --lane-head-from: rgba(44, 70, 106, 0.9);
      --lane-head-to: rgba(56, 84, 123, 0.86);
      --btn-main-from: #355c88;
      --btn-main-to: #466d98;
      --btn-ghost-from: #3d5371;
      --btn-ghost-to: #4f6685;
      --btn-warn-from: #4a607e;
      --btn-warn-to: #5b7394;
      --btn-danger-from: #455a76;
      --btn-danger-to: #586f90;
      --shadow-lg: 0 24px 44px rgba(0, 0, 0, 0.45);
      --shadow-md: 0 14px 26px rgba(0, 0, 0, 0.32);
      --radius-lg: 20px;
      --radius-md: 14px;
      --radius-sm: 10px;
    }

    * { box-sizing: border-box; }

    html,
    body {
      height: 100%;
      min-height: 100%;
    }

    html.limited-lan-navigation .side-link[data-limited-lan-hidden] {
      display: none;
    }

    html.aftersales-dispatch-only .side-link[data-role-hidden-aftersales-dispatch],
    html.aftersales-dispatch-only .side-group-card[data-role-hidden-aftersales-dispatch] {
      display: none;
    }

    body {
      margin: 0;
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(circle at 8% -14%, rgba(67, 142, 255, 0.42), transparent 36%),
        radial-gradient(circle at 95% -20%, rgba(72, 122, 185, 0.2), transparent 40%),
        radial-gradient(circle at 50% 120%, rgba(35, 95, 166, 0.25), transparent 52%),
        linear-gradient(145deg, var(--bg-0) 0%, var(--bg-1) 48%, var(--bg-2) 100%);
      overflow: hidden;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    body::before {
      background:
        linear-gradient(120deg, transparent 0 46%, rgba(133, 205, 255, 0.08) 48%, transparent 50% 100%),
        linear-gradient(30deg, transparent 0 58%, rgba(38, 130, 225, 0.08) 60%, transparent 62% 100%);
      opacity: 0.36;
      filter: blur(22px);
    }

    body::after {
      background: repeating-linear-gradient(
        to bottom,
        rgba(136, 197, 255, 0.04) 0,
        rgba(136, 197, 255, 0.04) 1px,
        transparent 1px,
        transparent 7px
      );
      opacity: 0.25;
    }

    .app-shell {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 190px minmax(0, 1fr);
      width: 100%;
      height: 100dvh;
      min-height: 0;
      gap: var(--layout-shell-gap);
      padding: var(--layout-page-pad);
    }

    .sidebar {
      border-right: 1px solid rgba(143, 206, 255, 0.2);
      background: rgba(6, 15, 29, 0.86);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: var(--layout-card-pad) calc(var(--layout-card-pad) - 4px);
      display: flex;
      flex-direction: column;
      gap: var(--layout-inline-gap);
    }

    .side-logo {
      margin: 2px auto 10px;
      font-family: "Orbitron", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 34px;
      letter-spacing: 0.08em;
      color: #ebf7ff;
      text-align: center;
    }

    .side-link {
      display: block;
      text-decoration: none;
      color: #cae6ff;
      border: 1px solid rgba(149, 211, 255, 0.26);
      background: linear-gradient(130deg, rgba(20, 47, 82, 0.66), rgba(9, 26, 48, 0.64));
      padding: 10px 12px;
      border-radius: 12px;
      font-weight: 600;
      transition: transform 0.16s ease, filter 0.16s ease;
    }

    button.side-link {
      width: 100%;
      cursor: pointer;
    }

    .side-link:hover {
      transform: translateX(3px);
      filter: brightness(1.08);
    }

    .dashboard-overlay {
      position: absolute;
      inset: 0;
      z-index: 80;
      display: none;
      align-items: center;
      justify-content: center;
      padding: var(--layout-page-pad);
      background: rgba(3, 8, 16, 0.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .dashboard-overlay.show {
      display: flex;
    }

    .dashboard-overlay-card {
      width: min(1540px, 100%);
      height: min(900px, calc(100vh - 36px));
      border-radius: var(--layout-surface-radius);
      border: 1px solid rgba(142, 190, 236, 0.34);
      background: linear-gradient(165deg, rgba(11, 21, 39, 0.96), rgba(8, 16, 29, 0.96));
      box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5);
      overflow: hidden;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
    }

    .dashboard-overlay-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--layout-inline-gap);
      padding: calc(var(--layout-card-pad) - 4px) var(--layout-card-pad);
      border-bottom: 1px solid rgba(148, 193, 236, 0.2);
      color: #dcecff;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.02em;
      background: rgba(17, 31, 52, 0.7);
    }

    .dashboard-frame {
      width: 100%;
      height: 100%;
      border: 0;
      background: #061023;
    }

    .main-shell {
      min-width: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: var(--layout-section-gap);
    }

    header {
      position: sticky;
      top: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--layout-inline-gap);
      padding: var(--layout-card-pad-lg) calc(var(--layout-card-pad-lg) + 4px);
      border-bottom: 1px solid rgba(146, 214, 255, 0.18);
      background: rgba(7, 14, 27, 0.72);
      backdrop-filter: blur(18px) saturate(128%);
      -webkit-backdrop-filter: blur(18px) saturate(128%);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
      animation: rise-in 0.45s ease both;
    }

    h1 {
      margin: 0;
      font-family: "Orbitron", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      letter-spacing: 0.06em;
      font-size: 34px;
      line-height: 1;
      text-transform: uppercase;
    }

    .head-left {
      display: grid;
      gap: 4px;
    }

    .head-sub {
      color: #9fc2e7;
      font-size: 15px;
      letter-spacing: 0.02em;
    }

    .head-right {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      color: var(--muted);
    }

    .head-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid rgba(145, 205, 255, 0.34);
      background: rgba(18, 40, 71, 0.56);
      color: #cce9ff;
      text-decoration: none;
      font-weight: 700;
      letter-spacing: 0.01em;
      transition: transform 0.16s ease, filter 0.16s ease;
    }

    .head-link:hover {
      transform: translateY(-1px);
      filter: brightness(1.08);
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid rgba(151, 212, 255, 0.28);
      background: rgba(19, 38, 66, 0.55);
      color: #cbe6ff;
      font-weight: 600;
      transition: all 0.2s ease;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: #98b6d9;
      box-shadow: 0 0 0 0 rgba(152, 182, 217, 0.38);
    }

    .status-pill.is-running .dot {
      background: var(--ok);
      box-shadow: 0 0 0 0 rgba(47, 215, 164, 0.5);
      animation: pulse-dot 1.4s ease infinite;
    }

    .status-pill.is-error {
      border-color: rgba(156, 189, 224, 0.42);
      color: #dbeafe;
      background: rgba(39, 57, 81, 0.5);
    }

    .status-pill.is-error .dot {
      background: var(--danger);
      animation: pulse-dot 1.2s ease infinite;
      box-shadow: 0 0 0 0 rgba(126, 149, 179, 0.45);
    }

    .page {
      position: relative;
      z-index: 1;
      height: 100%;
      min-height: 0;
      padding: var(--layout-page-pad);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: var(--layout-section-gap);
      overflow: hidden;
    }

    .panel {
      border-radius: var(--layout-surface-radius);
      border: 1px solid var(--line);
      background: linear-gradient(165deg, rgba(10, 20, 38, 0.88), var(--panel));
      backdrop-filter: blur(16px) saturate(120%);
      -webkit-backdrop-filter: blur(16px) saturate(120%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(163, 220, 255, 0.07),
        var(--shadow-lg);
    }

    .status-strip {
      padding: var(--layout-card-pad);
      animation: none !important;
    }

    .status-strip.sync-card-animated {
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 1px 0 rgba(196, 232, 255, 0.16),
        inset 0 0 0 1px rgba(67, 145, 210, 0.12),
        0 10px 24px rgba(1, 12, 32, 0.42),
        0 0 18px rgba(44, 152, 255, 0.16);
    }

    .status-strip.sync-card-animated::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(
          90deg,
          rgba(104, 180, 245, 0.06) 0 1px,
          transparent 1px 26px
        );
      opacity: 0.25;
      pointer-events: none;
    }

    .status-strip.sync-card-animated::after {
      content: "";
      position: absolute;
      inset: -40% -30%;
      background: linear-gradient(105deg, transparent 40%, rgba(138, 220, 255, 0.18) 50%, transparent 60%);
      animation: tech-sweep 5.2s linear infinite;
      pointer-events: none;
    }

    .status-strip-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "title actions"
        "error error";
      align-items: center;
      padding-top: 4px;
      gap: var(--layout-inline-gap) var(--layout-card-gap);
      margin-bottom: var(--layout-card-gap);
    }

    .status-strip-title-wrap {
      position: relative;
      grid-area: title;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      min-width: 0;
      padding-left: 12px;
      padding-right: var(--layout-card-gap);
    }

    .status-strip-actions {
      grid-area: actions;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      transform: translateY(4px);
      gap: var(--layout-inline-gap);
      min-width: 0;
    }

    .overview-refresh-metric {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 var(--layout-card-pad);
      border-radius: 999px;
      border: 1px solid rgba(166, 205, 247, 0.14);
      background: linear-gradient(145deg, rgba(18, 37, 64, 0.74), rgba(12, 25, 44, 0.78));
      color: rgba(214, 232, 250, 0.84);
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }

    .status-strip-scope {
      position: static;
      font-size: 13px;
      font-weight: 600;
      color: #8fa7c7;
      white-space: normal;
      margin-left: var(--layout-inline-gap);
    }

    .status-strip-title {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
      font-size: 27px;
      letter-spacing: 0.05em;
      display: inline-flex;
      align-items: center;
      transform: translateY(0);
    }

    .status-error {
      grid-area: error;
      justify-self: end;
      text-align: right;
    }

    .overview-refresh-btn {
      min-width: 76px;
      height: 34px;
      padding: 0 14px;
      border-radius: 999px !important;
      border: 1px solid rgba(173, 213, 255, 0.22);
      background: linear-gradient(145deg, rgba(38, 80, 134, 0.72), rgba(24, 53, 93, 0.76));
      color: #eaf5ff;
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(4, 12, 26, 0.18);
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    }

    .overview-refresh-btn:hover:not(:disabled) {
      transform: translateY(-1px);
      border-color: rgba(205, 229, 255, 0.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 12px 26px rgba(7, 19, 38, 0.24);
    }

    .overview-refresh-btn:disabled {
      cursor: wait;
      opacity: 0.74;
      transform: none;
    }

    .status-strip-subtitle {
      position: static;
      white-space: nowrap;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: 0.02em;
      transform: translateY(-1px);
    }

    .status-cards {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--layout-card-gap);
    }

    .status-card {
      position: relative;
      overflow: hidden;
      border-radius: var(--layout-surface-radius-sm);
      padding: var(--layout-card-pad);
      border: 1px solid rgba(145, 206, 255, 0.2);
      background: linear-gradient(145deg, rgba(15, 32, 58, 0.82), rgba(9, 20, 36, 0.76));
      box-shadow: var(--shadow-md);
      transition: transform 0.25s ease, border-color 0.25s ease;
      text-align: center;
    }

    .status-card::before {
      content: "";
      position: absolute;
      inset: -100% auto auto -38%;
      width: 56%;
      height: 320%;
      transform: rotate(15deg);
      background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12), transparent);
      transition: transform 0.6s ease;
      pointer-events: none;
      opacity: 0.55;
    }

    .status-card:hover::before {
      transform: rotate(15deg) translateX(145%);
    }

    .status-card.is-pulse {
      border-color: var(--line-strong);
      transform: translateY(-1px);
    }

    .status-card-title {
      font-size: 19px;
      color: #94bce2;
      font-weight: 600;
      margin-bottom: 8px;
      letter-spacing: 0.02em;
    }

    .status-card-value {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
      font-size: 38px;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: #e6f5ff;
      line-height: 1;
      text-shadow: 0 4px 16px rgba(55, 137, 239, 0.22);
      display: inline-flex;
      align-items: flex-end;
      justify-content: center;
      gap: 8px;
    }

    .status-card-value .count-num {
      font-size: 1em;
      line-height: 0.95;
      font-weight: 800;
    }

    .status-card-value .count-unit {
      font-size: 0.52em;
      font-weight: 600;
      letter-spacing: 0.01em;
      opacity: 0.95;
      transform: translateY(-2px);
    }

    .status-card-value.meta {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
      font-size: 17px;
      color: #b8d6f3;
      font-weight: 500;
      line-height: 1.45;
      letter-spacing: 0;
      text-shadow: none;
      display: block;
      text-align: center;
    }

    .status-card-updated-at {
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.2;
      color: #7fa2c5;
      letter-spacing: 0.01em;
    }

    .status-error {
      font-size: 15px;
      color: #d6e6f8;
      background: rgba(35, 53, 78, 0.46);
      border: 1px solid rgba(138, 170, 203, 0.35);
      border-radius: 999px;
      min-height: 0;
      display: none;
      padding: 6px 14px;
      width: auto;
      max-width: min(100%, 72ch);
      margin-left: auto;
    }

    .status-error:not(:empty) {
      display: inline-flex;
      align-items: center;
    }

    @media (max-width: 1120px) {
      .status-strip-head {
        grid-template-columns: 1fr;
        grid-template-areas:
          "title"
          "actions"
          "error";
      }

      .status-strip-title-wrap {
        justify-content: center;
        padding-left: 0;
        text-align: center;
        padding-right: 0;
      }

      .status-strip-actions {
        justify-content: flex-start;
      }

      .status-strip-scope {
        margin-left: 8px;
      }

      .status-error {
        justify-self: start;
        text-align: left;
      }
    }

    .workspace {
      min-height: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: var(--layout-section-gap);
      overflow: hidden;
      border-radius: var(--layout-surface-radius);
    }

    .layout {
      min-height: 0;
      height: 100%;
      overflow: hidden;
      border-radius: var(--layout-surface-radius);
      display: grid;
      grid-template-columns: repeat(3, minmax(300px, 1fr));
      gap: var(--layout-card-gap);
      align-items: start;
    }

    .lane {
      position: relative;
      overflow: hidden;
      border-radius: var(--layout-surface-radius);
      border: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: var(--lane-card-height, 500px);
      background: linear-gradient(175deg, rgba(12, 24, 44, 0.88), var(--panel-strong));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        var(--shadow-md);
      animation: rise-in 0.5s ease both;
    }

    .lane:nth-child(2) { animation-delay: 0.04s; }
    .lane:nth-child(3) { animation-delay: 0.08s; }
    .lane:nth-child(4) { animation-delay: 0.12s; }

    .lane-head {
      padding: calc(var(--layout-card-pad) - 4px) var(--layout-card-pad);
      color: #fff;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      column-gap: var(--layout-card-gap);
      font-weight: 700;
      min-height: 60px;
      border-bottom: 1px solid rgba(173, 221, 255, 0.14);
    }

    .collect-head { background: linear-gradient(130deg, var(--lane-head-from), var(--lane-head-to)); }
    .update-head { background: linear-gradient(130deg, var(--lane-head-from), var(--lane-head-to)); }
    .manual-head { background: linear-gradient(130deg, var(--lane-head-from), var(--lane-head-to)); }
    .completion-head { background: linear-gradient(130deg, var(--lane-head-from), var(--lane-head-to)); }
    .collect-head,
    .update-head,
    .completion-head {
      grid-template-columns: minmax(0, 1fr) auto;
    }
    .manual-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--layout-card-gap);
    }

    .lane-head-title {
      justify-self: start;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
      font-size: 28px;
      letter-spacing: 0.04em;
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      white-space: nowrap;
    }

    .lane-head-mid {
      justify-self: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 600;
      white-space: nowrap;
      background: rgba(12, 28, 49, 0.28);
      border: 1px solid rgba(180, 218, 255, 0.24);
      border-radius: 999px;
      padding: 4px 12px;
      min-height: 30px;
    }

    .lane-status {
      display: grid;
      gap: 8px;
      margin: 6px auto 8px;
      padding: 6px 0 8px;
      width: 100%;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
      justify-items: center;
      text-align: center;
      transform: translateY(0);
    }

    .lane-status-row {
      display: grid;
      grid-template-columns: auto auto;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-width: 0;
      width: 100%;
      padding: 0;
      line-height: 1.5;
    }

    .lane-status-label {
      color: var(--muted);
      font-size: 13px;
      text-align: center;
      min-width: 72px;
    }

    .lane-status-value {
      color: #e7f3ff;
      font-size: 12px;
      text-align: center;
      min-width: 0;
      justify-self: center;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lane-summary-text {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0 8px;
      max-width: 100%;
      min-width: 0;
      white-space: normal;
    }

    .lane-summary-part {
      white-space: nowrap;
    }

    .lane-summary-part.is-line-start .lane-summary-separator {
      display: none;
    }

    .collect-head .lane-head-mid,
    .update-head .lane-head-mid {
      justify-self: end;
      margin-left: auto;
      text-align: right;
    }

    .manual-head .lane-head-mid {
      justify-self: end;
      margin-left: auto;
      text-align: right;
    }

    .completion-head .lane-head-mid {
      justify-self: end;
      margin-left: auto;
      text-align: right;
    }

    .tag {
      justify-self: end;
      font-size: 15px;
      background: rgba(11, 24, 43, 0.26);
      border: 1px solid rgba(177, 214, 248, 0.28);
      border-radius: 999px;
      padding: 4px 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      min-width: 68px;
      transition: all 0.2s ease;
    }

    .lane-body {
      min-height: 0;
      height: 100%;
      padding: 12px;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 10px;
      background: linear-gradient(180deg, rgba(9, 19, 34, 0.74), rgba(7, 14, 28, 0.78));
    }

    .lane-btns {
      margin: 0;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    .lane.manual-lane .lane-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      width: 100%;
    }

    .lane.manual-lane .lane-btns button {
      width: auto;
      min-width: max-content;
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
      padding-left: 14px;
      padding-right: 14px;
    }

    .lane-placeholder {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      border: 1px dashed rgba(174, 211, 249, 0.24);
      border-radius: 12px;
      color: var(--muted);
      background: rgba(18, 33, 55, 0.34);
      font-size: 15px;
      font-weight: 600;
    }

    button {
      border: 1px solid rgba(186, 225, 255, 0.33);
      border-radius: 12px;
      padding: 0 17px;
      height: 38px;
      color: #f6fbff;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.02em;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 16px rgba(4, 12, 25, 0.4);
    }

    button:hover {
      transform: none;
      filter: brightness(1.08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 18px rgba(3, 11, 24, 0.46);
    }

    button:active {
      transform: translateY(1px);
      filter: brightness(0.95);
    }

    button.primary { background: linear-gradient(135deg, var(--btn-main-from), var(--btn-main-to)); }
    button.ghost { background: linear-gradient(135deg, var(--btn-ghost-from), var(--btn-ghost-to)); }
    button.warn { background: linear-gradient(135deg, var(--btn-warn-from), var(--btn-warn-to)); }
    button.danger { background: linear-gradient(135deg, var(--btn-danger-from), var(--btn-danger-to)); }
    button.collect { background: linear-gradient(135deg, var(--btn-main-from), var(--btn-main-to)); }
    button.update { background: linear-gradient(135deg, var(--btn-main-from), var(--btn-main-to)); }
    button.manual { background: linear-gradient(135deg, var(--btn-main-from), var(--btn-main-to)); }

    .lane-log {
      margin: 0;
      padding: 14px 16px;
      min-height: 0;
      border-radius: 14px;
      border: 1px solid rgba(128, 195, 255, 0.19);
      background:
        linear-gradient(180deg, rgba(5, 15, 30, 0.95), rgba(5, 18, 36, 0.92));
      color: #d3ebff;
      font-family: "JetBrains Mono", "Consolas", monospace;
      font-size: 16px;
      line-height: 1.65;
      font-weight: 500;
      overflow-y: auto;
      overflow-x: hidden;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      scrollbar-gutter: stable both-edges;
      scrollbar-width: thin;
      scrollbar-color: #4a6f99 transparent;
    }

    .lane-log::-webkit-scrollbar { width: 12px; }
    .lane-log::-webkit-scrollbar-track { background: transparent; border-radius: 999px; }
    .lane-log::-webkit-scrollbar-thumb {
      background: #4a6f99;
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    .lane-log::-webkit-scrollbar-thumb:hover { background: #5d88bb; }

    .bill-scrollbar {
      scrollbar-width: thin;
      scrollbar-color: #4a6f99 transparent;
    }

    .bill-scrollbar::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }

    .bill-scrollbar::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 999px;
    }

    .bill-scrollbar::-webkit-scrollbar-thumb {
      background: #4a6f99;
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }

    .bill-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #5d88bb;
    }

    .log-line {
      display: block;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .running-indicator {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: 8px;
      padding: 1px 8px;
      border-radius: 999px;
      font-size: 13px;
      line-height: 1.2;
      color: #c5dcf3;
      border: 1px solid rgba(143, 176, 210, 0.35);
      background: rgba(34, 54, 79, 0.3);
      vertical-align: middle;
    }

    .running-indicator-spinner {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid rgba(164, 192, 221, 0.3);
      border-top-color: #c5dcf3;
      animation: spinner-rotate 0.9s linear infinite;
      flex: 0 0 auto;
    }

    .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
    .hint { font-size: 15px; color: var(--muted); }
    .op-result { color: #9accff; }
    .collapsed { display: none; }
    #configBody {
      display: block;
      overflow: hidden;
      max-height: none;
      opacity: 1;
      transform: translateY(0) scaleY(1);
      transform-origin: top center;
      transition:
        max-height 0.44s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease,
        transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: max-height, opacity, transform;
    }

    #configBody.is-collapsed {
      max-height: 0 !important;
      opacity: 0;
      transform: translateY(-6px) scaleY(0.985);
      pointer-events: none;
    }

    #configPanel {
      padding: 12px 14px 14px;
      animation: none !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.28);
    }

    #opResult {
      transition: color 0.2s ease;
    }

    #opResult.is-error {
      color: #c5dbf2;
    }

    input, select, textarea {
      border: 1px solid rgba(126, 190, 255, 0.35);
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 15px;
      color: #d6e8ff;
      background: rgba(5, 16, 31, 0.88);
      backdrop-filter: blur(8px) saturate(115%);
      -webkit-backdrop-filter: blur(8px) saturate(115%);
    }

    textarea {
      width: 100%;
      min-height: 190px;
      resize: none;
      font-family: "JetBrains Mono", "Consolas", monospace;
      font-size: 15px;
      line-height: 1.45;
      scrollbar-width: thin;
      scrollbar-color: #4a6f99 transparent;
    }

    #configPanel textarea::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    #configPanel textarea::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 999px;
    }

    #configPanel textarea::-webkit-scrollbar-thumb {
      background: #4a6f99;
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }

    #configPanel textarea::-webkit-scrollbar-thumb:hover {
      background: #5d88bb;
    }

    #configPanel textarea::-webkit-scrollbar-corner {
      background: transparent;
    }

    .config-sections {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 10px;
    }

    .config-section {
      display: grid;
      gap: 8px;
      padding: 12px;
      border: 1px solid rgba(123, 191, 255, 0.2);
      border-radius: 14px;
      background: linear-gradient(160deg, rgba(9, 23, 42, 0.7), rgba(7, 16, 31, 0.76));
    }

    .config-section-title {
      font-size: 15px;
      font-weight: 700;
      color: #9bc2e7;
      letter-spacing: 0.01em;
    }

    table { width: 100%; border-collapse: collapse; font-size: 15px; color: #cde6ff; }
    th, td { border-bottom: 1px solid rgba(126, 190, 255, 0.18); padding: 8px; text-align: left; }
    .ok { color: var(--ok); }
    .fail { color: #9cb9d9; }

    @keyframes rise-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes pulse-dot {
      0% { box-shadow: 0 0 0 0 currentColor; }
      70% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); }
      100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    }

    @keyframes spinner-rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @media (max-width: 1320px) {
      .lane-head-title { font-size: 24px; }
      .status-card-value { font-size: 30px; }
      .status-card-title { font-size: 17px; }
    }

    @media (max-width: 1120px) {
      body { overflow: auto; }
      .app-shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100dvh;
      }
      .sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(143, 206, 255, 0.2);
        flex-direction: row;
        flex-wrap: wrap;
      }
      .side-logo {
        width: 100%;
        margin-bottom: 0;
      }
      .page {
        height: auto;
        overflow: visible;
        grid-template-rows: auto;
        min-height: calc(100vh - 94px);
      }
      .workspace {
        overflow: visible;
        grid-template-rows: auto auto;
      }
      .layout { grid-template-columns: 1fr; height: auto; overflow: visible; }
      .lane { height: auto; min-height: 360px; }
      .lane-body { grid-template-rows: auto minmax(180px, 1fr); }
      .status-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .config-sections { grid-template-columns: 1fr; }
      h1 { font-size: 24px; }
      .head-sub { font-size: 14px; }
    }
`r`n
    :root {
      --x-bg: #05070b;
      --x-bg-2: #0a111b;
      --x-panel: rgba(10, 16, 25, 0.82);
      --x-panel-strong: rgba(9, 14, 23, 0.92);
      --x-border: rgba(162, 198, 238, 0.2);
      --x-border-strong: rgba(189, 220, 255, 0.34);
      --x-text: #edf4ff;
      --x-muted: #9fb2ca;
      --x-accent: #6ab3ff;
      --x-accent-2: #8de7ff;
      --x-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
      --r-xl: 28px;
      --r-lg: 22px;
      --r-md: 16px;
      --r-sm: 14px;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(70% 60% at 8% -12%, rgba(102, 171, 255, 0.24), transparent 65%),
        radial-gradient(60% 70% at 92% -18%, rgba(118, 239, 255, 0.14), transparent 70%),
        linear-gradient(160deg, var(--x-bg) 0%, var(--x-bg-2) 45%, #111b2a 100%);
    }

    body::before {
      background:
        linear-gradient(125deg, transparent 0 42%, rgba(130, 196, 255, 0.09) 44%, transparent 46% 100%),
        linear-gradient(23deg, transparent 0 56%, rgba(110, 165, 232, 0.1) 58%, transparent 60% 100%);
      filter: blur(42px);
      opacity: .42;
    }

    body::after {
      background-image:
        linear-gradient(rgba(148, 188, 235, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 188, 235, 0.05) 1px, transparent 1px);
      background-size: 44px 44px;
      opacity: .08;
    }

    .app-shell {
      grid-template-columns: 240px minmax(0, 1fr);
    }

    .sidebar {
      padding: 24px 14px;
      background: linear-gradient(180deg, rgba(8, 14, 24, 0.95), rgba(7, 12, 20, 0.84));
      border-right: 1px solid var(--x-border);
      position: relative;
    }

    .sidebar::after {
      content: "";
      position: absolute;
      right: -1px;
      top: 26px;
      width: 1px;
      height: 120px;
      background: linear-gradient(180deg, rgba(137, 196, 255, .74), rgba(137, 196, 255, 0));
    }

    .side-logo {
      font-family: "Orbitron", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 32px;
      letter-spacing: .16em;
      margin-bottom: 20px;
      text-shadow: 0 0 24px rgba(148, 205, 255, 0.38);
    }

    .side-link {
      border-radius: 14px;
      border: 1px solid var(--x-border);
      background: linear-gradient(140deg, rgba(26, 42, 63, 0.74), rgba(9, 18, 30, 0.64));
      font-weight: 700;
      letter-spacing: .01em;
      box-shadow: inset 0 1px 0 rgba(238, 247, 255, .07);
      margin-bottom: 8px;
    }

    .side-link:hover {
      transform: translateX(6px);
      border-color: var(--x-border-strong);
    }

    header {
      padding: 18px 28px;
      border-bottom: 1px solid var(--x-border);
      background: linear-gradient(180deg, rgba(10, 15, 23, 0.82), rgba(10, 15, 23, 0.6));
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    }

    h1 {
      font-family: "Orbitron", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 36px;
      letter-spacing: .12em;
    }

    .head-sub {
      color: var(--x-muted);
      letter-spacing: .04em;
    }

    #serverTime {
      font-family: "JetBrains Mono", monospace;
      color: #c9def4;
    }

    .page {
      padding: 18px 24px 22px;
      gap: 18px;
      background:
        radial-gradient(120% 80% at 50% 0%, rgba(97, 166, 238, 0.08), transparent 55%),
        linear-gradient(180deg, rgba(9, 14, 22, 0.84), rgba(8, 13, 21, 0.9));
      border-radius: 14px;
    }

    .main-shell {
      background: linear-gradient(180deg, rgba(7, 11, 18, 0.86), rgba(6, 10, 17, 0.92));
    }

    .workspace {
      background: rgba(7, 12, 20, 0.46);
      border: 1px solid rgba(152, 190, 230, 0.12);
      border-radius: 16px;
      padding: 10px;
      overflow: hidden;
    }

    .panel,
    .lane,
    .status-card,
    .dashboard-overlay-card {
      background: linear-gradient(165deg, rgba(12, 19, 29, 0.88), rgba(9, 15, 24, 0.86));
      border: 1px solid var(--x-border);
      box-shadow: var(--x-shadow);
    }

    .status-strip {
      border-radius: 20px;
      padding: 16px;
    }

    .status-strip-title {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
      font-size: 24px;
      letter-spacing: .06em;
    }

    .status-strip-subtitle {
      color: var(--x-muted);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    }

    .status-cards {
      gap: 14px;
    }

    .status-card {
      border-radius: 16px;
      position: relative;
      overflow: hidden;
    }

    .status-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(145deg, rgba(125, 182, 255, 0.14), transparent 52%);
      pointer-events: none;
    }

    .status-card-title {
      color: #c1d7f3;
      font-weight: 700;
      letter-spacing: .03em;
    }

    .status-card-value {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
      font-weight: 700;
      color: var(--x-text);
      text-shadow: 0 0 18px rgba(110, 173, 241, .22);
    }

    .layout {
      gap: 16px;
    }

    .lane {
      border-radius: 18px;
    }

    .lane-head {
      background: linear-gradient(160deg, rgba(37, 58, 86, .82), rgba(22, 37, 56, .86));
      border-bottom: 1px solid var(--x-border);
      padding: 14px 14px 12px;
    }

    .lane-head-title {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
      font-size: 26px;
      letter-spacing: .08em;
    }

    .lane-head-mid,
    .status-card-updated-at,
    .hint {
      color: var(--x-muted);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    }

    .lane-log {
      border: 1px solid rgba(159, 194, 232, 0.23);
      background: rgba(7, 13, 22, 0.86);
      border-radius: 12px;
      box-shadow: inset 0 0 24px rgba(46, 97, 162, 0.14);
    }

    button {
      border-radius: 12px;
      border: 1px solid rgba(169, 200, 236, 0.28);
      font-weight: 700;
      letter-spacing: .01em;
      transition: transform .18s ease, border-color .18s ease, filter .18s ease;
    }

    button:hover {
      transform: none;
      border-color: rgba(193, 222, 255, 0.42);
      filter: brightness(1.08);
    }

    textarea {
      border-radius: 12px;
      border: 1px solid rgba(157, 190, 228, 0.28);
      background: rgba(8, 14, 23, 0.9);
      color: #dcecff;
      font-family: "JetBrains Mono", monospace;
    }

    .dashboard-overlay-card {
      border-radius: 18px;
      border: 1px solid var(--x-border-strong);
    }

    .dashboard-overlay-head {
      background: linear-gradient(180deg, rgba(23, 37, 56, 0.86), rgba(16, 27, 42, 0.78));
      font-family: "Orbitron", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      letter-spacing: .08em;
    }

    /* Unified perfect R-corner system */
    .panel,
    .lane,
    .status-strip,
    .status-card,
    .dashboard-overlay-card,
    #configPanel,
    .workspace,
    .page {
      border-radius: var(--r-xl) !important;
    }

    .lane-log,
    textarea,
    input,
    select,
    .side-link,
    .tag,
    .dashboard-overlay-head {
      border-radius: var(--r-md) !important;
    }

    .status-pill,
    .running-indicator,
    button {
      border-radius: 999px !important;
    }

    /* Force a single font family in the screenshot area */
    #overviewPanel,
    #overviewPanel *,
    #consolePanel .lane-head,
    #consolePanel .lane-head * {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif !important;
    }

    @media (max-width: 1120px) {
      .app-shell { grid-template-columns: 1fr; }
      .side-logo { font-size: 26px; letter-spacing: .1em; }
      h1 { font-size: 28px; }
      .status-strip-title { font-size: 20px; }
      .lane-head-title { font-size: 21px; }
    }
    /* Pro theme override: iOS dark glass unified */
:root {
      --bg-0: #030914;
      --bg-1: #0a1b34;
      --bg-2: #123058;
      --panel: rgba(16, 28, 47, 0.58);
      --panel-strong: rgba(14, 24, 42, 0.74);
      --line: rgba(167, 197, 236, 0.18);
      --line-strong: rgba(189, 217, 252, 0.34);
      --text: #edf4ff;
      --muted: #9cafcc;
      --collect: #63a4ff;
      --update: #63a4ff;
      --manual: #63a4ff;
      --completion: #63a4ff;
      --danger: #7e97be;
      --warn: #7f97be;
      --ok: #67b8ff;
      --lane-head-from: rgba(36, 57, 88, 0.82);
      --lane-head-to: rgba(30, 50, 80, 0.76);
      --btn-main-from: #5a9dff;
      --btn-main-to: #4d89e8;
      --btn-ghost-from: #5f779d;
      --btn-ghost-to: #526a91;
      --btn-warn-from: #5f779d;
      --btn-warn-to: #526a91;
      --btn-danger-from: #5f779d;
      --btn-danger-to: #526a91;
      --radius-lg: 20px;
      --radius-md: 14px;
      --radius-sm: 14px;
      --shadow-lg: 0 24px 56px rgba(2, 8, 20, 0.52);
      --shadow-md: 0 10px 30px rgba(2, 10, 22, 0.45);
    }

    @keyframes ios-rise {
      from { opacity: 0; transform: translateY(8px) scale(0.995); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes ios-breathe {
      0%, 100% { box-shadow: 0 0 0 0 rgba(99, 164, 255, 0.18); }
      50% { box-shadow: 0 0 0 10px rgba(99, 164, 255, 0); }
    }

    @keyframes ios-shine {
      from { transform: translateX(-140%) skewX(-20deg); }
      to { transform: translateX(220%) skewX(-20deg); }
    }

    body {
      font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(84% 72% at 12% -18%, rgba(64, 142, 255, 0.34), transparent 62%),
        radial-gradient(62% 58% at 92% -14%, rgba(101, 168, 255, 0.2), transparent 64%),
        radial-gradient(72% 66% at 50% 118%, rgba(27, 94, 190, 0.22), transparent 68%),
        linear-gradient(154deg, #020814 0%, #07162d 38%, #0e2850 72%, #113766 100%);
    }

    .main-shell {
      background:
        linear-gradient(180deg, rgba(6, 18, 38, 0.84), rgba(6, 16, 34, 0.9)),
        radial-gradient(140% 90% at 50% -20%, rgba(82, 152, 246, 0.14), transparent 60%);
    }

    .page {
      background:
        radial-gradient(130% 82% at 52% -8%, rgba(86, 154, 246, 0.12), transparent 56%),
        linear-gradient(182deg, rgba(7, 18, 36, 0.78), rgba(7, 16, 32, 0.9));
    }

    .app-shell { gap: 12px; padding: 12px; grid-template-columns: 176px minmax(0, 1fr); }

    .sidebar, header, .panel, .lane, #configPanel, .dashboard-overlay-card,
    .dashboard-overlay-head, .status-card, .lane-log, .lane-head, .lane-head-mid,
    .tag, .side-link, .head-link, .status-pill, button, input, select, textarea, .running-indicator {
      border-radius: var(--radius-md) !important;
    }

    .sidebar, header, .panel, .lane, #configPanel, .dashboard-overlay-card {
      border: 1px solid var(--line) !important;
      background: linear-gradient(166deg, rgba(18, 31, 52, 0.66), rgba(13, 23, 40, 0.72)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(166,204,255,0.06), var(--shadow-md) !important;
      backdrop-filter: blur(20px) saturate(132%);
      -webkit-backdrop-filter: blur(20px) saturate(132%);
      animation: none !important;
    }

    .lane-head-title, .status-strip-title {
      font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif !important;
      font-weight: 700;
      letter-spacing: .01em;
      text-transform: none;
      color: #f1f7ff;
      text-shadow: 0 8px 22px rgba(99, 164, 255, 0.18);
    }

    .side-logo, h1 {
      font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
      font-weight: 700;
      letter-spacing: .01em;
      text-transform: none;
      color: #f1f7ff;
      text-shadow: 0 8px 22px rgba(99, 164, 255, 0.18);
    }

    .side-link {
      border: 1px solid rgba(168, 200, 242, 0.2);
      background: linear-gradient(150deg, rgba(55, 81, 118, 0.62), rgba(37, 58, 90, 0.56));
      color: #dae9ff;
      font-family: "Oxanium", "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif !important;
      text-align: center;
      transition: all .2s ease;
    }

    .side-link:hover { transform: translateX(4px); border-color: rgba(188, 217, 252, 0.38); box-shadow: 0 8px 18px rgba(58, 97, 160, 0.24); }

    .status-card, .lane-body, .lane-log {
      border-color: rgba(166, 199, 243, 0.18);
      background: linear-gradient(166deg, rgba(18, 33, 55, 0.74), rgba(13, 24, 42, 0.76));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(3,11,24,.42);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .status-card:hover {
      transform: translateY(-2px);
      border-color: rgba(188, 217, 252, 0.32);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 28px rgba(6, 18, 38, .5);
    }

    .lane-head {
      background: linear-gradient(135deg, var(--lane-head-from), var(--lane-head-to)) !important;
      border-bottom: 1px solid rgba(168, 200, 242, 0.22);
    }

    .status-card-title, .status-card-updated-at, .head-sub, .hint, .muted, .lane-head-mid, .tag, .status-pill, .running-indicator { color: var(--muted) !important; }

    .status-pill, .tag, .lane-head-mid, .head-link {
      background: linear-gradient(145deg, rgba(53, 77, 111, 0.5), rgba(37, 59, 90, 0.44));
      border-color: rgba(168, 200, 242, 0.24);
    }

    .status-pill.is-running { animation: ios-breathe 1.9s ease infinite; }

    button {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(188, 217, 252, 0.26);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 18px rgba(5,16,34,.46);
      transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
    }

    button::after {
      content: "";
      position: absolute;
      inset: 0 auto 0 -45%;
      width: 42%;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent);
      pointer-events: none;
      opacity: .0;
    }

    button:hover::after { opacity: .75; animation: ios-shine .7s ease; }

    button.primary, button.collect, button.update, button.manual, button.completion { background: linear-gradient(145deg, var(--btn-main-from), var(--btn-main-to)); }
    button.ghost { background: linear-gradient(145deg, var(--btn-ghost-from), var(--btn-ghost-to)); }
    button.warn { background: linear-gradient(145deg, var(--btn-warn-from), var(--btn-warn-to)); }
    button.danger { background: linear-gradient(145deg, var(--btn-danger-from), var(--btn-danger-to)); }

    button:hover { transform: none; filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 22px rgba(7,22,45,.52); }

    .status-error { border-radius: 999px !important; background: rgba(80, 106, 146, 0.38); border-color: rgba(165, 197, 240, 0.3); color: #dcecff; }
    /* iOS detail polish: spacing + corner continuity */
    .page {
      padding: 12px 12px 12px;
      gap: 12px;
    }

    .status-strip,
    .workspace,
    .layout {
      gap: 12px;
    }

    .layout {
      padding: 2px;
    }

    .panel,
    #configPanel {
      border-radius: 20px !important;
      overflow: hidden;
    }

    .lane {
      border-radius: 20px !important;
      overflow: hidden;
    }

    .lane-head {
      border-radius: 20px 20px 0 0 !important;
      margin: 0;
      border-bottom-color: rgba(170, 204, 245, 0.2);
    }

    .lane-body {
      border-radius: 0 0 20px 20px !important;
      margin-top: 0;
      padding: 10px;
      padding-top: 10px;
      gap: 10px;
    }

    .lane-log {
      border-radius: 14px !important;
    }

    #configPanel {
      padding: 10px 12px 10px;
    }

    #configPanel .row {
      gap: 10px;
    }

    /* Ensure the config action area has fully rounded outer/inner corners */
    #configPanel > .row:first-child {
      border-radius: 14px !important;
      overflow: hidden;
    }

    #configPanel > .row:first-child > .row {
      border-radius: 999px !important;
      overflow: hidden;
      padding: 2px;
    }
    /* layout harmonization: equal spacing + full viewport fit */
    :root {
      --space: var(--layout-page-pad);
      --global-gap: var(--layout-section-gap);
      --global-pad: var(--layout-card-pad);
      --global-card-pad: var(--layout-card-pad-lg);
      --global-surface-radius: var(--layout-surface-radius);
      --global-surface-radius-sm: var(--layout-surface-radius-sm);
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    .app-shell {
      padding: var(--global-gap) !important;
      gap: var(--layout-shell-gap) !important;
      min-height: 0;
    }

    .main-shell {
      min-height: 0;
      grid-template-rows: auto minmax(0, 1fr) !important;
      gap: var(--layout-section-gap);
    }

    header,
    .page,
    .status-strip,
    .workspace,
    .layout,
    #configPanel {
      margin: 0 !important;
    }

    header {
      margin-inline: var(--global-gap) !important;
      padding: var(--global-card-pad) calc(var(--global-card-pad) + 8px) !important;
    }

    .page {
      padding: var(--global-gap) !important;
      gap: var(--global-gap) !important;
      min-height: 0;
      height: auto !important;
      overflow: hidden;
    }

    .status-strip,
    .workspace,
    .layout,
    .bill-push-shell,
    .bill-review-grid,
    .bill-push-grid,
    .presale-ops-page,
    .presale-ops-page-grid,
    .presale-business-overview,
    .presale-business-focus-grid,
    .presale-business-matrix {
      gap: var(--layout-section-gap) !important;
    }

    .layout {
      padding: 0 !important;
    }

    .lane {
      min-height: 0;
      height: var(--lane-card-height, 100%) !important;
    }

    .lane-body {
      padding: var(--global-pad) !important;
      gap: var(--global-gap) !important;
    }

    #configPanel {
      padding: var(--global-pad) !important;
    }

    .row,
    .lane-btns {
      gap: var(--layout-inline-gap) !important;
    }

    /* global polish: reduce sharp edges and improve text rendering */
    body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    .sidebar,
    header,
    .panel,
    .lane,
    #configPanel,
    .status-card,
    .lane-log,
    .lane-body,
    .workspace {
      border-color: rgba(182, 212, 248, 0.16) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(170, 206, 247, 0.04),
        0 12px 28px rgba(4, 12, 28, 0.42) !important;
    }

    .status-card,
    .lane,
    .lane-log,
    .lane-body,
    .workspace {
      border-radius: 20px !important;
    }

    .side-logo,
    h1 {
      font-weight: 600 !important;
      letter-spacing: 0.015em !important;
      line-height: 1.08;
      text-shadow: 0 4px 12px rgba(72, 142, 232, 0.16) !important;
    }

    .head-sub {
      letter-spacing: 0.02em;
      color: #b2c7e3 !important;
    }

    /* Brand mark final override */
    .side-logo {
      font-family: "Oxanium", "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif !important;
      font-weight: 600 !important;
      font-size: 28px !important;
      line-height: 1.05;
      letter-spacing: 0.03em !important;
      text-transform: none;
      white-space: nowrap;
      transform: translateY(4px);
    }

    /* BEV group title: same typeface as logo, keep group size/color */
    .side-group-title-brand {
      font-family: "Oxanium", "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif !important;
      font-weight: 600 !important;
      letter-spacing: 0.03em !important;
      text-transform: none;
    }

    /* Final override: force rounded corners for the console region in screenshot */
    #consolePanel,
    #visualizationPanel.presale-ops-shell {
      border-radius: var(--global-surface-radius) !important;
      overflow: hidden !important;
      clip-path: inset(0 round var(--global-surface-radius));
    }

    #consolePanel > .layout {
      border-radius: var(--global-surface-radius) !important;
      overflow: hidden !important;
      clip-path: inset(0 round var(--global-surface-radius));
    }

    #consolePanel > #configPanel {
      border-radius: var(--global-surface-radius) !important;
      overflow: hidden !important;
      clip-path: inset(0 round var(--global-surface-radius));
    }

    /* Global surface shape: all visible regions use rounded rectangles */
    :where(
      .app-shell,
      .workspace,
      .sidebar,
      .panel,
      .lane,
      .lane-body,
      .lane-log,
      .status-card,
      .dashboard-overlay-card,
      .dashboard-overlay-head,
      #overviewPanel,
      #consolePanel,
      #configPanel,
      main,
      aside,
      section,
      article,
      nav,
      header,
      footer,
      [class*="panel"],
      [class*="card"],
      [class*="lane"],
      [class*="workspace"],
      [class*="shell"],
      [class*="view"],
      [class*="split"],
      [class*="grid"],
      [class*="sidebar"],
      [class*="topbar"]
    ) {
      border-radius: var(--global-surface-radius) !important;
    }

    :where(
      .panel,
      .status-card,
      .lane,
      .lane-body,
      .workspace,
      .bill-push-top,
      .bill-overview-card,
      .bill-person-card,
      .bill-detail-panel,
      .bill-preview-shell,
      .presale-business-toolbar,
      .presale-business-panel,
      .presale-business-kpi
    ) {
      padding: var(--global-card-pad) !important;
    }

    :where(button, input, select, textarea, table, tr, td, th, li) {
      border-radius: var(--global-surface-radius-sm) !important;
    }

    /* Unified curve pass: pills/chips/badges follow the same global radius */
    :where(
      .running-indicator,
      .status-error,
      .status-pill,
      .tag,
      [class*="dot"],
      [class*="pill"],
      [class*="chip"],
      [class*="badge"],
      [class*="avatar"]
    ) {
      border-radius: var(--global-surface-radius) !important;
    }

    /* Absolute final pass: remove visible right-angled corners across the console */
    :root {
      --global-soft-radius: var(--global-surface-radius);
      --global-soft-radius-lg: var(--global-surface-radius);
      --global-shell-radius: var(--global-surface-radius);
    }

    :where(
      .app-shell,
      .main-shell,
      .page,
      .workspace,
      .layout,
      .sidebar,
      header,
      .head-left,
      .head-right,
      .panel,
      .lane,
      .lane-head,
      .lane-body,
      .lane-log,
      .status-strip,
      .status-cards,
      .status-card,
      #overviewPanel,
      #consolePanel,
      #configPanel,
      #configPanel .row,
      #configPanel .row > .row,
      pre,
      ul,
      li,
      input,
      select,
      textarea,
      button
    ) {
      border-radius: var(--global-soft-radius) !important;
    }

    :where(
      .app-shell,
      .sidebar,
      header,
      .page,
      .workspace,
      .panel,
      .lane,
      #overviewPanel,
      #consolePanel,
      #configPanel
    ) {
      border-radius: var(--global-soft-radius-lg) !important;
      overflow: hidden;
    }

    /* Keep the navigation shell's visible corners aligned with the workspace shell. */
    .sidebar {
      border-radius: var(--global-shell-radius) !important;
      clip-path: inset(0 round var(--global-shell-radius));
    }

    /* Final layout lock: right workspace uses one rounded outer shell */
    .main-shell {
      border-radius: var(--global-shell-radius) !important;
      overflow: hidden !important;
      clip-path: inset(0 round var(--global-shell-radius));
      border: 1px solid rgba(182, 212, 248, 0.18) !important;
      background: linear-gradient(165deg, rgba(9, 18, 33, 0.78), rgba(7, 15, 28, 0.72)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(170, 206, 247, 0.04),
        0 12px 28px rgba(4, 12, 28, 0.42) !important;
      padding: var(--global-gap) !important;
      gap: var(--global-gap) !important;
    }

    .main-shell > header {
      margin: 0 !important;
      border-radius: var(--global-shell-radius) !important;
      padding: var(--global-card-pad) calc(var(--global-card-pad) + 8px) !important;
    }

    .main-shell > .page {
      padding: 0 !important;
      gap: var(--global-gap) !important;
      border-radius: var(--global-shell-radius) !important;
    }

    /* Button area top corners */
    #consolePanel .lane-body {
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
    }

    .auditor-modal-overlay {
      position: absolute;
      inset: 0;
      background: rgba(8, 12, 22, 0.65);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1200;
    }

    .auditor-modal-overlay.is-open {
      display: flex;
    }

    .auditor-modal-card {
      width: min(520px, 92vw);
      max-height: 78vh;
      overflow: auto;
      border-radius: 14px;
      background: #0f1a30;
      border: 1px solid rgba(255, 255, 255, 0.12);
      padding: 16px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    }

    .auditor-modal-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .auditor-list {
      display: grid;
      gap: 8px;
      margin: 8px 0 14px;
    }

    .auditor-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }

    .auditor-modal-actions {
      display: flex;
      gap: var(--layout-inline-gap);
      justify-content: flex-end;
    }

    .overview-error-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 1250;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background:
        linear-gradient(180deg, rgba(5, 11, 21, 0.72), rgba(7, 16, 30, 0.84)),
        radial-gradient(circle at top, rgba(113, 178, 241, 0.12), transparent 45%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .overview-error-modal-overlay.is-open {
      display: flex;
    }

    .overview-error-modal-card {
      width: min(720px, 94vw);
      max-height: min(78vh, 760px);
      overflow: auto;
      padding: 22px 22px 18px;
      border-radius: 18px;
      border: 1px solid rgba(171, 204, 235, 0.24);
      background: linear-gradient(180deg, rgba(13, 24, 42, 0.96), rgba(8, 16, 29, 0.98));
      box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      display: grid;
      gap: 14px;
    }

    .overview-error-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .overview-error-modal-title-wrap {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .overview-error-modal-kicker {
      color: #8ccfff;
      font-family: "JetBrains Mono", monospace;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .overview-error-modal-title {
      margin: 0;
      color: #eef7ff;
      font-size: 24px;
      line-height: 1.25;
      letter-spacing: 0.03em;
    }

    .overview-error-modal-hint {
      margin: 0;
      color: #9cb5d1;
      font-size: 14px;
      line-height: 1.7;
    }

    .overview-error-modal-body {
      border-radius: 14px;
      border: 1px solid rgba(164, 197, 230, 0.16);
      background: rgba(9, 18, 31, 0.78);
      padding: 16px 18px;
      color: #deedfb;
      font-size: 14px;
      line-height: 1.8;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .overview-error-modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .side-link.is-active {
      border-color: rgba(182, 224, 255, 0.56);
      background: linear-gradient(130deg, rgba(44, 85, 132, 0.82), rgba(20, 45, 76, 0.82));
      box-shadow: 0 10px 18px rgba(27, 71, 122, 0.24);
    }

    .page {
      position: relative;
      display: block !important;
      overflow: hidden;
      transition: padding 0.46s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: padding;
    }

    .page-view {
      position: absolute;
      inset: 0;
      height: 100%;
      min-height: 0;
      z-index: 0;
      opacity: 0;
      transform: none;
      transform-origin: 50% 28%;
      backface-visibility: hidden;
      isolation: isolate;
      contain: layout style;
      pointer-events: none;
      visibility: hidden;
      transition: none !important;
      will-change: auto;
      filter: none !important;
      content-visibility: auto;
    }

    .page-view.active {
      z-index: 1;
      opacity: 1;
      transform: none;
      pointer-events: auto;
      visibility: visible;
      transition: none !important;
      filter: none !important;
    }

    .page-view.is-entering,
    .page-view.is-leaving {
      will-change: opacity, transform;
    }

    .page-view.is-entering *,
    .page-view.is-entering *::before,
    .page-view.is-entering *::after,
    .page-view.is-leaving *,
    .page-view.is-leaving *::before,
    .page-view.is-leaving *::after {
      animation: none !important;
      transition-property: none !important;
      scroll-behavior: auto !important;
    }

    #opsView {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 10px;
    }

    #presaleOpsPanel,
    #settlementFeedbackPanel,
    #visualizationPanel {
      display: block;
      min-height: 0;
      padding: 0;
      overflow: hidden;
      border: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
    }

    /* Soft gate: avoid display hard-switch to reduce layout jank while switching views. */
    #visualizationPanel[hidden] {
      display: block !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    #visualizationPanel[hidden] .visualization-toolbar {
      opacity: 0;
      transform: translateY(-6px) scale(0.995);
      pointer-events: none;
    }

    #visualizationPanel:not([hidden]) {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }

    #visualizationPanel:not([hidden]) .visualization-toolbar {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .visualization-shell {
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      gap: 0;
      height: 100%;
      min-height: 0;
      align-content: start;
    }

    #visualizationPanel.presale-ops-shell {
      display: grid !important;
      height: 100% !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow: visible !important;
      grid-template-rows: minmax(0, 1fr) !important;
      align-content: stretch !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      clip-path: none !important;
    }

    .presale-ops-page {
      --presale-business-gap: var(--global-gap);
      --presale-business-pad: var(--global-card-pad);
      --presale-business-radius: var(--global-surface-radius);
      --presale-business-scrollbar-nudge: clamp(8px, 0.55vw, 12px);
      position: relative;
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      gap: var(--presale-business-gap);
      padding: var(--presale-business-gap);
      border-radius: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .presale-ops-loading-mask {
      position: absolute;
      inset: 0;
      z-index: 20;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        linear-gradient(180deg, rgba(4, 12, 24, 0.78), rgba(7, 17, 32, 0.9)),
        radial-gradient(circle at top, rgba(90, 174, 255, 0.14), transparent 46%);
      backdrop-filter: blur(10px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .presale-ops-loading-mask.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .presale-ops-loading-mask-card {
      min-width: min(320px, 100%);
      max-width: 420px;
      display: grid;
      justify-items: center;
      gap: 14px;
      padding: 28px 30px;
      border-radius: 20px;
      border: 1px solid rgba(147, 198, 245, 0.22);
      background: linear-gradient(180deg, rgba(11, 24, 42, 0.94), rgba(7, 16, 28, 0.96));
      box-shadow:
        0 20px 48px rgba(2, 8, 18, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      text-align: center;
    }

    .presale-ops-loading-spinner {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 3px solid rgba(141, 198, 247, 0.18);
      border-top-color: #7fd0ff;
      box-shadow: 0 0 22px rgba(82, 175, 255, 0.16);
      animation: presaleOpsLoadingSpin 0.85s linear infinite;
    }

    .presale-ops-loading-mask-card strong {
      color: #eef8ff;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    .presale-ops-loading-mask-card span {
      color: #97b8d9;
      font-size: 13px;
      line-height: 1.6;
    }

    @keyframes presaleOpsLoadingSpin {
      to {
        transform: rotate(360deg);
      }
    }

    .presale-ops-page-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--presale-business-gap);
      align-items: center;
      padding: var(--presale-business-pad);
      border-radius: var(--presale-business-radius);
      border: 1px solid rgba(173, 217, 255, 0.16);
      background:
        linear-gradient(135deg, rgba(24, 49, 82, 0.88), rgba(11, 24, 42, 0.72)),
        radial-gradient(120% 120% at 0% 0%, rgba(114, 185, 255, 0.14), transparent 46%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .presale-ops-page-title {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .presale-ops-page-kicker {
      color: #74c7ff;
      font-family: "JetBrains Mono", monospace;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .presale-ops-page-title h2 {
      margin: 0;
      color: #f3f9ff;
      font-size: 28px;
      letter-spacing: 0.04em;
    }

    .presale-ops-page-title p {
      margin: 0;
      color: #9fb7d3;
      font-size: 14px;
      line-height: 1.55;
    }

    .presale-business-toolbar-note {
      margin: 0;
      color: rgba(159, 183, 211, 0.84);
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: 0.01em;
      transform: translateY(1px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .presale-ops-page-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0 16px;
      border-radius: 999px;
      border: 1px solid rgba(153, 210, 255, 0.22);
      background: rgba(8, 19, 34, 0.56);
      color: #d7ecff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .presale-ops-page-grid {
      min-height: 0;
      height: 100%;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: var(--presale-business-gap);
      overflow: hidden;
    }

    .presale-business-toolbar,
    .presale-business-panel {
      border-radius: var(--presale-business-radius);
      border: 1px solid rgba(162, 203, 242, 0.14);
      background: linear-gradient(165deg, rgba(18, 35, 59, 0.72), rgba(8, 17, 31, 0.78));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .presale-business-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--presale-business-gap);
      align-items: center;
      padding: var(--presale-business-pad);
    }

    .presale-business-toolbar-main {
      display: flex;
      align-items: baseline;
      gap: 14px;
      min-width: 0;
      min-height: 100%;
    }

    .presale-business-toolbar-main h3,
    .presale-business-panel-title h3,
    .presale-business-table-head h3 {
      margin: 0;
      color: #eef7ff;
      font-size: 18px;
      letter-spacing: 0.03em;
    }

    .presale-business-toolbar-main h3 {
      padding-left: 14px;
      font-size: 30px;
      letter-spacing: 0.06em;
    }

    .presale-business-toolbar-main p,
    .presale-business-panel-title p,
    .presale-business-table-head p {
      margin: 0;
      color: #97b2ce;
      font-size: 14px;
      line-height: 1.6;
    }

    .presale-business-toolbar-meta {
      display: flex;
      align-items: center;
      gap: var(--global-gap);
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .presale-business-chip {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid rgba(151, 210, 255, 0.18);
      background: rgba(9, 20, 35, 0.62);
      color: #dcedfd;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }

    .presale-business-toolbar-meta button {
      min-height: 38px;
      padding: 0 16px;
      border-radius: 999px;
    }

    #presaleLostOrderBtn {
      background: linear-gradient(135deg, #c93a48, #9f1f33) !important;
      border-color: rgba(255, 156, 170, 0.42) !important;
      color: #fff3f5 !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1 !important;
      padding-top: 0 !important;
      padding-bottom: 2px !important;
      transform: none !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 235, 239, 0.24),
        0 10px 22px rgba(110, 10, 27, 0.34) !important;
    }

    #presaleLostOrderBtn:hover {
      filter: brightness(1.06) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 240, 243, 0.3),
        0 12px 24px rgba(110, 10, 27, 0.4) !important;
    }

    .presale-business-overview {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--presale-business-gap);
    }

    .presale-business-kpi {
      position: relative;
      overflow: hidden;
      min-height: 132px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto 1fr;
      row-gap: 10px;
      padding: var(--presale-business-pad);
      border-radius: var(--presale-business-radius);
      border: 1px solid rgba(166, 208, 245, 0.14);
      background:
        linear-gradient(165deg, rgba(17, 35, 58, 0.84), rgba(8, 17, 31, 0.82)),
        radial-gradient(120% 120% at 0% 0%, rgba(102, 178, 255, 0.16), transparent 46%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .presale-business-kpi::after {
      content: "";
      position: absolute;
      inset: auto -10% 0 auto;
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(110, 182, 255, 0.18), transparent 70%);
      pointer-events: none;
    }

    .presale-business-kpi[data-level="primary"] {
      min-height: 132px;
      background:
        linear-gradient(165deg, rgba(23, 49, 82, 0.9), rgba(9, 20, 36, 0.84)),
        radial-gradient(120% 140% at 0% 0%, rgba(120, 196, 255, 0.2), transparent 48%);
    }

    .presale-business-kpi[data-level="primary"] .presale-business-kpi-value {
      font-size: 34px;
    }

    .presale-business-kpi-label {
      color: #8fb1d5;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      grid-column: 1 / -1;
      text-align: center;
    }

    .presale-business-kpi-value {
      color: #f4fbff;
      font-size: 27px;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.1;
      align-self: end;
      justify-self: center;
      text-align: center;
    }

    .presale-business-kpi-label,
    .presale-business-kpi-value {
      padding-left: 0;
    }

    .presale-business-kpi-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      align-self: end;
      padding: 0 12px;
    }

    .presale-business-kpi-meta-item {
      display: grid;
      gap: 4px;
      padding: 10px 0;
      border-radius: 12px;
      border: 1px solid rgba(153, 204, 247, 0.12);
      background: rgba(8, 20, 35, 0.46);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
      align-self: stretch;
    }

    .presale-business-kpi-meta-label {
      color: #7fa2c5;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-align: center;
    }

    .presale-business-kpi-meta-value {
      color: #eef8ff;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }

    .presale-business-focus-grid {
      min-height: 0;
      height: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--presale-business-gap);
      align-content: start;
    }

    .presale-business-matrix {
      display: grid;
      gap: var(--presale-business-gap);
      height: auto !important;
      min-height: 0 !important;
      align-content: start;
      grid-auto-rows: max-content;
    }

    .presale-business-matrix-scroll {
      min-height: 0;
      height: 100%;
      max-height: none;
      overflow-y: auto;
      overflow-x: hidden;
      align-content: start;
      margin-right: calc(var(--presale-business-scrollbar-nudge) * -1);
      padding-top: 4px;
      padding-right: var(--presale-business-scrollbar-nudge);
      scrollbar-gutter: stable both-edges;
      scrollbar-width: thin;
      scrollbar-color: #4a6f99 transparent;
    }

    .presale-business-matrix-scroll::-webkit-scrollbar { width: 12px; }
    .presale-business-matrix-scroll::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 999px;
    }
    .presale-business-matrix-scroll::-webkit-scrollbar-thumb {
      background: #4a6f99;
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    .presale-business-matrix-scroll::-webkit-scrollbar-thumb:hover { background: #5d88bb; }

    .presale-business-matrix-head,
    .presale-business-matrix-row {
      display: grid;
      grid-template-columns: 220px repeat(4, minmax(0, 1fr));
      gap: var(--global-gap);
      align-items: stretch;
      position: relative;
      z-index: 0;
    }

    .presale-business-matrix-head {
      padding: 0 2px;
    }

    .presale-business-matrix-head strong {
      color: #8fb1d5;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .presale-business-matrix-person {
      display: grid;
      gap: 6px;
      padding: 16px 20px !important;
      border-radius: var(--presale-business-radius);
      border: 1px solid rgba(149, 198, 240, 0.12);
      background: rgba(11, 23, 40, 0.66);
      align-content: center;
      justify-items: center;
    }


    .presale-business-matrix-person-top {
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    .presale-business-matrix-person-name {
      position: relative;
      display: inline-flex;
      align-items: center;
      color: #eef8ff;
      font-size: 22px;
      font-weight: 700;
      line-height: 1.04;
      cursor: default;
    }

    .presale-business-matrix-person-meta {
      display: none;
    }

    .presale-business-matrix-group {
      display: grid;
      gap: 6px;
      padding: 16px 20px !important;
      border-radius: var(--presale-business-radius);
      border: 1px solid rgba(149, 198, 240, 0.12);
      background: rgba(11, 23, 40, 0.66);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .presale-business-matrix-group[data-group="wash"],
    .presale-business-matrix-group[data-group="sheet"] {
      background: linear-gradient(180deg, rgba(17, 35, 66, 0.82), rgba(9, 20, 41, 0.78));
    }

    .presale-business-matrix-group[data-group="repair"] {
      border-color: rgba(156, 176, 255, 0.2);
      background: linear-gradient(180deg, rgba(29, 34, 76, 0.84), rgba(14, 18, 48, 0.8));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 20px rgba(109, 128, 255, 0.08);
    }

    .presale-business-matrix-group[data-group="total"] {
      background: linear-gradient(180deg, rgba(15, 46, 51, 0.86), rgba(9, 24, 32, 0.8));
      border-color: rgba(122, 236, 207, 0.2);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 22px rgba(72, 206, 184, 0.08);
    }

    .presale-business-matrix-group-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .presale-business-matrix-group-head strong {
      color: #eef8ff;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .presale-business-matrix-group-head span {
      color: #88accd;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .presale-business-matrix-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .presale-business-matrix-metric {
      display: grid;
      gap: 14px;
      align-content: start;
      min-width: 0;
    }

    .presale-business-matrix-metric-label {
      color: #89a9cb;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .presale-business-matrix-metric-value {
      color: #f4fbff;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.02;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .presale-business-matrix-metric-value.is-rate {
      color: #8ef0d0;
    }

    .presale-business-matrix-metric-note {
      display: none;
    }

    .presale-business-panel {
      min-height: 0;
      height: auto;
      max-height: 100%;
      display: grid;
      grid-template-rows: auto auto;
      gap: var(--global-gap);
      padding: var(--presale-business-pad);
      overflow: hidden;
      align-content: start;
    }

    .presale-business-panel.is-matrix-panel {
      height: 100%;
      grid-template-rows: auto minmax(0, 1fr);
      padding-bottom: var(--presale-business-gap) !important;
    }

    .presale-business-panel-head {
      display: grid;
      grid-template-columns: 220px repeat(4, minmax(0, 1fr));
      align-items: end;
      gap: var(--global-gap);
    }

    .presale-business-head-col {
      color: #9fc3e8;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.06em;
      white-space: nowrap;
      text-align: center;
      line-height: 1;
      padding-bottom: 2px;
    }

    .presale-business-panel-title {
      display: grid;
      gap: 6px;
      min-width: 0;
      padding-left: 10px;
    }

    .presale-business-panel-title h3 {
      white-space: nowrap;
    }

    .presale-business-panel-title.is-matrix-title {
      justify-items: center;
      padding-left: 14px;
      text-align: center;
    }

    .presale-business-panel-tag {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(145, 199, 245, 0.16);
      background: rgba(9, 20, 35, 0.56);
      color: #cfe6fb;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .presale-business-panel-tag {
      display: none;
    }

    .presale-business-rank-list {
      display: grid;
      gap: 12px;
    }

    .presale-business-rank-list[data-tone="margin"] .presale-business-rank-track i {
      background: linear-gradient(90deg, rgba(75, 226, 192, 0.76), rgba(135, 255, 220, 0.94));
      box-shadow: 0 0 14px rgba(88, 230, 195, 0.24);
    }

    .presale-business-rank-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: var(--global-card-pad);
      border-radius: 14px;
      border: 1px solid rgba(149, 198, 240, 0.12);
      background: rgba(11, 23, 40, 0.66);
    }

    .presale-business-rank-order {
      min-width: 52px;
      height: 38px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, rgba(72, 134, 206, 0.28), rgba(16, 34, 56, 0.86));
      color: #f0f8ff;
      font-size: 15px;
      font-weight: 700;
      padding: 0 13px;
    }

    .presale-business-rank-main {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    .presale-business-rank-main strong,
    .presale-business-summary-card strong {
      color: #eef8ff;
      font-size: 15px;
      font-weight: 700;
    }

    .presale-business-rank-main span,
    .presale-business-summary-card span {
      color: #94afca;
      font-size: 13px;
      line-height: 1.5;
    }

    .presale-business-rank-track {
      height: 8px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(23, 47, 78, 0.88);
    }

    .presale-business-rank-track i {
      display: block;
      height: 100%;
      width: var(--fill, 0%);
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(66, 146, 241, 0.78), rgba(111, 211, 255, 0.94));
      box-shadow: 0 0 14px rgba(77, 171, 255, 0.24);
    }

    .presale-business-rank-value {
      color: #f1f8ff;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }

    .presale-business-table-panel {
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: var(--global-gap);
      padding: var(--presale-business-pad);
      border-radius: var(--presale-business-radius);
      border: 1px solid rgba(162, 203, 242, 0.14);
      background: linear-gradient(165deg, rgba(18, 35, 59, 0.72), rgba(8, 17, 31, 0.78));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      overflow: hidden;
    }

    .presale-business-table-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--global-gap);
      flex-wrap: wrap;
    }

    .presale-business-table-meta {
      display: flex;
      align-items: center;
      gap: var(--global-gap);
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .presale-business-table-wrap {
      min-height: 0;
      overflow: auto;
      border-radius: var(--presale-business-radius);
      border: 1px solid rgba(146, 196, 238, 0.12);
      background: rgba(8, 18, 32, 0.72);
    }

    .presale-business-table-wrap::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    .presale-business-table-wrap::-webkit-scrollbar-track {
      background: rgba(13, 24, 39, 0.76);
      border-radius: 999px;
    }

    .presale-business-table-wrap::-webkit-scrollbar-thumb {
      background: rgba(99, 146, 192, 0.56);
      border-radius: 999px;
    }

    .presale-business-table {
      width: 100%;
      min-width: 1460px;
      border-collapse: collapse;
    }

    .presale-business-table thead th {
      position: sticky;
      top: 0;
      z-index: 1;
      padding: 13px 12px;
      border-bottom: 1px solid rgba(148, 195, 235, 0.16);
      background: linear-gradient(180deg, rgba(18, 40, 66, 0.98), rgba(13, 28, 47, 0.98));
      color: #ddebfa;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-align: left;
      white-space: nowrap;
    }

    .presale-business-table th.is-sticky,
    .presale-business-table td.is-sticky {
      position: sticky;
      left: 0;
    }

    .presale-business-table thead th.is-sticky {
      z-index: 2;
      background: linear-gradient(180deg, rgba(22, 45, 72, 0.99), rgba(15, 31, 51, 0.99));
    }

    .presale-business-table tbody td {
      padding: 13px 12px;
      border-bottom: 1px solid rgba(141, 191, 234, 0.08);
      color: #d8e8f7;
      font-size: 13px;
      line-height: 1.45;
      white-space: nowrap;
      background: rgba(8, 18, 32, 0.66);
    }

    .presale-business-table tbody td.is-sticky {
      z-index: 1;
      background: rgba(11, 25, 44, 0.98);
    }

    .presale-business-table tbody tr:nth-child(even) td {
      background: rgba(11, 22, 38, 0.82);
    }

    .presale-business-table tbody tr:nth-child(even) td.is-sticky {
      background: rgba(13, 27, 46, 0.99);
    }

    .presale-business-table tbody tr:hover td {
      background: rgba(19, 39, 65, 0.96);
    }

    .presale-business-table tbody tr:hover td.is-sticky {
      background: rgba(21, 43, 70, 0.99);
    }

    @keyframes presaleNegativeHeartbeat {
      0%, 100% {
        background:
          linear-gradient(90deg,
            rgba(110, 28, 40, 0.78) 0%,
            rgba(127, 33, 47, 0.72) 48%,
            rgba(110, 28, 40, 0.78) 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 212, 220, 0.08),
          inset 0 -1px 0 rgba(255, 123, 146, 0.12),
          0 0 0 1px rgba(255, 120, 142, 0.14);
        filter: saturate(1) brightness(1);
      }
      50% {
        background:
          linear-gradient(90deg,
            rgba(134, 34, 49, 0.92) 0%,
            rgba(156, 42, 58, 0.88) 48%,
            rgba(134, 34, 49, 0.92) 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 225, 232, 0.14),
          inset 0 -1px 0 rgba(255, 139, 160, 0.2),
          0 0 0 1px rgba(255, 132, 154, 0.22),
          0 0 28px rgba(152, 36, 55, 0.22);
        filter: saturate(1.06) brightness(1.04);
      }
    }

    .store-detail-row-negative {
      animation: presaleNegativeHeartbeat 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .store-detail-row-negative td {
      background: transparent !important;
      color: #ffe5ea !important;
    }

    .store-detail-row-negative:hover {
      background:
        linear-gradient(90deg,
          rgba(145, 37, 53, 0.96) 0%,
          rgba(168, 47, 65, 0.92) 48%,
          rgba(145, 37, 53, 0.96) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 232, 237, 0.16),
        inset 0 -1px 0 rgba(255, 150, 171, 0.24),
        0 0 0 1px rgba(255, 145, 166, 0.24),
        0 0 34px rgba(160, 40, 59, 0.26);
    }

    .store-detail-row-negative:hover td {
      background: transparent !important;
    }

    .store-detail-lost-order-zero-quote {
      position: relative;
      overflow: hidden;
      color: #ffe5ea !important;
      background:
        linear-gradient(90deg,
          rgba(111, 24, 39, 0.96) 0%,
          rgba(138, 31, 49, 0.97) 48%,
          rgba(111, 24, 39, 0.96) 100%) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255, 188, 198, 0.28),
        0 0 16px rgba(194, 39, 70, 0.16);
      animation: lostOrderZeroQuoteBreathe 3.8s ease-in-out infinite;
    }

    .store-detail-lost-order-zero-quote::after {
      content: "";
      position: absolute;
      inset: -12% -18%;
      background: linear-gradient(112deg,
        transparent 0 36%,
        rgba(255, 234, 238, 0.08) 46%,
        rgba(255, 242, 245, 0.22) 50%,
        rgba(255, 234, 238, 0.08) 54%,
        transparent 64% 100%);
      opacity: 0.12;
      transform: translateX(-34%) skewX(-10deg);
      pointer-events: none;
      animation: lostOrderZeroQuoteSheen 5.6s ease-in-out infinite;
    }

    .store-detail-lost-order-zero-quote .store-detail-cell-text {
      position: relative;
      z-index: 1;
      color: inherit !important;
      font-weight: 700;
      letter-spacing: 0.01em;
      text-shadow: 0 0 0 rgba(255, 230, 236, 0);
      animation: lostOrderZeroQuoteTextBreathe 3.8s ease-in-out infinite;
    }

    #storeDetailTable td.store-detail-lost-order-merged {
      background: rgba(10, 24, 43, 0.88) !important;
      color: #d7ebff !important;
      box-shadow: inset 0 0 0 1px rgba(120, 170, 220, 0.08);
    }

    #storeDetailTable tbody tr:hover td.store-detail-lost-order-merged {
      background: rgba(10, 24, 43, 0.88) !important;
      color: #d7ebff !important;
      box-shadow: inset 0 0 0 1px rgba(120, 170, 220, 0.08) !important;
      filter: none !important;
    }

    #storeDetailTable tbody tr:hover td.store-detail-lost-order-merged .store-detail-cell-text {
      color: inherit !important;
      text-shadow: none !important;
    }

    .store-detail-row-negative:hover .store-detail-lost-order-zero-quote,
    #storeDetailTable tbody tr:hover td.store-detail-lost-order-zero-quote {
      color: inherit !important;
      background:
        linear-gradient(90deg,
          rgba(111, 24, 39, 0.96) 0%,
          rgba(138, 31, 49, 0.97) 48%,
          rgba(111, 24, 39, 0.96) 100%) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255, 188, 198, 0.28),
        0 0 18px rgba(194, 39, 70, 0.24) !important;
      filter: none !important;
    }

    @keyframes lostOrderZeroQuotePulse {
      0%, 100% {
        filter: brightness(1) saturate(1);
        box-shadow:
          inset 0 0 0 1px rgba(255, 188, 198, 0.28),
          0 0 18px rgba(194, 39, 70, 0.24);
      }
      50% {
        transform: scale(1.035);
        filter: brightness(1.08) saturate(1.12);
        box-shadow:
          inset 0 0 0 1px rgba(255, 214, 221, 0.38),
          0 0 26px rgba(225, 58, 91, 0.42);
      }
    }

    @keyframes lostOrderZeroQuoteBreathe {
      0%, 100% {
        filter: brightness(1) saturate(1);
        box-shadow:
          inset 0 0 0 1px rgba(255, 188, 198, 0.28),
          0 0 16px rgba(194, 39, 70, 0.16);
      }
      50% {
        filter: brightness(1.06) saturate(1.08);
        box-shadow:
          inset 0 0 0 1px rgba(255, 214, 221, 0.34),
          0 0 24px rgba(214, 52, 83, 0.28);
      }
    }

    @keyframes lostOrderZeroQuoteTextBreathe {
      0%, 100% {
        opacity: 0.96;
        text-shadow: 0 0 0 rgba(255, 230, 236, 0);
      }
      50% {
        opacity: 1;
        text-shadow: 0 0 10px rgba(255, 230, 236, 0.18);
      }
    }

    @keyframes lostOrderZeroQuoteSheen {
      0%, 100% {
        opacity: 0.08;
        transform: translateX(-34%) skewX(-10deg);
      }
      45% {
        opacity: 0.1;
        transform: translateX(-18%) skewX(-10deg);
      }
      55% {
        opacity: 0.26;
        transform: translateX(4%) skewX(-10deg);
      }
      100% {
        opacity: 0.08;
        transform: translateX(26%) skewX(-10deg);
      }
    }

    .presale-business-table td.is-number,
    .presale-business-table th.is-number {
      text-align: right;
    }

    .presale-business-person {
      display: grid;
      gap: 2px;
      min-width: 132px;
    }

    .presale-business-person strong {
      color: #f2f9ff;
      font-size: 14px;
      font-weight: 700;
    }

    .presale-business-person span {
      color: #8aa8c5;
      font-size: 12px;
    }

    .presale-business-rate {
      color: #7ce3c9;
      font-weight: 700;
    }

    .presale-business-rank-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 34px;
      padding: 0 10px;
      border-radius: 10px;
      background: linear-gradient(145deg, rgba(63, 124, 193, 0.24), rgba(10, 24, 40, 0.86));
      color: #eef8ff;
      font-size: 13px;
      font-weight: 700;
    }

    @media (max-width: 1260px) {
      .presale-business-toolbar,
      .presale-business-focus-grid {
        grid-template-columns: 1fr;
      }

      .presale-business-matrix-scroll {
        max-height: none;
        margin-right: 0;
        padding-right: 0;
      }

      .presale-business-matrix-head,
      .presale-business-matrix-row {
        grid-template-columns: 1fr;
      }

      .presale-business-toolbar-meta {
        justify-content: flex-start;
      }
    }

    @media (max-width: 960px) {
      .presale-kpi-group-block[data-group="flow"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .presale-command-strip {
        grid-template-rows: auto auto auto auto auto auto;
      }

      .presale-business-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-left: 0;
      }

      .presale-business-kpi {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        column-gap: 0;
      }

      .presale-business-kpi-meta {
        grid-template-columns: 1fr;
      }

      .presale-business-matrix-metrics {
        grid-template-columns: 1fr;
      }
    }

    .visualization-toolbar {
      display: flex;
      align-items: center;
      gap: var(--global-gap);
      padding: 10px 12px;
      border: 1px solid rgba(116, 195, 255, 0.34);
      background:
        linear-gradient(155deg, rgba(8, 23, 45, 0.9), rgba(6, 16, 33, 0.9)),
        radial-gradient(120% 100% at 12% -50%, rgba(71, 174, 255, 0.18), transparent 62%);
      border-radius: 14px;
      min-height: 52px;
      transform-origin: 50% 0%;
      will-change: transform, opacity, filter;
      transition:
        opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 1px 0 rgba(196, 232, 255, 0.18),
        inset 0 0 0 1px rgba(67, 145, 210, 0.16),
        0 10px 24px rgba(1, 12, 32, 0.48),
        0 0 20px rgba(44, 152, 255, 0.2);
    }

    .visualization-toolbar::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(
          90deg,
          rgba(104, 180, 245, 0.08) 0 1px,
          transparent 1px 26px
        );
      opacity: 0.3;
      pointer-events: none;
    }

    .visualization-toolbar::after {
      content: "";
      position: absolute;
      inset: -40% -30%;
      background: linear-gradient(105deg, transparent 40%, rgba(138, 220, 255, 0.2) 50%, transparent 60%);
      animation: tech-sweep 4.8s linear infinite;
      pointer-events: none;
    }

    .visual-sync-btn {
      border: 1px solid rgba(176, 217, 255, 0.44);
      background:
        linear-gradient(140deg, rgba(50, 120, 188, 0.95), rgba(38, 90, 152, 0.96)),
        linear-gradient(180deg, rgba(186, 231, 255, 0.08), rgba(186, 231, 255, 0));
      color: #f0f8ff;
      border-radius: 12px;
      padding: 8px 15px;
      font-weight: 700;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: filter 0.16s ease, opacity 0.16s ease;
      transform-origin: 50% 50%;
      will-change: transform, filter, opacity;
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 1px 0 rgba(206, 236, 255, 0.28),
        0 6px 16px rgba(22, 98, 178, 0.34),
        0 0 0 1px rgba(148, 214, 255, 0.16);
      z-index: 1;
    }

    .visual-sync-btn:hover {
      transform: none;
      filter: brightness(1.12) saturate(1.08);
    }

    .visual-sync-btn:disabled {
      cursor: not-allowed;
      opacity: 0.65;
      transform: none;
    }

    .visual-sync-btn::after {
      content: "";
      position: absolute;
      top: -120%;
      left: -40%;
      width: 48%;
      height: 320%;
      transform: rotate(20deg);
      background: linear-gradient(to right, transparent, rgba(222, 246, 255, 0.52), transparent);
      transition: transform 0.52s cubic-bezier(0.2, 0.92, 0.2, 1);
      pointer-events: none;
    }

    .visual-sync-btn:hover::after {
      transform: rotate(20deg) translateX(260%);
    }

    .visual-sync-status {
      color: #b7d8f8;
      font-size: 13px;
      line-height: 1.2;
      min-height: 16px;
      opacity: 0.9;
      will-change: transform, opacity, filter;
      position: relative;
      padding-left: 14px;
      text-shadow: 0 0 12px rgba(84, 182, 255, 0.2);
      z-index: 1;
    }

    .visual-sync-status::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      transform: translateY(-50%);
      background: #68c5ff;
      box-shadow: 0 0 0 0 rgba(104, 197, 255, 0.45);
      animation: tech-pulse 1.9s ease-out infinite;
    }

    .visual-console-card {
      min-height: 0;
      height: 100%;
      border: 1px solid rgba(128, 198, 255, 0.3);
      border-top-color: transparent;
      border-radius: 14px;
      background:
        linear-gradient(165deg, rgba(8, 20, 38, 0.9), rgba(6, 15, 31, 0.92)),
        radial-gradient(100% 90% at 8% -20%, rgba(82, 170, 255, 0.18), transparent 62%);
      box-shadow:
        inset 0 1px 0 rgba(200, 233, 255, 0.1),
        inset 0 0 0 1px rgba(66, 139, 206, 0.14),
        0 14px 30px rgba(1, 10, 26, 0.52);
      padding: 14px;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: 10px;
      overflow: hidden;
    }

    .visual-console-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 28px;
    }

    .visual-console-title {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: #d9ebff;
    }

    .visual-console-tag {
      color: #a8c7e8;
      font-size: 12px;
      font-family: "JetBrains Mono", monospace;
      letter-spacing: 0.02em;
    }

    .visual-console-toolbar {
      margin-top: -2px;
      min-height: 48px;
    }

    .visual-console-screen {
      min-height: 300px;
      border: 1px solid rgba(143, 202, 255, 0.26);
      border-radius: 12px;
      background:
        linear-gradient(160deg, rgba(4, 10, 19, 0.94), rgba(7, 14, 25, 0.94)),
        repeating-linear-gradient(
          180deg,
          rgba(119, 180, 255, 0.03) 0 2px,
          rgba(6, 12, 20, 0.01) 2px 4px
        );
      box-shadow:
        inset 0 0 0 1px rgba(177, 212, 248, 0.06),
        inset 0 22px 48px rgba(74, 137, 214, 0.08),
        inset 0 -16px 30px rgba(0, 0, 0, 0.34);
      overflow: auto;
      padding: 12px;
    }

    .visual-console-lines {
      margin: 0;
      font-size: 12px;
      line-height: 1.8;
      letter-spacing: 0.01em;
      color: #b8d1e8;
      font-family: "JetBrains Mono", monospace;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .visual-console-lines .accent {
      color: #d9c49f;
    }

    @keyframes tech-sweep {
      from { transform: translateX(-48%); opacity: 0; }
      14% { opacity: 0.55; }
      50% { opacity: 0.2; }
      to { transform: translateX(48%); opacity: 0; }
    }

    @keyframes tech-pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(104, 197, 255, 0.48);
        opacity: 1;
      }
      70% {
        box-shadow: 0 0 0 8px rgba(104, 197, 255, 0);
        opacity: 0.86;
      }
      100% {
        box-shadow: 0 0 0 0 rgba(104, 197, 255, 0);
        opacity: 1;
      }
    }

    .main-shell > header {
      max-height: 120px;
      opacity: 1;
      transform: translateY(0);
      overflow: hidden;
      transition:
        max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.26s ease,
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        padding-top 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        padding-bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.28s ease;
    }

    .main-shell.visualization-only > header {
      max-height: 0;
      opacity: 0;
      transform: translateY(-10px);
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      border-color: transparent !important;
      box-shadow: none !important;
      pointer-events: none;
    }

    .main-shell.visualization-only > .page {
      height: 100%;
      padding: var(--space) !important;
      gap: 0 !important;
      border-radius: var(--global-surface-radius) !important;
      background: transparent !important;
    }

    .main-shell.visualization-only {
      border: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      padding: 0 !important;
      row-gap: 0 !important;
      clip-path: inset(0 round var(--global-surface-radius)) !important;
      border-radius: var(--global-surface-radius) !important;
    }

    .main-shell.visualization-only #visualizationPanel {
      border: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      border-radius: var(--global-surface-radius) !important;
      padding: 0 !important;
    }

    @supports (view-transition-name: shell) {
      ::view-transition-group(root) {
        animation-duration: 0.01ms !important;
        animation-timing-function: linear !important;
      }

      html.vt-running .page,
      html.vt-running .page-view,
      html.vt-running .main-shell > header {
        transition: none !important;
      }

      html.vt-running .status-strip,
      html.vt-running #configPanel,
      html.vt-running .status-card,
      html.vt-running .lane,
      html.vt-running .lane-body,
      html.vt-running .lane-log,
      html.vt-running button,
      html.vt-running .side-link {
        animation: none !important;
        transition: none !important;
      }

      html.vt-to-ops::view-transition-old(root) {
        animation: none !important;
      }

      html.vt-to-ops::view-transition-new(root) {
        animation: none !important;
      }

      html.vt-to-viz::view-transition-old(root) {
        animation: none !important;
      }

      html.vt-to-viz::view-transition-new(root) {
        animation: none !important;
      }
    }

    @keyframes vt-fade-out {
      from { opacity: 1; transform: translateY(0); }
      to { opacity: 0; transform: translateY(-4px); }
    }

    @keyframes vt-fade-out-viz {
      from { opacity: 1; transform: translateY(0); }
      to { opacity: 0; transform: translateY(-6px); }
    }

    @keyframes vt-rise-in-ops {
      from { opacity: 0; transform: translateY(18px); }
      60% { opacity: 1; }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes vt-rise-in-viz {
      from { opacity: 0; transform: translateY(16px); }
      62% { opacity: 1; transform: translateY(-1px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes vt-unified-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .page,
      .page-view,
      .main-shell > header {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
      .visualization-toolbar::after,
      .status-strip.sync-card-animated::after,
      .visual-sync-status::before {
        animation: none !important;
      }
      .visual-sync-btn::after {
        transition: none !important;
      }

      @supports (view-transition-name: shell) {
        ::view-transition-group(root),
        ::view-transition-old(root),
        ::view-transition-new(root) {
          animation-duration: 0.01ms !important;
        }
      }
    }


    /* One desktop design canvas. Window size controls the scale; DPR does not. */
    html.console-viewport-fitted .app-shell {
      width: var(--ui-canvas-width);
      height: var(--ui-canvas-height);
      min-height: 0;
      zoom: var(--ui-zoom);
    }

    @media (max-width: 1120px) {
      html.console-viewport-fitted body {
        overflow: hidden;
      }

      html.console-viewport-fitted .app-shell {
        grid-template-columns: 206px minmax(0, 1fr);
        height: var(--ui-canvas-height);
        min-height: 0;
      }

      html.console-viewport-fitted .sidebar {
        border-right: 1px solid rgba(143, 206, 255, 0.2);
        border-bottom: 0;
        flex-direction: column;
        flex-wrap: nowrap;
      }

      html.console-viewport-fitted .side-logo {
        width: auto;
        margin-bottom: auto;
      }

      html.console-viewport-fitted .page {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        grid-template-rows: auto minmax(0, 1fr);
      }

      html.console-viewport-fitted .workspace {
        overflow: hidden;
        grid-template-rows: minmax(0, 1fr) auto;
      }

      html.console-viewport-fitted .layout {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: 100%;
        overflow: hidden;
      }

      html.console-viewport-fitted .lane {
        height: 100%;
        min-height: 0;
      }
    }