/* =====================================================================
   Layouts do CRM (Conta → Aparência). Cada login escolhe:
     - "atual": o visual de sempre (nada daqui se aplica);
     - "vidro" (html.ui-vidro): foto de fundo, cartões de vidro fosco, menu em pílula no topo e barra de bolinhas;
     - "quente" (html.ui-quente): escuro marrom com laranja, mesmo menu no topo.
   html.ui-top liga o menu no topo (computador). html.ui-calm tira desfoque e animações (aparelhos mais fracos).
   O mesmo arquivo serve Huven e Zioon (a Zioon recebe "marca-zioon").
   ===================================================================== */

/* ---------- 1. Cores ----------
   Os blocos de cores do vidro também valem para ".marca-zioon": o tema-novo.css da Zioon define o fundo azul
   com uma regra mais forte (html.tema-novo.marca-zioon) e deixava o vidro sólido em várias telas. */
html.ui-vidro, html.ui-vidro.marca-zioon {
  --ui-glass: rgba(22, 22, 26, .46);
  --ui-glass-2: rgba(255, 255, 255, .07);
  --ui-glass-line: rgba(255, 255, 255, .14);
  --ui-blur: 22px;
  --ui-pill: rgba(18, 18, 22, .55);
  --ui-pill-active: #F4F1EA;
  --ui-pill-active-text: #111214;
  --ui-tint: rgba(8, 8, 10, .28);
  --bg: #16161A; /* o fundo da página fica transparente (regra da seção 2); --bg segue valendo para texto invertido */
  --surface: rgba(24, 24, 28, .52);
  --surface2: rgba(255, 255, 255, .07);
  --surface3: rgba(255, 255, 255, .11);
  --border: rgba(255, 255, 255, .12);
  --border2: rgba(255, 255, 255, .18);
  --text: #FFFFFF;
  --fg: #FFFFFF;
  --muted: rgba(255, 255, 255, .62);
  --muted2: rgba(255, 255, 255, .8);
  --col-bg: rgba(255, 255, 255, .06);
  --accent: #F2C14E;
  --accent-glow: rgba(242, 193, 78, .2);
  --accent-glow2: rgba(242, 193, 78, .1);
  --sidebar-bg: rgba(14, 14, 18, .5);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  --r2: 18px;
}
html.ui-vidro[data-theme="light"], html.ui-vidro.marca-zioon[data-theme="light"] {
  --ui-glass: rgba(255, 255, 255, .5);
  --ui-glass-2: rgba(255, 255, 255, .42);
  --ui-glass-line: rgba(255, 255, 255, .7);
  --ui-pill: rgba(255, 255, 255, .55);
  --ui-pill-active: #17171A;
  --ui-pill-active-text: #FFFFFF;
  --ui-tint: rgba(255, 250, 240, .12);
  --bg: #F6F2EA;
  --surface: rgba(255, 255, 255, .55);
  --surface2: rgba(255, 255, 255, .5);
  --surface3: rgba(255, 255, 255, .7);
  --border: rgba(255, 255, 255, .65);
  --border2: rgba(30, 28, 24, .14);
  --text: #17171A;
  --fg: #17171A;
  --muted: rgba(23, 23, 26, .58);
  --muted2: rgba(23, 23, 26, .78);
  --col-bg: rgba(255, 255, 255, .35);
  --accent: #17171A;
  --accent-glow: rgba(242, 193, 78, .3);
  --accent-glow2: rgba(242, 193, 78, .16);
  --card-shadow: 0 10px 30px rgba(60, 45, 20, .12);
}
html.ui-vidro.marca-zioon { --accent: #8EA6FF; --accent-glow: rgba(142, 166, 255, .2); --accent-glow2: rgba(142, 166, 255, .1); }
html.ui-vidro.marca-zioon[data-theme="light"] { --accent: #1F4BD8; --accent-glow: rgba(31, 75, 216, .16); --accent-glow2: rgba(31, 75, 216, .08); }

html.ui-quente {
  --ui-glass: rgba(38, 28, 22, .78);
  --ui-glass-2: rgba(255, 220, 190, .05);
  --ui-glass-line: rgba(255, 220, 190, .09);
  --ui-blur: 14px;
  --ui-pill: rgba(40, 30, 24, .9);
  --ui-pill-active: #3A2A21;
  --ui-pill-active-text: #F7EDE4;
  --ui-tint: transparent;
  --bg: #15100D;
  --surface: #211813;
  --surface2: #2A1F18;
  --surface3: #35281F;
  --border: rgba(255, 220, 190, .08);
  --border2: rgba(255, 220, 190, .14);
  --border3: rgba(240, 138, 93, .45);
  --text: #F7EDE4;
  --fg: #F7EDE4;
  --muted: #A8968A;
  --muted2: #CDBBAE;
  --col-bg: #1B1410;
  --accent: #F08A5D;
  --accent2: #F7B591;
  --accent-glow: rgba(240, 138, 93, .18);
  --accent-glow2: rgba(240, 138, 93, .09);
  --gold: #F08A5D;
  --btn-bg: #F08A5D;
  --btn-text: #1B120D;
  --sidebar-bg: #120D0A;
  --card-shadow: 0 1px 0 rgba(255, 220, 190, .04) inset, 0 12px 30px rgba(0, 0, 0, .25);
  --r2: 16px;
}
html.ui-quente[data-theme="light"] {
  --ui-glass: rgba(255, 249, 243, .85);
  --ui-pill: rgba(255, 248, 241, .95);
  --ui-pill-active: #2A1F18;
  --ui-pill-active-text: #FFF6EE;
  --bg: #F6EEE6;
  --surface: #FFFBF7;
  --surface2: #F8EFE6;
  --surface3: #F0E2D5;
  --border: #EBDCCD;
  --border2: #E0CDBA;
  --text: #2A1F18;
  --fg: #2A1F18;
  --muted: #8A7666;
  --muted2: #5E4D41;
  --col-bg: #F3E8DD;
  --accent: #E0703F;
  --btn-bg: #E0703F;
  --btn-text: #FFFFFF;
}
html.ui-quente.marca-zioon { --accent: #F08A5D; }

/* ---------- 2. Fundo ---------- */
.ui-bg { display: none; }
html.ui-vidro .ui-bg, html.ui-quente .ui-bg { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
html.ui-vidro .ui-bg-img { position: absolute; inset: -30px; background: #2b2a2e center / cover no-repeat; background-image: var(--ui-bg-img); transform: scale(1.03); }
html.ui-vidro .ui-bg::after { content: ""; position: absolute; inset: 0; background: var(--ui-tint); }
html.ui-quente .ui-bg { background:
  radial-gradient(900px 600px at 85% -10%, rgba(240, 138, 93, .16), transparent 60%),
  radial-gradient(800px 600px at -10% 110%, rgba(180, 90, 50, .12), transparent 60%), var(--bg); }
html.ui-quente[data-theme="light"] .ui-bg { background:
  radial-gradient(900px 600px at 85% -10%, rgba(240, 138, 93, .14), transparent 60%), var(--bg); }
html.ui-vidro body, html.ui-quente body, html.ui-vidro .layout, html.ui-quente .layout,
html.ui-vidro .main, html.ui-quente .main { background: transparent !important; }

/* ---------- 3. Vidro nas superfícies ---------- */
html.ui-vidro :is(.metric-card, .table-card, .integ-card, .help-card, .cfgc-card, .kanban-col, .modal-box, .paleta-card, .topbar, .chart-card, .huv-card, .at-card, .camp-card, .auto-card, .client-card, .cal-grid, .cal-list-ev, .chat-list, .chat-main, .chat-panel, .stat-card, .analise-card),
html.ui-vidro #huven-modal > div, html.ui-vidro .client-switch-pop, html.ui-vidro .config-panel, html.ui-vidro #campaign-editor {
  background: var(--ui-glass) !important;
  border-color: var(--ui-glass-line) !important;
  -webkit-backdrop-filter: blur(var(--ui-blur)) saturate(140%);
  backdrop-filter: blur(var(--ui-blur)) saturate(140%);
  box-shadow: var(--card-shadow);
}
html.ui-vidro .kanban-card { background: var(--ui-glass-2) !important; border-color: var(--ui-glass-line) !important; }
html.ui-vidro :is(.field-input, .modal-input, .modal-select, .login-input, input[type="date"], select, textarea):not(.ui-keep) { background-color: var(--ui-glass-2) !important; border-color: var(--ui-glass-line) !important; color: var(--text); }
html.ui-vidro .modal-overlay, html.ui-vidro #huven-modal { background: rgba(0, 0, 0, .28) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.ui-quente :is(.metric-card, .table-card, .integ-card, .help-card, .cfgc-card, .kanban-col, .modal-box, .paleta-card, .cal-grid) { border-radius: var(--r2); box-shadow: var(--card-shadow); }

/* ---------- 4. Menu no topo (computador) ---------- */
.ui-topnav, .ui-dock { display: none; }
@media (min-width: 769px) {
  html.ui-top .sidebar { display: none !important; }
  html.ui-top .main { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; padding: 78px 0 0 84px; box-sizing: border-box; }
  html.ui-top .ui-topnav { display: flex; }
  html.ui-top .ui-dock { display: flex; }
  html.ui-top .topbar { margin: 0 24px 0 0; border-radius: 18px; border: 1px solid var(--border); position: relative; top: 0; }
}
.ui-topnav { position: fixed; top: 14px; left: 18px; right: 18px; z-index: 300; align-items: center; gap: 12px; height: 52px; }
.ui-chip { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 8px; border-radius: 999px; background: var(--ui-pill); border: 1px solid var(--ui-glass-line, var(--border)); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); color: var(--text); box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.ui-brand img { height: 26px; width: auto; border-radius: 6px; }
.ui-brand b { font-size: 15px; letter-spacing: -.01em; }
.ui-pills { position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; margin: 0 auto; border-radius: 999px; background: var(--ui-pill); border: 1px solid var(--ui-glass-line, var(--border)); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 6px 20px rgba(0, 0, 0, .15); max-width: calc(100vw - 560px); overflow: visible; }
.ui-pill { position: relative; z-index: 1; height: 36px; padding: 0 15px; border: 0; background: none; border-radius: 999px; color: var(--muted2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; transition: color .25s ease; }
.ui-pill:hover { color: var(--text); }
.ui-pill.on { color: var(--ui-pill-active-text); }
.ui-pill svg { width: 13px; height: 13px; }
.ui-ind { position: absolute; z-index: 0; top: 4px; height: 36px; left: 0; width: 0; border-radius: 999px; background: var(--ui-pill-active); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); transition: left .5s cubic-bezier(.3, 1.35, .45, 1), width .5s cubic-bezier(.3, 1.35, .45, 1), opacity .2s; opacity: 0; }
.ui-right { display: flex; align-items: center; gap: 8px; }
.ui-round { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ui-glass-line, var(--border)); background: var(--ui-pill); color: var(--text); cursor: pointer; position: relative; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 6px 20px rgba(0, 0, 0, .15); transition: transform .2s ease, background .2s; padding: 0; font: inherit; }
.ui-round:hover { transform: translateY(-1px); }
.ui-round svg { width: 17px; height: 17px; }
.ui-badge { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #EF4444; color: #fff; font-size: 10px; font-weight: 700; display: none; align-items: center; justify-content: center; box-sizing: border-box; }
.ui-avatar { font-weight: 700; font-size: 13px; background: var(--accent); color: var(--btn-text, #111); border: 0; }
.ui-topnav .client-switch { width: auto; max-width: 230px; height: 44px; border-radius: 999px; padding: 0 12px 0 6px; background: var(--ui-pill) !important; border: 1px solid var(--ui-glass-line, var(--border)) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--text); }
.ui-topnav .client-switch-label { display: none; }
.ui-topnav .client-switch-name { color: var(--text); font-size: 13px; }
.ui-topnav .client-switch-avatar { width: 32px; height: 32px; border-radius: 50%; }

/* Menus que abrem do topo */
.ui-menu { position: fixed; z-index: 10060; min-width: 230px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 8px; border-radius: 18px; background: var(--ui-glass, var(--surface)); border: 1px solid var(--ui-glass-line, var(--border)); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); color: var(--text); animation: ui-pop .22s cubic-bezier(.2, .9, .3, 1.2); transform-origin: top center; }
html.ui-quente .ui-menu { background: var(--surface2); }
.ui-menu-group { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.ui-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; border-radius: 10px; cursor: pointer; }
.ui-menu-item:hover { background: var(--surface3); }
.ui-menu-item.on { background: var(--ui-pill-active); color: var(--ui-pill-active-text); }
.ui-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.ui-menu-cols { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 2px 10px; }
@keyframes ui-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }

/* Barra lateral de bolinhas */
.ui-dock { --ui-dot-on: #F2C14E; position: fixed; z-index: 290; left: 16px; top: calc(50% + 34px); transform: translateY(-50%); flex-direction: column; gap: 6px; width: 60px; max-height: calc(100vh - 100px); box-sizing: border-box; overflow: hidden auto; scrollbar-width: none; padding: 8px; border-radius: 30px; background: var(--ui-pill); border: 1px solid var(--ui-glass-line, var(--border)); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); transition: width .36s cubic-bezier(.3, 1.08, .4, 1) .05s; }
.ui-dock::-webkit-scrollbar { display: none; }
.ui-dock:hover, .ui-dock:has(.ui-dot:focus-visible) { width: 232px; }
.marca-zioon .ui-dock { --ui-dot-on: #8EA6FF; }
html.ui-quente .ui-dock { --ui-dot-on: #F08A5D; }
.ui-dot { flex: 0 0 42px; display: flex; align-items: center; width: 100%; height: 42px; min-width: 42px; padding: 0; border: 0; border-radius: 21px; background: transparent; color: var(--muted2); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: background .22s ease, color .22s ease; }
.ui-dot-ico { flex: 0 0 34px; width: 34px; height: 34px; margin: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .22s ease, color .22s ease; }
.ui-dot svg { width: 18px; height: 18px; }
.ui-dot-txt { margin-left: 8px; padding-right: 16px; font-size: 13.5px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateX(-8px); transition: opacity .16s ease, transform .16s ease; }
.ui-dock:hover .ui-dot-txt, .ui-dock:has(.ui-dot:focus-visible) .ui-dot-txt { opacity: 1; transform: none; transition: opacity .24s ease .12s, transform .28s cubic-bezier(.2, .8, .2, 1) .1s; }
.ui-dot:hover { background: var(--surface3); color: var(--text); }
.ui-dot.on { background: var(--ui-pill-active); color: var(--ui-pill-active-text); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.ui-dot.on .ui-dot-ico { background: var(--ui-dot-on); color: #111214; }
.ui-dock-sep { height: 1px; margin: 2px 8px; background: var(--border2); }

/* ---------- 5. Telas: respiro e cantos no layout novo ---------- */
@media (min-width: 769px) {
  html.ui-top .content, html.ui-top .crm-view, html.ui-top .huv-view { padding-right: 24px; }
  html.ui-top #conta-view { padding: 10px 24px 28px 0 !important; }
}
html.ui-vidro .huv-page-title, html.ui-quente .huv-page-title, html.ui-vidro .page-title { letter-spacing: -.02em; }
html.ui-quente .btn-add-lead, html.ui-quente .btn-save, html.ui-quente .integ-btn.primary, html.ui-quente .modal-btn-save { background: var(--accent) !important; color: var(--btn-text) !important; border-color: transparent !important; border-radius: 999px; }
html.ui-vidro .btn-add-lead, html.ui-vidro .btn-save, html.ui-vidro .integ-btn.primary, html.ui-vidro .modal-btn-save { border-radius: 999px; }
html.ui-vidro .integ-btn, html.ui-vidro .huv-btn, html.ui-vidro .chat-pill, html.ui-quente .integ-btn, html.ui-quente .huv-btn { border-radius: 999px; }

/* ---------- 6. Animações ---------- */
@keyframes ui-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ui-in-soft { from { opacity: 0; } to { opacity: 1; } }
html.ui-anim .ui-enter { animation: ui-in-soft .35s ease both; }
html.ui-anim .ui-enter :is(.table-card, .integ-card, .help-card, .cfgc-card, .huv-card, .cal-list-day, .at-card, .chart-card) { animation: ui-in .55s cubic-bezier(.2, .8, .2, 1) both; }
html.ui-anim .ui-enter :is(.integ-card, .help-card, .huv-card, .at-card):nth-child(2) { animation-delay: .04s; }
html.ui-anim .ui-enter :is(.integ-card, .help-card, .huv-card, .at-card):nth-child(3) { animation-delay: .08s; }
html.ui-anim .ui-enter :is(.integ-card, .help-card, .huv-card, .at-card):nth-child(4) { animation-delay: .12s; }
html.ui-anim .ui-enter :is(.integ-card, .help-card, .huv-card, .at-card):nth-child(5) { animation-delay: .16s; }
html.ui-anim .ui-enter :is(.integ-card, .help-card, .huv-card, .at-card):nth-child(6) { animation-delay: .2s; }
html.ui-anim .ui-enter :is(.integ-card, .help-card, .huv-card, .at-card):nth-child(n+7) { animation-delay: .24s; }
html.ui-anim :is(.metric-card, .integ-card, .help-card, .huv-card, .at-card, .cfgc-card) { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
html.ui-anim :is(.metric-card, .help-card, .huv-card, .at-card):hover { transform: translateY(-3px); }
html.ui-anim .kanban-card { transition: transform .2s ease, box-shadow .2s; }
html.ui-anim .kanban-card:hover { transform: translateY(-2px); }
html.ui-calm :not(.login-overlay *), html.ui-calm :not(.login-overlay *)::before, html.ui-calm :not(.login-overlay *)::after { animation: none !important; transition: none !important; } /* a tela de entrar continua animada */
html.ui-calm { --ui-blur: 0px; }
html.ui-calm.ui-vidro :is(.metric-card, .table-card, .integ-card, .help-card, .kanban-col, .modal-box, .topbar, .cal-grid) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.ui-calm.ui-vidro { --ui-glass: rgba(24, 24, 28, .86); }
html.ui-calm.ui-vidro[data-theme="light"] { --ui-glass: rgba(255, 255, 255, .9); }
@media (prefers-reduced-motion: reduce) { html.ui-anim * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- 7. Login animado ---------- */
/* A tela de entrar é sempre a animada (com a foto e o cartão de vidro), qualquer que seja o layout do cliente.
   O Escuro quente mantém a versão dele (também animada). No layout Atual as cores do vidro vêm definidas aqui. */
html:not(.ui-vidro):not(.ui-quente) .login-overlay {
  --ui-glass: rgba(22, 22, 26, .46); --ui-glass-2: rgba(255, 255, 255, .07); --ui-glass-line: rgba(255, 255, 255, .14);
  --ui-pill-active: #F4F1EA; --ui-pill-active-text: #111214; --accent-glow: rgba(242, 193, 78, .2);
}
html:not(.ui-vidro):not(.ui-quente)[data-theme="light"] .login-overlay {
  --ui-glass: rgba(255, 255, 255, .62); --ui-glass-2: rgba(255, 255, 255, .55); --ui-glass-line: rgba(255, 255, 255, .7);
  --ui-pill-active: #17171A; --ui-pill-active-text: #FFFFFF;
}
html:not(.ui-vidro):not(.ui-quente) .login-overlay .login-input { background-color: var(--ui-glass-2) !important; border-color: var(--ui-glass-line) !important; }
html:not(.ui-quente) .login-overlay { z-index: 10000 !important; background: rgba(8, 8, 10, .18) var(--ui-bg-img) center / cover no-repeat !important; background-blend-mode: multiply; }
html:not(.ui-quente)[data-theme="light"] .login-overlay { background-color: rgba(255, 250, 240, .1) !important; }
html.ui-quente .login-overlay { z-index: 10000 !important; background: radial-gradient(900px 600px at 80% -10%, rgba(240, 138, 93, .2), transparent 60%), var(--bg) !important; }
html:has(#login-overlay[style*="flex"]) :is(.ui-topnav, .ui-dock) { display: none !important; }
html:not(.ui-quente) .login-box, html.ui-quente .login-box {
  position: relative; overflow: hidden; border-radius: 26px !important;
  background: var(--ui-glass) !important; border: 1px solid var(--ui-glass-line) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
  animation: ui-login-in .9s cubic-bezier(.2, .9, .2, 1) both;
}
/* Brilho que corre pela borda do cartão (só a borda: o meio é recortado pela máscara). */
@property --ui-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html:not(.ui-quente) .login-box::before, html.ui-quente .login-box::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ui-ang), transparent 0 72%, rgba(255, 255, 255, .85) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ui-ang 5s linear infinite;
}
html:not(.ui-quente)[data-theme="light"] .login-box::before { background: conic-gradient(from var(--ui-ang), transparent 0 72%, rgba(242, 193, 78, .95) 82%, transparent 92%); }
html.ui-quente .login-box::before { background: conic-gradient(from var(--ui-ang), transparent 0 72%, rgba(240, 138, 93, .95) 82%, transparent 92%); }
@keyframes ui-ang { to { --ui-ang: 360deg; } }
html:not(.ui-quente) .login-box > *, html.ui-quente .login-box > * { animation: ui-in .7s cubic-bezier(.2, .8, .2, 1) both; }
html:not(.ui-quente) .login-box > :nth-child(2), html.ui-quente .login-box > :nth-child(2) { animation-delay: .12s; }
html:not(.ui-quente) .login-box > :nth-child(3), html.ui-quente .login-box > :nth-child(3) { animation-delay: .18s; }
html:not(.ui-quente) .login-box > :nth-child(5), html.ui-quente .login-box > :nth-child(5) { animation-delay: .26s; }
html:not(.ui-quente) .login-box > :nth-child(6), html.ui-quente .login-box > :nth-child(6) { animation-delay: .32s; }
html:not(.ui-quente) .login-box > :nth-child(7), html.ui-quente .login-box > :nth-child(7) { animation-delay: .4s; }
html:not(.ui-quente) .login-input, html.ui-quente .login-input { border-radius: 14px !important; transition: border-color .25s, box-shadow .25s; }
html:not(.ui-quente) .login-input:focus, html.ui-quente .login-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-glow) !important; }
html:not(.ui-quente) .login-btn, html.ui-quente .login-btn { position: relative; overflow: hidden; border-radius: 14px !important; background: var(--ui-pill-active) !important; color: var(--ui-pill-active-text) !important; transition: transform .2s; }
html.ui-quente .login-btn { background: var(--accent) !important; color: var(--btn-text) !important; }
html:not(.ui-quente) .login-btn::after, html.ui-quente .login-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); animation: ui-shine 3.2s ease-in-out infinite 1.2s; }
html:not(.ui-quente) .login-btn:hover, html.ui-quente .login-btn:hover { transform: translateY(-1px); }
@keyframes ui-login-in { from { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shine { 0% { left: -60%; } 45%, 100% { left: 130%; } }

/* ---------- 8. Conta → Aparência ---------- */
.ui-ap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); padding: 20px; margin-bottom: 24px; }
.ui-ap h3 { margin: 0 0 4px; font-size: 15px; color: var(--text); }
.ui-ap-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.ui-ap-layouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ui-ap-opt { border: 2px solid var(--border); border-radius: 14px; padding: 8px; background: var(--surface2); cursor: pointer; text-align: left; color: var(--text); font: inherit; transition: border-color .2s, transform .2s; }
.ui-ap-opt:hover { transform: translateY(-2px); }
.ui-ap-opt.on { border-color: var(--accent); }
.ui-ap-opt b { display: block; font-size: 13px; margin-top: 8px; }
.ui-ap-opt small { color: var(--muted); font-size: 11.5px; }
.ui-prev { height: 78px; border-radius: 10px; position: relative; overflow: hidden; }
.ui-prev i { position: absolute; display: block; border-radius: 6px; }
.ui-prev-atual { background: #111215; }
.ui-prev-atual i:nth-child(1) { left: 0; top: 0; bottom: 0; width: 26%; background: #0B0C0E; border-right: 1px solid #222; }
.ui-prev-atual i:nth-child(2) { left: 32%; top: 12%; width: 30%; height: 30%; background: #1b1c22; }
.ui-prev-atual i:nth-child(3) { left: 66%; top: 12%; width: 28%; height: 30%; background: #1b1c22; }
.ui-prev-atual i:nth-child(4) { left: 32%; top: 52%; width: 62%; height: 38%; background: #1b1c22; }
.ui-prev-vidro { background: url('/fundos/por-do-sol-mini.jpg') center / cover; }
.ui-prev-vidro i:nth-child(1) { left: 30%; right: 30%; top: 7%; height: 14%; border-radius: 99px; background: rgba(255, 255, 255, .35); }
.ui-prev-vidro i:nth-child(2) { left: 4%; top: 30%; width: 8%; height: 58%; border-radius: 99px; background: rgba(255, 255, 255, .3); }
.ui-prev-vidro i:nth-child(3) { left: 17%; top: 30%; width: 37%; height: 58%; background: rgba(255, 255, 255, .28); border: 1px solid rgba(255, 255, 255, .5); }
.ui-prev-vidro i:nth-child(4) { left: 58%; top: 30%; width: 37%; height: 58%; background: rgba(255, 255, 255, .28); border: 1px solid rgba(255, 255, 255, .5); }
.ui-prev-quente { background: radial-gradient(120px 80px at 90% 0, rgba(240, 138, 93, .35), transparent), #17110D; }
.ui-prev-quente i:nth-child(1) { left: 26%; right: 26%; top: 7%; height: 14%; border-radius: 99px; background: #2A1F18; }
.ui-prev-quente i:nth-child(2) { left: 6%; top: 30%; width: 56%; height: 58%; background: #241A14; }
.ui-prev-quente i:nth-child(2)::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 20%; height: 40%; border-radius: 40% 60% 0 0; background: linear-gradient(#F08A5D88, transparent); }
.ui-prev-quente i:nth-child(3) { left: 66%; top: 30%; width: 28%; height: 58%; background: #241A14; }
.ui-prev-quente i:nth-child(4) { right: 6%; top: 8%; width: 9%; height: 13%; border-radius: 99px; background: #F08A5D; }
.ui-ap-bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 14px; }
.ui-ap-bg { aspect-ratio: 16 / 10; border-radius: 10px; border: 2px solid transparent; background: #333 center / cover; cursor: pointer; position: relative; padding: 0; overflow: hidden; }
.ui-ap-bg.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.ui-ap-bg span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 10.5px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); text-align: left; }
.ui-ap-up { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; border: 2px dashed var(--border2); background: var(--surface2); color: var(--muted2); font-size: 11.5px; }
@media (max-width: 560px) { .ui-ap-layouts { grid-template-columns: 1fr; } }

/* ---------- 9. Ajustes de contraste e leitura (varredura claro/escuro) ---------- */
/* Faixa atrás do menu do topo: o conteúdo que rola por baixo fica desfocado, sem texto "vazando" entre as pílulas. */
@media (min-width: 769px) {
  html.ui-top .ui-topnav::before {
    content: ""; position: fixed; left: 0; right: 0; top: 0; height: 82px; z-index: -1; pointer-events: none;
    background: var(--ui-band, rgba(16, 16, 20, .38));
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent);
  }
}
html.ui-vidro[data-theme="light"] { --ui-band: rgba(255, 250, 244, .5); }
html.ui-quente { --ui-band: rgba(21, 16, 13, .82); }
html.ui-quente[data-theme="light"] { --ui-band: rgba(246, 238, 230, .86); }
html.ui-calm .ui-topnav::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.ui-calm.ui-vidro { --ui-band: rgba(16, 16, 20, .85); }
html.ui-calm.ui-vidro[data-theme="light"] { --ui-band: rgba(250, 246, 240, .92); }

/* Vidro claro: vidro mais encorpado e foto um pouco mais clara (fundos escuros deixavam colunas e textos acinzentados). */
html.ui-vidro[data-theme="light"], html.ui-vidro.marca-zioon[data-theme="light"] {
  --ui-glass: rgba(255, 255, 255, .64);
  --ui-glass-2: rgba(255, 255, 255, .55);
  --ui-tint: rgba(255, 250, 240, .24);
  --surface: rgba(255, 255, 255, .66);
  --col-bg: rgba(255, 255, 255, .45);
  --muted: rgba(23, 23, 26, .66);
  --muted2: rgba(23, 23, 26, .82);
}
html.ui-vidro, html.ui-vidro.marca-zioon { --muted: rgba(255, 255, 255, .7); }
html.ui-vidro ::placeholder, html.ui-quente ::placeholder { color: var(--muted); opacity: 1; }

/* Avisos do funil ("novos leads", faturamento) como cartões legíveis em cima da foto. */
html.ui-vidro :is(.crm-new-lead-banner, #valor-fechado-banner) {
  background: var(--ui-glass) !important; border-color: var(--ui-glass-line) !important;
  -webkit-backdrop-filter: blur(var(--ui-blur)) saturate(140%); backdrop-filter: blur(var(--ui-blur)) saturate(140%);
  border-radius: 14px;
}
html.ui-vidro .crm-new-lead-banner { box-shadow: inset 3px 0 0 var(--accent); }
html.ui-vidro[data-theme="light"] #valor-fechado-banner span[style*="--green"] { color: #136B40 !important; }
html.ui-vidro .crm-new-lead-ack, html.ui-quente .crm-new-lead-ack {
  background: var(--ui-pill-active) !important; color: var(--ui-pill-active-text) !important; border-color: transparent !important; border-radius: 999px; box-shadow: none;
}
html.ui-quente .crm-new-lead-ack { background: var(--accent) !important; color: var(--btn-text) !important; }

/* Selo do cliente no topo: a letra dourada sumia no vidro claro e no quente claro. */
html.ui-top[data-theme="light"] .ui-topnav .client-switch-avatar { background: var(--accent-glow); color: var(--text); }
html.ui-quente .ui-topnav .client-switch-avatar { background: var(--accent-glow); color: var(--accent); }

/* Escuro quente claro: o laranja-claro do modo escuro (botões "Conectar", etiquetas da Ajuda) ficava apagado no fundo claro. */
html.ui-quente[data-theme="light"] {
  --accent2: #B4532A;
  --gold: #E0703F;
  --accent-glow: rgba(224, 112, 63, .16);
  --accent-glow2: rgba(224, 112, 63, .08);
}

/* Botão claro/escuro do topo: no modo noturno a lua fica acesa (cor de destaque e anel); no claro aparece um sol. */
#ui-theme.is-dark { color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow), 0 6px 20px rgba(0, 0, 0, .15); }
#ui-theme:not(.is-dark) { color: #E0A21B; }

/* Listas que abrem nos seletores (ex.: mês do funil): no escuro vinham brancas com letra branca. */
html.ui-vidro:not([data-theme="light"]), html.ui-quente:not([data-theme="light"]) { color-scheme: dark; }
html.ui-vidro[data-theme="light"], html.ui-quente[data-theme="light"] { color-scheme: light; }
html.ui-vidro select option, html.ui-vidro select optgroup { background-color: #1F1F24; color: #FFFFFF; }
html.ui-vidro[data-theme="light"] select option, html.ui-vidro[data-theme="light"] select optgroup { background-color: #FFFFFF; color: #17171A; }
html.ui-quente select option, html.ui-quente select optgroup { background-color: #211813; color: #F7EDE4; }
html.ui-quente[data-theme="light"] select option, html.ui-quente[data-theme="light"] select optgroup { background-color: #FFFBF7; color: #2A1F18; }
/* Layout Atual no modo escuro: mesmo problema nas listas dos seletores. */
html:not(.ui-vidro):not(.ui-quente):not([data-theme="light"]) { color-scheme: dark; }
html:not(.ui-vidro):not(.ui-quente):not([data-theme="light"]) select option,
html:not(.ui-vidro):not(.ui-quente):not([data-theme="light"]) select optgroup { background-color: #16171B; color: #F3F1EC; }

/* Tela de entrar: o cartão inclina em 3D seguindo o mouse, com um reflexo de luz no ponto do cursor. */
.login-overlay { perspective: 1100px; }
.login-overlay .login-box.ui-tilt-ready {
  animation: none !important;
  transform: rotateX(var(--ui-rx, 0deg)) rotateY(var(--ui-ry, 0deg)) translateY(var(--ui-lift, 0px));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s;
  will-change: transform;
}
.login-overlay .login-box.ui-tilt-ready.ui-tilting { --ui-lift: -6px; transition: transform .14s ease-out, box-shadow .3s; box-shadow: 0 40px 90px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .2) !important; }
.login-overlay .login-box::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(380px circle at var(--ui-gx, 50%) var(--ui-gy, 0%), rgba(255, 255, 255, .16), transparent 55%);
  opacity: 0; transition: opacity .35s ease;
}
.login-overlay .login-box.ui-tilting::after { opacity: 1; }
/* A foto do fundo acompanha de leve, no sentido contrário (sensação de profundidade). */
html:not(.ui-quente) .login-overlay { background-position: calc(50% + var(--ui-px, 0px)) calc(50% + var(--ui-py, 0px)) !important; transition: background-position .8s cubic-bezier(.2, .8, .2, 1); }

/* ---------- 10. Vidro com mais cara de vidro (estilo visionOS) ----------
   Desfoque mais forte e foto mais visível atrás; reflexo diagonal por cima do vidro; borda de luz no alto;
   sombra funda (placas soltas flutuando); cantos maiores; os cartões sobem um pouco ao passar o mouse. */
html.ui-vidro, html.ui-vidro.marca-zioon {
  --ui-glass: rgba(46, 42, 44, .4);
  --ui-glass-2: rgba(255, 255, 255, .08);
  --ui-glass-line: rgba(255, 255, 255, .16);
  --ui-blur: 34px;
  --ui-tint: rgba(8, 8, 10, .16);
  --ui-pill: rgba(40, 38, 42, .42);
  --ui-sheen: linear-gradient(150deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .05) 34%, rgba(255, 255, 255, .015) 62%, rgba(255, 255, 255, .06) 100%);
  --ui-edge: inset 0 1px 0 rgba(255, 255, 255, .26), inset 1px 0 0 rgba(255, 255, 255, .06), inset -1px 0 0 rgba(255, 255, 255, .04), inset 0 -1px 0 rgba(255, 255, 255, .04);
  --card-shadow: 0 26px 60px -20px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .16);
  --ui-lift-shadow: 0 34px 70px -22px rgba(0, 0, 0, .62), 0 3px 10px rgba(0, 0, 0, .18);
  --ui-sheen-soft: linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01) 50%, rgba(255, 255, 255, .03));
  --r2: 22px;
}
html.ui-vidro[data-theme="light"], html.ui-vidro.marca-zioon[data-theme="light"] {
  --ui-glass: rgba(255, 255, 255, .56);
  --ui-sheen-soft: linear-gradient(150deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .16));
  --ui-pill: rgba(255, 255, 255, .5);
  --ui-tint: rgba(255, 250, 240, .16);
  --ui-sheen: linear-gradient(150deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .16) 40%, rgba(255, 255, 255, .06) 65%, rgba(255, 255, 255, .3) 100%);
  --ui-edge: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35);
  --card-shadow: 0 24px 50px -22px rgba(70, 45, 20, .38), 0 2px 8px rgba(70, 45, 20, .08);
  --ui-lift-shadow: 0 32px 60px -22px rgba(70, 45, 20, .45), 0 3px 10px rgba(70, 45, 20, .1);
}
html.ui-vidro :is(.metric-card, .table-card, .integ-card, .help-card, .cfgc-card, .kanban-col, .modal-box, .paleta-card, .topbar, .chart-card, .huv-card, .at-card, .camp-card, .auto-card, .client-card, .cal-grid, .cal-list-ev, .chat-list, .chat-main, .chat-panel, .stat-card, .analise-card),
html.ui-vidro #huven-modal > div, html.ui-vidro .client-switch-pop, html.ui-vidro .config-panel, html.ui-vidro #campaign-editor, html.ui-vidro .ui-menu {
  background: var(--ui-sheen), var(--ui-glass) !important;
  -webkit-backdrop-filter: blur(var(--ui-blur)) saturate(185%) brightness(1.05);
  backdrop-filter: blur(var(--ui-blur)) saturate(185%) brightness(1.05);
  box-shadow: var(--ui-edge), var(--card-shadow);
}
html.ui-vidro :is(.metric-card, .table-card, .integ-card, .help-card, .cfgc-card, .kanban-col, .chart-card, .huv-card, .camp-card, .auto-card, .client-card, .stat-card, .analise-card, .modal-box) { border-radius: var(--r2); }
html.ui-vidro .kanban-col { background: var(--ui-sheen-soft), var(--ui-glass) !important; }
html.ui-vidro .kanban-card { background: var(--ui-sheen-soft), var(--ui-glass-2) !important; box-shadow: var(--ui-edge), 0 8px 22px -12px rgba(0, 0, 0, .4); }
html.ui-vidro :is(.ui-chip, .ui-pills, .ui-round:not(.ui-avatar), .ui-dock, .ui-topnav .client-switch) {
  background: var(--ui-sheen), var(--ui-pill) !important;
  -webkit-backdrop-filter: blur(26px) saturate(185%) brightness(1.05);
  backdrop-filter: blur(26px) saturate(185%) brightness(1.05);
  box-shadow: var(--ui-edge), 0 14px 34px -14px rgba(0, 0, 0, .45);
}
html.ui-vidro :is(.ui-ind, .ui-dot.on) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 18px rgba(0, 0, 0, .25); }
html.ui-vidro:not(.ui-calm) :is(.metric-card, .stat-card, .integ-card, .camp-card, .auto-card, .client-card, .huv-card, .help-card) { transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease; }
html.ui-vidro:not(.ui-calm) :is(.metric-card, .stat-card, .integ-card, .camp-card, .auto-card, .client-card, .huv-card, .help-card):hover { transform: translateY(-4px); box-shadow: var(--ui-edge), var(--ui-lift-shadow); }
/* Aparelhos mais fracos: sem desfoque, vidro mais opaco (mantém o reflexo e a borda de luz). */
html.ui-calm.ui-vidro { --ui-glass: rgba(30, 28, 32, .88); --ui-pill: rgba(30, 28, 32, .88); }
html.ui-calm.ui-vidro[data-theme="light"] { --ui-glass: rgba(255, 255, 255, .9); --ui-pill: rgba(255, 255, 255, .9); }
html.ui-calm.ui-vidro :is(.ui-chip, .ui-pills, .ui-round, .ui-dock, .ui-menu, .client-switch-pop, .config-panel, .chart-card, .stat-card, .chat-list, .chat-main, .chat-panel) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Etiqueta de origem do card: o azul ficava fraco no vidro mais claro. */
html.ui-vidro:not([data-theme="light"]) .kc-chip.kc-origin { color: #C4DAFF !important; background: rgba(60, 110, 220, .34) !important; }
/* Chat com conversa aberta: a área das mensagens tinha fundo sólido (--bg) e tapava o vidro. */
html.ui-vidro .chat-msgs { background: transparent !important; }
html.ui-vidro .chat-bubble.in { background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
html.ui-vidro[data-theme="light"] .chat-bubble.in { background: rgba(255, 255, 255, .72); box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(60, 45, 20, .08); }
html.ui-vidro .chat-day { background: rgba(255, 255, 255, .12); }
html.ui-vidro[data-theme="light"] .chat-day { background: rgba(255, 255, 255, .7); }
/* Etiquetas de etapa (Contatos): as cores são de tema escuro e ficavam apagadas no vidro claro. */
html.ui-vidro[data-theme="light"] .ct-stage { color: var(--text) !important; }
/* Avatar da Zioon no escuro: letra branca sobre azul-claro. */
html.ui-vidro.marca-zioon:not([data-theme="light"]) .ui-avatar { color: #0B1430; }

/* Personalizar menu */
.ne-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ne-col { display: flex; flex-direction: column; gap: 4px; min-height: 260px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; }
.ne-col.ne-end { box-shadow: inset 0 -2px 0 var(--accent); }
.ne-head { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 6px; }
.ne-head b { font-size: 13px; color: var(--text); }
.ne-head small { font-size: 11.5px; color: var(--muted2); line-height: 1.35; }
.ne-row { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); cursor: grab; }
.ne-row.ne-before { box-shadow: 0 -2px 0 var(--accent); }
.ne-ico { display: flex; flex: none; color: var(--muted2); }
.ne-ico svg { width: 14px; height: 14px; }
.ne-name { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ne-acts { display: flex; flex: none; gap: 3px; }
.ne-btn { min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--muted2); font-size: 11.5px; line-height: 1; cursor: pointer; }
.ne-btn:hover { color: var(--text); border-color: var(--border2); }
.ne-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ne-empty { padding: 18px 8px; text-align: center; font-size: 12px; color: var(--muted2); }
.ne-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 760px) { .ne-cols { grid-template-columns: 1fr; } .ne-col { min-height: 0; } }

/* Listas longas: o que está fora da tela não é desenhado até a rolagem chegar nele. */
#chat-list > .chat-row { flex-shrink: 0; content-visibility: auto; contain-intrinsic-size: auto 72px; }
.ct-table > .ct-row:not(.ct-head) { content-visibility: auto; contain-intrinsic-size: auto 56px; }
.kanban-cards > .kanban-card { flex-shrink: 0; content-visibility: auto; contain-intrinsic-size: auto 120px; }

/* Telas (menos Kanban e Chat, que já são de vidro): folha de vidro atrás do conteúdo para os números não ficarem soltos em cima da foto.
   O desfoque fica no ::before para não prender janelas com position:fixed dentro da tela. */
html.ui-vidro :is(#analise-view, #atividades-view, #cadencia-view, #campanhas-view, #automacoes-view, #agenteia-view, #calendario-view, #prospeccao-view, #cfgclientes-view, #capi-view, #historico-view, #modelos-view, #instagram-view, #posts-view, #clientes-view, #integracoes-view, #conta-view, #ajuda-view, #contatos-view, #whatsapp-view) { position: relative; isolation: isolate; padding: 22px 24px 26px; border-radius: 22px; }
html.ui-vidro :is(#analise-view, #atividades-view, #cadencia-view, #campanhas-view, #automacoes-view, #agenteia-view, #calendario-view, #prospeccao-view, #cfgclientes-view, #capi-view, #historico-view, #modelos-view, #instagram-view, #posts-view, #clientes-view, #integracoes-view, #conta-view, #ajuda-view, #contatos-view, #whatsapp-view)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--ui-sheen-soft, none), linear-gradient(var(--ui-glass), var(--ui-glass)), var(--ui-glass);
  border: 1px solid var(--ui-glass-line);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
}
html.ui-calm.ui-vidro :is(#analise-view, #atividades-view, #cadencia-view, #campanhas-view, #automacoes-view, #agenteia-view, #calendario-view, #prospeccao-view, #cfgclientes-view, #capi-view, #historico-view, #modelos-view, #instagram-view, #posts-view, #clientes-view, #integracoes-view, #conta-view, #ajuda-view, #contatos-view, #whatsapp-view)::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(var(--ui-glass), var(--ui-glass)), linear-gradient(var(--ui-glass), var(--ui-glass)), var(--ui-glass); }
@media (max-width: 760px) { html.ui-vidro :is(#analise-view, #atividades-view, #cadencia-view, #campanhas-view, #automacoes-view, #agenteia-view, #calendario-view, #prospeccao-view, #cfgclientes-view, #capi-view, #historico-view, #modelos-view, #instagram-view, #posts-view, #clientes-view, #integracoes-view, #conta-view, #ajuda-view, #contatos-view, #whatsapp-view) { padding: 14px 12px 18px; border-radius: 16px; } }

/* Vidro: a tela entra sem fade. Com opacidade no pai, o navegador desliga o desfoque dos vidros dentro dele durante a animação,
   e eles apareciam transparentes e só depois viravam vidro de repente. */
html.ui-vidro .ui-enter, html.ui-vidro .ui-enter :is(.table-card, .integ-card, .help-card, .cfgc-card, .huv-card, .cal-list-day, .at-card, .chart-card) { animation: none !important; }

/* Menu no topo: o Chat desconta a altura do menu. Sem isso ele passava 78px da tela, e a página pulava ao abrir uma conversa. */
@media (min-width: 769px) { html.ui-top .chat-wrap { height: calc(100vh - 118px); } }