.top-viewas { display: inline-flex; align-items: center; max-width: 220px; height: 30px; padding: 0 8px; border: 1px solid var(--line, #ccd); border-radius: var(--r-ctl); background: var(--panel, #fff); color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; cursor: pointer; }
.top-viewas[hidden] { display: none !important; }
.top-viewas .cfgv-label { overflow: hidden; text-overflow: ellipsis; }
.top-viewas.on { border-color: var(--accent); color: var(--ink, inherit); background: var(--sel-bg); font-weight: 600; }
.top-viewas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cfg-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 6px 16px; background: var(--panel, #fff); color: var(--ink, inherit); outline: 2px solid var(--accent); outline-offset: -2px; font-size: var(--fs-sm); flex: none; }
.cfg-banner strong { font-weight: 650; }
.cfg-banner .grow { flex: 1; }
.cfg-banner .cfg-banner-warn { color: var(--warn-ink, var(--warn, #8a5a00)); font-weight: 600; }
.cfg-banner[data-state=readonly] { background: var(--info-bg); }
.cfgv-add-list { max-height: 320px; overflow: auto; margin-top: 8px; }
.cfgv-pick { display: flex; flex-direction: column; gap: 6px; }
.cfgv-pick-row { justify-content: flex-start; text-align: start; }
@media (max-width: 700px) { .top-viewas { max-width: 120px; } .cfg-banner { padding: 6px 12px; } }