:root {
  --bg: #f3f7f8;
  --panel: #fff;
  --text: #16282d;
  --muted: #687a80;
  --line: #dfe8e9;
  --primary: #176b74;
  --primary-strong: #0e5961;
  --primary-soft: #e9f5f5;
  --success: #16825f;
  --warn: #c47a18;
  --danger: #c74646;
  --nav: #102c32;
  --nav2: #153b42;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(21,57,65,.07);
}

body {
  min-width: 1024px;
  background: radial-gradient(circle at 80% 0, rgba(31,137,145,.06), transparent 28%), var(--bg);
}

.sidebar { width:236px; background:linear-gradient(180deg,#102c32 0%,#0e252b 100%); padding:16px 12px; }
.main { margin-left:236px; }
.brand { padding:4px 8px 16px; margin-bottom:6px; }
.brand-mark { background:linear-gradient(145deg,#2b9ca4,#176b74); box-shadow:0 8px 22px rgba(23,107,116,.38); }
.brand strong { font-size:15px; }
.brand small { color:#8fb0b5; }
.sidebar nav { gap:0; padding-right:2px; }
.nav-group { padding-top:11px; }
.nav-label { padding:0 12px 5px; color:#6f9297; font-size:10px; letter-spacing:.1em; }
.nav-item { padding:8px 11px; color:#adc1c5; }
.nav-item.active { background:#1b6972; box-shadow:inset 3px 0 0 #79d8d5; }
.nav-item:hover { background:rgba(255,255,255,.07); }
.side-note { border-color:rgba(142,211,210,.16); background:rgba(89,170,171,.08); color:#98b3b7; }
.side-note strong { color:#e9ffff; }
.system-kicker { font-size:10px; letter-spacing:.08em; color:#79c3c3; }

.topbar { height:72px; padding:0 24px; }
.topbar h1 { font-size:18px; }
.crumb { color:#809196; }
.context-bar { height:38px; padding:0 24px; background:#f9fbfb; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; color:#6a7c82; font-size:11px; position:sticky; top:72px; z-index:14; }
.context-bar a { margin-left:auto; color:var(--primary); font-weight:700; }
.module-tag { padding:4px 8px; background:var(--primary-soft); border:1px solid #cfe7e6; border-radius:20px; color:var(--primary-strong); font-weight:700; }
.connection-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid #d6e7e5; background:#f3fbf8; color:#277158; border-radius:20px; font-size:11px; white-space:nowrap; }
.connection-pill i { width:7px; height:7px; background:#20a26d; border-radius:50%; box-shadow:0 0 0 3px rgba(32,162,109,.12); }
.role-switch { background:#f7fafb; border-color:#dce6e8; }
.avatar { background:#dff2f1; color:#176b74; }
.content { padding:22px 24px 50px; max-width:1560px; margin:0 auto; }

.btn.primary { background:var(--primary); border-color:var(--primary); }
.btn.primary:hover { background:var(--primary-strong); }
.btn.soft { background:var(--primary-soft); border-color:#cfe7e6; color:var(--primary); }
.link { color:var(--primary); }
.tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.switch.on { background:var(--primary); }
.progress-stage span.done { background:var(--primary); }
.card { box-shadow:var(--shadow); }
.kpi-card { position:relative; overflow:hidden; }
.kpi-card:after { content:""; position:absolute; width:54px; height:54px; border-radius:50%; background:var(--primary-soft); right:-18px; bottom:-18px; }
.kpi-card .trend.neutral { background:#eef2f4; color:#65747a; }
.kpi-card .trend.warn { background:#fff4df; color:#aa6a16; }
.kpi-card .trend.danger { background:#fff0f0; color:#bd4545; }
.page-head { align-items:center; }
.page-head h2 { font-size:21px; }
.page-head p { line-height:1.6; max-width:850px; }

.scope-banner { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:14px 16px; border:1px solid #cfe3e3; background:linear-gradient(100deg,#edf8f7,#fbfdfd); border-radius:12px; }
.scope-banner .scope-icon { width:38px; height:38px; border-radius:10px; background:#d6efed; display:grid; place-items:center; color:#176b74; font-weight:800; }
.scope-banner strong { display:block; margin-bottom:3px; }
.scope-banner p { margin:0; color:#64777d; font-size:12px; }

.system-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:10px; align-items:stretch; }
.flow-node { border:1px solid var(--line); border-radius:11px; padding:13px; background:#fff; }
.flow-node.active { border-color:#91c7c7; background:#f3fbfa; }
.flow-node small { display:block; color:var(--muted); margin-bottom:5px; }
.flow-node strong { display:block; }
.flow-node p { font-size:11px; color:var(--muted); margin:5px 0 0; line-height:1.5; }
.flow-arrow { display:grid; place-items:center; color:#80a0a3; font-size:18px; }

.boundary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.boundary-card { border:1px solid var(--line); border-radius:11px; padding:15px; background:#fff; }
.boundary-card.client { border-top:3px solid #818da0; }
.boundary-card.partner { border-top:3px solid #4c73c7; }
.boundary-card.us { border-top:3px solid var(--primary); }
.boundary-card h4 { margin:0 0 8px; }
.boundary-card ul { margin:0; padding-left:18px; color:var(--muted); font-size:12px; line-height:1.7; }

.pipeline { display:flex; align-items:flex-start; gap:0; overflow:auto; }
.pipeline-step { min-width:126px; flex:1; position:relative; padding:0 16px 0 0; }
.pipeline-step:not(:last-child):after { content:"→"; position:absolute; right:3px; top:10px; color:#9bb0b2; }
.pipeline-step .dot { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#e9eef0; color:#6c7c81; font-weight:700; margin-bottom:7px; }
.pipeline-step.done .dot { background:#dff3eb; color:#16825f; }
.pipeline-step.active .dot { background:var(--primary); color:#fff; }
.pipeline-step b { display:block; font-size:12px; }
.pipeline-step small { display:block; color:var(--muted); line-height:1.4; margin-top:3px; }

.source-pill { display:inline-flex; padding:3px 7px; border:1px solid #dce5e7; background:#f7f9fa; border-radius:6px; color:#5f7479; font-size:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.status-stack { display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.table-note { font-size:10px; color:#849398; margin-top:3px; }
.evidence-layout { display:grid; grid-template-columns:minmax(360px,1fr) minmax(420px,1.15fr); gap:14px; }
.evidence-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.evidence-anchor { border-left:3px solid #e7be4b; background:#fff9df; padding:7px 9px; margin:6px 0; border-radius:0 7px 7px 0; }
.review-field { display:grid; grid-template-columns:135px minmax(140px,1fr) 90px 110px; gap:7px; align-items:center; padding:7px 0; border-bottom:1px solid #eef2f3; }
.review-field:last-child { border-bottom:0; }
.review-field label { font-size:12px; color:#62767b; }
.review-field .evidence-link { font-size:10px; color:var(--primary); cursor:pointer; }
.review-field .confidence-text { font-size:10px; color:#7c8c90; }

.task-type { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); font-weight:800; }
.task-title { display:flex; gap:9px; align-items:center; }
.task-title b { display:block; }
.task-title small { display:block; color:var(--muted); margin-top:2px; }
.decision-row { display:grid; grid-template-columns:70px 1fr 1.4fr 120px 140px; gap:10px; align-items:center; padding:11px 13px; border-bottom:1px solid var(--line); }
.decision-row:last-child { border-bottom:0; }
.decision-row.header { background:#f7f9fa; color:#74858a; font-size:11px; font-weight:700; }
.empty-state { padding:45px; text-align:center; }
.empty-state .empty-icon { width:52px; height:52px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); font-size:22px; }
.empty-state h3 { margin:0 0 6px; }
.empty-state p { margin:0; color:var(--muted); }
.readonly-banner { padding:10px 13px; background:#f2f5f7; border:1px solid #dfe6e8; border-radius:9px; color:#607379; font-size:12px; display:flex; justify-content:space-between; align-items:center; }
.owner-tag { font-size:10px; padding:3px 7px; border-radius:5px; background:#eaf0fb; color:#4567a8; }
.owner-tag.us { background:#e8f5f3; color:#176b74; }
.owner-tag.client { background:#f1f2f5; color:#667080; }
.field-help { font-size:10px; color:#87959a; line-height:1.4; margin-top:3px; }
.alert-list { display:flex; flex-direction:column; gap:8px; }
.alert-item { border:1px solid var(--line); border-left:3px solid var(--warn); border-radius:9px; padding:11px 12px; display:flex; justify-content:space-between; gap:10px; background:#fff; }
.alert-item.danger { border-left-color:var(--danger); }
.alert-item b { display:block; }
.alert-item p { margin:3px 0 0; color:var(--muted); font-size:11px; }
.legacy-boundary { max-width:900px; margin:40px auto; }
.legacy-boundary .boundary-mark { width:58px; height:58px; border-radius:16px; background:#eef2f8; color:#5870a0; display:grid; place-items:center; font-size:26px; margin-bottom:16px; }
.coverage-list { grid-template-columns:repeat(2,minmax(0,1fr)); }

@media(max-width:1180px) {
  .connection-pill { display:none; }
  .context-bar span:nth-child(2) { display:none; }
  .grid.kpi { grid-template-columns:repeat(2,1fr); }
  .boundary-grid, .evidence-layout, .system-flow { grid-template-columns:1fr; }
  .flow-arrow { transform:rotate(90deg); }
  .review-field { grid-template-columns:120px 1fr 80px; }
  .review-field .evidence-link { display:none; }
}