/* ══════════════════════════════════════════════════════
   Hub Católico · Agenda Editorial
   Material You (Google Calendar 2024) — claro + night vision
══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300..700&family=Roboto:wght@300;400;500;700&display=swap');

/* ── LIGHT (default) ── */
:root {
  --primary:        #46566b;     /* destaque NEUTRO (azul-ardósia contido) */
  --on-primary:     #ffffff;
  --primary-cont:   #dde3ec;     /* azul-ardósia claro */
  --on-primary-cont:#28313d;

  --surface:        #fbfcfd;     /* superfícies / cards */
  --surface-tint:   #eef1f4;     /* topbar + sidebar (cinza-frio) */
  --surface-2:      #e4e8ec;     /* hover de controles */

  --on-surface:     #1a1d21;
  --on-surface-var: #4a4f57;
  --on-surface-dim: #878d96;

  --outline:        #d8dde3;
  --outline-var:    #c7ced6;

  --state-hover:    rgba(42,52,66,.06);
  --state-press:    rgba(42,52,66,.11);
  --cell-hover:     rgba(42,52,66,.03);

  --shadow-panel:   -4px 0 18px rgba(0,0,0,.07);
  --weekend:        #b3402f;

  /* fundo da área e cards de dia */
  --cal-bg:         #fdfefe;   /* CALENDÁRIO (o mais limpo) */
  --chrome:         #eef1f4;   /* topbar + sidebar + rail (cinza-frio) */
  --cal-cell:       #fdfefe;   /* card de cada dia */
  --cal-cell-hover: #eef2f6;
  --cal-cell-copa:  #eaeff4;
  --card-shadow:    0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.06);
}

/* ── NIGHT VISION ── */
[data-theme="dark"] {
  --primary:        #9fb2c9;     /* destaque NEUTRO (azul-ardósia claro) */
  --on-primary:     #1c2530;
  --primary-cont:   #313a47;
  --on-primary-cont:#dde3ec;

  --surface:        #15171a;
  --surface-tint:   #1b1e22;
  --surface-2:      #262a30;

  --on-surface:     #e9ecf0;
  --on-surface-var: #c2c7cf;
  --on-surface-dim: #878d96;

  --outline:        #313640;
  --outline-var:    #424853;

  --state-hover:    rgba(200,210,225,.09);
  --state-press:    rgba(200,210,225,.15);
  --cell-hover:     rgba(200,210,225,.05);

  --shadow-panel:   -4px 0 22px rgba(0,0,0,.5);
  --weekend:        #e0a39a;

  --cal-bg:         #101216;   /* CALENDÁRIO (escuro no dark) */
  --chrome:         #181a1e;   /* topbar + sidebar + rail */
  --cal-cell:       #1f2227;
  --cal-cell-hover: #262a30;
  --cal-cell-copa:  #23272d;
  --card-shadow:    0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.35);
}

:root {
  --topbar-h:  64px;
  --sidebar-w: 268px;
  --panel-w:   384px;
  --rail-w:    58px;
  --cell-h:    118px;
  --font: 'Roboto Flex', 'Roboto', system-ui, -apple-system, sans-serif;
  --t: 220ms cubic-bezier(.2,0,0,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font); background: var(--surface); color: var(--on-surface);
  font-size: 14px; -webkit-font-smoothing: antialiased;
  transition: background var(--t), color var(--t);
}

/* ══ TOPBAR ══ */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--topbar-h);
  background: var(--chrome);
  display: flex; align-items: center; padding: 0 16px 0 8px; gap: 8px;
  transition: background var(--t);
}
.topbar-left  { display: flex; align-items: center; gap: 6px; width: calc(var(--sidebar-w) + 4px); flex-shrink: 0; }
.topbar-center{ flex: 1; display: flex; align-items: center; gap: 2px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.brand { display: flex; align-items: center; gap: 10px; padding-left: 4px; user-select: none; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 16px; font-weight: 500; color: var(--on-surface-var); letter-spacing: -.1px; }
.brand-sub  { font-size: 10px; color: var(--on-surface-dim); letter-spacing: .2px; }
.brand-icon { height: 20px; width: auto; display: block; flex-shrink: 0; }
/* Marca animada na topbar: 4 slots (o-r-d-o). Cada slot mostra a sua BOLHA;
   no meio de um bounce a bolha troca SECA pela letra (um frame), uma por vez, e depois volta. */
.brand-anim { position: relative; height: 26px; width: 88px; flex-shrink: 0; overflow: visible; }
/* cada slot cobre o LOGO INTEIRO e mostra só a SUA bolha/letra (SVG individual) → uma animação coesa: cresce sem cortar e sobrepõe livre */
.ba-slot { position: absolute; inset: 0; overflow: visible; transform-origin: center; }
.ba-bub, .ba-let { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; background-size: contain; }
/* letra = máscara individual colorida na cor NEUTRA da versão: cinza no claro, creme no escuro */
.ba-let { opacity: 0; background-color: #878d96; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
[data-theme="dark"] .ba-let { background-color: #eef1f4; }
.ba-slot:nth-child(1) { transform-origin: 12.5% 50%; }
.ba-slot:nth-child(1) .ba-bub { background-image: url(brand/bub-light-1.svg); }
[data-theme="dark"] .ba-slot:nth-child(1) .ba-bub { background-image: url(brand/bub-dark-1.svg); }
.ba-slot:nth-child(1) .ba-let { -webkit-mask-image: url(brand/let-1.svg); mask-image: url(brand/let-1.svg); }
.ba-slot:nth-child(2) { transform-origin: 38.4% 41%; }
.ba-slot:nth-child(2) .ba-bub { background-image: url(brand/bub-light-2.svg); }
[data-theme="dark"] .ba-slot:nth-child(2) .ba-bub { background-image: url(brand/bub-dark-2.svg); }
.ba-slot:nth-child(2) .ba-let { -webkit-mask-image: url(brand/let-2.svg); mask-image: url(brand/let-2.svg); }
.ba-slot:nth-child(3) { transform-origin: 61.6% 59%; }
.ba-slot:nth-child(3) .ba-bub { background-image: url(brand/bub-light-3.svg); }
[data-theme="dark"] .ba-slot:nth-child(3) .ba-bub { background-image: url(brand/bub-dark-3.svg); }
.ba-slot:nth-child(3) .ba-let { -webkit-mask-image: url(brand/let-3.svg); mask-image: url(brand/let-3.svg); }
.ba-slot:nth-child(4) { transform-origin: 87.5% 50%; }
.ba-slot:nth-child(4) .ba-bub { background-image: url(brand/bub-light-4.svg); }
[data-theme="dark"] .ba-slot:nth-child(4) .ba-bub { background-image: url(brand/bub-dark-4.svg); }
.ba-slot:nth-child(4) .ba-let { -webkit-mask-image: url(brand/let-4.svg); mask-image: url(brand/let-4.svg); }
.ba-slot.is-letter .ba-bub { opacity: 0; }                 /* troca seca: sem transição */
.ba-slot.is-letter .ba-let { opacity: 1; }
.ba-slot.bounce { animation: baBounce .34s cubic-bezier(.34,1.56,.64,1); }
@keyframes baBounce { 0% { transform: scale(1); } 38% { transform: scale(.5); } 70% { transform: scale(1.14); } 100% { transform: scale(1); } }

.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--on-surface-var); transition: background var(--t);
}
.icon-btn:hover { background: var(--state-hover); }

.nav-btn {
  height: 36px; padding: 0 12px; border-radius: 18px; border: none; background: transparent;
  cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 500;
  color: var(--on-surface-var); display: flex; align-items: center; justify-content: center;
  transition: background var(--t);
}
.nav-btn:hover { background: var(--state-hover); }
.nav-btn.nav-arrow { width: 40px; padding: 0; border-radius: 50%; }
.nav-btn.today-btn { border: 1px solid var(--outline-var); color: var(--on-surface); }

.current-period { font-size: 20px; font-weight: 400; color: var(--on-surface); margin-left: 8px; white-space: nowrap; }

.search-wrap { position: relative; }
.search-input {
  width: 256px; height: 40px; padding: 0 16px 0 40px; border: none; border-radius: 20px;
  background: var(--surface-2); font-family: var(--font); font-size: 14px; color: var(--on-surface);
  outline: none; transition: background var(--t), box-shadow var(--t);
}
.search-input::placeholder { color: var(--on-surface-dim); }
.search-input:focus { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1); }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--on-surface-dim); }

.view-selector { display: flex; border: 1px solid var(--outline-var); border-radius: 20px; overflow: hidden; }
.view-btn {
  padding: 6px 16px; border: none; background: transparent; cursor: pointer; font-family: var(--font);
  font-size: 14px; font-weight: 500; color: var(--on-surface-var); transition: background var(--t), color var(--t);
}
.view-btn:hover { background: var(--state-hover); }
.view-btn.active { background: var(--primary-cont); color: var(--on-primary-cont); }

/* Botão de conta */
.account-btn { border: 1px solid var(--outline-var); color: var(--on-surface); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-btn.logged { background: var(--primary-cont); color: var(--on-primary-cont); border-color: transparent; }

/* Login / cadastro */
.auth-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.auth-tab { flex: 1; padding: 9px 4px; border: 1px solid var(--outline-var); border-radius: 10px; background: transparent; cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--on-surface-var); transition: background var(--t), color var(--t); }
.auth-tab.active { background: var(--primary-cont); color: var(--on-primary-cont); border-color: transparent; }
.auth-msg { display: none; font-size: 13px; color: #c5221f; background: rgba(217,48,37,.08); border-radius: 8px; padding: 8px 10px; margin-bottom: 4px; }
[data-theme="dark"] .auth-msg { color: #f2b8b5; }
.auth-hint { font-size: 11px; color: var(--on-surface-dim); margin-top: 14px; line-height: 1.5; }

/* ══ APP BODY ══ */
.app-body { display: flex; position: fixed; inset: var(--topbar-h) var(--rail-w) 0 0; background: var(--chrome); transition: background var(--t); }

/* ══ SIDEBAR ══ */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--chrome);
  display: flex; flex-direction: column;
  overflow-y: auto; transition: width var(--t), background var(--t);
  scrollbar-width: none;            /* Firefox — sem barra */
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* WebKit — sem barra */
.sidebar.collapsed { width: 0; overflow: hidden; }

/* Botão Criar (M3 — elevado, pill) */
.create-wrap { padding: 14px 12px 4px; display: flex; gap: 8px; }
.create-btn {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px 0 18px; border: none; border-radius: 16px;
  background: var(--surface); color: var(--on-surface);
  font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.12);
  transition: box-shadow var(--t), background var(--t);
}
.create-btn:hover { box-shadow: 0 2px 6px rgba(0,0,0,.22), 0 8px 18px rgba(0,0,0,.16); background: var(--cal-cell-hover); }
.create-btn svg { color: var(--primary); }
.models-btn {
  flex-shrink: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 48px; padding: 0 12px; border: 1px solid var(--outline-var); border-radius: 16px;
  background: transparent; color: var(--on-surface-var);
  font-family: var(--font); font-size: 10.5px; font-weight: 600; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.models-btn:hover { background: var(--surface-2); border-color: var(--primary); color: var(--on-surface); }
.models-btn svg { color: var(--primary); }
.models-btn { position: relative; }
.models-lock { display: none; position: absolute; top: 3px; right: 4px; font-size: 9px; }
.models-btn.locked { opacity: .72; }
.models-btn.locked .models-lock { display: inline; }
.inl-savemodel.locked { opacity: .72; }
.inl-modelform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 20px 6px; }
.inl-modelform input { flex: 1 1 200px; min-width: 0; font-family: var(--font); font-size: 13px; color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline-var); border-radius: 9px; padding: 9px 11px; outline: none; }
.inl-modelform input:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.inl-modelform .btn-filled { padding: 8px 14px; font-size: 12.5px; }

/* Export / Import */
.sb-io { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sb-io-sep { color: var(--on-surface-dim); }

/* Mini calendar */
.mini-cal { padding: 8px 12px 8px; }
.mini-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mini-cal-month { font-size: 13px; font-weight: 500; color: var(--on-surface-var); }
.mini-nav {
  width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent; cursor: pointer;
  color: var(--on-surface-dim); display: flex; align-items: center; justify-content: center; transition: background var(--t);
}
.mini-nav:hover { background: var(--state-hover); }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.mini-day-label { text-align: center; font-size: 10px; font-weight: 500; color: var(--on-surface-dim); padding: 4px 0; }
.mini-cell { display: flex; align-items: center; justify-content: center; padding: 1px 0; }
.mini-day {
  width: 28px; height: 28px; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--on-surface-var); cursor: pointer; position: relative;
  transition: background var(--t);
}
.mini-day:hover:not(.today) { background: var(--state-hover); }
.mini-day.today { background: var(--primary); color: var(--on-primary); font-weight: 500; }
.mini-day.has-events::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--primary);
}
.mini-day.today.has-events::after { background: var(--on-primary); opacity: .7; }
.mini-day.other-month { color: var(--outline-var); pointer-events: none; }

/* Sidebar sections — sem divisórias, mais respiro */
.sb-section { padding: 10px 14px 8px; }
.sb-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600; color: var(--on-surface-dim);
  letter-spacing: .4px; text-transform: uppercase; margin-bottom: 10px;
}
.sb-text-btn { font-size: 11px; color: var(--primary); background: none; border: none; cursor: pointer; font-family: var(--font); font-weight: 500; }

/* Gerenciar projetos */
.sb-title-actions { display: flex; align-items: center; gap: 8px; }
.sb-icon-btn { width: 22px; height: 22px; border-radius: 6px; border: none; background: transparent; color: var(--primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t); }
.sb-icon-btn:hover { background: var(--state-hover); }
.proj-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; max-height: 52vh; overflow-y: auto; }
.proj-block { padding: 8px; border-radius: 12px; background: var(--surface-2); }
.proj-row, .camp-row { display: flex; align-items: center; gap: 8px; }
.camp-row { margin-top: 6px; padding-left: 18px; }
.proj-row input[type=color], .camp-row input[type=color] { width: 28px; height: 28px; border: none; border-radius: 8px; background: none; cursor: pointer; padding: 0; flex-shrink: 0; }
.camp-row input[type=color] { width: 22px; height: 22px; }
.proj-name { flex: 1; min-width: 0; font-family: var(--font); font-size: 14px; color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline); border-radius: 8px; padding: 7px 10px; outline: none; }
.proj-name:focus { border-color: var(--primary); }
.proj-del { width: 28px; height: 28px; border: none; background: transparent; color: var(--on-surface-dim); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--t), color var(--t); }
.proj-del:hover { background: rgba(217,48,37,.1); color: #d93025; }
.proj-base-tag { font-size: 10px; color: var(--on-surface-dim); padding: 0 8px; white-space: nowrap; }
.proj-add-camp { margin-top: 8px; margin-left: 18px; font-size: 12px; color: var(--primary); background: none; border: none; cursor: pointer; font-family: var(--font); font-weight: 500; padding: 2px 0; }
.proj-add-camp:hover { text-decoration: underline; }
.proj-add { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px dashed var(--outline-var); border-radius: 12px; background: transparent; color: var(--on-surface-var); font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--t); }
.proj-add:hover { background: var(--state-hover); }
.sb-text-btn:hover { text-decoration: underline; }

/* Lente segmented */
.lens-wrap { padding: 14px 14px 4px; }
/* toggle deslizante Conteúdo ↔ Mídia */
.lens-toggle { position: relative; display: flex; width: 100%; background: var(--surface-2); border: 1px solid var(--outline-var); border-radius: 999px; padding: 3px; cursor: pointer; user-select: none; outline: none; }
.lens-toggle:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.lens-knob { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .26s cubic-bezier(.4,0,.2,1); }
[data-theme="dark"] .lens-knob { background: var(--chrome); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.lens-toggle[data-lens="media"] .lens-knob { transform: translateX(100%); }
.lens-seg { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; background: none; border: none; cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--on-surface-dim); padding: 7px 0; border-radius: 999px; transition: color .22s; }
.lens-toggle[data-lens="project"] .lens-seg[data-lens="project"],
.lens-toggle[data-lens="media"] .lens-seg[data-lens="media"] { color: var(--on-surface); font-weight: 600; }
/* 3 segmentos (com Tarefas) */
.lens-toggle.lens3 .lens-knob { width: calc(33.333% - 2px); }
.lens-toggle.lens3[data-lens="tasks"] .lens-knob { transform: translateX(0); }
.lens-toggle.lens3[data-lens="project"] .lens-knob { transform: translateX(100%); }
.lens-toggle.lens3[data-lens="media"] .lens-knob { transform: translateX(200%); }
.lens-toggle.lens3 .lens-seg { font-size: 12px; }
.lens-toggle.lens3[data-lens="tasks"] .lens-seg[data-lens="tasks"] { color: var(--on-surface); font-weight: 600; }
.lens-lock { display: none; margin-left: 3px; font-size: 9px; opacity: .8; }
.lens-toggle.tasks-locked .lens-seg[data-lens="tasks"] { color: var(--on-surface-dim); }
.lens-toggle.tasks-locked .lens-lock { display: inline; }
.lens-btns--legacy { display: flex; border: 1px solid var(--outline-var); border-radius: 8px; overflow: hidden; background: var(--surface); }
.lens-btn {
  flex: 1; padding: 8px 4px; border: none; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--on-surface-var);
  transition: background var(--t), color var(--t);
}
.lens-btn + .lens-btn { border-left: 1px solid var(--outline-var); }
.lens-btn:hover:not(.active) { background: var(--state-hover); }
.lens-btn.active { background: var(--primary-cont); color: var(--on-primary-cont); font-weight: 600; }

/* ── Legenda (estilo "Meus calendários") — lista plana, alinhada ── */
/* Checkbox colorido = mostrador da cor (Google style) */
.cal-check {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; cursor: pointer; margin: 0;
  border: 2px solid var(--cal-color, var(--on-surface-dim));
  background: transparent; position: relative; transition: background var(--t), border-color var(--t);
}
.cal-check:checked { background: var(--cal-color, var(--primary)); border-color: var(--cal-color, var(--primary)); }
.cal-check:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* night vision: tique escuro (cor do fundo) sobre a cor da agenda */
[data-theme="dark"] .cal-check:checked::after { border-color: var(--cal-bg); }

.leg-row {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 6px 8px; border-radius: 9px; cursor: pointer;
  transition: background var(--t);
}
.leg-row:hover { background: var(--state-hover); }
.leg-row.parent:hover { background: var(--state-press); }   /* hierarquia maior ilumina mais */
.leg-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leg-row.parent .leg-label { font-size: 14px; font-weight: 600; color: var(--on-surface); }
.leg-row.child  .leg-label { font-size: 13px; font-weight: 400; color: var(--on-surface-var); }
.leg-count { font-size: 11px; color: var(--on-surface-dim); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.leg-row.focused { background: var(--state-hover); }
.leg-row.focused .leg-label { color: var(--on-surface); font-weight: 600; }
/* ações no hover: cor (⋯) e recolher (chevron) */
.leg-actions { display: flex; align-items: center; gap: 1px; opacity: 0; transition: opacity .12s; flex-shrink: 0; margin-right: -2px; }
.leg-row:hover .leg-actions { opacity: 1; }
.leg-row:hover .leg-count { display: none; }
.leg-act { width: 24px; height: 24px; border: none; background: transparent; border-radius: 6px; color: var(--on-surface-var); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t); }
.leg-act:hover { background: var(--state-press); color: var(--on-surface); }
/* paleta de cor flutuante (estilo Google Calendar) */
.color-pop { position: fixed; z-index: 500; background: var(--surface); border-radius: 14px; padding: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.28); display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.cp-sw { width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--c); cursor: pointer; position: relative; transition: transform .1s; }
.cp-sw:hover { transform: scale(1.14); }
.cp-sw.sel::after { content: ''; position: absolute; inset: 5px; border: 2px solid #fff; border-radius: 50%; mix-blend-mode: difference; }

/* Stats */
.stats-row { display: flex; }
.stat-cell { flex: 1; text-align: center; padding: 8px 4px; border-right: 1px solid var(--outline); }
.stat-cell:last-child { border-right: none; }
.stat-num { display: block; font-size: 20px; font-weight: 500; color: var(--primary); }
.stat-lbl { font-size: 10px; color: var(--on-surface-dim); margin-top: 1px; }

.copa-progress-wrap { padding: 8px 12px 12px; }
.copa-progress-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--on-surface-dim); margin-bottom: 4px; }
.copa-progress-track { height: 4px; background: var(--outline); border-radius: 2px; overflow: hidden; }
.copa-progress-fill { height: 100%; background: var(--primary); border-radius: 2px; width: 0; transition: width .8s var(--t); }

.gancho-card { margin: 0 12px 12px; padding: 10px 12px; border-radius: 12px; background: var(--primary-cont); border-left: 3px solid var(--primary); }
.gancho-title { font-size: 11px; font-weight: 600; color: var(--on-primary-cont); margin-bottom: 4px; }
.gancho-body  { font-size: 11px; color: var(--on-primary-cont); line-height: 1.55; opacity: .92; }

.sb-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--outline); }
.sb-footer-text { font-size: 11px; color: var(--on-surface-dim); line-height: 1.6; }

/* ══ CALENDAR MAIN — frame arredondado, grid de linhas (Google Calendar web) ══ */
.calendar-main {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  background: var(--cal-bg); border-radius: 16px; margin: 6px 10px 10px 4px;
  box-shadow: var(--card-shadow);
  transition: margin-right var(--t), background var(--t);
}
.calendar-main.panel-open { margin-right: var(--panel-w); }

.day-headers {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--outline); flex-shrink: 0;
}
.day-header { text-align: center; padding: 12px 4px 8px; font-size: 11px; font-weight: 600; color: var(--on-surface-dim); letter-spacing: .5px; text-transform: uppercase; }

.calendar-grid {
  flex: 1; display: grid; grid-template-columns: repeat(7, 1fr);
  overflow: hidden;                 /* mês inteiro cabe — sem rolagem */
}

.day-cell {
  border-right: 1px solid var(--outline); border-bottom: 1px solid var(--outline);
  padding: 4px 5px 6px; min-height: 0; overflow: hidden; position: relative;
  transition: background var(--t);
}
.calendar-grid .day-cell:nth-child(7n) { border-right: none; }
.day-cell:hover { background: var(--cell-hover); }
.day-cell.other-month .day-num { color: var(--outline-var); }
.day-cell.copa-day { background: color-mix(in srgb, var(--primary) 6%, var(--cal-bg)); }
[data-theme="dark"] .day-cell.copa-day { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }

/* Número do dia — centralizado no topo, círculo perfeito */
.day-num {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; aspect-ratio: 1; border-radius: 50%;
  margin: 1px auto 3px; font-size: 12px; font-weight: 500; color: var(--on-surface-var);
  cursor: pointer; transition: background var(--t), color var(--t);
}
.day-cell:hover .day-num { background: var(--state-hover); }
.day-cell.today .day-num { background: var(--primary); color: var(--on-primary); font-weight: 600; }

.cell-events { display: flex; flex-direction: column; gap: 1px; }

/* Evento COM HORÁRIO = dot + hora + texto (Google Calendar atual) */
.event-item {
  display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 6px; border-radius: 6px;
  cursor: pointer; overflow: hidden; max-width: 100%; transition: background var(--t);
}
.event-item:hover { background: var(--state-hover); }
.event-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--dot, var(--primary)); }
.event-dot.stroke { background: transparent; box-shadow: inset 0 0 0 2px var(--dot); }
/* só um estágio (legenda OU arte) pronto: contorno + miolo translúcido */
.event-dot.stroke.partial { background: color-mix(in srgb, var(--dot) 45%, transparent); }
.event-time { font-size: 12px; color: var(--on-surface-var); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.event-text { font-size: 12px; color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* publicado = recua (dessaturado, menor atenção) */
.event-check { width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; background: var(--dot, var(--primary)); color: #fff; display: flex; align-items: center; justify-content: center; filter: saturate(.7); }
.event-check svg { width: 8px; height: 8px; }
.event-item.published { opacity: .6; }
.event-item.published .event-time, .event-item.published .event-text { color: var(--on-surface-dim); text-decoration: line-through; text-decoration-color: var(--on-surface-dim); }
.event-chip.published { filter: grayscale(.6) brightness(.94); }
[data-theme="dark"] .event-chip.published { filter: grayscale(.55) brightness(.72); }
/* dia inteiro incompleto = só contorno */
.event-chip.incomplete { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--cc); }
.event-chip.incomplete .chip-label { color: var(--on-surface) !important; }

/* Evento de DIA INTEIRO = barra preenchida */
.event-chip {
  display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px;
  font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: filter var(--t); max-width: 100%;
}
.event-chip:hover { filter: brightness(1.06); }
[data-theme="dark"] .event-chip:hover { filter: brightness(1.18); }
.chip-label { overflow: hidden; text-overflow: ellipsis; flex: 1; }

.more-link { font-size: 11px; font-weight: 500; color: var(--on-surface-dim); padding: 1px 5px; cursor: pointer; border-radius: 5px; display: inline-block; transition: background var(--t); }
.more-link:hover { background: var(--state-hover); color: var(--primary); }

/* ══ WEEK VIEW — timeline por horas ══ */
.wk-gutter-w { width: 56px; }

.wk-head {
  display: grid; grid-template-columns: 56px repeat(var(--ncols, 7), 1fr);
  border-bottom: 1px solid var(--outline); flex-shrink: 0;
}
.wk-corner { }
.wk-dayhead { text-align: center; padding: 8px 2px 6px; border-left: 1px solid var(--outline); }
.wk-dow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--on-surface-dim); }
.wk-dnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; aspect-ratio: 1; border-radius: 50%; margin-top: 3px;
  font-size: 16px; font-weight: 400; color: var(--on-surface);
}
.wk-dayhead.today .wk-dnum { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.wk-dayhead.today .wk-dow { color: var(--primary); }

.wk-allday {
  display: grid; grid-template-columns: 56px repeat(var(--ncols, 7), 1fr);
  border-bottom: 1px solid var(--outline); flex-shrink: 0; min-height: 26px;
}
.wk-liturgico { background: color-mix(in srgb, #6a4fb0 6%, transparent); }
.wk-santos { background: color-mix(in srgb, #7e6a52 7%, transparent); }
.wk-allday-label { font-size: 10px; color: var(--on-surface-dim); text-align: right; padding: 5px 6px 0 0; line-height: 1.2; align-self: start; font-weight: 600; }
.wk-allday-label.lit { color: #8a6fd0; }
.wk-allday-label.san { color: #a08763; }
/* min-width:0 + overflow impede o chip de vazar pra colunas vizinhas */
.wk-allday-col { border-left: 1px solid var(--outline); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.wk-allday-col .event-chip { max-width: 100%; min-width: 0; }

.wk-scroll { flex: 1; overflow-y: auto; display: flex; scrollbar-width: none; }
.wk-scroll::-webkit-scrollbar { width: 0; display: none; }

.wk-gutter { width: 56px; flex-shrink: 0; position: relative; }
.wk-hour { position: relative; }
.wk-hour span { position: absolute; top: -7px; right: 8px; font-size: 10px; color: var(--on-surface-dim); font-variant-numeric: tabular-nums; }

.wk-cols { flex: 1; display: grid; grid-template-columns: repeat(var(--ncols, 7), 1fr); }
.wk-col { position: relative; border-left: 1px solid var(--outline); cursor: cell; }
.wk-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--outline); opacity: .55; pointer-events: none; }
/* bloco-fantasma do drag-to-create (cor/borda vêm inline conforme a lente) */
.wk-dragsel { position: absolute; left: 1px; right: 3px; border-radius: 7px; z-index: 7; pointer-events: none; overflow: hidden; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.wk-dragsel span { position: absolute; top: 3px; left: 8px; font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }

.wk-event {
  position: absolute; border-radius: 7px; padding: 3px 7px; overflow: hidden; cursor: pointer;
  font-size: 11px; line-height: 1.25; box-shadow: 0 1px 2px rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: 1px; transition: filter var(--t);
}
.wk-event:hover { filter: brightness(1.06); z-index: 5; }
[data-theme="dark"] .wk-event:hover { filter: brightness(1.18); }
.wk-ev-time { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .9; }
.wk-ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* estados de produção no bloco da semana */
.wk-event.published { filter: grayscale(.85) brightness(.96); opacity: .68; }
[data-theme="dark"] .wk-event.published { filter: grayscale(.8) brightness(.72); opacity: .7; }
.wk-event.published .wk-ev-title { text-decoration: line-through; text-decoration-thickness: 1px; }
.wk-ev-check { position: absolute; top: 3px; right: 4px; width: 14px; height: 14px; border-radius: 50%; background: rgba(0,0,0,.32); color: #fff; display: flex; align-items: center; justify-content: center; }
.wk-ev-check svg { width: 9px; height: 9px; }
.wk-event.incomplete { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--cc); color: var(--on-surface) !important; }
/* só um estágio (legenda OU arte) pronto: mantém o contorno e adiciona preenchimento leve */
.wk-event.incomplete.partial { background: color-mix(in srgb, var(--cc) 20%, transparent) !important; }
.wk-event.incomplete .wk-ev-time { opacity: 1; color: var(--on-surface-var); }
.wk-now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--primary); z-index: 4; }
.wk-now-line::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }

/* ══ AGENDA VIEW ══ */
.agenda-wrap { flex: 1; overflow-y: auto; }
.agenda-daygroup { }
.agenda-day-header {
  position: sticky; top: 0; background: var(--surface); z-index: 5;
  display: flex; align-items: center; gap: 16px; padding: 14px 24px 8px; border-bottom: 1px solid var(--outline);
}
.agenda-dn { font-size: 26px; font-weight: 300; color: var(--on-surface); min-width: 44px; }
.agenda-dn.today-dn { font-size: 20px; font-weight: 500; background: var(--primary); color: var(--on-primary); border-radius: 50%; width: 44px; height: 44px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.agenda-dm { font-size: 11px; font-weight: 500; color: var(--on-surface-dim); text-transform: uppercase; }
.agenda-dy { font-size: 12px; color: var(--on-surface-dim); }
.agenda-evrow { display: flex; align-items: flex-start; padding: 10px 24px; cursor: pointer; transition: background var(--t); gap: 14px; border-bottom: 1px solid var(--outline); }
.agenda-evrow:hover { background: var(--cell-hover); }
.agenda-evtime { font-size: 12px; font-weight: 700; color: var(--on-surface-var); min-width: 46px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.agenda-evstripe { width: 4px; border-radius: 2px; align-self: stretch; min-height: 22px; flex-shrink: 0; }
.agenda-evbody { flex: 1; min-width: 0; }
.agenda-evtitle { font-size: 14px; font-weight: 400; color: var(--on-surface); }
.agenda-evrow.published { opacity: .58; }
.agenda-evrow.published .agenda-evtitle { text-decoration: line-through; text-decoration-color: var(--on-surface-dim); }
.agenda-pub-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 7px 1px 5px; border-radius: 9px; background: var(--surface-2); color: var(--on-surface-var); font-size: 10.5px; font-weight: 500; vertical-align: 1px; text-decoration: none; }
.agenda-pub-badge svg { width: 10px; height: 10px; }
.agenda-evmeta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
.meta-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 10px; font-size: 10px; font-weight: 500; }
.meta-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 10px; background: var(--surface-2); color: var(--on-surface-var); }

/* ══ DETAIL PANEL ══ */
.detail-panel {
  position: fixed; top: var(--topbar-h); right: calc(-1 * var(--panel-w)); width: var(--panel-w); bottom: 0; z-index: 50;
  background: var(--surface); border-left: 1px solid var(--outline); box-shadow: var(--shadow-panel);
  display: flex; flex-direction: column; overflow: hidden; transition: right var(--t);
}
.detail-panel.open { right: var(--rail-w); }
.detail-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--outline); flex-shrink: 0; }
.detail-type-chip { height: 28px; padding: 0 14px; border-radius: 14px; font-size: 12px; font-weight: 500; display: flex; align-items: center; }
.detail-scroll { flex: 1; overflow-y: auto; padding-bottom: 24px; }

.detail-bread { padding: 16px 20px 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bread-item { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 500; }
.bread-dot { width: 7px; height: 7px; border-radius: 2px; }
.bread-sep { color: var(--on-surface-dim); }

.detail-title { padding: 10px 20px 4px; font-size: 20px; font-weight: 400; color: var(--on-surface); line-height: 1.3; }

/* Stepper de etapas de produção */
.stepper { display: flex; align-items: center; padding: 12px 20px 4px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.step-dot {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; border: 2px solid var(--outline-var); color: var(--on-surface-dim);
  background: transparent;
}
.step.done .step-dot { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.step-lbl { font-size: 10px; color: var(--on-surface-dim); white-space: nowrap; }
.step.done .step-lbl { color: var(--on-surface-var); font-weight: 500; }
.step-line { flex: 1; height: 2px; background: var(--outline); margin: 0 4px 16px; min-width: 12px; }

/* Bloco de briefing */
.brief-block { margin: 14px 20px 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 3px solid var(--primary); }
.brief-label { font-size: 10px; font-weight: 600; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.brief-text { font-size: 13px; color: var(--on-surface); line-height: 1.55; white-space: pre-wrap; }

/* Toggles de produção (editor) */
.prod-toggles { display: flex; gap: 18px; }
.prod-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--on-surface); cursor: pointer; }
.prod-toggle input { accent-color: var(--primary); width: 16px; height: 16px; }
.prod-hint { font-size: 11px; color: var(--on-surface-dim); margin-top: 8px; }

/* Preview da mídia */
.media-preview { margin: 14px 20px 4px; }
.preview-frame {
  border-radius: 12px; border: 1px solid var(--outline); overflow: hidden; position: relative;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  max-height: 320px; margin: 0 auto; width: 100%;
}
.preview-frame.r-square    { aspect-ratio: 1 / 1; max-width: 280px; }
.preview-frame.r-portrait  { aspect-ratio: 9 / 16; max-width: 200px; }
.preview-frame.r-wide      { aspect-ratio: 16 / 9; max-width: 100%; }
.preview-glyph { color: var(--on-surface-dim); opacity: .5; }
.preview-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-frame.img-broken { background: var(--surface-2); }
.preview-frame.img-broken::after { content: 'imagem não carregou — confira o link'; font-size: 11px; color: var(--on-surface-dim); padding: 0 12px; text-align: center; }
.preview-badge {
  position: absolute; bottom: 8px; left: 8px; height: 22px; padding: 0 10px; border-radius: 11px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 500; display: flex; align-items: center; gap: 5px;
}
.preview-carousel-dots { position: absolute; top: 8px; right: 8px; display: flex; gap: 3px; }
.preview-carousel-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.7); }
.preview-empty-note { font-size: 11px; color: var(--on-surface-dim); text-align: center; margin-top: 6px; font-style: italic; }

/* Legenda (caption) */
.caption-block { margin: 14px 20px 4px; }
.caption-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.caption-label { font-size: 10px; font-weight: 600; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .5px; }
.caption-copy { font-size: 11px; color: var(--primary); background: none; border: none; cursor: pointer; font-family: var(--font); font-weight: 500; }
.caption-copy:hover { text-decoration: underline; }
.caption-box {
  background: var(--surface-2); border-radius: 10px; padding: 12px 14px; font-size: 13px;
  color: var(--on-surface); line-height: 1.55; white-space: pre-wrap; border: 1px solid var(--outline);
}
.caption-box.empty { color: var(--on-surface-dim); font-style: italic; }

.detail-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 20px 0; font-size: 13px; }
.detail-ico { width: 18px; flex-shrink: 0; color: var(--on-surface-dim); margin-top: 1px; display: flex; justify-content: center; }
.detail-val { flex: 1; color: var(--on-surface-var); line-height: 1.5; }
.detail-lbl { display: block; font-size: 10px; font-weight: 600; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }

.detail-divider { border: none; border-top: 1px solid var(--outline); margin: 14px 20px; }

.santo-card { margin: 8px 20px 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--outline); }
.santo-name { font-size: 14px; font-weight: 500; color: var(--on-surface); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.santo-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.santo-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.santo-badge { padding: 3px 8px; border-radius: 8px; font-size: 11px; background: var(--surface); color: var(--on-surface-var); border: 1px solid var(--outline); }

.chip-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 8px; font-size: 11px; background: var(--surface-2); color: var(--on-surface-var); }

.status-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 500; }
.status-planejado { background: color-mix(in srgb, #34a853 18%, var(--surface)); color: #1e8e3e; }
.status-rascunho  { background: color-mix(in srgb, #f9ab00 20%, var(--surface)); color: #b06000; }
.status-publicado { background: var(--primary-cont); color: var(--on-primary-cont); }
[data-theme="dark"] .status-planejado { color: #81c995; }
[data-theme="dark"] .status-rascunho  { color: #fdd663; }

.detail-desc { margin: 8px 20px 0; padding: 10px 14px; border-radius: 9px; background: var(--surface-2); font-size: 12px; color: var(--on-surface-var); line-height: 1.6; border-left: 3px solid var(--outline); }
.detail-desc.highlight { border-left-color: var(--primary); background: var(--primary-cont); color: var(--on-primary-cont); }

/* ════ DRAWER EDITÁVEL (edição inline do evento) ════ */
.detail-title-edit {
  display: block; width: calc(100% - 40px); box-sizing: border-box; margin: 10px 20px 4px;
  padding: 5px 9px; font-family: var(--font); font-size: 20px; font-weight: 400; color: var(--on-surface);
  line-height: 1.3; background: transparent; border: 1px solid transparent; border-radius: 8px;
  transition: border-color var(--t), background var(--t);
}
.detail-title-edit:hover { border-color: var(--outline); }
.detail-title-edit:focus { outline: none; border-color: var(--primary); background: var(--surface-2); }
.detail-title-edit::placeholder { color: var(--on-surface-dim); }

/* stepper clicável: cada etapa é um botão; avança/foca pelo número */
.stepper-edit .step { background: transparent; border: none; font-family: var(--font); cursor: pointer; padding: 0; }
.stepper-edit .step .step-dot { transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t); }
.stepper-edit .step:hover .step-dot { transform: translateY(-1px); border-color: var(--primary); box-shadow: 0 2px 7px rgba(0,0,0,.13); }
.stepper-edit .step:active .step-dot { transform: translateY(0); }
.stepper-edit .step:hover .step-lbl { color: var(--on-surface-var); }

.inl-block { margin: 14px 20px 4px; }
.inl-label { font-size: 10px; font-weight: 600; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.inl-label-row { display: flex; align-items: center; justify-content: space-between; }
.inl-area {
  display: block; width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 13px;
  color: var(--on-surface); line-height: 1.55; background: var(--surface-2); border: 1px solid var(--outline);
  border-radius: 12px; padding: 12px 14px; resize: vertical; transition: border-color var(--t), box-shadow var(--t);
}
.inl-area.brief { border-left: 3px solid var(--primary); }
.inl-area:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.inl-area::placeholder { color: var(--on-surface-dim); }

.inl-config { margin: 4px 20px; display: flex; flex-direction: column; gap: 10px; }
.cfg-row { display: flex; gap: 10px; align-items: flex-end; }
.cfg-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cfg-field > span { font-size: 10px; font-weight: 600; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .5px; }
.cfg-field input, .cfg-field select {
  width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 13px; color: var(--on-surface);
  background: var(--surface-2); border: 1px solid var(--outline); border-radius: 9px; padding: 8px 10px;
  transition: border-color var(--t);
}
.cfg-field input:focus, .cfg-field select:focus { outline: none; border-color: var(--primary); }
/* selects minimalistas — remove o relevo/sombra nativo do SO e usa um caret próprio */
.cfg-field select, .field select, .set-field select, .out-row select, .nf-field select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a948a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 11px;
  padding-right: 30px; cursor: pointer; text-overflow: ellipsis;
}
.cfg-field select::-ms-expand, .field select::-ms-expand, .set-field select::-ms-expand, .out-row select::-ms-expand { display: none; }
.cfg-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--on-surface-var); white-space: nowrap; padding-bottom: 9px; }
.cfg-check input { accent-color: var(--primary); width: 15px; height: 15px; }

.inl-del {
  display: flex; align-items: center; gap: 7px; margin: 18px 20px 6px; padding: 8px 13px;
  background: transparent; border: 1px solid var(--outline); border-radius: 9px; color: #c0312b;
  font-family: var(--font); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.inl-del:hover { background: color-mix(in srgb, #c0312b 10%, transparent); border-color: #c0312b; }
.inl-foot { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 20px 6px; }
.inl-foot .inl-del { margin: 0; }
.inl-savemodel {
  display: flex; align-items: center; gap: 7px; padding: 8px 13px;
  background: transparent; border: 1px solid var(--outline); border-radius: 9px; color: var(--on-surface-var);
  font-family: var(--font); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.inl-savemodel:hover { background: var(--surface-2); border-color: var(--primary); color: var(--on-surface); }
.inl-savemodel svg { color: var(--primary); }

/* ── Hub de Modelos ── */
.models-daterow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 14px 0 4px; }
.models-datelbl { font-size: 12px; font-weight: 600; color: var(--on-surface-var); }
.models-daterow input[type=date] { font-family: var(--font); font-size: 13px; color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline-var); border-radius: 9px; padding: 7px 10px; outline: none; }
.models-daterow input[type=date]:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.models-datehint { font-size: 11.5px; color: var(--on-surface-dim); flex: 1 1 160px; min-width: 0; }
.models-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.model-card { display: flex; align-items: stretch; border: 1px solid var(--outline-var); border-radius: 12px; overflow: hidden; transition: border-color var(--t); }
.model-card:hover { border-color: var(--primary); }
.model-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px 14px; background: transparent; border: none; cursor: pointer; font-family: var(--font); text-align: left; }
.model-main:hover { background: var(--surface-2); }
.model-name { font-size: 14px; font-weight: 600; color: var(--on-surface); }
.model-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.model-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--on-surface-var); }
.model-badge.bg-c { background: #6a4fb022; color: #6a4fb0; }
.model-badge.bg-m { background: #2e7d9a22; color: #2e7d9a; }
.model-badge.bg-t { background: #2e9e5b22; color: #2e8f54; }
.model-del { flex-shrink: 0; width: 42px; border: none; border-left: 1px solid var(--outline-var); background: transparent; color: var(--on-surface-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t), color var(--t); }
.model-del:hover { background: color-mix(in srgb, #c0312b 10%, transparent); color: #c0312b; }
.model-del svg { width: 14px; height: 14px; }
.models-empty { text-align: center; color: var(--on-surface-dim); font-size: 13px; line-height: 1.6; padding: 24px 12px; }

/* CTA "criar conteúdo" */
.detail-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 40px); margin: 16px 20px 4px; height: 42px; border: none; border-radius: 21px; background: var(--primary); color: var(--on-primary); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; transition: filter var(--t); }
.detail-cta:hover { filter: brightness(1.08); }

/* Day popover */
.day-popover { position: fixed; z-index: 60; width: 280px; max-height: 420px; overflow-y: auto; background: var(--surface); border: 1px solid var(--outline); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 12px; }
.day-popover-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.day-popover-date { font-size: 14px; font-weight: 500; color: var(--on-surface); }
.day-popover-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; transition: background var(--t); }
.day-popover-row:hover { background: var(--state-hover); }
.day-popover-time { font-size: 11px; font-weight: 700; color: var(--on-surface-var); min-width: 38px; font-variant-numeric: tabular-nums; }
.day-popover-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.day-popover-title { font-size: 12px; color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.overlay { display: none; position: fixed; inset: 0; z-index: 55; }
.overlay.visible { display: block; }

/* ══ GATE DE LOGIN / ONBOARDING (tela cheia) ══ */
.gate {
  position: fixed; inset: 0; z-index: 400; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--chrome);
}
.gate::before {
  content: ''; position: absolute; inset: -50px; z-index: 0;
  background: url('bg-login.jpg') center/cover no-repeat;
  filter: blur(11px) brightness(.42) saturate(1.15);
  transform: translate(var(--mx, 0), var(--my, 0)) scale(1.08);
  transition: transform .35s cubic-bezier(.2,0,0,1);
  will-change: transform;
}
.gate-card { position: relative; z-index: 1; }
.gate-logo { width: min(220px, 64%); display: block; margin: 0 auto 22px; animation: ordoIn .75s cubic-bezier(.2,.8,.2,1.2) both; }
@keyframes ordoIn {
  0%   { opacity: 0; transform: scale(.55) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
/* Co-branding: Ordo (esq) | divisória | Hub Católico (dir, tom creme) */
.cobrand { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 auto 24px; animation: ordoIn .7s cubic-bezier(.2,.8,.2,1.2) both; }
.cobrand-ordo { height: 42px; width: auto; display: block; }
.cobrand-div  { width: 1px; height: 42px; background: rgba(249,245,232,.28); flex: 0 0 auto; }
.cobrand-hub  { height: 42px; width: auto; display: block; opacity: .9; }

/* ══ SPLASH de abertura — animação da marca Ordo ══ */
#ordo-splash { position: fixed; inset: 0; z-index: 600; display: none; align-items: center; justify-content: center; background: #16161a; cursor: pointer; }
#ordo-splash.done { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.splash-stage { position: relative; width: min(340px, 62vw); }
.sp-bubbles { width: 100%; height: auto; display: block; overflow: visible; }
.sp-type { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.sp-b { transform-box: fill-box; transform-origin: center; opacity: 0; }
#ordo-splash.run .sp-b  { animation: bubPop .55s cubic-bezier(.34,1.56,.64,1) forwards; }
#ordo-splash.run .sp-b1 { animation-delay: .12s; }
#ordo-splash.run .sp-b2 { animation-delay: .27s; }
#ordo-splash.run .sp-b3 { animation-delay: .42s; }
#ordo-splash.run .sp-b4 { animation-delay: .57s; }
@keyframes bubPop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
#ordo-splash.run .sp-bubbles { animation: spShake .85s ease 1.18s 1, spBubbleOut .5s ease 1.78s forwards; }
@keyframes spShake {
  0%,100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-9px) rotate(-1.4deg); }
  32% { transform: translateX(8px) rotate(1.1deg); }
  50% { transform: translateX(-6px) rotate(-.7deg); }
  68% { transform: translateX(4px) rotate(.4deg); }
  84% { transform: translateX(-2px); }
}
@keyframes spBubbleOut { to { opacity: 0; } }
#ordo-splash.run .sp-type { animation: typeWipe .8s cubic-bezier(.5,0,.1,1) 1.82s forwards; }
@keyframes typeWipe { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
.gate-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--on-surface-dim); font-size: 12px; }
.gate-or::before, .gate-or::after { content: ''; flex: 1; height: 1px; background: var(--outline); }
.gate-google {
  width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--outline-var); border-radius: 23px; background: var(--surface);
  color: var(--on-surface); font-family: var(--font); font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background var(--t);
}
.gate-google:hover { background: var(--surface-2); }
.gate-about { display: block; text-align: center; margin-top: 16px; color: var(--on-surface-dim); font-size: 13px; text-decoration: none; }
.gate-about:hover { color: var(--on-surface); text-decoration: underline; }
.gate-card {
  width: min(420px, 94vw); background: var(--surface); border-radius: 28px;
  box-shadow: 0 12px 48px rgba(0,0,0,.18); padding: 32px 28px 28px; text-align: center;
}
.gate-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; color: var(--on-surface-var); margin-bottom: 18px; }
.gate-brand .brand-mark { width: 32px; height: 32px; }
.gate-title { font-size: 24px; font-weight: 500; color: var(--on-surface); line-height: 1.25; margin-bottom: 8px; }
.gate-sub { font-size: 14px; color: var(--on-surface-var); line-height: 1.5; margin-bottom: 20px; }
.gate-input {
  width: 100%; height: 46px; padding: 0 14px; margin-bottom: 10px; border: 1px solid var(--outline-var);
  border-radius: 12px; background: var(--surface); color: var(--on-surface); font-family: var(--font);
  font-size: 15px; outline: none; transition: border-color var(--t);
}
.gate-input:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.gate-btn { width: 100%; height: 46px; margin-top: 6px; border-radius: 23px; font-size: 15px; justify-content: center; }
.gate .auth-tabs { margin-bottom: 14px; }
.gate .auth-msg { text-align: left; }
.ob-list { text-align: left; list-style: none; margin: 6px 0 18px; padding: 0; }
.ob-list li { font-size: 14px; color: var(--on-surface-var); padding: 8px 0 8px 28px; position: relative; line-height: 1.4; }
.ob-list li::before { content: ''; position: absolute; left: 4px; top: 12px; width: 8px; height: 8px; border-radius: 3px; }
.ob-list li:nth-child(1)::before { background: #7e6a52; }
.ob-list li:nth-child(2)::before { background: #6a4fb0; }

/* dia selecionado (clique no número) */
.day-cell.selected:not(.today) .day-num { box-shadow: 0 0 0 2px var(--primary); color: var(--primary); font-weight: 600; }

/* ══ PAINEL MARTIROLÓGIO (lateral direito) ══ */
.mart-head { display: flex; flex-direction: column; line-height: 1.2; }
.mart-title { font-size: 15px; font-weight: 600; color: var(--on-surface); }
.mart-date { font-size: 12px; color: var(--on-surface-dim); margin-top: 2px; }
.mart-scroll { flex: 1; overflow-y: auto; padding: 16px 20px; }
.mart-section {
  font-size: 11px; font-weight: 600; color: var(--on-surface-dim); text-transform: uppercase;
  letter-spacing: .5px; margin: 16px 0 8px;
}
.mart-section:first-child { margin-top: 0; }
.mart-item {
  padding: 10px 12px; border-radius: 12px; background: var(--surface-2);
  border-left: 3px solid var(--primary); margin-bottom: 8px;
}
.mart-item.lit { border-left-color: #6a4fb0; }
.mart-item-name { font-size: 14px; font-weight: 500; color: var(--on-surface); line-height: 1.4; }
.mart-item-sub { font-size: 12px; color: var(--on-surface-dim); margin-top: 3px; }
.mart-empty { font-size: 13px; color: var(--on-surface-dim); font-style: italic; padding: 8px 0; }
.mart-note { font-size: 11px; color: var(--on-surface-dim); margin-top: 16px; line-height: 1.5; }
.mart-foot { flex-shrink: 0; padding: 12px 16px; border-top: 1px solid var(--outline); }
.mart-foot .btn-text { width: 100%; justify-content: center; }

/* mídia nativa contextual (não-grosseira) */
.mart-promo { display: block; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--outline); text-decoration: none; color: var(--on-surface); transition: background var(--t); }
.mart-promo:hover { background: var(--cal-cell-hover); }
.mart-promo-eyebrow { font-size: 10px; font-weight: 600; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.mart-promo-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 1.4; }
.mart-promo-row svg { color: var(--on-surface-dim); flex-shrink: 0; }

/* slot de mídia no rodapé da sidebar */
.hub-promo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--outline); text-decoration: none; transition: background var(--t); }
.hub-promo:hover { background: var(--cal-cell-hover); }
.hub-promo-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--primary); background: var(--primary-cont); border-radius: 6px; padding: 3px 6px; flex-shrink: 0; }
.hub-promo-text { font-size: 12px; color: var(--on-surface-var); flex: 1; line-height: 1.35; }

/* ══ EDITOR DE EVENTO (modal M3) ══ */
.editor-back {
  position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: edfade var(--t);
}
@keyframes edfade { from { opacity: 0; } to { opacity: 1; } }
.editor {
  width: min(580px, 94vw); max-height: 90vh; overflow-y: auto;
  background: var(--surface); color: var(--on-surface); border-radius: 28px;
  box-shadow: 0 8px 40px rgba(0,0,0,.4); padding: 22px 24px 18px;
  scrollbar-width: none;
}
.editor::-webkit-scrollbar { display: none; }
.ed-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ed-head h2 { font-size: 20px; font-weight: 500; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 11px; font-weight: 600; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font); font-size: 14px; color: var(--on-surface);
  background: var(--surface); border: 1px solid var(--outline-var); border-radius: 12px;
  padding: 10px 12px; outline: none; transition: border-color var(--t), box-shadow var(--t);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.field textarea { resize: vertical; line-height: 1.5; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

/* ── Campo com botão de copiar interno (canto sup. direito) ── */
.fld { position: relative; display: block; width: 100%; }
.fld > input, .fld > textarea, .fld > .caption-box { width: 100%; box-sizing: border-box; padding-right: 38px; }
.fld-title .detail-title-edit { padding-right: 42px; }
.fld-copy {
  position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 7px; background: transparent; color: var(--on-surface-dim);
  cursor: pointer; opacity: .55; z-index: 2;
  transition: background var(--t), color var(--t), opacity var(--t), transform var(--t);
}
.fld-copy:hover { background: var(--state-hover); color: var(--on-surface); opacity: 1; }
.fld-copy:active { transform: scale(.9); }
.fld-copy svg { width: 14px; height: 14px; }
.fld-copy.done { color: #2e9e5b; opacity: 1; }

/* ── Bloco de SAÍDAS (peça → várias mídias) ── */
.out-block > span { display: block; font-size: 11px; font-weight: 600; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.out-master { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.out-mlbl { font-size: 12px; font-weight: 600; color: var(--on-surface-var); }
.out-master input { font-family: var(--font); font-size: 13px; color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline-var); border-radius: 9px; padding: 6px 9px; }
.out-mhint { font-size: 11px; color: var(--on-surface-dim); }
.out-list { display: flex; flex-direction: column; gap: 8px; }
.out-empty { font-size: 13px; color: var(--on-surface-dim); padding: 12px 4px; line-height: 1.5; }
.out-row { display: flex; flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; border-radius: 11px; padding: 7px 9px; box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--net) 30%, var(--outline)); border-left: 3px solid var(--net);
  background: color-mix(in srgb, var(--net) 9%, var(--surface-2)); }
[data-theme="dark"] .out-row { border-color: color-mix(in srgb, var(--net) 38%, var(--outline)); background: color-mix(in srgb, var(--net) 17%, var(--surface-2)); }
.out-row.is-anchor { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f3c613 60%, transparent); }
.out-net { flex-shrink: 0; display: inline-flex; }
.out-net .redes-logo { width: 21px; height: 21px; }
.out-row select, .out-row input { font-family: var(--font); font-size: 12.5px; color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline-var); border-radius: 8px; padding: 6px 8px; min-width: 0; box-sizing: border-box; }
.out-fmt { flex: 1 1 92px; min-width: 0; font-weight: 500; }
.out-chan { flex: 1 1 116px; min-width: 0; }
.out-date { flex: 0 0 130px; }
.out-time { flex: 0 0 92px; }
.out-anchor, .out-del { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--on-surface-dim); transition: background var(--t), color var(--t); }
.out-anchor svg { width: 16px; height: 16px; }
.out-anchor { fill: none; }
.out-anchor:hover, .out-del:hover { background: var(--state-hover); }
.out-anchor.on { color: #d6a400; fill: #f3c613; }
.out-del { font-size: 19px; line-height: 1; }
.out-del:hover { color: #c5221f; }
.out-del:disabled { opacity: .3; cursor: default; }
.out-add { margin-top: 9px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--primary); background: none; border: 1px dashed var(--outline); border-radius: 9px; padding: 8px 12px; cursor: pointer; transition: background var(--t); }
.out-add:hover { background: var(--state-hover); }

/* ── Seletor rede → formato (overlay) ── */
.opick-back { position: fixed; inset: 0; z-index: 1200; background: rgba(20,18,14,.42); display: flex; align-items: center; justify-content: center; padding: 20px; }
.opick { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--outline); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.28); padding: 18px; }
.opick-h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--on-surface); margin-bottom: 14px; }
.opick-h-logo { width: 20px; height: 20px; }
.opick-h-sub { font-weight: 400; color: var(--on-surface-dim); font-size: 13px; }
.opick-bk { width: 26px; height: 26px; border: none; background: var(--surface-2); border-radius: 7px; font-size: 17px; line-height: 1; color: var(--on-surface-var); cursor: pointer; flex-shrink: 0; }
.opick-bk:hover { background: var(--state-hover); }
.opick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opick-net { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--outline); border-radius: 11px; background: var(--surface); font-family: var(--font); font-size: 13.5px; font-weight: 500; color: var(--on-surface); cursor: pointer; transition: background var(--t), border-color var(--t); }
.opick-net:hover { background: var(--state-hover); border-color: var(--outline-var); }
.opick-net .redes-logo { width: 22px; height: 22px; flex-shrink: 0; }
.opick-fmts { grid-template-columns: 1fr 1fr 1fr; }
.opick-fmt { padding: 13px 10px; border: 1px solid var(--outline); border-radius: 11px; background: var(--surface); font-family: var(--font); font-size: 13.5px; font-weight: 500; color: var(--on-surface); cursor: pointer; transition: background var(--t), border-color var(--t); }
.opick-fmt:hover { background: var(--primary-cont); border-color: var(--primary); }

/* ── Painel da peça: status de conclusão + saídas com toggle ── */
.piece-status { display: flex; align-items: center; gap: 8px; margin: 12px 20px 6px; padding: 9px 13px; border-radius: 10px; font-size: 12.5px; font-weight: 500; }
.piece-status.done { background: color-mix(in srgb, #2e9e5b 14%, var(--surface-2)); color: #2e7d46; }
[data-theme="dark"] .piece-status.done { color: #82d6a1; }
.piece-status.producing { background: var(--surface-2); color: var(--on-surface-var); }
.piece-status .ps-ico { display: inline-flex; color: #2e9e5b; }
.piece-status .ps-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0a800; flex-shrink: 0; }
.dd-outs { display: flex; flex-direction: column; gap: 7px; }
.dd-out { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--net) 28%, var(--outline)); border-left: 3px solid var(--net);
  background: color-mix(in srgb, var(--net) 8%, var(--surface-2)); transition: opacity var(--t); }
[data-theme="dark"] .dd-out { background: color-mix(in srgb, var(--net) 16%, var(--surface-2)); }
.dd-out.is-pub { opacity: .62; }
.dd-out-main { min-width: 0; }
.dd-out-name { font-size: 13px; font-weight: 500; color: var(--on-surface); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-out-star { color: #d6a400; fill: #f3c613; display: inline-flex; flex-shrink: 0; }
.dd-out-star svg { width: 13px; height: 13px; }
.dd-out-when { font-size: 11px; color: var(--on-surface-dim); margin-top: 2px; }
.dd-out-st { display: flex; gap: 5px; flex-shrink: 0; }
.dd-st { font-family: var(--font); font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--outline-var); background: var(--surface); color: var(--on-surface-dim); cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t); }
.dd-st:hover { background: var(--state-hover); }
.dd-st.on { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); border-color: transparent; color: var(--primary); }
.dd-st.pub.on { background: color-mix(in srgb, #2e9e5b 20%, var(--surface)); color: #2e7d46; }
[data-theme="dark"] .dd-st.pub.on { color: #82d6a1; }
.dd-st.pubnow { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.dd-st.pubnow:hover { filter: brightness(1.06); background: var(--primary); }
.dd-st.pubnow:disabled { opacity: .6; cursor: default; }
.dd-st.pubnow.done { background: #2e9e5b; border-color: #2e9e5b; }
/* toast global */
#ordo-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); background: var(--on-surface); color: var(--surface); font-size: 13px; font-weight: 500; padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.24); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999; max-width: 82vw; text-align: center; }
#ordo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#ordo-toast.err { background: var(--primary); color: #fff; }
/* campos modulares por rede */
.netg { border: 1px solid var(--outline); border-radius: 10px; margin-top: 8px; overflow: hidden; }
.netg-head { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: none; border: none; cursor: pointer; color: var(--on-surface); text-align: left; }
.netg-head:hover { background: var(--state-hover); }
.netg-logo { width: 18px; height: 18px; }
.netg-title { font-size: 13px; font-weight: 600; }
.netg-miss { font-size: 10.5px; font-weight: 600; color: var(--primary); background: color-mix(in srgb, var(--primary) 13%, transparent); padding: 1px 8px; border-radius: 999px; }
.netg-chev { margin-left: auto; display: flex; color: var(--on-surface-dim); transition: transform .2s; }
.netg-chev svg { display: block; }
.netg.open .netg-chev { transform: rotate(180deg); }
.netg-body { max-height: 0; overflow: hidden; transition: max-height .24s ease; }
.netg.open .netg-body { max-height: 1600px; }
.netg-body-in { padding: 2px 12px 13px; display: flex; flex-direction: column; gap: 11px; }
.nf-field { display: flex; flex-direction: column; gap: 5px; }
.nf-field > label { font-size: 10px; font-weight: 600; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .5px; }
.nf-req { color: var(--primary); }
.nf-field input, .nf-field textarea, .nf-field select { width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 13px; color: var(--on-surface); background-color: var(--surface-2); border: 1px solid var(--outline); border-radius: 9px; padding: 8px 10px; }
.nf-field textarea { resize: vertical; }
.nf-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.nf-toggle input { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
.nf-toggle span { font-size: 12.5px; color: var(--on-surface-var); }
.nf-help { font-size: 10.5px; color: var(--on-surface-dim); }
/* anexar mídia */
.mediaf { margin-top: 6px; }
.mediaf-inset { margin: 14px 20px 4px; }   /* alinha com os campos .inl-block (recuo de 20px) na tela de conteúdo */
.mediaup.has .mediaup-empty { display: none; }
.mediaup:not(.has) .mediaup-has { display: none; }
.mediaup-has { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--outline); border-radius: 10px; padding: 9px 12px; }
.mediaup-ico { font-size: 16px; }
.mediaup-name { flex: 1; font-size: 12.5px; color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mediaup-view { font-size: 11.5px; color: var(--primary); text-decoration: none; }
.mediaup-rm { border: none; background: none; color: var(--on-surface-dim); cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 6px; }
.mediaup-rm:hover { background: var(--state-hover); color: var(--on-surface); }
.mediaup-empty { display: flex; flex-direction: column; gap: 6px; }
.mediaup-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; justify-content: center; font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--on-surface-var); background: var(--surface-2); border: 1px dashed var(--outline); border-radius: 9px; padding: 8px 13px; cursor: pointer; transition: background var(--t), border-color var(--t); }
.mediaup-btn:hover { background: var(--state-hover); border-color: var(--primary); }
.mediaup-attachrow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.mediaup-imp { display: inline-flex; align-items: center; justify-content: center; width: 40px; background: var(--surface-2); border: 1px solid var(--outline-var); border-radius: 9px; padding: 0; cursor: pointer; transition: background var(--t), border-color var(--t); }
.mediaup-imp:hover { background: var(--state-hover); border-color: var(--primary); }
.mediaup-imp img { width: 18px; height: 18px; display: block; }
.mediaup-imp svg { width: 16px; height: 16px; color: var(--on-surface-var); }
.mediaup-imp:hover svg { color: var(--primary); }
.mediaup-linkrow { margin-top: 6px; }
/* Seletor do Google Drive (Picker) acima do modal do evento (z 1300) */
.picker-dialog-bg { z-index: 2000 !important; }
.picker-dialog { z-index: 2001 !important; }
.mediaup .linkish { align-self: flex-start; border: none; background: none; color: var(--on-surface-dim); font-size: 11.5px; cursor: pointer; text-decoration: underline; padding: 0; }
.mediaup-linkrow input { width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 13px; color: var(--on-surface); background: var(--surface-2); border: 1px solid var(--outline); border-radius: 9px; padding: 8px 10px; }
.mediaup-status { font-size: 11.5px; color: var(--on-surface-dim); margin-top: 5px; }
/* modal do evento — limpo e orgânico (sem divisões) */
#evm-root:empty { display: none; }
.evm-back { position: fixed; inset: 0; z-index: 1200; background: rgba(24,22,19,.5); display: flex; align-items: center; justify-content: center; padding: 3vh 16px; animation: evmfade .15s ease; }
[data-theme="dark"] .evm-back { background: rgba(0,0,0,.62); }
@keyframes evmfade { from { opacity: 0; } to { opacity: 1; } }
.evm { width: min(780px, 96vw); height: min(88vh, 940px); background: var(--surface); border-radius: 18px; box-shadow: 0 26px 72px rgba(0,0,0,.34); display: flex; flex-direction: column; overflow: hidden; }
.evm-head { position: relative; display: flex; justify-content: center; padding: 16px 52px 10px; }
.evm-head-c { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; }
.evm-titlerow { display: flex; align-items: center; gap: 4px; max-width: 100%; }
.evm-chev { border: none; background: none; color: var(--on-surface-dim); cursor: pointer; padding: 2px; display: flex; border-radius: 8px; }
.evm-chev:hover { color: var(--on-surface); }
.evm-chev:disabled { opacity: .28; cursor: default; }
.evm-title { border: none; background: none; text-align: center; font-family: var(--font); font-size: 18px; font-weight: 600; color: var(--on-surface); padding: 2px 4px; border-radius: 6px; min-width: 6ch; }
.evm-title:focus { outline: none; background: var(--surface-2); }
.evm-date { font-size: 12px; color: var(--on-surface-dim); font-weight: 500; }
.evm-x { position: absolute; top: 13px; right: 14px; }
.evm-body { flex: 1; display: flex; min-height: 0; }
.evm-rail { width: 56px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 12px; }
.evm-railbtn { width: 44px; height: 44px; border: none; background: none; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--on-surface-dim); transition: background .15s, opacity .15s; }
.evm-railbtn:hover { background: var(--state-hover); }
.evm-railbtn.sel { background: var(--state-hover); }
.evm-railbtn.evm-railcontent.sel { color: var(--primary); }
.evm-railprod { position: relative; }
.evm-railprod.on { color: var(--on-surface-var); }
.evm-railbtn.evm-railprod.sel { color: var(--primary); }
.evm-railbadge { position: absolute; top: 4px; right: 4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; }
.prodscreen-ico { display: inline-flex; color: var(--on-surface-var); }
.tk2-empty { font-size: 12.5px; color: var(--on-surface-dim); padding: 6px 0 2px; }
.evm-railbtn .redes-logo { width: 22px; height: 22px; }
.evm-railnet.off { opacity: .3; }
.evm-railnet.off .redes-logo { background: var(--on-surface-dim) !important; }
.evm-railnet.off:hover { opacity: .55; }
.evm-main { flex: 1; overflow-y: auto; padding: 4px 24px 22px; }
.evm-screen[hidden] { display: none; }
/* saídas reduzidas (tela geral) */
.rsaidas { display: flex; flex-direction: column; border: 1px solid var(--outline); border-radius: 12px; overflow: hidden; }
.rsaida { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 13px; border: none; border-bottom: 1px solid var(--outline); background: none; font-family: var(--font); cursor: default; text-align: left; }
.rsaida:last-child { border-bottom: none; }
.rsaida.on { cursor: pointer; }
.rsaida.on:hover { background: var(--state-hover); }
.rsaida .redes-logo { width: 19px; height: 19px; flex-shrink: 0; }
.rsaida.off .redes-logo { opacity: .4; background: var(--on-surface-dim) !important; }
.rsaida-name { font-size: 13px; font-weight: 500; color: var(--on-surface); }
.rsaida.off .rsaida-name { color: var(--on-surface-dim); }
.rsaida-when { margin-left: auto; font-size: 11.5px; color: var(--on-surface-var); }
.rsaida-go { display: flex; color: var(--on-surface-dim); }
.rsaida-add { margin-left: auto; border: none; background: none; color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer; }
.rsaida-empty { font-size: 13px; color: var(--on-surface-dim); padding: 4px 2px 2px; }
.rsaida-new { margin-top: 9px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--primary); background: none; border: 1px dashed var(--outline); border-radius: 9px; padding: 8px 13px; cursor: pointer; transition: background var(--t); }
.rsaida-new:hover { background: var(--state-hover); }
/* seção Produção (tarefas da peça) dentro do modal — teal da lente Tarefas */
.prodm-list { display: flex; flex-direction: column; }
.prodm-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--outline); }
.prodm-row:last-child { border-bottom: none; }
.prodm-check { flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; border: 1.8px solid #5e8a8f; background: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.prodm-check svg { width: 11px; height: 11px; }
.prodm-check.on { background: #5e8a8f; border-color: #5e8a8f; }
.prodm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; border: none; background: none; font-family: var(--font); text-align: left; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.prodm-body:hover { background: var(--state-hover); }
.prodm-title { font-size: 13px; font-weight: 500; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prodm-meta { font-size: 11px; color: var(--on-surface-var); }
.prodm-row.done .prodm-title { text-decoration: line-through; color: var(--on-surface-dim); }
.prodm-empty { font-size: 12px; color: var(--on-surface-dim); padding: 4px 0 2px; }
.prodm-add { margin-top: 8px; border: none; background: none; color: #5e8a8f; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }
.prodm-add:hover { text-decoration: underline; }

/* ── Editor de Produção (lista multi-tarefa + templates) ── */
.editor.tk2 { width: min(760px, 96vw); }
.tk2-sub { font-size: 12.5px; color: var(--on-surface-dim); margin-top: 2px; }
.tk2-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; }
.tk2-row { display: grid; grid-template-columns: minmax(110px,1.4fr) 132px auto minmax(96px,1fr) auto 28px; align-items: center; gap: 7px; }
.tk2-row > input, .tk2-row .tk2-times input { font-family: var(--font); font-size: 13px; color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline-var); border-radius: 9px; padding: 8px 9px; outline: none; transition: border-color var(--t), box-shadow var(--t); min-width: 0; }
.tk2-row > input:focus, .tk2-row .tk2-times input:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.tk2-times { display: inline-flex; align-items: center; gap: 4px; }
.tk2-times input { width: 84px; }
.tk2-dash { color: var(--on-surface-dim); font-size: 12px; }
@media (max-width: 580px) {
  .tk2-row { grid-template-columns: 1fr 1fr; grid-auto-flow: row; padding: 8px; border: 1px solid var(--outline); border-radius: 12px; }
  .tk2-desc { grid-column: 1 / -1; }
  .tk2-times { grid-column: 1 / -1; }
}
.tk2-status { flex: 0 0 auto; border: 1px solid var(--outline-var); background: var(--surface-2); color: var(--on-surface-var); font-family: var(--font); font-size: 11.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background var(--t), color var(--t), border-color var(--t); }
.tk2-status.st-todo  { background: var(--surface-2); color: var(--on-surface-var); }
.tk2-status.st-doing { background: #e7a23b22; color: #b5791f; border-color: #e7a23b66; }
.tk2-status.st-done  { background: #2e9e5b22; color: #2e8f54; border-color: #2e9e5b66; }
.tk2-del { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--on-surface-dim); border-radius: 7px; cursor: pointer; opacity: .6; transition: background var(--t), opacity var(--t); }
.tk2-del:hover { background: var(--state-hover); opacity: 1; color: #c0392b; }
.tk2-del svg { width: 14px; height: 14px; }
.tk2-add { margin-top: 8px; align-self: flex-start; border: 1px dashed var(--outline-var); background: transparent; color: var(--on-surface-var); font-family: var(--font); font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 10px; cursor: pointer; transition: background var(--t), border-color var(--t); }
.tk2-add:hover { background: var(--surface-2); border-color: var(--primary); }
.tk2-sep { height: 1px; background: var(--outline); margin: 16px 0 12px; }
.tk2-tplhead { font-size: 11px; font-weight: 700; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.tk2-tplhint { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11.5px; color: var(--on-surface-dim); margin-top: 3px; }
.tk2-tpls { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.tk2-tpl { display: inline-flex; align-items: center; border: 1px solid var(--outline-var); border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.tk2-tplapply { border: none; background: none; font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--on-surface); padding: 6px 4px 6px 12px; cursor: pointer; }
.tk2-tplapply em { font-style: normal; font-size: 10.5px; color: var(--on-surface-dim); background: var(--surface); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.tk2-tplapply:hover { color: var(--primary); }
.tk2-tpldel { border: none; background: none; color: var(--on-surface-dim); padding: 4px 8px 4px 4px; cursor: pointer; display: inline-flex; align-items: center; opacity: .5; }
.tk2-tpldel:hover { opacity: 1; color: #c0392b; }
.tk2-tpldel svg { width: 11px; height: 11px; }
.tk2-tplnone { font-size: 12.5px; color: var(--on-surface-dim); }
.tk2-tplsavebtn { border: none; background: none; color: #5e8a8f; font-family: var(--font); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }
.tk2-tplsavebtn:hover { text-decoration: underline; }
.tk2-tplform { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk2-tplform input { flex: 1 1 200px; font-family: var(--font); font-size: 13px; color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline-var); border-radius: 9px; padding: 8px 11px; outline: none; }
.tk2-tplform input:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.tk2-tplform .tk2-tplok { padding: 8px 14px; font-size: 12.5px; }

/* ── combobox "vincular a um post" (busca + filtro projeto + por data) ── */
.linkbox { display: flex; flex-direction: column; gap: 8px; }
.link-search { display: flex; align-items: center; gap: 7px; border: 1px solid var(--outline-var); border-radius: 9px; padding: 0 9px; background: var(--surface); }
.link-search:focus-within { border-color: var(--primary); }
.link-sicon { color: var(--on-surface-dim); flex-shrink: 0; }
.link-search input { flex: 1; border: none; background: none; outline: none; font-family: var(--font); font-size: 13px; color: var(--on-surface); padding: 9px 0; min-width: 0; }
.link-cal { flex-shrink: 0; display: inline-flex; padding: 5px; border: none; background: none; color: var(--on-surface-dim); border-radius: 6px; cursor: pointer; }
.link-cal:hover { background: var(--state-hover); }
.link-cal.on { color: var(--primary); background: var(--primary-cont); }
.link-projs { display: flex; flex-wrap: wrap; gap: 6px; }
.link-proj { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--outline); background: none; border-radius: 999px; padding: 4px 10px; font-family: var(--font); font-size: 11.5px; color: var(--on-surface-var); cursor: pointer; }
.link-proj:hover { background: var(--state-hover); }
.link-proj.on { border-color: var(--primary); background: var(--primary-cont); color: var(--on-surface); font-weight: 500; }
.link-datebar { display: flex; align-items: center; gap: 8px; }
.link-datebar input { font-family: var(--font); font-size: 12.5px; color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline-var); border-radius: 8px; padding: 6px 9px; }
.link-dclear { border: none; background: none; color: var(--on-surface-dim); font-size: 12px; cursor: pointer; }
.link-dclear:hover { color: var(--primary); }
.link-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.link-results { display: flex; flex-direction: column; max-height: 210px; overflow-y: auto; border: 1px solid var(--outline); border-radius: 9px; }
.link-results:empty { display: none; }
.link-res { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: none; border-bottom: 1px solid var(--outline); background: none; font-family: var(--font); text-align: left; cursor: pointer; width: 100%; }
.link-res:last-child { border-bottom: none; }
.link-res:hover { background: var(--state-hover); }
.link-res-t { flex: 1; font-size: 13px; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-res-d { font-size: 11.5px; color: var(--on-surface-dim); flex-shrink: 0; }
.link-none { padding: 11px; font-size: 12.5px; color: var(--on-surface-dim); }
.link-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--outline-var); border-radius: 9px; padding: 8px 11px; background: var(--surface-tint); }
.link-chip-t { flex: 1; font-size: 13px; font-weight: 500; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-x { flex-shrink: 0; display: inline-flex; padding: 3px; border: none; background: none; color: var(--on-surface-dim); border-radius: 6px; cursor: pointer; }
.link-x:hover { background: var(--state-hover); color: #c5221f; }
/* tela específica de rede */
.netscreen-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
.netscreen-logo { width: 24px; height: 24px; }
.netscreen-title { font-size: 16px; font-weight: 600; color: var(--on-surface); }
.ns-outs { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.ns-out { border: 1px solid var(--outline); border-left: 3px solid var(--net, var(--outline)); border-radius: 10px; padding: 10px 12px; }
.ns-out-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ns-out-name { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--on-surface); }
.ns-out-logo { width: 15px; height: 15px; flex-shrink: 0; }
.ns-fmt { font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline-var); border-radius: 7px; padding: 4px 7px; cursor: pointer; }
/* breadcrumb editável + tipos de conteúdo */
.evm-toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.bread-btn { display: inline-flex; align-items: center; gap: 4px; border: none; background: none; cursor: pointer; padding: 3px 5px 3px 3px; border-radius: 8px; }
.bread-btn:hover { background: var(--state-hover); }
.bread-caret { display: flex; color: var(--on-surface-dim); }
.bread-caret svg { width: 13px; height: 13px; }
.ctype-row { display: flex; gap: 2px; flex-shrink: 0; }
.ctype { width: 30px; height: 30px; border: none; background: none; border-radius: 8px; cursor: pointer; color: var(--on-surface-dim); opacity: .45; display: flex; align-items: center; justify-content: center; transition: opacity .15s, color .15s, background .15s; }
.ctype:hover { background: var(--state-hover); opacity: .8; }
.ctype.on { opacity: 1; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.bm-back { position: fixed; inset: 0; z-index: 1300; background: rgba(20,18,16,.4); display: flex; align-items: center; justify-content: center; padding: 4vh 16px; animation: evmfade .15s ease; }
[data-theme="dark"] .bm-back { background: rgba(0,0,0,.5); }
.bm-modal { width: min(380px, 92vw); max-height: 80vh; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.3); overflow: hidden; display: flex; flex-direction: column; }
.bm-head { padding: 15px 18px 8px; font-size: 11px; font-weight: 600; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .5px; }
.bm-list { overflow-y: auto; padding: 4px 8px 12px; }
.bm-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none; font-family: var(--font); font-size: 13.5px; color: var(--on-surface); padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.bm-row:hover { background: var(--state-hover); }
.bm-row.sel { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-weight: 600; }
.bm-sub { padding-left: 28px; }
.bm-swatch { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.bm-divider { font-size: 10px; font-weight: 700; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .5px; padding: 13px 12px 4px; }
/* lente Tarefas */
.tasks-lens { padding: 18px 22px 28px; max-width: 760px; }
.tasks-lens-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tasks-lens-head h2 { font-size: 19px; font-weight: 600; }
.tasks-sub { font-size: 12.5px; color: var(--on-surface-dim); margin-top: 2px; }
.tasks-empty { text-align: center; color: var(--on-surface-dim); font-size: 13.5px; line-height: 1.7; padding: 38px 20px; border: 1px dashed var(--outline); border-radius: 14px; }
.task-prow { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
.task-prow:hover { background: var(--state-hover); }
.task-prow.done .task-ptitle { color: var(--on-surface-dim); text-decoration: line-through; }
.task-prow .task-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--outline-var); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.task-prow.done .task-check { background: #2e9e5b; border-color: #2e9e5b; }
.task-pbody { flex: 1; min-width: 0; }
.task-ptitle { font-size: 14px; color: var(--on-surface); display: flex; align-items: baseline; gap: 8px; }
.task-ptime { font-size: 12px; font-weight: 600; color: var(--on-surface-var); }
.task-pmeta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-size: 11.5px; color: var(--on-surface-dim); }
.task-plink { color: var(--primary); }
/* aba lateral de Tarefas (próximas + atrasadas) */
.task-rmeta { font-size: 10.5px; color: var(--on-surface-dim); margin-top: 2px; }
.task-grp { font-size: 10px; font-weight: 700; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .5px; padding: 12px 4px 5px; }
.task-grp.late { color: var(--primary); }
.ns-out-when { display: flex; gap: 6px; }
.ns-out-when input { font-family: var(--font); font-size: 12px; color: var(--on-surface); background: var(--surface-2); border: 1px solid var(--outline); border-radius: 7px; padding: 4px 7px; }
.ns-fields { display: flex; flex-direction: column; gap: 12px; }
.ns-remove { margin-top: 16px; border: none; background: none; color: var(--on-surface-dim); font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0; }
.ns-remove:hover { color: var(--primary); }
@media (max-width: 560px) {
  .evm { width: 100vw; height: 100vh; border-radius: 0; }
  .evm-rail { width: 50px; }
}
.field-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-surface-var); align-self: flex-end; padding-bottom: 12px; white-space: nowrap; }
.field-check input { accent-color: var(--primary); width: 16px; height: 16px; }
.ed-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.btn-filled {
  height: 40px; padding: 0 24px; border: none; border-radius: 20px;
  background: var(--primary); color: var(--on-primary); font-family: var(--font);
  font-size: 14px; font-weight: 600; cursor: pointer; transition: filter var(--t);
}
.btn-filled:hover { filter: brightness(1.08); }
.btn-text {
  height: 40px; padding: 0 16px; border: none; border-radius: 20px; background: transparent;
  color: var(--primary); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--t);
}
.btn-text:hover { background: var(--state-hover); }
.btn-text.danger { color: #d93025; }
[data-theme="dark"] .btn-text.danger { color: #f2b8b5; }
.btn-text.danger:hover { background: rgba(217,48,37,.1); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--outline-var); border-radius: 3px; }

/* ══════════════════════════════════════════════════════
   v10.1 — Avatar, pill de visualização, rail direito, painéis,
   menu de conta, configurações/conectores
══════════════════════════════════════════════════════ */

/* Pill única de visualização */
.view-pill { height: 38px; min-width: 104px; padding: 0 14px; border: 1px solid var(--outline-var); border-radius: 19px;
  background: transparent; color: var(--on-surface); font-family: var(--font); font-size: 14px; font-weight: 500;
  cursor: pointer; display: flex; align-items: center; gap: 7px; justify-content: center; transition: background var(--t); }
.view-pill:hover { background: var(--state-hover); }
.view-pill svg { color: var(--on-surface-var); }

/* Avatar (conta) */
.avatar-btn { width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
  background: var(--surface-2); color: var(--on-surface); font-family: var(--font); font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; transition: filter var(--t), background var(--t); }
.avatar-btn:hover { filter: brightness(.97); }
.avatar-btn.logged { background: var(--primary); color: var(--on-primary); }

/* ── RAIL DIREITO (apps) ── */
.rail { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: var(--rail-w); z-index: 60;
  background: var(--chrome); border-left: 1px solid var(--outline);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; transition: background var(--t); }
.rail-btn { position: relative; width: 36px; height: 36px; border-radius: 10px; border: none; background: transparent;
  color: var(--on-surface-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t), color var(--t); }
.rail-btn:hover { background: var(--state-hover); color: var(--on-surface); }
.rail-btn.active { background: var(--state-press); color: var(--on-surface); }
.rail-btn svg { width: 18px; height: 18px; }
.rail-ico { width: 26px; height: 26px; display: block; }
.rail-ico.night { display: none; }
[data-theme="dark"] .rail-ico.light { display: none; }
[data-theme="dark"] .rail-ico.night { display: block; }
/* cadeados minimalistas */
.ico-lock, .models-lock svg, .lens-lock svg { vertical-align: -1px; opacity: .62; }
/* Resumo da semana */
.sum-head { font-size: 12px; font-weight: 600; color: var(--on-surface-dim); padding: 14px 16px 6px; }
.sum-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--outline); border-top: 1px solid var(--outline); border-bottom: 1px solid var(--outline); }
.sum-metric { background: var(--surface); padding: 12px 6px; text-align: center; }
.sum-n { font-size: 21px; font-weight: 600; color: var(--on-surface); line-height: 1; }
.sum-l { font-size: 10px; color: var(--on-surface-dim); margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }
.sum-sec { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--on-surface-dim); padding: 16px 16px 6px; }
.sum-cnt { background: var(--surface-2); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.sum-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 16px; border-bottom: 1px solid var(--outline); }
.sum-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.sum-rt { font-size: 13px; color: var(--on-surface); line-height: 1.3; }
.sum-rm { font-size: 11.5px; color: var(--on-surface-dim); margin-top: 1px; }
.sum-empty { font-size: 12.5px; color: var(--on-surface-dim); padding: 4px 16px 10px; }
.rail-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #c5221f; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ── PAINÉIS LATERAIS (tarefas/notificações) reaproveitam .detail-panel ── */
.side-scroll { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }
.side-empty { padding: 28px 18px; color: var(--on-surface-dim); font-size: 13px; line-height: 1.6; text-align: center; }

/* Tarefas */
.task-add { display: flex; gap: 8px; }
.task-add input { flex: 1; height: 40px; padding: 0 12px; border: 1px solid var(--outline-var); border-radius: 10px;
  background: var(--surface); color: var(--on-surface); font-family: var(--font); font-size: 14px; outline: none; }
.task-add input:focus { border-color: var(--primary); }
.task-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; }
.task-row:hover { background: var(--state-hover); }
.task-row.done .task-text { text-decoration: line-through; color: var(--on-surface-dim); }
.task-check { width: 22px; height: 22px; flex-shrink: 0; border: 2px solid var(--outline-var); border-radius: 50%;
  background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t); }
.task-row.done .task-check { background: var(--primary); border-color: var(--primary); }
.task-text { flex: 1; font-size: 14px; color: var(--on-surface); line-height: 1.4; }
.task-del { width: 26px; height: 26px; border: none; background: transparent; color: var(--on-surface-dim); border-radius: 7px;
  cursor: pointer; display: none; align-items: center; justify-content: center; flex-shrink: 0; }
.task-row:hover .task-del { display: flex; }
.task-del:hover { background: rgba(179,64,47,.12); color: #b3402f; }

/* Notificações */
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 10px 8px; }
.notif-count { font-size: 11px; font-weight: 600; color: var(--on-surface-dim); text-transform: uppercase; letter-spacing: .4px; }
.notif-clear-all { font-size: 12px; font-weight: 500; color: var(--primary); background: none; border: none; cursor: pointer; padding: 4px 7px; border-radius: 7px; font-family: var(--font); transition: background var(--t); }
.notif-clear-all:hover { background: var(--state-hover); }
.notif-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 10px; border-radius: 10px; cursor: pointer; }
.notif-row:hover { background: var(--state-hover); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: #f09300; }
.notif-row.late .notif-dot { background: #c5221f; }
.notif-text { font-size: 13px; color: var(--on-surface); line-height: 1.5; flex: 1; min-width: 0; }
.notif-clear { flex-shrink: 0; width: 26px; height: 26px; margin: -2px -2px 0 0; border: none; background: transparent; color: var(--on-surface-dim); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: .5; transition: opacity var(--t), background var(--t), color var(--t); }
.notif-clear:hover { background: var(--state-hover); color: #2e9e5b; opacity: 1; }
.notif-clear svg { width: 14px; height: 14px; }
/* dias que já passaram = opacos (como no Google Calendar) */
.event-chip.past, .event-item.past, .wk-event.past, .agenda-evrow.past { opacity: .5; transition: opacity var(--t); }
.event-chip.past:hover, .event-item.past:hover, .wk-event.past:hover, .agenda-evrow.past:hover { opacity: .82; }
.day-cell.past-day .day-num { color: var(--on-surface-dim); opacity: .7; }

/* ── MENU DE CONTA (dropdown) ── */
.acct-menu { position: fixed; z-index: 500; width: 264px; background: var(--surface); border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.26); padding: 8px; }
.am-head { display: flex; align-items: center; gap: 12px; padding: 11px 10px; width: 100%; border: none; background: transparent; cursor: pointer; text-align: left; font-family: var(--font); border-radius: 10px; transition: background var(--t); }
.am-head:hover { background: var(--state-hover); }
.am-head-chev { margin-left: auto; color: var(--on-surface-dim); flex-shrink: 0; }
.am-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; flex-shrink: 0; overflow: hidden; }
.am-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-btn { overflow: hidden; }
#avatar-ini.has-photo { display: block; width: 38px; height: 38px; }
#avatar-ini.has-photo img { width: 38px; height: 38px; object-fit: cover; display: block; }
.am-id { min-width: 0; }
.am-name { font-size: 14px; font-weight: 600; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-mail { font-size: 12px; color: var(--on-surface-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: none; background: transparent;
  border-radius: 10px; cursor: pointer; font-family: var(--font); font-size: 14px; color: var(--on-surface); text-align: left; transition: background var(--t); }
.am-item:hover { background: var(--state-hover); }
.am-item svg { color: var(--on-surface-var); flex-shrink: 0; }
.am-item.danger { color: #b3402f; } .am-item.danger svg { color: #b3402f; }
.am-div { height: 1px; background: var(--outline); margin: 6px 8px; }

/* ── MODAL DE CONFIGURAÇÕES ── */
.set-modal { max-width: 540px; }
/* abas em fila única que rola na horizontal (sem quebrar em 2 linhas) */
.set-tabs { display: flex; gap: 4px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.set-tabs::-webkit-scrollbar { display: none; }
.set-tab { padding: 8px 15px; border: none; background: transparent; border-radius: 18px; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
  font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--on-surface-var); transition: background var(--t); }
.set-tab:hover { background: var(--state-hover); }
.set-tab.active { background: var(--primary-cont); color: var(--on-primary-cont); }
.set-pane { display: flex; flex-direction: column; gap: 16px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--outline); }
.set-row:last-child { border-bottom: none; }
.set-k { font-size: 13px; color: var(--on-surface-dim); }
.set-v { font-size: 14px; color: var(--on-surface); font-weight: 500; }
.set-note { font-size: 12.5px; color: var(--on-surface-dim); line-height: 1.6; }
/* painel Redes (Ordo Publisher) */
.redes-list { margin-top: 10px; border: 1px solid var(--outline); border-radius: 12px; overflow: hidden; }
.redes-item { border-bottom: 1px solid var(--outline); }
.redes-item:last-child { border-bottom: none; }
.redes-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
.redes-logo { width: 22px; height: 22px; flex-shrink: 0;
  -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat;
  background: var(--lc, currentColor); }
.rl-youtube  { --m: url(brand/redes/youtube.svg);   --lc: #FF0000; }
.rl-instagram{ --m: url(brand/redes/instagram.svg); --lc: #E4405F; }
.rl-facebook { --m: url(brand/redes/facebook.svg);  --lc: #1877F2; }
.rl-tiktok   { --m: url(brand/redes/tiktok.svg);    --lc: var(--on-surface); }
.rl-threads  { --m: url(brand/redes/threads.svg);   --lc: var(--on-surface); }
.rl-gmb      { --m: url(brand/redes/gmb.svg);       --lc: #4285F4; }
.rl-x        { --m: url(brand/redes/x.svg);         --lc: var(--on-surface); }
.redes-name { font-size: 13.5px; font-weight: 500; color: var(--on-surface); }
.redes-mid { flex: 1; }
.redes-avs { display: flex; align-items: center; }
.redes-av { border-radius: 50%; object-fit: cover; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.redes-avs .redes-av { margin-left: -7px; box-shadow: 0 0 0 2px var(--surface); }
.redes-avs .redes-av:first-child { margin-left: 0; }
.redes-av-ini { font-size: 11px; font-weight: 600; color: var(--on-surface-var); }
.redes-icon { width: 28px; height: 28px; border-radius: 50%; border: none; background: none; color: var(--on-surface-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, background .15s; }
.redes-icon:hover { color: var(--on-surface); background: var(--state-hover); }
.redes-add { font-size: 19px; line-height: 1; }
.redes-chev svg { transition: transform .18s; display: block; }
.redes-chev.open svg { transform: rotate(180deg); }
.redes-soon { font-size: 11.5px; color: var(--on-surface-dim); opacity: .65; }
.redes-detail { padding: 0 14px 12px 47px; display: flex; flex-direction: column; gap: 11px; }
.redes-acct-row { display: flex; align-items: center; gap: 11px; }
.redes-acct-info { display: flex; flex-direction: column; gap: 3px; }
.redes-disc { margin-left: auto; flex-shrink: 0; border: 1px solid var(--outline); background: none; color: var(--on-surface-dim); font-family: var(--font); font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 7px; cursor: pointer; }
.redes-disc:hover { border-color: #c0392b; color: #c0392b; background: #c0392b12; }
.redes-disc:disabled { opacity: .55; cursor: default; }
.redes-acct-name { font-size: 13px; font-weight: 500; color: var(--on-surface); }
.redes-acct-sub { font-size: 11px; color: var(--on-surface-dim); display: flex; align-items: center; gap: 6px; }
.redes-st { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.redes-st.ok { color: #1a8a4a; }
.redes-st.warn { color: var(--primary); }
.redes-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.set-field { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--on-surface-dim); }
.set-field > span:first-child { font-weight: 600; color: var(--on-surface); }
.set-field input, .set-field select, .set-field textarea { font-family: var(--font); font-size: 14px; color: var(--on-surface);
  background: var(--surface); border: 1px solid var(--outline-var); border-radius: 12px; padding: 11px 13px; outline: none; transition: border-color var(--t); }
.set-field input::placeholder, .set-field textarea::placeholder { color: var(--on-surface-dim); opacity: .7; }
.set-field input:focus, .set-field select:focus, .set-field textarea:focus { border-color: var(--primary); }
/* ── editor de perfil (aba Conta) ── */
.prof-top { display: flex; align-items: center; gap: 16px; }
.prof-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; flex-shrink: 0; overflow: hidden; }
.prof-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-av-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.set-inline { display: flex; gap: 8px; align-items: center; }
.set-inline input { flex: 1 1 auto; min-width: 0; }
.set-inline .btn-text { flex-shrink: 0; }
.prof-status { font-size: 12.5px; min-height: 15px; color: var(--on-surface-dim); }
.prof-status.ok { color: #2e7d46; }
.prof-status.err { color: #c5221f; }
[data-theme="dark"] .prof-status.ok { color: #82d6a1; }
.set-seg { display: flex; border: 1px solid var(--outline-var); border-radius: 12px; overflow: hidden; }
.set-segbtn { padding: 8px 18px; border: none; background: transparent; cursor: pointer; font-family: var(--font); font-size: 13px; color: var(--on-surface-var); }
.set-segbtn.on { background: var(--primary-cont); color: var(--on-primary-cont); font-weight: 600; }
.set-conns { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.conn-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.conn-chip { font-size: 12px; padding: 6px 11px; border-radius: 14px; background: var(--surface-2); color: var(--on-surface); }
.conn-chip b { color: #0b8043; font-weight: 600; margin-left: 3px; }
.conn-chip.dim { color: var(--on-surface-dim); }
.ai-guide { margin: 2px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--outline, rgba(0,0,0,.08)); }
.ai-guide-t { font-size: 12.5px; line-height: 1.5; margin: 0 0 8px; color: var(--on-surface-dim); }
.ai-guide-t b { color: var(--on-surface); }
.ai-guide-d summary { font-size: 13px; font-weight: 600; color: var(--on-surface); cursor: pointer; list-style: none; }
.ai-guide-d summary::-webkit-details-marker { display: none; }
.ai-guide-d summary::before { content: '▸'; margin-right: 7px; color: #46566b; transition: transform .15s; display: inline-block; }
.ai-guide-d[open] summary::before { transform: rotate(90deg); }
.ai-guide-d ol { margin: 9px 0 4px; padding-left: 20px; }
.ai-guide-d li { font-size: 12.5px; line-height: 1.6; color: var(--on-surface); margin-bottom: 3px; }
.ai-guide a { color: #46566b; font-weight: 600; text-decoration: none; }
.ai-guide a:hover { text-decoration: underline; }
.ai-guide-n { font-size: 11.5px; line-height: 1.45; color: var(--on-surface-dim); margin: 6px 0 0; }
.ai-guide-links { font-size: 11.5px; color: var(--on-surface-dim); margin: 9px 0 0; }
.mcp-box { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--outline, rgba(0,0,0,.08)); }
.mcp-h { margin-bottom: 4px; }
.mcp-ep { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12px; color: var(--on-surface-dim); flex-wrap: wrap; }
.mcp-ep code, .mcp-tokrow code, .mcp-tok code { background: var(--surface-2); padding: 5px 9px; border-radius: 8px; font-size: 12px; color: var(--on-surface); word-break: break-all; }
.mcp-copy { border: 1px solid var(--outline, rgba(0,0,0,.12)); background: var(--surface-2); color: var(--on-surface); border-radius: 8px; padding: 4px 8px; cursor: pointer; font-size: 13px; line-height: 1; }
.mcp-copy:hover { background: var(--surface-3, rgba(0,0,0,.06)); }
#mcp-gen { margin-top: 2px; }
.mcp-new { margin: 10px 0; padding: 11px 13px; border-radius: 10px; background: rgba(70,86,107,.12); border: 1px solid rgba(70,86,107,.4); }
.mcp-warn { font-size: 12px; color: var(--on-surface); margin: 0 0 7px; }
.mcp-tokrow { display: flex; align-items: center; gap: 8px; }
.mcp-toks { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mcp-tok { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--on-surface); padding: 7px 11px; background: var(--surface-2); border-radius: 9px; }
.mcp-tok i { color: var(--on-surface-dim); font-style: normal; }
.mcp-del { border: none; background: none; color: #b3261e; cursor: pointer; font-size: 12px; }
.mcp-del:hover { text-decoration: underline; }
.mcp-empty { font-size: 12px; color: var(--on-surface-dim); margin: 8px 0 0; }
.ai-testrow { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; flex-wrap: wrap; }
.ai-test { font-size: 12.5px; }
.ai-test.ok { color: #0b8043; }
.ai-test.err { color: #b3261e; }
.mcp-hero { margin-top: 0; padding: 16px 16px 14px; border-radius: 14px; background: rgba(70,86,107,.10); border: 1px solid rgba(70,86,107,.32); }
.mcp-hero .set-k { font-size: 14px; }
.ai-adv { margin: 14px 0 4px; }
.ai-adv > summary { font-size: 12.5px; color: var(--on-surface-dim); cursor: pointer; list-style: none; padding: 6px 0; }
.ai-adv > summary::-webkit-details-marker { display: none; }
.ai-adv > summary::before { content: '⚙ '; }
.ai-adv[open] > summary { color: var(--on-surface); font-weight: 600; margin-bottom: 6px; }

/* Gate/onboarding são sempre um "momento de marca" escuro (sobre a foto borrada),
   independentemente do tema — assim os logos creme e o texto ficam sempre legíveis. */
.gate {
  --surface: #1b1e22; --surface-2: #262a30;
  --on-surface: #e9ecf0; --on-surface-var: #c2c7cf; --on-surface-dim: #878d96;
  --outline: #313640; --outline-var: #424853;
  --primary: #9fb2c9; --on-primary: #1c2530; --primary-cont: #313a47; --on-primary-cont: #dde3ec;
}

/* ── BLOG (manchetes recentes, cards hero) ── */
.blog-card { display: block; border-radius: 14px; overflow: hidden; background: var(--surface-2); margin-bottom: 12px;
  text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; }
.blog-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.16); }
.blog-card-img { width: 100%; height: 124px; background-size: cover; background-position: center; }
.blog-card-body { padding: 11px 13px 14px; }
.blog-card-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; color: var(--on-surface-dim); text-transform: uppercase; }
.blog-card-title { font-size: 14.5px; font-weight: 600; color: var(--on-surface); line-height: 1.3; margin: 5px 0 6px; }
.blog-card-excerpt { font-size: 12.5px; color: var(--on-surface-var); line-height: 1.5; }

/* ── Martirológio: lista completa do dia ── */
.mart-item { padding: 11px 16px; border-bottom: 1px solid var(--outline); }
.mart-item.principal { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.mart-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mart-item-name { font-size: 14px; color: var(--on-surface); line-height: 1.35; }
.mart-item.principal .mart-item-name { font-weight: 600; }
.mart-item-year { font-size: 12px; color: var(--on-surface-dim); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mart-tag { display: inline-block; margin-top: 5px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--weekend); background: color-mix(in srgb, var(--weekend) 12%, transparent); padding: 2px 7px; border-radius: 6px; }
.mart-novo { font-size: 9.5px; font-weight: 700; color: #0b8043; background: rgba(11,128,67,.12); padding: 1px 5px; border-radius: 5px; vertical-align: middle; }
.mart-item-elogio { margin-top: 8px; font-size: 12.5px; color: var(--on-surface-var); line-height: 1.6; }
.santo-more { font-size: 10px; font-weight: 700; opacity: .8; margin-left: 5px; flex-shrink: 0; }

/* ── Título clicável (mês expansível) ── */
:root { --md-h: 300px; }
.period-btn { display: flex; align-items: center; gap: 4px; background: transparent; border: none; cursor: pointer; padding: 4px 8px; border-radius: 10px; font-family: var(--font); color: var(--on-surface); transition: background var(--t); }
.period-btn:hover { background: var(--state-hover); }
.period-chev { color: var(--on-surface-var); transition: transform .2s; }
.period-btn.expanded .period-chev { transform: rotate(180deg); }
.month-drop { position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 90; background: var(--chrome); border-bottom: 1px solid var(--outline); height: 0; overflow: hidden; transition: height .22s cubic-bezier(.2,0,0,1); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.month-drop.open { height: var(--md-h); }
.month-drop-head { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 12px 0 6px; }
.month-drop-label { font-size: 15px; font-weight: 600; color: var(--on-surface); min-width: 150px; text-align: center; }
#month-drop-grid { max-width: 460px; margin: 0 auto; padding: 0 16px 16px; }
#month-drop-grid .mini-day { width: 100%; height: 38px; border-radius: 8px; font-size: 13px; }
.mini-day.sel:not(.today) { outline: 2px solid var(--primary); }
body.md-open .app-body, body.md-open .rail { transition: top .22s cubic-bezier(.2,0,0,1); }
body.md-open .app-body { top: calc(var(--topbar-h) + var(--md-h)); }
.wk-head.wk-dayview { display: none; }   /* visão Dia: título já mostra o dia */

/* ── Scrim do drawer ── */
.nav-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

/* ══════════ MOBILE (≤ 820px) ══════════ */
@media (max-width: 820px) {
  :root { --md-h: 340px; }
  .topbar { padding: 0 6px; gap: 2px; }
  .topbar-left { width: auto; flex-shrink: 0; }
  .search-wrap { display: none; }          /* busca sai do topo no mobile */
  .brand { display: none; }                /* logo só no drawer no mobile */
  .topbar-center { flex: 1; min-width: 0; gap: 0; }
  .nav-btn.nav-arrow { display: none; }    /* navega pelo mês/swipe */
  .nav-btn.today-btn { padding: 0 10px; flex-shrink: 0; }
  .period-btn { flex: 1; min-width: 0; }
  .current-period { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .view-pill { min-width: 0; padding: 0 10px; gap: 0; }
  .view-pill span { display: none; }       /* só o ícone da pill no mobile */
  .topbar-right { gap: 4px; flex-shrink: 0; }

  /* sidebar vira drawer sobreposto à esquerda */
  .app-body { inset: var(--topbar-h) 0 56px 0; }     /* rail vai pro rodapé */
  .sidebar { position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: 280px; max-width: 84vw;
    z-index: 200; transform: translateX(-100%); transition: transform .24s cubic-bezier(.2,0,0,1);
    box-shadow: 4px 0 24px rgba(0,0,0,.3); }
  .sidebar.collapsed { width: 280px; }               /* ignora collapse desktop no mobile */
  body.nav-open .sidebar { transform: translateX(0); }

  .calendar-main { margin: 0; border-radius: 0; }
  .calendar-main.panel-open { margin-right: 0; }

  /* rail → barra inferior */
  .rail { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 56px;
    flex-direction: row; justify-content: space-around; align-items: center; padding: 0 8px;
    border-left: none; border-top: 1px solid var(--outline); }
  body.md-open .rail { bottom: 0; }

  /* painéis laterais = tela cheia */
  .detail-panel { width: 100%; right: -100%; z-index: 210; }
  .detail-panel.open { right: 0; }

  /* mês expansível empurra mais (já via --md-h) */
  .month-drop-head { gap: 28px; }
}

/* ── Leituras do dia ── */
.leit-cor { display: flex; align-items: center; gap: 8px; padding: 4px 16px 10px; font-size: 12.5px; color: var(--on-surface-var); }
.leit-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.leit-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 16px; border-bottom: 1px solid var(--outline); }
.leit-label { font-size: 12px; color: var(--on-surface-dim); }
.leit-ref { font-size: 13.5px; font-weight: 600; color: var(--on-surface); font-variant-numeric: tabular-nums; }
.leit-criar { padding-left: 16px; }

/* ── Barra de IA no editor ── */
.ai-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; padding: 8px 10px; background: var(--surface-2); border-radius: 12px; }
.ai-bar-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--on-surface-var); margin-right: 2px; }
.ai-bar-label svg { color: var(--primary); }
.ai-btn { font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline-var); border-radius: 16px; padding: 5px 12px; cursor: pointer; transition: background var(--t); }
.ai-btn:hover { background: var(--cal-cell-hover); }
.ai-status { font-size: 11.5px; color: var(--on-surface-dim); margin-left: auto; }

/* ── Plano / Pro ── */
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; margin-top: 6px; }
@media (max-width: 720px) { .plan-grid-3 { grid-template-columns: 1fr; } }
.set-modal.set-wide { width: min(1040px, 96vw); max-width: min(1040px, 96vw); }
.plan-card { position: relative; border: 1px solid var(--outline-var); border-radius: 16px; padding: 18px 16px 16px; display: flex; flex-direction: column; }
.plan-card.pro { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.plan-card.plan-reco { border-color: var(--primary); box-shadow: 0 0 0 1.5px var(--primary); }
.plan-card.plan-magno { border-color: #46566b; box-shadow: 0 0 0 1.5px #46566b; background: linear-gradient(180deg, color-mix(in srgb, #46566b 9%, transparent), transparent 55%); }
.plan-card.atual { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.plan-ribbon { position: absolute; top: -9px; left: 16px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--on-primary); background: var(--primary); padding: 3px 10px; border-radius: 7px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.plan-ribbon.magno { background: #46566b; color: #fff; }
.plan-head { margin-bottom: 8px; }
.plan-name { font-size: 17px; font-weight: 700; letter-spacing: -.2px; text-transform: none; color: var(--on-surface); }
.plan-magno .plan-name { color: #7e93ad; }
.plan-tag { font-size: 11.5px; color: var(--on-surface-dim); margin-top: 1px; }
.plan-price { font-size: 19px; font-weight: 600; color: var(--on-surface); margin: 0 0 12px; }
.plan-price small { font-size: 11.5px; font-weight: 400; color: var(--on-surface-dim); margin-left: 3px; }
.plan-feats { flex: 1; }
.plan-foot { margin-top: auto; padding-top: 14px; }
.plan-ctav { display: flex; flex-direction: column; gap: 7px; }
.plan-cta-main { width: 100%; justify-content: center; }
.plan-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-cta-row .btn-text { padding: 2px 0; font-size: 11.5px; }
.plan-atual { font-size: 12px; font-weight: 700; color: var(--primary); }
.plan-subnote { font-size: 11.5px; color: var(--on-surface-dim); line-height: 1.4; }
.plan-wait { width: 100%; justify-content: center; background: #46566b; color: #fff; }
.plan-wait:hover { background: #374556; }
.plan-wait.done { background: #2e8f54; }
.plan-name { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--on-surface); }
.plan-price { font-size: 13px; color: var(--on-surface-dim); margin: 2px 0 12px; }
.pf { padding: 8px 2px; border-bottom: 1px solid var(--outline); }
.pf:last-child { border-bottom: none; }
.pf-t { font-size: 13px; font-weight: 600; color: var(--on-surface); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-d { font-size: 12px; color: var(--on-surface-dim); margin-top: 3px; line-height: 1.45; }
.ailogos { display: inline-flex; align-items: center; gap: 7px; }
.ailogo { display: inline-block; width: 15px; height: 15px; background-color: currentColor; opacity: .82;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ai-claude { -webkit-mask-image: url(ai/claude.svg); mask-image: url(ai/claude.svg); }
.ai-openai { -webkit-mask-image: url(ai/openai.svg); mask-image: url(ai/openai.svg); }
.ai-gemini { -webkit-mask-image: url(ai/gemini.svg); mask-image: url(ai/gemini.svg); }
.plan-badge { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--on-primary); background: var(--primary); padding: 2px 7px; border-radius: 6px; vertical-align: middle; margin-left: 6px; }
.plan-current { font-size: 12px; color: var(--on-surface-dim); margin-top: 12px; }

/* ── Assinatura de calendários premium ── */
.set-section-t { font-family: var(--font); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--on-surface-dim); margin: 16px 0 8px; }
.cal-sub { display: flex; align-items: flex-start; gap: 10px; padding: 9px 4px; cursor: pointer; }
.cal-sub input { margin-top: 3px; }
.cal-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.cal-txt b { font-size: 14px; color: var(--on-surface); }
.cal-txt small { display: block; font-size: 12px; color: var(--on-surface-dim); line-height: 1.4; }

/* ══ Equipes (workspaces) ══ */
.ws-badge{display:none;align-items:center;gap:6px;margin-left:10px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--outline,#d8dde3);background:var(--surface-2,#e4e8ec);color:var(--on-surface,#1a1d21);
  font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;max-width:200px;overflow:hidden}
.ws-badge:hover{border-color:var(--primary,#46566b)}
.ws-badge .wsb-name{overflow:hidden;text-overflow:ellipsis}
.am-ctx{padding:6px 14px 4px;font-size:12px;color:var(--on-surface-var,#4a4f57)}
.am-ctx b{color:var(--on-surface,#1a1d21)}
.tp-ctx{background:var(--surface-2,#e4e8ec);border-radius:10px;padding:11px 14px;font-size:13.5px;margin-bottom:6px}
.tp-ctx a{color:var(--primary,#46566b);font-weight:600}
.tp-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.tp-ws{border:1px solid var(--outline,#e2dccF);border-radius:11px;padding:10px 12px}
.tp-ws-h{display:flex;align-items:center;gap:9px}
.tp-ws-nm{font-weight:600;flex:1}
.tp-role{font-size:11px;background:var(--surface-2,#e4e8ec);border-radius:999px;padding:2px 9px;color:var(--on-surface-var,#4a4f57)}
.tp-on{font-size:11px;color:#0b8043;font-weight:600}
.tp-create{display:flex;gap:8px;margin-bottom:8px}
.tp-create input{flex:1;padding:9px 12px;border:1px solid var(--outline,#d8dde3);border-radius:9px;background:var(--surface,#fff);color:inherit}
.tp-admin{margin-top:10px;border-top:1px solid var(--outline,#d8dde3);padding-top:10px}
.tp-inv{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.tp-inv input{flex:1;min-width:150px;padding:8px 10px;border:1px solid var(--outline,#d8dde3);border-radius:8px;background:var(--surface,#fff);color:inherit}
.tp-inv select{padding:8px;border:1px solid var(--outline,#d8dde3);border-radius:8px;background:var(--surface,#fff);color:inherit}
.tp-mem-t{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--on-surface-var,#4a4f57);margin:10px 0 5px}
.tp-mem{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px;border-bottom:1px solid var(--outline,#eee)}
.tp-mem span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis}
.btn-text.danger{color:#c0392b}

/* convites (consentimento) */
.inv-list{padding:4px 2px 6px;display:flex;flex-direction:column;gap:10px}
.inv-card{border:1px solid var(--outline,#d8dde3);border-radius:12px;padding:14px 16px}
.inv-txt{font-size:15px;line-height:1.35}
.inv-txt small{display:block;color:var(--on-surface-var,#4a4f57);font-size:12.5px;margin-top:2px}
.inv-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.tp-mem .tpi-yes,.tp-mem .tpi-no{margin-left:6px}

/* splash full-screen no padrão do topo (bounce letra-por-letra + troca seca) */
.sp-brand{ position:relative; width:min(440px,74vw); aspect-ratio:420.03/104.75; animation:spIn .5s ease both; overflow:visible; }
.sp-brand .ba-slot{ position:absolute; inset:0; transform-origin:center; overflow:visible; }
.sp-brand .ba-bub,.sp-brand .ba-let{ position:absolute; inset:0; background-repeat:no-repeat; background-position:center; background-size:contain; }
.sp-brand .ba-let{ opacity:0; background-color:#eef1f4; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.sp-brand .ba-slot:nth-child(1){ transform-origin:12.5% 50%; } .sp-brand .ba-slot:nth-child(1) .ba-bub{ background-image:url(brand/bub-dark-1.svg); } .sp-brand .ba-slot:nth-child(1) .ba-let{ -webkit-mask-image:url(brand/let-1.svg); mask-image:url(brand/let-1.svg); }
.sp-brand .ba-slot:nth-child(2){ transform-origin:38.4% 41%; } .sp-brand .ba-slot:nth-child(2) .ba-bub{ background-image:url(brand/bub-dark-2.svg); } .sp-brand .ba-slot:nth-child(2) .ba-let{ -webkit-mask-image:url(brand/let-2.svg); mask-image:url(brand/let-2.svg); }
.sp-brand .ba-slot:nth-child(3){ transform-origin:61.6% 59%; } .sp-brand .ba-slot:nth-child(3) .ba-bub{ background-image:url(brand/bub-dark-3.svg); } .sp-brand .ba-slot:nth-child(3) .ba-let{ -webkit-mask-image:url(brand/let-3.svg); mask-image:url(brand/let-3.svg); }
.sp-brand .ba-slot:nth-child(4){ transform-origin:87.5% 50%; } .sp-brand .ba-slot:nth-child(4) .ba-bub{ background-image:url(brand/bub-dark-4.svg); } .sp-brand .ba-slot:nth-child(4) .ba-let{ -webkit-mask-image:url(brand/let-4.svg); mask-image:url(brand/let-4.svg); }
.sp-brand .ba-slot.is-letter .ba-bub{ opacity:0; }
.sp-brand .ba-slot.is-letter .ba-let{ opacity:1; }
.sp-brand .ba-slot.bounce{ animation:baBounce .36s cubic-bezier(.34,1.56,.64,1); }
@keyframes spIn{ from{ opacity:0; transform:scale(.93) } to{ opacity:1; transform:scale(1) } }

/* Liturgia do dia — leituras/orações expansíveis */
.leit-grp-t{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--on-surface-var,#4a4f57); margin:12px 0 2px; font-weight:600; }
.leit-det{ border-bottom:1px solid var(--outline,#d8dde3); }
.leit-det summary{ display:flex; gap:8px; align-items:baseline; padding:8px 0; cursor:pointer; list-style:none; }
.leit-det summary::-webkit-details-marker{ display:none; }
.leit-det summary::after{ content:'+'; margin-left:auto; color:var(--primary,#46566b); font-weight:700; }
.leit-det[open] summary::after{ content:'–'; }
.leit-label{ font-weight:600; font-size:13px; }
.leit-ref{ font-size:12.5px; color:var(--on-surface-var,#4a4f57); }
.leit-tit{ font-size:12px; color:var(--on-surface-var,#4a4f57); margin:2px 0 6px; font-style:italic; }
.leit-txt{ font-size:13.5px; line-height:1.62; color:var(--on-surface,#1a1d21); padding-bottom:10px; }

/* abas do painel do dia: Liturgia | Martirológio */
.day-tabs{ display:flex; gap:4px; margin-bottom:12px; background:var(--surface-2,#e4e8ec); padding:3px; border-radius:10px; }
.day-tab{ flex:1; padding:8px 10px; border:0; background:none; border-radius:8px; font-family:inherit; font-weight:600; font-size:13px; color:var(--on-surface-var,#4a4f57); cursor:pointer; transition:background .12s,color .12s; }
.day-tab.active{ background:var(--surface,#fff); color:var(--on-surface,#1a1d21); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.leit-note{ font-size:12px; color:var(--on-surface-var,#4a4f57); line-height:1.45; margin:12px 0 0; font-style:italic; }
.leg-divider{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--on-surface-var,#4a4f57); margin:16px 0 6px; padding-top:11px; border-top:1px solid var(--outline,#d8dde3); }

/* ── IZI · wordmark da marca ── */
/* Ícone IZI animado (geometria do arquivo original Ícone fundo *.svg) — ponto · barra · ponto.
   Monocromático via currentColor → adapta ao tema sozinho. Animação reutilizável (.play). */
.izi-anim{ height:18px; width:auto; display:block; color:var(--on-surface); overflow:visible; user-select:none; }  /* mesma altura do ícone do menu (18px) */
.izi-el{ fill:currentColor; }
.izi-dot, .izi-bar{ transform-box:fill-box; }   /* origem relativa ao próprio elemento (SVG) */
.izi-dot{ transform-origin:center; }
.izi-bar{ transform-origin:left center; }
@keyframes iziPop{                               /* ponto nasce do centro com pop/bounce + motion blur */
  0%   { transform:scale(0);    filter:blur(2.6px); opacity:0; }
  55%  { transform:scale(1.22); filter:blur(.4px);  opacity:1; }
  100% { transform:scale(1);     filter:blur(0); }
}
@keyframes iziBar{                               /* barra cresce da esquerda (loading) + motion blur */
  0%   { transform:scaleX(0); filter:blur(3.2px); }
  72%  { filter:blur(1px); }
  100% { transform:scaleX(1); filter:blur(0); }
}
.izi-anim.play .izi-dot-l{ animation:iziPop .42s cubic-bezier(.34,1.56,.64,1) 0s   both; }
.izi-anim.play .izi-bar  { animation:iziBar .46s cubic-bezier(.2,.7,.3,1)    .24s both; }
.izi-anim.play .izi-dot-r{ animation:iziPop .42s cubic-bezier(.34,1.56,.64,1) .58s both; }
/* splash: ícone grande; o fundo do splash é sempre escuro → cor clara fixa */
.sp-anim{ height:64px; color:#eef1f4; }
@media (prefers-reduced-motion: reduce){ .izi-anim.play .izi-el{ animation:none !important; } }