/* Design system for the app shell — ported from the Sistema.dc.html design doc.
   The slide artwork under templates/slides/ has its own styling and is not
   affected by anything here: that CSS ends up inside the exported PNG. */

:root {
  --ink: #0E0E11;
  --ink-2: #3B3B48;
  --muted: #6B6B7B;
  --faint: #A5A5B3;
  --line: #EDEDF2;
  --line-2: #E4E4EC;
  --line-3: #C9C9D4;
  --bg: #F7F7FA;
  --surface: #FBFBFD;
  --canvas: #EFEFF4;
  /* .btn-dark/.chip-dark/.pill-dark/etc ("botão preto") usam ESSE par, não
     --ink direto -- pedido ao vivo: "os botões que eram pretos deveriam
     mudar também, o inverso". Preto-com-texto-branco no claro vira
     branco-com-texto-preto no escuro (--ink-invert-fg abaixo), em vez de
     continuar preto fixo -- um botão preto sobre uma PÁGINA já preta
     ficaria quase invisível, contraste baixo demais. */
  --ink-invert: #0E0E11;
  --ink-invert-fg: #fff;

  --brand: #5B4BE8;
  --brand-ink: #3D2FD1;
  --brand-wash: #F2F1FE;
  --brand-soft: #DED9FC;

  --ok: #16A34A;
  --ok-ink: #116B36;
  --ok-wash: #E9F8EF;
  --warn: #B4650E;
  --warn-ink: #8A4D06;
  --warn-wash: #FEF3E7;
  --danger: #DC2626;

  --pink: #E8318A;
  --pink-wash: #FDECF4;
  --orange: #F0913B;
  --orange-wash: #FEF0E4;

  --ig-gradient: linear-gradient(93deg, #F0913B, #E8318A 48%, #7B3FE4);
}

/* Tema escuro -- pedido ao vivo, toggle no menu de conta (accountMenu,
   layout.templ) em cima de "Sair". [data-theme=dark] fica no <html> (ver
   themeToggleScript/ShellCustomTopbar), mesmo seletor que o próprio Tucano
   já usa (tucano.min.css já tem [data-theme=dark] pronto) -- então os dois
   viram juntos com UM atributo só. Tudo aqui é a versão escura do mesmo
   token do :root -- --ink-invert/-fg literalmente TROCAM de lugar (ver o
   comentário deles acima), o resto só ajusta o tom. */
[data-theme="dark"] {
  --ink: #F2F2F5;
  --ink-2: #C7C7D1;
  --muted: #9494A3;
  --faint: #6C6C78;
  --line: #2A2A33;
  --line-2: #34343F;
  --line-3: #45454F;
  --bg: #101014;
  --surface: #1A1A20;
  --canvas: #16161B;
  --ink-invert: #FFFFFF;
  --ink-invert-fg: #0E0E11;

  --brand: #8C7CFF;
  --brand-ink: #B3A7FF;
  --brand-wash: #251F42;
  --brand-soft: #372F5C;

  --ok: #4ADE80;
  --ok-ink: #7BE8A4;
  --ok-wash: #123420;
  --warn: #FBBF24;
  --warn-ink: #FCD34D;
  --warn-wash: #3A2A0E;
  --danger: #F87171;

  --pink: #F472B6;
  --pink-wash: #3A1830;
  --orange: #FB923C;
  --orange-wash: #3A2410;
}

/* Punhado de cores soltas (não passam por um token do :root) comuns o
   bastante pra valer a pena uma versão escura própria -- o resto de cor
   solta que sobrar (~20 casos raros, tipo um gradiente específico) fica
   pra um ajuste fino depois, se aparecer torto na prática. */
[data-theme="dark"] .btn-danger:hover,
[data-theme="dark"] .msg.error,
[data-theme="dark"] .menu-pop .is-danger:hover { background: #3A1616; border-color: #5C2323; color: #F87171; }
[data-theme="dark"] .chip-plain { background: #232329; }
[data-theme="dark"] .cal .day { border-right-color: #2A2A33; border-bottom-color: #2A2A33; }

/* color-scheme diz pro navegador usar widgets nativos escuros (scrollbar,
   <select>, checkbox/radio não customizados, o "revelar senha" nativo...)
   sozinho -- sem isso, mesmo com o resto da página escuro, essas peças
   nativas continuam claras (reportado ao vivo: "faltou as cores dark das
   rolagens"). O ::-webkit-scrollbar/scrollbar-color abaixo é só o polimento
   fino por cima (cor combinando com os tokens do app), pro Chrome/Safari
   que preferem isso a deixar 100% a cargo do color-scheme. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-ink); }
input::placeholder, textarea::placeholder { color: var(--faint); }

h1, h2, h3, p { margin: 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  -webkit-appearance: none; appearance: none;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover { background: var(--surface); border-color: var(--line-3); color: var(--ink); }

.btn-dark { background: var(--ink-invert); border-color: var(--ink-invert); color: var(--ink-invert-fg); }
.btn-dark:hover { filter: brightness(.85); color: var(--ink-invert-fg); }

.btn-brand { background: var(--brand-wash); border-color: var(--brand-soft); color: var(--brand-ink); }
.btn-brand:hover { background: #E9E7FD; color: var(--brand-ink); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); font-weight: 600; }
.btn-ghost:hover { background: var(--surface); color: var(--ink); }

.btn-danger { color: var(--danger); }
.btn-danger:hover { background: #FEF2F2; border-color: #FCA5A5; color: var(--danger); }

/* The one button that carries Instagram's own gradient: connect the account. */
.btn-ig {
  height: 54px; border: none; border-radius: 14px;
  background: var(--ig-gradient); color: #fff; font-size: 15px;
  box-shadow: 0 8px 20px rgba(232, 49, 138, .22);
}
.btn-ig:hover { background: var(--ig-gradient); color: #fff; filter: brightness(1.05); }

.btn-sm { height: 36px; padding: 0 16px; border-radius: 10px; font-size: 13px; }
.btn-md { height: 40px; padding: 0 16px; border-radius: 11px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 28px; border-radius: 13px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; }

/* Square icon button, e.g. the calendar's ‹ › and the card overflow menu. */
.icon-btn {
  /* Same size as .back-icon-btn (flows.css, the contact/group panel's own
     back button) -- reported live as noticeably smaller/thinner than that one,
     even though both are "go back" in the same spot. */
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--muted);
  font-family: inherit; font-size: 14px; cursor: pointer;
}
.icon-btn:hover { background: var(--surface); color: var(--ink); }
.icon-btn-lg { width: 40px; height: 40px; border-radius: 11px; font-size: 15px; } /* bigger than the (now 36px) base -- unused today, kept sized above it */
/* Clicks belong to the button, never to the glyph inside it — otherwise event
   delegation that looks at the target misses the button entirely. Sized to
   match .back-icon-btn's own 18px icon -- the box was resized to match it
   above, but the "‹" text glyph inside stayed small/thin on its own; the
   back links now render the same flowIcon("back") SVG that button uses. */
.icon-btn svg { pointer-events: none; width: 18px; height: 18px; }

/* ---------- Surfaces ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
}
.card-lg { border-radius: 18px; padding: 24px; }
.card-xl { border-radius: 20px; padding: 28px; }
.card-title { font-size: 16px; font-weight: 700; color: var(--ink); }

.stack { display: flex; flex-direction: column; }
/* flex-direction is explicit (not just the flex default) because a later,
   unscoped `form { flex-direction: column }` rule (meant only for the
   login page's split-screen, see "Auth (login)" below) would otherwise win
   on any .row that happens to be a <form> itself, like the inbox reply
   bar -- .row's higher specificity already beats that rule for every OTHER
   property, this just closes the one gap. */
.row { display: flex; flex-direction: row; align-items: center; }
.spacer { flex: 1; }

/* ---------- Chips, pills, badges ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line-2);
  color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--line-3); color: var(--ink-2); }
.chip-on {
  background: var(--brand-wash); border-color: var(--brand); color: var(--brand-ink);
  font-weight: 700;
}
.chip-on:hover { color: var(--brand-ink); }
.chip-dark { background: var(--ink-invert); border-color: var(--ink-invert); color: var(--ink-invert-fg); font-weight: 700; }
.chip-dark:hover { color: var(--ink-invert-fg); }
.chip-add { background: var(--surface); border: 1px dashed var(--line-3); color: var(--muted); font-weight: 600; }
.chip-plain { background: #F4F4F8; border-color: transparent; color: var(--ink-2); font-size: 12px; font-weight: 600; padding: 8px 13px; border-radius: 9px; }

/* Rounded answer buttons in the onboarding dialogue. */
.pill {
  display: inline-flex; align-items: center;
  padding: 11px 18px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2);
  color: var(--ink-2); font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.pill:hover { border-color: var(--line-3); color: var(--ink); }
.pill-dark { background: var(--ink-invert); border-color: var(--ink-invert); color: var(--ink-invert-fg); }
.pill-dark:hover { filter: brightness(.85); color: var(--ink-invert-fg); }

.badge {
  display: inline-flex; align-items: center;
  padding: 5px 10px; border-radius: 7px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.badge-ok { background: var(--ok-wash); color: var(--ok); }
.badge-warn { background: var(--warn-wash); color: var(--warn); }
.badge-brand { background: var(--brand-wash); color: var(--brand-ink); }
.badge-pink { background: var(--pink-wash); color: var(--pink); }
.badge-round { border-radius: 999px; padding: 6px 12px; font-size: 12px; }

/* ---------- Type helpers ---------- */

.t-title { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.t-h1 { font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; color: var(--ink); }
.t-h2 { font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.t-lead { font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.t-label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.t-sm { font-size: 13px; color: var(--muted); }
.t-xs { font-size: 12px; color: var(--faint); }
.t-strong { font-weight: 700; color: var(--ink); }
.t-ok { color: var(--ok); }
.t-warn { color: var(--warn); }
.t-brand { color: var(--brand); }
.clamp-2 {
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.clamp-3 {
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Form controls ---------- */

.field { display: flex; flex-direction: column; gap: 7px; }
.field > label, .field > .t-label { font-size: 12px; font-weight: 700; color: var(--ink-2); }

.input, .textarea, .select {
  width: 100%;
  border: 1px solid var(--line-2); border-radius: 12px;
  padding: 0 14px; height: 46px;
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 14px;
  outline: none;
}
.textarea { height: 76px; padding: 12px 14px; resize: none; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand); background: var(--surface); }
.input-sm { height: 40px; border-radius: 11px; font-size: 13px; padding: 0 12px; }

.hint { font-size: 11px; line-height: 1.4; color: var(--faint); }

/* Toggle — presentational; add .toggle-on for the active state. */
.toggle {
  width: 38px; height: 22px; flex-shrink: 0;
  border-radius: 999px; background: var(--line-2);
  display: flex; align-items: center; padding: 3px;
  border: none; cursor: pointer;
  transition: background .15s;
}
.toggle span { width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
.toggle-on { background: var(--brand); }
.toggle-on span { transform: translateX(16px); }

/* Segmented control (Mês / Semana / Lista). */
.seg {
  display: flex; gap: 2px; padding: 4px;
  border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface);
}
.seg > * {
  padding: 7px 14px; border-radius: 8px; border: none; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer;
}
.seg > .is-on {
  background: var(--surface); color: var(--ink); font-weight: 700;
  box-shadow: 0 1px 2px rgba(14, 14, 17, .08);
}
.seg > [disabled] { opacity: .5; cursor: not-allowed; }

/* Radio card — the two "how posts go out" options in Automação. */
.pick {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line-2); border-radius: 14px; padding: 18px;
  background: var(--surface); cursor: pointer;
}
/* The mark leads the title, so the eye lands on the state before the label. */
.pick .pick-head { display: flex; align-items: center; gap: 10px; }
.pick .pick-mark {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--line-3); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.pick:hover .pick-mark { border-color: var(--brand); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) { border: 2px solid var(--brand); padding: 17px; background: #FBFAFF; }
.pick:has(input:checked) .pick-mark { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- App shell ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px; flex-shrink: 0;
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 22px;
  padding: 22px 16px;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .logo {
  display: flex; align-items: center; gap: 10px; padding: 0 8px;
  font-size: 17px; font-weight: 800; letter-spacing: -.03em; color: var(--ink);
}
.sidebar .logo .mark {
  width: 32px; height: 32px; border-radius: 10px; background: var(--ink-invert);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-invert-fg); font-weight: 800; font-size: 15px;
}
.sidebar .nav { display: flex; flex-direction: column; gap: 2px; }
/* Rótulo de grupo da lateral: separa "Fluxos" de "Postagens automáticas".
   O primeiro não leva margem em cima porque já vem colado no botão de criar. */
.sidebar .nav-group {
  margin: 16px 0 4px; padding: 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
}
.sidebar .nav-group:first-child { margin-top: 0; }
.sidebar .nav a {
  display: flex; align-items: center; gap: 11px;
  height: 42px; padding: 0 12px; border-radius: 11px;
  font-size: 14px; font-weight: 500; color: var(--muted);
}
/* Era var(--surface) -- IGUAL ao fundo do próprio .sidebar (linha acima),
   então o hover nunca aparecia (reportado ao vivo: "não tá fazendo nada
   além de mexer o ícone"). Rosa/roxo claro (mesma cor de .is-on, só que
   como prévia antes de clicar) resolve os dois temas de uma vez -- sempre
   contrasta com o fundo do sidebar, claro ou escuro. */
.sidebar .nav a:hover { background: var(--brand-wash); color: var(--brand-ink); }
.sidebar .nav a.is-on { background: var(--brand-wash); color: var(--brand-ink); font-weight: 700; }
/* An area the company's plan doesn't include (layout.templ navItemPlan). */
.sidebar .nav a.nav-locked { color: var(--muted); }
.sidebar .nav a.nav-locked .nav-lock { display: inline-flex; }
.sidebar .nav a.nav-locked .nav-lock svg { width: 14px; height: 14px; }
.sidebar .nav .count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--pink); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sidebar .meter {
  border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px; background: var(--surface);
}
.sidebar .account {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); width: 100%; font-family: inherit; text-align: left; cursor: pointer;
}
.sidebar .account:hover { background: var(--surface); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(140deg, #F0913B, #E8318A);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.avatar-lg { width: 42px; height: 42px; font-size: 14px; }
/* A step up from avatar-lg -- the connections "Detalhes" panel's own
   avatar (internal/web/connections.templ), sat next to Canal/Número/Status
   instead of standing alone, so it reads better a bit bigger. */
.avatar-xl { width: 64px; height: 64px; font-size: 20px; }
/* Same badge, but the app's own rounded-square language (icon-btn's 9px
   radius, node chips...) instead of a circle -- for an ACCOUNT identity
   (topbar user chip), never for a chat contact, which stays circular. The
   purple gradient is the same one contactAvatar (inbox.templ) already uses
   for contacts/groups -- .avatar's own default orange/pink is reserved for
   the smaller secondary dots (group member rows). */
.avatar-square { border-radius: 9px; background: linear-gradient(140deg, #8B87F5, #5B4BE8); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: 72px; flex-shrink: 0;
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; padding: 0 28px;
  position: sticky; top: 0; z-index: 5;
}
.content { flex: 1; padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Hambúrguer (abre o sidebar off-canvas) e o fundo escuro atrás dele --
   os dois só existem no celular (≤860px abaixo); no desktop o sidebar já
   fica sempre visível do lado, sem os dois nem precisarem renderizar. */
.sidebar-toggle-btn { display: none; }
.sidebar-backdrop { display: none; }

/* Read-only search box: the design shows one, the backend has no search yet. */
.searchbox {
  display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 14px; width: 280px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--surface); color: var(--faint); font-size: 14px;
}

.messages { display: flex; flex-direction: column; gap: 8px; }
.msg { padding: 11px 16px; border-radius: 11px; font-size: 14px; border: 1px solid transparent; }
.msg.success { background: var(--ok-wash); border-color: #BFE9CE; color: var(--ok-ink); }
.msg.error { background: #FEF2F2; border-color: #FCA5A5; color: #991B1B; }
.msg.info, .msg.warning { background: var(--warn-wash); border-color: #F6D9B4; color: var(--warn-ink); }

/* ---------- Dashboard ---------- */

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat .stat-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.stat .stat-value { display: flex; align-items: baseline; gap: 10px; }
.stat .stat-value b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.stat .delta { padding: 3px 8px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.stat .delta-up { background: var(--ok-wash); color: var(--ok); }
.stat .delta-down { background: var(--pink-wash); color: var(--pink); }
.stat .delta-warn { background: var(--warn-wash); color: var(--warn); }

.post-row {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: 14px; padding: 12px;
}
.post-row .post-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.post-row .post-meta { font-size: 12px; color: var(--muted); }

/* Weekly reach bars. The height is definite, not flexed: the bars size
   themselves as a percentage of it, and percentages need something to measure
   against. */
.bars { height: 150px; display: flex; align-items: flex-end; gap: 14px; padding-bottom: 22px; position: relative; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.bars .bar i { display: block; width: 100%; max-width: 54px; border-radius: 8px 8px 4px 4px; background: var(--brand-soft); }
.bars .bar.is-on i { background: var(--brand); }
.bars .bar span { position: absolute; bottom: 0; font-size: 11px; color: var(--faint); }

.meter-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.meter-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }

/* ---------- Calendar ---------- */

.cal { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; min-height: 560px; }
.cal .cal-head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.cal .cal-head div { padding: 12px; font-size: 12px; font-weight: 700; color: var(--faint); text-align: center; }
.cal .cal-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; }
.cal .day {
  border-right: 1px solid #F2F2F6; border-bottom: 1px solid #F2F2F6;
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
  min-height: 0; overflow: hidden; background: var(--surface);
}
.cal .day.is-out { background: var(--surface); }
.cal .day .num {
  font-size: 12px; font-weight: 700; color: var(--faint);
  width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.cal .day.is-today .num { background: var(--ink-invert); color: var(--ink-invert-fg); }
.cal .ev {
  border-radius: 9px; padding: 7px 8px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; overflow: hidden;
}
.cal .ev time { font-size: 10px; font-weight: 700; opacity: .8; }
.cal .ev b {
  font-size: 11px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cal .ev-published { background: var(--ok-wash); color: var(--ok-ink); }
.cal .ev-scheduled { background: var(--brand-wash); color: var(--brand-ink); }
.cal .ev-pending { background: var(--warn-wash); color: var(--warn-ink); }
.legend { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: block; }

/* Week view: the same seven columns, but one full-height day each. */
.cal .cal-week { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); }
.cal .cal-week .day { gap: 8px; }

/* List view: a date gutter, then that day's slots. */
.cal-listrow {
  display: flex; gap: 18px; padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.cal-listrow:last-child { border-bottom: 0; }
.cal-listday {
  width: 54px; flex-shrink: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 6px;
}
.cal-listday b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.cal-listday span { font-size: 11px; font-weight: 700; color: var(--faint); }
.cal-listday.is-today b {
  background: var(--ink-invert); color: var(--ink-invert-fg); border-radius: 9px;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}

.dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; display: block; }
.dot-published { background: var(--ok); }
.dot-scheduled { background: var(--brand); }
.dot-pending { background: var(--orange); }

/* ---------- Slide previews ----------
   Slides render at 1080x1350 inside an iframe and are scaled down to fit. */

.frame { position: relative; overflow: hidden; border-radius: 11px; background: #000; flex: none; }
.frame iframe { border: 0; width: 1080px; height: 1350px; transform-origin: 0 0; display: block; pointer-events: none; }
.frame.thumb-xs { width: 58px; height: 73px; border-radius: 9px; }
.frame.thumb-xs iframe { transform: scale(.05370); }
.frame.thumb-sm { width: 48px; height: 60px; border-radius: 9px; }
.frame.thumb-sm iframe { transform: scale(.04444); }
.frame.thumb { width: 104px; height: 130px; }
.frame.thumb iframe { transform: scale(.09630); }
/* Fixed size, not 100%: a grid track sized from content would be blown out by
   the iframe's intrinsic 1080px width. */
.frame.card-art { width: 190px; height: 237px; border-radius: 11px; margin: 0 auto; }
.frame.card-art iframe { transform: scale(.17593); }
.frame.preview { width: 392px; height: 490px; border-radius: 16px; box-shadow: 0 24px 50px rgba(14, 14, 17, .28); }
.frame.preview iframe { transform: scale(.36296); }
.frame.preview-sm { width: 300px; height: 375px; border-radius: 14px; }
.frame.preview-sm iframe { transform: scale(.27778); }

/* The stacked, fanned-out trio on the approvals queue. */
.fan { display: flex; gap: 8px; flex-shrink: 0; }
.fan .frame:nth-child(1) { transform: rotate(-3deg); }
.fan .frame:nth-child(3) { transform: rotate(3deg); }

.empty {
  flex: 1; border: 1px dashed var(--line-2); border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 40px; text-align: center; min-height: 180px;
}

/* Dressed-up first-run empty state: icon badge + heading + CTA, for a list
   that's empty because nothing was created yet (not "no results match"). */
.empty-hero {
  border: 1px dashed var(--line-2); border-radius: 18px; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 56px 32px; text-align: center; min-height: 260px;
}
.empty-hero .empty-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--surface); color: var(--faint);
  display: flex; align-items: center; justify-content: center;
}
.empty-hero .empty-icon svg { width: 26px; height: 26px; }
.empty-hero .t-strong { font-size: 16px; }
.empty-hero .t-sm { color: var(--muted); max-width: 42ch; }

/* Collapsible "how does this work" bar, below the empty state -- built on
   Tucano's real accordion (data-tuc-accordion wraps <details> elements;
   Tucano adds the trigger class + arrow to <summary> and wraps whatever
   comes after it into .tuc-accordion__body on its own, so the content just
   needs to be a sibling of <summary>, not wrapped by hand). */
.help-bar > summary {
  display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
.help-bar > summary::-webkit-details-marker { display: none; }
.help-bar[open] > summary { border-radius: 14px 14px 0 0; border-bottom-color: transparent; }
.help-bar .help-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  background: var(--ok-wash); color: var(--ok);
  display: flex; align-items: center; justify-content: center;
}
.help-bar .help-icon svg { width: 17px; height: 17px; }
.help-bar .tuc-accordion__body {
  border: 1px solid var(--line); border-top: none; border-radius: 0 0 14px 14px; background: var(--surface);
}
.help-bar .tuc-accordion__content { padding: 4px 18px 18px 64px; }
.help-bar .t-strong { display: block; font-size: 13.5px; }

/* ---------- Onboarding ---------- */

.onb { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 56px 24px; }
.onb-steps { display: flex; align-items: center; gap: 8px; }
.onb-steps i { width: 34px; height: 4px; border-radius: 2px; background: var(--line-2); display: block; }
.onb-steps i.is-on { background: var(--brand); }
.onb-steps span { font-size: 12px; font-weight: 600; color: var(--faint); margin-left: 8px; }
.onb-card {
  width: 100%; max-width: 620px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  padding: 44px; display: flex; flex-direction: column; gap: 28px;
  box-shadow: 0 10px 30px rgba(14, 14, 17, .05);
}
.onb-wide { width: 100%; max-width: 1020px; }
.check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-wash); color: var(--brand);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* AI dialogue bubbles. */
.say { display: flex; gap: 14px; align-items: flex-start; }
.say .who {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  background: var(--brand-wash); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.say .bubble {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; border-top-left-radius: 6px;
  padding: 20px 22px; font-size: 15px; line-height: 1.6; color: var(--ink-2);
  text-wrap: pretty;
}

.swatch {
  flex: 1; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px;
  background: var(--surface); cursor: pointer;
}
.swatch i { width: 26px; height: 26px; border-radius: 8px; display: block; border: 1px solid var(--line-2); }
/* Block, so the label and the hex stack even when the swatch is squeezed. */
.swatch .swatch-name { display: block; font-size: 11px; color: var(--faint); font-weight: 600; }
.swatch .swatch-hex { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.swatch input[type="color"] { position: absolute; opacity: 0; width: 0; height: 0; }

/* Full-width drop target: the whole rectangle takes the file, and the click
   anywhere in it opens the picker (it is a <label> for the input). */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; min-height: 152px; padding: 24px;
  border: 1px dashed var(--line-3); border-radius: 14px; background: var(--surface);
  text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--brand); background: var(--brand-wash); }
.dropzone.is-over { border-color: var(--brand); background: var(--brand-wash); }

.dropzone .dz-body {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; pointer-events: none;
}
.dropzone .dz-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--muted);
}
.dropzone .dz-main { font-size: 14px; font-weight: 600; color: var(--muted); }
.dropzone .dz-main b { color: var(--brand); font-weight: 700; }
.dropzone .dz-hint { font-size: 12px; line-height: 1.45; color: var(--faint); max-width: 330px; }

/* With a logo in place the preview itself fills the area. */
.dropzone.has-file { padding: 18px; gap: 8px; }
.dropzone.has-file img { max-width: 100%; max-height: 96px; object-fit: contain; }

/* ---------- Editor (screen 07) ---------- */

.ed { height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.ed-top {
  height: 64px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
}
.ed-body { flex: 1; display: flex; min-height: 0; }
.ed-rail {
  width: 158px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; align-items: center;
}
.ed-rail .rail-label {
  font-size: 11px; font-weight: 700; color: var(--faint);
  letter-spacing: .06em; align-self: flex-start;
}
.ed-rail .slot { display: flex; flex-direction: column; gap: 5px; width: 104px; flex-shrink: 0; }
.ed-rail .slot .frame { position: relative; }
.ed-rail .slot.is-on .frame { outline: 2px solid var(--brand); outline-offset: 2px; }
.ed-rail .slot .n {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  width: 18px; height: 18px; border-radius: 6px;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ed-rail .slot .role { font-size: 10px; font-weight: 600; color: var(--faint); text-align: center; }
.ed-rail .add {
  border: 1px dashed var(--line-3); border-radius: 11px;
  width: 104px; aspect-ratio: 4/5; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--faint); cursor: pointer; background: var(--surface);
  font-family: inherit;
}
.ed-rail .add:hover { border-color: var(--brand); color: var(--brand); }

.ed-canvas {
  flex: 1; background: var(--canvas); min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px;
}
.ed-panel {
  width: 376px; flex-shrink: 0; background: var(--surface); border-left: 1px solid var(--line);
  padding: 20px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto;
}
.ed-panel .section { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.saved-dot {
  font-size: 12px; font-weight: 600; color: var(--ok);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.saved-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: block; }
.saved-dot.is-busy { color: var(--muted); }
.saved-dot.is-busy i { background: var(--muted); }

/* ---------- Library (screen 06) ---------- */

.lib-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-content: start; }
@media (max-width: 1400px) { .lib-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1120px) { .lib-grid { grid-template-columns: repeat(3, 1fr); } }
.lib-grid > * { min-width: 0; }
.lib-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lib-card .lib-foot { display: flex; align-items: center; gap: 8px; padding: 0 4px 4px; }
.lib-card .lib-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.lib-card .lib-meta { font-size: 12px; color: var(--faint); }

/* Overflow menu on a card. */
.menu { position: relative; }
.menu-pop {
  position: absolute; right: 0; top: 36px; z-index: 20; min-width: 168px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(14, 14, 17, .12);
  padding: 6px; display: none; flex-direction: column;
}
.menu[open] .menu-pop, .menu.is-open .menu-pop { display: flex; }
.menu-pop button, .menu-pop a {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; border: none; border-radius: 8px; background: none;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.menu-pop button:hover, .menu-pop a:hover { background: var(--surface); color: var(--ink); }
.menu-pop .is-danger { color: var(--danger); }
.menu-pop .is-danger:hover { background: #FEF2F2; }

/* ---------- Colour picker ----------
   Replaces the OS dialog, which cannot be styled. Driven by
   static/js/color-picker.js; the <input type="color"> stays the source of
   truth. */

.cp {
  position: fixed; z-index: 200; width: 236px;
  display: flex; flex-direction: column; gap: 12px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(14, 14, 17, .18);
}
.cp[hidden] { display: none; }

.cp-area {
  position: relative; height: 132px; border-radius: 10px; cursor: crosshair;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, var(--hue, #f00));
  touch-action: none;
}
.cp-dot, .cp-hue-dot {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(14, 14, 17, .25);
  transform: translate(-50%, -50%); pointer-events: none;
}
.cp-hue-dot { top: 50%; background: transparent; }

.cp-controls { display: flex; align-items: center; gap: 10px; }
.cp-now {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
  border: 1px solid var(--line-2);
}
.cp-hue {
  position: relative; flex: 1; height: 12px; border-radius: 999px; cursor: pointer;
  touch-action: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.cp-drop {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.cp-drop:hover { background: var(--surface); color: var(--ink); }
.cp-drop[hidden] { display: none; }

.cp-hex { text-transform: uppercase; font-weight: 600; letter-spacing: .02em; }

.cp-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cp-swatch {
  aspect-ratio: 1; border-radius: 7px; border: 1px solid var(--line-2);
  padding: 0; cursor: pointer;
}
.cp-swatch:hover { transform: scale(1.08); }

/* ---------- Modals ---------- */

.modal-overlay {
  position: fixed; inset: 0; z-index: 100; padding: 30px;
  background: rgba(14, 14, 17, .45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.modal-overlay[hidden] { display: none; }
.modal-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  width: min(480px, 100%); max-height: 88vh; overflow-y: auto; padding: 28px;
  box-shadow: 0 24px 70px rgba(14, 14, 17, .22);
}
.modal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }

.style-option {
  width: 100%; padding: 20px 16px; border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--surface); color: var(--ink); font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: border-color .15s;
}
.style-option:hover { border-color: var(--brand); }
.style-preview { display: block; width: 80px; height: 100px; border-radius: 8px; }

/* ---------- Narrow screens ----------
   The design is drawn at 1440x900. Below that the shell keeps working: the
   sidebar collapses to icons and the widest grids drop to fewer columns. */

@media (max-width: 1080px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr !important; }
}
@media (max-width: 860px) {
  /* Off-canvas: escondido fora da tela à esquerda por padrão, desliza por
     cima do conteúdo quando .is-open (sidebar-toggle-btn, layout.templ) --
     pedido explícito do usuário ("faz ele como o off-canvas", com um
     ícone de menu do lado oposto ao avatar da conta). position:fixed tira
     o sidebar do fluxo do .shell (flex), então .main já ocupa a largura
     toda sozinho sem precisar de nenhum ajuste nele -- e como é um overlay
     com espaço de sobra, mostra os rótulos por extenso de novo em vez do
     rail só-ícone que tinha antes aqui. */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 264px;
    z-index: 200; transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1);
    box-shadow: 0 0 0 1px var(--line);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-toggle-btn { display: inline-flex; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 190;
    background: rgba(14, 14, 17, .4); opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .topbar { padding: 0 16px; }
  .content { padding: 18px 16px; }
  .searchbox { display: none; }
}

/* Celular de verdade (~360-430px), não só "janela estreita": o rail de
   72px do sidebar já sobra pouco espaço pro conteúdo (~280-320px numa tela
   de 390px). .flow-grid/.conn-grid/.channel-grid (flows.css) têm o mesmo
   problema e a mesma solução, mas moram lá -- juntar as duas media queries
   aqui não funcionaria: flows.css carrega DEPOIS deste arquivo (seu <link>
   fica dentro do <main>, não no <head>), então uma regra daqui perderia
   pra base delas por ordem, não por especificidade (achei isso ao vivo). */
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: 1fr; }
  /* Hambúrguer + título + avatar da conta ficam numa linha só (o spacer do
     título, flex:1, sozinho já empurra o avatar pra ponta -- não precisa de
     justify-content pra isso). O botão "Novo X" (flows/boards/campaigns/
     templates -- sempre filho direto de .topbar, do lado do spacer) ganha
     sua PRÓPRIA linha cheia embaixo dessa -- pedido ao vivo com print,
     comparando com o corte que tinha antes ("Novo fluxo" saindo da tela).
     order:10 tira ele do fluxo natural do DOM (ele vem ANTES do avatar no
     HTML) pra ele sempre desenhar depois do resto da primeira linha, e
     flex-basis:100% obriga a própria linha por ocupar 100% da largura
     sozinho -- ninguém mais cabe do lado de um item que pede 100%. */
  .topbar { height: auto; min-height: 72px; flex-wrap: wrap; row-gap: 10px; padding: 14px 16px; }
  /* .is-dark aqui de propósito, não .tuc-btn sozinho -- o editor de fluxo
     (flowsEditorTopbar) também põe vários tuc-btn direto no topbar
     (Editar fluxo/Ver execuções/Excluir/Publicar, todos is-outline ou
     is-danger/is-ok, nenhum is-dark) e essa regra pegava eles também,
     empilhando cada um numa linha cheia própria (achei ao vivo testando
     o editor -- só o botão "Novo X" das listas é is-dark, então isso
     já basta pra separar os dois casos). O tamanho padrão do Tucano
     (~46px, 1rem) pesa muito esticado 100% da largura -- lado a lado com
     o resto da tela (cards com título de 15px, tipo "Trabalhos") ele lia
     grande demais (pedido ao vivo, comparando print). Mesma altura do
     is-md (a variante própria do app pra isso, ver "Tucano button size:
     md" mais abaixo) e fonte reduzida pra 15px, igualando o peso visual
     do resto da tela em vez do 1rem base. */
  .topbar > .tuc-btn.is-dark { order: 10; flex-basis: 100%; width: 100%; justify-content: center; height: 2.5rem; font-size: .9375rem; }
}

/* ---------- Auth (login) split-screen -- ported from publicapost's account/base.html inline styles ---------- */
  body { margin: 0; }
  /* Fixed to the viewport, not min-height: each column scrolls on its own
     when its content is taller than the screen, instead of the whole page
     scrolling and dragging the decorative right panel along with it. */
  .auth-shell { display: grid; grid-template-columns: 1fr 1fr; height: 100vh; background: var(--surface); }

  /* One centered block, not three independently-positioned pieces: the logo,
     the form and the legal footer all live inside .auth-inner and share its
     width, so they share its edges too. .auth-left just centers that block,
     both axes — on both a tall screen and a very wide one, it reads as one
     composed unit instead of bits pinned to different edges. */
  .auth-left { height: 100%; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }

  /* The "transition between screens": since these are full page loads, not an
     SPA, this plays on every load instead — only on the inputs side, never
     on the decorative right panel. */
  @keyframes authSlideUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .auth-inner {
    width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 28px;
    animation: authSlideUp .5s cubic-bezier(.16, 1, .3, 1);
  }

  .auth-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
  .auth-brand .mark {
    width: 34px; height: 34px; border-radius: 10px; background: var(--ink-invert); color: var(--ink-invert-fg);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
  }
  .auth-brand .word { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }

  /* Every account page but login shows this instead of the brand mark. */
  .back-btn {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 16px 0 12px;
    border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface);
    color: var(--ink); font-size: 13px; font-weight: 700;
  }
  .back-btn:hover { color: var(--ink); background: var(--surface); border-color: var(--line-3); }

  .auth-form-wrap { display: flex; flex-direction: column; gap: 28px; }
  .auth-form-wrap h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.035em; color: var(--ink); line-height: 1.1; }
  .auth-form-wrap .sub { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; }

  {{/* These used to be bare `form`/`form button[type=submit]` selectors
       with no scope at all -- copied from a Django/allauth project (see the
       comments below) where the only forms on the page happened to be auth
       forms, so it never mattered there. In this app EVERY page's forms
       matched them too: found live when the flow editor's Publicar/Pausar
       button (a <button type="submit"> like any other form here) rendered
       with no border and invisible white-on-white text -- this rule's
       `border:none`/`color:#fff` were winning that fight against
       .tuc-btn/.tuc-btn.is-outline on specificity for those two specific
       properties, even though .is-outline's own (more specific)
       `background` rule won and looked normal. Scoping to .auth-shell (the
       login page's own wrapper, the only page that uses these bare
       selectors) keeps the login page exactly as it was without leaking
       into every other form in the app. */}}
  /* allauth renders its form as <p> blocks — style those directly. */
  .auth-shell form { display: flex; flex-direction: column; gap: 16px; }
  .auth-shell form p { margin: 0; display: flex; flex-direction: column; gap: 7px; }
  .auth-shell form label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .auth-shell form input[type=text], .auth-shell form input[type=email], .auth-shell form input[type=password] {
    height: 48px; padding: 0 14px;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
    color: var(--ink); font-family: inherit; font-size: 15px; outline: none;
  }
  .auth-shell form input:focus { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px rgba(91, 75, 232, .12); }

  .btn { width: 100%; height: 52px; border-radius: 14px; font-size: 15px; }
  /* allauth's own account pages (password reset, email confirm…) render a
     bare <button>, with no class of ours to hook — style it to match .btn-dark. */
  .auth-shell form button[type=submit] {
    width: 100%; height: 52px; border: none; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--ink-invert); color: var(--ink-invert-fg);
    font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  }
  .auth-shell form button[type=submit]:hover { filter: brightness(.85); }

  .divider { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; }
  .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

  .alt { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
  .alt a { font-weight: 700; }
  .auth-legal { margin: 0; font-size: 12px; color: var(--faint); }
  .errorlist { list-style: none; padding: 0; margin: 0 0 12px; color: #DC2626; font-size: 12px; }
  .helptext { display: block; font-size: 11px; color: var(--faint); margin-top: 5px; }
  /* allauth puts "Forgot your password?" here, as the password field's help text. */
  .helptext a { color: var(--brand); font-weight: 600; font-size: 13px; }

  /* Right panel: on-brand, self-contained — carousel-shaped mockups, no stock photo.
     Fixo, NUNCA inverte com o tema (diferente de --ink-invert): é arte de marca,
     não um botão -- testado ao vivo nos dois temas, escuro sempre ficou certo. */
  .auth-right {
    height: 100%; position: relative; overflow: hidden; background: #0E0E11;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 56px; gap: 36px;
  }
  .auth-right .glow { position: absolute; border-radius: 50%; filter: blur(20px); }
  .auth-right .glow.a { top: -120px; right: -120px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(232, 49, 138, .35), transparent 65%); }
  .auth-right .glow.b { bottom: -160px; left: -100px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(91, 75, 232, .4), transparent 65%); }

  @keyframes floatUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  .auth-cards { position: relative; display: flex; gap: 18px; align-items: flex-end; justify-content: center; flex: 1; padding-top: 40px; }
  .auth-cards .card {
    border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .45); padding: 16px;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
    animation: floatUp 7s ease-in-out infinite;
  }
  .auth-cards .bar { display: block; height: 8px; border-radius: 4px; }
  .auth-cards .c1 { width: 150px; aspect-ratio: 4/5; background: linear-gradient(160deg, #2A2A34, #16161C); transform: rotate(-4deg); }
  .auth-cards .c2 {
    width: 190px; aspect-ratio: 4/5; background: linear-gradient(160deg, #3A2340, #17131F);
    border-color: rgba(255, 255, 255, .12); box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
    justify-content: space-between; animation-duration: 6s;
  }
  .auth-cards .c3 { width: 150px; aspect-ratio: 4/5; background: linear-gradient(160deg, #1E2A3A, #14161C); transform: rotate(4deg); animation-duration: 8s; }

  .auth-copy { position: relative; display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
  .auth-copy h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1.2; }
  .auth-copy p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .6); }
  .auth-pills { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
  .auth-pills span { padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .75); }

  /* Password field's show/hide toggle — works on every password input on
     every account page (login, signup, reset…), added by the script below. */
  .pw-wrap { position: relative; }
  /* Wrapping the input in this div takes it out of the <p>'s flex-stretch,
     so it falls back to the browser's intrinsic (narrow) input width unless
     told explicitly to fill the wrapper again.
     !important on padding-right: must beat the base field rule's own
     `padding` shorthand, which is more specific (form input[type=password])
     than this wrapper selector — and stays needed once the type flips to "text". */
  .pw-wrap input { width: 100%; padding-right: 44px !important; }
  .pw-toggle {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: none; border-radius: 8px; background: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--faint); cursor: pointer;
  }
  .pw-toggle:hover { color: var(--muted); background: var(--surface); }

  @media (max-width: 900px) {
    /* No second column to protect from the scroll below — let the page
       scroll normally instead of nesting a nested-scroll region. */
    .auth-shell { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
    .auth-right { display: none; }
    .auth-left { height: auto; overflow: visible; padding: 32px 24px; }
  }

/* ---------- Tucano theme override ----------
   Tucano (internal/web/static/tucano.min.css/.js) owns interactive-component
   behavior (validation, toast, reveal, dropdowns...) -- this project owns
   the look. Per Tucano's own docs: never style its internal .tuc-*__*
   classes directly, override its --tuc-* tokens instead. Mapped from the
   publicapost palette above, not new colors. */
:root {
  --tuc-accent: var(--brand);
  --tuc-accent-hover: var(--brand-ink);
  --tuc-accent-fg: #fff;
  --tuc-accent-text: var(--brand);
  --tuc-danger: var(--danger);
  --tuc-success: var(--ok);
  --tuc-warning: var(--warn);
  --tuc-bg: var(--surface);
  --tuc-fg: var(--ink);
  --tuc-muted: var(--muted);
  --tuc-border: var(--line-2);
  --tuc-radius: 0.75rem;
  --tuc-radius-md: 0.6875rem;
  --tuc-control-height: 2.875rem;
  --tuc-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ---------- Tucano button variant: dark ----------
   Tucano ships is-primary/is-outline/is-ghost/is-danger/is-link -- no dark
   variant. publicapost's own login used a black button (.btn-dark) for the
   primary CTA specifically, distinct from the brand-purple accent used
   elsewhere. Adding this as a new modifier alongside .tuc-btn (not
   overriding Tucano's own classes) keeps Tucano's interactive behavior
   (hover, focus ring, aria-busy spinner) while getting this one color right. */
.tuc-btn.is-dark {
  background: var(--ink-invert); border-color: var(--ink-invert); color: var(--ink-invert-fg);
}
.tuc-btn.is-dark:hover { filter: brightness(.85); color: var(--ink-invert-fg); }

/* ---------- Tucano button variant: ok (green) ----------
   Same reasoning as is-dark above: Tucano has is-danger (red) built in, no
   green counterpart. Used on the flow editor's Publicar/Pausar button
   (flows_editor.templ) -- Publicar in green (is-ok), Pausar in Tucano's own
   red is-danger, so the colour itself says which way the button goes,
   not just the word. */
.tuc-btn.is-ok {
  background: var(--ok); border-color: var(--ok); color: #fff;
}
.tuc-btn.is-ok:hover { background: var(--ok-ink); border-color: var(--ok-ink); color: #fff; }

/* ---------- Tucano button size: md ----------
   Tucano itself only ships two size modifiers, is-sm (30px) and is-lg (44px) --
   no built-in "medium" between them, despite there being an sm/md/lg pattern
   elsewhere (modals, for instance, do have is-sm/is-md/is-lg). is-md here is
   this app's own addition to fill that specific gap for buttons, same as
   is-dark/is-ok above are colour variants Tucano doesn't ship either. Sized
   at 40px height, going 34px first, still read as small next to is-lg-sized
   things -- the TEXT stays the base .tuc-btn size (1rem), same as every
   other button in the app that carries no size modifier at all (reported
   live: is-md's own smaller 15px made these read as smaller text than
   buttons elsewhere, not just a shorter button). */
.tuc-btn.is-md {
  height: 2.5rem; padding-inline: calc(var(--spacing, .25rem) * 3);
  border-radius: var(--tuc-radius-md);
}

/* ---------- Account chip (topbar, right corner) ----------
   Moved out of the sidebar footer. margin-left:auto keeps it on the right
   even on pages whose custom topbar has no .spacer of its own. */
.user-menu { margin-left: auto; flex-shrink: 0; }
/* 16px = the avatar's own 9px radius + this padding's 6px -- concentric with
   .avatar-square instead of a full pill wrapped around a square corner
   (reported live: the two radii didn't match). */
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--surface); font-family: inherit; text-align: left; cursor: pointer;
}
.user-chip:hover { background: var(--surface); }
.user-chip .uc-who { display: flex; flex-direction: column; min-width: 0; max-width: 160px; }
.user-chip .uc-name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.user-chip .uc-tenant { font-size: 11px; color: var(--faint); line-height: 1.25; }
.user-chip .uc-caret { color: var(--faint); font-size: 12px; }
@media (max-width: 640px) { .user-chip .uc-who, .user-chip .uc-caret { display: none; } .user-chip { padding: 4px; } }

/* The subscription line over every page (layout.templ planBanner). */
.plan-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 16px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.plan-banner.is-brand { background: var(--brand-wash); color: var(--brand-ink); }
.plan-banner.is-warn { background: var(--warn-wash); color: var(--warn); }
.plan-banner.is-danger { background: #FDECEC; color: var(--danger); }

/* A <form> between a Tucano modal's panel and its header/body/footer (the
   panel also holds a second, separate form): it takes the panel's column
   layout, so the body scrolls inside the panel's max height instead of the
   content running off the bottom of the screen. */
.tuc-modal__form { display: flex; flex-direction: column; gap: calc(var(--spacing, .25rem) * 4); flex: 1 1 auto; min-height: 0; }

/* Account menu: the company's stored files, out of the plan's space. */
.acct-storage { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.acct-storage .t-xs { color: var(--muted); }
.acct-storage-bar { display: block; height: 5px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.acct-storage-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.acct-storage-bar.is-full > span { background: var(--danger); }