/* ============================== TOKENS ============================== */
:root{
  --bg:#F3F6F5; --surface:#FFFFFF; --surface-2:#F8FAF9; --surface-3:#EEF2F1;
  --line:#E0E6E4; --line-strong:#C8D2CF;
  --ink:#111715; --ink-2:#3F504A; --ink-3:#6C7D77;
  --accent:#0C6E63; --accent-2:#0A5B52; --accent-soft:#DFEFEC; --accent-ink:#07443D;
  --ok:#1C7A45; --ok-soft:#E1F2E7;
  --warn:#95590A; --warn-soft:#FAEEDB;
  --crit:#A62520; --crit-soft:#FBE6E4;
  --focus:#0C6E63; --on-accent:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(17,23,21,.07);
  --shadow-md:0 2px 4px rgba(17,23,21,.05), 0 12px 28px -14px rgba(17,23,21,.28);
  --shadow-lg:0 4px 8px rgba(17,23,21,.06), 0 32px 64px -24px rgba(17,23,21,.34);
  --s-new:#6C7D77; --s-contacted:#3C6A88; --s-replied:#2A7683; --s-qualified:#0C6E63;
  --s-demo:#4A7629; --s-proposal:#95590A; --s-won:#1C7A45; --s-lost:#93A09B;
  --grid:rgba(17,23,21,.07);
  --r-sm:5px; --r-md:8px; --r-lg:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B100F; --surface:#131A18; --surface-2:#182120; --surface-3:#1E2A27;
    --line:#222E2B; --line-strong:#33423E;
    --ink:#E7EEEB; --ink-2:#A7B6B1; --ink-3:#7C8D88;
    --accent:#3BC4B0; --accent-2:#57D6C4; --accent-soft:#10312D; --accent-ink:#9AE6DA;
    --ok:#54D083; --ok-soft:#11301F;
    --warn:#E9AB43; --warn-soft:#312512;
    --crit:#F2746C; --crit-soft:#381A18;
    --focus:#57D6C4; --on-accent:#06211D;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow-md:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.8);
    --shadow-lg:0 4px 8px rgba(0,0,0,.4), 0 32px 64px -24px rgba(0,0,0,.9);
    --s-new:#8A9B95; --s-contacted:#6BA3C6; --s-replied:#4FB3C0; --s-qualified:#3BC4B0;
    --s-demo:#8CC257; --s-proposal:#E9AB43; --s-won:#54D083; --s-lost:#6E7C77;
    --grid:rgba(231,238,235,.09);
  }
}
:root[data-theme="dark"]{
  --bg:#0B100F; --surface:#131A18; --surface-2:#182120; --surface-3:#1E2A27;
  --line:#222E2B; --line-strong:#33423E;
  --ink:#E7EEEB; --ink-2:#A7B6B1; --ink-3:#7C8D88;
  --accent:#3BC4B0; --accent-2:#57D6C4; --accent-soft:#10312D; --accent-ink:#9AE6DA;
  --ok:#54D083; --ok-soft:#11301F;
  --warn:#E9AB43; --warn-soft:#312512;
  --crit:#F2746C; --crit-soft:#381A18;
  --focus:#57D6C4; --on-accent:#06211D;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.8);
  --shadow-lg:0 4px 8px rgba(0,0,0,.4), 0 32px 64px -24px rgba(0,0,0,.9);
  --s-new:#8A9B95; --s-contacted:#6BA3C6; --s-replied:#4FB3C0; --s-qualified:#3BC4B0;
  --s-demo:#8CC257; --s-proposal:#E9AB43; --s-won:#54D083; --s-lost:#6E7C77;
  --grid:rgba(231,238,235,.09);
}

/* ============================== BASE ============================== */
*{box-sizing:border-box}
img{max-width:100%; height:auto}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.015em; font-weight:600}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}
.num{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.13em; color:var(--ink-3);
}
.muted{color:var(--ink-3)}
.hidden{display:none !important}

/* ============================== SHELL ============================== */
.app{display:grid; grid-template-columns:212px 1fr; height:100vh; overflow:hidden}
.rail{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px; padding:16px 10px; overflow-y:auto;
}
.brand{display:flex; gap:10px; align-items:center; padding:2px 8px 16px}
/* The square mark carries no dark text — just the gradient, a white face and
   dark eyes — so it reads on the light and dark rail alike, with no plate. */
.brand-logo{width:34px; height:34px; flex:none; display:block}
.brand-name{font-weight:600; font-size:13.5px; line-height:1.15; letter-spacing:-.01em}
.brand-sub{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.nav-label{padding:14px 8px 6px}
.nav-btn{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:7px 9px; border:0; border-radius:var(--r-md); background:transparent;
  color:var(--ink-2); cursor:pointer; font-size:13.5px; font-weight:500;
}
.nav-btn:hover{background:var(--surface-3); color:var(--ink)}
.nav-btn[aria-current="page"]{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
.nav-btn .ico{width:16px; height:16px; flex:none; opacity:.85}
.nav-btn .count{margin-left:auto; font-size:11px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.nav-btn[aria-current="page"] .count{color:var(--accent-ink)}
.rail-foot{margin-top:auto; padding:14px 8px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.save-chip{display:flex; align-items:center; gap:7px; font-size:11px; color:var(--ink-3); line-height:1.35}
.save-dot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none}
.save-chip[data-state="saving"] .save-dot{background:var(--warn); animation:pulse 1s ease-in-out infinite}
.save-chip[data-state="local"] .save-dot{background:var(--warn)}
.save-chip[data-state="error"] .save-dot{background:var(--crit)}
@keyframes pulse{50%{opacity:.3}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important}}

.main{display:flex; flex-direction:column; overflow:hidden; min-width:0}
.topbar{
  display:flex; align-items:center; gap:14px; padding:14px 26px;
  border-bottom:1px solid var(--line); background:var(--surface); flex:none;
}
.topbar h1{font-size:19px}
.topbar .sub{font-size:12px; color:var(--ink-3); margin-top:1px}
.topbar-actions{margin-left:auto; display:flex; gap:8px; align-items:center}
.search{position:relative}
.search input[type=text]{
  width:210px; padding:7px 10px 7px 30px; border:1px solid var(--line-strong);
  border-radius:var(--r-md); background:var(--surface-2); font-size:13px;
}
.search input[type=text]::placeholder{color:var(--ink-3)}
.search svg{position:absolute; left:9px; top:50%; transform:translateY(-50%); opacity:.5; pointer-events:none}
.view-wrap{overflow-y:auto; padding:22px 26px 60px; flex:1}
.view{display:none}
.view.active{display:block}

/* ============================== CONTROLS ============================== */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--r-md);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap;
}
.btn:hover{background:var(--surface-3)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn-ghost{border-color:transparent; background:transparent; color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-3); color:var(--ink)}
.btn-danger{color:var(--crit); border-color:var(--line-strong)}
.btn-danger:hover{background:var(--crit-soft); border-color:var(--crit)}
.btn-sm{padding:4px 9px; font-size:12px}
.btn:disabled{opacity:.45; cursor:not-allowed}

label.field{display:flex; flex-direction:column; gap:4px}
label.field > span{font-size:11px; font-weight:500; color:var(--ink-3); letter-spacing:.02em}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=tel],select,textarea{
  width:100%; padding:7px 9px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--surface-2); font-size:13px;
}
textarea{resize:vertical; min-height:70px; line-height:1.5}
select{cursor:pointer; appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:28px}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}

/* ============================== PIECES ============================== */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm)}
.card-head{display:flex; align-items:baseline; gap:10px; padding:14px 16px 0}
.card-head h3{font-size:13.5px}
.card-head .hint{margin-left:auto; font-size:11px; color:var(--ink-3)}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px; margin-bottom:18px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:13px 15px 14px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden}
.kpi .v{font-size:25px; font-weight:600; line-height:1.15; margin-top:7px; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.kpi .d{font-size:11px; color:var(--ink-3); margin-top:5px}
.kpi.alert .v{color:var(--crit)}
.kpi.good .v{color:var(--ok)}

.grid-2{display:grid; grid-template-columns:1.35fr 1fr; gap:14px; align-items:start}
.grid-halves{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
@media (max-width:1080px){.grid-2,.grid-halves{grid-template-columns:1fr}}

.pill{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:100px;
  font-size:11px; font-weight:500; line-height:1.6; white-space:nowrap;
  background:var(--surface-3); color:var(--ink-2); border:1px solid transparent;
}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.crit{background:var(--crit-soft); color:var(--crit)}
.pill.info{background:var(--accent-soft); color:var(--accent-ink)}
.pill.stage{color:#fff}
.stage-swatch{width:8px; height:8px; border-radius:2px; flex:none; display:inline-block}

table{width:100%; border-collapse:collapse; font-size:13px}
.table-wrap{overflow-x:auto; border-radius:var(--r-lg)}
thead th{
  text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.11em;
  color:var(--ink-3); font-weight:500; font-family:"IBM Plex Mono",monospace;
  padding:9px 12px; border-bottom:1px solid var(--line); background:var(--surface-2);
  position:sticky; top:0; z-index:1; white-space:nowrap;
}
tbody td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
.cell-strong{font-weight:500}
.cell-sub{font-size:11.5px; color:var(--ink-3)}
.risk-stripe{box-shadow:inset 3px 0 0 var(--crit)}
.risk-stripe-w{box-shadow:inset 3px 0 0 var(--warn)}

.empty{padding:44px 20px; text-align:center; color:var(--ink-3)}
.empty h4{font-size:14px; color:var(--ink-2); margin-bottom:5px}

/* ============================== BOARD ============================== */
.board{display:flex; gap:12px; overflow-x:auto; padding-bottom:14px; align-items:flex-start}
.col{
  flex:0 0 232px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-lg); display:flex; flex-direction:column; max-height:calc(100vh - 210px);
}
.col.drop{border-color:var(--accent); background:var(--accent-soft)}
.col-head{padding:11px 12px 9px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:7px}
.col-head .name{font-size:12px; font-weight:600}
.col-head .n{margin-left:auto; font-size:11px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.col-body{padding:9px; display:flex; flex-direction:column; gap:8px; overflow-y:auto}
.col-foot{padding:0 9px 9px}
.lead-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:10px 11px; cursor:pointer; box-shadow:var(--shadow-sm); border-left:3px solid var(--s-new);
}
.lead-card:hover{border-color:var(--line-strong); box-shadow:var(--shadow-md)}
.lead-card.dragging{opacity:.4}
.lead-card .n{font-weight:600; font-size:13px; letter-spacing:-.01em}
.lead-card .c{font-size:11.5px; color:var(--ink-3); margin-top:1px}
.lead-card .row{display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap}
.lead-card .val{font-size:12px; font-weight:600; font-family:"IBM Plex Mono",monospace}

/* ============================== CHARTS ============================== */
.funnel{display:flex; flex-direction:column; gap:7px; padding:14px 16px 16px}
.fn-row{display:grid; grid-template-columns:88px 1fr auto; gap:10px; align-items:center; font-size:12px}
.fn-bar{height:16px; background:var(--surface-3); border-radius:3px; overflow:hidden; position:relative}
.fn-fill{height:100%; border-radius:3px 4px 4px 3px; min-width:2px; transition:width .25s ease}
.fn-n{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2); min-width:56px; text-align:right}
.chart{padding:6px 16px 14px; position:relative}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.tip{
  position:fixed; z-index:80; pointer-events:none; opacity:0; transition:opacity .1s;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); padding:7px 10px; font-size:12px; max-width:220px;
}
.tip.on{opacity:1}
.tip .t{font-weight:600; margin-bottom:2px}
.legend-note{padding:0 16px 14px; font-size:11px; color:var(--ink-3)}

/* ============================== ALERTS ============================== */
.alist{display:flex; flex-direction:column}
.arow{display:flex; gap:11px; align-items:flex-start; padding:11px 16px; border-top:1px solid var(--line); cursor:pointer}
.arow:first-child{border-top:0}
.arow:hover{background:var(--surface-2)}
.arow .bar{width:3px; align-self:stretch; border-radius:2px; background:var(--warn); flex:none; margin:1px 0}
.arow.crit .bar{background:var(--crit)}
.arow .t{font-size:13px; font-weight:500}
.arow .s{font-size:11.5px; color:var(--ink-3); margin-top:1px}
.arow .when{margin-left:auto; text-align:right; font-size:11px; color:var(--ink-3); white-space:nowrap; font-family:"IBM Plex Mono",monospace}

/* ============================== DRAWER ============================== */
.scrim{position:fixed; inset:0; background:rgba(10,16,14,.42); opacity:0; pointer-events:none; transition:opacity .18s; z-index:60}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(470px,94vw); background:var(--surface);
  border-left:1px solid var(--line); box-shadow:var(--shadow-lg); z-index:70;
  transform:translateX(102%); transition:transform .2s ease; display:flex; flex-direction:column;
}
.drawer.on{transform:none}
.drawer-head{padding:16px 18px 13px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:flex-start}
.drawer-head h2{font-size:17px; letter-spacing:-.02em}
.drawer-body{overflow-y:auto; padding:16px 18px 30px; display:flex; flex-direction:column; gap:16px}
.drawer-foot{padding:11px 18px; border-top:1px solid var(--line); display:flex; gap:8px; flex-wrap:wrap; background:var(--surface-2)}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.fgrid.one{grid-template-columns:1fr}
.sect{display:flex; flex-direction:column; gap:9px}
.sect > .eyebrow{padding-bottom:2px; border-bottom:1px solid var(--line)}
.linked{display:flex; flex-direction:column; gap:6px}
.linked-item{display:flex; gap:9px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; background:var(--surface-2)}
.linked-item:hover{border-color:var(--line-strong)}
.log{display:flex; flex-direction:column; gap:0}
.log-item{display:flex; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line)}
.log-item:last-child{border-bottom:0}
.log-when{font-size:10.5px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; width:78px; flex:none; padding-top:2px}
.log-text{font-size:12.5px; line-height:1.45}
.log-who{font-size:10.5px; color:var(--ink-3)}
.note-add{display:flex; gap:7px; align-items:flex-end}

/* ============================== MODAL ============================== */
.modal-wrap{position:fixed; inset:0; z-index:90; display:none; place-items:center; padding:24px}
.modal-wrap.on{display:grid}
.modal{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); width:min(680px,100%); max-height:88vh; display:flex; flex-direction:column;
}
.modal-head{padding:16px 18px 12px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:10px}
.modal-body{padding:16px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:13px}
.modal-foot{padding:12px 18px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ============================== TOASTS ============================== */
.toasts{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{
  background:var(--ink); color:var(--bg); padding:9px 14px; border-radius:100px; font-size:12.5px;
  box-shadow:var(--shadow-md); animation:rise .2s ease;
}
.toast.err{background:var(--crit); color:#fff}
@keyframes rise{from{opacity:0; transform:translateY(8px)}}

/* ============================== DATA VIEW ============================== */
.stack{display:flex; flex-direction:column; gap:14px}
.rowset{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.mapper{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; max-height:230px; overflow-y:auto; padding:2px}
.chipbar{display:flex; gap:6px; flex-wrap:wrap}
.chip{padding:4px 10px; border-radius:100px; border:1px solid var(--line-strong); background:var(--surface); font-size:12px; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:500}
code.k{font-family:"IBM Plex Mono",monospace; font-size:11.5px; background:var(--surface-3); padding:1px 5px; border-radius:4px}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed; z-index:50; width:212px; height:100%; transform:translateX(-100%); transition:transform .2s}
  .rail.on{transform:none}
  .view-wrap{padding:16px}
  .topbar{padding:11px 14px; gap:10px}
  .topbar h1{font-size:16px}
  .topbar .sub{display:none}
  .search input[type=text]{width:112px}
  .topbar-actions{gap:6px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
}
.railtoggle{display:none}
@media (max-width:820px){.railtoggle{display:inline-flex}}

/* ============================== SIGN IN ============================== */
.gate{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:24px; background:var(--bg);
}
.gate.hidden{display:none !important}
.gate-card{
  width:min(352px,100%); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:24px 24px 22px;
  display:flex; flex-direction:column; gap:13px;
}
.gate-brand{display:flex; flex-direction:column; align-items:center; gap:11px; padding-bottom:8px}
/* The plate is white in both themes: invisible against the white card in light
   mode, and a white panel in dark mode so the logo keeps its own colours. */
.gate-logo{
  display:block; width:186px; height:auto; background:#FFFFFF;
  padding:13px 17px; border-radius:11px;
}
.gate-sub{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.17em; color:var(--ink-3);
}
.gate-card .btn{width:100%}
.gate-error{min-height:16px; font-size:12px; color:var(--crit)}
.gate-error:empty{min-height:0}

/* ============================== FILTER BAR ============================== */
.filterbar{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:0 0 14px;
}
.filterbar select{width:auto; min-width:190px}
.filterbar .eyebrow{padding-right:1px}
.pill.nostep{background:var(--warn-soft); color:var(--warn)}
.note-line{font-size:13px; color:var(--ink-2); line-height:1.6}
.note-line strong{color:var(--ink); font-weight:600}