.ci-vs, #ci-vs-full { container-type: inline-size; }
.ci-vs { display: grid; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e3e8ef; }
.ci-vs[hidden] { display: none; }
.ci-vs-t { margin: 0; }
#ci-r3chart { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e3e8ef; }
.ci-vs-table { width: 100%; min-width: 0; table-layout: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.ci-vs-table thead td { border-bottom: 1px solid #e3e8ef; }
.ci-vs-table th.ci-vs-c { text-align: center; font-size: 14px; font-weight: 700; color: #1a202c; }
.ci-vs-table td.ci-vs-c { text-align: center; white-space: nowrap; }
.ci-vs-table th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; }
.ci-vs-table th, .ci-vs-table td { padding: 9px 12px; }
.ci-vs-table tr.ci-vs-tot th, .ci-vs-table tr.ci-vs-tot td { font-weight: 700; }
.ci-vs-table tr.ci-vs-sec th, .ci-vs-table tr.ci-vs-sec td { font-size: 13px; font-weight: 400; color: #5a6676; white-space: normal; }
#ci-vs-full { margin: 0 0 20px; }
#ci-vs-full[hidden] { display: none; }
.ci-next-line { margin: 12px 0 0; }
#ci-table-body tr.ci-hit td { background: #f1f6fd; }
body.dark-mode .ci-vs-table th.ci-vs-c { color: #f9fafb; }
body.dark-mode .ci-vs-table tr.ci-vs-sec th, body.dark-mode .ci-vs-table tr.ci-vs-sec td { color: #9ca3af; }
body.dark-mode .ci-vs, body.dark-mode #ci-r3chart, body.dark-mode .ci-vs-table thead td { border-color: #2b3545; }
body.dark-mode #ci-table-body tr.ci-hit td { background: #1c2b40; }
@container (max-width: 720px) {
    .ci-vs-table, .ci-vs-table tbody, .ci-vs-table tr, .ci-vs-table th, .ci-vs-table td { display: block; }
    .ci-vs-table thead { display: none; }
    .ci-vs-scroll { max-height: none; overflow: visible; }
    .ci-vs-table tr { padding: 8px 12px; border-bottom: 1px solid #e3e8ef; }
    .ci-vs-table th[scope="row"] { padding: 0 0 4px; white-space: normal; }
    .ci-vs-table td.ci-vs-c { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; text-align: right; white-space: normal; }
    .ci-vs-table td.ci-vs-c::before { content: attr(data-col); text-align: left; font-weight: 400; color: #5a6676; }
    body.dark-mode .ci-vs-table tr { border-color: #2b3545; }
    body.dark-mode .ci-vs-table td.ci-vs-c::before { color: #9ca3af; }
}
@media (max-width: 700px) { #ci-vs { display: none; } }
.ci-pick { display: grid; gap: 8px; }
.ci-inv { border: 1px solid #d6dde8; border-radius: 10px; padding: 8px 12px; background: #fff; }
.ci-inv[hidden] { display: none; }
.ci-inv-head { display: flex; align-items: center; gap: 6px; }
.ci-inv-name { font-weight: 700; font-size: 15px; color: #1a202c; }
.ci-inv-x { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; font-size: 20px; line-height: 1; color: #5a6676; cursor: pointer; }
.ci-inv-x:hover, .ci-inv-x:focus-visible { background: #eef2f7; color: #1a202c; }
.ci-inv-field { margin-top: 6px; display: grid; gap: 4px; }
.ci-inv-field label { font-size: 13px; color: #5a6676; }
.ci-inv-field input { max-width: 100%; }
.ci-add { display: grid; gap: 6px; }
.ci-add[hidden], .ci-add-list[hidden] { display: none; }
.ci-add-open, .ci-add-btn { justify-self: start; border: 1px dashed #9fb3cf; border-radius: 999px; background: transparent; padding: 6px 14px; font-size: 14px; font-weight: 600; color: #0b4aa2; cursor: pointer; }
.ci-add-open:hover, .ci-add-btn:hover { background: #f1f6fd; }
.ci-add-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-add-btn { border-style: solid; }
body.dark-mode .ci-inv { background: #111827; border-color: #2b3545; }
body.dark-mode .ci-inv-name { color: #f9fafb; }
body.dark-mode .ci-inv-field label, body.dark-mode .ci-inv-x { color: #9ca3af; }
body.dark-mode .ci-inv-x:hover, body.dark-mode .ci-inv-x:focus-visible { background: #1f2937; color: #f9fafb; }
body.dark-mode .ci-add-open, body.dark-mode .ci-add-btn { color: #93c5fd; border-color: #3b4f6b; }
body.dark-mode .ci-add-open:hover, body.dark-mode .ci-add-btn:hover { background: #1c2b40; }