.capsolve-vf{
  --bg:#ffffff; --fg:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --soft:#f8fafc; --soft2:#f1f5f9; --accent:#2563eb; --accent-d:#1d4ed8;
  --chip:#eef2ff; --chip-fg:#3730a3; --radius:12px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--fg); line-height:1.45; max-width:1080px; margin:0 auto;
}
.capsolve-vf *{box-sizing:border-box}
.capsolve-vf h2.vf-title{font-size:1.35rem; margin:0 0 4px; font-weight:700; color:var(--fg)}
.capsolve-vf .vf-sub{color:var(--muted); font-size:.9rem; margin:0 0 18px}
.capsolve-vf .vf-controls{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:640px){.capsolve-vf .vf-controls{grid-template-columns:1fr}}
.capsolve-vf .vf-controls.one{grid-template-columns:1fr}
.capsolve-vf .vf-field label{display:block; font-size:.8rem; font-weight:600; margin-bottom:6px; color:#334155}
.capsolve-vf .vf-field label .req{color:var(--accent); font-weight:700}

.capsolve-vf .ms{position:relative}
.capsolve-vf .ms-box{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg);
  min-height:46px; padding:6px 38px 6px 10px; cursor:text; display:flex;
  flex-wrap:wrap; gap:6px; align-items:center; transition:border-color .15s,box-shadow .15s;
}
.capsolve-vf .ms-box:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.capsolve-vf .ms-box::after{
  content:""; position:absolute; right:14px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.capsolve-vf .ms-ph{color:var(--muted); font-size:.92rem; padding:4px 2px}
.capsolve-vf .ms-chip{
  background:var(--chip); color:var(--chip-fg); border-radius:999px; font-size:.8rem;
  padding:3px 8px 3px 10px; display:inline-flex; align-items:center; gap:6px; max-width:100%;
}
.capsolve-vf .ms-chip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.capsolve-vf .ms-chip b{cursor:pointer; font-weight:700; opacity:.7; font-size:.95rem; line-height:1}
.capsolve-vf .ms-chip b:hover{opacity:1}
.capsolve-vf .ms-input{border:0; outline:0; flex:1; min-width:80px; font-size:.92rem; padding:4px 2px; background:transparent; color:var(--fg)}

.capsolve-vf .ms-panel{
  position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); max-height:300px; overflow:auto; display:none; padding:6px;
}
.capsolve-vf .ms.open .ms-panel{display:block}
.capsolve-vf .ms-actions{display:flex; justify-content:space-between; padding:4px 6px 8px; border-bottom:1px solid var(--line); margin-bottom:4px}
.capsolve-vf .ms-actions button{background:none; border:0; color:var(--accent); font-size:.8rem; font-weight:600; cursor:pointer; padding:2px 4px}
.capsolve-vf .ms-actions button:hover{text-decoration:underline}
.capsolve-vf .ms-actions button:disabled{color:var(--muted); cursor:default; text-decoration:none}
.capsolve-vf .vf-field label .vf-max{color:var(--muted); font-weight:400; font-size:.8rem}
.capsolve-vf .ms-note{padding:4px 8px 8px; color:var(--muted); font-size:.78rem}
.capsolve-vf .ms-opt.ms-disabled{opacity:.45; cursor:default}
.capsolve-vf .ms-opt.ms-disabled input{cursor:default}
.capsolve-vf .ms-opt{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; cursor:pointer; font-size:.9rem}
.capsolve-vf .ms-opt:hover{background:var(--soft2)}
.capsolve-vf .ms-opt input{width:16px; height:16px; accent-color:var(--accent); margin:0; cursor:pointer}
.capsolve-vf .ms-empty{padding:12px; color:var(--muted); font-size:.85rem; text-align:center}

.capsolve-vf .vf-locknote{font-size:.82rem; color:var(--muted); margin:2px 0 16px}
.capsolve-vf .vf-locknote .tag{display:inline-block; background:var(--soft2); color:#334155; border-radius:999px; padding:2px 9px; margin:0 4px 4px 0; font-weight:600}

.capsolve-vf .vf-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 10px; flex-wrap:wrap}
.capsolve-vf .vf-count{font-size:.9rem; color:var(--muted)}
.capsolve-vf .vf-count b{color:var(--fg)}
.capsolve-vf .vf-reset{background:var(--soft); border:1px solid var(--line); color:#334155; border-radius:8px; padding:7px 12px; font-size:.82rem; font-weight:600; cursor:pointer}
.capsolve-vf .vf-reset:hover{background:var(--soft2)}
.capsolve-vf .vf-reset[hidden]{display:none}

.capsolve-vf .vf-tablewrap{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.capsolve-vf table{width:100%; border-collapse:collapse; font-size:.92rem}
.capsolve-vf thead th{
  text-align:left; background:var(--soft); color:#475569; font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.03em; padding:11px 16px; border-bottom:1px solid var(--line); position:sticky; top:0;
}
.capsolve-vf tbody td{padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
.capsolve-vf tbody tr:last-child td{border-bottom:0}
.capsolve-vf tbody tr:hover{background:var(--soft)}
.capsolve-vf .vf-name{font-weight:600}
.capsolve-vf .vf-link{color:var(--accent); text-decoration:none; word-break:break-word}
.capsolve-vf .vf-link:hover{text-decoration:underline; color:var(--accent-d)}
.capsolve-vf .vf-nolink{color:var(--muted)}
.capsolve-vf .vf-scroll{max-height:560px; overflow:auto}

.capsolve-vf .vf-state{padding:42px 20px; text-align:center; color:var(--muted); font-size:.95rem; border:1px dashed var(--line); border-radius:var(--radius); background:var(--soft)}
.capsolve-vf .vf-state svg{width:34px; height:34px; opacity:.4; margin-bottom:8px}
.capsolve-vf .vf-foot{margin-top:14px; font-size:.72rem; color:#94a3b8; text-align:right}

/* Pub Status row grouping */
.capsolve-vf tbody tr.vf-feat{background:#e6f7ec}
.capsolve-vf tbody tr.vf-feat td{font-weight:700}
.capsolve-vf tbody tr.vf-feat:hover{background:#d8f0e1}
.capsolve-vf tbody tr.vf-pub{background:#e8f1fc}
.capsolve-vf tbody tr.vf-pub:hover{background:#dbe9f9}
.capsolve-vf tbody tr.vf-rot{background:#f1eafb}
.capsolve-vf tbody tr.vf-rot:hover{background:#e7daf7}

/* Totals widgets (below filters, above list) */
.capsolve-vf .vf-stats{display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 4px}
.capsolve-vf .vf-stat{
  flex:1 1 0; min-width:120px; background:var(--soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px; text-align:center;
}
.capsolve-vf .vf-stat-num{display:block; font-size:1.5rem; font-weight:700; color:var(--fg); line-height:1.1}
.capsolve-vf .vf-stat-label{display:block; margin-top:3px; font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em}
@media(max-width:480px){.capsolve-vf .vf-stat{flex-basis:100%}}

/* Connected-Solution enrichment in the Name cell */
.capsolve-vf td.vf-name{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.capsolve-vf .vf-coname{font-weight:600}
.capsolve-vf .vf-logo{width:100px; height:50px; object-fit:contain; border:1px solid var(--line); border-radius:6px; background:#fff; padding:3px}
.capsolve-vf .vf-solname{color:var(--muted); font-weight:600; font-size:.9rem}
.capsolve-vf .vf-badges{display:inline-flex; align-items:center; gap:6px}
.capsolve-vf .vf-badge{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border:1px solid var(--line); border-radius:7px; background:var(--soft); color:#475569;
  cursor:pointer; padding:0; transition:background .12s,border-color .12s,color .12s;
}
.capsolve-vf .vf-badge:hover{background:var(--soft2)}
.capsolve-vf .vf-badge-desc{color:#2563eb}
.capsolve-vf .vf-badge-desc:hover{border-color:#2563eb; background:#eff4ff}
.capsolve-vf .vf-badge-review{color:#d4a017}
.capsolve-vf .vf-badge-review:hover{border-color:#e0b020; background:#fff8e6}
.capsolve-vf .vf-badge-flame{color:#e8590c}
.capsolve-vf .vf-badge-flame:hover{border-color:#f0791f; background:#fff1e8}

/* Hover tooltip (fixed-position, not clipped by the scroll container) */
.capsolve-vf .vf-tooltip{
  position:fixed; z-index:2147483000; max-width:340px; background:#e5e7eb; color:#000;
  padding:10px 12px; border-radius:8px; font-size:.82rem; line-height:1.45; font-weight:400;
  border:1px solid #c8ccd2; box-shadow:0 6px 24px rgba(15,23,42,.20); white-space:normal; pointer-events:none;
}

/* Multiple solution blocks stack vertically under the company name */
.capsolve-vf td.vf-name{flex-direction:column; align-items:flex-start; gap:6px}
.capsolve-vf .vf-sol{display:flex; flex-wrap:wrap; align-items:center; gap:8px}

/* Top Vendor Badge (after all other solution info) */
.capsolve-vf .vf-topbadge-wrap{display:inline-flex; align-items:center; cursor:pointer}
.capsolve-vf .vf-topbadge{width:50px; height:50px; object-fit:contain}
.capsolve-vf .vf-tooltip strong{color:#000}