:root { color-scheme: light; --ink:#13263a; --muted:#64778c; --line:#d9e3ec; --wash:#f4f7fa; --panel:#fff; --brand:#176b87; --brand-soft:#e7f3f6; --gold:#c48728; --good:#18794e; --shadow:0 14px 34px rgba(26,54,76,.06); --surface-sunken:#eef2f6; --text-tertiary:#5c6b7d; --review-text:#9c5f1f; --live-bg:#eaf7ef; --live-text:#12603d; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; color:var(--ink); background:var(--wash); }
button, select, input, textarea { font:inherit; } button { cursor:pointer; }
.shell { width:min(1240px,100%); margin:0 auto; padding-left:28px; padding-right:28px; }
.site-header { background:#fff; border-bottom:1px solid var(--line); }.header-inner { display:flex; justify-content:space-between; gap:24px; align-items:end; padding-top:34px; padding-bottom:30px; }
.eyebrow,.section-kicker { color:var(--brand); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.eyebrow { margin-bottom:6px; }.site-header h1 { margin:0; font-size:34px; letter-spacing:-.035em; }.header-subtitle { margin:5px 0 0; color:var(--muted); }
.identity { color:var(--muted); font-size:14px; white-space:nowrap; padding-bottom:4px; }.staging-banner { display:inline-block; margin-top:10px; padding:4px 9px; border-radius:999px; background:#fff1cc; color:#8a5a00; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.staging-banner[hidden] { display:none; }.app-shell { padding-top:26px; padding-bottom:60px; }
.workspace-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:22px; }.workspace-head h2 { margin:2px 0 3px; font-size:27px; letter-spacing:-.025em; }.section-kicker { margin:0; }.muted { color:var(--muted); margin:0; }
.engagement-control { display:grid; gap:6px; color:var(--muted); font-size:13px; font-weight:700; min-width:280px; }.engagement-control select { height:42px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); padding:0 12px; }
.step-nav { display:flex; gap:8px; overflow:auto; padding:6px; margin-bottom:22px; background:#eaf0f4; border-radius:13px; }.step { flex:1 0 auto; display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-weight:750; padding:0 16px; }.step span { font-size:11px; opacity:.7; }.step.active { color:#fff; background:var(--brand); box-shadow:0 5px 12px rgba(23,107,135,.2); }
.workspace-content { min-height:300px; }.hero-card,.panel,.stat-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }.hero-card { padding:26px; }.hero-card h3,.panel h3 { margin:0; font-size:20px; }.hero-card p { max-width:720px; color:var(--muted); margin:8px 0 0; }.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:20px; }.stat-card { padding:17px; }.stat-value { font-size:28px; font-weight:800; letter-spacing:-.04em; }.stat-label { color:var(--muted); font-size:13px; }
.scope-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:22px; }.scope-summary { display:grid; gap:0; margin-top:16px; border-top:1px solid var(--line); }.scope-row { display:grid; grid-template-columns:190px 1fr; gap:18px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:13px; line-height:1.5; }.scope-label { color:var(--muted); font-weight:700; }.scope-note { margin:16px 0; padding:10px 12px; border-radius:8px; background:var(--surface-sunken); color:var(--muted); font-size:12.5px; }.raid-grid { display:grid; gap:9px; }.raid-item { display:flex; gap:12px; padding:11px 13px; background:var(--surface-sunken); border:1px solid var(--line); border-radius:9px; }.raid-key { flex:0 0 26px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--brand); font-weight:700; font-size:12px; }.raid-i .raid-key { background:var(--muted); }.raid-o .raid-key { background:var(--text-tertiary); }.raid-e .raid-key { background:var(--review-text); }.raid-u .raid-key { background:var(--muted); }.raid-item h4 { margin:0 0 3px; font-size:13px; }.raid-item p { margin:0; font-size:13px; line-height:1.5; }.scope-confirmation { margin-top:14px; padding:10px 14px; border-radius:9px; background:var(--live-bg); border:1px solid #b7dfc4; color:var(--live-text); font-size:13px; font-weight:600; }
.panel { padding:22px; margin-bottom:16px; }.panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--line); }.panel-head p { margin:3px 0 0; color:var(--muted); }.badge { display:inline-flex; align-items:center; padding:4px 9px; border-radius:99px; background:var(--brand-soft); color:var(--brand); font-size:12px; font-weight:800; }.badge.gold { color:#85540c; background:#fff3d9; }
.record-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }.record { border:1px solid var(--line); border-radius:12px; padding:17px; background:#fbfcfd; }.record h4 { margin:0; font-size:17px; }.record p { margin:7px 0 0; color:#405268; }.record-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; color:var(--muted); font-size:13px; }.record-id { color:var(--brand); font-weight:800; }.empty { padding:28px 8px; color:var(--muted); text-align:center; }.loading { padding:60px; color:var(--muted); text-align:center; }.error { padding:20px; color:#963d00; background:#fff3eb; border:1px solid #efc5a9; border-radius:12px; }
.process-record-head { display:flex; align-items:start; justify-content:space-between; gap:12px; }.status-badge { display:inline-flex; align-items:center; max-width:55%; padding:4px 8px; border:1px solid var(--line); border-radius:999px; background:#f4f7fa; color:var(--muted); font-size:12px; font-weight:800; text-align:right; }.hashtag-chip { display:inline-flex; margin-top:9px; padding:4px 8px; border-radius:999px; background:var(--brand-soft); color:var(--brand); font-size:12px; font-weight:800; }.process-diagram-label { margin-top:14px; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }.mermaid-diagram { overflow:auto; margin-top:7px; padding:12px; border:1px solid var(--line); border-radius:9px; background:#fff; }.mermaid-diagram svg { display:block; width:max-content; min-width:100%; height:150px; }.diagram-source { overflow:auto; margin:7px 0 0; padding:10px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; color:#405268; font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; }
.process-list { display:grid; gap:16px; margin-top:16px; }.process-record { width:100%; }.process-record-head { align-items:flex-start; }.process-record-head h4 { margin-bottom:5px; }.record-id { display:inline-flex; padding:3px 8px; border-radius:999px; background:var(--brand-soft); color:var(--brand); font-size:12px; font-weight:800; }.process-status { flex:1 1 340px; max-width:none; margin:0; color:var(--muted); overflow-wrap:anywhere; }.process-status strong { color:var(--ink); }.mermaid-diagram { margin-top:7px; padding:12px; border:1px solid var(--line); border-radius:9px; background:#fff; }.mermaid-diagram.rendered { display:flex; flex-direction:column; align-items:stretch; justify-content:center; cursor:default; }.diagram-thumbnail { display:flex; align-items:center; justify-content:center; height:260px; max-height:260px; overflow:hidden; background:#f8fafc; border-radius:7px; }.diagram-thumbnail svg { display:block; width:100%; height:248px; min-width:0; max-width:100%; object-fit:contain; }.diagram-open { align-self:center; margin-top:10px; }.diagram-loading { padding:56px 12px; color:var(--muted); text-align:center; }.diagram-lightbox { position:fixed; z-index:1000; inset:0; display:flex; flex-direction:column; padding:20px; background:rgba(19,38,58,.96); color:#fff; }.diagram-lightbox-head,.diagram-lightbox-tools { display:flex; align-items:center; gap:10px; }.diagram-lightbox-head { justify-content:space-between; padding-bottom:12px; }.diagram-lightbox-tools { justify-content:center; padding-bottom:12px; }.diagram-lightbox-canvas { flex:1; overflow:hidden; cursor:grab; border-radius:12px; background:#fff; outline:none; }.diagram-lightbox-canvas:active { cursor:grabbing; }.diagram-lightbox-svg { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:20px; transform-origin:center; }.diagram-lightbox-svg svg { display:block; width:100%; height:100%; min-width:0; object-fit:contain; }
.table-wrap { overflow:auto; margin-top:14px; }.data-table { width:100%; border-collapse:collapse; min-width:620px; }.data-table th,.data-table td { text-align:left; vertical-align:top; padding:12px 10px; border-bottom:1px solid var(--line); }.data-table th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }.data-table td { color:#30465d; }.used-by { display:flex; flex-wrap:wrap; gap:6px; }.used-by span { padding:3px 7px; border-radius:6px; font-size:12px; font-weight:700; }.used-by .read { color:#176b87; background:#e7f3f6; }.used-by .write { color:#85540c; background:#fff3d9; }
.toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:12px; padding-top:16px; }.field { display:grid; gap:6px; color:var(--muted); font-size:13px; font-weight:700; }.field select { height:40px; min-width:190px; border:1px solid var(--line); border-radius:8px; padding:0 10px; background:#fff; color:var(--ink); }.primary { height:40px; border:1px solid var(--brand); border-radius:8px; padding:0 17px; background:var(--brand); color:#fff; font-weight:800; }.primary:disabled { opacity:.55; cursor:wait; }.status { margin-top:14px; padding:12px 14px; border-radius:9px; background:#edf8f2; border:1px solid #bfe4ce; color:var(--good); }.status.error { color:#963d00; background:#fff3eb; border-color:#efc5a9; }
.notice { margin-top:16px; padding:13px 15px; color:#73500e; background:#fff8e8; border:1px solid #f0d28a; border-radius:10px; }.notice strong { color:#60420b; }
.function-layout { display:grid; grid-template-columns:minmax(250px, .78fr) minmax(0, 1.6fr); gap:18px; margin-top:18px; }
.function-tree { border:1px solid var(--line); border-radius:12px; background:#fbfcfd; padding:14px; min-width:0; }
.function-tree input { width:100%; height:38px; border:1px solid var(--line); border-radius:8px; padding:0 10px; background:#fff; color:var(--ink); }
.tree-chips { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }.chip { border:1px solid var(--line); border-radius:99px; padding:5px 9px; background:#fff; color:var(--muted); font-size:12px; font-weight:700; }.chip.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.tree-count { color:var(--muted); font-size:12px; margin-bottom:10px; }.tree-module { border-top:1px solid var(--line); padding:12px 0 4px; }.tree-l1 { display:flex; justify-content:space-between; gap:8px; color:var(--ink); font-size:14px; font-weight:800; }.tree-l1 b { color:var(--brand); }.tree-l2 { margin:8px 0 3px; color:var(--muted); font-size:12px; font-weight:700; }.tree-l3 { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; border:0; border-radius:7px; padding:8px; background:transparent; color:var(--ink); text-align:left; font-size:14px; }.tree-l3 small { color:var(--muted); font-size:11px; }.tree-l3:hover,.tree-l3.selected { background:var(--brand-soft); color:var(--brand); }.tree-l3[hidden],.tree-module[hidden] { display:none; }
.function-detail { border:1px solid var(--line); border-radius:12px; background:#fff; padding:18px; min-width:0; }.fn-crumb { color:var(--muted); font-size:12px; margin-bottom:10px; }.fn-head { display:flex; align-items:start; justify-content:space-between; gap:14px; }.fn-head h3 { font-size:24px; }.version-line { margin-top:4px; color:var(--muted); font-size:13px; }.fn-actions { display:flex; flex-wrap:wrap; gap:7px; justify-content:end; }.btn { min-height:34px; border:1px solid var(--brand); border-radius:7px; padding:0 10px; background:var(--brand); color:#fff; font-size:12px; font-weight:800; }.btn.secondary { background:#fff; color:var(--brand); border-color:var(--line); }.btn.flagged { background:#fff3d9; color:#85540c; border-color:#f0d28a; }.kind-tabs { display:flex; gap:5px; border-bottom:1px solid var(--line); margin-top:16px; overflow:auto; }.kind-tab { border:0; border-bottom:3px solid transparent; padding:10px 12px; background:transparent; color:var(--muted); font-weight:800; white-space:nowrap; }.kind-tab.active { border-color:var(--brand); color:var(--brand); }.kind-badge { margin-left:3px; color:var(--good); font-size:11px; }.internal-note { margin:15px 0; padding:12px; border:1px solid #f0d28a; border-radius:9px; background:#fffaf0; }.note-label { display:block; color:#73500e; font-size:12px; font-weight:800; margin-bottom:7px; }.internal-note textarea { width:100%; box-sizing:border-box; resize:vertical; border:1px solid #e0c77e; border-radius:7px; padding:8px; font:inherit; }.internal-note .btn { margin-top:7px; }.kind-panel { padding-top:14px; }.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.field.wide { grid-column:1/-1; }.field label { display:block; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }.field .val { margin-top:4px; color:#30465d; line-height:1.55; }.gap-verdict { display:grid; gap:4px; margin-top:14px; padding:12px; border-radius:9px; background:#fff8e8; border:1px solid #f0d28a; color:#60420b; }.gap-verdict span { color:#73500e; }.process-link { padding:12px 0; border-bottom:1px solid var(--line); }.process-link b { color:var(--brand); }.process-link p { margin:4px 0 0; color:#405268; }.point-list { display:grid; gap:8px; }.point { display:flex; gap:10px; padding:9px; border:1px solid var(--line); border-radius:8px; }.point b { color:var(--brand); }.schema-entity { margin-top:18px; border:1px solid var(--line); border-radius:10px; padding:14px; }.schema-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }.schema-head h4 { margin:0; font-size:18px; }.schema-head span { color:var(--muted); font-size:12px; }
.discovery-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:22px; }.discovery-tabs { margin-top:18px; }.session-count { margin:16px 0 9px; color:var(--brand); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.session-log { display:grid; gap:10px; }.session-log-row { padding:14px; border:1px solid var(--line); border-radius:10px; background:#fff; }.session-log-head { color:var(--muted); font-size:13px; }.session-log-title { margin-top:4px; font-size:17px; font-weight:800; }.session-log-reps,.session-log-sources { margin-top:9px; font-size:13px; }.rep-chip,.attach-chip { display:inline-flex; align-items:center; gap:3px; margin:3px 5px 0 0; padding:4px 8px; border-radius:999px; background:var(--brand-soft); color:var(--brand); }.rep-role { display:block; margin-top:3px; color:var(--muted); font-size:12px; }.session-log-outcome { margin-top:10px; color:#30465d; font-size:13px; font-weight:700; }.session-muted { color:var(--muted); }.resource-list { display:grid; gap:8px; margin-top:12px; }.resource-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:13px; }.gap-note { margin-top:14px; padding:10px 12px; border-radius:8px; background:var(--surface-sunken); color:var(--muted); font-size:13px; }.gap-note b { color:var(--review-text); }
@media (max-width:760px) { .shell { padding-left:16px; padding-right:16px; }.header-inner,.workspace-head { align-items:start; flex-direction:column; }.identity { white-space:normal; }.engagement-control { width:100%; }.stats,.record-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:900px) { .function-layout { grid-template-columns:1fr; } }
@media (max-width:600px) { .fn-head { flex-direction:column; }.fn-actions { justify-content:start; }.field-grid { grid-template-columns:1fr; }.field.wide { grid-column:auto; } }
@media (max-width:480px) { .stats,.record-grid { grid-template-columns:1fr; }.site-header h1 { font-size:29px; } }
.build-footer { padding:18px 28px; color:var(--muted); font-size:12px; text-align:center; }