#vf-app{
      --ink:#1a1714; --soft:#6f6a64; --faint:#9a948c;
      --line:#e6e2dc; --line2:#d4cdc3; --track:#ece4da;
      --fill:#1a1714; --on:#fbfaf8;
      --accent:#bd6334; --accent-deep:#a4532a;
      --paper:#faf8f4; --panel:#ece7df;
      box-sizing:border-box; max-width:680px; margin:0 auto;
      color:var(--ink); font-family:inherit; line-height:1.5;
      background:var(--paper); border:1px solid var(--panel); border-radius:18px;
      padding:32px 30px 26px; -webkit-font-smoothing:antialiased;
      box-shadow:0 1px 2px rgba(26,23,20,.04);
    }
    @media (max-width:560px){ #vf-app{padding:22px 17px 18px;border-radius:14px;} }
    #vf-app *,#vf-app *::before,#vf-app *::after{box-sizing:border-box;}
    #vf-app button{font-family:inherit;cursor:pointer;}
    #vf-app .eyebrow{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
      font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 14px;}
    #vf-app .h{font-size:clamp(25px,4.2vw,35px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0 0 16px;}
    #vf-app .lead{font-size:17px;margin:0 0 14px;}
    #vf-app .note{font-size:15px;color:var(--soft);margin:0 0 26px;}

    #vf-app .bar{height:3px;background:var(--track);border-radius:99px;margin:0 0 26px;overflow:hidden;}
    #vf-app .bar>i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .4s ease;}

    #vf-app .step{display:none;animation:vfin .42s ease both;}
    #vf-app .step.on{display:block;}
    @keyframes vfin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
    @media (prefers-reduced-motion:reduce){#vf-app .step,#vf-app .opt,#vf-app .cand,#vf-app .fill{animation:none!important;transition:none!important;}}

    /* answer cards */
    #vf-app .opts{display:flex;flex-direction:column;gap:10px;margin:0 0 6px;}
    #vf-app .opt{display:flex;align-items:center;gap:13px;text-align:left;width:100%;
      border:1px solid var(--line2);background:#fff;color:var(--ink);border-radius:13px;
      padding:16px 18px;font-size:16.5px;line-height:1.35;
      transition:transform .14s ease,background .16s,color .16s,border-color .16s,box-shadow .16s;}
    #vf-app .opt:hover{border-color:var(--ink);transform:translateY(-1px);}
    #vf-app .opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
    #vf-app .opt .dot{flex:0 0 auto;width:16px;height:16px;border-radius:99px;border:1.5px solid var(--line2);transition:.16s;}
    #vf-app .opt.sel{background:var(--fill);color:var(--on);border-color:var(--fill);box-shadow:0 6px 18px rgba(26,23,20,.18);}
    #vf-app .opt.sel .dot{background:var(--accent);border-color:var(--accent);}

    #vf-app .qnav{display:flex;align-items:center;margin-top:24px;}
    #vf-app .link{appearance:none;border:0;background:none;color:var(--soft);font-size:14px;padding:8px 2px;}
    #vf-app .link:hover{color:var(--ink);}
    #vf-app .link[disabled]{opacity:.35;cursor:not-allowed;}
    #vf-app .sp{margin-left:auto;}

    #vf-app .btn{appearance:none;border:1px solid var(--fill);background:var(--fill);color:var(--on);
      border-radius:11px;padding:13px 22px;font-size:15px;font-weight:600;transition:opacity .16s,transform .14s;}
    #vf-app .btn:hover{opacity:.88;transform:translateY(-1px);}
    #vf-app .btn:disabled{opacity:.3;cursor:not-allowed;transform:none;}
    #vf-app .btn.ghost{background:transparent;color:var(--soft);border-color:transparent;padding:13px 4px;font-weight:500;}
    #vf-app .btn.ghost:hover{color:var(--ink);}
    #vf-app .btn.alt{background:transparent;color:var(--ink);border-color:var(--line2);}
    #vf-app .btn.alt:hover{border-color:var(--ink);background:#fff;}

    /* landing \u2014 ranked candidates with scores */
    #vf-app .subhead{font-size:13px;color:var(--faint);margin:-16px 0 20px;
      font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em;}
    #vf-app .cands{display:flex;flex-direction:column;gap:9px;margin:0 0 6px;}
    #vf-app .cand{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;
      border:1px solid var(--line2);background:#fff;border-radius:13px;padding:13px 16px;transition:.16s;color:var(--ink);}
    #vf-app .cand:hover{border-color:var(--ink);}
    #vf-app .cand .tick{flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line2);
      display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;margin-top:3px;transition:.16s;}
    #vf-app .cand .body{flex:1 1 auto;min-width:0;}
    #vf-app .cand .row1{display:flex;align-items:baseline;gap:9px;}
    #vf-app .cand .rk{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--faint);flex:0 0 auto;}
    #vf-app .cand .nm{font-weight:700;font-size:16.5px;}
    #vf-app .cand .sc{margin-left:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;font-weight:700;color:var(--accent-deep);flex:0 0 auto;}
    #vf-app .cand .track{height:4px;background:var(--track);border-radius:99px;margin:8px 0 7px;overflow:hidden;}
    #vf-app .cand .fill{height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .6s ease;}
    #vf-app .cand .gl{color:var(--soft);font-size:13px;line-height:1.4;}
    #vf-app .cand.sel{border-color:var(--accent);background:#fffdfb;box-shadow:0 4px 14px rgba(189,99,52,.1);}
    #vf-app .cand.sel .tick{background:var(--accent);border-color:var(--accent);color:#fff;}
    #vf-app .cand[disabled]{opacity:.42;cursor:not-allowed;}

    #vf-app .count{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.1em;
      text-transform:uppercase;color:var(--soft);margin:18px 0 0;min-height:16px;}
    #vf-app .more{margin-top:18px;}
    #vf-app .moretog{appearance:none;border:0;background:none;color:var(--soft);font-size:14px;
      text-decoration:underline;text-underline-offset:3px;padding:4px 0;cursor:pointer;}
    #vf-app .moretog:hover{color:var(--ink);}
    #vf-app .morewrap{display:none;flex-wrap:wrap;gap:8px;margin-top:14px;}
    #vf-app .morewrap.open{display:flex;}
    #vf-app .mini{appearance:none;border:1px solid var(--line2);background:#fff;color:var(--ink);
      border-radius:99px;padding:8px 14px;font-size:14px;transition:.14s;}
    #vf-app .mini:hover{border-color:var(--ink);}
    #vf-app .mini.sel{background:var(--accent);color:#fff;border-color:var(--accent);}
    #vf-app .mini[disabled]{opacity:.35;cursor:not-allowed;}

    /* results */
    #vf-app .res{list-style:none;margin:0 0 10px;padding:0;}
    #vf-app .res li{padding:16px 0;border-bottom:1px solid var(--line);}
    #vf-app .res li:first-child{border-top:1px solid var(--line);}
    #vf-app .res .top{display:flex;align-items:baseline;gap:14px;}
    #vf-app .res .n{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--faint);flex:0 0 auto;}
    #vf-app .res .nm{font-size:21px;font-weight:700;letter-spacing:-.01em;}
    #vf-app .res .sc{margin-left:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;font-weight:700;color:var(--accent-deep);}
    #vf-app .res .added{margin-left:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
    #vf-app .res .track{height:5px;background:var(--track);border-radius:99px;margin:9px 0 8px;overflow:hidden;}
    #vf-app .res .fill{height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .7s ease;}
    #vf-app .res .gl{color:var(--soft);font-size:14px;}
    #vf-app .alttog{appearance:none;border:0;background:none;color:var(--accent-deep);font-size:13px;
      padding:9px 0 2px;cursor:pointer;font-weight:600;}
    #vf-app .alttog:hover{text-decoration:underline;text-underline-offset:3px;}
    #vf-app .alts{display:none;margin:6px 0 2px;border-left:2px solid var(--track);padding-left:15px;}
    #vf-app .alts.open{display:block;animation:vfin .3s ease both;}
    #vf-app .altrow{display:block;width:100%;text-align:left;border:0;background:none;color:var(--ink);
      padding:10px 0;cursor:pointer;border-bottom:1px solid var(--line);}
    #vf-app .altrow:last-child{border-bottom:0;}
    #vf-app .altrow .aline{display:flex;align-items:baseline;gap:8px;}
    #vf-app .altrow .anm{font-weight:700;font-size:15px;transition:color .14s;}
    #vf-app .altrow:hover:not([disabled]) .anm{color:var(--accent-deep);}
    #vf-app .altrow .rep{margin-left:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
      letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);white-space:nowrap;}
    #vf-app .altrow .agl{color:var(--soft);font-size:13px;margin-top:2px;}
    #vf-app .altrow[disabled]{cursor:not-allowed;}
    #vf-app .altrow[disabled] .anm,#vf-app .altrow[disabled] .rep{color:var(--faint);}
    #vf-app .close{font-size:15px;color:var(--soft);font-style:italic;margin:8px 0 0;}
    #vf-app .nav{display:flex;align-items:center;gap:10px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap;}
    #vf-app .toast{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.1em;
      text-transform:uppercase;color:var(--soft);display:block;margin:14px 0 0;min-height:14px;opacity:0;transition:opacity .25s;}
    #vf-app .toast.on{opacity:1;}
/* ---- remove button on selected values ---- */
#vf-app .remove-btn {
  appearance: none; border: 0; background: none;
  color: var(--faint); font-size: 18px; line-height: 1;
  padding: 0 0 0 10px; cursor: pointer; margin-left: auto; flex-shrink: 0;
  transition: color .15s;
}
#vf-app .remove-btn:hover { color: var(--ink); }

/* ---- undo bar ---- */
#vf-app .undo-bar {
  font-size: 13px; color: var(--soft); padding: 10px 0 14px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
#vf-app .undo-btn {
  appearance: none; border: 1px solid var(--line2); background: #fff;
  color: var(--accent-deep); font-size: 13px; font-weight: 600;
  border-radius: 99px; padding: 3px 12px; cursor: pointer;
  transition: border-color .14s;
}
#vf-app .undo-btn:hover { border-color: var(--accent); }

/* ---- selected count ---- */
#vf-app .sel-count {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--soft); margin: 0 0 16px;
}

/* ---- pool section ---- */
#vf-pool {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line);
}
#vf-app .pool-header {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--soft); margin: 0 0 14px;
}
#vf-app .pool-card {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--line2); background: #fff; color: var(--ink);
  border-radius: 13px; padding: 13px 16px; margin-bottom: 9px;
  cursor: pointer; transition: border-color .14s, transform .14s, box-shadow .14s;
}
#vf-app .pool-card:hover:not([disabled]) {
  border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(189,99,52,.1);
}
#vf-app .pool-card[disabled], #vf-app .pool-card.at-max {
  opacity: .45; cursor: not-allowed; transform: none;
}
#vf-app .pool-top {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
}
#vf-app .pool-top .nm { font-weight: 700; font-size: 15.5px; }
#vf-app .pool-top .sc {
  margin-left: auto; font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: 12px; font-weight: 700; color: var(--accent-deep);
}