:root{
  --bg:#eef2f4;
  --card:#fff;
  --line:#dfe4e8;
  --text:#232b32;
  --muted:#7d8994;
  --accent:#2066b0;
  --accent-dk:#17538f;
  --shadow:0 1px 2px rgba(0,0,0,.09), 0 4px 12px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.35 "Helvetica Neue", Arial, "Open Sans", sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
.hidden{display:none !important}
.grow{flex:1}
.muted{color:var(--muted); font-size:12px}

/* ---------- topbar ---------- */
.topbar{
  flex:0 0 auto; display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap;
  padding:10px 14px; background:#fff; border-bottom:1px solid var(--line);
}
.topbar__title{display:flex; flex-direction:column; min-width:0}
.topbar__name{font-size:16px; font-weight:600; white-space:nowrap}
.topbar__meta{font-size:11px; color:var(--muted); white-space:nowrap}
.topbar__tools{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}

.inp{
  height:32px; padding:0 10px; border:1px solid var(--line); border-radius:4px;
  background:#fff; color:var(--text); font-size:13px; outline:none; min-width:180px;
}
.inp:focus{border-color:var(--accent)}
.inp--sel{min-width:170px; max-width:230px}

.btn{
  height:32px; padding:0 14px; border:1px solid var(--line); border-radius:4px;
  background:#fff; color:var(--text); font-size:13px; cursor:pointer; white-space:nowrap;
}
.btn:hover{background:#f4f7f9}
.btn--primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn--primary:hover{background:var(--accent-dk)}
.btn--link{border:0; background:none; color:var(--accent); padding:0 4px; height:auto}
.btn--link:hover{background:none; text-decoration:underline}

/* ---------- board ---------- */
.board{
  flex:1 1 auto; min-height:0; display:flex; align-items:stretch; gap:10px;
  padding:12px; overflow-x:auto; overflow-y:hidden;
}
.col{
  flex:0 0 272px; width:272px; height:100%;
  display:flex; flex-direction:column;
  background:#e6ebef; border-radius:6px; overflow:hidden;
}
.col__head{
  flex:0 0 auto; padding:8px 10px 8px 12px; background:#fff;
  border-bottom:1px solid var(--line); position:relative;
}
.col__head::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--stage-color, #9dcf00);
}
.col__funnel{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.col__name{font-weight:600; font-size:13px; margin:1px 0 3px; overflow-wrap:anywhere}
.col__stat{font-size:12px; color:var(--muted); display:flex; gap:8px}
.col__sum{color:var(--text); font-weight:600}
.col__body{flex:1 1 auto; min-height:0; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:8px}
.col__more{
  border:1px dashed var(--line); background:none; border-radius:4px; padding:6px;
  color:var(--accent); cursor:pointer; font-size:12px;
}

/* ---------- card ---------- */
.card{
  background:var(--card); border-radius:4px; box-shadow:var(--shadow);
  padding:9px 10px; cursor:pointer; border-left:3px solid transparent;
}
.card:hover{border-left-color:var(--accent); transform:translateY(-1px)}
.card__title{font-weight:600; font-size:13px; margin-bottom:4px; overflow-wrap:anywhere}
.card__company{font-size:12px; color:var(--accent); margin-bottom:5px; overflow-wrap:anywhere}
.card__company:empty{display:none}
.card__sum{font-size:13px; font-weight:600; margin-bottom:6px}
.card__user{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted)}
.card__ava{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:#c9d4dd center/cover no-repeat;
  color:#fff; font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center;
}
.card__id{margin-left:auto; font-size:11px; color:#aab4bd}

/* ---------- empty / loader ---------- */
.empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted)}
.loader{
  position:fixed; inset:0; background:rgba(255,255,255,.72); z-index:60;
  display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted);
}
.loader__spin{
  width:22px; height:22px; border:3px solid #cdd7df; border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; background:rgba(30,40,50,.45); z-index:70; display:flex; align-items:center; justify-content:center; padding:20px}
.modal__box{background:#fff; border-radius:6px; width:min(760px,100%); max-height:100%; display:flex; flex-direction:column; box-shadow:0 10px 40px rgba(0,0,0,.3)}
.modal__head{display:flex; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); font-size:15px}
.modal__head b{flex:1}
.modal__close{border:0; background:none; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px}
.modal__sub{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line)}
.modal__body{flex:1 1 auto; overflow-y:auto; padding:6px 14px 12px}
.modal__foot{display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--line)}

.funnel{border-bottom:1px solid #eef1f3; padding:8px 0}
.funnel__head{display:flex; align-items:center; gap:8px}
.funnel__name{font-weight:600; cursor:pointer; flex:1}
.funnel__cnt{font-size:12px; color:var(--muted)}
.funnel__stages{display:none; flex-wrap:wrap; gap:4px 16px; padding:8px 0 2px 22px}
.funnel--open .funnel__stages{display:flex}
.funnel__toggle{width:16px; text-align:center; color:var(--muted); cursor:pointer; user-select:none}

.chk{display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; padding:2px 0; min-width:calc(50% - 16px)}
.chk--inline{min-width:0; color:var(--muted); font-size:12px}
.chk input{margin:0; cursor:pointer}
.chk__dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:#ccc}
.chk__txt{overflow-wrap:anywhere}

/* ---------- deal frame ---------- */
.dealview{position:fixed; inset:0; z-index:80; background:#fff; display:flex; flex-direction:column}
.dealview__head{display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line)}
.dealview__frame{flex:1 1 auto; width:100%; border:0}