:root { --ink:#18211d; --muted:#6e7772; --line:#dfe4df; --paper:#f4f5f1; --panel:#fbfcf9; --green:#1d6a4a; --green-dark:#145039; --mint:#dceee4; --orange:#e56f38; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); }
body { font-family:Arial, Helvetica, sans-serif; }
button, input { font:inherit; }
button { color:inherit; }
.hidden{display:none!important}.page-link{text-decoration:none}.demo-banner{display:flex;gap:14px;align-items:center;background:#e7f0ea;border:1px solid #cadfd1;color:#456153;border-radius:8px;padding:10px 14px;margin-bottom:26px;font-size:10px}.demo-banner strong{color:var(--green);white-space:nowrap}.sidebar a.nav-item{text-decoration:none}.download-button{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}
.app-shell { min-height:100vh; display:flex; }
.sidebar { position:fixed; inset:0 auto 0 0; width:244px; background:#18211d; color:#f6f6ef; padding:28px 18px 18px; display:flex; flex-direction:column; z-index:10; }
.brand { display:flex; align-items:center; gap:11px; padding:0 9px 30px; font-size:20px; font-weight:750; letter-spacing:-.5px; }
.brand-mark { width:29px; height:29px; display:grid; place-items:center; background:#b9eecc; color:#173e2d; border-radius:8px; font-size:17px; }
.nav-list { display:flex; flex-direction:column; gap:4px; }
.nav-item { border:0; width:100%; background:transparent; color:#aeb7b1; display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:8px; font-size:14px; text-align:left; cursor:pointer; }
.nav-item span { width:18px; color:#89948d; font-size:18px; }
.nav-item b { margin-left:auto; font-size:11px; color:#829087; background:#27322d; border-radius:10px; padding:2px 7px; }
.nav-item:hover, .nav-item.active { background:#29352f; color:#fff; }
.nav-item.active span { color:#a9e7bf; }
.sidebar-bottom { margin-top:auto; }
.workspace-card { border-top:1px solid #334039; margin-top:16px; padding:18px 8px 2px; display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; }
.avatar { background:#d8a663; color:#40280f; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; }
.workspace-card strong,.workspace-card small { display:block; }
.workspace-card strong { font-size:12px; }.workspace-card small { color:#87938c; font-size:10px; margin-top:3px; }.chevron { color:#77837c; }
.workspace { margin-left:244px; width:calc(100% - 244px); min-height:100vh; }
.topbar { height:76px; background:rgba(251,252,249,.94); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 38px; position:sticky; top:0; z-index:8; backdrop-filter:blur(12px); }
.eyebrow,.kicker,.source-label { display:block; font-size:9px; letter-spacing:1.7px; font-weight:800; color:#8b938e; }
.topbar h1 { font-size:17px; margin:4px 0 0; letter-spacing:-.3px; }
.top-actions { display:flex; align-items:center; gap:10px; }.status-dot { color:#37a46e; font-size:9px; }.system-status{font-size:11px;color:#6c766f;margin-right:8px;}
.icon-button { border:1px solid var(--line); background:#fff; border-radius:7px; width:34px; height:34px; cursor:pointer; }
.primary { background:var(--green); color:#fff; border:0; border-radius:7px; font-weight:700; cursor:pointer; }.primary:hover { background:var(--green-dark); }.primary.small{padding:10px 14px;font-size:11px;}
.content { max-width:1260px; margin:0 auto; padding:48px 42px 28px; }
.hero { display:flex; justify-content:space-between; align-items:flex-end; padding:2px 0 36px; }
.kicker { color:var(--green); margin:0 0 13px; }.hero h2 { margin:0; font-family:Georgia, 'Times New Roman', serif; font-size:47px; line-height:1.02; font-weight:500; letter-spacing:-1.6px; }.hero h2 em { color:var(--green); font-style:italic; }
.hero-copy { width:390px; margin:0 0 4px; color:var(--muted); line-height:1.6; font-size:13px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:11px; box-shadow:0 1px 0 rgba(21,39,28,.02); }
.builder-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:16px; }
.source-panel,.flow-panel { padding:24px; }
.panel-heading { display:flex; gap:13px; align-items:flex-start; }.panel-heading.compact{align-items:center;}.step { flex:none; width:28px; height:28px; border-radius:7px; background:#e6ede8; color:var(--green); display:grid; place-items:center; font-size:10px; font-weight:800; }
.panel-heading h3 { margin:0; font-family:Georgia,serif; font-size:20px; font-weight:500; }.panel-heading p { margin:5px 0 0; color:var(--muted); font-size:11px; }.panel-heading p strong{color:var(--ink);}
.mode-tabs { background:#edf0eb; padding:3px; border-radius:7px; display:flex; width:260px; margin:24px 0 20px; }.mode-tabs button,.view-tabs button { border:0; background:transparent; cursor:pointer; color:#77807b; }.mode-tabs button { width:50%; padding:8px; font-size:11px; border-radius:5px; }.mode-tabs button.selected { background:#fff; color:var(--ink); box-shadow:0 1px 4px #d2d7d2; font-weight:700; }
.source-label { margin-bottom:8px; }.source-input { display:grid; grid-template-columns:30px 1fr auto; align-items:center; border:1px solid #cfd6d0; background:#fff; border-radius:8px; padding:5px 6px 5px 12px; }.source-input span { color:#758079; font-size:12px; }.source-input input { min-width:0; border:0; outline:0; padding:8px 4px; color:#354039; font-family:var(--font-geist-mono),monospace; font-size:12px; }.source-input button { border:0; background:var(--green); color:#fff; border-radius:6px; padding:10px 14px; font-size:11px; font-weight:750; cursor:pointer; min-width:112px; }.source-input button:disabled{opacity:.62;cursor:default;}
.trust-row { display:flex; gap:20px; margin-top:15px; color:#7b847e; font-size:9px; }.trust-row span::first-letter{color:var(--green);}
.analysis-error{margin:13px 0 0;color:#a13f24;background:#fff0e9;border:1px solid #f0d0c1;border-radius:6px;padding:9px 10px;font-size:10px;}
.pipeline { margin-top:25px; padding-left:3px; }.pipe-step { display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:10px; }.pipe-step>span { width:27px;height:27px;display:grid;place-items:center;border:1px solid #d7ddd8;border-radius:50%;font-size:8px;color:#909892;background:#fff;}.pipe-step strong,.pipe-step small{display:block;}.pipe-step strong{font-size:11px;}.pipe-step small{font-size:9px;color:#8a928d;margin-top:3px;}.pipe-step>b{font-size:9px;color:#9ca49f;}.pipe-step.complete>span{background:var(--mint);border-color:#bddcc9;color:var(--green);}.pipe-step.complete>b{color:var(--green);}.pipe-step.ready>b{color:var(--orange);background:#fff0e8;padding:4px 7px;border-radius:10px;}.pipe-step.processing>span{animation:pulse 1s infinite;}.pipe-line{height:16px;border-left:1px dashed #ccd3cd;margin-left:13px;}@keyframes pulse{50%{background:#bfe4cd;}}
.results { margin-top:16px; overflow:hidden; }.results-header { display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line);}.view-tabs{display:flex;gap:6px}.view-tabs button{font-size:10px;padding:7px 9px;border-radius:6px}.view-tabs button.selected{color:var(--green);background:#e7f0ea;font-weight:800;}
.tool-layout { display:grid;grid-template-columns:1.05fr .95fr;min-height:315px;}.tool-list{border-right:1px solid var(--line);padding:8px;}.tool-row{width:100%;border:0;background:transparent;display:grid;grid-template-columns:32px 1fr auto;gap:11px;align-items:center;text-align:left;padding:12px;border-radius:7px;cursor:pointer}.tool-row:hover,.tool-row.selected{background:#edf2ed}.tool-icon{width:30px;height:30px;background:#fff;border:1px solid #dde3de;border-radius:7px;display:grid;place-items:center;color:var(--green)}.tool-row strong,.tool-row small{display:block}.tool-row strong{font:600 11px var(--font-geist-mono),monospace}.tool-row small{color:#7f8982;font-size:9px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px}.tool-row>code{font-size:8px;color:var(--green);background:#dff0e6;padding:4px 6px;border-radius:4px}.tool-row>code.post{color:#a64a23;background:#fbe6dc}
.tool-detail{padding:24px 26px;background:#f7f8f5}.detail-title{display:flex;justify-content:space-between;align-items:flex-start}.badge{font-size:8px;letter-spacing:1px;color:#849088}.tool-detail h4{font:600 16px var(--font-geist-mono),monospace;margin:5px 0}.risk{font-size:9px;padding:5px 8px;border-radius:12px}.risk.read{background:#dff0e6;color:var(--green)}.risk.write{background:#fbe6dc;color:#a64a23}.tool-detail>p{font-size:11px;color:#6f7972;line-height:1.5}.tool-detail dl{margin:20px 0}.tool-detail dl>div{display:flex;justify-content:space-between;border-top:1px solid #e1e5e1;padding:10px 0;font-size:10px}.tool-detail dt{color:#8a928d}.tool-detail dd{margin:0}.tool-detail code{font-family:var(--font-geist-mono),monospace}.export-row{border-top:1px solid #e1e5e1;padding-top:15px}.export-row>span{font-size:9px;color:#8a928d}.export-row div{display:flex;gap:6px;margin-top:8px}.export-row b{font-size:8px;border:1px solid #d9dfda;border-radius:5px;padding:5px 7px;background:#fff}.json-view{position:relative;background:#17201c;color:#c9e7d4;padding:22px;min-height:315px;overflow:auto}.json-view button{position:absolute;right:18px;top:16px;border:1px solid #415148;background:#27342e;color:#d9e6dd;border-radius:6px;padding:7px 10px;font-size:9px;cursor:pointer}.json-view pre{margin:0;font:10px/1.65 var(--font-geist-mono),monospace;}
.runtime-actions{display:flex;gap:8px;margin-top:15px}.runtime-actions button,.runtime-actions a{border:1px solid #cfd8d1;background:#fff;color:var(--green);border-radius:6px;padding:8px 10px;font-size:9px;font-weight:750;text-decoration:none;cursor:pointer}.runtime-actions button:disabled{opacity:.45;cursor:not-allowed}.runtime-actions a{background:var(--green);color:#fff;border-color:var(--green)}.test-result{font:9px var(--font-geist-mono),monospace!important;color:var(--green)!important;background:#e7f0ea;padding:7px 9px;border-radius:5px;margin-top:9px!important;}
footer{display:flex;justify-content:space-between;color:#929a95;font-size:9px;padding:19px 2px 0;}
@media(max-width:980px){.sidebar{width:76px;padding:26px 12px}.brand span:last-child,.nav-item:not(.active),.nav-item b,.workspace-card div,.chevron{display:none}.brand{padding-left:10px}.nav-item.active{justify-content:center}.nav-item.active span{width:auto}.workspace-card{grid-template-columns:1fr;padding:18px 8px}.avatar{margin:auto}.workspace{margin-left:76px;width:calc(100% - 76px)}.hero{align-items:flex-start}.hero-copy{width:310px}.builder-grid{grid-template-columns:1fr}.flow-panel{display:none}}
@media(max-width:700px){.topbar{padding:0 18px}.system-status,.status-dot,.icon-button{display:none}.content{padding:32px 18px}.hero{display:block}.hero h2{font-size:39px}.hero-copy{width:auto;margin-top:20px}.builder-grid{display:block}.source-panel{padding:19px}.trust-row{flex-wrap:wrap;gap:8px 14px}.results-header{align-items:flex-start;gap:16px}.tool-layout{grid-template-columns:1fr}.tool-list{border-right:0}.tool-detail{border-top:1px solid var(--line)}.tool-row small{max-width:180px}.source-input{grid-template-columns:25px 1fr}.source-input button{grid-column:1/-1;margin-top:6px}footer{display:block}footer span{display:block;margin-top:5px}}