/* ==========================================================================
   Mellina — design system (Kit de implementação v1.0, out/2026).

   Light by default, and that is the whole decision: the work surface is Ivory,
   the cards are Paper, and the only dark thing on the screen is the rail you
   navigate from. Coral is the energy — one primary action per context, never
   wallpaper. Every screen must still answer: where am I, what matters now,
   what is the next action.

   The tokens below are the ones in `brand/mellina-v1/01_Marca/TOKENS.md`, and
   they are defined once, here. A colour written into a component is a colour
   the next rebrand will not find.
   ========================================================================== */

/* ---------- fonts (self-hosted; CSP allows 'self' only) ------------------
   Noto Sans for the interface, as TOKENS.md requires. Self-hosted rather than
   linked: the Content-Security-Policy on every response is `default-src
   'self'`, so a Google Fonts stylesheet would simply be refused — and a font
   that loads from somebody else's CDN is a third party on every page view.

   Two subsets, both variable 400–800: `latin` carries the alphabet and
   `latin-ext` the rest of Portuguese's neighbourhood. The browser fetches the
   second only if a glyph needs it. */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/notosans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/notosans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The slide renderer's own face (Inter), for the editor's local text layer:
   while a slide renders, an edited title is drawn in the browser with the
   renderer's metrics, so it has to be the same family. Loaded only by the
   editor (nothing else names it). */
@font-face {
  font-family: 'Mellina Slide Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/inter-var.woff2') format('woff2');
}

/* ---------- tokens --------------------------------------------------------
   The nine from TOKENS.md, written once. Everything else on this page is
   derived from them — which is what makes "não deixe cores soltas espalhadas
   pelos componentes" a property of the stylesheet rather than a promise. */
:root {
  /* brand palette (TOKENS.md) */
  --ink: #250817;
  --aubergine: #56132F;
  --coral: #FF5B55;
  --blush: #F2C8C4;
  --ivory: #F8F2EC;
  --paper: #FFFDFA;
  --success: #207A52;

  /* The two tones the kit does not name, because the prototypes never had to
     report a failure. Chosen on the same warm axis and checked against Paper:
     both clear 4.5:1 for body text. */
  --amber: #9A5B12;
  --crimson: #B3261E;

  /* surfaces: Ivory ground, Paper cards, two warmer steps for insets */
  --bg: var(--ivory);
  --surface: var(--paper);
  --surface-2: #FBF5F0;
  --surface-3: #F3E7E1;
  --line: #EADBD5;
  --line-strong: #DCC5BC;

  /* text */
  --text: var(--ink);
  --muted: #806C76;
  /* Tertiary marks only — step counters, timestamps on a card that already
     says what it is. Still 4.5:1 on Paper; anything quieter would not be. */
  --dim: #8E7A82;

  /* semantics */
  --primary: var(--coral);
  --accent: var(--success);
  --ok: var(--success);
  --warn: var(--amber);
  --bad: var(--crimson);
  --info: var(--aubergine);

  /* brand energy: one coral action per context, and a single warm rail for
     the places that used to carry the spectral gradient. */
  --gradient: linear-gradient(120deg, var(--coral) 0%, var(--aubergine) 100%);
  --gradient-soft: linear-gradient(120deg, rgba(255, 91, 85, 0.14), rgba(86, 19, 47, 0.10));
  --cta: var(--coral);
  /* Coral is a light colour: white text on it fails contrast, Ink passes
     comfortably. The prototype makes the same call. */
  --on-cta: var(--ink);

  /* The dark rail, and what sits on it. Named here so the sidebar block below
     is a re-binding of tokens rather than a second palette. */
  --rail: var(--ink);
  --rail-text: var(--paper);
  --rail-muted: #CDBBC4;

  /* legacy names still referenced with fallbacks in older rules */
  --border: var(--line);
  --panel: var(--surface-2);
  /* "the strongest text on whichever ground this is". The rail re-binds it,
     which is why a component can be rendered on either side unchanged. */
  --text-strong: var(--ink);

  /* The kit's geometry: cards at 18, controls at 11. Both prototypes agree,
     and a 12px card beside a 18px metric reads as two design systems. */
  --radius: 18px;
  --radius-sm: 11px;

  --font-ui: 'Noto Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Editorial headings are set in a high-contrast serif, as the kit asks and
     as both prototypes do. Georgia is on every platform this product is read
     on, so no second file is fetched to draw a page title. */
  --font-display: Georgia, 'Times New Roman', 'Noto Serif', serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --speed: 160ms;
}

/* ---------- base ---------------------------------------------------------- */
* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  color: var(--text);
  font: 14px/1.55 var(--font-ui);
  letter-spacing: 0.005em;
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

body.centered { display: grid; place-items: center; min-height: 100vh; }

/* Headings are Noto Sans by default. The serif is an *editorial* voice, not a
   heading style: it belongs to page titles, the pieces themselves and the
   numbers that report on them — the places both prototypes use it — and it is
   opted into through `.display`. A 12px uppercase label set in Georgia is how
   a serif stops meaning anything. */
h1, h2, h3, h4 { font-family: var(--font-ui); letter-spacing: -0.01em; }

.display,
.page-head h1,
.cockpit-head h1,
.hero h1,
.login h1,
.gen-progress h2,
.journey-head h2,
.article-title,
.idea-title,
.type-title,
.pc-title,
.brand-hero-name,
.cluster-head h3,
.cockpit-idea h3,
.tile-value,
.metric-value,
.stage-metric-value,
.radar-facts dd,
.agenda-range,
.agw-num {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
}

a { color: var(--aubergine); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(255, 91, 85, 0.30); color: var(--ink); }

/* Coral on Ivory is the one focus ring that is visible on both grounds, and
   the rail re-binds it to Coral too — see the sidebar block. */
:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 4px; }

/* `minmax(0, 1fr)` rather than `1fr`: a grid item's default `min-width: auto`
   lets a long word, a wide table or the nav row push its column past the
   viewport, and the page then scrolls sideways with the sidebar half off
   screen. Zero is the floor that says "shrink me instead". */
.shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.shell > * { min-width: 0; }

/* ---------- sidebar -------------------------------------------------------
   The one dark surface in the product. Rather than a second palette, the rail
   *re-binds the same token names* to their dark values: every descendant rule
   below — and every component that happens to be rendered inside the rail —
   then reads the right colour without knowing it is on a dark ground. */
.sidebar {
  --text: var(--rail-text);
  --muted: var(--rail-muted);
  --dim: #B6A2AB;
  --text-strong: var(--rail-text);
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.08);
  color: var(--rail-text);
  border-right: 0;
  background: var(--rail);
  padding: 20px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 8px 6px;
}
/* The approved wordmark, as an image and nothing else. It is never set in a
   typeface, never redrawn and never recoloured — see TOKENS.md. `height:auto`
   with a width cap preserves its ratio and its breathing room. */
.sidebar-brand { padding: 2px 6px 10px; }
.sidebar-brand img { width: 136px; max-width: 100%; height: auto; display: block; }

/* legacy brand row (kept: a couple of screens still render it) */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }

/* the active context: which brand/workspace the work belongs to */
.context-card {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.context-card .context-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.context-card select {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 2px 0;
  color: var(--text-strong);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.context-card select:focus { outline: none; }
.context-card .workspace-meta { color: var(--muted); font-size: 11px; margin-top: 2px; }
.context-card button { margin-top: 8px; width: 100%; }

.workspace { padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius); }
.workspace-name { font-weight: 600; font-size: 13px; }
.workspace-meta { color: var(--muted); font-size: 11px; }

.sidebar nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar nav a {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: 9px; color: var(--muted); font-size: 13.5px;
  font-weight: 500;
  transition: color var(--speed) ease, background var(--speed) ease;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, 0.07); color: var(--rail-text); text-decoration: none; }
.sidebar nav a.active { color: var(--rail-text); font-weight: 700; background: rgba(255, 91, 85, 0.16); }
/* Coral, and on the inside edge: the prototype marks the active row with an
   inset rule rather than a floating pill. */
.sidebar nav a.active::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--coral);
}
.sidebar nav a em {
  font-style: normal; background: var(--coral); color: var(--ink);
  border-radius: 999px; padding: 0 6px; font-size: 11px; font-weight: 700;
}

.nav-group { margin-bottom: 12px; }
.nav-group-title {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); padding: 0 12px 4px; font-weight: 600; opacity: 0.8;
}
.nav-group.secondary { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); opacity: 0.75; }
.nav-group.secondary a { font-size: 12.5px; padding-top: 6px; padding-bottom: 6px; }
.nav-group.secondary:hover { opacity: 1; }

.nav-collapsible { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.nav-collapsible summary {
  cursor: pointer; color: var(--muted); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 4px 12px; list-style: none;
}
.nav-collapsible summary::-webkit-details-marker { display: none; }
.nav-collapsible summary::after { content: ' ▸'; }
.nav-collapsible[open] summary::after { content: ' ▾'; }
.nav-collapsible a { font-size: 12.5px; }

.user { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--line); }
.user-name { font-weight: 600; font-size: 13px; }
.user-meta { color: var(--muted); font-size: 11px; margin-bottom: 8px; }

/* ---------- main ---------------------------------------------------------- */
main { padding: 24px 36px 80px; max-width: 1400px; margin: 0 auto; width: 100%; }

.topbar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px; min-height: 38px;
}
.topbar .switcher { margin-bottom: 0; margin-right: auto; }
.switcher { display: flex; gap: 6px; }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 8px 0 22px; }
.page-head h1 { margin: 0; font-size: 34px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.08; }
.page-head p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.notice {
  background: rgba(86, 19, 47, 0.06); border: 1px solid rgba(86, 19, 47, 0.22);
  border-radius: var(--radius-sm); padding: 11px 15px; margin-bottom: 14px; font-size: 13px;
}
.notice.simulated, .notice.warn { background: rgba(154, 91, 18, 0.08); border-color: rgba(154, 91, 18, 0.4); color: var(--warn); }
.notice.subtle { background: transparent; border-color: var(--line); color: var(--muted); font-size: 12.5px; }
.error { color: var(--bad); }
.empty { color: var(--muted); padding: 14px 0; font-size: 13px; }

.page-hint { color: var(--muted); margin: -8px 0 18px; max-width: 70ch; line-height: 1.55; }

/* ---------- cards & tiles ------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
}
.card > header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.card h2 { margin: 0; font-size: 16px; font-weight: 700; font-family: var(--font-ui); letter-spacing: 0; }
.card .meta { color: var(--muted); font-size: 12px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-bottom: 18px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.tile-value { font-family: var(--font-display); font-size: 32px; font-weight: 400; letter-spacing: -0.02em; }
.tile-label { color: var(--muted); font-size: 12px; }
.tile.ok .tile-value { color: var(--ok); }
.tile.warn .tile-value { color: var(--warn); }
.tile.bad .tile-value { color: var(--bad); }

/* ---------- tables -------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
tbody tr:hover { background: rgba(37, 8, 23, 0.03); }
td .inline { display: inline; }

/* ---------- badges -------------------------------------------------------- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; border: 1px solid var(--line-strong);
  background: var(--surface-3); color: var(--muted); white-space: nowrap;
}
.badge.ok { color: var(--ok); border-color: rgba(32, 122, 82, 0.5); background: rgba(32, 122, 82, 0.08); }
.badge.warn, .badge.sim { color: var(--warn); border-color: rgba(154, 91, 18, 0.5); background: rgba(154, 91, 18, 0.08); }
.badge.bad { color: var(--bad); border-color: rgba(179, 38, 30, 0.5); background: rgba(179, 38, 30, 0.08); }
.badge.info { color: var(--aubergine); border-color: rgba(86, 19, 47, 0.5); background: rgba(86, 19, 47, 0.08); }
/* The glyph carries the same meaning as the colour, so a status is still
   readable to someone who cannot tell the greens from the oranges. */
.badge-icon { margin-right: 5px; font-weight: 700; opacity: 0.9; }

/* Technical details — folded, and only rendered for owners and admins (§6). */
.tech-details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.tech-details > summary {
  cursor: pointer; font-size: 12px; color: var(--muted); font-weight: 600;
}
.tech-details > summary:hover { color: var(--text-strong); }
.tech-details dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px;
  margin: 8px 0 0; font-size: 12px;
}
.tech-details dt { color: var(--muted); }
.tech-details dd { margin: 0; overflow-wrap: anywhere; }

/* Networks: one row per social network, listing the ways in (§8). */
.net-routes { margin: 8px 0 4px; font-size: 12px; }
.net-route-list { margin: 0 0 6px; padding-left: 18px; font-size: 12px; color: var(--muted); }
.net-route-list strong { color: var(--text); }
.net-who { display: block; flex-basis: 100%; margin-top: 4px; }
.badge.caveat { color: var(--warn); border-color: rgba(154, 91, 18, 0.5); background: rgba(154, 91, 18, 0.08); }

/* ---------- search / meter ------------------------------------------------ */
form.inline-search { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
form.inline-search input[type="search"] { flex: 1; }
mark { background: var(--blush); color: var(--ink); border-radius: 3px; padding: 0 2px; }

.meter {
  display: inline-block; vertical-align: middle; width: 90px; height: 6px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line);
  overflow: hidden;
}
.meter-fill { display: block; height: 100%; background: var(--muted); }
.meter-fill.ok { background: var(--ok); }
.meter-fill.warn { background: var(--warn); }
.meter-fill.bad { background: var(--bad); }
.meter-label { margin-left: 8px; font-size: 11px; color: var(--muted); }

/* ---------- forms --------------------------------------------------------- */
form.stack { display: flex; flex-direction: column; gap: 12px; }
form.inline { display: inline-block; margin: 0 2px 0 0; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }

input, select, textarea {
  background: var(--paper); color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13.5px; width: 100%;
  transition: border-color var(--speed) ease, background var(--speed) ease;
}
/* `width: 100%` above is meant for text fields. A radio or a checkbox that
   inherits it is how an invisible control ends up as wide as the page — and,
   once it is also `position: absolute`, how it drags the document past the
   viewport and raises a horizontal scrollbar nobody asked for. */
input[type="radio"], input[type="checkbox"] { width: auto; }
input::placeholder, textarea::placeholder { color: rgba(128, 108, 118, 0.75); }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 91, 85, 0.25);
  background: var(--paper);
}
textarea { resize: vertical; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.55; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
small { color: var(--muted); font-size: 11.5px; }

fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 6px; margin: 0 0 14px; }
fieldset legend { padding: 0 6px; font-size: 12px; color: var(--muted); }

button {
  background: var(--paper); color: var(--text-strong); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 8px 15px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background var(--speed) ease, border-color var(--speed) ease, transform var(--speed) ease;
}
button:hover { background: var(--surface-3); }
button:active { transform: translateY(1px); }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); }
button.ghost:hover { color: var(--text-strong); border-color: var(--muted); background: rgba(37, 8, 23, 0.04); }
button.danger { background: transparent; color: var(--bad); border-color: rgba(179, 38, 30, 0.5); }
button.danger:hover { background: rgba(179, 38, 30, 0.08); }

/* The primary call to action. The exclusion list names every button that is a
   submit but not a call to action — a space in the switcher is a navigation,
   and painting all four of them with the CTA gradient made every space look
   like the selected one. */
button[type="submit"]:not(.ghost):not(.danger):not(.lang):not(.chip):not(.space-option):not(.nav-collapse):not(.design-option),
button.primary, a.button.primary {
  background: var(--cta); color: var(--on-cta); border: 0; font-weight: 800;
  box-shadow: 0 2px 12px rgba(255, 91, 85, 0.30);
}
button[type="submit"]:not(.ghost):not(.danger):not(.lang):not(.chip):not(.nav-collapse):not(.design-option):hover,
button.primary:hover, a.button.primary:hover { filter: brightness(0.96); background: var(--cta); }

a.button {
  display: inline-block; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--line-strong); cursor: pointer;
  color: var(--text-strong); background: var(--paper);
}
a.button:hover { text-decoration: none; }
a.button.ghost { background: transparent; color: var(--muted); border-color: var(--line-strong); }
a.button.ghost:hover { color: var(--text-strong); border-color: var(--muted); background: rgba(37, 8, 23, 0.04); }

/* An inline SVG has no intrinsic size. Left alone it grows to fill its button,
   which is how "Gerar outra direção criativa" came out as a palm-sized star.
   A button that carries one says so with `.icon-button` — a class rather than
   `:has()`, because this stylesheet should not need a 2023 selector to lay a
   button out. */
.icon-button { display: inline-flex; align-items: center; gap: 8px; }
button > svg, a.button > svg, .icon-button > svg { width: 17px; height: 17px; flex: none; }
.nav-slide > svg { width: 20px; height: 20px; }

.form-actions { display: flex; gap: 8px; align-items: center; }

.field-row { display: flex; gap: 12px; }
.field-row label { flex: 1; }

.inline-check { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 8px 0; font-weight: 400; flex-direction: row; }
.inline-check input { width: auto; margin: 0; }

/* color picker pair */
.color-field { display: block; margin-bottom: 10px; }
.color-field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.color-controls { display: flex; align-items: center; gap: 8px; }
.color-controls input[type="color"] { width: 38px; height: 32px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 8px; background: none; cursor: pointer; }
.color-controls input[type="text"] { flex: 1; max-width: 140px; }

/* ---------- login ---------------------------------------------------------
   The entrance carries the approved wordmark on Ivory, which is the primary
   lock-up's own ground. Nothing here is typeset as "Mellina". */
.login-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; }
.login-lockup { width: min(260px, 60vw); height: auto; display: block; margin: 0 auto 6px; }
.login-back { font-size: 13px; color: var(--muted); }
.login {
  width: min(400px, 92vw);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(37, 8, 23, 0.12);
}
.login h1 { font-size: 26px; }
.login h1 { font-size: 19px; margin: 4px 0 12px; }
.login .tagline { color: var(--muted); font-size: 12.5px; margin: -6px 0 14px; }

/* ---------- language switcher --------------------------------------------- */
.lang-switcher { display: inline-flex; align-items: center; gap: 2px; }
.lang-switcher .lang-option { display: inline; margin: 0; }
.lang-switcher .lang-sep { color: var(--line-strong); font-size: 12px; }
.lang-switcher button.lang {
  background: none; border: none; padding: 4px 6px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--muted); cursor: pointer; border-radius: 4px; box-shadow: none;
}
.lang-switcher button.lang:hover { color: var(--text-strong); background: rgba(37, 8, 23, 0.06); }
.lang-switcher button.lang.is-current { color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; }

.create-cta { margin-left: auto; }
.topbar .create-cta + .lang-switcher { margin-left: 12px; }

/* ---------- home ---------------------------------------------------------- */
.hero { padding: 34px 4px 26px; position: relative; }
.hero .hero-kicker {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 800; margin-bottom: 14px; color: var(--coral);
  display: inline-block;
}
.hero h1 {
  font-size: clamp(34px, 5vw, 52px); margin: 0 0 10px; line-height: 1.04;
}
.hero p { color: var(--muted); font-size: 16px; margin: 0 0 22px; max-width: 560px; }
.hero .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-cta {
  font-size: 14.5px; padding: 11px 24px; border-radius: 11px;
  background: var(--cta); color: var(--on-cta); box-shadow: 0 6px 22px rgba(255, 91, 85, 0.32);
}
.hero-cta:hover { filter: brightness(0.96); }

.home-section { margin: 30px 4px 0; }
.home-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home-section h2 {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px; font-weight: 700; font-family: var(--font-ui);
}
.see-all { margin-top: 12px; font-size: 13px; }

.review-callout {
  display: flex; align-items: center; gap: 14px;
  background: var(--gradient-soft);
  border: 1px solid rgba(255, 91, 85, 0.4);
  border-radius: var(--radius); padding: 14px 18px; margin: 0 0 18px; font-weight: 600;
}
.review-callout span { flex: 1; }
.review-counter { text-transform: capitalize; }

.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.quick-actions .button.quick { padding: 14px 18px; font-size: 14px; }

/* ---------- content cards ------------------------------------------------- */
.content-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.content-card {
  position: relative;
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  color: var(--text);
  transition: border-color var(--speed) ease, transform var(--speed) ease, box-shadow var(--speed) ease;
}
.content-card::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--coral); opacity: 0; transition: opacity var(--speed) ease;
}
.content-card:hover {
  text-decoration: none; border-color: rgba(37, 8, 23, 0.22);
  transform: translateY(-2px); box-shadow: 0 10px 32px rgba(37, 8, 23, 0.10);
}
.content-card:hover::after { opacity: 1; }
.cc-thumb { aspect-ratio: 2.2 / 1; background: var(--surface-3); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cc-thumb-empty { color: var(--muted); font-size: 26px; font-family: var(--font-display); }
.cc-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; }
.cc-title { font-weight: 600; line-height: 1.4; }
.cc-meta { color: var(--muted); font-size: 12px; }
.cc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.cc-when { color: var(--muted); font-size: 12px; }

/* list controls: search + filter chips */
.list-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.search input[type="search"] {
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--text); padding: 8px 18px; min-width: 260px; font-size: 13px;
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-block; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--line-strong); color: var(--muted); background: transparent;
  transition: color var(--speed) ease, border-color var(--speed) ease, background var(--speed) ease;
}
.chip:hover { text-decoration: none; border-color: var(--coral); color: var(--text-strong); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }

/* planned list (home + agenda) */
.planned-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.planned-item {
  display: flex; align-items: center; gap: 16px; padding: 11px 15px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text);
  transition: border-color var(--speed) ease;
}
.planned-item:hover { text-decoration: none; border-color: rgba(37, 8, 23, 0.25); }
.planned-when { color: var(--muted); font-size: 12.5px; min-width: 112px; font-variant-numeric: tabular-nums; }
.planned-what { display: flex; flex-direction: column; flex: 1; }
.planned-what small { color: var(--muted); }
.planned-cta { margin-left: 10px; }
.agenda-day { margin-bottom: 22px; }
.agenda-day h2 { font-size: 14px; color: var(--muted); text-transform: capitalize; margin: 0 0 8px; }

/* ---------- studio: format selection -------------------------------------- */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 16px; margin-top: 8px; }
.type-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 22px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface) 70%);
  border: 1px solid var(--line); border-radius: 16px;
  color: var(--text); min-height: 188px; overflow: hidden;
  transition: border-color var(--speed) ease, transform var(--speed) ease, box-shadow var(--speed) ease;
}
.type-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--coral); opacity: 0; transition: opacity var(--speed) ease;
}
.type-card:hover {
  text-decoration: none; border-color: rgba(37, 8, 23, 0.25);
  transform: translateY(-3px); box-shadow: 0 14px 40px rgba(37, 8, 23, 0.12);
}
.type-card:hover::before { opacity: 1; }
.type-glyph {
  font-size: 34px; line-height: 1; font-weight: 400; font-family: var(--font-display);
  color: var(--coral);
}
.type-title { font-size: 20px; margin-top: 6px; line-height: 1.2; }
.type-desc { color: var(--muted); font-size: 13px; line-height: 1.5; flex-grow: 1; }
.type-cta { color: var(--aubergine); font-weight: 600; font-size: 13px; }

/* ---------- briefing ------------------------------------------------------- */
.brief-wrap { max-width: 680px; }
.brief-form { display: flex; flex-direction: column; gap: 20px; }
.brief-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 2px; }
.brief-brand-label { color: var(--muted); font-size: 12.5px; }
.brief-brand select { margin: 0; width: auto; }
.brief-net {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--aubergine);
  border: 1px solid rgba(86, 19, 47, 0.5); border-radius: 999px; padding: 3px 12px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { font-weight: 600; font-size: 14px; color: var(--text-strong); }
.field .optional { color: var(--muted); font-weight: 400; font-style: normal; font-size: 12px; }
.brief-form input[type="text"], .brief-form textarea {
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 12px;
  color: var(--text); padding: 13px 16px; font: inherit; width: 100%;
}
.brief-form textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.brief-form textarea[name="topic"] { min-height: 128px; font-size: 15px; }
.brief-form input:focus, .brief-form textarea:focus {
  outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 91, 85, 0.25);
}
.primary-lg {
  font-size: 15px; padding: 13px 30px; border-radius: 12px; align-self: flex-start;
  background: var(--cta); color: var(--on-cta); border: 0; cursor: pointer; font-weight: 800;
  box-shadow: 0 6px 22px rgba(255, 91, 85, 0.32);
}
.primary-lg:hover { filter: brightness(0.96); }

/* segmented control */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* The label is the containing block, so the hidden input can never be measured
   against the page. It stays in the accessibility tree and keeps its focus ring
   (drawn on the pill by `:focus-visible + span`), which `display: none` would
   take away along with keyboard selection. */
.segment { position: relative; }
.segment input {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  opacity: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  pointer-events: none;
}
.segment span {
  display: inline-block; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); color: var(--muted); font-size: 13px; font-weight: 500;
  transition: all 0.13s ease;
}
.segment input:checked + span { background: rgba(255, 91, 85, 0.22); border-color: var(--coral); color: var(--text-strong); font-weight: 600; }
.segment input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }
.segment:hover span { border-color: var(--coral); color: var(--text-strong); }

/* upload dropzone */
.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 34px 20px; border: 2px dashed var(--line-strong); border-radius: 16px;
  background: rgba(37, 8, 23, 0.02); text-align: center; cursor: pointer;
  transition: border-color var(--speed) ease, background var(--speed) ease;
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--coral); background: rgba(255, 91, 85, 0.05); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-prompt { font-weight: 600; font-size: 14px; }
.dz-button {
  display: inline-block; padding: 7px 18px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--coral); color: var(--aubergine); pointer-events: none;
}
.dz-name { color: var(--ok); font-size: 13px; font-weight: 600; min-height: 1em; }
.dz-hint { color: var(--muted); font-size: 12px; }

/* image source cards */
.source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.source-card { position: relative; display: flex; cursor: pointer; }
.source-card input {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  opacity: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  pointer-events: none;
}
.source-card .sc-body {
  display: flex; flex-direction: column; gap: 5px; width: 100%;
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 16px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.source-card:hover .sc-body { border-color: var(--coral); }
.source-card input:checked + .sc-body { border-color: var(--coral); background: rgba(255, 91, 85, 0.08); box-shadow: 0 0 0 1px var(--coral); }
.source-card input:focus-visible + .sc-body { outline: 2px solid var(--coral); outline-offset: 2px; }
.sc-title { font-weight: 700; font-size: 13.5px; }
.sc-desc { color: var(--muted); font-size: 12px; line-height: 1.4; }
.sc-note { color: var(--warn); font-size: 11.5px; }

.source-panel { display: none; flex-direction: column; gap: 18px; }
.brief-form:has(input[name="imageSource"][value="ai"]:checked) [data-panel="ai"] { display: flex; }
.brief-form:has(input[name="imageSource"][value="upload"]:checked) [data-panel="upload"] { display: flex; }
.brief-form:has(input[name="imageSource"][value="brand"]:checked) [data-panel="orientation"] { display: none; }

.action-label { align-self: center; font-size: 12.5px; }
.art-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.art-thumb { display: flex; flex-direction: column; gap: 6px; }
.art-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; }

/* ---------- content workspace --------------------------------------------- */
.back-row { margin-bottom: 6px; }
.back-link { color: var(--muted); font-size: 13px; }
.back-link:hover { color: var(--aubergine); text-decoration: none; }

.studio-main { display: grid; grid-template-columns: minmax(min(380px, 100%), 600px) minmax(min(300px, 100%), 1fr); gap: 28px; align-items: start; }
@media (max-width: 980px) { .studio-main { grid-template-columns: 1fr; } }

/* the canvas: a neutral frame around the brand's piece — MIRA recedes here */
.studio-preview {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
}
.studio-preview .pv-wrap { max-width: 560px; margin: 0 auto; }

.studio-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.export-block { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.export-row { display: inline-flex; }
.export-box { width: 100%; font-size: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* A panel is a block of its own, and it has to read as one: 20px above it
   separates it from whatever it follows — the "Detalhes" box sat flush
   against the preview and looked glued to it. Two panels in a row keep the
   tighter 12px rhythm, because there the grouping is the point. */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 16px; margin: 20px 0 12px; }
.panel + .panel, .panel + .panel-static, .panel-static + .panel { margin-top: 12px; }
.panel:first-child { margin-top: 0; }
.panel > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.panel > summary:hover { color: var(--aubergine); }
.panel[open] > summary { margin-bottom: 12px; }
.sub-panel { margin-top: 10px; }
.sub-panel > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.panel-static { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 16px; margin: 20px 0 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.panel-static:first-child { margin-top: 0; }
.details-panel h3 { font-size: 12px; margin: 16px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-ui); }

dl.strategy > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
dl.strategy > div:last-child { border-bottom: none; }
dl.strategy dt { color: var(--muted); font-size: 12px; margin: 0; }
dl.strategy dd { margin: 0; }

.variant { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface-2); }
.variant h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.variant p { margin: 0 0 6px; white-space: pre-wrap; }
.variant-block { display: flex; flex-direction: column; gap: 10px; }
.variant-block h4 { margin: 0; font-size: 14px; }
.variant-block details { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.variant-block details summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.variant-block details[open] summary { margin-bottom: 10px; }

/* generation progress: signal, not spinner */
.gen-progress { padding: 30px 8px; }
.gen-progress h2 { font-size: 18px; margin: 0 0 6px; }
.gen-progress h2::before {
  content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 10px; background: var(--coral);
  animation: mellina-pulse 1.6s ease-in-out infinite;
}
.gen-steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.gen-steps li { color: var(--muted); font-size: 14px; }
.gen-steps li span { display: inline-block; width: 22px; }
.gen-steps li.is-done { color: var(--ok); }
.gen-steps li.is-current { color: var(--text-strong); font-weight: 600; }
@keyframes mellina-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 91, 85, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(255, 91, 85, 0); }
}
.gen-failed {
  border: 1px solid rgba(179, 38, 30, 0.5); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 16px; background: rgba(179, 38, 30, 0.07);
}
.gen-failed p { margin: 0 0 6px; }

/* tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tab { padding: 9px 16px; color: var(--muted); font-weight: 600; font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { text-decoration: none; color: var(--text-strong); }
.tab.is-active { color: var(--text-strong); border-bottom-color: var(--coral); }

/* ---------- carousel studio ------------------------------------------------
   The production screen. Four of its defects were geometry, not taste, and
   they are fixed here by making the geometry explicit rather than by hiding
   the symptom:

   * the rail scrolled sideways because a 96px column was asked to hold an
     84px thumbnail, its 2px borders AND a vertical scrollbar. The column is
     wider now, the thumbnail sizes itself to what is left, and the gutter is
     reserved so nothing reflows when the bar appears. No `overflow-x: hidden`
     anywhere — there is simply nothing to scroll;
   * the design options were `.chip`s, and `.design-row .chip` (later in this
     file, same specificity) reset `.chip.is-active`'s background while
     leaving its white text behind: the selected option was white on cream.
     They are their own component now, with their own five states;
   * the download buttons were two different components, one of which was
     painted like a selected chip. One component, one set of states;
   * the slide arrows floated between the panels as 18px glyphs. They are
     44px targets pinned to the sides of the stage.
   -------------------------------------------------------------------------- */
.carousel-studio { margin-bottom: 18px; }
.design-row { display: flex; align-items: center; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.design-label { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.design-history { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 8px; }
.direction-line { font-size: 13px; }

/* --- the design selector: a real segmented control ----------------------- */
.design-options { display: flex; gap: 8px; flex-wrap: wrap; }
.design-option {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--paper); color: var(--text-strong); border: 1px solid var(--line-strong);
  box-shadow: none; font-family: inherit;
  transition: background var(--speed) ease, border-color var(--speed) ease, color var(--speed) ease;
}
.design-option:hover { background: var(--surface-3); border-color: var(--muted); color: var(--text-strong); }
.design-option:active { transform: translateY(1px); }
.design-option:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
/* Ink on Paper and Paper on Ink: 15:1 either way, so the selected option is
   unmistakable and still readable — the exact pair that was broken. */
.design-option[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700;
}
.design-option[aria-pressed="true"]:hover { background: var(--aubergine); border-color: var(--aubergine); color: var(--paper); }
/* The selected option is rendered disabled so that re-posting the design you
   are already on cannot queue an art job for nothing. It is still the
   SELECTED one, so the pressed ground wins over the disabled one — the order
   of these two rules is the whole point. */
.design-option[disabled]:not([aria-pressed="true"]) {
  cursor: not-allowed; opacity: 0.45; background: var(--surface-3); color: var(--muted);
}
.design-option[aria-pressed="true"][disabled] { cursor: default; opacity: 1; }
.design-option .dot {
  width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line-strong); flex: none;
}
.design-option[aria-pressed="true"] .dot { border-color: rgba(255, 253, 250, 0.6); }
.design-option[data-design="editorial"] .dot { background: #f3e7e1; }
.design-option[data-design="dark"] .dot { background: #250817; }
.design-option[data-design="minimal"] .dot { background: #fffdfa; }

/* --- the rail ------------------------------------------------------------ */
.cs-layout { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 20px; align-items: start; margin: 16px 0; --rail: 132px; }
.cs-canvas { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.thumb-strip {
  display: flex; flex-direction: column; gap: 12px;
  max-height: 620px; overflow-y: auto; overflow-x: visible;
  /* 3px so the selection ring is never clipped; 12px on the right is the
     breathing space the mission asks for between the thumbs and the bar. */
  padding: 3px 12px 3px 3px;
  /* Reserve the bar's width whether or not it is showing, so the thumbs never
     change size when the deck grows past the fold. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}
.cs-layout-off .thumb-strip { flex-direction: row; flex-wrap: wrap; max-height: none; }
.thumb {
  position: relative; width: 100%; aspect-ratio: 4 / 5; border: 2px solid var(--line-strong);
  border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); cursor: grab; flex: none;
  transition: border-color var(--speed) ease, transform var(--speed) ease;
}
.thumb:hover { border-color: rgba(37, 8, 23, 0.35); }
.thumb:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(255, 91, 85, 0.4); }
.thumb.is-failed { border-color: var(--bad); }
.thumb.dragging { opacity: 0.5; }
.thumb.drop-target { border-color: var(--coral); }
.thumb-n {
  position: absolute; top: 4px; left: 4px; background: rgba(37, 8, 23, 0.78); color: var(--paper);
  font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 1px 6px; z-index: 1;
}
.thumb-empty { color: var(--muted); font-size: 18px; }

/* --- the stage and its navigation ---------------------------------------- */
.slide-stage {
  position: relative; display: flex; align-items: center; justify-content: center; margin: 0;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 16px;
  /* The side padding is the arrows' home: 22px margin + 44px target + 12px. */
  padding: 22px 78px;
}
.nav-slide {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--text-strong); border: 1px solid var(--line-strong);
  box-shadow: 0 2px 10px rgba(37, 8, 23, 0.12); cursor: pointer; text-decoration: none;
  transition: background var(--speed) ease, border-color var(--speed) ease, box-shadow var(--speed) ease;
}
.nav-slide.prev { left: 16px; }
.nav-slide.next { right: 16px; }
.nav-slide:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); text-decoration: none; }
.nav-slide:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.nav-slide:active { transform: translateY(-50%) scale(0.94); }
.nav-slide svg { width: 20px; height: 20px; display: block; }
.nav-slide.is-disabled {
  pointer-events: none; opacity: 0.32; box-shadow: none; background: var(--surface-3); cursor: not-allowed;
}
.slide-big { max-width: min(440px, 100%); width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; }
.slide-failed {
  border: 1px solid rgba(179, 38, 30, 0.5); border-radius: 10px; padding: 22px; max-width: 420px;
  background: rgba(179, 38, 30, 0.07);
}
.slide-counter { text-align: center; font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* --- the slide's own actions, in groups ---------------------------------- */
.slide-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; align-items: flex-start; }
.action-group {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.action-group > .group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
  font-weight: 700; margin-right: 2px;
}
.action-group form { display: inline-flex; margin: 0; }
.action-group button { display: inline-flex; align-items: center; gap: 8px; }
.action-group button svg { width: 17px; height: 17px; flex: none; }
.action-group button[disabled] { opacity: 0.42; cursor: not-allowed; }
.action-group button[disabled]:hover { background: var(--paper); }
.slide-save { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.slide-save .dim { font-size: 12.5px; }

/* --- downloads: ONE component for PDF and ZIP ---------------------------- */
.carousel-downloads { margin: 18px 0 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.file-button {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; text-decoration: none;
  height: 42px; padding: 0 18px; border-radius: 10px; font-size: 13px; font-weight: 700;
  font-family: inherit; color: var(--text-strong);
  background: var(--surface-3); border: 1px solid var(--line-strong); box-shadow: none;
  transition: background var(--speed) ease, border-color var(--speed) ease, color var(--speed) ease;
}
.file-button svg { width: 18px; height: 18px; flex: none; }
.file-button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); text-decoration: none; }
.file-button:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.file-button:active { transform: translateY(1px); }
/* Secondary, and still obviously a control: same height, same type, quieter
   ground, and a hover that moves. */
.file-button.is-secondary { background: transparent; color: var(--muted); font-weight: 600; }
.file-button.is-secondary:hover { background: var(--surface-3); color: var(--text-strong); border-color: var(--muted); }
.file-button.is-disabled,
.file-button[aria-disabled="true"] {
  pointer-events: none; cursor: not-allowed; opacity: 0.5;
  background: var(--surface-2); color: var(--muted); border-style: dashed;
}
.file-button[data-busy="true"] { pointer-events: none; opacity: 0.72; }
.carousel-downloads .dim { font-size: 12.5px; }

/* --- choosing before generating ------------------------------------------ */
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.choice-card { display: block; position: relative; cursor: pointer; margin: 0; }
.choice-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-inner {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--paper);
  transition: border-color var(--speed) ease, background var(--speed) ease, box-shadow var(--speed) ease;
}
.choice-card:hover .choice-inner { border-color: var(--muted); background: var(--surface-2); }
.choice-card input:checked + .choice-inner {
  border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface-2);
}
.choice-card input:focus-visible + .choice-inner { outline: 2px solid var(--coral); outline-offset: 2px; }
.choice-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.choice-title { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.choice-flag {
  font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; color: var(--aubergine); background: var(--blush); border-radius: 999px; padding: 2px 8px;
}
.choice-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* The miniature is drawn from the direction's own geometry rather than being
   a screenshot, so it cannot drift away from what the renderer does. */
.choice-preview {
  position: relative; width: 44px; height: 55px; flex: none; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--paper);
}
.choice-preview .cp-band, .choice-preview .cp-rule, .choice-preview .cp-line { position: absolute; display: block; }
.choice-preview .cp-band { left: 0; right: 0; top: 0; height: 24px; background: var(--surface-3); }
.choice-preview .cp-rule { left: 6px; top: 30px; width: 12px; height: 2px; background: var(--coral); }
.choice-preview .cp-line { left: 6px; height: 3px; border-radius: 2px; background: var(--ink); }
.choice-preview .cp-line-1 { top: 36px; width: 30px; }
.choice-preview .cp-line-2 { top: 43px; width: 20px; opacity: 0.4; }
[data-design="premium"] .choice-preview { background: var(--ink); }
[data-design="premium"] .choice-preview { border-color: var(--ink); }
[data-design="premium"] .choice-preview .cp-band { top: 0; bottom: 0; height: auto; background: linear-gradient(180deg, #6b5a63 0%, var(--ink) 72%); }
[data-design="premium"] .choice-preview .cp-line { background: var(--paper); }
[data-design="premium"] .choice-preview .cp-line-1 { top: 34px; }
[data-design="minimal"] .choice-preview .cp-band { display: none; }
[data-design="minimal"] .choice-preview .cp-rule { top: 20px; }
[data-design="minimal"] .choice-preview .cp-line-1 { top: 26px; width: 26px; }
[data-design="minimal"] .choice-preview .cp-line-2 { top: 33px; width: 14px; }

.choice-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.choice-pill { display: inline-block; position: relative; cursor: pointer; margin: 0; }
.choice-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill-face {
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--paper); color: var(--text-strong);
  transition: background var(--speed) ease, border-color var(--speed) ease, color var(--speed) ease;
}
.choice-pill:hover .pill-face { background: var(--surface-3); border-color: var(--muted); }
.choice-pill input:checked + .pill-face {
  background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700;
}
.choice-pill input:focus-visible + .pill-face { outline: 2px solid var(--coral); outline-offset: 2px; }
.more-styles { margin-top: 10px; }
.more-styles > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.more-styles > summary:hover { color: var(--text-strong); }
.more-styles[open] > summary { margin-bottom: 10px; }

/* --- the three directions, in the state each one is actually in ----------- */
.design-slots { display: flex; gap: 10px; flex-wrap: wrap; }
.design-slot { position: relative; margin: 0; }
.design-slot .slot-button,
.design-slot.is-current,
.design-slot.is-working {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; font-family: inherit;
  background: var(--paper); color: var(--text-strong); border: 1px solid var(--line-strong); box-shadow: none;
  transition: background var(--speed) ease, border-color var(--speed) ease, color var(--speed) ease;
}
.design-slot .slot-button::-webkit-details-marker { display: none; }
.design-slot .slot-button:hover { background: var(--surface-3); border-color: var(--muted); }
.design-slot .slot-button:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.design-slot.is-current { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; cursor: default; }
.design-slot.is-working { background: var(--surface-3); color: var(--muted); cursor: progress; }
.slot-name { display: inline-flex; align-items: center; gap: 8px; }
.slot-name .dot { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line-strong); flex: none; }
.design-slot[data-design="editorial"] .dot { background: #f3e7e1; }
.design-slot[data-design="premium"] .dot { background: #250817; }
.design-slot[data-design="minimal"] .dot { background: #fffdfa; }
.design-slot.is-current .dot { border-color: rgba(255, 253, 250, 0.6); }
.slot-state { font-size: 11px; font-weight: 600; color: var(--muted); }
.design-slot.is-current .slot-state { color: rgba(255, 253, 250, 0.72); }
.slot-state.is-failed { color: var(--bad); }
.slot-cta { font-size: 11px; font-weight: 700; color: var(--aubergine); }

/* The two axes that can be changed after the deck exists. Presence is the
   cheap one: it re-composes the pages and buys no pictures. */
/* Three axes, each with its own label.
 *
 * A flex row held two of them legibly and three badly: the medium's label
 * landed at the end of the ground's pills and "Mais estilos" ended up sitting
 * between the pills and the next heading. A two-column grid keeps every label
 * with the control it names, at any width. */
.deck-adjust {
  display: grid; grid-template-columns: max-content 1fr; align-items: start;
  gap: 10px 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.deck-adjust .design-label { padding-top: 6px; }
.deck-adjust .choice-pills { gap: 6px; }
.deck-adjust .pill-face { font-size: 11.5px; padding: 5px 11px; }
/* The medium emits pills AND its disclosure, so it owns the second column. */
.deck-adjust .more-styles { grid-column: 2; margin-top: 8px; }
.deck-adjust button { grid-column: 2; justify-self: end; margin-top: 4px; }

@media (max-width: 560px) {
  .deck-adjust { grid-template-columns: 1fr; gap: 4px 0; }
  .deck-adjust .design-label { padding-top: 10px; }
  .deck-adjust .more-styles, .deck-adjust button { grid-column: 1; }
}

/* The confirmation: the next click spends, so it says so first. */
.slot-confirm {
  position: absolute; z-index: 900; top: calc(100% + 8px); left: 0; width: min(340px, 86vw);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 16px; box-shadow: 0 10px 34px rgba(37, 8, 23, 0.18);
  display: flex; flex-direction: column; gap: 8px;
}
.slot-confirm p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.slot-confirm-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.slot-confirm-actions form { margin: 0; }

/* --- the deck's own review notice ---------------------------------------- */
.art-notice {
  display: flex; flex-direction: column; gap: 4px; margin: 14px 0;
  padding: 12px 16px; border-radius: 12px; font-size: 13px;
  background: rgba(154, 91, 18, 0.08); border: 1px solid rgba(154, 91, 18, 0.35); color: var(--text-strong);
}
.art-notice strong { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.art-notice .dim { font-size: 12.5px; }
.art-notice-actions { display: flex; gap: 10px; margin-top: 8px; }
.art-notice-actions form { margin: 0; }

/* The art stage, with its page count. A carousel spends most of its run in a
   single step of the list above; without this line that step is a silent
   bullet for twenty minutes and the app looks stuck. */
.gen-stage {
  margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text-strong);
}

/* --- live updates -------------------------------------------------------- */

/* The one sentence a screen reader is told. Visible to assistive technology,
   not to the eye: what the eye reads is `.gen-stage`, which says the same
   thing in the place it belongs. */
.live-announce {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The slide area while a page swap is in flight. A whole-page fade would be
   theatre; this is just enough that a slow connection does not look dead. */
[data-slide-swap][data-swapping] .cs-canvas { opacity: 0.55; transition: opacity 120ms linear; }
.slide-canvas-live { display: flex; width: 100%; justify-content: center; }

/* --- the temporary generation diagnostics panel -------------------------- */
/* Behind MELLINA_GENERATION_DIAGNOSTICS. Deliberately plain: it is
   instrumentation with a removal date, not a feature of the product. */
.gen-diagnostics { margin: 16px 0; }
.gen-diagnostics > summary { font-weight: 700; }
.diag-head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px; margin: 12px 0;
}
.diag-head dt { font-size: 11.5px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.diag-head dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.diag-table { font-size: 12.5px; }
.diag-table td.num, .diag-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.diag-table tr.diag-running td { color: var(--text-strong); font-weight: 600; }
.diag-table tr.diag-failed td, .diag-table tr.diag-timeout td { color: #a4262c; }
.diag-table tr.diag-cached td { color: var(--muted); }
.diag-retry { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; border: 1px solid currentColor; font-size: 0.85em; font-weight: 600; color: var(--text-strong); }
.diag-detail { display: inline; }
.diag-detail > summary { display: inline; margin-left: 8px; cursor: pointer; color: var(--muted); font-size: 0.85em; text-decoration: underline dotted; list-style: none; }
.diag-detail > summary::-webkit-details-marker { display: none; }

@media (max-width: 760px) {
  .cs-layout { grid-template-columns: 1fr; }
  .thumb-strip { flex-direction: row; flex-wrap: wrap; max-height: none; padding: 3px; }
  .thumb-strip .thumb { width: 84px; }
  .slide-stage { padding: 18px 58px; }
  .nav-slide.prev { left: 8px; }
  .nav-slide.next { right: 8px; }
}

.carousel-ready { margin: 8px 0; }

.carousel-reader { display: flex; flex-direction: column; gap: 22px; max-width: 560px; }
.carousel-reader img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; }
.carousel-reader figcaption { color: var(--muted); font-size: 12px; text-align: center; margin-top: 6px; }

.carousel-block h3, .article-block h3 { font-size: 12px; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-ui); }
.slide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.slide-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 120px;
}
.slide-index { font-weight: 800; font-size: 13px; color: var(--coral); }
.slide-index span { color: var(--muted); font-weight: 500; }
.slide-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.slide-body { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* article */
.article-block { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px 26px; margin-bottom: 16px; }
.article-title { font-size: 28px; margin: 0 0 6px; line-height: 1.15; }
.article-subtitle { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.article-summary { font-size: 13.5px; line-height: 1.6; margin: 0 0 6px; }
.article-outline ol { margin: 4px 0 0 18px; padding: 0; font-size: 13.5px; }
.article-outline li { margin-bottom: 3px; }

/* ---------- post previews (the brand's piece: neutral, light, faithful) ---- */
.pv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; }
.pv-wrap { display: flex; flex-direction: column; gap: 6px; }
.pv {
  background: #fff; color: #14171a; border: 1px solid #e1e4e8; border-radius: 10px;
  overflow: hidden; font-size: 14px; line-height: 1.45;
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.pv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.pv-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: #f1f3f7; flex: 0 0 auto; }
.pv-avatar-text { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.pv-who strong { display: block; font-size: 14px; }
.pv-who small { color: #657786; font-size: 12px; }
.pv-body { padding: 0 14px 12px; }
.pv-body p { margin: 0 0 10px; }
.pv-hook { font-weight: 600; }
.pv-tags span { color: #0a66c2; }
.pv-cta { font-weight: 600; }
.pv-media { background: #f1f3f7; }
.pv-media img { width: 100%; display: block; object-fit: cover; }
.ratio-square img { aspect-ratio: 1 / 1; }
.ratio-landscape img { aspect-ratio: 1.91 / 1; }
.ratio-linkedin img { aspect-ratio: 1200 / 627; }
.pv-missing {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  color: #98a2b3; font-size: 13px; border-top: 1px solid #e1e4e8; border-bottom: 1px solid #e1e4e8;
}
.pv-carousel { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px 12px; scroll-snap-type: x mandatory; }
.pv-slide { margin: 0; flex: 0 0 78%; scroll-snap-align: start; position: relative; }
.pv-slide img { width: 100%; border-radius: 8px; display: block; object-fit: cover; }
.pv-slide figcaption {
  position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 11px; padding: 2px 7px; border-radius: 10px;
}
.pv-actions {
  display: flex; gap: 18px; padding: 8px 14px; border-top: 1px solid #e1e4e8;
  color: #657786; font-size: 13px;
}
.pv-count { font-size: 11px; color: var(--muted); text-align: right; }
.pv-count.over { color: var(--bad); font-weight: 600; }
.pv-linkedin { border-color: #d0d7de; }
.pv-instagram .pv-body { padding-top: 4px; }
.pv-x { border-radius: 14px; }
.pv-tweet { border-bottom: 1px solid #eff3f4; position: relative; }
.pv-tweet:last-of-type { border-bottom: none; }
.pv-thread-index { position: absolute; top: 12px; right: 14px; font-size: 11px; color: #657786; }

/* ---------- ideas ---------------------------------------------------------- */
.idea-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; max-width: 1200px; }
.idea-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 24px; display: flex; flex-direction: column; gap: 12px;
}
/* No `overflow: hidden` on the card: it exists only to round the gradient rail
   below, and it was clipping the "Criar conteúdo" menu — the one thing on the
   card that has to escape it. The rail rounds itself instead. */
.idea-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--coral);
  border-radius: 16px 0 0 16px;
}
.idea-head { display: flex; align-items: center; gap: 10px; }
.idea-adherence { color: var(--muted); font-size: 12px; font-weight: 600; }
.idea-title { margin: 0; font-size: 21px; line-height: 1.26; }
.idea-section h4 {
  margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-family: var(--font-ui);
}
.idea-section p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.idea-angle { font-style: italic; border-left: 2px solid var(--coral); padding-left: 12px; }
.idea-sources-row { font-size: 12.5px; }
.idea-sources summary { cursor: pointer; color: var(--aubergine); font-size: 12.5px; margin-top: 4px; }
.idea-sources ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.idea-sources li { border-left: 2px solid var(--line-strong); padding-left: 10px; }
.idea-sources li p { margin: 2px 0 0; font-size: 12px; }
.idea-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.idea-secondary { margin-left: auto; display: flex; gap: 6px; }
.idea-secondary button { font-size: 12px; color: var(--muted); }
.ideas-progress { padding: 10px 0; }
.idea-compact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.idea-compact {
  display: flex; flex-direction: column; gap: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; color: var(--text);
  transition: border-color var(--speed) ease, transform var(--speed) ease;
}
.idea-compact:hover { text-decoration: none; border-color: rgba(37, 8, 23, 0.25); transform: translateY(-1px); }
.ic-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.ic-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; }

/* ---------- agenda editorial ----------------------------------------------- */
.agenda-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.agenda-nav { display: flex; align-items: center; gap: 8px; }
/* Same reason as `.cockpit-date`: "3–9 De Agosto" is not Portuguese. */
.agenda-range { font-size: 17px; min-width: 150px; text-align: center; }
.agenda-range::first-letter { text-transform: uppercase; }
.agenda-views { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.agenda-views a { padding: 7px 16px; font-size: 13px; color: var(--muted); text-decoration: none; }
.agenda-views a.on { background: rgba(255, 91, 85, 0.25); color: var(--text-strong); font-weight: 600; }
.agenda-filters { display: flex; gap: 8px; margin-left: auto; }
.agenda-filters label { margin: 0; }
.agenda-filters select { padding: 6px 28px 6px 10px; font-size: 13px; width: auto; }
.agenda-empty { border: 1px dashed var(--line-strong); border-radius: 14px; padding: 28px; text-align: center; margin-bottom: 16px; }
.agenda-empty p { margin: 0 0 12px; color: var(--muted); }
.agenda-empty .actions { justify-content: center; }

.agenda-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: start; }
.agw-day { border-radius: 14px; padding: 8px; min-height: 140px; background: rgba(37, 8, 23, 0.025); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.agw-day.is-today { border-color: rgba(255, 91, 85, 0.55); box-shadow: inset 0 2px 0 var(--coral); }
.agw-day.over { background: rgba(86, 19, 47, 0.08); }
.agw-head { display: flex; align-items: baseline; gap: 6px; padding: 2px 4px; }
.agw-dow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.agw-num { font-size: 17px; }
.agw-add { margin-left: auto; color: var(--muted); text-decoration: none; font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 8px; }
.agw-add:hover { background: rgba(86, 19, 47, 0.15); color: var(--aubergine); }
.agw-warn { margin: 0; font-size: 11.5px; color: var(--warn); background: rgba(154, 91, 18, 0.1); border-radius: 8px; padding: 5px 8px; }

.agenda-card {
  display: flex; flex-direction: column; gap: 5px; background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 11px;
  text-decoration: none; color: inherit; cursor: grab;
  transition: border-color var(--speed) ease;
}
.agenda-card:hover { border-color: var(--coral); }
.agenda-card.dragging { opacity: 0.45; }
.agc-top { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--muted); }
.agc-time { font-weight: 700; color: inherit; }
.agc-title { font-size: 13px; line-height: 1.35; }
.agc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; }
.agenda-card.ag-pauta { border-style: dashed; background: rgba(37, 8, 23, 0.02); }
.agenda-card.ag-published { opacity: 0.6; }

.agenda-month-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 6px; }
.agm-dow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 0 6px; }
.agenda-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.agm-day { border-radius: 12px; background: rgba(37, 8, 23, 0.025); border: 1px solid var(--line); min-height: 92px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.agm-day.agm-out { opacity: 0.4; }
.agm-day.is-today { border-color: rgba(86, 19, 47, 0.55); }
.agm-day.over { background: rgba(86, 19, 47, 0.08); }
.agm-num { font-size: 12px; font-weight: 700; text-decoration: none; color: inherit; padding: 2px 4px; align-self: flex-start; border-radius: 6px; }
.agm-num:hover { background: rgba(86, 19, 47, 0.15); }
.agm-card { display: block; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 8px; padding: 4px 6px; font-size: 11px; line-height: 1.3; text-decoration: none; color: inherit; }
.agm-card:hover { border-color: var(--coral); }
.agm-card.ag-pauta { border-style: dashed; }
.agm-time { font-weight: 700; margin-right: 4px; }
.agm-status { display: block; color: var(--muted); font-size: 10px; }
.agm-card.ag-ready .agm-status, .agm-card.ag-published .agm-status, .agm-card.ag-mlabs .agm-status { color: var(--ok); }
.agm-card.ag-attention .agm-status { color: var(--bad); }

.plan-detail { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.plan-when-row { display: flex; align-items: center; gap: 10px; }
.plan-facts { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.plan-facts div { display: flex; gap: 12px; }
.plan-facts dt { min-width: 140px; color: var(--muted); font-size: 13px; }
.plan-facts dd { margin: 0; font-size: 13.5px; }
.plan-danger { border-top: 1px solid var(--line); padding-top: 12px; }
.mlabs-panel { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.hidden { display: none; }

/* movable slots (no-script move control) */
form.move { display: inline-flex; gap: 4px; align-items: center; margin-left: 4px; }
form.move input[type="datetime-local"] { width: auto; font-size: 11px; padding: 4px 6px; }

/* ---------- weekly planner -------------------------------------------------- */
.planner-progress { border: 1px dashed var(--line-strong); border-radius: 14px; padding: 34px; text-align: center; }
.planner-progress p { margin: 0 0 6px; font-weight: 600; }
.planner-progress .dim { font-weight: 400; }
.planner-meta { margin: 0 0 14px; }
.planner-timeline { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.planner-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.pc-when { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; text-transform: capitalize; color: var(--muted); }
.pc-title { margin: 8px 0 6px; font-size: 20px; line-height: 1.26; }
.pc-why { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); }
.pc-origin { margin: 0 0 10px; font-size: 12.5px; }
.pc-actions { display: flex; align-items: flex-start; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.pc-edit { flex: 1; }
.pc-edit summary { cursor: pointer; font-size: 13px; color: var(--aubergine); }
.planner-add { max-width: 720px; margin-top: 14px; }
.planner-apply { display: flex; gap: 10px; margin-top: 18px; align-items: center; }
.planner-apply form:first-child button { padding: 10px 22px; font-size: 14.5px; }

/* ---------- production + review -------------------------------------------- */
.production-note { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; font-size: 13.5px; }
.production-note span { flex: 1; }
.production-alldone { margin: 0 0 14px; }
.produce-form { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.produce-row { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.produce-row input { margin-top: 4px; width: auto; }
.produce-body { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.produce-when { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.produce-head { font-weight: 600; }
.produce-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.produce-item { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.pi-mark { font-size: 16px; width: 22px; text-align: center; }
.pi-done .pi-mark, .pi-review .pi-mark { color: var(--ok); }
.pi-failed .pi-mark { color: var(--bad); }
.pi-producing .pi-mark { color: var(--warn); }
.pi-body { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.pi-error { font-size: 12px; }
.review-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; max-width: 680px; }
.review-art img { max-width: 380px; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 12px; }
.review-hook { font-weight: 700; margin: 0 0 8px; }
.review-body { white-space: pre-line; font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.review-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; align-items: center; }
.review-adjust { max-width: 680px; }

/* ---------- brand ----------------------------------------------------------- */
.brand-mark { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.brand-mark img { max-width: 40px; max-height: 40px; object-fit: contain; }
.brand-mark-empty {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface-2); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.swatch { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(37, 8, 23, 0.2); display: inline-block; }

/* brand hero: presentation first, editing second */
.brand-hero {
  position: relative;
  background: linear-gradient(160deg, var(--surface-2), var(--surface) 65%);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 30px 32px; margin-bottom: 18px; overflow: hidden;
}
.brand-hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradient);
}
.brand-hero-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.brand-hero-logo { width: 72px; height: 72px; border-radius: 16px; background: rgba(37, 8, 23, 0.05); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.brand-hero-logo img { max-width: 58px; max-height: 58px; object-fit: contain; }
.brand-hero-logo .brand-hero-initial { font-family: var(--font-display); font-size: 30px; color: var(--muted); }
.brand-hero-name { font-size: 30px; margin: 0; line-height: 1.1; }
.brand-hero-tag { color: var(--muted); font-size: 14px; margin: 4px 0 0; max-width: 62ch; }
.brand-hero-actions { margin-left: auto; display: flex; gap: 8px; }
.brand-palette { display: flex; gap: 6px; margin-top: 14px; }
.brand-palette .swatch { width: 26px; height: 26px; border-radius: 7px; }

.brand-section-title {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 12px; font-weight: 700;
}

.logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.logo-slot h4 { margin: 0 0 4px; font-size: 13px; }
/* Each slot says WHEN its file is used, because "Logo 2" told nobody
   anything and the result was a dark lock-up on a dark page. */
.logo-when { margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.logo-active { font-size: 11px; font-weight: 700; color: var(--success); text-transform: lowercase; }
.logo-empty.on-dark { background: var(--ink); color: rgba(255, 253, 250, 0.5); border-color: var(--ink); }
.logo-preview {
  border: 1px solid var(--line); border-radius: 10px; padding: 14px;
  display: flex; align-items: center; justify-content: center; min-height: 84px; background: #fff;
}
.logo-preview.on-dark { background: var(--ink); }
.logo-preview img { max-width: 100%; max-height: 60px; object-fit: contain; }
.logo-empty {
  border: 1px dashed var(--line-strong); border-radius: 10px; padding: 24px;
  text-align: center; color: var(--muted); font-size: 12px; min-height: 84px;
  display: flex; align-items: center; justify-content: center;
}
.logo-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; }
.logo-slot form.stack { margin-top: 8px; gap: 6px; }
.logo-slot input[type="file"] { font-size: 12px; }

.reference-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 14px; }
.reference { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.reference img { width: 100%; height: 110px; object-fit: cover; display: block; }
.reference form { margin: 0; padding: 6px; }

.brand-preview { border: 1px solid var(--line); border-radius: 12px; padding: 26px; background: #fff; color: #14171a; }
.brand-preview h3 { margin: 14px 0 8px; }
.brand-preview p { margin: 0 0 16px; }
.preview-logo { max-height: 44px; max-width: 200px; object-fit: contain; }
.preview-wordmark { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.preview-button { display: inline-block; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.preview { max-width: 260px; border-radius: 8px; border: 1px solid var(--line); }

/* ---------- assistant ------------------------------------------------------- */
.chat { display: flex; flex-direction: column; gap: 14px; max-width: 780px; }
.chat-log { display: flex; flex-direction: column; gap: 14px; }
.chat-turn { padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line); }
.chat-turn.user { background: rgba(255, 91, 85, 0.1); border-color: rgba(255, 91, 85, 0.3); margin-left: 48px; }
.chat-turn.assistant { background: var(--surface); margin-right: 48px; }
.chat-text { line-height: 1.55; }
.chat-card {
  margin-top: 10px; padding: 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.chat-card strong { display: block; }
.chat-card small { color: var(--muted); }
.chat-list { margin: 8px 0 0 18px; font-size: 13px; }
.chat-list li { margin-bottom: 4px; }
.chat-steps { margin-top: 8px; font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.chat-form { display: flex; gap: 10px; align-items: flex-end; }
.chat-form textarea { flex: 1; resize: vertical; }
.chat-suggestions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chat-controls { display: flex; gap: 8px; }
button.mic { font-size: 18px; line-height: 1; padding: 8px 12px; }
button.mic.is-listening { background: rgba(179, 38, 30, 0.15); border-color: var(--bad); }
.chat-mic-status { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

/* ---------- todo / empty states / channels ---------------------------------- */
.todo { list-style: none; margin: 0; padding: 0; }
.todo li { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.todo li:last-child { border-bottom: 0; }
.todo .todo-mark { flex: none; width: 20px; text-align: center; font-size: 14px; }
.todo .todo-mark.done { color: var(--ok); }
.todo .todo-mark.todo { color: var(--muted); }
.todo .todo-text { flex: 1; }
.todo .todo-text small { display: block; color: var(--muted); margin-top: 2px; }
.todo .todo-action { flex: none; }
.todo li.is-done .todo-text { color: var(--muted); }

.empty-state { padding: 30px 4px; text-align: center; }
.empty-state p { color: var(--muted); margin: 0 0 14px; line-height: 1.55; }
.empty-state .actions { display: flex; gap: 10px; justify-content: center; }

/* A channel row carries a name, two or three badges and up to three controls.
   On a phone that is more than one line's worth, so the row wraps rather than
   pushing the page sideways. */
.channel-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
}
.channel-row:last-child { border-bottom: 0; }
.channel-row .channel-name { flex: 1 1 220px; min-width: 0; font-weight: 500; }
.channel-row .channel-name small { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }
.channel-row .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.network-offer .channel-name { font-weight: 600; }
.how-to { margin-top: 6px; font-weight: 400; }
.how-to summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.how-to ol { margin: 8px 0 0 18px; font-size: 12px; color: var(--muted); }
.how-to li { margin-bottom: 3px; }

.integration { padding: 14px 0; border-bottom: 1px solid var(--line); }
.integration:last-child { border-bottom: none; }
.integration-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.integration ul.mono { margin: 6px 0 10px 18px; font-size: 12px; }
.integration input[readonly] { background: var(--surface-2); }

/* ---------- misc ------------------------------------------------------------ */
pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; overflow-x: auto; font-size: 12px; }
.mono { font-family: var(--font-mono); font-size: 12px; }
.dim { color: var(--muted); }

/* legacy calendar (kept for the no-script move flow) */
.calendar { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 96px; }
.day h3 { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.day .slot { font-size: 12px; padding: 5px 6px; border-radius: 6px; background: var(--surface-2); margin-bottom: 5px; }
.day .slot .t { color: var(--muted); font-size: 11px; }
.day .slot.movable { cursor: grab; border: 1px dashed transparent; }
.day .slot.movable:hover { border-color: var(--line-strong); }
.day .slot.dragging { opacity: 0.45; cursor: grabbing; }
.day.over { outline: 2px solid var(--coral); outline-offset: -2px; }

/* ---------- responsive & motion --------------------------------------------- */
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  main { padding: 16px 18px 60px; }
  .hero h1 { font-size: 30px; }
  .agenda-week { grid-template-columns: 1fr; }
  .agw-day { min-height: unset; }
  .agenda-month, .agenda-month-head { gap: 4px; }
  .agenda-filters { margin-left: 0; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .day .slot.dragging { opacity: 1; }
}

/* --- Carousel creative direction (Recovery 3) ------------------------------ */
.direction-line { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; margin-right: 8px; }

/* --- Idea action menus (Recovery 4) ---------------------------------------- */
.action-menu { position: relative; display: inline-block; }
.action-menu > summary { list-style: none; cursor: pointer; display: inline-block; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu[open] > summary { position: relative; z-index: 801; }
.menu-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 800;
  min-width: 300px; max-width: calc(100vw - 24px); padding: 8px;
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: 0 16px 48px rgba(37, 8, 23, 0.16);
  display: flex; flex-direction: column; gap: 2px;
}
.menu-panel-right { left: auto; right: 0; min-width: 200px; }
/* Open panels are lifted out of the card and parked on <body> by app.js, which
   sets top/left itself. Anchored to the viewport, no ancestor can clip them and
   no grid cell can decide how tall they are allowed to be. */
.menu-panel.is-floating {
  position: fixed; top: auto; left: auto; right: auto;
  max-height: calc(100vh - 24px); overflow-y: auto;
}
.menu-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px;
  border-radius: 9px; color: var(--text);
}
.menu-item:hover { background: rgba(37, 8, 23, 0.06); text-decoration: none; }
.menu-item:focus-visible,
.menu-panel button:focus-visible {
  outline: 2px solid var(--coral); outline-offset: -2px; text-decoration: none;
}
.menu-panel .menu-item.is-active { background: rgba(37, 8, 23, 0.06); }
.mi-glyph {
  font-family: var(--font-display); font-weight: 400; font-size: 22px; width: 26px;
  color: var(--coral);
}
.mi-body { display: flex; flex-direction: column; gap: 2px; }
.mi-body strong { font-size: 13.5px; }
.mi-body small { color: var(--muted); font-size: 12px; }
.mi-suggested {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ok); margin-left: 6px;
}
.voice-row { flex-wrap: wrap; gap: 10px; }
.voice-row label { min-width: 150px; }

/* --- Article workspace (Recovery 4) ----------------------------------------- */
.article-read {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 0 0 28px; margin-bottom: 22px; overflow: hidden;
}
.article-cover { width: 100%; height: auto; display: block; margin-bottom: 26px; }
.article-read .article-title { font-size: 27px; margin: 0 30px 6px; letter-spacing: -0.02em; line-height: 1.2; }
.article-read .article-subtitle { color: var(--muted); font-size: 16px; margin: 0 30px 18px; }
.article-read .article-summary { margin: 0 30px; }
.article-body { margin: 0 30px; font-size: 15px; line-height: 1.7; }
.article-body p { margin: 0 0 16px; }
.article-body h4 { font-size: 17px; margin: 26px 0 10px; letter-spacing: -0.01em; }
.article-read .gen-failed { margin: 0 30px 18px; }
.call-heading { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; font-family: var(--font-ui); }
.call-hint { margin: 0 0 12px; font-size: 12.5px; }
.edit-group { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 10px 0 0; font-family: var(--font-ui); }
.review-summary-title { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-family: var(--font-ui); }
.review-verdict { margin: 0 0 8px; font-size: 15px; }
.review-checked { font-size: 12px; margin: 0 0 10px; }
.review-point { border-left: 3px solid var(--warn); padding: 4px 0 4px 12px; margin: 0 0 10px; }
.review-point strong { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warn); }
.review-point p { margin: 4px 0 0; font-size: 13px; }
.review-not-approval { font-size: 11.5px; margin: 6px 0 0; }

/* --- Space switcher (Fase 2 §10) ------------------------------------------
   The trigger sits in the sidebar's context card and opens the same floating
   panel the idea menus use, so it inherits the escape-the-card behaviour and
   the keyboard handling rather than re-implementing them. */
.space-switcher { display: block; width: 100%; }
.space-switcher > summary { display: block; width: 100%; list-style: none; cursor: pointer; }
.space-switcher > summary::-webkit-details-marker { display: none; }
.space-current {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.05);
  transition: border-color var(--speed) ease, background var(--speed) ease;
}
.space-current:hover { border-color: var(--coral); background: rgba(255, 255, 255, 0.09); }
.space-avatar {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 12px; font-weight: 900; letter-spacing: 0.02em;
  background: var(--coral); color: var(--ink);
}
.space-current-body, .space-option-body {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; flex: 1;
}
.space-name {
  font-size: 13.5px; font-weight: 600; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.space-role { font-size: 11px; color: var(--muted); }
.space-chevron { color: var(--muted); font-size: 11px; }

.space-panel { min-width: 260px; max-width: 320px; }
.space-filter { margin-bottom: 6px; font-size: 13px; }
.space-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.space-option-form { margin: 0; }
/* Specific enough to beat the global primary-button rule: a submit button
   without `.ghost` is painted with the CTA gradient, and every space in the
   list would otherwise read as the selected one. */
.space-panel .space-option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 9px; border: 0; background: transparent;
  color: var(--text); cursor: pointer; text-align: left; box-shadow: none;
  font-weight: 400;
}
.space-panel .space-option:hover { background: rgba(37, 8, 23, 0.06); }
.space-panel .space-option.is-active { background: rgba(255, 91, 85, 0.18); }
/* The active space is the one with a coloured mark; the rest are neutral, so
   the eye finds "where am I" without reading four labels. */
.space-panel .space-option:not(.is-active) .space-avatar {
  background: var(--surface-3); color: var(--muted);
}
.space-group + .space-group { margin-top: 8px; }
.space-group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); padding: 6px 10px 2px;
}
.space-actions { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.space-manage { font-size: 12.5px; padding: 8px 10px; }

/* --- Spaces and people (Fase 2 §8) ---------------------------------------- */
.settings-tabs { margin-bottom: 16px; }
.person-space {
  display: inline-flex; align-items: baseline; gap: 5px; margin: 0 8px 4px 0;
  font-size: 12.5px;
}
.person-space em {
  font-style: normal; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 7px;
}
.person-actions { min-width: 280px; max-width: 340px; }
.person-role-form { display: flex; align-items: flex-end; gap: 8px; margin: 0 0 8px; }
.person-role-form label { flex: 1; font-size: 12px; }
.person-org-actions { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.person-org-actions p { margin: 0 0 8px; font-size: 11.5px; line-height: 1.45; }
.invite-targets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.invite-target {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-direction: row; font-size: 13px;
}
.invite-target select { max-width: 200px; }
.row-actions { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.person-scope-note { margin: 0 0 10px; font-size: 11.5px; line-height: 1.45; }

/* ===========================================================================
   MIRA Fase 3 — a barra lateral e o cockpit
   =========================================================================== */

/* ---------- sidebar: cabeçalho, ícones, recolhimento --------------------- */
.sidebar-head { display: flex; align-items: center; gap: 8px; }
.sidebar-head .sidebar-brand { flex: 1; min-width: 0; }
.nav-collapse-form { margin: 0; }
.nav-collapse {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; box-shadow: none; font-weight: 600;
}
.nav-collapse:hover { color: var(--rail-text); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.08); }

/* The icon carries the item when the label is gone, so it must never be the
   thing that shrinks: fixed box, centred, inheriting the row's colour. */
.sidebar nav a { gap: 10px; justify-content: flex-start; }
.sidebar nav a .nav-icon { flex: 0 0 18px; opacity: 0.82; }
.sidebar nav a:hover .nav-icon,
.sidebar nav a.active .nav-icon { opacity: 1; }
.sidebar nav a .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Desktop only. On a phone the menu is a drawer and shows its labels; a
   collapsed rail there would be a second, worse navigation. */
@media (min-width: 761px) {
  body.nav-is-collapsed .shell { grid-template-columns: 72px minmax(0, 1fr); }
  body.nav-is-collapsed .sidebar { padding-left: 10px; padding-right: 10px; align-items: stretch; }
  body.nav-is-collapsed .sidebar-head { flex-direction: column; gap: 10px; }
  body.nav-is-collapsed .wordmark,
  body.nav-is-collapsed .nav-label,
  body.nav-is-collapsed .nav-group-title,
  body.nav-is-collapsed .context-card .context-label,
  body.nav-is-collapsed .space-current-body,
  body.nav-is-collapsed .space-chevron,
  body.nav-is-collapsed .user-name,
  body.nav-is-collapsed .user-meta,
  body.nav-is-collapsed .nav-collapsible summary { display: none; }
  body.nav-is-collapsed .sidebar-brand { justify-content: center; padding: 2px 0 4px; }
  body.nav-is-collapsed .sidebar nav a { justify-content: center; padding: 9px 0; }
  body.nav-is-collapsed .sidebar nav a em { position: absolute; top: 2px; right: 6px; padding: 0 4px; font-size: 10px; }
  body.nav-is-collapsed .context-card { padding: 6px; }
  body.nav-is-collapsed .space-current { justify-content: center; padding: 6px; }
  body.nav-is-collapsed .nav-group.secondary { padding-top: 8px; }
  /* A folded group with no summary would hide its items for good. */
  body.nav-is-collapsed .nav-collapsible { padding-top: 8px; }
  body.nav-is-collapsed .nav-collapsible > a { display: flex; }
  body.nav-is-collapsed .user { padding: 10px 0 0; }
  body.nav-is-collapsed .user form { display: flex; justify-content: center; }
  body.nav-is-collapsed .user .ghost { padding: 6px 8px; font-size: 11px; }
  .nav-toggle { display: none; }
  .nav-scrim { display: none; }
}

/* ---------- mobile: gaveta ---------------------------------------------- */
.nav-toggle {
  display: none; align-items: center; gap: 9px; margin-right: auto;
  padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 10px;
  color: var(--text); font-weight: 600; font-size: 13px; background: rgba(37, 8, 23, 0.04);
}
.nav-toggle:hover { text-decoration: none; background: rgba(37, 8, 23, 0.08); }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }

@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .nav-toggle { display: inline-flex; }

  /* Off-canvas, not "stacked on top of the page": a sidebar that pushes the
     content down puts sixteen links between the operator and the screen they
     opened (§17, mobile). */
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(84vw, 300px); height: 100dvh;
    transform: translateX(-101%);
    transition: transform 220ms ease;
    z-index: 900;
    background: var(--rail);
    border-right: 0;
    box-shadow: 24px 0 60px rgba(37, 8, 23, 0.28);
    overflow-y: auto;
  }
  /* Two ways in, on purpose. `:target` is the no-script path — the button is a
     link to #sidebar and the scrim is a link back to # — and `body.nav-open`
     is what app.js drives once it has loaded, so Escape and an outside click
     work without breaking the version that has no script at all. */
  .sidebar:target, body.nav-open .sidebar { transform: none; }
  .sidebar:target ~ .nav-scrim, body.nav-open .nav-scrim { display: block; }
  .nav-scrim {
    display: none; position: fixed; inset: 0; z-index: 890;
    background: rgba(37, 8, 23, 0.52);
  }
  .sidebar nav { flex-direction: column; flex-wrap: nowrap; }
  /* Comfortable targets: 44px is the smallest thing a thumb hits reliably. */
  .sidebar nav a { padding: 11px 12px; min-height: 44px; }
  .nav-collapse-form { display: none; }
  main { padding: 16px 18px 64px; }
}

/* ---------- cockpit: cabeçalho ------------------------------------------- */
.cockpit { display: flex; flex-direction: column; gap: 20px; }

.cockpit-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 22px 24px;
  border: 1px solid var(--line); border-radius: 18px;
  background:
    radial-gradient(760px 280px at 12% -60%, rgba(255, 91, 85, 0.10), transparent 70%),
    var(--surface);
  position: relative; overflow: hidden;
}
/* The brand's own colour, as one hairline. Not the page's palette (§18). */
.cockpit-head::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--gradient);
}
.cockpit-identity { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.cockpit-mark {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 800; font-size: 15px; color: var(--ink);
  background: var(--brand-accent, var(--coral));
}
.cockpit-mark-image { object-fit: cover; background: var(--surface-2); }
.cockpit-greeting {
  margin: 0 0 2px; color: var(--muted); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
}
.cockpit-head h1 { margin: 0; font-size: 35px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.08; }
.cockpit-question { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.cockpit-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* `capitalize` turns "sexta-feira, 7 de agosto" into "Sexta-Feira, 7 De
   Agosto", which is not how Portuguese writes a date. Only the first letter
   is raised. */
.cockpit-date { margin: 0; color: var(--muted); font-size: 12.5px; }
.cockpit-date::first-letter { text-transform: uppercase; }
.cockpit-health { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.cockpit-health .health-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cockpit-health.tone-ok { color: var(--ok); }
.cockpit-health.tone-attention { color: var(--warn); }
.cockpit-health.tone-critical { color: var(--bad); }
.cockpit-degraded { margin: 0; }

/* ---------- Central de Ação ---------------------------------------------- */
.action-centre { margin-bottom: 0; }
.action-centre.is-clear { border-style: dashed; }
.empty-inline { color: var(--muted); margin: 0; font-size: 13.5px; }
.attention-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.attention-item {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 2px; border-bottom: 1px solid var(--line);
}
.attention-item:last-child { border-bottom: 0; }
.attention-mark {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
/* Colour *and* a mark: a priority that is only a shade of orange is invisible
   to a reader who cannot separate the oranges from the reds (§18, §23). */
.sev-critical .attention-mark { color: var(--bad); background: rgba(179, 38, 30, 0.12); border: 1px solid rgba(179, 38, 30, 0.4); }
.sev-warn .attention-mark { color: var(--warn); background: rgba(154, 91, 18, 0.12); border: 1px solid rgba(154, 91, 18, 0.38); }
.sev-info .attention-mark { color: var(--aubergine); background: rgba(86, 19, 47, 0.1); border: 1px solid rgba(86, 19, 47, 0.32); }
.attention-body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.attention-body strong { font-size: 14px; font-weight: 600; }
.attention-body small { color: var(--muted); font-size: 12.5px; }
.attention-actions { margin-left: auto; display: flex; gap: 8px; }
.attention-more { margin-top: 8px; }
.attention-more > summary { cursor: pointer; color: var(--aubergine); font-size: 13px; padding: 6px 0; }

/* ---------- Jornada editorial -------------------------------------------- */
.journey-head { margin-bottom: 12px; }
.journey-head h2 { margin: 0; font-size: 22px; }
.journey-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; max-width: 74ch; }
.journey-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr));
}
/* Seven cards want a row length that divides them tolerably. `auto-fit` alone
   lands on three on a laptop and five on a large monitor — 3+3+1 and 5+2, both
   of which end in a lonely card beside a wide empty strip, which is exactly
   the "grandes áreas vazias" §18 asks to avoid. Four is the one that reads as
   two rows of work rather than as a leftover. */
@media (min-width: 1180px) {
  .journey-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stage-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px; position: relative;
  counter-increment: stage;
}
.stage-card::before {
  content: counter(stage);
  position: absolute; top: 14px; right: 16px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  color: var(--muted); opacity: 0.6; letter-spacing: 0.08em;
}
.journey-grid { counter-reset: stage; }
.stage-head h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; }
.stage-blurb { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.stage-metrics {
  list-style: none; margin: 2px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px 10px;
}
.stage-metrics li { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stage-metric-value {
  font-size: 26px; color: var(--text); text-decoration: none;
}
a.stage-metric-value:hover { color: var(--aubergine); text-decoration: none; }
.stage-metrics li.tone-ok .stage-metric-value { color: var(--ok); }
.stage-metrics li.tone-warn .stage-metric-value { color: var(--warn); }
.stage-metrics li.tone-bad .stage-metric-value { color: var(--bad); }
.stage-metric-label { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.stage-notice {
  margin: 0; display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.45; padding: 9px 11px; border-radius: 10px;
}
.stage-notice.tone-warn { color: var(--warn); background: rgba(154, 91, 18, 0.09); border: 1px solid rgba(154, 91, 18, 0.3); }
.stage-notice.tone-bad { color: var(--bad); background: rgba(179, 38, 30, 0.09); border: 1px solid rgba(179, 38, 30, 0.33); }
.stage-empty { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.stage-headline {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(37, 8, 23, 0.03); color: var(--text);
}
.stage-headline:hover { text-decoration: none; border-color: var(--line-strong); background: rgba(37, 8, 23, 0.06); }
.stage-headline strong { font-size: 13px; font-weight: 600; line-height: 1.35; }
.stage-headline small { color: var(--muted); font-size: 11.5px; }
.stage-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.stage-actions .button { font-size: 12.5px; padding: 7px 12px; }
.stage-card.is-failed { border-color: rgba(154, 91, 18, 0.38); }
.stage-error { margin: 0; color: var(--warn); font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.stage-error small { color: var(--muted); }

/* ---------- Próximas publicações ----------------------------------------- */
.upcoming-list { list-style: none; margin: 0; padding: 0; }
.upcoming-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 2px; border-bottom: 1px solid var(--line);
}
.upcoming-row:last-child { border-bottom: 0; }
.upcoming-when { flex: 0 0 auto; display: flex; flex-direction: column; min-width: 62px; }
.upcoming-when strong { font-size: 13px; text-transform: capitalize; }
.upcoming-when small { color: var(--muted); font-size: 11.5px; font-family: var(--font-mono); }
.upcoming-what { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.upcoming-what a { color: var(--text); font-weight: 500; font-size: 13.5px; }
.upcoming-what a:hover { color: var(--aubergine); }
.upcoming-what small { color: var(--muted); font-size: 11.5px; }
.upcoming-status, .upcoming-alert { flex: 0 0 auto; }

/* ---------- Ideias recomendadas ------------------------------------------ */
.cockpit-ideas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.cockpit-idea {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  background: rgba(37, 8, 23, 0.02);
}
.cockpit-idea-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; }
.cockpit-idea h3 { margin: 0; font-size: 18px; line-height: 1.28; }
.cockpit-idea h3 a { color: var(--text); }
.cockpit-idea h3 a:hover { color: var(--aubergine); }
.cockpit-idea-why { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.cockpit-idea-sources { margin: 0; color: var(--dim); font-size: 11.5px; }
.cockpit-idea-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.cockpit-idea-actions .button { font-size: 12.5px; padding: 7px 12px; }

/* ---------- Atividade recente -------------------------------------------- */
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li { display: flex; gap: 12px; padding: 9px 0; align-items: flex-start; }
.activity-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.activity-dot.person { background: var(--aubergine); }
.activity-dot.mira { background: var(--coral); }
.activity-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.activity-body a { color: var(--text); }
.activity-body a:hover { color: var(--aubergine); }
.activity-body small { color: var(--muted); font-size: 11.5px; }

/* ---------- Prepare este espaço ------------------------------------------ */
.setup-card { border-style: dashed; }
.setup-meter { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-bottom: 14px; }
.setup-meter span { display: block; height: 100%; background: var(--coral); }

/* ---------- Produção: abas ------------------------------------------------ */
.production-views { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.production-views .chip { white-space: nowrap; }
.production-views .chip em {
  font-style: normal; margin-left: 6px; color: var(--muted); font-size: 11px; font-weight: 600;
}

/* ---------- Configuração: abas e IA --------------------------------------- */
.settings-panel { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.settings-fact {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  background: rgba(37, 8, 23, 0.02); display: flex; flex-direction: column; gap: 4px;
}
.settings-fact dt { color: var(--muted); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.settings-fact dd { margin: 0; font-size: 15px; font-weight: 600; }
.settings-fact small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 400; }

@media (max-width: 620px) {
  .cockpit-head { padding: 18px; }
  .cockpit-head h1 { font-size: 23px; }
  .cockpit-head-side { align-items: flex-start; width: 100%; }
  .attention-actions { margin-left: 0; width: 100%; }
  .attention-actions .button { width: 100%; text-align: center; }
}
.cockpit-setup-done { margin: 0; font-size: 12.5px; color: var(--muted); }
.cockpit-setup-done a { color: var(--muted); }
.cockpit-setup-done a:hover { color: var(--text-strong); }
a.badge:hover { text-decoration: none; filter: brightness(0.97); }

/* ---------- Produção: paginação (Fase 4 §2.1) ----------------------------- */
.pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pager-range { color: var(--muted); font-size: 12.5px; margin-right: auto; }

/* ===========================================================================
   MIRA Fase 4 — o Radar como grupos editoriais
   =========================================================================== */

.radar-unranked { margin-bottom: 16px; }
.radar-unranked p { margin: 0 0 6px; }
.radar-unranked p:last-of-type { color: var(--muted); }
.radar-unranked .actions { margin-top: 10px; }

.radar-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px; margin: 0 0 16px;
}
.radar-facts > div {
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px;
  background: rgba(37, 8, 23, 0.02);
}
.radar-facts dt {
  color: var(--muted); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; margin-bottom: 3px;
}
.radar-facts dd {
  margin: 0; font-size: 22px;
}

.radar-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(37, 8, 23, 0.02);
}
.radar-filters label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.radar-filters select { min-width: 132px; }
.radar-filters button { align-self: flex-end; }

/* ---------- one card per event ------------------------------------------- */
.cluster-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cluster-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  background: var(--surface); display: flex; flex-direction: column; gap: 9px;
}
.cluster-card.status-ignored { opacity: 0.6; }
.cluster-card.status-promoted { border-color: rgba(32, 122, 82, 0.35); }
.cluster-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cluster-head h3 { margin: 0; font-size: 19px; line-height: 1.26; flex: 1 1 320px; min-width: 0; }
.cluster-head h3 a { color: var(--text); }
.cluster-head h3 a:hover { color: var(--aubergine); }
.cluster-badges { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; font-size: 11.5px; }
.cluster-summary { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cluster-meta { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.chip-static {
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 9px;
  font-size: 11.5px; color: var(--muted);
}
.cluster-why { margin: 0; font-size: 12.5px; line-height: 1.5; }
.cluster-why strong { color: var(--muted); font-weight: 600; }
.cluster-novelty { margin: 0; font-size: 12.5px; color: var(--warn); }
.cluster-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.cluster-actions .button, .cluster-actions button { font-size: 12.5px; padding: 7px 12px; }
.cluster-related { margin: 8px 0 0; font-size: 12.5px; }

/* ---------- the three registers, visibly apart (§14) ---------------------- */
.reading-card { border-color: rgba(255, 91, 85, 0.35); background:
  radial-gradient(600px 200px at 0% -40%, rgba(255, 91, 85, 0.08), transparent 70%), var(--surface); }
.evidence-list { list-style: decimal; margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; }
.evidence-list li { padding-left: 4px; }
.evidence-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.evidence-head a { font-weight: 500; font-size: 13.5px; }
.evidence-summary { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ---------- "ignorar" with a reason (§16) --------------------------------- */
.ignore-menu > summary { list-style: none; }
.ignore-menu > summary::-webkit-details-marker { display: none; }
.ignore-form { min-width: 240px; gap: 4px; }
.ignore-hint { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.ignore-reason { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 2px; }
.ignore-reason input { margin: 0; }
.ignore-form button { margin-top: 8px; }

.checkbox-field { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0; }
.checkbox-field input { margin-top: 3px; }
.checkbox-field small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.idea-novelty-note { margin: -4px 0 8px; font-size: 12.5px; color: var(--warn); }
.idea-cluster-link { font-size: 12px; }

/* ---------------------------------------------------------------------------
   Fase 5 — identidade editorial, canais, planejamento e calendário
   --------------------------------------------------------------------------- */

/* A form of thirty questions needs air more than it needs decoration: one
   column on a phone, two where there is room, and a label that reads as a
   question rather than as a column heading. */
.field-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .field-grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--text-strong); }
.field-hint { font-size: 12px; color: var(--muted); line-height: 1.45; }
.field textarea { min-height: 76px; resize: vertical; }
.field-check { flex-direction: row; align-items: center; gap: 8px; }
.field-check .field-label, .field-check span { font-weight: 500; }

.identity-progress { margin: 0 0 18px; }
.identity-progress .bar {
  height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden;
}
.identity-progress .bar span { display: block; height: 100%; background: var(--coral); }
.identity-progress p { margin: 8px 0 0; font-size: 12.5px; }
.identity-progress .ok { color: var(--ok); }

.channel-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .channel-grid { grid-template-columns: 1fr 1fr; } }
.channel-card h2 { margin-top: 0; }

.wizard-steps {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 18px; list-style: none;
  counter-reset: step;
}
.wizard-steps li {
  counter-increment: step; font-size: 12.5px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
}
.wizard-steps li::before { content: counter(step) ". "; opacity: 0.7; }
.wizard-steps li.done { color: var(--text-strong); border-color: rgba(255, 91, 85, 0.4); }
.wizard-steps li[aria-current="step"] {
  color: var(--text-strong); background: rgba(255, 91, 85, 0.2); border-color: var(--coral); font-weight: 600;
}

.plan-summary p { margin: 0 0 4px; }
.plan-alerts { margin: 12px 0 18px; padding-left: 18px; color: var(--warn); font-size: 13px; }
.plan-alerts li { margin-bottom: 4px; }
.distributions { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 20px; }
@media (min-width: 800px) { .distributions { grid-template-columns: repeat(3, 1fr); } }
.distribution h3 { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.distribution ul { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.distribution li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--line); }
.plan-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 20px; }
.plan-actions form { display: flex; align-items: center; gap: 8px; }
.plan-slots td { vertical-align: top; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.row-actions .inline { display: inline; }

/* The calendar. `auto-fill` rather than a fixed seven columns so the month
   view reflows on a phone instead of scrolling sideways. */
.cal-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cal-day { border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 92px; }
.cal-date { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.cal-entry {
  display: block; border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-size: 12px;
  background: rgba(37, 8, 23, 0.04); border-left: 3px solid var(--line);
}
.cal-entry:hover { text-decoration: none; background: rgba(37, 8, 23, 0.08); }
.cal-time { color: var(--muted); margin-right: 6px; }
.cal-channel { color: var(--muted); }
.cal-title { display: block; margin: 2px 0; color: var(--text-strong); }
/* Colour is never the only signal: every card also carries the state in
   words, which is what keeps this readable for anyone who cannot see the
   difference between the orange and the green. */
.cal-entry.state-planned { border-left-color: rgba(37, 8, 23, 0.25); }
.cal-entry.state-producing { border-left-color: var(--coral); }
.cal-entry.state-review { border-left-color: var(--warn); }
.cal-entry.state-ready_to_schedule { border-left-color: var(--aubergine); }
.cal-entry.state-committed { border-left-color: var(--blush); }
.cal-entry.state-published { border-left-color: var(--success); }
.cal-list { list-style: none; padding: 0; margin: 0; }
.cal-list h3 { font-size: 12.5px; color: var(--muted); margin: 14px 0 6px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.cal-queue { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.adaptation.held { border-color: rgba(154, 91, 18, 0.5); }
.adaptation-findings { margin: 8px 0; padding-left: 18px; color: var(--warn); font-size: 12.5px; }
.adaptation-hook { font-weight: 600; margin: 8px 0 4px; }
.adaptation-body { white-space: pre-wrap; margin: 0 0 8px; }
.adaptation-parts { margin: 6px 0; padding-left: 20px; font-size: 13px; }
.adaptation-parts li { margin-bottom: 5px; }

/* A disabled primary button that still looks clickable is a lie the wizard
   tells when no channel is active. */
button:disabled, button[disabled] { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); }
/* A multi-select of long topic names is the one control that can push a
   390 px form sideways. */
.field select[multiple] { max-width: 100%; }
.field-grid > .field { min-width: 0; }
.cal-nav { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.cal-range { font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Fase 6 — aprovações por canal, conexões e publicações
   --------------------------------------------------------------------------- */

.preflight { margin: 12px 0; }
.preflight-findings { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; }
.preflight-findings .blocked { color: var(--warn); }
.preflight-findings .warned { color: var(--muted); }

.approval { margin-bottom: 18px; }
.approval.held { border-color: rgba(154, 91, 18, 0.5); }
.approval-head h2 { margin: 0 0 4px; font-size: 16px; }
.approval-head p { margin: 0 0 12px; }
.approval-hook { font-weight: 600; margin: 8px 0 4px; }
.approval-body { white-space: pre-wrap; margin: 0 0 10px; line-height: 1.55; }
.approval-findings { margin: 8px 0; padding-left: 18px; color: var(--warn); font-size: 12.5px; }
/* The comment field and the three decisions on one line where there is room,
   stacked where there is not: a reviewer on a phone still needs all three. */
.approval-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.approval-actions input[type="text"] { flex: 1 1 220px; min-width: 0; }

.connection-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .connection-grid { grid-template-columns: 1fr 1fr; } }
.destinations { list-style: none; padding: 0; margin: 10px 0; font-size: 13px; }
.destinations li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.destinations img { border-radius: 50%; }
.connection-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.publication { margin-bottom: 14px; }
.publication-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.publication p { margin: 0 0 4px; }
.publication .mono { font-size: 11.5px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.inline-form input[type="text"] { flex: 1 1 200px; min-width: 0; }
/* An inline action inside a row is a link, not a third button competing with
   the two that matter. Fase 5 and 6 both use `class="link"` on a submit. */
button.link, a.link {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--coral); font: inherit; font-size: 12.5px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
button.link:hover, a.link:hover { color: var(--text-strong); }
button.link:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; }

/* --- Fase 6.1: the planning calendar, moved by hand ----------------------
   A card being dragged, a card whose move is still in flight, and a zone that
   will accept it. `pending` is the one that matters: between the drop and the
   server's answer the card is somewhere it may not stay, and saying so is the
   difference between an optimistic update and a lie. */
.cal-entry.movable { cursor: grab; }
.cal-entry.movable:active { cursor: grabbing; }
.cal-entry.dragging,
.queue-item.dragging { opacity: 0.45; }
.cal-entry.pending,
.queue-item.pending { opacity: 0.6; outline: 1px dashed var(--coral); outline-offset: 2px; }
.cal-day.over,
.cal-queue.over { outline: 2px solid var(--coral); outline-offset: -2px; }
.cal-queue.empty { min-height: 64px; display: block; }

.queue-item {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px;
}
.queue-item > .cal-entry { flex: 1 1 auto; margin: 0; }
.queue-index { color: var(--dim); font-variant-numeric: tabular-nums; min-width: 1.5em; text-align: right; }
.queue-controls { display: flex; flex-wrap: wrap; gap: 4px; }
.queue-controls button[disabled] { opacity: 0.35; cursor: default; }

/* The queue is a single column when there is no room to drag comfortably; the
   four move buttons are the whole interaction on a phone. */
@media (max-width: 720px) {
  .cal-queue { grid-template-columns: 1fr; }
  .queue-item { flex-wrap: wrap; }
  .queue-controls { width: 100%; }
}

/* A pointer-less or reduced-motion reader gets no drag affordance at all —
   the buttons are not a fallback for them, they are the interface. */
@media (hover: none) {
  .cal-entry.movable { cursor: pointer; }
}

/* --- Fase 6.1: comparing two versions ------------------------------------
   The whole point of the screen is that the two columns are equally readable.
   A "new version" column styled as the winner is a screen that has already
   decided, which is what §10 exists to prevent. */
.table.compare td { vertical-align: top; width: 42%; white-space: pre-wrap; }
.table.compare th[scope="row"] { width: 16%; white-space: nowrap; color: var(--dim); }
.diff-before.changed { background: rgba(179, 38, 30, 0.08); }
.diff-after.changed { background: rgba(32, 122, 82, 0.08); }

.consequences { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.consequences .warn { color: var(--warn); }
.compare-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.revision-history { display: grid; gap: 4px; padding-left: 0; list-style: none; }
.batch-numbers { display: grid; gap: 4px; list-style: none; padding: 0; }
.batch-numbers .warn { color: var(--warn); }
.preserved { color: var(--dim); font-size: 0.9em; }

/* --- The activation journey ---------------------------------------------- */
.activation-steps { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.activation-steps .step { display: flex; gap: 8px; align-items: baseline; }
.step-n {
  color: var(--dim); font-variant-numeric: tabular-nums;
  min-width: 1.6em; text-align: right;
}
.step-body { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.step-detail { flex: 1 1 100%; color: var(--dim); font-size: 0.92em; }
.step.step-done .step-detail { opacity: 0.7; }
.next-action { border-left: 3px solid var(--coral); padding-left: 10px; }
.scopes dd.mono { word-break: break-word; }
.scopes dd.warn { color: var(--warn); }

/* --- Classifying a historical variant ------------------------------------ */
.variant-text {
  border-left: 3px solid var(--line); margin: 8px 0; padding: 4px 0 4px 12px;
  color: var(--dim); white-space: pre-wrap;
}
.suggestion { border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.decisions { border: 0; padding: 0; margin: 8px 0; display: grid; gap: 4px; }

@media (max-width: 720px) {
  .table.compare td { width: auto; }
  .compare-actions > * { width: 100%; }
}

/* --- Fase 7: who communicates in this space ------------------------------ */
/* Three options that each need a sentence are not a dropdown. Radio inputs in
   cards, one column on a narrow screen, using the tokens the rest of the
   product already uses — nothing new was introduced for this. */
.kind-options { display: grid; gap: 10px; margin: 10px 0; }
.kind-option {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.kind-option:hover { border-color: var(--line-strong); }
.kind-option:has(input:checked) { border-color: var(--coral); background: rgba(255, 91, 85, 0.07); }
.kind-option input { margin-top: 3px; }
.kind-body { display: grid; gap: 3px; }
.kind-body strong { font-size: 15px; }
.kind-body small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.kind-body small.dim { color: var(--dim); }

.identity-confirm { border-left: 3px solid var(--coral); }
.identity-who { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 2px; }
.identity-summary .summary-sentence {
  font-size: 15.5px; line-height: 1.6; max-width: 72ch; margin: 6px 0 10px;
}
.setup-ai { margin: 12px 0 0; font-size: 12.5px; }

@media (max-width: 720px) {
  .kind-option { padding: 12px; }
}

/* ===========================================================================
   MIA-FND-005 — Conta e usuários
   =========================================================================== */

.account-abilities { margin-top: 12px; }
.account-abilities p { margin: 0 0 4px; font-size: 11.5px; }
.account-abilities ul {
  margin: 0; padding-left: 18px; display: grid; gap: 2px;
  font-size: 12.5px; color: var(--muted);
}

/* The filter bar wraps instead of scrolling: on a phone it becomes a stack,
   and the search field is the one that keeps the width. */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px;
}
.filter-bar .filter-search { flex: 1 1 220px; }
.filter-bar label { margin: 0; }
.filter-bar input, .filter-bar select { width: 100%; }
.filter-bar > label > select { min-width: 150px; }

/* The matrix: one row per space, never a grid that needs sideways scrolling.
   Each row is [checkbox + name] [profile], and the legacy note sits under it
   on its own line so the row does not grow a third column nobody can read. */
.matrix { display: grid; gap: 10px; }
.matrix-row {
  display: grid; grid-template-columns: 1fr 220px; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
}
.matrix-row .matrix-note {
  grid-column: 1 / -1; margin: 0; font-size: 11.5px; line-height: 1.45;
}
.matrix-space { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; }
.matrix-space input { margin: 0; }
.matrix-profile { margin: 0; }
.matrix-profile select { width: 100%; }

.profile-legend { margin: 0 0 12px; font-size: 12.5px; }
.profile-legend summary { cursor: pointer; color: var(--muted); }
.profile-legend dl { margin: 8px 0 0; display: grid; gap: 4px; }
.profile-legend dt { font-weight: 600; }
.profile-legend dd { margin: 0 0 6px; color: var(--muted); line-height: 1.45; }

.inline-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.inherited-spaces {
  margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 12.5px;
}

.invite-link input {
  width: 100%; font-size: 12.5px; padding: 10px 12px;
}

.danger-zone { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }

@media (max-width: 720px) {
  .matrix-row { grid-template-columns: 1fr; }
  .filter-bar > label > select { min-width: 0; }
}

/* ===========================================================================
   Mellina — a shell, a decision desk and a public front door
   (MELLINA-IMPLEMENTACAO-001)
   =========================================================================== */

/* ---------- the rail's wordmark ------------------------------------------
   Two files, one visible at a time: the approved reverse wordmark while the
   rail is wide, the symbol once it is a 72px strip. Neither is ever typeset,
   stretched or recoloured — they are the master files, drawn at their own
   ratio. */
/* Both selectors are `.sidebar-brand`-qualified on purpose: the rule that
   sizes the rail's images is `.sidebar-brand img`, and a bare `.brand-symbol`
   loses to it on specificity — which is how the 512px symbol ended up drawn
   at full size, half of it outside the rail. */
.sidebar-brand .brand-symbol { display: none; width: 30px; }
@media (min-width: 761px) {
  body.nav-is-collapsed .sidebar-brand .brand-wordmark { display: none; }
  body.nav-is-collapsed .sidebar-brand .brand-symbol { display: block; margin: 0 auto; }
}

/* ---------- the rail's second level --------------------------------------
   Only the open area shows its screens, which is what keeps nine areas on the
   screen for somebody who is somewhere else. Indented under the icon column
   so the hierarchy is visible without a second icon set. */
.nav-sub {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 8px 15px; padding-left: 13px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.sidebar nav .nav-sub a {
  padding: 6px 10px; font-size: 12.5px; border-radius: 8px; min-height: 0;
}
.sidebar nav .nav-sub a.active { background: rgba(255, 255, 255, 0.10); font-weight: 700; }
.sidebar nav .nav-sub a.active::before { display: none; }
@media (min-width: 761px) {
  /* A collapsed rail is icons only, and these rows have no icon. */
  body.nav-is-collapsed .nav-sub { display: none; }
}

/* ---------- top bar -------------------------------------------------------- */
.topbar {
  background: rgba(251, 247, 243, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  margin: -24px -36px 20px;
  padding: 12px 36px;
  position: sticky; top: 0; z-index: 4;
}
.topbar-assistant { white-space: nowrap; }
@media (max-width: 760px) {
  .topbar { margin: -16px -18px 16px; padding: 10px 18px; }
}

/* ---------- Hoje: the four numbers ---------------------------------------- */
.today-metrics {
  display: grid; gap: 14px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.today-tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 2px;
}
.today-label { margin: 0; color: var(--muted); font-size: 12.5px; }
.today-value {
  margin: 4px 0 0; font-family: var(--font-display); font-size: 38px;
  line-height: 1; letter-spacing: -0.03em;
}
.today-value a { color: inherit; }
.today-value a:hover { color: var(--coral); text-decoration: none; }
/* An empty tile is quieter than a tile with work in it, and it is the only
   one that is allowed to carry a sentence. */
.today-tile.is-empty .today-value { color: var(--muted); font-size: 30px; }
.today-tile.is-unavailable .today-value { color: var(--muted); font-size: 30px; }
.today-hint { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.today-cta { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; }
.today-cta a { color: var(--aubergine); }

.today-assistant {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.today-assistant h2 { margin: 0 0 4px; color: var(--paper); }
.today-assistant p { margin: 0; color: var(--blush); font-size: 13px; max-width: 70ch; }

/* ---------- /settings: the directory -------------------------------------- */
.settings-hub { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); align-items: start; }
.settings-hub-section { margin: 0; }
.settings-hub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.settings-hub-list li { border-top: 1px solid var(--line); }
.settings-hub-list li:first-child { border-top: 0; }
.settings-hub-list a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px; margin: 0 -10px; border-radius: var(--radius-sm); color: var(--text);
}
.settings-hub-list a:hover { background: var(--surface-3); text-decoration: none; }
.settings-hub-list strong { font-size: 13.5px; font-weight: 700; }
.settings-hub-list small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* ===========================================================================
   The public landing (mission §5)
   ===========================================================================
   Same stylesheet, same tokens, same fonts as the product — a second one would
   be a second place for the brand to drift. */

body.landing { background: var(--ivory); }
/* The landing's `<main>` is the page, not a console column: the shell's own
   padding and max-width would inset every full-bleed band by 36px and leave a
   stripe of Ivory down both sides of the dark section. */
body.landing main { padding: 0; max-width: none; margin: 0; }
.lp-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.lp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 0 0 12px 0;
}
.lp-skip:focus { left: 0; text-decoration: none; }

.lp-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(248, 242, 236, 0.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(86, 19, 47, 0.08);
}
.lp-nav { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lp-brand { width: 152px; max-width: 44vw; height: auto; display: block; }
.lp-navlinks { display: flex; gap: 26px; align-items: center; font-size: 14px; font-weight: 700; }
.lp-navlinks a { color: var(--ink); }
.lp-pill {
  border-radius: 999px; padding: 13px 22px; background: var(--coral); color: var(--ink);
  font-weight: 800; white-space: nowrap;
}
.lp-pill:hover { text-decoration: none; filter: brightness(0.96); }

.lp-hero {
  min-height: 640px; display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: 55px; align-items: center; padding: 70px 0 90px;
}
.lp-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--coral); margin: 0;
}
.lp-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  /* Big, because the kit's hero is big — and capped where the headline still
     fits above the fold on a 900px laptop with the call to action under it. A
     promise nobody scrolls to is not a promise. */
  font-size: clamp(38px, 5vw, 66px); line-height: 1.0; letter-spacing: -0.04em;
  margin: 16px 0 24px;
}
.lp-lead { font-size: 19px; color: var(--muted); max-width: 620px; margin: 0; line-height: 1.5; }
.lp-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
/* The call to action carries its own shape wherever it is used — in the hero,
   and again at the close of the page. A button that is only a button because
   of where it sits stops being one the moment it moves. */
.lp-primary, .lp-secondary {
  display: inline-block; padding: 16px 26px; border-radius: 999px;
  font-weight: 800; font-size: 15px;
}
.lp-primary { background: var(--coral); color: var(--ink); }
.lp-primary:hover { text-decoration: none; filter: brightness(0.96); }
.lp-secondary { border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); }
.lp-secondary:hover { text-decoration: none; background: var(--surface-3); }

.lp-art {
  position: relative; height: 540px; border-radius: 42px;
  background: var(--ink); overflow: hidden;
  box-shadow: 0 24px 70px rgba(37, 8, 23, 0.14);
}
.lp-orb { position: absolute; border-radius: 50%; }
.lp-orb.one { width: 440px; height: 440px; right: -150px; top: -130px; background: var(--aubergine); }
.lp-orb.two { width: 280px; height: 280px; left: -100px; bottom: -110px; background: #431024; }
.lp-art-card {
  position: absolute; left: 44px; right: 44px; top: 60px; bottom: 52px;
  border-radius: 28px; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13); padding: 36px; color: var(--paper);
  backdrop-filter: blur(16px);
}
.lp-art-card img { width: min(230px, 70%); height: auto; display: block; }
.lp-art-head {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05; margin: 64px 0 14px; letter-spacing: -0.03em;
}
.lp-art-sub { font-size: 14px; color: var(--blush); margin: 0; }
.lp-pulse { display: flex; gap: 10px; margin-top: 34px; }
.lp-pulse span { height: 8px; border-radius: 8px; background: var(--coral); }
.lp-pulse span:nth-child(1) { width: 110px; }
.lp-pulse span:nth-child(2) { width: 65px; background: var(--blush); }
.lp-pulse span:nth-child(3) { width: 28px; background: var(--paper); }

.lp-section { padding: 100px 0; }
.lp-head { max-width: 760px; margin-bottom: 52px; }
.lp-head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -0.035em; margin: 12px 0;
}
.lp-head p { color: var(--muted); font-size: 18px; margin: 0; }

.lp-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lp-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 24px;
  padding: 28px; min-height: 210px;
}
.lp-num { font-family: var(--font-display); font-size: 46px; color: var(--coral); line-height: 1; }
.lp-card h3 { font-size: 18px; margin: 18px 0 8px; }
.lp-card p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; }

.lp-dark { background: var(--ink); color: var(--paper); }
.lp-dark .lp-head p { color: var(--blush); }
.lp-cycle { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.lp-step { padding: 20px 12px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.lp-step b {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--coral); color: var(--ink); margin-bottom: 18px; font-weight: 800;
}
.lp-step span { font-size: 13px; font-weight: 800; }

.lp-product { background: var(--paper); }
.lp-shell { margin: 0; }
.lp-shell-inner {
  display: grid; grid-template-columns: 230px 1fr; background: var(--paper);
  border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(37, 8, 23, 0.12); min-height: 420px;
}
.lp-shell-side { background: var(--ink); padding: 28px 22px; color: var(--paper); }
.lp-shell-side img { width: 140px; max-width: 100%; height: auto; display: block; margin: 4px 6px 34px; }
.lp-shell-menu { display: grid; gap: 6px; }
.lp-shell-menu span {
  padding: 11px 14px; border-radius: 12px; color: var(--rail-muted); font-size: 13.5px; font-weight: 600;
}
.lp-shell-menu span.is-active { background: rgba(255, 91, 85, 0.16); color: var(--paper); }
.lp-shell-work { padding: 38px; }
.lp-shell-greeting {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 36px);
  line-height: 1.05; letter-spacing: -0.03em; margin: 0;
}
.lp-shell-sub { color: var(--muted); margin: 10px 0 0; }
.lp-shell-rows { display: grid; gap: 12px; margin-top: 30px; }
.lp-shell-rows div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap;
  padding: 17px 18px; border: 1px solid var(--line); border-radius: 14px;
}
.lp-shell-rows span { color: var(--muted); font-size: 13px; }
.lp-shell figcaption { margin-top: 14px; color: var(--muted); font-size: 12.5px; }

.lp-quote { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.lp-quote blockquote {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 54px); line-height: 1.1; letter-spacing: -0.035em; margin: 0;
}
.lp-symbol {
  height: 400px; border-radius: 32px; background: var(--aubergine);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.lp-symbol::before {
  content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: #6f1c40; right: -160px; top: -160px;
}
.lp-symbol img { width: 200px; max-width: 50%; height: auto; position: relative; }

.lp-footer { background: var(--ink); color: var(--paper); padding: 64px 0; }
.lp-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.lp-foot img { width: 200px; max-width: 60vw; height: auto; display: block; }
.lp-foot p { color: var(--blush); font-size: 14px; }
.lp-claim { font-family: var(--font-display); font-size: 24px; color: var(--paper); margin: 0 0 16px; }
.lp-foot-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

@media (max-width: 1000px) {
  .lp-hero { grid-template-columns: 1fr; padding-top: 44px; gap: 40px; }
  .lp-art { height: 480px; }
  .lp-grid4 { grid-template-columns: 1fr 1fr; }
  .lp-cycle { grid-template-columns: repeat(4, 1fr); }
  .lp-shell-inner { grid-template-columns: 1fr; }
  .lp-shell-side { display: none; }
  .lp-quote { grid-template-columns: 1fr; gap: 34px; }
  .lp-section { padding: 72px 0; }
}

@media (max-width: 620px) {
  .lp-wrap { width: min(100% - 26px, 1180px); }
  .lp-nav { height: 68px; }
  .lp-navlinks a:not(.lp-pill) { display: none; }
  .lp-brand { width: 140px; }
  .lp-actions { flex-direction: column; align-items: stretch; }
  .lp-actions a { text-align: center; }
  .lp-art { height: 430px; }
  .lp-art-card { inset: 28px 22px; padding: 26px; }
  .lp-art-head { margin-top: 56px; }
  .lp-grid4, .lp-cycle { grid-template-columns: 1fr; }
  .lp-shell-work { padding: 24px; }
  .lp-symbol { height: 300px; }
  .lp-foot { align-items: flex-start; }
  .today-assistant .button { width: 100%; text-align: center; }
}


/* ---------- tablet: the same rail, compact ---------------------------------
   Between the phone drawer and a full desktop there is a band where 244px of
   menu is a quarter of the screen. The mission asks for "navegação compacta em
   tablet", and the compact rail already exists — it is what the collapse
   control produces. Here it is applied by width instead of by preference.

   The declarations below are the collapsed rail's, with the `body.nav-is-collapsed`
   prefix removed: in this band every session gets them, and the toggle is
   hidden because there is nothing left to collapse. */
@media (min-width: 761px) and (max-width: 1120px) {
  .shell { grid-template-columns: 72px minmax(0, 1fr); }
  .sidebar { padding-left: 10px; padding-right: 10px; align-items: stretch; }
  .sidebar-head { flex-direction: column; gap: 10px; }
  .wordmark,
  .nav-label,
  .nav-group-title,
  .context-card .context-label,
  .space-current-body,
  .space-chevron,
  .user-name,
  .user-meta,
  .nav-collapsible summary { display: none; }
  .sidebar-brand { justify-content: center; padding: 2px 0 4px; }
  .sidebar nav a { justify-content: center; padding: 9px 0; }
  .sidebar nav a em { position: absolute; top: 2px; right: 6px; padding: 0 4px; font-size: 10px; }
  .context-card { padding: 6px; }
  .space-current { justify-content: center; padding: 6px; }
  .nav-group.secondary { padding-top: 8px; }
  .nav-collapsible { padding-top: 8px; }
  .nav-collapsible > a { display: flex; }
  .user { padding: 10px 0 0; }
  .user form { display: flex; justify-content: center; }
  .user .ghost { padding: 6px 8px; font-size: 11px; }
  .sidebar-brand .brand-wordmark { display: none; }
  .sidebar-brand .brand-symbol { display: block; margin: 0 auto; }
  .nav-sub { display: none; }
  .nav-collapse-form { display: none; }
}

/* --- Slide editor (MELLINA editor de slides) -------------------------------
   Three columns on a wide screen — pages, the page, its properties — and one
   below the other on a narrow one. The primary action is the only filled
   button; secondary ones are outlined; restoring the original sits apart, at
   the bottom, where it cannot be clicked on the way to "Salvar". */
.slide-edit-entry { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.slide-edit-entry .is-disabled { opacity: 0.55; cursor: not-allowed; }
.slide-editor { display: flex; flex-direction: column; gap: 12px; }
.se-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 5; background: var(--surface); padding: 10px 0; border-bottom: 1px solid var(--line); }
.se-bar-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.se-bar-title h1 { font-size: 20px; margin: 0; }
.se-dirty { color: var(--cta); font-weight: 700; font-size: 13px; }
.se-bar-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.se-group { display: inline-flex; gap: 8px; }
.slide-editor button:disabled, .slide-editor button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.slide-editor button:focus-visible, .slide-editor a:focus-visible, .slide-editor input:focus-visible,
.slide-editor select:focus-visible, .slide-editor textarea:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }
.slide-editor button.secondary { background: var(--paper); color: var(--text-strong); border: 1px solid var(--text-strong); }
.slide-editor button.small, .slide-editor .small { font-size: 12px; }
.slide-editor button.small { padding: 4px 10px; }
.slide-editor .danger-text { color: var(--bad); }
.se-explain { margin: 0; }
.se-layout { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(320px, 400px); gap: 20px; align-items: start; }
/* The column holds its thumbnails, not the other way round: the bar's width
   is reserved whether or not it shows (`scrollbar-gutter`), the padding keeps
   the active ring off the bar, and each thumbnail takes the width that is
   left. A fixed 96 px in an 89 px client area was the horizontal bar. */
.se-thumbs {
  display: flex; flex-direction: column; gap: 10px; max-height: 80vh;
  overflow-x: auto; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin;
  padding: 4px 10px 4px 4px;
}
.se-thumbs .thumb { width: 100%; flex: 0 0 auto; }
.se-thumbs .thumb img { width: 100%; height: auto; display: block; border-radius: 6px; }
.se-preview { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 70px; }
.se-preview-frame { display: flex; gap: 10px; }
.se-preview-frame img { max-width: 100%; max-height: 72vh; border-radius: 8px; box-shadow: 0 6px 24px rgba(37, 8, 23, 0.14); background: var(--surface-2); }
.se-preview-frame img[data-compare-img] { max-width: 48%; outline: 2px dashed var(--line-strong); }
.se-checks, .se-warnings { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.se-checks .is-blocking { color: var(--bad); font-weight: 700; }
.se-checks .is-advisory, .se-warnings li { color: #8a5a00; }
.se-checks .is-ok { color: var(--success); }
.se-props { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 12px 14px; }
.se-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.se-tabs [role="tab"] { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; padding: 8px 10px; color: var(--muted); }
.se-tabs [role="tab"][aria-selected="true"] { color: var(--text-strong); border-bottom-color: var(--cta); }
.se-panel { display: flex; flex-direction: column; gap: 12px; }
.se-field { display: flex; flex-direction: column; gap: 4px; }
.se-field label, .se-label { font-size: 12.5px; font-weight: 700; color: var(--text-strong); }
.se-field input[type="text"], .se-field textarea, .se-field select { width: 100%; }
.se-counter { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.se-counter.is-over-rec { color: #8a5a00; }
.se-counter.is-over-max { color: var(--bad); font-weight: 700; }
.se-check { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.se-color-row { display: flex; align-items: center; gap: 10px; }
.se-range output { font-weight: 500; color: var(--muted); margin-left: 6px; }
.se-list ol, .se-diagram ol { padding-left: 18px; margin: 0 0 8px; display: flex; flex-direction: column; gap: 10px; }
.se-diagram li { display: grid; gap: 6px; }
.se-row-title { font-weight: 700; font-size: 12.5px; }
.se-row-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.se-inline-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.se-ai { border-top: 1px dashed var(--line-strong); padding-top: 10px; }
.se-image-current img { max-width: 160px; border-radius: 6px; display: block; }
.se-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.se-choice { padding: 0; border-radius: 6px; overflow: hidden; border: 2px solid transparent; background: var(--surface-2); }
.se-choice img { width: 100%; height: 64px; object-fit: cover; display: block; }
.se-choice.is-selected { border-color: var(--cta); }
.se-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.se-logo-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.se-logo-thumb img { width: 64px; height: 32px; object-fit: contain; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 12px 12px; border-radius: 4px; }
.se-logo-compare { display: flex; gap: 10px; }
.se-logo-compare img { width: 46%; max-height: 120px; object-fit: contain; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 14px 14px; border-radius: 6px; }
.se-history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.se-revision { display: grid; grid-template-columns: 56px 1fr; gap: 8px 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.se-revision.is-current { border-color: var(--cta); }
.se-revision-thumb img { width: 56px; border-radius: 4px; display: block; }
.se-revision-meta { display: flex; flex-direction: column; gap: 2px; }
.se-revision .se-row-actions { grid-column: 1 / -1; }
.se-danger-zone { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; }
.danger-outline { background: transparent; color: var(--bad); border: 1px solid rgba(179, 38, 30, 0.5); }
.slide-editor .notice.danger { border: 1px solid var(--bad); color: var(--bad); padding: 10px 12px; border-radius: 8px; }
@media (max-width: 1100px) {
  .se-layout { grid-template-columns: 1fr; }
  /* Small screens: a horizontal strip, as designed — fixed-width thumbnails
     scrolling sideways, with room under them for the bar. */
  .se-thumbs { flex-direction: row; max-height: none; overflow-x: auto; scrollbar-gutter: auto; padding: 4px 4px 10px; }
  .se-thumbs .thumb { width: 96px; }
  .se-preview { position: static; }
}
/* `hidden` must win over the panels' own `display`: an inactive tab, the
   dirty flag, the conflict banner and the logo preview are all toggled by it. */
.slide-editor [hidden] { display: none !important; }
.se-field label.se-check { flex-direction: row; font-weight: 500; font-size: 13px; color: var(--text-strong); }
.se-color input[type="color"] { width: 52px; height: 34px; padding: 2px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--paper); flex: 0 0 auto; }
.se-color input[type="color"]:disabled { opacity: 0.4; }
.diag-subtitle { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }

/* --- MELLINA editor visual assistido ---------------------------------------
   The slide is the interface: each element of the page is a button laid over
   the preview at the coordinates the renderer reported. An outline and the
   element's name mark the selection; a dashed box marks where the design
   would put a moved element; guides appear only while dragging. */
.se-visual .se-layout { grid-template-columns: 124px minmax(0, 1fr) minmax(320px, 380px); }
.se-stage { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 64px; min-width: 0; }
.se-stage-row { display: flex; gap: 12px; align-items: flex-start; }
.se-canvas { position: relative; display: inline-block; line-height: 0; max-width: 100%; touch-action: none; user-select: none; }
.se-canvas img[data-preview-img] { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(37, 8, 23, 0.14); background: var(--surface-2); }
.se-compare { max-width: 44%; max-height: 72vh; border-radius: 8px; outline: 2px dashed var(--line-strong); }
.se-overlay { position: absolute; inset: 0; }
.se-el { position: absolute; padding: 0; margin: 0; border: 0; border-radius: 3px; background: transparent; cursor: pointer;
  outline: 1px dashed transparent; outline-offset: 2px; box-shadow: none; line-height: 1.2; min-width: 6px; min-height: 6px; }
.se-el:hover { outline-color: rgba(166, 25, 82, 0.55); }
.se-el.is-selected { outline: 2px solid var(--cta); outline-offset: 3px; }
.se-el.is-selected.is-movable { cursor: move; }
.se-el:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; }
.se-el.is-highlighted { outline: 3px solid #f2a900; outline-offset: 3px; }
.se-el-image:hover:not(.is-selected) { outline-color: rgba(166, 25, 82, 0.25); }
.se-el-label { position: absolute; left: -3px; top: -24px; display: none; white-space: nowrap; font: 600 11.5px/1 var(--font, Inter, sans-serif);
  background: var(--cta); color: #fff; padding: 4px 7px; border-radius: 4px; pointer-events: none; }
.se-el-image .se-el-label { top: 6px; left: 6px; }
.se-el:hover .se-el-label, .se-el.is-selected .se-el-label, .se-el:focus-visible .se-el-label, .se-el.is-highlighted .se-el-label { display: inline-block; }
.se-handle { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid var(--cta); border-radius: 2px; }
.se-handle-width { right: -9px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.se-handle-proportional { right: -9px; bottom: -9px; cursor: nwse-resize; }
.se-safe { position: absolute; border: 1px dashed rgba(0, 120, 212, 0.55); pointer-events: none; display: none; }
.se-overlay.is-dragging .se-safe { display: block; }
.se-recommended { position: absolute; border: 1.5px dashed rgba(60, 60, 60, 0.6); background: rgba(255, 255, 255, 0.08); pointer-events: none; border-radius: 3px; }
.se-guide { position: absolute; pointer-events: none; background: #e0198b; }
.se-guide-x { top: 0; bottom: 0; width: 1px; }
.se-guide-y { left: 0; right: 0; height: 1px; }
.se-guide.is-center { background: #0078d4; }
.se-ghost { position: absolute; pointer-events: none; }
/* The optimistic layer sits between the PNG and the clickable map: the piece
   cut from the preview, and a mask painted with the colours around its old
   place. Lifted while the pointer holds it; flat once dropped, waiting for
   the real render to replace both in one step. */
.se-optimistic { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: 8px; }
.se-optimistic .se-hole { z-index: 1; }
.se-optimistic canvas.se-ghost { z-index: 2; }
canvas.se-ghost.is-lifted { opacity: 0.94; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); }
/* "Atualizando a prévia…": a chip on the corner, never a cover over the page. */
.se-pending {
  position: absolute; top: 10px; right: 10px; z-index: 70; pointer-events: none;
  background: rgba(20, 20, 24, 0.74); color: #fff; font-size: 12px; line-height: 1.3;
  padding: 4px 10px; border-radius: 999px;
}
.se-preview-failed { color: var(--bad); margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Switching pages: the current one stays, dimmed, until the next is decoded. */
.se-stage.is-switching .se-canvas img[data-preview-img] { opacity: 0.6; transition: opacity 120ms ease; }
.se-thumbs .thumb.is-loading { border-style: dashed; border-color: var(--coral); }
/* One row of fixed height, reserved even when nothing is selected: the
   toolbar appearing used to push the slide down under the pointer, so the
   second click of a double click landed on another element. */
.se-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  box-sizing: border-box; height: 42px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 8px; box-shadow: 0 2px 10px rgba(37, 8, 23, 0.06); }
.se-toolbar > * { flex: 0 0 auto; }
.se-toolbar.is-empty { visibility: hidden; }
.se-toolbar-name { font-weight: 800; font-size: 13px; padding: 0 6px; color: var(--cta); }
.se-menu { display: inline-flex; gap: 4px; padding-left: 6px; border-left: 1px solid var(--line); }
.se-hint { margin: 0; }
.se-editing { margin: 0 0 6px; font-size: 14px; }
.se-locked { background: var(--surface-2); border-left: 3px solid var(--line-strong); padding: 8px 10px; border-radius: 6px; }
.se-el-section { display: flex; flex-direction: column; gap: 12px; }
.se-color { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.se-color legend { font-size: 12.5px; font-weight: 700; padding: 0 4px; }
.se-color-design { margin: 0; display: flex; align-items: center; gap: 6px; }
.se-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line-strong); }
.se-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.se-swatch-btn { width: 30px; height: 30px; padding: 3px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--paper); }
.se-swatch-btn span { display: block; width: 100%; height: 100%; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.08); }
.se-swatch-btn[aria-pressed="true"] { outline: 3px solid var(--cta); outline-offset: 1px; }
.se-more-colors summary, .se-advanced summary, .se-logo-bg summary, .se-upload summary { cursor: pointer; font-size: 13px; font-weight: 700; }
.se-hex { width: 96px; font-family: ui-monospace, monospace; }
.se-advanced { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.se-advanced[open] > summary { margin-bottom: 8px; }
.se-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.se-chip { border-radius: 999px; padding: 4px 10px; font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-strong); }
.se-chip.is-hidden-el { border-style: dashed; color: var(--muted); }
.se-place { display: flex; flex-direction: column; gap: 6px; }
.se-generate-facts { margin: 4px 0 8px; padding-left: 18px; }
.se-visibility { border: 0; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }
.is-flash { animation: se-flash 1.2s ease-out 1; }
@keyframes se-flash { 0% { box-shadow: 0 0 0 4px rgba(242, 169, 0, 0.8); } 100% { box-shadow: 0 0 0 0 rgba(242, 169, 0, 0); } }
.se-library { width: min(1120px, 94vw); max-height: 88vh; border: 0; border-radius: 14px; padding: 0; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3); }
.se-library::backdrop { background: rgba(20, 10, 16, 0.45); }
.se-library-inner { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 22px; }
.se-library-head { display: flex; justify-content: space-between; align-items: center; }
.se-library-head h2 { margin: 0; font-size: 20px; }
.se-library-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.se-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.se-filter { border-radius: 999px; padding: 5px 12px; font-size: 13px; background: var(--surface-2); color: var(--text-strong); border: 1px solid var(--line); }
.se-filter[aria-selected="true"] { background: var(--cta); color: #fff; border-color: var(--cta); }
.se-search input { min-width: 260px; }
.se-upload { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 8px 12px; }
.se-upload-body { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.se-library-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.se-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); }
.se-card.is-new { border-color: var(--cta); box-shadow: 0 0 0 2px var(--cta); }
.se-card-thumb { aspect-ratio: 1 / 1; background: var(--surface-2); }
.se-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.se-card-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.se-card-body p { margin: 0; }
.se-card-title { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.se-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.se-library-more { display: flex; justify-content: center; }
.se-direction { font-size: 13px; }
@media (max-width: 1100px) {
  .se-visual .se-layout { grid-template-columns: 1fr; }
  .se-stage { position: static; }
  .se-search input { min-width: 0; width: 100%; }
}
/* The global `button:hover` / `button:active` paint a surface and nudge the
   button down; an element of the map must stay a transparent frame over the
   slide, or hovering it hides the very thing being edited. */
.se-overlay .se-el, .se-overlay .se-el:hover, .se-overlay .se-el:active, .se-overlay .se-el:disabled {
  background: transparent; border: 0; box-shadow: none; transform: none; filter: none; opacity: 1; }
/* `label` is a column everywhere else; a checkbox and its sentence are a row. */
.slide-editor label.se-check { flex-direction: row; align-items: center; gap: 8px; color: var(--text-strong); font-size: 13px; }
.slide-editor .se-color .se-check { justify-content: flex-start; text-align: left; }
.se-swatch-btn:hover { background: var(--paper); }
.se-swatch-btn:disabled { filter: none; opacity: 0.35; }
.se-card-thumb { overflow: hidden; min-height: 0; }
.se-canvas img[data-preview-img] { max-height: calc(100vh - 150px); }
.se-el-image:hover:not(.is-selected) .se-el-label { display: none; }

/* ---------- autosave (MELLINA autosave) ----------------------------------
   One discreet state in the bar, in a box of fixed width so changing state
   never moves the buttons beside it. */
.se-autosave { display: inline-flex; align-items: center; gap: 7px; width: 13.5em; justify-content: flex-end;
  font-size: 13px; font-weight: 600; color: var(--muted, #5b6472); white-space: nowrap; overflow: hidden; }
.se-autosave-dot { width: 8px; height: 8px; border-radius: 50%; background: #2f9e62; flex: 0 0 auto; }
.se-autosave[data-state="dirty"] .se-autosave-dot { background: #c08a00; }
.se-autosave[data-state="saving"] .se-autosave-dot { background: #2b6cd6; animation: se-pulse 900ms ease-in-out infinite; }
.se-autosave[data-state="error"], .se-autosave[data-state="conflict"] { color: var(--danger, #b42318); }
.se-autosave[data-state="error"] .se-autosave-dot, .se-autosave[data-state="conflict"] .se-autosave-dot { background: var(--danger, #b42318); }
.se-autosave[data-state="locked"] .se-autosave-dot { background: #8a8f98; }
@keyframes se-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .se-autosave[data-state="saving"] .se-autosave-dot { animation: none; } }
.se-save-failed, .se-suggestion { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.se-save-failed[hidden], .se-suggestion[hidden] { display: none; }
.se-save-failed p, .se-suggestion p { margin: 0; }
/* The local text: absolutely placed in the slide's own coordinates. */
.se-optimistic .se-text-ghost { z-index: 2; font-family: 'Mellina Slide Inter', Inter, 'Noto Sans', sans-serif;
  white-space: pre-wrap; overflow-wrap: break-word; line-height: normal; font-kerning: normal; }

/* ---------- Central de Conexões (MELLINA-SOCIAL-001) --------------------- */
.net-cards {
  display: grid; gap: 16px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.net-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.net-card[data-state="prepared"], .net-card[data-state="not_configured"] { background: var(--surface-2); }
.net-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.net-card-head h2 { margin: 0; font-size: 16px; font-weight: 700; font-family: var(--font-ui); flex: 1 1 auto; }
.net-logo { width: 28px; height: 28px; flex: none; display: inline-flex; }
.net-logo svg { width: 28px; height: 28px; }
.channel-name .net-logo { width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; }
.channel-name .net-logo svg { width: 20px; height: 20px; }
.net-desc { margin: 0; color: var(--muted); font-size: 13px; }
.net-identity { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.net-guide { margin: 0; font-size: 13px; line-height: 1.5; }
.net-checked, .net-dest-summary { margin: 0; font-size: 12px; }
.net-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.net-actions form.inline { margin: 0; }
.net-actions button:focus-visible, .net-actions a.button:focus-visible,
.dest-row button:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 2px; }
.dest-row.is-blocked .channel-name { color: var(--muted); }
.dest-row .check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; margin-right: 8px; }
.provider-admin .strategy { margin-bottom: 12px; }
@media (max-width: 640px) {
  .net-cards { grid-template-columns: 1fr; }
  .net-actions { flex-direction: column; align-items: stretch; }
  .net-actions form.inline, .net-actions button, .net-actions a.button { width: 100%; }
}

/* ---------- Isolamento por espaço e identidade (SOCIAL-001-CORREÇÃO-01) --- */
summary.button {
  display: inline-block; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-strong); cursor: pointer; list-style: none;
  color: var(--muted); background: transparent;
}
summary.button::-webkit-details-marker { display: none; }
summary.button:hover { color: var(--text-strong); border-color: var(--muted); }
summary.button:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 2px; }
.space-conn { border-top: 1px solid var(--line); padding: 14px 0; }
.space-conn:first-of-type { border-top: 0; }
.space-conn-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.space-conn-head .net-logo, .space-conn-head .net-logo svg { width: 22px; height: 22px; }
.space-conn-facts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 18px; margin: 10px 0 4px; font-size: 13px;
}
.space-conn-facts dt { color: var(--muted); font-size: 11.5px; }
.space-conn-facts dd { margin: 0; overflow-wrap: anywhere; }
.elsewhere-list { margin: 0 0 8px; padding-left: 18px; }
.cred-rows { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 14px; }
.cred-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface-2); min-width: 0; }
.cred-row p { margin: 6px 0; }
.cred-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cred-row details.replace form { margin-top: 10px; }
.assoc-confirm[open] { flex-basis: 100%; }
.assoc-confirm form { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.dest-row .actions { flex-wrap: wrap; }
@media (max-width: 640px) {
  .space-conn-facts { grid-template-columns: 1fr; }
  .cred-rows { grid-template-columns: 1fr; }
}