/**
 * Studio CRM — acabamento premium (UX premium). Carregado por ÚLTIMO no layout do CRM (e no do hub do cliente).
 * Componentes: cabeçalho de página, estado vazio, avisos (toasts), diálogo de confirmação, paleta de comandos ⌘K,
 * atalhos, barra de progresso, esqueleto (skeleton), botão "carregando", tabelas no celular, foco, ritmo e toque.
 * Tudo nos tokens do tema (--ink, --surface, --line, --lk-accent...) com reserva para telas sem tema (hub).
 * Movimento só em transform/opacity e desligado com prefers-reduced-motion. Uso: docs/UX-PREMIUM.md.
 */

/* ============================================================ tokens do acabamento (com reserva) */
:root {
  --px-ink: var(--ink, #1b1f23);
  --px-ink-2: var(--ink-2, var(--ink, #3d4650));
  --px-muted: var(--muted, #5b6570);
  --px-canvas: var(--canvas, #f3f4f1);
  --px-surface: var(--surface, #ffffff);
  --px-soft: var(--surface-soft, #f7f7f5);
  --px-sunken: var(--sunken, var(--surface-soft, #f0f0ee));
  --px-line: var(--line, rgba(27, 31, 35, .1));
  --px-line-strong: var(--line-strong, var(--line, rgba(27, 31, 35, .18)));
  --px-accent: var(--lk-accent, var(--brand, #a61e25));
  --px-accent-soft: var(--lk-accent-soft, rgba(166, 30, 37, .1));
  --px-focus: var(--lk-focus, var(--lk-accent, var(--brand, #2f5bd3)));
  --px-focus-soft: var(--lk-focus-soft, rgba(47, 91, 211, .18));
  --px-ok: var(--lk-ok, #1f7a55);
  --px-danger: var(--lk-danger, #c2372c);
  --px-warn: var(--lk-warn, #9a620e);
  --px-info: var(--lk-info, #2f5bd3);
  --px-pop: var(--lk-pop, 0 24px 60px -20px rgba(20, 16, 12, .35), 0 0 0 1px rgba(20, 16, 12, .06));
  --px-radius: var(--radius, 12px);
  --px-radius-sm: var(--lk-radius-sm, 8px);
  --px-ease: var(--ease, cubic-bezier(.2, .8, .2, 1));
  --px-font: var(--lk-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  /* ritmo (múltiplos de 4) e escala de tipo */
  --px-1: 4px; --px-2: 8px; --px-3: 12px; --px-4: 16px; --px-5: 24px; --px-6: 32px; --px-7: 48px;
  --px-fs-xs: 12px; --px-fs-sm: 13px; --px-fs-md: 14.5px; --px-fs-lg: 16px; --px-fs-xl: 20px; --px-fs-2xl: 26px;
  --px-touch: 44px;
}

/* ============================================================ foco visível e consistente (todos os temas) */
:where(a, button, input, select, textarea, summary, [tabindex], .btn, .page-link, .nav-link):focus-visible {
  outline: 2px solid var(--px-focus) !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px var(--px-focus-soft) !important;
}
:where(.form-control, .form-select, input, select, textarea):focus-visible { outline-offset: 0 !important; }
/* campos dentro de uma caixa de busca: o anel fica na caixa, não no campo */
:is(.sidebar-search, .lk-cmd-search, .cpx-search, .topbar-search) input:focus-visible { outline: none !important; box-shadow: none !important; }
.sidebar-search:focus-within { box-shadow: 0 0 0 3px var(--px-focus-soft) !important; border-color: var(--px-focus) !important; }
.skip-link:focus { z-index: 2000; }

/* ícones: tamanho coerente com o texto */
.btn > .bi, .dropdown-item > .bi, .lk-ph-btn > .bi { font-size: 1.05em; line-height: 1; vertical-align: -.1em; }
.btn > .bi + span, .btn > .bi:not(:only-child) { margin-right: .1em; }
.btn-sm > .bi { font-size: 1em; }

/* números alinhados */
.data-table td, .table td { font-variant-numeric: tabular-nums; }

/* ============================================================ estrutura: nada empurra a página para os lados */
.main-region { grid-template-columns: minmax(0, 1fr); }
.main-region > * { min-width: 0; max-width: 100%; }
.app-content { min-width: 0; overflow-x: clip; }

/* ============================================================ cabeçalho de página */
.lk-ph-faixa { padding-bottom: 2px; }
.lk-ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--px-3) var(--px-5); }
.lk-ph-main { min-width: 0; flex: 1 1 380px; }
.lk-ph .trilha-atual h1 { font-size: clamp(22px, 2.1vw, 28px); letter-spacing: -.02em; line-height: 1.15; margin-top: 4px; }
.lk-ph-desc { margin: 4px 0 0; max-width: 72ch; color: var(--px-muted); font-size: var(--px-fs-md); line-height: 1.5; }
.lk-ph-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--px-2); margin-left: auto; }
.lk-ph-actions .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; white-space: nowrap; }
.lk-ph-html { display: inline-flex; flex-wrap: wrap; gap: var(--px-2); }
.lk-ph-more .dropdown-item { display: flex; align-items: center; gap: 8px; min-height: 40px; }
@media (max-width: 640px) {
  .lk-ph { align-items: stretch; }
  .lk-ph-actions { width: 100%; justify-content: flex-start; }
  .lk-ph-primary { order: -1; flex: 1 1 100%; justify-content: center; }
}

/* ============================================================ estado vazio */
.lk-empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: var(--px-7) var(--px-4); color: var(--px-ink); }
.lk-empty-compact { padding: var(--px-5) var(--px-3); }
.lk-empty-art { width: 132px; height: auto; margin-bottom: var(--px-2); overflow: visible; }
.lk-empty-compact .lk-empty-art { width: 92px; }
.lk-empty-shadow { fill: var(--px-ink); opacity: .06; }
.lk-empty-card { fill: var(--px-surface); stroke: var(--px-line-strong); stroke-width: 1.2; }
.lk-empty-card-back { fill: var(--px-sunken); stroke: var(--px-line); }
.lk-empty-dot { fill: var(--px-accent); opacity: .85; }
.lk-empty-dot-2 { fill: var(--px-muted); opacity: .45; }
.lk-empty-glyph { fill: none; stroke: var(--px-accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lk-empty-title { margin: 0; font-size: var(--px-fs-lg); font-weight: 600; letter-spacing: -.01em; color: var(--px-ink); }
.lk-empty-text { margin: 0; max-width: 46ch; color: var(--px-muted); font-size: var(--px-fs-md); line-height: 1.5; }
.lk-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--px-2); margin-top: var(--px-3); }
.lk-empty-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
td > .lk-empty { padding-block: var(--px-6); }
tr:has(> td > .lk-empty), tr:has(> td > .lk-empty):hover, tr:has(> td > .lk-empty) > td { background: transparent !important; box-shadow: none !important; }
tr:has(> td > .lk-empty) > td { border-bottom: 0 !important; }
@media (prefers-reduced-motion: no-preference) {
  .lk-empty-art { animation: lk-float 6s var(--px-ease) infinite alternate; }
  @keyframes lk-float { from { transform: translateY(0); } to { transform: translateY(-4px); } }
}

/* ============================================================ avisos (toasts) */
.lk-toasts { position: fixed; z-index: 1090; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); left: auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--px-2); width: min(420px, calc(100vw - 32px)); max-width: none !important; pointer-events: none; }
.lk-toasts:empty { display: none; }
.lk-toast.alert { pointer-events: auto; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px;
  width: 100%; margin: 0; padding: 12px 12px 12px 14px; border-radius: var(--px-radius-sm); font: 500 var(--px-fs-md)/1.45 var(--px-font);
  color: var(--px-ink) !important; background: var(--px-surface) !important; border: 1px solid var(--px-line) !important; box-shadow: var(--px-pop) !important; overflow: hidden; }
.lk-toast::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--lk-toast-c, var(--px-info)); }
.lk-toast-success { --lk-toast-c: var(--px-ok); }
.lk-toast-error { --lk-toast-c: var(--px-danger); }
.lk-toast-warning { --lk-toast-c: var(--px-warn); }
.lk-toast-info { --lk-toast-c: var(--px-info); }
.lk-toast-icon { color: var(--lk-toast-c); font-size: 18px; line-height: 1.2; }
.lk-toast-msg { overflow-wrap: anywhere; padding-top: 1px; }
.lk-toast-close { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -4px -6px 0; border-radius: 8px; color: var(--px-muted); cursor: pointer; }
.lk-toast-close:hover { background: var(--px-sunken); color: var(--px-ink); }
@media (prefers-reduced-motion: no-preference) {
  .lk-toast { animation: lk-toast-in .32s var(--px-ease) both; }
  .lk-toast-out { animation: lk-toast-out .22s ease-in both; }
  @keyframes lk-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes lk-toast-out { to { opacity: 0; transform: translateX(16px); } }
}
@media (max-width: 640px) {
  .lk-toasts { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; align-items: stretch; }
}

/* ============================================================ diálogos (confirmação, paleta, atalhos) */
.lk-dialog { padding: 0; border: 0; background: transparent; color: var(--px-ink); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: visible; font-family: var(--px-font); }
.lk-dialog::backdrop { background: color-mix(in srgb, #0b0a09 42%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.lk-dialog-box { width: min(440px, calc(100vw - 24px)); background: var(--px-surface); border: 1px solid var(--px-line); border-radius: calc(var(--px-radius) + 2px); box-shadow: var(--px-pop); padding: var(--px-5); }
.lk-confirm .lk-dialog-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--px-3) var(--px-4); }
.lk-dialog-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--px-sunken); color: var(--px-info); font-size: 18px; }
.lk-confirm.lk-danger .lk-dialog-icon { background: color-mix(in srgb, var(--px-danger) 12%, transparent); color: var(--px-danger); }
.lk-confirm:not(.lk-danger) .lk-dialog-icon i::before { content: "\f431"; } /* bi-question-circle */
.lk-dialog-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--px-ink); font-family: inherit; }
.lk-dialog-text { margin: 0; color: var(--px-ink-2); font-size: var(--px-fs-md); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.lk-dialog-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--px-2); margin-top: var(--px-2); }
.lk-dialog-actions .btn { min-height: 40px; min-width: 104px; }
.lk-btn-danger, html[data-look][data-theme] body .lk-btn-danger { background: var(--px-danger) !important; border-color: var(--px-danger) !important; color: #fff !important; }
.lk-btn-danger:hover { filter: brightness(.94); }
@media (prefers-reduced-motion: no-preference) {
  .lk-dialog[open] .lk-dialog-box, .lk-dialog[open] .lk-cmd-box { animation: lk-pop-in .2s var(--px-ease) both; }
  .lk-dialog[open]::backdrop { animation: lk-fade-in .2s ease both; }
  @keyframes lk-pop-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes lk-fade-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 480px) {
  .lk-confirm .lk-dialog-box { grid-template-columns: minmax(0, 1fr); }
  .lk-dialog-actions { flex-direction: column-reverse; }
  .lk-dialog-actions .btn { width: 100%; min-height: var(--px-touch); }
}

/* teclas */
.lk-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px;
  border: 1px solid var(--px-line-strong); border-bottom-width: 2px; background: var(--px-soft); color: var(--px-ink-2); font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace; }

/* ============================================================ paleta de comandos */
.lk-cmd { margin: min(12vh, 120px) auto auto; }
.lk-cmd-box { width: min(640px, calc(100vw - 24px)); display: flex; flex-direction: column; max-height: min(560px, calc(100dvh - 15vh)); background: var(--px-surface);
  border: 1px solid var(--px-line); border-radius: 16px; box-shadow: var(--px-pop); overflow: hidden; }
.lk-cmd-search { display: flex; align-items: center; gap: 10px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--px-line); }
.lk-cmd-search > .bi { color: var(--px-muted); font-size: 17px; }
.lk-cmd-search input { flex: 1; min-width: 0; height: 56px; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--px-ink) !important; font: 400 17px/1.2 var(--px-font); }
.lk-cmd-search input::placeholder { color: var(--px-muted); opacity: 1; }
.lk-cmd-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px; flex: 1 1 auto; }
.lk-cmd-group + .lk-cmd-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--px-line); }
.lk-cmd-gt { padding: 8px 12px 4px; font-size: 12px; font-weight: 600; color: var(--px-muted); letter-spacing: 0; }
.lk-cmd-opt { display: grid; grid-template-columns: 20px minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; padding: 6px 12px; border-radius: 10px; cursor: pointer; color: var(--px-ink); }
.lk-cmd-opt > .bi:first-child { color: var(--px-muted); font-size: 16px; text-align: center; }
.lk-cmd-l { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-cmd-l mark { background: transparent; color: inherit; padding: 0; font-weight: 700; text-decoration: underline; text-decoration-color: var(--px-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lk-cmd-s { font-size: 12.5px; color: var(--px-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-cmd-k { color: var(--px-muted); opacity: 0; font-size: 13px; }
.lk-cmd-opt[aria-selected="true"] { background: var(--px-sunken); box-shadow: inset 0 0 0 1px var(--px-line); }
.lk-cmd-opt[aria-selected="true"] > .bi:first-child { color: var(--px-accent); }
.lk-cmd-opt[aria-selected="true"] .lk-cmd-k { opacity: 1; }
.lk-cmd-opt.is-muted { cursor: default; color: var(--px-muted); }
.lk-cmd-empty { display: grid; justify-items: center; gap: 4px; padding: 22px 16px 8px; text-align: center; color: var(--px-muted); }
.lk-cmd-empty .bi { font-size: 26px; opacity: .6; }
.lk-cmd-empty p { margin: 6px 0 0; color: var(--px-ink); font-weight: 500; }
.lk-cmd-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 9px 16px; border-top: 1px solid var(--px-line); background: var(--px-soft); color: var(--px-muted); font-size: 12px; }
.lk-cmd-foot span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 640px) {
  .lk-cmd { margin: 8px auto auto; }
  .lk-cmd-box { max-height: calc(100dvh - 16px); }
  .lk-cmd-opt { grid-template-columns: 20px minmax(0, 1fr) auto; min-height: var(--px-touch); }
  .lk-cmd-s { grid-column: 2; grid-row: 2; margin-top: -4px; }
  .lk-cmd-k { grid-row: 1 / span 2; grid-column: 3; }
  .lk-cmd-foot { display: none; }
}
html.lk-cmd-open { overflow: hidden; }

/* gatilho da paleta no topo (aparência de campo de busca) */
.lk-cmd-trigger { display: inline-flex; align-items: center; gap: 10px; height: 40px; min-width: 260px; padding: 0 8px 0 12px; border-radius: 10px;
  border: 1px solid var(--px-line); background: var(--lk-field, var(--px-surface)); color: var(--px-muted) !important; text-decoration: none !important; font-size: 14px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; }
.lk-cmd-trigger:hover { border-color: var(--px-line-strong); color: var(--px-ink) !important; }
.lk-cmd-trigger .lk-cmd-trigger-text { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-cmd-trigger .lk-kbd { margin-left: auto; }
@media (max-width: 1100px) { .lk-cmd-trigger { min-width: 0; } .lk-cmd-trigger .lk-cmd-trigger-text { display: none; } .lk-cmd-trigger .lk-kbd { display: none; } .lk-cmd-trigger { width: 42px; justify-content: center; padding: 0; } }

/* atalhos */
.lk-shortcuts .lk-dialog-box { width: min(520px, calc(100vw - 24px)); }
.lk-sc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--px-3); }
.lk-sc-head form { margin: 0; }
.lk-icon-btn { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--px-muted); cursor: pointer; }
.lk-icon-btn:hover { background: var(--px-sunken); color: var(--px-ink); }
.lk-sc-list { margin: 0; display: grid; gap: 2px; }
.lk-sc-list > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--px-line); }
.lk-sc-list > div:first-child { border-top: 0; }
.lk-sc-list dt { display: flex; gap: 4px; font-weight: 400; }
.lk-sc-list dd { margin: 0; color: var(--px-ink-2); font-size: var(--px-fs-md); }
.lk-sc-tip { margin: var(--px-3) 0 0; color: var(--px-muted); font-size: var(--px-fs-sm); }

/* ============================================================ barra de progresso da navegação */
.lk-progress { position: fixed; z-index: 2000; inset: 0 0 auto 0; height: 2px; pointer-events: none; opacity: 0; }
.lk-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--px-accent), var(--lk-accent-2, var(--px-accent))); box-shadow: 0 0 8px var(--px-accent-soft); }
.lk-progress.lk-progress-on { opacity: 1; }
.lk-progress.lk-progress-on span { transform: scaleX(.82); transition: transform 8s cubic-bezier(.08, .7, .2, 1); }
.lk-progress.lk-progress-done span { transform: scaleX(1); transition: transform .18s ease-out; }
.lk-progress.lk-progress-done { opacity: 0; transition: opacity .25s ease .15s; }
@media (prefers-reduced-motion: reduce) {
  .lk-progress.lk-progress-on span { transform: scaleX(1); transition: none; opacity: .7; }
}

/* ============================================================ botão "carregando" (envio em andamento) */
.lk-busy { pointer-events: none; cursor: progress; opacity: .82; }
.lk-busy::before { content: ""; display: inline-block; flex: none; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: lk-spin .7s linear infinite; }
.lk-busy > .bi:first-child { display: none; }
@keyframes lk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lk-busy::before { animation-duration: 1.6s; } }
form[aria-busy="true"] { cursor: progress; }

/* ============================================================ esqueleto (skeleton) — utilitários */
.lk-skel { display: block; position: relative; overflow: hidden; border-radius: 8px; background: var(--px-sunken); color: transparent !important; user-select: none; }
.lk-skel-line { height: 12px; margin: 8px 0; border-radius: 6px; }
.lk-skel-line.lk-skel-w50 { width: 50%; } .lk-skel-line.lk-skel-w75 { width: 75%; } .lk-skel-line.lk-skel-w33 { width: 33%; }
.lk-skel-title { height: 20px; width: 45%; margin: 6px 0 12px; border-radius: 8px; }
.lk-skel-block { height: 120px; border-radius: var(--px-radius); }
.lk-skel-circle { width: 40px; height: 40px; border-radius: 50%; }
.lk-skel-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
@media (prefers-reduced-motion: no-preference) {
  .lk-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--px-surface) 70%, transparent), transparent); animation: lk-shimmer 1.4s ease-in-out infinite; }
  @keyframes lk-shimmer { to { transform: translateX(100%); } }
}

/* ============================================================ tabelas largas */
.lk-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* v80: a caixa que rola é o bloco de contenção dos filhos absolutos (ex.: .visually-hidden do cabeçalho "Ações"). Sem isso,
   com o movimento desligado (prefers-reduced-motion: sem o transform da animação de entrada na .main-region), eles saíam
   da caixa e a página inteira rolava para o lado no celular (/empresas 810 px em 390). */
.lk-table-wrap, .ux-table-wrap, .table-responsive { position: relative; }
.lk-table-wrap > table { margin-bottom: 0; }
.lk-scrolls:focus-visible { outline-offset: -2px !important; }
@media (max-width: 760px) {
  /* 1ª coluna fixa ao rolar para os lados (o nome do registro continua à vista) */
  .lk-scrolls > table.lk-sticky-first > thead > tr > :first-child,
  .lk-scrolls > table.lk-sticky-first > tbody > tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--px-surface); box-shadow: 1px 0 0 var(--px-line); }
  .lk-scrolls > table.lk-sticky-first > thead > tr > :first-child { background: var(--px-soft); z-index: 2; }
  .lk-scrolls > table.lk-sticky-first > tbody > tr > :first-child { max-width: 46vw; }
  .table-responsive, .lk-table-wrap { border-radius: var(--px-radius-sm); }
  .lk-scrolls { background: linear-gradient(90deg, var(--px-surface) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(270deg, var(--px-surface) 30%, transparent) right / 24px 100% no-repeat local,
    linear-gradient(270deg, color-mix(in srgb, var(--px-ink) 12%, transparent), transparent) right / 12px 100% no-repeat scroll; }
}

/* ============================================================ topo e menu no celular, alvos de toque */
@media (max-width: 760px) {
  .topbar { gap: 6px !important; padding: 8px 12px !important; min-height: 60px; }
  .topbar-lead { gap: 6px; min-width: 0; flex: 0 1 auto; }
  .topbar .topbar-brand-link { margin-left: 4px !important; min-width: 0; }
  .topbar .topbar-brand { height: 28px !important; max-width: 120px !important; }
  .topbar-actions { gap: 2px !important; flex-wrap: nowrap !important; min-width: 0; margin-left: auto; }
  /* o menu do usuário já tem "Sair"; site, Área do Cliente e Painel ficam na paleta (⌘K) e no menu */
  html body .topbar .topbar-actions > form[action$="/logout"], html body .topbar .topbar-actions > a.topbar-link, html body .topbar .topbar-actions > #look-picker, html body .topbar .topbar-actions > .lk-mode,
  html[data-look][data-theme] body .topbar .topbar-actions > a.topbar-link, html[data-look][data-theme] body .topbar .topbar-actions > #look-picker, html[data-look][data-theme] body .topbar .topbar-actions > .lk-mode { display: none !important; }
  .topbar-actions .icon-button, .topbar-actions .lk-cmd-trigger, .topbar-actions .help-btn, .topbar-actions #helpTourTrigger, .nav-toggle, [data-nav-toggle] {
    width: var(--px-touch) !important; height: var(--px-touch) !important; min-width: var(--px-touch); }
  html body .topbar .topbar-actions .topbar-bell > button, html[data-look][data-theme] body .topbar .topbar-actions .topbar-bell > button,
  html[data-look][data-theme] body .topbar .topbar-actions .icon-button, html[data-look][data-theme] body .topbar .topbar-actions a.help-btn { width: var(--px-touch) !important; height: var(--px-touch) !important; min-width: var(--px-touch) !important; }
  .topbar-actions .user-chip { display: inline-flex !important; width: var(--px-touch); height: var(--px-touch); overflow: hidden; padding: 0 !important; justify-content: center; align-items: center; }
  .topbar-actions .user-chip span { display: none; }
  .topbar-actions .user-chip::before { content: "\f4e1"; font-family: "bootstrap-icons"; font-size: 18px; } /* bi-person-circle */
  .trilha-faixa { padding: 10px 16px 4px !important; }
  .subnav-top { scrollbar-width: none; }
  .subnav-top a { white-space: nowrap; flex: none; }
  .main-region { padding: 12px !important; }
  .surface { padding: 14px !important; }
  .surface-header { gap: 10px !important; }
  .surface-header .d-flex { flex-wrap: wrap; }
  .filter-bar { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .filter-bar > :not(.visually-hidden) { width: 100% !important; max-width: none !important; min-width: 0 !important; }
}
@media (max-width: 760px), (pointer: coarse) {
  .btn:not(.btn-close), .form-control, .form-select, .page-link, .lk-pager button, .sidebar-nav a, .subnav-top a, .dropdown-item, .nav-link { min-height: var(--px-touch); }
  .btn:not(.btn-close) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .btn-sm:not(.btn-close) { min-width: var(--px-touch); }
  .form-check-input { width: 1.35em; height: 1.35em; }
  .trilha a { min-height: 32px; }
}
/* menu lateral (gaveta): sombra e transição suaves */
.app-sidebar { transition: transform .28s var(--px-ease), box-shadow .28s var(--px-ease) !important; }
body:not(.nav-open) .app-sidebar { box-shadow: none !important; }
.nav-backdrop { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
@media (prefers-reduced-motion: reduce) {
  .app-sidebar, .nav-backdrop { transition: none !important; }
  .main-region > * { animation: none !important; }
}

/* ============================================================ hub do cliente (sem tema): ajustes mínimos */
body.hub-shop .lk-cmd-trigger { min-width: 0; height: 34px; }
/* W1 (revisão): no hub a moldura é sempre clara e sem os tokens do tema — texto do atalho de busca com contraste AA */
body.hub-shop .lk-cmd-trigger, body.hub-shop .lk-cmd-trigger .lk-cmd-trigger-text { color: #3d4650 !important; background-color: #fff; }
body.hub-shop .lk-cmd-trigger:hover, body.hub-shop .lk-cmd-trigger:hover .lk-cmd-trigger-text { color: #1b1f23 !important; }
body.hub-shop .lk-cmd-trigger .lk-kbd { color: #3d4650 !important; background: #f3f4f1; border-color: #b9c0c7; }

/* ============================================================ cores fixas antigas → tokens (telas mais usadas)
   Fundo/borda/texto TINGIDO das telas antigas: color-mix(in srgb, <cor> var(--px-tint), <token>) — igual ao original no
   tema claro; no escuro (data-theme="dark": Ônix noite e Sala de controle) vira um tom discreto sobre a superfície. */
:root { --px-tint: 100%; }
html[data-theme="dark"] { --px-tint: 16%; }
html[data-look="controle"] { --lk-accent-text: #FF7A7E; --lk-accent-fill: #C9353B; }
/* v80: botão principal na Sala de controle — branco sobre #E5484D dá 3,9:1. Antes a animação de entrada (com blur) do
   tema escondia isso do axe; com o movimento desligado (prefers-reduced-motion, acima) o contraste aparece. Usa o
   preenchimento do acento (branco ≥4,5:1), como os chips e selos do tema. */
html[data-look="controle"][data-theme] body .btn-primary { background-color: var(--lk-accent-fill) !important; border-color: var(--lk-accent-fill) !important; color: #fff !important; }
html[data-look="controle"][data-theme] body .btn-primary:hover, html[data-look="controle"][data-theme] body .btn-primary:focus { background-color: color-mix(in srgb, var(--lk-accent-fill) 86%, #000) !important; border-color: color-mix(in srgb, var(--lk-accent-fill) 86%, #000) !important; color: #fff !important; }

/* selo "novo" do submenu: verde do tema (o #16a34a com texto branco dava 3,3:1) */
html body .sidebar-badge { background: var(--lk-ok, #1F7A55); color: #fff; }
html[data-theme="dark"] body .sidebar-badge { background: color-mix(in srgb, var(--lk-ok, #52C793) 22%, transparent); color: var(--lk-ok, #52C793); }
/* link dentro de texto corrido: sublinhado (não depende só da cor) */
.main-region :is(.alert, p, li, small, .muted-text, .form-text) a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* selos do Bootstrap nos temas escuros: tom sobre a superfície, texto na cor do estado (branco sobre verde claro dava 2:1) */
html[data-look][data-theme="dark"] body :is(.badge, .status-pill).text-bg-success, html[data-look][data-theme="dark"] body .badge.bg-success { background-color: color-mix(in srgb, var(--lk-ok) 18%, transparent) !important; color: var(--lk-ok) !important; }
html[data-look][data-theme="dark"] body :is(.badge, .status-pill).text-bg-danger, html[data-look][data-theme="dark"] body .badge.bg-danger { background-color: color-mix(in srgb, var(--lk-danger) 18%, transparent) !important; color: var(--lk-danger) !important; }
html[data-look][data-theme="dark"] body :is(.badge, .status-pill).text-bg-primary, html[data-look][data-theme="dark"] body .badge.bg-primary { background-color: color-mix(in srgb, var(--lk-accent) 14%, transparent) !important; color: var(--lk-accent-text, var(--lk-accent)) !important; }
html[data-look][data-theme="dark"] body :is(.badge, .status-pill).text-bg-warning { background-color: color-mix(in srgb, var(--lk-warn) 18%, transparent) !important; color: var(--lk-warn) !important; }
html[data-look][data-theme="dark"] body :is(.badge, .status-pill).text-bg-info { background-color: color-mix(in srgb, var(--lk-info) 18%, transparent) !important; color: var(--lk-info) !important; }
/* preenchimento em acento com texto branco (abas/chips ativos das telas antigas) */
html[data-look][data-theme] body .btn-danger:not(.lk-btn-danger) { color: #fff !important; }
/* cores semânticas antigas do app.css (--gold, --green) seguem o tema ativo: contraste ≥4,5:1 no claro e no escuro */
html[data-look] { --gold: var(--lk-warn); --gold-soft: color-mix(in srgb, var(--lk-warn) 11%, var(--surface)); --green: var(--lk-ok); --green-soft: color-mix(in srgb, var(--lk-ok) 11%, var(--surface)); }
html[data-look][data-theme] body .badge.bg-info-soft { background-color: color-mix(in srgb, var(--lk-info) 12%, var(--surface)) !important; color: var(--lk-info) !important; }
/* topo nos temas escuros: o studio-themes.css pinta #14171e (azul-marinho) com !important; vale a cor do tema */
html[data-look][data-theme="dark"] body header.topbar { background-color: var(--lk-topbar, var(--canvas)) !important; }
/* selects nos temas escuros: o studio-themes.css fixa #1a1e26/#2b303a com !important; vale o campo do tema */
html[data-look][data-theme="dark"] body select, html[data-look][data-theme="dark"] body select.form-select { background-color: var(--lk-field, var(--surface-soft)) !important; color: var(--ink) !important; border-color: var(--line-strong, var(--line)) !important; }
html[data-look][data-theme="dark"] body :is(input, textarea)::placeholder { color: var(--muted) !important; opacity: .85; }
/* linhas pares das tabelas nos temas escuros: sem o zebrado azul-marinho fixo (#1f242e) do studio-themes.css */
html[data-look][data-theme="dark"] body .table tbody tr:nth-child(even) { background-color: transparent; }
html[data-look][data-theme="dark"] body .table-hover tbody tr:hover { background-color: var(--surface-soft) !important; }

/* v80 — cabeçalho: principal, secundárias e "Mais ações" por último; no celular a principal ocupa a linha e as secundárias
   entram no "Mais ações" (revisão U-M6 e ordem dos botões) */
.lk-ph-only-mobile, .lk-ph-more-mobile { display: none; }
.lk-ph-btn-more { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .lk-ph-actions .lk-ph-btn { display: none; }
  .lk-ph-only-mobile { display: list-item; list-style: none; }
  .lk-ph-more-mobile { display: block; }
  .lk-ph-actions { gap: 8px; }
  .lk-ph-actions > .dropdown, .lk-ph-actions > .lk-ph-html { flex: 1 1 auto; }
  .lk-ph-actions > .dropdown > .btn { width: 100%; justify-content: center; }
  .lk-ph-desc { display: none; } /* os dados sobem: a descrição fica só no computador */
}
/* v80 — total da lista ao lado do título (h1), discreto */
.trilha-atual { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lk-ph-count { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); }

/* v80 (UX baixo): nas listas o botão flutuante do Studio AI fica menor e a página ganha folga no fim — não cobre a coluna
   de ações da última linha */
body:has(.ux-list, table.data-table) #ai-widget-button { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; bottom: 20px !important; right: 12px !important; opacity: .92; }
body:has(.ux-list, table.data-table) .main-region { padding-bottom: 76px; }
/* v80 (UX baixo): campos de data no escuro iguais aos outros campos (fundo, texto, borda e o ícone do calendário) */
html[data-theme="dark"] body input:is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
  color-scheme: dark; background-color: var(--surface) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; }
html[data-theme="dark"] body input:is([type=date], [type=datetime-local], [type=month], [type=time], [type=week])::-webkit-calendar-picker-indicator { filter: invert(.85); opacity: .8; }
/* v80: avisos acima do botão flutuante do Studio AI (que nas listas desce para o canto) */
.lk-toasts { z-index: 9995; }
/* W3: o botão flutuante do Studio AI nunca cobre o fim da página (ex.: a chave da última linha do Agendador a 1440 px).
   Com o botão na página, o conteúdo ganha folga no fim do tamanho do botão + a distância dele até a borda (mais a área
   segura do celular), e a rolagem por foco/âncora/scrollIntoView para antes dele (scroll-padding). Nas listas o botão é
   menor e desce para o canto (regra v80 acima): a folga acompanha. A gaveta do suporte esconde o botão (studio-suporte.css)
   e os avisos continuam por cima (z-index 9995 > 9990). */
body:has(#ai-widget-button) .main-region { padding-bottom: calc(75px + 56px + 24px + env(safe-area-inset-bottom, 0px)) !important; }
html:has(#ai-widget-button) { scroll-padding-bottom: calc(75px + 56px + 16px); }
body:has(#ai-widget-button):has(.ux-list, table.data-table) .main-region { padding-bottom: calc(20px + 44px + 20px + env(safe-area-inset-bottom, 0px)) !important; }
html:has(#ai-widget-button):has(.ux-list, table.data-table) { scroll-padding-bottom: calc(20px + 44px + 12px); }
#ai-widget-button { bottom: calc(75px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================ W1 · UI — alfinete do menu (docs/W1-MENU-TOUR.md §1)
   html[data-menu="pinned|rail"] vem do servidor. Só a partir de 993 px; no celular a gaveta de sempre (o alfinete some).
   pinned = menu aberto ao lado do conteúdo; rail = trilho de ícones que abre POR CIMA (html.lk-rail-open), sem mexer no
   conteúdo. Tudo nos tokens do tema (vale nos 7 temas); sem movimento com prefers-reduced-motion. */
.lk-pin, .lk-grp-ico { display: none; }
.lk-rail-tip { position: fixed; z-index: 1300; transform: translateY(-50%); pointer-events: none; padding: 5px 9px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--canvas, #fff); background: var(--ink, #1b1f23);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.lk-rail-tip.is-below { transform: translateX(-50%); }
.lk-rail-tip[hidden] { display: none; }
/* antes do acordeão (studio-looks.js) montar: só o grupo da tela atual aberto (sem o menu "pular" na 1ª pintura) */
html.lk-js[data-menu] .sidebar-group[data-lk-shut] .sidebar-group-links { display: none; }

@media (min-width: 993px) {
  html[data-menu] { --lk-side-w: 288px; --lk-rail-w: 76px; }
  html[data-menu] body .app-sidebar { transform: none !important; width: var(--lk-side-w); z-index: 1001; box-shadow: none !important; }
  html[data-menu] body .app-content { margin-left: var(--lk-side-w); width: auto; }
  html[data-menu] body .nav-toggle, html[data-menu] body [data-nav-toggle], html[data-menu] body .nav-backdrop { display: none !important; }
  html[data-menu] body.nav-open { overflow: visible; }

  html[data-menu] .lk-pin { all: unset; box-sizing: border-box; position: absolute; top: 22px; right: 14px; z-index: 2; display: inline-flex; align-items: center;
    justify-content: center; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 15px;
    color: var(--lk-side-muted, var(--muted, #5b6570)); border: 1px solid var(--lk-side-line, var(--line, #d9dde1)); background: transparent; }
  html[data-menu] .lk-pin:hover { color: var(--lk-side-ink, var(--ink, #1b1f23)); background: color-mix(in srgb, var(--lk-side-ink, #1b1f23) 6%, transparent); }
  html[data-menu] .lk-pin[aria-pressed="true"] { color: var(--lk-accent-text, var(--lk-accent, #2563eb)); }
  html[data-menu] .lk-pin:focus-visible { outline: 2px solid var(--lk-focus, #2563eb); outline-offset: 2px; box-shadow: 0 0 0 4px var(--lk-focus-soft, rgba(37, 99, 235, .18)); }
  html[data-menu] body .app-sidebar .brand-lockup { padding-right: 44px; }

  /* trilho (solto) */
  html[data-menu="rail"] body .app-content { margin-left: var(--lk-rail-w); }
  html[data-menu="rail"] body .app-sidebar { width: var(--lk-rail-w); overflow-x: hidden; scrollbar-width: thin;
    transition: width .2s var(--px-ease, ease), box-shadow .2s var(--px-ease, ease) !important; }
  html[data-menu="rail"].lk-rail-open body .app-sidebar { width: var(--lk-side-w); box-shadow: 0 24px 60px rgba(15, 23, 42, .24) !important; }
  /* aberto por cima do conteúdo: fundo sempre opaco (no Vidro o menu é translúcido e o conteúdo apareceria por trás) */
  html[data-look][data-menu="rail"].lk-rail-open body .app-sidebar { background: linear-gradient(var(--lk-side-bg, var(--surface)), var(--lk-side-bg, var(--surface))), var(--canvas, var(--surface, #fff)) !important; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar { padding-left: 10px; padding-right: 10px; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .brand-lockup { justify-content: center; padding: 0; gap: 0; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .brand-text,
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-search-kbd,
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-search-clear,
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-search-empty,
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-search-results,
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-footer,
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .lk-slider { display: none !important; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .lk-pin { position: static; margin: -10px auto 0; flex: 0 0 auto; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-search { margin: 0 auto !important; width: 44px; height: 40px; padding: 0 !important;
    justify-content: center; gap: 0; flex: 0 0 auto; cursor: text; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-search input { flex: 0 0 0; width: 0; min-width: 0; padding: 0; opacity: 0; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-group { position: relative; padding: 0 !important; margin: 0 !important; gap: 2px; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-group-title { font-size: 0 !important; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .lk-acc { justify-content: center; min-height: 40px; padding: 0; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .lk-acc > *,
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-nav a > span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .lk-grp-ico { display: block; position: absolute; top: 0; left: 0; right: 0; height: 40px; line-height: 40px;
    text-align: center; font-size: 17px; pointer-events: none; color: var(--lk-side-muted, var(--muted)); }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-group:not(.lk-closed):not([data-lk-shut]) .lk-grp-ico { color: var(--lk-side-ink, var(--ink)); }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-group:not(.lk-closed):not([data-lk-shut]) .sidebar-group-links { padding-top: 2px; border-top: 1px solid var(--lk-side-line, var(--line)); }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-nav { gap: 6px; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-nav a { justify-content: center; padding: 0 !important; gap: 0; min-height: 40px; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-nav a i { margin: 0 !important; font-size: 16px; }
  html[data-menu="rail"]:not(.lk-rail-open) body .app-sidebar .sidebar-nav a.active { background: color-mix(in srgb, var(--lk-side-ink, var(--ink)) 8%, transparent) !important; }

  /* hub do cliente: o menu é horizontal; no trilho, só os ícones (o nome aparece ao passar o mouse ou com o foco) */
  html[data-menu] .lk-hub-pin { position: relative; z-index: 2; max-width: 1320px; height: 0; margin: 0 auto; }
  html[data-menu] .lk-hub-pin .lk-pin { top: 8px; left: 16px; right: auto; width: 32px; height: 32px; color: #3d4650; border-color: #d9dde1; background: #fff; }
  html[data-menu] .lk-hub-pin .lk-pin[aria-pressed="true"] { color: var(--brand, #1b1f23); }
  html[data-menu] .lk-hub-pin + .hub-nav .hub-nav-in > ul { padding-left: 42px; }
  html[data-menu] .hub-nav a { height: 48px; box-sizing: border-box; } /* a faixa tem a mesma altura fixada ou em trilho */
  html[data-menu="rail"]:not(.lk-rail-open) .hub-nav a { font-size: 0; gap: 0; padding-left: 14px; padding-right: 14px; }
  html[data-menu="rail"]:not(.lk-rail-open) .hub-nav a i { font-size: 1.1rem; line-height: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-menu] body .app-sidebar { transition: none !important; }
}
@media print {
  html[data-menu] body .app-sidebar { display: none !important; }
  html[data-menu] body .app-content { margin-left: 0 !important; }
}

/* ============================================================ W1 · UI — tours guiados (docs/W1-MENU-TOUR.md §2) */
button.topbar-link.lk-tour-btn { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; width: auto !important; white-space: nowrap; padding: 0 10px !important; }
html body .topbar .topbar-actions > button.lk-tour-btn { background: transparent !important; border-color: transparent !important; color: var(--muted, #5b6570) !important; }
html body .topbar .topbar-actions > button.lk-tour-btn:hover { background: var(--surface-soft, #f1f3f5) !important; color: var(--ink, #1b1f23) !important; }
html body .topbar .topbar-actions > button.lk-tour-btn:focus-visible { outline: 2px solid var(--lk-focus, #2563eb) !important; outline-offset: 2px; }
.topbar .lk-tour-btn .lk-tour-btn-text { font-size: 13.5px; font-weight: 600; }
@media (max-width: 1199.98px) { .topbar .lk-tour-btn .lk-tour-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.hub-quiet.lk-tour-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
@media (max-width: 760px) { .lk-tour-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
dialog.lk-tour { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; overflow: hidden; color: var(--ink, #1b1f23); }
dialog.lk-tour::backdrop { background: transparent; }
body.hub-shop dialog.lk-tour { --muted: #4f5964; --lk-link: #1d4ed8; --line: #d9dde1; --surface-soft: #eef0f2; } /* hub: sem os tokens do tema Ônix */
.lk-tour-ring { position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--lk-accent-fill, var(--lk-focus, #2563eb)), 0 0 0 9999px rgba(10, 12, 18, .55);
  transition: top .25s var(--px-ease, ease), left .25s var(--px-ease, ease), width .25s var(--px-ease, ease), height .25s var(--px-ease, ease); }
.lk-tour-shade { position: fixed; inset: 0; background: rgba(10, 12, 18, .55); }
.lk-tour-ring[hidden], .lk-tour-shade[hidden] { display: none; }
.lk-tour-pop { position: fixed; z-index: 2; width: min(380px, calc(100vw - 24px)); padding: 16px 18px 14px; border-radius: 16px;
  background: var(--surface, #fff); color: var(--ink, #1b1f23); border: 1px solid var(--line-strong, var(--line, #d9dde1));
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28); outline: none; transition: top .25s var(--px-ease, ease), left .25s var(--px-ease, ease); }
.lk-tour-pop:focus-visible { box-shadow: 0 0 0 3px var(--lk-focus, #2563eb), 0 24px 64px rgba(0, 0, 0, .28); }
.lk-tour-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lk-tour-meta { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted, #5b6570); font-variant-numeric: tabular-nums; }
.lk-tour-x { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; color: var(--muted, #5b6570); margin: -6px -8px 0 0; }
.lk-tour-x:hover { color: var(--ink, #1b1f23); background: var(--surface-soft, #f1f3f5); }
.lk-tour-x:focus-visible { outline: 2px solid var(--lk-focus, #2563eb); outline-offset: 1px; }
.lk-tour-bar { height: 3px; margin: 8px 0 12px; border-radius: 3px; background: var(--surface-soft, #eef0f2); overflow: hidden; }
.lk-tour-bar span { display: block; height: 100%; width: 0; background: var(--lk-accent-fill, var(--lk-focus, #2563eb)); transition: width .25s var(--px-ease, ease); }
.lk-tour-title { margin: 0 0 6px; font-size: 17px; font-weight: 650; line-height: 1.3; color: var(--ink, #1b1f23); font-family: inherit; }
.lk-tour-body { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink, #1b1f23); opacity: .86; }
.lk-tour-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.lk-tour-actions .btn, .lk-tour-more .btn { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.lk-tour-more { display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.lk-tour-more:empty { display: none; }
.lk-tour-more .btn-link { color: var(--lk-link, var(--muted, #3d4650)); text-decoration: underline; text-underline-offset: 3px; padding-left: 6px; padding-right: 6px; }
.lk-tour-pop.is-intro .lk-tour-actions { justify-content: flex-start; }
.lk-tour-pop.is-intro .lk-tour-more { justify-content: flex-start; margin-top: 8px; }
.lk-tour-pop.is-sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; border-radius: 18px 18px 0 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.lk-tour-pop.is-sheet .lk-tour-actions .btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
.lk-sc-tours { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line, #e5e7eb); }
.lk-sc-tours .lk-sc-tip { width: 100%; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .lk-tour-ring, .lk-tour-pop, .lk-tour-bar span { transition: none !important; }
}

/* ============================================================ W1 · UI — Primeiros passos (/primeiros-passos) */
.pp-progress { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.pp-progress-bar { flex: 1 1 240px; height: 8px; border-radius: 8px; background: var(--surface-soft, #eef0f2); overflow: hidden; }
.pp-progress-bar span { display: block; height: 100%; background: var(--lk-ok, #15803d); border-radius: 8px; }
.pp-progress strong { font-variant-numeric: tabular-nums; }
.pp-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: color-mix(in srgb, var(--lk-ok, #15803d) 75%, var(--ink, #1b1f23)); background: color-mix(in srgb, var(--lk-ok, #15803d) 12%, transparent); }
.pp-track { margin: 0 0 22px; }
.pp-track h2 { font-size: 15px; font-weight: 650; margin: 0 0 8px; color: var(--muted, #5b6570); }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px; background: var(--surface, #fff); }
.pp-item.is-done { background: color-mix(in srgb, var(--lk-ok, #15803d) calc(var(--px-tint, 100%) * .06), var(--surface, #fff)); }
.pp-ico { font-size: 20px; color: var(--muted, #5b6570); }
.pp-item.is-done .pp-ico { color: var(--lk-ok, #15803d); }
.pp-item h3 { font-size: 15px; font-weight: 600; margin: 0; }
.pp-item.is-done h3 { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.pp-item p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted, #5b6570); }
.pp-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pp-acts form { margin: 0; }
.pp-acts .btn { min-height: 36px; }
@media (max-width: 640px) {
  .pp-item { grid-template-columns: 24px minmax(0, 1fr); }
  .pp-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .pp-acts .btn { min-height: 44px; }
}
/* W1 · UI — no celular o "Tour desta tela" é só o ícone, com alvo de 44 px; o logo do topo encolhe para caber */
@media (max-width: 760px) {
  html body .topbar .topbar-actions > button.lk-tour-btn { width: var(--px-touch, 44px) !important; height: var(--px-touch, 44px) !important; min-width: var(--px-touch, 44px) !important;
    flex: 0 0 auto; padding: 0 !important; justify-content: center; display: inline-flex !important; }
  body:has(.topbar .lk-tour-btn) .topbar .nav-toggle { margin-right: 4px !important; }
  body:has(.topbar .lk-tour-btn) .topbar .topbar-brand { height: 22px !important; max-width: 84px !important; }
  body:has(.topbar .lk-tour-btn) .topbar .topbar-brand-link { margin-left: 0 !important; }
}
@media (max-width: 374px) { body:has(.topbar .lk-tour-btn) .topbar .topbar-brand-link { display: none !important; } }