:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --color-bg: #ffffff;
  --color-bg-secondary: #f7f7f8;
  --color-border: #e5e5e7;
  --color-border-light: #f0f0f2;
  --color-text: #1a1a1a;
  --color-text-secondary: #6b6b6f;
  --color-text-tertiary: #9b9ba0;
  --accent: #1D9E75;
  --accent-light: #E1F5EE;
  --accent-dark: #085041;
  --yellow: #EF9F27;
  --yellow-light: #FAEEDA;
  --yellow-dark: #633806;
  --red: #E24B4A;
  --red-light: #FCEBEB;
  --red-dark: #791F1F;
  --green: #639922;
  --green-light: #EAF3DE;
  --green-dark: #27500A;
  --purple: #534AB7;
  --purple-light: #EEEDFE;
  --purple-dark: #3C3489;
  --purple-mid: #CECBF6;
  --blue: #2C7BE5;
  --blue-light: #E3F0FD;
  --blue-dark: #173E78;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1e;
    --color-bg-secondary: #242428;
    --color-border: #3a3a3e;
    --color-border-light: #2e2e32;
    --color-text: #e8e8ec;
    --color-text-secondary: #a0a0a5;
    --color-text-tertiary: #6e6e73;
    --accent-light: #0d3b2c;
    --accent-dark: #8ce8c4;
    --yellow-light: #3d2e0e;
    --yellow-dark: #f0c060;
    --red-light: #3d1a1a;
    --red-dark: #f08080;
    --green-light: #1e2e0e;
    --green-dark: #a0d060;
    --purple-light: #26243a;
    --purple-dark: #a8a0e8;
    --purple-mid: #3a3660;
    --blue-light: #122438;
    --blue-dark: #8cb8f0;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.5; }
.container { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem; }
.brand { font-size: 12px; font-weight: 500; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
h1 { font-size: 22px; font-weight: 600; margin-bottom: 1.5rem; color: var(--color-text); }

/* Navigation */
.nav { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: .5px solid var(--color-border); flex-wrap: wrap; }
.nb { background: none; border: none; padding: 10px 20px; font-size: 14px; font-weight: 400; color: var(--color-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: all .2s; font-family: var(--font-sans); }
.nb.a { color: var(--color-text); border-bottom-color: var(--accent); font-weight: 500; }
.nb:hover { color: var(--color-text); }

/* Views */
.vw { display: none; } .vw.a { display: block; }

/* Safe message */
.smsg { background: var(--accent-light); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 1.5rem; color: var(--accent-dark); font-size: 14px; line-height: 1.6; }

/* Form */
.fg { margin-bottom: 1.25rem; }
.fg label { display: block; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 6px; font-weight: 500; }
.fg input, .fg textarea, .fg select {
  width: 100%; font-family: var(--font-sans); font-size: 14px;
  padding: 8px 12px; border: .5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg); color: var(--color-text);
}
.fg input:focus, .fg textarea:focus, .fg select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,158,117,.12); }
.fg textarea { min-height: 68px; resize: vertical; }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .fr { grid-template-columns: 1fr; } }

/* Risk questions */
.rq { background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 8px; }
.rql { font-size: 13px; color: var(--color-text); margin-bottom: 8px; line-height: 1.5; }
.rqr { display: flex; align-items: center; gap: 12px; }
.rqr input[type=range] { flex: 1; accent-color: var(--accent); }
.rqv { font-size: 13px; font-weight: 500; min-width: 16px; text-align: center; color: var(--color-text); }
.rqh { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; }

/* Buttons */
.btn { background: var(--accent); color: white; border: none; padding: 10px 28px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; cursor: pointer; font-family: var(--font-sans); }
.btn:hover { opacity: .9; } .btn:active { transform: scale(.98); }
.btn.purple { background: var(--purple); }
.btn.ghost { background: none; color: var(--color-text-secondary); border: .5px solid var(--color-border); }
.btn.ghost:hover { background: var(--color-bg-secondary); color: var(--color-text); opacity: 1; }
.add-btn { background: none; border: .5px solid var(--color-border); border-radius: var(--radius-md); padding: 6px 14px; font-size: 12px; color: var(--color-text-secondary); cursor: pointer; font-family: var(--font-sans); }
.add-btn:hover { background: var(--color-bg-secondary); color: var(--color-text); }
.exp-btn { background: none; border: .5px solid var(--color-border); border-radius: var(--radius-md); padding: 6px 14px; font-size: 12px; color: var(--color-text-secondary); cursor: pointer; font-family: var(--font-sans); display: inline-flex; align-items: center; gap: 6px; }
.exp-btn:hover { background: var(--color-bg-secondary); color: var(--color-text); }
.flag-btn { background: var(--purple-light); color: var(--purple-dark); border: none; padding: 6px 14px; border-radius: var(--radius-md); font-size: 12px; font-weight: 500; cursor: pointer; font-family: var(--font-sans); }
.flag-btn:hover { background: var(--purple-mid); }

/* Success */
.okmsg { background: var(--green-light); color: var(--green-dark); border-radius: var(--radius-lg); padding: 20px; text-align: center; font-size: 14px; line-height: 1.6; }

/* Metrics */
.ms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 1.5rem; }
@media (max-width: 600px) { .ms { grid-template-columns: repeat(2, 1fr); } }
.mt { background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: 14px 16px; }
.mtl { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; }
.mtv { font-size: 22px; font-weight: 500; color: var(--color-text); }

/* Tier badges */
.tb { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 10px; border-radius: var(--radius-md); }
.tg { background: var(--green-light); color: var(--green-dark); }
.ty { background: var(--yellow-light); color: var(--yellow-dark); }
.tr { background: var(--red-light); color: var(--red-dark); }
.tf { background: var(--purple-light); color: var(--purple-dark); }
.tbl { background: var(--blue-light); color: var(--blue-dark); }

/* Cards */
.sl { display: flex; flex-direction: column; gap: 10px; }
.sc { background: var(--color-bg); border: .5px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.sc.fl { border-left: 3px solid var(--purple); }
.sc.cat { border-left: 3px solid var(--blue); }
.sc.re { border-left: 3px solid var(--yellow); }
.sh { padding: 14px 18px; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.sh:hover { background: var(--color-bg-secondary); }
.sn { font-size: 14px; font-weight: 500; color: var(--color-text); flex: 1; }
.sm2 { font-size: 12px; color: var(--color-text-secondary); }
.ss2 { font-size: 13px; font-weight: 500; min-width: 40px; text-align: right; }
.sa { font-size: 12px; color: var(--color-text-tertiary); transition: transform .2s; }
.sc.op .sa { transform: rotate(90deg); }
.sb2 { display: none; padding: 0 18px 16px; border-top: .5px solid var(--color-border); }
.sc.op .sb2 { display: block; padding-top: 14px; }

/* Detail grid */
.dg { display: grid; grid-template-columns: 120px 1fr; gap: 6px 16px; font-size: 13px; margin-bottom: 14px; }
.dll { color: var(--color-text-secondary); } .dlv { color: var(--color-text); }

/* Phase track */
.pt { display: flex; gap: 3px; margin-top: 10px; }
.pd { flex: 1; height: 6px; border-radius: 3px; background: var(--color-border); }
.pd.dn { background: var(--accent); } .pd.cu { background: var(--yellow); }
.pl { display: flex; gap: 3px; margin-top: 4px; }
.plb { flex: 1; font-size: 9px; color: var(--color-text-tertiary); text-align: center; }
.plb.act { color: var(--color-text); font-weight: 500; }
.ps { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ps label { font-size: 12px; color: var(--color-text-secondary); }
.ps select { font-size: 12px; font-family: var(--font-sans); padding: 4px 8px; border: .5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); }

/* Section tabs */
.sec-tabs { display: flex; gap: 0; margin-bottom: 1rem; border-bottom: .5px solid var(--color-border); flex-wrap: wrap; }
.stb { background: none; border: none; padding: 8px 16px; font-size: 13px; font-weight: 400; color: var(--color-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; font-family: var(--font-sans); }
.stb.a { color: var(--color-text); font-weight: 500; border-bottom-color: var(--accent); }
.stb:hover { color: var(--color-text); }
.stb.bkt.a { border-bottom-color: var(--purple); }
.stb.blt.a { border-bottom-color: var(--blue); }
.cnt { background: var(--color-bg-secondary); font-size: 11px; padding: 1px 6px; border-radius: 10px; margin-left: 6px; }

/* File upload */
.fz { border: 1.5px dashed var(--color-border); border-radius: var(--radius-lg); padding: 20px; text-align: center; cursor: pointer; transition: all .2s; margin-bottom: 4px; }
.fz:hover { border-color: var(--accent); background: var(--accent-light); }
.fz.hf { border-color: var(--accent); background: var(--accent-light); }
.fzt { font-size: 13px; color: var(--color-text-secondary); }
.fz.hf .fzt { color: var(--accent-dark); font-weight: 500; }
.fhint { font-size: 11px; color: var(--color-text-tertiary); margin-top: 4px; }
.fb2 { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-light); color: var(--accent-dark); font-size: 12px; padding: 4px 10px; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; }
.fb2:hover { opacity: .85; }

/* Flag box */
.flag-box { background: var(--purple-light); border-radius: var(--radius-md); padding: 14px 18px; margin-top: 12px; border: .5px solid var(--purple-mid); }
.flag-box textarea { width: 100%; min-height: 60px; font-family: var(--font-sans); resize: vertical; margin: 8px 0; font-size: 13px; padding: 8px 12px; border: .5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); }
.flag-reason { background: var(--purple-light); border-radius: var(--radius-md); padding: 10px 14px; margin-top: 10px; font-size: 13px; color: var(--purple-dark); line-height: 1.6; border-left: 3px solid var(--purple); }

/* Guide box */
.gb { background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: 14px 18px; margin-top: 12px; }
.gbt { font-size: 13px; font-weight: 500; color: var(--color-text); margin-bottom: 8px; }
.gbg { font-size: 12px; color: var(--accent-dark); background: var(--accent-light); display: inline-block; padding: 2px 10px; border-radius: var(--radius-md); margin-bottom: 10px; }
.gbi { font-size: 13px; color: var(--color-text); line-height: 1.7; }
.gbi div { padding: 2px 0 2px 16px; position: relative; }
.gbi div::before { content: "—"; position: absolute; left: 0; color: var(--color-text-tertiary); }
.gbq { font-size: 12px; color: var(--color-text-secondary); font-style: italic; margin-top: 8px; line-height: 1.6; }
.gbs { font-size: 12px; margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--accent); color: var(--color-text-secondary); line-height: 1.5; }

/* Map workspace */
.map-ws { margin-top: 16px; border: .5px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.map-hdr { background: var(--color-bg-secondary); padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; }
.map-title { font-size: 14px; font-weight: 500; color: var(--color-text); }
.map-body { padding: 18px; }
.map-sec { margin-bottom: 20px; } .map-sec:last-child { margin-bottom: 0; }
.map-sec-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.map-sec-num { width: 22px; height: 22px; border-radius: 50%; background: var(--color-bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--color-text-secondary); }
.map-sec-t { font-size: 13px; font-weight: 500; color: var(--color-text); flex: 1; }
.map-sec-hint { font-size: 11px; color: var(--color-text-tertiary); padding-left: 30px; margin-bottom: 8px; line-height: 1.5; }
.map-ta { width: 100%; min-height: 56px; font-family: var(--font-sans); resize: vertical; font-size: 13px; padding: 8px 12px; border: .5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); }
.map-ta:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,158,117,.12); }
.wf-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.wf-item { display: flex; gap: 8px; align-items: flex-start; background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: 8px 12px; }
.wf-num { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); min-width: 20px; padding-top: 6px; }
.wf-fields { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wf-fields input { font-size: 12px; font-family: var(--font-sans); padding: 6px 8px; border: .5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); }
.wf-fields input:focus { outline: none; border-color: var(--accent); }
.wf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wf-del { background: none; border: none; font-size: 14px; color: var(--color-text-tertiary); cursor: pointer; padding: 4px 6px; } .wf-del:hover { color: var(--red); }
.map-ro { font-size: 13px; color: var(--color-text); line-height: 1.7; white-space: pre-wrap; }
.map-ro-sec { margin-bottom: 14px; }
.map-ro-t { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.map-ro-wf { background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 4px; font-size: 13px; }
.map-ro-wf-n { font-weight: 500; color: var(--color-text); }
.map-ro-wf-d { color: var(--color-text-secondary); font-size: 12px; }
.map-complete { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); font-weight: 500; }
.save-map { background: var(--accent); color: white; border: none; padding: 8px 20px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font-sans); }
.save-map:hover { opacity: .9; }

/* Misc */
.rst { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .5px; }
.stt { font-size: 14px; font-weight: 500; color: var(--color-text); margin-bottom: 12px; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--color-text-secondary); font-size: 14px; line-height: 1.7; }
.empty .btn { margin-top: 16px; }
.bulk-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.bk-cta { background: var(--purple-light); border-radius: var(--radius-lg); padding: 16px 20px; margin-top: 16px; color: var(--purple-dark); font-size: 13px; line-height: 1.6; }
.bk-cta strong { font-weight: 500; }
.bl-cta { background: var(--blue-light); border-radius: var(--radius-lg); padding: 16px 20px; margin-top: 16px; color: var(--blue-dark); font-size: 13px; line-height: 1.6; }
.bl-cta strong { font-weight: 500; }
.dl-link { display: none; }

/* Catalog: system form */
.cat-form { background: var(--color-bg-secondary); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 1.5rem; border: .5px solid var(--color-border); }
.cat-form-title { font-size: 14px; font-weight: 500; color: var(--color-text); margin-bottom: 12px; }
.cat-form .fg input, .cat-form .fg textarea, .cat-form .fg select { background: var(--color-bg); }

/* I/O list (catalog inputs/outputs) */
.io-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.io-item { display: flex; gap: 8px; align-items: flex-start; background: var(--color-bg); border: .5px solid var(--color-border); border-radius: var(--radius-md); padding: 8px 12px; }
.io-fields { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 600px) { .io-fields { grid-template-columns: 1fr; } }
.io-fields input { font-size: 12px; font-family: var(--font-sans); padding: 6px 8px; border: .5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); }
.io-fields input:focus { outline: none; border-color: var(--blue); }
.io-del { background: none; border: none; font-size: 14px; color: var(--color-text-tertiary); cursor: pointer; padding: 4px 6px; } .io-del:hover { color: var(--red); }
.io-arrow { font-size: 12px; color: var(--color-text-tertiary); padding-top: 8px; min-width: 18px; text-align: center; }

/* Catalog read-only inputs/outputs */
.io-ro { display: flex; flex-direction: column; gap: 4px; }
.io-ro-item { background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: 6px 12px; font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.io-ro-arrow { color: var(--blue); font-weight: 500; min-width: 20px; }
.io-ro-target { font-weight: 500; color: var(--color-text); }
.io-ro-data { color: var(--color-text-secondary); font-size: 12px; }

/* Integration map */
.imap { display: flex; flex-direction: column; gap: 12px; }
.imap-node { background: var(--color-bg); border: .5px solid var(--color-border); border-left: 3px solid var(--blue); border-radius: var(--radius-lg); padding: 14px 18px; }
.imap-node-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.imap-node-name { font-size: 14px; font-weight: 500; color: var(--color-text); }
.imap-node-meta { font-size: 12px; color: var(--color-text-secondary); }
.imap-edges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; font-size: 12px; }
@media (max-width: 600px) { .imap-edges { grid-template-columns: 1fr; } }
.imap-col-t { font-size: 11px; font-weight: 500; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.imap-edge { padding: 4px 0; color: var(--color-text); line-height: 1.5; }
.imap-edge .arrow { color: var(--blue); margin: 0 6px; font-weight: 500; }
.imap-edge .data { color: var(--color-text-secondary); font-size: 11px; }
.imap-bridge { margin-top: 10px; padding: 8px 12px; background: var(--purple-light); border-radius: var(--radius-md); color: var(--purple-dark); font-size: 12px; line-height: 1.6; }
.imap-bridge strong { font-weight: 500; }
.imap-orphan { color: var(--color-text-tertiary); font-style: italic; font-size: 12px; }

/* Start Here */
.start-card { background: var(--accent-light); color: var(--accent-dark); border-radius: var(--radius-lg); padding: 22px 24px; font-size: 14.5px; line-height: 1.7; margin-bottom: 1.25rem; }
.start-card p { margin-bottom: 12px; }
.start-card p:last-child { margin-bottom: 0; }
.start-card strong { font-weight: 600; }
.start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 1rem; }
@media (max-width: 600px) { .start-grid { grid-template-columns: 1fr; } }
.start-tile { text-align: left; background: var(--color-bg); border: .5px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 18px; cursor: pointer; font-family: var(--font-sans); transition: all .2s; color: var(--color-text); }
.start-tile:hover { border-color: var(--accent); background: var(--color-bg-secondary); }
.start-tile-t { font-size: 14px; font-weight: 500; margin-bottom: 4px; color: var(--color-text); }
.start-tile-d { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }

/* Leadership view link */
.leadership-link { text-align: center; margin-top: 3rem; padding-top: 1.5rem; border-top: .5px solid var(--color-border-light); }
.leadership-link a { font-size: 11px; color: var(--color-text-tertiary); text-decoration: none; letter-spacing: .3px; }
.leadership-link a:hover { color: var(--color-text-secondary); text-decoration: underline; }