* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; }
  body {
    font-family: var(--font-ui, var(--font-jp));
    color: var(--text-body);
    background: var(--surface-canvas);
    overflow: hidden;
    transition: background var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard);
  }
  button { font-family: inherit; cursor: pointer; }
  :focus-visible { outline: none; box-shadow: var(--shadow-focus); }

  .app { height: 100vh; display: flex; flex-direction: column; }

  /* ===== デモ用ツールバー（モック専用の足場。本番UIではない） ===== */
  .mockbar {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; row-gap: var(--space-2);
    gap: var(--space-4); padding: var(--space-2) var(--space-5);
    background: var(--surface-sunken); border-bottom: 1px dashed var(--border-default);
  }
  .mockbar .label {
    font-size: var(--text-overline); letter-spacing: 0.12em;
    color: var(--text-muted); font-weight: var(--weight-bold);
  }
  .mockbar .segwrap { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; row-gap: var(--space-2); min-width: 0; }
  .mockbar .seglabel { font-size: var(--text-overline); color: var(--text-secondary); }
  .seg { display: flex; border: 1px solid var(--border-default); flex-shrink: 0; }
  .seg button {
    padding: 5px 12px; font-size: 11.5px; border: none;
    background: var(--surface-card); color: var(--text-secondary);
    transition: background var(--duration-fast) var(--ease-standard);
  }
  .seg button:hover:not(.on):not(:disabled) { background: var(--surface-hover); }
  .seg button.on { background: var(--action-primary); color: var(--text-on-brand); font-weight: var(--weight-bold); }
  .seg button:disabled { opacity: 0.45; cursor: not-allowed; }

  /* ===== ヘッダー（本番にも存在する領域） ===== */
  .hdr {
    flex-shrink: 0; display: flex; align-items: center; gap: var(--space-5);
    flex-wrap: wrap; row-gap: var(--space-2);
    padding: var(--space-2) var(--space-6); min-height: 64px;
    background: var(--surface-header); border-bottom: 1px solid var(--border-subtle);
  }
  /* 会社ロゴ（アイコン＋社名）。業種切替で両方が入れ替わる（PM 追加要件・Issue #120）。
     アイコンは currentColor（--text-link）で着色。light #0071BC/白地 ≈5.1:1・dark #2E90FF/ヘッダー地 ≈5.6:1
     （--action-primary は dark でも #0071BC のまま据え置かれておりヘッダー地で 3.5:1 しか出ないため使わない）。
     実在企業のロゴに似せない幾何マーク */
  .hdr .brand { display: inline-flex; align-items: center; gap: var(--space-2); }
  .hdr .brand-mark { display: inline-flex; width: 30px; height: 22px; color: var(--text-link); flex-shrink: 0; }
  .hdr .brand-mark svg { width: 100%; height: 100%; }
  .hdr .wordmark {
    display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 14px;
    border: 1px dashed var(--border-default); border-radius: var(--radius-sm);
    font-weight: var(--weight-bold); font-size: 13px; letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
  }
  .hdr .vline { width: 1px; height: 28px; background: var(--border-subtle); }
  /* 狭い幅で 1 文字幅まで潰れて縦に伸び、上のツールバーを覆う事故を防ぐ（折り返さず省略する） */
  .hdr .t1 {
    font-size: 15px; font-weight: var(--weight-bold); color: var(--text-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .hdr .right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; row-gap: var(--space-2); }
  .hdr .dept { font-size: 12.5px; color: var(--text-secondary); }
  .avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--action-primary);
    color: var(--text-on-brand); display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: var(--weight-bold); flex-shrink: 0;
  }

  /* 言語 / テーマ切替（プロダクト機能） */
  .ctrl { display: flex; align-items: center; gap: var(--space-1); }
  .lang-select {
    appearance: none; font-family: inherit; font-size: 12.5px; color: var(--text-body);
    background: var(--surface-card); border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); padding: 6px 26px 6px 10px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  }
  .lang-select:hover { border-color: var(--action-primary); }
  .theme-btn {
    width: 34px; height: 32px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    background: var(--surface-card); color: var(--text-secondary); font-size: 14px; line-height: 1;
    transition: border-color var(--duration-fast) var(--ease-standard);
  }
  .theme-btn:hover { border-color: var(--action-primary); color: var(--action-primary); }

  .body { flex: 1; min-height: 0; display: flex; }

  /* ===== ① 階層ナビ型 ===== */
  nav.side {
    flex-shrink: 0; overflow-y: auto;
    border-right: 1px solid var(--border-subtle);
    width: 264px; background: var(--surface-card); padding: var(--space-3) 0 var(--space-6) 0;
  }
  .nav-item {
    display: flex; align-items: baseline; gap: var(--space-2); width: 100%;
    padding: 10px var(--space-5); border: none; background: transparent; text-align: left;
    transition: background var(--duration-fast) var(--ease-standard);
  }
  .nav-item:hover { background: var(--surface-hover); }
  .nav-item.on { background: var(--surface-selected); box-shadow: inset 3px 0 0 var(--cat-accent); }
  .nav-item .n-label { font-size: 13.5px; font-weight: var(--weight-bold); color: var(--text-heading); }
  .nav-item.on .n-label { color: var(--action-primary); }
  .nav-item .cnt { margin-left: auto; font-size: var(--text-overline); color: var(--text-muted); }
  .nav-item .ic { color: var(--cat-accent); margin-right: var(--space-2); }
  .nav-sub {
    display: flex; align-items: baseline; gap: var(--space-2); width: 100%;
    padding: var(--space-2) var(--space-5) var(--space-2) 34px;
    border: none; background: transparent; text-align: left;
    transition: background var(--duration-fast) var(--ease-standard);
  }
  .nav-sub:hover { background: var(--surface-hover); }
  .nav-sub.on { background: var(--surface-selected); box-shadow: inset 3px 0 0 var(--action-primary); }
  .nav-sub .n-label { font-size: 13px; color: var(--text-body); }
  .nav-sub.on .n-label { color: var(--action-primary); font-weight: var(--weight-bold); }
  .nav-sub .cnt { margin-left: auto; font-size: var(--text-overline); color: var(--text-muted); }
  .chev {
    margin-left: auto; width: 7px; height: 7px; flex-shrink: 0; align-self: center;
    border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg); transition: transform 160ms var(--ease-standard);
  }
  .chev.open { transform: rotate(45deg); }
  .nav-divider { height: 1px; background: var(--border-subtle); margin: 6px var(--space-5); }

  /* ===== ① サイドバー：お気に入りの入口（設計書 §3-2） ===== */
  .nav-item.fav-nav .ic { color: var(--action-primary); }

  /* ===== 右ペイン ===== */
  main {
    flex: 1; min-width: 0; overflow-y: auto;
    background: var(--surface-canvas); display: flex; flex-direction: column;
  }

  .list-wrap { padding: var(--space-8) 36px var(--space-12) 36px; }
  .list-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6);
  }
  .crumb {
    font-size: var(--text-overline); letter-spacing: 0.1em;
    font-weight: var(--weight-bold); color: var(--action-primary); margin-bottom: 6px;
  }
  .list-title { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
  .list-title h1 { margin: 0; font-size: var(--text-h2); font-weight: var(--weight-bold); color: var(--text-heading); }
  .count { font-size: 12.5px; color: var(--text-secondary); margin-top: 6px; }
  .search {
    width: 280px; padding: 9px var(--space-3); font-size: 13px;
    border: 1px solid var(--border-default); border-radius: var(--radius-xs);
    background: var(--surface-card); color: var(--text-body); outline: none; font-family: inherit;
  }
  .search::placeholder { color: var(--text-muted); }
  .search:focus { border-color: var(--action-primary); box-shadow: var(--shadow-focus); }

  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
  .grid .card { animation: rise-in .35s var(--ease-standard) both; }
  .grid .card:nth-child(2) { animation-delay: .05s; }
  .grid .card:nth-child(3) { animation-delay: .1s; }
  .grid .card:nth-child(4) { animation-delay: .15s; }
  .grid .card:nth-child(n+5) { animation-delay: .2s; }
  .card {
    background: var(--surface-card); border: 1px solid var(--border-card);
    border-bottom: 2px solid var(--border-card); box-shadow: var(--shadow-sm);
    padding: var(--space-5); cursor: pointer; display: flex; flex-direction: column; gap: 7px;
    transition: border-bottom-color 160ms var(--ease-standard), background var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
  }
  .card:hover {
    border-bottom-color: var(--cat-accent); box-shadow: var(--shadow-md); transform: translateY(-2px);
  }
  .card .c-crumb {
    font-size: 10.5px; letter-spacing: 0.08em;
    font-weight: var(--weight-bold); color: var(--cat-accent);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .card .c-name { font-size: 16px; font-weight: var(--weight-bold); color: var(--text-heading); line-height: 1.4; }
  .card .c-desc {
    font-size: 12.5px; color: var(--text-body); line-height: var(--leading-relaxed);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card .c-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

  /* ===== 管理番号 ===== */
  .code {
    font-family: var(--font-mono); font-size: var(--text-overline);
    letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap;
  }
  .card .c-top { display: flex; align-items: center; gap: var(--space-3); }
  .card .c-tile {
    width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: var(--cat-accent-bg); color: var(--cat-accent); border-radius: var(--radius-sm);
  }
  .card .c-head { min-width: 0; }
  .card .c-top .code { margin-left: auto; flex-shrink: 0; align-self: flex-start; }
  .detail-card .d-code { margin-bottom: 6px; }

  /* ===== NEW バッジ（SVCS[].added から自動表示。成熟度バッジ .badge とは別物） ===== */
  .badge-new {
    display: inline-flex; align-items: center; flex-shrink: 0;
    font-family: var(--font-mono); font-size: var(--text-overline); font-weight: var(--weight-bold);
    letter-spacing: 0.06em; padding: 1px 6px; border-radius: var(--radius-xs);
    background: var(--badge-new-bg); color: var(--badge-new-fg);
  }
  /* カード右上：NEW と管理番号を 1 つのまとまりにして右端に寄せる（管理番号の右端は全カードで揃う） */
  .card .c-top .c-code {
    margin-left: auto; flex-shrink: 0; align-self: flex-start;
    display: flex; align-items: center; gap: 6px;
  }
  .detail-card .d-code .badge-new { margin-left: var(--space-2); }

  /* ===== お気に入り（星ボタン。設計書 2026-09-08-favorites.md §3-1／PM 指摘 2026-09-08 #1） =====
     塗り/輪郭という「形」で on/off を区別する（色だけに頼らない）。既存トークンのみ使用。
     カード右上に「絶対配置」して、通常のフローの幅を一切消費しない（.c-head / .c-name を元の幅に戻すため。
     .c-top に padding-right は足さない＝星の追加前とまったく同じ折り返し幅になる）。
     .c-code（NEW＋管理番号）は既存宣言で align-self: flex-start のため行の最上段に来ており、
     カード右上に固定した星と同じ帯にいる。そこで .c-code だけを margin-top で少し下げ、
     星の縦の帯（カード上端から 28px 分）を避けて重なりを無くす（追記のみ。既存宣言は書き換えない。
     .c-head 側の横幅には影響しない＝折り返し件数は変わらない）。 */
  .card { position: relative; }
  .card .c-top .c-code { margin-top: 20px; }
  .fav-btn {
    position: absolute; top: var(--space-2); right: var(--space-2);
    width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; border-radius: var(--radius-sm); color: var(--text-secondary);
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .fav-btn:hover { background: var(--surface-hover); color: var(--action-primary); }
  .fav-btn.on { color: var(--action-primary); }
  .fav-btn .ic-star { width: 18px; height: 18px; }

  /* ===== A: 分類アクセント（色とアイコン） ===== */
  .ic { width: 20px; height: 20px; flex-shrink: 0; display: block; }
  .ic-sm { width: 16px; height: 16px; }
  .ic-lg { width: 24px; height: 24px; }
  .ic-xl { width: 28px; height: 28px; }
  .cat-kn { --cat-accent: var(--cat-kn); --cat-accent-bg: var(--cat-kn-bg); }
  .cat-qa { --cat-accent: var(--cat-qa); --cat-accent-bg: var(--cat-qa-bg); }
  .cat-dc { --cat-accent: var(--cat-dc); --cat-accent-bg: var(--cat-dc-bg); }
  .cat-lg { --cat-accent: var(--cat-lg); --cat-accent-bg: var(--cat-lg-bg); }
  .cat-nm { --cat-accent: var(--cat-nm); --cat-accent-bg: var(--cat-nm-bg); }
  .cat-en { --cat-accent: var(--cat-en); --cat-accent-bg: var(--cat-en-bg); }
  .cat-gn { --cat-accent: var(--cat-gn); --cat-accent-bg: var(--cat-gn-bg); }
  .cat-pt { --cat-accent: var(--cat-pt); --cat-accent-bg: var(--cat-pt-bg); }

  .status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--text-overline); color: var(--text-secondary); margin-right: var(--space-1);
  }
  .dot { width: 7px; height: 7px; border-radius: 50%; }
  .dot.live { background: var(--status-success); }
  .dot.trial { background: var(--status-warning); }
  .dot.concept { background: var(--status-concept); }
  .tag {
    font-size: var(--text-overline); color: var(--text-secondary);
    border: 1px solid var(--border-card); border-radius: var(--radius-sm);
    padding: 2px var(--space-2); background: var(--surface-canvas);
  }

  /* ===== 本番リンク（設計書 2026-09-08-live-links.md §5-4）=====
     成熟度バッジ（塗りつぶし・アイコンなし）とは「枠線＋外部リンク矢印」という形で区別する（色だけに頼らない）。
     --action-primary ではなく --text-link を使う理由：dark で --action-primary は据え置きのため
     カード地に対するコントラストが 4.5:1 を割る。--text-link は dark で切り替わり light/dark とも AA を満たす（§5-4）。 */
  .live-mark {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: var(--text-overline); color: var(--text-link);
    border: 1px solid var(--text-link); border-radius: var(--radius-xs);
    padding: 2px var(--space-2);
  }
  .ic-live { width: 12px; height: 12px; flex-shrink: 0; }
  .empty { padding: 64px 0; text-align: center; color: var(--text-muted); font-size: 13.5px; line-height: 2; }

  /* ===== お気に入り一覧の空状態（noResults とは別物。設計書 §3-6） ===== */
  .fav-empty { display: flex; flex-direction: column; gap: var(--space-2); }
  .fav-empty-title { font-size: 14.5px; font-weight: var(--weight-bold); color: var(--text-heading); }
  .fav-empty-hint { font-size: 12.5px; color: var(--text-secondary); }

  /* ===== 詳細 ===== */
  .detail-wrap { padding: var(--space-6) 36px var(--space-12) 36px; max-width: 920px; }
  .backlink {
    border: none; background: transparent; padding: 6px 0; font-size: 13px; color: var(--text-link);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .backlink:hover { color: var(--text-link-hover); }
  .backlink .arrow {
    width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }
  .detail-card {
    margin-top: var(--space-3); background: var(--surface-card);
    border: 1px solid var(--border-card); border-bottom: var(--border-accent) solid var(--cat-accent);
    padding: var(--space-10); animation: rise-in .4s var(--ease-standard) both;
  }
  .detail-card .d-crumb {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-overline); letter-spacing: 0.1em;
    font-weight: var(--weight-bold); color: var(--cat-accent); margin-bottom: var(--space-3);
  }
  .detail-card h1 {
    margin: 0 0 6px 0; font-size: 28px; font-weight: var(--weight-bold);
    color: var(--text-heading); line-height: 1.35;
  }
  .detail-card .d-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0 28px; }
  .badge {
    display: inline-flex; align-items: center; font-size: 11.5px;
    font-weight: var(--weight-bold); padding: 3px 10px; border-radius: var(--radius-xs);
  }
  .badge.live { background: var(--badge-live-bg); color: var(--badge-live-fg); }
  .badge.trial { background: var(--badge-trial-bg); color: var(--badge-trial-fg); }
  .badge.concept { background: var(--badge-concept-bg); color: var(--badge-concept-fg); }
  .keyline { width: 32px; height: var(--border-accent); background: var(--action-primary); margin-bottom: var(--space-4); }
  .sec-label { font-size: 13px; font-weight: var(--weight-bold); color: var(--text-heading); margin-bottom: 10px; }
  .d-desc { margin: 0 0 var(--space-8) 0; font-size: 14.5px; line-height: 1.9; color: var(--text-body); }
  .cta-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
  .btn-primary {
    border: none; background: var(--action-primary); color: var(--text-on-brand);
    font-size: 15px; font-weight: var(--weight-bold); padding: 13px 28px; border-radius: var(--radius-xs);
    transition: background 160ms var(--ease-standard);
  }
  .btn-primary:hover { background: var(--action-primary-hover); }
  .btn-primary:active { background: var(--action-primary-active); }

  /* ===== お気に入り：詳細画面の文字ラベル付きトグル（設計書 §3-5） ===== */
  .btn-ghost {
    display: inline-flex; align-items: center; gap: var(--space-2);
    border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body);
    font-size: 15px; font-weight: var(--weight-bold); padding: 13px 22px; border-radius: var(--radius-xs);
    transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .btn-ghost:hover { border-color: var(--action-primary); color: var(--action-primary); }
  .btn-ghost.on { color: var(--action-primary); border-color: var(--action-primary); }
  .btn-ghost .ic-star { width: 18px; height: 18px; }
  .cta-note { font-size: 11.5px; color: var(--text-muted); }

  /* ===== 本番を開く（.btn-ghost を土台にした <a>。設計書 §5-4） ===== */
  .btn-live {
    display: inline-flex; align-items: center; gap: var(--space-2);
    border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-link);
    font-size: 15px; font-weight: var(--weight-bold); padding: 13px 22px; border-radius: var(--radius-xs);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .btn-live:hover { border-color: var(--text-link-hover); color: var(--text-link-hover); }
  .btn-live .ic-live { width: 16px; height: 16px; }
  .cta-note-live { font-size: 11.5px; color: var(--text-secondary); }

  /* ===== チャット ===== */
  .chat-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .chat-hdr {
    flex-shrink: 0; display: flex; align-items: center; gap: var(--space-4);
    padding: 14px 36px; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle);
  }
  .chat-hdr .vline { width: 1px; height: 24px; background: var(--border-subtle); }
  .chat-hdr .ct1 { font-size: 14px; font-weight: var(--weight-bold); color: var(--text-heading); }
  .chat-hdr .status { margin-left: auto; }
  .msgs {
    flex: 1; min-height: 0; overflow-y: auto; padding: 28px 36px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .msg-row { display: flex; }
  .msg-row.user { justify-content: flex-end; }
  .bubble {
    max-width: 560px; padding: var(--space-3) var(--space-4); font-size: 13.5px; line-height: 1.75;
    white-space: pre-line; border-radius: var(--radius-xs);
    background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-card);
  }
  .msg-row.user .bubble {
    background: var(--action-primary); color: var(--text-on-brand); border-color: var(--action-primary);
    white-space: pre-wrap; overflow-wrap: anywhere;
  }
  /* ===== 考え中インジケータ（Issue #39：文言は使わず 3 点ドットの脈打ちのみ） ===== */
  .bubble.typing { display: inline-flex; align-items: center; padding: 14px var(--space-4); }
  .qa-highlight { background: var(--status-warning); color: var(--surface-inverse); padding: 0 0.08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .think-dots { display: inline-flex; align-items: center; gap: 4px; }
  .think-dots span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
    animation: think-pulse 1.1s ease-in-out infinite;
  }
  .think-dots span:nth-child(2) { animation-delay: .15s; }
  .think-dots span:nth-child(3) { animation-delay: .3s; }
  @keyframes think-pulse {
    0%, 80%, 100% { opacity: .25; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
  }
  .processing { display: flex; align-items: center; justify-content: center; padding: var(--space-5) 0; }
  .chat-input-row {
    flex-shrink: 0; display: flex; align-items: flex-end; gap: var(--space-3); padding: var(--space-4) 36px;
    background: var(--surface-card); border-top: 1px solid var(--border-subtle);
  }
  .chat-input {
    flex: 1; padding: 11px 14px; font-size: 13.5px; border: 1px solid var(--border-default);
    border-radius: var(--radius-xs); background: var(--surface-card); color: var(--text-body);
    outline: none; font-family: inherit; line-height: 20px; box-sizing: border-box;
    min-width: 0; min-height: 64px; max-height: 160px; resize: none;
  }
  .chat-input::placeholder { color: var(--text-muted); }
  .chat-input:focus { border-color: var(--action-primary); box-shadow: var(--shadow-focus); }
  .btn-send {
    border: none; background: var(--action-primary); color: var(--text-on-brand);
    font-size: 13.5px; font-weight: var(--weight-bold); padding: 0 var(--space-6); border-radius: var(--radius-xs);
  }
  .btn-send:hover { background: var(--action-primary-hover); }
  .chat-input-row .btn-send, .chat-input-row .upbtn { height: 40px; flex-shrink: 0; }
  .btn-send:disabled, .upbtn:disabled { opacity: 0.45; cursor: default; }

  /* ===== Phase 2 プレースホルダ ===== */
  .todo-wrap {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: var(--space-12) 36px;
  }
  .todo-card {
    max-width: 560px; text-align: center; background: var(--surface-card);
    border: 1px dashed var(--border-default); padding: var(--space-12) var(--space-10);
  }
  .todo-card .t-eyebrow {
    font-size: var(--text-overline); letter-spacing: var(--tracking-overline);
    font-weight: var(--weight-bold); color: var(--action-primary); margin-bottom: var(--space-3);
  }
  .todo-card h2 { margin: 0 0 var(--space-4); font-size: var(--text-h3); color: var(--text-heading); font-weight: var(--weight-bold); }
  .todo-card p { margin: 0; font-size: 13.5px; line-height: var(--leading-relaxed); color: var(--text-secondary); }

  /* ===== B: 詳細画面の担当者・利用シナリオ ===== */
  .persona {
    display: flex; gap: var(--space-3); align-items: center;
    padding: var(--space-4); border: 1px solid var(--border-card); background: var(--surface-sunken);
  }
  .persona .p-name { font-weight: var(--weight-bold); color: var(--text-heading); font-size: 14px; }
  .persona .p-role { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
  .persona .p-native { font-size: var(--text-overline); letter-spacing: 0.06em; color: var(--text-muted); margin-top: 4px; }
  .d-two { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); margin-bottom: var(--space-6); align-items: start; }
  .tpl-badge {
    display: inline-flex; align-items: center; font-size: 11.5px; font-weight: var(--weight-bold);
    padding: 3px 10px; border-radius: var(--radius-xs);
    background: var(--badge-trial-bg); color: var(--badge-trial-fg);
  }
  .steps { margin: 0 0 var(--space-8); padding-left: 1.4em; font-size: 14px; line-height: 1.9; color: var(--text-body); }
  .steps li::marker { color: var(--action-primary); font-weight: var(--weight-bold); }

  /* ===== B: 業務デモ画面 ===== */
  .demo-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .demo-body { flex: 1; min-height: 0; display: flex; }
  .work-pane {
    flex: 0 0 50%; min-width: 360px; overflow-y: auto;
    border-right: 1px solid var(--border-subtle); padding: var(--space-5) var(--space-6);
    background: var(--surface-canvas);
  }
  .chat-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface-card); }
  .panel {
    background: var(--surface-card); border: 1px solid var(--border-card);
    padding: var(--space-4); margin-bottom: var(--space-4); overflow-x: auto;
    max-width: 100%; -webkit-overflow-scrolling: touch;
  }
  .panel-h { font-size: 13px; font-weight: var(--weight-bold); color: var(--text-heading); margin-bottom: 10px; }
  .panel.result { border-top: var(--border-accent) solid var(--action-primary); box-shadow: var(--shadow-md); animation: rise-in .45s var(--ease-standard) both; }
  .drop {
    border: 1px dashed var(--border-default); padding: var(--space-4); text-align: center;
    color: var(--text-muted); font-size: 12.5px; margin-bottom: var(--space-2);
  }
  .file {
    font-size: var(--text-overline); color: var(--text-secondary);
    border: 1px solid var(--border-card); border-radius: var(--radius-sm);
    padding: 2px var(--space-2); background: var(--surface-canvas);
    display: inline-flex; margin: 4px 4px 0 0;
  }
  /* ===== アップロード部品（ドロップゾーン／サンプル／プレビュー。設計書 2026-09-16-showcase-demo.md §10） ===== */
  .upzone { cursor: pointer; }
  .upzone.dragover { border-color: var(--action-primary); background: var(--surface-selected); color: var(--text-body); }
  .upinput { display: none; }
  .upactions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-2); }
  .upbtn {
    border: 1px solid var(--border-brand); background: var(--surface-card); color: var(--text-link);
    border-radius: var(--radius-pill); padding: 5px 14px; font-size: 12.5px; font-family: inherit; cursor: pointer;
  }
  .upbtn:hover { background: var(--surface-selected); }
  .upfiles { display: flex; flex-direction: column; gap: var(--space-2); }
  .upitem { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .upimage { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); max-width: 100%; padding: var(--space-1); border: none; border-radius: var(--radius-sm); background: transparent; font: inherit; color: var(--text-body); text-align: left; cursor: zoom-in; }
  .upimage .file { overflow-wrap: anywhere; }
  .upimage:hover { background: var(--surface-selected); }
  .upthumb { width: 120px; height: 120px; object-fit: contain; background: var(--surface-canvas); border: 1px solid var(--border-card); border-radius: var(--radius-sm); }
  .upimage:focus-visible, .up-preview button:focus-visible, .up-preview-stage:focus-visible { outline: 2px solid var(--action-primary); outline-offset: 2px; box-shadow: var(--shadow-focus); }
  .up-preview { box-sizing: border-box; width: calc(100vw - 32px); height: calc(100vh - 32px); height: calc(100dvh - 32px); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid var(--border-card); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-body); font: inherit; box-shadow: var(--shadow-md); overflow: hidden; }
  .up-preview[open] { display: flex; flex-direction: column; }
  .up-preview::backdrop { background: var(--surface-inverse); opacity: 0.75; }
  .up-preview-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-2); flex-shrink: 0; }
  .up-preview-header h2 { margin: 0; font-size: var(--text-h3); color: var(--text-heading); }
  .up-preview-header button { flex-shrink: 0; }
  .up-preview-meta { display: flex; align-items: flex-start; gap: var(--space-3); padding: 0 var(--space-4) var(--space-2); font-size: 13px; flex-shrink: 0; }
  #up-preview-name { min-width: 0; flex: 1; overflow-wrap: anywhere; }
  #up-preview-position { color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .up-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); flex-wrap: wrap; padding: 0 var(--space-4) var(--space-3); flex-shrink: 0; }
  .up-preview-nav, .up-preview-zoom { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
  .up-preview-nav[hidden] { display: none; }
  .up-preview button:disabled { opacity: 0.45; cursor: default; }
  .up-preview button:disabled:hover { background: var(--surface-card); }
  #up-preview-zoom { color: var(--text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
  .up-preview-stage { flex: 1; min-height: 0; min-width: 0; overflow: auto; background: var(--surface-canvas); border-block: 1px solid var(--border-card); overscroll-behavior: contain; }
  .up-preview-canvas { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: max-content; height: max-content; min-width: 100%; min-height: 100%; padding: var(--space-4); }
  .up-preview-image { display: block; max-width: none; flex-shrink: 0; }
  .up-preview-image[hidden], .up-preview-error[hidden] { display: none; }
  .up-preview-error { margin: 0; color: var(--text-secondary); }
  .up-preview-note { flex-shrink: 0; padding: var(--space-3) var(--space-4); font-size: var(--text-overline); color: var(--text-muted); line-height: var(--leading-relaxed); }
  .work-pane[hidden] { display: none; }
  .demo-chat-only .chat-pane { width: 100%; }
  .qa-attachments[hidden], .chat-attachments[hidden], .pending-attachments[hidden] { display: none; }
  .qa-attachments, .chat-attachments { flex-shrink: 0; max-height: 320px; margin: 0; padding: var(--space-3) var(--space-6); border-top: 1px solid var(--border-card); overflow-y: auto; }
  .pending-attachments { max-height: 320px; overflow-y: auto; }
  .qa-attachments .upfiles { flex-direction: row; overflow-x: auto; }
  .qa-attachments .upitem { flex: 0 0 180px; min-width: 140px; }
  .sent-attachments { margin-top: 8px; }
  .sent-attachments-label { margin-bottom: 8px; font-size: var(--text-overline); }
  .sent-attachments-items { display: flex; flex-wrap: wrap; gap: 8px; }
  .sent-attachments .upitem { max-width: 144px; min-width: 0; }
  .sent-attachments .file { max-width: 100%; overflow-wrap: anywhere; }
  .sent-attachments .upaudio { max-width: 144px; }
  .qa-chat-demo .chips { max-height: 150px; overflow-y: auto; }
  .qa-chat-demo .work-pane .tbl td:first-child { white-space: nowrap; }
  .qa-chat-demo .work-pane .qa-history-result .tbl { table-layout: fixed; width: 100%; }
  .qa-chat-demo .work-pane .qa-history-result .tbl :is(th, td):nth-child(1) { width: 30%; }
  .qa-chat-demo .work-pane .qa-history-result .tbl :is(th, td):nth-child(2) { width: 26%; }
  .qa-chat-demo .work-pane .qa-history-result .tbl :is(th, td):nth-child(3) { width: 44%; }
  .qa-photo-add { flex-shrink: 0; }
  .qa-demo-note { flex-shrink: 0; padding: var(--space-2) var(--space-6); font-size: var(--text-overline); color: var(--text-muted); border-top: 1px solid var(--border-card); }
  .qa-previous-result { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-card); }
  .qa-previous-result summary { color: var(--text-link); font-size: 13px; font-weight: var(--weight-medium); cursor: pointer; }
  .qa-history-note { color: var(--text-body); font-size: 13px; line-height: var(--leading-relaxed); }
  .gn2-chat-demo .gn2-table-scroll { overflow-x: auto; }
  .gn2-chat-demo .gn2-table-scroll .tbl { min-width: 660px; }
  .gn2-chat-demo .gn2-collection-result .tbl { min-width: 0; width: 100%; table-layout: fixed; }
  .gn2-chat-demo .gn2-collection-result .tbl :is(th, td) { padding: var(--space-2) var(--space-1); }
  .gn2-chat-demo .gn2-collection-result .tbl :is(th, td):nth-child(1) { width: 22%; white-space: nowrap; }
  .gn2-chat-demo .gn2-collection-result .tbl :is(th, td):nth-child(2) { width: 15%; }
  .gn2-chat-demo .gn2-collection-result .tbl :is(th, td):nth-child(3) { width: 23%; white-space: normal; }
  .gn2-chat-demo .gn2-collection-result .tbl :is(th, td):nth-child(4) { width: 17%; }
  .gn2-chat-demo .gn2-collection-result .tbl :is(th, td):nth-child(5) { width: 23%; white-space: normal; }
  .gn2-chat-demo .gn2-collection-result .tbl :is(th, td):nth-child(4), .gn2-chat-demo .gn2-input-preview .tbl :is(th, td):nth-child(5) { text-align: right; white-space: nowrap; }
  .gn2-chat-demo .gn2-collection-result .tbl th:nth-child(4) { white-space: normal; }
  .gn2-chat-demo .gn2-input-preview .tbl :is(th, td):nth-child(1), .gn2-chat-demo .gn2-input-preview .tbl :is(th, td):nth-child(3), .gn2-chat-demo .gn2-input-preview .tbl :is(th, td):nth-child(4) { white-space: nowrap; }
  .gn2-chat-demo .gn2-input-preview, .gn2-chat-demo .gn2-previous-result { margin-top: var(--space-3); }
  .gn2-chat-demo .gn2-input-preview summary, .gn2-chat-demo .gn2-previous-result summary { color: var(--text-link); font-size: 13px; cursor: pointer; }
  .gn2-chat-demo .gn2-download { display: inline-block; margin-top: var(--space-3); }
  .qa-draft-header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); font-size: 13px; color: var(--text-heading); }
  .qa-draft-header span { color: var(--text-secondary); font-size: 12px; }
  .qa-draft-changes { padding: var(--space-3) 0; margin-bottom: var(--space-3); border-block: 1px solid var(--border-card); }
  .qa-draft-changes-title { margin-bottom: var(--space-2); font-size: 12px; font-weight: var(--weight-bold); color: var(--text-heading); }
  .qa-draft-change { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.15fr); gap: var(--space-2); font-size: 12px; line-height: 1.7; }
  .qa-draft-change + .qa-draft-change { margin-top: var(--space-2); }
  .qa-draft-before, .qa-draft-arrow { color: var(--text-secondary); }
  .qa-draft-after { color: var(--text-body); }
  @media (max-width: 520px) {
    .qa-draft-change { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
    .qa-draft-arrow { display: none; }
  }
  .nm-summary-action { margin-top: var(--space-3); }
  .nm-summary-dialog { width: min(1280px, calc(100vw - 32px)); height: min(720px, calc(100vh - 32px)); height: min(720px, calc(100dvh - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid var(--border-card); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-body); font: inherit; box-shadow: var(--shadow-md); overflow: hidden; }
  .nm-summary-dialog[open] { display: flex; flex-direction: column; }
  .nm-summary-dialog::backdrop { background: var(--surface-inverse); opacity: 0.75; }
  .nm-summary-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-8) var(--space-4); border-bottom: 1px solid var(--border-card); flex-shrink: 0; }
  .nm-summary-header h2 { margin: 0 0 var(--space-1); font-size: var(--text-h2); color: var(--text-heading); font-weight: var(--weight-bold); }
  #nm-summary-period { color: var(--text-secondary); font-size: 14px; }
  .nm-summary-header button { flex-shrink: 0; }
  .nm-summary-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .nm-summary-dialog button:focus-visible, .nm-summary-body:focus-visible { outline: 2px solid var(--action-primary); outline-offset: 2px; box-shadow: var(--shadow-focus); }
  .nm-summary-sheet { padding: var(--space-5) var(--space-8) var(--space-6); }
  .nm-summary-kicker { font-size: 13px; color: var(--text-secondary); margin-bottom: var(--space-3); }
  .nm-summary-figures { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); }
  .nm-summary-sheet h3 { margin: 0 0 var(--space-3); color: var(--text-heading); font-size: 16px; font-weight: var(--weight-bold); }
  .nm-summary-table-wrap { overflow-x: auto; }
  .nm-summary-table { width: 100%; min-width: 440px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .nm-summary-table thead th { padding: var(--space-3) var(--space-2); border-block: 1px solid var(--border-card); font-size: 13px; color: var(--text-secondary); font-weight: var(--weight-medium); text-align: right; }
  .nm-summary-table thead th:first-child { text-align: left; }
  .nm-summary-table tbody th, .nm-summary-table td { padding: var(--space-4) var(--space-2); border-bottom: 1px solid var(--border-subtle); font-size: 23px; line-height: 1.2; text-align: right; }
  .nm-summary-table tbody th { text-align: left; font-size: 18px; color: var(--text-heading); }
  .nm-summary-focus-line { background: var(--surface-selected); }
  .nm-summary-focus-line td { color: var(--text-link); font-weight: var(--weight-bold); }
  .nm-summary-shifts { display: flex; flex-direction: column; gap: var(--space-3); }
  .nm-summary-shift { display: grid; grid-template-columns: minmax(60px, auto) minmax(0, 1fr) 72px; align-items: center; gap: var(--space-3); font-size: 14px; }
  .nm-summary-shift strong { text-align: right; font-size: 21px; font-variant-numeric: tabular-nums; }
  .nm-summary-bar-track { height: 22px; background: var(--surface-sunken); }
  .nm-summary-bar { height: 100%; }
  .nm-summary-bar-day { background: var(--text-muted); }
  .nm-summary-bar-night { background: var(--action-primary); }
  .nm-summary-defects { margin-top: var(--space-6); }
  .nm-summary-stack { display: flex; width: 100%; height: 24px; }
  .nm-summary-segment { display: block; height: 100%; }
  .nm-summary-segment-particles { background: var(--action-primary); }
  .nm-summary-segment-thinCoat { background: var(--status-info); }
  .nm-summary-segment-dents { background: var(--status-success); }
  .nm-summary-segment-other { background: var(--text-muted); }
  .nm-summary-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: var(--space-3) 0 0; }
  .nm-summary-legend li { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; }
  .nm-summary-legend strong { margin-left: auto; font-size: 15px; font-variant-numeric: tabular-nums; }
  .nm-summary-legend-dot { width: 10px; height: 10px; flex-shrink: 0; }
  .nm-summary-actions { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); padding-top: var(--space-5); margin-top: var(--space-6); border-top: 1px solid var(--border-card); }
  .nm-summary-actions ul { margin: 0; padding-left: 1.3em; font-size: 15px; line-height: 1.8; }
  .nm-summary-footnote { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-5); font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
  .nm-summary-footnote p { margin: 0; }
  @media (max-width: 760px) {
    .nm-summary-header { padding: var(--space-4); }
    .nm-summary-header h2 { font-size: 22px; }
    .nm-summary-sheet { padding: var(--space-4); }
    .nm-summary-figures, .nm-summary-actions { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .nm-summary-legend { grid-template-columns: minmax(0, 1fr); }
  }
  .upaudio { width: 100%; max-width: 320px; }
  .upnote { font-size: var(--text-overline); color: var(--text-muted); margin-top: var(--space-3); }
  .field { margin-bottom: var(--space-3); }
  .field label {
    display: block; font-size: var(--text-overline); letter-spacing: 0.06em;
    color: var(--text-secondary); margin-bottom: 4px;
  }
  .field .val {
    width: 100%; padding: 9px var(--space-3); font-size: 13px;
    border: 1px solid var(--border-default); border-radius: var(--radius-xs);
    background: var(--surface-card); color: var(--text-body);
  }
  .diff-in { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-2); align-items: center; }
  .run-row { display: flex; justify-content: flex-end; margin-top: var(--space-3); }
  .run-row .btn-primary { padding: 9px 20px; font-size: 13.5px; }
  .run-row .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
  .panel.done { opacity: .6; }
  .kv { padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
  .kv:first-child { border-top: none; }
  .kv .k { font-size: 12px; font-weight: var(--weight-bold); color: var(--text-heading); }
  .kv .v { font-size: 13px; color: var(--text-body); white-space: pre-line; margin-top: 4px; }
  .tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .tbl th { background: var(--surface-sunken); text-align: left; padding: var(--space-2); }
  .tbl td { border-top: 1px solid var(--border-subtle); padding: var(--space-2); }
  .chips {
    flex-shrink: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
    padding: var(--space-2) 36px; border-top: 1px solid var(--border-subtle);
    font-size: 12px; color: var(--text-secondary);
  }
  .chip {
    border: 1px solid var(--border-brand); color: var(--text-link); background: var(--surface-card);
    border-radius: var(--radius-pill); padding: 5px 12px; font-size: 12.5px; max-width: 420px;
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
  }
  .chip:hover { background: var(--surface-selected); }
  .chip .cl { font-weight: var(--weight-bold); margin-right: 6px; color: var(--text-muted); }
  .chat-hdr .tpl-badge { margin-left: var(--space-2); }
  .chat-hdr .who { font-size: 12.5px; color: var(--text-secondary); margin-left: var(--space-2); }
  .chat-hdr .restart { margin-left: var(--space-3); }

  /* ===== ② ダッシュボード（ホーム）——— design-pass-2：A案「製造ライン」ヒーロー ===== */
  .dash-wrap { padding: 0; }
  @keyframes belt-run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -240; } }
  @keyframes node-pulse { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
  @keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .hero {
    position: relative; overflow: hidden;
    background: var(--surface-hero);
    border-bottom: var(--border-accent) solid var(--border-hero-accent);
    padding: var(--space-10) 36px;
  }
  .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-bg .h-line { stroke: var(--status-info); stroke-width: 1; }
  .hero-bg .h-belt {
    stroke: var(--border-hero-accent); stroke-width: 2; stroke-dasharray: 34 206;
    animation: belt-run 7s linear infinite;
  }
  .hero-bg .h-node { fill: var(--status-info); animation: node-pulse 3s var(--ease-standard) infinite; }
  .hero::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, var(--surface-hero) 10%, transparent 66%);
  }
  .hero-flex {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-12); flex-wrap: wrap;
  }
  .hero-copy { flex: 1; min-width: 360px; animation: rise-in .5s var(--ease-standard) both; }
  .hero-eyebrow {
    font-size: var(--text-overline); letter-spacing: var(--tracking-overline);
    font-weight: var(--weight-bold); color: var(--status-info); margin-bottom: var(--space-3);
  }
  .hero h1 {
    margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 42px;
    font-weight: var(--weight-bold); color: var(--text-on-hero);
    line-height: var(--leading-snug); letter-spacing: var(--tracking-tight);
  }
  .hero p {
    margin: 0 0 var(--space-5); max-width: 54ch; font-size: 14.5px; line-height: var(--leading-relaxed);
    color: var(--text-on-hero-soft);
  }
  .hero .search {
    width: 380px; max-width: 100%; box-shadow: none;
    background: var(--surface-hero-chip); border: 1px solid var(--border-hero); color: var(--text-on-hero);
  }
  .hero .search::placeholder { color: var(--text-on-hero-soft); }
  .stat-strip {
    display: flex; align-items: center; gap: var(--space-8);
    padding-left: var(--space-10); border-left: 1px solid var(--border-hero);
    animation: rise-in .5s var(--ease-standard) .12s both;
  }
  .stat-total .stat-n {
    font-family: var(--font-display); font-size: 80px; line-height: .95; font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight); color: var(--text-on-hero); font-variant-numeric: tabular-nums;
  }
  .stat-total .stat-l { margin-top: var(--space-2); font-size: 12px; color: var(--text-on-hero-soft); }
  .stat-col { display: flex; flex-direction: column; gap: var(--space-4); }
  .stat-row { display: flex; align-items: baseline; gap: 10px; border-left: var(--border-accent) solid var(--border-hero); padding-left: var(--space-3); }
  .stat-row .stat-n { font-size: 26px; font-weight: var(--weight-bold); line-height: 1; font-variant-numeric: tabular-nums; min-width: 36px; }
  .stat-row .stat-l { font-size: 12px; color: var(--text-on-hero-soft); }
  .stat-row.s-live { border-left-color: var(--status-live-hero); }
  .stat-row.s-live .stat-n { color: var(--status-live-hero); }
  .stat-row.s-trial { border-left-color: var(--status-trial-hero); }
  .stat-row.s-trial .stat-n { color: var(--status-trial-hero); }
  .stat-row.s-concept { border-left-color: var(--status-concept-hero); }
  .stat-row.s-concept .stat-n { color: var(--status-concept-hero); }
  .dash-body { padding: var(--space-10) 36px var(--space-12); }
  .dash-sec { margin-bottom: var(--space-12); animation: rise-in .5s var(--ease-standard) both; }
  .dash-sec:nth-child(2) { animation-delay: .1s; }
  .dash-sec:nth-child(3) { animation-delay: .2s; }
  /* おすすめ（左）× よく使われている（右）の2列 */
  .dash-duo {
    display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: var(--space-8); align-items: start; margin-bottom: var(--space-12);
  }
  .dash-duo .dash-sec { margin-bottom: 0; }
  .dash-duo .dash-sec + .dash-sec { border-top: none; padding-top: 0; }
  .dash-col { min-width: 0; display: flex; flex-direction: column; gap: var(--space-10); }
  .dash-col .dash-sec + .dash-sec { border-top: 1px solid var(--border-subtle); padding-top: var(--space-8); }
  .dash-sec + .dash-sec { border-top: 1px solid var(--border-subtle); padding-top: var(--space-10); }
  .sec-h {
    display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4);
    border-left: var(--border-accent) solid var(--action-primary); padding-left: var(--space-3);
  }
  .sec-h h2 { margin: 0; font-size: 16px; font-weight: var(--weight-bold); color: var(--text-heading); }
  .sec-note { font-size: 11.5px; color: var(--text-muted); margin-left: auto; }
  .sec-count { font-size: var(--text-overline); color: var(--text-muted); }
  .legend { display: flex; gap: var(--space-3); margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
  .lg-i { display: inline-flex; align-items: center; gap: 5px; }
  /* --- ②③「すべて見る」（お気に入りが 6 件を超えたとき。設計書 2026-09-08-favorites.md §3-3・§3-4） --- */
  .sec-more {
    border: none; background: transparent; padding: 0; font-family: inherit; cursor: pointer;
    font-size: 11.5px; font-weight: var(--weight-bold); color: var(--text-link); white-space: nowrap;
  }
  .sec-more:hover { color: var(--text-link-hover); text-decoration: underline; }

  /* --- 新しく追加されたエージェント（②。新着 0 件なら帯ごと出ない） --- */
  .dash-new .new-item { display: flex; flex-direction: column; gap: 6px; }
  .dash-new .new-date {
    font-family: var(--font-mono); font-size: var(--text-overline);
    letter-spacing: 0.04em; color: var(--text-muted);
  }

  /* --- よく使われているエージェント（横棒ランキング） --- */
  .use-list { border-top: 1px solid var(--border-subtle); }
  .use-row {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(120px, 26%) 6.5em 12px;
    align-items: center; gap: var(--space-4); width: 100%; text-align: left;
    padding: var(--space-3) var(--space-2); border: none; border-bottom: 1px solid var(--border-subtle);
    background: transparent; font-family: inherit; cursor: pointer;
  }
  .use-row:hover { background: var(--surface-hover); }
  .use-rank {
    font-size: 13px; font-weight: var(--weight-bold); color: var(--text-muted);
    text-align: right; font-variant-numeric: tabular-nums;
  }
  .use-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .use-name {
    display: flex; align-items: center; gap: 6px; font-size: 14.5px;
    font-weight: var(--weight-bold); color: var(--text-heading); min-width: 0;
  }
  .use-name .ic { color: var(--cat-accent); }
  .use-name .code { margin-left: var(--space-2); }
  .use-sub { display: flex; align-items: center; gap: var(--space-2); font-size: 11.5px; color: var(--text-secondary); }
  .use-bar { height: 10px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
  .use-fill { display: block; height: 100%; background: var(--cat-accent); border-radius: var(--radius-pill); transform-origin: left; animation: grow-x .7s var(--ease-standard) .25s both; }
  .use-n {
    font-size: 12.5px; font-weight: var(--weight-bold); color: var(--text-body);
    white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right;
  }

  /* --- おすすめ --- */
  .reco-panel {
    background: var(--surface-sunken); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm); padding: var(--space-6);
  }
  .dash-sec + .dash-sec.reco-panel { padding-top: var(--space-6); }
  .reco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
  .reco-item { display: flex; flex-direction: column; gap: var(--space-3); }
  .r-why {
    font-size: 12.5px; line-height: var(--leading-relaxed); color: var(--text-body);
    background: var(--surface-card); border: 1px solid var(--border-subtle); padding: var(--space-3);
  }
  .r-why-l { font-size: var(--text-overline); font-weight: var(--weight-bold); color: var(--action-primary); margin-right: 6px; }

  /* --- 分類から見る --- */
  .cat-row {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) 8em minmax(120px, 26%) 6.5em 12px;
    align-items: center; gap: var(--space-4); width: 100%; text-align: left;
    padding: 12px var(--space-4); border: none; border-top: 1px solid var(--border-subtle); background: transparent;
    cursor: pointer; font-family: inherit;
  }
  .cat-row:hover { background: var(--surface-hover); }
  .cat-tile {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: var(--cat-accent-bg); color: var(--cat-accent); border-radius: var(--radius-sm);
  }
  .cat-row .c-nm { font-size: 14px; font-weight: var(--weight-bold); color: var(--text-heading); }
  .cat-bar-track { display: block; height: 12px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
  .cat-bar { display: flex; height: 100%; gap: 2px; overflow: hidden; border-radius: var(--radius-pill); }
  .cat-bar span { transform-origin: left; animation: grow-x .7s var(--ease-standard) .2s both; }
  .cat-bar .s-live { background: var(--status-success); }
  .cat-bar .s-trial { background: var(--status-warning); }
  .cat-bar .s-concept { background: var(--status-concept); }
  .cat-mix { font-size: var(--text-overline); color: var(--text-secondary); }
  .cat-chev {
    width: 7px; height: 7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
  }
  .home-count { font-size: 12.5px; color: var(--text-secondary); margin-bottom: var(--space-4); }

  /* ===== ③ 業務フィード（ホーム） =====
     design-pass §9：ヒーロー帯は置かず薄いヘッダー。統計 4 枚も出さない
     （数字は節ごとの .sec-count が担う） */
  .feed-wrap { padding: 0; }
  .feed-head {
    background: var(--surface-card); border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-6) 36px;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-6); flex-wrap: wrap;
  }
  .feed-head h1 { margin: 0 0 var(--space-2); font-size: var(--text-h2); font-weight: var(--weight-bold); color: var(--text-heading); }
  .feed-head p { margin: 0; max-width: 62ch; font-size: 13.5px; line-height: var(--leading-relaxed); color: var(--text-secondary); }
  .feed-who { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
  .feed-who .avatar { width: 26px; height: 26px; font-size: 12px; }
  .feed-who span { font-size: 12.5px; color: var(--text-secondary); }
  .feed-body {
    padding: var(--space-8) 36px var(--space-12);
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-8); align-items: start;
  }
  .feed-main { min-width: 0; }
  .feed-sec { margin-bottom: var(--space-8); animation: rise-in .5s var(--ease-standard) both; }
  .feed-sec:nth-child(2) { animation-delay: .1s; }
  .feed-sec:nth-child(3) { animation-delay: .2s; }
  .feed-side { display: flex; flex-direction: column; gap: var(--space-4); }

  /* --- フィード項目：分類の顔（アイコン・色）＋種別（緊急度）の左ボーダー --- */
  .feed-item {
    display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-4) var(--space-3);
    align-items: start; width: 100%; text-align: left; font-family: inherit; cursor: pointer;
    background: var(--surface-card); border: 1px solid var(--border-card);
    border-left: var(--border-accent) solid var(--border-card); box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3);
    transition: box-shadow var(--duration-base) var(--ease-standard), border-left-color 160ms var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
  }
  .feed-item:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
  .feed-item.due { border-left-color: var(--status-danger); }
  .feed-item.routine { border-left-color: var(--status-info); }
  .feed-item.notify { border-left-color: var(--status-concept); }
  .fi-tile {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: var(--cat-accent-bg); color: var(--cat-accent); border-radius: var(--radius-sm);
  }
  .fi-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .fi-h { display: flex; align-items: center; gap: var(--space-2); }
  .fi-kind { font-size: var(--text-overline); font-weight: var(--weight-bold); padding: 2px var(--space-2); border-radius: var(--radius-xs); }
  .fi-kind.due { background: var(--badge-due-bg); color: var(--status-danger-text); }
  .fi-kind.notify { background: var(--badge-concept-bg); color: var(--badge-concept-fg); }
  .fi-kind.routine { background: var(--badge-trial-bg); color: var(--badge-trial-fg); }
  .fi-when { font-size: 12px; color: var(--text-secondary); }
  .feed-item.due .fi-when { color: var(--status-danger-text); font-weight: var(--weight-bold); }
  .fi-title { font-size: 15px; font-weight: var(--weight-bold); color: var(--text-heading); }
  .fi-note { font-size: 12.5px; line-height: var(--leading-relaxed); color: var(--text-body); }
  .fi-foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: 4px; }
  .fi-cat { font-size: var(--text-overline); color: var(--cat-accent); font-weight: var(--weight-bold); }
  .fi-open { margin-left: auto; font-size: 12.5px; color: var(--text-link); }

  /* --- 右レール：担当分類 / 最近使った --- */
  .side-box { background: var(--surface-card); border: 1px solid var(--border-card); box-shadow: var(--shadow-sm); padding: var(--space-4); }
  .feed-side .side-box { animation: rise-in .5s var(--ease-standard) .12s both; }
  .side-box h3 {
    margin: 0 0 var(--space-3); font-size: 13px; font-weight: var(--weight-bold); color: var(--text-heading);
    border-left: var(--border-accent) solid var(--action-primary); padding-left: var(--space-3);
  }
  .side-link {
    display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left;
    border: none; border-top: 1px solid var(--border-subtle); background: transparent;
    padding: 8px 0; font-size: 13px; color: var(--text-body); cursor: pointer; font-family: inherit;
  }
  .side-link .ic { color: var(--cat-accent); }
  .side-link:hover { color: var(--text-link); }
  .side-link .cnt { margin-left: auto; font-size: var(--text-overline); color: var(--text-muted); }

  /* --- 右レール最上段：お気に入り（③。設計書 2026-09-08-favorites.md §3-4。0 件ならボックスごと出ない） ---
     行は catIcon＋名前だけ（.side-link は <button> のため星ボタンを行に置かない。§3-1）。
     見出しの星は h3 の中の装飾アイコン（ボタンではないので入れ子の問題は起きない） */
  .side-box.fav-box h3 { display: flex; align-items: center; gap: 6px; }
  .side-box.fav-box h3 .ic { color: var(--action-primary); flex-shrink: 0; }
  .side-link.side-more { color: var(--text-link); font-weight: var(--weight-bold); justify-content: center; }
  .side-link.side-more:hover { color: var(--text-link-hover); }

  @media (max-width: 1180px) {
    .demo-body { flex-direction: column; }
    .work-pane { flex: 0 0 auto; max-width: none; border-right: none; border-bottom: 1px solid var(--border-subtle); }
    /* 狭い画面の結果表：折り返して崩れる代わりに横スクロールさせる（.panel 側の
       overflow-x は既存）。1180px 超では触らない＝デスクトップの見た目は変えない。
       Issue: mobile-table-scroll */
    .tbl th, .tbl td { white-space: nowrap; }
    /* ▼ 追記（②③ ホーム） */
    .dash-hero { flex-direction: column; align-items: stretch; }
    .dash-hero .search { width: 100%; }
    .cat-row { grid-template-columns: 1fr auto; row-gap: var(--space-2); }
    /* ▼ デザインパス（#42 PR-3 → design-pass-2 で更新） */
    .hero { padding: var(--space-8) var(--space-5); }
    .hero-flex { flex-direction: column; align-items: stretch; }
    .hero-copy { min-width: 0; }
    .hero .search { width: 100%; }
    .hero h1 { font-size: var(--text-h1); }
    .stat-strip { border-left: none; padding-left: 0; }
    .stat-total .stat-n { font-size: 56px; }
    .dash-duo { grid-template-columns: minmax(0, 1fr); }
    .dash-body { padding: var(--space-8) var(--space-5) var(--space-12); }
    .use-row { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: var(--space-2); }
    .use-bar { grid-column: 1 / -1; }
    .cat-row { grid-template-columns: 36px 1fr auto; row-gap: var(--space-2); }
    .cat-bar { grid-column: 1 / -1; }
    /* ▼ ③ 業務フィード（#42 PR-2）で追記 */
    .feed-head { flex-direction: column; align-items: stretch; }
    .feed-head .search { width: 100%; }
    .feed-body { grid-template-columns: minmax(0, 1fr); }
  }
  /* prefers-reduced-motion は全 animation 宣言より後ろに置く（同じ詳細度なので後勝ち） */
  @media (prefers-reduced-motion: reduce) {
    .think-dots span { animation: none; opacity: .6; }
    .card:hover { transform: none; }
    .hero-bg .h-belt, .hero-bg .h-node, .hero-copy, .stat-strip, .dash-sec, .feed-sec,
    .feed-side .side-box, .grid .card, .detail-card, .panel.result, .use-fill, .cat-bar span { animation: none; }
  }