/* Catshroom Hub · estilos do app (antes ficavam dentro do Catshroom-Hub.html) */
:root {
  --bg: #f5f2fb; --surface: #ffffff; --bar: #faf8fe; --fg: #1f1b2e; --muted: #6b6580;
  --line: #e0d9ef; --hover: #efeafb; --accent: #7b57d6; --accent-fg: #ffffff;
  --danger: #c0392b; --ok: #1f8a4c;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15121f; --surface: #1e1a2d; --bar: #231f35; --fg: #efeaff; --muted: #a39cbd;
    --line: #382f55; --hover: #2a2442; --accent: #a68bf0; --accent-fg: #17122a;
    --danger: #ff8a7a; --ok: #6fd69a;
  }
}
:root[data-theme="dark"] {
  --bg: #15121f; --surface: #1e1a2d; --bar: #231f35; --fg: #efeaff; --muted: #a39cbd;
  --line: #382f55; --hover: #2a2442; --accent: #a68bf0; --accent-fg: #17122a;
  --danger: #ff8a7a; --ok: #6fd69a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--fg); font-size: 15px; line-height: 1.45; }
button, input, textarea, select { font: inherit; color: inherit; }
input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"] { color-scheme: light dark; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator {
  width: 20px; height: 20px; padding: 3px; margin-left: 4px; border-radius: 6px; cursor: pointer; opacity: 1;
  background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
input[type="time"]::-webkit-calendar-picker-indicator { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="month"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover, input[type="time"]::-webkit-calendar-picker-indicator:hover { filter: brightness(1.2); }
select { background-color: var(--surface); color: var(--fg); color-scheme: light dark; }
/* barras de rolagem discretas, nas cores do tema (finas, quase invisíveis até passar o mouse) */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fg) 16%, transparent) transparent; }
*:hover { scrollbar-color: color-mix(in srgb, var(--accent) 55%, transparent) transparent; }
select option { background: var(--surface); color: var(--fg); }
#chat-prov { min-width: 0; max-width: 100%; flex: 1 1 150px; padding: 6px 28px 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: .85rem !important; font-weight: 600; text-overflow: ellipsis; }
.app { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); height: 100vh; height: 100dvh; }
.top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.top img { height: 34px; width: auto; display: block; }
.top h1 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.top .sp { flex: 1; }
.amb-troca { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: .8rem; }
.amb-troca:empty { display: none; }
.amb-troca .amb-op { padding: 5px 10px; color: var(--muted); text-decoration: none; }
.amb-troca a.amb-op:hover { background: var(--surface); color: var(--fg); }
.amb-troca .amb-op.on { background: var(--fg); color: var(--bg); font-weight: 600; }
[data-amb="teste"] .amb-troca .amb-op.on { background: #e8590c; color: #fff; }
.top .tools { flex-basis: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--fg);
  padding: 8px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 0.9rem;
}
.btn:hover { background: var(--hover); }
.btn:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { padding: 5px 10px; font-size: 0.82rem; }
.btn.danger { color: var(--danger); }
.btn[disabled] { opacity: 0.55; cursor: default; }
.main { display: grid; grid-template-columns: 250px minmax(340px, 1fr) minmax(360px, 1.1fr); min-height: 0; }
.side, .edit, .view { min-height: 0; overflow: auto; }
.side { background: var(--bar); border-right: 1px solid var(--line); padding: 12px; }
.side h2 { margin: 4px 4px 10px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* organização da coluna de orçamentos */
.sidehead { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.sidehead { flex-wrap: wrap; }
.sidehead h2 { margin: 4px 4px 4px; flex: 1 1 100%; }
.sidehead .sp { flex: 1; }
.iconbtn { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 8px; width: 30px; height: 30px; padding: 0; cursor: pointer; font-size: 0.95rem; line-height: 1; }
.iconbtn:hover { background: var(--hover); }
.iconbtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.sidetabs { display: flex; gap: 4px; margin: 0 0 8px; }
.vsep { width: 1px; background: var(--line); margin: 3px 2px; }
.sidetools { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin: 0 0 10px; }
.sidetools > .iconbtn { flex: 1 1 22px; min-width: 22px; max-width: 30px; }
.sidetools { gap: 4px; }
.sidetabs .btn { flex: 1; padding: 5px 4px; font-size: 0.76rem; white-space: nowrap; }
.sidetabs .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.fgroup { margin: 0 0 8px; border-radius: 10px; }
.fgroup.over > .fhead { outline: 2px dashed var(--accent); background: var(--hover); }
.fhead { display: flex; align-items: center; gap: 4px; padding: 5px 4px 5px 6px; border-radius: 8px; font-size: 0.82rem; font-weight: 700; color: var(--fg); }
.fhead .fname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.fhead .fcount { font-weight: 600; color: var(--muted); font-size: 0.74rem; }
.fhead .iconbtn { width: 24px; height: 24px; font-size: 0.78rem; border-color: transparent; background: transparent; }
.fhead .iconbtn:hover { background: var(--hover); border-color: var(--line); }
.fhead .chev { width: 18px; text-align: center; color: var(--muted); font-size: 0.7rem; }
.mhead { display: flex; align-items: center; gap: 4px; margin: 6px 0 2px 6px; padding: 2px 6px; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); cursor: pointer; border-radius: 6px; }
.mhead:hover { background: var(--hover); }
.mhead .fcount { margin-left: auto; }
.fbody { padding-left: 4px; }
.qrow { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.qrow .qitem { flex: 1; min-width: 0; }
.qrow .qmore { opacity: 0; width: 26px; height: 26px; border-color: transparent; background: transparent; flex: none; }
.qrow:hover .qmore, .qrow:focus-within .qmore, .qrow .qmore[aria-expanded="true"] { opacity: 1; }
.qrow .qmore:hover { background: var(--hover); border-color: var(--line); }
.qrow.dragging { opacity: 0.45; }
.qrow.dim .qitem { opacity: 0.55; }
.fnew { display: flex; gap: 4px; margin: 0 0 8px; }
.fnew input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--accent); border-radius: 8px; background: var(--surface); }
.qempty { margin: 8px 6px; font-size: 0.8rem; color: var(--muted); }
.qmenu { position: fixed; z-index: 80; min-width: 210px; max-width: 280px; max-height: 70vh; overflow: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 2px; }
.qmenu .btn { text-align: left; border: 0; padding: 7px 10px; font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qmenu .mlabel { padding: 6px 10px 2px; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.qmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.qitem {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  border: 1px solid transparent; background: none; border-radius: 10px; padding: 8px 10px; cursor: pointer;
}
.qitem:hover { background: var(--hover); }
.qitem[aria-current="true"] { background: var(--hover); border-color: var(--accent); }
.qitem .t { flex: 1; min-width: 0; }
.qitem .t b { display: block; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qitem .t b .qenv { display: inline; font-size: inherit; color: inherit; }
#sent[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.qitem .t span { display: block; font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edit { padding: 16px 18px 40px; }
.edit fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.edit legend { font-weight: 700; font-size: 0.95rem; padding: 0; margin-bottom: 8px; }
.ai { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 8px; padding: 0; vertical-align: middle; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--accent); cursor: pointer; }
.mailai { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 8px; padding: 0; vertical-align: middle; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--accent); cursor: pointer; position: relative; }
.mailai svg { width: 14px; height: 14px; display: block; }
.mailai:hover:not(:disabled) { background: var(--hover); border-color: var(--accent); }
.mailai:disabled { opacity: .45; cursor: progress; }
.mailai.loading { opacity: 1 !important; border-color: var(--accent); background: var(--hover); }
.mailai.loading svg { animation: ai-spin 1.1s linear infinite; }
.ai:hover:not(:disabled) { background: var(--hover); border-color: var(--accent); }
.ai:disabled { opacity: .45; cursor: progress; }
.ai svg { width: 14px; height: 14px; display: block; }
.dochint { display: none; font-size: 0.8rem; color: var(--muted); flex: 1 1 220px; }
body[data-mode="doc"] .dochint { display: block; }
.foot { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; padding: 6px 16px; background: var(--surface); border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); }
.foot b { color: var(--fg); font-weight: 600; }
.foot .sp { flex: 1; }
.foot { padding-left: 44px; min-height: 38px; box-sizing: border-box; }
body.foot-off .foot { display: none; }
@media (max-width: 860px) { .foot { position: sticky; bottom: 0; z-index: 30; } }
#foot-tgl { position: fixed; left: 10px; bottom: 6px; z-index: 40; width: 26px; height: 26px; padding: 0; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font-size: .8rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
#foot-tgl:hover { background: var(--hover); color: var(--fg); }
body.foot-off #foot-tgl { opacity: .6; }
body.foot-off #foot-tgl:hover { opacity: 1; }
.foot .iconbtn { width: 22px; height: 22px; font-size: 0.7rem; border-color: transparent; background: transparent; margin-left: -8px; }
.foot .ulim { display: inline-flex; align-items: center; gap: 6px; }
.ubar { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; vertical-align: middle; }
.ubar > i { display: block; height: 100%; background: var(--accent); }
.ubar.warm > i { background: #d98a00; }
.ubar.hot > i { background: var(--danger, #c0392b); }
.foot .iconbtn:hover { background: var(--hover); border-color: var(--line); }
.ai.loading { opacity: 1 !important; border-color: var(--accent); background: var(--hover); cursor: progress; }
.ai.loading svg { animation: ai-spin 1.1s linear infinite; }
.ai.loading::after { content: ""; position: absolute; }
.ai { position: relative; }
.ai-busy { animation: ai-pulse 1.3s ease-in-out infinite; }
.ai-busy-box { border-radius: 8px; outline: 2px dashed var(--accent); outline-offset: 4px; }
.bub.typing { display: inline-flex; align-items: center; gap: 5px; padding: 12px 14px; }
.bub.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: block; animation: ai-dot 1.1s ease-in-out infinite; }
.bub.typing i:nth-child(2) { animation-delay: .15s; }
.bub.typing i:nth-child(3) { animation-delay: .3s; }
.bub.typing span { font-size: .82rem; color: var(--muted); margin-left: 4px; }
#dlg-pdf.busy .dropzone { opacity: .5; pointer-events: none; }
#dlg-pdf .pdfload { display: none; align-items: center; gap: 10px; margin-top: 10px; font-size: .9rem; }
#dlg-pdf.busy .pdfload { display: flex; }
#dlg-pdf .pdfspin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line, #555); border-top-color: var(--accent); animation: ai-spin .8s linear infinite; flex: none; }
#dlg-pdf button:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { #dlg-pdf .pdfspin { animation: ai-pulse 1.4s ease-in-out infinite; } }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes ai-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai.loading svg, .ai-busy, .bub.typing i { animation: none; } }
.filerow { display: flex; align-items: center; gap: 8px; margin: 8px 4px 0; }
.filerow[hidden] { display: none; }
.help { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 0.72rem; font-weight: 700; line-height: 1; cursor: pointer; text-transform: none; letter-spacing: 0; }
.help:hover, .help[aria-expanded="true"] { background: var(--hover); color: var(--accent); border-color: var(--accent); }
.help.inl { margin-left: 8px; vertical-align: middle; flex: none; }
body:not([data-mode="doc"]) .help.dochelp { display: none; }
.helptext { margin: 8px 4px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }

/* ---- páginas: início, kanban, pagamentos ---- */
.nav { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.nav .btn { border: 0; border-radius: 0; padding: 7px 12px; font-size: 0.85rem; }
.nav .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
@media (max-width: 720px) { .top { flex-wrap: wrap; row-gap: 8px; } .top .nav { order: 5; flex: 1 0 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .top .nav::-webkit-scrollbar { display: none; } .top .nav .btn { white-space: nowrap; flex: 1 0 auto; } }
body:not([data-page="quotes"]) .qonly, body:not([data-page="quotes"]) .tabs, body:not([data-page="quotes"]) .main { display: none !important; }
.page { display: none; overflow: auto; min-height: 0; padding: 20px clamp(14px, 3vw, 32px) 48px; }
body[data-page="home"] #page-home, body[data-page="kanban"] #page-kanban, body[data-page="pay"] #page-pay { display: block; }
body[data-page="ent"] #page-ent, body[data-page="ped"] #page-ped { display: block; }
body[data-page="mail"] #page-mail, body[data-page="central"] #page-central { display: block; }
body[data-page="cli"] #page-cli { display: block; }
body[data-page="site"] #page-site, body[data-page="loja"] #page-loja, body[data-page="custos"] #page-custos, body[data-page="imp"] #page-imp, body[data-page="fil"] #page-fil,body[data-page="perm"] #page-perm { display: block; }
@media (min-width: 861px) { .main, .page { grid-row: 2; } .foot { grid-row: 3; } }
.page h2 { margin: 0 0 4px; font-size: 1.3rem; }
.page .sub { margin: 0 0 18px; color: var(--muted); font-size: .9rem; }
.hmonth { margin-bottom: 22px; }
.hmonth .payctl { margin-bottom: 12px; }
.hmh { margin: 6px 0 4px; font-size: .9rem; color: var(--muted); }
.hmh2 { margin: 0 0 10px; font-size: 1rem; }
.hsec { margin-bottom: 22px; }
.hsec .tiles, .hsec .shortcuts { margin-bottom: 0; }
[data-hsort] > [data-hk] [data-grip], [data-hsort] > [data-hk][data-self] { cursor: grab; }
body.hs-on, body.hs-on * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }
.hs-drag { outline: 2px dashed var(--accent); outline-offset: 2px; opacity: .85; position: relative; z-index: 30; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.row .dt { flex: none; min-width: 44px; font-size: .78rem; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.tile span { display: block; font-size: .78rem; color: var(--muted); }
.tile b { display: block; font-size: 1.35rem; margin-top: 2px; }
.tile small { color: var(--muted); font-size: .76rem; }
.tile.bad b { color: var(--danger); }
.tile.good b { color: var(--ok); }
/* Central › Painel › cobertura e saúde (39-central-saude.js): estado também em texto, não só em cor */
.ccs-mapa { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ccs-etapa { background: var(--surface); border: 1px solid var(--line); border-left-width: 5px; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ccs-etapa b { font-size: 1.1rem; }
.ccs-etapa small { color: var(--muted); font-size: .76rem; }
.ccs-completo { border-left-color: var(--ok); }
.ccs-parcial { border-left-color: #b86e00; }
.ccs-ausente { border-left-color: var(--danger); }
.ccs-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.ccs-lista { margin: 0; padding-left: 18px; }
.ccs-lista li { margin: 3px 0; overflow-wrap: anywhere; }
.shortcuts { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.shortcut { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; min-width: 0; }
.shortcut:hover { border-color: var(--accent); background: var(--hover); }
.shortcut .ic { font-size: 1.35rem; display: block; margin-bottom: 4px; }
.shortcut strong { display: block; font-size: .96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shortcut span.d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: .78rem; line-height: 1.3; margin-top: 2px; }
@media (max-width: 999px) { .shortcuts { gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .shortcut { padding: 10px; border-radius: 12px; } .shortcut strong { font-size: .86rem; } .shortcut span.d { font-size: .72rem; } }
@media (max-width: 560px) { .shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 340px) { .shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.panel h3 { margin: 0 0 10px; font-size: .95rem; }
.row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 8px 2px; cursor: pointer; }
.row:first-of-type { border-top: 0; }
.row:hover { background: var(--hover); }
.row .t { flex: 1; min-width: 0; }
.row .t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.row .t span { color: var(--muted); font-size: .78rem; }
.row .v { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--hover); color: var(--accent); white-space: nowrap; }
.chip.bad { background: rgba(192, 57, 43, .14); color: var(--danger); }
.chip.good { background: rgba(31, 138, 76, .15); color: var(--ok); }
.chip.warn { background: rgba(230, 150, 30, .18); color: #b86e00; }

/* página de e-mails */
.mlbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.mlbar input[type=search] { flex:1 1 200px; min-width:160px; padding:7px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.mlgrid { display:grid; grid-template-columns:minmax(250px,340px) 1fr; gap:0; align-items:stretch; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; height:calc(100vh - 250px); min-height:360px; }
@media (max-width:860px){ .mlgrid{grid-template-columns:1fr; height:auto;} .mllist{max-height:260px;} }
.mllist { overflow:auto; border-right:1px solid var(--line); }
.pedimgs { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 }
.pedimgs img { width:120px; height:120px; object-fit:cover; border-radius:8px; border:1px solid var(--line); cursor:zoom-in }
.pedimgs img.big { width:min(100%,560px); height:auto; cursor:zoom-out }
.pedtxt { white-space:pre-wrap; margin:8px 0; line-height:1.5 }
.pedmeta { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 }
.mlrow { display:block; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); border-left:3px solid transparent; background:transparent; padding:10px 14px; cursor:pointer; position:relative; }
.mlrow:hover { background:var(--hover); }
.mlwrap { position:relative; }
.mlwrap .mlrow { padding-left:40px; }
.mlwrap .mlck { position:absolute; left:14px; top:50%; transform:translateY(-50%); margin:0; width:13px; height:13px; z-index:1; cursor:pointer; opacity:.25; transition:opacity .25s ease; }
.mlwrap:hover .mlck, .mlwrap .mlck:hover, .mlwrap .mlck:focus-visible, .mlwrap .mlck:checked { opacity:1; }
.mlbulk .mlall input { opacity:.35; transition:opacity .25s ease; }
.mlbulk .mlall:hover input, .mlbulk .mlall input:checked, .mlbulk .mlall input:focus-visible { opacity:1; }
.mlbulk { position:sticky; top:0; z-index:2; background:var(--surface); border-bottom:1px solid var(--line); padding:8px 14px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:.84rem; }
.mlbulk .mlall { display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:600; }
.mlbulk .mlbtns { display:flex; flex-wrap:wrap; gap:6px; }
.mlbulk .mlbtns[hidden] { display:none; }
.mlrow[aria-current="true"] { background:var(--hover); border-left-color:var(--accent); }
.mlrow b { display:block; font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:56px; }
.mlrow .dt { position:absolute; right:14px; top:10px; font-size:.75rem; color:var(--muted); }
.mlrow .s { display:block; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mlrow .n { display:block; font-size:.78rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mlrow.un b, .mlrow.un .s { font-weight:800; }
.mlrow.un b::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:6px; }
.mlrow .tag { display:block; font-size:.74rem; color:var(--danger); font-weight:700; margin-top:2px; }
.mlread { overflow:auto; padding:18px 24px 24px; }
.mlread 
/* clientes, prazos, anexos */
.clilink { margin:8px 0 0; font-size:.85rem; color:var(--muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.clilink:empty { display:none; }
/* Projeto IDs, etapa 4: busca por ID, seletor de registro e ID com botão copiar */
.regbusca { position: relative; }
.regbusca #reg-busca { width: 11.5rem; padding: 6px 10px; font-size: .85rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); }
.regbusca .reg-lista, .regbusca .reg-aviso { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; width: min(440px, 92vw); margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.regbusca .reg-aviso { padding: 8px 10px; font-size: .82rem; color: var(--muted); }
.reg-lista { list-style: none; margin: 8px 0 0; padding: 4px; max-height: min(52vh, 360px); overflow-y: auto; }
.reg-lista[hidden], .reg-aviso[hidden] { display: none; }
.reg-op { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.reg-op[aria-selected="true"] { background: var(--hover); }
.reg-op .ic { font-size: 1.1rem; flex: none; }
.reg-op .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reg-op .tx b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-op .tx b em { font-style: normal; color: var(--accent); font-weight: 600; }
.reg-op .tx small { color: var(--muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-op code, .regid code, .reg-atual code { font-size: .72rem; color: var(--muted); background: var(--bar); padding: 1px 6px; border-radius: 6px; }
.reg-op code { flex: none; }
.reg-dlg .reg-in { font-size: 16px; }
.reg-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.reg-filtros:empty { display: none; }
.reg-f { border: 1px solid var(--line); cursor: pointer; background: transparent; }
.reg-f[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.reg-dlg .reg-aviso { margin: 8px 0 0; font-size: .85rem; color: var(--danger); }
.reg-atual { margin: 0 0 8px; font-size: .85rem; color: var(--muted); }
.regid { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; font-size: .78rem; color: var(--muted); }
.regcp { border: 0; background: transparent; cursor: pointer; padding: 2px 4px; font-size: .85rem; border-radius: 6px; }
.regcp:hover { background: var(--hover); }
.regid-linha { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; }
.regid-linha:empty { display: none; }
.clihead h3 .regid-linha { font-weight: 400; }
.reg-achado { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) { .regbusca { order: 4; flex: 1 1 100%; } .regbusca #reg-busca { width: 100%; font-size: 16px; } .regbusca .reg-lista, .regbusca .reg-aviso { left: 0; right: 0; width: auto; } }
#dlg-cli, #dlg-ent { width:min(460px, 94vw); }
#dlg-ent .f { display:block; margin:8px 0; }
#dlg-ent input { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
#dlg-cli .f { display:block; margin:8px 0; }
#dlg-cli .sugwrap { position: relative; }
#dlg-cli .sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin: 2px 0 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-height: 230px; overflow: auto; }
#dlg-cli .sug li { margin: 0; }
#dlg-cli .sug button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--fg); font: inherit; cursor: pointer; }
#dlg-cli .sug button small { color: var(--muted); font-size: .76rem; }
#dlg-cli .sug button:hover, #dlg-cli .sug button[aria-selected="true"] { background: var(--hover); }
#dlg-cli .picked { margin: 0 0 6px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--ok) 14%, transparent); font-size: .82rem; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
#dlg-cli input, #dlg-cli textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.clihead { display:flex; align-items:flex-start; gap:12px; margin-bottom:4px; }
.clihead h3 { margin:0; flex:1; font-size:1.2rem; }
.clicontact { color:var(--muted); font-size:.88rem; margin-bottom:12px; }
.clicontact a { color:var(--accent); }
.mlread h4 { margin:18px 0 8px; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.cliq { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:1px solid var(--line); border-radius:10px; background:var(--bg); padding:8px 12px; margin-bottom:6px; cursor:pointer; }
.cliq:hover { border-color:var(--accent); }
.cliq .t { flex:1; min-width:0; }
.cliq .t b { display:block; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cliq .t span { font-size:.78rem; color:var(--muted); }
.tl { list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--line); }
.tl li { position:relative; padding:0 0 12px 14px; font-size:.88rem; }
.tl li::before { content:""; position:absolute; left:-21px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.tl li.fut::before { background:var(--bg); border:2px solid var(--accent); }
.tl li.bad::before { background:var(--danger); }
.tl li .d { color:var(--muted); font-size:.76rem; display:block; }
.tl li a, .tl li button.lnk { color:var(--accent); background:none; border:0; padding:0; cursor:pointer; font:inherit; text-decoration:underline; }
.anx { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.anxi { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-size:.84rem; max-width:100%; }
.anxi img { width:44px; height:44px; object-fit:cover; border-radius:6px; }
.anxi a { color:var(--fg); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; }
.anxi a:hover { text-decoration:underline; }
.anxi button { border:0; background:transparent; cursor:pointer; opacity:.7; }
.anxi button:hover { opacity:1; }
.anxadd { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; align-items:center; }
.anxadd input[type=text], .anxadd input[type=url] { padding:6px 10px; border:1px solid var(--line); border-radius:10px; background:var(--bg); min-width:200px; flex:1; }
.kcard .chip.warn { background:rgba(230,150,30,.18); color:#b86e00; }

/* reordenar menus e botões (segurar e arrastar) */
body.ord-on, body.ord-on * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }
.ord-drag { outline: 2px dashed var(--accent); outline-offset: 2px; opacity: .8; transform: scale(1.05); position: relative; z-index: 30; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.empty2 { margin-top:30px; text-align:center; }
.mlhead { display:flex; align-items:flex-start; gap:12px; margin-bottom:6px; }
.mlhead h3 { margin:0; flex:1; font-size:1.15rem; line-height:1.3; }
.mlacts { display:flex; gap:4px; align-items:center; flex-shrink:0; }
.mlacts .ib, .mlacts select { width:34px; height:34px; padding:0; border:1px solid transparent; border-radius:8px; background:transparent; cursor:pointer; font-size:1rem; text-align:center; text-align-last:center; appearance:none; -webkit-appearance:none; color:inherit; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.mlacts .ib:hover, .mlacts select:hover { background:var(--hover); border-color:var(--line); }
.mlmeta { color:var(--muted); font-size:.82rem; margin-bottom:14px; }
.mlmeta .rem { color:var(--accent); font-weight:600; }
.mlmsg { border-top:1px solid var(--line); padding:14px 0; }
.mlmsg > summary { cursor:pointer; list-style:none; display:flex; gap:8px; align-items:baseline; }
.mlmsg > summary::-webkit-details-marker { display:none; }
.mlmsg .who { font-weight:600; font-size:.92rem; }
.mlmsg .when { color:var(--muted); font-size:.8rem; margin-left:auto; }
.mlmsg .to { color:var(--muted); font-size:.8rem; margin:2px 0 10px; }
.mlmsg .snip { color:var(--muted); font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.mlmsg .body { white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; font-size:.94rem; line-height:1.6; max-width:78ch; }
.mlmsg .body a { color:var(--accent); }
.mlframe { display:block; width:100%; border:0; border-radius:8px; background:#fff; min-height:40px; }
.bodytools { display:flex; gap:6px; margin-top:8px; }
.mlmsg .att { margin-top:10px; display:flex; gap:6px; flex-wrap:wrap; }
.mlmsg .att a { font-size:.8rem; border:1px solid var(--line); border-radius:8px; padding:3px 9px; color:var(--fg); text-decoration:none; }
.mlmsg .att a:hover { background:var(--hover); }
.mlopen { margin-top:6px; }
.mlreply { margin-top:10px; border:1px solid var(--line); border-radius:12px; background:var(--bg); overflow:hidden; }
.mlreply input, .mlreply textarea { display:block; width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; padding:9px 14px; outline:0; }
.mlreply input:focus, .mlreply textarea:focus { background:var(--hover); }
.mlreply textarea { min-height:120px; resize:vertical; border-bottom:0; }
.mlreply .row { display:flex; gap:8px; align-items:center; padding:8px 10px; border-top:1px solid var(--line); }
.mlreply .row .note { flex:1; font-size:.8rem; color:var(--muted); }
.mlreply .btn { white-space:nowrap; }
.mlreply .btn svg { width:15px; height:15px; vertical-align:-2px; }
.nav .badge { display:inline-block; min-width:18px; padding:0 5px; margin-left:6px; border-radius:9px; background:var(--danger); color:#fff; font-size:.72rem; line-height:18px; text-align:center; }
.nav .badge:empty { display:none; }
.empty2 { color: var(--muted); font-size: .88rem; padding: 6px 0; }
.entlink { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.entlink input { flex: 1 1 260px; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: .82rem; }
.entrow { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; background: var(--bg); }
.entrow .et { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; font-size: .84rem; }
.entrow .et span { color: var(--muted); font-size: .78rem; }
.entrow .ef { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entrow .ea { display: flex; gap: 6px; flex-wrap: wrap; }
.entcard { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--card, var(--bg)); }
.entcard > summary { cursor: pointer; padding: 10px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.entcard > summary small { color: var(--muted); }
.entbody { padding: 0 12px 12px; }
.enttools { margin: 0 0 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.entbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.entbar input { flex: 1 1 220px; min-width: 0; }
.entbar input, .entbar select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); font: inherit; font-size: .88rem; }
#ent-novos[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg, #fff); }
.entpg { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.entcard, .entpg { border: 2px solid var(--danger); border-left: 6px solid var(--danger); }
.entpg-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.entpg-h small { display: block; color: var(--muted); font-size: .8rem; }
.entpg-c { display: flex; gap: 6px; flex-wrap: wrap; }
.entpg-m { margin: 6px 0 8px; color: var(--muted); font-size: .84rem; }
.entpg-a { display: flex; gap: 6px; flex-wrap: wrap; }
.entpg .entfb { margin-top: 10px; }
.entfb { flex: 1 1 100%; display: grid; gap: 6px; margin-top: 4px; }
.entfbi { padding: 8px 10px; border-radius: 8px; border-left: 3px solid var(--muted); background: var(--surface); font-size: .84rem; }
.entfotos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.entfotos img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.entfbi.aprovado { border-left-color: var(--ok); }
.entfbi.revisao { border-left-color: #d98a00; }
.entfbi small { display: block; color: var(--muted); font-size: .74rem; }
.entfbi p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.entadd { margin: 6px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.entf { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .84rem; }
.entf .n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entf .s, .entf .p { color: var(--muted); font-size: .78rem; flex: none; min-width: 3.2em; text-align: right; }
.entf progress { width: 110px; flex: none; accent-color: var(--accent); }
.entsel, .entup { margin-top: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.kcalwrap { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.kcalwrap h3 { margin: 0 0 10px; font-size: 1.05rem; }
.kcalbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 12px; }
.kcalbar b { min-width: 11ch; text-align: center; font-size: 1.05rem; }
.kcalbar label { display: inline-flex; gap: 5px; align-items: center; font-size: .84rem; cursor: pointer; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; overflow: hidden; background: var(--bar); }
.cal .cdow { padding: 8px 6px; text-align: center; font-size: .76rem; font-weight: 600; color: var(--muted); }
.cgrid:not(.cal) { border: 1px solid var(--line); border-radius: 0 0 14px 14px; overflow: hidden; background: var(--surface); }
.cweek { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 3px; border-bottom: 1px solid var(--line); position: relative; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 7 - 1px), var(--line) calc(100% / 7 - 1px), var(--line) calc(100% / 7)); }
.cweek:last-child { border-bottom: 0; }
.cbg { pointer-events: none; }
.cbg.out { background: color-mix(in srgb, var(--bar) 70%, transparent); }
.cbg.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cn2 { padding: 4px 7px 0; font-size: .78rem; font-weight: 600; color: var(--muted); }
.cn2.out { opacity: .55; }
.cn2.today { color: var(--accent); }
.cpd { padding: 2px 4px 5px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cbar { display: block; min-width: 0; margin: 0; padding: 3px 8px; border: 0; font: inherit; font-size: .76rem; font-weight: 600; line-height: 1.3; text-align: left; color: var(--fg); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 26%, var(--surface)); border-top: 1px solid var(--c); border-bottom: 1px solid var(--c); }
.cbar.ini { border-left: 4px solid var(--c); border-radius: 7px 0 0 7px; margin-left: 4px; }
.cbar.fim { border-right: 1px solid var(--c); border-radius: 0 7px 7px 0; margin-right: 4px; }
.cbar.ini.fim { border-radius: 7px; }
.cbar:hover { background: color-mix(in srgb, var(--c) 42%, var(--surface)); }
.cbar.late { --c: var(--danger); }
.cbar.done { opacity: .55; }
.cagenda { display: none; flex-direction: column; gap: 6px; }
.cev { display: block; width: 100%; min-width: 0; text-align: left; border: 0; border-left: 3px solid var(--accent); border-radius: 5px; padding: 2px 6px; font: inherit; font-size: .74rem; line-height: 1.3; color: var(--fg); background: color-mix(in srgb, var(--accent) 16%, transparent); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cev:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.cev.pay { border-left-color: #d98a00; background: color-mix(in srgb, #d98a00 16%, transparent); }
.cev.pay.paid { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); text-decoration: line-through; opacity: .8; }
.cev.late { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, transparent); }
.cev.done { opacity: .6; }
.clegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.clegend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
@media (max-width: 700px) {
  .cgrid { display: none !important; }
  .cagenda { display: flex; }
  .cagenda .cev { white-space: normal; padding: 6px 8px; }
}
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; align-items: start; padding-bottom: 14px; }
.board.arq { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.board.arq .kcard { cursor: pointer; }
.kcard .karq { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: .72rem; color: var(--muted); }
.kcard .kmeta .chip { white-space: normal; }
.kactions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.kcol { min-width: 0; background: var(--bar); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 210px); }
.kcol.over { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.kcol > header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.kcol .kt { flex: 1; font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcol .kt-in { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); }
.kcol .kn { font-size: .75rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.kedit { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: .9rem; padding: 2px 4px; border-radius: 6px; }
.kedit:hover { background: var(--hover); color: var(--accent); }
.kbody { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; }
.kcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: grab; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.kcard:hover { border-color: var(--accent); }
.kcard.rev { border-color: var(--danger); box-shadow: inset 4px 0 0 var(--danger); }
.kcard .krev { font-weight: 700; }
.kcard.dragging { opacity: .4; }
.kcard b { font-size: .9rem; line-height: 1.3; }
.kcard .kv { font-weight: 700; color: var(--accent); font-size: .9rem; }
.kcard .kmeta { display: flex; flex-wrap: wrap; gap: 5px; font-size: .72rem; color: var(--muted); }
.pgroup { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.pgroup > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pgroup > header b { flex: 1; min-width: 180px; }
.bar { height: 7px; border-radius: 999px; background: var(--hover); overflow: hidden; width: 140px; }
.bar i { display: block; height: 100%; background: var(--ok); }
.prow { display: grid; grid-template-columns: minmax(140px, 1.4fr) 140px 110px 190px 30px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.prow input[type="text"], .prow input[type="date"] { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.prow input.num { text-align: right; }
.payctl { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.payctl .filters { margin-bottom: 0; }
.payper { display: inline-flex; align-items: center; gap: 6px; }
.payper b { min-width: 9.5ch; text-align: center; font-size: 1rem; }
.payper .btn { padding: 5px 10px; }
.ptab { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: .88rem; }
.ptab th, .ptab td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ptab th:first-child, .ptab td:first-child { text-align: left; }
.ptab thead th { color: var(--muted); font-weight: 600; font-size: .78rem; }
.ptab tbody tr:hover { background: var(--hover); }
.ptab tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ptab tr.zero td { color: var(--muted); }
.ptab tfoot td { font-weight: 700; border-bottom: 0; }
.ptab td .mbtn { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; text-decoration: underline dotted; }
.lj-usr-wrap { overflow-x: auto; }
.lj-usr th.t, .lj-usr td.t { text-align: left; }
.lj-usr th button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.lj-usr th button:hover, .lj-usr th[aria-sort="ascending"] button, .lj-usr th[aria-sort="descending"] button { color: var(--accent); }
.lj-usr th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lj-usr-lin { cursor: pointer; }
.lj-usr-lin:hover td { background: var(--surface); }
.lj-usr-nome { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 2px 4px; border-radius: 6px; text-align: left; }
.lj-usr-nome:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lj-usr-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.lj-usr-dl dt { color: var(--muted); }
.lj-usr-dl dd { margin: 0; overflow-wrap: anywhere; }
#lj-usr-msg { border-style: dashed; border-color: var(--line); }
/* Mensageiro · caixa de entrada (aba Mensagens) */
.lj-cx { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 12px; padding: 12px; align-items: start; }
@media (max-width: 760px) { .lj-cx { grid-template-columns: 1fr; } }
.lj-cx-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 70vh; overflow-y: auto; }
.lj-cx-item { width: 100%; text-align: left; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.lj-cx-item:hover, .lj-cx-item.on { border-color: var(--accent); }
.lj-cx-item:focus-visible, #lj-cx-tx:focus-visible, #lj-cx-tit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lj-cx-item.nova .lj-cx-nome { font-weight: 700; }
.lj-cx-nome { overflow-wrap: anywhere; }
.lj-cx-ponto { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); }
.lj-cx-meta { color: var(--muted); font-size: .8rem; }
.lj-cx-hist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; }
.lj-cx-bal { max-width: 85%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.lj-cx-bal.studio { justify-self: end; border-color: var(--accent); }
.lj-cx-quem { display: block; color: var(--muted); font-size: .75rem; margin-bottom: 2px; }
.lj-cx-txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.lj-cx-resp label { display: block; font-weight: 600; margin-bottom: 4px; }
.lj-cx-resp textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.ptab .bad { color: var(--danger); }
.ptab .good { color: var(--ok); }
.ptab .pbar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; vertical-align: middle; }
.ptab .pbar i { display: block; height: 100%; background: var(--ok); }
.ptabwrap { overflow-x: auto; }
.paynote { color: var(--muted); font-size: .8rem; margin: 8px 2px 14px; }
.filters { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.filters .btn { border: 0; border-radius: 0; padding: 6px 12px; font-size: .84rem; }
.filters .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
/* menu de e-mails: sem a borda fina em volta do grupo (os botões já têm a sua) */
#ml-tabs { border: 0; overflow: visible; }
@media (max-width: 760px) { .prow { grid-template-columns: 1fr 1fr; } }
dialog.proj { width: min(760px, 95vw); max-height: 92vh; overflow: auto; }
dialog.proj h4 { margin: 16px 0 6px; font-size: .9rem; }
dialog.proj .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
dialog.proj select, dialog.proj input[type="text"], dialog.proj input[type="date"], dialog.proj textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
dialog.proj textarea { min-height: 80px; }
.task { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.task input[type="text"] { flex: 1; }
.task.done input[type="text"] { text-decoration: line-through; color: var(--muted); }
.menu { position: relative; }
.menubtn { padding: 6px 11px; font-size: 1.05rem; line-height: 1; color: var(--muted, var(--fg)); background: transparent; border-color: transparent; }
.menupop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: flex; flex-direction: column; gap: 4px; padding: 6px; min-width: 170px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.menupop .btn { text-align: left; border: 0; }
.modes { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.modes .btn { border: 0; border-radius: 0; padding: 7px 12px; font-size: 0.85rem; }
.modes .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
body[data-mode="doc"] .main { grid-template-columns: 250px minmax(420px, 1fr) 330px; }
body[data-mode="doc"] .view { grid-column: 2; grid-row: 1; border-left: 0; }
body[data-mode="doc"] .edit { grid-column: 3; grid-row: 1; border-left: 1px solid var(--line); }
body[data-mode="doc"] .edit fieldset:not(#fs-visual) { display: none; }
body[data-mode="doc"] #prompt { display: inline-block; }
.paper[contenteditable="true"] { outline: none; cursor: text; max-width: 900px; margin-inline: auto; }
.paper[contenteditable="true"] :is(p, li):not(.total):hover { background: rgba(123, 87, 214, .08); box-shadow: 0 0 0 4px rgba(123, 87, 214, .08); border-radius: 3px; }
.paper[contenteditable="true"] :is(p, li):focus { outline: none; }
.paper[contenteditable="true"] :is(p, li)[data-ph]:empty::before, .paper[contenteditable="true"] :is(p, li)[data-ph]:has(> br:only-child)::before { content: attr(data-ph); color: #9a94ab; font-style: italic; }
.paper h2 .ai { margin-left: 10px; vertical-align: middle; }
.paper .ai { color: #7b57d6; border-color: #d9d0f0; }
/* modo documento: segue o tema do sistema (claro/escuro) */
body[data-mode="doc"] .paper { background: var(--surface); color: var(--fg); border-color: var(--line); }
body[data-mode="doc"] .paper hr { border-top-color: var(--line); }
body[data-mode="doc"] .paper .brand a { color: var(--accent); }
body[data-mode="doc"] .paper .brand-foot { border-top-color: var(--line); }
body[data-mode="doc"] .paper .ai { color: var(--accent); border-color: var(--line); background: transparent; }
body[data-mode="doc"] .paper .ai:hover:not(:disabled) { background: var(--hover); border-color: var(--accent); }
body[data-mode="doc"] .paper[contenteditable="true"] :is(p, li):not(.total):hover { background: var(--hover); box-shadow: 0 0 0 4px var(--hover); }
body[data-mode="doc"] .paper[contenteditable="true"] :is(p, li)[data-ph]:empty::before, body[data-mode="doc"] .paper[contenteditable="true"] :is(p, li)[data-ph]:has(> br:only-child)::before { color: var(--muted); }
body[data-mode="doc"] .paper .refs img { border: 1px solid var(--line); }
body[data-mode="doc"] .paper { caret-color: var(--accent); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label.f { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; }
label.f > input, label.f > textarea {
  display: block; width: 100%; margin-top: 3px; padding: 8px 10px; font-size: 0.95rem; color: var(--fg);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
label.f > textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
.hint { font-size: 0.78rem; color: var(--muted); margin: -4px 0 10px; }
/* Central de Comunicação › Configurações (cc-e1 · 04): campos em div.f (rótulo + controle + mensagem de erro) */
#ccg-form .f { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; }
#ccg-form .f :is(input:not([type="color"]):not([type="file"]), textarea, select) { display: block; width: 100%; margin-top: 3px; padding: 8px 10px; font: inherit; font-size: 0.95rem; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
#ccg-form .f textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
#ccg-form .f > small { display: block; margin: 3px 0 0; }
#ccg-form [aria-invalid="true"] { border-color: var(--danger); }
#ccg-form input[readonly] { opacity: 0.75; }
/* Central de Comunicação › Templates (cc-e3 · 14): editor com coluna lateral (variáveis, conferência, duplicar) */
#cte [hidden] { display: none !important; }
#cte .muted { color: var(--muted); }
/* cc-e3 · 17: histórico de versões e comparação (37-central-versoes.js) */
#ctv .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#ctv .ctv-rolagem { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
#ctv .ctv-tab { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.82rem; }
#ctv .ctv-tab th, #ctv .ctv-tab td { padding: 3px 8px; text-align: left; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; }
#ctv .ctv-tab thead th { font-family: inherit; color: var(--muted); background: var(--bar); }
#ctv .ctv-tab .ctv-mk { width: 26px; text-align: center; color: var(--muted); }
#ctv .ctv-d.ctv-alt { background: color-mix(in srgb, var(--accent) 16%, transparent); }
#ctv .ctv-d.ctv-rem { background: color-mix(in srgb, var(--danger) 16%, transparent); }
#ctv .ctv-d.ctv-add { background: color-mix(in srgb, var(--ok) 16%, transparent); }
#ctv .ctv-d .ctv-mk { color: var(--fg); font-weight: 700; }
#cte-ed { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
@media (max-width: 900px) { #cte-ed { grid-template-columns: 1fr; } }
#cte .f { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; }
#cte .f :is(input:not([type="file"]):not([type="checkbox"]), textarea, select) { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 8px 10px; font: inherit; font-size: 0.95rem; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
#cte textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; resize: vertical; line-height: 1.45; font-size: 0.9rem; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
#cte .f > small, #cte .f > .hint { display: block; margin: 3px 0 0; }
#cte [aria-invalid="true"] { border-color: var(--danger); }
#cte-visual { min-height: 260px; max-height: 60vh; overflow: auto; padding: 14px 16px; color: #1f1b2e; background: #fff; border: 1px solid var(--line); border-radius: 8px; line-height: 1.5; }
#cte-visual:focus-visible, #cte-checagem:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#cte-visual img { max-width: 100%; height: auto; }
#cte-pv-barra { align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
#cte-pv-barra .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
#cte-previa { width: 100%; height: 420px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
#cte-modos [aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
#cte-tabela td, #cte-tabela th { vertical-align: top; }
#ctb-corpo .ctb-barra { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
#ctb-corpo .ctb-sep { flex: 1; }
#ctb-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { #ctb-grade { grid-template-columns: 1fr; } }
.ctb-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ctb-it { display: flex; gap: 4px; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.ctb-it.sel { border-color: var(--accent); }
.ctb-sel { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: var(--fg); font: inherit; font-size: 0.9rem; padding: 6px 8px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px; }
.ctb-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ctb-num { display: inline-block; min-width: 1.4em; color: var(--muted); font-weight: 600; }
#ctb-props input[type="color"] { padding: 2px; height: 36px; }
#ctb-previa { width: 100%; height: 340px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
@media (prefers-reduced-motion: reduce) { #cte * { transition: none !important; animation: none !important; } }
details.cfg { margin-bottom: 16px; border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; }
details.cfg summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); }
.items { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.items th { text-align: left; font-size: 0.72rem; color: var(--muted); font-weight: 600; padding: 0 4px 4px; }
.items td { padding: 3px 4px; vertical-align: middle; }
.items input {
  width: 100%; padding: 7px 8px; font-size: 0.9rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; color: var(--fg);
}
.items .num { text-align: right; }
.items .tot { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.sumline { display: flex; justify-content: space-between; font-weight: 700; padding: 8px 4px; border-top: 1px solid var(--line); }
.dropzone {
  border: 2px dashed var(--line); border-radius: 12px; padding: 22px 14px; text-align: center; cursor: pointer;
  color: var(--muted); background: var(--surface);
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--hover); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 8px; }
.thumbs:empty { display: none; }
.thumb { position: relative; }
.thumb img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.thumb button {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: var(--accent); color: var(--accent-fg); cursor: pointer; line-height: 1; font-size: 15px;
}
.view { background: var(--bg); padding: 14px 16px 40px; border-left: 1px solid var(--line); }
.vbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; position: sticky; top: -14px; z-index: 2; padding: 8px 0; background: var(--bg); }
.vbar .sp { flex: 1; }
.vbar { gap: 6px; }
.vbar .btn { padding: 7px 10px; font-size: 0.84rem; white-space: nowrap; }
.vbar .dochint { flex: 0 1 auto; }
.vbar .vsep { height: 24px; margin: 0 2px; }
.menupop .btn { white-space: nowrap; }
.menupop.left { right: auto; left: 0; }
.paper {
  background: #fff; color: #111; border-radius: 6px; border: 1px solid var(--line);
  padding: 28px clamp(18px, 4vw, 44px) 20px; font-family: Arial, Helvetica, sans-serif; font-size: 11pt; overflow-wrap: anywhere;
}
.paper .brand { text-align: center; margin: 0 0 18px; }
.paper .brand img { display: block; margin: 0 auto 8px; width: min(220px, 60%); height: auto; }
.paper .brand p { margin: 0 0 2px; font-size: 0.95rem; }
.paper .brand a { color: #1a56c4; }
.paper h1 { font-size: 26pt; line-height: 1.2; text-align: center; margin: 0 0 14pt; }
.paper h2 { font-size: 19pt; line-height: 1.3; margin: 0 0 8pt; }
.paper p { margin: 0 0 6pt; line-height: 1.5; }
.paper > p:not(.total) { text-align: justify; text-indent: 36pt; }
.paper ul { margin: 0 0 6pt; padding-left: 36pt; }
.paper li { line-height: 1.5; }
.paper hr { border: 0; border-top: 1px solid #999; margin: 18pt 0; }
.paper .meta p { margin: 0; text-indent: 0; text-align: left; }
.paper .total { font-weight: 700; font-size: 13pt; }
.paper .refs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.paper .refs img { width: 100%; height: auto; display: block; border-radius: 6px; }
.paper .brand-foot { text-align: center; margin-top: 24px; padding-top: 12px; border-top: 1px solid #ddd; }
.paper .brand-foot img { width: 56px; height: auto; display: block; margin: 0 auto; }
.copy-src { position: fixed; left: -10000px; top: 0; width: 640px; background: #fff; color: #111; }
.copy-src, .copy-src * { color: #111 !important; background: none !important; font-family: Arial, Helvetica, sans-serif !important; }
.copy-src .refs { display: block; }
.copy-src .refs img { display: inline-block; width: 300px; max-width: 100%; margin: 0 8px 8px 0; height: auto; }
.status { position: fixed; inset: auto; left: 50%; bottom: 16px; margin: 0; border: 0; overflow: visible; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 8px 16px; border-radius: 999px; font-size: 0.88rem; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 10; max-width: 90vw; }
.status.show { opacity: 1; }
dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--fg); padding: 18px; width: min(720px, 94vw); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h3 { margin: 0 0 6px; }
dialog textarea { width: 100%; min-height: 320px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); line-height: 1.5; }
dialog .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }

.chat { position: fixed; right: 0; top: 0; bottom: 0; width: min(460px, 100vw); z-index: 6; display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -10px 0 30px rgba(0,0,0,.18); }
.chat[hidden] { display: none; }
.chat header { flex-wrap: wrap; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bar); }
.chat header h2 { margin: 0; font-size: 1rem; flex: 1; white-space: nowrap; }
.chat header .btn { white-space: nowrap; }
.chat header { flex-direction: column; align-items: stretch; gap: 8px; }
.chat header .hrow { display: flex; align-items: center; gap: 8px; }
.chat header .hrow #chat-prov { flex: 1 1 auto; }
.chat header .cfill #chat-fill { flex: none; }
.chat header .cfill span { flex: 1; min-width: 0; font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat .composer .crow { flex-wrap: wrap; align-items: center; }
.msgs { flex: 1; overflow: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.empty { color: var(--muted); font-size: 0.9rem; padding: 8px 4px; }
.bub { max-width: 92%; padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.93rem; line-height: 1.45; }
.bub.user { align-self: flex-end; background: var(--accent); color: var(--accent-fg); border-bottom-right-radius: 4px; }
.bub.bot { align-self: flex-start; background: var(--hover); border-bottom-left-radius: 4px; }
.bub .fields { display: block; margin-top: 8px; font-size: 0.8rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 6px; }
.bub .imgs { display: block; margin-top: 4px; font-size: 0.78rem; opacity: .85; }
.bub .undo { margin-top: 6px; }
.bub.err { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.composer { border-top: 1px solid var(--line); padding: 10px 12px; background: var(--bar); }
.composer textarea { width: 100%; min-height: 70px; max-height: 220px; resize: vertical; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.composer .row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.composer .row .sp { flex: 1; }
.composer label.chk { font-size: 0.78rem; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.pthumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pthumbs:empty { display: none; }
.pthumbs .thumb { width: 64px; }
.pthumbs .thumb img { height: 52px; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 35%, transparent); } to { background: transparent; } }
.flash { animation: flash 2.2s ease-out; }
.set label.f { margin-bottom: 12px; }

.mz h4 { margin: 14px 0 6px; font-size: 0.95rem; }
.mz .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.mz select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.mz textarea { min-height: 120px; }
.mz .bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 8px 0; }
.mz .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s; }
.mz .res { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 8px 0; }
.mz .res figure { margin: 0; }
.mz .res img { width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; }
.mz .links a { display: inline-block; margin: 2px 8px 2px 0; color: var(--accent); font-weight: 600; }
.mz .msg { font-size: 0.85rem; color: var(--muted); min-height: 1.2em; }
.mz .msg.err { color: var(--danger); }
dialog.mz { width: min(760px, 95vw); max-height: 92vh; overflow: auto; }
.tabs { display: none; }
@media (max-width: 1180px) {
  .main { grid-template-columns: 220px 1fr; }
  .view { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .side { border-right: 0; border-bottom: 1px solid var(--line); max-height: 28vh; }
  .tabs { display: flex; gap: 6px; padding: 8px 12px; background: var(--bar); border-bottom: 1px solid var(--line); }
  .tabs .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
  body[data-view="edit"] .view { display: none; }
  body[data-view="view"] .edit { display: none; }
  body[data-mode="doc"] .tabs { display: none; }
  body[data-mode="doc"] .view, body[data-mode="doc"] .edit { display: block !important; grid-column: auto; }
  .view { grid-column: auto; border-top: 0; }
  .app { height: auto; min-height: 100vh; }
  .main { display: block; }
}
html[data-gate="1"] body > *:not(#gate) { visibility: hidden !important; pointer-events: none !important; }
#gate { display: none; }
html[data-gate="1"] #gate { display: flex; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; padding: 20px; background: var(--bg); color: var(--fg); font-family: var(--font); visibility: visible !important; pointer-events: auto !important; }
#gate .gcard { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; text-align: center; box-shadow: 0 10px 40px rgba(60,40,120,.12); }
#gate .gimg { display: block; width: 132px; height: auto; margin: -4px auto 4px; }
#gate h1 { margin: 10px 0 4px; font-size: 22px; }
#gate p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
#gate button { width: 100%; padding: 12px 14px; font-size: 15px; font-weight: 600; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-fg); cursor: pointer; }
#gate button:disabled { opacity: .6; cursor: default; }
#cloud-st .cico { display: inline-block; margin-right: 4px; }
#cloud-st { min-width: 16ch; text-align: center; }
#cloud-st.syncing { border-color: var(--accent); animation: cloudpulse 2s ease-in-out infinite; }
@keyframes cloudpulse { 50% { opacity: .55; box-shadow: 0 0 0 2px var(--accent); } }
@media (prefers-reduced-motion: reduce) { #cloud-st.syncing { animation: none; opacity: .8; box-shadow: 0 0 0 2px var(--accent); } }
/* Modal de carregamento padrão (02b-carregando.js); cópia enxuta em loja.css, entrega.html e pedido.html */
.carr { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: rgba(20, 14, 40, .55); align-items: center; justify-content: center; color: var(--fg); }
.carr:popover-open, .carr.carr-on { display: flex; }
.carr:not([popover]):not(.carr-on) { display: none; }
.carr-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); padding: 22px 26px; min-width: 240px; max-width: min(90vw, 380px); text-align: center; }
.carr-spin { display: block; width: 34px; height: 34px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: carr-spin .8s linear infinite; }
.carr-t { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.carr-bar { height: 8px; margin-top: 14px; border-radius: 99px; background: var(--line); overflow: hidden; }
.carr-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.carr-x { margin-top: 14px; }
@keyframes carr-spin { to { transform: rotate(360deg); } }
@keyframes carr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .carr-spin { animation: carr-pulse 1.4s ease-in-out infinite; border-color: var(--accent); } .carr-bar i { transition: none; } }
#gate .gvis { margin-top: 10px; background: transparent !important; color: var(--accent) !important; border: 1px solid var(--line) !important; font-weight: 600; }
#gate .gnote { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
#guest-bar { display: none; }
html[data-guest] #guest-bar { display: flex; position: fixed; left: 12px; bottom: 12px; z-index: 9000; max-width: calc(100vw - 24px); gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--accent); color: var(--accent-fg); font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
#guest-bar button { padding: 4px 10px; border-radius: 8px; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
html[data-guest] #cloud-st, html[data-guest] #chat-toggle, html[data-guest] #meshy-open, html[data-guest] #chat { display: none !important; }
#gate .gmsg { min-height: 20px; margin-top: 14px; font-size: 13px; color: var(--danger); }

/* ---------- Loja (17-loja.js) ---------- */
.ljprods { display: grid; gap: 8px; }
.ljrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; cursor: pointer; color: var(--fg); font: inherit; }
.ljrow:hover { background: var(--hover); }
.bibli { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bibli > .ljrow { flex: 1 1 auto; width: auto; min-width: 0; }
.bibchk { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 44px; cursor: pointer; }
.bibchk input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.bibchk input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ljrow .th { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--hover); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.ljrow .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ljrow b { display: block; }
.ljrow small { color: var(--muted); }
.ljrow .r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .85rem; }
.lj-dlg { width: min(860px, 96vw); }
.lj-dlg .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .lj-dlg .g2 { grid-template-columns: 1fr; } }
.lj-dlg label.f > select { display: block; width: 100%; margin-top: 4px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); }
.lj-dlg label.f > textarea { min-height: 70px; }
.lj-dlg h4 { margin: 16px 0 6px; font-size: .92rem; }
.lj-ck { display: flex; gap: 8px; align-items: center; font-size: .9rem; margin: 4px 0 10px; }
.lj-fotos { display: flex; flex-wrap: wrap; gap: 8px; }
.lj-fotos .ft { position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--hover); }
.lj-fotos .ft img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lj-fotos .ft .cap { position: absolute; left: 4px; bottom: 4px; font-size: .65rem; background: var(--accent); color: #fff; border-radius: 6px; padding: 1px 5px; }
.lj-fotos .ft .acts2 { position: absolute; top: 3px; right: 3px; display: flex; gap: 3px; }
.lj-fotos .ft button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: .75rem; line-height: 24px; padding: 0; }
.lj-arqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lj-arqs li { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: .88rem; }
.lj-arqs li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lj-up { font-size: .82rem; color: var(--muted); margin: 6px 0 0; }
.lj-cfg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.lj-cfg .cfg-sec { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.lj-cfg .cfg-sec > summary { cursor: pointer; padding: 11px 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; list-style-position: inside; }
.lj-cfg .cfg-t { font-weight: 600; font-size: 1rem; }
.lj-cfg .cfg-t small { font-weight: 400; color: var(--muted); }
.lj-cfg .cfg-res { margin-left: auto; font-size: .85rem; color: var(--muted); }
.lj-cfg .cfg-flag { font-size: .8rem; color: var(--danger, #c0392b); font-weight: 600; }
.lj-cfg .cfg-corpo { padding: 2px 14px 14px; border-top: 1px solid var(--line); }
.lj-cfg .cfg-corpo > .hint:first-child { margin-top: 10px; }
.lj-cfg .cfg-barra { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.lj-cfg .panel h3 { margin: 0 0 8px; font-size: 1rem; }
.lj-cats { display: grid; gap: 6px; margin-bottom: 8px; }
.lj-cats .c { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.lj-cats input, .lj-cfg input[type="text"], .lj-cfg input[type="number"], .lj-cfg select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; }
.lj-cfg textarea { width: 100%; min-height: 160px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; font-size: .88rem; line-height: 1.45; }
.lj-hist { list-style: none; padding: 0; margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
.lj-itens { margin: 10px 0; display: grid; gap: 6px; }
.lj-itens div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: .9rem; }
.lj-dlg .acts { position: sticky; bottom: -18px; background: var(--surface); padding: 10px 0 2px; margin-bottom: -2px; border-top: 1px solid var(--line); }
.lj-cfg label.f > textarea { min-height: 160px; }
/* ---------- Custos (app/js/18-custos.js) ---------- */
.cs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .cs-grid { grid-template-columns: 1fr; } }
.cs-form, .cs-res, .cs-lista { display: grid; gap: 12px; }
.cs-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.cs-cols .cs-wide { grid-column: 1 / -1; }
#page-custos label.f > input, #page-custos label.f > select, #page-imp label.f > input:not([type="checkbox"]), #page-imp label.f > select, #page-fil label.f > input:not([type="checkbox"]), #page-fil label.f > select { display: block; width: 100%; margin-top: 4px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; }
#cs-fat-zona { border-style: dashed; }

/* ---------- Design da loja (25-design-loja.js) ---------- */
#page-dsloja .dsj-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
#page-dsloja .dsj-st { font-size: 13px; color: var(--muted); }
#page-dsloja .dsj-aviso { margin: 0 0 6px; color: var(--danger, #b3261e); font-weight: 600; }
#page-dsloja .dsj-ok { margin: 0; }
#page-dsloja .dsj-pares { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
#page-dsloja .dsj-pares li.ruim { color: var(--danger, #b3261e); }
#page-dsloja .dsj-todos { margin-top: 8px; }
#page-dsloja .dsj-sw { display: inline-block; min-width: 30px; text-align: center; border: 1px solid var(--line); border-radius: 6px; font-weight: 700; }
#page-dsloja .dsj-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
#page-dsloja .dsj-grid.com-painel { grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr); }
#page-dsloja .dsj-grid:not(.com-painel) > .dsj-ctl { display: none; }
@media (max-width: 1000px) { #page-dsloja .dsj-grid.com-painel { grid-template-columns: 1fr; } }
#page-dsloja .dsj-fold { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin: 10px 0; }
#page-dsloja .dsj-fold > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; }
#page-dsloja .dsj-fold > .panel { border: 0; margin: 0; box-shadow: none; }
#page-dsloja .dsj-prev { position: sticky; top: 8px; }
#page-dsloja .dsj-tb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
#page-dsloja .dsj-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
#page-dsloja .dsj-seg .btn[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
/* barra da prévia: grupos segmentados, um fundo só, botão ativo em destaque */
#page-dsloja .dsj-tb { align-items: center; gap: 6px 14px; }
#page-dsloja .dsj-tb .dsj-seg { flex-wrap: nowrap; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
#page-dsloja .dsj-tb .dsj-seg .btn { border-color: transparent; background: transparent; box-shadow: none; padding: 4px 11px; font-size: 13px; font-weight: 500; border-radius: 7px; color: var(--muted); }
#page-dsloja .dsj-tb .dsj-seg .btn:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--bar); color: var(--fg); }
#page-dsloja .dsj-tb .dsj-seg .btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
#page-dsloja .dsj-tb .dsj-seg .btn:disabled { opacity: .4; }
#page-dsloja .dsj-fw { display: flex; gap: 12px; overflow: auto; }
#page-dsloja .dsj-fg { margin: 0 auto; flex: 0 0 auto; } /* margin auto centra sem cortar a esquerda quando estoura */
#page-dsloja .dsj-fg figcaption { text-align: center; }
#page-dsloja .dsj-fg figcaption { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
#page-dsloja .dsj-wr { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
#page-dsloja .dsj-fr { border: 0; display: block; transform-origin: top left; background: #fff; }
#page-dsloja .dsj-sec { margin: 16px 0 6px; }
#page-dsloja .dsj-g { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 6px; }
#page-dsloja .dsj-g > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; }
#page-dsloja .dsj-gb { padding: 0 12px 10px; }
#page-dsloja .dsj-gt { margin-bottom: 4px; }
#page-dsloja .dsj-vars { display: grid; gap: 6px; }
#page-dsloja .dsj-var { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
#page-dsloja .dsj-vn { flex: 1 1 120px; font-weight: 600; }
#page-dsloja .dsj-vs { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid; border-radius: 6px; }
#page-dsloja .dsj-vs i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, .4); }
#page-dsloja .dsj-vb { display: inline-flex; gap: 4px; flex-wrap: wrap; }
#page-dsloja .dsj-var input[type="color"] { width: 36px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
#page-dsloja .dsj-r { padding: 8px 0; border-top: 1px solid var(--line); }
#page-dsloja .dsj-n b { font-size: 13px; }
#page-dsloja .dsj-n .dsj-onde { width: 24px; height: 24px; font-size: 12px; margin-left: 6px; vertical-align: middle; }
#page-dsloja .dsj-n small { display: block; color: var(--muted); font-size: 12px; margin: 2px 0 4px; }
#page-dsloja .dsj-cs { display: grid; grid-template-columns: 1fr; gap: 8px; }
#page-dsloja .dsj-cs.dois { grid-template-columns: 1fr 1fr; }
#page-dsloja .dsj-cs.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#page-dsloja .dsj-lb { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
#page-dsloja .dsj-in { display: flex; align-items: center; gap: 4px; }
#page-dsloja .dsj-in input[type="color"] { width: 34px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; flex: 0 0 auto; }
#page-dsloja .dsj-tx, #page-dsloja .dsj-nm, #page-dsloja .dsj-sl { min-width: 0; flex: 1 1 auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; font-size: 13px; }
#page-dsloja .dsj-un { font-size: 12px; color: var(--muted); }
#page-dsloja .dsj-c.mod .dsj-tx, #page-dsloja .dsj-c.mod .dsj-nm, #page-dsloja .dsj-c.mod .dsj-sl { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#page-dsloja [aria-invalid="true"] { border-color: var(--danger, #b3261e); }
#page-dsloja .dsj-hl { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
#page-dsloja .dsj-hl li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding: 6px 0; font-size: 13px; }
#page-dsloja .dsj-fm { display: grid; gap: 8px; max-width: 520px; margin: 8px 0; }
#page-dsloja .dsj-fm label { display: grid; gap: 2px; font-size: 13px; }
#page-dsloja .dsj-fm label.dsj-ck { display: flex; align-items: center; gap: 6px; }
#page-dsloja .dsj-im { display: grid; gap: 8px; }
#page-dsloja .dsj-ir { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding: 6px 0; }
#page-dsloja .dsj-ir small { display: block; color: var(--muted); font-size: 12px; }
#page-dsloja .dsj-in { flex-wrap: wrap; }
#page-dsloja .dsj-th { max-width: 64px; max-height: 40px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
#page-dsloja .dsj-lim { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.cs-fat-box { margin-top: 10px; display: grid; gap: 8px; }
.cs-fat-erro { margin: 8px 0 0; color: var(--bad, #c0392b); }
.cs-fat-av { margin: 0; padding-left: 18px; color: var(--muted); font-size: .85rem; }
.cs-fat-cor { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); margin-right: 6px; vertical-align: middle; }
.cs-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cs-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cs-dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 8px 0 0; }
.cs-dl dt { color: var(--muted); font-size: .85rem; } .cs-dl dd { margin: 0; text-align: right; }
.cs-neg { color: var(--danger); }
.cs-erro { border-color: var(--danger); } .cs-erro ul { margin: 0; padding-left: 18px; }
.cs-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cs-tab th, .cs-tab td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--line); } .cs-tab th:first-child, .cs-tab td:first-child { text-align: left; }
.cs-tot td { font-weight: 700; }
.cs-bar { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; margin: 6px 0; font-size: .85rem; }
.cs-bar i { display: block; height: 14px; border-radius: 7px; background: var(--muted); min-width: 2px; } .cs-bar2 i { background: var(--ok); }
.cs-sim { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cs-sim small { display: block; color: var(--muted); font-size: .78rem; }
.cs-sim-v { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); } .cs-sim-v b { color: var(--fg); }
.cs-sim-a { display: flex; gap: 6px; }
/* editor de produto da loja: idioma, status, assistente de IA, seções */
.lje-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin: 2px 0 12px; }
.lje-lang { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--hover); border: 1px solid var(--line); }
.lje-lang button { position: relative; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.lje-lang button[aria-checked="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.lje-ai { font-size: .62rem; font-weight: 800; letter-spacing: .04em; padding: 1px 5px; margin-left: 4px; border-radius: 6px; background: var(--accent); color: var(--accent-fg); vertical-align: 1px; }
.lje-dot { position: absolute; top: 4px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e69a1e; }
.lje-sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.lje-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lje-sw .trk { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--line); transition: background .15s; flex: none; }
.lje-sw .trk::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.lje-sw input:checked + .trk { background: var(--ok, #2e9e6b); }
.lje-sw input:checked + .trk::after { transform: translateX(18px); }
.lje-sw input:focus-visible + .trk { outline: 3px solid var(--accent); outline-offset: 2px; }
.lje-sw b { display: block; font-size: .9rem; line-height: 1.2; }
.lje-sw small { display: block; color: var(--muted); font-size: .75rem; }
.lje-ia { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.lje-ia .hd { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.lje-ia .hd span { color: var(--muted); font-size: .8rem; }
.lje-ia textarea { width: 100%; min-height: 64px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; resize: vertical; }
.lje-ia-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.lje-ck2 { display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--muted); }
.lje-ia-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.lje-ia-imgs .t { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.lje-ia-imgs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lje-ia-imgs button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: .65rem; cursor: pointer; padding: 0; line-height: 18px; }
.lje-note { font-size: .82rem; color: var(--muted); margin: 8px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lje-note.warn { color: #b86e00; }
.lje-note.bad { color: var(--danger); }
.lje-note.busy { color: var(--accent); }
.lje-ia.busy { position: relative; overflow: hidden; border-color: var(--accent); }
.lje-ia.busy::after { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: lje-varre 1.3s ease-in-out infinite; }
.lje-ia.busy textarea { opacity: .6; pointer-events: none; }
.lje-spark { display: inline-block; animation: ai-pulse 1s ease-in-out infinite; }
.lje-dots i { display: inline-block; width: 4px; height: 4px; margin-left: 3px; border-radius: 50%; background: currentColor; animation: ai-dot 1.2s ease-in-out infinite; }
.lje-dots i:nth-child(2) { animation-delay: .15s; }
.lje-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes lje-varre { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .lje-ia.busy::after, .lje-spark, .lje-dots i { animation: none; } .lje-ia.busy::after { width: 100%; opacity: .6; } }
.lje-sec { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 6px; }
.lg-campo { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; background: var(--surface); }
.lg-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; }
.lg-sec { margin: 14px 0 0; font-size: .9rem; color: var(--muted); }
.lg-acts { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
/* Motores de receita 03: campos do motor na receita (liga/desliga + limites) */
.lg-mc { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 6px 0; background: var(--surface); }
.lg-mc.off { opacity: .7; }
.lg-mc small { display: block; color: var(--muted); font-size: .78rem; }
.lg-mcg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; max-width: 340px; }
.lg-mcres { margin: 0 0 8px; }
#lg-body textarea { width: 100%; box-sizing: border-box; }
.lje-sec h4 { margin: 10px 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lje-sec h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.lj-dlg label.f > small { display: block; margin-top: 3px; font-size: .74rem; }
.lje-money { display: flex; align-items: stretch; margin-top: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow: hidden; }
.lje-money i { font-style: normal; display: flex; align-items: center; padding: 0 10px; color: var(--muted); font-size: .85rem; border-right: 1px solid var(--line); }
.lj-dlg .lje-money input[type="text"] { border: 0; border-radius: 0; margin: 0; background: transparent; }
.lje-adv { margin: 2px 0 6px; font-size: .85rem; }
.lje-adv summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.lje-drop { border: 1.5px dashed var(--line); border-radius: 12px; padding: 10px; transition: background .15s, border-color .15s; }
.lje-drop.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lje-add { width: 92px; height: 92px; border-radius: 10px; border: 1.5px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); }
.lje-add span { font-size: 1.6rem; line-height: 1; }
.lje-add:hover, .lje-dz-btn:hover { border-color: var(--accent); color: var(--accent); }
.lje-dz-t { margin: 8px 0 0; font-size: .75rem; color: var(--muted); }
.lje-dz-btn { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; justify-content: center; padding: 14px; border-radius: 10px; cursor: pointer; color: var(--fg); }
.lje-dz-btn small { color: var(--muted); }
.lj-dlg .lj-arqs { margin-bottom: 8px; }
.lje-3d { height: 280px; border-radius: 12px; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 85%, var(--hover), var(--bg) 70%); display: flex; overflow: hidden; }
.lje-3d-vz { align-items: center; justify-content: center; text-align: center; color: var(--muted); font-size: .9rem; }
.lje-3d-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.lje-3d-bar select, .lje-note select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; font-size: .82rem; }
.lje-cor { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.lje-cor input { width: 34px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer; }
.lj-dlg .lje-3d-bar select, .lj-dlg .lje-note select { width: auto; display: inline-block; }
.lj-dlg .lj-arqs li { flex-wrap: wrap; }
.lj-dlg .lj-arqs li .lg-vacts { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; }
.lje-pvt[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.lje-pvt[aria-pressed="false"] { opacity: .7; }
.lje-3d { height: 340px; position: relative; }

/* ---------- Telas largas e ultrawide (20/10/2026) ----------
   A partir de 2000 px o corpo das páginas, o topo e o rodapé ficam numa coluna central de --pg-max (1760 px, a largura
   de um monitor 1920 comum), com margens iguais dos dois lados. Para mudar a largura, mude só --pg-max.
   Até 1999 px nada muda, exceto a linha de atalhos do Início. */
:root { --pg-max: 100vw; --pg-pad: clamp(14px, 3vw, 32px); }
/* atalhos: 8 botões numa linha só (antes 7 colunas deixavam o último sozinho) ou 2 linhas de 4 */
@media (min-width: 1000px) and (max-width: 1199px) { .shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .shortcuts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

@media (min-width: 1920px) {
  .page { padding-inline: max(var(--pg-pad), calc((100% - var(--pg-max)) / 2)); }
  /* campos de busca não esticam pela tela inteira */
  .mlbar input[type=search], .entbar input { max-width: 760px; }
}
@media (min-width: 2000px) {
  :root { --pg-max: 1760px; }
  .top, .foot { padding-inline: max(16px, calc((100% - var(--pg-max)) / 2)); }
  /* orçamentos: as três colunas também ficam na coluna central */
  .main { width: min(100%, var(--pg-max)); justify-self: center; border-inline: 1px solid var(--line); grid-template-columns: 300px minmax(340px, 1fr) 480px; }
  body[data-mode="doc"] .main { grid-template-columns: 300px minmax(420px, 1fr) 400px; }
  /* listas com detalhe (Pedidos, Clientes, E-mails): lista um pouco mais larga */
  .mlgrid { grid-template-columns: 360px minmax(0, 1fr); }
  /* atividade do mês em duas colunas: o valor fica perto do nome */
  #hm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  #hm-list > :not(.row) { grid-column: 1 / -1; }
}
/* texto um pouco maior só em telas altas e densas (5K2K 5120×2160, 4K a 100%): largura sozinha não muda a letra */
@media (min-width: 1920px) and (min-height: 1600px) {
  html { font-size: clamp(16px, 10.4px + .39vh, 18.5px); }
  body { font-size: clamp(15px, 9.4px + .39vh, 17.5px); }
}

/* ---------- diálogos do Hub (js/00-dialogos.js) ---------- */
dialog.cat-dlg { width: min(460px, 94vw); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--fg); padding: 20px; box-shadow: 0 18px 50px rgba(10, 8, 20, .35); font-family: var(--font); }
dialog.cat-dlg::backdrop { background: rgba(10, 8, 20, .55); }
dialog.cat-dlg h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.05rem; }
dialog.cat-dlg.perigo { border-top: 4px solid var(--danger); }
dialog.cat-dlg .cd-c p { margin: 0 0 10px; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
dialog.cat-dlg .cd-c .cd-nota { padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; background: var(--bar); color: var(--muted); font-size: .82rem; }
dialog.cat-dlg .cd-in { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; }
dialog.cat-dlg .cd-bt { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
dialog.cat-dlg .btn.danger { background: var(--danger); border-color: var(--danger); color: var(--bg); }
/* testar gerador no Hub (reaproveita public\loja\editor.js; estilos copiados de loja.css) */
#dlg-montador { width: min(1100px, 96vw); }
#dlg-gerprev { width: min(980px, 96vw); }
#dlg-gerprev .gp-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 760px) { #dlg-gerprev .gp-grid { grid-template-columns: 1fr; } }
#dlg-gerprev .gp-modos { display: flex; gap: 6px; margin: 0 0 10px; }
#dlg-gerprev .gp-modos .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
#dlg-gerprev.gp-modo-casca .gp-grid { display: none; }
#dlg-gerprev > .cs-casca { z-index: 1; }
#dlg-gerprev .gp-visor { position: relative; min-height: 340px; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 12px; background: radial-gradient(ellipse at 50% 85%, var(--accent-soft, var(--surface)), var(--surface) 70%); overflow: hidden; }
#dlg-gerprev .ed-painel { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
#dlg-gerprev .ed-tit { font-size: 1rem; margin: 0 0 10px; }
#dlg-gerprev .ed-grupo { margin: 0 0 12px; padding: 8px 10px 0; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
#dlg-gerprev .ed-grupo > legend { padding: 0 6px; font-weight: 700; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
#dlg-gerprev .ed-painel label.f, #dlg-gerprev .ed-painel div.f { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 10px; }
#dlg-gerprev .ed-painel small { display: block; font-weight: 400; color: var(--muted); }
#dlg-gerprev .ed-painel input[type="text"], #dlg-gerprev .ed-painel input[type="number"], #dlg-gerprev .ed-painel select { width: 100%; min-width: 0; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); font: inherit; }
#dlg-gerprev .ed-painel input[aria-invalid="true"] { border-color: var(--danger); }
#dlg-gerprev .ed-linha { display: flex; align-items: center; gap: 10px; }
#dlg-gerprev .ed-linha input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
#dlg-gerprev .ed-linha input[type="number"] { flex: 0 0 90px; width: 90px; }
#dlg-gerprev .ed-cor { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#dlg-gerprev .ed-cor input { width: 56px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
#dlg-gerprev .ed-erro { color: var(--danger); }
#dlg-gerprev .ed-acoes .btn { width: 100%; }
#dlg-gerprev .ed-status { margin: 8px 0 0; font-size: .86rem; color: var(--muted); min-height: 1.3em; }
#dlg-gerprev .ed-status.ed-st-erro { color: var(--danger); }
#dlg-gerprev .ed-carga { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--muted); font-size: .9rem; text-align: center; padding: 16px; z-index: 5; pointer-events: none; }
#dlg-gerprev .ed-carga[hidden] { display: none; }
#dlg-gerprev .ed-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: gp-gira .8s linear infinite; }
@keyframes gp-gira { to { transform: rotate(360deg); } }
/* visualização fixa; só o painel de parâmetros rola */
#dlg-gerprev .gp-grid { align-items: stretch; height: min(66vh, 640px); }
#dlg-gerprev .gp-visor { height: 100%; min-height: 0; aspect-ratio: auto; }
#dlg-gerprev .ed-painel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) { #dlg-gerprev .gp-grid { grid-template-columns: 1fr; grid-template-rows: minmax(160px, 38%) minmax(0, 1fr); height: min(74vh, 640px); } }
@media (prefers-reduced-motion: reduce) { #dlg-gerprev .ed-spin { animation: none; } }
.dsj-tip { position: fixed; z-index: 3000; max-width: 320px; pointer-events: none; background: #1d1630; color: #fff; border: 1px solid #6d4aff; border-radius: 8px; padding: 6px 9px; font-size: 12px; line-height: 1.35; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.dsj-tip[hidden] { display: none; }
.dsj-tip b { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; }
.dsj-tip span { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dsj-tip i { font-style: normal; background: #6d4aff; border-radius: 999px; padding: 1px 7px; }
.dsj-tip em { display: block; margin-top: 3px; opacity: .65; font-style: normal; }
@keyframes dsjFlash { 0%, 100% { background: transparent; box-shadow: none; } 20%, 70% { background: rgba(255,45,149,.16); box-shadow: 0 0 0 2px #ff2d95; } }
#page-dsloja .dsj-r.dsj-flash { animation: dsjFlash 3s ease-in-out; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { #page-dsloja .dsj-r.dsj-flash { animation: none; background: rgba(255,45,149,.16); } }
#page-dsloja textarea.dsj-tx { width: 100%; resize: vertical; font: inherit; }
#page-dsloja .dsj-cs > .dsj-c { min-width: 0; }
/* reordenar seções (26-ordem-secoes.js) */
[data-os-h] { cursor: grab; -webkit-user-select: none; user-select: none; }
[data-os-h]::after { content: "⠿"; float: right; opacity: .3; font-weight: 400; }
[data-os-h]:hover::after { opacity: .7; }
body.os-on, body.os-on * { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; }
.os-drag { opacity: .8; outline: 2px dashed var(--accent); outline-offset: 3px; border-radius: 10px; }
#page-dsloja .dsj-blk { margin-bottom: 4px; }
/* caixa fixa de edição sobre a prévia (25-design-loja.js) */
#page-dsloja .dsj-pin { position: fixed; z-index: 3100; width: min(340px, calc(100vw - 12px)); max-height: 70vh; overflow: auto; background: var(--surface); color: var(--fg); border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
#page-dsloja .dsj-pin[hidden] { display: none; }
#page-dsloja .dsj-pin-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
#page-dsloja .dsj-pin-h .sp { flex: 1; }
#page-dsloja .dsj-pin .dsj-pin-d { margin: 2px 0 6px; font-size: 12px; }
#page-dsloja .dsj-pin .dsj-cs { margin: 6px 0; }
#page-dsloja .dsj-pin .dsj-top { margin: 8px 0 0; }
#page-dsloja .dsj-pin .hint { font-size: 12px; margin: 4px 0 6px; }
#page-dsloja .dsj-pin select { width: 100%; }
#page-dsloja .dsj-pin .dsj-lb { font-size: 11px; }
#page-dsloja .dsj-pin .btn.small { padding: 5px 10px; font-size: 12px; }
#page-dsloja .dsj-pin-f { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
#page-dsloja .dsj-pin .dsj-st { font-size: 12px; }
#page-dsloja .dsj-pg { border-top: 1px solid var(--line); }
#page-dsloja .dsj-pg > summary { cursor: pointer; padding: 8px 2px; font-weight: 600; font-size: 13px; }
#page-dsloja .dsj-pg > div { padding: 0 0 8px; }
#page-dsloja .dsj-up { justify-self: start; position: relative; overflow: hidden; cursor: pointer; display: inline-block; }
#page-dsloja .dsj-up input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
#page-dsloja .dsj-up:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* gerente do projeto (diálogo de Implementar tudo, backlog-fila.js) */
.etfc { border: 1px solid var(--borda, #ccc); border-radius: 8px; margin: 10px 0 0; padding: 6px 12px 10px; text-align: left; }
.etfc legend { font-weight: 600; padding: 0 6px; }
.etfc-l { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; cursor: pointer; }
.etfc-l small { opacity: .75; }

/* modal de geradores: navegação lateral, uma seção por vez, campos compactos */
#dlg-ger { width: min(1040px, 96vw); }
#lg-body [hidden] { display: none !important; }
.lg-st { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -2px 0 10px; font-size: .82rem; }
.lg-st .chip.warn { background: color-mix(in srgb, var(--warn, #d9a400) 22%, transparent); }
.lg-wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; min-height: 360px; }
.lg-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; align-self: start; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.lg-nv { display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.lg-nv:hover { background: var(--hover); }
.lg-nv.on { background: var(--bg); border-color: var(--line); font-weight: 600; }
.lg-nv .st { font-size: .72rem; color: var(--muted); font-weight: 400; }
.lg-nv.bad .st { color: var(--danger); }
.lg-nv:focus-visible, .lg-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lg-pane { min-width: 0; }
.lg-painel > .lje-sec:first-child { border-top: 0; margin-top: 0; }
.lg-res { display: flex; align-items: center; gap: 8px; }
.lg-tog { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 2px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lg-tog .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-res .lg-acts { margin-top: 0; }
.lg-det { margin-top: 8px; }
@media (max-width: 720px) { .lg-wrap { grid-template-columns: 1fr; } .lg-nav { flex-direction: row; overflow-x: auto; position: static; } }

/* ---------- Editor CAD (27-editor-cad.js · app\vendor\cad\cad-cena.js) — tema laboratório, mesma linha de Publicar-Firebase\public\loja\ds\lab.css ---------- */
body[data-page="cad"] #page-cad { display: flex; flex-direction: column; padding: 12px clamp(10px, 2vw, 20px) 16px; }
.cad-lab {
  --cad-fundo: #0a1220; --cad-fundo-2: #101c30; --cad-linha: #2a4a70; --cad-tinta: #e8f4ff; --cad-mudo: #9db4cc;
  --cad-ciano: #3ee6ff; --cad-verde: #5cf2a0; --cad-sobre: #041018; --cad-fundo-3d: #0a1220; --cad-objeto: #6fb4d9; --cad-previa: #5cf2a0; --cad-face: #ffd24a; --cad-textura: #ff9f43;
  --cad-grade: #1d3350; --cad-grade-forte: #2f5a8a; --cad-eixo-x: #ff6b6b; --cad-eixo-y: #5cf2a0; --cad-eixo-z: #5aa9ff;
  --cad-rec-base: #5aa9ff; --cad-rec-botao: #ffd24a; --cad-rec-suporte: #ff9f43; /* peças da prévia de uma receita (Receitas CAD · 3): uma cor para cada */
  --cad-fonte-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-height: 520px; padding: 10px;
  background: var(--cad-fundo-2); color: var(--cad-tinta); border: 1px solid var(--cad-linha); border-radius: 12px;
}
.cad-lab :where(button, ul, li):focus-visible, .cad-lab canvas:focus-visible { outline: 2px solid var(--cad-verde); outline-offset: 2px; }
.cad-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.cad-cab h2 { margin: 0; font-size: 1.15rem; color: var(--cad-tinta); }
.cad-rot { font: 700 .72rem/1.2 var(--cad-fonte-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cad-ciano); }
.cad-sp { flex: 1; }
.cad-status { font-size: .82rem; color: var(--cad-mudo); min-height: 1.2em; }
.cad-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--cad-fundo); border: 1px solid var(--cad-linha); border-radius: 10px; }
.cad-sep { width: 1px; align-self: stretch; min-height: 24px; margin: 0 4px; background: var(--cad-linha); }
.cad-lab .iconbtn.cad-ferr { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--cad-fundo-2); color: var(--cad-tinta); border-color: var(--cad-linha); }
.cad-lab .iconbtn.cad-ferr:hover { background: var(--cad-linha); border-color: var(--cad-ciano); }
.cad-lab .iconbtn.cad-ferr[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.cad-corpo { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 10px; }
.cad-visor { position: relative; min-height: 380px; overflow: hidden; background: var(--cad-fundo-3d); border: 1px solid var(--cad-linha); border-radius: 10px; }
.cad-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.cad-msg { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; font-size: .9rem; color: var(--cad-mudo); }
.cad-msg[hidden] { display: none; }
.cad-msg.erro { color: var(--cad-tinta); }
.cad-legenda { position: absolute; left: 10px; bottom: 8px; z-index: 1; display: flex; gap: 10px; align-items: center; padding: 3px 8px; font: 700 .72rem/1.3 var(--cad-fonte-mono); color: var(--cad-mudo); background: var(--cad-fundo); border: 1px solid var(--cad-linha); border-radius: 6px; pointer-events: none; }
.cad-regua { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.cad-vistas { position: absolute; right: 10px; top: 26px; z-index: 2; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 40px); }
.cad-lab .cad-vista { min-height: 32px; min-width: 44px; padding: 4px 10px; font: 700 .76rem/1.2 var(--cad-fonte-mono); color: var(--cad-tinta); background: var(--cad-fundo-2); border: 1px solid var(--cad-linha); border-radius: 6px; cursor: pointer; }
.cad-lab .cad-vista:hover { background: var(--cad-linha); border-color: var(--cad-ciano); }
.cad-lab .cad-vista[aria-pressed="true"] { background: rgba(62, 230, 255, .16); border-color: var(--cad-ciano); color: var(--cad-ciano); }
.cad-lab .cad-vista:focus-visible { outline: 2px solid var(--cad-ciano); outline-offset: 2px; }
.cad-eixo-x { color: var(--cad-eixo-x); } .cad-eixo-y { color: var(--cad-eixo-y); } .cad-eixo-z { color: var(--cad-eixo-z); }
.cad-lateral { display: flex; flex-direction: column; min-height: 0; background: var(--cad-fundo); border: 1px solid var(--cad-linha); border-radius: 10px; }
.cad-lat-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px 6px; }
.cad-lat-cab h3 { margin: 0; font: 700 .78rem/1.2 var(--cad-fonte-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cad-ciano); }
.cad-cont { font-size: .78rem; color: var(--cad-mudo); }
.cad-lista { list-style: none; margin: 0; padding: 4px 8px 10px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.cad-vazio { padding: 10px 6px; font-size: .86rem; color: var(--cad-mudo); }
.cad-item { appearance: none; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 40px; padding: 8px 10px; font: inherit; text-align: left; color: var(--cad-tinta); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.cad-item:hover { background: var(--cad-fundo-2); border-color: var(--cad-linha); }
.cad-item[aria-pressed="true"] { background: rgba(62, 230, 255, .16); border-color: var(--cad-ciano); box-shadow: inset 3px 0 0 var(--cad-ciano); }
.cad-item-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cad-cores { border-top: 1px solid var(--cad-linha); }
.cad-cores-lista { list-style: none; margin: 0; padding: 4px 8px 10px; display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow: auto; }
.cad-cor-rot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 4px 10px; color: var(--cad-tinta); }
.cad-cor-in { width: 40px; height: 28px; padding: 0; border: 1px solid var(--cad-linha); border-radius: 6px; background: transparent; cursor: pointer; }
.cad-cor-in:focus-visible { outline: 2px solid var(--cad-ciano); outline-offset: 2px; }
.cad-item-tipo { font-size: .75rem; color: var(--cad-mudo); white-space: nowrap; }
.cad-lab .btn { background: var(--cad-fundo-2); color: var(--cad-tinta); border-color: var(--cad-linha); }
.cad-lab .btn:hover { background: var(--cad-linha); }
.cad-lab .btn[aria-pressed="true"], .cad-lab .iconbtn.cad-ferr[aria-pressed="true"] { background: rgba(62, 230, 255, .16); border-color: var(--cad-ciano); color: var(--cad-ciano); }
.cad-lateral { overflow: auto; }
.cad-lista { max-height: 170px; flex: 0 0 auto; }
.cad-transf { border-top: 1px solid var(--cad-linha); }
.cad-transf-corpo { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 12px; }
.cad-modos { display: flex; gap: 6px; }
.cad-modos .btn { flex: 1 1 0; min-height: 36px; }
.cad-transf-vazio { margin: 0; font-size: .86rem; color: var(--cad-mudo); }
.cad-transf-vazio[hidden], #cad-campos[hidden] { display: none; }
.cad-grupo { margin: 0; padding: 6px 8px 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border: 1px solid var(--cad-linha); border-radius: 8px; }
.cad-grupo legend { padding: 0 4px; font: 700 .72rem/1.2 var(--cad-fonte-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cad-mudo); }
.cad-campo { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; color: var(--cad-mudo); min-width: 0; }
.cad-campo input[type="text"] { width: 100%; min-width: 0; min-height: 34px; padding: 4px 6px; font: .85rem var(--cad-fonte-mono); color: var(--cad-tinta); background: var(--cad-fundo-2); border: 1px solid var(--cad-linha); border-radius: 6px; }
.cad-campo input[type="text"]:focus-visible, .cad-check input:focus-visible { outline: 2px solid var(--cad-verde); outline-offset: 1px; }
.cad-campo input:disabled { opacity: .5; }
/* Texto 3D: o seletor de fonte tem o mesmo jeito dos campos; o painel só aparece com um texto selecionado */
.cad-campo select { width: 100%; min-width: 0; min-height: 34px; padding: 4px 6px; font: .85rem var(--cad-fonte-mono); color: var(--cad-tinta); background: var(--cad-fundo-2); border: 1px solid var(--cad-linha); border-radius: 6px; }
.cad-campo select:focus-visible { outline: 2px solid var(--cad-verde); outline-offset: 1px; }
.cad-campo select:disabled { opacity: .5; }
.cad-texto[hidden], .cad-tex[hidden] { display: none; }
.cad-tex .cad-campo[hidden] { display: none; }
.cad-tex-chip { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: baseline; }
.cad-tex-chip.face { background: var(--cad-face); } .cad-tex-chip.textura { background: var(--cad-textura); }
.cad-tex-legenda { margin: 0; font-size: .78rem; color: var(--cad-mudo); }
.cad-texto-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 860px) { .cad-campo select, .cad-campo input[type="text"] { min-height: 44px; } }
.cad-encaixe { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cad-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: .86rem; color: var(--cad-tinta); cursor: pointer; }
.cad-transf-msg { margin: 0; min-height: 1.2em; font-size: .82rem; color: var(--cad-tinta); }
.cad-transf-msg:not(:empty) { padding: 6px 8px; border: 1px solid var(--cad-eixo-x); border-radius: 6px; background: rgba(255, 107, 107, .12); }
/* combinar formas (2c): lista com caixinha, painel Unir/Furar/Interseção, prévia e indicador de cálculo */
.cad-linha { display: flex; align-items: center; gap: 4px; }
.cad-linha .cad-item { flex: 1 1 auto; width: auto; min-width: 0; }
.cad-marca { flex: 0 0 auto; width: 20px; height: 20px; margin: 0 2px 0 4px; accent-color: var(--cad-ciano); cursor: pointer; }
.cad-marca:focus-visible { outline: 2px solid var(--cad-verde); outline-offset: 2px; }
.cad-item[data-marcado="true"] { border-color: var(--cad-linha); background: rgba(62, 230, 255, .07); }
.cad-item[aria-pressed="true"][data-marcado="true"] { background: rgba(62, 230, 255, .16); border-color: var(--cad-ciano); }
.cad-papel { flex: 0 0 auto; padding: 0 6px; font: 700 .68rem/1.6 var(--cad-fonte-mono); text-transform: uppercase; color: var(--cad-sobre); background: var(--cad-verde); border-radius: 4px; }
.cad-bool { border-top: 1px solid var(--cad-linha); }
.cad-bool-corpo { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 12px; }
.cad-bool-botoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cad-bool-botoes .btn { min-height: 38px; padding-left: 4px; padding-right: 4px; }
.cad-bool-acoes { display: flex; gap: 6px; }
.cad-bool-acoes .btn { flex: 1 1 0; min-height: 38px; }
#cad-bool-ok:not([aria-disabled="true"]) { background: var(--cad-verde); border-color: var(--cad-verde); color: var(--cad-sobre); font-weight: 700; }
.cad-lab .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.cad-bool-dica, .cad-bool-base { margin: 0; font-size: .82rem; color: var(--cad-mudo); }
.cad-bool-base { color: var(--cad-tinta); }
.cad-atalhos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cad-atalhos li { display: grid; grid-template-columns: minmax(7.5em, auto) 1fr; gap: 8px; align-items: baseline; font-size: .84rem; color: var(--cad-tinta); }
.cad-atalhos kbd { font: 700 .76rem/1.2 var(--cad-fonte-mono); padding: 2px 6px; color: var(--cad-ciano); background: var(--cad-fundo-2); border: 1px solid var(--cad-linha); border-radius: 5px; justify-self: start; white-space: nowrap; }
.cad-ajuda[hidden], .cad-exp[hidden], .cad-bool-base[hidden],.cad-bool-acoes[hidden], .cad-calc[hidden] { display: none; }
.cad-bool-msg { margin: 0; min-height: 1.2em; font-size: .82rem; color: var(--cad-tinta); }
.cad-bool-msg:not(:empty) { padding: 6px 8px; border: 1px solid var(--cad-eixo-x); border-radius: 6px; background: rgba(255, 107, 107, .12); }
.cad-proj .cad-bool-botoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Receitas (Receitas CAD · 2): painel lateral com lista, passos e parâmetros */
.cad-rec { display: flex; flex-direction: column; min-height: 0; overflow: auto; background: var(--cad-fundo); border: 1px solid var(--cad-linha); border-radius: 10px; }
.cad-rec[hidden] { display: none; }
.cad-cab .btn.small { align-self: center; min-height: 32px; padding: 4px 12px; }
.cad-cab .btn.small:focus-visible, .cad-rec .btn:focus-visible, .cad-rec .cad-item:focus-visible { outline: 2px solid var(--cad-ciano); outline-offset: 2px; }
.cad-rec .cad-rec-lista { max-height: 220px; padding: 0; }
.cad-rec-voltar { align-self: flex-start; }
.cad-rec-nome { margin: 0; font-size: 1rem; color: var(--cad-tinta); }
.cad-rec-sub { margin: 4px 0 0; font: 700 .72rem/1.2 var(--cad-fonte-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cad-mudo); }
.cad-rec-passos { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 4px; font-size: .86rem; color: var(--cad-tinta); }
.cad-rec-passos li::marker { color: var(--cad-ciano); font-weight: 700; }
.cad-rec-campos { display: flex; flex-direction: column; gap: 8px; }
.cad-rec .cad-campo input[type="number"] { width: 100%; min-width: 0; min-height: 34px; padding: 4px 6px; font: .85rem var(--cad-fonte-mono); color: var(--cad-tinta); background: var(--cad-fundo-2); border: 1px solid var(--cad-linha); border-radius: 6px; }
.cad-rec .cad-campo input[type="number"]:focus-visible, .cad-rec .cad-campo select:focus-visible { outline: 2px solid var(--cad-verde); outline-offset: 1px; }
.cad-rec-lim { font-size: .72rem; color: var(--cad-mudo); }
.cad-rec-modelo { display: flex; flex-direction: column; gap: 8px; }
.cad-rec-modelo .cad-bool-acoes { margin: 0; }
.cad-rec-modelo .cad-bool-acoes { flex-wrap: wrap; }
.cad-rec-modelo .cad-bool-acoes .btn { flex: 1 1 auto; min-width: 0; }
#cad-rec-or { display: grid; grid-template-columns: 1fr 1fr; }
#cad-rec-or[hidden] { display: none; }
#cad-rec-or .btn { white-space: normal; }
#cad-rec-or #cad-rec-or-ok { grid-column: 1 / -1; }
.cad-rec-passo-estado { margin-left: 6px; font-size: .78rem; color: var(--cad-mudo); }
.cad-rec-passo-estado[data-estado="feito"] { color: var(--cad-verde); }
.cad-rec-passo-estado[data-estado="erro"] { color: var(--cad-eixo-x); }
.cad-rec-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: .82rem; color: var(--cad-tinta); }
.cad-rec-leg[hidden] { display: none; }
.cad-rec-leg li { display: inline-flex; align-items: center; gap: 6px; }
.cad-rec-cor { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--cad-linha); border-radius: 3px; background: var(--cad-objeto); }
.cad-rec-cor-base { background: var(--cad-rec-base); }
.cad-rec-cor-botao { background: var(--cad-rec-botao); }
.cad-rec-cor-suporte { background: var(--cad-rec-suporte); }
.cad-rec-cor-plano { background: var(--cad-textura); }
.cad-lab .cad-rec-ver { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.cad-lab .cad-rec-ver:hover { border-color: var(--cad-linha); }
.cad-lab .cad-rec-ver[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.cad-lab .cad-rec-ver:focus-visible { outline: 2px solid var(--cad-ciano); outline-offset: 2px; }
#cad-rec-plano[hidden] { display: none; }
@media (max-width: 860px) { .cad-rec .cad-campo input[type="number"] { min-height: 44px; } .cad-cab .btn.small { min-height: 44px; } }
.cad-calc { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: .86rem; color: var(--cad-tinta); background: var(--cad-fundo); border: 1px solid var(--cad-ciano); border-radius: 999px; pointer-events: none; }
.cad-giro { width: 14px; height: 14px; border: 2px solid var(--cad-linha); border-top-color: var(--cad-ciano); border-radius: 50%; animation: cad-giro .8s linear infinite; }
@keyframes cad-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cad-giro { animation-duration: 3s; } }
@media (max-width: 860px) {
  .cad-corpo { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .cad-visor { min-height: 55vh; }
  .cad-lateral { max-height: none; }
  .cad-lab .iconbtn.cad-ferr { width: 44px; height: 44px; }
  .cad-lab .cad-vista { min-height: 44px; min-width: 44px; }
}
/* visor em 4 (etapa 3b): grade 2x2 de divs por cima do canvas único; o botão só aparece em telas largas */
.cad-lab .cad-visor4-btn { display: none; position: absolute; right: 10px; bottom: 8px; z-index: 4; min-height: 32px; }
@media (min-width: 1000px) { .cad-lab .cad-visor4-btn { display: inline-flex; align-items: center; } }
.cad-quadros { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; }
.cad-quadros[data-ampliado] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.cad-quadros[data-ampliado] .cad-quad[data-ampliado="nao"] { display: none; }
.cad-quad { position: relative; min-width: 0; min-height: 0; touch-action: none; }
.cad-lab .cad-quad:focus-visible { outline: 2px solid var(--cad-verde); outline-offset: -2px; }
.cad-quad-rot { position: absolute; left: 24px; top: 22px; z-index: 1; padding: 2px 8px; font: 700 .72rem/1.3 var(--cad-fonte-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cad-ciano); background: var(--cad-fundo); border: 1px solid var(--cad-linha); border-radius: 6px; pointer-events: none; }
.cad-lab .cad-quad-btn { position: absolute; right: 8px; top: 22px; z-index: 1; min-height: 32px; padding: 4px 10px; font: 700 .72rem/1.2 var(--cad-fonte-mono); color: var(--cad-tinta); background: var(--cad-fundo-2); border: 1px solid var(--cad-linha); border-radius: 6px; cursor: pointer; }
.cad-lab .cad-quad-btn:hover { background: var(--cad-linha); border-color: var(--cad-ciano); }
.cad-lab .cad-quad-btn[aria-pressed="true"] { background: rgba(62, 230, 255, .16); border-color: var(--cad-ciano); color: var(--cad-ciano); }
.cad-visor.cad-v4 { min-height: 520px; }
.cad-visor.cad-v4 .cad-vistas, .cad-visor.cad-v4 .cad-legenda { display: none; }
.cad-aviso { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; max-width: calc(100% - 40px); padding: 8px 14px; font-size: .86rem; color: var(--cad-tinta); background: var(--cad-fundo); border: 1px solid var(--cad-ciano); border-radius: 10px; }
.cad-aviso[hidden] { display: none; }
/* Editor CAD · painel lateral mais fácil de entender: título legível + uma linha explicando para que serve cada bloco */
.cad-lat-cab h3 { font-size: .92rem; text-transform: none; letter-spacing: 0; }
.cad-lat-sub { margin: -2px 12px 6px; font-size: .8rem; line-height: 1.35; color: var(--cad-mudo); }
.cad-lab .cad-bool-botoes .btn { white-space: nowrap; padding-left: 2px; padding-right: 2px; font-size: .82rem; }
.cad-bool-msg:empty { display: none; }
.cad-cfg[hidden], .cad-simp[hidden] { display: none; }
.cad-cfg-lista { display: flex; flex-direction: column; gap: 12px; }
.cad-cfg-item { display: flex; flex-direction: column; gap: 4px; }
.cad-simp { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--cad-linha); border-radius: 8px; }
.cad-imp .cad-bool-botoes { grid-template-columns: minmax(0, 1fr); }
.cad-lab .cad-imp .cad-bool-botoes .btn { padding-left: 12px; padding-right: 12px; font-size: .9rem; }
/* diálogo "Preparar imagem" (Importar imagem no CAD) */
.cad-imp #cad-img-btn { margin-top: 6px; }
.cad-rast { width: min(96vw, 760px); max-height: 94vh; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--fg); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.cad-rast::backdrop { background: rgba(20, 14, 40, .55); }
.cad-rast-box { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; max-height: 94vh; overflow: auto; }
.cad-rast-box h3 { margin: 0; font-size: 1.05rem; }
.cad-rast-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.cad-rast-barra [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.cad-rast-zoom { display: flex; gap: 6px; align-items: center; font-size: .85rem; }
.cad-rast-tela { height: min(40vh, 340px); overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.cad-rast-tela canvas { display: block; background: var(--surface); image-rendering: pixelated; }
.cad-rast-ctl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 14px; align-items: end; }
.cad-rast-chk { display: flex; gap: 6px; align-items: center; font-size: .9rem; }
.cad-rast-aj { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 10px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cad-rast-aj legend { font-size: .85rem; font-weight: 600; padding: 0 4px; }
.cad-rast-ajg { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 14px; width: 100%; }
.cad-rast-ajl { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 4.6em; gap: 8px; align-items: center; font-size: .8rem; color: var(--muted); }
.cad-rast-ajl input[type="range"] { width: 100%; min-width: 0; }
.cad-rast-ajn { width: 100%; min-width: 0; min-height: 34px; padding: 2px 6px; font: .85rem monospace; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.cad-rast-ajn:focus-visible, .cad-rast-ajl input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 860px) { .cad-rast-ajn { min-height: 44px; } }
#cad-rast-cores .cad-campo { width: 100%; }
.cad-rast-cores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 14px; width: 100%; }
.cad-rast-cores:empty { display: none; }
.cad-rast-cor { display: flex; gap: 10px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.cad-rast-cor small { color: var(--muted); }
.cad-rast-amostra { display: inline-block; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); flex: none; }
.cad-rast-corh { display: flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--muted); }
.cad-rast-corh input { width: 4.5em; min-height: 34px; padding: 2px 6px; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.cad-rast-cor input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 860px) { .cad-rast-corh input { min-height: 44px; } }
.cad-rast[hidden] { display: none; }
@media (min-width: 861px) { .cad-corpo { grid-template-columns: minmax(0, 1fr) 290px; } }

/* menu radial de giro sobre a prévia (receitas CAD): setas em volta do centro do modelo */
.cad-radial { position: absolute; width: 0; height: 0; z-index: 5; pointer-events: none; }
.cad-radial[hidden] { display: none; }
.cad-radial-seta { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; left: calc(var(--gx) * 84px); top: calc(var(--gy) * 84px); pointer-events: auto; border-radius: 50%; border: 2px solid var(--ink, #222); background: var(--paper, #fff); color: var(--ink, #222); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cad-radial-seta:hover, .cad-radial-seta:focus-visible { background: var(--accent, #b9a2f5); }

/* receitas: o painel abre numa coluna à ESQUERDA do visor (a lista de objetos continua à direita) */
.cad-rec { display: flex; flex-direction: column; min-height: 0; overflow: auto; background: var(--cad-fundo); border: 1px solid var(--cad-linha); border-radius: 10px; }
.cad-rec[hidden] { display: none; }
.cad-corpo.cad-corpo-rec { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) 260px; }
@media (min-width: 861px) { .cad-corpo.cad-corpo-rec { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) 290px; } }
@media (max-width: 860px) { .cad-corpo.cad-corpo-rec { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Loja interna: padrão de páginas (docs\ARQUITETURA.md, "Loja interna") ----------
   Coluna central de até --lj-max; índice lateral fixo (.lj-ix) + cartões em colunas (.lj-pg > .lj-cols ou .lj-cfg).
   Listas de cartões (.ljprods: Produtos, Receitas, Biblioteca, Artes) e a ficha do usuário também usam colunas. Abaixo de 1000 px: 1 coluna, sem índice. */
#page-loja { --lj-max: 1500px; }
#page-loja > * { max-width: var(--lj-max); margin-inline: auto; }
.lj-pg { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; }
.lj-ix { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.lj-ix a { padding: 6px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; }
.lj-ix a:hover { background: var(--hover); color: var(--fg); }
.lj-ix a.on { background: var(--hover); color: var(--accent); font-weight: 600; }
.lj-ix a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lj-cfg #lj-sec-modo, .lj-cfg #lj-custo-slot:not(:empty) { grid-column: 1 / -1; }
.lj-cfg .cfg-sec { scroll-margin-top: 8px; }
.ljprods { grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); }
.lj-usr-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.lj-usr-ficha > :not(section) { grid-column: 1 / -1; }
.lj-usr-ficha > section[aria-label="Histórico de pedidos"] { grid-column: 1 / -1; }
@media (max-width: 1000px) {
  .lj-pg { grid-template-columns: minmax(0, 1fr); }
  .lj-ix { display: none; }
  .lj-cfg, .lj-usr-ficha { grid-template-columns: minmax(0, 1fr); }
  .ljprods { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Design da loja no padrão da Loja interna (docs\ARQUITETURA.md, "Loja interna") ----------
   Painel de valores com índice e grupos em 2 colunas. A prévia segue em largura total. */
#page-dsloja .dsj-ix { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0; margin-bottom: 6px; background: var(--bg); }
#page-dsloja .dsj-ixb { padding: 3px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font: inherit; font-size: .85rem; cursor: pointer; }
#page-dsloja .dsj-ixb:hover { background: var(--hover); color: var(--fg); }
#page-dsloja .dsj-ixb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#page-dsloja .dsj-ctl .dsj-blk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: start; scroll-margin-top: 44px; }
#page-dsloja .dsj-ctl .dsj-blk > :not(details.dsj-g) { grid-column: 1 / -1; }
#page-dsloja .dsj-ctl .dsj-blk > details.dsj-g { margin-bottom: 0; }
@media (max-width: 1400px) { #page-dsloja .dsj-ctl .dsj-blk { grid-template-columns: minmax(0, 1fr); } }

/* Central de Comunicação > editor > IA (41-central-ia-editor.js, cc-e6 · 31) */
#ccie .ccie-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#ccie .ccie-lado { border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-width: 0; }
#ccie .ccie-previa { width: 100%; height: 280px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
#ccie .ccie-itens { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
#ccie .ccie-txt { overflow-wrap: anywhere; }
#ccie #ccie-res:focus-visible, #ccie #ccie-msg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { #ccie .ccie-cols { grid-template-columns: minmax(0, 1fr); } }
/* Estilos de IA (Biblioteca > Estilos de IA, 23c-ia-estilos.js): a arte do card aparece inteira; editor com a arte ao lado do botão de envio */
#iaest-lista .ljrow .th img { object-fit: contain; }
.iaest-arte { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.iaest-arte__img { flex: 0 0 auto; width: 128px; height: 128px; border-radius: 12px; border: 1px solid var(--line); background: var(--hover); display: flex; align-items: center; justify-content: center; font-size: 2rem; overflow: hidden; }
.iaest-arte__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
#dlg-iaest textarea { width: 100%; resize: vertical; font: inherit; }
@media (max-width: 560px) { .iaest-arte { flex-direction: column; align-items: flex-start; } }
/* Alfas de textura (Biblioteca, 04/11): um ladrilho e o 3 × 3 para conferir a emenda */
.alf-previa { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.alf-previa__um img { width: 96px; height: 96px; border-radius: 8px; image-rendering: auto; }
.alf-previa__um { display: grid; place-items: center; width: 96px; height: 96px; border: 1px dashed var(--line, #ccc); border-radius: 8px; font-size: 32px; }
.alf-previa__tres img { width: 192px; height: 192px; border-radius: 8px; }