:root{
  --bg:#F3F5F7;
  --surface:#FFFFFF;
  --surface-2:#FAFCFE;
  --ink:#171B21;
  --ink-soft:#525C68;
  --ink-faint:#8892A0;
  --line:#D3DAE2;
  --line-soft:#E4E9EE;
  --accent:#1D6F63;
  --accent-soft:#E4F0EE;
  --proof:#9C6B1F;
  --proof-soft:#FBF1DF;
  --danger:#B3413A;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  line-height:1.5;
}
code,.mono{font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Consolas,monospace;}


.sidebar h1{font-size:16px; margin:0; font-weight:700;}
.sidebar .eyebrow{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 4px;}

.field label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:6px; font-family:'IBM Plex Mono',monospace;}
select, input[type=text]{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--ink); font-size:13px; font-family:inherit;
}
button{
  font-family:inherit; font-size:13px; font-weight:600; padding:8px 12px;
  border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:white;
  cursor:pointer;
}
button.secondary{background:var(--surface); color:var(--accent);}
button:hover{opacity:.9;}
button:disabled{opacity:.5; cursor:default;}

.employee-list{display:flex; flex-direction:column; gap:6px;}
.employee-card{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  border:1px solid var(--line-soft); cursor:pointer; background:var(--surface-2);
}
.employee-card.active{border-color:var(--accent); background:var(--accent-soft);}
.avatar{
  width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none;
}
.employee-card .meta{font-size:12px;}
.employee-card .name{font-weight:600;}
.employee-card .role{color:var(--ink-faint); font-size:11px;}

.hire-form{display:flex; flex-direction:column; gap:8px;}

.main{padding:28px 36px; overflow-y:auto;}
.empty-state{color:var(--ink-faint); font-size:14px; margin-top:60px; text-align:center;}

.situations-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.situations-header h2{margin:0; font-size:20px;}

.situation-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface);
  margin-bottom:8px; cursor:pointer;
}
.situation-row:hover{border-color:var(--accent);}
.badge{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:20px; background:var(--surface-2); border:1px solid var(--line);
}
.badge.closed{color:var(--accent); border-color:var(--accent);}

.timeline{position:relative; padding-left:26px; margin-top:20px;}
.timeline::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line);}
.event{position:relative; margin-bottom:16px;}
.event::before{content:""; position:absolute; left:-26px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--accent); border:2px solid var(--accent);}
.card{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px 18px;}
.t{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-faint); margin:0 0 4px;}

.hyp-card{border-left:3px solid var(--accent);}
.hyp-card .stmt{font-style:italic; margin:0 0 8px;}
.conf-row{display:flex; align-items:center; gap:10px; margin-bottom:4px;}
.conf-label{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); width:100px; flex:none;}
.conf-track{flex:1; height:8px; background:var(--line-soft); border-radius:4px; overflow:hidden;}
.conf-fill{height:100%; background:var(--accent);}
.conf-num{font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--accent); width:36px; text-align:right;}

.decision-card{border:1px solid var(--accent); background:var(--accent-soft);}
.decision-card .sel{font-weight:600; margin:0 0 6px;}
.decision-card .rationale{font-size:13px; color:var(--ink-soft);}
.pill{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:2px 8px; border-radius:12px; background:var(--surface); border:1px solid var(--line); margin-right:6px; margin-top:6px;}

.lesson-card{background:var(--surface); border:2px solid var(--accent); border-radius:10px; padding:18px 20px;}
.lesson-card .label{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 8px;}

.demo-btns{display:flex; flex-direction:column; gap:6px;}
.back-link{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent); cursor:pointer; margin-bottom:16px; display:inline-block;}

.rollup{
  display:flex; gap:18px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft);
  padding:10px 14px; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:8px; margin-bottom:14px;
}

.impact-banner{
  background:var(--accent); color:white; border-radius:10px; padding:16px 20px; margin:16px 0 6px;
}
.impact-banner .headline{margin:0; font-size:16px; font-weight:700;}
.impact-banner .detail{margin:4px 0 0; font-size:12.5px; opacity:.85;}

.reasoning-trace{display:flex; flex-direction:column; gap:10px; margin-top:24px;}
.reasoning-line{display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-faint); opacity:0; animation:fade-in .25s ease forwards;}
.reasoning-line .dot{width:8px; height:8px; border-radius:50%; background:var(--line); flex:none; animation:pulse 1s ease-in-out infinite;}
.reasoning-line.done{color:var(--ink);}
.reasoning-line.done .dot{background:var(--accent); animation:none;}
@keyframes fade-in{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}
@keyframes pulse{0%,100%{opacity:.4;} 50%{opacity:1;}}

/* ---------- tabs, forms, pilot views ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin:-8px 0 22px; flex-wrap:wrap;}
.tab{background:none; border:none; border-bottom:2px solid transparent; border-radius:0; color:var(--ink-soft); padding:9px 14px; font-weight:600; font-size:13px; cursor:pointer;}
.tab:hover{color:var(--ink); opacity:1;}
.tab.active{color:var(--accent); border-bottom-color:var(--accent);}
.tab .count{display:inline-block; min-width:18px; padding:0 6px; margin-left:6px; border-radius:10px; background:var(--proof); color:#fff; font-size:11px; line-height:18px; text-align:center;}

h3.section{font-size:13px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin:26px 0 10px; font-weight:600;}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:14px;}
.panel p{margin:0 0 8px;}
.muted{color:var(--ink-soft); font-size:13px;}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.field-block{margin-bottom:12px;}
.field-block label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:5px; font-family:'IBM Plex Mono',monospace;}
textarea{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:13px; min-height:64px; resize:vertical;}
input[type=password], input[type=number]{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--surface); font-size:13px; font-family:inherit;}
pre.code{background:#101820; color:#d8e4ee; border-radius:8px; padding:12px 14px; font-family:'IBM Plex Mono',monospace; font-size:12px; overflow-x:auto; margin:8px 0;}
button.danger{background:var(--surface); color:var(--danger); border-color:var(--danger);}
button.small{padding:5px 10px; font-size:12px;}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:14px;}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px;}
.kpi .v{font-size:20px; font-weight:700;} .kpi .l{font-size:11px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.05em;}
.kpi .s{font-size:12px; color:var(--ink-soft);}
.kpi.warn .v{color:var(--proof);} .kpi.bad .v{color:var(--danger);} .kpi.good .v{color:var(--accent);}

.check{display:flex; gap:8px; align-items:flex-start; font-size:13px; margin:3px 0;}
.check .mark{font-family:'IBM Plex Mono',monospace; font-weight:700; width:18px; flex:none;}
.check.ok .mark{color:var(--accent);} .check.no .mark{color:var(--danger);} .check.no{color:var(--danger);}
.notice{border:1px solid var(--proof); background:var(--proof-soft); color:#5a3d0b; border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:14px;}
.notice.err{border-color:var(--danger); background:#fbeceb; color:#7c2620;}
.notice.ok{border-color:var(--accent); background:var(--accent-soft); color:#0f4c43;}

.approval{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--proof); border-radius:10px; padding:16px 18px; margin-bottom:14px;}
.approval.blocked{border-left-color:var(--danger);} .approval.approved{border-left-color:var(--accent);} .approval.verifying{border-left-color:var(--ink-faint);}
.approval .title{font-weight:700; margin:0 0 4px;} .approval .rationale{font-size:13px; color:var(--ink-soft); margin:6px 0 10px;}
.stage{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:20px; border:1px solid var(--line); margin-right:8px;}
.history{font-size:12px; color:var(--ink-soft); margin-top:10px; border-top:1px dashed var(--line); padding-top:8px;}

.kv{display:grid; grid-template-columns:max-content 1fr; gap:3px 14px; font-size:12.5px;}
.kv .k{color:var(--ink-faint); font-family:'IBM Plex Mono',monospace;} .kv .v{word-break:break-word;}
details.evidence{margin:6px 0;} details.evidence summary{cursor:pointer; font-size:13px; color:var(--ink-soft);}
.evrow{border-top:1px solid var(--line-soft); padding:6px 0; font-size:12.5px;} .evrow .src{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-faint);}
.tag{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:1px 7px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); margin-right:5px;}
.sample-pill{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.05em; background:var(--proof-soft); color:var(--proof); border:1px solid var(--proof); border-radius:10px; padding:1px 7px; margin-left:6px;}
.spark{display:flex; align-items:flex-end; gap:3px; height:44px;} .spark div{flex:1; background:var(--accent); opacity:.75; border-radius:2px 2px 0 0; min-height:2px;}
.spark-labels{display:flex; gap:3px; font-size:10px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace;} .spark-labels span{flex:1; text-align:center;}

/* ---------- product shell ---------- */
input[type=email]{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); font-size:13px; font-family:inherit;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent-soft); border-color:var(--accent);}
input[readonly]{background:var(--surface-2); color:var(--ink-soft);}
button.wide{width:100%; padding:10px 14px; font-size:14px;}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 4px;}
.help{font-size:12px; color:var(--ink-faint); margin:4px 0 0;}
.lede{color:var(--ink-soft); font-size:14px; max-width:70ch;}

.topbar{display:flex; align-items:center; gap:24px; padding:0 28px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; flex-wrap:wrap;}
.topbar .brand{display:flex; flex-direction:column; padding:10px 0;}
.topbar .brand b{font-size:15px;}
.topbar .tabs{flex:1; border:none; margin:0; flex-wrap:wrap;}
.user-chip{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft);}
.page{max-width:1080px; margin:0 auto; padding:28px 28px 80px;}
.page-head{margin-bottom:18px;} .page-head h2{margin:0 0 4px; font-size:22px;} .page-head p{margin:0; max-width:75ch;}

.action-banner{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--proof-soft); border:1px solid var(--proof); color:#5a3d0b; border-radius:10px; padding:12px 16px; margin-bottom:16px; font-weight:600;}
.toprow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 0; font-size:13px; border-bottom:1px solid var(--line-soft);} .toprow:last-child{border-bottom:none;}
.roster{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px;}
.employee-card.big{padding:14px 16px; align-items:flex-start;} .employee-card.big .avatar{width:38px; height:38px; font-size:16px;}
.employee-card .blurb{font-size:12.5px; color:var(--ink-soft); margin:4px 0;}
.pills{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.pill-btn{background:var(--surface); color:var(--ink-soft); border:1px solid var(--line); border-radius:20px; padding:6px 14px; font-weight:500;}
.pill-btn.active{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}

/* auth */
.auth-page{min-height:100vh; display:grid; grid-template-columns:minmax(340px,440px) minmax(280px,420px); gap:48px; align-items:center; justify-content:center; padding:32px;}
.auth-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:32px;}
.auth-card h1{margin:0 0 6px; font-size:24px;}
.auth-form{margin-top:18px;}
.auth-switch{margin:16px 0 0; font-size:13px; color:var(--ink-soft);} .auth-switch a{color:var(--accent); cursor:pointer; font-weight:600;}
.auth-trust h2{font-size:13px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);}
.auth-trust li{margin-bottom:12px; color:var(--ink-soft); font-size:14px;}
@media (max-width:900px){.auth-page{grid-template-columns:1fr; gap:24px;}}

/* wizard */
.wizard{max-width:1100px; margin:0 auto; padding:28px;}
.wiz-top{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;}
.wiz-top h1{margin:0; font-size:24px;}
.steps{display:flex; gap:8px; list-style:none; padding:0; margin:22px 0 26px; flex-wrap:wrap;}
.steps li{display:flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line); border-radius:24px; background:var(--surface); color:var(--ink-faint); font-size:13px; font-weight:600;}
.steps li .n{width:20px; height:20px; border-radius:50%; background:var(--line-soft); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-family:'IBM Plex Mono',monospace;}
.steps li.current{color:var(--accent); border-color:var(--accent); background:var(--accent-soft);} .steps li.current .n{background:var(--accent); color:#fff;}
.steps li.done{color:var(--ink-soft);} .steps li.done .n{background:var(--accent); color:#fff;} .steps li.clickable{cursor:pointer;}
.wiz-body h2{margin:0 0 6px; font-size:20px;}
.step-h{margin:0 0 8px; font-size:15px;}
.connect-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px; align-items:start; margin-top:14px;}
@media (max-width:900px){.connect-grid{grid-template-columns:1fr;}}
.roles{font-size:13px; color:var(--ink-soft); padding-left:18px;} .roles li{margin-bottom:4px;}
.codewrap{position:relative;} .codewrap .copy{position:absolute; top:12px; right:8px; z-index:1;}
.codewrap pre.code{padding-right:70px; white-space:pre; overflow-x:auto;} .codewrap pre.code.wrap{white-space:pre-wrap; overflow-wrap:anywhere;}
.perm-list{margin-top:10px;} .perm{padding:6px 0; border-top:1px solid var(--line-soft); font-size:13px;}
.perm .mark{font-family:'IBM Plex Mono',monospace; font-weight:700; width:16px;} .perm.ok .mark{color:var(--accent);} .perm.no .mark, .perm.no b{color:var(--danger);}
.perm .hint{margin:4px 0 0 24px; font-size:12.5px; color:var(--ink-soft);}
.checks{margin-top:6px;}
.scan-stages{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.scan-stage{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-faint);}
.scan-stage .dot{width:10px; height:10px; border-radius:50%; background:var(--line);}
.scan-stage.done{color:var(--ink);} .scan-stage.done .dot{background:var(--accent);}
.scan-stage.running{color:var(--ink); font-weight:600;} .scan-stage.err{color:var(--danger);} .scan-stage.err .dot{background:var(--danger);}
.dot.spin{background:transparent !important; border:2px solid var(--accent-soft); border-top-color:var(--accent); animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}