/* geist-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/geist-cyrillic-ext-wght-normal-DjL33-gN.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geist-cyrillic-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/geist-cyrillic-wght-normal-BEAKL7Jp.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-vietnamese-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/geist-vietnamese-wght-normal-6IgcOCM7.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geist-latin-ext-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/geist-latin-ext-wght-normal-DC-KSUi6.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-latin-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/geist-latin-wght-normal-BgDaEnEv.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* geist-mono-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/geist-mono-cyrillic-ext-wght-normal-I4S5GZfc.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geist-mono-cyrillic-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/geist-mono-cyrillic-wght-normal-BmXc_FBt.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-mono-symbols2-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/geist-mono-symbols2-wght-normal-GZpp1pK2.woff2) format('woff2-variations');
  unicode-range: U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F;
}

/* geist-mono-vietnamese-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/geist-mono-vietnamese-wght-normal-D8KDMBhC.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geist-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/geist-mono-latin-ext-wght-normal-DrnZ1wKl.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-mono-latin-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/geist-mono-latin-wght-normal-B_7UjwxQ.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/inter-greek-wght-normal-CkhJZR-_.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/docs/formula-demo-export/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* ============================================================
   Formula AI — IDE shell theme
   Vercel-style neutral light mode with a full dark variant.
   Accent is Formula blue (caret / running spinner / current
   command / active tab). Toggle via [data-theme="dark"] on <html>.
   ============================================================ */

:root {
  /* neutral light surfaces & text (Vercel) */
  --ink: #171717;
  --ink-strong: #000000;
  --paper: #ffffff;
  --stone: #fafafa;
  --inset: #ececec;
  --sand: #e5e5e5;
  --smoke: #b3b3b3;
  --ash: #8f8f8f;
  --clay: #666666;

  /* Formula brand accent (restricted use) */
  --accent: #006aff;
  --accent-soft: #e5f0ff;
  /* legacy ember aliases → all existing orange references become blue */
  --ember: var(--accent);
  --ember-soft: var(--accent-soft);

  /* status badge palette */
  --green: #28a948;
  --green-soft: #e9f7ee;
  --red: #eb001d;
  --red-soft: #fdeaec;
  --purple: #a100f8;
  --purple-soft: #f6e9fe;
  --blue: var(--accent);
  --blue-soft: var(--accent-soft);
  --amber: #b45309;
  --amber-soft: #fdf3e7;

  /* running/live signal (light) */
  --signal: #28a948;
  --gold: #b45309;

  /* オントロジー球体キャンバスの「宇宙の地」（デジタルツイン 3D）。
     light は紙面よりわずかに沈む温白（球のキャンバスをクロームから区別する）・dark は夜空の暗地。
     canvas は他要素とテーマ規律を共有できないため専用トークンで両テーマ定義。 */
  --onto-void: #f6f6f3;

  /* 第2デモ（COBOLモダナイゼーション）の型別トーン（T-13b・§13視覚言語）。
     球体は基本モノクロ（ink/clay）だが、AS-IS(cobol)/境界(interface)/バッチ(batch)
     の3種だけは「色+セクタ」で語る（発光等の常時装飾はしない＝雰囲気ハイライト禁止）。
     light は低彩度で紙面から浮きすぎない値、dark は夜空で沈まない値を両テーマ定義。
       --onto-cobol     … くすんだ琥珀/セピア（古い地層・AS-IS 原典）
       --onto-interface … ティール/シアン（境界の受け渡し）
       --onto-batch     … インディゴ（処理の束・夜間バッチ） */
  --onto-cobol: #9a6b2b;
  --onto-interface: #0f766e;
  --onto-batch: #4f46b5;

  --font-ui: 'Geist Variable', 'Inter Variable', 'Hiragino Sans', 'Noto Sans JP', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono Variable', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --shadow-subtle: rgba(23, 23, 23, 0.06) 0 0 0 1px, rgba(23, 23, 23, 0.06) 0 6px 16px -10px;
  --shadow-pop: rgba(23, 23, 23, 0.1) 0 14px 40px -14px, rgba(23, 23, 23, 0.06) 0 0 0 1px;

  /* text-selection tint (light) */
  --sel-bg: rgba(0, 106, 255, 0.16);

  /* inline-comment highlight — marker-pen tint on the spec preview.
     Warm/amber so it reads as a persistent highlight distinct from the
     blue text-selection and links. */
  --cmt-hl: rgba(212, 155, 15, 0.28);
  --cmt-hl-strong: rgba(180, 120, 0, 0.5);

  /* syntax highlight palette (light) */
  --hl-key: #0550ae;
  --hl-num: #0550ae;
  --hl-tag: #b2295b;

  --titlebar-h: 44px;

  /* ============================================================
     Non-color design tokens — migrated from Builder Design/
     tokens.json (§2.0-5). These are theme-independent (font
     sizes / weights / radii / spacing / line-heights) and are
     the ONLY source renderers may reference for typography and
     rhythm. Colors are NOT migrated here — app.css color vars
     above remain the single color source of truth.
     ============================================================ */

  /* font-size scale (tokens.json typography steps) */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 22px;
  --text-2xl: 26px;

  /* font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* border radii (tokens.json radius: sm 1.5 / md 4 / lg 8) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* spacing steps (tokens.json spacing dimensions) */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 28px;
  --space-8: 40px;

  /* line-heights */
  --leading-tight: 1.3;
  --leading-normal: 1.55;

  /* ---- BPMN meaning colors (§2.1 / §8-Q9) — light ----
     青=改善 / 赤=リスク only. Used solely in the BPMN 作図領域. */
  --bpmn-improve: #2563eb;
  --bpmn-improve-soft: #eaf1fe;
  --bpmn-risk: #dc2626;
  --bpmn-risk-soft: #fdecec;
}

[data-theme="dark"] {
  /* neutral dark surfaces & text */
  --ink: #ececec;
  --ink-strong: #ffffff;
  --paper: #1e1e1e;
  --stone: #171717;
  --inset: #2b2b2b;
  --sand: #2e2e2e;
  --smoke: #5c5c5c;
  --ash: #8b8b8b;
  --clay: #b0b0b0;

  --accent: #3f8fff;
  --accent-soft: rgba(0, 106, 255, 0.16);

  --green: #3ec26a;
  --green-soft: rgba(40, 169, 72, 0.18);
  --red: #ff5566;
  --red-soft: rgba(235, 0, 29, 0.2);
  --purple: #c060ff;
  --purple-soft: rgba(161, 0, 248, 0.2);
  --amber: #d9932f;
  --amber-soft: rgba(180, 83, 9, 0.2);

  --signal: #3ec26a;
  --gold: #d9932f;

  /* 球体キャンバスの夜空の地（宇宙の底）。 */
  --onto-void: #0f1013;

  /* 第2デモ 型別トーン（dark）。夜空で沈まない・彩度を抑えた同系。 */
  --onto-cobol: #c99a5a;
  --onto-interface: #3fb8ad;
  --onto-batch: #8a83f0;

  --shadow-subtle: rgba(0, 0, 0, 0.45) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 8px 22px -12px;
  --shadow-pop: rgba(0, 0, 0, 0.6) 0 16px 46px -16px, rgba(0, 0, 0, 0.45) 0 0 0 1px;

  --sel-bg: rgba(63, 143, 255, 0.28);

  /* inline-comment highlight (dark) — amber glow that survives the dark
     surface without washing out the text underneath. */
  --cmt-hl: rgba(217, 147, 47, 0.32);
  --cmt-hl-strong: rgba(217, 147, 47, 0.65);

  /* syntax highlight palette (dark) */
  --hl-key: #6cb6ff;
  --hl-num: #6cb6ff;
  --hl-tag: #ff7bac;

  /* ---- BPMN meaning colors (§2.1 / §8-Q9) — dark ----
     改善=#5B8DEF系 / リスク=#EF6B6B系, with soft fills that
     do not sink into the dark surface. */
  --bpmn-improve: #5b8def;
  --bpmn-improve-soft: rgba(91, 141, 239, 0.2);
  --bpmn-risk: #ef6b6b;
  --bpmn-risk-soft: rgba(239, 107, 107, 0.2);
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--stone);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.005em;
}

#app { height: 100%; }

::selection { background: var(--sel-bg); }

/* scrollbars — thin, neutral */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--sand);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--smoke); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
}

.mono { font-family: var(--font-mono); }

/* blinking caret */
@keyframes caret-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* spinner */
@keyframes spin { to { transform: rotate(360deg); } }

/* streaming dot pulse */
@keyframes pulse-soft { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* highlight flash for newly patched preview elements */
@keyframes patch-flash {
  0% { box-shadow: 0 0 0 2px rgba(0, 64, 213, 0.65), 0 8px 28px -8px rgba(0, 64, 213, 0.4); }
  100% { box-shadow: 0 0 0 1px rgba(0, 64, 213, 0); }
}

/* fade-slide for chat blocks */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* code line reveal */
@keyframes line-in {
  from { opacity: 0; transform: translateX(-3px); }
  to { opacity: 1; transform: none; }
}

/* ============ syntax highlight palette (theme-aware) ============ */
.hl-comment { color: var(--ash); font-style: italic; }
.hl-key { color: var(--hl-key); }
.hl-str { color: var(--green); }
.hl-num { color: var(--hl-num); }
.hl-kw { color: var(--purple); }
.hl-fn { color: var(--blue); }
.hl-tag { color: var(--hl-tag); }
.hl-attr { color: var(--amber); }
.hl-h { color: var(--ink-strong); font-weight: 600; }
.hl-punct { color: var(--ash); }
.hl-marker { color: var(--ember); }

  .titlebar.svelte-tq03kl {
    height: var(--titlebar-h);
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: var(--stone);
    border-bottom: 1px solid var(--sand);
    user-select: none;
    -webkit-app-region: drag;
  }
  .brand.svelte-tq03kl { display: flex; align-items: center; gap: 9px; flex: 1; }
  /* fixed PortX chip: dark square + white mark, constant across themes so the
     mark always has contrast (matches the favicon). --ink-strong flips to
     white in dark mode, which would hide a white mark — so we pin the color. */
  .logo.svelte-tq03kl {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    background: #171717;
    color: #ffffff;
    border-radius: 6px;
    flex-shrink: 0;
  }
  .name.svelte-tq03kl { font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; }

  .actions.svelte-tq03kl { display: flex; align-items: center; gap: 6px; -webkit-app-region: no-drag; }
  .icon-btn.svelte-tq03kl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--clay);
    border: 1px solid transparent;
    transition: all 0.15s;
  }
  .icon-btn.svelte-tq03kl:hover { color: var(--ink); background: var(--inset); }

  .fapp.svelte-zubjwa {
    /* ブランド（顧客SaaSの青）。ダークは彩度を上げた値へ差し替え。 */
    --f-brand: #0040d5;
    --f-brand-strong: #1a3fa3;
    --f-brand-soft: var(--accent-soft);
    --f-brand-softer: var(--accent-soft);
    --f-on-brand: #ffffff;

    /* 面・境界・文字はテーマトークンへ橋渡し（両テーマ追従）。 */
    --f-sidebar: #101828;
    --f-surface: var(--paper);
    --f-surface-2: var(--stone);
    --f-surface-3: var(--inset);
    --f-border: var(--sand);
    --f-heading: var(--ink-strong);
    --f-body: var(--ink);
    --f-label: var(--clay);
    --f-faint: var(--ash);

    /* 意味色はテーマトークン。 */
    --f-success: var(--green);
    --f-success-soft: var(--green-soft);
    --f-danger: var(--red);
    --f-danger-soft: var(--red-soft);
    --f-warning: var(--amber);
    --f-warning-bg: var(--amber-soft);
    --f-warning-border: var(--amber);

    height: 100%;
    display: flex;
    background: var(--f-surface-2);
    color: var(--f-body);
    font-size: 12.5px;
    letter-spacing: 0;
  }

  /* ダークでブランド青を彩度アップ・サイドバーを地の色へ寄せる。 */
  [data-theme='dark'] .fapp.svelte-zubjwa {
    --f-brand: #3f8fff;
    --f-brand-strong: #5b8def;
    --f-on-brand: #0b1220;
    --f-sidebar: #141821;
  }

  .fnav.svelte-zubjwa {
    width: 176px;
    flex-shrink: 0;
    background: var(--f-sidebar);
    color: #d1d5dc;
    display: flex;
    flex-direction: column;
  }
  .fbrand.svelte-zubjwa {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 14px 16px;
  }
  .fmark.svelte-zubjwa {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: var(--f-brand);
    color: var(--f-on-brand);
    font-weight: 700;
    border-radius: 6px;
    font-size: 13px;
  }
  .fbrand-t.svelte-zubjwa {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }
  .fcompany.svelte-zubjwa {
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
  }
  .fsystem.svelte-zubjwa {
    font-size: 9px;
    color: #99a1af;
  }

  nav.svelte-zubjwa {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
  }
  .fnav-sec.svelte-zubjwa {
    /* セクション見出し（非クリック）。色は .fgen と同一のサイドバー既存
       固定パレット（サイドバーは両テーマ共通の暗色地＝既存方針・新色なし）。 */
    padding: 12px 10px 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #6a7282;
  }
  .fnav-item.svelte-zubjwa {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    font-size: 12px;
    color: #d1d5dc;
    border-radius: 6px;
    text-align: left;
  }
  .fnav-item.svelte-zubjwa:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }
  .fnav-item.on.svelte-zubjwa {
    background: var(--f-brand);
    color: var(--f-on-brand);
    font-weight: 600;
  }

  .fnav-foot.svelte-zubjwa {
    margin-top: auto;
    padding: 12px 14px;
  }
  .fgen.svelte-zubjwa {
    font-size: 8.5px;
    color: #6a7282;
    letter-spacing: 0.04em;
  }

  .fmain.svelte-zubjwa {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .ftop.svelte-zubjwa {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--f-surface);
    border-bottom: 1px solid var(--f-border);
    padding: 10px 18px;
    flex-shrink: 0;
  }
  .ftop.svelte-zubjwa h1:where(.svelte-zubjwa) {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--f-heading);
    flex: 1;
  }
  .fsearch.svelte-zubjwa {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--f-faint);
    background: var(--f-surface-2);
    border: 1px solid var(--f-border);
    border-radius: 6px;
    padding: 5.5px 11px;
    width: 220px;
    cursor: text;
  }
  .fbell.svelte-zubjwa {
    position: relative;
    color: var(--f-label);
    display: grid;
    place-items: center;
  }
  .fbadge.svelte-zubjwa {
    position: absolute;
    top: -4px;
    right: -6px;
    font-size: 8px;
    font-weight: 700;
    background: var(--f-danger);
    color: #fff;
    border-radius: 999px;
    padding: 0.5px 4px;
  }
  .fuser.svelte-zubjwa {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--f-body);
  }
  .favatar.svelte-zubjwa {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: var(--f-brand-soft);
    color: var(--f-brand);
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
  }
  .funame.svelte-zubjwa {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 11px;
    font-weight: 600;
    color: var(--f-heading);
    line-height: 1.2;
  }
  .funame.svelte-zubjwa small:where(.svelte-zubjwa) {
    font-size: 8.5px;
    font-weight: 400;
    color: var(--f-label);
  }

  .fbody.svelte-zubjwa {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  .dash.svelte-11izxy3 { padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 14px; }

  .kpis.svelte-11izxy3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .kpi.svelte-11izxy3 {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .klabel.svelte-11izxy3 { font-size: 10.5px; color: var(--f-label); font-weight: 500; }
  .kval.svelte-11izxy3 { font-size: 24px; font-weight: 700; color: var(--f-heading); line-height: 1.1; }
  .kval.svelte-11izxy3 small:where(.svelte-11izxy3) { font-size: 11px; font-weight: 500; color: var(--f-label); margin-left: 2px; }
  .kpi.danger.svelte-11izxy3 .kval:where(.svelte-11izxy3) { color: var(--f-danger); }
  .kpi.warn.svelte-11izxy3 .kval:where(.svelte-11izxy3) { color: var(--f-warning); }
  .kdelta.svelte-11izxy3 { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; }
  .kdelta.up.svelte-11izxy3 { color: var(--f-success); }
  .ksub.svelte-11izxy3 { font-size: 9.5px; color: var(--f-label); }
  .kbar.svelte-11izxy3 { height: 5px; background: var(--f-surface-3); border-radius: 999px; overflow: hidden; margin-top: 4px; }
  .kbar.svelte-11izxy3 span:where(.svelte-11izxy3) { display: block; height: 100%; background: var(--f-brand); border-radius: 999px; }

  .card.svelte-11izxy3 {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 12px 14px;
  }
  .card.svelte-11izxy3 header:where(.svelte-11izxy3) { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .card.svelte-11izxy3 h3:where(.svelte-11izxy3) { margin: 0; font-size: 12px; font-weight: 700; color: var(--f-heading); }

  .risk.svelte-11izxy3 {
    border-color: var(--f-brand-soft);
    animation: patch-flash 2.4s ease-out;
  }
  .ai.svelte-11izxy3 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    color: var(--f-brand);
    background: var(--f-brand-softer);
    border: 1px solid var(--f-brand-soft);
    border-radius: 999px;
    padding: 2px 8px;
  }
  .riskrow.svelte-11izxy3 {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--f-body);
  }
  .riskrow.svelte-11izxy3:hover { background: var(--f-brand-softer); }
  .prob.svelte-11izxy3 {
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    padding: 3px 8px;
    min-width: 44px;
    text-align: center;
  }
  .prob.high.svelte-11izxy3 { background: var(--f-danger-soft); color: var(--f-danger); }
  .prob.mid.svelte-11izxy3 { background: var(--f-warning-bg); color: var(--f-warning); }
  .rno.svelte-11izxy3 { font-family: var(--font-mono); font-size: 10.5px; color: var(--f-heading); font-weight: 600; }
  .rcust.svelte-11izxy3 { font-weight: 500; color: var(--f-heading); }
  .rfactor.svelte-11izxy3 { flex: 1; font-size: 10.5px; color: var(--f-label); }
  .riskrow.svelte-11izxy3 svg:last-child { color: var(--f-faint); }
  .risk.svelte-11izxy3 footer:where(.svelte-11izxy3) { font-size: 9px; color: var(--f-faint); margin-top: 6px; padding-left: 8px; }

  .row2.svelte-11izxy3 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
  .trend.svelte-11izxy3 { width: 100%; height: auto; }
  .tlabels.svelte-11izxy3 { display: flex; justify-content: space-between; font-size: 9px; color: var(--f-faint); padding: 2px 4px 0; }

  .whbars.svelte-11izxy3 { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
  .whrow.svelte-11izxy3 { display: flex; align-items: center; gap: 10px; }
  .whname.svelte-11izxy3 { font-size: 11px; width: 60px; color: var(--f-heading); font-weight: 500; }
  .whbar.svelte-11izxy3 { flex: 1; height: 14px; background: var(--f-surface-3); border-radius: 4px; overflow: hidden; }
  .whbar.svelte-11izxy3 span:where(.svelte-11izxy3) { display: block; height: 100%; background: var(--f-brand-strong); border-radius: 4px; }
  .whval.svelte-11izxy3 { font-size: 11px; font-weight: 600; color: var(--f-heading); width: 34px; text-align: right; }
  .whnote.svelte-11izxy3 { font-size: 9.5px; color: var(--f-label); margin-top: 12px; }

  .alerts.svelte-11izxy3 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .alerts.svelte-11izxy3 li:where(.svelte-11izxy3) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    font-size: 11.5px;
    border-bottom: 1px solid var(--f-surface-3);
  }
  .alerts.svelte-11izxy3 li:where(.svelte-11izxy3):last-child { border-bottom: none; }
  .atag.svelte-11izxy3 {
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 7px;
    flex-shrink: 0;
  }
  .atag.danger.svelte-11izxy3 { background: var(--f-danger-soft); color: var(--f-danger); }
  .atag.warning.svelte-11izxy3 { background: var(--f-warning-bg); color: var(--f-warning); }
  .atag.info.svelte-11izxy3 { background: var(--f-surface-3); color: var(--f-label); }

  .badge.svelte-7v8uaq {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
  }
  .gray.svelte-7v8uaq { background: var(--f-surface-3); color: var(--f-label); }
  .warn.svelte-7v8uaq { background: var(--f-warning-bg); color: var(--f-warning); border: 1px solid var(--f-warning-border); }
  .ok.svelte-7v8uaq { background: var(--f-success-soft); color: var(--f-success); }
  .blue.svelte-7v8uaq { background: var(--f-brand-softer); color: var(--f-brand); }
  .danger.svelte-7v8uaq { background: var(--f-danger-soft); color: var(--f-danger); }

  .list.svelte-154yqfp { padding: 14px 18px 24px; display: flex; flex-direction: column; gap: 10px; height: 100%; }

  .toolbar.svelte-154yqfp { display: flex; align-items: center; gap: 8px; }
  .chips.svelte-154yqfp { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
  .chip.svelte-154yqfp {
    font-size: 11px;
    color: var(--f-body);
    border: 1px solid var(--f-border);
    background: var(--f-surface);
    border-radius: 999px;
    padding: 4px 11px;
    display: inline-flex;
    gap: 5px;
    align-items: center;
  }
  .chip.svelte-154yqfp small:where(.svelte-154yqfp) { color: var(--f-faint); font-size: 9.5px; }
  .chip.svelte-154yqfp:hover { border-color: var(--f-faint); }
  .chip.on.svelte-154yqfp { background: var(--f-brand); color: var(--f-on-brand); border-color: var(--f-brand); font-weight: 600; }
  .chip.on.svelte-154yqfp small:where(.svelte-154yqfp) { color: var(--f-on-brand); opacity: .8; }

  .fbtn.svelte-154yqfp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 6px;
    padding: 6px 13px;
  }
  .fbtn.primary.svelte-154yqfp { background: var(--f-brand); color: var(--f-on-brand); }
  .fbtn.primary.svelte-154yqfp:hover { background: var(--f-brand-strong); }
  .fbtn.ghost.svelte-154yqfp { border: 1px solid var(--f-border); color: var(--f-body); background: var(--f-surface); }

  .tablewrap.svelte-154yqfp {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    overflow: auto;
  }
  table.svelte-154yqfp { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  thead.svelte-154yqfp th:where(.svelte-154yqfp) {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: var(--f-label);
    background: var(--f-surface-2);
    padding: 8px 12px;
    border-bottom: 1px solid var(--f-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
  }
  tbody.svelte-154yqfp td:where(.svelte-154yqfp) {
    padding: 8.5px 12px;
    border-bottom: 1px solid var(--f-surface-3);
    color: var(--f-body);
    white-space: nowrap;
  }
  tbody.svelte-154yqfp tr:where(.svelte-154yqfp) { cursor: pointer; }
  tbody.svelte-154yqfp tr:where(.svelte-154yqfp):hover td:where(.svelte-154yqfp) { background: var(--f-brand-softer); }
  .no.svelte-154yqfp { font-size: 10.5px; color: var(--f-brand); font-weight: 600; }
  .cust.svelte-154yqfp { font-weight: 500; color: var(--f-heading); }
  .num.svelte-154yqfp { text-align: right; font-variant-numeric: tabular-nums; }
  th.num.svelte-154yqfp { text-align: right; }

  .prio-col.svelte-154yqfp { animation: patch-flash 2.4s ease-out; border-radius: 4px; }
  .prio.svelte-154yqfp {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 1.5px 8px;
  }
  .prio.high.svelte-154yqfp { background: var(--f-danger-soft); color: var(--f-danger); }
  .prio.mid.svelte-154yqfp { background: var(--f-warning-bg); color: var(--f-warning); }
  .prio.low.svelte-154yqfp { background: var(--f-surface-3); color: var(--f-label); }

  .foot.svelte-154yqfp { display: flex; justify-content: space-between; font-size: 10px; color: var(--f-faint); padding: 0 4px; }

  .detail.svelte-2zsy6e { padding: 14px 18px 24px; display: flex; flex-direction: column; gap: 12px; }
  .back.svelte-2zsy6e {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--f-label);
    align-self: flex-start;
  }
  .back.svelte-2zsy6e:hover { color: var(--f-brand); }

  .card.svelte-2zsy6e {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 12px 14px;
  }
  .card.svelte-2zsy6e header:where(.svelte-2zsy6e) { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .card.svelte-2zsy6e h3:where(.svelte-2zsy6e) { margin: 0; font-size: 12px; font-weight: 700; color: var(--f-heading); }

  .head-l.svelte-2zsy6e { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .no.svelte-2zsy6e { font-size: 15px; font-weight: 700; color: var(--f-heading); }
  .grid.svelte-2zsy6e { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .grid.svelte-2zsy6e label:where(.svelte-2zsy6e) { display: block; font-size: 9.5px; color: var(--f-label); margin-bottom: 2px; }
  .grid.svelte-2zsy6e span:where(.svelte-2zsy6e) { font-size: 12.5px; font-weight: 600; color: var(--f-heading); }

  .alloc.svelte-2zsy6e { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--f-label); }
  .alloc.svelte-2zsy6e .bar:where(.svelte-2zsy6e) { width: 120px; height: 6px; background: var(--f-surface-3); border-radius: 999px; overflow: hidden; }
  .alloc.svelte-2zsy6e .bar:where(.svelte-2zsy6e) span:where(.svelte-2zsy6e) { display: block; height: 100%; background: var(--f-brand); }
  .alloc.svelte-2zsy6e b:where(.svelte-2zsy6e) { color: var(--f-heading); font-size: 11px; }

  table.svelte-2zsy6e { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  th.svelte-2zsy6e {
    text-align: left; font-size: 10px; font-weight: 600; color: var(--f-label);
    padding: 6px 10px; border-bottom: 1px solid var(--f-border); white-space: nowrap;
  }
  td.svelte-2zsy6e { padding: 7.5px 10px; border-bottom: 1px solid var(--f-surface-3); color: var(--f-body); }
  tr.svelte-2zsy6e:last-child td:where(.svelte-2zsy6e) { border-bottom: none; }
  .code.svelte-2zsy6e { color: var(--f-brand); font-weight: 600; font-size: 10.5px; }
  .num.svelte-2zsy6e { text-align: right; font-variant-numeric: tabular-nums; }
  th.num.svelte-2zsy6e { text-align: right; }
  .ok.svelte-2zsy6e { display: inline-flex; align-items: center; gap: 4px; color: var(--f-success); font-size: 10.5px; font-weight: 600; }
  .part.svelte-2zsy6e { color: var(--f-warning); font-size: 10.5px; font-weight: 600; }
  .none.svelte-2zsy6e { color: var(--f-faint); font-size: 10.5px; }

  .timeline.svelte-2zsy6e { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
  .timeline.svelte-2zsy6e li:where(.svelte-2zsy6e) {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
    padding-top: 2px;
  }
  .timeline.svelte-2zsy6e li:where(.svelte-2zsy6e):not(:last-child)::after {
    content: '';
    position: absolute;
    top: 10px;
    left: calc(50% + 12px);
    right: calc(-50% + 12px);
    height: 2px;
    background: var(--f-surface-3);
  }
  .timeline.svelte-2zsy6e li.done:where(.svelte-2zsy6e):not(:last-child)::after { background: var(--f-brand-soft); }
  .tdot.svelte-2zsy6e {
    width: 18px; height: 18px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--f-surface-3);
    color: var(--f-on-brand);
    z-index: 1;
  }
  li.done.svelte-2zsy6e .tdot:where(.svelte-2zsy6e) { background: var(--f-brand); }
  .tlabel.svelte-2zsy6e { font-size: 10.5px; font-weight: 600; color: var(--f-label); }
  li.done.svelte-2zsy6e .tlabel:where(.svelte-2zsy6e) { color: var(--f-heading); }
  .tat.svelte-2zsy6e { font-size: 9px; color: var(--f-faint); }

  .actions.svelte-2zsy6e { display: flex; align-items: center; gap: 10px; }
  .fbtn.svelte-2zsy6e {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 16px;
  }
  .fbtn.primary.svelte-2zsy6e { background: var(--f-brand); color: var(--f-on-brand); }
  .fbtn.primary.svelte-2zsy6e:hover:not(:disabled) { background: var(--f-brand-strong); }
  .fbtn.primary.svelte-2zsy6e:disabled { opacity: 0.55; cursor: not-allowed; }
  .fbtn.ghost.svelte-2zsy6e { border: 1px solid var(--f-border); color: var(--f-body); background: var(--f-surface); }
  .note.svelte-2zsy6e { font-size: 10px; color: var(--f-label); }
  .ok-note.svelte-2zsy6e { color: var(--f-success); font-weight: 600; animation: rise-in 0.3s ease; }

  .stock.svelte-fy02aw { padding: 14px 18px 24px; }
  .tablewrap.svelte-fy02aw {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    overflow: auto;
  }
  table.svelte-fy02aw { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  th.svelte-fy02aw {
    text-align: left; font-size: 10px; font-weight: 600; color: var(--f-label);
    background: var(--f-surface-2); padding: 8px 12px;
    border-bottom: 1px solid var(--f-border); white-space: nowrap;
  }
  td.svelte-fy02aw { padding: 8.5px 12px; border-bottom: 1px solid var(--f-surface-3); color: var(--f-body); white-space: nowrap; }
  tr.svelte-fy02aw:hover td:where(.svelte-fy02aw) { background: var(--f-surface-2); }
  .code.svelte-fy02aw { color: var(--f-brand); font-weight: 600; font-size: 10.5px; }
  .name.svelte-fy02aw { font-weight: 500; color: var(--f-heading); }
  .num.svelte-fy02aw { text-align: right; font-variant-numeric: tabular-nums; }
  th.num.svelte-fy02aw { text-align: right; }
  .avail.svelte-fy02aw { font-weight: 700; color: var(--f-success); }
  .avail.low.svelte-fy02aw { color: var(--f-warning); }
  .avail.minus.svelte-fy02aw { color: var(--f-danger); }
  .note.svelte-fy02aw { font-size: 10px; color: var(--f-faint); margin: 10px 4px 0; }

  .badge.svelte-vpb1o3 {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
  }
  .gray.svelte-vpb1o3 { background: var(--f-surface-3); color: var(--f-label); }
  .muted.svelte-vpb1o3 { background: transparent; color: var(--f-faint); border: 1px solid var(--f-border); }
  .warn.svelte-vpb1o3 { background: var(--f-warning-bg); color: var(--f-warning); border: 1px solid var(--f-warning-border); }
  .ok.svelte-vpb1o3 { background: var(--f-success-soft); color: var(--f-success); }
  .blue.svelte-vpb1o3 { background: var(--f-brand-softer); color: var(--f-brand); }
  .danger.svelte-vpb1o3 { background: var(--f-danger-soft); color: var(--f-danger); }

  .grid-screen.svelte-1e65843 { padding: 14px 18px 22px; display: flex; flex-direction: column; gap: 10px; }

  /* toolbar */
  .toolbar.svelte-1e65843 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .fld.svelte-1e65843 { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--f-label); }
  .fld.svelte-1e65843 select:where(.svelte-1e65843) {
    font-size: 11.5px; color: var(--f-heading); font-weight: 600;
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: 6px; padding: 5px 8px;
  }
  .vermeta.svelte-1e65843 { font-size: 10.5px; color: var(--f-brand); font-weight: 600; }
  .spacer.svelte-1e65843 { flex: 1; }

  .fbtn.svelte-1e65843 {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 6px 12px;
  }
  .fbtn.primary.svelte-1e65843 { background: var(--f-brand); color: var(--f-on-brand); }
  .fbtn.primary.svelte-1e65843:hover:not(:disabled) { background: var(--f-brand-strong); }
  .fbtn.ghost.svelte-1e65843 { border: 1px solid var(--f-border); color: var(--f-body); background: var(--f-surface); }
  .fbtn.ghost.svelte-1e65843:hover:not(:disabled) { border-color: var(--f-faint); }
  .fbtn.svelte-1e65843:disabled { opacity: 0.5; cursor: not-allowed; }

  /* channel tabs */
  .chtabs.svelte-1e65843 { display: flex; align-items: center; gap: 4px; }
  .chtab.svelte-1e65843 {
    font-size: 11.5px; font-weight: 600; color: var(--f-label);
    padding: 6px 14px; border-radius: 6px 6px 0 0;
    border: 1px solid transparent; border-bottom: 2px solid transparent;
  }
  .chtab.svelte-1e65843:hover { color: var(--f-heading); }
  .chtab.on.svelte-1e65843 { color: var(--f-brand); border-bottom-color: var(--f-brand); background: var(--f-brand-softer); }
  .chcount.svelte-1e65843 { font-size: 10px; color: var(--f-faint); margin-left: 10px; }
  .overtag.svelte-1e65843 {
    display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
    font-size: 9.5px; font-weight: 700; color: var(--f-danger);
    background: var(--f-danger-soft); border-radius: 999px; padding: 2px 9px;
  }

  /* table */
  .tablewrap.svelte-1e65843 {
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: 8px; overflow: auto;
  }
  table.svelte-1e65843 { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  thead.svelte-1e65843 th:where(.svelte-1e65843) {
    text-align: left; font-size: 10px; font-weight: 600; color: var(--f-label);
    background: var(--f-surface-2); padding: 7px 10px;
    border-bottom: 1px solid var(--f-border); white-space: nowrap;
    position: sticky; top: 0; z-index: 2;
  }
  th.num.svelte-1e65843, td.num.svelte-1e65843 { text-align: right; font-variant-numeric: tabular-nums; }
  .sticky.svelte-1e65843 { position: sticky; left: 0; z-index: 3; background: var(--f-surface-2); }
  td.sticky.svelte-1e65843 { background: var(--f-surface); z-index: 1; }
  .rowhdr.svelte-1e65843 { color: var(--f-label); font-size: 9.5px; width: 34px; }

  tbody.svelte-1e65843 td:where(.svelte-1e65843) { padding: 6px 10px; border-bottom: 1px solid var(--f-surface-3); color: var(--f-body); white-space: nowrap; }
  tr.grp.svelte-1e65843 td:where(.svelte-1e65843) { border-bottom: none; padding-bottom: 2px; }
  tr.grp.svelte-1e65843 + tr:where(.svelte-1e65843) td:where(.svelte-1e65843) { padding-top: 2px; }

  .item.svelte-1e65843 { display: flex; flex-direction: column; gap: 1px; min-width: 150px; vertical-align: top; }
  .code.svelte-1e65843 { color: var(--f-brand); font-weight: 600; font-size: 10.5px; }
  .name.svelte-1e65843 { font-weight: 600; color: var(--f-heading); font-size: 11.5px; }
  .unit.svelte-1e65843 { font-size: 9px; color: var(--f-faint); }

  .fc.svelte-1e65843 { color: var(--f-faint); }
  .fc.rowhdr.svelte-1e65843 { color: var(--f-faint); }
  .pl.svelte-1e65843 { color: var(--f-heading); font-weight: 700; }

  /* editable plan cells */
  .cell.svelte-1e65843 { position: relative; min-width: 74px; }
  .cell.editable.svelte-1e65843 { cursor: pointer; }
  .cell.editable.svelte-1e65843:hover { background: var(--f-brand-softer); }
  .cell.svelte-1e65843 .pv:where(.svelte-1e65843) { font-weight: 600; color: var(--f-heading); }
  .cell.svelte-1e65843 .rate:where(.svelte-1e65843) { display: block; font-size: 8.5px; margin-top: 1px; }
  .cell.svelte-1e65843 .rate.pos:where(.svelte-1e65843) { color: var(--f-success); }
  .cell.svelte-1e65843 .rate.neg:where(.svelte-1e65843) { color: var(--f-label); }
  .cell.svelte-1e65843 .rate.over:where(.svelte-1e65843) { color: var(--f-danger); font-weight: 700; }
  .cell.over.svelte-1e65843 { background: var(--f-danger-soft); }
  .cell.over.svelte-1e65843:hover { background: var(--f-danger-soft); filter: brightness(0.95); }
  .cell.dirty.svelte-1e65843 { box-shadow: inset 2px 0 0 var(--f-brand); }
  .cell.svelte-1e65843 .pen { position: absolute; top: 4px; right: 4px; color: var(--f-faint); opacity: 0; transition: opacity 0.12s; }
  .cell.editable.svelte-1e65843:hover .pen { opacity: 1; }
  .cell.editing.svelte-1e65843 { background: var(--f-brand-softer); box-shadow: inset 0 0 0 2px var(--f-brand); }

  .cellinput.svelte-1e65843 {
    width: 100%; text-align: right; font-size: 11.5px; font-weight: 600;
    color: var(--f-heading); font-variant-numeric: tabular-nums;
    border: none; background: transparent; padding: 0; outline: none;
    font-family: inherit;
  }

  /* actions */
  .actions.svelte-1e65843 { display: flex; align-items: center; gap: 10px; }
  .actions.svelte-1e65843 .left:where(.svelte-1e65843) { flex: 1; }
  .hint.svelte-1e65843 { font-size: 10px; color: var(--f-faint); }
  .dirtynote.svelte-1e65843 { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--f-brand); font-weight: 600; }

  .toast.svelte-1e65843 {
    display: flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 500;
    border-radius: 6px; padding: 8px 12px;
    animation: rise-in 0.3s ease;
  }
  .toast.ok.svelte-1e65843 { background: var(--f-success-soft); color: var(--f-success); }

  .fc-screen.svelte-4rwot0 { padding: 14px 18px 22px; display: flex; flex-direction: column; gap: 12px; }

  .lead.svelte-4rwot0 { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .lead-t.svelte-4rwot0 h3:where(.svelte-4rwot0) { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: var(--f-heading); }
  .lead-t.svelte-4rwot0 p:where(.svelte-4rwot0) { margin: 0; font-size: 10.5px; color: var(--f-label); max-width: 560px; line-height: 1.5; }
  .ai.svelte-4rwot0 {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    font-size: 9px; font-weight: 700; color: var(--f-brand);
    background: var(--f-brand-softer); border: 1px solid var(--f-brand-soft);
    border-radius: 999px; padding: 3px 9px;
  }

  .tablewrap.svelte-4rwot0 { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: 8px; overflow: auto; }
  table.svelte-4rwot0 { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  thead.svelte-4rwot0 th:where(.svelte-4rwot0) {
    text-align: left; font-size: 10px; font-weight: 600; color: var(--f-label);
    background: var(--f-surface-2); padding: 8px 11px;
    border-bottom: 1px solid var(--f-border); white-space: nowrap;
  }
  th.num.svelte-4rwot0, td.num.svelte-4rwot0 { text-align: right; font-variant-numeric: tabular-nums; }
  th.chk.svelte-4rwot0, td.chk.svelte-4rwot0 { width: 34px; text-align: center; }
  tbody.svelte-4rwot0 td:where(.svelte-4rwot0) { padding: 8px 11px; border-bottom: 1px solid var(--f-surface-3); color: var(--f-body); white-space: nowrap; }
  tbody.svelte-4rwot0 tr:where(.svelte-4rwot0):last-child td:where(.svelte-4rwot0) { border-bottom: none; }
  tr.target.svelte-4rwot0 { background: var(--f-brand-softer); }
  tr.target.svelte-4rwot0:hover td:where(.svelte-4rwot0) { background: transparent; }

  .item.svelte-4rwot0 { display: flex; flex-direction: column; gap: 1px; }
  .code.svelte-4rwot0 { color: var(--f-brand); font-weight: 600; font-size: 10.5px; }
  .name.svelte-4rwot0 { font-weight: 600; color: var(--f-heading); }
  .strong.svelte-4rwot0 { font-weight: 700; color: var(--f-heading); }
  .note.svelte-4rwot0 { font-size: 10.5px; color: var(--f-label); white-space: normal; min-width: 200px; }

  .conf.svelte-4rwot0 { font-weight: 700; font-size: 11px; }
  .conf.ok.svelte-4rwot0 { color: var(--f-success); }
  .conf.warn.svelte-4rwot0 { color: var(--f-warning); }
  .conf.danger.svelte-4rwot0 { color: var(--f-danger); }
  .warnmark.svelte-4rwot0 { color: var(--f-warning); margin-left: 4px; vertical-align: -1px; }

  .foot.svelte-4rwot0 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .lo.svelte-4rwot0 { font-size: 10.5px; color: var(--f-label); }
  .lo.svelte-4rwot0 b:where(.svelte-4rwot0) { color: var(--f-brand); font-size: 12px; }
  .fbtn.svelte-4rwot0 { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 7px 14px; }
  .fbtn.primary.svelte-4rwot0 { background: var(--f-brand); color: var(--f-on-brand); }
  .fbtn.primary.svelte-4rwot0:hover { background: var(--f-brand-strong); }
  .hint.svelte-4rwot0 { font-size: 10px; color: var(--f-faint); margin: 0; }

  .var-screen.svelte-112iisi { padding: 14px 18px 22px; display: flex; flex-direction: column; gap: 12px; }

  .kpis.svelte-112iisi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .kpi.svelte-112iisi { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
  .kpi.ok.svelte-112iisi { border-color: var(--f-success); }
  .kpi.warn.svelte-112iisi { border-color: var(--f-warning-border); }
  .kpi.danger.svelte-112iisi { border-color: var(--f-danger); }
  .klabel.svelte-112iisi { font-size: 10.5px; color: var(--f-label); font-weight: 500; }
  .kval.svelte-112iisi { font-size: 23px; font-weight: 700; color: var(--f-heading); line-height: 1.1; }
  .kval.svelte-112iisi small:where(.svelte-112iisi) { font-size: 10.5px; font-weight: 500; color: var(--f-label); margin-left: 2px; }
  .kpi.ok.svelte-112iisi .kval:where(.svelte-112iisi) { color: var(--f-success); }
  .kpi.warn.svelte-112iisi .kval:where(.svelte-112iisi) { color: var(--f-warning); }
  .kpi.danger.svelte-112iisi .kval:where(.svelte-112iisi) { color: var(--f-danger); }
  .ksub.svelte-112iisi { font-size: 9px; color: var(--f-label); }

  .toolbar.svelte-112iisi { display: flex; align-items: center; gap: 8px; }
  .chips.svelte-112iisi { display: flex; gap: 4px; flex: 1; }
  .chip.svelte-112iisi {
    font-size: 11px; color: var(--f-body); border: 1px solid var(--f-border);
    background: var(--f-surface); border-radius: 999px; padding: 4px 11px;
    display: inline-flex; gap: 5px; align-items: center;
  }
  .chip.svelte-112iisi small:where(.svelte-112iisi) { color: var(--f-faint); font-size: 9.5px; }
  .chip.svelte-112iisi:hover { border-color: var(--f-faint); }
  .chip.on.svelte-112iisi { background: var(--f-brand); color: var(--f-on-brand); border-color: var(--f-brand); font-weight: 600; }
  .chip.on.svelte-112iisi small:where(.svelte-112iisi) { color: var(--f-on-brand); opacity: .8; }
  .fbtn.svelte-112iisi { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 6px 12px; }
  .fbtn.ghost.svelte-112iisi { border: 1px solid var(--f-border); color: var(--f-body); background: var(--f-surface); }
  .fbtn.ghost.svelte-112iisi:hover { border-color: var(--f-faint); }

  .tablewrap.svelte-112iisi { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: 8px; overflow: auto; }
  table.svelte-112iisi { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  thead.svelte-112iisi th:where(.svelte-112iisi) {
    text-align: left; font-size: 10px; font-weight: 600; color: var(--f-label);
    background: var(--f-surface-2); padding: 8px 10px;
    border-bottom: 1px solid var(--f-border); white-space: nowrap; position: sticky; top: 0;
  }
  th.num.svelte-112iisi, td.num.svelte-112iisi { text-align: right; font-variant-numeric: tabular-nums; }
  th.act.svelte-112iisi, td.act.svelte-112iisi { width: 60px; }
  tbody.svelte-112iisi td:where(.svelte-112iisi) { padding: 8px 10px; border-bottom: 1px solid var(--f-surface-3); color: var(--f-body); white-space: nowrap; }
  tbody.svelte-112iisi tr:where(.svelte-112iisi):last-child td:where(.svelte-112iisi) { border-bottom: none; }
  tr.exceed.svelte-112iisi td:where(.svelte-112iisi) { background: var(--f-danger-soft); }

  .item.svelte-112iisi { display: flex; flex-direction: column; gap: 1px; }
  .code.svelte-112iisi { color: var(--f-brand); font-weight: 600; font-size: 10.5px; }
  .name.svelte-112iisi { font-weight: 600; color: var(--f-heading); }
  .ch.svelte-112iisi { color: var(--f-heading); }
  .diff.svelte-112iisi { color: var(--f-success); font-weight: 600; }
  .diff.neg.svelte-112iisi { color: var(--f-danger); }
  .rate.svelte-112iisi { font-weight: 600; }
  .rate.pos.svelte-112iisi { color: var(--f-success); }
  .rate.neg.svelte-112iisi { color: var(--f-label); }
  .rate.over.svelte-112iisi { color: var(--f-danger); font-weight: 700; }
  .th.svelte-112iisi { color: var(--f-faint); font-size: 10.5px; }

  .tolink.svelte-112iisi { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--f-brand); }
  .tolink.svelte-112iisi:hover { text-decoration: underline; }

  .hint.svelte-112iisi { font-size: 10px; color: var(--f-faint); margin: 0; }

  .cmp-screen.svelte-2j48ai { padding: 14px 18px 22px; display: flex; flex-direction: column; gap: 12px; }

  .pickbar.svelte-2j48ai { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .pick.svelte-2j48ai { display: inline-flex; align-items: center; gap: 7px; }
  .plabel.svelte-2j48ai { font-size: 10px; color: var(--f-label); font-weight: 600; }
  .pick.svelte-2j48ai select:where(.svelte-2j48ai) {
    font-size: 11.5px; color: var(--f-heading); font-weight: 600;
    background: var(--f-surface); border: 1px solid var(--f-border);
    border-radius: 6px; padding: 5px 9px; min-width: 180px;
  }
  .cmp-screen.svelte-2j48ai .cmpicon { color: var(--f-brand); }
  .diffonly.svelte-2j48ai { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--f-label); margin-left: auto; }
  .diffsum.svelte-2j48ai { font-size: 10.5px; font-weight: 600; color: var(--f-brand); }

  .warnbar.svelte-2j48ai { font-size: 10.5px; color: var(--f-danger); background: var(--f-danger-soft); border: 1px solid var(--f-danger); border-radius: 6px; padding: 8px 12px; }

  .cols.svelte-2j48ai { display: grid; grid-template-columns: 1fr 250px; gap: 12px; align-items: start; }

  .tablewrap.svelte-2j48ai { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: 8px; overflow: auto; }
  table.svelte-2j48ai { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  thead.svelte-2j48ai th:where(.svelte-2j48ai) {
    text-align: left; font-size: 10px; font-weight: 600; color: var(--f-label);
    background: var(--f-surface-2); padding: 8px 10px;
    border-bottom: 1px solid var(--f-border); white-space: nowrap; position: sticky; top: 0;
  }
  th.num.svelte-2j48ai, td.num.svelte-2j48ai { text-align: right; font-variant-numeric: tabular-nums; }
  tbody.svelte-2j48ai td:where(.svelte-2j48ai) { padding: 7.5px 10px; border-bottom: 1px solid var(--f-surface-3); color: var(--f-body); white-space: nowrap; }
  tbody.svelte-2j48ai tr:where(.svelte-2j48ai):last-child td:where(.svelte-2j48ai) { border-bottom: none; }
  .item.svelte-2j48ai { display: flex; flex-direction: column; gap: 1px; }
  .code.svelte-2j48ai { color: var(--f-brand); font-weight: 600; font-size: 10.5px; }
  .name.svelte-2j48ai { font-weight: 600; color: var(--f-heading); }
  .ch.svelte-2j48ai { color: var(--f-heading); }
  .mo.svelte-2j48ai { font-size: 10.5px; color: var(--f-label); }
  .strong.svelte-2j48ai { font-weight: 700; color: var(--f-heading); }
  .diff.svelte-2j48ai { color: var(--f-success); font-weight: 700; }
  .diff.neg.svelte-2j48ai { color: var(--f-danger); }
  .diff.zero.svelte-2j48ai { color: var(--f-faint); font-weight: 500; }
  .rate.svelte-2j48ai { color: var(--f-label); }
  .rate.neg.svelte-2j48ai { color: var(--f-danger); }
  .empty.svelte-2j48ai { text-align: center; color: var(--f-faint); padding: 24px; font-size: 11px; }

  .history.svelte-2j48ai { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: 8px; padding: 12px 14px; }
  .history.svelte-2j48ai h4:where(.svelte-2j48ai) { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--f-heading); }
  .history.svelte-2j48ai ol:where(.svelte-2j48ai) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
  .history.svelte-2j48ai li:where(.svelte-2j48ai) { display: flex; gap: 9px; padding-bottom: 12px; position: relative; }
  .history.svelte-2j48ai li:where(.svelte-2j48ai):not(:last-child)::before {
    content: ''; position: absolute; left: 3.5px; top: 12px; bottom: 0; width: 1.5px; background: var(--f-surface-3);
  }
  .hdot.svelte-2j48ai { width: 8px; height: 8px; border-radius: 50%; background: var(--f-brand); flex-shrink: 0; margin-top: 4px; z-index: 1; }
  .hbody.svelte-2j48ai { display: flex; flex-direction: column; gap: 3px; }
  .htop.svelte-2j48ai { display: flex; align-items: center; gap: 6px; }
  .hat.svelte-2j48ai { font-size: 9px; color: var(--f-faint); }
  .htext.svelte-2j48ai { font-size: 10.5px; color: var(--f-body); line-height: 1.4; }
  .note.svelte-2j48ai { font-size: 9px; color: var(--f-faint); margin: 6px 0 0; line-height: 1.4; }

  .badge.svelte-1nhpknw {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
    line-height: 1.5;
  }
  .gray.svelte-1nhpknw {
    background: var(--f-surface-3);
    color: var(--f-label);
  }
  .warn.svelte-1nhpknw {
    background: var(--f-warning-bg);
    color: var(--f-warning);
    border: 1px solid var(--f-warning-border);
  }
  .ok.svelte-1nhpknw {
    background: var(--f-success-soft);
    color: var(--f-success);
  }
  .blue.svelte-1nhpknw {
    background: var(--f-brand-soft);
    color: var(--f-brand);
  }
  .danger.svelte-1nhpknw {
    background: var(--f-danger-soft);
    color: var(--f-danger);
  }

  .list.svelte-1qn1zwr {
    padding: 14px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
  }

  .summary.svelte-1qn1zwr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .scard.svelte-1qn1zwr {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 10px 13px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s;
  }
  .scard.svelte-1qn1zwr:hover {
    border-color: var(--f-brand);
  }
  .scard.on.svelte-1qn1zwr {
    border-color: var(--f-brand);
    box-shadow: inset 0 0 0 1px var(--f-brand);
  }
  .scard.total.svelte-1qn1zwr {
    border-color: var(--f-brand);
  }
  .slabel.svelte-1qn1zwr {
    font-size: 10px;
    color: var(--f-label);
    font-weight: 500;
  }
  .sval.svelte-1qn1zwr {
    font-size: 22px;
    font-weight: 700;
    color: var(--f-heading);
    line-height: 1.1;
  }
  .sval.svelte-1qn1zwr small:where(.svelte-1qn1zwr) {
    font-size: 10px;
    font-weight: 500;
    color: var(--f-label);
    margin-left: 2px;
  }
  .sval.hold.svelte-1qn1zwr {
    color: var(--f-danger);
  }
  .sbreak.svelte-1qn1zwr {
    font-size: 9.5px;
    color: var(--f-label);
  }
  .sbreak.ok.svelte-1qn1zwr {
    color: var(--f-success);
    font-weight: 600;
  }

  .toolbar.svelte-1qn1zwr {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .chips.svelte-1qn1zwr {
    display: flex;
    gap: 4px;
    flex: 1;
    flex-wrap: wrap;
  }
  .chip.svelte-1qn1zwr {
    font-size: 11px;
    color: var(--f-body);
    border: 1px solid var(--f-border);
    background: var(--f-surface);
    border-radius: 999px;
    padding: 4px 11px;
    display: inline-flex;
    gap: 5px;
    align-items: center;
  }
  .chip.svelte-1qn1zwr small:where(.svelte-1qn1zwr) {
    color: var(--f-faint);
    font-size: 9.5px;
  }
  .chip.svelte-1qn1zwr:hover {
    border-color: var(--f-faint);
  }
  .chip.on.svelte-1qn1zwr {
    background: var(--f-brand);
    color: var(--f-on-brand);
    border-color: var(--f-brand);
    font-weight: 600;
  }
  .chip.on.svelte-1qn1zwr small:where(.svelte-1qn1zwr) {
    color: var(--f-on-brand);
    opacity: 0.8;
  }

  .fbtn.svelte-1qn1zwr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 6px;
    padding: 6px 13px;
  }
  .fbtn.ghost.svelte-1qn1zwr {
    border: 1px solid var(--f-border);
    color: var(--f-body);
    background: var(--f-surface);
  }
  .fbtn.ghost.svelte-1qn1zwr:hover {
    border-color: var(--f-faint);
  }
  .fbtn.ghost.active.svelte-1qn1zwr {
    border-color: var(--f-brand);
    color: var(--f-brand);
  }
  .fbtn.ghost.svelte-1qn1zwr:disabled {
    opacity: 0.5;
    cursor: default;
  }

  .tablewrap.svelte-1qn1zwr {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    overflow: auto;
  }
  table.svelte-1qn1zwr {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
  }
  thead.svelte-1qn1zwr th:where(.svelte-1qn1zwr) {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: var(--f-label);
    background: var(--f-surface-2);
    padding: 8px 12px;
    border-bottom: 1px solid var(--f-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
  }
  th.num.svelte-1qn1zwr {
    text-align: right;
  }
  tbody.svelte-1qn1zwr td:where(.svelte-1qn1zwr) {
    /* 行高さ統一（#32）: 高さを固定し副表示の有無で行が伸縮しないよう vertical 中央寄せ。 */
    height: 40px;
    padding: 4px 12px;
    border-bottom: 1px solid var(--f-surface-3);
    color: var(--f-body);
    white-space: nowrap;
    vertical-align: middle;
  }
  tbody.svelte-1qn1zwr tr.clickable:where(.svelte-1qn1zwr) {
    cursor: pointer;
  }
  tbody.svelte-1qn1zwr tr.clickable:where(.svelte-1qn1zwr):hover td:where(.svelte-1qn1zwr) {
    background: var(--f-brand-softer);
  }
  tbody.svelte-1qn1zwr tr.clickable:where(.svelte-1qn1zwr) .no:where(.svelte-1qn1zwr):not(.plain) {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  tbody.svelte-1qn1zwr tr.hero:where(.svelte-1qn1zwr) {
    background: var(--f-brand-softer);
  }
  tbody.svelte-1qn1zwr tr.bg:where(.svelte-1qn1zwr) {
    opacity: 0.55;
    cursor: default;
  }
  tbody.svelte-1qn1zwr tr.bg:where(.svelte-1qn1zwr) .no:where(.svelte-1qn1zwr) {
    font-weight: 500;
  }
  .bgtag.svelte-1qn1zwr {
    display: inline-block;
    margin-left: 7px;
    font-size: 9px;
    font-weight: 500;
    color: var(--f-label);
    background: var(--f-surface-3);
    border-radius: 3px;
    padding: 1px 5px;
    letter-spacing: 0;
    vertical-align: middle;
  }
  .no.svelte-1qn1zwr {
    font-size: 10.5px;
    color: var(--f-brand);
    font-weight: 600;
  }
  .ent.svelte-1qn1zwr {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .ename.svelte-1qn1zwr {
    font-weight: 500;
    color: var(--f-heading);
  }
  .ekind.svelte-1qn1zwr {
    font-size: 9px;
    font-weight: 600;
    color: var(--f-label);
    background: var(--f-surface-3);
    border-radius: 3px;
    padding: 1px 5px;
  }
  .ekind.agt.svelte-1qn1zwr {
    color: var(--f-warning);
    background: var(--f-warning-bg);
  }
  .amt.svelte-1qn1zwr {
    font-weight: 600;
    color: var(--f-heading);
  }
  .num.svelte-1qn1zwr {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .fcst.svelte-1qn1zwr {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .gap.svelte-1qn1zwr {
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: var(--f-label);
  }
  .gap.over.svelte-1qn1zwr {
    color: var(--f-danger);
    font-weight: 600;
  }
  .ch.svelte-1qn1zwr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--f-label);
  }
  .ch.live.svelte-1qn1zwr {
    color: var(--f-brand);
    font-weight: 600;
  }

  .st.svelte-1qn1zwr {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .prog.svelte-1qn1zwr {
    font-size: 9.5px;
    color: var(--f-label);
  }
  .no.plain.svelte-1qn1zwr {
    color: var(--f-brand);
  }
  .dt.svelte-1qn1zwr {
    font-size: 10.5px;
    color: var(--f-label);
    font-variant-numeric: tabular-nums;
  }
  .inv.svelte-1qn1zwr {
    font-size: 10.5px;
    color: var(--f-body);
  }

  .foot.svelte-1qn1zwr {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--f-faint);
    padding: 0 4px;
  }

  /* 過去PO（履歴）セクション — KPI母数外の折りたたみ別枠。 */
  .history.svelte-1qn1zwr {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .hhead.svelte-1qn1zwr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px dashed var(--f-border);
    border-radius: 8px;
    background: var(--f-surface-2);
    color: var(--f-body);
    cursor: pointer;
    text-align: left;
  }
  .hhead.svelte-1qn1zwr:hover {
    border-color: var(--f-faint);
  }
  .htitle.svelte-1qn1zwr {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--f-heading);
  }
  .hcount.svelte-1qn1zwr {
    font-size: 10px;
    color: var(--f-label);
    background: var(--f-surface-3);
    border-radius: 999px;
    padding: 1px 8px;
  }
  .hnote.svelte-1qn1zwr {
    font-size: 9.5px;
    color: var(--f-faint);
  }
  .hchev.svelte-1qn1zwr {
    margin-left: auto;
    font-size: 11px;
    color: var(--f-label);
    transition: transform 0.12s;
  }
  .hchev.open.svelte-1qn1zwr {
    transform: rotate(90deg);
  }
  tbody.svelte-1qn1zwr tr.past:where(.svelte-1qn1zwr) td:where(.svelte-1qn1zwr) {
    color: var(--f-body);
  }

  .detail.svelte-12ccxyi {
    padding: 14px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .back.svelte-12ccxyi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--f-label);
    align-self: flex-start;
  }
  .back.svelte-12ccxyi:hover {
    color: var(--f-brand);
  }

  .card.svelte-12ccxyi {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 12px 14px;
  }
  .card.svelte-12ccxyi header:where(.svelte-12ccxyi) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .card.svelte-12ccxyi h3:where(.svelte-12ccxyi) {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .rule.svelte-12ccxyi {
    font-size: 9.5px;
    color: var(--f-brand);
    background: var(--f-brand-soft);
    border-radius: 999px;
    padding: 2px 9px;
    font-weight: 600;
    white-space: nowrap;
  }

  .head-l.svelte-12ccxyi {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .no.svelte-12ccxyi {
    font-size: 15px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .ekind.svelte-12ccxyi {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--f-label);
    background: var(--f-surface-3);
    border-radius: 4px;
    padding: 2px 8px;
  }
  .grid.svelte-12ccxyi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .grid.svelte-12ccxyi label:where(.svelte-12ccxyi) {
    display: block;
    font-size: 9.5px;
    color: var(--f-label);
    margin-bottom: 2px;
  }
  .grid.svelte-12ccxyi span:where(.svelte-12ccxyi) {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--f-heading);
  }

  table.svelte-12ccxyi {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
  }
  th.svelte-12ccxyi {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: var(--f-label);
    padding: 6px 10px;
    border-bottom: 1px solid var(--f-border);
    white-space: nowrap;
  }
  td.svelte-12ccxyi {
    padding: 7.5px 10px;
    border-bottom: 1px solid var(--f-surface-3);
    color: var(--f-body);
  }
  .code.svelte-12ccxyi {
    color: var(--f-brand);
    font-weight: 600;
    font-size: 10.5px;
  }
  .num.svelte-12ccxyi {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  th.num.svelte-12ccxyi {
    text-align: right;
  }
  .base.struck.svelte-12ccxyi {
    color: var(--f-faint);
    text-decoration: line-through;
  }
  .applied.svelte-12ccxyi {
    color: var(--f-heading);
    font-weight: 600;
  }
  .slidetag.svelte-12ccxyi {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    font-weight: 700;
    color: var(--f-success);
    margin-left: 5px;
  }
  .amt.svelte-12ccxyi {
    font-weight: 600;
    color: var(--f-heading);
  }
  .empty.svelte-12ccxyi {
    text-align: center;
    color: var(--f-label);
    font-size: 11px;
  }
  tfoot.svelte-12ccxyi .tfl:where(.svelte-12ccxyi) {
    text-align: right;
    font-size: 11px;
    font-weight: 600;
    color: var(--f-label);
    border-bottom: none;
  }
  tfoot.svelte-12ccxyi .total:where(.svelte-12ccxyi) {
    font-size: 13px;
    font-weight: 700;
    color: var(--f-heading);
    border-bottom: none;
  }

  .tierbox.svelte-12ccxyi {
    margin-top: 10px;
    background: var(--f-surface-2);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 10px 12px;
  }
  .tierhd.svelte-12ccxyi {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--f-heading);
    margin-bottom: 8px;
  }
  .tiers.svelte-12ccxyi {
    display: flex;
    gap: 8px;
  }
  .tier.svelte-12ccxyi {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 6px;
    padding: 7px 11px;
  }
  .tier.on.svelte-12ccxyi {
    border-color: var(--f-brand);
    background: var(--f-brand-softer);
  }
  .tband.svelte-12ccxyi {
    font-size: 10.5px;
    color: var(--f-label);
  }
  .tunit.svelte-12ccxyi {
    font-size: 13px;
    font-weight: 700;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }
  .tapplied.svelte-12ccxyi {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    color: var(--f-brand);
  }
  .tiernote.svelte-12ccxyi {
    margin: 8px 0 0;
    font-size: 10px;
    color: var(--f-label);
    font-variant-numeric: tabular-nums;
  }

  .row2.svelte-12ccxyi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .row2.single.svelte-12ccxyi {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
  }
  .convrow.svelte-12ccxyi {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 5px 0;
  }
  .cvl.svelte-12ccxyi {
    font-size: 11px;
    color: var(--f-label);
  }
  .cvv.svelte-12ccxyi {
    font-size: 13px;
    font-weight: 600;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }
  .cvv.svelte-12ccxyi small:where(.svelte-12ccxyi) {
    font-size: 9px;
    font-weight: 400;
    color: var(--f-label);
  }
  .convdiv.svelte-12ccxyi {
    height: 1px;
    background: var(--f-border);
    margin: 4px 0;
  }
  .convrow.strong.svelte-12ccxyi .cvl:where(.svelte-12ccxyi) {
    color: var(--f-heading);
    font-weight: 600;
  }
  .cvv.jpy.svelte-12ccxyi {
    font-size: 18px;
    font-weight: 700;
    color: var(--f-brand);
  }
  .calcnote.svelte-12ccxyi,
  .fcstok.svelte-12ccxyi {
    margin: 8px 0 0;
    font-size: 10px;
    color: var(--f-label);
    line-height: 1.5;
  }
  .fcstok.svelte-12ccxyi {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--f-success);
    font-weight: 600;
  }
  .stateok.svelte-12ccxyi,
  .statelock.svelte-12ccxyi {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
  }
  .stateok.svelte-12ccxyi {
    color: var(--f-success);
  }
  .statelock.svelte-12ccxyi {
    color: var(--f-warning);
  }

  .fcstgrid.svelte-12ccxyi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }
  .fcstgrid.svelte-12ccxyi label:where(.svelte-12ccxyi) {
    display: block;
    font-size: 9px;
    color: var(--f-label);
    margin-bottom: 2px;
  }
  .fcstgrid.svelte-12ccxyi span:where(.svelte-12ccxyi) {
    font-size: 13px;
    font-weight: 700;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }
  .fcstgrid.svelte-12ccxyi .gap:where(.svelte-12ccxyi) {
    color: var(--f-warning);
  }
  .fbtrack.svelte-12ccxyi {
    position: relative;
    height: 6px;
    background: var(--f-surface-3);
    border-radius: 999px;
  }
  .fbzero.svelte-12ccxyi {
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: var(--f-faint);
  }
  .fbmark.svelte-12ccxyi {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--f-warning);
    transform: translate(-50%, -50%);
  }
  .fbscale.svelte-12ccxyi {
    display: flex;
    justify-content: space-between;
    font-size: 8.5px;
    color: var(--f-faint);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
  }

  .credit.svelte-12ccxyi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .creditl.svelte-12ccxyi {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--f-success);
  }
  .creditl.svelte-12ccxyi > div:where(.svelte-12ccxyi) {
    display: flex;
    flex-direction: column;
  }
  .credithd.svelte-12ccxyi {
    font-size: 10px;
    color: var(--f-label);
    font-weight: 500;
  }
  .creditst.svelte-12ccxyi {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--f-heading);
  }

  .manualctl.svelte-12ccxyi {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    align-items: center;
    gap: 8px;
  }
  .manualctl.svelte-12ccxyi label:where(.svelte-12ccxyi) {
    font-size: 10px;
    color: var(--f-label);
    font-weight: 600;
  }
  .manualctl.svelte-12ccxyi select:where(.svelte-12ccxyi) {
    width: 100%;
    min-height: 32px;
    border: 1px solid var(--f-border);
    border-radius: 6px;
    background: var(--f-surface-2);
    color: var(--f-heading);
    padding: 0 10px;
    font-size: 11px;
  }
  .recalcgrid.svelte-12ccxyi {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .recalcgrid.svelte-12ccxyi > div:where(.svelte-12ccxyi) {
    background: var(--f-surface-2);
    border: 1px solid var(--f-border);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .recalcgrid.svelte-12ccxyi > div.after:where(.svelte-12ccxyi) {
    border-color: var(--f-brand);
    background: var(--f-brand-softer);
  }
  .recalcgrid.svelte-12ccxyi span:where(.svelte-12ccxyi) {
    font-size: 9.5px;
    color: var(--f-label);
  }
  .recalcgrid.svelte-12ccxyi strong:where(.svelte-12ccxyi) {
    font-size: 13px;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }
  .manualnote.svelte-12ccxyi {
    margin: 9px 0 0;
    font-size: 10px;
    color: var(--f-label);
    line-height: 1.5;
  }

  .lock.svelte-12ccxyi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .lockl.svelte-12ccxyi {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--f-warning);
  }
  .lockl.svelte-12ccxyi > div:where(.svelte-12ccxyi) {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .lockhd.svelte-12ccxyi {
    font-size: 10px;
    color: var(--f-label);
    font-weight: 500;
  }
  .lockst.svelte-12ccxyi {
    font-size: 12px;
    font-weight: 700;
    color: var(--f-heading);
  }

  .actions.svelte-12ccxyi {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .fbtn.svelte-12ccxyi {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 16px;
  }
  .fbtn.primary.svelte-12ccxyi {
    background: var(--f-brand);
    color: var(--f-on-brand);
  }
  .fbtn.primary.svelte-12ccxyi:hover {
    background: var(--f-brand-strong);
  }
  .fbtn.secondary.svelte-12ccxyi {
    background: var(--f-brand);
    color: var(--f-on-brand);
  }
  .fbtn.secondary.svelte-12ccxyi:disabled {
    background: var(--f-surface-3);
    color: var(--f-label);
    cursor: default;
  }
  .note.svelte-12ccxyi {
    font-size: 10px;
    color: var(--f-label);
  }

  .board.svelte-kd48nl {
    padding: 14px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* #12: アプリ実幅（パネル幅）で2ペイン/縦積みを切り替えるための
       size container（#37 InterfaceDoc の先例と同方式）。ビューポート
       ではなく .board 自身の幅で判定する（本画面限定・他画面へ波及なし）。 */
    container-type: inline-size;
    container-name: partialboard;
  }

  .topline.svelte-kd48nl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .tl-l.svelte-kd48nl {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .tl-r.svelte-kd48nl {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .no.svelte-kd48nl {
    font-size: 15px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .tl-sub.svelte-kd48nl {
    font-size: 11px;
    color: var(--f-label);
  }
  .replay.svelte-kd48nl {
    font-size: 10px;
    color: var(--f-label);
    margin-top: -6px;
  }
  .recon.svelte-kd48nl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--f-label);
    background: var(--f-surface-2);
    border: 1px solid var(--f-border);
    border-radius: 999px;
    padding: 4px 12px;
    font-variant-numeric: tabular-nums;
  }
  .recon.ok.svelte-kd48nl {
    color: var(--f-success);
    background: var(--f-success-soft);
    border-color: transparent;
  }

  .panes.svelte-kd48nl {
    display: grid;
    /* #12: minmax(0, …) の床。1fr のみだと nowrap 表の min-content（≈429px）が
       .tscroll を貫通してトラックの auto 最小値になり、app実幅720pxで
       グリッド全体が fbody を横あふれ（実測 872px > 534px）していた。 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 12px;
    align-items: start;
  }
  /* #12: 2ペインが成立しない幅（コンテナ 979px 以下）は縦積みへ。
     980px = 品目列 nowrap 表（min-content 399px）＋ペイン余白 30px が
     左トラック（(980−36−12)÷2.15 ≈ 433px）に横スクロールなしで収まる最小幅。 */
  @container partialboard (max-width: 979px) {
    .panes.svelte-kd48nl {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  /* container query 非対応環境向けのフォールバック（狭ビューポートのみ捕捉・#37同方式）。 */
  @media (max-width: 760px) {
    .panes.svelte-kd48nl {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .pane.svelte-kd48nl {
    min-width: 0;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .pane-h.svelte-kd48nl {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .pane-h.svelte-kd48nl svg {
    color: var(--f-brand);
  }

  /* 左ペイン: 計画対象 */
  .target.svelte-kd48nl {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .t-po.svelte-kd48nl {
    font-size: 12px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .cond.svelte-kd48nl {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--f-label);
    background: var(--f-surface-2);
    border: 1px solid var(--f-border);
    border-radius: 999px;
    padding: 2px 9px;
  }
  .cond.ok.svelte-kd48nl {
    color: var(--f-success);
    background: var(--f-success-soft);
    border-color: transparent;
  }
  .rchip.svelte-kd48nl {
    font-size: 9px;
    font-weight: 700;
    color: var(--f-brand);
    background: var(--f-brand-soft);
    border-radius: 999px;
    padding: 2px 8px;
  }

  /* 狭幅（非拡大パネル）では品目列を1行維持し、あふれた分は表内で横スクロール（E-02）。 */
  .tscroll.svelte-kd48nl {
    overflow-x: auto;
  }
  .ptable.svelte-kd48nl {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
  }
  .ptable.svelte-kd48nl tbody:where(.svelte-kd48nl) td:where(.svelte-kd48nl):first-child {
    white-space: nowrap;
  }
  .ptable.svelte-kd48nl thead:where(.svelte-kd48nl) th:where(.svelte-kd48nl) {
    text-align: left;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--f-label);
    padding: 5px 8px;
    background: var(--f-surface-2);
    border-bottom: 1px solid var(--f-border);
    white-space: nowrap;
  }
  .ptable.svelte-kd48nl thead:where(.svelte-kd48nl) th.num:where(.svelte-kd48nl) {
    text-align: right;
  }
  .ptable.svelte-kd48nl tbody:where(.svelte-kd48nl) td:where(.svelte-kd48nl) {
    padding: 7px 8px;
    border-bottom: 1px solid var(--f-surface-3);
    color: var(--f-body);
    vertical-align: baseline;
  }
  .ptable.svelte-kd48nl tbody:where(.svelte-kd48nl) tr:where(.svelte-kd48nl):last-child td:where(.svelte-kd48nl) {
    border-bottom: none;
  }
  .lc.svelte-kd48nl {
    font-size: 10.5px;
    color: var(--f-brand);
    font-weight: 600;
    margin-right: 6px;
  }
  .ln.svelte-kd48nl {
    font-size: 11px;
    color: var(--f-body);
  }
  .prod.svelte-kd48nl {
    font-size: 10.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .remain.svelte-kd48nl {
    color: var(--f-warning);
    font-weight: 600;
  }
  .num.svelte-kd48nl {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .alloc.svelte-kd48nl {
    font-weight: 700;
    color: var(--f-heading);
  }
  .alloc.svelte-kd48nl small:where(.svelte-kd48nl) {
    font-size: 9px;
    font-weight: 400;
    color: var(--f-label);
    margin-left: 1px;
  }
  .due.svelte-kd48nl {
    font-size: 10.5px;
    color: var(--f-label);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .capcard.svelte-kd48nl {
    border: 1px solid var(--f-border);
    border-radius: 6px;
    background: var(--f-surface-2);
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .cap-h.svelte-kd48nl {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .cap-h.svelte-kd48nl svg {
    color: var(--f-brand);
  }
  .cap-name.svelte-kd48nl {
    font-size: 11px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .cap-u.svelte-kd48nl {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }
  .cap-u.svelte-kd48nl small:where(.svelte-kd48nl) {
    font-size: 9px;
    font-weight: 400;
    color: var(--f-label);
    margin-left: 2px;
  }
  .cap-row.svelte-kd48nl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 10.5px;
    color: var(--f-body);
    font-variant-numeric: tabular-nums;
  }
  .badge.svelte-kd48nl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
  }
  .badge.ok.svelte-kd48nl {
    color: var(--f-success);
    background: var(--f-success-soft);
  }
  .badge.warn.svelte-kd48nl {
    color: var(--f-warning);
    background: var(--f-warning-bg);
  }

  .cutline.svelte-kd48nl {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    color: var(--f-label);
    font-variant-numeric: tabular-nums;
  }
  .cutline.svelte-kd48nl svg {
    color: var(--f-brand);
    flex-shrink: 0;
  }

  /* 右ペイン: 実行結果 */
  .placeholder.svelte-kd48nl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 20px;
    border: 1px dashed var(--f-border);
    border-radius: 6px;
    background: var(--f-surface-2);
    text-align: center;
  }
  .placeholder.svelte-kd48nl svg {
    color: var(--f-faint);
  }
  .placeholder.svelte-kd48nl p:where(.svelte-kd48nl) {
    margin: 0;
    font-size: 11.5px;
    color: var(--f-label);
  }
  .placeholder.svelte-kd48nl .ph-sub:where(.svelte-kd48nl) {
    font-size: 10px;
    color: var(--f-faint);
  }

  .cards.svelte-kd48nl {
    display: grid;
    /* #12: カード2列にも minmax(0, …) の床（右ペイン min-content ≈413px の伝播止め）。 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  .col.svelte-kd48nl {
    min-width: 0;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .col.pending.svelte-kd48nl {
    border-style: dashed;
    background: var(--f-surface-2);
  }
  .col.svelte-kd48nl header:where(.svelte-kd48nl) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .ch-l.svelte-kd48nl {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--f-brand);
    min-width: 0;
  }
  .col.pending.svelte-kd48nl .ch-l:where(.svelte-kd48nl) {
    color: var(--f-warning);
  }
  .shipname.svelte-kd48nl {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .lockchip.svelte-kd48nl,
  .editchip.svelte-kd48nl {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 8.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 7px;
    white-space: nowrap;
  }
  .lockchip.svelte-kd48nl {
    color: var(--f-label);
    background: var(--f-surface-3);
  }
  .editchip.svelte-kd48nl {
    color: var(--f-brand);
    background: var(--f-brand-soft);
  }
  .chip.svelte-kd48nl {
    font-size: 9.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
  }
  .chip.done.svelte-kd48nl {
    background: var(--f-brand-soft);
    color: var(--f-brand);
  }
  .chip.wait.svelte-kd48nl {
    background: var(--f-warning-bg);
    color: var(--f-warning);
  }
  .chip.air.svelte-kd48nl {
    background: var(--f-brand-soft);
    color: var(--f-brand);
  }

  /* 航空切替後の第2船カード（patch 'transport-switch' 観測時）。 */
  .col.switched.svelte-kd48nl {
    border-style: solid;
    border-color: var(--f-brand);
    background: var(--f-brand-softer);
  }
  .col.switched.svelte-kd48nl .ch-l:where(.svelte-kd48nl) {
    color: var(--f-brand);
  }

  .vessel.svelte-kd48nl {
    font-size: 11px;
    font-weight: 600;
    color: var(--f-heading);
  }
  .col.pending.svelte-kd48nl .vessel:where(.svelte-kd48nl) {
    color: var(--f-label);
    font-weight: 500;
  }

  .meta.svelte-kd48nl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 7px 0;
    border-top: 1px solid var(--f-surface-3);
    border-bottom: 1px solid var(--f-surface-3);
  }
  .meta.svelte-kd48nl label:where(.svelte-kd48nl) {
    display: block;
    font-size: 9px;
    color: var(--f-label);
    margin-bottom: 2px;
  }
  .meta.svelte-kd48nl span:where(.svelte-kd48nl) {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }

  .lines.svelte-kd48nl {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .line.svelte-kd48nl {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .line.svelte-kd48nl .lc:where(.svelte-kd48nl) {
    width: 58px;
    flex-shrink: 0;
    margin-right: 0;
  }
  .line.svelte-kd48nl .ln:where(.svelte-kd48nl) {
    flex: 1;
    font-size: 11px;
  }
  .lq.svelte-kd48nl {
    font-size: 12px;
    font-weight: 700;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }
  .lq.svelte-kd48nl small:where(.svelte-kd48nl) {
    font-size: 9px;
    font-weight: 400;
    color: var(--f-label);
    margin-left: 1px;
  }

  .invoice.svelte-kd48nl {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 7px;
    border-top: 1px dashed var(--f-border);
  }
  .ivlabel.svelte-kd48nl {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--f-label);
  }
  .ivamt.svelte-kd48nl {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }

  .rulerow.svelte-kd48nl {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }

  .sumline.svelte-kd48nl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--f-label);
    background: var(--f-surface-2);
    border: 1px solid var(--f-border);
    border-radius: 6px;
    padding: 7px 11px;
    font-variant-numeric: tabular-nums;
  }
  .sumline.ok.svelte-kd48nl {
    color: var(--f-success);
    background: var(--f-success-soft);
    border-color: transparent;
  }

  .pane-actions.svelte-kd48nl {
    display: flex;
    justify-content: flex-end;
  }

  .hint.svelte-kd48nl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    color: var(--f-label);
    background: var(--f-surface-2);
    border: 1px solid var(--f-border);
    border-radius: 6px;
    padding: 7px 12px;
  }
  .hint.svelte-kd48nl svg {
    color: var(--f-brand);
    flex-shrink: 0;
  }

  /* 費用差パネル（patch 'transport-switch' 観測時・確定表示）。 */
  .costpanel.svelte-kd48nl {
    border: 1px solid var(--f-brand);
    border-radius: 8px;
    background: var(--f-surface);
    overflow: hidden;
  }
  .cp-head.svelte-kd48nl {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--f-brand-softer);
    border-bottom: 1px solid var(--f-border);
  }
  .cp-head.svelte-kd48nl svg {
    color: var(--f-brand);
    flex-shrink: 0;
  }
  .cp-title.svelte-kd48nl {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .cp-eta.svelte-kd48nl {
    margin-left: auto;
    font-size: 10px;
    color: var(--f-label);
    font-variant-numeric: tabular-nums;
  }
  .cp-grid.svelte-kd48nl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .cp-cell.svelte-kd48nl {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-right: 1px solid var(--f-surface-3);
  }
  .cp-cell.svelte-kd48nl:last-child {
    border-right: none;
  }
  .cp-cell.svelte-kd48nl label:where(.svelte-kd48nl) {
    font-size: 9px;
    color: var(--f-label);
  }
  .cp-amt.svelte-kd48nl {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }
  .cp-cell.diff.svelte-kd48nl .cp-amt:where(.svelte-kd48nl) {
    color: var(--f-brand);
  }

  /* 下段: 過去の実行結果（束ね例・常設） */
  .past.svelte-kd48nl {
    border: 1px solid var(--f-border);
    border-radius: 8px;
    background: var(--f-surface-2);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .past-h.svelte-kd48nl {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .past-h.svelte-kd48nl svg {
    color: var(--f-brand);
  }
  .smp.svelte-kd48nl {
    margin-left: auto;
    font-size: 9px;
    font-weight: 600;
    color: var(--f-faint);
  }
  .past-row.svelte-kd48nl {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--f-label);
  }
  .pjoin.svelte-kd48nl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }
  .po.svelte-kd48nl {
    font-size: 10.5px;
    color: var(--f-body);
    font-weight: 600;
  }
  .plus.svelte-kd48nl {
    font-size: 10px;
    color: var(--f-faint);
  }
  .pinv.svelte-kd48nl {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--f-brand);
  }
  .pamt.svelte-kd48nl {
    font-size: 12px;
    font-weight: 700;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }
  .past-conds.svelte-kd48nl {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }

  .fbtn.svelte-kd48nl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
  }
  .fbtn.primary.svelte-kd48nl {
    background: var(--f-brand);
    color: var(--f-on-brand);
  }
  .fbtn.primary.svelte-kd48nl:hover {
    background: var(--f-brand-strong);
  }
  .fbtn.primary.svelte-kd48nl:disabled {
    background: var(--f-surface-3);
    color: var(--f-faint);
    cursor: default;
  }

  .inv.svelte-1o5j2lk {
    padding: 14px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .head.svelte-1o5j2lk {
    display: flex;
    align-items: stretch;
    gap: 12px;
  }
  .hcard.svelte-1o5j2lk {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 11px 15px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .hlabel.svelte-1o5j2lk {
    font-size: 10px;
    color: var(--f-label);
    font-weight: 500;
  }
  .hval.svelte-1o5j2lk {
    font-size: 22px;
    font-weight: 700;
    color: var(--f-heading);
    line-height: 1.1;
  }
  .hval.svelte-1o5j2lk small:where(.svelte-1o5j2lk) {
    font-size: 11px;
    font-weight: 500;
    color: var(--f-label);
    margin-left: 5px;
  }
  .hsub.svelte-1o5j2lk {
    font-size: 10px;
    color: var(--f-label);
  }
  .hnote.svelte-1o5j2lk {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    color: var(--f-label);
    background: var(--f-surface-2);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 0 14px;
  }
  .hnote.svelte-1o5j2lk svg {
    color: var(--f-brand);
    flex-shrink: 0;
  }

  .tablewrap.svelte-1o5j2lk {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    overflow: auto;
  }
  table.svelte-1o5j2lk {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
  }
  thead.svelte-1o5j2lk th:where(.svelte-1o5j2lk) {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: var(--f-label);
    background: var(--f-surface-2);
    padding: 8px 12px;
    border-bottom: 1px solid var(--f-border);
    white-space: nowrap;
  }
  th.num.svelte-1o5j2lk {
    text-align: right;
  }
  th.chk.svelte-1o5j2lk,
  th.act.svelte-1o5j2lk {
    text-align: center;
  }
  tbody.svelte-1o5j2lk td:where(.svelte-1o5j2lk) {
    padding: 9px 12px;
    border-bottom: 1px solid var(--f-surface-3);
    color: var(--f-body);
    white-space: nowrap;
    vertical-align: middle;
  }
  tbody.svelte-1o5j2lk tr:where(.svelte-1o5j2lk):last-child td:where(.svelte-1o5j2lk) {
    border-bottom: none;
  }
  tbody.svelte-1o5j2lk tr.sel:where(.svelte-1o5j2lk) {
    background: var(--f-brand-softer);
  }
  tbody.svelte-1o5j2lk tr.hero:where(.svelte-1o5j2lk) .no:where(.svelte-1o5j2lk) {
    font-weight: 700;
  }

  .chk.svelte-1o5j2lk {
    text-align: center;
    width: 60px;
  }
  .vbox.svelte-1o5j2lk {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--f-border);
    background: var(--f-surface);
    color: var(--f-on-brand);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .vbox.on.svelte-1o5j2lk {
    background: var(--f-brand);
    border-color: var(--f-brand);
  }
  .novsl.svelte-1o5j2lk {
    color: var(--f-faint);
    font-size: 11px;
  }

  .no.svelte-1o5j2lk {
    font-size: 10.5px;
  }
  .nolink.svelte-1o5j2lk {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--f-brand);
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .nolink.svelte-1o5j2lk:hover {
    text-decoration: underline;
  }

  .from.svelte-1o5j2lk {
    min-width: 124px;
  }
  .from-list.svelte-1o5j2lk {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }
  .po.svelte-1o5j2lk {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--f-label);
  }
  .plus.svelte-1o5j2lk {
    color: var(--f-faint);
    font-size: 10px;
  }
  .bundle.svelte-1o5j2lk {
    font-size: 9px;
    font-weight: 700;
    color: var(--f-brand);
    background: var(--f-brand-soft);
    border-radius: 999px;
    padding: 1px 7px;
  }

  .vessel.svelte-1o5j2lk {
    font-size: 11px;
    color: var(--f-body);
  }
  .num.svelte-1o5j2lk {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .amt.svelte-1o5j2lk {
    font-weight: 600;
    color: var(--f-heading);
  }

  .act.svelte-1o5j2lk {
    text-align: center;
    width: 44px;
  }
  .rowgo.svelte-1o5j2lk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--f-label);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
  }
  .rowgo.svelte-1o5j2lk:hover {
    color: var(--f-brand);
    background: var(--f-brand-soft);
  }

  .actions.svelte-1o5j2lk {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .grp.svelte-1o5j2lk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--f-brand);
    background: var(--f-brand-soft);
    border-radius: 999px;
    padding: 5px 14px;
  }
  .grp-t.svelte-1o5j2lk {
    font-weight: 700;
    color: var(--f-heading);
  }
  .grp-c.svelte-1o5j2lk {
    color: var(--f-label);
    font-variant-numeric: tabular-nums;
  }
  .hint.svelte-1o5j2lk {
    font-size: 10.5px;
    color: var(--f-label);
  }
  .fbtn.svelte-1o5j2lk {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 16px;
    margin-left: auto;
    cursor: pointer;
    border: none;
  }
  .fbtn.primary.svelte-1o5j2lk {
    background: var(--f-brand);
    color: var(--f-on-brand);
  }
  .fbtn.primary.svelte-1o5j2lk:hover {
    background: var(--f-brand-strong);
  }
  .fbtn.primary.svelte-1o5j2lk:disabled {
    background: var(--f-surface-3);
    color: var(--f-faint);
    cursor: default;
  }

  .det.svelte-luj4th {
    padding: 14px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .crumb.svelte-luj4th {
    display: flex;
  }
  .back.svelte-luj4th {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--f-label);
    background: none;
    border: none;
    padding: 4px 2px;
    cursor: pointer;
  }
  .back.svelte-luj4th:hover {
    color: var(--f-brand);
  }

  .topcard.svelte-luj4th {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 12px 16px;
  }
  .tc-l.svelte-luj4th {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .tc-no.svelte-luj4th {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .tc-no.svelte-luj4th svg {
    color: var(--f-brand);
  }
  .tc-vessel.svelte-luj4th {
    font-size: 11px;
    color: var(--f-label);
  }
  .tc-r.svelte-luj4th {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .tc-amt.svelte-luj4th {
    font-size: 18px;
    font-weight: 700;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }

  section.svelte-luj4th {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sec-h.svelte-luj4th {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--f-brand);
  }
  .sec-t.svelte-luj4th {
    font-size: 12px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .rel-kind.svelte-luj4th {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--f-brand);
    background: var(--f-brand-soft);
    border-radius: 999px;
    padding: 2px 9px;
  }

  .relbody.svelte-luj4th {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .relside.svelte-luj4th {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .rel-lbl.svelte-luj4th {
    font-size: 9px;
    color: var(--f-label);
  }
  .rel-nodes.svelte-luj4th {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .rel-node.svelte-luj4th {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--f-body);
    background: var(--f-surface-2);
    border: 1px solid var(--f-border);
    border-radius: 6px;
    padding: 5px 10px;
  }
  .rel-node.this.svelte-luj4th {
    color: var(--f-brand);
    background: var(--f-brand-soft);
    border-color: transparent;
  }
  .rel-arrow.svelte-luj4th {
    color: var(--f-faint);
  }
  .rel-note.svelte-luj4th {
    font-size: 10.5px;
    color: var(--f-label);
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--f-surface-3);
  }

  .tablewrap.svelte-luj4th {
    overflow: auto;
    border: 1px solid var(--f-border);
    border-radius: 6px;
  }
  table.svelte-luj4th {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
  }
  thead.svelte-luj4th th:where(.svelte-luj4th) {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: var(--f-label);
    background: var(--f-surface-2);
    padding: 8px 12px;
    border-bottom: 1px solid var(--f-border);
    white-space: nowrap;
  }
  th.num.svelte-luj4th {
    text-align: right;
  }
  tbody.svelte-luj4th td:where(.svelte-luj4th) {
    padding: 9px 12px;
    border-bottom: 1px solid var(--f-surface-3);
    color: var(--f-body);
    white-space: nowrap;
  }
  .num.svelte-luj4th {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .lc.svelte-luj4th {
    color: var(--f-brand);
    font-weight: 600;
  }
  .lpo.svelte-luj4th {
    margin-left: 7px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--f-faint);
  }
  .amt.svelte-luj4th {
    font-weight: 600;
    color: var(--f-heading);
  }
  tfoot.svelte-luj4th td:where(.svelte-luj4th) {
    padding: 9px 12px;
    border-top: 1px solid var(--f-border);
  }
  .tf-l.svelte-luj4th {
    text-align: right;
    font-size: 10.5px;
    color: var(--f-label);
    font-weight: 600;
  }
  .tf-total.svelte-luj4th {
    font-size: 13px;
  }

  .notes.svelte-luj4th {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .note.svelte-luj4th {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 10.5px;
  }
  .n-tag.svelte-luj4th {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--f-brand);
    background: var(--f-brand-soft);
    border-radius: 999px;
    padding: 2px 9px;
  }
  .n-txt.svelte-luj4th {
    color: var(--f-label);
  }

  .empty.svelte-luj4th {
    gap: 10px;
  }
  .nf.svelte-luj4th {
    font-size: 12px;
    color: var(--f-label);
  }

  .si.svelte-163w0s9 {
    padding: 14px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .lead.svelte-163w0s9 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--f-surface-2);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 11px 15px;
  }
  .leadl.svelte-163w0s9 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--f-brand);
  }
  .leadl.svelte-163w0s9 > div:where(.svelte-163w0s9) {
    display: flex;
    flex-direction: column;
  }
  .leadhd.svelte-163w0s9 {
    font-size: 10px;
    color: var(--f-label);
    font-weight: 500;
  }
  .leadst.svelte-163w0s9 {
    font-size: 12px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .leadrules.svelte-163w0s9 {
    display: flex;
    gap: 6px;
  }
  .leadrule.svelte-163w0s9 {
    font-size: 9.5px;
    color: var(--f-brand);
    background: var(--f-brand-soft);
    border-radius: 999px;
    padding: 2px 9px;
    font-weight: 600;
    white-space: nowrap;
  }

  .head.svelte-163w0s9 {
    display: flex;
    gap: 12px;
  }
  .hcard.svelte-163w0s9 {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 11px 15px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .hlabel.svelte-163w0s9 {
    font-size: 10px;
    color: var(--f-label);
    font-weight: 500;
  }
  .hval.svelte-163w0s9 {
    font-size: 22px;
    font-weight: 700;
    color: var(--f-heading);
    line-height: 1.1;
  }
  .hval.svelte-163w0s9 small:where(.svelte-163w0s9) {
    font-size: 11px;
    font-weight: 500;
    color: var(--f-label);
    margin-left: 5px;
  }
  .hsub.svelte-163w0s9 {
    font-size: 10px;
    color: var(--f-label);
  }

  .tablewrap.svelte-163w0s9 {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    overflow: auto;
  }
  table.svelte-163w0s9 {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
  }
  thead.svelte-163w0s9 th:where(.svelte-163w0s9) {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: var(--f-label);
    background: var(--f-surface-2);
    padding: 8px 12px;
    border-bottom: 1px solid var(--f-border);
    white-space: nowrap;
  }
  th.num.svelte-163w0s9 {
    text-align: right;
  }
  tbody.svelte-163w0s9 td:where(.svelte-163w0s9) {
    padding: 9px 12px;
    border-bottom: 1px solid var(--f-surface-3);
    color: var(--f-body);
    white-space: nowrap;
    vertical-align: middle;
  }
  tbody.svelte-163w0s9 tr:where(.svelte-163w0s9):last-child td:where(.svelte-163w0s9) {
    border-bottom: none;
  }
  .no.svelte-163w0s9 {
    font-size: 10.5px;
    color: var(--f-brand);
    font-weight: 600;
  }
  .cell-inline.svelte-163w0s9 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .inv.svelte-163w0s9 {
    color: var(--f-faint);
    font-weight: 400;
    font-family: var(--font-mono);
    font-size: 9.5px;
  }
  .num.svelte-163w0s9 {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .amt.svelte-163w0s9 {
    font-weight: 600;
    color: var(--f-heading);
  }
  .booking.svelte-163w0s9 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--f-success);
  }
  .nobooking.svelte-163w0s9 {
    color: var(--f-faint);
  }

  .row2.svelte-163w0s9 {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 12px;
  }
  .scard.svelte-163w0s9 {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .scard.ok.svelte-163w0s9 {
    justify-content: space-between;
  }
  .scl.svelte-163w0s9 {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .scard.ok.svelte-163w0s9 .scl:where(.svelte-163w0s9) {
    color: var(--f-success);
  }
  .scard.hold.svelte-163w0s9 .scl:where(.svelte-163w0s9) {
    color: var(--f-danger);
  }
  .scl.svelte-163w0s9 > div:where(.svelte-163w0s9) {
    display: flex;
    flex-direction: column;
  }
  .schd.svelte-163w0s9 {
    font-size: 10px;
    color: var(--f-label);
    font-weight: 500;
  }
  .scst.svelte-163w0s9 {
    font-size: 12px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .scrule.svelte-163w0s9 {
    font-size: 9.5px;
    color: var(--f-brand);
    background: var(--f-brand-soft);
    border-radius: 999px;
    padding: 2px 9px;
    font-weight: 600;
    align-self: flex-start;
  }

  .creditnums.svelte-163w0s9 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .creditnums.svelte-163w0s9 label:where(.svelte-163w0s9) {
    display: block;
    font-size: 9px;
    color: var(--f-label);
    margin-bottom: 2px;
  }
  .creditnums.svelte-163w0s9 span:where(.svelte-163w0s9) {
    font-size: 12px;
    font-weight: 700;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }
  .creditnums.svelte-163w0s9 .over:where(.svelte-163w0s9) {
    color: var(--f-danger);
  }

  .foot.svelte-163w0s9 {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--f-faint);
    padding: 0 4px;
  }

  .vm.svelte-s9bd5z {
    padding: 14px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .card.svelte-s9bd5z {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 13px 16px;
  }

  .head.svelte-s9bd5z {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .head-l.svelte-s9bd5z {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--f-brand);
  }
  .title.svelte-s9bd5z {
    font-size: 13px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .note.svelte-s9bd5z {
    font-size: 10px;
    color: var(--f-label);
  }

  /* キャパ判定バナー */
  .capacity.svelte-s9bd5z {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
  }
  .capacity.fit.svelte-s9bd5z {
    border-color: var(--f-success);
    background: var(--f-success-soft);
  }
  .cap-l.svelte-s9bd5z {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--f-brand);
  }
  .capacity.fit.svelte-s9bd5z .cap-l:where(.svelte-s9bd5z) {
    color: var(--f-success);
  }
  .cap-txt.svelte-s9bd5z {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cap-name.svelte-s9bd5z {
    font-size: 12px;
    font-weight: 700;
    color: var(--f-heading);
    font-family: var(--font-mono);
  }
  .cap-sub.svelte-s9bd5z {
    font-size: 10.5px;
    color: var(--f-label);
    font-variant-numeric: tabular-nums;
  }
  .cap-verdict.svelte-s9bd5z {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--f-label);
  }
  .capacity.fit.svelte-s9bd5z .cap-verdict:where(.svelte-s9bd5z) {
    color: var(--f-success);
  }
  .cap-split.svelte-s9bd5z {
    font-size: 10px;
    font-weight: 600;
    color: var(--f-warning);
    background: var(--f-warning-bg);
    border-radius: 999px;
    padding: 2px 9px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  header.svelte-s9bd5z {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  h3.svelte-s9bd5z {
    font-size: 12px;
    font-weight: 700;
    color: var(--f-heading);
    margin: 0;
  }
  .rule.svelte-s9bd5z {
    font-size: 9.5px;
    color: var(--f-label);
    font-family: var(--font-mono);
  }

  .tablewrap.svelte-s9bd5z {
    overflow-x: auto;
  }
  table.svelte-s9bd5z {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
  }
  thead.svelte-s9bd5z th:where(.svelte-s9bd5z) {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: var(--f-label);
    background: var(--f-surface-2);
    padding: 7px 10px;
    border-bottom: 1px solid var(--f-border);
    white-space: nowrap;
  }
  th.num.svelte-s9bd5z {
    text-align: right;
  }
  th.ctr.svelte-s9bd5z {
    text-align: center;
  }
  tbody.svelte-s9bd5z td:where(.svelte-s9bd5z) {
    padding: 8px 10px;
    border-bottom: 1px solid var(--f-surface-3);
    color: var(--f-body);
    white-space: nowrap;
    vertical-align: middle;
  }
  tbody.svelte-s9bd5z tr:where(.svelte-s9bd5z):last-child td:where(.svelte-s9bd5z) {
    border-bottom: none;
  }
  tbody.svelte-s9bd5z tr.hero:where(.svelte-s9bd5z) {
    background: var(--f-brand-softer);
  }
  .num.svelte-s9bd5z {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .num.svelte-s9bd5z small:where(.svelte-s9bd5z) {
    font-size: 8.5px;
    color: var(--f-label);
    margin-left: 3px;
  }
  .ctr.svelte-s9bd5z {
    text-align: center;
  }
  .mono.svelte-s9bd5z {
    font-family: var(--font-mono);
  }

  .vname.svelte-s9bd5z {
    color: var(--f-heading);
  }
  .vname-inner.svelte-s9bd5z {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .vname.svelte-s9bd5z .mono:where(.svelte-s9bd5z) {
    font-size: 11px;
    color: var(--f-heading);
    font-weight: 600;
  }
  .dot.svelte-s9bd5z {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--f-brand);
    flex-shrink: 0;
  }
  .tag.svelte-s9bd5z {
    font-size: 9px;
    font-weight: 700;
    color: var(--f-on-brand);
    background: var(--f-brand);
    border-radius: 4px;
    padding: 1px 6px;
  }

  .route.svelte-s9bd5z {
    color: var(--f-body);
  }
  .route.svelte-s9bd5z svg {
    color: var(--f-label);
    vertical-align: -1px;
    margin-right: 4px;
  }
  .date.svelte-s9bd5z {
    color: var(--f-body);
    font-size: 10.5px;
  }
  .date.svelte-s9bd5z svg {
    color: var(--f-label);
    vertical-align: -1px;
    margin-right: 3px;
  }
  .mode.svelte-s9bd5z {
    color: var(--f-label);
    font-size: 10.5px;
  }
  .loaded.svelte-s9bd5z {
    color: var(--f-label);
  }
  .loaded.svelte-s9bd5z svg {
    color: var(--f-label);
    vertical-align: -1px;
    margin-right: 4px;
  }
  .inv.svelte-s9bd5z {
    font-size: 10px;
    font-weight: 600;
    color: var(--f-brand);
    background: var(--f-brand-soft);
    border-radius: 4px;
    padding: 1px 6px;
    margin-right: 4px;
  }

  .grouping.svelte-s9bd5z {
    font-size: 10px;
    color: var(--f-body);
    background: var(--f-surface-2);
    border: 1px solid var(--f-border);
    border-radius: 6px;
    padding: 7px 11px;
    margin: 10px 0 0;
    line-height: 1.5;
  }

  .foot.svelte-s9bd5z {
    font-size: 10px;
    color: var(--f-label);
    margin: 10px 0 0;
    line-height: 1.5;
  }

  .cm.svelte-9rs013 {
    padding: 14px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .card.svelte-9rs013 {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 13px 16px;
  }

  .head.svelte-9rs013 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .head-l.svelte-9rs013 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--f-brand);
  }
  .title.svelte-9rs013 {
    font-size: 13px;
    font-weight: 700;
    color: var(--f-heading);
  }
  .note.svelte-9rs013 {
    font-size: 10px;
    color: var(--f-label);
  }
  .head-r.svelte-9rs013 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .r02chip.svelte-9rs013 {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--f-brand);
    background: var(--f-brand-soft);
    border-radius: 999px;
    padding: 2px 9px;
  }

  header.svelte-9rs013 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  h3.svelte-9rs013 {
    font-size: 12px;
    font-weight: 700;
    color: var(--f-heading);
    margin: 0;
  }
  .rule.svelte-9rs013 {
    font-size: 9.5px;
    color: var(--f-label);
    font-family: var(--font-mono);
  }

  table.svelte-9rs013 {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
  }
  thead.svelte-9rs013 th:where(.svelte-9rs013) {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: var(--f-label);
    background: var(--f-surface-2);
    padding: 7px 10px;
    border-bottom: 1px solid var(--f-border);
    white-space: nowrap;
  }
  th.num.svelte-9rs013 {
    text-align: right;
  }
  tbody.svelte-9rs013 td:where(.svelte-9rs013) {
    padding: 8px 10px;
    border-bottom: 1px solid var(--f-surface-3);
    color: var(--f-body);
    white-space: nowrap;
  }
  tbody.svelte-9rs013 tr:where(.svelte-9rs013):last-child td:where(.svelte-9rs013) {
    border-bottom: none;
  }
  .num.svelte-9rs013 {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .code.svelte-9rs013 {
    font-size: 10.5px;
    color: var(--f-heading);
    font-weight: 600;
  }
  .period.svelte-9rs013 {
    font-size: 10px;
    color: var(--f-label);
  }

  .tierbox.svelte-9rs013 {
    background: var(--f-surface-2);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 10px 12px;
  }
  .tierhd.svelte-9rs013 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--f-label);
    margin-bottom: 8px;
  }
  .tierhd.svelte-9rs013 svg {
    color: var(--f-brand);
  }
  .tiers.svelte-9rs013 {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .tier.svelte-9rs013 {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
  }
  .tier.on.svelte-9rs013 {
    border-color: var(--f-brand);
    background: var(--f-brand-softer);
  }
  .tband.svelte-9rs013 {
    color: var(--f-label);
  }
  .tunit.svelte-9rs013 {
    font-weight: 700;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }
  .tapplied.svelte-9rs013 {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--f-brand);
  }
  .tiernote.svelte-9rs013 {
    font-size: 10px;
    color: var(--f-brand);
    font-weight: 600;
    margin: 8px 0 0;
  }

  .singlerow.svelte-9rs013 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--f-surface-2);
    border: 1px solid var(--f-border);
    border-radius: 6px;
    font-size: 11px;
  }
  .singlelabel.svelte-9rs013 {
    color: var(--f-label);
    flex: 1;
  }
  .singleprice.svelte-9rs013 {
    font-weight: 700;
    color: var(--f-heading);
    font-variant-numeric: tabular-nums;
  }

  .pm-overlay.svelte-1p71n4u {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--f-sidebar) 42%, transparent);
    display: grid;
    place-items: center;
    z-index: 40;
    padding: 24px;
  }
  .pm-card.svelte-1p71n4u {
    width: min(560px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 10px;
    box-shadow: 0 18px 48px color-mix(in srgb, var(--f-sidebar) 28%, transparent);
    overflow: hidden;
  }
  .pm-head.svelte-1p71n4u {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--f-border);
    background: var(--f-surface-2);
  }
  .pm-title.svelte-1p71n4u { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pm-id.svelte-1p71n4u { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--f-brand); }
  .pm-fmt.svelte-1p71n4u { font-size: 9.5px; color: var(--f-label); }
  .pm-right.svelte-1p71n4u { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .pm-at.svelte-1p71n4u { font-size: 10px; color: var(--f-label); font-variant-numeric: tabular-nums; }
  .pm-close.svelte-1p71n4u {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--f-label);
  }
  .pm-close.svelte-1p71n4u:hover { background: var(--f-surface-3); color: var(--f-heading); }

  .pm-meta.svelte-1p71n4u {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--f-border);
    background: var(--f-brand-softer);
  }
  .pm-metaitem.svelte-1p71n4u { font-size: 10.5px; color: var(--f-heading); }
  .pm-metaitem.svelte-1p71n4u em:where(.svelte-1p71n4u) {
    font-style: normal;
    color: var(--f-label);
    margin-right: 5px;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .pm-body.svelte-1p71n4u { overflow: auto; background: var(--f-surface-3); }
  .pm-pre.svelte-1p71n4u {
    margin: 0;
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.65;
    color: var(--f-body);
    white-space: pre;
  }
  .pm-ln.svelte-1p71n4u { display: block; }
  .pm-lno.svelte-1p71n4u {
    display: inline-block;
    width: 22px;
    margin-right: 12px;
    text-align: right;
    color: var(--f-faint);
    user-select: none;
  }

  .pm-foot.svelte-1p71n4u {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid var(--f-border);
    font-size: 9.5px;
    color: var(--f-label);
    background: var(--f-surface-2);
  }
  .pm-src.svelte-1p71n4u { color: var(--f-faint); }

  .inb.svelte-12xt53n { padding: 14px 18px 24px; display: flex; flex-direction: column; gap: 12px; height: 100%; }

  .checksum.svelte-12xt53n {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--f-brand-softer);
    border: 1px solid var(--f-brand-soft);
  }
  .checksum.warn.svelte-12xt53n { background: var(--f-warning-bg); border-color: var(--f-warning-border); }
  .cs-main.svelte-12xt53n { display: flex; align-items: center; gap: 9px; color: var(--f-brand); }
  .cs-eq.svelte-12xt53n { font-size: 12.5px; color: var(--f-heading); }
  .cs-eq.svelte-12xt53n b:where(.svelte-12xt53n) { font-size: 14px; color: var(--f-brand); font-variant-numeric: tabular-nums; margin: 0 1px; }
  .cs-arr.svelte-12xt53n { color: var(--f-label); font-size: 11px; margin-left: 4px; }
  .cs-sub.svelte-12xt53n {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: var(--f-label);
    font-variant-numeric: tabular-nums;
  }
  .cs-sub.svelte-12xt53n small:where(.svelte-12xt53n) { color: var(--f-faint); font-size: 9px; }
  .cs-plus.svelte-12xt53n { color: var(--f-faint); }
  .cs-target.svelte-12xt53n { color: var(--f-faint); }

  .tablewrap.svelte-12xt53n {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    overflow: auto;
    flex: 1;
    min-height: 0;
  }
  table.svelte-12xt53n { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  thead.svelte-12xt53n th:where(.svelte-12xt53n) {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: var(--f-label);
    background: var(--f-surface-2);
    padding: 8px 12px;
    border-bottom: 1px solid var(--f-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
  }
  th.num.svelte-12xt53n { text-align: right; }
  tbody.svelte-12xt53n td:where(.svelte-12xt53n) {
    padding: 8.5px 12px;
    border-bottom: 1px solid var(--f-surface-3);
    color: var(--f-body);
    white-space: nowrap;
  }
  tbody.svelte-12xt53n tr:where(.svelte-12xt53n) { cursor: pointer; }
  tbody.svelte-12xt53n tr:where(.svelte-12xt53n):hover td:where(.svelte-12xt53n) { background: var(--f-brand-softer); }
  tbody.svelte-12xt53n tr.live:where(.svelte-12xt53n) { animation: patch-flash 2.4s ease-out; }
  .id.svelte-12xt53n { font-size: 10.5px; color: var(--f-brand); font-weight: 600; }
  .livetag.svelte-12xt53n {
    font-size: 8.5px;
    font-weight: 700;
    color: var(--f-brand);
    background: var(--f-brand-soft);
    border-radius: 4px;
    padding: 0.5px 5px;
    margin-left: 6px;
  }
  .fmt.svelte-12xt53n { font-size: 10px; color: var(--f-label); font-family: var(--font-mono); }
  .num.svelte-12xt53n { text-align: right; font-variant-numeric: tabular-nums; }
  .at.svelte-12xt53n { font-size: 10.5px; color: var(--f-label); }

  .st.svelte-12xt53n {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1.5px 8px;
  }
  .st.ok.svelte-12xt53n { background: var(--f-success-soft); color: var(--f-success); }
  .st.held.svelte-12xt53n { background: var(--f-warning-bg); color: var(--f-warning); border: 1px solid var(--f-warning-border); }
  .st.arrived.svelte-12xt53n { background: var(--f-brand-soft); color: var(--f-brand); }
  .reason.svelte-12xt53n {
    display: inline-block;
    margin-left: 8px;
    font-size: 9.5px;
    color: var(--f-label);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .pl-col.svelte-12xt53n { text-align: center; width: 34px; color: var(--f-faint); }
  tbody.svelte-12xt53n tr:where(.svelte-12xt53n):hover .pl-col:where(.svelte-12xt53n) { color: var(--f-brand); }

  .foot.svelte-12xt53n { display: flex; justify-content: space-between; font-size: 10px; color: var(--f-faint); padding: 0 4px; }

  .jm.svelte-erzn0a { padding: 14px 18px 24px; display: flex; flex-direction: column; gap: 12px; height: 100%; }

  .card.svelte-erzn0a {
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: 8px;
    padding: 12px 14px;
  }
  .card.svelte-erzn0a header:where(.svelte-erzn0a) { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
  .card.svelte-erzn0a h3:where(.svelte-erzn0a) { margin: 0; font-size: 12px; font-weight: 700; color: var(--f-heading); }
  .net-sub.svelte-erzn0a, .xw-sub.svelte-erzn0a, .log-cnt.svelte-erzn0a { font-size: 9.5px; color: var(--f-label); }

  /* --- ジョブネット図 --- */
  .netflow.svelte-erzn0a { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
  .node.svelte-erzn0a {
    flex: 1;
    min-width: 108px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid var(--f-border);
    border-radius: 7px;
    background: var(--f-surface-2);
  }
  .node.run.svelte-erzn0a { border-color: var(--f-brand); background: var(--f-brand-softer); }
  .node.done.svelte-erzn0a { border-color: var(--f-success); background: var(--f-success-soft); }
  .node-top.svelte-erzn0a { display: flex; align-items: center; gap: 5px; color: var(--f-label); }
  .node.run.svelte-erzn0a .node-top:where(.svelte-erzn0a) { color: var(--f-brand); }
  .node.done.svelte-erzn0a .node-top:where(.svelte-erzn0a) { color: var(--f-success); }
  .node-id.svelte-erzn0a { font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
  .node-name.svelte-erzn0a { font-size: 11px; font-weight: 600; color: var(--f-heading); line-height: 1.25; }
  .node-note.svelte-erzn0a { font-size: 9px; color: var(--f-label); }
  .arrow.svelte-erzn0a { display: grid; place-items: center; color: var(--f-faint); flex-shrink: 0; }

  .jm .spin { animation: spin 0.9s linear infinite; }

  /* --- ログ／対応表の2カラム --- */
  .row2.svelte-erzn0a { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; flex: 1; min-height: 0; }
  .log.svelte-erzn0a, .xwalk.svelte-erzn0a { display: flex; flex-direction: column; min-height: 0; }

  .logbox.svelte-erzn0a {
    flex: 1;
    min-height: 140px;
    overflow: auto;
    background: var(--f-surface-3);
    border: 1px solid var(--f-border);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.7;
  }
  .log-empty.svelte-erzn0a { margin: 0; color: var(--f-faint); font-size: 10.5px; padding: 8px 2px; }
  .logline.svelte-erzn0a { display: flex; gap: 10px; white-space: nowrap; }
  .l-at.svelte-erzn0a { color: var(--f-faint); flex-shrink: 0; }
  .l-job.svelte-erzn0a { color: var(--f-brand); font-weight: 700; width: 34px; flex-shrink: 0; }
  .logline.ok.svelte-erzn0a .l-text:where(.svelte-erzn0a) { color: var(--f-success); }
  .logline.start.svelte-erzn0a .l-text:where(.svelte-erzn0a) { color: var(--f-body); }
  .logline.info.svelte-erzn0a .l-text:where(.svelte-erzn0a) { color: var(--f-warning); }
  .logline.live.svelte-erzn0a .l-job:where(.svelte-erzn0a) { color: var(--f-brand-strong); }

  /* --- 対応表 --- */
  .xwalk.svelte-erzn0a table:where(.svelte-erzn0a) { width: 100%; border-collapse: collapse; font-size: 11px; }
  .xwalk.svelte-erzn0a thead:where(.svelte-erzn0a) th:where(.svelte-erzn0a) {
    text-align: left;
    font-size: 9px;
    font-weight: 600;
    color: var(--f-label);
    padding: 5px 6px;
    border-bottom: 1px solid var(--f-border);
  }
  .xwalk.svelte-erzn0a tbody:where(.svelte-erzn0a) td:where(.svelte-erzn0a) { padding: 7px 6px; border-bottom: 1px solid var(--f-surface-3); vertical-align: middle; }
  .xwalk.svelte-erzn0a tbody:where(.svelte-erzn0a) tr:where(.svelte-erzn0a):last-child td:where(.svelte-erzn0a) { border-bottom: none; }
  .old.svelte-erzn0a { color: var(--f-label); font-size: 10.5px; }
  .new.svelte-erzn0a { color: var(--f-brand); font-weight: 700; font-size: 10.5px; }
  .new-name.svelte-erzn0a { font-size: 10px; color: var(--f-heading); }
  .xw-arr.svelte-erzn0a { color: var(--f-faint); width: 20px; text-align: center; }
  .xwalk.svelte-erzn0a footer:where(.svelte-erzn0a) { font-size: 9px; color: var(--f-faint); margin-top: 8px; line-height: 1.5; }

  .mono.svelte-erzn0a { font-family: var(--font-mono); }

  .menu.svelte-1saa0ko {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 150;
    min-width: 200px;
    padding: 5px;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    animation: svelte-1saa0ko-menu-in 0.13s ease-out;
  }
  .menu.right.svelte-1saa0ko { left: auto; right: 0; }
  .menu.top.svelte-1saa0ko { top: auto; bottom: calc(100% + 6px); }

  .menu-item.svelte-1saa0ko {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ink);
    text-align: left;
    transition: background 0.1s;
  }
  .menu-item.svelte-1saa0ko:hover { background: var(--inset); }
  .menu-item.danger.svelte-1saa0ko { color: var(--red); }
  .menu-item.danger.svelte-1saa0ko:hover { background: var(--red-soft); }

  .mi-icon.svelte-1saa0ko {
    display: inline-flex;
    width: 16px;
    justify-content: center;
    color: var(--ash);
    flex-shrink: 0;
  }
  .menu-item.danger.svelte-1saa0ko .mi-icon:where(.svelte-1saa0ko) { color: var(--red); }
  .mi-label.svelte-1saa0ko { flex: 1; }
  .mi-check.svelte-1saa0ko {
    display: inline-flex;
    color: var(--accent);
    flex-shrink: 0;
  }

  @keyframes svelte-1saa0ko-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
  }

  .sidebar.svelte-129hoe0 {
    background: var(--stone);
    border-right: 1px solid var(--sand);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    min-width: 0;
  }
  /* fixed intrinsic width on the inner surfaces so the sidebar contents
     don't reflow (1-char wrapping) while the grid column animates 252→0px.
     The 0px grid cell + overflow:hidden clips it cleanly. */
  .scroll.svelte-129hoe0 {
    flex: 1;
    width: 252px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 10px 10px 4px;
  }

  .top.svelte-129hoe0 { display: flex; flex-direction: column; gap: 6px; }

  .ns-wrap.svelte-129hoe0 { position: relative; }

  .new-session.svelte-129hoe0 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 11px;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    transition: background 0.12s, border-color 0.12s;
  }
  .new-session.svelte-129hoe0:hover { border-color: var(--smoke); }
  .ns-label.svelte-129hoe0 { display: inline-flex; align-items: center; gap: 7px; }
  .new-session.svelte-129hoe0 svg { color: var(--ash); }

  .search.svelte-129hoe0 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--clay);
    transition: background 0.12s;
  }
  .search.svelte-129hoe0:hover { background: var(--inset); }
  .search.svelte-129hoe0 svg { color: var(--ash); flex-shrink: 0; }
  .search.svelte-129hoe0 .kbd:where(.svelte-129hoe0) { margin-left: auto; }
  .kbd.svelte-129hoe0 {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--clay);
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 4px;
    padding: 1px 5px;
  }

  .nav.svelte-129hoe0 { display: flex; flex-direction: column; gap: 2px; }
  .nav-item.svelte-129hoe0 {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ink);
    transition: background 0.12s;
  }
  .nav-item.svelte-129hoe0:hover { background: var(--inset); }
  .nav-item.svelte-129hoe0 svg { color: var(--ash); flex-shrink: 0; }

  .group.svelte-129hoe0 { padding: 14px 0 2px; }
  .group-head.svelte-129hoe0 { display: flex; align-items: center; justify-content: space-between; }
  h3.svelte-129hoe0 {
    margin: 0 0 6px 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ash);
    text-transform: uppercase;
  }
  .group-head.svelte-129hoe0 h3:where(.svelte-129hoe0) { margin-bottom: 6px; }
  .head-add.svelte-129hoe0 {
    display: grid; place-items: center;
    width: 20px; height: 20px;
    margin-right: 4px;
    border-radius: 6px;
    color: var(--ash);
    transition: background 0.12s, color 0.12s;
  }
  .head-add.svelte-129hoe0:hover { background: var(--inset); color: var(--ink); }

  .pin.svelte-129hoe0 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border-radius: 8px;
    text-align: left;
    transition: background 0.12s;
  }
  .pin.svelte-129hoe0:hover { background: var(--inset); }
  .pin.active.svelte-129hoe0 { background: var(--inset); }
  .pin-title.svelte-129hoe0 {
    font-size: 12.5px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pin.active.svelte-129hoe0 .pin-title:where(.svelte-129hoe0) { font-weight: 600; }

  .proj.svelte-129hoe0 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 9px;
    border-radius: 8px;
    transition: background 0.12s;
  }
  .proj.svelte-129hoe0:hover { background: var(--inset); }
  .proj.active.svelte-129hoe0 { background: var(--inset); }
  .proj.active.svelte-129hoe0 .proj-name:where(.svelte-129hoe0) { color: var(--ink); font-weight: 500; }
  .proj-sq.svelte-129hoe0 {
    width: 18px; height: 18px;
    display: grid; place-items: center;
    border-radius: 5px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    flex-shrink: 0;
  }
  .proj-name.svelte-129hoe0 {
    font-size: 11px;
    color: var(--clay);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .proj-dot.svelte-129hoe0 {
    width: 6px; height: 6px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--blue);
    flex-shrink: 0;
  }
  .proj-more.svelte-129hoe0 {
    padding: 6px 9px;
    font-size: 11px;
    color: var(--ash);
    text-align: left;
    width: 100%;
    border-radius: 8px;
    transition: background 0.12s, color 0.12s;
  }
  .proj-more.svelte-129hoe0:hover { background: var(--inset); color: var(--clay); }

  .account.svelte-129hoe0 {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 252px;
    padding: 10px 12px;
    border-top: 1px solid var(--sand);
    flex-shrink: 0;
  }
  .avatar.svelte-129hoe0 {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ink-strong);
    color: var(--paper);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
  }
  .acct-text.svelte-129hoe0 { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
  .settings-wrap.svelte-129hoe0 { position: relative; margin-left: auto; flex-shrink: 0; }
  .acct-name.svelte-129hoe0 {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .acct-name-input.svelte-129hoe0 {
    width: 100%;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 5px;
    padding: 1px 5px;
    outline: none;
    transition: border-color 0.12s;
  }
  .acct-name-input.svelte-129hoe0:focus { border-color: var(--smoke); }
  .acct-sub.svelte-129hoe0 { font-size: 10.5px; color: var(--ash); }
  .acct-settings.svelte-129hoe0 {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 7px;
    color: var(--ash);
    transition: background 0.12s, color 0.12s;
  }
  .acct-settings.svelte-129hoe0:hover { background: var(--inset); color: var(--ink); }

  .chat.svelte-191yngm {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--paper);
    border-right: 1px solid var(--sand);
  }

  /* ---------------- chat header ---------------- */
  .chat-head.svelte-191yngm {
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 14px;
    border-bottom: 1px solid var(--sand);
  }
  .ch-left.svelte-191yngm { display: flex; align-items: center; gap: 4px; min-width: 0; position: relative; }
  .collapse-btn.svelte-191yngm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: var(--clay);
    border: 1px solid transparent;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
  }
  .collapse-btn.svelte-191yngm:hover { color: var(--ink); background: var(--stone); }
  .ch-title-btn.svelte-191yngm {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    height: 28px;
    padding: 0 6px;
    border-radius: 7px;
    transition: background 0.12s;
  }
  .ch-title-btn.svelte-191yngm:hover { background: var(--stone); }
  .ch-title.svelte-191yngm {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .ch-left.svelte-191yngm .ch-chev { color: var(--ash); flex-shrink: 0; }
  .ch-right.svelte-191yngm { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .ch-pop.svelte-191yngm { position: relative; }
  .ghost-btn.svelte-191yngm {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 12px;
    color: var(--clay);
    transition: background 0.12s;
  }
  .ghost-btn.svelte-191yngm:hover { background: var(--stone); }
  .ghost-label.svelte-191yngm { white-space: nowrap; }
  .icon-btn.svelte-191yngm {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 7px;
    color: var(--clay);
    transition: background 0.12s;
    flex-shrink: 0;
  }
  .icon-btn.svelte-191yngm:hover { background: var(--stone); }

  /* ---------------- share popover ---------------- */
  .share-pop.svelte-191yngm {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 150;
    width: 260px;
    max-width: min(80vw, 260px);
    padding: 12px;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    animation: svelte-191yngm-menu-in 0.13s ease-out;
  }
  .share-title.svelte-191yngm {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-strong);
    margin-bottom: 8px;
  }
  .share-title.svelte-191yngm svg { color: var(--ash); }
  .share-url.svelte-191yngm {
    font-size: 11px;
    color: var(--clay);
    background: var(--stone);
    border: 1px solid var(--sand);
    border-radius: 7px;
    padding: 7px 9px;
    margin-bottom: 8px;
    word-break: break-all;
    line-height: 1.4;
  }
  .share-copy.svelte-191yngm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 30px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    transition: filter 0.12s;
  }
  .share-copy.svelte-191yngm:hover { filter: brightness(1.08); }
  @keyframes svelte-191yngm-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
  }

  /* ---------------- stream ---------------- */
  .stream.svelte-191yngm {
    flex: 1;
    overflow-y: auto;
    padding: 18px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .welcome.svelte-191yngm {
    margin: auto;
    text-align: center;
    color: var(--clay);
    user-select: none;
  }
  /* fixed dark tile + white mark, constant across themes (matches TitleBar
     logo chip and favicon) — never tinted by accent or theme. */
  .w-logo.svelte-191yngm {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    display: grid; place-items: center;
    background: #171717;
    color: #ffffff;
    border-radius: 16px;
  }
  .welcome.svelte-191yngm h2:where(.svelte-191yngm) { margin: 0; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }

  /* ---------------- message (avatar + body) ---------------- */
  /* Conversation rows are capped to a readable measure and centred in the
     chat column (same design intent as the spec view's .md-body). The scroller
     itself stays full-width so the scrollbar sits at the column's right edge;
     only the content column is constrained. Below ~820px the cap is inert and
     rows fill the width exactly as before. */
  .msg.svelte-191yngm {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
    display: flex;
    gap: 10px;
    animation: rise-in 0.25s ease;
  }
  .avatar.svelte-191yngm {
    width: 28px; height: 28px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    user-select: none;
  }
  .user-avatar.svelte-191yngm {
    background: var(--inset);
    color: var(--clay);
    border-radius: 50%;
  }
  /* fixed dark tile + white mark, constant across themes — the brand mark
     is never tinted by accent or theme (matches TitleBar logo chip). */
  .bot-avatar.svelte-191yngm {
    background: #171717;
    color: #ffffff;
  }
  .bot-avatar.svelte-191yngm svg { display: block; }
  .msg-body.svelte-191yngm { min-width: 0; flex: 1; }

  /* ---------------- attachments ---------------- */
  .msg-attach.svelte-191yngm {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    min-width: 0;
  }
  .attach-chip.svelte-191yngm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: 24px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1px solid var(--sand);
    background: var(--stone);
    font-size: 11px;
    color: var(--clay);
    min-width: 0;
  }
  .attach-chip.svelte-191yngm svg { flex-shrink: 0; color: var(--ash); }
  .attach-chip.is-sent.svelte-191yngm { background: var(--inset); }
  .attach-name.svelte-191yngm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .attach-x.svelte-191yngm {
    display: grid; place-items: center;
    width: 15px; height: 15px;
    margin-right: -3px;
    border-radius: 4px;
    color: var(--ash);
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
  }
  .attach-x.svelte-191yngm:hover { background: var(--red-soft); color: var(--red); }

  /* ---------------- pending inline-comment chip + list ---------------- */
  /* the comment list popover is anchored to .attach-row (see .attach-row's
     position:relative) rather than the small chip wrap, so its width tracks the
     composer content box and can never overrun the composer's right edge in a
     narrow (~360px) column. */
  .cmt-chip-wrap.svelte-191yngm { display: inline-flex; }
  .cmt-chip.svelte-191yngm {
    gap: 5px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .cmt-chip.svelte-191yngm:hover { border-color: var(--smoke); color: var(--ink); background: var(--inset); }
  .cmt-chip-count.svelte-191yngm { white-space: nowrap; font-weight: 500; }

  .cmt-list.svelte-191yngm {
    position: absolute;
    bottom: calc(100% + 8px);
    /* anchored to .attach-row (composer content width): 320px where there is
       room, shrinking to the row's width in a narrow column so it never
       overruns the composer's right edge. */
    left: 0;
    z-index: 160;
    width: 320px;
    max-width: 100%;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    animation: svelte-191yngm-menu-in 0.13s ease-out;
    overflow: hidden;
  }
  .cmt-list-head.svelte-191yngm {
    padding: 9px 12px;
    border-bottom: 1px solid var(--sand);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-strong);
    background: var(--stone);
  }
  .cmt-list-body.svelte-191yngm {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
  }
  .cmt-item.svelte-191yngm {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 8px;
    border-radius: 8px;
  }
  .cmt-item.svelte-191yngm + .cmt-item:where(.svelte-191yngm) { border-top: 1px solid var(--sand); }
  .cmt-item.svelte-191yngm:hover { background: var(--stone); }
  .cmt-item-main.svelte-191yngm { flex: 1; min-width: 0; }
  .cmt-item-file.svelte-191yngm {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ash);
    margin-bottom: 3px;
  }
  .cmt-item-file.svelte-191yngm svg { flex-shrink: 0; }
  .cmt-item-fname.svelte-191yngm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cmt-item-quote.svelte-191yngm {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--clay);
    font-style: italic;
    margin-bottom: 3px;
    min-width: 0;
  }
  .cmt-item-quote.svelte-191yngm svg { flex-shrink: 0; color: var(--smoke); }
  .cmt-item-quote.svelte-191yngm span:where(.svelte-191yngm) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .cmt-item-text.svelte-191yngm {
    font-size: 12px;
    color: var(--ink);
    line-height: 1.5;
    word-break: break-word;
  }
  .cmt-item-x.svelte-191yngm {
    display: grid; place-items: center;
    width: 20px; height: 20px;
    flex-shrink: 0;
    border-radius: 5px;
    color: var(--ash);
    transition: background 0.12s, color 0.12s;
  }
  .cmt-item-x.svelte-191yngm:hover { background: var(--red-soft); color: var(--red); }

  /* ---------------- sent inline comments (on user turns) ---------------- */
  .msg-cmts.svelte-191yngm {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    min-width: 0;
  }
  .msg-cmt.svelte-191yngm {
    border: 1px solid var(--sand);
    border-left: 3px solid var(--cmt-hl-strong);
    background: var(--stone);
    border-radius: 0 8px 8px 0;
    padding: 7px 10px;
    min-width: 0;
  }
  .msg-cmt-quote.svelte-191yngm {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 5px;
    font-size: 11px;
    color: var(--clay);
    font-style: italic;
    margin-bottom: 3px;
    min-width: 0;
  }
  .msg-cmt-quote.svelte-191yngm svg { flex-shrink: 0; color: var(--smoke); }
  .msg-cmt-qtext.svelte-191yngm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* filename drops to its own line under the quote (flex-basis:100%) so the
     quote keeps its width in a narrow column instead of being crushed to a few
     characters by a side-by-side filename */
  .msg-cmt-file.svelte-191yngm {
    flex: 0 0 100%;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--ash);
    font-style: normal;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .msg-cmt-text.svelte-191yngm {
    font-size: 12px;
    color: var(--ink);
    line-height: 1.55;
    word-break: break-word;
  }

  .msg-meta.svelte-191yngm {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 4px;
    height: 16px;
  }
  .msg-name.svelte-191yngm { font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .msg-time.svelte-191yngm { font-size: 10px; color: var(--ash); }

  .user-text.svelte-191yngm {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--ink);
    word-break: break-word;
  }
  .user-text.svelte-191yngm .cmd:where(.svelte-191yngm) { color: var(--ember); font-weight: 600; }

  .msg-content.svelte-191yngm { display: flex; flex-direction: column; gap: 10px; }

  /* ---------------- assistant text ---------------- */
  .assistant.svelte-191yngm {
    font-size: 13px;
    line-height: 1.75;
    color: var(--ink);
    min-width: 0;
    /* long inline code tokens / paths must break rather than overflow the
       column at narrow widths */
    overflow-wrap: anywhere;
  }
  .assistant.svelte-191yngm p { margin: 0 0 8px; }
  .assistant.svelte-191yngm p:last-child { margin-bottom: 0; }
  .assistant.svelte-191yngm ul { margin: 4px 0 8px; padding-left: 20px; }
  .assistant.svelte-191yngm li { margin-bottom: 3px; }
  .assistant.svelte-191yngm code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--stone);
    border-radius: 4px;
    padding: 1.5px 5px;
    color: var(--clay);
  }
  .assistant.svelte-191yngm strong { color: var(--ink-strong); }
  /* §11.3 チャット→グラフ連動チップ（.say-ref）。既存 .assistant code と同寸
     （font/size/背景/角丸/padding は踏襲）で、押せる signal として下線＋
     cursor:pointer を足すだけの軽量ボタン。docs 用の統制チップとは別部品で、
     モノクロ基調のまま（アクセントは点灯側＝グラフのスポットライトが担う）。 */
  .assistant.svelte-191yngm .say-ref {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--stone);
    border: 1px solid var(--sand);
    border-radius: 4px;
    padding: 1.5px 5px;
    color: var(--ink);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--smoke);
    text-underline-offset: 2px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .assistant.svelte-191yngm .say-ref:hover {
    background: var(--inset);
    border-color: var(--smoke);
    color: var(--ink-strong);
    text-decoration-color: var(--clay);
  }

  /* ---------------- plan card ---------------- */
  .plancard.svelte-191yngm {
    border: 1px solid var(--sand);
    border-radius: 12px;
    background: var(--paper);
    padding: 12px 14px;
    box-shadow: var(--shadow-subtle);
  }
  .plan-title.svelte-191yngm { font-size: 13px; font-weight: 700; color: var(--ink-strong); margin-bottom: 8px; word-break: break-word; }
  .plan-row.svelte-191yngm {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 3px 0;
    font-size: 12px;
  }
  .plan-mark.svelte-191yngm {
    width: 16px; height: 16px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
  }
  .plan-done.svelte-191yngm {
    background: var(--stone);
    color: var(--clay);
  }
  .plan-run.svelte-191yngm {
    background: transparent;
  }
  .plan-pending.svelte-191yngm {
    border: 1.5px solid var(--sand);
    background: transparent;
  }
  .plan-spin.svelte-191yngm {
    width: 12px; height: 12px;
    border: 1.5px solid var(--sand);
    border-top-color: var(--clay);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  .plan-label.svelte-191yngm { flex: 1; color: var(--ink); min-width: 0; word-break: break-word; }
  .plan-row.is-run.svelte-191yngm .plan-label:where(.svelte-191yngm) { color: var(--ink-strong); font-weight: 500; }
  .plan-state.svelte-191yngm { font-size: 10.5px; flex-shrink: 0; white-space: nowrap; }
  .plan-state.done.svelte-191yngm { color: var(--ash); }
  .plan-state.run.svelte-191yngm { color: var(--clay); }

  /* ---------------- team card (CR-05) ---------------- */
  /* Monochrome, in the same family as .plancard / .toolcard. No per-lane colour
     coding. At ~360px every lane row collapses to a vertical stack (flex-wrap +
     min-width:0 + ellipsis on the file name / completion label) so nothing ever
     overruns the chat column. */
  .teamcard.svelte-191yngm {
    border: 1px solid var(--sand);
    border-radius: 12px;
    background: var(--paper);
    padding: 12px 14px;
    box-shadow: var(--shadow-subtle);
    min-width: 0;
    overflow: hidden;
  }
  .team-head.svelte-191yngm {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 8px;
    min-width: 0;
  }
  .team-title.svelte-191yngm {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-strong);
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
  }
  .team-title.svelte-191yngm .mono:where(.svelte-191yngm) { font-size: 12px; font-weight: 600; }
  .team-progress.svelte-191yngm {
    font-size: 10.5px;
    color: var(--ash);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .team-lane.svelte-191yngm {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 5px 0;
    min-width: 0;
  }
  .team-lane.svelte-191yngm + .team-lane:where(.svelte-191yngm) { border-top: 1px solid var(--sand); }
  /* lane identity (agent name + role) — a shrinkable block that keeps a sane
     minimum so long completion labels don't crush it to nothing before wrap */
  .lane-id.svelte-191yngm {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex: 1 1 140px;
    min-width: 0;
  }
  .lane-name.svelte-191yngm {
    font-size: 12px;
    color: var(--ink);
    font-weight: 500;
    flex-shrink: 0;
  }
  .lane-role.svelte-191yngm {
    font-size: 10.5px;
    color: var(--ash);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  /* status column — spinner + current file + counter (run) or check + label
     (done). flex:1 1 200px lets it sit beside .lane-id on a wide card and drop
     to its own line under it in a narrow column. */
  .lane-status.svelte-191yngm {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 200px;
    min-width: 0;
    justify-content: flex-end;
    font-size: 11px;
  }
  .lane-wait.svelte-191yngm { color: var(--ash); flex-shrink: 0; }
  .lane-spin.svelte-191yngm {
    width: 11px; height: 11px;
    flex-shrink: 0;
    border: 1.5px solid var(--sand);
    border-top-color: var(--clay);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  .lane-current.svelte-191yngm {
    color: var(--clay);
    font-size: 10.5px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }
  .lane-count.svelte-191yngm {
    color: var(--ash);
    font-size: 10.5px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .lane-check.svelte-191yngm {
    width: 15px; height: 15px;
    flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--stone);
    color: var(--clay);
    border-radius: 50%;
  }
  .lane-result.svelte-191yngm {
    color: var(--clay);
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }
  .team-lane.is-run.svelte-191yngm .lane-name:where(.svelte-191yngm) { color: var(--ink-strong); font-weight: 600; }

  /* ---------------- tool card ---------------- */
  .toolcard.svelte-191yngm {
    border: 1px solid var(--sand);
    border-radius: 12px;
    background: var(--paper);
    padding: 6px 4px;
    box-shadow: var(--shadow-subtle);
    overflow: hidden;
  }
  .tool.svelte-191yngm {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px;
    font-size: 12px;
    min-width: 0;
  }
  /* neutral, monochrome operation badge — same treatment for every tool
     (no per-operation colour coding; keeps the stream IDE-like). */
  .t-badge.svelte-191yngm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    background: var(--stone);
    color: var(--clay);
    border: 1px solid var(--sand);
  }
  .t-badge-label.svelte-191yngm { line-height: 1; }
  .t-spin.svelte-191yngm {
    width: 9px; height: 9px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    opacity: 0.9;
  }
  .t-detail.svelte-191yngm {
    color: var(--clay);
    font-size: 11px;
    flex: 1 1 auto;
    /* keep a readable minimum so the detail never collapses to 0 when a long
       result competes for width in a narrow chat column */
    min-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* result was fixed-width (never truncated) and could punch through the row in
     a narrow column; make it shrinkable + ellipsised. full text stays on the
     title tooltip. */
  .t-result.svelte-191yngm {
    color: var(--ash);
    font-size: 10.5px;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }
  .t-res-spin.svelte-191yngm {
    width: 10px; height: 10px;
    border: 1.5px solid var(--sand);
    border-top-color: var(--clay);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }

  /* ---------------- ok card ---------------- */
  .okcard.svelte-191yngm {
    border: 1px solid var(--sand);
    background: var(--paper);
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: var(--shadow-subtle);
    overflow: hidden;
  }
  .ok-head.svelte-191yngm {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-strong);
  }
  .ok-icon.svelte-191yngm {
    width: 17px; height: 17px;
    display: grid; place-items: center;
    background: var(--stone);
    color: var(--ink);
    border-radius: 50%;
  }
  .ok-line.svelte-191yngm {
    font-size: 11.5px;
    color: var(--clay);
    margin: 5px 0 0 25px;
    line-height: 1.5;
    /* the deploy card carries a full URL — let it wrap instead of overflowing
       the card in a narrow column */
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* ---------------- thinking ---------------- */
  /* centred on the same 820px measure as the message rows so it lines up under
     the assistant turn instead of drifting to the far left on wide monitors. */
  .thinking.svelte-191yngm {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--clay);
    animation: pulse-soft 1.4s infinite;
    padding-left: 38px;
  }

  /* ---------------- composer ---------------- */
  .composer-wrap.svelte-191yngm { padding: 10px 14px 10px; position: relative; }
  .file-input.svelte-191yngm {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  /* The composer is capped to the same 820px measure as the conversation rows
     and centred in the wrap, so on a wide monitor the input box lines up with
     the messages above instead of stretching across the whole column. The wrap
     stays full-width; below ~820px the cap is inert and the composer fills the
     width exactly as before. */
  .composer.svelte-191yngm {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 16px;
    box-shadow: var(--shadow-subtle);
    padding: 12px 14px 10px;
    transition: border-color 0.2s, background 0.2s;
  }
  .composer.svelte-191yngm:not(.disabled) { border-color: var(--smoke); }
  .composer.disabled.svelte-191yngm { background: var(--stone); }
  .composer.dragover.svelte-191yngm {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  /* pending attachment chips above the input line */
  .attach-row.svelte-191yngm {
    position: relative; /* positioning context for the .cmt-list popover */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    min-width: 0;
  }
  .attach-row.svelte-191yngm .attach-chip:where(.svelte-191yngm) {
    background: var(--paper);
    border-color: var(--smoke);
  }

  .composer-input.svelte-191yngm {
    min-height: 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
    line-height: 1.6;
    min-width: 0;
  }
  .cmd-pill.svelte-191yngm {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--ember-soft);
    color: var(--ember);
    font-size: 11.5px;
    font-weight: 600;
    flex-shrink: 0;
  }
  .typed.svelte-191yngm { color: var(--ink); word-break: break-word; }
  .placeholder.svelte-191yngm { color: var(--smoke); font-size: 12px; }
  .caret.svelte-191yngm {
    display: inline-block;
    width: 2px;
    height: 15px;
    background: var(--ember);
    vertical-align: -2px;
    margin-left: 1px;
    animation: caret-blink 1.1s infinite;
  }
  .caret.dim.svelte-191yngm { background: var(--smoke); }

  /* command chips — top segment inside the composer box */
  .cmd-chips.svelte-191yngm {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sand);
  }
  .cmd-chips.locked.svelte-191yngm { opacity: 0.55; }
  .chip.svelte-191yngm {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid var(--sand);
    background: var(--stone);
    font-size: 11px;
    color: var(--clay);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .chip.done.svelte-191yngm { color: var(--ash); opacity: 0.8; cursor: default; }
  .chip-check.svelte-191yngm { color: var(--ash); font-size: 10px; }
  .chip.upcoming.svelte-191yngm { color: var(--smoke); opacity: 0.7; cursor: default; }
  .chip.current.svelte-191yngm {
    border-color: var(--ember);
    background: var(--ember-soft);
    color: var(--ember);
    font-weight: 600;
    cursor: pointer;
  }
  .chip.current.svelte-191yngm:hover { filter: brightness(0.96); }

  .composer-foot.svelte-191yngm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }
  .foot-plus.svelte-191yngm {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 8px;
    color: var(--clay);
    transition: background 0.12s;
    flex-shrink: 0;
  }
  .foot-plus.svelte-191yngm:hover { background: var(--stone); }
  .foot-right.svelte-191yngm { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .turbo-toggle.svelte-191yngm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 11px;
    border-radius: 8px;
    border: 1px solid var(--sand);
    background: var(--paper);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--clay);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .turbo-toggle.svelte-191yngm:hover { background: var(--stone); color: var(--ink); }
  .turbo-toggle.on.svelte-191yngm {
    border-color: var(--ember);
    background: var(--ember-soft);
    color: var(--ember);
  }
  .send-btn.svelte-191yngm {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ink-strong);
    color: var(--paper);
    transition: filter 0.15s;
    flex-shrink: 0;
  }
  .send-btn.svelte-191yngm:hover:not(:disabled) { filter: brightness(1.25); }
  .send-btn.svelte-191yngm:disabled {
    background: var(--inset);
    color: var(--smoke);
    cursor: default;
  }

  /* ---------------- keycap ---------------- */
  .kbd.svelte-191yngm {
    display: inline-block;
    border: 1px solid var(--sand);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0 4px;
    font-size: 9.5px;
    color: var(--clay);
    background: var(--paper);
  }

  .chip.svelte-1ghi5ji {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 21px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
    user-select: none;
    vertical-align: middle;
  }
  .chip.pill.svelte-1ghi5ji { border-radius: 9999px; }
  .chip.svelte-1ghi5ji svg { flex-shrink: 0; color: currentColor; }
  /* maxWidth 未指定時は従来どおり折返し・切詰めなし（overflow/ellipsis は
     max-width が実際に効いたときだけ視覚上意味を持つ・現行挙動は不変）。 */
  .lbl.svelte-1ghi5ji {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  /* CR-03: クリック可能バリアント（一元実装・レンダラ側での上書き禁止） */
  .chip.clickable.svelte-1ghi5ji { cursor: pointer; }
  .chip.clickable.svelte-1ghi5ji:hover .lbl:where(.svelte-1ghi5ji) { text-decoration: underline; }
  .chip.clickable.svelte-1ghi5ji:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .chip.accent.svelte-1ghi5ji  { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); }
  .chip.green.svelte-1ghi5ji   { color: var(--green);  background: var(--green-soft);  border-color: var(--green-soft); }
  .chip.red.svelte-1ghi5ji     { color: var(--red);    background: var(--red-soft);    border-color: var(--red-soft); }
  .chip.amber.svelte-1ghi5ji   { color: var(--amber);  background: var(--amber-soft);  border-color: var(--amber-soft); }
  .chip.purple.svelte-1ghi5ji  { color: var(--purple); background: var(--purple-soft); border-color: var(--purple-soft); }
  .chip.neutral.svelte-1ghi5ji { color: var(--clay);   background: var(--inset);       border-color: var(--sand); }

  /* §11.2: 薄字・非活性（台帳に無い接頭辞付きID）。variant 色を上書きし
     --smoke 文字＋点線境界で「存在しない参照」を静かに可視化する。
     cursor:default・非インタラクティブ（clickable が付かないため hover 下線も無い）。 */
  .chip.muted.svelte-1ghi5ji {
    color: var(--smoke);
    background: transparent;
    border-color: var(--sand);
    border-style: dashed;
    cursor: default;
  }

  .rt-ref.svelte-irq1xq {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-family: var(--font-mono);
    font-size: 0.94em;
    color: var(--accent);
    cursor: pointer;
    line-height: inherit;
    white-space: nowrap;
  }
  .rt-ref.svelte-irq1xq:hover { text-decoration: underline; }
  .rt-ref.svelte-irq1xq:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-radius: var(--radius-sm);
  }

  /* the scroll container owns BOTH scroll axes so sticky can anchor
     to it (position: sticky is relative to the nearest scroll port). */
  .idt-wrap.svelte-cigiva {
    overflow: auto;
    max-height: 62vh;
    border: 1px solid var(--sand);
    border-radius: var(--radius-md);
    background: var(--paper);
  }
  .idt-wrap.svelte-cigiva:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .idt.svelte-cigiva {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: var(--text-sm);
    color: var(--clay);
  }

  th.svelte-cigiva, td.svelte-cigiva {
    padding: 0 var(--space-4);           /* ≥12px h-pad */
    height: 40px;                        /* 36–44px row height */
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--sand);
    vertical-align: middle;
  }
  td.num.svelte-cigiva { text-align: right; }

  thead.svelte-cigiva th:where(.svelte-cigiva) {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--inset);
    color: var(--ink);
    font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--sand);
  }

  /* zebra — even body rows tinted with --stone */
  tbody.svelte-cigiva tr:where(.svelte-cigiva):nth-child(even) td:where(.svelte-cigiva) { background: var(--stone); }
  tbody.svelte-cigiva tr:where(.svelte-cigiva):nth-child(odd) td:where(.svelte-cigiva) { background: var(--paper); }
  tbody.svelte-cigiva tr:where(.svelte-cigiva):hover td:where(.svelte-cigiva) { background: var(--accent-soft); }
  tbody.svelte-cigiva tr:where(.svelte-cigiva):last-child td:where(.svelte-cigiva) { border-bottom: none; }

  /* left-frozen columns. ID col at left:0; 名称 col offset by the ID
     column's measured width (--name-left) so they abut exactly with
     no gap/overlap. Both sit above normal cells; header corners above. */
  .sticky-id.svelte-cigiva { position: sticky; left: 0; z-index: 2; min-width: 64px; }
  .sticky-name.svelte-cigiva { position: sticky; left: var(--name-left, 92px); z-index: 2; min-width: 150px; }
  thead.svelte-cigiva .sticky-id:where(.svelte-cigiva), thead.svelte-cigiva .sticky-name:where(.svelte-cigiva) { z-index: 4; }

  /* frozen body cells need an opaque bg so scrolled content doesn't
     bleed through; keep zebra by re-declaring per parity. */
  tbody.svelte-cigiva tr:where(.svelte-cigiva):nth-child(even) td.sticky-id:where(.svelte-cigiva),
  tbody.svelte-cigiva tr:where(.svelte-cigiva):nth-child(even) td.sticky-name:where(.svelte-cigiva) { background: var(--stone); }
  tbody.svelte-cigiva tr:where(.svelte-cigiva):nth-child(odd) td.sticky-id:where(.svelte-cigiva),
  tbody.svelte-cigiva tr:where(.svelte-cigiva):nth-child(odd) td.sticky-name:where(.svelte-cigiva) { background: var(--paper); }
  tbody.svelte-cigiva tr:where(.svelte-cigiva):hover td.sticky-id:where(.svelte-cigiva),
  tbody.svelte-cigiva tr:where(.svelte-cigiva):hover td.sticky-name:where(.svelte-cigiva) { background: var(--accent-soft); }

  /* a hairline on the right edge of the frozen block for depth */
  .sticky-name.svelte-cigiva::after {
    content: '';
    position: absolute;
    top: 0; right: -1px; bottom: -1px;
    width: 1px;
    background: var(--sand);
  }

  td.sticky-id.svelte-cigiva { color: var(--accent); }
  td.sticky-name.svelte-cigiva { color: var(--ink); font-weight: var(--weight-medium); font-family: var(--font-ui); }

  .dash.svelte-cigiva { color: var(--smoke); }
  .req.svelte-cigiva { display: inline-flex; color: var(--red); }
  .opt.svelte-cigiva { display: inline-flex; color: var(--smoke); }

  .modes.svelte-cigiva { display: inline-flex; gap: 3px; }
  .mchip.svelte-cigiva {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: var(--radius-sm);
    font-size: 10px; font-weight: var(--weight-semibold);
    font-family: var(--font-mono);
    border: 1px solid transparent;
  }
  .mchip.green.svelte-cigiva { color: var(--green); background: var(--green-soft); border-color: var(--green-soft); }
  .mchip.red.svelte-cigiva { color: var(--red); background: var(--red-soft); border-color: var(--red-soft); }
  .mchip.neutral.svelte-cigiva { color: var(--clay); background: var(--inset); border-color: var(--sand); }

  /* 既存の *-sub / *-filter 行と同じ間隔規律に合わせる（既存トークンのみ）。 */
  .impl-row.svelte-v8firs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }
  .impl-l.svelte-v8firs {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--ash);
  }
  .impl-l.svelte-v8firs svg { color: var(--ash); flex-shrink: 0; }
  .impl-n.svelte-v8firs {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--ash);
    background: var(--inset);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
  }
  .impl-chips.svelte-v8firs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .vd.svelte-1ockwsr {
    height: 100%;
    overflow-y: auto;
    color: var(--ink);
    position: relative;
    scroll-behavior: smooth;
  }
  .vd-empty.svelte-1ockwsr {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    color: var(--smoke); text-align: center; padding: 60px 20px;
  }
  .vd-empty.svelte-1ockwsr p:where(.svelte-1ockwsr) { margin: 0; font-size: var(--text-base); }

  /* ---- header ---- */
  .vd-head.svelte-1ockwsr {
    max-width: 1180px; margin: 0 auto;
    padding: var(--space-5) var(--space-7) var(--space-4);
  }
  .vd-titlerow.svelte-1ockwsr { display: flex; align-items: center; gap: var(--space-3); }
  .vd-titlerow.svelte-1ockwsr svg { color: var(--clay); flex-shrink: 0; }
  .vd-name.svelte-1ockwsr {
    font-size: var(--text-xl); font-weight: var(--weight-semibold);
    color: var(--ink-strong); margin: 0; line-height: var(--leading-tight);
  }
  .vd-sub.svelte-1ockwsr { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-2); }
  .vd-id.svelte-1ockwsr { font-size: var(--text-sm); color: var(--accent); }
  .vd-ver.svelte-1ockwsr { font-size: var(--text-xs); color: var(--ash); }
  .vd-purpose.svelte-1ockwsr {
    margin: var(--space-3) 0 0;
    font-size: var(--text-md); line-height: var(--leading-normal);
    color: var(--clay); max-width: 72ch; white-space: pre-line;
  }

  .vd-rev.svelte-1ockwsr { margin-top: var(--space-4); }
  .vd-rev-toggle.svelte-1ockwsr {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--clay);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--sand); border-radius: var(--radius-md); background: var(--stone);
    transition: background 160ms ease-out, border-color 160ms ease-out;
  }
  .vd-rev-toggle.svelte-1ockwsr:hover { background: var(--inset); color: var(--ink); }
  .vd-rev-toggle.svelte-1ockwsr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .vd-rev-toggle.svelte-1ockwsr .chev:where(.svelte-1ockwsr) { display: inline-flex; transition: transform 180ms ease-out; }
  .vd-rev-toggle.svelte-1ockwsr .chev.open:where(.svelte-1ockwsr) { transform: rotate(90deg); }
  .vd-rev-body.svelte-1ockwsr { margin-top: var(--space-3); animation: svelte-1ockwsr-vd-fade 200ms ease-out; }

  .vd-mini.svelte-1ockwsr {
    border-collapse: collapse; width: 100%; font-size: var(--text-sm);
    border: 1px solid var(--sand); border-radius: var(--radius-md); overflow: hidden;
  }
  .vd-mini.svelte-1ockwsr th:where(.svelte-1ockwsr) {
    background: var(--inset); color: var(--ink); text-align: left;
    padding: var(--space-2) var(--space-4); font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--sand); white-space: nowrap;
  }
  .vd-mini.svelte-1ockwsr td:where(.svelte-1ockwsr) { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--sand); color: var(--clay); }
  .vd-mini.svelte-1ockwsr tbody:where(.svelte-1ockwsr) tr:where(.svelte-1ockwsr):last-child td:where(.svelte-1ockwsr) { border-bottom: none; }
  .vd-mini.svelte-1ockwsr tbody:where(.svelte-1ockwsr) tr:where(.svelte-1ockwsr):nth-child(even) { background: var(--stone); }

  /* ---- section nav (sticky) ---- */
  .vd-nav.svelte-1ockwsr {
    position: sticky; top: 0; z-index: 5;
    display: flex; flex-wrap: wrap; gap: var(--space-1);
    max-width: 1180px; margin: 0 auto;
    padding: var(--space-2) var(--space-7);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sand);
  }
  .vd-navbtn.svelte-1ockwsr {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--clay);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md); border: 1px solid transparent;
    transition: background 150ms ease-out, color 150ms ease-out;
  }
  .vd-navbtn.svelte-1ockwsr:hover { background: var(--stone); color: var(--ink); }
  .vd-navbtn.on.svelte-1ockwsr { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
  .vd-navbtn.svelte-1ockwsr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .vd-navbtn.svelte-1ockwsr svg { color: inherit; }

  /* ---- body / sections ---- */
  .vd-body.svelte-1ockwsr { max-width: 1180px; margin: 0 auto; padding: var(--space-6) var(--space-7) var(--space-8); }
  .vd-section.svelte-1ockwsr { margin-bottom: var(--space-8); scroll-margin-top: 56px; }
  .vd-h.svelte-1ockwsr {
    font-size: var(--text-lg); font-weight: var(--weight-semibold);
    color: var(--ink-strong); margin: 0 0 var(--space-4); line-height: var(--leading-tight);
    display: flex; align-items: baseline; gap: var(--space-2);
  }
  .vd-h3.svelte-1ockwsr {
    font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--ink);
    margin: var(--space-5) 0 var(--space-3);
    display: flex; align-items: baseline; gap: var(--space-2);
  }
  .count.svelte-1ockwsr {
    font-size: var(--text-xs); font-weight: var(--weight-medium);
    color: var(--ash); font-family: var(--font-mono);
    background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px;
  }

  /* ---- overview ---- */
  .ov-grid.svelte-1ockwsr { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-6); }
  @media (max-width: 820px) { .ov-grid.svelte-1ockwsr { grid-template-columns: 1fr; } }
  .ov-block.svelte-1ockwsr {
    background: var(--stone); border: 1px solid var(--sand);
    border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  }
  .ov-side.svelte-1ockwsr { display: flex; flex-direction: column; gap: var(--space-4); }
  .ov-h.svelte-1ockwsr {
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink);
    margin: 0 0 var(--space-3); display: flex; align-items: center; gap: var(--space-2);
  }
  .ov-h.svelte-1ockwsr svg { color: var(--ash); }
  .caps.svelte-1ockwsr { margin: 0; padding: 0; list-style: none; counter-reset: cap; display: flex; flex-direction: column; gap: var(--space-3); }
  .caps.svelte-1ockwsr li:where(.svelte-1ockwsr) {
    counter-increment: cap; position: relative; padding-left: 26px;
    font-size: var(--text-base); line-height: var(--leading-normal);
  }
  .caps.svelte-1ockwsr li:where(.svelte-1ockwsr)::before {
    content: counter(cap); position: absolute; left: 0; top: 1px;
    width: 18px; height: 18px; border-radius: var(--radius-sm);
    background: var(--accent-soft); color: var(--accent);
    font-size: 10px; font-weight: var(--weight-semibold); font-family: var(--font-mono);
    display: flex; align-items: center; justify-content: center;
  }
  .cap-title.svelte-1ockwsr { font-weight: var(--weight-medium); color: var(--ink); margin-right: var(--space-2); }
  .cap-desc.svelte-1ockwsr { color: var(--clay); }
  .ov-chips.svelte-1ockwsr { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .meta-dl.svelte-1ockwsr { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .meta-dl.svelte-1ockwsr > div:where(.svelte-1ockwsr) { display: grid; grid-template-columns: 84px 1fr; gap: var(--space-3); align-items: baseline; }
  .meta-dl.svelte-1ockwsr dt:where(.svelte-1ockwsr) { font-size: var(--text-xs); color: var(--ash); margin: 0; }
  .meta-dl.svelte-1ockwsr dd:where(.svelte-1ockwsr) { margin: 0; font-size: var(--text-sm); color: var(--clay); word-break: break-word; }
  .pparam.svelte-1ockwsr {
    display: inline-block; font-size: var(--text-xs); font-family: var(--font-mono);
    background: var(--inset); color: var(--clay);
    border-radius: var(--radius-sm); padding: 1px 6px; margin: 0 3px 3px 0;
  }

  /* ---- events ---- */
  .ev-list.svelte-1ockwsr { display: flex; flex-direction: column; gap: var(--space-3); }
  .ev-card.svelte-1ockwsr {
    border: 1px solid var(--sand); border-radius: var(--radius-md);
    background: var(--paper); padding: var(--space-4) var(--space-5);
    transition: box-shadow 180ms ease-out, border-color 180ms ease-out;
  }
  .ev-card.svelte-1ockwsr:hover { box-shadow: var(--shadow-subtle); border-color: var(--smoke); }
  .ev-head.svelte-1ockwsr { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
  .ev-head.svelte-1ockwsr svg { color: var(--accent); flex-shrink: 0; }
  .ev-id.svelte-1ockwsr { font-size: var(--text-sm); color: var(--accent); }
  .ev-trigger.svelte-1ockwsr { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--ink-strong); }
  .ev-rel.svelte-1ockwsr { font-size: var(--text-xs); color: var(--ash); }
  .ev-steps.svelte-1ockwsr { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: var(--space-2); }
  .ev-step.svelte-1ockwsr {
    counter-increment: step; display: flex; align-items: flex-start; gap: var(--space-3);
    position: relative; padding-left: 26px;
    font-size: var(--text-base); line-height: var(--leading-normal); color: var(--clay);
  }
  .ev-step.svelte-1ockwsr::before {
    content: counter(step); position: absolute; left: 0; top: 1px;
    width: 18px; height: 18px; border-radius: 9999px;
    background: var(--inset); color: var(--ash);
    font-size: 10px; font-weight: var(--weight-medium); font-family: var(--font-mono);
    display: flex; align-items: center; justify-content: center;
  }
  .ev-step.api.svelte-1ockwsr::before { background: var(--accent-soft); color: var(--accent); }
  .api-step.svelte-1ockwsr {
    display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: opacity 150ms ease-out;
  }
  button.api-step.svelte-1ockwsr:hover { opacity: 0.82; }
  button.api-step.svelte-1ockwsr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .step-text.svelte-1ockwsr { flex: 1; min-width: 0; }
  .ev-msgs.svelte-1ockwsr { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
  .ev-msgs-l.svelte-1ockwsr { font-size: var(--text-xs); color: var(--ash); }

  /* ---- generic tables (validation / message) ---- */
  .tbl-wrap.svelte-1ockwsr {
    overflow-x: auto; border: 1px solid var(--sand);
    border-radius: var(--radius-md); background: var(--paper);
  }
  .vd-tbl.svelte-1ockwsr { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--text-sm); }
  .vd-tbl.svelte-1ockwsr th:where(.svelte-1ockwsr) {
    position: sticky; top: 0; z-index: 1;
    background: var(--inset); color: var(--ink); text-align: left;
    padding: var(--space-2) var(--space-4); font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--sand); white-space: nowrap; height: 38px;
  }
  .vd-tbl.svelte-1ockwsr td:where(.svelte-1ockwsr) {
    padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--sand);
    color: var(--clay); vertical-align: middle; height: 38px; line-height: var(--leading-normal);
  }
  .vd-tbl.svelte-1ockwsr tbody:where(.svelte-1ockwsr) tr:where(.svelte-1ockwsr):last-child td:where(.svelte-1ockwsr) { border-bottom: none; }
  .vd-tbl.svelte-1ockwsr tbody:where(.svelte-1ockwsr) tr:where(.svelte-1ockwsr):nth-child(even) td:where(.svelte-1ockwsr) { background: var(--stone); }
  .vd-tbl.svelte-1ockwsr tbody:where(.svelte-1ockwsr) tr:where(.svelte-1ockwsr):hover td:where(.svelte-1ockwsr) { background: var(--accent-soft); }
  .w-no.svelte-1ockwsr { width: 48px; }
  .w-id.svelte-1ockwsr { width: 110px; }
  .w-msg.svelte-1ockwsr { width: 130px; }
  .w-type.svelte-1ockwsr { width: 64px; }
  .w-used.svelte-1ockwsr { width: 180px; }
  .w-name.svelte-1ockwsr { width: 200px; }
  .msgid.svelte-1ockwsr { color: var(--accent); }
  .used.svelte-1ockwsr { color: var(--ash); font-size: var(--text-xs); }
  .dash.svelte-1ockwsr { color: var(--smoke); }

  /* ---- matrix ---- */
  .legend.svelte-1ockwsr { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
  .legend.svelte-1ockwsr .lg:where(.svelte-1ockwsr) { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--clay); }
  .matrix.svelte-1ockwsr .role:where(.svelte-1ockwsr) { text-align: center; }
  .matrix.svelte-1ockwsr .cell:where(.svelte-1ockwsr) { text-align: center; }
  .mchip.svelte-1ockwsr {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: var(--radius-sm); font-size: 11px; font-weight: var(--weight-semibold);
    font-family: var(--font-mono); border: 1px solid transparent;
  }
  .mchip.green.svelte-1ockwsr { color: var(--green); background: var(--green-soft); border-color: var(--green-soft); }
  .mchip.red.svelte-1ockwsr { color: var(--red); background: var(--red-soft); border-color: var(--red-soft); }
  .mchip.neutral.svelte-1ockwsr { color: var(--clay); background: var(--inset); border-color: var(--sand); }

  /* ---- remarks ---- */
  .vd-remarks.svelte-1ockwsr {
    margin: 0; font-size: var(--text-base); line-height: var(--leading-normal);
    color: var(--clay); max-width: 72ch; white-space: pre-line;
    background: var(--stone); border: 1px solid var(--sand);
    border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  }
  .vd-noremarks.svelte-1ockwsr {
    display: flex; align-items: center; gap: var(--space-2);
    color: var(--smoke); font-size: var(--text-sm);
    padding: var(--space-4) var(--space-5);
    background: var(--stone); border: 1px dashed var(--sand); border-radius: var(--radius-md);
  }

  @keyframes svelte-1ockwsr-vd-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

  /* ImplChipRow と同じ間隔規律（既存トークンのみ）。原典＝より古い層のため
     見出しアイコンは Layers（地層）を使う。色は Chip 統制部品の neutral に委ね、
     本行では独自色を持たない（生 hex 禁止・§2.0-11）。 */
  .origin-row.svelte-96l5pw {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }
  .origin-l.svelte-96l5pw {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--ash);
  }
  .origin-l.svelte-96l5pw svg { color: var(--ash); flex-shrink: 0; }
  .origin-n.svelte-96l5pw {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--ash);
    background: var(--inset);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
  }
  .origin-chips.svelte-96l5pw {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .ad.svelte-1uxc5vu {
    height: 100%; overflow-y: auto; color: var(--ink);
    position: relative; scroll-behavior: smooth;
  }
  .ad-empty.svelte-1uxc5vu {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    color: var(--smoke); text-align: center; padding: 60px 20px;
  }
  .ad-empty.svelte-1uxc5vu p:where(.svelte-1uxc5vu) { margin: 0; font-size: var(--text-base); }

  /* ---- header ---- */
  .ad-head.svelte-1uxc5vu { max-width: 1080px; margin: 0 auto; padding: var(--space-5) var(--space-7) var(--space-4); }
  .ad-methodrow.svelte-1uxc5vu { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .ad-path.svelte-1uxc5vu {
    font-size: var(--text-md); color: var(--ink-strong); font-weight: var(--weight-medium);
    background: var(--inset); border: 1px solid var(--sand);
    border-radius: var(--radius-sm); padding: 2px var(--space-3); word-break: break-all;
  }
  .ad-titlerow.svelte-1uxc5vu { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
  .ad-name.svelte-1uxc5vu {
    font-size: var(--text-xl); font-weight: var(--weight-semibold);
    color: var(--ink-strong); margin: 0; line-height: var(--leading-tight);
  }
  .ad-sub.svelte-1uxc5vu { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-2); }
  .ad-id.svelte-1uxc5vu { font-size: var(--text-sm); color: var(--accent); }
  .ad-ver.svelte-1uxc5vu { font-size: var(--text-xs); color: var(--ash); }
  .ad-summary.svelte-1uxc5vu {
    margin: var(--space-3) 0 0; font-size: var(--text-md); line-height: var(--leading-normal);
    color: var(--clay); max-width: 72ch; white-space: pre-line;
  }

  .ad-endpoint.svelte-1uxc5vu {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
    align-items: center; margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--stone); border: 1px solid var(--sand); border-radius: var(--radius-md);
  }
  .ep-item.svelte-1uxc5vu { display: inline-flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-xs); }
  .ep-k.svelte-1uxc5vu { color: var(--ash); }
  .ep-v.svelte-1uxc5vu { color: var(--clay); }
  .ep-rules.svelte-1uxc5vu { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
  .ep-rules.svelte-1uxc5vu svg { color: var(--ash); }

  .ad-rev.svelte-1uxc5vu { margin-top: var(--space-4); }
  .ad-rev-toggle.svelte-1uxc5vu {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--clay);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--sand); border-radius: var(--radius-md); background: var(--stone);
    transition: background 160ms ease-out, border-color 160ms ease-out;
  }
  .ad-rev-toggle.svelte-1uxc5vu:hover { background: var(--inset); color: var(--ink); }
  .ad-rev-toggle.svelte-1uxc5vu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ad-rev-toggle.svelte-1uxc5vu .chev:where(.svelte-1uxc5vu) { display: inline-flex; transition: transform 180ms ease-out; }
  .ad-rev-toggle.svelte-1uxc5vu .chev.open:where(.svelte-1uxc5vu) { transform: rotate(90deg); }
  .ad-rev-body.svelte-1uxc5vu { margin-top: var(--space-3); animation: svelte-1uxc5vu-ad-fade 200ms ease-out; }
  .ad-mini.svelte-1uxc5vu {
    border-collapse: collapse; width: 100%; font-size: var(--text-sm);
    border: 1px solid var(--sand); border-radius: var(--radius-md); overflow: hidden;
  }
  .ad-mini.svelte-1uxc5vu th:where(.svelte-1uxc5vu) {
    background: var(--inset); color: var(--ink); text-align: left;
    padding: var(--space-2) var(--space-4); font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--sand); white-space: nowrap;
  }
  .ad-mini.svelte-1uxc5vu td:where(.svelte-1uxc5vu) { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--sand); color: var(--clay); }
  .ad-mini.svelte-1uxc5vu tbody:where(.svelte-1uxc5vu) tr:where(.svelte-1uxc5vu):last-child td:where(.svelte-1uxc5vu) { border-bottom: none; }
  .ad-mini.svelte-1uxc5vu tbody:where(.svelte-1uxc5vu) tr:where(.svelte-1uxc5vu):nth-child(even) { background: var(--stone); }

  /* ---- nav ---- */
  .ad-nav.svelte-1uxc5vu {
    position: sticky; top: 0; z-index: 5;
    display: flex; flex-wrap: wrap; gap: var(--space-1);
    max-width: 1080px; margin: 0 auto; padding: var(--space-2) var(--space-7);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--sand);
  }
  .ad-navbtn.svelte-1uxc5vu {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--clay);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); border: 1px solid transparent;
    transition: background 150ms ease-out, color 150ms ease-out;
  }
  .ad-navbtn.svelte-1uxc5vu:hover { background: var(--stone); color: var(--ink); }
  .ad-navbtn.on.svelte-1uxc5vu { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
  .ad-navbtn.svelte-1uxc5vu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ad-navbtn.svelte-1uxc5vu svg { color: inherit; }

  /* ---- body / sections ---- */
  .ad-body.svelte-1uxc5vu { max-width: 1080px; margin: 0 auto; padding: var(--space-6) var(--space-7) var(--space-8); }
  .ad-section.svelte-1uxc5vu { margin-bottom: var(--space-8); scroll-margin-top: 56px; }
  .ad-h.svelte-1uxc5vu {
    font-size: var(--text-lg); font-weight: var(--weight-semibold);
    color: var(--ink-strong); margin: 0 0 var(--space-4); line-height: var(--leading-tight);
    display: flex; align-items: baseline; gap: var(--space-2);
  }
  .count.svelte-1uxc5vu {
    font-size: var(--text-xs); font-weight: var(--weight-medium);
    color: var(--ash); font-family: var(--font-mono);
    background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px;
  }

  /* ---- process flow ---- */
  .flow.svelte-1uxc5vu { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
  .flow-step.svelte-1uxc5vu {
    display: flex; gap: var(--space-4);
    border: 1px solid var(--sand); border-radius: var(--radius-md);
    background: var(--paper); padding: var(--space-4) var(--space-5);
    transition: box-shadow 180ms ease-out, border-color 180ms ease-out;
  }
  .flow-step.svelte-1uxc5vu:hover { box-shadow: var(--shadow-subtle); border-color: var(--smoke); }
  .flow-no.svelte-1uxc5vu {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 9999px;
    background: var(--inset); color: var(--ash);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
  }
  .flow-main.svelte-1uxc5vu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .flow-topline.svelte-1uxc5vu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .flow-apiref.svelte-1uxc5vu {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-xs); color: var(--ash);
  }
  .flow-apiref.svelte-1uxc5vu svg { color: var(--ash); }

  .sql-block.svelte-1uxc5vu {
    display: flex; flex-direction: column; gap: var(--space-2);
    background: var(--inset); border: 1px solid var(--sand);
    border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  }
  .sql-row.svelte-1uxc5vu { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-xs); }
  .sql-k.svelte-1uxc5vu {
    flex-shrink: 0; width: 100px; color: var(--ash);
    display: inline-flex; align-items: center; gap: var(--space-1); padding-top: 2px;
  }
  .sql-k.svelte-1uxc5vu svg { color: var(--ash); }
  .sql-v.svelte-1uxc5vu { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .tbl.svelte-1uxc5vu {
    font-size: var(--text-xs); color: var(--accent);
    background: var(--accent-soft); border-radius: var(--radius-sm); padding: 1px 6px;
  }
  .col.svelte-1uxc5vu {
    font-size: var(--text-xs); color: var(--clay);
    background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius-sm); padding: 1px 6px;
  }
  .sql-code.svelte-1uxc5vu {
    font-size: var(--text-xs); color: var(--ink); line-height: var(--leading-normal);
    word-break: break-word; white-space: pre-wrap;
  }

  /* ---- schema tree ---- */
  .tree.svelte-1uxc5vu {
    border: 1px solid var(--sand); border-radius: var(--radius-md);
    background: var(--paper); overflow: hidden;
  }
  .tnode.svelte-1uxc5vu {
    padding: var(--space-2) var(--space-4) var(--space-2)
             calc(var(--space-4) + var(--d, 0) * 18px);
    border-bottom: 1px solid var(--sand);
    transition: background 150ms ease-out;
  }
  .tnode.svelte-1uxc5vu:last-child { border-bottom: none; }
  .tnode.svelte-1uxc5vu:hover { background: var(--stone); }
  .tnode-line.svelte-1uxc5vu { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .tguides.svelte-1uxc5vu { display: none; }
  .tseg.svelte-1uxc5vu {
    font-size: var(--text-sm); color: var(--ash); font-weight: var(--weight-medium);
    display: inline-flex; align-items: center; gap: 2px;
  }
  .tseg.leaf.svelte-1uxc5vu { color: var(--ink-strong); }
  .tseg.svelte-1uxc5vu .tcaret { color: var(--smoke); }
  .req.svelte-1uxc5vu {
    font-size: 10px; font-weight: var(--weight-semibold); color: var(--red);
    background: var(--red-soft); border-radius: var(--radius-sm); padding: 1px 5px;
  }
  .opt.svelte-1uxc5vu {
    font-size: 10px; font-weight: var(--weight-medium); color: var(--ash);
    background: var(--inset); border-radius: var(--radius-sm); padding: 1px 5px;
  }
  .tnode-meta.svelte-1uxc5vu {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);
    margin-top: 3px; font-size: var(--text-xs); color: var(--clay);
  }
  .tlogical.svelte-1uxc5vu { color: var(--clay); }
  .tmeta.svelte-1uxc5vu { color: var(--ash); display: inline-flex; gap: 3px; align-items: baseline; }
  .tmeta.svelte-1uxc5vu code:where(.svelte-1uxc5vu), .tchecks.svelte-1uxc5vu { color: var(--clay); }
  .tchecks.svelte-1uxc5vu { color: var(--ash); font-style: normal; }
  .tref.svelte-1uxc5vu {
    display: inline-flex; align-items: center; gap: 3px;
    color: var(--accent); font-size: var(--text-xs);
    background: var(--accent-soft); border-radius: var(--radius-sm); padding: 1px 6px;
  }
  .tref.svelte-1uxc5vu svg { color: currentColor; }
  .tref.reserved.svelte-1uxc5vu { color: var(--ash); background: var(--inset); }

  /* ---- tables ---- */
  .tbl-wrap.svelte-1uxc5vu { overflow-x: auto; border: 1px solid var(--sand); border-radius: var(--radius-md); background: var(--paper); }
  .ad-tbl.svelte-1uxc5vu { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--text-sm); }
  .ad-tbl.svelte-1uxc5vu th:where(.svelte-1uxc5vu) {
    position: sticky; top: 0; z-index: 1;
    background: var(--inset); color: var(--ink); text-align: left;
    padding: var(--space-2) var(--space-4); font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--sand); white-space: nowrap; height: 38px;
  }
  .ad-tbl.svelte-1uxc5vu td:where(.svelte-1uxc5vu) {
    padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--sand);
    color: var(--clay); vertical-align: middle; min-height: 38px; line-height: var(--leading-normal);
  }
  .ad-tbl.svelte-1uxc5vu tbody:where(.svelte-1uxc5vu) tr:where(.svelte-1uxc5vu):last-child td:where(.svelte-1uxc5vu) { border-bottom: none; }
  .ad-tbl.svelte-1uxc5vu tbody:where(.svelte-1uxc5vu) tr:where(.svelte-1uxc5vu):nth-child(even) td:where(.svelte-1uxc5vu) { background: var(--stone); }
  .ad-tbl.svelte-1uxc5vu tbody:where(.svelte-1uxc5vu) tr:where(.svelte-1uxc5vu):hover td:where(.svelte-1uxc5vu) { background: var(--accent-soft); }
  .w-no.svelte-1uxc5vu { width: 48px; }
  .w-msg.svelte-1uxc5vu { width: 150px; }
  .w-status.svelte-1uxc5vu { width: 150px; }
  .w-body.svelte-1uxc5vu { width: 200px; }
  .errcell.svelte-1uxc5vu { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
  .respbody.svelte-1uxc5vu { color: var(--ink); font-weight: var(--weight-medium); }
  .errref.svelte-1uxc5vu { font-size: var(--text-xs); color: var(--ash); }
  .dash.svelte-1uxc5vu { color: var(--smoke); }

  /* ---- remarks ---- */
  .ad-remarks.svelte-1uxc5vu {
    margin: 0; font-size: var(--text-base); line-height: var(--leading-normal);
    color: var(--clay); max-width: 72ch; white-space: pre-line;
    background: var(--stone); border: 1px solid var(--sand);
    border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  }
  .ad-noremarks.svelte-1uxc5vu {
    display: flex; align-items: center; gap: var(--space-2);
    color: var(--smoke); font-size: var(--text-sm);
    padding: var(--space-4) var(--space-5);
    background: var(--stone); border: 1px dashed var(--sand); border-radius: var(--radius-md);
  }

  @keyframes svelte-1uxc5vu-ad-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

  .if.svelte-g90b33 {
    height: 100%; overflow-y: auto; color: var(--ink);
    position: relative; scroll-behavior: smooth;
  }
  .if-empty.svelte-g90b33 {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    color: var(--smoke); text-align: center; padding: 60px 20px;
  }
  .if-empty.svelte-g90b33 p:where(.svelte-g90b33) { margin: 0; font-size: var(--text-base); }

  /* ---- header ---- */
  .if-head.svelte-g90b33 { max-width: 1120px; margin: 0 auto; padding: var(--space-5) var(--space-7) var(--space-4); }
  .if-toprow.svelte-g90b33 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .if-titlerow.svelte-g90b33 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
  .if-titlerow.svelte-g90b33 svg { color: var(--clay); flex-shrink: 0; }
  .if-name.svelte-g90b33 {
    font-size: var(--text-xl); font-weight: var(--weight-semibold);
    color: var(--ink-strong); margin: 0; line-height: var(--leading-tight);
  }
  .if-sub.svelte-g90b33 { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-2); }
  .if-id.svelte-g90b33 { font-size: var(--text-sm); color: var(--accent); }
  .if-ver.svelte-g90b33 { font-size: var(--text-xs); color: var(--ash); }
  .if-summary.svelte-g90b33 {
    margin: var(--space-3) 0 0; font-size: var(--text-md); line-height: var(--leading-normal);
    color: var(--clay); max-width: 72ch; white-space: pre-line;
  }

  /* ---- 連携メタ ---- */
  .if-meta.svelte-g90b33 {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
    align-items: center; margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--stone); border: 1px solid var(--sand); border-radius: var(--radius-md);
  }
  .meta-item.svelte-g90b33 { display: inline-flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-xs); }
  .meta-k.svelte-g90b33 {
    color: var(--ash); display: inline-flex; align-items: center; gap: var(--space-1);
    white-space: nowrap;
  }
  .meta-k.svelte-g90b33 svg { color: var(--ash); align-self: center; }
  .meta-v.svelte-g90b33 { color: var(--clay); }
  .meta-rules.svelte-g90b33 { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
  .meta-rules.svelte-g90b33 svg { color: var(--ash); }

  /* ---- revisions ---- */
  .if-rev.svelte-g90b33 { margin-top: var(--space-4); }
  .if-rev-toggle.svelte-g90b33 {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--clay);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--sand); border-radius: var(--radius-md); background: var(--stone);
    transition: background 160ms ease-out, border-color 160ms ease-out;
  }
  .if-rev-toggle.svelte-g90b33:hover { background: var(--inset); color: var(--ink); }
  .if-rev-toggle.svelte-g90b33:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .if-rev-toggle.svelte-g90b33 .chev:where(.svelte-g90b33) { display: inline-flex; transition: transform 180ms ease-out; }
  .if-rev-toggle.svelte-g90b33 .chev.open:where(.svelte-g90b33) { transform: rotate(90deg); }
  .if-rev-body.svelte-g90b33 { margin-top: var(--space-3); animation: svelte-g90b33-if-fade 200ms ease-out; }
  .if-mini.svelte-g90b33 {
    border-collapse: collapse; width: 100%; font-size: var(--text-sm);
    border: 1px solid var(--sand); border-radius: var(--radius-md); overflow: hidden;
  }
  .if-mini.svelte-g90b33 th:where(.svelte-g90b33) {
    background: var(--inset); color: var(--ink); text-align: left;
    padding: var(--space-2) var(--space-4); font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--sand); white-space: nowrap;
  }
  .if-mini.svelte-g90b33 td:where(.svelte-g90b33) { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--sand); color: var(--clay); }
  .if-mini.svelte-g90b33 tbody:where(.svelte-g90b33) tr:where(.svelte-g90b33):last-child td:where(.svelte-g90b33) { border-bottom: none; }
  .if-mini.svelte-g90b33 tbody:where(.svelte-g90b33) tr:where(.svelte-g90b33):nth-child(even) { background: var(--stone); }

  /* ---- body / sections ---- */
  .if-body.svelte-g90b33 { max-width: 1120px; margin: 0 auto; padding: var(--space-5) var(--space-7) var(--space-8); }
  .if-section.svelte-g90b33 { margin-bottom: var(--space-8); }
  .if-h.svelte-g90b33 {
    font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-strong);
    margin: 0 0 var(--space-4); line-height: var(--leading-tight);
    display: flex; align-items: center; gap: var(--space-2);
  }
  .if-h.svelte-g90b33 svg { color: var(--clay); }
  .count.svelte-g90b33 {
    font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ash);
    font-family: var(--font-mono); background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px;
  }

  /* ---- legend ---- */
  .if-legend.svelte-g90b33 {
    display: flex; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-4); font-size: var(--text-xs); color: var(--ash);
  }
  .if-legend.svelte-g90b33 .lg-arrow { color: var(--smoke); }
  .lg.svelte-g90b33 { display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px 8px; border-radius: var(--radius-sm); }
  .lg.svelte-g90b33 svg { color: currentColor; }
  .lg.src.svelte-g90b33 { color: var(--accent); background: var(--accent-soft); }
  .lg.xf.svelte-g90b33 { color: var(--clay); background: var(--inset); }
  .lg.dst.svelte-g90b33 { color: var(--green); background: var(--green-soft); }

  /* ---- mapping groups ---- */
  .map-groups.svelte-g90b33 { display: flex; flex-direction: column; gap: var(--space-6); }
  .map-group.svelte-g90b33 {
    border: 1px solid var(--sand); border-radius: var(--radius-md);
    background: var(--paper); overflow: hidden;
    /* #37: ビューアのペイン幅（ビューポートではない）で3列/縦積みを
       切り替えるための size container。広いビューポートでも仕様ペインが
       狭いケース（ツリー併存時など）で列が潰れないようにする。 */
    container-type: inline-size;
    container-name: mapgroup;
  }
  .mg-head.svelte-g90b33 {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--inset); border-bottom: 1px solid var(--sand);
  }
  .mg-id.svelte-g90b33 { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-strong); }
  .mg-label.svelte-g90b33 { font-size: var(--text-sm); color: var(--clay); }
  .mg-count.svelte-g90b33 {
    margin-left: auto; font-size: var(--text-xs); color: var(--ash);
    background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius-sm); padding: 0 6px;
  }
  .map-list.svelte-g90b33 { display: flex; flex-direction: column; }
  /* #37: .map-row は grid にする（旧 flex では .mr-note が3つ目の
     フレックス項目として横に並び、note の max-content が幅を食って
     .mr-cols が 0px まで潰れていた）。.mr-note の grid-column: 1/-1 は
     grid でのみ意図どおり「行の下の全幅」に配置される。 */
  .map-row.svelte-g90b33 {
    display: grid; grid-template-columns: 24px minmax(0, 1fr);
    gap: 0 var(--space-3); align-items: start;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--sand);
    transition: background 150ms ease-out;
  }
  .map-row.svelte-g90b33:last-child { border-bottom: none; }
  .map-row.svelte-g90b33:hover { background: var(--stone); }
  .mr-no.svelte-g90b33 {
    width: 24px; height: 22px; margin-top: 2px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); color: var(--ash);
    background: var(--inset); border-radius: var(--radius-sm);
  }
  .mr-cols.svelte-g90b33 {
    min-width: 0;
    /* #37: 送信元/送信先列に 150px の床を張る（1fr のみだと中央 auto 列に
       押されて 18px 程度まで潰れ、1文字ずつの縦折返しが起きる）。 */
    display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
    align-items: stretch; gap: var(--space-2);
  }
  /* #37: 3列が成立しない幅（コンテナ 619px 以下）は縦積みへ。判定は
     .map-group のコンテナ幅で行う（ペインが狭ければビューポートが
     広くても縦積みになる）。620px = 列床 150×2 + 中央列最大幅
     （xf-body 200 + 矢印・gap）+ 行番号・余白ぶんの安全域。 */
  @container mapgroup (max-width: 619px) {
    .mr-cols.svelte-g90b33 { grid-template-columns: minmax(0, 1fr); }
    .mr-xf.svelte-g90b33 { justify-content: center; }
  }
  /* container query 非対応環境向けのフォールバック（狭ビューポートのみ捕捉）。 */
  @media (max-width: 720px) {
    .mr-cols.svelte-g90b33 { grid-template-columns: minmax(0, 1fr); }
    .mr-xf.svelte-g90b33 { justify-content: center; }
  }

  /* ---- field card ---- */
  .fcard.svelte-g90b33 {
    min-width: 0; border: 1px solid var(--sand); border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: 3px;
  }
  .fcard.src.svelte-g90b33 { background: color-mix(in srgb, var(--accent-soft) 45%, var(--paper)); border-color: color-mix(in srgb, var(--accent) 22%, var(--sand)); }
  .fcard.dst.svelte-g90b33 { background: color-mix(in srgb, var(--green-soft) 45%, var(--paper)); border-color: color-mix(in srgb, var(--green) 22%, var(--sand)); }
  .fcard.blank.svelte-g90b33 { background: var(--stone); border-style: dashed; align-items: flex-start; justify-content: center; }
  .fc-top.svelte-g90b33 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  /* #37: 折返しは <wbr>（. _ - の直後）の単語単位。break-word は列幅を
     超える単一トークンの最終手段で、break-all の1文字折返しは廃止。 */
  .fc-physical.svelte-g90b33 {
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-strong);
    min-width: 0; overflow-wrap: break-word;
  }
  .fc-pk.svelte-g90b33 {
    display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: var(--weight-semibold);
    color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 0 4px;
  }
  .fc-pk.svelte-g90b33 svg { color: currentColor; }
  .fc-req.svelte-g90b33 {
    font-size: 10px; font-weight: var(--weight-semibold); color: var(--red);
    background: var(--red-soft); border-radius: var(--radius-sm); padding: 0 5px;
  }
  .fc-logical.svelte-g90b33 { font-size: var(--text-xs); color: var(--clay); }
  .fc-attrs.svelte-g90b33 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
  .fc-attr.svelte-g90b33 {
    font-size: 11px; color: var(--clay); background: var(--inset);
    border-radius: var(--radius-sm); padding: 0 5px;
  }
  .fc-meta.svelte-g90b33 { font-size: 11px; color: var(--ash); }
  .fc-fmt.svelte-g90b33 {
    font-size: 11px; color: var(--purple); background: var(--purple-soft);
    border-radius: var(--radius-sm); padding: 0 5px;
    /* #37: 型チップ（JSON string 等）も単語単位で折返す（break-all 廃止）。 */
    min-width: 0; overflow-wrap: break-word;
  }
  .fc-blank.svelte-g90b33 { font-size: var(--text-xs); color: var(--smoke); }

  /* ---- xform column ---- */
  .mr-xf.svelte-g90b33 { display: flex; align-items: center; gap: var(--space-1); }
  .mr-xf.svelte-g90b33 .mr-arrow { color: var(--smoke); flex-shrink: 0; }
  .xf-body.svelte-g90b33 {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 84px; max-width: 200px; text-align: center;
  }
  .xf-agg.svelte-g90b33 {
    display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--green);
  }
  .xf-agg.svelte-g90b33 svg { color: currentColor; }
  .xf-detail.svelte-g90b33 { font-size: 11px; color: var(--clay); line-height: var(--leading-normal); }
  .xf-passthrough.svelte-g90b33 { font-size: var(--text-xs); color: var(--ash); }

  .mr-note.svelte-g90b33 {
    grid-column: 1 / -1; margin: var(--space-1) 0 0;
    font-size: var(--text-xs); color: var(--ash); line-height: var(--leading-normal);
    padding-left: calc(24px + var(--space-3));
  }

  /* ---- extra (認識外キー) ---- */
  .extra.svelte-g90b33 { display: flex; flex-direction: column; gap: var(--space-3); }
  .extra-item.svelte-g90b33 {
    border: 1px solid var(--sand); border-radius: var(--radius-md); background: var(--paper);
    padding: var(--space-3) var(--space-4);
  }
  .extra-k.svelte-g90b33 { font-size: var(--text-sm); color: var(--accent); }
  .extra-v.svelte-g90b33 {
    margin: var(--space-2) 0 0; font-family: var(--font-mono); font-size: var(--text-xs);
    color: var(--clay); line-height: var(--leading-normal); white-space: pre-wrap; word-break: break-word;
  }

  /* ---- remarks ---- */
  .if-remarks.svelte-g90b33 {
    margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--clay);
    max-width: 72ch; white-space: pre-line; background: var(--stone); border: 1px solid var(--sand);
    border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  }
  .if-noremarks.svelte-g90b33 {
    display: flex; align-items: center; gap: var(--space-2); color: var(--smoke); font-size: var(--text-sm);
    padding: var(--space-4) var(--space-5); background: var(--stone);
    border: 1px dashed var(--sand); border-radius: var(--radius-md);
  }

  @keyframes svelte-g90b33-if-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

  .erd.svelte-1agvayk {
    --edge: var(--ash);
    --edge-hot: var(--accent);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 560px;
    background: var(--stone);
    color: var(--ink);
  }
  .erd.fs.svelte-1agvayk { height: 100vh; }

  .erd-empty.svelte-1agvayk, .pnl-empty.svelte-1agvayk {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-3); color: var(--smoke); text-align: center; padding: 40px;
  }
  .erd-empty.svelte-1agvayk p:where(.svelte-1agvayk) { margin: 0; font-size: var(--text-base); }

  /* ---- toolbar ---- */
  .erd-bar.svelte-1agvayk {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--sand);
    background: var(--paper);
    flex-wrap: wrap;
  }
  /* #17-B 実装箇所チップ行（ヘッダ＝ツールバー直下）。ImplChipRow 自体は
     restyle せず、置き場所の余白のみここで管理する。 */
  .erd-implrow.svelte-1agvayk {
    padding: var(--space-2) var(--space-5) 0;
    border-bottom: 1px solid var(--sand);
    background: var(--paper);
  }
  .erd-implrow.svelte-1agvayk .impl-row { margin-top: 0; padding-bottom: var(--space-3); }
  .bar-left.svelte-1agvayk, .bar-right.svelte-1agvayk { display: flex; align-items: center; gap: var(--space-2); }
  .bar-title.svelte-1agvayk {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--ink-strong);
    margin-right: var(--space-1);
  }
  .bar-title.svelte-1agvayk svg { color: var(--purple); }

  .search.svelte-1agvayk {
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 28px; padding: 0 var(--space-2) 0 var(--space-3);
    border: 1px solid var(--sand); border-radius: var(--radius-md);
    background: var(--stone); color: var(--ash);
  }
  .search.svelte-1agvayk:focus-within { border-color: var(--accent); }
  .search.svelte-1agvayk input:where(.svelte-1agvayk) {
    border: none; background: transparent; outline: none;
    font-size: var(--text-sm); color: var(--ink); width: 128px; font-family: var(--font-ui);
  }
  .search.svelte-1agvayk .clr:where(.svelte-1agvayk) { display: inline-flex; border: none; background: transparent; color: var(--ash); cursor: pointer; padding: 2px; }
  .search.svelte-1agvayk .clr:where(.svelte-1agvayk):hover { color: var(--ink); }

  .tbtn.svelte-1agvayk {
    display: inline-flex; align-items: center; gap: var(--space-1);
    height: 28px; padding: 0 var(--space-3);
    border: 1px solid var(--sand); border-radius: var(--radius-md);
    background: var(--paper); color: var(--clay);
    font-size: var(--text-sm); cursor: pointer;
    transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
  }
  .tbtn.ic.svelte-1agvayk { padding: 0; width: 28px; justify-content: center; }
  .tbtn.svelte-1agvayk:hover { color: var(--ink); border-color: var(--smoke); background: var(--stone); }
  .tbtn.on.svelte-1agvayk { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
  .tbtn.svelte-1agvayk:disabled { opacity: 0.5; cursor: default; }
  .tbtn.svelte-1agvayk:focus-visible, .search.svelte-1agvayk input:where(.svelte-1agvayk):focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
  .zoomval.svelte-1agvayk {
    font-size: var(--text-xs); color: var(--ash); font-family: var(--font-mono);
    min-width: 40px; text-align: center;
  }
  .sep.svelte-1agvayk { width: 1px; height: 20px; background: var(--sand); margin: 0 var(--space-1); }

  /* ---- stage ---- */
  .erd-stage.svelte-1agvayk { flex: 1; display: flex; min-height: 0; position: relative; }
  .erd-canvas.svelte-1agvayk {
    flex: 1; position: relative; overflow: hidden; min-width: 0;
    background:
      radial-gradient(circle at 1px 1px, var(--sand) 1px, transparent 0);
    background-size: 22px 22px;
    cursor: grab; touch-action: none;
  }
  .erd-canvas.grab.svelte-1agvayk { cursor: grabbing; }
  .erd-svg.svelte-1agvayk { display: block; user-select: none; }
  .bg-catch.svelte-1agvayk { fill: transparent; }

  /* package bands */
  .grp-band.svelte-1agvayk { fill: var(--inset); opacity: 0.42; stroke: var(--sand); stroke-width: 1; }
  .grp-labelbg.svelte-1agvayk { fill: var(--sand); opacity: 0.7; }
  .grp-labelbg2.svelte-1agvayk { fill: var(--sand); opacity: 0.7; }
  .grp-label.svelte-1agvayk {
    font-family: var(--font-ui); font-size: 13px; font-weight: var(--weight-semibold);
    fill: var(--clay); letter-spacing: 0.02em;
  }

  /* edges */
  .edge-line.svelte-1agvayk { stroke: var(--edge); stroke-width: 1.6; }
  .edge.hot.svelte-1agvayk .edge-line:where(.svelte-1agvayk) { stroke: var(--edge-hot); stroke-width: 2.2; }
  .edge.dim.svelte-1agvayk { opacity: 0.16; }
  /* crow's-foot cardinality glyphs — same colour as the edge */
  .foot-line.svelte-1agvayk { stroke: var(--edge); stroke-width: 1.6; stroke-linecap: round; }
  .foot-ring.svelte-1agvayk { fill: var(--paper); stroke: var(--edge); stroke-width: 1.4; }
  .edge.hot.svelte-1agvayk .foot-line:where(.svelte-1agvayk) { stroke: var(--edge-hot); stroke-width: 2; }
  .edge.hot.svelte-1agvayk .foot-ring:where(.svelte-1agvayk) { stroke: var(--edge-hot); }
  .card-lbl-bg.svelte-1agvayk { fill: var(--paper); stroke: var(--sand); stroke-width: 1; }
  .edge.hot.svelte-1agvayk .card-lbl-bg:where(.svelte-1agvayk) { stroke: var(--accent); }
  .card-lbl-tx.svelte-1agvayk { font-family: var(--font-mono); font-size: 10px; fill: var(--clay); font-weight: var(--weight-medium); }
  .edge.hot.svelte-1agvayk .card-lbl-tx:where(.svelte-1agvayk) { fill: var(--accent); }

  /* cards */
  .card.svelte-1agvayk { cursor: pointer; transition: opacity 180ms ease-out; }
  .card.dim.svelte-1agvayk { opacity: 0.36; }
  .card-box.svelte-1agvayk { fill: var(--paper); }
  .card-outline.svelte-1agvayk {
    fill: none; stroke: var(--sand); stroke-width: 1.2;
    transition: stroke 150ms ease-out, stroke-width 150ms ease-out;
  }
  .card.svelte-1agvayk:hover .card-outline:where(.svelte-1agvayk) { stroke: var(--smoke); }
  .card.sel.svelte-1agvayk .card-outline:where(.svelte-1agvayk) { stroke: var(--accent); stroke-width: 2.2; }
  .card.svelte-1agvayk:focus-visible { outline: none; }
  .card.svelte-1agvayk:focus-visible .card-outline:where(.svelte-1agvayk) { stroke: var(--accent); stroke-width: 2.2; }

  .card-hd.svelte-1agvayk { fill: var(--inset); }
  .card-hd-fix.svelte-1agvayk { fill: var(--inset); }
  .card.sel.svelte-1agvayk .card-hd:where(.svelte-1agvayk), .card.sel.svelte-1agvayk .card-hd-fix:where(.svelte-1agvayk) { fill: var(--accent-soft); }
  .hd-phys.svelte-1agvayk { font-family: var(--font-mono); font-size: 12.5px; font-weight: var(--weight-semibold); fill: var(--ink-strong); }
  .hd-log.svelte-1agvayk { font-family: var(--font-ui); font-size: 10.5px; fill: var(--clay); }
  .hd-id.svelte-1agvayk { font-family: var(--font-mono); font-size: 9.5px; fill: var(--ash); }

  .row-bg.svelte-1agvayk { fill: transparent; }
  .row.zeb.svelte-1agvayk .row-bg:where(.svelte-1agvayk) { fill: var(--stone); opacity: 0.5; }
  .row.svelte-1agvayk:hover .row-bg:where(.svelte-1agvayk) { fill: var(--accent-soft); opacity: 0.55; }
  .row.pk.svelte-1agvayk .col-name:where(.svelte-1agvayk) { font-weight: var(--weight-semibold); fill: var(--ink-strong); }
  .row.hl.svelte-1agvayk .row-bg:where(.svelte-1agvayk) { fill: var(--accent-soft); opacity: 1; }
  .row.hl.svelte-1agvayk .col-name:where(.svelte-1agvayk) { fill: var(--accent); font-weight: var(--weight-semibold); }
  .row.mt.svelte-1agvayk .row-bg:where(.svelte-1agvayk) { fill: var(--amber-soft); opacity: 1; }

  .col-name.svelte-1agvayk { font-family: var(--font-mono); font-size: 11px; fill: var(--ink); }
  .col-log.svelte-1agvayk { font-family: var(--font-ui); font-size: 10px; fill: var(--ash); }
  .col-type.svelte-1agvayk { font-family: var(--font-mono); font-size: 10px; fill: var(--clay); }
  /* nullability diamond: 白抜き=NULL可 / 塗り=NOT NULL (§2.2, --ash系) */
  .ic-null.svelte-1agvayk { fill: var(--paper); stroke: var(--ash); stroke-width: 1.1; }
  .ic-null.notnull.svelte-1agvayk { fill: var(--ash); stroke: var(--ash); }
  .ic-key.svelte-1agvayk { fill: var(--amber); stroke: none; }
  .ic-fk.svelte-1agvayk { fill: none; stroke: var(--accent); stroke-width: 1.3; }

  .audit-hd.svelte-1agvayk { cursor: pointer; }
  .audit-bg.svelte-1agvayk { fill: var(--stone); }
  .audit-lbl.svelte-1agvayk { font-family: var(--font-ui); font-size: 9.5px; fill: var(--ash); font-weight: var(--weight-medium); }
  .row.audit.svelte-1agvayk .col-name:where(.svelte-1agvayk) { fill: var(--clay); }
  .row.audit.svelte-1agvayk .col-log:where(.svelte-1agvayk) { fill: var(--smoke); }

  /* minimap */
  .minimap.svelte-1agvayk {
    position: absolute; right: 14px; bottom: 14px;
    background: var(--paper); border: 1px solid var(--sand);
    border-radius: var(--radius-md); box-shadow: var(--shadow-subtle);
    padding: 4px; overflow: hidden;
  }
  .minimap.drag.svelte-1agvayk { border-color: var(--accent); }
  .mm-cap.svelte-1agvayk {
    display: flex; align-items: center; gap: 4px;
    font-size: 9.5px; color: var(--ash); padding: 2px 4px 4px;
    font-weight: var(--weight-medium);
  }
  .minimap.svelte-1agvayk svg:where(.svelte-1agvayk) { display: block; cursor: pointer; touch-action: none; border-radius: var(--radius-sm); }
  .mm-bg.svelte-1agvayk { fill: var(--stone); }
  .mm-grp.svelte-1agvayk { fill: var(--inset); opacity: 0.6; }
  .mm-card.svelte-1agvayk { fill: var(--smoke); opacity: 0.85; }
  .mm-card.sel.svelte-1agvayk { fill: var(--accent); }
  .mm-view.svelte-1agvayk { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.4; opacity: 0.55; }

  /* side panel */
  .erd-panel.svelte-1agvayk {
    width: 300px; flex-shrink: 0; border-left: 1px solid var(--sand);
    background: var(--paper); overflow-y: auto; padding: 0 0 var(--space-6);
  }
  .pnl-head.svelte-1agvayk {
    position: relative; padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--sand);
  }
  .pnl-title.svelte-1agvayk { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .pnl-phys.svelte-1agvayk { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink-strong); }
  .pnl-log.svelte-1agvayk { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ash); }
  .pnl-x.svelte-1agvayk {
    position: absolute; top: var(--space-3); right: var(--space-3);
    display: inline-flex; border: none; background: transparent; color: var(--ash);
    cursor: pointer; padding: 4px; border-radius: var(--radius-sm);
  }
  .pnl-x.svelte-1agvayk:hover { color: var(--ink); background: var(--stone); }

  .pnl-sec.svelte-1agvayk { padding: var(--space-4) var(--space-5) 0; }
  .pnl-sec-h.svelte-1agvayk {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--clay);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-2);
  }
  .pnl-sec-h.svelte-1agvayk svg { color: var(--ash); }

  .pnl-tbl.svelte-1agvayk { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
  .pnl-tbl.svelte-1agvayk th:where(.svelte-1agvayk) {
    text-align: left; color: var(--ash); font-weight: var(--weight-medium);
    padding: 3px 6px; border-bottom: 1px solid var(--sand); position: sticky; top: 0;
    background: var(--paper);
  }
  .pnl-tbl.svelte-1agvayk td:where(.svelte-1agvayk) { padding: 4px 6px; border-bottom: 1px solid var(--stone); vertical-align: top; }
  .pnl-tbl.svelte-1agvayk tr:where(.svelte-1agvayk):hover td:where(.svelte-1agvayk) { background: var(--stone); }
  .pnl-tbl.svelte-1agvayk tr.audit:where(.svelte-1agvayk) td:where(.svelte-1agvayk) { opacity: 0.7; }
  .ct-name.svelte-1agvayk { font-size: 11px; color: var(--ink); display: block; }
  .ct-log.svelte-1agvayk { font-size: 10px; color: var(--ash); }
  .ct-type.svelte-1agvayk { color: var(--clay); font-size: 10px; white-space: nowrap; }
  .ct-cst.svelte-1agvayk { white-space: nowrap; }
  .mk.svelte-1agvayk {
    display: inline-block; font-size: 8.5px; font-weight: var(--weight-semibold);
    padding: 1px 4px; border-radius: 3px; margin-right: 3px; letter-spacing: 0.03em;
    font-family: var(--font-mono);
  }
  .mk.pk.svelte-1agvayk { color: var(--amber); background: var(--amber-soft); }
  .mk.fk.svelte-1agvayk { color: var(--accent); background: var(--accent-soft); }
  .mk.nn.svelte-1agvayk { color: var(--clay); background: var(--inset); }
  .mk.uq.svelte-1agvayk { color: var(--purple); background: var(--purple-soft); }

  .pnl-list.svelte-1agvayk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .pnl-list.svelte-1agvayk li:where(.svelte-1agvayk) { font-size: var(--text-xs); color: var(--ink); }
  .pnl-list.svelte-1agvayk li.rel:where(.svelte-1agvayk) { display: flex; flex-direction: column; gap: 1px; }
  .rel-jump.svelte-1agvayk {
    text-align: left; border: none; background: transparent; color: var(--ink);
    cursor: pointer; padding: 2px 0; font-size: 10.5px;
  }
  .rel-jump.svelte-1agvayk:hover { color: var(--accent); }
  .rel-card.svelte-1agvayk { color: var(--accent); font-weight: var(--weight-semibold); padding: 0 2px; }
  .pnl-none.svelte-1agvayk, .pnl-empty.svelte-1agvayk p:where(.svelte-1agvayk) { color: var(--ash); font-size: var(--text-xs); }
  .pnl-empty.svelte-1agvayk { padding: 40px 24px; }

  .rd.svelte-1008xin { height: 100%; overflow-y: auto; color: var(--ink); position: relative; scroll-behavior: smooth; }
  .rd-empty.svelte-1008xin {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    color: var(--smoke); text-align: center; padding: 60px 20px;
  }
  .rd-empty.svelte-1008xin p:where(.svelte-1008xin) { margin: 0; font-size: var(--text-base); }

  .rd-head.svelte-1008xin { max-width: 940px; margin: 0 auto; padding: var(--space-5) var(--space-7) var(--space-3); }
  .rd-titlerow.svelte-1008xin { display: flex; align-items: center; gap: var(--space-3); }
  .rd-titlerow.svelte-1008xin svg { color: var(--clay); flex-shrink: 0; }
  .rd-name.svelte-1008xin { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--ink-strong); margin: 0; line-height: var(--leading-tight); }
  .rd-sub.svelte-1008xin { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-2); }
  .rd-id.svelte-1008xin { font-size: var(--text-sm); color: var(--accent); }
  .rd-ver.svelte-1008xin { font-size: var(--text-xs); color: var(--ash); }
  .rd-count.svelte-1008xin {
    font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ash);
    font-family: var(--font-mono); background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px;
  }

  .rd-filter.svelte-1008xin {
    max-width: 940px; margin: 0 auto; padding: 0 var(--space-7) var(--space-3);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  }
  .rd-filter-l.svelte-1008xin { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--ash); }
  .rd-filter-l.svelte-1008xin svg { color: var(--ash); }
  .fchip.svelte-1008xin {
    font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--clay);
    padding: 3px var(--space-3); border-radius: 9999px; border: 1px solid var(--sand); background: var(--paper);
    transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
  }
  .fchip.svelte-1008xin:hover { background: var(--stone); color: var(--ink); }
  .fchip.on.svelte-1008xin { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
  .fchip.svelte-1008xin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .rd-cards.svelte-1008xin { max-width: 940px; margin: 0 auto; padding: var(--space-4) var(--space-7) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
  .rule-card.svelte-1008xin {
    border: 1px solid var(--sand); border-radius: var(--radius-md); background: var(--paper);
    padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
    transition: box-shadow 180ms ease-out, border-color 180ms ease-out;
  }
  .rule-card.svelte-1008xin:hover { box-shadow: var(--shadow-subtle); border-color: var(--smoke); }
  .rc-head.svelte-1008xin { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
  .rc-id.svelte-1008xin { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--accent); }

  .rc-cond.svelte-1008xin { display: flex; flex-direction: column; gap: var(--space-1); }
  .rc-cond-l.svelte-1008xin { font-size: var(--text-xs); color: var(--ash); }
  .rc-code.svelte-1008xin {
    font-size: var(--text-sm); color: var(--ink-strong); line-height: var(--leading-normal);
    background: var(--inset); border: 1px solid var(--sand); border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3); word-break: break-word; white-space: pre-wrap;
  }
  .rc-rationale.svelte-1008xin { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--clay); }

  .rc-meta.svelte-1008xin { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--sand); padding-top: var(--space-3); }
  .rc-meta.svelte-1008xin > div:where(.svelte-1008xin) { display: grid; grid-template-columns: 108px 1fr; gap: var(--space-3); align-items: baseline; }
  .rc-meta.svelte-1008xin dt:where(.svelte-1008xin) { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--ash); margin: 0; }
  .rc-meta.svelte-1008xin dt:where(.svelte-1008xin) svg { color: var(--ash); }
  .rc-meta.svelte-1008xin dd:where(.svelte-1008xin) { margin: 0; font-size: var(--text-sm); color: var(--clay); }
  .rc-applies.svelte-1008xin { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .applied.svelte-1008xin {
    font-size: var(--text-xs); color: var(--purple);
    background: var(--purple-soft); border-radius: var(--radius-sm); padding: 1px 6px;
  }

  /* #8 追記フィールド ---------------------------------------------- */
  .rc-boundary.svelte-1008xin { display: flex; flex-direction: column; gap: var(--space-1); }
  .rc-bl.svelte-1008xin { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--ash); }
  .rc-bl.svelte-1008xin svg { color: var(--ash); }
  .rc-bcode.svelte-1008xin {
    font-size: var(--text-sm); color: var(--clay); line-height: var(--leading-normal);
    background: var(--stone); border: 1px dashed var(--sand); border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3); word-break: break-word; white-space: pre-wrap;
  }

  .rc-source.svelte-1008xin {
    margin: 0; display: inline-flex; align-items: baseline; gap: var(--space-1);
    font-size: var(--text-xs); color: var(--ash); line-height: var(--leading-normal);
  }
  .rc-source.svelte-1008xin svg { color: var(--ash); position: relative; top: 2px; flex-shrink: 0; }

  .rc-block.svelte-1008xin { display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--sand); padding-top: var(--space-3); }
  .rc-block-l.svelte-1008xin { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--ash); }
  .rc-block-l.svelte-1008xin svg { color: var(--ash); }
  .rc-exempt.svelte-1008xin { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
  .rc-exempt.svelte-1008xin li:where(.svelte-1008xin) { font-size: var(--text-sm); color: var(--clay); line-height: var(--leading-normal); }

  .rc-ex-table.svelte-1008xin { display: flex; flex-direction: column; gap: var(--space-1); }
  .rc-ex-row.svelte-1008xin {
    display: grid; grid-template-columns: 84px minmax(120px, 1fr) minmax(120px, 1.4fr);
    gap: var(--space-3); align-items: baseline; padding: var(--space-1) 0;
  }
  .rc-ex-verdict.svelte-1008xin { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--green); }
  .rc-ex-verdict.svelte-1008xin svg { color: var(--green); flex-shrink: 0; }
  .rc-ex-row.ng.svelte-1008xin .rc-ex-verdict:where(.svelte-1008xin) { color: var(--red); }
  .rc-ex-row.ng.svelte-1008xin .rc-ex-verdict:where(.svelte-1008xin) svg { color: var(--red); }
  .rc-ex-case.svelte-1008xin { font-size: var(--text-sm); color: var(--clay); }
  .rc-ex-input.svelte-1008xin {
    font-size: var(--text-xs); color: var(--ink-strong);
    background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px;
    word-break: break-word; white-space: pre-wrap;
  }

  .rc-meta-sub.svelte-1008xin { border-top: 1px solid var(--sand); padding-top: var(--space-3); }
  .rc-reflist.svelte-1008xin { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .ref-t.svelte-1008xin {
    font-size: var(--text-xs); color: var(--clay);
    background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px;
  }

  .rc-rev.svelte-1008xin { border-top: 1px solid var(--sand); padding-top: var(--space-3); }
  .rc-rev.svelte-1008xin > summary:where(.svelte-1008xin) {
    display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer;
    font-size: var(--text-xs); color: var(--ash); list-style: none; user-select: none;
  }
  .rc-rev.svelte-1008xin > summary:where(.svelte-1008xin)::-webkit-details-marker { display: none; }
  .rc-rev.svelte-1008xin > summary:where(.svelte-1008xin) svg { color: var(--ash); }
  .rc-rev.svelte-1008xin > summary:where(.svelte-1008xin):hover { color: var(--ink); }
  .rc-rev-n.svelte-1008xin {
    font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ash);
    background: var(--inset); border-radius: var(--radius-sm); padding: 0 5px;
  }
  .rc-rev-table.svelte-1008xin { width: 100%; border-collapse: collapse; margin-top: var(--space-2); font-size: var(--text-xs); }
  .rc-rev-table.svelte-1008xin th:where(.svelte-1008xin) {
    text-align: left; color: var(--ash); font-weight: var(--weight-medium);
    padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--sand); white-space: nowrap;
  }
  .rc-rev-table.svelte-1008xin td:where(.svelte-1008xin) { color: var(--clay); padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--stone); vertical-align: top; }
  .rc-rev-table.svelte-1008xin th:where(.svelte-1008xin):nth-child(1), .rc-rev-table.svelte-1008xin td:where(.svelte-1008xin):nth-child(1) { width: 48px; }
  .rc-rev-table.svelte-1008xin th:where(.svelte-1008xin):nth-child(2), .rc-rev-table.svelte-1008xin td:where(.svelte-1008xin):nth-child(2) { width: 92px; }

  .rd-remarks-sec.svelte-1008xin { max-width: 940px; margin: 0 auto; padding: 0 var(--space-7) var(--space-8); }
  .rd-h.svelte-1008xin { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-strong); margin: 0 0 var(--space-3); line-height: var(--leading-tight); }
  .rd-remarks.svelte-1008xin {
    margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--clay);
    max-width: 72ch; white-space: pre-line;
    background: var(--stone); border: 1px solid var(--sand); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  }


  .mdoc.svelte-dd56ne { height: 100%; overflow-y: auto; color: var(--ink); position: relative; scroll-behavior: smooth; }
  .md-empty.svelte-dd56ne {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    color: var(--smoke); text-align: center; padding: 60px 20px;
  }
  .md-empty.svelte-dd56ne p:where(.svelte-dd56ne) { margin: 0; font-size: var(--text-base); }

  .md-head.svelte-dd56ne { max-width: 1180px; margin: 0 auto; padding: var(--space-5) var(--space-7) var(--space-3); }
  .md-titlerow.svelte-dd56ne { display: flex; align-items: center; gap: var(--space-3); }
  .md-titlerow.svelte-dd56ne svg { color: var(--clay); flex-shrink: 0; }
  .md-name.svelte-dd56ne { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--ink-strong); margin: 0; line-height: var(--leading-tight); }
  .md-total.svelte-dd56ne {
    font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ash);
    font-family: var(--font-mono); background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px;
  }
  .md-filter.svelte-dd56ne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
  .md-filter-l.svelte-dd56ne { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--ash); }
  .md-filter-l.svelte-dd56ne svg { color: var(--ash); }
  .fchip.svelte-dd56ne {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--clay);
    padding: 3px var(--space-3); border-radius: 9999px; border: 1px solid var(--sand); background: var(--paper);
    transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
  }
  .fchip.svelte-dd56ne svg { color: currentColor; }
  .fchip.svelte-dd56ne:hover { background: var(--stone); color: var(--ink); }
  .fchip.on.svelte-dd56ne { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
  .fchip.red.on.svelte-dd56ne { background: var(--red-soft); color: var(--red); border-color: var(--red-soft); }
  .fchip.amber.on.svelte-dd56ne { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-soft); }
  .fchip.accent.on.svelte-dd56ne { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
  .fchip.svelte-dd56ne:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .fcnt.svelte-dd56ne { color: var(--ash); font-family: var(--font-mono); }

  .md-tblwrap.svelte-dd56ne {
    max-width: 1180px; margin: 0 auto var(--space-6); padding: 0 var(--space-7);
  }
  .md-tbl.svelte-dd56ne {
    border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--text-sm);
    border: 1px solid var(--sand); border-radius: var(--radius-md); overflow: hidden; background: var(--paper);
  }
  .md-tbl.svelte-dd56ne th:where(.svelte-dd56ne) {
    position: sticky; top: 0; z-index: 2;
    background: var(--inset); color: var(--ink); text-align: left;
    padding: var(--space-2) var(--space-4); font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--sand); white-space: nowrap; height: 40px;
  }
  .md-tbl.svelte-dd56ne td:where(.svelte-dd56ne) {
    padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--sand);
    color: var(--clay); vertical-align: middle; line-height: var(--leading-normal);
  }
  .md-tbl.svelte-dd56ne tbody:where(.svelte-dd56ne) tr:where(.svelte-dd56ne):last-child td:where(.svelte-dd56ne) { border-bottom: none; }
  .md-tbl.svelte-dd56ne tbody:where(.svelte-dd56ne) tr:where(.svelte-dd56ne):nth-child(even) td:where(.svelte-dd56ne) { background: var(--stone); }
  .md-tbl.svelte-dd56ne tbody:where(.svelte-dd56ne) tr:where(.svelte-dd56ne):hover td:where(.svelte-dd56ne) { background: var(--accent-soft); }
  .w-id.svelte-dd56ne { width: 120px; }
  .w-type.svelte-dd56ne { width: 96px; }
  .w-shown.svelte-dd56ne { width: 200px; }
  .w-used.svelte-dd56ne { width: 240px; }
  .md-tbl.svelte-dd56ne td.msgid:where(.svelte-dd56ne) { color: var(--accent); font-size: var(--text-xs); white-space: nowrap; }
  .md-tbl.svelte-dd56ne td.msgtext:where(.svelte-dd56ne) { color: var(--ink); min-width: 280px; }
  .shown.svelte-dd56ne { color: var(--clay); }
  .used-chips.svelte-dd56ne { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .dash.svelte-dd56ne { color: var(--smoke); }

  .md-remarks-sec.svelte-dd56ne { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-7) var(--space-8); }
  .md-h.svelte-dd56ne { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-strong); margin: 0 0 var(--space-3); line-height: var(--leading-tight); }
  .md-remarks.svelte-dd56ne {
    margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--clay);
    max-width: 72ch; white-space: pre-line;
    background: var(--stone); border: 1px solid var(--sand); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  }

  .cd.svelte-rlhg80 { height: 100%; overflow-y: auto; color: var(--ink); position: relative; scroll-behavior: smooth; }
  .cd-empty.svelte-rlhg80 {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    color: var(--smoke); text-align: center; padding: 60px 20px;
  }
  .cd-empty.svelte-rlhg80 p:where(.svelte-rlhg80) { margin: 0; font-size: var(--text-base); }

  .cd-head.svelte-rlhg80 { max-width: 1000px; margin: 0 auto; padding: var(--space-5) var(--space-7) var(--space-3); }
  .cd-titlerow.svelte-rlhg80 { display: flex; align-items: center; gap: var(--space-3); }
  .cd-titlerow.svelte-rlhg80 svg { color: var(--clay); flex-shrink: 0; }
  .cd-name.svelte-rlhg80 { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--ink-strong); margin: 0; line-height: var(--leading-tight); }
  .cd-total.svelte-rlhg80 {
    font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ash);
    font-family: var(--font-mono); background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px;
  }
  .cd-lead.svelte-rlhg80 { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--clay); }

  .cd-cards.svelte-rlhg80 { max-width: 1000px; margin: 0 auto; padding: var(--space-4) var(--space-7) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
  .code-card.svelte-rlhg80 {
    border: 1px solid var(--sand); border-radius: var(--radius-md); background: var(--paper);
    padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
    transition: box-shadow 180ms ease-out, border-color 180ms ease-out;
  }
  .code-card.svelte-rlhg80:hover { box-shadow: var(--shadow-subtle); border-color: var(--smoke); }
  .cc-head.svelte-rlhg80 { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); }
  .cc-id.svelte-rlhg80 {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--accent);
  }
  .cc-id.svelte-rlhg80 svg { color: var(--accent); }
  .cc-name.svelte-rlhg80 { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--ink-strong); }
  .cc-vcount.svelte-rlhg80 {
    font-size: var(--text-xs); color: var(--ash); font-family: var(--font-mono);
    background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px;
  }

  .cc-used.svelte-rlhg80 { display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; }
  .cc-used-l.svelte-rlhg80 { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--ash); padding-top: 2px; }
  .cc-used-l.svelte-rlhg80 svg { color: var(--ash); }
  .cc-used-chips.svelte-rlhg80 { display: flex; flex-wrap: wrap; gap: var(--space-1); }

  .cc-tblwrap.svelte-rlhg80 { overflow-x: auto; border: 1px solid var(--sand); border-radius: var(--radius-sm); }
  .cc-tbl.svelte-rlhg80 { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--text-sm); }
  .cc-tbl.svelte-rlhg80 th:where(.svelte-rlhg80) {
    background: var(--inset); color: var(--ink); text-align: left;
    padding: var(--space-2) var(--space-4); font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--sand); white-space: nowrap; height: 36px;
  }
  .cc-tbl.svelte-rlhg80 td:where(.svelte-rlhg80) {
    padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--sand);
    color: var(--clay); vertical-align: middle; line-height: var(--leading-normal);
  }
  .cc-tbl.svelte-rlhg80 tbody:where(.svelte-rlhg80) tr:where(.svelte-rlhg80):last-child td:where(.svelte-rlhg80) { border-bottom: none; }
  .cc-tbl.svelte-rlhg80 tbody:where(.svelte-rlhg80) tr:where(.svelte-rlhg80):nth-child(even) td:where(.svelte-rlhg80) { background: var(--stone); }
  .cc-tbl.svelte-rlhg80 tbody:where(.svelte-rlhg80) tr:where(.svelte-rlhg80):hover td:where(.svelte-rlhg80) { background: var(--accent-soft); }
  .w-code.svelte-rlhg80 { width: 130px; }
  .w-name.svelte-rlhg80 { width: 180px; }
  .cc-tbl.svelte-rlhg80 td.codeval:where(.svelte-rlhg80) { color: var(--accent); font-weight: var(--weight-medium); }
  .cc-tbl.svelte-rlhg80 td.valname:where(.svelte-rlhg80) { color: var(--ink); }
  .cc-tbl.svelte-rlhg80 td.valnote:where(.svelte-rlhg80) { color: var(--clay); }

  .cd-remarks-sec.svelte-rlhg80 { max-width: 1000px; margin: 0 auto; padding: 0 var(--space-7) var(--space-8); }
  .cd-h.svelte-rlhg80 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-strong); margin: 0 0 var(--space-3); line-height: var(--leading-tight); }
  .cd-remarks.svelte-rlhg80 {
    margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--clay);
    max-width: 72ch; white-space: pre-line;
    background: var(--stone); border: 1px solid var(--sand); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  }

  .rp.svelte-mqb8iw { height: 100%; overflow-y: auto; color: var(--ink); position: relative; scroll-behavior: smooth; }
  .rp-empty.svelte-mqb8iw {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    color: var(--smoke); text-align: center; padding: 60px 20px;
  }
  .rp-empty.svelte-mqb8iw p:where(.svelte-mqb8iw) { margin: 0; font-size: var(--text-base); }

  /* ---- header ---- */
  .rp-head.svelte-mqb8iw { max-width: 1180px; margin: 0 auto; padding: var(--space-5) var(--space-7) var(--space-4); }
  .rp-titlerow.svelte-mqb8iw { display: flex; align-items: center; gap: var(--space-3); }
  .rp-titlerow.svelte-mqb8iw svg { color: var(--clay); flex-shrink: 0; }
  .rp-name.svelte-mqb8iw {
    font-size: var(--text-xl); font-weight: var(--weight-semibold);
    color: var(--ink-strong); margin: 0; line-height: var(--leading-tight);
  }
  .rp-sub.svelte-mqb8iw { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-2); }
  .rp-id.svelte-mqb8iw { font-size: var(--text-sm); color: var(--accent); }
  .rp-ver.svelte-mqb8iw { font-size: var(--text-xs); color: var(--ash); }
  .rp-purpose.svelte-mqb8iw {
    margin: var(--space-3) 0 0; font-size: var(--text-md); line-height: var(--leading-normal);
    color: var(--clay); max-width: 72ch; white-space: pre-line;
  }

  /* ---- section nav (sticky) ---- */
  .rp-nav.svelte-mqb8iw {
    position: sticky; top: 0; z-index: 5;
    display: flex; flex-wrap: wrap; gap: var(--space-1);
    max-width: 1180px; margin: 0 auto; padding: var(--space-2) var(--space-7);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--sand);
  }
  .rp-navbtn.svelte-mqb8iw {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--clay);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-md);
    border: 1px solid transparent; transition: background 150ms ease-out, color 150ms ease-out;
  }
  .rp-navbtn.svelte-mqb8iw:hover { background: var(--stone); color: var(--ink); }
  .rp-navbtn.on.svelte-mqb8iw { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
  .rp-navbtn.svelte-mqb8iw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .rp-navbtn.svelte-mqb8iw svg { color: inherit; }

  /* ---- body / sections ---- */
  .rp-body.svelte-mqb8iw { max-width: 1180px; margin: 0 auto; padding: var(--space-6) var(--space-7) var(--space-8); }
  .rp-section.svelte-mqb8iw { margin-bottom: var(--space-8); scroll-margin-top: 56px; }
  .rp-h.svelte-mqb8iw {
    font-size: var(--text-lg); font-weight: var(--weight-semibold);
    color: var(--ink-strong); margin: 0 0 var(--space-4); line-height: var(--leading-tight);
    display: flex; align-items: baseline; gap: var(--space-2);
  }
  .rp-h3.svelte-mqb8iw {
    font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--ink);
    margin: 0 0 var(--space-3);
  }
  .count.svelte-mqb8iw {
    font-size: var(--text-xs); font-weight: var(--weight-medium);
    color: var(--ash); font-family: var(--font-mono);
    background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px;
  }

  .rp-block.svelte-mqb8iw { background: var(--stone); border: 1px solid var(--sand); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
  .caps.svelte-mqb8iw { margin: 0; padding: 0; list-style: none; counter-reset: cap; display: flex; flex-direction: column; gap: var(--space-3); }
  .caps.svelte-mqb8iw li:where(.svelte-mqb8iw) { counter-increment: cap; position: relative; padding-left: 26px; font-size: var(--text-base); line-height: var(--leading-normal); }
  .caps.svelte-mqb8iw li:where(.svelte-mqb8iw)::before {
    content: counter(cap); position: absolute; left: 0; top: 1px;
    width: 18px; height: 18px; border-radius: var(--radius-sm);
    background: var(--amber-soft); color: var(--amber);
    font-size: 10px; font-weight: var(--weight-semibold); font-family: var(--font-mono);
    display: flex; align-items: center; justify-content: center;
  }
  .cap-title.svelte-mqb8iw { font-weight: var(--weight-medium); color: var(--ink); margin-right: var(--space-2); }
  .cap-desc.svelte-mqb8iw { color: var(--clay); }

  /* ---- file format ---- */
  .ff-card.svelte-mqb8iw {
    background: var(--stone); border: 1px solid var(--sand);
    border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-4);
  }
  .ff-badge.svelte-mqb8iw {
    display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start;
    font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--red);
    background: var(--red-soft); border: 1px solid var(--red-soft);
    border-radius: var(--radius-sm); padding: 2px 8px;
  }
  .ff-badge.svelte-mqb8iw svg { color: currentColor; }
  .ff-dl.svelte-mqb8iw { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .ff-dl.svelte-mqb8iw > div:where(.svelte-mqb8iw) { display: grid; grid-template-columns: 108px 1fr; gap: var(--space-4); align-items: baseline; }
  .ff-dl.svelte-mqb8iw dt:where(.svelte-mqb8iw) { font-size: var(--text-xs); color: var(--ash); margin: 0; }
  .ff-dl.svelte-mqb8iw dd:where(.svelte-mqb8iw) { margin: 0; font-size: var(--text-sm); color: var(--clay); word-break: break-word; }
  .ff-dl.svelte-mqb8iw dd.ph:where(.svelte-mqb8iw) {
    font-family: var(--font-mono); color: var(--accent);
    background: var(--accent-soft); border-radius: var(--radius-sm);
    padding: 2px 8px; display: inline-block; justify-self: start;
  }

  /* ---- item table ---- */
  .tbl-wrap.svelte-mqb8iw { overflow-x: auto; border: 1px solid var(--sand); border-radius: var(--radius-md); background: var(--paper); }
  .rp-tbl.svelte-mqb8iw { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--text-sm); min-width: 940px; }
  .rp-tbl.svelte-mqb8iw th:where(.svelte-mqb8iw) {
    position: sticky; top: 0; z-index: 1;
    background: var(--inset); color: var(--ink); text-align: left;
    padding: var(--space-2) var(--space-4); font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--sand); white-space: nowrap; height: 38px;
  }
  .rp-tbl.svelte-mqb8iw td:where(.svelte-mqb8iw) {
    padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--sand);
    color: var(--clay); vertical-align: middle; height: 40px; line-height: var(--leading-normal);
  }
  .rp-tbl.svelte-mqb8iw tbody:where(.svelte-mqb8iw) tr:where(.svelte-mqb8iw):last-child td:where(.svelte-mqb8iw) { border-bottom: none; }
  /* label rows get a muted paper tint so each ラベル/値 pair reads as a unit (§2.5b) */
  .rp-tbl.svelte-mqb8iw tbody:where(.svelte-mqb8iw) tr.labelrow:where(.svelte-mqb8iw) td:where(.svelte-mqb8iw) { background: var(--stone); }
  .rp-tbl.svelte-mqb8iw tbody:where(.svelte-mqb8iw) tr:where(.svelte-mqb8iw):hover td:where(.svelte-mqb8iw) { background: var(--accent-soft); }
  .rp-tbl.svelte-mqb8iw .name:where(.svelte-mqb8iw) { color: var(--ink); }
  /* label-row name: secondary tone but must clear 4.5:1 on --stone in
     both themes (§2.0-4/§6-6) — --clay passes (light 5.5 / dark 8.3),
     --ash does not (light 3.1). */
  .rp-tbl.svelte-mqb8iw .name.lbl:where(.svelte-mqb8iw) { color: var(--clay); font-weight: var(--weight-medium); }
  .no.svelte-mqb8iw { color: var(--accent); }
  .io.svelte-mqb8iw, .i18n.svelte-mqb8iw, .fmt.svelte-mqb8iw { color: var(--ash); font-size: var(--text-xs); }
  .valtext.svelte-mqb8iw { color: var(--clay); font-size: var(--text-xs); word-break: break-word; }
  .align.svelte-mqb8iw { text-align: center; color: var(--ash); }
  .align.svelte-mqb8iw svg { color: var(--ash); vertical-align: middle; }
  .dash.svelte-mqb8iw { color: var(--smoke); }
  .w-no.svelte-mqb8iw { width: 52px; }
  .w-name.svelte-mqb8iw { width: 160px; }
  .w-kind.svelte-mqb8iw { width: 72px; }
  .w-io.svelte-mqb8iw { width: 48px; }
  .w-out.svelte-mqb8iw { width: 132px; }
  .w-i18n.svelte-mqb8iw { width: 56px; }
  .w-align.svelte-mqb8iw { width: 52px; text-align: center; }
  .w-fmt.svelte-mqb8iw { width: 128px; }
  .w-note.svelte-mqb8iw { width: 64px; }

  /* ---- footnotes ---- */
  .fn-list.svelte-mqb8iw { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
  .fn.svelte-mqb8iw { display: flex; align-items: center; gap: var(--space-3); }
  .fn-mark.svelte-mqb8iw {
    font-family: var(--font-mono); font-size: var(--text-sm); color: var(--clay);
    min-width: 32px;
  }
  .fn-plain.svelte-mqb8iw { font-size: var(--text-sm); color: var(--ash); }

  /* ---- remarks ---- */
  .rp-remarks.svelte-mqb8iw {
    margin: 0; font-size: var(--text-base); line-height: var(--leading-normal);
    color: var(--clay); max-width: 72ch; white-space: pre-line;
    background: var(--stone); border: 1px solid var(--sand); border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
  }
  .rp-noremarks.svelte-mqb8iw {
    display: flex; align-items: center; gap: var(--space-2);
    color: var(--smoke); font-size: var(--text-sm); padding: var(--space-4) var(--space-5);
    background: var(--stone); border: 1px dashed var(--sand); border-radius: var(--radius-md);
  }

  .bt.svelte-1pafvnu { height: 100%; overflow-y: auto; color: var(--ink); position: relative; scroll-behavior: smooth; }
  .bt-empty.svelte-1pafvnu {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    color: var(--smoke); text-align: center; padding: 60px 20px;
  }
  .bt-empty.svelte-1pafvnu p:where(.svelte-1pafvnu) { margin: 0; font-size: var(--text-base); }

  /* ---- header ---- */
  .bt-head.svelte-1pafvnu { max-width: 1120px; margin: 0 auto; padding: var(--space-5) var(--space-7) var(--space-4); }
  .bt-titlerow.svelte-1pafvnu { display: flex; align-items: center; gap: var(--space-3); }
  .bt-titlerow.svelte-1pafvnu svg { color: var(--clay); flex-shrink: 0; }
  .bt-name.svelte-1pafvnu { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--ink-strong); margin: 0; line-height: var(--leading-tight); }
  .bt-sub.svelte-1pafvnu { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-2); }
  .bt-id.svelte-1pafvnu { font-size: var(--text-sm); color: var(--accent); }
  .bt-ver.svelte-1pafvnu { font-size: var(--text-xs); color: var(--ash); }

  /* ---- body / sections ---- */
  .bt-body.svelte-1pafvnu { max-width: 1120px; margin: 0 auto; padding: var(--space-5) var(--space-7) var(--space-8); }
  .bt-section.svelte-1pafvnu { margin-bottom: var(--space-8); }
  .bt-h.svelte-1pafvnu {
    font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-strong);
    margin: 0 0 var(--space-4); line-height: var(--leading-tight);
    display: flex; align-items: center; gap: var(--space-2);
  }
  .bt-h.svelte-1pafvnu svg { color: var(--clay); }
  .count.svelte-1pafvnu {
    font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ash);
    font-family: var(--font-mono); background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px;
  }

  /* ---- overview card ---- */
  .ov-card.svelte-1pafvnu {
    background: var(--stone); border: 1px solid var(--sand); border-radius: var(--radius-md);
    padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4);
  }
  .ov-item.svelte-1pafvnu dt:where(.svelte-1pafvnu) { font-size: var(--text-xs); color: var(--ash); margin: 0 0 var(--space-1); }
  .ov-item.svelte-1pafvnu dd:where(.svelte-1pafvnu) { margin: 0; font-size: var(--text-sm); color: var(--clay); line-height: var(--leading-normal); }
  .ov-item.svelte-1pafvnu dd.purpose:where(.svelte-1pafvnu) { font-size: var(--text-base); color: var(--ink); max-width: 72ch; }
  .ov-grid.svelte-1pafvnu { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .ov-grid.svelte-1pafvnu .span2:where(.svelte-1pafvnu) { grid-column: 1 / -1; }
  @media (max-width: 720px) { .ov-grid.svelte-1pafvnu { grid-template-columns: 1fr; } }

  /* ---- block flow ---- */
  .flow.svelte-1pafvnu { display: flex; flex-direction: column; gap: var(--space-5); }
  .blk.svelte-1pafvnu { position: relative; display: flex; gap: var(--space-4); }
  .blk-num.svelte-1pafvnu {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 9999px;
    background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-sm); font-weight: var(--weight-semibold); font-family: var(--font-mono);
  }
  .blk.noop.svelte-1pafvnu .blk-num:where(.svelte-1pafvnu) { background: var(--inset); color: var(--ash); }
  .blk-main.svelte-1pafvnu {
    flex: 1; min-width: 0; border: 1px solid var(--sand); border-radius: var(--radius-md);
    background: var(--paper); padding: var(--space-4) var(--space-5);
    transition: box-shadow 180ms ease-out, border-color 180ms ease-out;
  }
  .blk-main.svelte-1pafvnu:hover { box-shadow: var(--shadow-subtle); border-color: var(--smoke); }
  .blk.noop.svelte-1pafvnu .blk-main:where(.svelte-1pafvnu) { background: var(--stone); border-style: dashed; }
  .blk-head.svelte-1pafvnu { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
  .blk-id.svelte-1pafvnu { font-size: var(--text-xs); color: var(--accent); }
  .blk-name.svelte-1pafvnu { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--ink-strong); }
  .blk-detail.svelte-1pafvnu { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--clay); }
  .blk-io.svelte-1pafvnu { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-3); }
  .io-col.svelte-1pafvnu { display: flex; flex-direction: column; gap: var(--space-2); }
  .io-label.svelte-1pafvnu { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--ash); }
  .io-label.svelte-1pafvnu svg { color: var(--ash); }
  .io-chips.svelte-1pafvnu { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .blk-refs.svelte-1pafvnu { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
  .blk-arrow.svelte-1pafvnu {
    position: absolute; left: 14px; bottom: calc(-1 * var(--space-5)); height: var(--space-5); width: 2px;
    background: var(--sand);
  }

  .ref-btn.svelte-1pafvnu { display: inline-flex; border-radius: var(--radius-sm); transition: opacity 150ms ease-out; }
  .ref-btn.svelte-1pafvnu:hover { opacity: 0.82; }
  .ref-btn.svelte-1pafvnu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ---- SQL spec cards ---- */
  .spec-list.svelte-1pafvnu { display: flex; flex-direction: column; gap: var(--space-4); }
  .spec-card.svelte-1pafvnu {
    border: 1px solid var(--sand); border-radius: var(--radius-md); background: var(--paper);
    padding: var(--space-4); scroll-margin-top: 20px;
    transition: box-shadow 200ms ease-out, border-color 200ms ease-out;
  }
  .spec-card.flash.svelte-1pafvnu { border-color: var(--accent); box-shadow: var(--shadow-pop); }
  .spec-head.svelte-1pafvnu { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
  .spec-tables.svelte-1pafvnu { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
  .tbl-chip.svelte-1pafvnu {
    font-size: var(--text-xs); color: var(--clay); background: var(--inset);
    border-radius: var(--radius-sm); padding: 1px 6px;
  }
  .sql.svelte-1pafvnu {
    margin: 0; overflow-x: auto; background: var(--stone); border: 1px solid var(--sand);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  }
  .sql.svelte-1pafvnu code:where(.svelte-1pafvnu) {
    font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink);
    line-height: var(--leading-normal); white-space: pre-wrap; word-break: break-word;
  }
  .spec-out.svelte-1pafvnu { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
  .spec-out-l.svelte-1pafvnu { font-size: var(--text-xs); color: var(--ash); }
  .out-chip.svelte-1pafvnu {
    font-size: var(--text-xs); color: var(--clay); background: var(--inset);
    border-radius: var(--radius-sm); padding: 1px 6px;
  }

  /* ---- generic tables ---- */
  .tbl-wrap.svelte-1pafvnu { overflow-x: auto; border: 1px solid var(--sand); border-radius: var(--radius-md); background: var(--paper); }
  .bt-tbl.svelte-1pafvnu { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--text-sm); min-width: 640px; }
  .bt-tbl.svelte-1pafvnu th:where(.svelte-1pafvnu) {
    position: sticky; top: 0; z-index: 1; background: var(--inset); color: var(--ink); text-align: left;
    padding: var(--space-2) var(--space-4); font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--sand); white-space: nowrap; height: 38px;
  }
  .bt-tbl.svelte-1pafvnu td:where(.svelte-1pafvnu) {
    padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--sand);
    color: var(--clay); vertical-align: middle; height: 40px; line-height: var(--leading-normal);
  }
  .bt-tbl.svelte-1pafvnu tbody:where(.svelte-1pafvnu) tr:where(.svelte-1pafvnu):last-child td:where(.svelte-1pafvnu) { border-bottom: none; }
  .bt-tbl.svelte-1pafvnu tbody:where(.svelte-1pafvnu) tr:where(.svelte-1pafvnu):nth-child(even) td:where(.svelte-1pafvnu) { background: var(--stone); }
  .bt-tbl.svelte-1pafvnu tbody:where(.svelte-1pafvnu) tr:where(.svelte-1pafvnu):hover td:where(.svelte-1pafvnu) { background: var(--accent-soft); }
  .no.svelte-1pafvnu { color: var(--accent); }
  .col.svelte-1pafvnu { color: var(--ink); }
  .cname.svelte-1pafvnu { color: var(--ink); white-space: nowrap; }
  .w-no.svelte-1pafvnu { width: 52px; }
  .w-req.svelte-1pafvnu { width: 56px; }
  .w-code.svelte-1pafvnu { width: 72px; }
  .w-cname.svelte-1pafvnu { width: 96px; }
  .dash.svelte-1pafvnu { color: var(--smoke); }
  .arg-req.svelte-1pafvnu { color: var(--accent); font-weight: var(--weight-semibold); }

  /* ---- remarks ---- */
  .bt-remarks.svelte-1pafvnu {
    margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--clay);
    max-width: 72ch; white-space: pre-line; background: var(--stone); border: 1px solid var(--sand);
    border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  }
  .bt-noremarks.svelte-1pafvnu {
    display: flex; align-items: center; gap: var(--space-2); color: var(--smoke); font-size: var(--text-sm);
    padding: var(--space-4) var(--space-5); background: var(--stone);
    border: 1px dashed var(--sand); border-radius: var(--radius-md);
  }

  .dg-bar.svelte-yo63eo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--sand);
    background: var(--stone);
    flex-shrink: 0;
  }
  .dg-left.svelte-yo63eo {
    display: flex; align-items: center; gap: var(--space-2);
    min-width: 0; flex: 1;
  }
  .dg-right.svelte-yo63eo {
    display: flex; align-items: center; gap: var(--space-1);
    flex-shrink: 0;
  }
  .dg-zoom.svelte-yo63eo {
    font-size: var(--text-xs);
    color: var(--ash);
    min-width: 40px;
    text-align: center;
  }
  .dg-btn.svelte-yo63eo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--clay);
    cursor: pointer;
    transition: background 160ms ease-out, color 160ms ease-out;
  }
  .dg-btn.svelte-yo63eo:hover { background: var(--inset); color: var(--ink); }
  .dg-btn.svelte-yo63eo:disabled { opacity: 0.4; cursor: default; }
  .dg-btn.svelte-yo63eo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .wf-root.svelte-1gmfj8 { display: flex; flex-direction: column; }

  .bpmn-host.svelte-1gmfj8 {
    position: relative;
    display: flex;
    flex-direction: column;
    height: min(72vh, 720px);
    margin: 0 8px;
    border: 1px solid var(--sand);
    border-radius: var(--radius-lg);
    background: var(--paper);
    overflow: hidden;
    outline: none;
  }
  .bpmn-host.full.svelte-1gmfj8 { height: 100vh; margin: 0; border-radius: 0; }

  .tb-title.svelte-1gmfj8 {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    color: var(--clay);
  }
  .tb-title.svelte-1gmfj8 svg { color: var(--ash); }
  .tb-stress.svelte-1gmfj8 {
    margin-left: 8px; padding: 1px 8px;
    font-size: var(--text-xs); color: var(--clay);
    background: var(--inset); border: 1px solid var(--sand); border-radius: 9999px;
  }

  .bpmn-wrap.svelte-1gmfj8 {
    position: relative; flex: 1; min-height: 0; overflow: hidden;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 23px, var(--stone) 23px, var(--stone) 24px),
      var(--paper);
    cursor: grab; touch-action: none;
  }
  .bpmn-wrap.panning.svelte-1gmfj8 { cursor: grabbing; }

  .bpmn-stage.svelte-1gmfj8 {
    position: absolute; top: 0; left: 0;
    transform-origin: 0 0; will-change: transform; opacity: 0;
  }
  .bpmn-stage.ready.svelte-1gmfj8 { opacity: 1; transition: opacity 200ms ease-out; }
  .bpmn-svg.svelte-1gmfj8 { display: block; }
  /* #13 カードの浮き（drop-shadow）。box-shadow トークンは複合値で filter に
     使えないため、単一 drop-shadow をテーマ別に持つ。ライトは薄い黒影、ダーク
     は沈むので極薄の明色グロー＋ごく薄い黒で輪郭を締める（両テーマ同品質）。 */
  .bpmn-svg.svelte-1gmfj8 { --card-lift: drop-shadow(0 1px 1.5px rgba(23, 23, 23, 0.10)); }
  [data-theme="dark"] .bpmn-svg.svelte-1gmfj8 { --card-lift: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55)); }

  /* ---- SVG theming (all colors via app.css vars) ---- */
  .band-head.svelte-1gmfj8 { fill: var(--paper); stroke: none; }
  .fig-title.svelte-1gmfj8 { fill: var(--ink-strong); font-family: var(--font-ui); font-size: 18px; font-weight: var(--weight-semibold); }

  .axis-band.svelte-1gmfj8 { fill: var(--ink-strong); stroke: var(--paper); stroke-width: 1.5; }
  .axis-title.svelte-1gmfj8 { fill: var(--paper); font-family: var(--font-ui); font-size: 14px; font-weight: var(--weight-semibold); }
  .axis-label-cell.svelte-1gmfj8 { fill: var(--stone); stroke: var(--sand); stroke-width: 1; }
  .axis-corner-text.svelte-1gmfj8 { fill: var(--ash); font-family: var(--font-ui); font-size: 12px; font-weight: var(--weight-medium); }

  .lane-parent.svelte-1gmfj8 { fill: var(--inset); stroke: var(--sand); stroke-width: 1; }
  .lane-parent-text.svelte-1gmfj8 { fill: var(--clay); font-family: var(--font-ui); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: 2px; }
  .lane-head.svelte-1gmfj8 { fill: var(--stone); stroke: var(--sand); stroke-width: 1; }
  .lane-head.sys.svelte-1gmfj8 { fill: var(--inset); }
  .lane-text.svelte-1gmfj8 { fill: var(--ink); font-family: var(--font-ui); font-size: 13px; font-weight: var(--weight-semibold); }
  .lane-row.svelte-1gmfj8 { fill: var(--paper); stroke: var(--sand); stroke-width: 1; }
  .lane-row.sys.svelte-1gmfj8 { fill: color-mix(in srgb, var(--stone) 60%, var(--paper)); }

  /* #13 フェーズ帯: 奇数章の淡い地色＋章境界の細線。地色はレーンより一段
     淡い程度に留め、ノード/エッジの可読性を損なわない。両テーマで --inset を
     低不透明で敷く（ライト=薄グレー / ダーク=わずかに明るい帯）。 */
  .phase-band.svelte-1gmfj8 { fill: var(--inset); opacity: 0.45; }
  .phase-div.svelte-1gmfj8 { stroke: var(--sand); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.7; }

  /* #13 ジャーニーライン: 主経路（Operation Flow）を --ink の太線で1本の旅程
     として強調（1.75px）。分岐/戻りも同系だが when ラベルと下チャネル配置で
     読み分ける。System Flow（message）は従来どおり --ash 破線で従属表現。
     選択/フォーカス時のみ .lit が --accent で一時強調（色規律の例外）。 */
  .edge.svelte-1gmfj8 { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 160ms ease-out; }
  .edge.sequence.svelte-1gmfj8 { stroke: var(--ink); stroke-width: 1.75; }
  .edge.message.svelte-1gmfj8 { stroke: var(--ash); stroke-width: 1.5; stroke-dasharray: 8 6; }
  .edge.lit.svelte-1gmfj8 { stroke: var(--accent); stroke-width: 2.6; }
  .edge.dim.svelte-1gmfj8 { opacity: 0.32; }
  .arrow-head.svelte-1gmfj8 { fill: var(--ink); }
  .arrow-head-msg.svelte-1gmfj8 { fill: var(--ash); }
  .arrow-head-lit.svelte-1gmfj8 { fill: var(--accent); }
  .edge-label.svelte-1gmfj8 { fill: var(--clay); font-family: var(--font-ui); font-size: 11px; font-weight: var(--weight-medium); }
  .edge-label-bg.svelte-1gmfj8 { fill: var(--paper); stroke: var(--sand); stroke-width: 1; }
  g.dim.svelte-1gmfj8 { opacity: 0.35; transition: opacity 160ms ease-out; }

  /* node selection / dimming (Q12 経路強調) */
  .node.svelte-1gmfj8 { transition: opacity 160ms ease-out; }
  .node.dim.svelte-1gmfj8 { opacity: 0.38; }
  .node.sel.svelte-1gmfj8 .shp:where(.svelte-1gmfj8),
  .node.sel.svelte-1gmfj8 .gw:where(.svelte-1gmfj8),
  .node.sel.svelte-1gmfj8 .ev:where(.svelte-1gmfj8) { filter: drop-shadow(0 0 0 var(--accent)); stroke: var(--accent) !important; stroke-width: 3 !important; }
  .node-hit.svelte-1gmfj8 { fill: transparent; cursor: pointer; }
  .node-hit.svelte-1gmfj8:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* #13 ノードカード: 工程を「カード」として読ませる。硬い --ash 罫から
     --sand の細枠＋淡い浮きシャドウへ。寸法（w/h）は bpmnElkLayout の
     measure 由来のまま（単一ソース）で、見た目だけカード化する。改善/リスク
     の意味色は従来トークンで温存（色のみ依存にしない＝バッジ併記）。 */
  .shp.svelte-1gmfj8 { stroke-width: 1.5; transition: filter 160ms ease-out, stroke 160ms ease-out; filter: var(--card-lift); }
  .shp.task.svelte-1gmfj8 { fill: var(--paper); stroke: var(--sand); }
  .shp.task.system.svelte-1gmfj8 { fill: var(--stone); stroke: var(--sand); }
  .shp.store.svelte-1gmfj8 { fill: var(--stone); stroke: var(--sand); }
  .shp.improve.svelte-1gmfj8 { stroke: var(--bpmn-improve); stroke-width: 2; fill: var(--bpmn-improve-soft); }
  .shp.risk.svelte-1gmfj8 { stroke: var(--bpmn-risk); stroke-width: 2; }
  .gw.svelte-1gmfj8 { fill: var(--paper); stroke: var(--clay); stroke-width: 2; }
  .ev.svelte-1gmfj8 { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
  .ev.end.svelte-1gmfj8 { stroke-width: 3.5; }
  .ev-inner.svelte-1gmfj8 { fill: none; stroke: var(--ink); stroke-width: 1.5; }

  /* proc-no を工程番号の見出しピルとして少し際立たせる（カードの通し番号）。 */
  .proc-no.svelte-1gmfj8 { fill: var(--clay); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
  .scr-badge-bg.svelte-1gmfj8 { fill: var(--paper); stroke: var(--sand); stroke-width: 1; }
  .scr-badge.svelte-1gmfj8 { fill: var(--accent); font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
  .tool-chip.svelte-1gmfj8 { fill: var(--paper); stroke: var(--sand); stroke-width: 1; }
  .ic.svelte-1gmfj8 { fill: none; stroke: var(--clay); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .ic-dot.svelte-1gmfj8 { fill: var(--clay); stroke: none; }

  .mean-badge.improve.svelte-1gmfj8 { fill: var(--paper); stroke: var(--bpmn-improve); stroke-width: 1; }
  .mean-badge.risk.svelte-1gmfj8 { fill: var(--paper); stroke: var(--bpmn-risk); stroke-width: 1; }
  .mean-text.svelte-1gmfj8 { font-family: var(--font-ui); font-size: 10px; font-weight: 700; }
  .mean-text.improve.svelte-1gmfj8 { fill: var(--bpmn-improve); }
  .mean-text.risk.svelte-1gmfj8 { fill: var(--bpmn-risk); }

  .bpmn-svg .node-text {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    text-align: center; font-family: var(--font-ui);
    font-size: 13px; font-weight: var(--weight-semibold); line-height: 1.2;
    color: var(--ink); word-break: keep-all; overflow-wrap: anywhere;
  }
  .bpmn-svg .ev-text {
    width: 100%; height: 100%;
    display: flex; align-items: flex-start; justify-content: center;
    text-align: center; font-family: var(--font-ui);
    font-size: 11px; font-weight: var(--weight-semibold); line-height: 1.2;
    color: var(--ink); word-break: keep-all; overflow-wrap: anywhere;
  }
  .bpmn-svg .gw-text {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    text-align: center; font-family: var(--font-ui);
    font-size: 11px; font-weight: var(--weight-semibold); line-height: 1.14;
    color: var(--ink); word-break: keep-all; overflow-wrap: anywhere;
  }

  .bpmn-svg .chip-row {
    display: flex; flex-wrap: wrap; gap: 4px;
    justify-content: center; align-items: flex-start; font-family: var(--font-ui);
  }
  .bpmn-svg .re-chip {
    height: 20px; padding: 0 8px;
    display: inline-flex; align-items: center;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    font-size: var(--text-xs); font-weight: var(--weight-medium);
    font-family: var(--font-mono); line-height: 1; cursor: pointer;
    transition: box-shadow 160ms ease-out, border-color 160ms ease-out;
  }
  /* Opaque --paper fill + colored border/text so the R/E label meets
     WCAG 4.5:1 in both themes while the border keeps the blue=rule /
     red=error semantic — color is never the only signal. */
  .bpmn-svg .re-chip.rule { color: var(--accent); background: var(--paper); border-color: var(--accent); }
  .bpmn-svg .re-chip.err { color: var(--red); background: var(--paper); border-color: var(--red); }
  .bpmn-svg .re-chip:hover { box-shadow: var(--shadow-subtle); }
  .bpmn-svg .re-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* #6 仮採番チップ: 破線枠・muted・非インタラクティブ。色記号（青=ルール/
     赤=エラー）は border 色の輪郭を muted 化して残し、破線＋（仮）タグの
     二重信号で「未確定」を示す（色のみ依存にしない）。 */
  .bpmn-svg .re-chip.prov {
    color: var(--ash); border-style: dashed; border-color: var(--smoke);
    background: var(--stone); cursor: default;
  }
  .bpmn-svg .re-chip.prov:hover { box-shadow: none; }
  .bpmn-svg .re-chip .prov-tag { margin-left: 1px; font-size: 0.85em; }

  .legend-box.svelte-1gmfj8 { fill: var(--stone); stroke: var(--sand); stroke-width: 1; }
  .legend-h.svelte-1gmfj8 { fill: var(--ink-strong); font-family: var(--font-ui); font-size: 13px; font-weight: var(--weight-semibold); }
  .legend-sh.svelte-1gmfj8 { fill: var(--clay); font-family: var(--font-ui); font-size: 11px; font-weight: var(--weight-semibold); }
  .legend-t.svelte-1gmfj8 { fill: var(--ink); font-family: var(--font-ui); font-size: 11px; }
  .legend-div.svelte-1gmfj8 { stroke: var(--sand); stroke-width: 1; }
  .lg-swatch.improve.svelte-1gmfj8 { fill: var(--bpmn-improve-soft); stroke: var(--bpmn-improve); stroke-width: 2; }
  .lg-swatch.risk.svelte-1gmfj8 { fill: var(--paper); stroke: var(--bpmn-risk); stroke-width: 2; }
  .lg-shape.svelte-1gmfj8 { fill: var(--paper); stroke: var(--ash); stroke-width: 1.5; }

  .bpmn-empty.svelte-1gmfj8 {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-3); color: var(--smoke); text-align: center;
  }
  .bpmn-empty.svelte-1gmfj8 p:where(.svelte-1gmfj8) { margin: 0; font-size: var(--text-base); }

  .pop.svelte-1gmfj8 {
    position: absolute; z-index: 20;
    transform: translate(12px, 12px);
    max-width: 340px; padding: 10px 12px;
    background: var(--paper); border: 1px solid var(--sand);
    border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
    font-family: var(--font-ui); pointer-events: none;
    animation: svelte-1gmfj8-pop-in 120ms ease-out;
  }
  .pop.pinned.svelte-1gmfj8 { pointer-events: auto; }
  .pop-head.svelte-1gmfj8 {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--sand);
  }
  .pop-id.svelte-1gmfj8 { font-size: var(--text-sm); font-weight: 700; }
  .pop-head.rule.svelte-1gmfj8 .pop-id:where(.svelte-1gmfj8) { color: var(--accent); }
  .pop-head.err.svelte-1gmfj8 .pop-id:where(.svelte-1gmfj8) { color: var(--red); }
  .pop-kind.svelte-1gmfj8 { font-size: var(--text-xs); color: var(--ash); }
  .pop-row.svelte-1gmfj8 { display: flex; gap: 8px; margin-top: 4px; font-size: var(--text-sm); }
  .pop-lbl.svelte-1gmfj8 { flex-shrink: 0; width: 34px; color: var(--ash); }
  .pop-val.svelte-1gmfj8 { color: var(--ink); line-height: 1.45; }
  .pop-val.sub.svelte-1gmfj8 { color: var(--clay); font-size: var(--text-xs); }
  .pop-code.svelte-1gmfj8 {
    font-family: var(--font-mono); font-size: var(--text-xs);
    color: var(--ink); background: var(--inset);
    padding: 1px 5px; border-radius: var(--radius-sm);
    line-height: 1.5; word-break: break-word;
  }
  .pop-act.svelte-1gmfj8 { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sand); display: flex; }
  .pop-open.svelte-1gmfj8 {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border: 1px solid var(--sand); border-radius: var(--radius-sm);
    background: var(--paper); color: var(--accent);
    font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-medium);
    cursor: pointer; transition: background 150ms ease-out, border-color 150ms ease-out;
  }
  .pop-open.svelte-1gmfj8 svg { color: var(--accent); }
  .pop-open.svelte-1gmfj8:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
  .pop-open.svelte-1gmfj8:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @keyframes svelte-1gmfj8-pop-in {
    from { opacity: 0; transform: translate(12px, 16px); }
    to   { opacity: 1; transform: translate(12px, 12px); }
  }

  /* ============================================================
     文書部 (document section)
     ============================================================ */
  .wf-doc.svelte-1gmfj8 {
    max-width: 1040px;
    margin: var(--space-6) auto 0;
    padding: 0 var(--space-6) var(--space-8);
    color: var(--ink);
    font-family: var(--font-ui);
  }
  .wf-doc-head.svelte-1gmfj8 {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--sand);
    margin-bottom: var(--space-6);
  }
  .wf-doc-title.svelte-1gmfj8 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .wf-doc-title.svelte-1gmfj8 svg { color: var(--clay); flex-shrink: 0; }
  .wf-doc-name.svelte-1gmfj8 {
    font-size: var(--text-xl); font-weight: var(--weight-semibold);
    color: var(--ink-strong); line-height: var(--leading-tight);
  }
  .wf-doc-kind.svelte-1gmfj8 {
    font-size: var(--text-xs); color: var(--clay);
    background: var(--inset); border: 1px solid var(--sand);
    border-radius: 9999px; padding: 2px 10px;
  }
  .wf-doc-sub.svelte-1gmfj8 { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
  .wf-id.svelte-1gmfj8 { font-size: var(--text-sm); color: var(--accent); }
  .wf-ver.svelte-1gmfj8 { font-size: var(--text-sm); color: var(--ash); }

  .wf-sec.svelte-1gmfj8 { margin-bottom: var(--space-7); }
  .wf-h.svelte-1gmfj8 {
    font-size: var(--text-lg); font-weight: var(--weight-semibold);
    color: var(--ink-strong); margin: 0 0 var(--space-3);
    line-height: var(--leading-tight);
    display: flex; align-items: baseline; gap: var(--space-3);
  }
  .wf-count.svelte-1gmfj8 { font-size: var(--text-xs); color: var(--ash); font-weight: var(--weight-regular); }
  .wf-hint.svelte-1gmfj8 { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--ash); }

  .wf-purpose.svelte-1gmfj8, .wf-remarks.svelte-1gmfj8 {
    margin: 0; font-size: var(--text-base);
    line-height: var(--leading-normal); color: var(--ink);
    max-width: 72ch;
  }
  .wf-remarks.svelte-1gmfj8 { color: var(--clay); }

  .wf-pre.svelte-1gmfj8 { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
  .wf-pre.svelte-1gmfj8 li:where(.svelte-1gmfj8) {
    display: flex; gap: var(--space-3); align-items: baseline;
    font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink);
  }
  .wf-no.svelte-1gmfj8 {
    flex-shrink: 0; width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--inset); border-radius: var(--radius-sm);
    font-size: var(--text-xs); color: var(--clay);
  }

  .wf-tbl-scroll.svelte-1gmfj8 { overflow-x: auto; border: 1px solid var(--sand); border-radius: var(--radius-md); }
  .wf-tbl.svelte-1gmfj8 { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
  .wf-tbl.svelte-1gmfj8 thead:where(.svelte-1gmfj8) th:where(.svelte-1gmfj8) {
    position: sticky; top: 0; z-index: 1;
    background: var(--stone); color: var(--clay);
    font-weight: var(--weight-semibold); text-align: left;
    padding: 10px 12px; white-space: nowrap;
    border-bottom: 1px solid var(--sand);
  }
  .wf-tbl.svelte-1gmfj8 tbody:where(.svelte-1gmfj8) td:where(.svelte-1gmfj8) {
    padding: 10px 12px; vertical-align: top;
    border-bottom: 1px solid var(--sand); color: var(--ink);
    line-height: var(--leading-normal);
  }
  .wf-tbl.svelte-1gmfj8 tbody:where(.svelte-1gmfj8) tr:where(.svelte-1gmfj8):last-child td:where(.svelte-1gmfj8) { border-bottom: none; }
  .wf-tbl.svelte-1gmfj8 tbody:where(.svelte-1gmfj8) tr:where(.svelte-1gmfj8):nth-child(even) { background: color-mix(in srgb, var(--stone) 55%, var(--paper)); }
  .wf-tbl.svelte-1gmfj8 .mono:where(.svelte-1gmfj8) { font-family: var(--font-mono); }
  .wf-tbl.svelte-1gmfj8 .c-id:where(.svelte-1gmfj8), .wf-tbl.svelte-1gmfj8 .c-no:where(.svelte-1gmfj8), .wf-tbl.svelte-1gmfj8 .c-pn:where(.svelte-1gmfj8), .wf-tbl.svelte-1gmfj8 .c-dir:where(.svelte-1gmfj8) { white-space: nowrap; color: var(--clay); }
  .wf-tbl.svelte-1gmfj8 .c-nm:where(.svelte-1gmfj8), .wf-tbl.svelte-1gmfj8 .c-nm2:where(.svelte-1gmfj8) { font-weight: var(--weight-medium); }
  .wf-tbl.svelte-1gmfj8 .c-lane:where(.svelte-1gmfj8) { white-space: nowrap; color: var(--clay); }
  .dash.svelte-1gmfj8 { color: var(--smoke); }

  /* 工程一覧表 (clickable rows) */
  .wf-tbl.steps.svelte-1gmfj8 tbody:where(.svelte-1gmfj8) tr.step-row:where(.svelte-1gmfj8) { cursor: pointer; transition: background 140ms ease-out; }
  .wf-tbl.steps.svelte-1gmfj8 tbody:where(.svelte-1gmfj8) tr.step-row:where(.svelte-1gmfj8):hover { background: var(--accent-soft); }
  .wf-tbl.steps.svelte-1gmfj8 tbody:where(.svelte-1gmfj8) tr.step-row:where(.svelte-1gmfj8):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .wf-tbl.steps.svelte-1gmfj8 tbody:where(.svelte-1gmfj8) tr.active:where(.svelte-1gmfj8) { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
  .wf-tbl.steps.svelte-1gmfj8 tbody:where(.svelte-1gmfj8) tr.flash:where(.svelte-1gmfj8) { animation: svelte-1gmfj8-row-flash 1.4s ease-out; }
  @keyframes svelte-1gmfj8-row-flash {
    0% { background: var(--accent-soft); }
    30% { background: var(--accent-soft); }
    100% { background: transparent; }
  }
  .c-desc.svelte-1gmfj8 { min-width: 260px; max-width: 380px; }
  .c-io.svelte-1gmfj8 { min-width: 180px; }
  .io.svelte-1gmfj8 { display: flex; gap: 5px; align-items: flex-start; font-size: var(--text-xs); line-height: 1.4; }
  .io.svelte-1gmfj8 + .io:where(.svelte-1gmfj8) { margin-top: 3px; }
  .io.svelte-1gmfj8 svg { flex-shrink: 0; margin-top: 2px; }
  .io.in.svelte-1gmfj8 svg { color: var(--accent); }
  .io.out.svelte-1gmfj8 svg { color: var(--green); }
  .io.out.svelte-1gmfj8 span:where(.svelte-1gmfj8) { color: var(--clay); }
  .scr-tag.svelte-1gmfj8 {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-sm); padding: 2px 6px;
    font-size: var(--text-xs); white-space: nowrap;
  }
  .re-tags.svelte-1gmfj8 { display: flex; flex-wrap: wrap; gap: 4px; }
  .re-tag.svelte-1gmfj8 {
    display: inline-flex; align-items: center; gap: 3px;
    height: 21px; padding: 0 7px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
    line-height: 1; cursor: pointer; white-space: nowrap;
    transition: box-shadow 160ms ease-out;
  }
  .re-tag.rule.svelte-1gmfj8 { color: var(--accent); background: var(--paper); border-color: var(--accent); }
  .re-tag.err.svelte-1gmfj8 { color: var(--red); background: var(--paper); border-color: var(--red); }
  .re-tag.svelte-1gmfj8:hover { box-shadow: var(--shadow-subtle); }
  .re-tag.svelte-1gmfj8:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* #6 仮採番タグ（工程一覧表側）: 図のチップと同一規律で破線・muted・非活性。 */
  .re-tag.prov.svelte-1gmfj8 {
    color: var(--ash); border-style: dashed; border-color: var(--smoke);
    background: var(--stone); cursor: default;
  }
  .re-tag.prov.svelte-1gmfj8:hover { box-shadow: none; }
  .re-tag.prov.svelte-1gmfj8 svg { color: var(--smoke); }
  .re-tag.svelte-1gmfj8 .prov-tag:where(.svelte-1gmfj8) { margin-left: 1px; font-size: 0.85em; }

  .c-cond.svelte-1gmfj8 { min-width: 220px; }
  .c-scr.svelte-1gmfj8, .c-re.svelte-1gmfj8 { white-space: nowrap; }

  /* 改訂履歴 (collapsible) */
  .wf-rev.svelte-1gmfj8 summary:where(.svelte-1gmfj8) {
    display: flex; align-items: center; gap: var(--space-2);
    cursor: pointer; font-size: var(--text-lg); font-weight: var(--weight-semibold);
    color: var(--ink-strong); list-style: none; user-select: none;
  }
  .wf-rev.svelte-1gmfj8 summary:where(.svelte-1gmfj8)::-webkit-details-marker { display: none; }
  .wf-rev.svelte-1gmfj8 summary:where(.svelte-1gmfj8) .rev-caret { color: var(--ash); transition: transform 160ms ease-out; }
  .wf-rev[open].svelte-1gmfj8 summary:where(.svelte-1gmfj8) .rev-caret { transform: rotate(180deg); }
  .wf-rev.svelte-1gmfj8 > .wf-tbl-scroll:where(.svelte-1gmfj8) { margin-top: var(--space-3); }

  .dl.svelte-nfl7gg { height: 100%; overflow-y: auto; color: var(--ink); position: relative; scroll-behavior: smooth; }
  .dl-empty.svelte-nfl7gg {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    color: var(--smoke); text-align: center; padding: 60px 20px;
  }
  .dl-empty.svelte-nfl7gg p:where(.svelte-nfl7gg) { margin: 0; font-size: var(--text-base); }

  /* ---- header ---- */
  .dl-head.svelte-nfl7gg { max-width: 1040px; margin: 0 auto; padding: var(--space-5) var(--space-7) var(--space-4); }
  .dl-titlerow.svelte-nfl7gg { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .dl-titlerow.svelte-nfl7gg svg { color: var(--accent); flex-shrink: 0; }
  .dl-flex-spacer.svelte-nfl7gg { flex: 1; }
  .dl-name.svelte-nfl7gg { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--ink-strong); margin: 0; line-height: var(--leading-tight); }

  .dl-govern.svelte-nfl7gg {
    margin: var(--space-3) 0 0; font-size: var(--text-sm); line-height: var(--leading-normal);
    color: var(--clay); max-width: 78ch;
    padding-left: var(--space-4); border-left: 2px solid var(--accent);
  }

  /* ---- 変更管理メタ行 ---- */
  .dl-meta-grid.svelte-nfl7gg {
    margin: var(--space-5) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    border: 1px solid var(--sand); border-radius: var(--radius-md); overflow: hidden;
    background: var(--stone);
  }
  .mrow.svelte-nfl7gg { display: flex; flex-direction: column; gap: 3px; padding: var(--space-3) var(--space-4); border-right: 1px solid var(--sand); }
  .mrow.svelte-nfl7gg:last-child { border-right: none; }
  .mrow.svelte-nfl7gg dt:where(.svelte-nfl7gg) { font-size: var(--text-xs); color: var(--ash); font-weight: var(--weight-medium); }
  .mrow.svelte-nfl7gg dd:where(.svelte-nfl7gg) { margin: 0; font-size: var(--text-sm); color: var(--ink); }

  .dl-desc.svelte-nfl7gg { margin: var(--space-4) 0 0; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--clay); max-width: 72ch; }

  /* ---- 状態行（簡素） ---- */
  .dl-stateline.svelte-nfl7gg {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--ash);
  }
  .sl-item.svelte-nfl7gg { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--clay); }
  .sl-item.svelte-nfl7gg svg { color: currentColor; }
  .sl-item.done.svelte-nfl7gg { color: var(--green); }
  .sl-item.pending.svelte-nfl7gg { color: var(--ash); }
  .dl-stateline.svelte-nfl7gg > svg { color: var(--smoke); }

  /* ---- body / sections ---- */
  .dl-body.svelte-nfl7gg { max-width: 1040px; margin: 0 auto; padding: var(--space-6) var(--space-7) var(--space-8); }
  .dl-section.svelte-nfl7gg { margin-bottom: var(--space-8); }
  /* 左端の細い色バー（--accent）で節を統制記録らしく罫線化 */
  .dl-section.barred.svelte-nfl7gg { padding-left: var(--space-5); border-left: 3px solid var(--accent); }
  .dl-h.svelte-nfl7gg {
    font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-strong);
    margin: 0 0 var(--space-2); line-height: var(--leading-tight);
    display: flex; align-items: center; gap: var(--space-2);
  }
  .dl-h.svelte-nfl7gg svg { color: var(--clay); }
  .count.svelte-nfl7gg {
    font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ash);
    font-family: var(--font-mono); background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px;
  }
  .dl-note.svelte-nfl7gg { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--clay); line-height: var(--leading-normal); max-width: 74ch; }

  /* ---- 罫線テーブル（共通） ---- */
  .tbl-wrap.svelte-nfl7gg { overflow-x: auto; border: 1px solid var(--sand); border-radius: var(--radius-md); background: var(--paper); }
  .dl-tbl.svelte-nfl7gg { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--text-sm); min-width: 560px; }
  .dl-tbl.svelte-nfl7gg th:where(.svelte-nfl7gg) {
    position: sticky; top: 0; z-index: 1; background: var(--inset); color: var(--ink); text-align: left;
    padding: var(--space-2) var(--space-4); font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--sand); white-space: nowrap; height: 38px;
  }
  .dl-tbl.svelte-nfl7gg td:where(.svelte-nfl7gg) {
    padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--sand);
    color: var(--clay); vertical-align: middle; line-height: var(--leading-normal); font-size: var(--text-sm);
  }
  .dl-tbl.svelte-nfl7gg tbody:where(.svelte-nfl7gg) tr:where(.svelte-nfl7gg):last-child td:where(.svelte-nfl7gg) { border-bottom: none; }
  .dl-tbl.svelte-nfl7gg tbody:where(.svelte-nfl7gg) tr:where(.svelte-nfl7gg):nth-child(even) td:where(.svelte-nfl7gg) { background: var(--stone); }

  .cell-doc.svelte-nfl7gg { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .doc-id.svelte-nfl7gg { color: var(--accent); font-size: var(--text-sm); white-space: nowrap; }
  .doc-md.svelte-nfl7gg { color: var(--ash); font-size: var(--text-xs); }
  /* 変更管理表の参照リンク: 塗りチップにせず、罫線表になじむ下線リンク体裁
     （色チップの点数を状態ピル1個に抑えるため）。クリックで正本を開く。 */
  .doc-link.svelte-nfl7gg {
    display: inline-flex; align-items: center; gap: var(--space-1);
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--accent); font-size: var(--text-sm); font-family: var(--font-mono);
    white-space: nowrap; line-height: 1.2;
  }
  .doc-link.svelte-nfl7gg svg { color: currentColor; flex-shrink: 0; }
  .doc-link.svelte-nfl7gg:hover { text-decoration: underline; }
  .doc-link.svelte-nfl7gg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

  .w-ver.svelte-nfl7gg { width: 180px; }
  .cell-ver.svelte-nfl7gg { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
  /* 現版=退色（改訂前）、新版=強調（改訂後）。赤は使わず --clay / --ink で階調表現 */
  .ver-before.svelte-nfl7gg { color: var(--clay); }
  .ver-after.svelte-nfl7gg { color: var(--ink); font-weight: var(--weight-medium); }
  .cell-ver.svelte-nfl7gg svg { color: var(--smoke); }

  .impl-cell.svelte-nfl7gg { color: var(--clay); font-size: var(--text-xs); }

  /* ---- トレーサビリティ 要件行 ---- */
  .trace-req.svelte-nfl7gg {
    margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--ink);
    line-height: var(--leading-normal); background: var(--stone);
    border: 1px solid var(--sand); border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
  }
  .tr-lead.svelte-nfl7gg {
    display: inline-block; margin-right: var(--space-3);
    font-size: var(--text-xs); color: var(--ash); font-weight: var(--weight-medium);
  }

  /* ---- 承認 ---- */
  .approve-grid.svelte-nfl7gg {
    margin: 0; padding: 0;
    border: 1px solid var(--sand); border-radius: var(--radius-md); overflow: hidden; background: var(--paper);
  }
  .arow.svelte-nfl7gg { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--sand); }
  .arow.svelte-nfl7gg:last-child { border-bottom: none; }
  .arow.svelte-nfl7gg dt:where(.svelte-nfl7gg) {
    padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--ash);
    font-weight: var(--weight-medium); background: var(--stone); border-right: 1px solid var(--sand);
  }
  .arow.svelte-nfl7gg dd:where(.svelte-nfl7gg) { margin: 0; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--ink); }
  .role-list.svelte-nfl7gg { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .role.svelte-nfl7gg { color: var(--clay); font-size: var(--text-xs); }
  .role-sep.svelte-nfl7gg { color: var(--smoke); }
  .ad-when.svelte-nfl7gg { color: var(--ash); font-size: var(--text-xs); margin-left: var(--space-2); }

  /* ---- cascade ---- */
  .csc-note.svelte-nfl7gg { color: var(--clay); font-size: var(--text-xs); line-height: var(--leading-normal); }

  /* ---- source ---- */
  .src-card.svelte-nfl7gg {
    background: var(--stone); border: 1px solid var(--sand); border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start;
  }
  .src-text.svelte-nfl7gg {
    margin: 0; padding: var(--space-2) var(--space-4); border-left: 3px solid var(--accent);
    font-size: var(--text-base); color: var(--ink); line-height: var(--leading-normal); font-style: normal;
  }
  .src-foot.svelte-nfl7gg { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
  .src-type.svelte-nfl7gg { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--ash); }
  .src-type.svelte-nfl7gg svg { color: var(--smoke); }
  .src-ref.svelte-nfl7gg { font-size: var(--text-xs); color: var(--ash); }

  .ev.svelte-15mpfr3 { height: 100%; overflow-y: auto; color: var(--ink); }

  .ev-empty.svelte-15mpfr3 {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    color: var(--smoke); text-align: center; padding: 60px 20px;
  }
  .ev-empty.svelte-15mpfr3 p:where(.svelte-15mpfr3) { margin: 0; font-size: var(--text-base); }

  /* ---- verdict header（モノクロ・帯の緑を廃止） ---- */
  .ev-head.svelte-15mpfr3 {
    max-width: 1080px; margin: var(--space-5) auto 0; padding: var(--space-4) var(--space-5);
    border: 1px solid var(--sand); border-radius: var(--radius-lg); background: var(--paper);
  }
  .ev-verdict.svelte-15mpfr3 { display: flex; align-items: center; gap: var(--space-3); }
  .ev-verdict.svelte-15mpfr3 > svg { flex-shrink: 0; color: var(--ash); }
  .ev-vmain.svelte-15mpfr3 { min-width: 0; }
  .ev-name.svelte-15mpfr3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--ink-strong); margin: 0; line-height: var(--leading-tight); }
  .ev-vsub.svelte-15mpfr3 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
  .ev-stat.svelte-15mpfr3 { font-size: 11.5px; color: var(--clay); }

  /* ---- category grid ---- */
  .ev-body.svelte-15mpfr3 { max-width: 1080px; margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-8); }
  .ev-grid.svelte-15mpfr3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-4); align-items: start; }
  .ev-card.svelte-15mpfr3 {
    border: 1px solid var(--sand); border-radius: var(--radius-md); background: var(--paper);
    display: flex; flex-direction: column;
    transition: box-shadow 180ms ease-out, border-color 180ms ease-out;
  }
  /* 展開時は自然に高さが伸び、他カードと段差が付くのを許容（grid align:start）。 */
  .ev-card.open.svelte-15mpfr3 { grid-row: span 2; }
  .ev-card.svelte-15mpfr3:hover { border-color: var(--smoke); }
  .ev-card.fail.svelte-15mpfr3 { border-color: var(--red-soft); }

  .ev-card-head.svelte-15mpfr3 {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    padding: var(--space-4) var(--space-5) var(--space-2);
    background: none; border: 0; width: 100%; text-align: left; font: inherit; color: inherit;
  }
  .ev-card-head.drillable.svelte-15mpfr3 { cursor: pointer; }
  .ev-card-head.svelte-15mpfr3:disabled { cursor: default; }
  .ev-card-head.drillable.svelte-15mpfr3:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-md); }
  .ev-caret.svelte-15mpfr3 { display: inline-flex; color: var(--ash); transition: transform 160ms ease-out; }
  .ev-caret.down.svelte-15mpfr3 { transform: rotate(90deg); }
  .ev-card-title.svelte-15mpfr3 {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink-strong);
  }
  .ev-card-title.svelte-15mpfr3 svg { color: var(--ash); }
  .ev-card-badges.svelte-15mpfr3 { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; }

  /* ratio は数値もモノクロ（緑を廃止）。強調は太字＋ink のみ。 */
  .ratio.svelte-15mpfr3 { display: inline-flex; align-items: baseline; gap: 1px; font-size: var(--text-sm); color: var(--ash); }
  .ratio.svelte-15mpfr3 .rn:where(.svelte-15mpfr3) { color: var(--ink); font-weight: var(--weight-semibold); }
  .ratio.svelte-15mpfr3 .rs:where(.svelte-15mpfr3) { color: var(--smoke); }

  .ev-card-cap.svelte-15mpfr3 {
    margin: 0; padding: 0 var(--space-5) var(--space-4);
    font-size: 11.5px; color: var(--clay);
  }
  .ev-card.open.svelte-15mpfr3 .ev-card-cap:where(.svelte-15mpfr3) { padding-bottom: var(--space-2); }

  /* ---- drill-down ---- */
  .ev-drill.svelte-15mpfr3 { padding: var(--space-2) var(--space-5) var(--space-4); border-top: 1px solid var(--sand); }
  .ev-drill-lead.svelte-15mpfr3 { margin: var(--space-2) 0 var(--space-3); font-size: 11.5px; color: var(--clay); }

  .ev-list.svelte-15mpfr3 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
  .ev-row.svelte-15mpfr3 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-height: 24px; }
  .ev-row-meta.svelte-15mpfr3 { font-size: var(--text-xs); color: var(--ash); }
  .ev-row-name.svelte-15mpfr3 { font-size: var(--text-sm); color: var(--clay); min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  .ev-row.api.svelte-15mpfr3 { gap: var(--space-2); }
  .ev-method.svelte-15mpfr3 {
    font-size: 10.5px; font-weight: var(--weight-semibold); color: var(--clay);
    background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px; min-width: 42px; text-align: center;
  }
  .ev-path.svelte-15mpfr3 { font-size: var(--text-xs); color: var(--ink); }

  /* command facets */
  .ev-cmd.svelte-15mpfr3 { padding: var(--space-2) 0; border-bottom: 1px solid var(--sand); }
  .ev-cmd.svelte-15mpfr3:last-child { border-bottom: 0; }
  .ev-cmd-head.svelte-15mpfr3 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .ev-cmd-id.svelte-15mpfr3 { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-strong); }
  .ev-cmd.svelte-15mpfr3 .ev-arrow { color: var(--smoke); }
  .ev-facets.svelte-15mpfr3 { margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: 3px; }
  .ev-facet.svelte-15mpfr3 { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-2); align-items: baseline; }
  .ev-facet.svelte-15mpfr3 dt:where(.svelte-15mpfr3) { font-family: var(--font-mono); font-size: 10.5px; color: var(--ash); margin: 0; }
  .ev-facet.svelte-15mpfr3 dd:where(.svelte-15mpfr3) { margin: 0; min-width: 0; }
  .ev-tags.svelte-15mpfr3 { display: inline-flex; flex-wrap: wrap; gap: 4px; }
  .ev-tag.svelte-15mpfr3 {
    font-size: 10.5px; color: var(--clay); background: var(--inset);
    border-radius: var(--radius-sm); padding: 1px 6px;
  }
  .ev-none.svelte-15mpfr3 { font-size: var(--text-xs); color: var(--smoke); }

  /* ui evidence */
  .ev-screens.svelte-15mpfr3 { display: flex; flex-direction: column; gap: var(--space-3); }
  .ev-screen.svelte-15mpfr3 { display: flex; flex-direction: column; gap: var(--space-1); }
  .ev-screen-head.svelte-15mpfr3 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .ev-caps.svelte-15mpfr3 { list-style: none; margin: 2px 0 0; padding: 0 0 0 var(--space-2); display: flex; flex-direction: column; gap: 2px; }
  .ev-caps.svelte-15mpfr3 li:where(.svelte-15mpfr3) {
    font-size: var(--text-xs); color: var(--clay); position: relative; padding-left: 12px;
  }
  .ev-caps.svelte-15mpfr3 li:where(.svelte-15mpfr3)::before {
    content: ''; position: absolute; left: 2px; top: 7px; width: 4px; height: 4px;
    border-radius: 50%; background: var(--smoke);
  }

  /* tests */
  .ev-tests.svelte-15mpfr3 { display: flex; flex-direction: column; gap: var(--space-4); }
  .ev-sub.svelte-15mpfr3 {
    margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold);
    color: var(--ash); text-transform: uppercase; letter-spacing: 0.04em;
    display: flex; align-items: center; gap: var(--space-2);
  }
  .ev-sub-n.svelte-15mpfr3 { color: var(--clay); font-weight: var(--weight-medium); letter-spacing: 0; }
  .ev-tests.svelte-15mpfr3 .ev-tick { color: var(--ash); flex-shrink: 0; }
  .ev-test-title.svelte-15mpfr3 { font-size: var(--text-xs); color: var(--clay); }

  /* 3層トレース（原典 → 仕様 → 新コード）。各行は3セルを矢印で連結し、
     横幅が足りなければ折り返す（narrow でも読める）。色は既存トークンのみ。 */
  .ev-3l.svelte-15mpfr3 { gap: var(--space-2); }
  .ev-3l-row.svelte-15mpfr3 {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    padding: var(--space-2) 0; border-bottom: 1px solid var(--sand);
  }
  .ev-3l-row.svelte-15mpfr3:last-child { border-bottom: 0; }
  .ev-3l.svelte-15mpfr3 .ev-arrow { color: var(--smoke); flex-shrink: 0; }
  .ev-3l-cell.svelte-15mpfr3 { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
  .ev-3l-cap.svelte-15mpfr3 {
    font-size: 9.5px; color: var(--ash); text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--inset); border-radius: var(--radius-sm); padding: 0 5px;
  }

  /* ---- fallback fields（未知カテゴリ） ---- */
  .ev-fields.svelte-15mpfr3 { margin: 0; padding: 0 var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
  .ev-field.svelte-15mpfr3 { display: grid; grid-template-columns: minmax(96px, 130px) 1fr; gap: var(--space-3); align-items: baseline; }
  .ev-field.block.svelte-15mpfr3 { grid-template-columns: 1fr; gap: var(--space-1); }
  .ev-field.svelte-15mpfr3 dt:where(.svelte-15mpfr3) { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ash); margin: 0; }
  .ev-field.svelte-15mpfr3 dd:where(.svelte-15mpfr3) { margin: 0; min-width: 0; font-size: var(--text-sm); color: var(--clay); }
  .ev-val.svelte-15mpfr3 { color: var(--clay); }
  .ev-chips.svelte-15mpfr3 { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .obj-chip.svelte-15mpfr3 {
    font-size: var(--text-xs); color: var(--clay); background: var(--inset);
    border-radius: var(--radius-sm); padding: 1px 6px;
  }

  .tr.svelte-9bjvgl { height: 100%; overflow-y: auto; color: var(--ink); }

  .tr-empty.svelte-9bjvgl {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    color: var(--smoke); text-align: center; padding: 60px 20px;
  }
  .tr-empty.svelte-9bjvgl p:where(.svelte-9bjvgl) { margin: 0; font-size: var(--text-base); }

  .tr-card.svelte-9bjvgl {
    max-width: 900px; margin: var(--space-5) auto var(--space-8);
    border: 1px solid var(--sand); border-radius: var(--radius-lg);
    background: var(--paper); overflow: hidden;
  }

  /* ---- ① header ---- */
  .tr-head.svelte-9bjvgl {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--sand); background: var(--stone);
    display: flex; flex-direction: column; gap: var(--space-3);
  }
  .tr-head-main.svelte-9bjvgl { display: flex; align-items: flex-start; gap: var(--space-3); }
  .tr-head.svelte-9bjvgl .tr-head-icon { color: var(--clay); flex-shrink: 0; margin-top: 1px; }
  .tr-head-id.svelte-9bjvgl { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .tr-idrow.svelte-9bjvgl { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .tr-id.svelte-9bjvgl {
    font-size: var(--text-lg); font-weight: var(--weight-semibold);
    color: var(--ink-strong); line-height: var(--leading-tight);
  }
  .tr-path.svelte-9bjvgl { font-size: var(--text-xs); color: var(--ash); }
  .tr-summary.svelte-9bjvgl {
    display: flex; align-items: baseline; gap: var(--space-2);
    flex-wrap: wrap; font-size: var(--text-sm); color: var(--clay);
  }
  .tr-summary.svelte-9bjvgl .sm-n:where(.svelte-9bjvgl) { color: var(--ink); font-weight: var(--weight-semibold); }
  .tr-summary.svelte-9bjvgl .sm-sep:where(.svelte-9bjvgl) { color: var(--smoke); }

  /* ---- sections ---- */
  .tr-sec.svelte-9bjvgl { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--sand); }
  .tr-sec-title.svelte-9bjvgl {
    display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-strong);
  }
  .tr-sec-title.svelte-9bjvgl svg { color: var(--clay); }

  /* ---- ② SSOT 行 ---- */
  .ssot.svelte-9bjvgl {
    border: 1px solid var(--sand); border-radius: var(--radius-md);
    background: var(--stone); overflow: hidden; font-size: 11.5px;
  }
  .ssot-line.svelte-9bjvgl { display: flex; align-items: baseline; gap: var(--space-3); padding: 2px var(--space-3); }
  .ssot-line.key.svelte-9bjvgl { background: var(--accent-soft); }
  .ssot-ln.svelte-9bjvgl {
    flex-shrink: 0; width: 22px; text-align: right; color: var(--smoke);
    user-select: none; font-size: 11px;
  }
  .ssot-line.key.svelte-9bjvgl .ssot-ln:where(.svelte-9bjvgl) { color: var(--accent); }
  .ssot-tx.svelte-9bjvgl { color: var(--clay); white-space: pre-wrap; word-break: break-word; }
  .ssot-line.key.svelte-9bjvgl .ssot-tx:where(.svelte-9bjvgl) { color: var(--ink); }

  /* ---- ③ 実装箇所 ---- */
  .impl-list.svelte-9bjvgl { display: flex; flex-direction: column; gap: var(--space-4); }
  .impl-area.svelte-9bjvgl { border: 1px solid var(--sand); border-radius: var(--radius-md); overflow: hidden; }
  .impl-head.svelte-9bjvgl {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) var(--space-3); background: var(--stone);
    border-bottom: 1px solid var(--sand); flex-wrap: wrap;
  }
  .impl-head-l.svelte-9bjvgl { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
  .impl-file.svelte-9bjvgl { font-size: var(--text-xs); color: var(--ink); font-weight: var(--weight-medium); word-break: break-all; }
  .impl-lines.svelte-9bjvgl { font-size: var(--text-xs); color: var(--ash); }
  .impl-open.svelte-9bjvgl {
    display: inline-flex; align-items: center; gap: 4px;
    height: 24px; padding: 0 var(--space-2);
    border: 1px solid var(--sand); border-radius: var(--radius-sm);
    background: var(--paper); color: var(--clay);
    font-size: var(--text-xs); font-weight: var(--weight-medium);
    cursor: pointer; white-space: nowrap;
    transition: color 140ms ease-out, border-color 140ms ease-out, background 140ms ease-out;
  }
  .impl-open.svelte-9bjvgl:hover { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
  .impl-open.svelte-9bjvgl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .impl-open.svelte-9bjvgl svg { flex-shrink: 0; }
  .impl-open.disabled.svelte-9bjvgl {
    color: var(--smoke); cursor: default; background: var(--stone);
    border-color: var(--sand); border-style: dashed;
  }

  .impl-code.svelte-9bjvgl { padding: var(--space-2) 0; background: var(--paper); font-size: 11.5px; }
  .code-line.svelte-9bjvgl {
    display: flex; align-items: baseline; gap: var(--space-2);
    padding: 1px var(--space-3) 1px 0; position: relative;
  }
  /* P0-4 由来レール風の 2px バー（充足=--ink / 部分=--smoke・§3.2） */
  .rail.svelte-9bjvgl { flex-shrink: 0; width: 2px; align-self: stretch; border-radius: 1px; }
  .rail-full.svelte-9bjvgl { background: var(--ink); }
  .rail-partial.svelte-9bjvgl { background: var(--smoke); }
  .code-ln.svelte-9bjvgl {
    flex-shrink: 0; width: 26px; text-align: right; color: var(--smoke);
    user-select: none; font-size: 11px;
  }
  .code-tx.svelte-9bjvgl { color: var(--ink); white-space: pre-wrap; word-break: break-word; flex: 1; min-width: 0; }
  .code-anchor.svelte-9bjvgl {
    flex-shrink: 0; font-size: 10px; color: var(--clay);
    background: var(--inset); border-radius: var(--radius-sm); padding: 1px 5px;
  }

  /* ---- ④ footer ---- */
  .tr-foot.svelte-9bjvgl {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-6); background: var(--stone); flex-wrap: wrap;
  }
  .tr-foot-l.svelte-9bjvgl {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); color: var(--clay);
  }
  .tr-foot-l.svelte-9bjvgl svg { color: var(--ash); }
  .tr-foot-r.svelte-9bjvgl { font-size: var(--text-xs); color: var(--ash); }

  .pd.svelte-1rjqle5 { height: 100%; overflow-y: auto; color: var(--ink); position: relative; scroll-behavior: smooth; }
  .pd-empty.svelte-1rjqle5 {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    color: var(--smoke); text-align: center; padding: 60px 20px;
  }
  .pd-empty.svelte-1rjqle5 p:where(.svelte-1rjqle5) { margin: 0; font-size: var(--text-base); }

  .pd-head.svelte-1rjqle5 { max-width: 1000px; margin: 0 auto; padding: var(--space-5) var(--space-7) var(--space-3); }
  .pd-titlerow.svelte-1rjqle5 { display: flex; align-items: center; gap: var(--space-3); }
  .pd-titlerow.svelte-1rjqle5 svg { color: var(--clay); flex-shrink: 0; }
  .pd-name.svelte-1rjqle5 { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--ink-strong); margin: 0; line-height: var(--leading-tight); }
  .pd-sub.svelte-1rjqle5 { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
  .pd-id.svelte-1rjqle5 { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--accent); }
  .pd-ver.svelte-1rjqle5, .pd-count.svelte-1rjqle5 {
    font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ash);
    font-family: var(--font-mono); background: var(--inset); border-radius: var(--radius-sm); padding: 1px 6px;
  }
  .pd-lead.svelte-1rjqle5 { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--clay); max-width: 76ch; line-height: var(--leading-normal); }

  .pd-sec.svelte-1rjqle5 { max-width: 1000px; margin: 0 auto; padding: var(--space-4) var(--space-7) 0; }
  .pd-sec.svelte-1rjqle5:last-child { padding-bottom: var(--space-8); }
  .pd-h.svelte-1rjqle5 {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-strong);
    margin: 0 0 var(--space-3); line-height: var(--leading-tight);
  }
  .pd-h.svelte-1rjqle5 svg { color: var(--clay); }
  .pd-note.svelte-1rjqle5 { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--ash); }

  .pd-tblwrap.svelte-1rjqle5 { overflow-x: auto; border: 1px solid var(--sand); border-radius: var(--radius-sm); }
  .pd-tbl.svelte-1rjqle5 { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--text-sm); }
  .pd-tbl.svelte-1rjqle5 th:where(.svelte-1rjqle5) {
    background: var(--inset); color: var(--ink); text-align: left;
    padding: var(--space-2) var(--space-4); font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--sand); white-space: nowrap; height: 36px;
  }
  .pd-tbl.svelte-1rjqle5 td:where(.svelte-1rjqle5) {
    padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--sand);
    color: var(--clay); vertical-align: middle; line-height: var(--leading-normal);
  }
  .pd-tbl.svelte-1rjqle5 tbody:where(.svelte-1rjqle5) tr:where(.svelte-1rjqle5):last-child td:where(.svelte-1rjqle5) { border-bottom: none; }
  .pd-tbl.svelte-1rjqle5 tbody:where(.svelte-1rjqle5) tr:where(.svelte-1rjqle5):nth-child(even) td:where(.svelte-1rjqle5) { background: var(--stone); }
  .pd-tbl.svelte-1rjqle5 tbody:where(.svelte-1rjqle5) tr:where(.svelte-1rjqle5):hover td:where(.svelte-1rjqle5) { background: var(--accent-soft); }

  .w-rid.svelte-1rjqle5 { width: 160px; }
  .w-rnm.svelte-1rjqle5 { width: 100px; }
  .w-rkey.svelte-1rjqle5 { width: 150px; }
  .w-ract.svelte-1rjqle5 { width: 80px; }
  .w-rev.svelte-1rjqle5 { width: 60px; }
  .w-revd.svelte-1rjqle5 { width: 110px; }
  .w-reva.svelte-1rjqle5 { width: 90px; }
  .pd-tbl.svelte-1rjqle5 td.rid:where(.svelte-1rjqle5) { color: var(--accent); font-weight: var(--weight-medium); }
  .pd-tbl.svelte-1rjqle5 td.rnm:where(.svelte-1rjqle5) { color: var(--ink); font-weight: var(--weight-medium); }
  .pd-tbl.svelte-1rjqle5 td.ract:where(.svelte-1rjqle5) { color: var(--ash); }
  .pd-tbl.svelte-1rjqle5 td.rdesc:where(.svelte-1rjqle5) { color: var(--clay); }

  /* マトリクス表（○/— ・ E/D/H） */
  .pd-tbl.matrix.svelte-1rjqle5 th.w-mark:where(.svelte-1rjqle5), .pd-tbl.matrix.svelte-1rjqle5 td.mark:where(.svelte-1rjqle5) { text-align: center; }
  .w-api.svelte-1rjqle5 { width: 210px; }
  .w-mark.svelte-1rjqle5 { width: 92px; }
  .w-scmark.svelte-1rjqle5 { width: 108px; }
  .apicell.svelte-1rjqle5 { display: flex; align-items: center; gap: var(--space-2); }
  .apiname.svelte-1rjqle5 { color: var(--clay); font-size: var(--text-xs); }
  .pd-tbl.matrix.svelte-1rjqle5 td.mark:where(.svelte-1rjqle5) {
    text-align: center; font-weight: var(--weight-semibold); color: var(--smoke);
    font-family: var(--font-mono);
  }
  .pd-tbl.matrix.svelte-1rjqle5 td.mark.on:where(.svelte-1rjqle5) { color: var(--green); }
  .pd-tbl.matrix.svelte-1rjqle5 td.scmark:where(.svelte-1rjqle5) { text-align: center; color: var(--clay); white-space: nowrap; letter-spacing: 0.02em; }

  /* ⑤ 権限系ルール */
  .pd-rules.svelte-1rjqle5 {
    border: 1px solid var(--sand); border-radius: var(--radius-sm); overflow: hidden;
  }
  .pr-row.svelte-1rjqle5 {
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--sand);
  }
  .pr-row.svelte-1rjqle5:last-child { border-bottom: none; }
  .pr-row.svelte-1rjqle5:nth-child(even) { background: var(--stone); }
  .pr-name.svelte-1rjqle5 { color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-medium); }
  .pr-meta.svelte-1rjqle5 {
    display: inline-flex; align-items: center; gap: var(--space-1);
    color: var(--ash); font-size: var(--text-xs);
  }
  .pr-meta.svelte-1rjqle5 svg { color: var(--ash); }
  .pr-enf.svelte-1rjqle5 { color: var(--smoke); font-size: var(--text-xs); margin-left: auto; }

  .pd-remarks.svelte-1rjqle5 {
    margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--clay);
    max-width: 72ch; white-space: pre-line;
    background: var(--stone); border: 1px solid var(--sand); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  }

  .mn.svelte-u65rbg { height: 100%; overflow-y: auto; color: var(--ink); position: relative; scroll-behavior: smooth; }
  .mn-inner.svelte-u65rbg { max-width: 1180px; margin: 0 auto; padding: var(--space-5) var(--space-7) var(--space-8); }

  .mn-empty.svelte-u65rbg {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    color: var(--smoke); text-align: center; padding: 60px 20px;
  }
  .mn-empty.svelte-u65rbg p:where(.svelte-u65rbg) { margin: 0; font-size: var(--text-base); }

  .mn-head.svelte-u65rbg { padding-bottom: var(--space-4); border-bottom: 1px solid var(--sand); margin-bottom: var(--space-5); }
  .mn-titlerow.svelte-u65rbg { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .mn-titlerow.svelte-u65rbg svg { color: var(--clay); flex-shrink: 0; }
  .mn-name.svelte-u65rbg { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--ink-strong); margin: 0; line-height: var(--leading-tight); }
  .mn-sub.svelte-u65rbg { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); align-items: baseline; }
  .mn-id.svelte-u65rbg { font-size: var(--text-sm); color: var(--accent); }
  .mn-gen.svelte-u65rbg { font-size: var(--text-xs); color: var(--ash); }

  .mn-sec.svelte-u65rbg { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
  .mn-sec.sub.svelte-u65rbg { margin-left: var(--space-4); margin-bottom: var(--space-5); }

  .mn-h2.svelte-u65rbg {
    display: flex; align-items: center; gap: var(--space-3);
    font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-strong);
    margin: 0; line-height: var(--leading-tight);
    padding-bottom: var(--space-2); border-bottom: 1px solid var(--sand);
  }
  .mn-h3.svelte-u65rbg {
    display: flex; align-items: center; gap: var(--space-3);
    font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--ink-strong);
    margin: 0; line-height: var(--leading-tight);
  }
  /* 差分ハイライト強調枠（--accent 系トークンのみ・データ由来発火） */
  .mn-h2.hl.svelte-u65rbg, .mn-h3.hl.svelte-u65rbg {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
  }

  .mn-p.svelte-u65rbg { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--clay); max-width: 88ch; white-space: pre-line; }
  .mn-label.svelte-u65rbg { margin: var(--space-1) 0 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-strong); }

  .mn-chips.svelte-u65rbg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
  .mn-chips-l.svelte-u65rbg { font-size: var(--text-xs); color: var(--ash); }
  .mn-chips-t.svelte-u65rbg { font-size: var(--text-sm); color: var(--clay); }

  .mn-ol.svelte-u65rbg { margin: 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: var(--space-1); }
  .mn-ol.svelte-u65rbg li:where(.svelte-u65rbg) { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--clay); }

  .mn-tblwrap.svelte-u65rbg { overflow-x: auto; }
  .mn-tbl.svelte-u65rbg {
    border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--text-sm);
    border: 1px solid var(--sand); border-radius: var(--radius-md); overflow: hidden; background: var(--paper);
  }
  .mn-tbl.svelte-u65rbg th:where(.svelte-u65rbg) {
    background: var(--inset); color: var(--ink); text-align: left;
    padding: var(--space-2) var(--space-4); font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--sand); white-space: nowrap;
  }
  .mn-tbl.svelte-u65rbg td:where(.svelte-u65rbg) {
    padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--sand);
    color: var(--clay); vertical-align: top; line-height: var(--leading-normal);
  }
  .mn-tbl.svelte-u65rbg tbody:where(.svelte-u65rbg) tr:where(.svelte-u65rbg):last-child td:where(.svelte-u65rbg) { border-bottom: none; }
  .mn-tbl.svelte-u65rbg tbody:where(.svelte-u65rbg) tr:where(.svelte-u65rbg):nth-child(even) td:where(.svelte-u65rbg) { background: var(--stone); }
  .mn-dash.svelte-u65rbg { color: var(--smoke); }

  .mn-rev.svelte-u65rbg .w-ver:where(.svelte-u65rbg) { width: 72px; }
  .mn-rev.svelte-u65rbg .w-date:where(.svelte-u65rbg) { width: 120px; }
  .mn-rev.svelte-u65rbg .w-target:where(.svelte-u65rbg) { width: 200px; }
  /* Delta（CR）由来の最新改訂行の強調（ゼブラより優先） */
  .mn-tbl.svelte-u65rbg tbody:where(.svelte-u65rbg) tr.hl-row:where(.svelte-u65rbg) td:where(.svelte-u65rbg) { background: var(--accent-soft); }

  .cmt-pop.svelte-1md7sk9 {
    position: absolute;
    z-index: 60;
    padding: 10px;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    animation: svelte-1md7sk9-cmt-pop-in 0.13s ease-out;
  }
  .cmt-row.svelte-1md7sk9 {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border: 1px solid var(--sand);
    border-radius: 9px;
    background: var(--stone);
  }
  .cmt-row.svelte-1md7sk9:focus-within { border-color: var(--accent); background: var(--paper); }
  .cmt-pop.svelte-1md7sk9 .cmt-ico { color: var(--ash); flex-shrink: 0; }
  .cmt-input.svelte-1md7sk9 {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 12.5px;
    outline: none;
  }
  .cmt-input.svelte-1md7sk9::placeholder { color: var(--smoke); }

  .cmt-foot.svelte-1md7sk9 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
  }
  .cmt-cancel.svelte-1md7sk9 {
    height: 26px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 11.5px;
    color: var(--clay);
    transition: background 0.12s, color 0.12s;
  }
  .cmt-cancel.svelte-1md7sk9:hover { background: var(--stone); color: var(--ink); }
  .cmt-confirm.svelte-1md7sk9 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 11px;
    border-radius: 7px;
    background: var(--ink-strong);
    color: var(--paper);
    font-size: 11.5px;
    font-weight: 500;
    transition: filter 0.12s, background 0.12s;
  }
  .cmt-confirm.svelte-1md7sk9:hover:not(:disabled) { filter: brightness(1.25); }
  .cmt-confirm.svelte-1md7sk9:disabled {
    background: var(--inset);
    color: var(--smoke);
    cursor: default;
  }
  .cmt-kbd.svelte-1md7sk9 {
    font-family: var(--font-mono);
    font-size: 10px;
    opacity: 0.85;
  }

  @keyframes svelte-1md7sk9-cmt-pop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
  }

  .fv.svelte-1y85kzg { display: flex; height: 100%; min-height: 0; }

  .empty.svelte-1y85kzg {
    margin: auto;
    color: var(--smoke);
    font-size: 12.5px;
    text-align: center;
    padding: 40px;
    user-select: none;
  }
  .empty.inner.svelte-1y85kzg { margin: auto; }

  .filelist.svelte-1y85kzg {
    width: 224px;
    flex-shrink: 0;
    border-right: 1px solid var(--sand);
    overflow-y: auto;
    padding: 8px 8px 12px;
    background: var(--stone);
  }
  .group.svelte-1y85kzg {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--ash);
    padding: 8px 8px 4px;
    letter-spacing: 0.02em;
    user-select: none;
  }
  .group.svelte-1y85kzg:first-child { padding-top: 2px; }

  /* ---- CR-04 タイプ別グループ見出し ----
     狭幅(360px)でも折返し・はみ出しを起こさないため flex + min-width:0 を用い、
     可変幅はグループ名(.gname)にだけ許し ellipsis で切り詰める。件数バッジ・
     集約タグ・スピナーは flex-shrink:0 で固定幅を保つ。色は既存トークンのみ。 */
  .ghead.svelte-1y85kzg {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--clay);
    padding: 7px 6px 5px;
    letter-spacing: 0.01em;
    user-select: none;
    border-radius: 6px;
  }
  .ghead.svelte-1y85kzg:hover { color: var(--ink); }
  .ghead.svelte-1y85kzg svg { flex-shrink: 0; color: var(--ash); }
  .ghead.svelte-1y85kzg:hover svg { color: var(--clay); }
  /* 選択が残る限り開いたままのグループ（畳む操作は無効化）— 手のマークを出さない */
  .ghead.pinned.svelte-1y85kzg { cursor: default; }
  .gname.svelte-1y85kzg {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gcount.svelte-1y85kzg {
    flex-shrink: 0;
    font-size: 9.5px;
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--ash);
    background: var(--inset);
    border-radius: 999px;
    padding: 0.5px 6px;
    line-height: 1.5;
  }
  .gagg.svelte-1y85kzg { flex-shrink: 0; }
  .gprog.svelte-1y85kzg {
    flex-shrink: 0;
    font-size: 9.5px;
    color: var(--clay);
    white-space: nowrap;
  }
  /* 生成中スピナー（.plan-spin と同系のCSS円弧・モノクロ） */
  .gspin.svelte-1y85kzg {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--sand);
    border-top-color: var(--clay);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }

  .row.svelte-1y85kzg {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    text-align: left;
    font-size: 11.5px;
    padding: 5px 8px;
    border-radius: 7px;
    color: var(--clay);
    border: 1px solid transparent;
    animation: rise-in 0.25s ease;
  }
  .row.svelte-1y85kzg:hover { background: var(--inset); color: var(--ink); }
  .row.active.svelte-1y85kzg {
    background: var(--paper);
    border-color: var(--sand);
    color: var(--ink-strong);
    font-weight: 500;
    box-shadow: var(--shadow-subtle);
  }
  .file.svelte-1y85kzg svg { flex-shrink: 0; color: var(--ash); }
  .file.active.svelte-1y85kzg svg { color: var(--clay); }
  .rname.svelte-1y85kzg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

  .tag.svelte-1y85kzg {
    flex-shrink: 0;
    font-size: 9px;
    font-family: var(--font-ui);
    font-weight: 600;
    border-radius: 999px;
    padding: 1px 6px;
    letter-spacing: 0.01em;
  }
  .tag.upd.svelte-1y85kzg { color: var(--green); background: var(--green-soft); }

  .pane.svelte-1y85kzg { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-x: auto; }
  .phead.svelte-1y85kzg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--sand);
    background: var(--paper);
    font-size: 10.5px;
    user-select: none;
    min-width: 360px;
  }
  .pname.svelte-1y85kzg { font-size: 12px; font-weight: 600; color: var(--ink); flex-shrink: 0; }
  .ppath.svelte-1y85kzg {
    color: var(--ash);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }
  .plang.svelte-1y85kzg, .plines.svelte-1y85kzg { color: var(--ash); flex-shrink: 0; }
  .plang.svelte-1y85kzg {
    border: 1px solid var(--sand);
    border-radius: 4px;
    padding: 0.5px 6px;
    text-transform: uppercase;
  }
  .gen.svelte-1y85kzg { color: var(--ember); flex-shrink: 0; animation: pulse-soft 1.2s infinite; }
  .hspace.svelte-1y85kzg { flex: 1; min-width: 0; }

  .viewtoggle.svelte-1y85kzg {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid var(--sand);
    border-radius: 999px;
    overflow: hidden;
  }
  .vt-btn.svelte-1y85kzg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--clay);
    padding: 3px 10px;
  }
  .vt-btn.svelte-1y85kzg:hover { color: var(--ink); background: var(--stone); }
  .vt-btn.on.svelte-1y85kzg { color: var(--ink-strong); background: var(--inset); font-weight: 600; }
  .vt-btn.svelte-1y85kzg svg { color: inherit; }
  .vt-btn.svelte-1y85kzg + .vt-btn:where(.svelte-1y85kzg) { border-left: 1px solid var(--sand); }

  .copybtn.svelte-1y85kzg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--clay);
    border: 1px solid var(--sand);
    border-radius: 999px;
    padding: 3px 10px;
  }
  .copybtn.svelte-1y85kzg:hover { color: var(--ink); border-color: var(--smoke); background: var(--stone); }
  .copybtn.svelte-1y85kzg svg { color: inherit; }

  /* #16 ファイル一覧折りたたみトグル（アイコンのみの小型ボタン・.copybtn 系トークン）。 */
  .treetoggle.svelte-1y85kzg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--clay);
    border: 1px solid var(--sand);
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
  }
  .treetoggle.svelte-1y85kzg:hover { color: var(--ink); border-color: var(--smoke); background: var(--stone); }
  .treetoggle.svelte-1y85kzg svg { color: inherit; }

  /* CR-03②: 直前の成果物へ戻る小型ボタン（.copybtn 系トークンに合わせる）。
     可変幅はファイル名(.backname)にだけ許し、ボタン全体を max-width 160px で
     切り詰める（ellipsis）。 */
  .backbtn.svelte-1y85kzg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    max-width: 160px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--clay);
    border: 1px solid var(--sand);
    border-radius: 999px;
    padding: 3px 10px;
  }
  .backbtn.svelte-1y85kzg:hover { color: var(--ink); border-color: var(--smoke); background: var(--stone); }
  .backbtn.svelte-1y85kzg svg { color: inherit; flex-shrink: 0; }
  .backname.svelte-1y85kzg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

  /* Below ~360px the rendered docs (tables, docType renderers) collapse into
     one-glyph-per-line stacks; docs/ renderers are off-limits, so instead pin
     a readable min-width on the document pane and let .pane scroll horizontally
     as a unit. Wide panes are unaffected (content already sits well under this). */
  .pbody.svelte-1y85kzg { flex: 1; overflow: auto; padding: 12px 0; background: var(--paper); position: relative; min-width: 360px; }

  /* rendered (docType) container — cross-fades in when a file flips
     source→rendered on streaming completion (§2.0-2). */
  .rendered.svelte-1y85kzg { padding: 0; }
  .rendered.fadein.svelte-1y85kzg, .md-body.fadein.svelte-1y85kzg { animation: svelte-1y85kzg-doc-fade 300ms ease-out; }
  @keyframes svelte-1y85kzg-doc-fade { from { opacity: 0; } to { opacity: 1; } }

  pre.svelte-1y85kzg { margin: 0; font-size: 11.5px; line-height: 1.65; }
  code.svelte-1y85kzg { display: block; }
  .ln.svelte-1y85kzg {
    display: inline-block;
    width: 44px;
    padding-right: 14px;
    text-align: right;
    color: var(--smoke);
    user-select: none;
  }
  .lc.svelte-1y85kzg { animation: line-in 0.15s ease; }
  .stream-caret.svelte-1y85kzg {
    display: inline-block;
    width: 7px;
    height: 13px;
    background: var(--ember);
    vertical-align: -2px;
    animation: caret-blink 0.9s infinite;
  }

  /* ============================================================
     P0-4 由来レール（コードタブ限定・.has-rail 配下）。
     ・レール本体 .rail = ガター(44px)内側・左端の縦バー（幅2px・§9）。
       充足=--ink / 部分=--smoke / infra=描画なし。行の地色は変えない。
     ・チップ .rail-chip = ブロック先頭行の小型バッジ（mono 9.5px・
       docs/Chip.svelte とは別部品：コードガター専用の統制外バッジ）。
     色は既存トークンのみ・絵文字なし。
     ============================================================ */
  .has-rail.svelte-1y85kzg .ln:where(.svelte-1y85kzg) {
    position: relative; /* レールバーの絶対配置基準（レール付きのときだけ） */
  }
  .has-rail.svelte-1y85kzg .ln.railhover:where(.svelte-1y85kzg) { cursor: pointer; }
  .rail.svelte-1y85kzg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 1px;
  }
  .rail-full.svelte-1y85kzg { background: var(--ink); }       /* 充足（実装/検証） */
  .rail-partial.svelte-1y85kzg { background: var(--smoke); }  /* 部分（entity 参照） */
  /* §11.1 末尾: infra 行（フレームワーク参照・構文行 等）の薄いマーカー。
     幅1px の --sand バーで「トレース対象外だが理由がある行」を控えめに示し、
     ホバーで note（traceMap 実データ）を title 表示する。行の地色は変えない。
     pointer-events を有効化して title ツールチップを出す（レール列内のみ）。 */
  .rail-infra.svelte-1y85kzg {
    width: 1px;
    background: var(--sand);
    pointer-events: auto;
    cursor: help;
  }
  /* suspect 連動: レールにドット重畳（§9）。--accent の実心ドットを上端に。 */
  .rail-suspect.svelte-1y85kzg::after {
    content: '';
    position: absolute;
    left: -1px;
    top: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
  }
  .rail-chip.svelte-1y85kzg {
    display: inline-block;
    vertical-align: baseline;
    font-family: var(--font-mono);
    /* #17-B 視認性を一段上げる: 9.5px→10.5px・パディング微増・cursor:pointer。 */
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--clay);
    background: var(--inset);
    border: 1px solid var(--sand);
    border-radius: 4px;
    padding: 0.5px 6px;
    margin-right: 8px;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
  }
  /* #17-B ホバーで accent-soft 背景・accent 枠（クリックで仕様書へ、を予告）。 */
  .rail-chip.svelte-1y85kzg:hover { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
  .rail-chip.chip-suspect.svelte-1y85kzg { color: var(--accent); border-color: var(--accent); }
  .chip-more.svelte-1y85kzg { color: var(--ash); margin-left: 3px; }

  /* Referenced SSOT ポップオーバー（ホバー表示・ピン留めなし）。 */
  .ssot-pop.svelte-1y85kzg {
    position: absolute;
    z-index: 20;
    width: 320px;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    padding: 10px 12px 11px;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 8px;
    box-shadow: var(--shadow-pop);
    /* #17-D: ポップ上のホバー保持・ボタン操作のため pointer-events を有効化。 */
    pointer-events: auto;
    user-select: none;
  }
  .ssot-suspect.svelte-1y85kzg {
    font-size: 10px;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 4px;
    padding: 3px 7px;
    margin: -2px -2px 8px;
  }
  .ssot-h.svelte-1y85kzg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 7px;
  }
  .ssot-kind.svelte-1y85kzg {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    color: var(--clay);
    background: var(--inset);
    border-radius: 999px;
    padding: 1px 8px;
  }
  .ssot-ids.svelte-1y85kzg { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
  .ssot-id-row.svelte-1y85kzg { display: flex; align-items: baseline; gap: 8px; }
  .ssot-id.svelte-1y85kzg { font-size: 11px; color: var(--ink); flex-shrink: 0; }
  .ssot-name.svelte-1y85kzg {
    font-size: 10.5px;
    color: var(--clay);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ssot-ex-h.svelte-1y85kzg, .ssot-aud-k.svelte-1y85kzg {
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--ash);
  }
  .ssot-ex-h.svelte-1y85kzg { margin: 0 0 3px; }
  .ssot-ex.svelte-1y85kzg {
    margin: 0 0 8px;
    padding: 6px 8px;
    background: var(--stone);
    border: 1px solid var(--sand);
    border-radius: 6px;
    font-size: 10.5px;
    line-height: 1.6;
    overflow-x: auto;
  }
  .ssot-ex-line.svelte-1y85kzg { display: inline-block; }
  .ssot-ex-line.key.svelte-1y85kzg { background: var(--accent-soft); border-radius: 2px; }
  .ssot-ex-n.svelte-1y85kzg {
    display: inline-block;
    width: 30px;
    padding-right: 10px;
    text-align: right;
    color: var(--smoke);
  }
  .ssot-audit.svelte-1y85kzg {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 10px;
    padding-top: 8px;
    border-top: 1px solid var(--sand);
    font-size: 10px;
  }
  .ssot-aud-row.svelte-1y85kzg { display: contents; }
  .ssot-aud-v.svelte-1y85kzg { color: var(--clay); word-break: break-all; }
  .ssot-aud-row.disabled.svelte-1y85kzg .ssot-aud-k:where(.svelte-1y85kzg),
  .ssot-aud-row.disabled.svelte-1y85kzg .ssot-aud-v:where(.svelte-1y85kzg) { color: var(--smoke); font-style: italic; }

  /* #17-D ポップ内2アクション（13px・トークン色）。主動線は accent 強調。 */
  .ssot-actions.svelte-1y85kzg {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--sand);
  }
  .ssot-act.svelte-1y85kzg {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--clay);
    background: var(--stone);
    border: 1px solid var(--sand);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
  }
  .ssot-act.svelte-1y85kzg:hover { color: var(--ink); border-color: var(--smoke); background: var(--inset); }
  .ssot-act.primary.svelte-1y85kzg {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent);
    font-weight: 600;
  }
  .ssot-act.primary.svelte-1y85kzg:hover { background: var(--accent-soft); border-color: var(--accent); }

  /* ---- rendered markdown (.md-body) ---- */
  .md-body.svelte-1y85kzg {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 30px 40px;
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.8;
  }
  .md-body.svelte-1y85kzg .md-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 16px;
    background: var(--stone);
    border: 1px solid var(--sand);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 4px 0 24px;
    font-size: 11.5px;
  }
  .md-body.svelte-1y85kzg .md-meta-row { display: contents; }
  .md-body.svelte-1y85kzg .md-meta-k {
    font-family: var(--font-mono);
    color: var(--ash);
    padding: 2px 0;
  }
  .md-body.svelte-1y85kzg .md-meta-v {
    color: var(--clay);
    font-family: var(--font-mono);
    padding: 2px 0;
    word-break: break-word;
  }
  .md-body.svelte-1y85kzg .md-h {
    color: var(--ink-strong);
    font-weight: 700;
    line-height: 1.35;
    margin: 26px 0 12px;
  }
  .md-body.svelte-1y85kzg .md-h1 {
    font-size: 21px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sand);
    margin-top: 6px;
  }
  .md-body.svelte-1y85kzg .md-h2 { font-size: 16.5px; margin-top: 28px; }
  .md-body.svelte-1y85kzg .md-h3 { font-size: 14px; color: var(--ink); }
  .md-body.svelte-1y85kzg p { margin: 0 0 12px; }
  .md-body.svelte-1y85kzg .md-ul { margin: 0 0 14px; padding-left: 22px; }
  .md-body.svelte-1y85kzg .md-ul li { margin: 3px 0; padding-left: 2px; }
  .md-body.svelte-1y85kzg .md-ul li::marker { color: var(--smoke); }
  .md-body.svelte-1y85kzg .md-quote {
    margin: 0 0 14px;
    padding: 8px 16px;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    color: var(--clay);
    font-style: italic;
    border-radius: 0 6px 6px 0;
  }
  .md-body.svelte-1y85kzg .md-hr { border: none; border-top: 1px solid var(--sand); margin: 22px 0; }
  .md-body.svelte-1y85kzg .md-tablewrap { overflow-x: auto; margin: 0 0 18px; }
  .md-body.svelte-1y85kzg .md-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12.5px;
    border: 1px solid var(--sand);
    border-radius: 6px;
  }
  .md-body.svelte-1y85kzg .md-table th {
    background: var(--inset);
    color: var(--ink);
    font-weight: 600;
    text-align: left;
    padding: 7px 12px;
    border-bottom: 1px solid var(--sand);
    border-right: 1px solid var(--sand);
    white-space: nowrap;
  }
  .md-body.svelte-1y85kzg .md-table td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--sand);
    border-right: 1px solid var(--sand);
    color: var(--clay);
  }
  .md-body.svelte-1y85kzg .md-table th:last-child,
  .md-body.svelte-1y85kzg .md-table td:last-child { border-right: none; }
  .md-body.svelte-1y85kzg .md-table tbody tr:last-child td { border-bottom: none; }
  .md-body.svelte-1y85kzg .md-table tbody tr:nth-child(even) { background: var(--stone); }
  .md-body.svelte-1y85kzg code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--inset);
    color: var(--ink);
    padding: 1px 5px;
    border-radius: 4px;
  }
  .md-body.svelte-1y85kzg strong { color: var(--ink-strong); font-weight: 700; }

  /* ---- inline-comment highlight (persistent marker) ----
     applies on both surfaces: standard md (.md-body) and docType
     renderers (.rendered), so the same selection→comment highlight
     reads identically across every Rendered成果物. */
  .md-body.svelte-1y85kzg mark.cmt-hl,
  .rendered.svelte-1y85kzg mark.cmt-hl {
    background: var(--cmt-hl);
    color: inherit;
    border-radius: 2px;
    padding: 0.5px 1px;
    /* underline the marked run so it reads as annotated even for
       colour-blind viewers / low-contrast surfaces */
    box-shadow: inset 0 -1.5px 0 0 var(--cmt-hl-strong);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* ---- CR-03②: クロスリファレンス着地ハイライト（.ref-flash） ----
     ジャンプ先アンカー要素へ付与し、accent-soft の背景が約2秒でフェード
     して消える控えめな一過性表現。docType レンダラ／標準md の双方で効くよう
     :global で1箇所定義（新色禁止・既存トークンのみ）。 */
  .ref-flash {
    animation: svelte-1y85kzg-ref-flash-fade 2s ease-out forwards;
    border-radius: 4px;
  }
  @keyframes svelte-1y85kzg-ref-flash-fade {
    from { background: var(--accent-soft); }
    to { background: transparent; }
  }

  /* ---- #17-B 仕様書→コード行ジャンプ着地ハイライト（.code-jump-flash） ----
     ジャンプ先のコード行（.lc）へ付与し、accent-soft の背景が約1.6秒で
     フェードして消える一過性表現。行の地色・highlightLine 出力は変えず、
     背景のみを重ねる（新色禁止・既存トークンのみ）。runtime で classList
     付与するため :global で定義する（.ref-flash と同流儀）。
     ダークテーマは --accent-soft の alpha(0.16) が地に沈んで視認しづらいため、
     開始背景だけ color-mix で --accent の合成濃度を上げる（既存トークンのみ・
     生hex禁止・.cmt-hl/.cmt-hl-strong と同じ「soft/strong」ペア方式）。 */
  .lc.code-jump-flash {
    animation: svelte-1y85kzg-code-jump-flash-fade 1.6s ease-out forwards;
    border-radius: 3px;
  }
  @keyframes svelte-1y85kzg-code-jump-flash-fade {
    from { background: var(--accent-soft); }
    to { background: transparent; }
  }
  [data-theme='dark'] .lc.code-jump-flash {
    animation-name: svelte-1y85kzg-code-jump-flash-fade-dark;
  }
  @keyframes svelte-1y85kzg-code-jump-flash-fade-dark {
    from { background: color-mix(in srgb, var(--accent) 38%, transparent); }
    to { background: transparent; }
  }

  .cp.svelte-s505nm {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-width: 1040px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 6px;
    overflow: hidden;
  }

  .cp-bar.svelte-s505nm {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--sand);
    background: var(--inset);
    flex-shrink: 0;
  }
  .cp-lang.svelte-s505nm {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ash);
    text-transform: uppercase;
  }

  .cp-scroll.svelte-s505nm {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  .cp-code.svelte-s505nm {
    border-collapse: collapse;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
  }

  .cp-gutter.svelte-s505nm {
    width: var(--gutter);
    padding: 0 12px 0 14px;
    text-align: right;
    color: var(--smoke);
    background: var(--paper);
    border-right: 1px solid var(--sand);
    user-select: none;
    white-space: nowrap;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
  }
  .cp-line.svelte-s505nm {
    padding: 0 16px 0 12px;
    color: var(--ink);
    white-space: pre;
    tab-size: 4;
  }

  /* 中略マーカ: ガター空・破線区切り・淡色（省略の事実だけを示す）。 */
  .cp-elision.svelte-s505nm .cp-gutter:where(.svelte-s505nm) {
    border-right-color: transparent;
    background: var(--stone);
  }
  .cp-omit.svelte-s505nm {
    padding: 3px 16px;
    color: var(--ash);
    background: var(--stone);
    border-top: 1px dashed var(--sand);
    border-bottom: 1px dashed var(--sand);
    font-size: 11px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .cp-note.svelte-s505nm {
    flex-shrink: 0;
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid var(--sand);
    background: var(--inset);
    font-size: 11px;
    line-height: 1.6;
    color: var(--ash);
  }

  /* below 360px the pane scrolls horizontally as one unit (head + body),
     mirroring FileViewer's .pane — headings must never stack vertically */
  .mv.svelte-fk5p2n { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--paper); overflow-x: auto; }

  .mv-head.svelte-fk5p2n {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--sand);
    background: var(--paper);
    font-size: 10.5px;
    user-select: none;
    flex-shrink: 0;
    min-width: 360px;
  }
  .mv-head.svelte-fk5p2n .ic.doc { color: var(--blue); }
  .mv-head.svelte-fk5p2n .ic.sheet { color: var(--green); }
  .mv-head.svelte-fk5p2n .ic.pdf { color: var(--red); }
  .mv-head.svelte-fk5p2n .ic.code { color: var(--accent); }
  .mv-head.svelte-fk5p2n .ic.other { color: var(--ash); }
  .mv-name.svelte-fk5p2n { font-size: 12px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mv-meta.svelte-fk5p2n { display: inline-flex; align-items: center; gap: 4px; color: var(--ash); flex-shrink: 0; }
  .mv-meta.svelte-fk5p2n svg { color: var(--smoke); }
  .mv-up.svelte-fk5p2n {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 600;
    color: var(--blue);
    background: var(--blue-soft);
    border-radius: 999px;
    padding: 1px 7px;
  }

  .mv-body.svelte-fk5p2n { flex: 1; overflow: auto; padding: 22px; background: var(--stone); min-width: 360px; }

  /* ---- paper (doc + form) — always white, fixed ink ---- */
  .paper.svelte-fk5p2n {
    background: #ffffff;
    color: #1a1a1a;
    max-width: 720px;
    margin: 0 auto;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.12) 0 8px 30px -14px;
  }
  .doc.svelte-fk5p2n { padding: 40px 46px; }
  .doc-title.svelte-fk5p2n { font-size: 19px; font-weight: 700; margin: 0 0 10px; color: #111; letter-spacing: 0.01em; }
  .doc-metaline.svelte-fk5p2n { font-size: 11px; color: #6b6b6b; margin: 0 0 4px; line-height: 1.6; }
  .doc-rule.svelte-fk5p2n { border: none; border-top: 1px solid #e2e2e2; margin: 14px 0 18px; }
  .doc-para.svelte-fk5p2n { font-size: 13px; line-height: 1.85; margin: 0 0 12px; color: #262626; }
  .doc-quote.svelte-fk5p2n {
    font-size: 13px;
    line-height: 1.85;
    margin: 0 0 14px;
    padding: 10px 16px;
    border-left: 3px solid #b9c9e6;
    background: #f5f8fd;
    color: #33415c;
    font-style: italic;
  }

  /* ---- sheet — spreadsheet look, theme-aware ---- */
  .sheet-wrap.svelte-fk5p2n { max-width: 1040px; margin: 0 auto; overflow-x: auto; }
  .sheet.svelte-fk5p2n {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 6px;
    overflow: hidden;
  }
  .sheet.svelte-fk5p2n th:where(.svelte-fk5p2n) {
    background: var(--inset);
    color: var(--ink);
    font-weight: 600;
    text-align: left;
    padding: 7px 11px;
    border-bottom: 1px solid var(--sand);
    border-right: 1px solid var(--sand);
    white-space: nowrap;
  }
  .sheet.svelte-fk5p2n td:where(.svelte-fk5p2n) {
    padding: 6px 11px;
    border-bottom: 1px solid var(--sand);
    border-right: 1px solid var(--sand);
    color: var(--clay);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .sheet.svelte-fk5p2n th:where(.svelte-fk5p2n):last-child, .sheet.svelte-fk5p2n td:where(.svelte-fk5p2n):last-child { border-right: none; }
  .sheet.svelte-fk5p2n tbody:where(.svelte-fk5p2n) tr:where(.svelte-fk5p2n):nth-child(even) { background: var(--stone); }
  .sheet.svelte-fk5p2n tbody:where(.svelte-fk5p2n) tr:where(.svelte-fk5p2n):hover { background: var(--accent-soft); }
  .sheet-note.svelte-fk5p2n { font-size: 11px; color: var(--ash); margin: 12px 2px 0; line-height: 1.6; }

  /* ---- form (帳票) — white paper ---- */
  .form.svelte-fk5p2n { padding: 34px 40px 30px; }
  .form-top.svelte-fk5p2n { display: flex; justify-content: flex-end; }
  .form-docno.svelte-fk5p2n { font-size: 11px; color: #555; font-family: var(--font-mono); }
  .form-title.svelte-fk5p2n { text-align: center; font-size: 21px; font-weight: 700; letter-spacing: 0.28em; margin: 4px 0 22px; color: #111; }
  .form-fields.svelte-fk5p2n { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
  .form-fields.svelte-fk5p2n th:where(.svelte-fk5p2n), .form-fields.svelte-fk5p2n td:where(.svelte-fk5p2n) { border: 1px solid #d8d8d8; padding: 8px 12px; font-size: 12.5px; text-align: left; }
  .form-fields.svelte-fk5p2n th:where(.svelte-fk5p2n) { background: #f3f4f6; color: #333; font-weight: 600; width: 26%; white-space: nowrap; }
  .form-fields.svelte-fk5p2n td:where(.svelte-fk5p2n) { color: #262626; }
  .form-table.svelte-fk5p2n { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
  .form-table.svelte-fk5p2n th:where(.svelte-fk5p2n), .form-table.svelte-fk5p2n td:where(.svelte-fk5p2n) { border: 1px solid #d8d8d8; padding: 7px 11px; font-size: 12px; text-align: left; }
  .form-table.svelte-fk5p2n th:where(.svelte-fk5p2n) { background: #f3f4f6; color: #333; font-weight: 600; white-space: nowrap; }
  .form-table.svelte-fk5p2n td:where(.svelte-fk5p2n) { color: #262626; font-variant-numeric: tabular-nums; }
  .form-foot.svelte-fk5p2n { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 4px; }
  .form-note.svelte-fk5p2n { font-size: 10.5px; color: #6b6b6b; line-height: 1.6; margin: 0; flex: 1; }
  .form-seal.svelte-fk5p2n {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    border: 2px solid #c98a8a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b56a6a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    transform: rotate(-6deg);
  }

  /* ---- none — metadata card, theme-aware ---- */
  .none-card.svelte-fk5p2n {
    max-width: 460px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 10px;
    padding: 22px 24px;
    box-shadow: var(--shadow-subtle);
  }
  .none-row.svelte-fk5p2n { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--sand); font-size: 12.5px; }
  .none-row.svelte-fk5p2n:last-of-type { border-bottom: none; }
  .none-k.svelte-fk5p2n { width: 92px; flex-shrink: 0; color: var(--ash); }
  .none-v.svelte-fk5p2n { color: var(--ink); font-weight: 500; word-break: break-all; }
  .none-note.svelte-fk5p2n { font-size: 11.5px; color: var(--clay); line-height: 1.7; margin: 14px 0 0; }

  /* ============ 完了後ブラウザ（従来）============ */
  .mp.svelte-101vm70 { display: flex; height: 100%; min-height: 0; }
  .mp.svelte-101vm70 .mv { flex: 1; min-width: 0; }

  .filelist.svelte-101vm70 {
    width: 224px;
    flex-shrink: 0;
    border-right: 1px solid var(--sand);
    overflow-y: auto;
    padding: 8px 8px 12px;
    background: var(--stone);
  }
  .group.svelte-101vm70 {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--ash);
    padding: 8px 8px 4px;
    letter-spacing: 0.02em;
    user-select: none;
  }
  .group.svelte-101vm70:first-child { padding-top: 2px; }
  .row.svelte-101vm70 {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    text-align: left;
    font-size: 11.5px;
    padding: 5px 8px;
    border-radius: 7px;
    color: var(--clay);
    border: 1px solid transparent;
    animation: rise-in 0.25s ease;
  }
  .row.svelte-101vm70:hover { background: var(--inset); color: var(--ink); }
  .row.active.svelte-101vm70 {
    background: var(--paper);
    border-color: var(--sand);
    color: var(--ink-strong);
    font-weight: 500;
    box-shadow: var(--shadow-subtle);
  }
  .mat-file.svelte-101vm70 { font-family: var(--font-ui); }
  .mat-file.svelte-101vm70 svg { flex-shrink: 0; }
  .mat-file.svelte-101vm70 .mic.doc { color: var(--blue); }
  .mat-file.svelte-101vm70 .mic.sheet { color: var(--green); }
	  .mat-file.svelte-101vm70 .mic.pdf { color: var(--red); }
	  .mat-file.svelte-101vm70 .mic.code { color: var(--amber); }
	  .mat-file.svelte-101vm70 .mic.other { color: var(--ash); }
	  .folder-row.svelte-101vm70 {
	    color: var(--ink);
	    font-weight: 600;
	    background: transparent;
	  }
	  .folder-row.svelte-101vm70:hover { background: var(--inset); }
	  .folder-row.svelte-101vm70 svg { flex-shrink: 0; color: var(--ash); }
	  .folder-row.svelte-101vm70 .mic.folder { color: var(--clay); }
	  .tree-file.svelte-101vm70 { gap: 6px; }
	  .rname.svelte-101vm70 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
	  .folder-count.svelte-101vm70 {
	    flex-shrink: 0;
	    min-width: 22px;
	    height: 18px;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    padding: 0 6px;
	    border-radius: 999px;
	    background: var(--inset);
	    color: var(--clay);
	    font-size: 10px;
	    font-family: var(--font-mono);
	    font-weight: 600;
	  }

  .tag.svelte-101vm70 {
    flex-shrink: 0;
    font-size: 9px;
    font-family: var(--font-ui);
    font-weight: 600;
    border-radius: 999px;
    padding: 1px 6px;
    letter-spacing: 0.01em;
  }
  .tag.up.svelte-101vm70 { color: var(--clay); background: var(--inset); }

  /* ============ ステップ0（取り込み）============ */
  .step0.svelte-101vm70 { height: 100%; min-height: 0; display: flex; flex-direction: column; background: var(--stone); }
  .dir-input.svelte-101vm70 {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* 縦スクロールする1カラム。中身は読める測度に中央寄せ */
  .s0-scroll.svelte-101vm70 {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 28px 22px 32px;
  }
  .s0-scroll.svelte-101vm70 > :where(.svelte-101vm70) { max-width: 640px; margin-inline: auto; }

  .s0-head.svelte-101vm70 { margin-bottom: 18px; }
  .s0-title.svelte-101vm70 { font-size: 16px; font-weight: 700; color: var(--ink-strong); margin: 0 0 6px; letter-spacing: -0.01em; }
  .s0-sub.svelte-101vm70 { font-size: 12.5px; line-height: 1.7; color: var(--clay); margin: 0; }

  /* ---- 接続先カード ---- */
  .src-cards.svelte-101vm70 { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .src-card.svelte-101vm70 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--sand);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: var(--shadow-subtle);
    min-width: 0;
  }
  .src-card.primary.svelte-101vm70 { border-color: var(--smoke); }
  .src-card.display-only.svelte-101vm70 { opacity: 0.82; }
  .src-ic.svelte-101vm70 {
    width: 38px; height: 38px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--inset);
    color: var(--clay);
  }
  .src-card.primary.svelte-101vm70 .src-ic:where(.svelte-101vm70) { background: var(--accent-soft); color: var(--accent); }
  .src-main.svelte-101vm70 { flex: 1; min-width: 0; }
  .src-name.svelte-101vm70 {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px;
  }
  .src-desc.svelte-101vm70 { font-size: 11.5px; color: var(--ash); line-height: 1.5; }
  .badge-sync.svelte-101vm70 {
    font-size: 9.5px; font-weight: 600;
    color: var(--green); background: var(--green-soft);
    border-radius: 999px; padding: 1px 7px;
  }
  .badge-ro.svelte-101vm70 {
    font-size: 9.5px; font-weight: 600;
    color: var(--ash); background: var(--inset);
    border-radius: 999px; padding: 1px 7px;
  }
  .src-btn.svelte-101vm70 {
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    height: 32px; padding: 0 14px;
    border-radius: 9px;
    background: var(--ink-strong); color: var(--paper);
    font-size: 12px; font-weight: 500;
    transition: filter 0.15s;
  }
  .src-btn.svelte-101vm70:hover { filter: brightness(1.25); }

  /* ---- ドロップゾーン ---- */
  .dropzone.svelte-101vm70 {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 26px 18px;
    border: 1.5px dashed var(--sand);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ash);
    transition: border-color 0.15s, background 0.15s;
  }
  .dropzone.over.svelte-101vm70 {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }
  .dz-text.svelte-101vm70 { font-size: 12px; color: var(--clay); }
  .dz-alt.svelte-101vm70 {
    font-size: 11.5px; color: var(--accent);
    text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: var(--smoke);
  }
  .dz-alt.svelte-101vm70:hover { text-decoration-color: var(--accent); }

  /* ---- 実列挙 ---- */
  .list-head.svelte-101vm70 {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .lh-left.svelte-101vm70 { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .lh-left.svelte-101vm70 svg { color: var(--ash); flex-shrink: 0; }
  .lh-title.svelte-101vm70 { font-size: 13px; font-weight: 600; color: var(--ink); }
  .lh-count.svelte-101vm70 { font-size: 11.5px; color: var(--clay); white-space: nowrap; }
  .lh-count.svelte-101vm70 b:where(.svelte-101vm70) { color: var(--ink-strong); font-weight: 700; }

	  .filerows.svelte-101vm70 {
	    border: 1px solid var(--sand);
	    border-radius: 10px;
	    background: var(--paper);
	    max-height: min(52vh, 560px);
	    overflow-y: auto;
	    overflow-x: hidden;
	    box-shadow: var(--shadow-subtle);
	  }
  .filerow.svelte-101vm70 {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 13px;
    font-size: 12px;
    min-width: 0;
    animation: rise-in 0.22s ease;
  }
  .filerow.svelte-101vm70 + .filerow:where(.svelte-101vm70) { border-top: 1px solid var(--sand); }
  .filerow.svelte-101vm70 .fr-ic { color: var(--clay); flex-shrink: 0; }
	  .filerow.excluded.svelte-101vm70 { opacity: 0.5; }
	  .filerow.excluded.svelte-101vm70 .fr-ic { color: var(--smoke); }
	  .ingest-folder.svelte-101vm70 {
	    width: 100%;
	    border: 0;
	    color: var(--ink);
	    font-weight: 600;
	    background: var(--stone);
	  }
	  .ingest-folder.svelte-101vm70 + .filerow:where(.svelte-101vm70),
	  .filerow.svelte-101vm70 + .ingest-folder:where(.svelte-101vm70) {
	    border-top: 1px solid var(--sand);
	  }
	  .ingest-folder.svelte-101vm70:hover { background: var(--inset); }
	  .ingest-folder.svelte-101vm70 svg { color: var(--ash); flex-shrink: 0; }
	  .fr-name.svelte-101vm70 {
	    flex: 1; min-width: 0; color: var(--ink);
	    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .filerow.excluded.svelte-101vm70 .fr-name:where(.svelte-101vm70) { color: var(--ash); text-decoration: line-through; text-decoration-color: var(--smoke); }
  .fr-size.svelte-101vm70 { font-size: 10.5px; color: var(--ash); font-variant-numeric: tabular-nums; flex-shrink: 0; white-space: nowrap; }
  .fr-tag.svelte-101vm70 {
    flex-shrink: 0;
    font-size: 9.5px; font-weight: 600;
    border-radius: 999px; padding: 1.5px 8px;
    white-space: nowrap;
  }
  .fr-tag.ok.svelte-101vm70 { color: var(--accent); background: var(--accent-soft); }
  .fr-tag.skip.svelte-101vm70 { color: var(--ash); background: var(--inset); font-weight: 500; }

  .list-foot.svelte-101vm70 { margin-top: 16px; display: flex; justify-content: flex-end; }
  .ingest-btn.svelte-101vm70 {
    height: 34px; padding: 0 18px;
    border-radius: 9px;
    background: var(--ink-strong); color: var(--paper);
    font-size: 12.5px; font-weight: 500;
    transition: filter 0.15s;
  }
  .ingest-btn.svelte-101vm70:hover { filter: brightness(1.25); }

  /* ---- スキャン演出 ---- */
  .scan-stages.svelte-101vm70 {
    border: 1px solid var(--sand);
    border-radius: 10px;
    background: var(--paper);
    padding: 6px 6px;
    box-shadow: var(--shadow-subtle);
    margin-bottom: 16px;
  }
  .stage.svelte-101vm70 {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    min-width: 0;
  }
  .st-mark.svelte-101vm70 {
    width: 18px; height: 18px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--stone);
    color: var(--clay);
    border: 1.5px solid var(--sand);
  }
  .stage.done.svelte-101vm70 .st-mark:where(.svelte-101vm70) { border-color: transparent; background: var(--inset); }
  .stage.run.svelte-101vm70 .st-mark:where(.svelte-101vm70) { border-color: transparent; background: transparent; }
  .st-spin.svelte-101vm70 {
    width: 13px; height: 13px;
    border: 1.5px solid var(--sand);
    border-top-color: var(--clay);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  .st-label.svelte-101vm70 { color: var(--clay); flex-shrink: 0; }
  .stage.run.svelte-101vm70 .st-label:where(.svelte-101vm70) { color: var(--ink-strong); font-weight: 500; }
  .stage.done.svelte-101vm70 .st-label:where(.svelte-101vm70) { color: var(--ink); }
  .st-detail.svelte-101vm70 {
    flex: 1; min-width: 0; text-align: right;
    font-size: 11px; color: var(--ash);
    display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .st-detail-spin.svelte-101vm70 {
    width: 10px; height: 10px; flex-shrink: 0;
    border: 1.5px solid var(--sand);
    border-top-color: var(--clay);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }

  /* 議事録プレビュー（白い紙） */
  .scan-doc.svelte-101vm70 {
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.12) 0 8px 30px -14px;
    padding: 26px 30px;
    margin-bottom: 14px;
  }
  .sd-para.svelte-101vm70 { font-size: 12.5px; line-height: 1.85; margin: 0 0 11px; color: #262626; animation: line-in 0.3s ease; }
  .sd-quote.svelte-101vm70 {
    display: flex; gap: 7px;
    font-size: 12.5px; line-height: 1.8; margin: 0 0 13px;
    padding: 9px 14px;
    border-left: 3px solid #b9c9e6;
    background: #f5f8fd;
    color: #33415c;
    font-style: italic;
    border-radius: 0 6px 6px 0;
    animation: line-in 0.3s ease;
  }
  .sd-quote.svelte-101vm70 svg { flex-shrink: 0; margin-top: 3px; color: #8fa6cc; }

  .scan-foot.svelte-101vm70 {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 500;
    color: var(--ink);
    padding: 8px 14px;
    border: 1px solid var(--sand);
    border-radius: 9px;
    background: var(--paper);
    box-shadow: var(--shadow-subtle);
    animation: rise-in 0.3s ease;
  }
	  .scan-foot.svelte-101vm70 svg { color: var(--green); }

	  @media (max-width: 520px) {
	    .filelist.svelte-101vm70 { width: 190px; }
	    .row.svelte-101vm70 { font-size: 11px; padding-right: 6px; }
	    .folder-count.svelte-101vm70 { min-width: 20px; padding: 0 5px; }
	  }
	
  .deploy.svelte-1rorc2m { height: 100%; overflow-y: auto; padding: 18px; }
  .empty.svelte-1rorc2m {
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--smoke);
    font-size: 12.5px;
    text-align: center;
    user-select: none;
  }
  .empty.svelte-1rorc2m .mono:where(.svelte-1rorc2m) { color: var(--clay); background: var(--stone); padding: 2px 7px; border-radius: 4px; }

  .log.svelte-1rorc2m {
    max-width: 720px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 12px;
    box-shadow: var(--shadow-subtle);
    overflow: hidden;
  }
  .lhead.svelte-1rorc2m {
    padding: 10px 16px;
    font-size: 11px;
    color: var(--clay);
    background: var(--stone);
    border-bottom: 1px solid var(--sand);
  }
  .step.svelte-1rorc2m {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 16px;
    font-size: 12.5px;
    color: var(--clay);
    border-bottom: 1px solid var(--stone);
    animation: rise-in 0.25s ease;
  }
  .step.done.svelte-1rorc2m { color: var(--ink); }
  .idx.svelte-1rorc2m { font-size: 10px; color: var(--smoke); line-height: 1.5; flex-shrink: 0; }
  .spin.svelte-1rorc2m {
    width: 11px; height: 11px;
    margin-top: 4px;
    border: 1.5px solid var(--sand);
    border-top-color: var(--ember);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
  }
  .check.svelte-1rorc2m {
    width: 15px; height: 15px;
    margin-top: 2px;
    display: grid; place-items: center;
    background: var(--green-soft);
    color: var(--green);
    border-radius: 50%;
    flex-shrink: 0;
  }
  /* label + result share a wrapping row. Wide: label grows, result pinned
     right on the same line. Narrow: the result wraps to a second line under
     the (full-width) label — never a thin one-glyph-per-line stack. */
  .stext.svelte-1rorc2m {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    line-height: 1.5;
  }
  .slabel.svelte-1rorc2m { flex: 1 1 auto; min-width: 0; word-break: normal; overflow-wrap: anywhere; }
  .sresult.svelte-1rorc2m { flex: 0 0 auto; font-size: 10.5px; color: var(--ash); }

  .deploy-live.svelte-1rorc2m {
    display: flex;
    gap: 18px;
    padding: 18px;
    background: var(--green-soft);
    animation: rise-in 0.4s ease;
  }
  .live-main.svelte-1rorc2m { flex: 1; min-width: 0; }
  .live-head.svelte-1rorc2m { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .live-badge.svelte-1rorc2m {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--green);
    border-radius: 999px;
    padding: 2.5px 9px;
    letter-spacing: 0.05em;
  }
  .live-title.svelte-1rorc2m { font-size: 13.5px; font-weight: 600; color: var(--ink-strong); }
  .url.svelte-1rorc2m {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--green);
    font-weight: 600;
    text-decoration: none;
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
    border-radius: 8px;
    padding: 9px 13px;
    margin-bottom: 9px;
    word-break: break-all;
  }
  .url.svelte-1rorc2m:hover { border-color: var(--green); }
  .live-meta.svelte-1rorc2m { font-size: 10px; color: var(--clay); margin-bottom: 10px; }
  .copy.svelte-1rorc2m {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--clay);
    border: 1px solid var(--sand);
    background: var(--paper);
    border-radius: 999px;
    padding: 4.5px 12px;
  }
  .copy.svelte-1rorc2m:hover { color: var(--ink); border-color: var(--smoke); }

  .qr.svelte-1rorc2m {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  /* QR is intentionally pinned to a white card + black cells on both
     themes — a scannable code needs a light quiet-zone, and --paper
     would hide the cells in dark mode. */
  .qr.svelte-1rorc2m svg:where(.svelte-1rorc2m) {
    width: 96px; height: 96px;
    background: #ffffff;
    border: 1px solid var(--sand);
    border-radius: 8px;
    padding: 8px;
  }
  .qr.svelte-1rorc2m span:where(.svelte-1rorc2m) { font-size: 9.5px; color: var(--clay); }

  .shellwrap.svelte-imagm6 { height: 100%; padding: 14px; background: var(--paper); }
  .browser.svelte-imagm6 {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-subtle);
  }
  .chrome.svelte-imagm6 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--stone);
    border-bottom: 1px solid var(--sand);
    flex-shrink: 0;
  }
  .cdots.svelte-imagm6 { display: flex; gap: 5px; }
  .cdots.svelte-imagm6 span:where(.svelte-imagm6) { width: 9px; height: 9px; border-radius: 50%; background: var(--smoke); }
  .urlbar.svelte-imagm6 {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    color: var(--clay);
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 999px;
    padding: 4px 12px;
  }
  .urlbar.svelte-imagm6 svg { color: var(--green); }
  .prod.svelte-imagm6 {
    margin-left: auto;
    font-size: 8.5px;
    font-weight: 700;
    color: #fff;
    background: var(--green);
    border-radius: 3px;
    padding: 1px 5px;
    letter-spacing: 0.06em;
  }
  .chrome.svelte-imagm6 .reload { color: var(--ash); }

  .viewport.svelte-imagm6 { flex: 1; min-height: 0; position: relative; background: var(--stone); }

  /* The generated app is a real web app: when the mock browser window is
     narrower than the app's comfortable layout width, scroll horizontally
     inside the window (as a real browser would) instead of letting the app
     crush its heading/KPI grid. At normal/wide widths the frame fills 100%,
     so the look is unchanged. */
  .appscroll.svelte-imagm6 { height: 100%; overflow-x: auto; overflow-y: hidden; }
  .appframe.svelte-imagm6 { height: 100%; min-width: 720px; }

  .idle.svelte-imagm6 {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--smoke);
    font-size: 13px;
    gap: 6px;
    user-select: none;
  }
  .idle.svelte-imagm6 .sub:where(.svelte-imagm6) { font-size: 11.5px; }
  .idle.svelte-imagm6 .mono:where(.svelte-imagm6) { background: var(--stone); border-radius: 4px; padding: 1px 6px; color: var(--clay); }
  .idle.svelte-imagm6 p:where(.svelte-imagm6) { margin: 0; }

  .boot.svelte-imagm6 {
    height: 100%;
    background: #1a1a17;
    color: #d8d6ce;
    font-size: 11.5px;
    padding: 18px 20px;
    line-height: 2;
  }
  .bline.svelte-imagm6 { opacity: 0; animation: rise-in 0.3s ease forwards; }
  .bline.d1.svelte-imagm6 { animation-delay: 0.35s; color: #4ade80; }
  .bline.d2.svelte-imagm6 { animation-delay: 0.65s; }
  .bline.d3.svelte-imagm6 { animation-delay: 0.95s; display: flex; align-items: center; gap: 8px; }
  .bspin.svelte-imagm6 {
    width: 10px; height: 10px;
    border: 1.5px solid #444;
    border-top-color: #4ade80;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }

  .glyph.svelte-1gy9cz {
    display: inline-block;
    flex-shrink: 0;
    overflow: visible;
    vertical-align: middle;
  }
  .stroke.svelte-1gy9cz {
    stroke: var(--gs);
    stroke-width: var(--gw);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .none-fill.svelte-1gy9cz {
    fill: none;
  }
  .fill.svelte-1gy9cz {
    fill: var(--gs);
  }

  .browser.svelte-14nyqop {
    display: flex;
    flex-direction: column;
    width: 220px;
    flex-shrink: 0;
    min-height: 0;
    background: var(--stone);
    border-right: 1px solid var(--sand);
  }
  .head.svelte-14nyqop {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    flex-shrink: 0;
  }
  .head-t.svelte-14nyqop {
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--ash);
    text-transform: uppercase;
  }
  .search.svelte-14nyqop {
    position: relative;
    padding: 0 8px 8px;
    flex-shrink: 0;
  }
  .search-in.svelte-14nyqop {
    width: 100%;
    box-sizing: border-box;
    height: 26px;
    padding: 0 24px 0 8px;
    font-size: 11.5px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 4px;
  }
  .search-in.svelte-14nyqop:focus {
    outline: none;
    border-color: var(--ash);
  }
  .clear.svelte-14nyqop {
    position: absolute;
    right: 14px;
    top: 4px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ash);
    font-size: 13px;
    border-radius: 3px;
  }
  .clear.svelte-14nyqop:hover {
    color: var(--ink);
    background: var(--inset);
  }

  .tree.svelte-14nyqop {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 4px 12px;
  }
  .group.svelte-14nyqop {
    margin-bottom: 2px;
  }
  .grow.svelte-14nyqop {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 26px;
    padding: 0 6px;
    border-radius: 4px;
    color: var(--clay);
    text-align: left;
  }
  .grow.svelte-14nyqop:hover {
    background: var(--inset);
  }
  .caret.svelte-14nyqop {
    font-size: 9px;
    color: var(--ash);
    width: 8px;
    transition: transform 120ms ease;
  }
  .caret.closed.svelte-14nyqop {
    transform: rotate(-90deg);
  }
  .gname.svelte-14nyqop {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    flex: 1;
  }
  .gcount.svelte-14nyqop {
    font-size: 10px;
    color: var(--clay);
    background: var(--inset);
    border-radius: 999px;
    padding: 0.5px 6px;
    line-height: 1.5;
  }
  .rows.svelte-14nyqop {
    list-style: none;
    margin: 0;
    padding: 1px 0 3px 0;
  }
  .row.svelte-14nyqop {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    height: 22px;
    padding: 0 6px 0 22px;
    border-radius: 4px;
    text-align: left;
  }
  .row.svelte-14nyqop:hover {
    background: var(--inset);
  }
  .row.sel.svelte-14nyqop {
    background: var(--accent-soft);
  }
  .row.sel.svelte-14nyqop .rid:where(.svelte-14nyqop) {
    color: var(--accent);
  }
  /* 充足度ドット: 未=--sand / 部分=--smoke / 充足=--ink */
  .dot.svelte-14nyqop {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sand);
    flex-shrink: 0;
  }
  .dot.partial.svelte-14nyqop {
    background: var(--smoke);
  }
  .dot.full.svelte-14nyqop {
    background: var(--ink);
  }
  .rid.svelte-14nyqop {
    font-size: 11px;
    color: var(--clay);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .none.svelte-14nyqop {
    padding: 12px;
    font-size: 11px;
    color: var(--ash);
  }

  .detail.svelte-map2i {
    display: flex;
    flex-direction: column;
    width: 320px;
    flex-shrink: 0;
    min-height: 0;
    background: var(--stone);
    border-left: 1px solid var(--sand);
  }
  .dhead.svelte-map2i {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 0 8px 0 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--sand);
  }
  .dhead-t.svelte-map2i {
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--ash);
    text-transform: uppercase;
  }
  .dclose.svelte-map2i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ash);
    font-size: 15px;
    border-radius: 4px;
  }
  .dclose.svelte-map2i:hover {
    color: var(--ink);
    background: var(--inset);
  }

  .dbody.svelte-map2i {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px 16px;
  }

  /* ノードカード */
  .card.svelte-map2i {
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 8px;
    padding: 10px 11px;
    margin-bottom: 12px;
  }
  .card-h.svelte-map2i {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
  }
  .card-id.svelte-map2i {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
  }
  .card-type.svelte-map2i {
    font-size: 10px;
    color: var(--clay);
    background: var(--inset);
    border-radius: 999px;
    padding: 0.5px 7px;
    margin-left: auto;
  }
  .card-body.svelte-map2i {
    font-size: 12px;
    line-height: 1.55;
    color: var(--clay);
    margin: 0;
  }
  .card-body.auto.svelte-map2i {
    font-size: 11px;
    color: var(--ash);
    line-height: 1.6;
  }

  /* セクション */
  .sec.svelte-map2i {
    margin-bottom: 14px;
  }
  .sec-t.svelte-map2i {
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ash);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .sec-n.svelte-map2i {
    color: var(--clay);
    background: var(--inset);
    border-radius: 999px;
    padding: 0 5px;
    font-size: 9.5px;
  }

  /* メタ定義リスト */
  .meta.svelte-map2i {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 3px 8px;
    margin: 0;
  }
  .meta.svelte-map2i dt:where(.svelte-map2i) {
    font-size: 11px;
    color: var(--ash);
  }
  .meta.svelte-map2i dd:where(.svelte-map2i) {
    font-size: 11.5px;
    color: var(--ink);
    margin: 0;
  }
  .meta.svelte-map2i dd.path:where(.svelte-map2i) {
    font-size: 10px;
    color: var(--clay);
    word-break: break-all;
    line-height: 1.4;
  }

  /* explore チップ */
  .chips.svelte-map2i {
    display: flex;
    gap: 6px;
  }
  .chip.svelte-map2i {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
    color: var(--clay);
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 4px;
  }
  .chip.svelte-map2i b:where(.svelte-map2i) {
    color: var(--ink);
    font-size: 11px;
  }
  .chip.svelte-map2i:hover:not(:disabled) {
    border-color: var(--ash);
  }
  .chip.on.svelte-map2i {
    border-color: var(--accent);
    color: var(--accent);
  }
  .chip.on.svelte-map2i b:where(.svelte-map2i) {
    color: var(--accent);
  }
  .chip.svelte-map2i:disabled {
    opacity: 0.4;
    cursor: default;
  }

  /* 実装箇所 */
  .areas.svelte-map2i {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .area.svelte-map2i {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 4px;
    text-align: left;
  }
  .area.svelte-map2i:hover {
    border-color: var(--accent);
  }
  .area-f.svelte-map2i {
    font-size: 10.5px;
    color: var(--ink);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .area-l.svelte-map2i {
    font-size: 10px;
    color: var(--clay);
    flex-shrink: 0;
  }
  .area-k.svelte-map2i {
    font-size: 9.5px;
    color: var(--clay);
    background: var(--inset);
    border-radius: 3px;
    padding: 1px 6px;
    flex-shrink: 0;
  }
  /* 未生成ぶんの注記（時制是正・修正C）。実装箇所リストの下に控えめに置く。 */
  .areas-pending.svelte-map2i {
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.4;
    color: var(--ash);
  }

  /* 原典（COBOL）＝3層トレース最上層。実装箇所（.area）と同じ間隔規律だが
     由来の提示に徹するため非インタラクティブ（クリック導線は素材タブ・
     OriginChipRow が担う）。色は既存トークンのみ（生 hex なし）。 */
  .origins.svelte-map2i {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .origin.svelte-map2i {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 4px;
  }
  .origin-pgm.svelte-map2i {
    font-size: 10.5px;
    color: var(--ink);
    flex-shrink: 0;
  }
  .origin-title.svelte-map2i {
    font-size: 10.5px;
    color: var(--clay);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .origin-l.svelte-map2i {
    font-size: 10px;
    color: var(--clay);
    flex-shrink: 0;
  }

  /* 依存仕様チップ */
  .deps.svelte-map2i {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .dep.svelte-map2i {
    font-size: 10.5px;
    color: var(--clay);
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 4px;
    padding: 3px 8px;
  }
  .dep.svelte-map2i:hover {
    border-color: var(--ash);
    color: var(--ink);
  }

  /* トレース行数バー */
  .bar.svelte-map2i {
    height: 6px;
    background: var(--inset);
    border-radius: 3px;
    overflow: hidden;
  }
  .bar-fill.svelte-map2i {
    height: 100%;
    background: var(--ink);
    border-radius: 3px;
  }
  .bar-lbl.svelte-map2i {
    font-size: 10.5px;
    color: var(--clay);
    margin-top: 5px;
  }

  .chiprow.svelte-vg06zw {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    flex-shrink: 0;
    /* 狭幅ではチップを折返さず横スクロールで全型へ到達（チップは flex-shrink:0）。
       スクロールバーはタブバー（Workspace .tabs）と同じ 4px 細サム。 */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    white-space: nowrap;
    border-bottom: 1px solid var(--sand);
    background: var(--paper);
  }
  .chiprow.svelte-vg06zw::-webkit-scrollbar {
    height: 4px;
  }
  .chiprow.svelte-vg06zw::-webkit-scrollbar-thumb {
    background: var(--sand);
    border-radius: 2px;
  }
  .fchip.svelte-vg06zw {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    height: 24px;
    padding: 0 9px;
    font-size: 11px;
    color: var(--clay);
    background: var(--stone);
    border: 1px solid var(--sand);
    border-radius: 4px;
  }
  .fchip.svelte-vg06zw b:where(.svelte-vg06zw) {
    font-size: 10px;
    color: var(--ink);
  }
  .fchip.svelte-vg06zw:hover {
    border-color: var(--ash);
  }
  .fchip.on.svelte-vg06zw {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
  }
  .fchip.on.svelte-vg06zw b:where(.svelte-vg06zw) {
    color: var(--accent);
  }
  .fchip.all.svelte-vg06zw {
    font-weight: 500;
  }
  .fname.svelte-vg06zw {
    line-height: 1;
  }

  .pane-header.svelte-1skkm28 {
    /* コンテナクエリの基準。狭幅時に caption を自衛的に畳む。 */
    container-type: inline-size;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 34px;
    flex-shrink: 0;
    padding: 0 12px;
    border-bottom: 1px solid var(--sand);
    user-select: none;
  }
  .ph-title.svelte-1skkm28 {
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
  }
  .ph-caption.svelte-1skkm28 {
    /* title より先に削れる（縮小率2倍）。狭幅では下記クエリで消える。 */
    flex-shrink: 2;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    color: var(--clay);
  }
  .ph-actions.svelte-1skkm28 {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
  }

  /* CAPTION_HIDE_W = 360px。これ以下ではキャプションを畳んで
     タイトルと操作を優先する。 */
  @container (max-width: 360px) {
    .ph-caption.svelte-1skkm28 {
      display: none;
    }
  }

  .stat-row.svelte-a3wlh5 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: 10px;
    min-width: 0;
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 11.5px;
    color: var(--clay);
    border-bottom: 1px solid var(--sand);
    user-select: none;
  }

  .onto.svelte-708jkg {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--paper);
  }

  .dt-drawtabs.svelte-708jkg {
    display: flex;
    gap: 2px;
  }
  .drawtab.svelte-708jkg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    border-radius: 5px;
    color: var(--clay);
    background: transparent;
  }
  .drawtab.svelte-708jkg:hover:not(:disabled) {
    background: var(--inset);
    color: var(--ink);
  }
  .drawtab.on.svelte-708jkg {
    background: var(--accent-soft);
    color: var(--accent);
  }
  .drawtab.svelte-708jkg:disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  /* 3ペイン */
  .panes.svelte-708jkg {
    display: flex;
    flex: 1;
    min-height: 0;
    position: relative;
  }
  .pane-left.svelte-708jkg {
    display: flex;
    min-height: 0;
    flex-shrink: 0;
  }
  .pane-center.svelte-708jkg {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
  }
  .pane-right.svelte-708jkg {
    display: flex;
    min-height: 0;
    flex-shrink: 0;
  }
  .pane-left.as-drawer.svelte-708jkg,
  .pane-right.as-drawer.svelte-708jkg {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 8;
    box-shadow: var(--shadow-pop);
  }
  .pane-left.as-drawer.svelte-708jkg {
    left: 0;
  }
  .pane-right.as-drawer.svelte-708jkg {
    right: 0;
  }

  .stat.svelte-708jkg {
    white-space: nowrap;
  }
  .stat.svelte-708jkg b:where(.svelte-708jkg) {
    color: var(--ink);
    font-weight: 600;
  }
  .stat.svelte-708jkg .note:where(.svelte-708jkg) {
    color: var(--ash);
    font-weight: 400;
  }
  .sdot.svelte-708jkg {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--smoke);
    flex-shrink: 0;
  }

  /* キャンバス（球体の地は canvas 内で --onto-void を塗る）。 */
  .canvas.svelte-708jkg {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--onto-void);
    cursor: grab;
    touch-action: none;
  }
  .canvas.grab.svelte-708jkg {
    cursor: grabbing;
  }
  .stage.svelte-708jkg {
    display: block;
    position: absolute;
    inset: 0;
  }

  .empty.svelte-708jkg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: var(--smoke);
    font-size: 13px;
    pointer-events: none;
  }

  /* (4) 影響カウンタカード（左上・--paper） */
  .impact.svelte-708jkg {
    position: absolute;
    top: 8px;
    left: 8px;
    box-sizing: border-box;
    min-width: 176px;
    padding: 8px 10px 9px;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    z-index: 6;
    user-select: none;
    pointer-events: none;
  }
  .impact-h.svelte-708jkg {
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ash);
    margin-bottom: 5px;
  }
  .impact-row.svelte-708jkg {
    font-size: 11.5px;
    color: var(--clay);
    line-height: 1.5;
    opacity: 0;
    transform: translateY(8px);
  }
  .impact-row.in.svelte-708jkg {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 240ms ease-out,
      transform 240ms ease-out;
  }
  .impact-row.svelte-708jkg b:where(.svelte-708jkg) {
    color: var(--ink);
    font-weight: 600;
  }
  .impact-row.svelte-708jkg .sub:where(.svelte-708jkg) {
    color: var(--ash);
  }

  .tbtn.svelte-708jkg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    border-radius: 5px;
    color: var(--clay);
    background: transparent;
  }
  .tbtn.svelte-708jkg:hover {
    background: var(--inset);
    color: var(--ink);
  }
  .tbtn.svelte-708jkg:disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  /* ポップオーバー */
  .pop.svelte-708jkg {
    position: absolute;
    width: 220px;
    box-sizing: border-box;
    padding: 7px 9px;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    pointer-events: none;
    z-index: 5;
  }
  .pop.sat.svelte-708jkg {
    width: auto;
    max-width: 220px;
  }
  .pop-label.svelte-708jkg {
    font-size: 11.5px;
    color: var(--ink);
    line-height: 1.35;
    word-break: break-word;
  }
  .pop-path.svelte-708jkg {
    font-size: 10px;
    color: var(--ash);
    margin-top: 2px;
    word-break: break-all;
  }
  .pop-type.svelte-708jkg {
    font-size: 10.5px;
    color: var(--clay);
    margin-top: 3px;
  }

  /* ③ フォーカスコールアウト（吹き出し風） */
  .callout.svelte-708jkg {
    position: absolute;
    box-sizing: border-box;
    max-width: 220px;
    padding: 5px 8px;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
    pointer-events: none;
    z-index: 5;
    animation: svelte-708jkg-onto-callout-in var(--cfade, 300ms) ease-out both;
  }
  @keyframes svelte-708jkg-onto-callout-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .callout-label.svelte-708jkg {
    font-size: 11px;
    color: var(--ink);
    line-height: 1.35;
    word-break: break-word;
  }
  .callout-type.svelte-708jkg {
    font-size: 10px;
    color: var(--accent);
    margin-top: 2px;
  }
  .callout-verb.svelte-708jkg {
    color: var(--clay);
  }

  /* ⑤ 読み方キャプション（左下・常設） */
  .read-caption.svelte-708jkg {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: min(72%, 560px);
    box-sizing: border-box;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--onto-void) 82%, transparent);
    border-radius: 6px;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--ash);
    pointer-events: none;
    user-select: none;
    z-index: 4;
  }

  /* ズームツールバー */
  .tools.svelte-708jkg {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    z-index: 6;
  }
  .zoomval.svelte-708jkg {
    font-size: 10.5px;
    color: var(--ash);
    min-width: 36px;
    text-align: center;
  }

  .workspace.svelte-1rx0qtd {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: var(--paper);
  }
  .tabbar.svelte-1rx0qtd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 44px;
    padding: 0 8px 0 6px;
    background: var(--paper);
    border-bottom: 1px solid var(--sand);
    user-select: none;
    flex-shrink: 0;
  }
  .tabs.svelte-1rx0qtd {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    /* タブ6個は狭い右パネル（下限380px）に収まらないため、クリップではなく
       横スクロールで全タブへ到達可能にする（P0-1検収での是正） */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }
  .tabs.svelte-1rx0qtd::-webkit-scrollbar { height: 4px; }
  .tabs.svelte-1rx0qtd::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 2px; }
  .tab.svelte-1rx0qtd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 44px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--clay);
    padding: 0 11px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
  }
  .tab.svelte-1rx0qtd svg { color: var(--ash); }
  .tab.svelte-1rx0qtd:hover { color: var(--ink); }
  .tab.svelte-1rx0qtd:hover svg { color: var(--clay); }
  .tab.active.svelte-1rx0qtd {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--ink);
  }
  .tab.active.svelte-1rx0qtd svg { color: var(--ink); }
  .tlabel.svelte-1rx0qtd { line-height: 1; }

  .badge.svelte-1rx0qtd {
    font-size: 9.5px;
    font-family: var(--font-mono);
    background: var(--inset);
    color: var(--clay);
    border-radius: 999px;
    padding: 0.5px 6px;
    line-height: 1.5;
  }
  .tab.active.svelte-1rx0qtd .badge:where(.svelte-1rx0qtd) { background: var(--ember-soft); color: var(--ember); }

  .dot.svelte-1rx0qtd { width: 7px; height: 7px; border-radius: 50%; background: var(--smoke); }
  .dot.on.svelte-1rx0qtd { background: var(--signal); animation: pulse-soft 1.4s infinite; }

  .tools.svelte-1rx0qtd {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .tsep.svelte-1rx0qtd {
    width: 1px;
    height: 18px;
    background: var(--sand);
    margin: 0 2px;
  }
  .fs-btn.svelte-1rx0qtd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: var(--clay);
  }
  .fs-btn.svelte-1rx0qtd:hover { background: var(--stone); color: var(--ink); }

  .content.svelte-1rx0qtd {
    flex: 1;
    min-height: 0;
    background: var(--paper);
  }

  .toast-host.svelte-zemmny {
    position: fixed;
    right: 20px;
    bottom: 16px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
  }
  .toast.svelte-zemmny {
    max-width: min(80vw, 420px);
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--ink-strong);
    color: var(--paper);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.005em;
    box-shadow: var(--shadow-pop);
    animation: svelte-zemmny-toast-rise 0.22s ease-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
  }

  @keyframes svelte-zemmny-toast-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }

  .cp-backdrop.svelte-xhxto7 {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.28);
    animation: svelte-xhxto7-cp-fade 0.12s ease-out;
  }
  .cmd-palette.svelte-xhxto7 {
    position: fixed;
    z-index: 301;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 560px);
    max-height: 64vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--sand);
    border-radius: 14px;
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    animation: svelte-xhxto7-cp-pop 0.14s ease-out;
  }

  .cp-search.svelte-xhxto7 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sand);
    color: var(--ash);
  }
  .cp-search.svelte-xhxto7 input:where(.svelte-xhxto7) {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
  }
  .cp-search.svelte-xhxto7 input:where(.svelte-xhxto7)::placeholder { color: var(--ash); }
  .cp-hint.svelte-xhxto7 {
    font-size: 10px;
    color: var(--clay);
    background: var(--inset);
    border-radius: 4px;
    padding: 2px 6px;
    flex-shrink: 0;
  }

  .cp-results.svelte-xhxto7 {
    overflow-y: auto;
    padding: 6px;
    min-height: 0;
  }
  .cp-item.svelte-xhxto7 {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 11px;
    border-radius: 9px;
    text-align: left;
    color: var(--ink);
  }
  .cp-item.sel.svelte-xhxto7 { background: var(--inset); }
  .cp-ic.svelte-xhxto7 { display: inline-flex; color: var(--ash); flex-shrink: 0; }
  .cp-item.sel.svelte-xhxto7 .cp-ic:where(.svelte-xhxto7) { color: var(--accent); }
  .cp-label.svelte-xhxto7 {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cp-sub.svelte-xhxto7 {
    font-size: 10.5px;
    color: var(--ash);
    flex-shrink: 0;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cp-empty.svelte-xhxto7 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px;
    color: var(--ash);
    font-size: 12.5px;
  }

  @keyframes svelte-xhxto7-cp-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes svelte-xhxto7-cp-pop {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }

  .shell.svelte-1n46o8q {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
  }
  .cols.svelte-1n46o8q {
    flex: 1;
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr) 5px var(--panel-w);
    min-height: 0;
    position: relative;
  }
  /* Collapsed: the sidebar track goes to 0 instantly. We deliberately do NOT
     transition grid-template-columns — Chromium leaves the track stuck at its
     "from" width when the toggle is reversed, which would break the collapse.
     The smooth feel comes from fading the sidebar contents (see below). */
  .cols.sidebar-collapsed.svelte-1n46o8q {
    grid-template-columns: 0px minmax(0, 1fr) 5px var(--panel-w);
  }
  /* fade the (now clipped) sidebar contents so the instant collapse reads as
     a soft disappearance rather than a hard cut. */
  .cols.svelte-1n46o8q .sidebar { transition: opacity 0.18s ease; }
  .cols.sidebar-collapsed.svelte-1n46o8q .sidebar { opacity: 0; }

  /* drag handle between chat and workspace */
  .drag-handle.svelte-1n46o8q {
    position: relative;
    width: 5px;
    cursor: col-resize;
    background: var(--sand);
    display: flex;
    align-items: stretch;
    justify-content: center;
    user-select: none;
    touch-action: none;
    z-index: 5;
  }
  .grip.svelte-1n46o8q {
    width: 1.5px;
    background: transparent;
    transition: background 0.12s;
  }
  .drag-handle.svelte-1n46o8q:hover .grip:where(.svelte-1n46o8q),
  .drag-handle.dragging.svelte-1n46o8q .grip:where(.svelte-1n46o8q) {
    background: var(--ember);
  }

  /* workspace wrapper — same DOM node toggles fullscreen (no remount) */
  .ws-slot.svelte-1n46o8q {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .ws-slot.fullscreen.svelte-1n46o8q {
    position: fixed;
    top: var(--titlebar-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--paper);
  }