:root {
      --bg: oklch(98% 0.005 250);
      --surface: oklch(100% 0 0);
      --fg: oklch(22% 0.02 240);
      --muted: oklch(50% 0.018 240);
      --border: oklch(90% 0.008 240);
      --accent: oklch(56% 0.12 183);
      --accent-ink: oklch(31% 0.075 183);
      --accent-soft: oklch(94% 0.032 183);
      --warning: oklch(68% 0.13 78);
      --warning-ink: oklch(37% 0.08 78);
      --warning-soft: oklch(95% 0.04 85);
      --fault: oklch(57% 0.18 28);
      --fault-ink: oklch(38% 0.12 28);
      --fault-soft: oklch(95% 0.035 28);
      --recovered: oklch(55% 0.13 150);
      --recovered-ink: oklch(32% 0.08 150);
      --recovered-soft: oklch(94% 0.035 150);
      --font-display: "Segoe UI Variable", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
      --font-body: "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
      --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
      --radius: 10px;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

    * { box-sizing: border-box; }
    html { min-width: 0; background: var(--bg); }
    body {
      min-width: 0;
      min-height: 100dvh;
      margin: 0;
      color: var(--fg);
      background: var(--bg);
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    button { font: inherit; }
    button, [tabindex] { -webkit-tap-highlight-color: transparent; }
    button:focus-visible, [tabindex]:focus-visible {
      outline: 3px solid oklch(70% 0.12 183);
      outline-offset: 3px;
    }
    button:disabled { cursor: not-allowed; opacity: 0.58; }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .app-shell { min-height: 100dvh; }
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-height: 60px;
      padding: 10px clamp(18px, 3vw, 42px);
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .brandline, .brandcopy, .topbar-meta, .boundary, .button-label, .state-heading, .state-code, .node-title, .node-state, .section-title, .summary-kicker, .phase-label, .fallback-title, .history-item, .capability-list, .brief-task {
      min-width: 0;
    }
    .brandline { display: flex; align-items: center; gap: 12px; }
    .project-mark {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      border: 1px solid oklch(72% 0.045 183);
      border-radius: 8px;
      color: var(--accent-ink);
      background: var(--accent-soft);
      font: 700 11px/1 var(--font-mono);
      letter-spacing: 0;
    }
    .brandcopy { display: grid; gap: 1px; }
    .brandcopy strong { font: 650 15px/1.25 var(--font-display); letter-spacing: 0; }
    .brandcopy span, .topbar-meta { color: var(--muted); font-size: 12px; }
    .topbar-meta { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
    .boundary {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 9px;
      border: 1px solid oklch(84% 0.02 240);
      border-radius: 999px;
      color: var(--muted);
      background: oklch(98% 0.003 250);
      white-space: nowrap;
    }
    .topbar-action, .btn, .btn-text {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      border: 1px solid transparent;
      border-radius: 7px;
      cursor: pointer;
      font-weight: 650;
      line-height: 1.2;
      transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
    }
    .topbar-action {
      min-height: 40px;
      padding: 7px 10px;
      color: var(--muted);
      background: transparent;
      border-color: var(--border);
      font-size: 12px;
    }
    .topbar-action:hover { color: var(--fg); border-color: oklch(75% 0.035 240); background: oklch(97% 0.005 250); }
    .page-wrap {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 24px;
      width: min(1380px, 100%);
      margin: 0 auto;
      padding: 18px clamp(18px, 3vw, 42px) 30px;
    }
    .state-rail {
      align-self: start;
      position: sticky;
      top: 20px;
      min-width: 0;
      padding: 4px 16px 4px 0;
    }
    .rail-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 0 0 13px;
      border-bottom: 1px solid var(--border);
    }
    .rail-head strong { font-size: 12px; letter-spacing: 0.05em; }
    .rail-head span { color: var(--muted); font: 11px var(--font-mono); }
    .state-list { position: relative; display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
    .state-list::before {
      content: "";
      position: absolute;
      top: 9px;
      bottom: 9px;
      left: 9px;
      width: 1px;
      background: var(--border);
    }
    .state-item {
      position: relative;
      display: grid;
      grid-template-columns: 19px minmax(0, 1fr);
      align-items: start;
      gap: 11px;
      padding: 10px 0;
      color: var(--muted);
    }
    .state-dot {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 19px;
      height: 19px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: var(--bg);
      color: var(--muted);
      font: 700 9px var(--font-mono);
    }
    .state-item.is-current { color: var(--fg); }
    .state-item.is-current .state-dot { border-color: var(--accent); color: var(--surface); background: var(--accent); }
    .state-item.is-visited:not(.is-current) .state-dot { border-color: oklch(72% 0.07 183); color: var(--accent-ink); background: var(--accent-soft); }
    .state-item.is-current .state-title { font-weight: 700; }
    .state-title { display: block; padding-top: 1px; font-size: 13px; }
    .state-note { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
    .work-surface {
      min-width: 0;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: 0 10px 30px oklch(40% 0.02 240 / 0.06);
    }
    .brief-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 0.68fr);
      gap: 28px;
      padding: 18px 24px 15px;
    }
    .eyebrow, .section-kicker, .summary-kicker, .capability-label, .fallback-kicker {
      margin: 0;
      color: var(--muted);
      font: 700 10px/1.3 var(--font-mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .brief-title {
      margin: 7px 0 8px;
      max-width: 28ch;
      font: 700 26px/1.15 var(--font-display);
      letter-spacing: 0;
    }
    .brief-task { max-width: 64ch; margin: 0; color: var(--muted); font-size: 12px; }
    .brief-task strong { color: var(--fg); font-weight: 700; }
    .capability-panel { align-self: end; padding-top: 4px; }
    .capability-label { margin-bottom: 10px; }
    .capability-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
    .capability-list li {
      padding: 5px 8px;
      border: 1px solid var(--border);
      border-radius: 5px;
      color: var(--accent-ink);
      background: var(--accent-soft);
      font-size: 12px;
      font-weight: 650;
    }
    .local-note { margin: 10px 0 0; color: var(--muted); font-size: 10px; }
    .feedback-strip {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 30px;
      padding: 5px 24px;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      color: var(--muted);
      background: oklch(98.5% 0.002 250);
      font-size: 12px;
    }
    .feedback-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--accent); }
    .workspace-section { padding: 16px 24px; }
    .issue-summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(210px, 275px);
      align-items: center;
      gap: 18px;
      border-bottom: 1px solid var(--border);
    }
    .summary-copy { min-width: 0; }
    .summary-kicker { display: inline-flex; align-items: center; gap: 7px; }
    .summary-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fault); }
    .summary-kicker.is-healthy::before { background: var(--recovered); }
    .summary-kicker.is-recovered::before { background: var(--recovered); }
    .summary-kicker.is-progress::before { background: var(--warning); }
    .summary-kicker.is-fallback::before { background: var(--warning); }
    .state-code { color: var(--muted); font: 700 11px var(--font-mono); }
    .summary-title {
      margin: 7px 0 7px;
      font: 700 21px/1.22 var(--font-display);
      letter-spacing: 0;
    }
    .summary-description { max-width: 74ch; margin: 0; color: var(--muted); font-size: 12px; }
    .summary-action { min-width: 0; }
    .summary-action .btn { width: 100%; }
    .summary-helper { margin: 8px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
    .btn { width: auto; padding: 10px 15px; }
    .btn-primary { color: var(--surface); background: var(--accent-ink); border-color: var(--accent-ink); }
    .btn-primary:hover { color: var(--surface); background: oklch(25% 0.075 183); border-color: oklch(25% 0.075 183); transform: translateY(-1px); }
    .btn-fault { color: var(--surface); background: var(--fault-ink); border-color: var(--fault-ink); }
    .btn-fault:hover { color: var(--surface); background: oklch(32% 0.12 28); border-color: oklch(32% 0.12 28); transform: translateY(-1px); }
    .btn-recovered { color: var(--surface); background: var(--recovered-ink); border-color: var(--recovered-ink); }
    .btn-recovered:hover { color: var(--surface); background: oklch(26% 0.08 150); border-color: oklch(26% 0.08 150); transform: translateY(-1px); }
    .btn-secondary { color: var(--fg); background: var(--surface); border-color: var(--border); }
    .btn-secondary:hover { color: var(--fg); background: oklch(97% 0.005 250); border-color: oklch(74% 0.03 240); transform: translateY(-1px); }
    .btn-text { min-height: 40px; padding: 7px 0; color: var(--accent-ink); background: transparent; border: 0; font-size: 12px; }
    .btn-text:hover { color: oklch(24% 0.08 183); transform: translateX(2px); }
    .btn svg, .topbar-action svg, .btn-text svg { width: 16px; height: 16px; flex: 0 0 16px; }
    .topology-section { border-bottom: 1px solid var(--border); }
    .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
    .section-title { margin: 0; font-size: 13px; font-weight: 700; }
    .section-meta { color: var(--muted); font-size: 11px; }
    .node-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
    .node-item { position: relative; min-width: 0; }
    .node-item:not(:last-child)::after {
      content: "";
      position: absolute;
      z-index: 0;
      top: 31px;
      right: -8px;
      width: 8px;
      border-top: 1px solid oklch(80% 0.02 240);
    }
    .node-button {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      width: 100%;
      min-height: 58px;
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: 7px;
      color: var(--fg);
      background: var(--surface);
      cursor: pointer;
      text-align: left;
      transition: border-color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease);
    }
    .node-button:hover { border-color: oklch(74% 0.04 183); background: oklch(98% 0.01 183); transform: translateY(-1px); }
    .node-button.is-selected { border-color: var(--accent); background: var(--accent-soft); }
    .node-button.is-fault { border-color: oklch(78% 0.08 28); background: var(--fault-soft); }
    .node-button.is-recovered { border-color: oklch(75% 0.08 150); background: var(--recovered-soft); }
    .node-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--accent-ink); background: var(--accent-soft); }
    .is-fault .node-icon { color: var(--fault-ink); background: oklch(91% 0.065 28); }
    .is-recovered .node-icon { color: var(--recovered-ink); background: oklch(91% 0.065 150); }
    .node-icon svg { width: 16px; height: 16px; }
    .node-title { display: block; overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .node-state { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .node-state strong { color: var(--fault-ink); font-weight: 700; }
    .is-recovered .node-state strong { color: var(--recovered-ink); }
    .context-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(220px, 0.88fr); gap: 18px; border-bottom: 1px solid var(--border); }
    .context-panel { min-width: 0; }
    .context-panel + .context-panel { padding-left: 22px; border-left: 1px solid var(--border); }
    .context-panel h3 { margin: 5px 0 6px; font-size: 16px; line-height: 1.3; }
    .context-panel p { margin: 0; color: var(--muted); font-size: 12px; }
    .signal-list { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
    .signal-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 4px; border-top: 1px solid oklch(94% 0.004 240); color: var(--muted); font-size: 11px; }
    .signal-list li strong { color: var(--fg); font-weight: 650; }
    .signal-list li em { color: var(--accent-ink); font-style: normal; font-family: var(--font-mono); font-size: 10px; }
    .action-principle { display: grid; gap: 6px; margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--accent); }
    .action-principle strong { font-size: 12px; }
    .action-principle span { color: var(--muted); font-size: 11px; }
    .action-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
    .action-controls .btn { min-height: 40px; }
    .record-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, 0.85fr); gap: 22px; }
    .record-panel { min-width: 0; }
    .history-list { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
    .history-item { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 8px; align-items: start; color: var(--muted); font-size: 11px; }
    .history-marker { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); font: 700 9px var(--font-mono); }
    .history-item.is-current .history-marker { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
    .history-item strong { display: block; color: var(--fg); font-size: 11px; font-weight: 650; }
    .history-item span { display: block; margin-top: 1px; }
    .service-fallback { min-width: 0; padding: 12px; border: 1px solid oklch(88% 0.03 78); border-radius: 7px; background: var(--warning-soft); }
    .service-fallback .fallback-kicker { color: var(--warning-ink); }
    .fallback-title { margin: 5px 0 4px; font-size: 13px; line-height: 1.35; }
    .service-fallback p { margin: 0; color: var(--muted); font-size: 11px; }
    .service-fallback .btn-text { justify-content: flex-start; margin-top: 5px; }
    .optimization-panel { margin-top: 13px; padding: 12px; border: 1px solid oklch(88% 0.03 78); border-radius: 7px; background: var(--warning-soft); }
    .optimization-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--warning-ink); font-size: 11px; font-weight: 700; }
    .progress-track { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: oklch(88% 0.025 78); }
    .progress-fill { width: 12%; height: 100%; border-radius: inherit; background: var(--warning); transition: width 280ms var(--ease); }
    .progress-status { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
    .phase-list { display: grid; gap: 6px; margin: 11px 0 0; padding: 0; list-style: none; }
    .phase-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
    .phase-mark { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); font: 700 9px var(--font-mono); }
    .phase-row.is-done { color: var(--fg); }
    .phase-row.is-done .phase-mark { border-color: var(--recovered); color: var(--surface); background: var(--recovered); }
    .phase-row.is-active { color: var(--warning-ink); font-weight: 700; }
    .phase-row.is-active .phase-mark { border-color: var(--warning); color: var(--warning-ink); background: oklch(94% 0.06 78); }
    .fallback-list { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; counter-reset: fallback; }
    .fallback-list li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 8px; color: var(--muted); font-size: 11px; }
    .fallback-list li::before { counter-increment: fallback; content: counter(fallback, decimal-leading-zero); color: var(--warning-ink); font: 700 10px var(--font-mono); }
    .fallback-state { display: inline-flex; margin-top: 12px; padding: 4px 7px; border: 1px solid oklch(85% 0.05 78); border-radius: 4px; color: var(--warning-ink); background: oklch(97% 0.03 78); font-size: 10px; font-weight: 700; }
    .recovered-banner { margin-top: 13px; padding: 12px; border: 1px solid oklch(82% 0.07 150); border-radius: 7px; color: var(--recovered-ink); background: var(--recovered-soft); font-size: 12px; }
    @media (max-width: 980px) {
      .page-wrap { grid-template-columns: 185px minmax(0, 1fr); gap: 16px; }
      .brief-row { grid-template-columns: 1fr; gap: 16px; }
      .capability-panel { align-self: start; }
      .node-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .node-item:nth-child(2)::after { display: none; }
      .node-item:nth-child(1)::after, .node-item:nth-child(3)::after { right: -8px; width: 8px; }
    }
    @media (max-width: 720px) {
      .topbar { align-items: flex-start; padding: 12px 16px; }
      .topbar-meta { align-items: flex-end; flex-direction: column; gap: 7px; }
      .boundary { white-space: normal; text-align: right; }
      .page-wrap { display: block; padding: 16px 14px 28px; }
      .state-rail { position: static; padding: 0 0 14px; }
      .rail-head { padding-bottom: 9px; }
      .state-list { grid-template-columns: 1fr; gap: 0; margin-top: 9px; }
      .state-list::before { display: none; }
      .state-item { grid-template-columns: 19px minmax(0, 1fr); gap: 7px; padding: 5px 0; }
      .state-note { display: none; }
      .work-surface { border-radius: 8px; }
      .brief-row, .workspace-section { padding-left: 16px; padding-right: 16px; }
      .feedback-strip { padding-left: 16px; padding-right: 16px; }
      .brief-title { max-width: none; font-size: 25px; }
      .brief-task { font-size: 13px; }
      .issue-summary, .context-grid, .record-grid { grid-template-columns: 1fr; }
      .issue-summary { gap: 16px; }
      .context-panel + .context-panel { padding-top: 17px; padding-left: 0; border-top: 1px solid var(--border); border-left: 0; }
      .node-list { grid-template-columns: 1fr; }
      .node-item::after { display: none !important; }
      .node-button { min-height: 58px; }
      .section-header { align-items: flex-start; flex-direction: column; gap: 4px; }
      .summary-title { font-size: 21px; }
      .action-controls { display: grid; grid-template-columns: 1fr; }
      .action-controls .btn { width: 100%; }
      .service-fallback { padding: 14px; }
    }
    @media (max-width: 420px) {
      .topbar { gap: 10px; }
      .brandline { align-items: flex-start; }
      .brandcopy strong { font-size: 13px; }
      .brandcopy span { font-size: 10px; }
      .topbar-action { padding: 6px 8px; }
      .topbar-action .button-label { display: none; }
      .state-list { grid-template-columns: 1fr; }
      .brief-title { font-size: 23px; }
      .node-button { grid-template-columns: 28px minmax(0, 1fr); }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    }