:root{
  --ink:#0B0F1A;--graphite:#2A2F3A;--muted:#5B6272;--line:#D9DCE4;--bg:#F3F4F7;--paper:#fff;
  --blue:#2F5BFF;--blue-soft:#DCE4FF;--sky:#EEF2FF;--green:#16A36A;--green-soft:#DDF5EA;
  --orange:#E08A00;--orange-soft:#FFF1D6;--red:#D93A3A;--red-soft:#FCE3E3;--gray-soft:#E9EBF0;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Outfit",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* brand */
.brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:18px;letter-spacing:-.01em}
.brand svg{width:28px;height:28px;flex:none}
.brand.big{font-size:26px;justify-content:center;margin-bottom:8px}
.brand.big svg{width:38px;height:38px}

/* buttons */
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;border:2.5px solid var(--ink);border-radius:12px;padding:9px 16px;background:var(--paper);box-shadow:0 3px 0 var(--ink);cursor:pointer;transition:transform .1s,box-shadow .1s;white-space:nowrap}
.btn:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.btn.primary{background:var(--blue);color:#fff}
.btn.dark{background:var(--ink);color:#fff}
.btn.sm{padding:5px 10px;font-size:13px;border-width:2px;border-radius:9px;box-shadow:0 2px 0 var(--ink)}
.btn.danger{background:var(--red-soft);color:var(--red);border-color:var(--red);box-shadow:0 3px 0 var(--red)}
.btn[disabled]{opacity:.5;pointer-events:none}
.link{background:none;border:0;color:var(--muted);cursor:pointer;font-weight:600;text-align:left;padding:2px 0}
.link:hover{color:var(--ink)}

/* forms */
input,select,textarea{border:2px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
textarea{resize:vertical;min-height:70px}
label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:12.5px;color:var(--graphite);text-transform:uppercase;letter-spacing:.03em}
label input,label select,label textarea{text-transform:none;letter-spacing:0;font-weight:500;font-size:15px;color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:12px}
.err{color:var(--red);font-weight:600;min-height:20px}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{background:#fff;border:3px solid var(--ink);border-radius:24px;box-shadow:0 6px 0 var(--ink);padding:30px;width:min(380px,100%);display:flex;flex-direction:column;gap:14px}

/* layout */
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--ink);color:#fff;padding:20px 14px;display:flex;flex-direction:column;gap:24px;position:sticky;top:0;height:100vh}
.side .brand svg path:first-child{fill:#fff}
.side nav{display:flex;flex-direction:column;gap:4px}
.side nav a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:600;color:#C9CEDA;text-decoration:none}
.side nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side nav a.on{background:var(--blue);color:#fff}
.pill-count{background:var(--red);color:#fff;border-radius:99px;font-size:11.5px;font-weight:800;padding:1px 7px}
.pill-count:empty{display:none}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.side-foot .me{font-weight:800}
.side-foot .link{color:#9AA1B2}
.side-foot .link:hover{color:#fff}
.main{padding:26px 28px 60px;min-width:0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.h1{font-family:"Anton",sans-serif;font-weight:400;font-size:34px;text-transform:uppercase;line-height:1}
.sub{color:var(--muted);font-weight:500}

/* cards */
.card{background:#fff;border:2.5px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink);padding:18px}
.card h3{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--graphite);margin-bottom:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);padding:14px 16px}
.kpi .v{font-family:"Anton",sans-serif;font-size:34px;line-height:1}
.kpi .l{color:var(--muted);font-weight:600;font-size:13px;margin-top:4px}
.kpi.blue{background:var(--blue);color:#fff}.kpi.blue .l{color:#DCE4FF}
.kpi.red .v{color:var(--red)}
.dash-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.dash-grid>.card{min-width:0}
.bars{display:flex;flex-direction:column;gap:7px}
.bar{display:grid;grid-template-columns:120px 1fr 44px;gap:10px;align-items:center;font-size:13.5px;font-weight:600}
.bar .track{height:12px;background:var(--gray-soft);border-radius:99px;overflow:hidden}
.bar .fill{height:100%;background:var(--blue);border-radius:99px}
.chart{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:6px}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.chart .stick{width:100%;background:var(--blue-soft);border:2px solid var(--ink);border-radius:6px 6px 2px 2px;position:relative;min-height:2px}
.chart .stick i{position:absolute;left:0;right:0;bottom:0;background:var(--blue);border-radius:4px 4px 0 0}

/* table */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filters input,.filters select{width:auto;min-width:130px;padding:7px 9px}
.filters input[type=search]{min-width:220px}
.table-wrap{background:#fff;border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px;border-bottom:2px solid var(--ink);background:#FAFBFC;position:sticky;top:0;white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--sky)}
td .strong{font-weight:700}
td .muted,.muted{color:var(--muted);font-size:13px}
.tel{font-weight:700;color:var(--blue);text-decoration:none;white-space:nowrap}
.badge{display:inline-block;font-size:12px;font-weight:700;border-radius:99px;padding:2px 9px;white-space:nowrap;background:var(--gray-soft);color:var(--graphite)}
.b-blue{background:var(--blue-soft);color:#1E3FD1}.b-green{background:var(--green-soft);color:#0E7A4E}
.b-orange{background:var(--orange-soft);color:#9A5E00}.b-red{background:var(--red-soft);color:var(--red)}
.b-ink{background:var(--ink);color:#fff}
.late{color:var(--red);font-weight:700}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:10px}
.bulk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--ink);color:#fff;border-radius:12px;padding:8px 12px;margin-bottom:10px}
.bulk select{width:auto;padding:5px 8px}

/* call mode */
.call-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;align-items:start}
.call-card{padding:24px}
.call-card .company{font-family:"Anton",sans-serif;font-size:38px;text-transform:uppercase;line-height:1.02}
.call-card .phone{display:inline-flex;align-items:center;gap:10px;font-size:30px;font-weight:900;color:var(--blue);text-decoration:none;margin:12px 0 6px;border:3px solid var(--ink);border-radius:16px;padding:10px 18px;box-shadow:0 4px 0 var(--ink);background:var(--sky)}
.call-card .phone:hover{background:var(--blue-soft)}
.meta-line{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin:14px 0}
.oc{border:2.5px solid var(--ink);border-radius:12px;padding:12px 10px;font-weight:800;background:#fff;box-shadow:0 3px 0 var(--ink);cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center}
.oc kbd{font-family:inherit;font-size:11px;background:var(--gray-soft);border-radius:6px;padding:1px 6px;color:var(--muted)}
.oc:hover{background:var(--sky)}
.oc.sel{background:var(--blue);color:#fff}.oc.sel kbd{background:rgba(255,255,255,.25);color:#fff}
.oc.g{border-color:#0E7A4E;box-shadow:0 3px 0 #0E7A4E}.oc.r{border-color:var(--red);box-shadow:0 3px 0 var(--red)}
.warn{background:var(--orange-soft);border:2px solid var(--orange);border-radius:12px;padding:10px 12px;font-weight:600;color:#7A4A00;margin:8px 0}
.hist{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto}
.hist .it{border-left:3px solid var(--blue);padding:4px 0 4px 10px;font-size:13.5px}
.hist .it b{font-weight:800}
.notes{white-space:pre-wrap;font-size:13.5px;background:#FAFBFC;border:1.5px dashed var(--line);border-radius:10px;padding:10px;max-height:220px;overflow:auto}
.empty{text-align:center;padding:50px 20px;color:var(--muted);font-weight:600}
.empty .big{font-family:"Anton",sans-serif;font-size:30px;color:var(--ink);text-transform:uppercase;margin-bottom:6px}

/* drawer & modal */
.drawer{position:fixed;inset:0;background:rgba(11,15,26,.45);z-index:40;display:flex;justify-content:flex-end}
.drawer-in{background:var(--bg);width:min(620px,100%);height:100%;overflow:auto;border-left:3px solid var(--ink);padding:22px;display:flex;flex-direction:column;gap:14px;animation:slide .2s ease}
@keyframes slide{from{transform:translateX(40px);opacity:0}}
.modal{position:fixed;inset:0;background:rgba(11,15,26,.45);z-index:50;display:grid;place-items:center;padding:16px}
.modal-in{background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink);padding:22px;width:min(560px,100%);max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:14px}
.x{margin-left:auto;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--muted)}
.section-t{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--graphite);margin-top:6px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-weight:700;z-index:60;transition:transform .25s;pointer-events:none}
.toast.on{transform:translateX(-50%) translateY(0)}
.map-row{display:grid;grid-template-columns:140px 1fr;gap:10px;align-items:center}
.sample td{font-size:12.5px;color:var(--graphite);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:960px){
  .app{grid-template-columns:1fr}
  .side{position:sticky;top:0;height:auto;flex-direction:row;align-items:center;padding:10px 12px;gap:10px;z-index:30;overflow-x:auto}
  .side .brand span{display:none}
  .side nav{flex-direction:row;gap:2px}
  .side nav a{padding:8px 10px;white-space:nowrap;font-size:14px}
  .side-foot{flex-direction:row;margin:0 0 0 auto;gap:10px}
  .side-foot .me,#btn-pass{display:none}
  .main{padding:16px 14px 50px}
  .dash-grid,.call-wrap,.grid2,.grid3{grid-template-columns:1fr}
  .call-card .company{font-size:30px}
  .call-card .phone{font-size:24px}
  .bar{grid-template-columns:100px 1fr 36px}
}

/* ===== pipeline ===== */
.board-filters{margin-bottom:10px}
.stage-jump{display:none}
.board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 4px 18px;margin:0 -4px;scroll-padding:4px;-webkit-overflow-scrolling:touch}
.kcol{flex:0 0 290px;background:#EEF0F4;border:2.5px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink);display:flex;flex-direction:column;max-height:calc(100dvh - 210px);transition:background .15s,transform .15s}
.kcol.is-hidden{opacity:.6}
.kcol.kover{background:color-mix(in srgb,var(--sc) 14%,#fff);transform:translateY(-2px)}
.kcol-h{display:flex;align-items:center;gap:8px;padding:12px 12px 10px;border-bottom:2px solid var(--ink);background:#fff;border-radius:16px 16px 0 0;position:relative}
.kcol-h::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--sc);border-radius:16px 16px 0 0}
.kcol-h .dot{width:11px;height:11px;border-radius:50%;background:var(--sc);border:2px solid var(--ink);flex:none}
.kname{font-weight:900;font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcount{font-weight:800;font-size:12.5px;background:var(--ink);color:#fff;border-radius:99px;padding:1px 8px}
.kbtn{background:none;border:0;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);padding:2px 4px;border-radius:8px}
.kbtn:hover{background:var(--gray-soft);color:var(--ink)}
.kcards{display:flex;flex-direction:column;gap:9px;padding:10px;overflow-y:auto;min-height:70px;flex:1;overscroll-behavior:contain}
.kempty{border:2px dashed #C3C8D3;border-radius:12px;padding:18px 10px;text-align:center;color:var(--muted);font-weight:600;font-size:13px}
.kmore{text-align:center;color:var(--muted);font-size:12.5px;font-weight:600;padding:4px}
.kadd{margin:0 10px 10px;border:2px dashed #AEB4C2;background:transparent;border-radius:12px;padding:9px;font-weight:800;color:var(--graphite);cursor:pointer}
.kadd:hover{background:#fff;border-color:var(--ink)}
.kcol-new{flex:0 0 200px;min-height:120px;display:grid;place-items:center;font-weight:900;color:var(--graphite);cursor:pointer;background:transparent;border-style:dashed;box-shadow:none}
.kcol-new:hover{background:#fff}
.kcard{background:#fff;border:2px solid var(--ink);border-radius:13px;padding:10px 11px;box-shadow:0 2px 0 var(--ink);cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;display:flex;flex-direction:column;gap:5px;transition:box-shadow .12s,transform .12s}
.kcard:hover{box-shadow:0 3px 0 var(--ink);transform:translateY(-1px)}
.kc-top{display:flex;gap:6px;align-items:flex-start}
.kc-name{font-weight:800;font-size:14.5px;line-height:1.25;flex:1;min-width:0;overflow-wrap:anywhere}
.kmove{flex:none;border:1.5px solid var(--line);background:#fff;border-radius:8px;width:30px;height:28px;font-weight:900;cursor:pointer;color:var(--graphite)}
.kmove:hover{border-color:var(--ink);background:var(--sky)}
.kc-sub{font-size:13px;color:var(--graphite);overflow-wrap:anywhere}
.kc-tel{font-weight:800;color:var(--blue);text-decoration:none;font-size:14px;align-self:flex-start}
.kc-meta{display:flex;gap:5px;flex-wrap:wrap}
.kc-meta span{font-size:11.5px;font-weight:700;background:var(--gray-soft);color:var(--graphite);border-radius:6px;padding:1px 6px}
.kc-meta span.ok{background:var(--green-soft);color:#0E7A4E}
.kc-tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;border-radius:99px;padding:2px 9px;background:color-mix(in srgb,var(--tc) 14%,#fff);color:color-mix(in srgb,var(--tc) 80%,#000);border:1.5px solid color-mix(in srgb,var(--tc) 45%,#fff)}
.tag button{background:none;border:0;cursor:pointer;font-weight:900;color:inherit;font-size:13px;line-height:1;padding:0 0 0 2px}
.kc-note{font-size:12.5px;color:var(--graphite);background:#FAFBFC;border-left:3px solid var(--sc,var(--blue));border-radius:4px;padding:4px 7px;overflow-wrap:anywhere}
.kc-note em{color:var(--muted);font-style:normal;font-weight:700}
.kc-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700}
.who{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center}
.kc-src{opacity:.35}
.kc-flash{animation:flash .9s ease}
@keyframes flash{0%{background:var(--blue-soft)}100%{background:#fff}}
.kghost{position:fixed;left:0;top:0;z-index:70;pointer-events:none;box-shadow:0 14px 30px rgba(11,15,26,.28),0 3px 0 var(--ink);cursor:grabbing}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none!important}
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.sheet-b{display:flex;align-items:center;gap:8px;text-align:left;border:2px solid var(--ink);border-radius:11px;padding:11px 12px;font-weight:800;background:#fff;cursor:pointer;box-shadow:0 2px 0 var(--ink)}
.sheet-b i{width:11px;height:11px;border-radius:50%;background:var(--sc);flex:none;border:1.5px solid var(--ink)}
.sheet-b:hover{background:var(--sky)}
.sheet-b.on{background:var(--ink);color:#fff}
.sheet-inline .sheet-b{padding:7px 10px;font-size:13px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.sw{width:34px;height:34px;border-radius:50%;background:var(--sc);border:3px solid #fff;outline:2.5px solid var(--line);cursor:pointer}
.sw.on{outline-color:var(--ink);transform:scale(1.08)}

@media (max-width:960px){
  .board-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .board-filters::-webkit-scrollbar{display:none}
  .board-filters input,.board-filters select,.board-filters .btn{flex:none}
  .stage-jump{display:flex;gap:6px;overflow-x:auto;margin:0 -14px 10px;padding:2px 14px 4px;scrollbar-width:none}
  .stage-jump::-webkit-scrollbar{display:none}
  .stage-jump button{flex:none;display:flex;align-items:center;gap:6px;border:2px solid var(--ink);background:#fff;border-radius:99px;padding:5px 11px;font-weight:800;font-size:13px}
  .stage-jump button i{width:9px;height:9px;border-radius:50%;background:var(--sc)}
  .stage-jump button b{background:var(--gray-soft);border-radius:99px;padding:0 6px;font-size:11.5px}
  .board{scroll-snap-type:x mandatory;margin:0 -14px;padding:4px 14px 18px;scroll-padding:14px;gap:12px}
  .kcol{flex:0 0 min(84vw,330px);scroll-snap-align:start;max-height:calc(100dvh - 250px)}
  .kcol-new{flex-basis:60vw}
  .kcard{padding:12px}
  .kmove{width:36px;height:34px;font-size:16px}
  .main{overflow-x:clip}
}
.kc-sum{font-size:12.5px;line-height:1.35;color:var(--graphite)}
.sum-card{background:var(--sky)}
.sum-card p{font-size:14.5px;line-height:1.5}
.sum-call{background:var(--sky);border:2px solid var(--blue);border-radius:12px;padding:10px 12px;font-size:14.5px;line-height:1.45;margin:4px 0 10px}
.sum-call b{color:var(--blue)}