/* Clientes: lista e ficha (prefixo cl-). Só tokens; funciona nos temas escuro e claro. */

/* ===== Lista ===== */
.cl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-busca { flex: 1 1 260px; max-width: 380px; min-width: 0; }
.cl-busca .input { width: 100%; }
.cl-bar .select { height: 36px; font-size: var(--fs-xs); max-width: 220px; min-width: 0; }
.cl-vista { margin-left: auto; }
.cl-vista button { padding: 0 10px; }
.cl-vista button svg { width: 15px; height: 15px; vertical-align: -3px; }
.cl-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.cl-chips .chip { cursor: pointer; border-style: solid; border-color: var(--line-2); }
.cl-chips .chip:hover { color: var(--tx); border-color: var(--line-3); }
.cl-chips .chip em { font-style: normal; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-pill); background: var(--s3); color: var(--tx-2); }
.cl-chips .chip.on em { background: var(--red-soft); color: var(--red-tx); }
.cl-conta { margin-left: auto; font-size: var(--fs-xs); }
.cl-sub { display: block; font-size: var(--fs-2xs); color: var(--tx-3); font-weight: 400; margin-top: 1px; }
.cl-ic.info { background: var(--info-soft); color: var(--info); }
.cl-ic.ok { background: var(--ok-soft); color: var(--ok); }
.cl-ic.gold { background: var(--gold-soft); color: var(--gold-tx); }

.cl-tbl td { vertical-align: middle; }
.cl-tbl tbody tr { animation: rise .45s var(--ease) both; animation-delay: calc(var(--i) * 25ms); }
.cl-cell { min-width: 230px; align-items: center; }
.cl-cell small { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.cl-tbl .cl-tags { flex-wrap: nowrap; }
.cl-tp { display: inline-grid; place-items: center; height: 18px; padding: 0 5px; border-radius: 5px; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; font-family: var(--mono); color: var(--tx-2); background: var(--s3); border: 1px solid var(--line-2); }
.cl-tp.PF { color: var(--gold-tx); border-color: var(--gold-line); background: var(--gold-soft); }
.cl-loc { display: grid; font-size: var(--fs-sm); white-space: nowrap; }
.cl-loc small { font-size: var(--fs-2xs); color: var(--tx-3); }
.cl-v { font-weight: 600; }
.cl-tags { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.cl-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-pill); font-size: 10.5px; color: var(--tx-2); background: var(--s1); border: 1px solid var(--line-2); white-space: nowrap; }
.cl-vazio { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 34px 16px; color: var(--tx-3); font-size: var(--fs-sm); flex-wrap: wrap; }
.cl-vazio > svg { width: 18px; height: 18px; }
.cl-vazio b { font-weight: 500; color: var(--tx-2); }
.cl-cards .cl-vazio { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--s1); }

/* Cartões */
.cl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cl-card { position: relative; display: grid; gap: 12px; padding: 16px; color: inherit; overflow: hidden; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast); }
.cl-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cor); opacity: .7; }
.cl-card:hover { transform: translateY(-2px); border-color: var(--line-3); }
.cl-card__h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.cl-card__h > div { display: grid; min-width: 0; }
.cl-card__h b { font-weight: 500; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-card__h small { font-size: var(--fs-2xs); color: var(--tx-3); display: flex; align-items: center; gap: 4px; }
.cl-card__n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-md); }
.cl-card__n > div { display: grid; gap: 1px; padding: 8px 10px; min-width: 0; }
.cl-card__n > div + div { border-left: 1px solid var(--line); }
.cl-card__n small { font-size: 10.5px; color: var(--tx-3); white-space: nowrap; }
.cl-card__n b { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-card__f { display: flex; align-items: center; gap: 8px; }
.cl-card__f .cl-tags { flex: 1; }
.cl-card__f .avatar { flex: none; }
.cl-ln { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.cl-ln li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--tx-2); min-width: 0; }
.cl-ln li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-ln svg { width: 14px; height: 14px; color: var(--tx-3); flex: none; }

/* ===== Ficha ===== */
.cl-hero { align-items: flex-start; }
.cl-hero::after { display: none; }
.cl-hero .cli-hero__main { min-width: 260px; }
.cl-hero .cli-hero__acts { align-self: center; }
.cl-hero .cli-hero__acts .btn > svg { flex: none; }
.cl-hero h1 { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; margin: 2px 0 4px; overflow-wrap: anywhere; }
.cl-av { flex: none; }
.cl-selos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cl-pilltp, .cl-pilltag { background: var(--s3); color: var(--tx-2); border: 1px solid var(--line); }
.cl-pilltag svg { width: 11px; height: 11px; color: var(--tx-3); }
.cl-linha { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: var(--fs-xs); color: var(--tx-3); }
.cl-linha > span { display: inline-flex; align-items: center; gap: 6px; }
.cl-linha svg { width: 14px; height: 14px; }
.cl-linha .mono { color: var(--tx-2); }
.cl-dono { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--tx-2); }
.cl-dono b { font-weight: 500; color: var(--tx); }
.cl-dono .avatar.sm { width: 22px; height: 22px; font-size: 9px; }

.cl-alerts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.cl-al { --c: var(--info); display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 8px 10px 8px 12px; border-radius: var(--r-md); color: inherit;
  background: color-mix(in srgb, var(--c) 8%, var(--s1)); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); transition: border-color var(--t-fast), transform var(--t-fast); }
a.cl-al:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-1px); }
.cl-al.crit { --c: var(--crit); } .cl-al.warn { --c: var(--warn); } .cl-al.info { --c: var(--info); } .cl-al.wa { --c: var(--wa); }
.cl-al > svg:first-child { width: 16px; height: 16px; color: var(--c); flex: none; }
.cl-al > svg:last-child:not(:first-child) { width: 14px; height: 14px; color: var(--tx-3); flex: none; }
.cl-al span { display: grid; min-width: 0; }
.cl-al b { font-size: var(--fs-xs); font-weight: 600; }
.cl-al small { font-size: var(--fs-2xs); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cl-kpis .mini { align-items: flex-start; }
.cl-kpis .mini b { font-size: var(--fs-lg); }
.cl-kpis .mini .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* cabeçalho de seção: título + contagem à esquerda, ação à direita */
.cl-head { align-items: center; min-height: 32px; }
.cl-head h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.cl-head h3 > svg { align-self: center; flex: none; }
.cl-head h3 > span { white-space: nowrap; }
.cl-head__n { font-size: var(--fs-xs); font-weight: 400; color: var(--tx-3); }
.cl-head > .btn, .cl-head > .card-link { flex: none; }
.cl-head .btn > svg { flex: none; }

.cl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
.cl-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.cl-pad { padding: 14px 20px 18px; display: grid; gap: 8px; }
.cl-side .card-head { padding: 16px 18px 0; }
.cl-side .cl-pad { padding: 12px 18px 16px; }

/* linha de orçamento / OS */
.cl-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--s1); color: inherit; transition: border-color var(--t-fast), background var(--t-fast); }
a.cl-row:hover { border-color: var(--red-line); background: var(--s2); }
.cl-row__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--s3); color: var(--tx-2); }
.cl-row__ic svg { width: 16px; height: 16px; }
.cl-row__m { display: grid; gap: 2px; min-width: 0; }
.cl-row__m b { font-size: var(--fs-sm); font-weight: 500; display: flex; gap: 8px; min-width: 0; }
.cl-row__m b .mono { font-size: var(--fs-xs); color: var(--tx-2); flex: none; padding-top: 1px; }
.cl-row__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-row__m small { font-size: var(--fs-2xs); color: var(--tx-3); }
.cl-row__r { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.cl-row__v { font-size: var(--fs-sm); font-weight: 600; min-width: 88px; text-align: right; }
.cl-prog { --c: var(--info); display: block; width: 64px; flex: none; height: 4px; border-radius: 4px; background: var(--s4); overflow: hidden; }
.cl-prog i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--c); transform-origin: left; animation: grow-x .9s var(--ease) both; }
.cl-prog.ok { --c: var(--ok); } .cl-prog.warn { --c: var(--warn); } .cl-prog.crit { --c: var(--crit); }

/* obras */
.cl-obras { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cl-obra { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--s1); border: 1px solid var(--line); }
.cl-obra__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-tx); }
.cl-obra__ic svg { width: 16px; height: 16px; }
.cl-obra__m { display: grid; gap: 2px; min-width: 0; }
.cl-obra__m b { font-size: var(--fs-sm); font-weight: 500; }
.cl-obra__m small { font-size: var(--fs-2xs); color: var(--tx-3); }
.cl-obra__end { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.cl-obra__end svg { width: 12px; height: 12px; flex: none; }
.cl-obra__r { grid-column: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cl-obra__r small { font-size: var(--fs-2xs); color: var(--tx-3); }

/* ficha (dl) */
.cl-dl { margin: 0; display: grid; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.cl-dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 9px 12px; font-size: var(--fs-xs); }
.cl-dl > div + div { border-top: 1px solid var(--line); }
.cl-dl dt { color: var(--tx-3); }
.cl-dl dd { margin: 0; color: var(--tx); overflow-wrap: anywhere; display: grid; gap: 1px; }
.cl-dl dd small { font-size: var(--fs-2xs); color: var(--tx-3); }
.cl-dl dd b { font-weight: 600; }
.cl-dl dd > .pill { justify-self: start; }
.cl-dl dd .cl-tags { padding-top: 1px; }

/* conversas */
.cl-wa { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--s1); border: 1px solid var(--line); color: inherit; transition: border-color var(--t-fast); }
a.cl-wa:hover { border-color: color-mix(in srgb, var(--wa) 45%, transparent); }
.cl-wa__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--wa-soft); color: var(--wa); }
.cl-wa__ic svg { width: 16px; height: 16px; }
.cl-wa__m { display: grid; gap: 3px; min-width: 0; }
.cl-wa__t { display: flex; justify-content: space-between; gap: 8px; }
.cl-wa__t b { font-size: var(--fs-sm); font-weight: 500; }
.cl-wa__t small { font-size: var(--fs-2xs); color: var(--tx-4); }
.cl-wa__m p { margin: 0; font-size: var(--fs-xs); color: var(--tx-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-wa__f { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cl-funil { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); color: var(--tx-2); }
.cl-funil i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.cl-wa .badge { height: 18px; min-width: 18px; font-size: 10px; }

/* linha do tempo */
.cl-tl { list-style: none; margin: 0; padding: 0; display: grid; }
.cl-tl > li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-bottom: 12px; }
.cl-tl > li::before { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1px; background: var(--line-2); }
.cl-tl > li:last-child { padding-bottom: 0; }
.cl-tl > li:last-child::before { display: none; }
.cl-tl > li.cl-tl__mais { display: none; }
.cl-tl--tudo .cl-tl > li.cl-tl__mais { display: grid; }
.cl-tl > li:nth-last-child(1 of :not(.cl-tl__mais))::before { display: none; }
.cl-tl--tudo .cl-tl > li:nth-last-child(1 of :not(.cl-tl__mais))::before { display: block; }
.cl-tl--tudo .cl-tl > li:last-child::before { display: none; }
.cl-tl__ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--s3); color: var(--tx-2); position: relative; z-index: 1; }
.cl-tl__ic svg { width: 13px; height: 13px; }
.cl-tl li.crit .cl-tl__ic { background: var(--crit-soft); color: var(--crit); }
.cl-tl li.info .cl-tl__ic { background: var(--info-soft); color: var(--info); }
.cl-tl li.ok .cl-tl__ic { background: var(--ok-soft); color: var(--ok); }
.cl-tl li.wa .cl-tl__ic { background: var(--wa-soft); color: var(--wa); }
.cl-tl li.edit .cl-tl__ic { background: var(--gold-soft); color: var(--gold-tx); }
.cl-tl > li > div { display: grid; gap: 1px; min-width: 0; padding-top: 3px; }
.cl-tl > li > div > b { font-size: var(--fs-xs); font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-tl > li > div > small { font-size: var(--fs-2xs); color: var(--tx-3); }
/* linhas "Campo: antigo → novo" */
.cl-mud { list-style: none; margin: 3px 0 2px; padding: 0; display: grid; gap: 2px; }
.cl-mud li { font-size: var(--fs-2xs); line-height: 1.5; color: var(--tx-4); overflow-wrap: anywhere; }
.cl-mud__k { color: var(--tx-3); }
.cl-mud s { text-decoration: none; color: var(--tx-3); }
.cl-mud b { font-weight: 500; color: var(--tx); }

/* vazio */
.cl-empty { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 20px 14px; border: 1px solid var(--line); background: var(--s1); border-radius: var(--r-md); }
.cl-empty__ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--s3); color: var(--tx-3); margin-bottom: 4px; }
.cl-empty__ic svg { width: 17px; height: 17px; }
.cl-empty b { font-size: var(--fs-sm); font-weight: 500; }
.cl-empty small { font-size: var(--fs-xs); color: var(--tx-3); max-width: 46ch; line-height: 1.45; }

/* levantamentos da obra */
.cl-levs { display: grid; gap: 10px; }
.cl-lev { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--s1); min-width: 0; }
.cl-lev__h { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 12px 12px 12px; }
.cl-lev__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-tx); }
.cl-lev__ic svg { width: 16px; height: 16px; }
.cl-lev.is-vazio .cl-lev__ic { background: var(--s3); color: var(--tx-3); }
.cl-lev__t { display: grid; gap: 3px; min-width: 0; }
.cl-lev__t b { font-size: var(--fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-lev__t small { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-2xs); color: var(--tx-3); }
.cl-lev__t a { display: inline-flex; align-items: center; gap: 3px; color: var(--tx-2); }
.cl-lev__t a:hover { color: var(--red-tx); }
.cl-lev__t a svg { width: 12px; height: 12px; }
.cl-lev__falta { color: var(--warn); }
.cl-lev__h .btn > svg { flex: none; }
.cl-lev__b { padding: 12px 14px 14px 58px; border-top: 1px solid var(--line); }
.cl-lev__b .lv-dl { grid-template-columns: 140px minmax(0, 1fr); }
.cl-lev__vz { margin: 0; padding: 0 14px 14px 58px; font-size: var(--fs-xs); color: var(--tx-3); line-height: 1.5; }

/* ===== Janela de cadastro / edição ===== */
.modal.cl-md { width: min(720px, calc(100vw - 32px)); }
.cl-md .modal__head h3 { font-size: var(--fs-lg); font-weight: 600; }
.cl-md__t { min-width: 0; }
.cl-md__t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-md .modal__body { padding: 8px 24px 20px; }
.cl-fm { display: grid; }
.cl-fs { padding: 16px 0; }
.cl-fs + .cl-fs { border-top: 1px solid var(--line); }
.cl-fs h4 { margin: 0 0 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--tx); }
.cl-fg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.cl-f { display: grid; gap: 0; min-width: 0; align-content: start; }
.cl-f.largo { grid-column: 1 / -1; }
.cl-f .input, .cl-f .select { width: 100%; }
.cl-f .lbl em { font-style: normal; color: var(--red-tx); }
.cl-f .lbl small { color: var(--tx-4); margin-left: 6px; }
.cl-f .input.cl-err { border-color: var(--crit); }
.cl-fseg { justify-self: start; }
.cl-tgbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 5px 8px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--s1); }
.cl-tgbox:focus-within { border-color: var(--red-line); }
.cl-tgs { display: contents; }
.cl-tgbox input { flex: 1 1 140px; min-width: 0; height: 28px; border: 0; outline: 0; background: transparent; color: var(--tx); font: inherit; font-size: var(--fs-sm); }
.cl-tg { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--tx); background: var(--s3); border: 1px solid var(--line-2); }
.cl-tg button { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: var(--tx-3); }
.cl-tg button:hover { background: var(--s4); color: var(--tx); }
.cl-tg button svg { width: 12px; height: 12px; }
.cl-tgsug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.cl-tgsug small { font-size: var(--fs-2xs); color: var(--tx-4); margin-right: 2px; }
.cl-tgadd { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--r-pill); font-size: var(--fs-2xs); color: var(--tx-2); border: 1px solid var(--line); background: transparent; transition: border-color var(--t-fast), color var(--t-fast); }
.cl-tgadd:hover { border-color: var(--red-line); color: var(--tx); }
.cl-tgadd svg { width: 11px; height: 11px; }

/* ===== Telas menores ===== */
@media (max-width: 1180px) {
  .cl-grid { grid-template-columns: minmax(0, 1fr); }
  .cl-col--side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-col--side > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1380px) { .cl-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cl-kpis .mini { padding: 12px; gap: 10px; } .cl-kpis .mini__ic { width: 32px; height: 32px; } }
@media (max-width: 1100px) { .cl-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .cl-col--side { grid-template-columns: minmax(0, 1fr); }
  .cl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-hero { padding: 18px; }
  .cl-hero h1 { font-size: 26px; }
  .cl-hero .cli-hero__acts { width: 100%; }
  .cl-hero .cli-hero__acts .btn { flex: 1 1 auto; justify-content: center; }
  .cl-row { grid-template-columns: 34px minmax(0, 1fr); }
  .cl-row__r { grid-column: 2; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
  .cl-row__v { min-width: 0; margin-left: auto; }
  .cl-lev__b { padding-left: 14px; }
  .cl-lev__vz { padding-left: 14px; }
  .cl-bar .select { flex: 1 1 140px; max-width: none; }
  .cl-vista { margin-left: 0; }
  .cl-cards { grid-template-columns: minmax(0, 1fr); }
  .cl-al { width: 100%; }
}
@media (max-width: 560px) {
  .cl-busca { flex-basis: 100%; max-width: none; }
  .cl-kpis > :last-child { grid-column: 1 / -1; }
  .cl-dl > div { grid-template-columns: 92px minmax(0, 1fr); }
  .cl-fg { grid-template-columns: minmax(0, 1fr); }
  .cl-md .modal__body { padding: 4px 16px 16px; }
  .cl-md .modal__head { padding: 16px; }
  .cl-md .modal__foot { padding: 12px 16px; }
  .cl-md .modal__foot .btn { flex: 1 1 auto; justify-content: center; }
  .cl-md .modal__foot .spacer { display: none; }
  .cl-lev__h { gap: 10px; }
  .cl-lev__h .btn { width: 34px; padding: 0; justify-content: center; }
  .cl-lev__h .btn > span { display: none; }
  .cl-lev__t b { white-space: normal; }
  .cl-lev__b .lv-dl { grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; }
  .cl-lev__b .lv-dl dd { margin-bottom: 0; }
  .cl-head { flex-wrap: wrap; }
}