:root { color-scheme: dark; --bg: #09131e; --panel: #0e1b2a; --line: #25364b; --muted: #8c9ab0; --text: #e8f1ff; --blue: #1595ff; --green: #43e5aa; --yellow: #ffbd4a; --purple: #c879ff; --draft: #ff7ad9; --red: #ff6972; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; font-size: 14px; }
button, input, textarea, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
.brand { display: flex; align-items: center; gap: 9px; min-width: max-content; color: #fff; font-size: 20px; }
.brand svg { color: #20a2ff; }
.brand span { color: #738098; }
.brand b { font-size: 16px; }
.brand strong { letter-spacing: .08em; }
.view-toggle { min-height: 36px; padding: 0 10px; border: 1px solid #324a64; border-radius: 6px; background: #132236; color: #c2d4ec; font-size: 12px; white-space: nowrap; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid #2b6eae; border-radius: 6px; background: linear-gradient(135deg, #167eeb, #0c9bff); box-shadow: 0 4px 12px #0069bd44; }

/* ---- Workflow view (components/WorkflowStudio.tsx) ---- */
.wf-app { --wf-left: 250px; --wf-right: 380px; display: grid; grid-template: auto minmax(0, 1fr) / var(--wf-left) minmax(0, 1fr) var(--wf-right); height: 100dvh; background: radial-gradient(circle at 45% 20%, #172a3d, var(--bg) 46%); }
.wf-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; overflow: hidden; min-height: 60px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: #0e1927e8; }
.wf-top select { max-width: 200px; min-height: 34px; border: 1px solid #2f435c; border-radius: 6px; background: #122235; color: var(--text); padding: 0 8px; }
.wf-subtitle { color: var(--muted); font-size: 12px; }
.wf-spacer { flex: 1; }
.wf-top .view-toggle { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.wf-top .view-toggle:hover { border-color: #4b6583; color: #fff; }
.wf-legend { display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; font-size: 12px; color: var(--muted); }
.wf-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; background: var(--wf-c); vertical-align: -1px; }
.wf-k-stage { --wf-c: var(--blue); --wf-bg: #10233a; }
.wf-k-gate { --wf-c: var(--yellow); --wf-bg: #2a2214; }
.wf-k-artifact { --wf-c: var(--green); --wf-bg: #0f2a22; }
.wf-k-end { --wf-c: #4fd3dc; --wf-bg: #0f2a2d; }
.wf-k-area { --wf-c: #c7d3e6; --wf-bg: #16283c; }
.wf-k-component { --wf-c: #7aa7ff; --wf-bg: #151f3d; }
.wf-k-store { --wf-c: #ff9f6b; --wf-bg: #2d1c14; }
.wf-k-external { --wf-c: var(--purple); --wf-bg: #251735; }
.wf-k-area.wf-card { width: 300px; border-width: 2px; }
.wf-k-area .wf-title { font-size: 15px; }
.wf-k-external.wf-card { border-style: dotted; }
.wf-opens-mark { color: #7cc4ff; font-weight: 400; letter-spacing: 0; }
.wf-open { margin: 4px 0 8px; }
.wf-canvas { min-width: 0; min-height: 0; overflow: auto; padding: 28px 20px 80px; background: radial-gradient(#22405d55 1px, transparent 1px); background-size: 18px 18px; }
.wf-flow { display: flex; flex-direction: column; align-items: center; min-width: max-content; margin: 0 auto; }
.wf-seq { display: flex; flex-direction: column; align-items: center; }
.wf-seq.wf-group { gap: 12px; }
.wf-arrow { position: relative; flex: none; width: 2px; height: 24px; background: #5a6d86; }
.wf-arrow::after { content: ""; position: absolute; left: -4px; bottom: -1px; border: 5px solid transparent; border-top: 6px solid #5a6d86; border-bottom: 0; }
.wf-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; width: 270px; padding: 9px 12px; border: 1.5px solid var(--wf-c); border-radius: 10px; background: linear-gradient(135deg, var(--wf-bg), #0e1b2a); box-shadow: 0 6px 16px #0006; cursor: pointer; }
.wf-card:hover { box-shadow: 0 0 0 1px var(--wf-c), 0 6px 16px #0008; }
.wf-card:focus-visible { outline: 2px solid #8fcbff; outline-offset: 2px; }
.wf-card.selected { outline: 3px solid #229dff; outline-offset: 3px; }
.wf-card.flash { animation: wf-flash 1.6s ease 2; }
@keyframes wf-flash { 50% { box-shadow: 0 0 0 7px #43e5aa55; } }
.wf-k-gate.wf-card { border-style: double; border-width: 3px; }
.wf-kind { grid-column: 1; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--wf-c); }
.wf-title { grid-column: 1; font-weight: 700; color: #f0f6ff; overflow-wrap: anywhere; }
.wf-summary { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.wf-toggle { grid-column: 2; grid-row: 1 / span 2; padding: 2px 8px; border: 1px solid var(--wf-c); border-radius: 6px; background: #0b1623; color: var(--wf-c); font-size: 12px; white-space: nowrap; }
.wf-pending-mark { position: absolute; top: -9px; right: 10px; padding: 0 7px; border: 1px solid var(--yellow); border-radius: 999px; background: #2a2214; color: var(--yellow); font-size: 11px; }
.wf-sub { display: flex; flex-direction: column; align-items: center; margin-top: 12px; padding: 12px 16px 16px; border: 1.5px dashed #3a5068; border-radius: 12px; background: #0b1624cc; }
.wf-sub-label { align-self: flex-start; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.wf-lanes { position: relative; display: flex; align-items: flex-start; gap: 18px; padding-top: 16px; }
.wf-lanes::before { content: ""; position: absolute; top: 0; left: var(--wf-l, 50%); right: var(--wf-r, 50%); height: 2px; background: #5a6d86; }
.wf-lane { position: relative; display: flex; flex-direction: column; align-items: center; }
.wf-lane::before { content: ""; position: absolute; top: -16px; left: calc(var(--wf-anchor, 50%) - 1px); width: 2px; height: 16px; background: #5a6d86; }
.wf-cond { margin-bottom: 6px; padding: 1px 10px; border: 1px solid var(--purple); border-radius: 999px; background: #251735; color: var(--purple); font-size: 12px; font-weight: 700; }
.wf-note { max-width: 230px; padding: 5px 10px; border: 1px dashed #4b6583; border-radius: 8px; background: #0e1b2a; color: var(--muted); font-size: 12px; text-align: center; }
.wf-note.loop { border-color: var(--yellow); color: var(--yellow); }
.wf-merge { margin: 8px 0 4px; color: var(--muted); font-size: 11px; }
.wf-error { max-width: 640px; margin: 0 auto 20px; padding: 10px 14px; border: 1px solid var(--red); border-radius: 8px; background: #542331; color: #ffd8dc; }
.wf-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: #0d1a29f3; }
.wf-pane { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px; }
.wf-empty { color: var(--muted); }
.wf-info h2 { margin: 0 0 2px; font-size: 18px; }
.wf-meta { margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.wf-sec { margin: 13px 0; }
.wf-sec h3 { margin: 0 0 4px; color: #8fa6c4; font-size: 12px; letter-spacing: .05em; }
.wf-sec p, .wf-sec ul { margin: 0; line-height: 1.6; }
.wf-sec ul { padding-left: 18px; }
.wf-pending-box { padding: 2px 12px; border: 1px solid var(--yellow); border-radius: 8px; background: #2a2214; }
.wf-pending-box h3 { color: var(--yellow); }
.wf-src { margin-top: 16px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.wf-src code, .wf-hint code { padding: 1px 4px; border-radius: 4px; background: #132236; font-size: 11px; }
.wf-draft .wf-card, .wf-card.wf-ghost { border-style: dashed; border-width: 3px; border-color: #ff7ad9b3; background: #2a132880; }
.wf-draft .wf-k-area.wf-card, .wf-k-area.wf-card.wf-ghost { border-width: 4px; }
.wf-card.wf-ghost { opacity: .85; }
.wf-draft .wf-kind, .wf-card.wf-ghost .wf-kind { color: var(--draft); }
.wf-ghost-mark { position: absolute; top: -9px; right: 10px; padding: 0 7px; border: 1px dashed var(--draft); border-radius: 999px; background: #2a1328; color: var(--draft); font-size: 11px; }
.wf-legend .wf-legend-draft::before { background: transparent; border: 1.5px dashed var(--draft); box-sizing: border-box; }
.wf-draft-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 760px; margin: 0 auto 22px; padding: 12px 16px; border: 1.5px dashed var(--draft); border-radius: 10px; background: #2a1328; }
.wf-draft-banner > div { display: grid; gap: 3px; }
.wf-draft-banner strong { color: var(--draft); }
.wf-draft-banner span { color: #e9c6e2; font-size: 13px; }
.wf-draft-banner.compact { padding: 8px 14px; }
.wf-notice { max-width: 640px; margin: 0 auto 20px; padding: 10px 14px; border: 1px solid #2a6a55; border-radius: 8px; background: #0f2a22; color: #9ef0cf; }
.wf-proposal-msg { color: #ffd185; font-size: 12px; }
.wf-hint { margin: 0; color: var(--muted); font-size: 11px; }
.wf-tree { display: flex; justify-content: center; }
.wf-tree-node { display: flex; flex-direction: column; align-items: center; }
.wf-tree-children { display: flex; flex-direction: column; align-items: center; }
.wf-tree-children::before { content: ""; flex: none; width: 2px; height: 18px; background: #5a6d86; }
.wf-tree-row { gap: 22px; }
.wf-tree-row > .wf-lane > .wf-cond { margin-top: 0; }
.wf-tree-node.stacked, .wf-lane.stacked { align-items: flex-start; }
.wf-lane.stacked > .wf-cond { margin-bottom: 0; }
.wf-lane.stacked > .wf-tree-stack { margin-left: calc(var(--wf-anchor, 26px) - 1px); }
.wf-tree-stack { display: flex; flex-direction: column; margin-left: 26px; }
.wf-tree-leaf { position: relative; padding: 10px 0 0 22px; }
.wf-tree-leaf::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #5a6d86; }
.wf-tree-leaf:last-child::before { bottom: auto; height: calc(50% + 5px); }
.wf-tree-leaf::after { content: ""; position: absolute; top: calc(50% + 4px); left: 0; width: 22px; height: 2px; background: #5a6d86; }
.wf-card.wf-tree-root { width: 320px; border: 2px solid #c8d6ea; background: #13263b; cursor: default; }
.wf-card.wf-tree-root .wf-kind { color: #c8d6ea; }
.wf-card.wf-tree-root .wf-title { font-size: 18px; }
.wf-card.wf-unbuilt { border-style: dashed; border-width: 1.5px; }
.wf-legend .wf-legend-unbuilt::before { background: transparent; border: 1.5px dashed var(--muted); box-sizing: border-box; }
.wf-status { display: inline-block; margin: 0 0 10px; padding: 1px 8px; border: 1px solid; border-radius: 999px; font-size: 11px; font-weight: 400; }
.wf-status.built { border-color: #2a6a55; color: var(--green); }
.wf-status.unbuilt { border-style: dashed; border-color: #4b6583; color: #a9bbd3; }
.wf-status.draft { border-style: dashed; border-color: var(--draft); color: var(--draft); }

.wf-seg { display: inline-flex; flex: none; border: 1px solid #2f435c; border-radius: 7px; overflow: hidden; }
.wf-seg button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 11px; border: 0; background: #0f1d2d; color: #91a4bd; font-size: 12px; }
.wf-seg button + button { border-left: 1px solid #2f435c; }
.wf-seg button[aria-pressed="true"] { background: #123a5e; color: #e6f0ff; }

.wf-side { display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 14px 12px; border-right: 1px solid var(--line); background: #0d1a29f3; }
.wf-side { grid-column: 1; grid-row: 2; }
.wf-canvas { grid-column: 2; grid-row: 2; }
.wf-panel { grid-column: 3; grid-row: 2; }
.wf-app.left-closed { --wf-left: 0px; }
.wf-app.right-closed { --wf-right: 0px; }
.wf-icon-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #b7c9e0; }
.wf-icon-button:hover { border-color: #30455f; background: #122235; color: #fff; }
.wf-expand { position: absolute; z-index: 7; top: 12px; border-color: #30455f; background: #0d1b2be8; }
.wf-expand.left { left: 12px; }
.wf-expand.right { right: 12px; }
.wf-side-head { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 10px 4px; }
.wf-side-head strong { font-size: 13px; }
.wf-panel-head { display: flex; justify-content: flex-end; padding: 8px 10px 0; }
.wf-panel-head + .wf-pane { padding-top: 4px; }
.wf-side-row { position: relative; }
.wf-side-row .wf-side-item { padding-right: 36px; }
.wf-side-more { position: absolute; top: 7px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #b7c9e0; opacity: 0; }
.wf-side-row:hover .wf-side-more, .wf-side-row.menu-open .wf-side-more, .wf-side-more:focus-visible { opacity: 1; }
.wf-side-more:hover, .wf-side-row.menu-open .wf-side-more { background: #1c3048; color: #fff; }
.wf-menu { position: absolute; z-index: 20; top: 36px; right: 4px; display: grid; min-width: 150px; padding: 5px; border: 1px solid #30455f; border-radius: 10px; background: #111e2e; box-shadow: 0 10px 28px #000a; }
.wf-menu button { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 13px; text-align: left; }
.wf-menu button:hover { background: #1c3048; }
.wf-side-item.editing { cursor: default; }
.wf-menu button.danger { color: #ffb3bb; }
.wf-shared-mark { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 0 5px; border: 1px solid #2a6a55; border-radius: 999px; color: var(--green); font-size: 10px; vertical-align: 1px; }
.wf-viewer .brand { color: #fff; text-decoration: none; }
a.primary-button { color: var(--text); text-decoration: none; }
.wf-snapshot { flex: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
.wf-share-index { max-width: 760px; margin: 0 auto; padding: 48px 20px; height: 100dvh; overflow: auto; }
.wf-share-index h1 { font-size: 22px; }
.wf-share-index > p { color: var(--muted); }
.wf-share-index ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.wf-share-index li { padding: 12px 16px; border: 1px solid #30455f; border-radius: 10px; background: #0f1d2d; }
.wf-share-index li a { color: #7cc4ff; font-size: 16px; font-weight: 600; text-decoration: none; }
.wf-share-index li span { margin-left: 6px; padding: 0 6px; border: 1px dashed var(--draft); border-radius: 999px; color: var(--draft); font-size: 11px; }
.wf-share-index li p { margin: 4px 0 0; color: var(--muted); }
.wf-rename { width: 100%; padding: 2px 6px; border: 1px solid #229dff; border-radius: 5px; background: #0b1622; color: var(--text); font-size: 13px; font-weight: 600; outline: none; }
.wf-side-status { padding: 10px 12px; border: 1px solid #30455f; border-radius: 8px; background: #102033; }
.wf-side-status strong { font-size: 13px; }
.wf-side-status dl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 8px 0 0; }
.wf-side-status dl div { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.wf-side-status dt { color: var(--muted); }
.wf-side-status dd { margin: 0; font-variant-numeric: tabular-nums; }
.wf-side-status dd.warn { color: var(--yellow); }
.wf-side h3 { display: flex; justify-content: space-between; margin: 18px 4px 6px; color: #8fa6c4; font-size: 12px; letter-spacing: .05em; }
.wf-side h3 span { color: var(--muted); font-weight: 400; }
.wf-side ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.wf-side-item { display: grid; gap: 2px; width: 100%; padding: 7px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); text-align: left; }
.wf-side-item:hover { border-color: #30455f; background: #122235; }
.wf-side-item.active { border-color: #229dff; background: #12304f; }
.wf-side-item.draft { border-style: dashed; border-color: #6b3a63; }
.wf-side-item.draft.active { border-color: var(--draft); background: #2a1328; }
.wf-side-title { font-size: 13px; font-weight: 600; }
.wf-side-meta { color: var(--muted); font-size: 11px; }
.wf-side-empty { margin: 0 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.wf-spec { max-width: 820px; margin: 0 auto; }
.wf-spec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.wf-spec-head h1 { margin: 0; font-size: 22px; }
.wf-spec-head p { margin: 4px 0 0; color: var(--muted); }
.wf-spec-node { margin-bottom: 12px; padding: 10px 14px; border: 1px solid #22344b; border-radius: 10px; background: #0f1d2dd9; scroll-margin: 20px; }
.wf-spec-node.selected { border-color: #229dff; }
.wf-spec-cond { margin-bottom: 4px; color: var(--yellow); font-size: 12px; }
.wf-spec-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--text); font-size: 15px; font-weight: 700; text-align: left; }
.wf-spec-title .wf-status { margin: 0; }
.wf-spec-kind { color: var(--wf-c); font-size: 11px; font-weight: 600; }
.wf-spec-summary { margin: 4px 0 0; color: #a9bbd3; }
.wf-spec-json { margin: 0; padding: 14px; overflow: auto; border: 1px solid #22344b; border-radius: 10px; background: #0b1622; font-size: 12px; line-height: 1.5; }

.wf-canvas.graph { position: relative; overflow: hidden; padding: 0; cursor: grab; touch-action: none; }
.wf-canvas.graph.wf-panning { cursor: grabbing; user-select: none; }
.wf-canvas.graph .wf-card { cursor: pointer; }
.wf-canvas.text { position: relative; }
.wf-stage { position: absolute; top: 0; left: 0; margin: 0; padding: 0 24px 24px; transform-origin: 0 0; }
.wf-stage.wf-anim { transition: transform .25s ease; }
.wf-overlay { position: absolute; z-index: 6; top: 14px; left: 50%; display: grid; gap: 10px; width: min(760px, calc(100% - 40px)); transform: translateX(-50%); pointer-events: none; }
.wf-overlay > * { margin: 0; pointer-events: auto; }
.wf-canvas.text .wf-overlay { position: static; width: auto; max-width: 760px; margin: 0 auto 18px; transform: none; }
.wf-zoom { position: absolute; z-index: 5; bottom: 16px; left: 50%; display: flex; overflow: hidden; border: 1px solid #354c66; border-radius: 6px; background: #0d1b2be8; box-shadow: 0 6px 20px #0006; transform: translateX(-50%); }
.wf-zoom button { display: grid; place-items: center; width: 32px; height: 30px; border: 0; background: transparent; color: #c8d6ea; font-size: 16px; }
.wf-zoom button + button { border-left: 1px solid #354c66; }
.wf-zoom button:hover { background: #17304a; color: #fff; }
.wf-mini { position: absolute; z-index: 5; right: 16px; bottom: 16px; display: grid; gap: 5px; padding: 10px; border: 1px solid #354c66; border-radius: 6px; background: #0d1b2be8; box-shadow: 0 6px 20px #0006; }
.wf-mini-head { color: #c8d6ea; font-size: 12px; font-weight: 600; }
.wf-mini small { color: var(--muted); font-size: 11px; }
.wf-mini svg { display: block; border-radius: 4px; background: #0a1522; cursor: pointer; touch-action: none; }
.wf-mini rect.node { fill: var(--wf-c, #4b6583); opacity: .75; }
.wf-mini rect.node.selected { opacity: 1; stroke: #fff; stroke-width: 1; }
.wf-mini rect.view { fill: #229dff22; stroke: #229dff; stroke-width: 1.5; }

@media (max-width: 1600px) { .wf-subtitle { display: none; } }
@media (max-width: 1250px) {
  .wf-app { --wf-left: 210px; --wf-right: 320px; }
  .wf-legend { display: none; }
}
@media (max-width: 860px) {
  .wf-app { grid-template: auto minmax(0, 1fr) 48dvh / minmax(0, 1fr); }
  .wf-side, .wf-mini, .wf-expand.left { display: none; }
  .wf-canvas { grid-column: 1; grid-row: 2; }
  .wf-panel { grid-column: 1; grid-row: 3; border-left: 0; border-top: 1px solid var(--line); }
  .wf-card { width: 230px; }
  .wf-legend { display: none; }
}