/* C-VPS-crawler — графитовая инструментальная система.
   Плотные таблицы, тонкие разделители, никаких карточек с тенями.
   Данные — моноширинным, интерфейс — Inter. */

:root {
  --bg: #0D0F11;
  --panel: #15181C;
  --panel-2: #1B1F24;
  --line: #262B31;
  --line-soft: #1E2328;
  --text: #E4E7EB;
  --text-dim: #8B949E;
  --text-faint: #5A636D;
  --accent: #4A7BA7;
  --accent-dim: #2E4E6B;
  --ok: #4E8C6A;
  --warn: #B08A3E;
  --bad: #A8524E;
  --p1: #A8524E;
  --p2: #B08A3E;
  --p3: #5A636D;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- каркас ---------- */
header.top {
  display: flex; align-items: center; gap: 24px;
  padding: 0 20px; height: 48px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky; top: 0; z-index: 10;
}
.brand {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--text); text-transform: uppercase;
}
.brand span { color: var(--accent); }
nav.main { display: flex; gap: 2px; margin-left: auto; }
nav.main a {
  padding: 6px 12px; border-radius: 3px; color: var(--text-dim);
  font-size: 12.5px;
}
nav.main a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
nav.main a.active { background: var(--accent-dim); color: #fff; }

main { padding: 20px; max-width: 1680px; }
h1 { font-size: 17px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 13px; font-weight: 600; margin: 24px 0 10px; color: var(--text-dim);
     text-transform: uppercase; letter-spacing: 0.06em; }
.sub { color: var(--text-faint); font-size: 12px; margin-bottom: 18px; }

/* ---------- плитки ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
         background: var(--line); border: 1px solid var(--line); margin-bottom: 24px; }
.tile { background: var(--panel); padding: 14px 16px; }
.tile .v { font-family: var(--mono); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.tile .k { color: var(--text-faint); font-size: 11px; text-transform: uppercase;
           letter-spacing: 0.07em; margin-top: 2px; }
.tile.alert .v { color: var(--p1); }

/* ---------- воронка ---------- */
.funnel { display: flex; align-items: stretch; border: 1px solid var(--line);
          background: var(--panel); overflow-x: auto; }
.fstep { flex: 1; min-width: 96px; padding: 12px 14px; border-right: 1px solid var(--line-soft);
         position: relative; }
.fstep:last-child { border-right: 0; }
.fstep .fv { font-family: var(--mono); font-size: 19px; }
.fstep .fk { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase;
             letter-spacing: 0.05em; margin-top: 3px; }
.fstep .fp { font-family: var(--mono); font-size: 11px; color: var(--accent); margin-top: 4px; }
.fstep.drop .fv { color: var(--text-dim); }

/* ---------- таблицы ---------- */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead th {
  text-align: left; font-weight: 500; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-faint); padding: 8px 10px;
  border-bottom: 1px solid var(--line); background: var(--panel);
  position: sticky; top: 0; z-index: 3;
}
tbody td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:hover { background: var(--panel-2); }
td.mono, .mono { font-family: var(--mono); font-size: 11.5px; }
td.dim, .dim { color: var(--text-dim); }
td.num { text-align: right; font-family: var(--mono); }
.wrap { border: 1px solid var(--line); background: var(--panel); overflow-x: auto;
  border-radius: 10px; }

/* ---------- бейджи ---------- */
.b { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 10.5px;
     font-family: var(--mono); border: 1px solid var(--line); color: var(--text-dim);
     white-space: nowrap; }
.b.ok { color: var(--ok); border-color: #2C4A3A; }
.b.warn { color: var(--warn); border-color: #4A3E22; }
.b.bad { color: var(--bad); border-color: #4A2C2A; }
.b.acc { color: var(--accent); border-color: var(--accent-dim); }
.b.p1 { color: #fff; background: var(--p1); border-color: var(--p1); }
.b.p2 { color: #12151A; background: var(--warn); border-color: var(--warn); }
.b.p3 { color: var(--text-dim); }
.b.top { color: #fff; background: var(--accent-dim); border-color: var(--accent); }

/* ---------- фильтры ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
           padding: 12px; border: 1px solid var(--line); background: var(--panel);
           margin-bottom: 14px; }
.f { display: flex; flex-direction: column; gap: 4px; }
.f label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
           color: var(--text-faint); }
input, select, textarea {
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  padding: 5px 8px; border-radius: 2px; font-family: var(--sans); font-size: 12.5px;
  min-width: 130px;
}
select { padding-right: 26px; }  /* v4.3.1: стрелка не наезжает на текст */
input:focus, select:focus { border-color: var(--accent); outline: none; }
button, .btn {
  background: var(--accent-dim); border: 1px solid var(--accent); color: #fff;
  padding: 5px 12px; border-radius: 2px; cursor: pointer; font-size: 12.5px;
  font-family: var(--sans);
}
button:hover, .btn:hover { background: var(--accent); text-decoration: none; }
button.ghost, .btn.ghost { background: transparent; border-color: var(--line);
                           color: var(--text-dim); }
button.ghost:hover, .btn.ghost:hover { border-color: var(--accent); color: var(--text); }

/* ---------- покрытие семейств ---------- */
.cov { display: flex; gap: 2px; }
.cell { width: 13px; height: 15px; border-radius: 1px; background: var(--line-soft);
        border: 1px solid transparent; }
.cell.has { background: var(--accent); }
.cell.exp { border-color: var(--bad); }
.cell.has.exp { border-color: transparent; }
.vrow { display: grid; grid-template-columns: 130px 60px 1fr 90px 100px; gap: 12px;
        align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); }
.vrow:hover { background: var(--panel-2); }

/* ---------- GAP-задачи ---------- */
.task { display: grid; grid-template-columns: 34px 90px 150px 1fr auto; gap: 12px;
        align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.task:hover { background: var(--panel-2); }
.task .ev { color: var(--text-dim); font-size: 12px; }
.drop { border: 1px dashed var(--line); border-radius: 3px; padding: 4px 10px;
        color: var(--text-faint); font-size: 11px; cursor: pointer; }
.drop.over { border-color: var(--accent); color: var(--accent); background: var(--panel-2); }

/* ---------- панель документа ---------- */
.split { display: grid; grid-template-columns: 1fr 0; transition: grid-template-columns .15s; }
.split.open { grid-template-columns: 1fr 460px; }
.side { border-left: 1px solid var(--line); background: var(--panel); overflow: hidden;
        position: sticky; top: 48px; max-height: calc(100vh - 48px); overflow-y: auto; }
.side-in { padding: 14px; }
.kv { display: grid; grid-template-columns: 108px 1fr; gap: 4px 10px; font-size: 12px;
      margin-bottom: 12px; }
.kv .k { color: var(--text-faint); }
.kv .v { font-family: var(--mono); font-size: 11.5px; word-break: break-all; }
pre.preview { background: var(--bg); border: 1px solid var(--line); padding: 10px;
              font-family: var(--mono); font-size: 11px; line-height: 1.45;
              max-height: 40vh; overflow: auto; white-space: pre-wrap; color: var(--text-dim); }
pre.log { background: var(--bg); border: 1px solid var(--line); padding: 12px;
          font-family: var(--mono); font-size: 11px; line-height: 1.5; max-height: 60vh;
          overflow: auto; color: var(--text-dim); }

/* ---------- прочее ---------- */
.note { border-left: 2px solid var(--warn); background: var(--panel); padding: 10px 12px;
        font-size: 12px; color: var(--text-dim); margin: 12px 0; }
.note.bad { border-color: var(--bad); }
.empty { padding: 40px 20px; text-align: center; color: var(--text-faint);
         border: 1px dashed var(--line); }
.login { max-width: 300px; margin: 18vh auto; }
.login h1 { font-family: var(--mono); font-size: 14px; letter-spacing: 0.08em; }
.err { color: var(--bad); font-size: 12px; margin: 8px 0; }

@media (max-width: 900px) {
  nav.main a { padding: 6px 8px; font-size: 12px; }
  .split.open { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; border-left: 0; border-top: 1px solid var(--line); }
  .vrow { grid-template-columns: 1fr; gap: 6px; }
  .task { grid-template-columns: 30px 1fr; }
  main { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* v1.3: визуализация воронки полосами */
.fbars { margin: 14px 0 4px; }
.fbar-row { display: flex; align-items: center; gap: 14px; margin: 7px 0; }
.fbar-label { width: 180px; flex-shrink: 0; font-size: 13px; color: #9fb3c8; text-align: right; }
.fbar-track { flex: 1; position: relative; background: var(--panel-2); border-radius: 5px; height: 26px; overflow: hidden; }
.fbar-fill { height: 100%; border-radius: 5px; min-width: 2px; transition: width .4s ease; }
.fbar-val { position: absolute; left: 10px; top: 0; line-height: 26px; font-size: 12px;
  font-family: 'JetBrains Mono', monospace; color: #e8eef4; text-shadow: 0 0 4px rgba(0,0,0,.6); }
.tile.acc { border-color: #4A7BA7; }
.tile.acc .v { color: #6FB4E8; }
.b.warn { background: #3a2f1a; color: #d8a850; }

/* v2.0: витрина «Исходные документы» */
.vend{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
.vend-head{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer}
.vend-head:hover{background:var(--panel-2)}
.vend-logo{width:38px;height:38px;border-radius:9px;background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--mono,monospace);color:#6FB4E8;flex-shrink:0;font-size:12px}
.vend-meta{flex:1}.vend-name{font-weight:600}.vend-sub{color:#8a99a8;font-size:12px;margin-top:1px}
.prog{width:120px;flex-shrink:0}.prog-bar{height:6px;background:var(--panel-2);border-radius:4px;overflow:hidden;margin-top:5px}
.prog-fill{height:100%;background:#4ADE4A;border-radius:4px}
.vend-body{padding:0 20px 8px;display:none}.vend.open .vend-body{display:block}
.chev{color:#5a6570;transition:.2s}.vend.open .chev{transform:rotate(90deg)}
.doc{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid #1e242b;font-size:13px}
.doc-type{width:150px;flex-shrink:0;font-size:11px;color:#8a99a8}
.doc-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-q{width:60px;flex-shrink:0}.qbar{height:5px;background:var(--panel-2);border-radius:3px;overflow:hidden}
.qbar i{display:block;height:100%;background:#4ADE4A}
.kind{font-size:10px;padding:1px 7px;border-radius:10px;font-family:var(--mono,monospace)}
.kind.tech{background:#16324a;color:#6FB4E8}.kind.mkt{background:#3a2f18;color:#D6A94A}
.dl{color:#5a6570;font-size:14px}.dl:hover{color:#6FB4E8}

/* v3.0: карточка вендора, приоритеты, покрытие */
.prio{font-family:var(--mono,monospace);font-size:10px;border:1px solid #1e242b;border-radius:5px;padding:1px 6px;color:#8a99a8}
.prio.p1{border-color:#4A7BA7;color:#6FB4E8}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto}
.overlay.open{display:flex}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:840px;width:100%;overflow:hidden}
.card-head{padding:18px 22px;border-bottom:1px solid #1e242b;display:flex;align-items:center;gap:14px}
.card-logo{width:50px;height:50px;border-radius:12px;background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--mono,monospace);color:#6FB4E8;font-size:15px;flex-shrink:0}
.card-body{padding:18px 22px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:13px;margin-bottom:14px}
.kv .k{color:#8a99a8}
.cov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;margin:8px 0}
.cov-cell{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px}
.cov-cell.have{border-color:#2f8a2f}.cov-cell.have .st{color:#4ADE4A}
.cov-cell.miss{opacity:.5}.cov-cell.miss .st{color:#5a6570}
.cov-cell.closed{border-color:#4a2a2a}.cov-cell.closed .st{color:#C05B5B}
.cov-cell .st{font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.key-star{color:#6FB4E8}
.doc-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #1e242b;font-size:13px}
.doc-row .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x{margin-left:auto;color:#5a6570;font-size:22px;cursor:pointer;line-height:1}.x:hover{color:#E8EEF4}
.prog-bar{height:6px;background:var(--panel-2);border-radius:4px;overflow:hidden;width:86px;display:inline-block;vertical-align:middle}
.prog-fill{height:100%;border-radius:4px}
tbody tr[onclick]{cursor:pointer}

/* v3.1.1: таблица версий — активная строка явно выделена */
tr.ver-active td { background: #12211a; border-top: 1px solid #2f8a2f; border-bottom: 1px solid #2f8a2f; }
tr.ver-active td:first-child { border-left: 3px solid #4ADE4A; color: #E8EEF4; }
tr.ver-active:hover td { background: #16281f; }
button.btn-sm { padding: 3px 10px; font-size: 12px; margin-left: 8px; }

/* v3.2: очистка и прогоны */
#cl-result table { width:100%; font-size:12px; }
.filters label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:#8a99a8; }
.wrap label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--text-dim); }
.wrap label input[type=text], .wrap label input[type=number] {
  background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:7px 10px; font-size:13px; }
tr.run-row { cursor: pointer; }
tr.run-row:hover td { background:var(--panel-2); }

/* v3.4.2: кликабельные плитки покрытия */
.cov-cell.cov-click { cursor: pointer; }
.cov-cell.cov-click:hover { border-color: #4A7BA7; background: #182029; }

/* v3.4.3: сортируемые заголовки и мини-схема покрытия в таблице */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: #E8EEF4; }
.cov-mini { display: flex; gap: 2px; margin-bottom: 4px; }
.cov-mini .cm { width: 11px; height: 11px; border-radius: 2px; }
.cov-mini .cm.f { background: #4ADE4A; }
.cov-mini .cm.m { border: 1.5px solid #3a4149; }
.cov-mini .cm.x { border: 1.5px solid #C05B5B; background: #2a1616; }

/* ========================================================================
   v4.0: светлая тема. Активируется html[data-theme="light"] (переключатель
   в шапке: авто по системе / светлая / тёмная). Тёмная — база выше.
   ======================================================================== */
html[data-theme="light"] {
  --bg: #F4F5F7;
  --panel: #FFFFFF;
  --panel-2: #EDEFF2;
  --line: #D5DAE0;
  --line-soft: #E3E7EB;
  --text: #1C2128;
  --text-dim: #5A6470;
  --text-faint: #8B95A1;
  --accent: #34648F;
  --accent-dim: #4A7BA7;
  --ok: #2E7D52;
  --warn: #8A6A20;
  --bad: #A03F3B;
  --p1: #A03F3B;
  --p2: #8A6A20;
  --p3: #8B95A1;
}
/* добор к захардкоженным тёмным фонам (карточки вендоров, полосы воронки) */
html[data-theme="light"] .fbar-label { color: #4a5866; }
html[data-theme="light"] .fbar-track,
html[data-theme="light"] .prog-bar,
html[data-theme="light"] .qbar { background: #E3E7EB; }
html[data-theme="light"] .fbar-val { color: #1C2128; text-shadow: none; }
html[data-theme="light"] .vend { background: #FFFFFF; border-color: #D5DAE0; }
html[data-theme="light"] .vend-head:hover { background: #F0F2F5; }
html[data-theme="light"] .vend-logo { background: #EDEFF2; color: #34648F; }
html[data-theme="light"] .vend-sub, html[data-theme="light"] .doc-type { color: #5A6470; }
html[data-theme="light"] .doc { border-top-color: #E3E7EB; }
html[data-theme="light"] .b.warn { background: #F5EBD2; color: #6E5518; }
html[data-theme="light"] .b.ok { border-color: #BFDCCB; }
html[data-theme="light"] .b.bad { border-color: #E4C3C1; }
html[data-theme="light"] .tile.acc .v { color: #34648F; }
html[data-theme="light"] .b.p2 { color: #fff; }


/* v4.2: выпадающее меню «Система» */
.nav-drop { position: relative; display: inline-block; }
.nav-drop > a { display: inline-block; }
.nav-drop.active > a { color: var(--text); }
.nav-drop-menu {
  display: none; position: absolute; right: 0; top: 100%; z-index: 60;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  min-width: 200px; padding: 6px 0; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { display: block; }
.nav-drop-menu a { display: block; padding: 7px 14px; white-space: nowrap; }
.nav-drop-menu a:hover { background: var(--panel-2); }
/* v4.2: системный раздел с левым меню подстраниц */
.sys-layout { display: flex; gap: 18px; align-items: flex-start; }
.sys-side { flex: 0 0 190px; position: sticky; top: 60px;
  max-height: calc(100vh - 72px); overflow-y: auto; align-self: flex-start; }
.sys-side a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text-dim); }
.sys-side a.active { background: var(--panel-2); color: var(--text); }
.sys-side a:hover { color: var(--text); text-decoration: none; }
.sys-body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 800px) {
  .sys-layout { display: block; }
  .sys-side { position: static; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
}
/* v4.2: бейдж «идёт» — заметный, пульсирующий */
.b.live { background: #1d4429; color: #6fe39a; border-color: #2e6b41; animation: cvc-pulse 1.6s ease-in-out infinite; }
@keyframes cvc-pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
/* v4.2: дельты показателей как у котировок */
.delta { font-size: 12px; margin-top: 2px; display: block; }
.delta.up { color: var(--ok); }
.delta.flat { color: var(--text-faint); }


/* v4.3.1: доборы светлой темы после чистки хардкодов */
html[data-theme="light"] .kind.tech { background: #DCEBF7; color: #235A85; }
html[data-theme="light"] .kind.mkt { background: #F3E8CC; color: #7A5E1E; }
html[data-theme="light"] .prog-fill, html[data-theme="light"] .qbar i { background: #2E9E52; }
/* v4.3.1: картинка-логотип (эксперимент): тёмный вариант в тёмной теме, светлый — в светлой */
.brand-img { height: 28px; max-width: 220px; object-fit: contain; display: block; }
html[data-theme="light"] .brand-img.brand-dark { display: none; }
html:not([data-theme="light"]) .brand-img.brand-light { display: none; }

/* v4.4.2: компактные плитки ресурсов — в одну строку, значения влезают */
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px; max-width: 980px; }
.res-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; min-width: 0; }
.res-tile .rv { font-family: var(--mono); font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-tile .rk { color: var(--text-faint); font-size: 10px; text-transform: uppercase;
  letter-spacing: .4px; margin-top: 2px; white-space: nowrap; }

/* v4.4.2: выбор темы — явный сегмент-контрол, а не «что-то на фоне» */
.theme-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: var(--bg); }
.theme-seg button { border: none; border-radius: 0; background: transparent;
  color: var(--text-dim); padding: 8px 16px; font-size: 13px; cursor: pointer; min-width: 0; }
.theme-seg button + button { border-left: 1px solid var(--line); }
.theme-seg button:hover { color: var(--text); background: var(--panel-2); }
.theme-seg button.active { background: var(--accent); color: #fff; font-weight: 600; }


/* v4.4.4: акцентные «зелёные» кнопки — на переменных, аккуратные в обеих темах */
.nav-new-run, .btn-go { background: var(--go-bg, #173a24); color: var(--go-fg, #5fd88a);
  border: 1px solid var(--go-line, #2e6b41); border-radius: 8px; }
.nav-new-run:hover, .btn-go:hover { filter: brightness(1.15); text-decoration: none; }
html[data-theme="light"] .nav-new-run, html[data-theme="light"] .btn-go {
  --go-bg: #E3F4E8; --go-fg: #16713A; --go-line: #B7DFC4; }


/* v4.4.5: светлая тема — добивка мест от AK */
html[data-theme="light"] tr.ver-active td { background: #E4F3E8; border-top-color: #7CC98F; border-bottom-color: #7CC98F; }
html[data-theme="light"] tr.ver-active:hover td { background: #D9EEDF; }
html[data-theme="light"] .cov-cell.cov-click:hover { border-color: #6FA5D4; background: #EDF3FA; }
html[data-theme="light"] .cov-mini .cm.x { background: #F7E2E2; }
/* больше воздуха между секциями Настроек */
.sys-body h2 { margin-top: 34px; }

/* v4.4.6: номер активной версии был белым на светло-зелёном в светлой теме */
html[data-theme="light"] tr.ver-active td { color: #14361F; }
html[data-theme="light"] tr.ver-active td a { color: #14361F; }

/* v4.5: компактные подписи полей — всё в одну строку, «не обяз.» мелко и приглушённо */
.lbl-1l{white-space:nowrap;display:block}
.lbl-1l .opt{font-weight:400;font-size:10px;color:var(--text-faint);letter-spacing:.02em}