:root{
  --verm:#F4412E; --verm-ink:#C9301C; --verm-d:#FF6B55;
  --ink:#0A0A0A; --body:#18181B;
  --paper:#FFFFFF; --band:#FAF8F4;
  --hair:#EFEBE3; --line:#E7E2D9;
  --mute:#6B6863; --mute-2:#9C978F;
  --f:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --w:1280px;
  --eo:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--f); background:var(--band); color:var(--body);
  font-size:13.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------- chrome ---------- */
.top{
  position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.top-in{max-width:var(--w);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px;height:52px}
.mark{font-weight:600;letter-spacing:-.02em;font-size:15px;color:var(--ink);white-space:nowrap}
.mark i{font-style:normal;color:var(--verm)}
.nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{
  background:none;border:0;padding:6px 10px;cursor:pointer;color:var(--mute);
  border-radius:3px;white-space:nowrap;font-size:13px;
}
.nav button:hover{color:var(--ink);background:var(--band)}
.nav button[aria-current="true"]{color:var(--ink);font-weight:500;background:var(--band)}
.who{color:var(--mute-2);font-size:12px;white-space:nowrap}

.wrap{max-width:var(--w);margin:0 auto;padding:24px}
.screen{display:none}
.screen.on{display:block}

h1{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0;color:var(--ink)}
h2{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--mute-2);margin:0 0 10px}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.sub{color:var(--mute);font-size:13px}

/* ---------- controls ---------- */
.btn{
  border:1px solid var(--line);background:var(--paper);color:var(--body);
  padding:5px 11px;border-radius:3px;cursor:pointer;font-size:13px;
  transition:border-color .15s var(--eo),background .15s var(--eo);
}
.btn:hover{border-color:var(--mute-2)}
.btn.pri{background:var(--verm);border-color:var(--verm);color:#fff;font-weight:500}
.btn.pri:hover{background:var(--verm-ink);border-color:var(--verm-ink)}
.btn.sm{padding:3px 8px;font-size:12px}
.btn.link{border-color:transparent;background:none;color:var(--mute);padding:3px 6px}
.btn.link:hover{color:var(--verm);background:none}
.row-actions{display:flex;gap:4px;justify-content:flex-end}

input[type=text],input[type=email],input[type=password],select,textarea{
  border:1px solid var(--line);background:var(--paper);padding:6px 9px;border-radius:3px;width:100%;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--verm)}
textarea{resize:vertical;line-height:1.65}

/* ---------- tables ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:4px}
table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-weight:500;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--mute-2);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:9px 12px;border-bottom:1px solid var(--hair);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--band)}
tbody tr.sel{background:#FDF2F0}
.num{text-align:right}
.name{font-weight:500;color:var(--ink)}
.dim{color:var(--mute)}
.tiny{font-size:12px}

.badge{
  display:inline-block;font-size:11px;padding:1px 6px;border-radius:2px;
  border:1px solid var(--line);color:var(--mute);background:var(--band);white-space:nowrap;
}
.badge.warn{border-color:#F0D3CD;background:#FDF2F0;color:var(--verm-ink)}
.score{font-weight:500}
.score.hi{color:var(--verm-ink)}

/* ---------- filters ---------- */
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.filters select,.filters input{width:auto;min-width:104px}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px;font-size:12px;color:var(--mute)}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:2px;padding:2px 7px;display:inline-flex;gap:6px;align-items:center}
.chip b{font-weight:500;color:var(--ink)}
.chip span{color:var(--mute-2);cursor:pointer}

.bulkbar{
  display:flex;gap:8px;align-items:center;padding:9px 12px;border-top:1px solid var(--line);
  background:var(--band);font-size:12.5px;color:var(--mute);flex-wrap:wrap;
}
.pager{display:flex;gap:4px;align-items:center;margin-left:auto}
.pager b{font-weight:500;color:var(--ink)}

/* ---------- funnel ---------- */
.funnel{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);background:var(--paper);border-radius:4px;overflow:hidden}
.fstep{padding:13px 14px;border-right:1px solid var(--hair)}
.fstep:last-child{border-right:0;background:var(--band)}
.fstep .k{font-size:11.5px;color:var(--mute-2);letter-spacing:.03em;text-transform:uppercase}
.fstep .v{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-top:3px}
.fstep .p{font-size:12px;color:var(--verm-ink);margin-top:1px}
.goal{font-size:12.5px;color:var(--mute);margin-top:8px}

.todo{background:var(--paper);border:1px solid var(--line);border-radius:4px}
.titem{display:flex;align-items:center;gap:14px;padding:11px 14px;border-bottom:1px solid var(--hair);cursor:pointer}
.titem:last-child{border-bottom:0}
.titem:hover{background:var(--band)}
.titem .n{font-size:17px;font-weight:600;min-width:34px;color:var(--ink);letter-spacing:-.02em}
.titem .n.acc{color:var(--verm)}
.titem .go{margin-left:auto;color:var(--mute-2);font-size:12px}

/* ---------- flyout ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,10,10,.28);opacity:0;pointer-events:none;transition:opacity .2s var(--eo);z-index:50}
.scrim.on{opacity:1;pointer-events:auto}
.fly{
  position:fixed;top:0;right:0;height:100dvh;width:min(560px,100vw);background:var(--paper);
  border-left:1px solid var(--line);z-index:60;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .26s var(--eo);
}
.fly.on{transform:none}
.fly-h{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line)}
.fly-h .t{font-weight:600;color:var(--ink);letter-spacing:-.01em}
.fly-b{overflow:auto;flex:1;padding:18px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.seg button{border:0;background:var(--paper);padding:4px 11px;cursor:pointer;font-size:12.5px;color:var(--mute)}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--mute-2);margin-bottom:4px}
.saved{font-size:12px;color:var(--mute-2);margin-top:-4px}
.rule{height:1px;background:var(--line);margin:18px 0}
.kv{display:grid;grid-template-columns:96px 1fr;gap:5px 14px;font-size:13px}
.kv dt{color:var(--mute-2)}
.kv dd{margin:0}
.why{margin:0;padding-left:16px}
.why li{margin-bottom:4px}

/* ---------- timeline ---------- */
.tl{border-left:2px solid var(--line);margin-left:6px;padding-left:18px}
.ev{position:relative;padding-bottom:20px}
.ev::before{content:"";position:absolute;left:-25px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--line);border:2px solid var(--paper)}
.ev.acc::before{background:var(--verm)}
.ev .when{font-size:12px;color:var(--mute-2)}
.ev .what{font-weight:500;color:var(--ink);margin:1px 0 3px}
.ev .txt{color:var(--mute);border-left:2px solid var(--hair);padding-left:10px;margin-top:5px}

/* ---------- dialogs ---------- */
.dlg{
  position:fixed;z-index:70;left:50%;top:12vh;transform:translate(-50%,-6px);
  width:min(440px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--line);
  border-radius:5px;display:none;
}
.dlg.on{display:block}
.dlg-h{padding:14px 18px 0;font-weight:600;color:var(--ink)}
.dlg-b{padding:12px 18px}
.dlg-f{padding:12px 18px 16px;display:flex;gap:8px;justify-content:flex-end}
.opt{display:block;padding:5px 0;cursor:pointer}
.opt input{margin-right:8px}
.note{font-size:12px;color:var(--mute-2);margin-top:8px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stack{display:grid;gap:18px}
@media(max-width:860px){
  .funnel{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:1fr}
  .wrap{padding:16px}
  .hide-s{display:none}
}

/* ---------- app additions ---------- */
.nav a{background:none;border:0;padding:6px 10px;color:var(--mute);border-radius:3px;
  white-space:nowrap;font-size:13px;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.nav a:hover{color:var(--ink);background:var(--band)}
.nav a[aria-current="true"]{color:var(--ink);font-weight:500;background:var(--band)}
.navcount{background:var(--verm);color:#fff;font-size:10.5px;line-height:1;
  padding:2px 5px;border-radius:8px;font-weight:500}

/* compact funnel strip: one line, no decoration */
.strip{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);background:var(--paper);
  border-radius:4px;margin-bottom:26px;overflow:hidden}
.sc{flex:1 1 0;min-width:104px;padding:10px 14px;border-right:1px solid var(--hair);
  display:flex;flex-direction:column;gap:1px}
.sc:last-child{border-right:0;background:var(--band)}
.sc-k{font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--mute-2)}
.sc-v{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.sc-p{font-size:11.5px;color:var(--verm-ink)}

.sec-h{display:flex;align-items:baseline;gap:10px;margin:26px 0 10px}
.sec-h h2{margin:0}
.sec-m{font-size:12px;color:var(--mute-2)}
.sec-a{margin-left:auto;display:flex;gap:6px;align-items:center}

td.acts,th.acts{text-align:right;white-space:nowrap;width:1%}
td.acts .btn{margin-left:4px}

.empty{border:1px dashed var(--line);border-radius:4px;padding:22px;text-align:center;background:var(--paper)}
.empty-t{color:var(--body)}
.empty-a{color:var(--mute-2);font-size:12.5px;margin-top:4px}

.notice{margin-top:20px;padding:10px 14px;border:1px solid var(--line);background:var(--paper);
  border-radius:4px;font-size:13px;display:flex;gap:10px;align-items:center}
.notice a{color:var(--verm);margin-left:auto}

.flash{position:fixed;left:50%;bottom:24px;transform:translate(-50%,10px);background:var(--ink);
  color:#fff;padding:7px 14px;border-radius:3px;font-size:13px;opacity:0;pointer-events:none;
  transition:opacity .18s var(--eo),transform .18s var(--eo);z-index:80}
.flash.on{opacity:1;transform:translate(-50%,0)}

.skel{background:linear-gradient(90deg,var(--hair) 25%,var(--band) 37%,var(--hair) 63%);
  background-size:400% 100%;animation:sk 1.2s ease-in-out infinite;border-radius:3px;height:12px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

.err{border:1px solid #F0D3CD;background:#FDF2F0;color:var(--verm-ink);
  padding:12px 14px;border-radius:4px}
