:root { --bg:#0c111d; --panel:#111827; --panel2:#172033; --text:#e5e7eb; --muted:#9ca3af; --brand:#5eead4; --danger:#fb7185; --line:#263244; }
* { box-sizing:border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--text); }
header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--line); background:#080c15; }
h1 { font-size:20px; margin:0; }
button { border:1px solid var(--line); background:var(--panel2); color:var(--text); padding:8px 12px; border-radius:8px; cursor:pointer; }
button:hover { border-color:var(--brand); }
input, textarea { width:100%; background:#090d16; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px; }
textarea { min-height:55vh; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize:vertical; }
.card { max-width:420px; margin:80px auto; padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:16px; }
.hidden { display:none !important; }
.error { color:var(--danger); }
.muted { color:var(--muted); }
.layout { display:grid; grid-template-columns:320px 1fr; height:calc(100vh - 64px); min-height:0; transition:grid-template-columns .18s ease; }
.layout.folders-collapsed { grid-template-columns:max-content 1fr; }
#folder-pane { display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--line); padding:16px; background:#0d1422; min-width:0; min-height:0; gap:12px; }
.layout.folders-collapsed #folder-pane { border-right:1px solid var(--line); }
.layout.folders-collapsed #folder-pane .folder-pane-header h2,
.layout.folders-collapsed #refresh-folders,
.layout.folders-collapsed .folder-list-scroll { display:none; }
.folder-pane-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.folder-pane-header h2 { margin:0; font-size:18px; }
.folder-list-scroll { overflow-y:auto; min-height:0; flex:1; padding-right:4px; }
#folders { list-style:none; padding:0; margin:12px 0; }
#folders li { padding:10px; border:1px solid transparent; border-radius:8px; cursor:pointer; }
#folders li:hover, #folders li.active { background:var(--panel2); border-color:var(--line); }
.workspace { padding:16px; overflow:auto; min-width:0; }
.tabs { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; border-bottom:1px solid var(--line); padding-bottom:8px; }
.tab { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tab.active { color:#061015; background:var(--brand); }
.viewer { background:var(--panel); border:1px solid var(--line); border-radius:12px; min-height:60vh; padding:16px; }
.toolbar { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.file-toolbar { border-bottom:1px solid var(--line); padding-bottom:12px; }
.file-toolbar-spacer { flex:1 1 auto; }
.top-file-action { color:#061015; background:var(--brand); border-color:var(--brand); font-weight:700; }
iframe { width:100%; height:70vh; border:1px solid var(--line); border-radius:8px; background:white; }
pre { white-space:pre-wrap; word-break:break-word; }
.sheet-preview { border-collapse:collapse; width:100%; font-size:13px; }
.sheet-preview td { border:1px solid var(--line); padding:6px; vertical-align:top; }
.html-preview table, .markdown-rich table { border-collapse:collapse; width:100%; margin:12px 0; }
.html-preview th, .html-preview td, .markdown-rich th, .markdown-rich td { border:1px solid var(--line); padding:8px; vertical-align:top; }
.html-preview th, .markdown-rich th { background:#0d1422; }
.markdown-editor { display:flex; flex-direction:column; gap:12px; }
.markdown-topbar { position:sticky; top:0; z-index:2; background:var(--panel); border-bottom:1px solid var(--line); padding-bottom:12px; }
.markdown-topbar button.active { color:#061015; background:var(--brand); }
.toolbar-separator { width:1px; height:28px; background:var(--line); display:inline-block; }
.markdown-rich { min-height:55vh; background:#090d16; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:16px; line-height:1.55; outline:none; overflow:auto; }
.markdown-rich:focus, .markdown-source:focus { border-color:var(--brand); box-shadow:0 0 0 2px rgba(94,234,212,.15); }
.markdown-rich h1, .markdown-rich h2, .markdown-rich h3 { margin:18px 0 10px; }
.markdown-rich p { margin:0 0 12px; }
.markdown-rich a { color:var(--brand); }
.markdown-rich code { background:#111827; border:1px solid var(--line); border-radius:4px; padding:1px 4px; }
.markdown-rich blockquote { border-left:3px solid var(--brand); margin:12px 0; padding:8px 12px; color:var(--muted); background:#0d1422; }
.markdown-source { min-height:55vh; }
.markdown-savebar { border-top:1px solid var(--line); padding-top:12px; }
.plan-json-editor { display:flex; flex-direction:column; gap:14px; }
.plan-header { display:flex; justify-content:space-between; gap:12px; align-items:center; border:1px solid var(--line); background:#0d1422; border-radius:12px; padding:12px; }
.plan-header strong { display:block; }
.plan-header span { color:var(--muted); font-size:13px; }
.plan-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.plan-shell { display:grid; grid-template-columns:270px minmax(0, 1fr); gap:14px; min-height:62vh; }
.plan-step-list { display:flex; flex-direction:column; gap:8px; max-height:72vh; overflow:auto; background:#0d1422; border:1px solid var(--line); border-radius:12px; padding:10px; }
.plan-step-card { display:grid; grid-template-columns:32px 1fr; gap:8px; text-align:left; align-items:start; }
.plan-step-card.active, .plan-view-tab.active { color:#061015; background:var(--brand); }
.plan-step-card small { display:block; margin-top:3px; color:inherit; opacity:.75; overflow:hidden; text-overflow:ellipsis; }
.plan-step-number { width:26px; height:26px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#090d16; color:var(--brand); border:1px solid var(--line); }
.plan-main { min-width:0; }
.plan-tabs { display:flex; gap:8px; margin-bottom:10px; }
.plan-graph-view { overflow:auto; border:1px solid var(--line); border-radius:12px; background:#090d16; min-height:300px; position:relative; }
.plan-zoom-controls { position:sticky; top:8px; left:8px; z-index:2; display:inline-flex; gap:6px; align-items:center; margin:8px; padding:6px; border:1px solid var(--line); border-radius:999px; background:rgba(13,20,34,.92); box-shadow:0 6px 16px rgba(0,0,0,.24); }
.plan-zoom-controls button { min-width:34px; padding:5px 9px; }
.plan-zoom-label { min-width:44px; text-align:center; color:var(--muted); font-size:12px; }
.plan-graph-canvas { transform:scale(var(--plan-zoom, 1)); transform-origin:top left; transition:transform .12s ease; width:max-content; }
.plan-graph-svg { min-width:100%; height:auto; min-height:360px; display:block; }
.plan-edge { fill:none; stroke:#64748b; stroke-width:2; }
#plan-arrow path { fill:#64748b; }
.plan-node rect { fill:#172033; stroke:#334155; stroke-width:1.5; }
.plan-node.active rect { fill:#0f766e; stroke:var(--brand); stroke-width:2.5; }
.plan-node-label { fill:var(--text); font-size:13px; font-weight:700; }
.plan-node-id { fill:#cbd5e1; font-size:11px; }
.plan-inspector { margin-top:12px; border:1px solid var(--line); border-radius:12px; background:#0d1422; padding:14px; display:grid; gap:12px; }
.plan-step-modal .plan-inspector { margin-top:0; border:0; border-radius:0; background:transparent; padding:0; }
.plan-step-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px; }
.plan-step-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.64); }
.plan-step-modal-panel { position:relative; width:min(920px, 96vw); max-height:90vh; overflow:auto; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 24px 70px rgba(0,0,0,.45); padding:16px; }
.plan-step-modal-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.plan-step-modal-header h3 { margin:0; }
.plan-modal-close { font-size:20px; line-height:1; }
.plan-modal-actions { display:flex; gap:8px; justify-content:flex-end; border-top:1px solid var(--line); padding-top:12px; }
.plan-modal-save { color:#061015; background:var(--brand); border-color:var(--brand); font-weight:700; }
.plan-inspector h3, .plan-inspector h4 { margin:0; }
.plan-inspector label { display:grid; gap:6px; color:var(--muted); }
.plan-inspector input, .plan-inspector textarea { color:var(--text); }
.plan-inspector textarea { min-height:180px; }
.plan-inspector fieldset { border:1px solid var(--line); border-radius:10px; display:grid; gap:8px; }
.dependency-option { grid-template-columns:18px 1fr; align-items:center; background:#111827; border:1px solid var(--line); border-radius:8px; padding:8px; }
.dependency-option input { width:auto; }
.dependency-option small { grid-column:2; color:var(--muted); }
.affected-objects { width:100%; border-collapse:collapse; font-size:13px; }
.affected-objects th, .affected-objects td { border:1px solid var(--line); padding:7px; vertical-align:top; }
.affected-objects th { background:#090d16; color:var(--muted); }
.affected-objects input { width:100%; min-width:120px; }
.affected-object-remove { white-space:nowrap; }
.affected-objects-editor { display:grid; gap:8px; overflow:auto; }
#add-affected-object { justify-self:start; }
.plan-json-source { min-height:360px; }
@media (max-width: 800px) { .layout { grid-template-columns:1fr; grid-template-rows:auto 1fr; } .layout.folders-collapsed { grid-template-columns:1fr; grid-template-rows:max-content 1fr; } #folder-pane { border-right:0; border-bottom:1px solid var(--line); max-height:40vh; } .plan-shell { grid-template-columns:1fr; } }