/* ───────────────── X-AVATAR — design tokens (LIGHT) ───────────────── */
:root {
  --bg-base: oklch(0.985 0.003 90);
  --bg-elev: oklch(0.965 0.004 90);
  --bg-elev-2: oklch(0.93 0.005 90);
  --bg-elev-3: oklch(0.88 0.006 90);
  --text: oklch(0.18 0.018 275);
  --text-mute: oklch(0.42 0.018 275);
  --text-dim: oklch(0.60 0.015 275);
  --border: oklch(0.86 0.006 90);
  --border-soft: oklch(0.92 0.004 90);
  --accent: oklch(0.68 0.26 0);
  --accent-strong: oklch(0.58 0.28 0);
  --accent-soft: oklch(0.78 0.16 0);
  --accent-bg: oklch(0.96 0.04 0);
  --twin: oklch(0.66 0.17 40);
  --twin-bg: oklch(0.96 0.06 40);
  --success: oklch(0.58 0.18 155);
  --danger: oklch(0.58 0.20 25);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-lg: 0 30px 80px -20px oklch(0.05 0.03 285 / 0.55), 0 12px 28px -12px oklch(0.05 0.03 285 / 0.6);
  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --cover-grad-1: oklch(0.92 0.05 285);
  --cover-grad-2: oklch(0.95 0.04 60);
  --cover-grad-3: oklch(0.97 0.02 80);
  --shadow-soft: 0 1px 0 oklch(0.96 0.004 90), 0 10px 30px -10px oklch(0.45 0.05 275 / 0.12);
}

/* ───── Dark mode — tokens (ative com .theme-dark no container) ───── */
.theme-dark {
  --bg-base: oklch(0.155 0.022 275);
  --bg-elev: oklch(0.205 0.023 275);
  --bg-elev-2: oklch(0.255 0.025 275);
  --bg-elev-3: oklch(0.305 0.028 278);
  --text: oklch(0.96 0.005 280);
  --text-mute: oklch(0.68 0.015 280);
  --text-dim: oklch(0.50 0.018 280);
  --border: oklch(0.30 0.02 278);
  --border-soft: oklch(0.245 0.018 278);
  --accent: oklch(0.78 0.22 0);
  --accent-strong: oklch(0.82 0.24 0);
  --accent-bg: oklch(0.30 0.12 0);
  --twin: oklch(0.74 0.17 40);
  --twin-bg: oklch(0.30 0.10 40);
  --success: oklch(0.76 0.17 155);
  --danger: oklch(0.74 0.18 25);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { html:not(.theme-light) { --bg-base: oklch(0.155 0.022 275); --bg-elev: oklch(0.205 0.023 275); --bg-elev-2: oklch(0.255 0.025 275); --bg-elev-3: oklch(0.305 0.028 278); --text: oklch(0.96 0.005 280); --text-mute: oklch(0.68 0.015 280); --text-dim: oklch(0.50 0.018 280); --border: oklch(0.30 0.02 278); --border-soft: oklch(0.245 0.018 278); --accent: oklch(0.78 0.22 0); --accent-strong: oklch(0.82 0.24 0); --accent-bg: oklch(0.30 0.12 0); --twin: oklch(0.74 0.17 40); --twin-bg: oklch(0.30 0.10 40); --success: oklch(0.76 0.17 155); --danger: oklch(0.74 0.18 25); color-scheme: dark; } }


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}

.mono { font-family: var(--font-mono); font-feature-settings: "ss01", "zero"; letter-spacing: -0.01em; }

/* ───────────────── Profile page shell ───────────────── */
.profile-page {
  background: var(--bg-base);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  width: 100%;
  min-height: 100%;
  isolation: isolate;
  display: flex; flex-direction: column;
  border: 1px solid var(--border-soft);
}

.profile-page.is-twin .cover-grad {
  filter: saturate(0.95);
}

/* ───────────────── URL bar ───────────────── */
.urlbar {
  height: 38px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  background: oklch(0.96 0.004 90);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.urlbar-dots { display: flex; gap: 6px; }
.urlbar-dots span {
  width: 11px; height: 11px; border-radius: 50%;
  background: oklch(0.85 0.004 90);
}
.urlbar-dots span:nth-child(1) { background: oklch(0.55 0.16 25); }
.urlbar-dots span:nth-child(2) { background: oklch(0.7 0.15 80); }
.urlbar-dots span:nth-child(3) { background: oklch(0.65 0.15 145); }
.urlbar-url {
  flex: 1;
  display: flex; align-items: center; gap: 4px;
  font-size: 12px;
  background: oklch(1 0 0);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--text-mute);
  justify-content: center;
}
.urlbar-lock { display: inline-flex; opacity: 0.6; margin-right: 4px; }
.urlbar-domain { color: var(--text); }
.urlbar-path { color: var(--text-dim); }
.urlbar-slug { color: var(--accent); }
.urlbar-spacer { width: 51px; }

/* ───────────────── Cover ───────────────── */
.cover {
  position: relative;
  height: 360px;
  overflow: hidden;
}
.cover-grad {
  position: absolute; inset: 0;
}
.cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Com imagem de capa, dispensa o mesh/noise (que escureceriam a foto) */
.cover:has(.cover-img) .cover-mesh,
.cover:has(.cover-img) .cover-noise { display: none; }
/* Bottom glow — fades cover into page bg so the agent name has guaranteed
   contrast regardless of cover color. Light theme: white-ish glow.
   Dark theme: the same token flips to dark via --bg-base. */
.cover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 110px;
  background: linear-gradient(180deg, transparent 0%, var(--bg-base) 100%);
  pointer-events: none;
  z-index: 1;
}
.cover-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 400px at 80% -20%, oklch(0.7 0.18 285 / 0.25), transparent 60%),
    radial-gradient(700px 300px at 10% 110%, oklch(0.6 0.15 320 / 0.18), transparent 60%);
  mix-blend-mode: screen;
}
.cover-noise {
  position: absolute; inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' /><feColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 0 0.2 0 0 0 0.05 0'/></filter><rect width='80' height='80' filter='url(%23n)'/></svg>");
}
.cover-mesh { mix-blend-mode: multiply; opacity: 0.6; }
.cover-locked-pill {
  position: absolute; top: 18px; left: 18px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 8px;
  background: oklch(1 0 0 / 0.85);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-mute);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cover-version {
  position: absolute; top: 18px; right: 18px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: oklch(1 0 0 / 0.75);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  color: var(--text);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.cover-version-sep { color: var(--text-dim); }
.cover-version-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px oklch(0.78 0.16 155 / 0.2);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }

/* ───────────────── Profile body container ───────────────── */
.profile-body {
  padding: 0 56px 56px;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}

/* Two-column split for body content (main + sticky aside).
   Header and Posts sit OUTSIDE this and span full width. */
.profile-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
  margin-top: 0;
}
.profile-main {
  min-width: 0;
}
.profile-aside {
  position: sticky;
  top: 60px; /* below the site header */
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.profile-main .section:first-child { margin-top: 48px; }
.profile-aside { margin-top: 48px; }

/* ───────────────── Header ───────────────── */
.header {
  display: flex;
  gap: 24px;
  margin-top: -76px;
  position: relative;
  align-items: flex-start;
  z-index: 2;
}
.header-id {
  padding-bottom: 0;
  margin-top: 24px;
  flex: 1;
  min-width: 0;
}
.header-tagline {
  margin: 24px 0 0;
  font-size: 17px;
  color: var(--text-mute);
  line-height: 1.5;
  max-width: 640px;
  text-wrap: pretty;
}
.header-face-wrap {
  position: relative;
}
.header-face {
  width: 144px; height: 144px;
  border-radius: 50%;
  border: 4px solid var(--bg-base);
  display: flex; align-items: center; justify-content: center;
  font-size: 52px;
  font-weight: 600;
  color: oklch(1 0 0);
  position: relative;
  letter-spacing: 0.02em;
  background-image: linear-gradient(135deg, var(--face-hi, oklch(1 0 0 / 0.2)) 0%, transparent 60%);
}
.header-face::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(1 0 0 / 0.15), transparent 50%, oklch(0 0 0 / 0.25));
  pointer-events: none;
}
.header-face span:not(.header-face-status) {
  position: relative; z-index: 1;
  text-shadow: 0 1px 2px oklch(0 0 0 / 0.2);
}
.header-face-status {
  position: absolute;
  bottom: 8px; right: 8px;
  width: 16px; height: 16px;
  background: var(--success);
  border-radius: 50%;
  border: 3px solid var(--bg-base);
  box-shadow: 0 0 0 1px oklch(0.55 0.15 155 / 0.2);
  z-index: 4;
}

/* Digital Twin frame on the large header face (scaled up version of the
   discovery list ring + badge). */
.header-face.is-twin {
  box-shadow:
    0 0 0 4px var(--bg-base),
    0 0 0 7px var(--twin);
}
.header-face.is-twin::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px dashed oklch(0.70 0.17 40 / 0.8);
  pointer-events: none;
  animation: twinRotate 18s linear infinite;
  z-index: 3;
}
.header-face-twin-badge {
  position: absolute;
  bottom: -4px; right: -4px;
  width: 40px; height: 40px;
  background: var(--twin);
  color: oklch(1 0 0);
  border: 3px solid var(--bg-base);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 3;
  box-shadow: 0 6px 18px -3px oklch(0.55 0.18 40 / 0.5);
}
.header-face-twin-badge svg { width: 18px; height: 18px; }
.header-id {
  padding-bottom: 8px;
  flex: 1;
  min-width: 0;
}
.header-name-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.header-name {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1;
  text-shadow:
    0 1px 1px oklch(0 0 0 / 0.10),
    0 2px 14px oklch(0 0 0 / 0.22);
}
.header-tag-twin, .header-tag-agent {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.header-tag-twin {
  background: var(--twin-bg);
  color: var(--twin);
  border: 1px solid oklch(0.55 0.16 40 / 0.5);
}
.header-tag-agent {
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid oklch(0.7 0.20 0 / 0.4);
}
.header-ping {
  margin-top: 10px;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.01em;
}
/* Tagline styles defined above at line ~202; sibling of .header now */

/* Header actions row */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.header-actions-right {
  margin-left: auto;
}

/* ───────────────── CTA — Contratar via WhatsApp ───────────────── */
.cta-wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 10px;
  position: relative;
}
.cta-primary {
  display: inline-flex; align-items: center;
  gap: 14px;
  padding: 8px 16px 8px 8px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid oklch(0.62 0.18 158);
  background:
    linear-gradient(180deg, oklch(0.68 0.18 158) 0%, oklch(0.55 0.20 155) 100%);
  color: oklch(1 0 0);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.22),
    inset 0 -1px 0 oklch(0.40 0.18 155 / 0.4),
    0 10px 28px -8px oklch(0.55 0.20 155 / 0.5),
    0 2px 0 oklch(0.42 0.18 155);
  transition: transform 0.12s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.cta-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, oklch(1 0 0 / 0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.24),
    inset 0 -1px 0 oklch(0.40 0.18 155 / 0.4),
    0 16px 36px -8px oklch(0.55 0.20 155 / 0.55),
    0 2px 0 oklch(0.42 0.18 155);
}
.cta-primary:hover::before { transform: translateX(100%); }
.cta-primary:active { transform: translateY(0); }
.cta-badge {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  background: oklch(1 0 0 / 0.18);
  border: 1px solid oklch(1 0 0 / 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  color: oklch(1 0 0);
  position: relative;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.2);
}
.cta-badge-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 1.5px solid oklch(1 0 0 / 0.6);
  animation: ctaPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes ctaPulse {
  0% { opacity: 0.8; transform: scale(0.94); }
  70% { opacity: 0; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.18); }
}
.cta-text {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 2px;
  padding-right: 4px;
  min-width: 0;
}
.cta-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: oklch(1 0 0);
}
.cta-sub {
  font-size: 12.5px;
  color: oklch(1 0 0 / 0.82);
  font-weight: 400;
  letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  line-height: 1.2;
}
.cta-online {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.18);
  color: oklch(1 0 0 / 0.95);
  border: 1px solid oklch(1 0 0 / 0.18);
  white-space: nowrap;
}
.cta-online-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: oklch(0.92 0.18 145);
  box-shadow: 0 0 0 2px oklch(0.92 0.18 145 / 0.25);
  animation: pulse 1.6s ease-in-out infinite;
}
.cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 48px;
  background: oklch(1 0 0 / 0.16);
  border-radius: 10px;
  margin-left: 2px;
  flex-shrink: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}
.cta-primary:hover .cta-arrow {
  background: oklch(1 0 0 / 0.22);
  transform: translateX(2px);
}

/* Price tag adjacent to CTA */
.cta-price-tag {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 0;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: var(--bg-base);
  color: var(--text);
  font-size: 14px;
  line-height: 1.1;
}
.cta-price-num {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.cta-price-unit {
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cta-price-per { color: var(--text-dim); }
.cta-price-tag-free {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 16px;
  border-style: solid;
}
.cta-price-free-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px oklch(0.58 0.18 155 / 0.18);
}

/* Intro video button */
.intro-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 14px 0 6px;
  height: 44px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.intro-btn:hover { background: var(--bg-elev-2); }
.intro-btn-play {
  width: 32px; height: 32px;
  background: oklch(1 0 0);
  color: oklch(0 0 0);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  margin-left: -2px;
}
.intro-btn-play svg { margin-left: 1px; }
.intro-btn-dur { color: var(--text-mute); font-size: 11px; }

/* ───────────────── Social bar ───────────────── */
.social-bar { display: flex; gap: 6px; }
.social-link {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mute);
  transition: color 0.15s, background 0.15s, transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
}
.social-link svg { width: 18px; height: 18px; }
.social-link:hover {
  transform: translateY(-2px);
  color: oklch(1 0 0);
}
.social-link:hover.social-instagram { background: linear-gradient(135deg, #feda75, #fa7e1e 25%, #d62976 60%, #962fbf 85%, #4f5bd5); border-color: transparent; box-shadow: 0 8px 20px -8px oklch(0.55 0.22 350 / 0.5); }
.social-link:hover.social-tiktok    { background: #010101; border-color: #010101; box-shadow: 0 8px 20px -8px #ff0050aa; }
.social-link:hover.social-youtube   { background: #ff0000; border-color: #ff0000; box-shadow: 0 8px 20px -8px #ff000088; }
.social-link:hover.social-linkedin  { background: #0a66c2; border-color: #0a66c2; box-shadow: 0 8px 20px -8px #0a66c288; }
.social-link:hover.social-x         { background: #000000; border-color: #000000; box-shadow: 0 8px 20px -8px #00000088; }
.social-link:hover.social-threads   { background: #000000; border-color: #000000; box-shadow: 0 8px 20px -8px #00000088; }
.social-link:hover.social-facebook  { background: #1877f2; border-color: #1877f2; box-shadow: 0 8px 20px -8px #1877f288; }
.social-link:hover.social-telegram  { background: #229ed9; border-color: #229ed9; box-shadow: 0 8px 20px -8px #229ed988; }
.social-link:hover.social-whatsapp  { background: #25d366; border-color: #25d366; box-shadow: 0 8px 20px -8px #25d36688; }
.social-link:hover.social-github    { background: #181717; border-color: #181717; box-shadow: 0 8px 20px -8px #18171788; }
.social-link:hover.social-website   { background: var(--accent); border-color: var(--accent); box-shadow: 0 8px 20px -8px oklch(0.68 0.26 0 / 0.5); }

/* ───────────────── Sections ───────────────── */
.section {
  margin-top: 48px;
  position: relative;
}
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
}
.section-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
  font-family: var(--font-mono);
}
.section-action { color: var(--text-mute); font-size: 13px; }
.section-count {
  font-size: 11px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--text-mute);
}
.section.is-locked .section-body {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  min-height: 90px;
}
.locked-overlay {
  position: absolute; inset: 32px 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, oklch(0.985 0.003 90 / 0.55), oklch(0.985 0.003 90 / 0.9));
  backdrop-filter: blur(3px);
  border-radius: var(--radius);
  text-align: center;
  padding: 24px;
}
.locked-lock {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
  margin-bottom: 6px;
}
.locked-text {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}
.locked-sub {
  font-size: 13px;
  color: var(--text-mute);
}

/* ───────────────── Article post ───────────────── */
.article-post {
  margin-top: 48px;
}
.article-head {
  margin-bottom: 28px;
}
.article-kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.article-headline {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 22px;
  text-wrap: balance;
}
.article-byline {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
}
.article-byline-face {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: oklch(1 0 0);
  text-shadow: 0 1px 1px oklch(0 0 0 / 0.15);
}
.article-byline-author {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  display: block;
}
.article-byline-handle {
  font-size: 11px;
  color: var(--accent);
  line-height: 1.2;
}
.article-body {
  margin-top: 28px;
}
.article-body p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 18px;
  color: var(--text);
  max-width: 64ch;
  text-wrap: pretty;
}
.article-body p:first-of-type::first-letter {
  font-size: 60px;
  float: left;
  line-height: 0.92;
  font-weight: 600;
  margin: 4px 10px -2px 0;
  color: var(--text);
  letter-spacing: -0.02em;
}

.mobile-frame .article-headline { font-size: 28px; }
.mobile-frame .article-body p { font-size: 16px; }
.mobile-frame .article-body p:first-of-type::first-letter { font-size: 44px; }

/* ───────────────── Share row ───────────────── */
.share-row {
  display: flex; align-items: center;
  gap: 10px;
  margin: 24px 0 28px;
  padding: 10px 14px;
  background: var(--bg-base);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  flex-wrap: wrap;
}
.article-body + .share-row {
  margin-top: 32px;
  border: none;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}
.share-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.share-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
}
.share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.share-btn:hover {
  background: var(--text);
  color: var(--bg-base);
  border-color: var(--text);
}
.share-btn.is-copied {
  background: oklch(0.96 0.04 155);
  color: oklch(0.35 0.15 155);
  border-color: oklch(0.78 0.13 155);
}
.share-btn-icon { display: inline-flex; }

.share-icons {
  display: flex; align-items: center; gap: 4px;
}
.share-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-base);
  color: var(--text-mute);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}
.share-icon svg { width: 16px; height: 16px; }
.share-icon:hover { color: oklch(1 0 0); transform: translateY(-1px); }
.share-icon.share-whatsapp:hover { background: #25d366; border-color: #25d366; }
.share-icon.share-x:hover { background: #000000; border-color: #000000; }
.share-icon.share-linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.share-icon.share-telegram:hover { background: #229ed9; border-color: #229ed9; }
.share-icon.share-facebook:hover { background: #1877f2; border-color: #1877f2; }
.share-more {
  margin-left: auto;
  color: var(--text-mute);
}
.share-more:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: var(--border);
}
.share-more.is-open {
  background: var(--text);
  color: var(--bg-base);
  border-color: var(--text);
}

/* ───── Share "more" popup (fallback p/ browsers sem Web Share API) ───── */
.share-more-wrap {
  position: relative;
  margin-left: auto;
  display: inline-flex;
}
.share-more-wrap .share-more { margin-left: 0; }

.share-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 240px;
  padding: 8px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow:
    0 24px 48px -12px oklch(0.2 0.02 275 / 0.18),
    0 4px 12px -4px oklch(0.2 0.02 275 / 0.08);
  animation: shareMoreIn 0.16s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}
@keyframes shareMoreIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.share-more-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 10px 8px;
}

.share-more-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.share-more-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: left;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.share-more-item:hover,
.share-more-item:focus-visible {
  background: var(--bg-elev);
  outline: none;
}

.share-more-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  flex-shrink: 0;
  transition: all 0.12s ease;
}
.share-more-item:hover .share-more-icon {
  border-color: transparent;
  color: oklch(1 0 0);
}
.share-more-telegram:hover .share-more-icon { background: #229ed9; }
.share-more-threads:hover  .share-more-icon { background: #000; }
.share-more-reddit:hover   .share-more-icon { background: #ff4500; }
.share-more-email:hover    .share-more-icon { background: var(--text); }

.share-more-label { flex: 1; }
.share-more-arrow {
  color: var(--text-dim);
  display: inline-flex;
  transition: transform 0.12s ease;
}
.share-more-item:hover .share-more-arrow { transform: translate(2px, -2px); color: var(--text); }

.share-more-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 6px 4px;
}

.share-more-quote {
  font-size: 13px;
}
.share-more-quote.is-copied {
  background: oklch(0.96 0.04 155);
  color: oklch(0.30 0.15 155);
}
.share-more-quote.is-copied .share-more-icon {
  background: oklch(0.62 0.15 155);
  color: oklch(1 0 0);
  border-color: transparent;
}

.mobile-frame .share-row {
  gap: 8px;
  padding: 10px 12px;
}
.mobile-frame .share-label { display: none; }
.mobile-frame .share-divider { display: none; }
.mobile-frame .share-btn-label { display: none; }
.mobile-frame .share-btn { padding: 0; width: 32px; justify-content: center; }
.mobile-frame .share-more { margin-left: auto; }

/* ───────────────── Bio ───────────────── */
.bio p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 14px;
  text-wrap: pretty;
  max-width: 780px;
}
.bio p:last-child { margin-bottom: 0; }

/* ───────────────── Voice player ───────────────── */
.voice-player {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 18px 22px 18px 18px;
}
.voice-play {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--text);
  color: var(--bg-base);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
}
.voice-play:hover { transform: scale(1.05); }
.voice-play svg { margin-left: 1px; }
.voice-body { flex: 1; min-width: 0; }
.voice-name-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.voice-name { font-size: 14px; color: var(--text); font-weight: 500; }
.voice-time { font-size: 12px; color: var(--text-mute); }
.voice-time-sep { color: var(--text-dim); margin: 0 4px; }
.voice-wave {
  position: relative;
  height: 44px;
  display: flex; align-items: center; gap: 2px;
  cursor: pointer;
}
.voice-bar {
  flex: 1;
  background: var(--text-dim);
  border-radius: 999px;
  transform-origin: center;
  transition: background 0.15s;
  min-width: 2px;
}
.voice-bar.is-played { background: var(--bar-accent, var(--accent)); }
.voice-bar.is-cursor {
  background: var(--text);
  animation: wave-bounce 0.6s ease-in-out infinite alternate;
}
@keyframes wave-bounce { from { transform: scaleY(0.9); } to { transform: scaleY(1.15); } }
.voice-cursor {
  position: absolute; top: -2px; bottom: -2px;
  width: 2px;
  background: var(--text);
  border-radius: 1px;
  pointer-events: none;
  transition: left 0.05s linear;
  box-shadow: 0 0 0 4px oklch(0.97 0.005 280 / 0.1);
}

/* ───────────────── Skill chips ───────────────── */
.skills {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.skill-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.skill-chip:hover {
  background: var(--bg-elev-2);
  border-color: var(--border);
}
.skill-chip.is-blurred { opacity: 0.5; }
.skill-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.skills-locked-preview { display: flex; gap: 8px; }

/* ───────────────── Post tabs ───────────────── */
.post-tabs {
  display: flex; gap: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  padding: 4px;
  border-radius: 10px;
}
.post-tab {
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-family: var(--font-display);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: 0.01em;
}
.post-tab.is-active {
  background: var(--bg-elev-3);
  color: var(--text);
}
.post-tab .mono { color: var(--text-dim); font-size: 10px; }

/* ───────────────── Post grid + tiles ───────────────── */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.post-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border-soft);
  background: var(--bg-elev);
  padding: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -10px oklch(0.5 0.22 0 / 0.3);
}
.post-tile:hover .post-tile-hover { opacity: 1; }
/* Masonry da galeria de posts do X-Avatar — paridade com a galeria do membro */
.post-masonry { display: flex; align-items: flex-start; gap: 14px; }
.post-mcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.post-mcard { aspect-ratio: auto; width: 100%; display: block; }
.post-mcard-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.post-mcard:hover .post-mcard-img { transform: scale(1.04); }
.post-mcard-play { position: absolute; top: 10px; left: 10px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: oklch(0.12 0 0 / 0.5); color: #fff; backdrop-filter: blur(3px); }
.post-mbadge { position: absolute; bottom: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: #fff; background: oklch(0.12 0 0 / 0.5); backdrop-filter: blur(3px); }
.post-mdot { width: 6px; height: 6px; border-radius: 50%; }
.post-mbadge.is-photo .post-mdot { background: oklch(0.6 0.2 255); }
.post-mbadge.is-clip .post-mdot { background: oklch(0.62 0.22 18); }
.mobile-frame .post-masonry { gap: 9px; }
.mobile-frame .post-mcol { gap: 9px; }
.post-media {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 14px;
}
.post-media-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.post-media-caption {
  position: relative;
  font-size: 10px;
  color: oklch(1 0 0 / 0.7);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.post-tile-type {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 8px;
  background: oklch(0 0 0 / 0.5);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  color: oklch(1 0 0 / 0.9);
  font-size: 10px;
}
.post-tile-slides { font-size: 10px; }
.post-tile-hover {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, oklch(0 0 0 / 0.7));
  opacity: 0;
  transition: opacity 0.2s;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px;
  gap: 4px;
}
.post-tile-metric {
  display: inline-flex; align-items: center; gap: 6px;
  color: oklch(1 0 0);
  font-size: 13px;
}
.post-tile-metric-lead { color: var(--success); }
.post-tile-leadlabel { font-size: 11px; opacity: 0.75; }

/* ───────────────── Twin banner ───────────────── */
.twin-banner {
  display: flex; align-items: flex-start; gap: 16px;
  margin: 0;
  padding: 16px 22px;
  background: linear-gradient(180deg, oklch(0.96 0.07 40) 0%, oklch(0.94 0.06 38) 100%);
  border-bottom: 1px solid oklch(0.78 0.13 38);
  color: oklch(0.35 0.14 38);
  position: relative;
}
.twin-banner::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.72 0.17 40 / 0.6), transparent);
}
.twin-banner-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: oklch(0.82 0.13 40);
  display: inline-flex; align-items: center; justify-content: center;
  color: oklch(0.30 0.15 38);
  flex-shrink: 0;
}
.twin-banner-body { flex: 1; }
.twin-banner-title {
  font-size: 14px;
  font-weight: 500;
  color: oklch(0.26 0.15 38);
  margin-bottom: 4px;
  line-height: 1.45;
}
.twin-banner-sub {
  font-size: 13px;
  color: oklch(0.42 0.12 38);
  line-height: 1.5;
}
.twin-banner-learn {
  background: oklch(1 0 0 / 0.6);
  border: 1px solid oklch(0.72 0.13 40);
  color: oklch(0.28 0.15 38);
  font-family: var(--font-display);
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Mobile compact: collapse to a single-line banner.
   Shows only the title (truncated) + a small chevron that expands the full text. */
.mobile-frame .twin-banner {
  padding: 10px 14px;
  gap: 10px;
  align-items: center;
}
.mobile-frame .twin-banner-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
}
.mobile-frame .twin-banner-icon svg { width: 14px; height: 14px; }
.mobile-frame .twin-banner-title {
  font-size: 12.5px;
  line-height: 1.3;
  margin: 0;
  font-weight: 500;
}
.mobile-frame .twin-banner-sub { display: none; }
.twin-banner-title-short { display: none; }
.mobile-frame .twin-banner-title-full { display: none; }
.mobile-frame .twin-banner-title-short { display: inline; }
.mobile-frame .twin-banner-learn {
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 6px;
}

/* ───────────────── Footer ───────────────── */
.footer {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-mark {
  display: inline-flex; align-items: center;
  color: var(--text);
}
.footer-mark svg { height: 28px; width: auto; }
.footer-meta {
  font-size: 12px;
  color: var(--text-dim);
  display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.footer-meta a { color: var(--text-mute); text-decoration: none; }
.footer-meta a:hover { color: var(--text); }
.footer-dot { opacity: 0.4; }

/* ───────────────── Skeleton ───────────────── */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
.skel {
  background: linear-gradient(90deg, var(--bg-elev) 0%, var(--bg-elev-2) 50%, var(--bg-elev) 100%);
  background-size: 1000px 100%;
  animation: shimmer 1.8s linear infinite;
  border-radius: 8px;
}
.skel-cover { height: 260px; border-radius: 0; }
.skel-header {
  margin-top: -76px; padding: 0 56px;
}
.skel-face {
  width: 144px; height: 144px;
  border-radius: 50%;
  border: 4px solid var(--bg-base);
}
.skel-line { border-radius: 6px; }
.skel-row { display: flex; gap: 12px; }
.skel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.skel-grid {
  margin-top: 16px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.skel-tile { aspect-ratio: 4 / 5; border-radius: 14px; }

.skeleton .section { padding: 0 56px; margin-top: 32px; }

/* ───────────────── Full-screen post viewer ───────────────── */
.viewer {
  position: fixed; inset: 0;
  background: oklch(0.05 0.015 280 / 0.92);
  backdrop-filter: blur(20px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  animation: viewer-in 0.2s ease;
}
@keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }
.viewer-close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: oklch(0.18 0.02 280 / 0.6);
  border: 1px solid var(--border-soft);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(12px);
}
.viewer-stage {
  display: flex; align-items: center;
  gap: 18px;
  height: 100%;
  padding: 24px;
}
.viewer-nav {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: oklch(0.18 0.02 280 / 0.5);
  border: 1px solid var(--border-soft);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  backdrop-filter: blur(12px);
}
.viewer-nav:disabled { opacity: 0.3; cursor: default; }
.viewer-frame {
  position: relative;
  width: min(440px, 92vw);
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 100px);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-soft);
}
.viewer-frame .post-media-caption { display: none; }

.viewer-slide-pills {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; gap: 4px;
  z-index: 3;
}
.viewer-slide-pill {
  flex: 1;
  height: 3px;
  background: oklch(1 0 0 / 0.3);
  border-radius: 2px;
  transition: background 0.2s;
}
.viewer-slide-pill.is-active { background: oklch(1 0 0); }
.viewer-slide-prev, .viewer-slide-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: oklch(0 0 0 / 0.4);
  border: none;
  color: oklch(1 0 0);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  z-index: 3;
}
.viewer-slide-prev { left: 12px; }
.viewer-slide-next { right: 12px; }
.viewer-slide-prev:disabled, .viewer-slide-next:disabled { opacity: 0.35; cursor: default; }
.viewer-slide-counter {
  position: absolute;
  top: 28px; left: 50%; transform: translateX(-50%);
  font-size: 11px;
  color: oklch(1 0 0 / 0.8);
  background: oklch(0 0 0 / 0.4);
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 3;
}

.viewer-video-chrome {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.viewer-video-play {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.18);
  border: 1px solid oklch(1 0 0 / 0.3);
  color: oklch(1 0 0);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.viewer-video-play svg { margin-left: 3px; }
.viewer-video-progress {
  position: absolute; bottom: 95px; left: 14px; right: 14px;
  height: 3px;
  background: oklch(1 0 0 / 0.2);
  border-radius: 2px;
  overflow: hidden;
}
.viewer-video-progress span {
  display: block; height: 100%;
  background: oklch(1 0 0);
  border-radius: 2px;
}

.viewer-bottom {
  position: absolute; bottom: 0; left: 0; right: 56px;
  padding: 24px 18px 18px;
  background: linear-gradient(180deg, transparent, oklch(0 0 0 / 0.6) 30%, oklch(0 0 0 / 0.85));
  display: flex; flex-direction: column; gap: 12px;
  z-index: 2;
}
.viewer-bottom-left {
  display: flex; gap: 10px; align-items: flex-start;
}
.viewer-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: oklch(1 0 0);
  flex-shrink: 0;
  border: 1.5px solid oklch(1 0 0 / 0.3);
}
.viewer-handle { display: flex; gap: 8px; align-items: baseline; }
.viewer-name { font-size: 14px; font-weight: 500; color: oklch(1 0 0); }
.viewer-ping { font-size: 11px; color: oklch(1 0 0 / 0.6); }
.viewer-caption {
  font-size: 13px;
  color: oklch(1 0 0 / 0.92);
  line-height: 1.4;
  margin-top: 4px;
}
.viewer-metrics {
  display: flex; gap: 14px;
  padding-top: 6px;
  border-top: 1px solid oklch(1 0 0 / 0.1);
}
.viewer-metric {
  display: inline-flex; align-items: center; gap: 6px;
  color: oklch(1 0 0 / 0.85);
  font-size: 12px;
}
.viewer-metric-lead { color: var(--success); }
.viewer-metric-lead span:last-child { color: oklch(1 0 0 / 0.55); font-size: 11px; }

.viewer-rail {
  position: absolute;
  right: 8px; bottom: 130px;
  display: flex; flex-direction: column; gap: 16px;
  z-index: 3;
}
.viewer-rail-btn {
  background: oklch(0 0 0 / 0.35);
  border: none;
  color: oklch(1 0 0);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px;
  cursor: pointer;
  border-radius: 999px;
  padding: 8px 6px;
  min-width: 40px;
  backdrop-filter: blur(8px);
}
.viewer-rail-btn .mono { font-size: 10px; color: oklch(1 0 0 / 0.85); }
.viewer-rail-mute { background: transparent; }

.viewer-postdots {
  position: absolute;
  right: 24px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 6px;
}
.viewer-postdot {
  width: 4px; height: 4px;
  background: oklch(1 0 0 / 0.3);
  border-radius: 50%;
  transition: all 0.2s;
}
.viewer-postdot.is-active {
  background: oklch(1 0 0);
  height: 16px;
  border-radius: 4px;
}

/* ───────────────── Mobile variant ───────────────── */
.mobile-frame .profile-body {
  padding: 0 18px 0;
}
.profile-body > .xsf { margin-left: -56px; margin-right: -56px; }
.mobile-frame .profile-body > .xsf { margin-left: -18px; margin-right: -18px; }
.mobile-frame .cover { height: 220px; }
/* Stack the top-right version pill below the top-left locked pill in mobile —
   width is too tight to fit both side by side. */
.mobile-frame .cover-version { top: auto; bottom: 18px; right: 18px; }
.mobile-frame .header {
  flex-direction: column;
  align-items: flex-start;
  margin-top: -50px;
  gap: 14px;
}
.mobile-frame .header-face {
  width: 96px; height: 96px;
  font-size: 36px;
  border-width: 3px;
}
.mobile-frame .header-face-status { width: 12px; height: 12px; bottom: 5px; right: 5px; border-width: 2px; }
.mobile-frame .header-name { font-size: 26px; }
.mobile-frame .header-tagline { font-size: 14px; }
.mobile-frame .header-id { padding-bottom: 0; }
.mobile-frame .header-actions { gap: 10px; }
.mobile-frame .header-actions-right { margin-left: 0; width: 100%; margin-top: 4px; }
.mobile-frame .cta-primary { width: 100%; justify-content: flex-start; height: 64px; padding: 8px; font-size: 14px; }
.cta-online-text-short { display: none; }
.mobile-frame .cta-online-text { display: none; }
.mobile-frame .cta-online-text-short { display: inline; }
.mobile-frame .cta-wrap { width: 100%; flex-direction: column; }
.mobile-frame .cta-price-tag { width: 100%; align-items: center; flex-direction: row; gap: 8px; padding: 10px 14px; }
.mobile-frame .cta-price-num { font-size: 18px; }
.mobile-frame .cta-title { font-size: 15px; }
.mobile-frame .cta-sub { font-size: 12px; }
.mobile-frame .cta-online { font-size: 9px; padding: 2px 6px; }
.mobile-frame .intro-btn { width: 100%; justify-content: flex-start; }
.mobile-frame .urlbar-spacer { display: none; }
.mobile-frame .urlbar-dots { display: none; }
.mobile-frame .urlbar { justify-content: center; }
.mobile-frame .post-masonry { grid-template-columns: none; }
.mobile-frame .post-tabs { overflow-x: auto; }
/* Mobile: 2-row layout — title spans both columns, then play sits next to
   the waveform. CSS Grid with named areas gives clean control without
   restructuring the JSX. */
.mobile-frame .voice-player {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "title title"
    "play  wave";
  gap: 6px 12px;
  padding: 12px 20px 14px 16px;
  align-items: center;
  position: relative;
}
.mobile-frame .voice-play {
  grid-area: play;
  width: 44px; height: 44px;
}
.mobile-frame .voice-body {
  display: contents;
}
.mobile-frame .voice-name-row {
  grid-area: title;
  margin-bottom: 0;
  gap: 12px;
  align-items: baseline;
  display: block;
}
.mobile-frame .voice-name {
  font-size: 13px;
  line-height: 1.35;
  display: block;
  white-space: normal;
}
.mobile-frame .voice-time {
  position: absolute;
  right: 20px;
  bottom: 5px;
  margin: 0;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  white-space: nowrap;
}
.mobile-frame .voice-wave {
  grid-area: wave;
  height: 36px;
  gap: 1.5px;
  margin-right: 0;
  overflow: hidden;
}
.mobile-frame .voice-wave .voice-bar { min-width: 1px; }
.mobile-frame .section { margin-top: 32px; }
.mobile-frame .footer { padding-top: 24px; margin-top: 40px; flex-direction: column; align-items: flex-start; }

/* ───────────────── Site header ───────────────── */
.site-header {
  height: 48px;
  background: oklch(0.99 0.003 90 / 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  z-index: 50;
  position: relative;
}
.site-header-inner {
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-header-brand-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.site-header-brand {
  display: inline-flex;
  align-items: center;
  padding: 4px 4px 4px 4px;
  margin: -4px 0 -4px 0;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s;
}
.site-header-brand:hover { background: var(--bg-elev); }
.site-header-logo {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 28px;
}
.site-header-logo svg { display: block; height: 26px; width: auto; color: var(--text); }
.site-header-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 38%, oklch(0.98 0 0 / 0.95) 50%, transparent 62%);
  background-size: 300% 100%;
  background-position: 150% 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7500 7500 15000 15000'%3E%3Cpolygon fill='%23fff' points='7895.18,7987.3 11216.12,7987.3 16372.25,14678.38 16012.87,15128.96 21446.86,22018.55 18568.72,22018.55 14683.44,16807.15 10628.21,22008.61 7546.73,22008.61 13273.83,14691.9'/%3E%3Cpolygon fill='%23fff' points='18273.48,7995.02 21582.74,7995.02 16838.03,13865.1 15182.4,11687.61'/%3E%3Cpolygon fill='%23fff' points='18232.38,15387.11 18524.66,15748.62 22447.41,15748.62 22447.41,14227.53 19171.4,14227.53'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7500 7500 15000 15000'%3E%3Cpolygon fill='%23fff' points='7895.18,7987.3 11216.12,7987.3 16372.25,14678.38 16012.87,15128.96 21446.86,22018.55 18568.72,22018.55 14683.44,16807.15 10628.21,22008.61 7546.73,22008.61 13273.83,14691.9'/%3E%3Cpolygon fill='%23fff' points='18273.48,7995.02 21582.74,7995.02 16838.03,13865.1 15182.4,11687.61'/%3E%3Cpolygon fill='%23fff' points='18232.38,15387.11 18524.66,15748.62 22447.41,15748.62 22447.41,14227.53 19171.4,14227.53'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.site-header-brand:hover .site-header-logo::after {
  opacity: 1;
  animation: logoBlade 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes logoBlade {
  0% { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
.site-header-wordmark {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.site-header-wordmark-dot { color: var(--accent); }

/* ───── Section switcher (X-AVATAR/HUB/DECODE/FLOW dropdown) ───── */
.section-switcher {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 500px;
  background: oklch(0.99 0.003 90);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  box-shadow:
    0 1px 0 oklch(1 0 0) inset,
    0 24px 60px -16px oklch(0.3 0.05 275 / 0.28),
    0 6px 16px -6px oklch(0.3 0.05 275 / 0.15);
  z-index: 200;
  animation: switcher-in 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes switcher-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.section-switcher-head {
  padding: 4px 8px 8px;
}
.section-switcher-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.section-switcher-grid {
  display: flex; flex-direction: column;
  gap: 2px;
}
.section-switcher-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 14px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 0.15s, transform 0.15s;
  cursor: pointer;
}
.section-switcher-item:hover {
  background: var(--bg-elev);
}
.section-switcher-item:hover .section-switcher-glyph {
  border-color: var(--section-accent);
  color: var(--section-accent);
}
.section-switcher-item.is-current {
  background: linear-gradient(180deg, oklch(0.97 0.04 0), oklch(0.96 0.03 0));
  border: 1px solid oklch(0.86 0.08 0);
  cursor: default;
}
.section-switcher-item.is-current:hover { background: linear-gradient(180deg, oklch(0.97 0.04 0), oklch(0.96 0.03 0)); }
.section-switcher-glyph {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: oklch(1 0 0);
  border-radius: 12px;
  color: oklch(0.06 0 0);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.section-switcher-glyph svg { width: 38px; height: 38px; }
.section-switcher-meta {
  display: flex; flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.section-switcher-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.section-switcher-name-x {
  color: var(--text);
}
.section-switcher-name-label {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.section-switcher-item:hover .section-switcher-name-label {
  color: var(--section-accent);
}
.section-switcher-tagline {
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.45;
  text-wrap: pretty;
}
.section-switcher-here {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 8px;
  background: oklch(1 0 0);
  border: 1px solid oklch(0.86 0.08 0);
  border-radius: 6px;
  white-space: nowrap;
}

.site-header-section {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1;
  text-decoration: none;
  padding: 6px 10px 6px 2px;
  margin: -6px 0;
  border-radius: 8px;
  /* Per-section shimmer color (defaults to AVATAR pink). Each product overrides
     it below so the section name glows in its own brand color on hover. */
  --section-shimmer: oklch(0.72 0.26 0);
  background-image: linear-gradient(
    110deg,
    oklch(0.06 0 0) 0%,
    oklch(0.06 0 0) 40%,
    var(--section-shimmer) 50%,
    oklch(0.06 0 0) 60%,
    oklch(0.06 0 0) 100%
  );
  background-size: 260% 100%;
  background-position: 100% 0;
  transition: background-position 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
/* Per-product shimmer — AVATAR rosa · BIO verde · FLOW azul · DECODE azul · HUB laranja */
.site-header-section[data-section="AVATAR"] { --section-shimmer: oklch(0.72 0.26 0); }
.site-header-section[data-section="BIO"]    { --section-shimmer: oklch(0.74 0.18 155); }
.site-header-section[data-section="FLOW"]   { --section-shimmer: oklch(0.72 0.17 215); }
.site-header-section[data-section="DECODE"] { --section-shimmer: oklch(0.66 0.20 260); }
.site-header-section[data-section="HUB"]    { --section-shimmer: oklch(0.75 0.17 55); }
.site-header-section[data-section="ID"]     { --section-shimmer: oklch(0.55 0.02 275); }
.site-header-section:hover {
  background-position: 0 0;
}

.site-header-navlink-explore {
  display: inline-flex; align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  font-family: var(--font-display);
  cursor: pointer;
}
.site-header-navlink-explore.is-open {
  background: var(--bg-elev);
  color: var(--text);
}
.site-header-navlink-chev {
  transition: transform 0.2s ease;
  opacity: 0.7;
}
.site-header-navlink-explore.is-open .site-header-navlink-chev {
  transform: rotate(180deg);
}

.site-header-nav {
  display: flex; align-items: center; gap: 4px;
  flex: 1;
  margin-left: 8px;
  position: relative;
}
.site-header-navlink {
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--text-mute);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 8px;
  letter-spacing: -0.005em;
  transition: color 0.15s, background 0.15s;
}
.site-header-navlink:hover {
  color: var(--text);
  background: var(--bg-elev);
}
.site-header-navlink-pricing { color: var(--text); }

/* ── Barra de busca do header (tema claro/escuro via tokens) ── */
.site-header-search {
  display: flex; align-items: center; gap: 9px;
  flex: 1; max-width: 440px;
  margin: 0 4px;
  padding: 8px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text-dim);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.site-header-search:focus-within {
  border-color: var(--accent);
  background: var(--bg-base);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 14%, transparent);
}
.site-header-search-ic { flex: none; opacity: 0.65; }
.site-header-search:focus-within .site-header-search-ic { opacity: 0.9; color: var(--accent); }
.site-header-search-input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: var(--font-display); font-size: 13.5px; color: var(--text);
}
.site-header-search-input::placeholder { color: var(--text-dim); }
.site-header-search-input::-webkit-search-cancel-button { display: none; }
.site-header-search-clear {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--text-dim); border-radius: 50%;
}
.site-header-search-clear:hover { color: var(--text); background: color-mix(in oklch, var(--text) 10%, transparent); }

/* ── Seletor de idioma/mercado (Investing) — no lugar do "Explorar" ── */
.site-header-market { position: relative; }
/* Na home, fica colado ao rótulo da seção como uma unidade DECODE+idioma */
.site-header-brand-group .site-header-market { margin-left: 2px; }
.site-header-market-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.site-header-market-btn > svg:first-child { opacity: 0.6; }
.site-header-market-btn:hover { color: var(--text); background: color-mix(in oklch, var(--text) 7%, transparent); }
.site-header-market-btn:hover > svg:first-child { opacity: 0.85; }
.site-header-market-code { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.site-header-market-chev { transition: transform 0.2s ease; opacity: 0.45; }
.site-header-market-btn.is-open { color: var(--text); background: color-mix(in oklch, var(--text) 8%, transparent); }
.site-header-market-btn.is-open .site-header-market-chev { transform: rotate(180deg); opacity: 0.7; }
.site-header-market-menu {
  position: absolute; top: calc(100% + 10px); left: -4px; z-index: 60;
  min-width: 188px; padding: 5px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  box-shadow: 0 16px 40px -16px oklch(0.2 0.04 270 / 0.45);
}
.site-header-market-opt {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-size: 13px; color: var(--text);
  border-radius: 9px; text-align: left;
}
.site-header-market-opt:hover { background: color-mix(in oklch, var(--text) 6%, transparent); }
.site-header-market-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 25px; height: 18px; padding: 0 5px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.1em;
  border: 1px solid var(--border-soft); border-radius: 5px; color: var(--text-dim);
}
.site-header-market-opt.is-active .site-header-market-badge {
  background: var(--accent); color: oklch(0.99 0 0); border-color: transparent;
}
.site-header-market-label { flex: 1; font-weight: 500; }
.site-header-market-check { color: var(--accent); font-size: 12px; }

/* ── Configurações (idioma da interface + tema) no menu do usuário ── */
.site-header-menu-cfg { display: flex; align-items: center; justify-content: space-between; }
.site-header-cfg-chev { transition: transform 0.2s ease; opacity: 0.55; }
.site-header-menu-cfg.is-open .site-header-cfg-chev { transform: rotate(180deg); }
.site-header-cfg { padding: 2px 4px 6px; }
.site-header-cfg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; }
.site-header-cfg-lbl { font-size: 9.5px; letter-spacing: 0.06em; color: var(--text-dim); text-transform: uppercase; }
.site-header-cfg-seg { display: inline-flex; gap: 3px; background: var(--bg-base); border: 1px solid var(--border-soft); border-radius: 9px; padding: 2px; }
.site-header-cfg-btn {
  cursor: pointer; font-family: var(--font-display); font-size: 11px; font-weight: 600;
  color: var(--text-dim); padding: 4px 9px; border-radius: 7px; user-select: none;
  transition: background 0.13s, color 0.13s;
}
.site-header-cfg-btn:hover { color: var(--text); }
.site-header-cfg-btn.is-active { background: var(--accent); color: oklch(0.99 0 0); }
.site-header-cfg-note { padding: 4px 8px 0; font-size: 9.5px; line-height: 1.5; color: var(--text-dim); }

/* Reduzir animações (acessibilidade) — classe global do PrefsProvider */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ── Folha de Configurações (estilo Ajustes do iPhone) ── */
/* Tint AZUL de sistema (iOS system blue) para tudo que é interativo —
   links, botões, segmentos, chevron de voltar, foco. O VERDE (--set-on)
   fica reservado só para o estado LIGADO de toggles e confirmações de
   sucesso, exatamente como o iOS faz. */
.set-sheet { --accent: #007AFF; --accent-bg: color-mix(in oklch, #007AFF 14%, transparent); --set-on: #34C759; }
.theme-dark .set-sheet { --accent: #0A84FF; --accent-bg: color-mix(in oklch, #0A84FF 20%, transparent); --set-on: #30D158; }
.set-sheet-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(0.2 0.03 270 / 0.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  overscroll-behavior: contain; touch-action: none;
  animation: mmenu-fade 0.18s ease;
}
/* ══ TELA CHEIA DO ESTÚDIO — a gaveta cresce, e só ela ════════════════════
   A gaveta é uma coluna de 440px — boa para recado, apertada para redigir um
   contrato. Acima de 750px o botão "Tela cheia" larga a coluna e o editor toma
   a página. ⚠️ `1100px` é teto, não largura: em monitor grande a linha ficaria
   longa demais para ler. A folha da PRÉVIA tem sua própria medida (`--md-measure`),
   que não muda aqui — documento largo não é documento legível.
   ⛔ NÃO usar a API de fullscreen do navegador (engole a barra do sistema e, no
      iPad, sai do app). ⚠️ Abaixo de 750px a classe nunca é aplicada — o botão
      nem existe (ver `wide` em minutas.jsx). */
.set-sheet.mn-full { width: min(1100px, 100%); }
@media (max-width: 749px) { .set-sheet.mn-full { width: min(440px, 100%); } }
.mn-full-b { margin-left: auto; }
.set-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(440px, 100%);
  transition: width .22s cubic-bezier(0.2, 0.7, 0.3, 1);
  display: flex; flex-direction: column;
  background: var(--bg-base);
  color: var(--text);
  border-left: 1px solid var(--border-soft);
  box-shadow: -24px 0 60px -20px oklch(0.05 0.03 285 / 0.4);
  animation: mmenu-slide 0.26s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.set-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border-soft);
}
.set-sheet-head h2 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.01em; min-width: 0; }
/* título que é E-MAIL: elide em vez de estourar, e num corpo menor — endereço não é nome */
.set-sheet-head h2 .hd-mail, .ft-ident-lnk .hd-mail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; letter-spacing: -0.005em; }
.set-sheet-close { border: 0; background: none; cursor: pointer; color: var(--text-dim); padding: 4px; border-radius: 8px; }
.set-sheet-close:hover { color: var(--text); background: var(--bg-elev); }
.set-sheet-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 16px 32px;
  scrollbar-width: none;
}
.set-sheet-body::-webkit-scrollbar { width: 0; }
@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
  .set-sheet-body { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
  .set-sheet-body::-webkit-scrollbar { width: 11px; }
  .set-sheet-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
}
.set-group-title { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin: 18px 6px 7px; }
/* 📖 V34.1 · O CABEÇALHO DE GRUPO PODE TER UMA PORTA — e este é o primeiro dos 22 a ter.
   ⚠️ O `margin` fica no TÍTULO, ⛔ não no envelope: assim os outros 21 `.set-group-title` seguem
      byte a byte iguais, e o envelope só existe onde há ação. ⛔ NÃO mover o margin para cá.
   ⚠️ `align-items: baseline` alinha o rótulo pela linha do título, ⛔ não pela caixa — os dois têm
      corpos diferentes (10px e 11px), e centralizar deixaria o texto flutuando meio pixel acima.
   🔑 "Manual" nomeia o DESTINO (decisão do Tony): "saiba mais" descreveria o gesto e ⛔ não diria
      para onde vai — e, repetido em vários grupos, viraria ruído. */
.set-group-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.set-group-man { display: inline-flex; align-items: baseline; gap: 5px; margin: 18px 6px 7px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 11px; letter-spacing: 0.02em; color: var(--accent); cursor: pointer; }
/* 🐞 V34.4 · A BASELINE VEM DO TEXTO, ⛔ NÃO DO ÍCONE. O `.set-group-h` alinha por `baseline`, e a
   baseline de um flex container é a do **primeiro item** — que era o `<svg>`, sem linha de base de
   texto: o rótulo subia acima do título. O texto virou `<span>` (aí **é** item) e o ícone sai da
   conta com `align-self: center`. ⛔ NÃO trocar por `margin-top` negativo: o desvio muda com o
   corpo da fonte e ficaria certo só nesta medida. */
.set-group-man svg { flex: none; align-self: center; opacity: 0.85; }
.set-group-man:hover { color: var(--text); }
.set-group-man:hover svg { opacity: 1; }
.set-group { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 16px; overflow: hidden; }
.set-group + .set-group { margin-top: 14px; }
.set-account { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border-soft); }
.set-account-face { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: oklch(0.99 0 0); font-weight: 600; flex: none; }
.set-account-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.set-account-id b { font-size: 15px; font-weight: 600; }
.set-account-id span { font-size: 11px; color: var(--text-dim); }
.set-account-verif { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--accent-bg); padding: 4px 9px; border-radius: 999px; flex: none; }
.set-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border: 0; background: none;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-display); font-size: 14px; color: var(--text);
  text-align: left; cursor: pointer; text-decoration: none;
}
.set-group .set-row:last-child { border-bottom: 0; }
.set-row:hover:not(.set-row-static) { background: color-mix(in oklch, var(--text) 4%, transparent); }
.set-row-ic { display: inline-flex; color: var(--accent); flex: none; }
.set-row-label { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.set-row-glyph { flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.set-row-glyph.swap { color: oklch(0.84 0.16 88); background: oklch(0.84 0.17 88 / 0.13); }
.set-row-glyph.buy { color: var(--accent); background: var(--accent-bg); }
.set-row-glyph.hist { color: var(--text-mute); background: color-mix(in oklch, var(--text) 8%, transparent); }
body:not(.theme-dark) .set-row-glyph.swap { color: oklch(0.5 0.13 72); }
.set-row-glyph.out { color: oklch(0.7 0.14 245); background: oklch(0.66 0.16 245 / 0.15); }
.set-row-label small { font-size: 11px; color: var(--text-dim); font-weight: 400; }
.svc-row .set-row-label { min-width: 0; }
.svc-row .set-row-label small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
.set-row-val { font-size: 13px; color: var(--text-dim); white-space: nowrap; flex: none; }
.set-row > svg { color: var(--text-dim); flex: none; }
.set-row-danger, .set-row-danger .set-row-label { color: oklch(0.55 0.19 28); }
.theme-dark .set-row-danger, .theme-dark .set-row-danger .set-row-label { color: oklch(0.72 0.17 28); }
.set-row-static { cursor: default; }
.set-row-col { flex-direction: column; align-items: stretch; gap: 6px; }
.set-row-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.set-row-k { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; flex: none; }
.set-row-col .set-row-val { font-size: 13px; color: var(--text-mute); min-width: 0; text-align: right; }
.set-row-verified { font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 5px; }
.set-row-vck { color: var(--accent); font-weight: 700; }
.prov-row { gap: 11px; }
.prov-ic { display: inline-flex; color: var(--text-dim); flex: none; }
.prov-pill { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); flex: none; }
.prov-pill-warn { background: oklch(0.62 0.16 60 / 0.16); color: oklch(0.5 0.14 60); }
.theme-dark .prov-pill-warn { color: oklch(0.8 0.15 75); }
.set-row-add { color: var(--accent); }
.set-row-add .set-row-label { color: var(--accent); font-weight: 600; }
.set-row-add .set-row-ic { color: var(--accent); font-size: 18px; font-weight: 600; width: 16px; justify-content: center; }
.dev-row { gap: 10px; }
.dev-badge { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); flex: none; }
.dev-out { flex: none; border: 1px solid var(--border-soft); background: transparent; color: oklch(0.55 0.19 28); font-family: var(--font-display); font-size: 11px; font-weight: 600; padding: 5px 13px; border-radius: 999px; cursor: pointer; }
.dev-out:hover { background: oklch(0.55 0.19 28 / 0.08); }
.dev-lock { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--bg-base); border: 1px solid var(--border-soft); color: var(--text-dim); cursor: default; }
.dev-row-locked .set-row-label { color: var(--text-mute); }
.theme-dark .dev-out { color: oklch(0.72 0.17 28); }
.set-seg { display: inline-flex; gap: 3px; background: var(--bg-base); border: 1px solid var(--border-soft); border-radius: 9px; padding: 2px; flex: none; }
.set-seg-btn { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-dim); padding: 5px 11px; border-radius: 7px; user-select: none; transition: background 0.13s, color 0.13s; }
.set-seg-btn:hover { color: var(--text); }
.set-seg-btn.is-active { background: var(--accent); color: oklch(0.99 0 0); }
.set-toggle { width: 42px; height: 25px; border-radius: 999px; background: var(--border); position: relative; cursor: pointer; flex: none; transition: background 0.18s; }
.set-toggle.is-on { background: var(--set-on); }
.set-toggle-knob { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: oklch(0.99 0 0); transition: transform 0.18s; box-shadow: 0 1px 3px oklch(0 0 0 / 0.3); }
.set-toggle.is-on .set-toggle-knob { transform: translateX(17px); }
.set-signout { display: block; margin: 30px auto 6px; padding: 6px 10px; border: 0; background: none; font-family: var(--font-display); font-size: 12px; font-weight: 500; color: var(--text-dim); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.set-signout:hover { color: oklch(0.55 0.19 28); }
.theme-dark .set-signout:hover { color: oklch(0.72 0.17 28); }

/* Drill-down (camadas) — subtela com voltar */
.set-sheet-body-flush { padding: 0; display: flex; flex-direction: column; }
.set-ledger-frame { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: var(--bg-base); }

/* ── Depositar PING (recarga via cartão salvo / Stripe) ── */
.dep-bal { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 2px; }
.dep-bal-l { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.dep-bal-n { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.dep-card-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--bg-base); border: 1px solid var(--border-soft); color: var(--text-mute); flex: none; }
.dep-card-stripe { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-dim); flex: none; padding: 3px 8px; border: 1px solid var(--border-soft); border-radius: 999px; }
.dep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 2px; }
.dep-pack { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--border-soft); cursor: pointer; font: inherit; text-align: left; transition: border-color .14s, background .14s, transform .08s; }
.dep-pack:hover { border-color: var(--accent); background: var(--accent-bg); }
.dep-pack:active { transform: scale(0.98); }
.dep-pack.is-pop { border-color: color-mix(in oklch, var(--accent) 55%, transparent); }
.dep-pack-n { display: inline-flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.dep-pack-p { font-size: 12.5px; color: var(--text-dim); }
.dep-pop { position: absolute; top: -7px; right: 10px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.99 0 0); background: var(--accent); padding: 2px 7px; border-radius: 999px; }
.dep-confirm { display: flex; flex-direction: column; align-items: center; padding: 18px 0 8px; }
.dep-confirm-amt { display: inline-flex; align-items: flex-end; gap: 9px; font-size: 34px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; line-height: 1; }
.dep-confirm-unit { font-size: 14px; color: var(--text-dim); font-weight: 600; padding-bottom: 4px; }
.dep-confirm-price { font-size: 15px; color: var(--text-mute); margin-top: 9px; }
.dep-newbal { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 16px; padding: 12px 14px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--border-soft); }
.dep-newbal-l { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.dep-newbal-n { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--text); }
.dep-methods { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; margin: 8px 0 7px; border-radius: 11px; background: color-mix(in oklch, var(--text) 7%, transparent); }
.dep-method { padding: 9px 6px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-dim); cursor: pointer; transition: background .14s, color .14s, box-shadow .14s; }
.dep-method.is-on { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 3px oklch(0 0 0 / 0.16); }
.theme-dark .dep-method.is-on { background: var(--bg-elev-2); }
.dep-method-note { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin: 0 2px 8px; }
.dep-qr-wrap { display: flex; justify-content: center; padding: 16px 0 4px; }
.dep-qr-card { background: #fff; padding: 11px; border-radius: 14px; line-height: 0; box-shadow: 0 8px 26px -10px oklch(0 0 0 / 0.45); }
.dep-qr-svg { width: 178px; height: 178px; display: block; }
.dep-qr-svg rect { fill: #0b0b0f; }
.dep-qr-amt { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--text); }
.dep-crypto-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 0; }
.dep-head-coins { display: inline-flex; align-items: center; flex: none; }
.dep-head-coins img { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bg-base); }
.dep-head-coins img:not(:first-child) { margin-left: -8px; }
.dep-head-both { text-align: center; font-size: 11px; color: var(--text-dim); margin: 5px 0 0; letter-spacing: 0.01em; }
.dep-crypto-net { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border-soft); border-radius: 999px; padding: 4px 11px; }
.dep-coin { cursor: pointer; }
.dep-coin-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 14px; flex: none; }
.dep-coin-ic-sm { width: 20px; height: 20px; font-size: 10px; }
.dep-coin-amt { font-size: 12px; color: var(--text-dim); flex: none; }
.dep-confirm-mini { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 0 10px; font-size: 14px; font-weight: 600; color: var(--text); }
.dep-crypto-send { text-align: center; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-top: 15px; }
.dep-crypto-payamt { text-align: center; font-size: 26px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin-top: 3px; }
.dep-crypto-sub { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--text-mute); margin-top: 5px; }
.dep-swap { margin: 14px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--bg-elev); border: 1px solid var(--border-soft); }
/* ── Identidade PING Ledger na tela de swap ── */
.dep-brand { display: flex; align-items: center; gap: 9px; padding: 1px 2px 12px; margin-bottom: 13px; border-bottom: 1px solid var(--border-soft); }
.dep-brand-bolt { width: 23px; height: 23px; border-radius: 7px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: oklch(0.2 0.04 80); background: linear-gradient(180deg, oklch(0.88 0.18 92), oklch(0.72 0.15 80)); box-shadow: 0 0 15px -3px oklch(0.84 0.17 88 / 0.75); }
.dep-brand-wm { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.dep-brand-wm em { font-family: var(--font-serif, "Instrument Serif", Georgia, serif); font-style: italic; font-weight: 400; color: oklch(0.82 0.14 85); margin-left: -1px; }
.dep-brand-tag { margin-left: auto; font-size: 9.5px; letter-spacing: 0.04em; color: var(--text-dim); white-space: nowrap; }
/* lado "você recebe PING" do swap ganha o âmbar de energia */
.dep-swap-v.dep-swap-v-ping { color: oklch(0.84 0.16 88); }
/* modo claro: âmbar mais profundo p/ legibilidade do texto/wordmark */
body:not(.theme-dark) .dep-swap-v.dep-swap-v-ping { color: oklch(0.58 0.13 72); }
body:not(.theme-dark) .dep-brand-wm em { color: oklch(0.56 0.12 70); }
/* CTA solar — gradiente âmbar com glow, padrão do PING Ledger */
.set-sub-cta-solar { background: linear-gradient(180deg, oklch(0.88 0.18 92), oklch(0.8 0.16 86)) !important; color: oklch(0.21 0.05 80) !important; border: 0 !important; box-shadow: 0 0 26px -6px oklch(0.84 0.17 88 / 0.6); font-weight: 600; }
.set-sub-cta-solar:hover { filter: brightness(1.04); box-shadow: 0 0 34px -6px oklch(0.84 0.17 88 / 0.75); }
.set-sub-cta-solar:disabled { opacity: 0.4; box-shadow: none; filter: none; cursor: not-allowed; }
.set-sub-cta-out { width: 100%; margin-top: 4px; padding: 13px; border-radius: 13px; border: 0; background: linear-gradient(180deg, oklch(0.72 0.15 245), oklch(0.62 0.15 245)); color: oklch(0.99 0.01 245); font-family: var(--font, sans-serif); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 0 26px -6px oklch(0.66 0.16 245 / 0.6); transition: filter .14s; }
.set-sub-cta-out:hover { filter: brightness(1.06); }
.set-sub-cta-out:disabled { opacity: 0.4; box-shadow: none; cursor: not-allowed; }
.swapout-nets { display: flex; flex-wrap: wrap; gap: 7px; }
.swapout-net { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--text-mute); font-family: var(--font, sans-serif); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.swapout-net .dep-rail-logos { display: inline-flex; }
.swapout-net .dep-rail-logos img { width: 15px; height: 15px; border-radius: 50%; margin-right: -5px; border: 1px solid var(--bg-elev); }
.swapout-net.on { color: var(--text); border-color: oklch(0.66 0.16 245); background: oklch(0.66 0.16 245 / 0.12); }
.swapout-net-gas { margin-left: 2px; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 6px; }
.swapout-net-gas.lo { color: oklch(0.72 0.16 150); background: oklch(0.66 0.16 152 / 0.15); }
.swapout-net-gas.mid { color: oklch(0.8 0.15 85); background: oklch(0.82 0.17 88 / 0.18); }
.swapout-net-gas.hi { color: oklch(0.74 0.19 25); background: oklch(0.64 0.2 25 / 0.16); }
.swapout-addr { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-base); color: var(--text); font-size: 13px; outline: none; transition: border-color .14s; }
.swapout-addr:focus { border-color: oklch(0.66 0.16 245); }
.out-contacts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.out-contact { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-elev); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .14s, background .14s; }
.out-contact.on { border-color: oklch(0.66 0.16 245); background: oklch(0.66 0.16 245 / 0.1); }
.out-contact:hover { border-color: var(--border); }
.out-contact-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: oklch(0.74 0.14 245); background: oklch(0.66 0.16 245 / 0.16); }
.out-contact-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.out-contact-nick { font-size: 13.5px; font-weight: 500; color: var(--text); }
.out-contact-addr { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.out-contact-del { flex: none; color: var(--text-dim); display: inline-flex; padding: 4px; border-radius: 6px; }
.out-contact-del:hover { color: oklch(0.7 0.19 25); background: oklch(0.64 0.2 25 / 0.12); }
.out-save { display: flex; gap: 8px; margin-top: 8px; }
.out-known { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 9px 12px; border-radius: 11px; background: oklch(0.66 0.16 152 / 0.12); border: 1px solid oklch(0.66 0.16 152 / 0.25); color: oklch(0.74 0.15 152); }
.out-known-av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: oklch(0.99 0.01 152); background: oklch(0.66 0.16 152); }
.out-known-txt { flex: 1; font-size: 13px; }
.out-known-txt b { font-weight: 600; }
.out-known svg { flex: none; }
.out-pick-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 9px 14px; border-radius: 999px; border: 1px solid oklch(0.66 0.16 245 / 0.3); background: oklch(0.66 0.16 245 / 0.1); color: oklch(0.74 0.14 245); font-family: var(--font, sans-serif); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .14s, border-color .14s; }
.out-pick-link:hover { background: oklch(0.66 0.16 245 / 0.16); border-color: oklch(0.66 0.16 245 / 0.5); }
.out-pick-card { text-align: left; }
.out-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.out-pick-head .tok-gate-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); }
.out-pick-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.out-contact-rail { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--text-mute); background: var(--bg-base); border: 1px solid var(--border-soft); border-radius: 999px; padding: 3px 8px 3px 4px; }
.out-contact-rail img { width: 14px; height: 14px; border-radius: 50%; }
.out-pick-link svg { flex: none; }
.out-pick-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: oklch(0.66 0.16 245); color: oklch(0.99 0.01 245); font-size: 11px; font-weight: 600; }
.out-save-nick { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border-soft); background: var(--bg-base); color: var(--text); font-size: 13px; font-family: var(--font, sans-serif); outline: none; }
.out-save-nick:focus { border-color: oklch(0.66 0.16 245); }
.out-save-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 11px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--text); font-size: 13px; font-weight: 500; font-family: var(--font, sans-serif); cursor: pointer; transition: background .14s; }
.out-save-btn:hover:not(:disabled) { background: var(--bg-elev-2, var(--bg-elev)); }
.out-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.set-sub-cta-solar svg { flex: none; }
.dep-swap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dep-swap-l { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.dep-swap-v { display: inline-flex; align-items: center; gap: 7px; font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.dep-swap-mid { display: flex; justify-content: center; margin: 8px 0; }
.dep-swap-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--bg-base); border: 1px solid var(--border-soft); color: var(--accent); }
.dep-swap-rate { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border-soft); font-size: 11px; color: var(--text-dim); }
.dep-rate-tick { font-size: 9px; transition: color .2s; }
.dep-rate-up { color: oklch(0.72 0.16 155); }
.dep-rate-down { color: oklch(0.64 0.2 25); }
.dep-rate-flat { color: var(--text-dim); }
.dep-requote { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--text-mute); white-space: nowrap; }
.dep-requote-spin { width: 10px; height: 10px; border-width: 1.5px; }
.dep-swap-fee { text-align: center; font-size: 11.5px; color: var(--text-dim); margin-top: 9px; }
.dep-swap-field { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; justify-content: flex-end; }
.dep-swap-input { width: auto; flex: 1; min-width: 0; border: 0; background: transparent; text-align: right; font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; padding: 2px 0; outline: none; -moz-appearance: textfield; }
.dep-swap-input::-webkit-outer-spin-button, .dep-swap-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dep-swap-input::placeholder { color: var(--text-dim); }
.dep-swap-input-ping { color: oklch(0.84 0.16 88); }
body:not(.theme-dark) .dep-swap-input-ping { color: oklch(0.58 0.13 72); }
.dep-swap-unit { font-size: 13px; color: var(--text-dim); flex: none; }
.dep-swap-edit .dep-swap-row { padding: 4px 0; }
.dep-chips { display: flex; gap: 7px; margin: 12px 0 16px; }
.dep-netpills { display: none; }
.dep-gas-note { text-align: center; font-size: 11.5px; color: var(--text-dim); margin: 12px 0 2px; }
.dep-gas-note b { color: oklch(0.84 0.16 88); font-weight: 600; }
.dep-chip { flex: 1; padding: 9px 4px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--text-mute); font-size: 13px; font-weight: 600; cursor: pointer; transition: color .14s, border-color .14s; }
.dep-chip:hover { color: var(--text); border-color: var(--accent); }
.dep-stable-tog { margin: 12px 0 8px; grid-auto-columns: 1fr; }
.dep-method .dep-stable-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.dep-method .dep-stable-logo { width: 17px; height: 17px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.dep-coin-logo-sm { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.dep-coin-logo-wrap { background: oklch(1 0 0 / 0.06) !important; padding: 0; overflow: hidden; }
.dep-coin-logo { width: 30px; height: 30px; border-radius: 50%; display: block; }
.dep-rate-peg { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; background: oklch(0.74 0.15 155); box-shadow: 0 0 7px oklch(0.74 0.15 155 / 0.65); }
.dep-addr { margin: 12px 0 0; padding: 11px 13px; border-radius: 11px; background: var(--bg-elev); border: 1px solid var(--border-soft); font-size: 12.5px; line-height: 1.45; color: var(--text); word-break: break-all; text-align: center; }
.dep-pix-waiting { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 2px; font-size: 12.5px; color: var(--text-mute); }
.dep-addr-hint { text-align: center; font-size: 11px; color: var(--text-dim); margin: 8px 0 0; line-height: 1.45; }
.dep-ledger-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklch, var(--accent) 35%, transparent); white-space: nowrap; }
/* 📖 V31 · A PORTA DO MANUAL DENTRO DE UMA NOTA. Mesma veste do `.dep-ledger-link` (o link que
   a nota do depósito já usa), mas `<button>`: o manual abre em HIPERFOCO dentro da gaveta, ⛔ não
   por navegação — `<a href>` ali tiraria a pessoa da carteira, que é o que o §5b proíbe.
   ⛔ NÃO reusar `.dep-ledger-link` para isto: o nome dele diz "ledger", e classe que mente sobre
      o destino é a primeira coisa que alguém conserta errado. */
.set-man-lnk { display: inline; padding: 0; border: 0; border-bottom: 1px solid color-mix(in oklch, var(--accent) 35%, transparent); background: none; font: inherit; color: var(--accent); cursor: pointer; }
.set-man-lnk:hover { border-bottom-color: var(--accent); }
.dep-ledger-link:hover { border-bottom-color: var(--accent); }
.swap-addr-row { gap: 9px; align-items: center; }
.swap-addr-card { display: flex; flex-direction: column; gap: 5px; padding: 13px 14px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background .12s; }
.swap-addr-card:hover { background: oklch(1 0 0 / 0.022); }
.swap-addr-card:last-child { border-bottom: 0; }
.swap-addr-floor1 { display: flex; align-items: center; gap: 8px; }
.swap-addr-floor1 .swap-addr-nick { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swap-addr-floor1 .swap-addr-pencil { margin-left: 2px; }
.swap-addr-floor1 .set-row-chev, .swap-addr-floor1 > svg:last-child { margin-left: auto; flex: none; }
.swap-addr-floor2 { display: flex; align-items: center; gap: 8px; }
.swap-addr-floor2 .swap-addr-railname { font-size: 12.5px; color: var(--text-mute); }
.swap-addr-floor3 { font-size: 12px; color: var(--text-dim); letter-spacing: 0.02em; }
.swap-addr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: none; border: 0; cursor: pointer; text-align: left; padding: 0; font: inherit; }
.swap-addr-nick { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.swap-addr-railname { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.swap-addr-pencil { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: none; border: 0; color: var(--text-dim); cursor: pointer; transition: color .14s, background .14s; }
.swap-addr-pencil:hover { color: var(--text); background: oklch(1 0 0 / 0.05); }
.swap-addr-nick-input { flex: 1; min-width: 0; background: var(--bg-base); border: 1px solid var(--accent); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 14px; font-weight:600; padding: 6px 9px; outline: none; }
.swap-addr-rail { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text); }
.swap-addr-logos { display: inline-flex; flex: none; }
.swap-addr-logos img { width: 16px; height: 16px; border-radius: 50%; margin-right: -5px; border: 1.5px solid var(--bg-card); }
.swap-addr-copy { flex: none; background: none; border: 0; color: var(--blue, #0A84FF); font-size: 12px; font-weight: 500; cursor: pointer; padding: 2px 0; }
.swap-addr-val { font-size: 12px; color: var(--text-mute); overflow-wrap: anywhere; line-height: 1.4; }
.swap-addr-gen .set-row-ic { color: var(--accent); font-size: 18px; font-weight: 600; width: 18px; text-align: center; }
.swap-addr-gen .set-row-label { color: var(--accent); font-weight: 600; }
.dep-any-amount { text-align: center; font-size: 12px; color: oklch(0.84 0.14 88); margin: 10px 0 0; line-height: 1.45; }
body:not(.theme-dark) .dep-any-amount { color: oklch(0.5 0.11 70); }
.dep-irrev { display: flex; gap: 7px; align-items: flex-start; font-size: 11px; line-height: 1.5; color: var(--text-dim); margin: 10px 0 0; padding: 10px 12px; border-radius: 11px; background: oklch(0.64 0.2 25 / 0.08); border: 1px solid oklch(0.64 0.2 25 / 0.22); }
.dep-irrev svg { flex: none; margin-top: 1px; color: oklch(0.66 0.19 30); }
.dep-irrev b { color: oklch(0.74 0.16 35); font-weight: 600; }
.dep-irrev a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklch, var(--accent) 40%, transparent); }
.dep-irrev a:hover { border-bottom-color: var(--accent); }
.mg-deflang { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.mg-deflang-l { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.mg-deflang-seg { display: flex; gap: 4px; background: var(--bg-base); border: 1px solid var(--border-soft); border-radius: 9px; padding: 3px; }
.mg-deflang-opt { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 5px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-dim); cursor: pointer; transition: background 0.14s, color 0.14s; }
.mg-deflang-opt.on { background: oklch(0.82 0.16 88 / 0.16); color: oklch(0.82 0.16 88); }
.mg-fixed-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.03em; text-transform: none; font-weight: 500; color: var(--text-dim); background: var(--bg-base); border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 8px 2px 6px; vertical-align: middle; }
.mg-static { padding: 11px 13px; border-radius: 10px; background: var(--bg-base); border: 1px dashed var(--border); color: var(--text-mute); font-size: 13.5px; word-break: break-word; }
.mg-static-inline { display: flex; align-items: center; color: var(--text-mute); border-style: dashed !important; background: var(--bg-base); }
.mg-static-logo { display: flex; align-items: center; }
.mg-static-logo .mg-logo-img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.mg-static-logo .mg-logo-ph { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-base); border: 1px dashed var(--border); color: var(--text-dim); }
.mg-price-static { display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; border-radius: 10px; background: var(--bg-base); border: 1px dashed var(--border); color: var(--text-mute); font-size: 14px; white-space: nowrap; }
.mg-shared { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.03em; text-transform: none; font-weight: 500; color: oklch(0.7 0.13 245); background: oklch(0.7 0.13 245 / 0.12); border-radius: 999px; padding: 2px 7px 2px 6px; vertical-align: middle; }
.mg-shared svg { opacity: 0.85; }
/* seletor de idioma da ficha do serviço (manage) */
.mg-langbar { display: flex; gap: 6px; margin: 0 0 14px; }
.mg-langtab { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-mute); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: border-color 0.14s, color 0.14s; }
.mg-langtab small { font-weight: 500; font-size: 9.5px; color: var(--text-dim); text-transform: none; letter-spacing: 0.02em; }
.mg-langtab:hover { border-color: color-mix(in oklab, var(--accent, oklch(0.62 0.15 155)) 45%, var(--border)); }
.mg-langtab.on { color: var(--text); border-color: color-mix(in oklab, var(--accent, oklch(0.62 0.15 155)) 60%, var(--border)); background: color-mix(in oklab, var(--accent, oklch(0.62 0.15 155)) 10%, var(--bg-elev)); }
.mg-langdot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.mg-langdot.is-done { background: var(--bat-green, oklch(0.68 0.16 152)); }
.mg-langdot.is-partial { background: var(--bat-amber, oklch(0.8 0.16 88)); }
.mg-langdot.is-empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-dim); }
.mg-shared-note { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; font-size: 11.5px; color: oklch(0.7 0.13 245); }
.mg-shared-note svg { flex: none; opacity: 0.8; }
.mg-langbar { display: flex; gap: 6px; margin-bottom: 4px; }
.mg-lang { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--text-dim); cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s; }
.mg-lang.on { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.mg-lang-def { color: oklch(0.82 0.16 88); font-size: 9px; }
.mg-lang-dot { width: 7px; height: 7px; border-radius: 50%; }
.mg-lang-dot.done { background: oklch(0.74 0.16 150); }
.mg-lang-dot.partial { background: oklch(0.82 0.16 88); }
.mg-lang-dot.empty { background: var(--border); }
.mg-langhint { margin: 0 0 14px; }
.profit-auto { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 11px 14px; border-radius: 11px; font-size: 12.5px; color: oklch(0.78 0.15 152); background: oklch(0.76 0.17 152 / 0.1); border: 1px solid oklch(0.76 0.17 152 / 0.25); }
.profit-rows { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; }
/* 💧 O DRENO DESLIGADO (V19) — cinza, ⛔ não vermelho: "nunca drena sozinha" é escolha
   legítima, não erro nem alerta. E a fileira do seletor põe o "nunca" na MESMA linha dos
   percentuais, ⛔ não atrás de um switch: esconder a opção faz o dreno parecer obrigatório. */
.profit-auto.off { color: var(--text-mute); background: var(--bg-elev); }
.profit-auto.off svg { opacity: 0.45; }
.bat-grid.drain .bat-chip { min-height: 40px; }
.bat-grid.drain .bat-chip.wide { grid-column: 1 / -1; }
.profit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; color: var(--text-mute); }
.profit-row:last-child { border-bottom: 0; }
.profit-row b { color: var(--text); font-weight: 600; }
/* fontes de lucro — apps do ecossistema que creditam a bateria */
.profit-src { margin-top: 16px; }
.profit-src-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 4px 0 12px; background: var(--bg-elev); }
.profit-src-bar span { height: 100%; }
.profit-src-list { display: flex; flex-direction: column; gap: 2px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; }
.profit-src-row { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; color: var(--text); }
.profit-src-row:last-child { border-bottom: 0; }
.profit-src-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.profit-src-name { flex: 1; font-weight: 600; }
.profit-src-pct { font-size: 11.5px; color: var(--text-dim); }
.profit-src-row b { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.profit-row b small { color: var(--text-dim); font-weight: 400; font-size: 11px; }
.svc-row-sub { display: inline-flex; align-items: center; gap: 6px; }
.svc-row-bat .b2b-avatar { align-self: center; }
.svc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.svc-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.svc-row-name { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-row-bot { display: flex; align-items: center; gap: 7px; }
.bat-pill { flex: 1; display: flex; align-items: stretch; height: 14px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in oklch, var(--text) 9%, transparent); overflow: hidden; }
.bat-pill .src-badge { border-radius: 0; height: 100%; display: inline-flex; align-items: center; padding: 0 8px 0 7px; flex: none; font-size: 8px; }
.bat-pill-track { flex: 1; align-self: stretch; height: 100%; padding: 2px 2px 2px 0; box-sizing: border-box; overflow: hidden; }
.bat-pill-fill { display: block; height: 100%; border-radius: 0 999px 999px 0; transition: width 0.4s ease; }
.bat-pill-fill.low { animation: svcBatPulse 1.3s ease-in-out infinite; }
.src-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; padding: 1.5px 5px 1.5px 4px; border-radius: 4px; line-height: 1; flex: none; }
.src-badge.b2b { color: oklch(0.55 0.15 250); background: oklch(0.55 0.15 250 / 0.14); }
.src-badge.hub { color: oklch(0.62 0.19 50); background: oklch(0.82 0.13 62 / 0.32); }
.theme-dark .src-badge.b2b { color: oklch(0.74 0.14 250); background: oklch(0.74 0.14 250 / 0.16); }
.theme-dark .src-badge.hub { color: oklch(0.82 0.16 62); background: oklch(0.78 0.15 60 / 0.2); }
.svc-tabs { display: flex; gap: 6px; background: var(--bg-base); border: 1px solid var(--border-soft); border-radius: 12px; padding: 4px; margin: 4px 0 14px; }
.svc-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.14s, color 0.14s; }
.svc-tab.on { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 2px oklch(0 0 0 / 0.18); }
.svc-tab-badge { font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-bg); color: var(--accent); }
.svc-tab.on .svc-tab-badge { background: var(--accent); color: #fff; }
.svc-clients { margin-top: 2px; }
.mov-sentinel { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 18px 12px; font-size: 12px; color: var(--text-dim); }
.mov-end { text-align: center; }
.wallet-seeall { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 10px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-elev); color: var(--text-mute); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s; }
.wallet-seeall:hover { background: var(--bg-elev-2, var(--bg-base)); color: var(--text); border-color: var(--border); }
.wallet-seeall b { color: var(--text); font-weight: 700; }
.wallet-seeall svg { opacity: 0.6; }
.wallet-in-title { margin-top: 22px; }
.wallet-in-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.wallet-in-item { border-bottom: 1px solid var(--border-soft); }
.wallet-in-item:last-child { border-bottom: 0; }
.wallet-in-row:hover { background: oklch(1 0 0 / 0.02); }
.wallet-in-det { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s cubic-bezier(.4,0,.2,1); }
.wallet-in-item.open .wallet-in-det { grid-template-rows: 1fr; }
.wallet-in-det-in { overflow: hidden; min-height: 0; }
.wallet-in-detgrid { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; padding: 2px 14px 4px 60px; }
.wallet-in-detgrid .k { font-size: 11.5px; color: var(--text-dim); }
.wallet-in-detgrid .v { font-size: 11.5px; color: var(--text); text-align: right; overflow-wrap: anywhere; }
.wallet-in-detgrid .v.amber { color: oklch(0.84 0.16 88); }
body:not(.theme-dark) .wallet-in-detgrid .v.amber { color: oklch(0.5 0.13 155); }
.wallet-in-detnote { padding: 8px 14px 14px 60px; font-size: 11px; color: var(--text-dim); line-height: 1.45; }
.wallet-in-net { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.wallet-in-net img { width: 15px; height: 15px; border-radius: 50%; flex: none; }
.wallet-in-net em { font-style: normal; color: var(--text-dim); }
.wallet-in-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.wallet-in-ic.airdrop { color: oklch(0.84 0.16 88); background: oklch(0.84 0.17 88 / 0.13); }
.wallet-in-ic.swap { color: oklch(0.74 0.15 155); background: oklch(0.74 0.15 155 / 0.14); }
.wallet-in-ic.buy { color: var(--accent); background: var(--accent-bg); }
.wallet-in-mid { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wallet-in-label { font-size: 14px; font-weight: 500; color: var(--text); }
.wallet-in-mid small { font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }
.wallet-in-amt { font-size: 14px; font-weight: 600; color: oklch(0.74 0.15 155); white-space: nowrap; flex: none; }
.wallet-in-amt.out { color: var(--text); }
.wallet-in-amt.burn { color: oklch(0.7 0.19 25); }
.wallet-in-ic.raio { color: oklch(0.84 0.16 88); background: oklch(0.84 0.17 88 / 0.13); }
.wallet-in-ic.shelf { color: oklch(0.7 0.14 250); background: oklch(0.66 0.15 250 / 0.16); }
.wallet-in-ic.auc { color: oklch(0.72 0.16 330); background: oklch(0.68 0.17 330 / 0.16); }
.wallet-in-ic.burn { color: oklch(0.7 0.19 25); background: oklch(0.64 0.2 25 / 0.15); }
.wallet-in-ic.refund { color: oklch(0.74 0.15 155); background: oklch(0.74 0.15 155 / 0.15); }
.led-tag { font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.led-tag.tRev { color: var(--text-dim); }
.led-tag.tDef { color: oklch(0.72 0.16 330); }
.led-tag.tBurn { color: oklch(0.7 0.19 25); }
.led-tag.tCred { color: oklch(0.74 0.15 155); }
body:not(.theme-dark) .wallet-in-amt { color: oklch(0.5 0.13 155); }
body:not(.theme-dark) .wallet-in-amt.out { color: var(--text); }
body:not(.theme-dark) .wallet-in-amt.burn { color: oklch(0.5 0.17 25); }
.wallet-in-all { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: 10px; padding: 9px; background: none; border: 0; color: var(--accent); font-family: var(--font-mono, monospace); font-size: 12px; cursor: pointer; }
.led { padding: 2px 0 8px; }
.led-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px; }
.led-alloc { margin: 4px 0 16px; padding: 15px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 14px; }
.led-acts { display: flex; gap: 8px; padding: 2px 2px 14px; }
.led-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font, sans-serif); font-size: 13px; font-weight: 500; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 11px; padding: 11px; cursor: pointer; transition: background .14s, border-color .14s; }
.led-act:hover { background: var(--bg-elev-2, var(--bg-elev)); border-color: var(--border); }
.led-act.dep svg { color: oklch(0.74 0.15 155); }
.led-act.wd svg { color: var(--text-mute); }
.led-alloc-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--text); }
.led-alloc-tot { font-size: 12px; color: var(--text-dim); font-weight: 500; }
.led-alloc-tot-billed { color: var(--bat-green); font-weight: 700; }
.led-alloc-tot-billed svg { color: var(--bat-green); }
.led-bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; margin: 12px 0 13px; gap: 2px; background: var(--bg-base); }
.led-bar span { display: block; height: 100%; border-radius: 2px; }
.led-legend { display: flex; flex-direction: column; gap: 7px; }
.led-leg { display: flex; align-items: baseline; gap: 10px; }
.led-leg-dot { width: 9px; height: 9px; border-radius: 3px; margin-top: 4px; }
.led-leg-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.led-leg-top { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 10px; }
.led-leg-name { font-size: 12px; color: var(--text); font-weight: 500; flex: 1; min-width: 0; }
.led-leg-desc { font-size: 10.5px; color: var(--text-dim); font-weight: 400; line-height: 1.3; text-wrap: pretty; }
.led-leg-k { display: flex; align-items: baseline; flex: 1; min-width: 0; }
.led-leg-k small { color: var(--text-dim); font-weight: 400; margin-left: 6px; font-size: 10px; }
.led-leg-v { font-size: 12px; color: var(--text-mute); white-space: nowrap; flex: none; }
.dir-arr { width: 9px; height: 9px; vertical-align: -1px; margin-right: 2px; }
.led-filters { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 0 2px 14px; }
.svc-ic.manage { color: var(--accent); background: var(--accent-bg); }
.mg-panel-title { display: flex; align-items: center; gap: 7px; color: oklch(0.7 0.14 245); }
.mg-panel-handle { margin-left: auto; font-size: 10.5px; color: var(--text-dim); letter-spacing: 0; text-transform: none; }
/* 📖 V34.2 · A PORTA DO MANUAL DENTRO DO TÍTULO DO PAINEL — ⚠️ o `.set-group-man` nasceu para o
   `.set-group-h`, onde é IRMÃO do título e carrega a margem dele. Aqui ele vive DENTRO de um
   título que já tem margem própria: herdar empilharia 18px de respiro. ⛔ NÃO remover este reset.
   ⚠️ V34.3 · o `margin-left:auto` passou do handle (removido) para CÁ — é ele que empurra a porta
      para a direita, e sem isso ela cola no rótulo. ⛔ NÃO devolver o `auto` ao `.mg-panel-handle`
      se ele voltar: dois `auto` no mesmo flex dividem a sobra e nenhum dos dois encosta na borda. */
.mg-panel-title .set-group-man { margin: 0 0 0 auto; }
.mg-panel-badge { flex: none; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.72 0.16 150); background: oklch(0.66 0.16 152 / 0.16); border-radius: 999px; padding: 3px 9px; }
.role-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 14px; padding: 10px; border-radius: 11px; border: 1px dashed var(--border); background: none; color: var(--text-mute); font-family: var(--font-mono, monospace); font-size: 11.5px; cursor: pointer; transition: color .14s, border-color .14s; }
.role-toggle:hover { color: var(--text); border-color: var(--accent); }
.role-toggle b { color: var(--accent); font-weight: 600; }
.svc-manage .set-row-label { color: var(--accent); font-weight: 600; }
/* ── B2B (gerente instala/abastece serviço na carteira de um cliente) ── */
.svc-ic.b2b { color: oklch(0.62 0.16 250); background: oklch(0.62 0.16 250 / 0.15); }
.b2b-intro { font-size: 12.5px; line-height: 1.55; color: var(--text-mute); margin: 2px 2px 16px; }
.b2b-empty { font-size: 13px; color: var(--text-dim); padding: 16px; text-align: center; }
.b2b-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.b2b-avatar.lg { width: 44px; height: 44px; font-size: 15px; border-radius: 13px; }
.b2b-avatar.xl { width: 52px; height: 52px; font-size: 18px; border-radius: 15px; }
.b2b-client-hero { display: flex; align-items: center; gap: 14px; padding: 8px 2px 18px; }
.b2b-client-name { font-size: 18px; font-weight: 700; color: var(--text); }
.b2b-client-handle { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.token-box { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px; margin-top: 4px; display: flex; flex-direction: column; gap: 12px; }
.token-box-h { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.token-name { font-weight: 600; color: var(--text); letter-spacing: 0.02em; white-space: nowrap; }
.token-scope { margin-left: auto; color: oklch(0.7 0.14 245); letter-spacing: 0; text-transform: none; font-size: 11px; white-space: nowrap; background: oklch(0.7 0.14 245 / 0.12); border-radius: 999px; padding: 3px 10px; }
.token-intro { font-size: 12px; line-height: 1.5; color: var(--text-mute); margin: 10px 0 12px; }
.token-val { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; letter-spacing: 0.02em; color: var(--text); background: var(--bg-base); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 13px; box-sizing: border-box; }
.token-acts { display: flex; gap: 8px; }
.token-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); background: var(--accent-bg); border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: filter 0.14s; }
.token-act:hover { filter: brightness(1.08); }
.token-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 11.5px; color: var(--text-dim); }
.token-rotate { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; font-weight: 600; color: oklch(0.7 0.19 25); background: oklch(0.7 0.19 25 / 0.12); border: 0; border-radius: 9px; padding: 8px 13px; cursor: pointer; transition: background 0.14s; }
.token-rotate:hover { background: oklch(0.7 0.19 25 / 0.2); }
.token-key-ic { color: oklch(0.62 0.16 300); background: oklch(0.62 0.16 300 / 0.16) !important; }
.token-governs { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); }
.token-governs-l { text-transform: uppercase; letter-spacing: 0.08em; padding-top: 4px; }
.token-governs-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.token-gov-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text); background: var(--bg-base); border: 1px solid var(--border-soft); border-radius: 999px; padding: 3px 10px 3px 8px; }
.token-gov-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.inst-card-logo.sm { width: 38px; height: 38px; border-radius: 10px; }
.inst-card-logo.sm img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.b2b-svc-opt { cursor: pointer; }
.b2b-svc-opt.on { background: var(--accent-bg); }
.b2b-svc-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.b2b-svc-radio.on { background: var(--accent); border-color: var(--accent); }
.svc-ic.apitoken { color: oklch(0.5 0.13 300); background: oklch(0.5 0.13 300 / 0.14); }
.svc-lock { flex: none; margin-left: auto; color: var(--text-dim); display: inline-flex; }
.svc-lock + .set-chev, .svc-lock ~ svg { margin-left: 6px; }
.tok-gate { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 6px 6px; }
.tok-gate-title { font-size: 19px; font-weight: 700; color: var(--text); margin: 12px 0 2px; }
.tok-gate-codelabel { font-size: 11.5px; color: var(--text-dim); margin: 16px 0 -4px; letter-spacing: 0.02em; }
.tok-gate-steps { display: flex; align-items: center; gap: 10px; margin: 2px 0 18px; }
.tg-step { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 999px; padding: 5px 12px 5px 9px; }
.tg-step::before { content: ""; }
.tg-step.on { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 50%, transparent); background: var(--accent-bg); }
.tg-step.done { color: oklch(0.58 0.16 150); border-color: oklch(0.58 0.16 150 / 0.4); background: oklch(0.58 0.16 150 / 0.1); }
.tg-sep { flex: 1; max-width: 34px; height: 1px; background: var(--border); }
.set-stepup-hero-wa { color: oklch(0.55 0.16 150); }
.set-stepup-hero-wa .set-stepup-ic { background: oklch(0.55 0.16 150 / 0.13); color: oklch(0.5 0.16 150); }
.set-cta-wa { background: oklch(0.56 0.15 150) !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; }
.set-cta-wa:hover { filter: brightness(1.05); }
.tok-gate-targets { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 4px; }
.tok-gate-target { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-mute); background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 999px; padding: 6px 13px; }
.tok-warn { display: flex; gap: 10px; align-items: flex-start; background: oklch(0.82 0.13 75 / 0.13); border: 1px solid oklch(0.78 0.14 75 / 0.4); border-radius: 13px; padding: 13px 15px; margin: 0 0 16px; }
.tok-warn-ic { flex: none; color: oklch(0.62 0.16 60); margin-top: 1px; }
.tok-warn p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-mute); }
.token-box + .token-box { margin-top: 12px; }
.inst-card-logo.xs { width: 24px; height: 24px; border-radius: 7px; margin-right: 2px; }
.inst-card-logo.xs img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.mg-field { margin-bottom: 14px; }
.mg-logo-field { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.mg-logo-drop { width: 72px; height: 72px; flex: none; border-radius: 16px; border: 1px dashed var(--border); background: var(--bg-elev); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: border-color .14s; }
.mg-logo-drop:hover { border-color: var(--accent); }
.mg-logo-ph { color: var(--text-dim); }
.mg-logo-img { width: 100%; height: 100%; object-fit: cover; }
.mg-logo-meta { min-width: 0; flex: 1; }
.mg-logo-meta .mg-label { margin-bottom: 4px; }
.mg-logo-meta .mg-hint { margin: 0 0 8px; }
.mg-logo-btn { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 9px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--accent); font-family: var(--font, sans-serif); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mg-logo-btn:hover { background: var(--accent-bg); }
.mg-label { display: flex; align-items: baseline; justify-content: space-between; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px; }
.mg-count { font-size: 10px; letter-spacing: 0; color: var(--text-dim); opacity: 0.7; }
.mg-count.full { color: oklch(0.7 0.18 25); opacity: 1; }
.mg-ta-wrap { position: relative; }
.mg-count-ta { position: absolute; right: 10px; bottom: 8px; background: var(--bg-base); padding: 1px 4px; border-radius: 5px; }
.mg-input { width: 100%; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 11px; padding: 11px 13px; font-family: var(--font, sans-serif); font-size: 14px; color: var(--text); outline: none; }
.mg-input:focus { border-color: var(--accent); }
.mg-textarea { resize: none; line-height: 1.45; }
.mg-hint { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.mg-op { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 14px; padding: 13px; margin-bottom: 11px; display: flex; flex-direction: column; gap: 9px; }
.mg-op-head { display: flex; align-items: center; justify-content: space-between; }
.mg-op-n { font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em; }
.mg-op-rm { background: none; border: 0; color: oklch(0.7 0.18 25); font-family: var(--font, sans-serif); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.mg-op .mg-input { background: var(--bg-base); }
.mg-op-row { display: flex; gap: 8px; }
.mg-op-row > .mg-input:first-child { flex: 1; min-width: 0; }
.mg-price-wrap { display: inline-flex; align-items: center; gap: 5px; flex: none; background: var(--bg-base); border: 1px solid var(--border-soft); border-radius: 11px; padding: 0 12px; color: oklch(0.84 0.16 88); }
.mg-price { width: 72px; border: 0 !important; background: transparent !important; padding: 11px 0 !important; text-align: right; }
.mg-colors { display: flex; gap: 8px; }
.mg-autocolor { display: flex; align-items: center; gap: 8px; }
.mg-autocolor-dot { width: 18px; height: 18px; border-radius: 6px; flex: none; }
.mg-autocolor-l { font-size: 11px; color: var(--text-dim); }
.mg-color { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.mg-color.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg-elev) inset; }
.mg-color.taken { opacity: 0.25; cursor: not-allowed; position: relative; }
.mg-addop { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 11px; margin-bottom: 4px; border-radius: 12px; border: 1px dashed var(--border); background: none; color: var(--accent); font-family: var(--font, sans-serif); font-size: 13px; font-weight: 500; cursor: pointer; }
.mg-icon-pick { display: flex; align-items: center; gap: 9px; }
.mg-icon-preview { width: 34px; height: 34px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.mg-icon-pick-l { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.mg-icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.mg-icon-cell { aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--border-soft); background: var(--bg-base); color: var(--text-mute); cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.mg-icon-cell:hover { color: var(--text); border-color: var(--border); }
.mg-icon-cell.on { background: var(--bg-elev); border-width: 1.5px; }
/* 💠 COMO COBRA — tipo de cobrança da operação (V12, 06/09). Vive dentro do cartão `.mg-op`.
   ⚠️ Alvo tocável ≥40px em TODO chip, tom e botão: o cartão já era denso e recebeu quatro
      campos — a medida é o telefone em 375px, não o desktop.
   ⚠️ Âmbar = o mesmo da caixa de preço (`.mg-price-wrap`), porque cobrar na hora É o preço
      saindo. Azul frio `oklch(0.66 0.15 250)` = a cor de "Clique em Link" no X-Bio e do
      balde shelf no ledger — valor que fica parado esperando. ⛔ NÃO inventar cor nova. */
.mg-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mg-kind-b { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 46px; padding: 8px 11px; border-radius: 11px; border: 1px solid var(--border-soft); background: var(--bg-base); color: var(--text-mute); cursor: pointer; text-align: left; transition: color .12s, border-color .12s, background .12s; }
.mg-kind-b b { font-family: var(--font, sans-serif); font-size: 13px; font-weight: 600; line-height: 1.2; }
.mg-kind-b em { font-style: normal; font-size: 10px; letter-spacing: 0.01em; line-height: 1.25; opacity: 0.9; }
.mg-kind-b:hover { color: var(--text); border-color: var(--border); }
.mg-kind-b.direct[aria-pressed="true"] { color: oklch(0.84 0.16 88); border-color: oklch(0.84 0.16 88); background: oklch(0.84 0.16 88 / 0.12); }
.mg-kind-b.freeze[aria-pressed="true"] { color: oklch(0.74 0.13 250); border-color: oklch(0.66 0.15 250); background: oklch(0.66 0.15 250 / 0.15); }
.mg-kind-tag { display: inline-flex; align-items: center; flex: none; height: 34px; padding: 0 12px; border-radius: 9px; font-size: 11.5px; font-weight: 600; }
.mg-kind-tag.direct { color: oklch(0.84 0.16 88); background: oklch(0.84 0.16 88 / 0.12); }
.mg-kind-tag.freeze { color: oklch(0.74 0.13 250); background: oklch(0.66 0.15 250 / 0.15); }
.mg-frz { display: flex; flex-direction: column; gap: 9px; padding-left: 12px; border-left: 2px solid oklch(0.66 0.15 250); }
.mg-frz-l { display: flex; align-items: baseline; gap: 7px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.mg-frz-l em { font-style: normal; letter-spacing: 0.02em; text-transform: none; color: oklch(0.74 0.13 250); }
/* 💰 "da minha parte" — o qualificador que diz sobre O QUÊ o porcento incide (V18).
   ⚠️ Fica em tom apagado, ⛔ não na cor do congelamento: ele qualifica o rótulo, não é um
      segundo aviso disputando o olho com o "obrigatório" do prazo. */
.mg-frz-l em.mine { color: var(--text-dim); }
/* o PING que o cliente recebe — é ELE que é verdade nos dois lados, e por isso ganha a cor
   do texto cheio enquanto o porcento fica nos botões */
.mg-pct-ping { margin: -2px 0 0; font-size: 11.5px; font-weight: 600; color: oklch(0.78 0.16 152); }
.mg-ttl { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-ttl-c { flex: 1 1 50px; min-height: 40px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-base); color: var(--text-mute); font-size: 12px; font-weight: 600; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.mg-ttl-c:hover { color: var(--text); border-color: var(--border); }
.mg-ttl-c[aria-pressed="true"] { color: oklch(0.74 0.13 250); border-color: oklch(0.66 0.15 250); background: oklch(0.66 0.15 250 / 0.15); }
.mg-frz-bad { margin: -2px 0 0; font-size: 11px; color: oklch(0.74 0.18 25); }
.mg-cash { display: flex; align-items: flex-start; gap: 9px; min-height: 40px; cursor: pointer; }
.mg-cash input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: oklch(0.66 0.15 250); cursor: pointer; }
.mg-cash span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mg-cash b { font-size: 13px; font-weight: 600; color: var(--text); }
.mg-cash em { font-style: normal; font-size: 11px; line-height: 1.35; color: var(--text-mute); }
/* ⛔ CAIXA DESABILITADA: preço pequeno demais para devolver PING inteiro. ⚠️ Ela CONTINUA
   legível (opacidade em 0.62, ⛔ não 0.3) porque a linha de apoio é a explicação — esconder o
   texto de um controle desabilitado é desabilitar sem dizer por quê. */
.mg-cash.off { cursor: default; }
.mg-cash.off b { color: var(--text-mute); }
.mg-cash.off em { color: oklch(0.84 0.16 88); }
.mg-cash.off input { opacity: 0.45; cursor: default; }
.mg-pct { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mg-pct-c { min-height: 40px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-base); color: var(--text-mute); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.mg-pct-c:hover { color: var(--text); border-color: var(--border); }
.mg-pct-c[aria-pressed="true"] { color: oklch(0.74 0.13 250); border-color: oklch(0.66 0.15 250); background: oklch(0.66 0.15 250 / 0.15); }
.mg-echo { margin: 2px 0 0; padding: 9px 11px; border-radius: 11px; border: 1px dashed var(--border); font-size: 11.5px; line-height: 1.45; color: var(--text-mute); text-wrap: pretty; }
.mg-op.is-bad { border-color: oklch(0.62 0.17 25); }
.mg-blocked { margin: 0 0 8px; font-size: 11.5px; color: oklch(0.74 0.18 25); }
.mg-addop:hover { background: var(--accent-bg); }
.mg-addop:disabled { opacity: 0.4; cursor: not-allowed; border-style: solid; }
.mg-addop:disabled:hover { background: none; }
.led-filter-sel { position: relative; display: flex; align-items: center; margin-bottom: 4px; }
.led-filter-dot { position: absolute; left: 13px; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; transition: opacity .14s; }
.led-select { -webkit-appearance: none; appearance: none; width: 100%; padding: 11px 38px 11px 30px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--border-soft); color: var(--text); font-family: var(--font, sans-serif); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.led-select:focus { outline: none; border-color: var(--accent); }
.led-filter-sel:has(.led-filter-dot[style*="opacity: 0"]) .led-select { padding-left: 14px; }
.led-select-chev { position: absolute; right: 13px; color: var(--text-dim); pointer-events: none; }
.led-filter-desc { font-size: 12px; line-height: 1.45; color: var(--text-dim); padding: 2px 4px 12px; }
.led-filters::-webkit-scrollbar { display: none; }
.led-chip { flex: none; display: inline-flex; align-items: center; font-family: var(--font, sans-serif); font-size: 12px; font-weight: 500; color: var(--text-mute); background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap; transition: color .14s, border-color .14s, background .14s; }
.led-chip:hover { color: var(--text); }
.led-chip.on { color: var(--text); border-color: transparent; background: oklch(1 0 0 / 0.12); }
.led-chip-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; flex: none; }
body:not(.theme-dark) .led-chip.on { background: oklch(0 0 0 / 0.08); }
.led-openpost { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--blue, #0A84FF); text-decoration: none; }
.led-openpost:hover { text-decoration: underline; }
.led-det-card { display: flex; gap: 11px; align-items: center; width: calc(100% - 28px); text-align: left; background: var(--bg-base); border: 1px solid var(--border-soft); border-radius: 12px; padding: 9px; margin: 2px 14px 10px; cursor: pointer; font: inherit; color: inherit; transition: border-color .14s, background .14s; }
.led-det-dir { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); padding: 2px 2px 6px; }
.wallet-in-amtcol { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.svc-ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: oklch(0.68 0.15 230); background: oklch(0.70 0.15 230 / 0.15); }
/* 🖼️ variante ARTE da fileira — o par de `.svc-profile-pic.art` (busque lá o porquê).
   ⚠️ As DUAS pontas do mesmo Hub usam a MESMA imagem: fileira e retrato dentro da conta. Tocar
      num ícone e chegar em outro é o tipo de incoerência que faz a interface parecer remendo.
   ⛔ NÃO pintar fundo nem filete sob um .webp opaco: vira borda dupla suja de 1px. */
.svc-ic.art { background: none; overflow: hidden; }
.svc-ic.art img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.svc-bal { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: oklch(0.84 0.16 88); white-space: nowrap; flex: none; }
.svc-bat { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; white-space: nowrap; flex: none; }
.svc-bat-pct { text-align: right; font-variant-numeric: tabular-nums; }
.svc-bat svg { flex: none; }
.svc-official { opacity: 0.96; }
.svc-official-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: oklch(0.7 0.13 250); background: oklch(0.62 0.16 250 / 0.14); border: 1px solid oklch(0.62 0.16 250 / 0.28); padding: 3px 8px; border-radius: 999px; flex: none; }
.svc-official-badge svg { flex: none; }
.hd-svc-glyph { display: inline-flex; align-items: center; vertical-align: -4px; margin-right: 8px; color: oklch(0.68 0.15 230); }
.set-subview .set-sheet-head h2 { display: inline-flex; align-items: center; }
.hd-gear { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; margin-left: 8px; color: var(--text-mute); background: none; border: 0; cursor: pointer; transition: color .14s, background .14s; }
.hd-gear:hover { color: var(--text); background: var(--bg-elev); }
.bat-hero { padding: 6px 2px 10px; }
/* ⚡⚡ O RITMO DA CONTA DE SERVIÇO — velocímetro · projeção · tira de simulação (V14, 06/09).
   ⚠️ A COTA reusa `.bat-hero`/`.bat-shell`/`.bat-fill` sem uma regra nova: ela É uma
      terceira bateria, e componente próprio para medir a mesma coisa é que faria as três
      parecerem coisas diferentes. ⚠️ "Cota", ⛔ nunca "franquia" — ver o ATO 1 do V15.
   🔑 O VELOCÍMETRO É DELIBERADAMENTE O OPOSTO DE UM TANQUE: talhos e uma AGULHA, e ⛔ NENHUM
      preenchimento da esquerda. Medir estoque (quanto resta) e medir velocidade (a que ritmo
      sai) são coisas diferentes, e a forma tem de dizer qual das duas está na tela.
   ⚠️ Esquerda = devagar, direita = rápido, como qualquer velocímetro. ⛔ NÃO inverter. */
.svc-spd { margin: 2px 0 16px; padding: 14px 15px 12px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 14px; }
.svc-spd-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.svc-spd-h > span { min-width: 0; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); }
/* ⚠️ `nowrap` + `flex: none`: a etiqueta é um ESTADO de duas palavras e não pode quebrar —
   quebrada, ela cresce para duas linhas dentro de um cabeçalho de 20px e invade a régua
   (visto na captura, com fonte de fallback mais larga). Quem cede é o rótulo à esquerda. */
.svc-spd-tag { flex: none; white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 7px; color: oklch(0.74 0.13 250); background: oklch(0.66 0.15 250 / 0.14); }
.svc-spd-tag.out { color: oklch(0.84 0.16 88); background: oklch(0.84 0.16 88 / 0.14); }
.svc-spd-scale { position: relative; height: 22px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 10%); background-position: 0 50%; background-size: 100% 9px; background-repeat: repeat-x; }
.svc-spd-scale::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border-soft); }
.svc-spd-needle { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; background: oklch(0.74 0.13 250); box-shadow: 0 0 0 3px oklch(0.66 0.15 250 / 0.18); transition: left .22s cubic-bezier(.3,0,.2,1); }
.svc-spd-needle.out { background: oklch(0.84 0.16 88); box-shadow: 0 0 0 3px oklch(0.84 0.16 88 / 0.2); }
.svc-spd-read { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--text); text-wrap: pretty; }
.svc-spd-read.out { color: oklch(0.84 0.16 88); }
.svc-spd-q { display: inline-flex; gap: 3px; flex: none; }
.svc-spd-q i { width: 5px; height: 14px; border-radius: 2px; background: oklch(0.66 0.15 250); opacity: 0.85; }
/* 💬 A PROJEÇÃO — a peça que impede a fatura-surpresa. Fica no pé do cartão, em prosa. */
.svc-proj { margin: 9px 0 0; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12.5px; line-height: 1.5; color: var(--text-mute); text-wrap: pretty; }
.svc-sim { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--border); }
.svc-sim-l { flex: none; width: 100%; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.svc-sim-c { flex: 1 1 46px; min-height: 40px; padding: 0 6px; border-radius: 9px; border: 1px dashed var(--border); background: transparent; color: var(--text-dim); font-size: 11px; font-weight: 600; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.svc-sim-c.wide { flex: 1 1 100%; }
.svc-sim-c:hover { color: var(--text); border-color: var(--border-soft); }
.svc-sim-c[aria-pressed="true"] { color: var(--text); border-style: solid; border-color: var(--border); background: var(--bg-base); }
/* 🔒 O SALDO EM TRÊS LEITURAS — disponível · retido · total (V15, ATO 3a).
   🔑 O retido tem NOME PRÓPRIO e cor própria (o azul do congelamento, o mesmo do `freeze`
      no cadastro da operação): ⛔ não é gasto (vermelho mentiria) e ⛔ não se esconde dentro
      do saldo (aí a pessoa não entende por que não consegue usar tudo).
   ⚠️ Grade de 3 colunas iguais: em 375px os três cabem numa linha, e o total fica à
      direita porque é a soma. ⛔ NÃO usar flex com wrap — dois em cima e um embaixo faria
      parecer que o de baixo é de outra natureza. */
/* 🐞 `grid-template-columns: minmax(0, 1fr)` É OBRIGATÓRIO AQUI, e a razão é uma armadilha
   do grid que custou um estouro de 240px na verificação (V15, medido em 375px): `display:
   grid` **sem** colunas declaradas cria uma coluna implícita de largura `auto`, e track `auto`
   se dimensiona por **`max-content`** — a nota longa deste cartão esticava a coluna para
   576px dentro de um container de 330px, e a linha dos três números herdava essa largura e
   vazava para fora da gaveta. ⛔ NÃO remover o `minmax(0, 1fr)`: sem ele o defeito volta, e
   volta silencioso (o cartão continua com a largura certa; só o conteúdo escapa).
   🔴 E O NOME É `.svc-hold`, ⛔ NUNCA `.svc-bal`: `.svc-bal` JÁ EXISTE nesta folha (acima,
   no medidor âmbar da FILEIRA de conta, com `white-space: nowrap` e um override de tema
   claro). A colisão não se anunciou como colisão — ela apareceu como um **defeito de quebra
   de texto três camadas adiante**: o `nowrap` herdado fazia a nota deste cartão não quebrar
   e vazar 275px. ⚠️ Nome de classe novo em folha compartilhada por ~40 páginas se confere
   com grep ANTES de escrever. */
.svc-hold { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin: 0 2px 14px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 14px; }
.svc-hold-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.svc-hold-i { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.svc-hold-i em { font-style: normal; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.svc-hold-i b { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.svc-hold-i.held em, .svc-hold-i.held b { color: oklch(0.74 0.13 250); }
.svc-hold-i.tot { text-align: right; }
.svc-hold-note { margin: 0; padding-top: 9px; border-top: 1px solid var(--border-soft); font-size: 11.5px; line-height: 1.45; color: var(--text-mute); text-wrap: pretty; }
/* ⏳ A FILA DE CUSTÓDIAS. ⚠️ Rola DENTRO do próprio container (`max-height` + `overflow-y`):
   fila longa ⛔ não pode empurrar a página nem esconder a nota do pé. */
.svc-cust { margin: 0 2px 16px; padding: 13px 14px 11px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 14px; }
/* ⚠️ `flex-wrap` aqui é o mesmo aprendizado da etiqueta do velocímetro (V14): com fonte mais
   larga ou tradução mais longa (o espanhol é o pior caso), rótulo + contagem não cabem na
   mesma linha. Com `wrap` a contagem DESCE inteira para a linha seguinte; sem ele, ela se
   espremia e quebrava no meio. ⛔ NÃO trocar por `nowrap` nos dois: aí um dos dois vaza. */
.svc-cust-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
.svc-cust-h > span { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); }
.svc-cust-h em { flex: none; font-style: normal; font-size: 11px; font-weight: 600; color: oklch(0.74 0.13 250); }
.svc-cust-h.done { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.svc-cust-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; max-height: 216px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.svc-cust-list::-webkit-scrollbar { width: 0; }
.svc-cust-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; min-height: 44px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.svc-cust-row:last-child { border-bottom: 0; }
.svc-cust-op { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--text); }
.svc-cust-op small { font-size: 10.5px; color: var(--text-dim); }
.svc-cust-v { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text); }
/* ⚠️ O que está perto do fim ganha o ÂMBAR da casa ("atenção sem falha").
   ⛔ NÃO vermelho de erro: não é erro, é relógio.
   ⚠️ `nowrap` no prazo: é um relógio de três palavras e ⛔ não pode quebrar — a linha `.soon`
      usa peso 600, que a alarga o bastante para quebrar "vence em 4 min" em duas linhas
      (visto na captura, com fonte de fallback mais larga). Mesmo aprendizado da etiqueta
      do velocímetro na V14. */
.svc-cust-due { grid-column: 2; justify-self: end; white-space: nowrap; font-size: 11px; color: var(--text-mute); }
.svc-cust-row.soon .svc-cust-due { color: oklch(0.84 0.16 88); font-weight: 600; }
.svc-cust-row.soon .svc-cust-v { color: oklch(0.84 0.16 88); }
.svc-cust-st { grid-column: 2; justify-self: end; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.svc-cust-st.claim { color: oklch(0.78 0.16 152); background: oklch(0.7 0.16 152 / 0.14); }
.svc-cust-st.refund { color: oklch(0.74 0.13 250); background: oklch(0.66 0.15 250 / 0.14); }
.svc-cust-st.expire { color: oklch(0.84 0.16 88); background: oklch(0.84 0.16 88 / 0.14); }
.svc-cust-st.hold { color: var(--text-mute); background: var(--bg-base); }
.svc-cust-empty { margin: 0; font-size: 11.5px; color: var(--text-dim); }
.svc-cust-note { margin: 11px 0 0; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 11.5px; line-height: 1.45; color: var(--text-mute); text-wrap: pretty; }
.led-bat { padding: 4px 2px 14px; display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
button.led-bat:hover { background: oklch(1 0 0 / 0.025); border-radius: 12px; }
.led-desc { font-size: 12.5px; line-height: 1.45; color: var(--text-mute); padding: 0 2px 12px; }
.svc-profile { display: flex; gap: 12px; align-items: center; padding: 2px 2px 16px; }
.svc-profile-pic { width: 60px; height: 60px; border-radius: 15px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: oklch(0.7 0.15 230); background: oklch(0.66 0.16 235 / 0.16); box-shadow: inset 0 0 0 1px oklch(0.66 0.16 235 / 0.22); }
/* 🖼️ variante ARTE: quando o retrato é o ícone oficial da loja (webp) em vez de um glifo.
   ⚠️ A arte JÁ TEM fundo e cantos próprios, então o quadro tem de sair do caminho — fundo e
      filete pintados por baixo de um .webp opaco viram uma borda dupla suja de 1px.
   ⛔ NÃO usar `object-fit: cover` aqui: os ícones da loja vêm quadrados e com respiro
      desenhado; `cover` cortaria justamente a margem que faz o ícone respirar.
   ⚠️ E a ARTE é MAIOR que o glifo (72px vs 60px, Tony 30/08): o ícone da loja tem respiro
      desenhado por dentro, então na mesma caixa ele parece menor que um SVG que usa a caixa
      toda. Crescer a caixa é o que iguala o peso ÓPTICO — ⛔ e por isso o tamanho vive na
      variante, não no `.svc-profile-pic` (o glifo a 72px ficaria grande demais). */
.svc-profile-pic.art { width: 72px; height: 72px; border-radius: 17px; background: none; box-shadow: none; overflow: hidden; }
.svc-profile-pic.art img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.svc-profile-meta { min-width: 0; flex: 1; }
.svc-profile-desc { font-size: 12px; line-height: 1.4; color: var(--text-mute); margin: 0; }
.svc-profile-support { display: inline-flex; align-items: center; gap: 5px; margin-top: 0; line-height: 1.4; font-size: 11.5px; color: var(--blue, #0A84FF); text-decoration: none; }
.svc-profile-support:hover { text-decoration: underline; }
.svc-uninstall { display: block; width: 100%; margin-top: 24px; padding: 12px; background: none; border: 0; color: oklch(0.7 0.19 25); font-family: var(--font, sans-serif); font-size: 13.5px; font-weight: 500; cursor: pointer; border-radius: 11px; transition: background .14s; }
.svc-uninstall:hover { background: oklch(0.64 0.2 25 / 0.1); }
.rx-card-ic.uninstall { color: oklch(0.7 0.19 25); background: oklch(0.64 0.2 25 / 0.14); box-shadow: 0 0 22px -4px oklch(0.64 0.2 25 / 0.4), inset 0 0 0 1px oklch(0.64 0.2 25 / 0.25); }
.svc-uninstall-note { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); margin-bottom: 18px; }
.rx-btn-danger { flex: 1; padding: 11px; border-radius: 11px; font-family: var(--font, sans-serif); font-size: 13.5px; font-weight: 600; cursor: pointer; background: linear-gradient(180deg, oklch(0.64 0.2 25), oklch(0.56 0.2 25)); color: oklch(0.99 0.01 25); border: 0; }
.rx-btn-danger:hover { filter: brightness(1.06); }
.svc-ic.scribe { color: oklch(0.7 0.15 200); background: oklch(0.66 0.15 200 / 0.15); }
.svc-ic.install { color: var(--accent); background: var(--accent-bg); }
.svc-install .set-row-label { color: var(--accent); font-weight: 600; }
.inst-field { padding: 4px 0 6px; }
.inst-label { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.inst-id-row { display: flex; gap: 8px; }
.inst-input { flex: 1; min-width: 0; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 11px; padding: 11px 13px; font-size: 15px; color: var(--text); outline: none; letter-spacing: 0.04em; }
.inst-input:focus { border-color: var(--accent); }
.inst-find { flex: none; padding: 0 18px; border-radius: 11px; border: 0; background: var(--accent); color: oklch(0.99 0 0); font-family: var(--font, sans-serif); font-size: 14px; font-weight: 600; cursor: pointer; }
.inst-hint { font-size: 11px; line-height: 1.45; color: var(--text-dim); margin-top: 9px; }
.inst-notfound { font-size: 12.5px; color: oklch(0.7 0.19 25); padding: 6px 2px; }
.inst-card { display: flex; align-items: center; gap: 12px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 14px; padding: 13px; margin: 14px 0 0; }
.inst-card-logo { width: 44px; height: 44px; border-radius: 11px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: oklch(0.7 0.15 200); background: oklch(0.66 0.15 200 / 0.15); }
.inst-card-meta .t { font-size: 16px; font-weight: 600; color: var(--text); }
.inst-card-meta .h { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.inst-desc { font-size: 13px; line-height: 1.5; color: var(--text-mute); margin: 11px 2px 4px; }
.inst-price { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: baseline; padding: 11px 14px; }
.inst-price-meta { display: contents; }
.inst-price-d { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }
.inst-price-k { grid-column: 1; font-size: 13.5px; color: var(--text); }
.inst-price-v { grid-column: 2; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: oklch(0.84 0.16 88); }
body:not(.theme-dark) .inst-price-v { color: oklch(0.5 0.13 70); }
.inst-perm { display: flex; flex-direction: column; gap: 7px; background: oklch(0.66 0.15 250 / 0.1); border: 1px solid oklch(0.66 0.15 250 / 0.22); border-radius: 13px; padding: 13px 14px; margin: 16px 0 4px; }
.inst-perm-h { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.7 0.14 245); font-weight: 600; }
.inst-perm p { font-size: 12.5px; line-height: 1.55; color: var(--text-mute); }
.bat-shell { height: 24px; border-radius: 8px; background: var(--bg-base); border: 1px solid var(--border-soft); overflow: hidden; }
.bat-fill { height: 100%; background: linear-gradient(90deg, oklch(0.82 0.17 88), oklch(0.78 0.16 86)); border-radius: 7px 4px 4px 7px; transition: width .3s; min-width: 4px; }
.bat-fill.charging { transition: width 3s cubic-bezier(.3,0,.2,1); }
/* 🔴 A SOBRECARGA (V21) — o estado que a barra não sabia desenhar. O produto **promete 904%**
   (`batCeilOffD`) e desenhava 100%: a 130% a barra ficava IDÊNTICA à cheia.
   🔑 **Acima de 100% a sobrecarga vira TEXTURA, ⛔ não comprimento.** A barra satura cheia e
      ganha listras diagonais correndo + um halo verde pulsando. ⛔ NÃO transformar em
      comprimento: a 904% seriam nove larguras, e a barra atropelaria a folha justamente no
      caso que a tela mais precisa mostrar.
   🔑 **E O SINAL É BINÁRIO** (Tony, 09/09): ou passou de 100%, ou não. ⛔ NADA é graduado —
      130% e 904% ficam IGUAIS, porque **quem diz o tamanho do excesso é o número ao lado**
      ("250%"), e a barra só precisa dizer *que* passou. ⚠️ Havia uma escala logarítmica aqui
      e ela estava errada: fazia 130% ficar quase invisível, ou seja o caso mais comum de
      sobrecarga era o que menos se via.
   ⚠️ O contorno também acende — é o que garante que 100% e 130% se distingam **sem depender da
      textura**, que some em tela pequena ou em modo de alto contraste. Dois sinais, ⛔ não um.
   ⚠️ As listras são `background-image` SOBRE o gradiente que vem inline: por isso a regra usa
      `background-image` e ⛔ não `background`, que apagaria a cor da faixa. */
.bat-shell.over { border-color: oklch(0.78 0.16 152 / 0.85); animation: bat-glow 2.8s ease-in-out infinite; }
/* 🐞 A camada da listra é um ELEMENTO (`.bat-ov`), ⛔ não `background-image` no `.bat-fill`:
   a cor da faixa vem inline do JS, e inline vence stylesheet — a regra perdia em silêncio.
   ⚠️ Os valores são CONSTANTES (o sinal é binário) — ⛔ não reintroduzir `--ov` nem escala. */
.bat-fill.over { border-radius: 7px; position: relative; overflow: hidden; }
.bat-ov { position: absolute; inset: 0; display: block; background-image: repeating-linear-gradient(115deg, oklch(1 0 0 / 0.42) 0 5px, transparent 5px 12px); background-size: 200% 100%; animation: bat-ov-run 3.4s linear infinite; }
.theme-dark .bat-ov { background-image: repeating-linear-gradient(115deg, oklch(1 0 0 / 0.34) 0 5px, transparent 5px 12px); }
/* 🐞 V23 ATO 0.1 — sobrava um `)` depois do `0.34` (fechava o gradiente cedo, o resto virava
   lixo e o navegador descartava a declaração INTEIRA — mesmo modo de falhar que o V21 já
   documentou: nenhum erro, nenhum aviso, só o pixel ausente). Era a ÚNICA linha desbalanceada
   do arquivo. ⛔ NÃO reintroduzir o parêntese: o escuro tem de ficar em 0.34, ⛔ não em 0.42. */
/* ⚡ AS LISTRAS CORREM, e o brilho pulsa (09/09). Sobrecarga é energia em EXCESSO circulando —
   parada, a listra parecia textura decorativa; correndo, ela diz "está passando corrente".
   🔑 **O MOVIMENTO É BINÁRIO: ou passou de 100%, ou não.** ⛔ NÃO escalar a velocidade com o
      excesso — nem um pouco. 250% e 904% correm IGUAL. Duas razões: (a) quem mede o tamanho do
      excesso é o **número** ao lado da barra, e duas peças medindo a mesma coisa é redundância
      que dá margem a divergir; (b) a 904% uma listra proporcional viraria borrão ilegível, e o
      extremo é o caso que a tela mais precisa mostrar.
   ⚠️ Ritmo LENTO (3,4s a volta) de propósito: é bateria carregada além do teto, ⛔ não
      progresso nem carregamento. Rápido, lia como "processando" e cansava o olho numa tela de
      configuração, onde a pessoa fica.
   ⚠️ `background-position`, ⛔ não `transform`: a listra é um padrão repetido, então deslocar a
      posição em 100% do tile emenda perfeito e ⛔ não exige um segundo nó para o overflow.
   ♿ `prefers-reduced-motion` para as duas: sobrecarga é ESTADO, ⛔ não aviso — quem pediu
      menos movimento continua vendo a listra e o brilho, só sem a animação. */
@keyframes bat-ov-run { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bat-glow { 0%, 100% { box-shadow: 0 0 0 1px oklch(0.78 0.16 152 / 0.42), 0 0 6px oklch(0.8 0.19 150 / 0.36); } 50% { box-shadow: 0 0 0 1px oklch(0.82 0.18 152 / 0.7), 0 0 14px oklch(0.82 0.2 150 / 0.66); } }
@media (prefers-reduced-motion: reduce) { .bat-ov { animation: none; } .bat-shell.over { animation: none; } }
/* 🔴 A MINI-BARRA DO CARTÃO, EM SOBRECARGA (V21) — mesma doutrina das barras grandes, aplicada
   ao vocabulário próprio do cartão da fita. ⚠️ O cartão é pequeno: aqui a listra fica mais
   apertada (4px) para ainda se ler a 375px. ⛔ Não crescer em comprimento. */
.ft-bbat-sh.over > i { background-image: repeating-linear-gradient(115deg, oklch(1 0 0 / 0.4) 0 4px, transparent 4px 9px); background-size: 200% 100%; animation: bat-ov-run 3.4s linear infinite; }
.ft-bbat-sh.over { box-shadow: inset 0 0 0 1px oklch(0.78 0.16 152 / 0.7); }
/* 🎚 O REGULADOR — cada ponta é uma SEÇÃO fechada: automático → consequência → ato manual.
   ⚠️ A divisão é um filete acima do título, ⛔ não uma caixa em volta: caixa dentro de caixa
      (a seção já contém `.set-group`, que é caixa) engorda a folha e some em 375px. O filete
      + o respiro dizem "aqui começa outra ponta" com um pixel. */
.set-group-title.bat-end { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.bat-end + .set-group { margin-top: 10px; }
/* ⚠️ O ato manual abre a seção, logo abaixo do título: respiro suficiente para não colar no
   filete da divisão. ⛔ A regra antiga (`.bat-reg-eco + .set-sub-cta`) valia quando o botão
   FECHAVA a seção — não vale mais, o botão agora vem primeiro. */
.bat-end + .set-sub-cta, .bat-end + .bat-drain { margin-top: 12px; }
.set-sub-cta + .set-group, .bat-drain + .set-group, .set-sub-note + .set-group { margin-top: 12px; }
/* 🎚 O REGULADOR — o eco do teto e o aviso das duas pontas ligadas (V21). */
.bat-reg-eco { margin: 9px 2px 0; font-size: 11.5px; line-height: 1.5; color: oklch(0.55 0.14 155); text-wrap: pretty; }
.theme-dark .bat-reg-eco { color: oklch(0.78 0.15 152); }
.bat-reg-eco.off { color: var(--text-mute); }
/* ⚠️ `.soft` = nota de MECÂNICA (como o controle funciona), em cinza; o eco sem modificador é
   CONSEQUÊNCIA (o que vai acontecer com o seu dinheiro), em verde. Duas naturezas, duas
   cores — ⛔ não pintar nota de mecânica de verde: ela competiria com o eco que importa. */
.bat-reg-eco.soft { color: var(--text-mute); }
/* ⚠️ ÂMBAR de "atenção sem falha", ⛔ nunca vermelho: ligar as duas pontas é LEGÍTIMO — é o
   cliente afiliado. O aviso diz o PREÇO, ⛔ não proíbe. */
.bat-reg-warn { margin: 8px 2px 0; padding: 9px 11px; border-radius: 10px; border: 1px dashed color-mix(in oklab, oklch(0.7 0.15 88) 55%, transparent); font-size: 11.5px; line-height: 1.5; color: oklch(0.52 0.13 75); text-wrap: pretty; }
.theme-dark .bat-reg-warn { color: oklch(0.84 0.16 88); }
/* ⚠️ `gap` + `text-align: right` acrescentados no V14: a sub-linha da COTA é uma FRASE
   ("7.240 de 10.000 operações · renova em 12 dias"), não o par curto `carga / tamanho` das
   outras baterias — em 375px, e mais ainda em espanhol, ela quebrava em duas linhas e
   COLAVA no percentual (folga medida: 0px). ⛔ NÃO remover o gap: sem ele o defeito volta na
   primeira sub-linha longa, e quem a escrever não vai saber por quê. */
.bat-hero-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 9px; }
.bat-hero-sub { text-align: right; }
.bat-hero-pct { display: inline-flex; align-items: baseline; font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.bat-hero-pct svg { height: 0.78em; width: auto; flex: none; margin-right: 8px; }
.bat-hero-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); }
.bat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bat-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 11px 4px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--text-mute); font-family: var(--font-mono, monospace); font-size: 13px; font-weight: 600; cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.bat-chip svg { color: oklch(0.74 0.12 88); }
.bat-chip.on { color: var(--text); border-color: var(--accent); background: var(--accent-bg); }
.bat-chip.on svg { color: oklch(0.84 0.16 88); }
/* ── Campanha de airdrop (V23) — reusa .ev-camp/.profit-rows/.mg-input; só o que falta. ── */
.camp-row-val { display: inline-flex; align-items: center; gap: 2px; }
.camp-edit-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px; border-radius: 6px; color: var(--text-dim); background: transparent; border: none; cursor: pointer; }
.camp-edit-ic:hover { background: var(--bg-elev); color: var(--text); }
.camp-edit-row { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; }
.camp-edit-row .mg-input { flex: 1; }
.camp-state { font-size: 11px; font-weight: 600; color: var(--bat-green); white-space: nowrap; }
.camp-state.off { color: var(--text-mute); }
.camp-acts { display: flex; gap: 8px; margin-top: 10px; }
.camp-acts .set-sub-cta, .camp-acts .bat-drain { flex: 1; min-height: 40px; }
.camp-mgmt { margin-top: 14px; }
.bat-seg { display: flex; gap: 4px; width: 100%; }
/* ⚠️ `min-height: 40px` — medido em 34px na verificação do V21, abaixo do mínimo tocável.
   Vale para as DUAS pontas: é a mesma peça na frequência do piso e na escada do teto. */
.bat-seg-btn { flex: 1; min-height: 40px; padding: 9px 4px; border-radius: 9px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--text-mute); font-family: var(--font, sans-serif); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.bat-seg-btn.on { color: var(--text); border-color: var(--accent); background: var(--accent-bg); }
.bat-recharge { margin-top: 18px; }
.rx-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; background: oklch(0 0 0 / 0.62); backdrop-filter: blur(3px); animation: rxFade .2s ease; }
@keyframes rxFade { from { opacity: 0; } }
.rx-card { width: 100%; max-width: 366px; background: linear-gradient(180deg, oklch(0.2 0.024 280), oklch(0.145 0.018 280)); border: 1px solid oklch(0.84 0.17 88 / 0.22); border-radius: 22px; padding: 24px 22px; text-align: center; box-shadow: 0 30px 80px -20px oklch(0 0 0 / 0.75), 0 0 70px -8px oklch(0.84 0.17 88 / 0.3), inset 0 1px 0 oklch(1 0 0 / 0.05); animation: rxPop .26s cubic-bezier(.2,1.2,.3,1); }
@keyframes rxPop { from { transform: scale(.9); opacity: 0; } }
.rx-card-ic { display: inline-flex; width: 52px; height: 52px; border-radius: 14px; align-items: center; justify-content: center; color: oklch(0.87 0.17 90); background: oklch(0.84 0.17 88 / 0.14); box-shadow: 0 0 22px -4px oklch(0.84 0.17 88 / 0.4), inset 0 0 0 1px oklch(0.84 0.17 88 / 0.25); margin-bottom: 14px; }
body:not(.theme-dark) .rx-card-ic { color: oklch(0.87 0.17 90); }
.rx-card-q { font-size: 14px; line-height: 1.5; color: oklch(0.95 0.006 280); margin-bottom: 14px; }
.rx-card-q b { font-weight: 700; color: oklch(0.88 0.16 88); }
.rx-card-q-sub { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: oklch(0.66 0.02 280); }
.rx-card-gas { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 10.5px; white-space: nowrap; color: oklch(0.62 0.02 280); margin-bottom: 18px; }
.rx-card-gas .dep-pix-spin { margin: 0; flex: none; width: 12px; height: 12px; border-color: oklch(0.4 0.02 280); border-top-color: oklch(0.84 0.16 88); }
.rx-card-acts { display: flex; gap: 9px; }
.rx-btn-cancel, .rx-btn-confirm { flex: 1; padding: 11px; border-radius: 11px; font-family: var(--font, sans-serif); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.rx-btn-cancel { background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.13); color: oklch(0.85 0.01 280); }
.rx-btn-cancel:hover { background: oklch(1 0 0 / 0.1); }
.rx-btn-confirm { background: linear-gradient(180deg, oklch(0.88 0.18 92), oklch(0.8 0.16 86)); color: oklch(0.21 0.05 80); border: 0; font-weight: 600; }
.rx-btn-confirm:hover { filter: brightness(1.05); }
.rx-ring-wrap { position: relative; width: 124px; height: 124px; margin: 8px auto 18px; }
.rx-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.rx-ring-bg { fill: none; stroke: oklch(0.84 0.17 88 / 0.16); stroke-width: 7; }
.rx-ring-fg { fill: none; stroke: oklch(0.87 0.17 90); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 276.5; filter: drop-shadow(0 0 5px oklch(0.84 0.17 88 / 0.55)); animation: rxRing 3s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes rxRing { to { stroke-dashoffset: 0; } }
.rx-ring-fg.draining { animation: rxRingOut 3s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes rxRingOut { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 276.5; } }
/* ═══ ⚡ A FOLHA DA ENERGIA — `.we-` (V30 · docs/V30-capsula-saldo-RELATORIO.md) ═══════════
   A cápsula de PING do hero virou botão e abre a CONTA do dinheiro: L1 solto, L2 drenável por
   bateria, e o congelado com nome próprio FORA da soma.
   ⚠️ O casco é o `.rx-overlay`/`.rx-card` que a carteira já usa — a folha só acrescenta
      `.we-*` (prefixo conferido com grep ANTES de escrever: ZERO ocorrências nesta folha, a
      régua que o V15 pagou caro para aprender). ⛔ NÃO clonar o cartão.
   ⚠️ A LISTA ROLA DENTRO DO CARTÃO (`max-height` + `overflow-y` no `.we-body`), ⛔ nunca a
      página: carteira com 6 baterias ⛔ não pode empurrar o fechar para fora da tela a 375px.
   ⛔ NÃO desenhar barra de bateria nova: é o `batBar` do produto (`.bat-shell`/`.bat-fill`),
      aqui só re-escalado para caber na fileira — a doutrina está no cabeçalho do bat-invoice.jsx.
   ⚠️ As cores são LITERAIS, como em toda a família `.rx-card`: o cartão é escuro nos dois
      temas, então `var(--text)` (que inverte) ⛔ não serve aqui. */
.we-card { padding: 0; text-align: left; display: flex; flex-direction: column; max-height: calc(100dvh - 48px); overflow: hidden; }
.we-head { display: flex; align-items: center; gap: 10px; padding: 17px 18px 13px; border-bottom: 1px solid oklch(1 0 0 / 0.08); }
.we-t { margin: 0; flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: oklch(0.95 0.006 280); }
.we-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid oklch(1 0 0 / 0.12); background: oklch(1 0 0 / 0.05); color: oklch(0.8 0.01 280); cursor: pointer; }
.we-x:hover { background: oklch(1 0 0 / 0.1); color: oklch(0.95 0.006 280); }
/* 📱 #MobileFirst · ⛔ SEM BARRA DE ROLAGEM NO DEDO (Tony, 16/09): no telefone a rolagem é o
   DEDO, e a barra só rouba largura da fileira e suja a beirada do cartão.
   🖱 MAS NO MOUSE ELA É A ÚNICA PISTA de que há mais coisa embaixo (Tony, 16/09: "na versão web
      eu fico sem como navegar") — quem tem cursor ⛔ não tem gesto de arrastar conteúdo.
   🔑 Quem decide é o **APONTADOR, ⛔ não a largura da tela**: `@media (hover: hover) and
      (pointer: fine)`. Janela estreita no desktop continua tendo mouse; tablet grande continua
      sendo dedo — medir viewport erraria nos dois. ⛔ NÃO trocar por `max-width`.
   ⛔ NÃO trocar o `auto` por `hidden`: mataria a rolagem junto com a barra. */
.we-body { padding: 15px 18px 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.we-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
@media (hover: hover) and (pointer: fine) {
  /* fina, sem trilho, e **dentro** do respiro do cartão — o polegar não encosta no número */
  .we-body { padding-right: 12px; scrollbar-width: thin; scrollbar-color: oklch(0.84 0.17 88 / 0.3) transparent; }
  .we-body::-webkit-scrollbar { display: block; width: 10px; height: 10px; }
  .we-body::-webkit-scrollbar-track { background: transparent; }
  .we-body::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background-clip: content-box; background-color: oklch(1 0 0 / 0.16); }
  .we-body:hover::-webkit-scrollbar-thumb { background-color: oklch(0.84 0.17 88 / 0.38); }
  .we-body::-webkit-scrollbar-thumb:hover { background-color: oklch(0.84 0.17 88 / 0.62); }
}
/* 💵 O TOTAL — o MESMO número da capa, e o único lugar grande da folha. */
.we-tot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding-bottom: 14px; }
.we-tot em { font-style: normal; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.66 0.02 280); }
.we-tot b { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: oklch(0.88 0.16 88); }
.we-tot-p { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: oklch(0.72 0.02 280); }
.we-tot-p svg { color: oklch(0.84 0.16 88); flex: none; }
.we-line { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-top: 1px solid oklch(1 0 0 / 0.08); }
.we-line-k { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: oklch(0.93 0.006 280); display: flex; flex-direction: column; gap: 2px; }
.we-line-k small { font-size: 10.5px; font-weight: 400; line-height: 1.4; color: oklch(0.63 0.02 280); text-wrap: pretty; }
/* 🏦 o glifo do COFRE na linha da L1 — mesmo padrão inline do título do congelado
   (`.we-froz-t`), ⛔ não um quadro como o das baterias: a L1 ⛔ não é uma fileira de bateria. */
.we-line-v { display: inline-flex; align-items: center; gap: 6px; }
/* 💵 a leitura em dólar é a CÉLULA de baixo da coluna do valor — par do "disponível para enviar",
   que é a célula de baixo da coluna do rótulo. As duas dividem a mesma linha da grade, então se
   alinham pela BASE sem nenhum ajuste manual. Discreta: é aproximação, ⛔ não o número de ato. */
.we-line-usd { grid-column: 3; text-align: right; font-size: 10.5px; font-weight: 500; color: oklch(0.66 0.02 280); letter-spacing: 0; }
.we-line-v svg { flex: none; color: oklch(0.84 0.16 88); }
/* 🏦 A LINHA DO COFRE tem a forma de uma fileira de bateria (quadro · nome · valor, e a
   segunda linha onde a bateria tem a barra) — é a mesma ideia ("onde o PING mora"), então é o
   mesmo desenho, e é o que permite o ícone grande. Reusa `.we-bat-ic`: ⛔ nenhum quadro novo. */
.we-line.we-l1 { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: baseline; gap: 3px 10px; }
.we-l1 .we-bat-ic { grid-row: span 2; align-self: center; }
/* 🏦 O quadro do cofre fala a língua do `.svc-ic` (a fileira de conta na prateleira): glifo
   monoline na cor, fundo tingido no MESMO tom a ~14% — o par do `.rx-card-ic`.
   ⚠️ `.we-bat-ic svg` fixa 17px na folha e vence o atributo do SVG, então o tamanho se declara
      aqui. ⛔ NÃO voltar ao ladrilho cheio: ao lado de fileiras discretas ele grita. */
.we-l1-ic { color: oklch(0.86 0.16 88); background: oklch(0.84 0.17 88 / 0.15); }
.we-l1 .we-bat-ic svg { width: 20px; height: 20px; }
.we-l1-sub { grid-column: 2; font-size: 10.5px; line-height: 1.4; color: oklch(0.63 0.02 280); }
.we-line-v { flex: none; font-size: 14px; font-weight: 600; color: oklch(0.95 0.006 280); }
.we-line.sub .we-line-k { font-weight: 500; }
.we-line.sub .we-line-v { font-size: 13px; color: oklch(0.78 0.08 250); }
.we-say { margin: 0; padding: 0 0 3px; font-size: 11px; line-height: 1.5; color: oklch(0.62 0.02 280); text-wrap: pretty; }
.we-sec { margin: 14px 0 8px; padding-top: 13px; border-top: 1px solid oklch(1 0 0 / 0.08); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.66 0.02 280); }
/* 🏷 O RÓTULO DE GRUPO SÓ NASCE COM MAIS DE UM GRUPO — agrupar lista de um item é ruído
   (mesma régua do `svcSaldo`, que não desenha "retido 0"). */
.we-grp-k { margin: 10px 0 6px; font-size: 10px; letter-spacing: 0.06em; color: oklch(0.6 0.02 280); }
.we-grp:first-child .we-grp-k { margin-top: 0; }
/* 🖼 O RETRATO DA CONTA PREENCHE O QUADRO (Tony, 16/09): a arte era 22px dentro de uma caixa de
   26px, e a sobra virava um anel grosso em volta da foto. Agora a imagem OCUPA o quadro (a
   moldura fica só para o glifo vetorial, que precisa de respiro). */
.we-bat { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 4px 9px; padding: 8px 0; }
.we-bat + .we-bat { border-top: 1px solid oklch(1 0 0 / 0.05); }
.we-bat-ic { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: oklch(1 0 0 / 0.06); color: oklch(0.86 0.02 280); overflow: hidden; }
.we-bat-ic svg { width: 17px; height: 17px; }
.we-bat-ic img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.we-bat-ic:has(img) { background: none; }
.we-bat-n { font-size: 12.5px; font-weight: 500; color: oklch(0.93 0.006 280); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.we-bat-v { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: oklch(0.86 0.01 280); white-space: nowrap; }
.we-bat-v svg { color: oklch(0.84 0.16 88); flex: none; }
.we-bat-bar { grid-column: 2 / -1; min-width: 0; }
.we-bat-bar .bat-shell { height: 7px; border-radius: 4px; background: oklch(1 0 0 / 0.07); border-color: oklch(1 0 0 / 0.1); }
.we-bat-bar .bat-fill { border-radius: 4px; }
/* 🔴 A SOBRECARGA CONTINUA SE ANUNCIANDO NA FILEIRA. 🐞 A regra acima empata em especificidade
   com `.bat-shell.over` e vem DEPOIS na folha — apagava em silêncio a borda verde do estado
   >100%, e sobrava só o brilho. ⛔ NÃO remover esta linha: sem ela o sinal binário de
   sobrecarga (V21) fica pela metade justo na tela que soma a carga. */
.we-bat-bar .bat-shell.over { border-color: oklch(0.78 0.16 152 / 0.85); }
/* 🧊 O CONGELADO — abaixo do total, com nome próprio, e a frase de que ⛔ NÃO conta.
   ⚠️ O vocabulário é o do banco (`frozen_dispatch` = despachado · retenção da L2 = retido):
      três significados num número só torna impossível responder por que não consigo usar meu
      saldo. ⛔ NÃO inventar sinônimo novo para o que o banco já nomeou. */
.we-froz { margin-top: 15px; padding: 12px 13px 10px; border-radius: 13px; border: 1px solid oklch(0.7 0.14 250 / 0.26); background: oklch(0.6 0.13 250 / 0.08); }
.we-froz-h { display: flex; align-items: baseline; gap: 10px; }
.we-froz-t { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: oklch(0.82 0.1 250); }
.we-froz-h b { flex: none; font-size: 14px; font-weight: 700; color: oklch(0.86 0.09 250); }
.we-froz .we-line { border-top-color: oklch(0.7 0.14 250 / 0.2); }
.we-froz .we-say { padding-top: 9px; border-top: 1px solid oklch(0.7 0.14 250 / 0.2); color: oklch(0.68 0.04 270); }
/* ⚡ A CÁPSULA VIROU BOTÃO (ATO 3) — e ela ⛔ não ganha legenda nenhuma na capa (Tony, 16/09:
   "a leitura certa da tela é essa"). O toque é o convite; a explicação mora na folha. */
button.set-sub-hero-ping { cursor: pointer; font-family: inherit; position: relative; isolation: isolate; transition: border-color .14s, background .14s, color .14s; }
button.set-sub-hero-ping:hover { border-color: oklch(0.84 0.17 88 / 0.5); background: oklch(0.84 0.17 88 / 0.08); }
/* ═══ ⚡ A CORRENTE CIRCULANDO NA CÁPSULA (Tony, 16/09) ══════════════════════════════════════
   A pílula é energia: um ponto de carga corre o contorno dela em loop, como corrente num fio.
   🔑 A técnica é um **ângulo animado**, ⛔ não um elemento girando: `@property` torna o
      `<angle>` do `conic-gradient` interpolável, então a faísca dá a volta **sem transform** —
      se eu rotacionasse a camada, a máscara giraria com ela e o anel deixaria de ser anel.
   ⚠️ A máscara é o que transforma o gradiente em CONTORNO: duas camadas iguais, uma no
      `content-box`, compostas por exclusão — sobra exatamente a moldura de 1,5px. ⛔ NÃO trocar
      por `border-image`, que ⛔ não anima, nem por um segundo elemento tapando o centro: a
      pílula é translúcida sobre o cartão do hero e o tampão apareceria.
   ⚠️ Navegador sem `@property` ⛔ não quebra: a faísca fica parada no lugar dela.
   ⛔ E a capa ⛔ NÃO ganhou texto nenhum com isto — o movimento diz "tem energia aqui" sem
      escrever, que é justamente o que a decisão do hero sem legenda pede. */
@property --we-spark { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
button.set-sub-hero-ping::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; --we-spark: 0deg;
  background: conic-gradient(from var(--we-spark), transparent 0 58%, oklch(0.84 0.17 88 / 0.35) 72%, oklch(0.92 0.18 94) 86%, oklch(1 0.05 95) 90%, oklch(0.88 0.18 92 / 0.5) 94%, transparent 99%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: weSpark 2.6s linear infinite; }
@keyframes weSpark { to { --we-spark: 360deg; } }
/* o raio do PING respira no MESMO compasso da volta — um só relógio, ⛔ não dois tempos */
button.set-sub-hero-ping svg { animation: weSparkPulse 2.6s ease-in-out infinite; }
@keyframes weSparkPulse { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { button.set-sub-hero-ping::before, button.set-sub-hero-ping svg { animation: none; } }
/* 🔋 E ELA PAUSA QUANDO ESTÁ COBERTA (Tony perguntou o custo, 16/09). ⚠️ Animar uma custom
   property que alimenta `conic-gradient` **repinta** o elemento a cada quadro — ⛔ não sobe para
   o compositor como `transform`/`opacity`. A área é minúscula (o anel de 1px de uma pílula), mas
   com a folha aberta a pílula continua montada ATRÁS dela, repintando para ninguém ver.
   ⛔ NÃO resolver com `will-change`: criar camada para uma peça de 180×26 gasta mais do que
      economiza. Pausar é de graça. */
body:has(.rx-overlay) button.set-sub-hero-ping::before, body:has(.rx-overlay) button.set-sub-hero-ping svg { animation-play-state: paused; }
/* 🔌 CARTEIRA SEM ENERGIA ⛔ NÃO TEM CORRENTE (Tony, 16/09). Com `total` em zero a faísca
   morre e o raio para de respirar — sobra o contorno parado.
   🔑 Não é enfeite desligado por gosto: a animação **afirma** que há energia ali. Deixá-la
      correndo numa carteira vazia seria a tela prometendo o que o produto não tem — o mesmo
      defeito que o V24 inteiro corrigiu, agora em movimento em vez de palavra.
   ⚠️ O gatilho é `total === 0` (a pílula recebe `is-off`), ⛔ não "saldo baixo": não existe
      meia-corrente, e graduar o brilho pelo saldo seria inventar uma segunda régua de valor. */
button.set-sub-hero-ping.is-off::before { animation: none; background: none; }
button.set-sub-hero-ping.is-off svg { animation: none; opacity: 0.55; }
body:not(.theme-dark) button.set-sub-hero-ping::before { background: conic-gradient(from var(--we-spark), transparent 0 58%, oklch(0.58 0.13 72 / 0.3) 72%, oklch(0.66 0.16 76) 86%, oklch(0.74 0.17 84) 90%, oklch(0.6 0.14 74 / 0.45) 94%, transparent 99%); }
@media (max-width: 400px) { .we-body { padding: 14px 14px 16px; } .we-head { padding: 15px 14px 12px; } .we-tot b { font-size: 25px; } }
/* ═══ ☀️ A FOLHA TEM TEMA CLARO (Tony, 16/09: "está vindo no modo escuro, mesmo eu estando no
   modo claro") ══════════════════════════════════════════════════════════════════════════════
   🐞 Ela nasceu com as cores LITERAIS da família `.rx-*`, que é escura nos dois temas — e
      copiar a veste de lá trouxe o comportamento de lá junto, sem eu perceber.
   🔑 E a família `.rx-*` está CERTA em ser escura: aqueles são diálogos de ATO (confirmar,
      recarregar, drenar), um lampejo de 3 segundos em que o escuro funciona como holofote. A
      folha da energia ⛔ NÃO é um lampejo — é superfície de LEITURA, onde a pessoa **fica**, e
      superfície de leitura segue o tema da página como o resto da carteira segue.
   ⚠️ Por isso o conserto mora AQUI e ⛔ NÃO no `.rx-card`: mudar o cartão de diálogo mexeria
      em ~10 telas de ato que ninguém pediu. O `.we-card` passa a carimbar a própria veste.
   ⚠️ O ouro do tema claro é `oklch(0.58 0.13 72)`, o MESMO que a folha já usa na pílula do hero
      (`body:not(.theme-dark) .set-sub-hero-ping svg`) — ⛔ não inventei tom novo: o ouro escuro
      (0.88) sobre branco não tem contraste para número grande. */
body:not(.theme-dark) .we-card { background: var(--bg-elev); border-color: var(--border-soft); box-shadow: 0 30px 80px -24px oklch(0.2 0.02 270 / 0.28), 0 2px 10px -4px oklch(0.2 0.02 270 / 0.12); }
body:not(.theme-dark) .we-head { border-bottom-color: var(--border-soft); }
body:not(.theme-dark) .we-t { color: var(--text); }
body:not(.theme-dark) .we-x { border-color: var(--border-soft); background: none; color: var(--text-mute); }
body:not(.theme-dark) .we-x:hover { background: var(--bg-base); color: var(--text); }
body:not(.theme-dark) .we-tot em, body:not(.theme-dark) .we-sec, body:not(.theme-dark) .we-grp-k { color: var(--text-dim); }
body:not(.theme-dark) .we-tot b { color: oklch(0.58 0.13 72); }
body:not(.theme-dark) .we-tot-p { color: var(--text-mute); }
body:not(.theme-dark) .we-tot-p svg, body:not(.theme-dark) .we-bat-v svg { color: oklch(0.58 0.13 72); }
body:not(.theme-dark) .we-line, body:not(.theme-dark) .we-sec { border-top-color: var(--border-soft); }
body:not(.theme-dark) .we-line-k, body:not(.theme-dark) .we-line-v, body:not(.theme-dark) .we-bat-n, body:not(.theme-dark) .we-bat-v { color: var(--text); }
body:not(.theme-dark) .we-line-k small, body:not(.theme-dark) .we-say, body:not(.theme-dark) .we-l1-sub, body:not(.theme-dark) .we-line-usd { color: var(--text-mute); }
body:not(.theme-dark) .we-line-v svg { color: oklch(0.58 0.13 72); }
body:not(.theme-dark) .we-line.sub .we-line-v { color: oklch(0.45 0.14 255); }
body:not(.theme-dark) .we-bat + .we-bat { border-top-color: var(--border-soft); }
body:not(.theme-dark) .we-bat-ic { background: var(--bg-base); color: var(--text-mute); }
body:not(.theme-dark) .we-l1-ic { color: oklch(0.58 0.13 72); background: oklch(0.58 0.13 72 / 0.11); }
body:not(.theme-dark) .we-bat-bar .bat-shell { background: var(--bg-base); border-color: var(--border-soft); }
body:not(.theme-dark) .we-froz { border-color: oklch(0.55 0.13 250 / 0.3); background: oklch(0.6 0.13 250 / 0.06); }
body:not(.theme-dark) .we-froz-t { color: oklch(0.44 0.13 255); }
body:not(.theme-dark) .we-froz-h b { color: oklch(0.4 0.14 255); }
body:not(.theme-dark) .we-froz .we-line { border-top-color: oklch(0.55 0.13 250 / 0.22); }
body:not(.theme-dark) .we-froz .we-say { border-top-color: oklch(0.55 0.13 250 / 0.22); color: var(--text-mute); }
body:not(.theme-dark) .we-body { scrollbar-color: oklch(0.58 0.13 72 / 0.35) transparent; }
body:not(.theme-dark) .we-body::-webkit-scrollbar-thumb { background-color: oklch(0.2 0.02 270 / 0.16); }
body:not(.theme-dark) .we-body:hover::-webkit-scrollbar-thumb { background-color: oklch(0.58 0.13 72 / 0.4); }
body:not(.theme-dark) .we-body::-webkit-scrollbar-thumb:hover { background-color: oklch(0.58 0.13 72 / 0.66); }
body:not(.theme-dark) button.set-sub-hero-ping:hover { border-color: oklch(0.58 0.13 72 / 0.55); background: oklch(0.58 0.13 72 / 0.07); }.bat-drain { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 9px; padding: 10px; border-radius: 12px; background: none; border: 1px solid var(--border-soft); color: var(--text-mute); font-family: var(--font, sans-serif); font-size: 13px; font-weight: 500; cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.bat-drain:hover:not(:disabled) { color: var(--text); border-color: var(--border); background: var(--bg-elev); }
/* 🔵 O BOTÃO HERDA O AZUL DO SEU PRÓPRIO POP-UP (09/09) — `oklch(… 245)`, o mesmo matiz do
   `.rx-drain` (ícone, valor e Confirmar). O botão era neutro e só o diálogo era azul: a cor
   aparecia no meio do ato, ⛔ não no começo dele, então nada ligava um ao outro.
   ⚠️ Contorno e texto, ⛔ NÃO preenchido: o preenchido é do "Recarregar manualmente", que é a
      ação PRIMÁRIA da tela (encher é o caminho comum; drenar é o excepcional). Dois botões
      cheios lado a lado disputariam a mesma hierarquia.
   ⛔ NÃO trocar o matiz sem trocar no `.rx-drain`: quem os liga é serem o MESMO 245. */
.bat-drain { color: oklch(0.55 0.14 250); border-color: oklch(0.66 0.16 245 / 0.4); }
.theme-dark .bat-drain { color: oklch(0.74 0.14 245); border-color: oklch(0.66 0.16 245 / 0.42); }
.bat-drain:hover:not(:disabled) { color: oklch(0.45 0.16 252); border-color: oklch(0.66 0.16 245 / 0.75); background: oklch(0.66 0.16 245 / 0.09); }
.theme-dark .bat-drain:hover:not(:disabled) { color: oklch(0.82 0.14 245); border-color: oklch(0.66 0.16 245 / 0.8); background: oklch(0.66 0.16 245 / 0.14); }
.bat-drain:disabled { opacity: 0.4; cursor: not-allowed; }
.rx-ring-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: oklch(0.87 0.17 90); }
.rx-ring-ic.done { animation: rxPulse .5s ease; }
@keyframes rxPulse { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.rx-anim-amt { font-size: 16px; font-weight: 700; color: oklch(0.88 0.16 88); display: inline-flex; align-items: center; gap: 6px; min-height: 22px; }
.rx-anim-prog { color: oklch(0.6 0.02 280) !important; font-weight: 500; }
.rx-drain .rx-card { border-color: oklch(0.66 0.16 245 / 0.28); box-shadow: 0 30px 80px -20px oklch(0 0 0 / 0.75), 0 0 70px -8px oklch(0.66 0.16 245 / 0.32), inset 0 1px 0 oklch(1 0 0 / 0.05); }
.rx-drain .rx-card-ic { color: oklch(0.74 0.14 245); background: oklch(0.66 0.16 245 / 0.14); box-shadow: 0 0 22px -4px oklch(0.66 0.16 245 / 0.4), inset 0 0 0 1px oklch(0.66 0.16 245 / 0.25); }
.rx-drain .rx-card-q b { color: oklch(0.74 0.14 245); }
.rx-drain .rx-btn-confirm { background: linear-gradient(180deg, oklch(0.72 0.15 245), oklch(0.62 0.15 245)); color: oklch(0.99 0.01 245); }
.rx-drain .rx-card-gas .dep-pix-spin { border-top-color: oklch(0.7 0.15 245); }
.rx-drain .rx-ring-bg { stroke: oklch(0.66 0.16 245 / 0.16); }
.rx-drain .rx-ring-fg { stroke: oklch(0.74 0.14 245); filter: drop-shadow(0 0 5px oklch(0.66 0.16 245 / 0.55)); }
.rx-drain .rx-ring-ic { color: oklch(0.74 0.14 245); }
.rx-drain .rx-anim-amt { color: oklch(0.74 0.14 245); }
body:not(.theme-dark) .svc-bal { color: oklch(0.5 0.12 70); }
.wallet-in-dir { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.led-det-card:not(:disabled):hover { border-color: var(--border); background: var(--bg-elev); }
.led-det-card:disabled { cursor: default; opacity: 0.6; }
.led-det-cover { width: 52px; height: 52px; border-radius: 9px; flex: none; }
.led-det-meta { min-width: 0; flex: 1; }
.led-det-meta .t { font-size: 13.5px; font-weight: 500; color: var(--text); line-height: 1.32; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.led-det-meta .h { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.led-det-chev { flex: none; color: var(--text-dim); display: inline-flex; }
.led-det-note { font-size: 12.5px; line-height: 1.5; padding: 9px 12px; border-radius: 10px; margin-bottom: 10px; }
.led-det-note.tRev { background: oklch(0.74 0.15 155 / 0.12); color: oklch(0.8 0.12 155); }
.led-det-note.tCred { background: oklch(0.74 0.15 155 / 0.12); color: oklch(0.8 0.12 155); }
.led-det-note.tDef { background: oklch(0.68 0.17 330 / 0.13); color: oklch(0.82 0.12 330); }
.led-det-note.tBurn { background: oklch(0.64 0.2 25 / 0.12); color: oklch(0.8 0.13 25); }
body:not(.theme-dark) .led-det-note.tRev, body:not(.theme-dark) .led-det-note.tCred { color: oklch(0.45 0.12 155); }
body:not(.theme-dark) .led-det-note.tDef { color: oklch(0.5 0.15 330); }
body:not(.theme-dark) .led-det-note.tBurn { color: oklch(0.5 0.17 25); }
.led-det-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font, sans-serif); font-size: 13px; font-weight: 500; color: var(--blue, #0A84FF); background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; padding: 9px 14px; cursor: pointer; transition: background .14s; }
.led-det-btn:hover { background: var(--bg-elev-2, var(--bg-elev)); }
.led-head-l { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.led-head-bal { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.led-day { margin-bottom: 16px; }
.led-day-h { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); padding: 0 4px 7px; }
.led-day-h.led-genesis { color: oklch(0.78 0.14 88); }
body:not(.theme-dark) .led-day-h.led-genesis { color: oklch(0.5 0.12 70); }
.wallet-in-all:hover { text-decoration: underline; }
.dep-rail-logos { display: inline-flex; align-items: center; flex: none; }
.dep-rail-logos img { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg-base); margin-right: -9px; }
.dep-rail-logos img:last-child { margin-right: 0; }
.dep-rail-row .set-row-label small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; display: block; }
.dep-rail-compat { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; }
.dep-rail-compat-l { font-size: 11px; color: var(--text-dim); }
.dep-rail-compat-logos { display: inline-flex; align-items: center; gap: 5px; }
.dep-rail-compat-logos img { width: 17px; height: 17px; border-radius: 50%; }
.dep-pix-spin { width: 13px; height: 13px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: depspin 0.8s linear infinite; }
@keyframes depspin { to { transform: rotate(360deg); } }
.dep-copy { display: block; width: 100%; margin: 12px 0 0; padding: 11px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--text); border-radius: 11px; font-family: var(--mono); font-size: 12px; font-weight: 500; cursor: pointer; transition: background .14s; }
.dep-copy:hover { background: var(--bg-elev-2); }
.dep-copy-row { display: flex; gap: 8px; }
.dep-copy-row .dep-copy { flex: 1; margin: 12px 0 0; }
.set-subview { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg-base); animation: mmenu-slide 0.24s cubic-bezier(0.2, 0.7, 0.3, 1); }
.set-sheet-head-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.set-sheet-back { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; color: var(--accent); padding: 4px 4px 4px 0; flex: none; }
.set-sheet-back:hover { opacity: 0.75; }
:root { --bat-red: oklch(0.55 0.21 25); --bat-amber: oklch(0.6 0.13 70); --bat-green: oklch(0.5 0.15 150); }
.theme-dark { --bat-red: oklch(0.72 0.2 25); --bat-amber: oklch(0.82 0.16 88); --bat-green: oklch(0.72 0.16 150); }
@keyframes svcBatPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.op-stats { display: flex; flex-direction: column; gap: 13px; margin-top: 13px; }
.op-stat { display: flex; align-items: center; gap: 11px; }
.op-stat-rank { flex: none; width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-mute); background: var(--bg-base); border: 1px solid var(--border-soft); }
.op-stat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.op-stat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.op-stat-name { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-stat-runs { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; flex: none; }
.op-stat-track { height: 7px; border-radius: 999px; background: var(--bg-base); overflow: hidden; }
.op-stat-track span { display: block; height: 100%; border-radius: 999px; }
.svc-bat.low { animation: svcBatPulse 1.3s ease-in-out infinite; }
.set-sub-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 2px 0 12px; padding: 18px 20px 20px; border-radius: 20px; border: 1px solid var(--border-soft); background: radial-gradient(135% 130% at 88% -12%, oklch(0.84 0.16 88 / 0.14), transparent 56%), linear-gradient(165deg, var(--bg-elev), var(--bg-base)); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05), 0 14px 34px -22px oklch(0 0 0 / 0.55); }
.set-sub-hero > span { position: relative; z-index: 1; }
.set-sub-hero-wm { position: absolute; right: -30px; top: 50%; width: 150px; height: 150px; transform: translateY(-48%) rotate(8deg); color: oklch(0.9 0.14 92); opacity: 0.11; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(105deg, transparent 0%, #000 52%); mask-image: linear-gradient(105deg, transparent 0%, #000 52%); }
.set-sub-hero-cap { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
body:not(.theme-dark) .set-sub-hero { background: var(--bg-elev); border-color: var(--border-soft); box-shadow: none; }
body:not(.theme-dark) .set-sub-hero-cap, body:not(.theme-dark) .set-sub-hero-ping { color: var(--text); }
body:not(.theme-dark) .set-sub-hero-wm { opacity: 0.05; color: oklch(0.78 0.14 86); }
body:not(.theme-dark) .set-sub-hero-n { text-shadow: 0 1px 4px oklch(0.2 0.01 270 / 0.28); }
.set-sub-hero-n { display: inline-flex; align-items: center; gap: 8px; font-size: 30px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.set-sub-hero-l { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.set-sub-hero-n { gap: 9px; }
/* 💵 O CENTAVO É PRECISÃO, NÃO MANCHETE: ~54% do corpo do inteiro, mesmo peso e mesma cor
   (⛔ não esmaecido — é o mesmo número, só menor).
   🔴 ALINHADO PELA BASE, ⛔ NÃO PELO TOPO (decisão de 16/09, depois de ver os dois). Centavo em
      expoente é convenção de **PREÇO**, onde o centavo é ruído que se quer sumir e o olho varre
      o inteiro — e lido assim, "US$ 972 .98" vira *"a partir de 972"*. Aqui o número é **SALDO**:
      é quantidade que a pessoa TEM, e quantidade se lê como um número contínuo. A base costura
      os dois pedaços numa coisa só; o topo os separa em duas.
   ⚠️ `align-self: baseline` (⛔ não `vertical-align`): o pai é `inline-flex`, e em flex quem
      alinha por linha de base é o `align-self`. */
/* 🐞 E A ESTRUTURA É QUE RESOLVE, ⛔ NÃO UM AJUSTE DE ALINHAMENTO. Duas armadilhas do flex, as
   duas vistas na tela antes de chegar aqui:
   (a) `align-self: baseline` num item ⛔ não alinha com o irmão **centrado** (o pai é
       `align-items: center`), então o centavo se alinhava à base do FLEX, não à do número;
   (b) zerar o `gap` para colar o centavo colava também o **US$** no número — o gap serve os dois
       pares de uma vez e ⛔ não sabe distinguir.
   ✅ A saída: o VALOR é um nó só (`.set-sub-hero-amt`) e o centavo é **inline dentro dele**. O
      hero volta a ter os mesmos dois itens de flex de sempre (símbolo + valor, com o gap
      intacto) e o centavo herda a linha de base do texto, sem uma regra de alinhamento sequer.
   🔴 E É PELA BASE, ⛔ NÃO PELO TOPO (16/09, depois de ver os dois): centavo em expoente é
      convenção de **PREÇO** — o olho varre o inteiro e lê *"a partir de 972"*. Aqui o número é
      **SALDO**: quantidade que a pessoa TEM, e quantidade se lê como número contínuo. A base
      costura os dois pedaços numa coisa só; o topo os separa em duas. */
.set-sub-hero-amt { display: inline; }
.set-sub-hero-cents { font-size: 0.54em; font-weight: inherit; color: inherit; letter-spacing: 0; }
.set-sub-hero-unit { font-size: 12px; letter-spacing: 0.14em; color: var(--text-dim); margin-top: 2px; }
.set-sub-hero-ping { font-size: 13px; color: var(--text-dim); margin-top: 7px; padding: 3px 11px; border: 1px solid var(--border-soft); border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.set-sub-hero-ping svg { color: oklch(0.84 0.16 88); }
body:not(.theme-dark) .set-sub-hero-ping svg { color: oklch(0.58 0.13 72); }
.set-sub-note { margin: 12px 6px 0; font-size: 11px; line-height: 1.6; color: var(--text-dim); }
.set-sub-text { font-size: 14px; line-height: 1.65; color: var(--text-mute); margin: 6px 4px 18px; }
.set-sub-text b { color: var(--text); }
.set-sub-cta { width: 100%; padding: 13px; border: 0; border-radius: 12px; background: var(--accent); color: oklch(0.99 0 0); font-family: var(--font-display); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; }
.set-cta-wa { background: #25D366; }
.set-cta-wa:hover { filter: brightness(1.05); }
.set-wa-hero { display: flex; justify-content: center; padding: 16px 0 4px; }
.set-wa-ic { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in oklch, #25D366 16%, transparent); color: #25D366; display: inline-flex; align-items: center; justify-content: center; }
.set-stepup-hero { display: flex; justify-content: center; padding: 14px 0 6px; }
.set-stepup-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.set-stepup-what { text-align: center; }
.set-stepup-hero-danger .set-stepup-ic { background: oklch(0.55 0.19 28 / 0.14); color: oklch(0.55 0.19 28); }
.theme-dark .set-stepup-hero-danger .set-stepup-ic { color: oklch(0.72 0.17 28); }
.set-done-ic-off { background: var(--text-dim); }
.set-stepup-target { text-align: center; font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; margin: 2px 0 6px; }
.set-sub-cta:hover { filter: brightness(1.06); }
.set-sub-cta-danger { background: oklch(0.55 0.19 28); }
.set-sub-link { display: inline-block; margin: 4px; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.set-sub-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.set-input { width: 100%; box-sizing: border-box; margin: 4px 0 16px; padding: 13px 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-base); color: var(--text); font-family: var(--font-display); font-size: 15px; outline: none; }
.set-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 14%, transparent); }
.set-otp { width: 100%; box-sizing: border-box; margin: 6px 0 16px; padding: 16px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--bg-base); color: var(--text); font-size: 30px; font-weight: 600; text-align: center; letter-spacing: 0.5em; outline: none; }
.set-otp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 14%, transparent); }
.set-otp::placeholder { color: var(--text-dim); letter-spacing: 0.3em; }
.set-sub-linkbtn { display: block; width: 100%; margin-top: 14px; border: 0; background: none; color: var(--text-dim); font-family: var(--font-display); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.set-sub-linkbtn:hover { color: var(--text); }
.set-done { display: flex; justify-content: center; padding: 24px 0 8px; }
.set-done-ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--set-on); color: oklch(0.99 0 0); font-size: 28px; font-weight: 700; }

.site-header-actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}

/* Logged out */
.site-header-login {
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--text-mute);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 9px;
  transition: color 0.15s, background 0.15s;
}
.site-header-login:hover { color: var(--text); background: var(--bg-elev); }

.site-header-signup {
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 0 5px 0 12px;
  height: 32px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--bg-base);
  background: var(--text);
  border-radius: 8px;
  border: 1px solid oklch(0.05 0 0);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 4px 12px -4px oklch(0.2 0.02 275 / 0.4);
}
.site-header-signup:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -4px oklch(0.2 0.02 275 / 0.5);
}
.site-header-signup-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: oklch(1 0 0 / 0.15);
  border-radius: 6px;
  color: var(--bg-base);
}

/* Logged in */
.site-header-ping {
  display: inline-flex; align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 5px 0 11px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 12.5px;
}
/* PING glyph + suffix — amarelo "Lightning Network", desacoplado do
   --accent da sessão. Raio e sufixo M/K dividem a mesma cor pra
   visualmente formarem "uma unidade" (sinal de moeda hiper-divisível). */
.site-header-ping-mark {
  /* Golden yellow — calibrado pra contraste tanto em light quanto dark.
     OKLCH 88° matiz dourada (entre amarelo limão e amber). */
  color: oklch(0.78 0.17 88);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.theme-dark .site-header-ping-mark {
  color: oklch(0.85 0.17 90);   /* mais brilhante no escuro */
}

/* Sufixo M / K — agora tamanho perto do número (0.85em), mesma cor
   amarela do raio. Lê como unidade clara, não como footnote escondido. */
.site-header-ping-suffix {
  font-size: 0.85em;
  color: oklch(0.78 0.17 88);
  font-weight: 600;
  margin-left: 2px;
  letter-spacing: 0.04em;
}
.theme-dark .site-header-ping-suffix {
  color: oklch(0.85 0.17 90);
}
/* Stat number no menu dropdown usa fonte maior — relação relativa mantida */
.site-header-menu-stat-num .site-header-ping-suffix {
  font-size: 0.62em;
  vertical-align: 0.08em;
}

/* Mobile menu também ganha o amarelo (regra principal aplicada
   junto da regra geral .mobile-menu-ping-mark abaixo). */
.site-header-ping-amount { font-weight: 600; letter-spacing: -0.01em; }
.site-header-ping-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.site-header-ping-add {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
}
.site-header-ping-add:hover { background: var(--accent); color: oklch(1 0 0); }

.site-header-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-mute);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}
.site-header-icon:hover {
  color: var(--text);
  background: var(--bg-elev);
  border-color: var(--border-soft);
}
.site-header-icon-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  border: 1.5px solid var(--bg-base);
}

.site-header-user {
  display: inline-flex; align-items: center;
  gap: 8px;
  height: 36px;
  padding: 3px 9px 3px 3px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
  font-family: var(--font-display);
}
.site-header-user:hover {
  background: var(--bg-elev);
  border-color: var(--border-soft);
}
.site-header-user-face {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: oklch(1 0 0);
  text-shadow: 0 1px 1px oklch(0 0 0 / 0.15);
}
.site-header-user-meta {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  line-height: 1.1;
  gap: 2px;
}
.site-header-user-name {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.site-header-user-role {
  font-size: 9.5px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-header-user-chev {
  color: var(--text-dim);
  display: inline-flex;
  margin-left: -2px;
}

/* User menu dropdown */
.site-header-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: oklch(0.99 0.003 90);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  box-shadow:
    0 1px 0 oklch(1 0 0) inset,
    0 20px 50px -10px oklch(0.3 0.05 275 / 0.3),
    0 4px 12px -4px oklch(0.3 0.05 275 / 0.15);
  z-index: 100;
  text-align: left;
}
.site-header-menu-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 14px;
}
.site-header-menu-face {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: oklch(1 0 0);
  flex-shrink: 0;
}
.site-header-menu-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.site-header-menu-email {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 2px;
}
.site-header-menu-stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 4px 6px;
}
.site-header-menu-stat > div {
  background: var(--bg-elev);
  padding: 10px 14px;
}
.site-header-menu-stat-num {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}
.site-header-menu-stat-lbl {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 2px;
}
.site-header-menu-list { padding: 4px 0; }
.site-header-menu-item {
  display: block;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  font-family: var(--font-display);
}
.site-header-menu-item:hover { background: var(--bg-elev); }
.site-header-menu-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 4px 8px;
}
.site-header-menu-item-out { color: var(--danger); }

/* Mobile-frame variant */
.mobile-frame .site-header { height: 44px; }
.mobile-frame .site-header-inner { padding: 0 14px; gap: 12px; }
.mobile-frame .site-header-nav { display: none; }
.mobile-frame .site-header-actions { margin-left: auto; }
.mobile-frame .site-header-wordmark { display: none; }
.mobile-frame .site-header-section { font-size: 13px; padding: 4px 7px; }
.mobile-frame .site-header-user-meta { display: none; }
.mobile-frame .site-header-user-chev { display: none; }
.mobile-frame .site-header-user { padding: 2px; }
.mobile-frame .site-header-ping { display: none; }
.mobile-frame .site-header-login,
.mobile-frame .site-header-signup { display: none; }
.mobile-frame .site-header-icon { display: none; }

/* Hamburger trigger — visível em TODAS as larguras: o drawer é o guia de
   navegação do site (web + mobile). Dentro do .mobile-frame já era assim. */
.mobile-menu-trigger {
  display: inline-flex;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mobile-menu-trigger:hover { background: var(--bg-elev); border-color: var(--border-soft); }
.mobile-frame .mobile-menu-trigger { display: inline-flex; }

/* Cabeçalho do drawer com o USUÁRIO em primeiro plano (logo sai quando logado) */
.mobile-menu-user-head { min-width: 0; flex: 1; display: flex; align-items: center; gap: 13px; }
.mobile-menu-user-head .mobile-menu-face {
  width: 58px; height: 58px;
  font-size: 19px;
  border-radius: 50%;
}
.mobile-menu-user-head .mobile-menu-name {
  font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobile-menu-handle {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobile-menu-res {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px;
  font-size: 12px;
  color: oklch(0.58 0.135 78);
}
.mobile-menu-res .mobile-menu-res-n { font-weight: 600; }
.mobile-menu-res .mobile-menu-res-l {
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim);
}
.theme-dark .mobile-menu-res { color: oklch(0.82 0.15 86); }

/* Saldo no drawer: rótulo "Saldo" + a palavra PING na cor do raio */
.mobile-menu-ping-saldo {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 2px;
}
.mobile-menu-ping .mobile-menu-ping-lbl { color: oklch(0.58 0.135 78); }
.theme-dark .mobile-menu-ping .mobile-menu-ping-lbl { color: oklch(0.82 0.15 86); }
/* Botão Depositar: repouso neutro (borda cinza do card, interior quase preto,
   texto âmbar) — o aspecto amarelado acende só no hover */
.mobile-menu-ping .mobile-menu-ping-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  flex: none;
  width: 30px; height: 30px; padding: 0;
  border-radius: 9px;
  background: oklch(0.17 0.008 80);
  color: oklch(0.84 0.17 88);
  border: 1px solid var(--border);
  font-weight: 700;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.mobile-menu-ping .mobile-menu-ping-add::before {
  content: none;
}
.mobile-menu-ping .mobile-menu-ping-add:hover {
  background: oklch(0.22 0.03 84);
  border-color: oklch(0.62 0.12 86);
  box-shadow: 0 0 14px -2px oklch(0.8 0.16 88 / 0.35);
}
.theme-dark .mobile-menu-ping .mobile-menu-ping-add {
  background: oklch(0.14 0.006 80);
  border-color: var(--border);
}
.theme-dark .mobile-menu-ping .mobile-menu-ping-add:hover {
  background: oklch(0.19 0.025 84);
  border-color: oklch(0.62 0.12 86);
  box-shadow: 0 0 14px -2px oklch(0.8 0.16 88 / 0.4);
}

/* ── Estúdio da camada de conta no drawer (autor/produtor) + upsell ── */
.mobile-menu-studio-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 8px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.12s;
}
.mobile-menu-studio-item:hover { background: var(--bg-elev); }
.mobile-menu-studio-item.is-primary { background: color-mix(in oklch, var(--studio-accent) 8%, transparent); }
.mobile-menu-studio-item.is-primary:hover { background: color-mix(in oklch, var(--studio-accent) 14%, transparent); }
.mobile-menu-studio-ic {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--studio-accent);
  background: color-mix(in oklch, var(--studio-accent) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--studio-accent) 30%, transparent);
}
.mobile-menu-studio-item small {
  display: block; font-weight: 400; font-size: 11.5px;
  color: var(--text-dim); line-height: 1.3; margin-top: 1px;
}
.mobile-menu-studio-item .mm-go { margin-left: auto; color: var(--text-dim); font-size: 12px; }
.mobile-menu-eyebrow.is-studio { color: var(--studio-accent); }
.mobile-menu-upsell {
  display: block; text-decoration: none;
  border: 1px dashed var(--border);
  border-radius: 12px; padding: 11px 12px; margin-bottom: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.mobile-menu-upsell:hover {
  border-color: color-mix(in oklch, var(--studio-accent) 40%, transparent);
  background: color-mix(in oklch, var(--studio-accent) 7%, transparent);
}
.mobile-menu-upsell .mm-up-t {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--studio-accent);
}
.mobile-menu-upsell .mm-up-d {
  display: block; font-size: 11.5px; color: var(--text-mute);
  line-height: 1.4; margin-top: 3px;
}

/* Drawer + backdrop. Anchored to the mobile frame, not the viewport, so it
   stays contained inside the device bezel in the design canvas. */
.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  overscroll-behavior: contain;
  touch-action: none;
  background: oklch(0.05 0.015 280 / 0.55);
  z-index: 110;
  animation: mmenu-fade 0.18s ease;
}
/* Fora do frame mobile o portal cai no <body>: ancora no viewport. */
body > .mobile-menu-backdrop { position: fixed; }
body > .mobile-menu-panel { position: fixed; }
@keyframes mmenu-fade { from { opacity: 0; } to { opacity: 1; } }

.mobile-menu-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 80%;
  max-width: 400px;
  background: var(--bg-base);
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 40px -10px oklch(0.05 0.03 285 / 0.25);
  z-index: 120;
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 14px 24px;
  animation: mmenu-slide 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
  /* Base: barra oculta (ideal no TOQUE — arrasta pra rolar, sem ruído). */
  scrollbar-width: none;
  scrollbar-color: var(--border) transparent;
}
.mobile-menu-panel::-webkit-scrollbar { width: 0; }
/* Só em ponteiro fino (mouse) E layout desktop (≥720px) mostramos a
   barra — aí ela é necessária pra arrastar. No toque OU no layout mobile
   (janela estreita) fica oculta: arrasta-se o painel pra rolar. */
@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
  .mobile-menu-panel { scrollbar-width: thin; }
  .mobile-menu-panel::-webkit-scrollbar { width: 11px; }
  .mobile-menu-panel::-webkit-scrollbar-track { background: transparent; }
  .mobile-menu-panel::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  .mobile-menu-panel::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
    border: 3px solid transparent;
    background-clip: padding-box;
  }
}
@keyframes mmenu-slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.mobile-menu-brand {
  display: inline-flex; align-items: center;
  color: var(--text);
  text-decoration: none;
}
.mobile-menu-brand svg { height: 26px; width: auto; }
.mobile-menu-section {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text);
}
.mobile-menu-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-mute);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mobile-menu-close:hover { background: var(--bg-elev); color: var(--text); border-color: var(--border-soft); }

/* Auth block (logged-out) — sticky at bottom of drawer */
.mobile-menu-auth {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 4px 4px;
  border-top: 1px solid var(--border-soft);
}
.mobile-menu-signup {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0 6px 0 14px;
  height: 44px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--bg-base);
  background: var(--text);
  border-radius: 10px;
  border: 1px solid oklch(0.05 0 0);
  box-shadow: 0 4px 12px -4px oklch(0.2 0.02 275 / 0.4);
  cursor: pointer;
}
.mobile-menu-signup-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: oklch(1 0 0 / 0.15);
  border-radius: 7px;
  color: var(--bg-base);
}
.mobile-menu-login {
  width: 100%;
  text-align: center;
  font-size: 12.5px;
  font-family: var(--font-display);
  color: var(--text-mute);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.mobile-menu-login:hover { color: var(--text); }

/* Account block (logged-in) */
.mobile-menu-account {
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
}
.mobile-menu-user {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.mobile-menu-face {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: oklch(1 0 0);
  text-shadow: 0 1px 1px oklch(0 0 0 / 0.15);
}
.mobile-menu-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.mobile-menu-email {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 2px;
}
.mobile-menu-ping {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  white-space: nowrap;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.mobile-menu-ping-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; margin: 0; padding: 4px; margin: -4px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  border-radius: 8px;
  transition: background 0.13s;
}
.mobile-menu-ping-main:hover { background: oklch(1 0 0 / 0.04); }
.mobile-menu-ping-chev { color: var(--text-dim); margin-left: auto; flex: none; }
.mobile-menu-ping-main:hover .mobile-menu-ping-chev { color: var(--text-mute); }
.mobile-menu-ping-mark {
  color: oklch(0.78 0.17 88);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.theme-dark .mobile-menu-ping-mark { color: oklch(0.85 0.17 90); }
.mobile-menu-ping-num { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; flex: none; }
.mobile-menu-ping-lbl { font-size: 10px; letter-spacing: 0.08em; color: var(--text-mute); text-transform: uppercase; }
.mobile-menu-ping-add {
  margin-left: auto;
  background: var(--accent);
  color: oklch(1 0 0);
  border: none;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}

/* Estado intermediário (pendente): status + CTA de confirmar e-mail */
.mobile-menu-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; margin-top: 2px;
}
.mobile-menu-status-ok {
  color: oklch(0.55 0.15 150); font-weight: 600;
  letter-spacing: 0.02em;
}
.mobile-menu-status-pend {
  color: oklch(0.62 0.23 25); font-weight: 600;
  letter-spacing: 0.02em;
  position: relative; padding-left: 11px;
}
.mobile-menu-status-pend::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: oklch(0.62 0.23 25);
}
/* Cartão imponente da federação (membro/emissário) + luz de recado pulsante */
.mm-fed-card{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;text-decoration:none;background:linear-gradient(135deg,color-mix(in oklch,var(--section-accent,oklch(0.55 0.22 260)) 14%,var(--bg-elev)),var(--bg-elev));border:1px solid color-mix(in oklch,var(--section-accent,oklch(0.55 0.22 260)) 34%,var(--border));transition:border-color .16s,transform .16s,box-shadow .16s}
.mm-fed-card:hover{border-color:color-mix(in oklch,var(--section-accent,oklch(0.55 0.22 260)) 60%,transparent);transform:translateY(-1px);box-shadow:0 12px 26px -14px color-mix(in oklch,var(--section-accent,oklch(0.55 0.22 260)) 60%,transparent)}
.mm-fed-glyph{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:11px;background:color-mix(in oklch,var(--section-accent,oklch(0.55 0.22 260)) 16%,transparent);color:color-mix(in oklch,var(--section-accent,oklch(0.55 0.22 260)) 78%,var(--text))}
.mm-fed-meta{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.34}
.mm-fed-meta b{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.01em}
.mm-fed-meta i{font-style:normal;font-size:12px;color:var(--text-mute)}
.mm-fed-meta i.mm-fed-urg{color:oklch(0.6 0.24 25);font-weight:700;animation:mmFedUrgBlink 1.2s ease-in-out infinite}
@keyframes mmFedUrgBlink{0%,100%{opacity:.28}50%{opacity:1}}
.mm-fed-recado{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--bg-base);border:1px solid var(--border);box-shadow:inset 0 2px 5px oklch(0.2 0.02 280 / 0.08),0 0 0 0 oklch(0.62 0.23 25 / 0.28);animation:mmFedHalo 1.2s ease-in-out infinite}
.mm-fed-pulse{width:14px;height:14px;border-radius:50%;background:oklch(0.80 0.17 85);animation:mmFedBlink 1.2s ease-in-out infinite}
.mm-fed-recado.is-urgent .mm-fed-pulse{background:oklch(0.62 0.23 25)}
@keyframes mmFedHalo{0%,100%{box-shadow:inset 0 2px 5px oklch(0.2 0.02 280 / 0.08),0 0 0 0 oklch(0.80 0.17 85 / 0.3)}50%{box-shadow:inset 0 2px 5px oklch(0.2 0.02 280 / 0.08),0 0 0 7px oklch(0.80 0.17 85 / 0)}}
.mm-fed-recado.is-urgent{animation-name:mmFedHaloUrg}
@keyframes mmFedHaloUrg{0%,100%{box-shadow:inset 0 2px 5px oklch(0.2 0.02 280 / 0.08),0 0 0 0 oklch(0.62 0.23 25 / 0.3)}50%{box-shadow:inset 0 2px 5px oklch(0.2 0.02 280 / 0.08),0 0 0 7px oklch(0.62 0.23 25 / 0)}}
@keyframes mmFedBlink{0%,100%{opacity:1}50%{opacity:.32}}
.mm-fed-count{position:absolute;top:-4px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:oklch(0.72 0.17 85);color:#3a2a00;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg-elev)}
.mm-fed-recado.is-empty .mm-fed-count{background:oklch(0.6 0.23 25);color:#fff}
.mm-fed-recado.is-empty{animation:none}
.mm-fed-recado.is-empty .mm-fed-pulse{background:var(--text-dim);opacity:.45;animation:none}
.mm-fed-go{flex:none;color:var(--text-dim);font-size:16px}
.mobile-menu-confirm {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 11px 12px;
  border-radius: 12px;
  background: oklch(0.62 0.23 25 / 0.1);
  border: 1px solid oklch(0.62 0.23 25 / 0.32);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mobile-menu-confirm:hover { background: oklch(0.62 0.23 25 / 0.16); border-color: oklch(0.62 0.23 25 / 0.5); }
.mobile-menu-confirm-ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: oklch(0.62 0.23 25 / 0.16);
  color: oklch(0.55 0.2 25);
}
.theme-dark .mobile-menu-confirm-ic { color: oklch(0.78 0.18 25); }
.mobile-menu-confirm-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mobile-menu-confirm-txt strong { font-size: 13px; font-weight: 600; color: var(--text); }
.mobile-menu-confirm-txt span { font-size: 11px; color: var(--text-mute); line-height: 1.35; }
.mobile-menu-confirm-go { flex: none; color: oklch(0.6 0.2 25); font-size: 15px; }

/* Sections inside drawer */
.mobile-menu-group {
  padding-top: 12px;
  margin-bottom: 6px;
}
/* Separator between the section-switcher block and any following group */
.mobile-menu-sections + .mobile-menu-group,
.mobile-menu-group + .mobile-menu-group {
  border-top: 1px solid var(--border-soft);
  margin-top: 12px;
  padding-top: 16px;
}
/* The section-switcher itself is inside a .mobile-menu-group; we need the
   border to sit between IT and the next group, so target the next .mobile-menu-group
   sibling directly. */
.mobile-menu-group:has(.mobile-menu-sections) + .mobile-menu-group {
  border-top: 1px solid var(--border-soft);
  margin-top: 12px;
  padding-top: 16px;
}
.mobile-menu-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
  padding: 4px 4px 8px;
}
.mobile-menu-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.mobile-menu-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  font-family: var(--font-display);
}
.mobile-menu-link:hover { background: var(--bg-elev); }
.mobile-menu-link-arrow {
  color: var(--text-dim);
  font-size: 14px;
}
.mobile-menu-link-out { color: var(--danger); }
.mobile-menu-link-main { display: inline-flex; align-items: center; gap: 9px; }
.mobile-menu-link-main svg { color: var(--text-dim); flex: none; }

/* Section switcher (mobile) */
.mobile-menu-sections {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.mobile-menu-section-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.mobile-menu-section-item:hover { background: var(--bg-elev); }
.mobile-menu-section-item.is-current {
  background: oklch(0.97 0.04 0);
  border: 1px solid oklch(0.86 0.08 0);
  cursor: default;
}
.mobile-menu-section-item:hover .mobile-menu-section-glyph {
  border-color: var(--section-accent);
  color: var(--section-accent);
}
.mobile-menu-section-item:hover .mobile-menu-section-title-label {
  color: var(--section-accent);
}
.mobile-menu-section-glyph {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: oklch(1 0 0);
  border-radius: 10px;
  color: oklch(0.06 0 0);
  transition: border-color 0.15s, color 0.15s;
}
.mobile-menu-section-glyph svg { width: 26px; height: 26px; }
.mobile-menu-section-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mobile-menu-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: inline-flex; align-items: baseline; gap: 4px;
  letter-spacing: 0.01em;
}
.mobile-menu-section-title-label {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}
.mobile-menu-section-tagline {
  font-size: 11.5px;
  color: var(--text-mute);
  line-height: 1.4;
  text-wrap: pretty;
}
.mobile-menu-section-here {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 6px;
  background: oklch(1 0 0);
  border: 1px solid oklch(0.86 0.08 0);
  border-radius: 5px;
}

/* ───────────────── Aside cards (manager + discovery) ───────────────── */
.aside-card {
  background: var(--bg-base);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 1px 0 oklch(1 0 0) inset;
  position: relative;
}
.aside-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.aside-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.aside-action {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.aside-action-link {
  text-decoration: none;
  color: var(--accent);
  transition: color 0.15s;
}
.aside-action-link:hover { color: var(--accent-strong); }

/* — Manager card — */
.aside-manager-row {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 6px;
  margin: -6px;
  border-radius: 10px;
  transition: background 0.15s;
}
.aside-manager-row:hover { background: var(--bg-elev); }
.aside-manager-face {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: oklch(1 0 0);
  text-shadow: 0 1px 1px oklch(0 0 0 / 0.15);
  flex-shrink: 0;
}
.aside-manager-status {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  background: var(--success);
  border-radius: 50%;
  border: 2px solid var(--bg-base);
}
.aside-manager-meta {
  display: flex; flex-direction: column;
  min-width: 0;
}
.aside-manager-name {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.2;
}
.aside-manager-handle {
  font-size: 11px;
  color: var(--accent);
  margin-top: 2px;
}
.aside-manager-bio {
  margin: 14px 0 16px;
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.5;
  text-wrap: pretty;
}
.aside-manager-stats {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  gap: 12px;
}
.aside-stat-num {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  display: block;
  line-height: 1;
  letter-spacing: -0.01em;
}
.aside-stat-lbl {
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
  font-family: var(--font-mono);
}
.aside-manager-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  color: var(--text);
  text-decoration: none;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-elev);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  font-weight: 500;
  white-space: nowrap;
}
.aside-manager-cta:hover {
  background: var(--text);
  color: var(--bg-base);
  border-color: var(--text);
  transform: translateY(-1px);
}
.aside-manager-cta-arrow {
  font-size: 13px;
  transition: transform 0.15s;
}
.aside-manager-cta:hover .aside-manager-cta-arrow { transform: translateX(2px); }

/* — Discovery card — */
.aside-discovery-subtitle {
  font-size: 13px;
  color: var(--text-mute);
  margin: -6px 0 12px;
  line-height: 1.4;
}
.aside-discovery-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aside-discovery-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.aside-discovery-row:hover { background: var(--bg-elev); }
.aside-discovery-row:hover .aside-discovery-arrow { transform: translateX(2px); color: var(--text); }
.aside-discovery-face {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: oklch(1 0 0);
  text-shadow: 0 1px 1px oklch(0 0 0 / 0.15);
  flex-shrink: 0;
}
.aside-discovery-initials { position: relative; z-index: 1; }

/* Digital Twin frame — double ring + corner badge */
.aside-discovery-face.is-twin {
  box-shadow:
    0 0 0 2px var(--bg-base),
    0 0 0 3.5px var(--twin);
}
.aside-discovery-face.is-twin::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed oklch(0.70 0.17 40 / 0.55);
  pointer-events: none;
  animation: twinRotate 14s linear infinite;
}
@keyframes twinRotate { to { transform: rotate(360deg); } }
.aside-discovery-twin-badge {
  position: absolute;
  bottom: -3px; right: -3px;
  width: 22px; height: 22px;
  background: var(--twin);
  color: oklch(1 0 0);
  border: 2px solid var(--bg-base);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 8px -1px oklch(0.55 0.18 40 / 0.5);
}
.aside-discovery-twin-badge svg { width: 12px; height: 12px; }

.aside-discovery-meta {
  display: flex; flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 3px;
}
.aside-discovery-name {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.aside-discovery-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 2px;
}
.aside-discovery-tag {
  font-size: 10.5px;
  color: var(--text-mute);
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.aside-discovery-arrow {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  color: var(--text-dim);
  transition: transform 0.15s, color 0.15s;
}

/* Collapse the split below 900px (effectively only matters in mobile-frame variant) */
.mobile-frame .profile-split {
  grid-template-columns: 1fr;
  gap: 28px;
}
.mobile-frame .profile-aside {
  position: static;
  margin-top: 0;
  gap: 12px;
}
.mobile-frame .aside-card { padding: 14px; }

/* ───────────────── YouTube Player ───────────────── */
.yt-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.6) inset,
    0 0 0 1px var(--border-soft),
    0 24px 60px -24px oklch(0.45 0.05 275 / 0.18),
    0 8px 20px -10px oklch(0.45 0.05 275 / 0.1);
}
.yt-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: oklch(0.05 0.015 280);
  overflow: hidden;
  border-radius: 20px;
}

/* Aviso de OFFLINE sobre o player (YtOfflineNote) — o vídeo do YouTube exige rede. */
.yt-offline {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center; padding: 24px;
  background: oklch(0.12 0.012 275 / 0.92);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: oklch(0.95 0.01 275);
}
.yt-offline svg { color: oklch(0.74 0.14 70); margin-bottom: 2px; }
.yt-offline b { font-size: 15px; font-weight: 650; }
.yt-offline span { font-size: 12.5px; opacity: 0.72; max-width: 32ch; line-height: 1.45; }
.yt-offline-retry { margin-top: 8px; padding: 8px 17px; border-radius: 999px; border: 1px solid oklch(1 0 0 / 0.26); background: oklch(1 0 0 / 0.09); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.yt-offline-retry:hover { background: oklch(1 0 0 / 0.17); }

.yt-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* Bottom-right mask — covers the YouTube logo that appears with modestbranding */
.yt-brand-mask {
  position: absolute;
  right: 0; bottom: 0;
  width: 86px; height: 26px;
  background: linear-gradient(120deg, transparent 0%, transparent 30%, oklch(0 0 0 / 0.95) 60%);
  pointer-events: none;
  z-index: 2;
}

/* barra travada (VSL, noSeek): mostra progresso, não aceita arrasto */
.nyt-scrub--locked { pointer-events: none; height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--nyt-accent, #fff) var(--p, 0%), rgba(255,255,255,0.25) var(--p, 0%)); }
/* pseudo-fullscreen: trava o scroll da página inteira — sem barras de rolagem */
html.nyt-fs-lock, html.nyt-fs-lock body { overflow: hidden !important; scrollbar-width: none !important; }
html.nyt-fs-lock::-webkit-scrollbar, html.nyt-fs-lock body::-webkit-scrollbar { display: none !important; }
/* ───────────────── NativeYTPlayer (chrome-free YouTube) ─────────────────
   Fills its positioned 16:9 parent. The iframe is unclickable; all
   interaction goes through our own overlay so no YouTube UI ever appears. */
.nyt {
  position: absolute; inset: 0;
  background: #000;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
.nyt-round { border-radius: inherit; }

/* pseudo-fullscreen: used when the real Fullscreen API is blocked (sandboxed
   iframe / device mockup). Covers the whole viewport, black letterbox. */
.nyt.is-fs {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  z-index: 2147483600;
  border-radius: 0;
  background: #000;
}
.nyt.is-fs.nyt-round { border-radius: 0; }
/* real fullscreen (desktop) — center the 16:9 surface, black bars */
.nyt:fullscreen, .nyt:-webkit-full-screen { background: #000; }

/* rotate-phone hint — brief 2s flash on entering fullscreen (portrait phones) */
.nyt-rotate {
  position: absolute; inset: 0; z-index: 9;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: oklch(0 0 0 / 0.78);
  color: oklch(1 0 0 / 0.92);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  pointer-events: none;
  animation: nyt-rot-flash 2.2s ease forwards;
}
.nyt-rotate svg { animation: nyt-tilt 1.4s ease-in-out infinite; }
@keyframes nyt-tilt {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
}
@keyframes nyt-rot-flash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}
/* only meaningful on a portrait phone — never on desktop / landscape */
@media (orientation: portrait) and (max-width: 920px) {
  .nyt-rotate { display: flex; }
}
/* the API replaces the inner div with an iframe — kill its pointer events
   so YouTube's title bar / channel card / end-screen never trigger */
.nyt-host, .nyt-host iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}
.nyt-host iframe { pointer-events: none !important; }
/* slight overscan hides the title bar that flashes at the very top on start */
.nyt-host iframe {
  width: 100%;
  height: calc(100% + 2px);
  top: -1px;
}

/* (logo-mask removed — the reveal-guard covers the logo on play and the
   poster cover hides it when paused, so the persistent corner mask isn't needed) */
.nyt-logo-mask { display: none; }

/* ── black "reveal guard": hides YouTube's title bar + logo for the few
   seconds it flashes after each play, then fades out (logo dies first) ── */
.nyt-guard {
  position: absolute; left: 0; right: 0; z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;      /* governs the slow FADE-OUT, synced w/ bar */
}
.nyt.is-guard .nyt-guard {
  opacity: 1;
  transition: none;                    /* cover INSTANTLY when armed (no fade-in) */
}
/* (a antiga .nyt-hovcatch — camada transparente de hover sobre o vídeo mudo —
   foi REMOVIDA: engolia o toque do soundTap; ver comentário no youtube-player.jsx) */
.nyt-guard-top {
  top: 0; height: 165px;
  background: linear-gradient(to bottom, #000 0 58%, oklch(0 0 0 / 0.78) 78%, transparent 100%);
}

/* branded intro card inside the top fade — author + tags, fades WITH the guard */
.nyt-intro {
  position: absolute; top: 0; left: 0; right: 0; z-index: 7;
  padding: 16px 16px 18px;
  pointer-events: none;
  display: flex; flex-direction: column; gap: 11px;
  pointer-events: none;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 1.2s ease, transform 1.2s ease;   /* slow fade-out, synced w/ guard */
}
.nyt.is-guard .nyt-intro {
  opacity: 1; transform: none;
  transition: opacity 0.18s ease, transform 0.18s ease;  /* snappy reveal */
}
.nyt-intro-head { display: flex; align-items: center; gap: 10px; }
.nyt-intro-av {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 10px oklch(0 0 0 / 0.5), inset 0 0 0 1.5px oklch(1 0 0 / 0.18);
}
/* avatar com FOTO do autor (miniatura) — fallback grácil às iniciais quando não há */
.nyt-intro-av.has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.nyt-intro-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 📛 o título grande do intro — mesma vida da vinheta (herda o fade do `.nyt-intro`).
   ⚠️ `clamp` porque o player aparece de 300px (short na folha) a 900px (desktop): tamanho fixo
      ou estoura no telefone ou some no monitor. ⛔ NÃO fixar em px.
   ⚠️ Duas linhas no máximo — título de vídeo é chamada, não sinopse. */
.nyt-intro-t { margin: 0 0 10px; font-size: clamp(17px, 3.4vw, 30px); font-weight: 800; line-height: 1.12; color: #fff; letter-spacing: -.01em; text-shadow: 0 2px 10px oklch(0 0 0 / .7); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nyt-intro-name {
  font-size: 15px; font-weight: 700; color: #fff; line-height: 1.1;
  text-shadow: 0 1px 4px oklch(0 0 0 / 0.6);
}
.nyt-intro-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; letter-spacing: 0.18em; font-weight: 700;
  color: oklch(0.62 0.23 25); text-transform: uppercase;
}
.nyt-intro-rec {
  width: 7px; height: 7px; border-radius: 50%;
  background: oklch(0.62 0.25 25);
  box-shadow: 0 0 0 0 oklch(0.62 0.25 25 / 0.6);
  animation: nyt-rec-pulse 1.4s ease-out infinite;
}
@keyframes nyt-rec-pulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.62 0.25 25 / 0.55); opacity: 1; }
  70%  { box-shadow: 0 0 0 6px oklch(0.62 0.25 25 / 0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 oklch(0.62 0.25 25 / 0); opacity: 1; }
}
.nyt-intro-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nyt-intro-tag {
  font-size: 11px; font-weight: 500;
  padding: 4px 9px; border-radius: 999px;
  color: oklch(1 0 0 / 0.9);
  background: oklch(1 0 0 / 0.13);
  border: 1px solid oklch(1 0 0 / 0.16);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.nyt-guard-bottom {
  bottom: 0; height: 88px;
  background: linear-gradient(to top, #000 0 46%, oklch(0 0 0 / 0.7) 70%, transparent 100%);
}

/* X-FLOW wordmark — centered in our control bar, so it reads as a branded
   player. Visible whenever the bar is (incl. the 5s reveal after each play). */
.nyt-wm {
  display: inline-flex; align-items: center; gap: 6px;
  color: oklch(1 0 0 / 0.96);
  user-select: none; white-space: nowrap;
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
}
.nyt-wm-x {
  display: inline-flex; align-items: center;
  width: 17px; height: 17px;
  color: oklch(1 0 0 / 0.96);
}
.nyt-wm-word {
  font-size: 12px; font-weight: 600; letter-spacing: 0.26em;
  color: oklch(1 0 0 / 0.82);
}
/* the logo also briefly shows top-left/right at start — thin top guard */
.nyt-top-mask {
  position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 6;
  background: #000; pointer-events: none;
}

.nyt-tap {
  position: absolute; inset: 0; z-index: 4;
  border: 0; padding: 0; margin: 0; background: transparent;
  cursor: pointer; appearance: none;
}

/* big center play / pause / replay */
.nyt-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: 72px; height: 72px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
  padding-left: 3px;
  background: oklch(0 0 0 / 0.42);
  border: 1.5px solid oklch(1 0 0 / 0.72);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: 0 10px 30px -8px oklch(0 0 0 / 0.6);
  transition: transform 0.16s ease, background 0.16s ease;
}
.nyt-center:hover { transform: translate(-50%, -50%) scale(1.07); background: oklch(0 0 0 / 0.56); }
/* when paused / ended, a thumbnail cover (darkened) hides YouTube's pause
   overlay while showing the video's own cover image instead of black */
.nyt-poster-cover {
  position: absolute; inset: 0; z-index: 5;
  background-color: #000;   /* opaque fallback if the thumbnail fails to load */
  background-position: center; background-size: cover; background-repeat: no-repeat;
  pointer-events: none;
}

.nyt-spinner {
  position: absolute; top: 50%; left: 50%;
  width: 38px; height: 38px; margin: -19px 0 0 -19px; z-index: 5;
  border-radius: 50%;
  border: 3px solid oklch(1 0 0 / 0.25);
  border-top-color: oklch(1 0 0 / 0.9);
  animation: nyt-spin 0.8s linear infinite;
  pointer-events: none;
}
@keyframes nyt-spin { to { transform: rotate(360deg); } }

/* control bar */
.nyt-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  padding: 26px 12px 9px;
  background: linear-gradient(to top, oklch(0 0 0 / 0.72) 0%, oklch(0 0 0 / 0.34) 55%, transparent 100%);
  opacity: 0; transform: translateY(6px);
  transition: opacity 1.2s ease, transform 1.2s ease;   /* slow FADE-OUT, synced w/ guard */
  pointer-events: none;
}
.nyt.is-chrome .nyt-bar {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 0.16s ease, transform 0.16s ease;  /* snappy show */
}

.nyt-scrub {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 16px; margin: 0 0 2px;
  background: transparent; cursor: pointer;
}
.nyt-scrub::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--nyt-accent, #fff) 0 var(--p, 0%),
    oklch(1 0 0 / 0.32) var(--p, 0%) 100%);
}
.nyt-scrub::-moz-range-track {
  height: 4px; border-radius: 999px; background: oklch(1 0 0 / 0.32);
}
.nyt-scrub::-moz-range-progress {
  height: 4px; border-radius: 999px; background: var(--nyt-accent, #fff);
}
.nyt-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -4.5px; border-radius: 50%;
  background: #fff; border: 0;
  box-shadow: 0 1px 4px oklch(0 0 0 / 0.5);
}
.nyt-scrub::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; border: 0; background: #fff;
}

.nyt-row {
  display: flex; align-items: center; gap: 4px;
  color: #fff;
}
.nyt-btn {
  flex: none;
  width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: #fff; cursor: pointer;
  transition: background 0.14s ease;
}
.nyt-btn:hover { background: oklch(1 0 0 / 0.16); }
.nyt-time {
  font-size: 12px; color: oklch(1 0 0 / 0.92); letter-spacing: 0.01em;
  padding-left: 4px; white-space: nowrap;
}
.nyt-time-sep { opacity: 0.5; }
.nyt-spring { flex: 1; }

/* aviso "toque para ativar o som" — o vídeo toca MUDO por política de autoplay
   (autoplay mudo é sempre permitido); 1 toque ativa o som e o aviso some.
   Espelha o .clip-mutehint do X-FLOW. Escondido no fallback nativo (injected CSS). */
.nyt-mutehint {
  position: absolute; z-index: 8; left: 50%; bottom: 66px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  background: oklch(0 0 0 / 0.6); color: #fff;
  border: 1px solid oklch(1 0 0 / 0.2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  box-shadow: 0 4px 16px oklch(0 0 0 / 0.4);
  animation: nyt-mutehint-in 0.3s ease both;
}
.nyt-mutehint:hover { background: oklch(0 0 0 / 0.74); }
/* versão GRANDE (soundTap armado — caminho de conversão): chamada impossível
   de ignorar, centrada; o toque atravessa até o iframe (gesto de 1ª parte) */
.nyt-mutehint.is-big { bottom: auto; top: 56%; transform: translate(-50%, -50%); font-size: 15px; font-weight: 700; padding: 12px 24px; gap: 10px; border-radius: 999px; background: oklch(0 0 0 / 0.72); white-space: nowrap; max-width: calc(100% - 32px); animation: nyt-mutehint-inbig 0.3s ease both; }
.nyt-mutehint.is-big .nyt-mutehint-ic svg { width: 20px; height: 20px; }
/* telas estreitas: cápsula um degrau menor pra não estourar */
@media (max-width: 480px) { .nyt-mutehint.is-big { font-size: 13px; padding: 10px 18px; gap: 8px; } .nyt-mutehint.is-big .nyt-mutehint-ic svg { width: 17px; height: 17px; } }
@keyframes nyt-mutehint-inbig { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
.nyt-mutehint-ic { display: inline-flex; animation: nyt-mutehint-pulse 1.8s ease-in-out infinite; }
@keyframes nyt-mutehint-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes nyt-mutehint-pulse { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }


/* Poster (pre-play) */
.yt-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  overflow: hidden;
  border-radius: 20px;
}
.yt-poster:hover .yt-play { transform: translate(-50%, -50%) scale(1.06); }
.yt-poster:hover .yt-play-ring { transform: translate(-50%, -50%) scale(1.18); opacity: 0; }

/* Thumb poster — capa real do vídeo (YouTube) + play, sem texto (igual video-take) */
.yt-poster--thumb { background: #000; }
.yt-poster-thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.yt-poster-thumb-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(0 0 0 / 0.12) 0%, oklch(0 0 0 / 0.05) 45%, oklch(0 0 0 / 0.32) 100%);
  transition: background 0.2s ease;
}
.yt-poster--thumb:hover .yt-poster-thumb-scrim {
  background: linear-gradient(180deg, oklch(0 0 0 / 0.22) 0%, oklch(0 0 0 / 0.12) 45%, oklch(0 0 0 / 0.4) 100%);
}
.yt-poster-bg {
  position: absolute; inset: 0;
}
.yt-poster-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(1000px 500px at 80% -10%, oklch(0.85 0.18 295 / 0.45), transparent 60%),
    radial-gradient(700px 350px at 5% 110%, oklch(0.7 0.16 320 / 0.35), transparent 60%);
  mix-blend-mode: screen;
}
.yt-poster-grain {
  position: absolute; inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='80' height='80' filter='url(%23n)'/></svg>");
}
.yt-poster-strip {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.yt-poster-tl {
  position: absolute; top: 18px; left: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: oklch(1 0 0 / 0.95);
  text-transform: uppercase;
  padding: 6px 12px 6px 9px;
  background: oklch(0 0 0 / 0.25);
  border: 1px solid oklch(1 0 0 / 0.18);
  backdrop-filter: blur(10px);
  border-radius: 999px;
}
.yt-rec-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: oklch(0.65 0.22 25);
  box-shadow: 0 0 0 2.5px oklch(0.65 0.22 25 / 0.3);
  animation: pulse 1.6s ease-in-out infinite;
}
.yt-poster-tr {
  position: absolute; top: 18px; right: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: oklch(1 0 0);
  padding: 6px 12px;
  background: oklch(0 0 0 / 0.35);
  border: 1px solid oklch(1 0 0 / 0.18);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.yt-poster-meta {
  position: absolute; left: 28px; right: 28px; bottom: 26px;
  color: oklch(1 0 0);
  text-shadow: 0 1px 3px oklch(0 0 0 / 0.3);
}
.yt-poster-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  max-width: 70%;
  text-wrap: pretty;
}
.yt-poster-sub {
  font-size: 14px;
  color: oklch(1 0 0 / 0.82);
  font-weight: 400;
  margin-top: 6px;
  max-width: 65%;
  line-height: 1.4;
  text-wrap: pretty;
}

/* Play button — large, glassy, centered */
.yt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.16);
  border: 1.5px solid oklch(1 0 0 / 0.55);
  color: oklch(1 0 0);
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(14px);
  box-shadow:
    0 20px 50px -10px oklch(0 0 0 / 0.4),
    inset 0 1px 0 oklch(1 0 0 / 0.3);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.yt-play-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px;
  border-radius: 50%;
  border: 1.5px solid oklch(1 0 0 / 0.45);
  pointer-events: none;
  animation: ytRing 2.6s ease-out infinite;
}
@keyframes ytRing {
  0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(0.95); }
  70%  { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

/* Mobile tweaks */
.mobile-frame .yt-poster-title { font-size: 18px; max-width: 80%; }
.mobile-frame .yt-poster-sub { font-size: 12px; max-width: 90%; }
.mobile-frame .yt-poster-meta { left: 18px; right: 18px; bottom: 18px; }
.mobile-frame .yt-poster-tl, .mobile-frame .yt-poster-tr { font-size: 9.5px; padding: 5px 9px; }
.mobile-frame .yt-play { width: 60px; height: 60px; }
.mobile-frame .yt-play-ring { width: 60px; height: 60px; }
.mobile-frame .yt-play svg { width: 22px; height: 22px; }
.intro-modal {
  position: fixed; inset: 0;
  background: oklch(0.05 0.015 280 / 0.85);
  backdrop-filter: blur(12px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.intro-modal-frame {
  position: relative;
  width: min(720px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.intro-modal-video {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, oklch(0.5 0.18 285), oklch(0.3 0.12 270));
  display: flex; align-items: center; justify-content: center;
}
.intro-grad {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, oklch(0.7 0.18 320 / 0.5), transparent 50%);
}
.intro-grad-2 {
  background: radial-gradient(circle at 80% 70%, oklch(0.6 0.18 200 / 0.4), transparent 60%);
}
.intro-modal-play {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.18);
  border: 1px solid oklch(1 0 0 / 0.3);
  color: oklch(1 0 0);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}
.intro-modal-play svg { margin-left: 4px; }
.intro-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: oklch(0 0 0 / 0.4);
  border: 1px solid oklch(1 0 0 / 0.15);
  color: oklch(1 0 0);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════
   DARK MODE — shell, perfil, cards, players
   Tokens dark vivem em styles.css (.theme-dark). Aqui ficam só os
   ajustes finos que diferem de verdade no escuro (sombras,
   gradientes, inversões). Migrado de dark.css.
   ═══════════════════════════════════════════════════════════════ */

.theme-dark .profile-page,
.theme-dark .home-page {
  background: var(--bg-base);
  border-color: var(--border-soft);
}
.theme-dark .urlbar {
  background: oklch(0.11 0.018 275);
  border-bottom-color: var(--border-soft);
}
.theme-dark .urlbar-dots span { background: oklch(0.25 0.02 278);
}
.theme-dark .urlbar-dots span:nth-child(1) { background: oklch(0.5 0.16 25);
}
.theme-dark .urlbar-dots span:nth-child(2) { background: oklch(0.65 0.15 80);
}
.theme-dark .urlbar-dots span:nth-child(3) { background: oklch(0.6 0.15 145);
}
.theme-dark .urlbar-url {
  background: oklch(0.18 0.022 278);
  border-color: var(--border-soft);
  color: var(--text-mute);
}
.theme-dark .site-header {
  background: oklch(0.155 0.022 275 / 0.85);
  border-bottom-color: var(--border-soft);
}
.theme-dark .site-header-section {
  background-image: linear-gradient(
    110deg,
    oklch(0.95 0.005 280) 0%,
    oklch(0.95 0.005 280) 40%,
    var(--section-shimmer) 50%,
    oklch(0.95 0.005 280) 60%,
    oklch(0.95 0.005 280) 100%
  );
}
.theme-dark .site-header-signup {
  background: var(--text);
  color: oklch(0.1 0 0);
  border-color: var(--text);
}
.theme-dark .site-header-signup-arrow { color: oklch(0.1 0 0); background: oklch(0 0 0 / 0.12);
}
.theme-dark .site-header-menu {
  background: var(--bg-elev);
  border-color: var(--border);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.04) inset,
    0 24px 60px -16px oklch(0 0 0 / 0.6),
    0 6px 14px -4px oklch(0 0 0 / 0.4);
}
.theme-dark .section-switcher {
  background: var(--bg-elev);
  border-color: var(--border);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.04) inset,
    0 24px 60px -16px oklch(0 0 0 / 0.6),
    0 6px 16px -6px oklch(0 0 0 / 0.4);
}
.theme-dark .section-switcher-glyph {
  background: var(--bg-elev-2);
  border-color: var(--border);
  color: var(--text);
}
.theme-dark .section-switcher-item.is-current {
  background: linear-gradient(180deg, oklch(0.30 0.13 0), oklch(0.26 0.10 0));
  border-color: oklch(0.50 0.18 0);
}
.theme-dark .section-switcher-item.is-current:hover {
  background: linear-gradient(180deg, oklch(0.30 0.13 0), oklch(0.26 0.10 0));
}
.theme-dark .section-switcher-here {
  background: var(--bg-elev);
  border-color: oklch(0.55 0.18 0);
  color: var(--accent);
}
/* Mobile drawer — current section card (dark mode) */
.theme-dark .mobile-menu-section-item.is-current {
  background: linear-gradient(180deg, oklch(0.30 0.13 0), oklch(0.26 0.10 0));
  border-color: oklch(0.50 0.18 0);
}
.theme-dark .mobile-menu-section-item.is-current .mobile-menu-section-title,
.theme-dark .mobile-menu-section-item.is-current .mobile-menu-section-title-label,
.theme-dark .mobile-menu-section-item.is-current .mobile-menu-section-tagline {
  color: oklch(0.97 0.06 0);
}
.theme-dark .mobile-menu-section-item.is-current .mobile-menu-section-here {
  background: var(--bg-elev);
  border-color: oklch(0.55 0.18 0);
  color: var(--accent);
}
.theme-dark .mobile-menu-section-item.is-current .mobile-menu-section-glyph {
  background: oklch(0.26 0.10 0);
  border-color: oklch(0.55 0.18 0);
  color: oklch(0.97 0.06 0);
}
/* Mobile drawer */
.theme-dark .mobile-menu-panel {
  background: var(--bg-base);
  border-left-color: var(--border);
  box-shadow: -20px 0 40px -10px oklch(0 0 0 / 0.6);
}
.theme-dark .mobile-menu-backdrop { background: oklch(0 0 0 / 0.7);
}
/* ───── Cover ───── */
.theme-dark .cover-locked-pill {
  background: oklch(0.155 0.022 275 / 0.75);
  border-color: var(--border);
  color: var(--text-mute);
}
.theme-dark .cover-version {
  background: oklch(0.155 0.022 275 / 0.7);
  border-color: var(--border);
  color: var(--text);
}
.theme-dark .cover-noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='80' height='80' filter='url(%23n)'/></svg>");
}
/* ───── Header / face / tags ───── */
.theme-dark .header-face { border-color: var(--bg-base);
}
.theme-dark .header-face-status { border-color: var(--bg-base);
}
.theme-dark .header-tag-twin {
  background: var(--twin-bg);
  color: oklch(0.95 0.07 40);
  border-color: oklch(0.50 0.14 40);
}
.theme-dark .header-tag-agent {
  background: var(--accent-bg);
  color: oklch(0.95 0.10 0);
  border-color: oklch(0.50 0.18 0);
}
/* ───── Twin banner ───── */
.theme-dark .twin-banner {
  background: linear-gradient(180deg, oklch(0.30 0.10 40) 0%, oklch(0.24 0.08 38) 100%);
  border-bottom-color: oklch(0.45 0.13 40);
  color: oklch(0.95 0.07 40);
}
.theme-dark .twin-banner-title { color: oklch(0.97 0.06 40);
}
.theme-dark .twin-banner-sub { color: oklch(0.82 0.06 38);
}
.theme-dark .twin-banner-icon {
  background: oklch(0.40 0.12 40);
  color: oklch(0.92 0.10 40);
}
.theme-dark .twin-banner-learn {
  background: oklch(0.30 0.10 40 / 0.5);
  border-color: oklch(0.55 0.14 40);
  color: oklch(0.95 0.07 40);
}
/* ───── Locked overlay ───── */
.theme-dark .locked-overlay {
  background: linear-gradient(180deg, oklch(0.155 0.022 275 / 0.5), oklch(0.155 0.022 275 / 0.9));
}
.theme-dark .locked-lock { background: var(--bg-elev-2); border-color: var(--border);
}
.theme-dark .voice-bar.is-played { background: var(--accent);
}
.theme-dark .voice-cursor { background: var(--text); box-shadow: 0 0 0 4px oklch(0.95 0.005 280 / 0.1);
}
/* ───── YouTube card ───── */
.theme-dark .yt-card {
  box-shadow:
    0 0 0 1px var(--border-soft),
    0 24px 60px -24px oklch(0 0 0 / 0.6);
}
/* ───── Share row ───── */
.theme-dark .share-row {
  background: var(--bg-base);
  border-color: var(--border-soft);
}
.theme-dark .article-body + .share-row {
  background: transparent;
  border-top-color: var(--border-soft);
  border-bottom-color: var(--border-soft);
}
.theme-dark .share-btn { background: var(--bg-elev); border-color: var(--border); color: var(--text);
}
.theme-dark .share-btn.is-copied {
  background: oklch(0.30 0.13 155);
  color: oklch(0.92 0.14 155);
  border-color: oklch(0.50 0.16 155);
}
.theme-dark .share-icon { background: var(--bg-elev); border-color: var(--border); color: var(--text-mute);
}
/* ───── Article post — drop-cap stays in --text via tokens ───── */

/* ───── Post tiles + grid ───── */
.theme-dark .post-tile { background: var(--bg-elev); border-color: var(--border-soft);
}
.theme-dark .post-tabs { background: var(--bg-elev); border-color: var(--border-soft);
}
.theme-dark .skill-chip { background: var(--bg-elev); border-color: var(--border-soft); color: var(--text);
}
.theme-dark .section-count { background: var(--bg-elev); border-color: var(--border-soft); color: var(--text-mute);
}
/* ───── Aside cards ───── */
.theme-dark .aside-card {
  background: var(--bg-elev);
  border-color: var(--border-soft);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.04) inset;
}
.theme-dark .aside-manager-row:hover { background: var(--bg-elev-2);
}
.theme-dark .aside-discovery-row:hover { background: var(--bg-elev-2);
}
.theme-dark .aside-discovery-tag { background: var(--bg-elev-2); border-color: var(--border-soft); color: var(--text-mute);
}
.theme-dark .aside-manager-face { border-color: var(--bg-elev);
}
.theme-dark .aside-manager-status { border-color: var(--bg-elev);
}
.theme-dark .aside-discovery-face.is-twin {
  box-shadow:
    0 0 0 2px var(--bg-elev),
    0 0 0 3.5px var(--twin);
}
.theme-dark .aside-manager-cta {
  background: var(--bg-elev-2);
  border-color: var(--border);
  color: var(--text);
}
/* ───── Footer (profile) ───── */
.theme-dark .footer { border-top-color: var(--border-soft);
}

/* ── gaveta · fita pessoal + enviar (contratos assinados na fita) ─────
   Padrão ESC-30: notificação com botões. Fica DEPOIS do saldo porque o
   PING é o ativo e a fita é o registro — ordem: tenho → aconteceu. */
.mm-fita-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.mm-fita-b {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 11px; min-height: 56px; text-align: left;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  font-family: inherit; color: var(--text); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mm-fita-b:hover { border-color: var(--text-dim); }
.mm-fita-b.has-tape { border-color: color-mix(in oklab, var(--bat-red, #e5484d) 40%, transparent); background: color-mix(in oklab, var(--bat-red, #e5484d) 6%, var(--bg-elev)); }
.mm-fita-ic { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--text-mute); background: color-mix(in oklab, var(--text) 7%, transparent); }
.mm-fita-b.has-tape .mm-fita-ic { color: var(--bat-red, #e5484d); background: color-mix(in oklab, var(--bat-red, #e5484d) 13%, transparent); }
/* a luz da secretária: mesma linguagem da fita da casa */
.mm-fita-led { position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--bat-red, #e5484d); box-shadow: 0 0 0 2px var(--bg-elev); animation: mmFitaBlink 1.4s ease-in-out infinite; }
@keyframes mmFitaBlink { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .mm-fita-led { animation: none } }
.mm-fita-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mm-fita-t b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.mm-fita-t small { font-size: 10.5px; line-height: 1.35; color: var(--text-dim); }
.mm-fita-b.has-tape .mm-fita-t small { color: var(--bat-red, #e5484d); font-weight: 500; }
.mm-fita-n { flex: none; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; font-style: normal; color: #fff; background: var(--bat-red, #e5484d); }
@media (max-width: 360px) { .mm-fita-row { grid-template-columns: 1fr } }

/* ── ilha ÚNICA da fita: Ouvir | Enviar (rabisco do Tony) ─────────────
   Uma moldura só, dividida por filete. A luz da secretária pisca DENTRO do
   botão Ouvir e o contador sai de dentro dela. */
.mm-isle { --isle-line: color-mix(in oklab, var(--text) 16%, transparent); display: flex; flex-direction: column; margin: 10px 0 4px; border: 1px solid var(--isle-line); border-radius: 18px; overflow: hidden; background: var(--bg-elev); box-shadow: 0 1px 2px oklch(0.2 0.02 280 / 0.05), 0 12px 26px -20px oklch(0.2 0.02 280 / 0.35); }
.mm-isle .mobile-menu-ping { background: none; border: 0; border-radius: 0; }
.mm-isle-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--isle-line); }
.mm-isle-b { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 15px 12px 13px; border: 0; background: none; font-family: inherit; color: var(--text); cursor: pointer; transition: background .15s; }
.mm-isle-b + .mm-isle-b { border-left: 1px solid var(--isle-line); }
.mm-isle-b:hover { background: color-mix(in oklab, var(--text) 4%, transparent); }
.mm-isle-t { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.mm-isle-ic { position: relative; display: grid; place-items: center; color: var(--text-mute); }
.mm-isle-b:hover .mm-isle-ic { color: var(--text); }
.mm-isle-b.has-tape .mm-isle-ic { color: oklch(0.60 0.21 25); }
/* a luz da secretária, em miniatura (mesma linguagem da aba Inbox) */
/* as duas teclas-irmãs: mesmo disco de aparelho (a luz mora num deles) */
.mm-isle-key { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-base); border: 1px solid var(--isle-line); box-shadow: inset 0 2px 5px oklch(0.2 0.02 280 / 0.08); color: var(--text-mute); transition: color .15s, border-color .15s; }
.mm-isle-b:hover .mm-isle-key { color: var(--text); border-color: color-mix(in oklab, var(--text) 30%, transparent); }
.mm-isle-luz i { width: 16px; height: 16px; border-radius: 50%; background: oklch(0.62 0.17 155); transition: background .3s; }
.mm-isle-b.has-tape .mm-isle-luz i { background: oklch(0.62 0.23 25); animation: mmLuzBlink 1.15s ease-in-out infinite; }
.mm-isle-b.has-tape .mm-isle-luz { animation: mmLuzHalo 1.15s ease-in-out infinite; }
@keyframes mmLuzBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
@keyframes mmLuzHalo { 0%, 100% { box-shadow: inset 0 2px 5px oklch(0.2 0.02 280 / 0.08), 0 0 0 0 oklch(0.62 0.23 25 / 0.3); } 50% { box-shadow: inset 0 2px 5px oklch(0.2 0.02 280 / 0.08), 0 0 0 9px oklch(0.62 0.23 25 / 0); } }
@media (prefers-reduced-motion: reduce) { .mm-isle-luz, .mm-isle-luz i { animation: none !important; } }
/* a luz: pisca com o contador dentro */
.mm-isle-led { position: absolute; top: -5px; right: -12px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; font-style: normal; color: #fff; background: oklch(0.60 0.21 25); box-shadow: 0 0 0 0 color-mix(in oklab, oklch(0.60 0.21 25) 60%, transparent); animation: mmIsleBlink 1.4s ease-in-out infinite; }
@keyframes mmIsleBlink { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in oklab, oklch(0.60 0.21 25) 55%, transparent) } 50% { opacity: .5; box-shadow: 0 0 0 7px transparent } }
@media (prefers-reduced-motion: reduce) { .mm-isle-led { animation: none } }
/* ═══ FITA PESSOAL · mensageiro da carteira (rotas enviar/fita/fitaThread) ═══
   Continuação visual da ilha do menu: mesmos discos, filete e relevo. */
.ft-search { display: flex; align-items: center; gap: 9px; margin: 6px 0 12px; padding: 11px 14px; border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); border-radius: 999px; background: var(--bg-elev); color: var(--text-dim); }
.ft-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.ft-search input::placeholder { color: var(--text-dim); }
.ft-search:focus-within { border-color: color-mix(in oklab, var(--text) 32%, transparent); }
.ft-isle { --line: color-mix(in oklab, var(--text) 16%, transparent); border: 1px solid var(--line); border-radius: 18px; background: var(--bg-elev); overflow: hidden; box-shadow: 0 1px 2px oklch(0.2 0.02 280 / 0.05), 0 12px 26px -20px oklch(0.2 0.02 280 / 0.35); }
.ft-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.ft-row + .ft-row { border-top: 1px solid var(--line); }
.ft-row:hover { background: color-mix(in oklab, var(--text) 4%, transparent); }
.ft-disc { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-base); border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); box-shadow: inset 0 2px 5px oklch(0.2 0.02 280 / 0.08); font-size: 13px; font-weight: 700; letter-spacing: .03em; color: oklch(0.52 0.14 var(--h, 250)); }
.ft-disc.sm { width: 30px; height: 30px; font-size: 10px; }
.ft-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ft-name { font-size: 14px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-prev { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-mute); min-height: 15px; }
/* 🪪 e-mail do CONTATO EXTERNO, linha 2 da carta (10/09) — nome fica em .ft-name (negrito),
   este é o endereço, discreto, embaixo. Mesma hierarquia de .ft-tr-card-m noutro lugar do
   produto. ⛔ NÃO deixar quebrar linha: fileira compacta, elide se precisar. */
.ft-sub { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-when.fail { color: oklch(0.55 0.2 25); font-weight: 650; }
.ft-sys.fail { color: oklch(0.55 0.2 25); }
.ft-b.out.fail .ev-mail { border-color: oklch(0.55 0.2 25 / .4); background: oklch(0.55 0.2 25 / .07); }
.ev-mail-fail { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: oklch(0.5 0.2 25); }
.ev-mail-fail b { font-size: 12.5px; }
.ev-retry { align-self: flex-start; margin: 2px 0 4px 0; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: oklch(0.5 0.2 25); background: none; border: 1px solid oklch(0.55 0.2 25 / .45); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.ev-retry:hover { background: oklch(0.55 0.2 25 / .08); }
.ft-outg { flex: none; color: var(--text-dim); }
/* ↩ recado SEM TEXTO na lista (2026-08-14, Tony viu a linha vazia): a prévia diz o
   OBJETO — mesma doutrina da citação (ESC-83). Mono e discreto: é referência a um
   papel, não fala de alguém. ⛔ NÃO deixar a linha muda: linha vazia parece bug. */
.ft-prev-obj { font-style: normal; font-size: 11.5px; letter-spacing: -.005em; color: var(--text-dim); }
/* ⏱ janela de arrependimento na LISTA (2026-08-14): enquanto o recado está só no
   aparelho, a linha troca a setinha de saída pela contagem regressiva. Tom do
   cancelar (vermelho), não do acento — é tempo correndo contra o envio.
   ⛔ NÃO é botão (ESC-41: cancelar vive no compositor) — daí `pointer-events:none`. */
.ft-prev-hold { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 999px; font-size: 10px; font-weight: 700; font-style: normal; letter-spacing: .02em; background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--danger); pointer-events: none; }
/* 📝 marca de rascunho guardado na linha (2026-08-14): tom do acento — é
   trabalho seu esperando, não alerta (o vermelho é só da contagem). */
.ft-prev-dr { flex: none; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.ft-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-wave { display: inline-flex; align-items: center; gap: 2px; }
.ft-wave i { width: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.ft-dur { font-size: 11px; }
.ft-side { flex: none; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; }
.ft-when { font-size: 10.5px; color: var(--text-dim); }
.ft-led { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; font-style: normal; color: #fff; background: oklch(0.60 0.21 25); animation: mmIsleBlink 1.15s ease-in-out infinite; }
/* 🔴 ESC-120 · a variante SEM NÚMERO: mesmo vermelho, mesma piscada, só o ponto. Herda a
   animação do `.ft-led` — ⛔ NÃO escrever segundo keyframe, duas piscadas dessincronizam.
   ⚠️ MESMO DIÂMETRO DA CÁPSULA COM NÚMERO (2026-08-20, Tony: "ficou feio as bolinhas terem
      tamanhos diferentes"). A linha da caixa e a da conversa vivem na MESMA lista, uma
      embaixo da outra: ponto de 8px ao lado de cápsula de 20px lia como dois componentes
      diferentes. Sem número, a cápsula perde a razão de crescer — então ela é o círculo
      de 20px com um miolo de 8px, e a coluna fica alinhada.
   ⛔ NÃO voltar a encolher a caixa: o alinhamento da coluna é o que faz as duas linhas
      parecerem o mesmo produto. */
/* 🔴 ESC-120 · A VARIANTE SEM NÚMERO É A MESMA CÁPSULA, VAZIA (2026-08-20, 2ª volta do
   Tony: "mesmo tamanho da dos chat mas sem numero"). Eu tinha encolhido a bolinha para
   8px dentro de uma caixa de 20px — duas bolinhas de tamanhos diferentes na mesma coluna,
   que era exatamente a queixa. Agora é o MESMO círculo cheio, só sem dígito.
   ⚠️ Herda tudo do `.ft-led` (diâmetro, vermelho, `mmIsleBlink`): a regra não troca nada
      além de tirar o padding, que existe para caber dois dígitos.
   ⛔ NÃO encolher, não vazar o preenchimento, não escrever segundo keyframe. */
/* ⚠️ E TEM MIOLO (2026-08-19, Tony: "será que uma bolinha branca no meio deixaria mais
   interessante?"). Disco MACIÇO tem mais área vermelha que a cápsula com número — o
   numeral branco fura o vermelho. Sem o furo, o indicador que diz MENOS (nem conta
   quantos) gritava mais alto que o que diz mais, e vermelho maciço é linguagem de ERRO,
   não de "não lido". O miolo é o dígito que não existe: mesmo selo, mesmo furo.
   ⛔ NÃO usar branco fixo: `currentColor` é a MESMA cor dos numerais — uma fonte só.
   ⛔ NÃO animar o miolo à parte: quem pisca é o disco inteiro, senão duas animações
      dessincronizam dentro do mesmo selo. */
.ft-led.dot { padding: 0; width: 20px; }
.ft-led.dot::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
@media (prefers-reduced-motion: reduce) { .ft-led { animation: none; } }
.ft-empty { margin: 22px 6px; font-size: 12px; color: var(--text-dim); text-align: center; }
/* passando a fita: Ignorar / Responder por recado pendente */
.ft-acts { display: flex; gap: 8px; padding: 0 14px 13px 68px; }
.ft-acts button { padding: 7px 16px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--text) 18%, transparent); background: none; color: var(--text-mute); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.ft-acts button:hover { color: var(--text); border-color: color-mix(in oklab, var(--text) 32%, transparent); }
.ft-acts .go { color: #fff; background: var(--accent); border-color: var(--accent); }
.ft-acts .go:hover { color: #fff; background: color-mix(in oklab, var(--accent) 88%, black); }
.ft-acts + .ft-row { border-top: 1px solid var(--line); }
/* ilha Minha fita | Enviar dentro da home da carteira, abaixo do saldo */
.ft-wallet-isle { margin: 12px 0 16px; }
.ft-wallet-isle .mm-isle-row { border-top: 0; }
/* contrato inteligente: frame com botões (ESC-30) tocado ao passar a fita */
.ft-tp-pass { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; }
.ft-tp-count { margin: 0 6px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
/* progresso da rodada: avança a cada frame despachado ou pulado */
.ft-tp-bar { height: 4px; margin: 0 2px 12px; border-radius: 999px; background: color-mix(in oklab, var(--text) 10%, transparent); overflow: hidden; }
.ft-tp-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.ft-tp { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); border-radius: 18px; background: var(--bg-elev); box-shadow: 0 1px 2px oklch(0.2 0.02 280 / 0.05), 0 12px 26px -20px oklch(0.2 0.02 280 / 0.35); }
.ft-tp-top { display: flex; align-items: center; gap: 10px; }
.ft-tp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ft-tp-who strong { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }
.ft-tp-who .mono { font-size: 10.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }
.ft-tp-tag { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); }
.ft-tp-txt { font-size: 14.5px; line-height: 1.6; text-wrap: pretty; }
/* recado no frame = recorte do chat: balão sobre o papel de parede da conversa */
.ft-tp-clip { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin: 0 -16px; padding: 16px; border-top: 1px solid color-mix(in oklab, var(--text) 10%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--text) 10%, transparent); background: var(--bg-base); overflow: hidden; }
.ft-tp-clip::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="168" height="168" viewBox="0 0 168 168" fill="none" stroke="%23888" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M32 18l-6 12h5l-4 10 9-13h-5l5-9z"/><circle cx="106" cy="34" r="11"/><path d="M106 27v14M103 30h5a2.4 2.4 0 0 1 0 4.8h-4a2.4 2.4 0 0 0 0 4.8h6"/><rect x="16" y="86" width="30" height="20" rx="4"/><circle cx="25" cy="96" r="3.6"/><circle cx="37" cy="96" r="3.6"/><path d="M62 138q6-8 12 0t12 0"/><path d="M138 78l-6 12h5l-4 10 9-13h-5l5-9z"/><path d="M126 138a9 9 0 1 1 9 9M135 129v9h9"/><path d="M64 56h20M64 62h13"/></svg>') 0 0/168px 168px repeat; }
.ft-tp-clip .ft-b { position: relative; }
/* 📅 a cápsula de dia dentro do clipe: mesma peça do chat, centrada no recorte.
   ⚠️ `align-self` porque o clipe é flex-column com `align-items:flex-start` — margin auto
   não centra item de coluna flex. */
.ft-tp-clip .ft-sys { position: relative; align-self: center; margin: 0 0 9px; }
/* ESC-44: marcação inline vem de take-inline.jsx (fonte única) — aqui só o
   ajuste de escala dentro da bolha, da citação e do comprovante */
.ft-bx .tp-strong, .ft-roll-teor .tp-strong { font-weight: 700; }
.ft-bx .tp-em, .ft-roll-teor .tp-em { font-style: italic; }
.ft-bx .tp-del, .ft-roll-teor .tp-del { text-decoration: line-through; opacity: .62; }
.ft-bx .tp-code, .ft-roll-teor .tp-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; padding: 1px 5px; border-radius: 4px; background: color-mix(in oklab, var(--text) 12%, transparent); }
.ft-bx .tp-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ft-q .tp-strong, .ft-qbar-m .tp-strong { font-weight: 700; }
.ft-q .tp-code, .ft-qbar-m .tp-code { font-family: ui-monospace, monospace; font-size: .9em; }
.ft-fmt { margin: 0 16px 5px; font-size: .66rem; letter-spacing: .04em; opacity: .42; }
/* bloco dentro da bolha e da tira: parágrafo, lista, citação */
.ft-bx .ft-p, .ft-roll-teor .ft-p { display: block; white-space: pre-wrap; }
.ft-bx .ft-p + .ft-p, .ft-bx .ft-ul, .ft-bx .ft-bq { margin-top: 5px; }
.ft-roll-teor .ft-p + .ft-p, .ft-roll-teor .ft-ul, .ft-roll-teor .ft-bq { margin-top: 4px; }
.ft-bx .ft-ul, .ft-roll-teor .ft-ul { margin: 5px 0 0; padding-left: 19px; }
.ft-bx .ft-ul li, .ft-roll-teor .ft-ul li { margin: 1px 0; }
.ft-bx .ft-bq, .ft-roll-teor .ft-bq { display: block; white-space: pre-wrap; padding: 1px 0 1px 9px; border-left: 2px solid color-mix(in oklab, currentColor 40%, transparent); font-style: italic; opacity: .9; }
/* ESC-40: responder mensagem específica (citação) + menu da bolha */
.ft-toast { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 92; padding: 8px 14px; border-radius: 999px; background: color-mix(in oklab, var(--text) 88%, transparent); color: var(--bg-elev); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; pointer-events: none; animation: ftToastIn .18s ease-out; }
@keyframes ftToastIn { from { opacity: 0; transform: translate(-50%, 6px); } }
/* ESC-42: a bolha É uma tecla — toque em qualquer ponto abre as opções */
.ft-b { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: pointer; transition: transform .09s ease, filter .09s ease; }
.ft-b:active { transform: scale(.985); filter: brightness(.96); }
.ft-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ft-b .ft-bx, .ft-b .ft-bp { cursor: pointer; }
.ft-bmenu { position: absolute; top: 2px; right: 3px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; opacity: .28; pointer-events: none; transition: opacity .12s; }
.ft-b:hover .ft-bmenu { opacity: .7; }
.ft-b:has(.ft-bmenu) .ft-bx { padding-right: 16px; }
.ft-q { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; margin: 0 0 5px; padding: 6px 9px; border: 0; border-left: 3px solid var(--accent); border-radius: 6px; background: color-mix(in oklab, var(--text) 8%, transparent); color: inherit; font: inherit; cursor: pointer; }
.ft-q em { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--accent); }
.ft-q span { font-size: .78rem; opacity: .7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ↩ citação de recado SEM TEXTO: o objeto citado (X-DOC) em mono, para não parecer
   prosa do outro — é referência, não fala. */
.ft-q-doc, .ft-qbar-m .ft-q-doc { font-family: var(--font-mono, ui-monospace, monospace); font-size: .72rem; letter-spacing: .01em; opacity: .95; }
.ft-b.flash { animation: ftFlash 1.4s ease-out; }
@keyframes ftFlash { 0%, 55% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }
/* 🔍 PROCURAR DENTRO DA CONVERSA (2026-08-14): barra grudada no topo do rolo, do
   tamanho de uma linha — a conversa continua sendo o assunto da tela.
   ⚠️ O realce é da BOLHA (anel no acento), nunca do texto: a marcação inline tem
      uma fonte só (take-inline.jsx) e busca não entra nela para pintar. */
.ft-hd-btns { display: flex; align-items: center; gap: 2px; flex: none; }
.ft-find { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 6px; margin: 0 0 2px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--border-soft); box-shadow: 0 6px 18px -12px oklch(0 0 0 / .45); }
.ft-find > svg:first-child { flex: none; color: var(--text-dim); }
.ft-find input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; outline: none; }
.ft-find-n { flex: none; font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.ft-find-nav, .ft-find-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--accent); cursor: pointer; }
.ft-find-nav:disabled { opacity: .28; cursor: default; }
.ft-find-nav:hover:not(:disabled), .ft-find-x:hover { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.ft-find-x { color: var(--text-dim); }
/* 🔍 o achado BRILHA para fora do balão (2026-08-14, Tony): o anel diz "é este",
   o brilho é o que faz o olho encontrar depois do salto. O atual pulsa devagar;
   os outros achados só reluzem, parados. */
.ft-b.hit { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 32%, transparent), 0 0 20px -2px color-mix(in oklab, var(--accent) 42%, transparent); }
.ft-b.hitcur { box-shadow: 0 0 0 2.5px var(--accent), 0 0 30px 0 color-mix(in oklab, var(--accent) 55%, transparent); animation: ftHitGlow 1.9s ease-in-out infinite; }
/* ↔ chegada do salto NA TIRA (2026-08-14): a tira é papel, então o aviso é um
   anel no acento + brilho curto, o mesmo gesto da bolha — quem saltou reconhece
   onde caiu. Dura mais que o da bolha (1,6s) porque a tira é mais alta e o olho
   percorre mais texto antes de achar o topo dela. */
/* ⚠️ as duas peças têm a MESMA métrica (10.5px/700/uppercase) e a mesma altura de
   linha, então centro = base: alinham exatamente. `nowrap` porque rótulo de régua
   que quebra em duas linhas desmonta a linha inteira em tela estreita. */
.ft-tp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ft-tp-head .ft-tp-count { margin: 0; white-space: nowrap; }
.ft-tp-head .ft-tp-prev { white-space: nowrap; }
/* ⏪ voltar um frame: TEXTO no mesmo nível do contador (2026-08-14, Tony viu no
   print). Era pílula, e caixa de botão ao lado de um rótulo de linha desalinha as
   duas coisas: a linha do contador é uma RÉGUA (rótulo à esquerda, navegação à
   direita, mesma base, mesma métrica). ⛔ NÃO devolver moldura, fundo ou raio —
   isto é ligação de leitura, não ato; os atos têm caixa lá embaixo (ft-tp-b). */
.ft-tp-prev { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 0; border: 0; background: none; color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.ft-tp-prev:hover { opacity: .72; }
.ft-tp-prev:active { opacity: .55; }
.ft-tp-prev svg { opacity: .9; }
/* na tela estacionada ele fica ACIMA de "Tocar de novo" (que é botão de verdade) e os dois
   encostam na direita, na mesma borda — o `justify-content: center` deixava a linha do link
   centralizada sobre a cápsula, e sobrava uma folga à direita que parecia erro de alinhamento
   (2026-08-21, Tony). ⚠️ Alinhar pela DIREITA, não pela largura do link: quando o rótulo muda
   de idioma ("back one frame" é mais curto), o centro se mexe e a folga volta.
   ⛔ NÃO reintroduzir `margin-right`: o respiro que ele criava é o que desalinhava a coluna. */
.ft-luz-acts { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* ⏪ re-entrada do frame ao voltar ao início: o cartão entra pela esquerda, como
   a fita reposicionando — curto, porque o conteúdo é o mesmo (não é frame novo) */
.ft-tp.rew { animation: ftTpRew .5s cubic-bezier(.22,.7,.3,1); }
@keyframes ftTpRew { 0% { transform: translateX(-10px); opacity: .45; } 60% { opacity: 1; } 100% { transform: none; } }
.ft-roll.flash { animation: ftRollFlash 1.6s ease-out; }
@keyframes ftRollFlash { 0%, 60% { box-shadow: 0 0 0 2.5px var(--accent), 0 0 30px -2px color-mix(in oklab, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes ftHitGlow { 50% { box-shadow: 0 0 0 2.5px var(--accent), 0 0 40px 4px color-mix(in oklab, var(--accent) 78%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ft-b.hitcur { animation: none; } }
/* trecho achado na linha da lista */
.ft-mk { background: color-mix(in oklab, var(--accent) 28%, transparent); color: var(--text); border-radius: 3px; padding: 0 1px; }
.ft-qbar { display: flex; align-items: center; gap: 8px; margin: 0 14px 6px; padding: 7px 10px; border-left: 3px solid var(--accent); border-radius: 8px; background: color-mix(in oklab, var(--text) 8%, transparent); }
.ft-qbar-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ft-qbar-m em { font-style: normal; font-size: .7rem; font-weight: 600; color: var(--accent); }
.ft-qbar-m span { font-size: .78rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-qbar button { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); opacity: .6; cursor: pointer; }
.ft-qbar button:hover { opacity: 1; }
.ft-menu-scrim { position: fixed; inset: 0; z-index: 90; }
.ft-menu { position: fixed; z-index: 91; transform: translateX(-100%); min-width: 176px; padding: 6px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-elev); box-shadow: 0 14px 40px rgba(0, 0, 0, .38); }
.ft-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: .85rem; text-align: left; cursor: pointer; }
.ft-menu button:hover { background: color-mix(in oklab, var(--text) 9%, transparent); }
.ft-menu button:disabled { opacity: .35; cursor: default; background: none; }
.ft-menu button svg { flex: none; opacity: .7; }
.ft-menu-note { margin: 4px 6px 2px; padding-top: 6px; border-top: 1px solid var(--border-soft); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; opacity: .45; }
/* ESC-65 · a folha de anexo: as duas naturezas lado a lado, uma escolha só.
   Mora na doca (.ft-dock), logo acima do compositor — ⚠️ em fluxo solto ela
   abria PARA DENTRO da conversa, abaixo da dobra e atrás do compositor grudado.
   ⚠️ Alvo de toque ≥ 44px nas duas linhas. */
.ft-att { position: relative; z-index: 91; margin: 0 0 10px; padding: 7px; border-radius: 14px; border: 1px solid var(--border-soft); background: var(--bg-elev); box-shadow: 0 14px 40px rgba(0, 0, 0, .38); }
.ft-att-t { margin: 5px 8px 7px; font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; opacity: .5; }
.ft-att button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 9px 11px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ft-att button:hover { background: color-mix(in oklab, var(--text) 9%, transparent); }
.ft-att-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
/* 🎨 NENHUM DISCO FICA BRANCO (2026-08-16, Tony): a cor agrupa a categoria, então o
   preenchimento é parte do agrupamento — dois X-DOC em amarelo claro, a medalha no mesmo
   amarelo, a pergunta em verde, o valor em azul. Disco vazado no meio de discos preenchidos
   lia como "desligado". ⛔ NÃO deixar fundo transparente em um só. */
.ft-att-ic.doc { border: 1.5px solid oklch(0.62 0.11 78); color: oklch(0.62 0.11 78); background: color-mix(in oklab, oklch(0.62 0.11 78) 13%, transparent); }
/* ⚡ A CARGA DE BATERIA É DA CATEGORIA VALOR (2026-08-26, Tony, por comentário na tela:
   “coloca azul o círculo para ficar na mesma categoria do transferência PING”). O disco
   agrupa CATEGORIA, e as duas são dinheiro saindo do cofre — uma para a carteira de
   alguém, outra para a bateria de um serviço dele. ⛔ NÃO dar tom próprio à carga aqui:
   seria uma quarta categoria para o que já é valor. ⚠️ Um seletor, uma verdade — o âmbar
   da energia continua no CARTÃO da bolha, que é outra superfície (lá o medidor substitui
   o cifrão, porque bateria não se lê em dólar). */
.ft-att-ic.coin, .ft-att-ic.bat { border: 1.5px solid var(--accent); color: var(--accent); background: color-mix(in oklch, var(--accent) 13%, transparent); }
.ft-att-ic.coin { font-size: 17px; font-weight: 700; }
.ft-att-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ft-att-m strong { font-size: .9rem; font-weight: 600; }
.ft-att-m em { font-style: normal; font-size: .72rem; line-height: 1.35; opacity: .6; }
/* o + carrega a natureza escolhida: bronze do X-DOC, azul do valor (PING e carga), acento
   da pergunta. ⚠️ A pergunta É um tipo de transação (gera botões para a outra parte), então
   ela também marca o botão — sem isso o + ficava neutro com o editor de opções aberto. */
.ft-cbtn.ft-attb.on-doc { border-color: oklch(0.62 0.11 78); background: color-mix(in oklab, oklch(0.62 0.11 78) 15%, transparent); }
.ft-cbtn.ft-attb.on-ask { border-color: color-mix(in oklab, var(--accent) 60%, transparent); background: color-mix(in oklab, var(--accent) 11%, transparent); color: var(--accent); }
.ft-cbtn.ft-attb.on-ping, .ft-cbtn.ft-attb.on-bat { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 15%, transparent); color: var(--accent); }
.ft-attb-c { font-size: 18px; font-weight: 700; line-height: 1; }
/* ESC-41: um recado por vez — o compositor vira a barra de cancelar envio */
.ft-comp-undo { justify-content: center; }
.ft-undo { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-width: 0; padding: 12px 16px; border-radius: 999px; border: 1.5px solid oklch(0.55 0.21 27); background: color-mix(in oklab, oklch(0.55 0.21 27) 10%, transparent); color: oklch(0.55 0.21 27); font: inherit; white-space: nowrap; cursor: pointer; }
.ft-undo:hover { background: oklch(0.55 0.21 27); color: #fff; }
.ft-undo b { font-size: .92rem; font-weight: 600; }
.ft-undo em { font-style: normal; font-size: .72rem; opacity: .75; }
.ft-undo em { flex: none; min-width: 30px; text-align: right; }
/* rabinho de balão de fala no recorte do chat (e nas conversas) */
.ft-b.in::before { content: ""; position: absolute; left: -7px; bottom: -1px; width: 14px; height: 14px; background: inherit; border-left: 1px solid color-mix(in oklab, var(--text) 12%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--text) 12%, transparent); clip-path: polygon(0 100%, 100% 100%, 100% 0); border-bottom-left-radius: 12px; }
.ft-b.out::before { content: ""; position: absolute; right: -7px; bottom: -1px; width: 14px; height: 14px; background: inherit; border-right: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); clip-path: polygon(0 0, 0 100%, 100% 100%); border-bottom-right-radius: 12px; }
.ft-tp-voice { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--text) 18%, transparent); background: var(--bg-base); color: var(--text-mute); font-size: 11px; font-weight: 700; cursor: pointer; }
.ft-tp-voice:hover { color: var(--text); }
.ft-tp-voice.on { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
/* 🔘 OS TRÊS VERBOS CABEM EM UMA LINHA (2026-08-17, Tony): o caso mais comum da fita é
   Responder · Pular · Ignorar, e quebrar em duas linhas fazia o Ignorar parecer de outra família.
   ⚠️ O CTA manda no espaço (`flex: 1 1 auto`) e os outros dois encolhem até o texto — a hierarquia
   se lê pela LARGURA, não só pela cor. ⚠️ Toque nunca abaixo de 44px: o padding vertical fica.
   ⛔ NÃO tirar o `flex-wrap`: frame de convite tem rótulos longos e ali quebrar é o certo. */
/* 🟢 as opções do usuário no frame: MESMA pele do cartão do chat (`.ft-ask`) — empilhadas,
   largura cheia, filete entre elas, verde da pergunta. Ocupam a linha inteira e empurram
   Pular/Ignorar para baixo, que é onde verbo de sistema deve ficar quando a decisão é da pessoa. */
.ft-tp-ask{flex:1 1 100%;display:flex;flex-direction:column;border:1px solid var(--border-soft);border-radius:14px;overflow:hidden;--ask:oklch(0.52 0.13 152)}
.theme-dark .ft-tp-ask{--ask:oklch(0.74 0.15 152)}
.ft-tp-ask .ft-ask-b{display:flex;align-items:center;gap:9px;min-height:46px;padding:0 14px;border:0;border-top:1px solid var(--border-soft);background:transparent;color:var(--ask);font:inherit;font-size:13.5px;font-weight:650;text-align:left;cursor:pointer;transition:background .13s}
.ft-tp-ask .ft-ask-b:first-child{border-top:0}
.ft-tp-ask .ft-ask-b:hover{background:color-mix(in oklab,var(--ask) 10%,transparent)}
.ft-ask-e{flex:none;font-size:16px;line-height:1}
.ft-tp-acts { display: flex; flex-wrap: wrap; align-items: stretch; gap: 7px; }
.ft-tp-acts .ft-tp-b { flex: 0 1 auto; min-width: 0; }
.ft-tp-acts .ft-tp-b.go { flex: 1 1 auto; }
.ft-tp-b svg { flex: none; }
.ft-tp-b { padding: 11px 15px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--text) 18%, transparent); background: none; color: var(--text-mute); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.ft-tp-b:hover { color: var(--text); border-color: color-mix(in oklab, var(--text) 32%, transparent); }
.ft-tp-b.go { color: #fff; background: var(--accent); border-color: var(--accent); }
.ft-tp-b.go:hover { color: #fff; background: color-mix(in oklab, var(--accent) 88%, black); }
.ft-tp-b.go:disabled { opacity: .45; cursor: default; }
.ft-tp-b.no { color: oklch(0.55 0.19 25); border-color: oklch(0.6 0.19 25 / .4); }
.ft-tp-b.no:hover { color: oklch(0.5 0.2 25); border-color: oklch(0.6 0.19 25 / .65); }
.ft-tp-ta { display: flex; flex-direction: column; gap: 10px; }
.ft-tp-ta textarea { width: 100%; padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); border-radius: 14px; background: var(--bg-base); color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; outline: none; }
.ft-tp-ta textarea:focus { border-color: color-mix(in oklab, var(--text) 32%, transparent); }
/* faixa do dispositivo assinante: sangra até as bordas arredondadas do cartão;
   um toque abre o recibo completo (IP, sessão, carimbo) */
.ft-tp-dev { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: calc(100% + 32px); margin: 4px -16px -16px; padding: 8px 16px; border: 0; cursor: pointer; text-align: left; font: inherit; font-size: 9.5px; letter-spacing: .04em; color: var(--text-dim); background: color-mix(in oklab, var(--text) 6%, transparent); border-top: 1px solid color-mix(in oklab, var(--text) 10%, transparent); border-radius: 0 0 17px 17px; }
.ft-tp-dev:hover { color: var(--text-mute); }
.ft-tp-rcpt { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed color-mix(in oklab, var(--text) 14%, transparent); font-size: 9.5px; letter-spacing: .03em; }
.ft-tp-rcpt em { font-style: normal; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.ft-tp-rcpt b { font-weight: 650; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* linha da faixa: texto + botão "i" de explicação */
.ft-tp-dev-row { display: flex; align-items: center; gap: 8px; }
.ft-tp-dev-line { flex: 1; min-width: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.ft-tp-info { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--text) 25%, transparent); background: none; color: var(--text-dim); font: italic 700 10px/1 Georgia, serif; cursor: pointer; display: grid; place-items: center; }
.ft-tp-info:hover { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); }
/* pop-up lúdico: as cinco provas da assinatura */
/* ⚠️ O MODAL FICA ACIMA DA DOCA (2026-08-12, Tony viu o anexo furando o
   diálogo). O scrim era z-index 80 e a doca do compositor é 92 — então o clipe
   do anexo, que mora na doca, aparecia POR CIMA da caixa de seleção, como se não
   fizesse parte da mesma tela. Passou a nascer acima da doca (92) e dos pop-ups
   dela (`.ft-att` 91), e continua abaixo da imersão (`.mn-imm` 1200), que é a
   camada de LER documento e tem de cobrir tudo.
   ⛔ NÃO baixar o z-index da doca para resolver isto: ela precisa ficar acima da
      conversa que rola atrás dela. Quem sobe é o modal. */
.ft-pv-scrim { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 18px; background: oklch(0.15 0.02 280 / .45); backdrop-filter: blur(3px); }
.ft-pv { width: min(440px, 100%); max-height: 82vh; overflow: auto; padding: 18px; border-radius: 20px; background: var(--bg-elev); border: 1px solid color-mix(in oklab, var(--text) 14%, transparent); box-shadow: 0 24px 60px -24px oklch(0.15 0.02 280 / .5); }
.ft-pv { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 25%, transparent) transparent; }
.ft-pv::-webkit-scrollbar { width: 5px; }
.ft-pv::-webkit-scrollbar-track { background: transparent; }
.ft-pv::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--text) 22%, transparent); border-radius: 999px; }
.ft-pv::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--text) 38%, transparent); }
.ft-pv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ft-pv-head strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ft-pv-lead { margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--text-mute); text-wrap: pretty; }
.ft-pv-card { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid color-mix(in oklab, var(--text) 9%, transparent); }
.ft-pv-emo { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent); }
.ft-pv-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ft-pv-m > strong { font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.ft-pv-m > span { font-size: 12px; line-height: 1.55; color: var(--text-mute); text-wrap: pretty; }
.ft-pv-w { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; }
.ft-pv-w i { width: 14px; height: 4px; border-radius: 999px; background: color-mix(in oklab, var(--text) 12%, transparent); }
.ft-pv-w i.on { background: var(--accent); }
.ft-pv-w em { margin-left: 6px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
/* impressora de comprovantes: fita contínua — sem cortes entre tiras, só uma
   linha divisória de 100%; serrilha apenas no fim da fita */
/* 📜 A FOLHA DA ATA NO PRODUTO (2026-08-27) — o desenho é todo do `tira-ata.css`/`AtaPaper`.
   Aqui o `.ft-roll` só deixa de desenhar: some o fundo, a borda e os dentes do comprovante
   velho, porque a folha traz os dela. ⛔ NÃO redesenhar a tira nesta folha — layout de tira
   mora num arquivo só (o mesmo contrato do take-prose.css, CLAUDE.md §1).
   ⚠️ `--ata-out` é a cor DOS DENTES rasgados: tem de ser o fundo de TRÁS da folha, senão os
      dentes aparecem como faixa clara sobre o escuro. ⚠️ E as fontes: o paper pede
      `--mono`/`--serif`, que existem no catálogo e não neste app. */
.ft-roll.ft-roll-ata { --ata-out: var(--bg-base); --mono: "Geist Mono", ui-monospace, Menlo, monospace; --serif: "Instrument Serif", Georgia, "Times New Roman", serif; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; }
.ft-roll.ft-roll-ata + .ft-roll.ft-roll-ata { border-top: 0; margin-top: 10px; }
.ft-roll.ft-roll-ata:last-child::after { content: none; }
.ft-roll.ft-roll-ata:hover .ata-tape, .ft-roll.ft-roll-ata:focus-visible .ata-tape { box-shadow: 0 12px 30px -18px oklch(0.3 0.03 85/.7), 0 0 0 1px oklch(0.86 0.03 85) inset; outline: none; }
/* ⛓ MINHA CORRENTE — a tela de prova da conta (2026-08-28). Doutrina: docs/L1-GRUPO-C-MOTOR.md
   §Cx1. ⚠️ O vocabulário do ELO (`.mn-chain`/`.mn-ch-link`) é REUSADO do X-DOC de propósito —
   é o mesmo `prev → hash`. ⛔ NÃO criar CSS de corrente novo aqui: só o cartão da ÂNCORA, que
   é a unidade desta tela. */
/* ⛓ PROVA DE INTEGRIDADE — a tela de prova da conta (2026-08-28). Doutrina:
   docs/L1-GRUPO-C-MOTOR.md §Cx1. ⚠️ O vocabulário do ELO (`.mn-chain`/`.mn-ch-link`/
   `.mn-ch-hash`) é REUSADO do X-DOC de propósito — é o mesmo `prev → hash`. ⛔ NÃO criar CSS
   de corrente novo aqui: só o cartão da ÂNCORA e as abas. */
.set-row-glyph.chn { color: #0A84FF; }
/* ✍️ o glifo de "Escrever documento" veste o OURO do X-DOC — a mesma cor do documento no resto
   do produto. ⚠️ ⛔ NÃO usar o azul da corrente: azul é a prova de integridade, e as duas linhas
   são vizinhas nesta prateleira; mesma cor faria parecerem a mesma coisa. */
.set-row-glyph.doc { color: oklch(0.8 0.11 84); }
.set-row-glyph.doc svg { display: block; }
/* 🏷 V26 · glifo de "Gerenciar meus domínios": verde da identidade pessoal (o .bd-id-user do
   registro de nome). ⛔ NÃO usar ouro (documento) nem azul (prova): são vizinhas na prateleira. */
.set-row-glyph.dom { color: oklch(0.62 0.15 155); background: color-mix(in oklch, oklch(0.62 0.15 155) 12%, transparent); }
.set-row-glyph.dom svg { display: block; }
/* 🏷 V26 · envelope do DomainsScreen dentro da pilha da carteira. A tela nasceu como PÁGINA
   (phone-screen/phone-scroll com a própria barra); na gaveta o cabeçalho é o da casa, então o
   .bd-top some (e com ele o MobileMenu, cuja nav sai para bio-profile.html). ⛔ NÃO mexer em
   bio-domains.jsx para isso: a página continua precisando do .bd-top dela. */
.wl-dom .phone-screen, .wl-dom .phone-scroll { height: auto; min-height: 0; max-height: none; width: 100%; max-width: none; overflow: visible; border-radius: 0; box-shadow: none; background: transparent; }
.wl-dom .bd-top { display: none; }
/* o banner cola nas extremidades (Tony, 12/09): o envelope anula o padding 12px 16px do
   .set-sheet-body; o conteúdo interno já traz o próprio respiro (.bd-body). */
.wl-dom { margin: -12px -16px 0; width: calc(100% + 32px); flex: none; min-height: 0; }
.wl-dom .bd-banner { display: block; width: 100%; min-height: 40px; }
.wl-dom .bd-banner img { width: 100%; max-width: none; }
.wl-dom .bd-body { padding-bottom: 8px; }
/* 🏷 V27 · DOMÍNIOS REGISTRADOS (DomHome, wallet.jsx) — a tela intermediária. Vocabulário da
   prateleira (.set-group: --bg-elev, --border-soft, 16px) para ser da mesma casa; o verde é o da
   identidade pessoal (.bd-id-user), a marca fica neutra: identidades diferentes, cores diferentes. */
.dh { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 20px; }
.dh-card { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
/* a cápsula PERMANENTE (a pessoa, com a âncora .id que ninguém toma) veste o verde da identidade
   pessoal (.bd-id-user); a da marca fica neutra — identidades diferentes, cores diferentes. */
.dh-card.me { background: linear-gradient(160deg, oklch(0.93 0.07 155) 0%, oklch(0.965 0.035 155) 55%, oklch(0.985 0.012 155) 100%); border-color: oklch(0.8 0.1 155); }
.dh-card.me .dh-link-k { color: oklch(0.5 0.13 155); }
.dh-card.me .dh-link-row { border-color: oklch(0.8 0.1 155); }
body.theme-dark .dh-card.me { background: linear-gradient(160deg, oklch(0.32 0.07 160) 0%, oklch(0.26 0.04 160) 55%, var(--bg-elev) 100%); border-color: oklch(0.52 0.11 160); }
body.theme-dark .dh-card.me .dh-link-row { border-color: oklch(0.45 0.09 160); }
body.theme-dark .dh-card.me .dh-link-k { color: oklch(0.78 0.13 163); }
/* a cápsula da MARCA veste o azul do ícone de registro de marca (.dh-reg-ic.brand, hue 255) —
   mesmo desenho da cápsula verde da pessoa, outra identidade, outra cor. */
.dh-card.brand { background: linear-gradient(160deg, oklch(0.93 0.05 255) 0%, oklch(0.965 0.025 255) 55%, oklch(0.985 0.01 255) 100%); border-color: oklch(0.8 0.08 255); }
.dh-card.brand .dh-link-k { color: oklch(0.5 0.14 255); }
.dh-card.brand .dh-link-row { border-color: oklch(0.8 0.08 255); }
.dh-card.brand .dh-link-row.ok { border-color: oklch(0.58 0.16 255); }
.dh-card.brand .dh-link-row.ok .dh-copy { color: oklch(0.52 0.16 255); }
.dh-card.brand .dh-edit { background: oklch(0.58 0.16 255); }
.dh-card.brand .dh-edit:hover { background: oklch(0.52 0.16 255); }
body.theme-dark .dh-card.brand { background: linear-gradient(160deg, oklch(0.32 0.07 258) 0%, oklch(0.26 0.04 258) 55%, var(--bg-elev) 100%); border-color: oklch(0.5 0.12 258); }
body.theme-dark .dh-card.brand .dh-link-k { color: oklch(0.75 0.12 258); }
body.theme-dark .dh-card.brand .dh-link-row { border-color: oklch(0.45 0.1 258); }
.dh-head { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.dh-face { flex: none; width: 68px; height: 68px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: oklch(0.62 0.15 155); color: #fff; font: 700 20px/1 var(--font-display); letter-spacing: .02em; }
.dh-face.sq { border-radius: 14px; background: color-mix(in oklch, var(--text) 10%, transparent); color: var(--text); }
.dh-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.dh-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-wrap: balance; overflow-wrap: anywhere; max-width: 100%; }
/* o nome é LINK (abre o perfil publicado em hiperfoco): azul da casa, como o ev-bio-namelnk */
.dh-name-lnk { border: 0; background: none; padding: 0; margin: 0; text-align: left; cursor: pointer; color: var(--accent, #0A84FF); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklch, var(--accent, #0A84FF) 45%, transparent); font: inherit; font-weight: 700; }
.dh-name-lnk:hover { text-decoration-color: currentColor; }
/* sólido no verde do ícone de registro (.dh-reg-ic.user), com lápis — Tony, 12/09 */
.dh-edit { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: #fff; text-decoration: none; padding: 5px 12px 5px 10px; border: 0; border-radius: 999px; background: oklch(0.62 0.15 155); line-height: 1.2; }
.dh-edit:hover { background: oklch(0.56 0.15 155); color: #fff; }
.dh-edit svg { display: block; }
.dh-link { display: flex; flex-direction: column; gap: 5px; }
.dh-link-k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); padding-left: 2px; }
.dh-link-head { display: flex; align-items: center; gap: 6px; padding-right: 2px; }
.dh-exp { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; letter-spacing: .02em; color: var(--text-mute); white-space: nowrap; }
.dh-exp svg { display: block; }
.dh-exp.soon { color: oklch(0.62 0.17 45); font-weight: 600; }
.dh-link-row { width: 100%; display: flex; align-items: stretch; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-base); overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.dh-link-row:hover { border-color: var(--text-mute); }
.dh-link-row:active { background: color-mix(in oklch, var(--text) 5%, var(--bg-base)); }
.dh-link-row.ok { border-color: oklch(0.62 0.15 155); }
.dh-url { flex: 1; min-width: 0; padding: 11px 12px; font-size: 13px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-url b { color: var(--text); font-weight: 600; }
.dh-copy { flex: none; width: 44px; border-left: 1px solid var(--border); color: var(--text); display: grid; place-items: center; }
.dh-link-row.ok .dh-copy { color: oklch(0.55 0.15 155); }
.dh-copied { font-size: 10px; color: oklch(0.55 0.15 155); padding-left: 2px; }
.dh-reg { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--bg-base); color: var(--text); font: 600 14px var(--font-display); text-align: left; cursor: pointer; }
.dh-card .dh-reg { border-style: dashed; }
.dh > .dh-reg { background: var(--bg-elev); border-radius: 16px; padding: 14px; }
/* o botão solto de registrar marca é o ATO principal da tela: veste o azul claro da família da
   marca (borda no tom do ícone), para não sumir no fundo neutro da gaveta — Tony, 12/09 */
.dh > .dh-reg.brand { background: linear-gradient(160deg, oklch(0.94 0.045 255) 0%, oklch(0.975 0.02 255) 100%); border: 1px solid oklch(0.78 0.1 255); color: oklch(0.36 0.12 255); }
.dh > .dh-reg.brand:hover { border-color: oklch(0.58 0.16 255); background: linear-gradient(160deg, oklch(0.92 0.06 255) 0%, oklch(0.965 0.03 255) 100%); }
.dh > .dh-reg.brand .dh-chev { color: oklch(0.58 0.16 255); }
body.theme-dark .dh > .dh-reg.brand { background: linear-gradient(160deg, oklch(0.32 0.07 258) 0%, oklch(0.26 0.04 258) 100%); border-color: oklch(0.5 0.12 258); color: oklch(0.9 0.04 258); }
.dh-reg > span:not(.dh-reg-ic) { flex: 1; min-width: 0; }
.dh-reg:hover { border-color: var(--text-mute); }
.dh-chev { flex: none; color: var(--text-mute); }
/* blocos sólidos com glifo branco = .ed-domsel-reg-ic do seletor da X-Bio (bio.css). Mesmas cores. */
.dh-reg-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.dh-reg-ic.user { background: oklch(0.62 0.15 155); }
.dh-reg-ic.brand { background: oklch(0.58 0.16 255); }
/* ═══ 🔋 FATURA DE BATERIA (bat-invoice.jsx · V29) — o pop-up universal de cobrança em L2 ═══
   Uma janela, N Hubs. A barra reusa a régua da conta de serviço (.led-bat-*): o que FICA é sólido
   na cor do serviço, a FATIA que sai é listrada na mesma cor, o que falta (insuficiente) é vermelho
   pontilhado. ⛔ NÃO desenhar barra de bateria dentro do modal de um serviço — ele passa bat/amount. */
.bi-scrim { position: fixed; inset: 0; z-index: 400; background: color-mix(in oklab, #000 45%, transparent); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; }
.bi { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-soft); border-radius: 22px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 24px 60px -20px rgb(0 0 0 / .45); }
.bi-svc { display: flex; align-items: center; gap: 10px; }
.bi-svc-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.bi-svc-art { flex: none; width: 38px; height: 38px; border-radius: 10px; overflow: hidden; display: block; }
.bi-svc-art img { width: 100%; height: 100%; display: block; }
.bi-svc-name { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.1; }
.bi-svc-name small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); font-weight: 500; }
.bi-eyebrow { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); text-align: center; margin-top: 2px; }
.bi-title { font-size: 24px; font-weight: 700; text-align: center; margin-top: -8px; letter-spacing: -.01em; }
/* a bateria-herói: barra alta, fatia pulsando com brilho, etiqueta do valor flutuando sobre a fatia */
.bi-bat { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 12px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--bg-base); }
.bi-bar-wrap { position: relative; padding-top: 30px; }
.bi-bar { position: relative; height: 18px; border-radius: 999px; background: color-mix(in oklab, var(--text) 8%, transparent); overflow: hidden; isolation: isolate; }
.bi-bar-slice { z-index: 1; }
.bi-bar > span { position: absolute; top: 0; bottom: 0; }
/* ⚡ a barra fala a língua da BATERIA, não a do serviço (Tony, 13/09): carga = verde da bateria da casa,
   fatia a consumir = amarelo-esverdeado pulsando. A cor do serviço fica no cabeçalho e no botão Pagar. */
.bi-bat { --bi-chg: var(--bat-green, oklch(0.72 0.19 150)); --bi-burn: oklch(0.86 0.19 105); }
.bi-bar-after { left: 0; border-radius: 999px 0 0 999px; background: linear-gradient(90deg, oklch(0.62 0.16 152), var(--bi-chg)); transition: width .35s ease; }
.bi-bar-slice { background: repeating-linear-gradient(-55deg, var(--bi-burn) 0 4px, color-mix(in oklab, var(--bi-burn) 45%, transparent) 4px 8px); border-radius: 0 999px 999px 0; animation: bi-pulse 1.4s ease-in-out infinite; transition: left .35s ease, width .35s ease; }
.bi-bar-miss { background: repeating-linear-gradient(-55deg, oklch(0.62 0.2 25) 0 3px, transparent 3px 7px); opacity: .8; border-radius: 0 999px 999px 0; }
.bi-bar-tag { position: absolute; top: 0; transform: translateX(-50%); z-index: 1; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; line-height: 1.3; }
.bi-bar-tag::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 7px; height: 7px; background: var(--bg-elev); border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); transform: translateX(-50%) rotate(45deg); }
@keyframes bi-pulse { 0%, 100% { opacity: .7; box-shadow: 0 0 0 0 transparent; filter: brightness(1); } 50% { opacity: 1; box-shadow: 0 0 16px 3px color-mix(in oklab, var(--bi-burn) 70%, transparent); filter: brightness(1.12); } }
.bi-bat-legend { margin: 0; font-size: 10px; line-height: 1.5; color: var(--text-dim); text-align: center; text-wrap: balance; }
.bi-bat-legend b { color: var(--text-dim); font-weight: 600; }
.bi-bat-legend em { font-style: normal; color: var(--text-dim); }
.bi-bat.is-low .bi-bat-legend b { color: oklch(0.62 0.17 45); }
.bi-bat-short { color: oklch(0.55 0.2 25); font-weight: 600; }
.bi-bat.is-short .bi-bar-tag { color: oklch(0.55 0.2 25); }
.bi-bar-tag svg { color: oklch(0.7 0.17 95); flex: none; }
.bi-receipt { border: 1px solid var(--border-soft); border-radius: 14px; background: var(--bg-base); padding: 4px 14px; }
.bi-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 14px; color: var(--text-mute); border-bottom: 1px solid var(--border-soft); }
.bi-row:last-child { border-bottom: 0; }
.bi-row .mono { color: var(--text); white-space: nowrap; }
.bi-total { font-weight: 700; color: var(--text); font-size: 15px; align-items: baseline; }
.bi-total .mono { font-weight: 700; }
.bi-total-v { display: flex; align-items: baseline; gap: 8px; }
.bi-usd { font-size: 11px; font-weight: 400; color: var(--text-dim) !important; }
.bi-note { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.bi-note.is-short { color: oklch(0.55 0.2 25); font-weight: 600; }
.bi-acts { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 2px; }
.bi-btn { height: 48px; border-radius: 13px; font: 700 15px var(--font-display); cursor: pointer; border: 1px solid var(--border); }
.bi-btn.ghost { background: var(--bg-base); color: var(--text); }
.bi-btn.pay { border: 0; color: #fff; background: var(--text-dim); }
.bi-btn.pay:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .bi-bar-slice { animation: none; opacity: .85; } }
/* chips de período do chamador dentro da fatura: numa linha, sem quebrar "1 / ano" */
.bi .bd-years-modal { margin: 0; }
.bi .bd-year { white-space: nowrap; }
@container (max-width: 400px) { .bi-title { font-size: 21px; } }
/* ⚠️ AS ABAS SÃO O CONSERTO DA CONFUSÃO entre as duas contagens: cada uma carrega o SEU número,
   e é o rótulo em cima do dado que impede a leitura errada. ⛔ NÃO esconder o número da aba
   inativa — é a comparação que ensina que são escalas diferentes. */
.ft-chn-tabs { display: flex; gap: 6px; margin: 0 0 9px; }
.ft-chn-tabs button { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: none; color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ft-chn-tabs button em { font-style: normal; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ft-chn-tabs button.on { border-color: color-mix(in oklab, #0A84FF 55%, transparent); background: color-mix(in oklab, #0A84FF 10%, transparent); color: var(--text); }
.ft-chn-tabs button.on em { color: #0A84FF; }
.ft-chn-tabd { margin: 0 2px 14px; font-size: 11px; line-height: 1.55; color: var(--text-mute); text-wrap: pretty; }
/* o cartão: chapa sóbria, sem valor nenhum — ⛔ esta tela não é extrato. ⚠️ padding-bottom
   maior porque a fita do hash é absoluta na base (como no `.mn-ch-row` do X-DOC). */
.ft-chn-a { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 13px 26px; border: 1px solid var(--border-soft); border-radius: 13px; background: var(--bg-elev); overflow: hidden; }
.ft-chn-a-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in oklab, #0A84FF 14%, transparent); color: #0A84FF; }
.ft-chn-a-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ft-chn-a-m strong { font-size: 13px; font-weight: 600; }
.ft-chn-a-m em { font-style: normal; font-size: 10.5px; color: var(--text-dim); }
/* ⚠️ HASH INTEIRO na fita, como no X-DOC — esta tela existe para CONFERIR, e conferência se faz
   no campo completo. ⛔ A regra da abreviação vale para a CARA da bolha, onde a função é
   reconhecer: são funções opostas. */
.ft-chn-a .mn-ch-hash { border-radius: 0; }
.theme-dark .ft-chn-a .mn-ch-hash { background: color-mix(in oklab, #0A84FF 16%, var(--bg-base)); color: #6FB4FF; }
.ft-chn-a .mn-ch-hash-ic { flex: none; display: block; width: 9px; height: 9px; }
/* ⏳ elo SELADO mas ainda NÃO ANCORADO: o hash fica (o elo existe), e a etiqueta à direita diz
   o que falta. ⚠️ Tom neutro, ⛔ nunca vermelho: não há defeito nenhum — há uma espera. */
/* ⏳ A JANELA ABERTA — a âncora POR NASCER (28/08). O tracejado é DA JANELA, não dos elos:
   ⚠️ todos os elos da hora corrente estão sem âncora, e isso é propriedade do grupo. Os elos
      dentro seguem normais (selados) — ⛔ NUNCA tracejar elo selado: neste produto tracejado
      significa "ainda não selado", e o elo tem hash, prev e assinatura.
   ⛔ NÃO repetir a etiqueta por linha: rótulo igual em várias linhas seguidas ensina a não ler
      nenhuma — ele mora no cabeçalho do grupo, uma vez. */
.ft-chn-win { display: flex; flex-direction: column; padding: 9px 9px 10px; border: 1px dashed color-mix(in oklab, #0A84FF 42%, transparent); border-radius: 16px; background: color-mix(in oklab, #0A84FF 5%, transparent); }
/* ⏱ o cabeçalho da janela leva o RÓTULO pequeno e o RELÓGIO grande: ⚠️ o número muda a cada
   segundo e o olho volta nele — ⛔ relógio em corpo de rótulo vira ruído piscando. */
.ft-chn-win-h { display: flex; align-items: baseline; gap: 7px; margin: 2px 4px 9px; font-size: .5rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in oklab, #0A84FF 72%, var(--text-mute)); }
/* 🔴 O RELÓGIO EM VERMELHO (2026-08-28, Tony): ⚠️ aqui vermelho NÃO é erro — é **contagem
   correndo**, a gramática de cronômetro que todo mundo já lê. ⛔ NÃO reusar este tom em estado
   de falha nesta tela (o único vermelho daqui é o tempo), e ⛔ não pôr vermelho no rótulo: quem
   corre é o número. */
.ft-chn-win-h b { font-size: .82rem; font-weight: 650; letter-spacing: .01em; text-transform: none; font-variant-numeric: tabular-nums; color: oklch(0.62 0.21 25); }
.theme-dark .ft-chn-win-h b { color: oklch(0.7 0.19 25); }
/* 🔴 o MESMO vermelho nas duas abas: ⚠️ cronômetro é um só conceito, então é uma só cor.
   ⛔ NÃO deixar a Global em tom diferente — dois vermelhos para a mesma contagem fariam a
   pessoa procurar a diferença que não existe. */
.ft-chn-clk { font-weight: 650; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: oklch(0.62 0.21 25); }
.theme-dark .ft-chn-clk { color: oklch(0.7 0.19 25); }
.ft-chn-win .ft-chn-a { background: var(--bg-base); }
.ft-chn-a .mn-ch-hash.wait { background: color-mix(in oklab, var(--text) 8%, var(--bg-base)); color: var(--text-mute); }
.ft-chn-a .mn-ch-hash-w { flex: none; margin-left: auto; padding-left: 8px; font-weight: 600; font-size: .46rem; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.ft-chn-a .mn-ch-hash.pend { background: none; border-top: 1px dashed color-mix(in oklab, var(--text) 22%, transparent); color: var(--text-mute); letter-spacing: .05em; text-transform: uppercase; }
/* ⚠️ A HORA CORRENTE VEM ABERTA: o elo existe, a oponibilidade ainda não. Tracejado, como o
   elo até um rascunho no X-DOC. ⛔ NÃO desenhar âncora nela: seria prometer publicação que não
   aconteceu. */
.ft-chn-a.open { border-style: dashed; background: none; }
.ft-chn-a.open .ft-chn-a-ic { background: none; border: 1px dashed color-mix(in oklab, #0A84FF 45%, transparent); }
/* ✅ o botão de conferir em 100%, ACIMA das abas — ⚠️ é a única ação da tela, e ação atrás
   de scroll não se exerce. ⛔ NÃO reduzir a largura: o botão largo é o que o distingue das
   abas logo abaixo (que são duas metades). */
/* ✅ O BOTÃO É A AÇÃO DA TELA, então ele é CHAPA, não contorno (2026-08-28, Tony: "esse botão
   tá muito apagado"). ⚠️ Eu o havia feito de contorno por uma regra minha — "conferir é leitura,
   e leitura é contorno" — mas isso vale para ação SECUNDÁRIA. Aqui ele é o único verbo da tela,
   e verbo único apagado não é sobriedade: é esconder o que se quer que a pessoa faça.
   ⚠️ O BRILHO é do AZUL DA CORRENTE (o mesmo #0A84FF do elo e do hash) — ⛔ não verde: verde
      é o VEREDITO (o ✓ do pop-up), e antecipá-lo no botão prometeria o resultado antes do
      cálculo. Um azul que convida, um verde que confirma.
   ⚠️ MESMO RAIO DAS ABAS (12px): botão e abas são a mesma família de controle, empilhados —
      ⛔ raio diferente em peças vizinhas faz a coluna parecer montada por acidente. */
.ft-chn-b.wide { display: flex; width: 100%; margin: 0 0 8px; padding: 13px 16px; border-radius: 12px; border-color: transparent; background: #0A84FF; color: #fff; font-size: 13.5px; font-weight: 650; letter-spacing: .01em; box-shadow: 0 8px 22px -10px color-mix(in oklab, #0A84FF 75%, transparent), 0 0 0 1px color-mix(in oklab, #0A84FF 55%, transparent) inset; }
.ft-chn-b.wide:hover { border-color: transparent; background: color-mix(in oklab, #0A84FF 88%, #fff); box-shadow: 0 10px 26px -10px color-mix(in oklab, #0A84FF 85%, transparent), 0 0 0 1px color-mix(in oklab, #fff 30%, transparent) inset; }
/* 💾 O ARQUIVO DE ÂNCORAS — opt-in, no pé da tela (2026-08-28). ⚠️ A 1ª linha declara o que a
   pessoa JÁ TEM (espinha diária, com ✓ verde); a 2ª é a oferta. ⛔ NÃO inverter: começar pela
   oferta sugeriria que sem baixar ela não confere nada. */
.ft-chn-arq { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin: 16px 0 0; padding: 13px 14px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--bg-elev); }
.ft-chn-arq-h { font-size: .5rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.ft-chn-arq-l { display: grid; grid-template-columns: 13px 1fr; gap: 7px; align-items: start; font-size: 11px; line-height: 1.45; color: var(--text-mute); }
.ft-chn-arq-l:not(.done) { grid-template-columns: 1fr; }
.ft-chn-arq-l.done { color: var(--text); }
.ft-chn-arq-l.done svg { margin-top: 2px; color: oklch(0.72 0.18 148); }
/* ⏳ a barra é fina e azul: ⚠️ é PROGRESSO, não veredito — ⛔ nada de verde antes de terminar */
.ft-chn-arq-bar { width: 100%; height: 4px; border-radius: 999px; background: color-mix(in oklab, var(--text) 12%, transparent); overflow: hidden; }
.ft-chn-arq-bar i { display: block; height: 100%; border-radius: 999px; background: #0A84FF; transition: width .26s linear; }
.ft-chn-arq-p { font-size: 10px; color: #0A84FF; font-variant-numeric: tabular-nums; }
/* ⏸ PAUSADO tem cara própria — ⚠️ azul vivo diz "acontecendo"; parado é tom neutro. ⛔ NÃO
   reusar a cor do progresso no estado pausado: cor que não muda faz o rótulo mentir sozinho. */
.ft-chn-arq-p.pause { color: var(--text-mute); }
.ft-chn-arq-p.pause ~ .ft-chn-arq-b { margin-top: 1px; }
.ft-chn-arq-bar:has(~ .pause) i { background: color-mix(in oklab, var(--text) 34%, transparent); }
.ft-chn-arq-b { align-self: stretch; justify-content: center; gap: 8px; border-radius: 11px; font-size: 12.5px; }
.ft-chn-arq-b.go { border-color: color-mix(in oklab, #0A84FF 45%, transparent); color: #0A84FF; font-weight: 600; }
.ft-chn-arq-b.go:hover { border-color: #0A84FF; background: color-mix(in oklab, #0A84FF 9%, transparent); }
.ft-chn-arq-w { margin: 0; font-size: 10.5px; line-height: 1.55; color: var(--text-mute); text-wrap: pretty; }
.ft-chn-arq-w.dim { opacity: .7; }
/* 📐 `container-type` AQUI, e a consulta mede a largura DESTE bloco (§5b: dentro da gaveta o
   painel tem ~550px mas o VIEWPORT é de desktop, então `@media` nunca dispararia).
   ⚠️ Um contêiner NÃO consulta a si mesmo — as regras dentro do `@container` só podem mirar
      DESCENDENTES. ⛔ NÃO pedir `.ft-chn-go{gap}` lá dentro: não aplica, e o silêncio faz
      parecer que a consulta está quebrada. O gap fica aqui. */
.ft-chn-go { container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin: 16px 2px 0; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.ft-chn-go .mn-ch-cap { margin: 0 0 2px; }
/* 🐞 A LEGENDA VIRAVA COLUNAS (30/08, achado no iPhone). `.mn-ch-cap` é `display:flex` porque
   foi feita para **ícone + texto**; esta 2ª linha não tem ícone e recebe o ARRAY do `ftMD`
   (trechos de texto + `<b>` da marcação). Cada trecho virou um FLEX ITEM com 6px de gap — a
   frase saía picada em quatro colunas empilhadas, e no telefone cada coluna ficava com ~70px.
   ⚠️ É o MESMO defeito do `.mp-why b` (29/08) visto do outro lado: lá uma regra de layout
      alcançava a prosa por seletor; aqui um CONTÊINER de layout recebe prosa como filho.
      **Regra: prosa nunca é filha direta de um flex/grid** — ou ela é bloco, ou vai dentro de
      um único filho. ⛔ NÃO devolver o `.sub` para o fluxo flex.
   ⚠️ A 1ª linha continua flex: ali o ícone precisa alinhar com a primeira linha do texto. */
.ft-chn-go .mn-ch-cap.sub { display: block; margin-top: 0; }
/* 📖 E a legenda ENSINA o conceito, então no telefone ela precisa ser legível: `.62rem` a 50%
   de opacidade é rodapé de aviso, não parágrafo didático. Sobe para 11px e 68%, e os dois
   termos que ela nomeia ganham o peso que o `**` pedia — é o que faz a frase se ler de
   relance. ⚠️ `@container`, nunca `@media` (CLAUDE.md §5b): dentro da gaveta o painel tem
   ~550px mas o VIEWPORT é de desktop, então `@media` nunca dispararia ali. */
/* ⚠️ `ftMD` emite `<strong>`, NÃO `<b>` (conferido na tela: a 1ª versão desta regra mirava `b`
   e não pegava nada). Os dois ficam no seletor porque o dialeto é compartilhado com a página
   publicada, que usa `b` em alguns moldes. ⛔ NÃO supor a tag da marcação: confira no DOM. */
.ft-chn-go .mn-ch-cap.sub strong, .ft-chn-go .mn-ch-cap.sub b { font-weight: 640; color: var(--text); opacity: .92; }
@container (max-width: 560px) {
  .ft-chn-go .mn-ch-cap { font-size: .69rem; line-height: 1.55; opacity: .62; }
  .ft-chn-go .mn-ch-cap.sub { font-size: .69rem; opacity: .68; }
}
.ft-chn-ok { display: block; margin: 0 2px 10px; }
/* 🐞 BOTÃO CARECA (28/08): eu reusei `.mn-btn.go`, que já pinta o FUNDO com `--accent`, e
   sobrescrevi só a `color` — azul sobre azul. ⚠️ ⛔ NÃO reaproveitar classe de ESTADO (`.go`)
   só pela geometria: `.go` significa "ação primária preenchida"; aqui a ação é de LEITURA
   (conferir), então é contorno. Classe própria, sem herdar semântica alheia. */
.ft-chn-go .ft-chn-b { border-color: color-mix(in oklab, #0A84FF 55%, transparent); background: transparent; color: #0A84FF; font-weight: 600; }
.ft-chn-go .ft-chn-b:hover { border-color: #0A84FF; background: color-mix(in oklab, #0A84FF 10%, transparent); }
.ft-chn-ok { font-size: 10.5px; color: var(--text-dim); }
/* 📖 O TÍTULO DA PROVA É PORTA (2026-08-29): botão sem cara de botão — o título continua sendo
   título, e o livrinho ao lado é a única pista. ⚠️ Herda tipo e cor do cabeçalho para NÃO virar
   link azul no meio do título. ⛔ NÃO sublinhar: o cabeçalho da gaveta não tem link nenhum, e um
   sublinhado ali leria como erro de estilo. */
.hd-man { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.hd-man svg { flex: none; opacity: .5; transition: opacity .14s, color .14s; }
.hd-man:hover svg { opacity: 1; color: #0A84FF; }
/* 🏪 PORTA DA LOJA no título da conta de serviço — mesma mecânica do `.hd-man`, e o glifo é a
   afordância que faz o título parecer tocável.
   ⚠️ A FOLGA À ESQUERDA existe porque o cabeçalho da conta perdeu o X (30/08) e ficou
      `<` · título · engrenagem: os TRÊS navegam, então o "voltar" e o "abrir a loja" seriam dois
      alvos tocáveis a 6px um do outro (o `gap` do `.set-sheet-head-left`). 4px a mais separam a
      intenção de sair da intenção de saber mais.
   ⛔ NÃO remover a folga "porque cabe": cabe justamente porque o polegar erra. */
.hd-store { margin-left: 4px; }
/* ✅ O POP-UP DA CONFERÊNCIA — o único momento em que a pessoa EXERCE a verificação, então o
   resultado pede ATO de leitura (um OK), ⛔ nunca uma torrada que evapora.
   ⚠️ A animação CONTA O TRABALHO: o trilho desenha do zero ao cheio (recomputar elo por elo) e
      só então o ✓ risca. ⛔ NÃO usar salto/elástico: segurança se transmite com firmeza, e
      festa em tela de prova cheira a propaganda. */
.ft-chn-dlg { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 22px; background: color-mix(in oklab, var(--bg-base) 74%, transparent); backdrop-filter: blur(3px); animation: chnFade .18s ease-out; }
@keyframes chnFade { from { opacity: 0 } to { opacity: 1 } }
/* 🐞 ARMADILHA: O BOTÃO DE FECHAR FICAVA FORA DA TELA (achado na verificação, 2026-08-29).
   O cartão não tinha contenção de altura, e o conteúdo NEGATIVO é muito mais alto que o
   positivo (3 linhas do "não aconteceu" + halt + nota da raiz). Em 540px o cartão media 596 e
   o "Entendi" ficava 21px ABAIXO da borda — e como o fechar-por-fora está desabilitado justo
   nas causas negativas, a pessoa ficava PRESA no diálogo.
   ⚠️ Na tela cuja tese é não gerar pânico, ficar sem saída é o pior defeito possível — pior
      que a copy errada, porque nenhuma frase tranquiliza quem não consegue sair.
   ⚠️ Duas peu̧as: o cartão CONTÉM (max-height + rolagem interna) e o botão fica GRUDADO no
      pé (sticky com o fundo do cartão). ⛔ NÃO resolver só com max-height: aí o botão passa a
      exigir rolagem para ser achado, e saída que se procura também é armadilha.
   ⛔ NÃO ajustar padding/gap para "caber": EN e ES são mais longos, e o positivo hoje cabe por
      sorte. Contenção é estrutural; pixel é remendo que quebra no próximo idioma. */
.ft-chn-dlg-c { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 330px; max-height: calc(100% - 20px); overflow-y: auto; overscroll-behavior: contain; padding: 26px 22px 0; border: 1px solid var(--border-soft); border-radius: 20px; background: var(--bg-elev); text-align: center; box-shadow: 0 26px 60px -26px rgba(0,0,0,.7); animation: chnRise .26s cubic-bezier(.22,.7,.3,1); }
/* ⚠️ o pé gruda no fundo do cartão e leva o fundo consigo (senão o texto passa por trás do
   botão ao rolar). O `margin` negativo cancela o `gap` para o véu encostar no botão. */
.ft-chn-dlg-c .ft-chn-b { position: sticky; bottom: 0; z-index: 2; margin: 6px 0 0; min-width: 118px; padding: 9px 18px; border-radius: 11px; }
/* ⚠️ o véu que impede o texto de passar por TRÁS do botão ao rolar — pseudo-elemento, para o
   botão manter a própria chapa e a própria borda. ⛔ NÃO pôr o degradê no background do botão. */
.ft-chn-dlg-c .ft-chn-b::before { content: ""; position: absolute; left: -22px; right: -22px; top: -8px; bottom: -20px; z-index: -1; background: linear-gradient(to bottom, transparent, var(--bg-elev) 45%); pointer-events: none; }
.ft-chn-dlg-c .ft-chn-b { position: sticky; }
.ft-chn-dlg-c { padding-bottom: 20px; }
@keyframes chnRise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.ft-chn-seal { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: color-mix(in oklab, oklch(0.72 0.18 148) 13%, transparent); color: oklch(0.72 0.18 148); }
/* ⏳ FASE 1 · CALCULANDO: o anel corre por 2s em tom neutro — ⚠️ **não verde**, porque verde
   é o veredito, e cor de veredito antes do veredito é promessa. ⛔ NÃO usar spinner genérico:
   o anel que se FECHA é a metáfora do que está acontecendo (percorrer a corrente até a âncora).
   ✅ FASE 2 · VEREDITO: o anel fica verde e o ✓ risca. */
.ft-chn-dlg-c.calc .ft-chn-seal { background: color-mix(in oklab, var(--text) 7%, transparent); color: var(--text-mute); }
.ft-chn-dlg-c.calc strong { color: var(--text); }
.ft-chn-dlg-c.calc .ft-chn-seal-r { animation: chnRing 2s cubic-bezier(.5,0,.5,1) forwards; }
.ft-chn-dlg-c.done .ft-chn-seal { transition: background .3s, color .3s; }
.ft-chn-seal-r { stroke-dasharray: 145; stroke-dashoffset: 145; animation: chnRing .45s cubic-bezier(.4,0,.2,1) forwards; }
.ft-chn-seal-k { stroke-dasharray: 34; stroke-dashoffset: 34; animation: chnKey .32s cubic-bezier(.3,0,.2,1) .12s forwards; }
@keyframes chnRing { to { stroke-dashoffset: 0 } }
@keyframes chnKey { to { stroke-dashoffset: 0 } }
@media (prefers-reduced-motion: reduce) { .ft-chn-seal-r, .ft-chn-seal-k { animation: none; stroke-dashoffset: 0 } .ft-chn-dlg, .ft-chn-dlg-c { animation: none } }
.ft-chn-dlg-c strong { font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: oklch(0.72 0.18 148); }
/* 🩺 A TELA NEGATIVA — DUAS temperaturas, nunca uma (2026-08-29). ⚠️ Ambar (.warn) para as
   seis causas sem má-fé; vermelho contido (.grave) só para a divergência de âncora.
   ⛔ NÃO vestir sincronização interrompida de vermelho: cor de alarme em causa banal ensina a
      ignorar a cor — e aí o vermelho que importa não avisa mais nada. */
.ft-chn-dlg-c.warn .ft-chn-seal { background: color-mix(in oklab, oklch(0.75 0.15 75) 14%, transparent); color: oklch(0.68 0.15 75); }
.ft-chn-dlg-c.warn strong { color: oklch(0.66 0.15 75); }
.theme-dark .ft-chn-dlg-c.warn strong, .theme-dark .ft-chn-dlg-c.warn .ft-chn-seal { color: oklch(0.8 0.14 78); }
.ft-chn-dlg-c.grave .ft-chn-seal { background: color-mix(in oklab, oklch(0.6 0.2 25) 13%, transparent); color: oklch(0.6 0.2 25); }
.ft-chn-dlg-c.grave strong { color: oklch(0.58 0.2 25); }
.theme-dark .ft-chn-dlg-c.grave strong, .theme-dark .ft-chn-dlg-c.grave .ft-chn-seal { color: oklch(0.74 0.17 25); }
/* ⚠️ A LISTA DO QUE **NÃO** ACONTECEU é a única chapa neutra do diálogo — ⛔ nem verde (não é
   conferência feita) nem âmbar (não é aviso): é o chão que não se move. É ela que impede a tela
   de sugerir que o dinheiro sumiu, e por isso tem o maior contraste do bloco. */
.ft-chn-chk.no { background: color-mix(in oklab, var(--text) 6%, transparent); }
.ft-chn-chk.no b { display: block; margin-bottom: 2px; font-size: .5rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.ft-chn-chk.no svg { color: var(--text-mute); }
.ft-chn-chk.no i { color: var(--text); }
/* ⚠️ o halt fala mais alto que as outras notas de pé, e SÓ ele: é a única linha da tela que
   descreve consequência para a rede. ⛔ Não copiar este peso para as causas leves. */
.ft-chn-dlg-c em.halt { font-weight: 650; letter-spacing: .02em; color: oklch(0.58 0.2 25); }
.theme-dark .ft-chn-dlg-c em.halt { color: oklch(0.74 0.17 25); }
.ft-chn-dlg-c.warn .ft-chn-b, .ft-chn-dlg-c.grave .ft-chn-b { border-color: color-mix(in oklab, var(--text) 26%, transparent); background: transparent; color: var(--text); }
.ft-chn-dlg-c.warn .ft-chn-b:hover, .ft-chn-dlg-c.grave .ft-chn-b:hover { border-color: var(--text); background: color-mix(in oklab, var(--text) 7%, transparent); }
.ft-chn-dlg-c p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-mute); text-wrap: pretty; }
/* 🔗 AS TRÊS CONFERÊNCIAS: alinhadas À ESQUERDA dentro do diálogo centrado — ⚠️ lista de
   verificação se lê em coluna, e texto centralizado destrói a coluna do ✓. ⛔ NÃO centralizar. */
.ft-chn-chk { display: flex; flex-direction: column; gap: 7px; width: 100%; margin: 2px 0 4px; padding: 11px 12px; border-radius: 12px; background: color-mix(in oklab, oklch(0.72 0.18 148) 8%, transparent); text-align: left; }
/* 🐞 CONTRASTE INVERTIDO (achado na verificação, 28/08): as três conferências — o RESULTADO —
   estavam em `--text-dim` (2,98:1, abaixo do AA), enquanto as duas notas de pé vinham em
   `--text-mute` (6,21:1). ⚠️ O token não é o erro: o erro foi dar o tom mais fraco à carga e o
   mais forte à ressalva. ⛔ NÃO deixar o que a pessoa PRECISA ler menos legível que o aviso
   sobre ele — numa tela de prova isso inverte a hierarquia da informação. */
.ft-chn-chk i { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: start; font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--text); }
.ft-chn-chk svg { margin-top: 2px; color: oklch(0.72 0.18 148); }
/* ⚠️ as três linhas entram em cascata, na ORDEM da conferência — é o que mostra que são três
   passos e não um só. ⛔ NÃO animar todas juntas: viraria decoração. */
.ft-chn-chk i { animation: chnChk .32s cubic-bezier(.22,.7,.3,1) backwards; }
.ft-chn-chk i:nth-child(1) { animation-delay: .04s }
.ft-chn-chk i:nth-child(2) { animation-delay: .18s }
.ft-chn-chk i:nth-child(3) { animation-delay: .32s }
@keyframes chnChk { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .ft-chn-chk i { animation: none } }
.ft-chn-dlg-c em { font-style: normal; font-size: 10px; line-height: 1.5; letter-spacing: 0; color: var(--text-mute); text-wrap: pretty; }
.ft-chn-dlg-c em.by { font-size: 9.5px; letter-spacing: .04em; opacity: .8; }
.ft-rolls { display: flex; flex-direction: column; margin: 10px 22px 0; }
.ft-rolls { display: flex; flex-direction: column; margin: 10px 22px 0; }
.ft-roll { --rc: color-mix(in oklab, var(--bg-elev) 92%, var(--text) 8%); position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 10px; background: var(--rc); border: 1px solid color-mix(in oklab, var(--text) 12%, transparent); border-top: 0; border-bottom: 0; font-size: 9.5px; letter-spacing: .03em; color: var(--text-mute); box-shadow: 0 6px 14px -10px oklch(0.2 0.02 280 / .4); }
.ft-roll + .ft-roll { border-top: 1px solid color-mix(in oklab, var(--text) 18%, transparent); }
.ft-roll:last-child::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -7px; height: 7px; background: linear-gradient(-135deg, var(--rc) 5px, transparent 0) 0 0/10px 7px repeat-x, linear-gradient(135deg, var(--rc) 5px, transparent 0) 5px 0/10px 7px repeat-x; }
.ft-roll.new { animation: ftRollOut 1s steps(11, end) both; overflow: hidden; }
@keyframes ftRollOut { from { max-height: 0; padding-top: 0; padding-bottom: 0; } to { max-height: 1600px; padding-top: 12px; padding-bottom: 10px; } }
.ft-roll-h { font-weight: 800; letter-spacing: .1em; text-align: center; color: var(--text); }
.ft-roll-sep { border-top: 1px dashed color-mix(in oklab, var(--text) 22%, transparent); margin: 4px 0; }
.ft-roll-l { display: flex; justify-content: space-between; gap: 10px; }
.ft-roll-l em { font-style: normal; text-transform: uppercase; letter-spacing: .06em; opacity: .7; flex: none; }
.ft-roll-l b { font-weight: 650; color: var(--text); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-roll-f { text-align: center; letter-spacing: .06em; opacity: .75; padding-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .ft-roll.new { animation: none } }
/* cartório (ESC-35): teor no comprovante · popup da assinatura · replay do frame · export de provas */
.ft-roll-sig { cursor: pointer; }
.ft-roll-desc { display: block; text-align: justify; text-justify: inter-word; hyphens: auto; font-family: Georgia, "Times New Roman", serif; font-size: .82rem; line-height: 1.5; text-wrap: pretty; color: var(--text); padding: 2px 0 1px; }
.ft-roll-sig:hover, .ft-roll-sig:focus-visible { --rc: color-mix(in oklab, var(--bg-elev) 84%, var(--text) 16%); outline: none; }
.ft-roll-teor { text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); padding: 1px 0 1px 10px; border-left: 2px solid color-mix(in oklab, var(--text) 35%, transparent); margin: 1px 0 3px; }
.ft-roll-teor.own { font-style: italic; border-left-style: dashed; }
.ft-roll-copy .ft-roll-h { letter-spacing: .14em; }
.ft-sig-sub { margin: 2px 0 8px; opacity: .7; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-sig-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; margin-top: 8px; border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); border-radius: 12px; background: color-mix(in oklab, var(--bg-elev) 94%, var(--text) 6%); color: var(--text); cursor: pointer; font: inherit; }
.ft-sig-opt:hover { border-color: color-mix(in oklab, var(--text) 34%, transparent); }
.ft-sig-opt strong { font-size: .92rem; }
.ft-sig-opt span { font-size: .76rem; opacity: .65; }
.ft-rp-card { margin-top: 4px; }
.ft-rp-dec { text-transform: uppercase; letter-spacing: .08em; opacity: .6; font-size: .68rem; margin: 10px 0 2px; }
.ft-tp-b.ft-rp-chosen { pointer-events: none; }
.ft-rp-reply { font-style: italic; border-left: 2px dashed color-mix(in oklab, var(--text) 35%, transparent); padding-left: 10px; margin: 8px 0 0; white-space: pre-wrap; }
.ft-rp-meta { font-size: .7rem; opacity: .65; margin: 12px 0 0; line-height: 1.6; }
.ft-xp-row { display: flex; align-items: baseline; gap: 10px; margin: 14px 22px 0; }
.ft-xp-row .ft-tp-count { margin: 0; }
.ft-xp-lnk { margin-left: auto; background: none; border: 0; padding: 4px 2px; color: var(--text); opacity: .6; font: inherit; font-size: .76rem; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ft-xp-lnk:hover { opacity: 1; }
.ft-xp-lnk:disabled { opacity: .3; cursor: default; text-decoration: none; }
/* fita da conversa (ESC-37): ícone no cabeçalho + estado vazio */
.ft-fita-btn:hover { color: var(--accent); }
.ft-conv-none { margin: 22px; opacity: .6; font-size: .8rem; }
.ft-conv-done { margin: 8px 22px 0; }
/* simulação de expediente: rebobinar a fita (só protótipo) */
.ft-sim { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 30px 22px 12px; padding-top: 16px; border-top: 1px dashed color-mix(in oklab, var(--text) 16%, transparent); }
.ft-sim-t { width: 100%; text-align: center; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; opacity: .4; }
/* 💡 ESC-109 · pista do próximo cenário do botão "chegou algo" — legenda, não botão:
   sem borda, sem hover, sempre visível (nunca atrás de toque/hold). */
.ft-sim-next { font-size: .62rem; color: var(--text); opacity: .4; white-space: nowrap; }
.ft-rw { display: block; margin: 0; background: none; border: 1px dashed color-mix(in oklab, var(--text) 28%, transparent); border-radius: 999px; padding: 7px 14px; color: var(--text); opacity: .55; font: inherit; font-size: .72rem; letter-spacing: .03em; cursor: pointer; }
.ft-rw:hover { opacity: 1; border-color: color-mix(in oklab, var(--text) 45%, transparent); }
.ft-xp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.ft-xp-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--text) 20%, transparent); background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: .76rem; }
.ft-xp-chip.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, transparent); }
.ft-xp-range { display: flex; gap: 8px; margin-bottom: 10px; }
.ft-xp-range input { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--text) 20%, transparent); background: var(--bg-elev); color: var(--text); font: inherit; font-size: .8rem; }
.ft-xp-n { opacity: .7; font-size: .78rem; margin: 0 0 10px; }
/* Tocar tudo (cabeçalho da Minha fita — substitui o X): play → fita girando */
.ft-auto-hd { display: inline-flex; align-items: center; gap: 6px; }
.ft-auto-hd.on { border-color: oklch(0.55 0.21 27); background: oklch(0.55 0.21 27); color: #fff; }
.ft-reel { animation: ftReelSpin 1.4s linear infinite; }
@keyframes ftReelSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ft-reel { animation: none; } }
/* iOS: campo com fonte <16px dispara auto-zoom no foco — força 16px no toque */
@media (pointer: coarse) { .ft-search input, .ft-comp input, .ft-comp textarea, .ft-comp .ft-comp-ta, .ft-vp-in input, .ft-tp-ta textarea, .ft-xf-in input { font-size: 16px; } }
/* rótulos das duas ilhas + canal só-valores */
.ft-sec { margin: 16px 6px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
.ft-xf-note { margin: 0 4px 6px; font-size: 10.5px; color: var(--text-dim); text-align: center; position: relative; }
.ft-xf-in { flex: 1; display: flex; align-items: baseline; gap: 6px; padding: 11px 16px; border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); border-radius: 999px; background: color-mix(in oklab, var(--accent) 7%, var(--bg-elev)); }
.ft-xf-in > span { font-size: 11px; font-weight: 700; color: var(--accent); }
.ft-xf-in input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 17px; font-weight: 700; outline: none; }
.ft-xf-in input::placeholder { color: var(--text-dim); }
/* a luz-herói da rota "Minha fita" — mesma tecla do aparelho da ilha */
.ft-luz { --isle-line: color-mix(in oklab, var(--text) 16%, transparent); display: flex; align-items: center; gap: 13px; margin: 6px 0 14px; padding: 14px 16px; border: 1px solid var(--isle-line); border-radius: 18px; background: var(--bg-elev); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.ft-luz.on .mm-isle-luz i { background: oklch(0.62 0.23 25); animation: mmLuzBlink 1.15s ease-in-out infinite; }
.ft-luz.on .mm-isle-luz { animation: mmLuzHalo 1.15s ease-in-out infinite; }
.ft-luz .mm-isle-luz { position: relative; }
/* 🔴 A LUZ É REDONDA, SEMPRE (2026-08-21, Tony: "a bola da luz tá oval, achatada — não pode,
   isso é pra lembrar a luz de um aparelho"). `.ft-luz` é flex e a tecla não tinha `flex`
   declarado: com o rótulo em duas linhas o disco de 38px era ESPREMIDO na horizontal e virava
   elipse. Um LED oval não parece aparelho nenhum — parece bug, e aqui a metáfora é o produto.
   ⚠️ `flex:none` + `aspect-ratio:1` nos dois (a tecla e o miolo): o primeiro impede o
   encolhimento, o segundo garante o círculo mesmo se alguém mexer na largura amanhã.
   ⛔ NÃO resolver com `min-width`: a altura é que manda aqui, e min-width sozinho deixa a
      porta aberta para o mesmo defeito quando o texto crescer. */
.ft-luz .mm-isle-key { flex: none; aspect-ratio: 1; }
.ft-luz .mm-isle-luz i { flex: none; aspect-ratio: 1; }
/* 🔤 o rótulo do estacionamento é INFORMAÇÃO, não título (2026-08-21): "Fita tocada em 21/08,
   10:51" vinha no corpo do texto e brigava com o botão "Tocar de novo", que é a ação. Desce
   para a escala de metadado e cabe em uma linha. ⛔ NÃO usar `--text-dim` aqui: a linha
   informa o estado da fita e precisa de contraste (o dim é para legenda). */
.ft-luz strong { font-size: 12px; font-weight: 650; line-height: 1.35; letter-spacing: 0; }
.ft-luz-n { position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; font-size: 10px; font-weight: 800; font-style: normal; color: #fff; background: oklch(0.6 0.22 25); }
.ft-luz .ft-add { margin-left: auto; }
/* papel de parede do chat: doodles X-ID (raio, moeda, fita, onda) em SVG data-URI,
   tom-sobre-tom via currentColor — funciona no claro e no escuro */
.ft-thread { position: relative; }
.ft-thread::before { content: ""; position: absolute; inset: -12px -16px -32px; pointer-events: none; opacity: .05; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="168" height="168" viewBox="0 0 168 168" fill="none" stroke="%23888" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M32 18l-6 12h5l-4 10 9-13h-5l5-9z"/><circle cx="106" cy="34" r="11"/><path d="M106 27v14M103 30h5a2.4 2.4 0 0 1 0 4.8h-4a2.4 2.4 0 0 0 0 4.8h6"/><rect x="16" y="86" width="30" height="20" rx="4"/><circle cx="25" cy="96" r="3.6"/><circle cx="37" cy="96" r="3.6"/><path d="M62 138q6-8 12 0t12 0"/><path d="M138 78l-6 12h5l-4 10 9-13h-5l5-9z"/><path d="M126 138a9 9 0 1 1 9 9M135 129v9h9"/><path d="M64 56h20M64 62h13"/></svg>') 0 0/168px 168px repeat; }
.ft-peer, .ft-msgs, .ft-vp, .ft-comp { position: relative; }
.ft-thread { display: flex; flex-direction: column; min-height: 100%; }
/* conversa: bolhas + compositor grudado no pé */
.ft-peer { display: flex; align-items: center; gap: 9px; padding: 2px 2px 12px; border-bottom: 1px solid var(--border-soft); }
.ft-peer-addr { font-size: 11px; color: var(--text-dim); }
.ft-msgs { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 0 6px; }
.ft-b { position: relative; max-width: 84%; padding: 9px 12px 7px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; display: flex; flex-direction: column; gap: 3px; }
.ft-b.in { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--bg-elev); border: 1px solid color-mix(in oklab, var(--text) 12%, transparent); }
.ft-b.out { align-self: flex-end; border-bottom-right-radius: 6px; background: color-mix(in oklab, var(--accent) 13%, var(--bg-elev)); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); }
.ft-bv { display: flex; align-items: center; gap: 9px; padding: 2px 0; }
.ft-play { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-base); border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); box-shadow: inset 0 2px 5px oklch(0.2 0.02 280 / 0.08); color: var(--text-mute); cursor: pointer; }
.ft-play:hover { color: var(--text); }
/* 🕐 A HORA USA O MESMO CINZA DO METADADO (2026-08-17, Tony): as duas linhas são o mesmo tipo de
   informação — dado de leitura ao redor do conteúdo — e dois cinzas diferentes na mesma bolha
   fazem uma parecer menos verdadeira que a outra. ⛔ NÃO deixar a hora mais apagada que o resto. */
/* 🔴 ponto do mini-chamado pendente, antes da hora: mesmo vermelho e mesmo pulso da luz da lista
   (`.ft-led`) — o mesmo fato em duas escalas. ⛔ NÃO inventar tom nem ritmo novo. */
.ft-bled{flex:none;width:6px;height:6px;border-radius:50%;background:oklch(0.60 0.21 25);animation:mmIsleBlink 1.15s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.ft-bled{animation:none}}
.ft-bt { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; align-self: flex-end; font-size: 9.5px; color: oklch(0.34 0.01 270); }
.theme-dark .ft-bt { color: oklch(0.9 0.008 270); }
.ft-b.out .ft-bt { color: inherit; opacity: .75; }
/* ESC-65 · A DOCA: tudo que pertence ao ato de escrever — dica de formatação,
   anexo grudado, citação, folha de anexo, linha de valor e o compositor — num
   bloco só, colado no pé da conversa e crescendo PARA CIMA.
   ⚠️ É A DOCA QUE GRUDA, não os filhos: cada um sticky por conta própria pedia
      um deslocamento fixo, e distância fixa não sabe a altura de uma caixa de
      texto que cresce (a folha passava por cima da prosa; em fluxo solto,
      nascia abaixo da dobra e o toque não chegava nela).
   ⛔ NÃO devolver `position: sticky` a `.ft-comp` aqui dentro — dois grudados
      aninhados brigam pelo mesmo pé. Fora da doca (rota Enviar) ele continua
      grudando sozinho, por isso a regra é escopada. */
.ft-dock { position: sticky; z-index: 92; bottom: -32px; margin: 0 -16px -32px; padding: 0 16px; background: var(--bg-base); }
.ft-dock .ft-comp { position: static; margin: 0 -16px; }
.ft-dock .ft-att, .ft-dock .ft-vp, .ft-dock .ft-qbar, .ft-dock .ft-fmt { margin-bottom: 10px; }
.ft-comp { position: sticky; bottom: -32px; margin: 0 -16px -32px; display: flex; align-items: flex-end; gap: 9px; padding: 10px 16px 14px; background: var(--bg-base); border-top: 1px solid var(--border-soft); }
.ft-comp input { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); border-radius: 999px; background: var(--bg-elev); color: var(--text); font: inherit; font-size: 14px; outline: none; }
.ft-comp input:focus, .ft-comp .ft-comp-ta:focus { border-color: color-mix(in oklab, var(--text) 32%, transparent); }
/* compositor multilinha: Enter quebra linha e a caixa cresce (até ~5 linhas);
   envio só pelo botão ou Ctrl/Cmd+Enter — estimula UM recado completo por balão */
.ft-comp .ft-comp-ta { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); border-radius: 22px; background: var(--bg-elev); color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.45; resize: none; outline: none; overflow-y: auto; max-height: 132px; }
.ft-cbtn { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-base); border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); box-shadow: inset 0 2px 5px oklch(0.2 0.02 280 / 0.08); color: var(--text-mute); cursor: pointer; }
.ft-cbtn:hover { color: var(--text); }
/* PING anexado ao recado: chip na bolha + linha de anexo no compositor */
.ft-cbtn.send { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.ft-bp { align-self: flex-start; display: flex; flex-direction: column; gap: 2px; margin-top: 2px; padding: 10px 15px; border-radius: 14px; background: color-mix(in oklab, var(--accent) 16%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); color: var(--accent); }
.ft-bp b { font-size: 24px; font-weight: 750; letter-spacing: -.02em; color: var(--text); }
.ft-bp small { font-size: 10px; font-weight: 400; opacity: .8; letter-spacing: .02em; }
.ft-b.out .ft-bp { align-self: flex-end; }
.ft-prev-ping { flex: none; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); }
/* linha de anexo PING (transferência real, opcional) — ⚠️ EM FLUXO, logo acima
   do compositor. Era `sticky bottom:36px` e cobria a prosa quando a caixa
   crescia: deslocamento fixo não sabe a altura de uma caixa que cresce. */
/* 💵 PAINEL DE VALOR — quatro andares: saldo · valor · taxa · fica depois (2026-08-26).
   ⚠️ Um só cartão para toda a conta do dinheiro: era a informação espalhada em dois lugares
      (esta linha + a cápsula do compositor) que fazia a tela parecer tumultuada.
   ⚠️ Rótulo à esquerda, número à direita, TODOS na mesma coluna — é o alinhamento que faz
      quatro linhas lerem como uma conta, e não como quatro avisos. ⛔ NÃO centralizar nada.
   ⛔ NÃO pôr borda entre andares: o filete só separa a LEITURA (taxa/fica) do que se DIGITA. */
.ft-vp { position: relative; z-index: 1; margin: 0 0 8px; padding: 0; border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent); border-radius: 16px; background: color-mix(in oklab, var(--accent) 7%, var(--bg-elev)); overflow: hidden; }
/* ✖ andar do fechar: só o controle, para nenhuma linha de valor ter de dividir espaço com
   um botão. ⚠️ É o que deixa os quatro números terminando na MESMA borda direita. */
.ft-vp-top { display: flex; justify-content: flex-end; padding: 4px 8px 0; }
.ft-vp-hd { display: flex; align-items: baseline; gap: 8px; padding: 0 14px 8px; }
.ft-vp-hd .ft-vp-v { margin-left: auto; flex: none; display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.ft-vp-l { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); }
.ft-vp-v b { font-size: 12.5px; font-weight: 650; color: var(--text); }
.ft-vp-v em { font-style: normal; font-size: 10px; color: var(--text-dim); }
/* o andar tocavél: o único com fundo próprio e tipo grande — hierarquia por PESO, não por cor */
.ft-vp-in { display: flex; align-items: baseline; gap: 9px; padding: 9px 14px 11px; border-top: 1px solid color-mix(in oklab, var(--text) 9%, transparent); background: color-mix(in oklab, var(--bg-base) 55%, transparent); cursor: text; }
.ft-vp-in input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 26px; font-weight: 650; letter-spacing: -.01em; line-height: 1.1; outline: none; }
.ft-vp-ping { flex: none; font-style: normal; font-size: 10.5px; color: var(--text-dim); }
.ft-vp-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 14px; }
.ft-vp-cur { flex: none; font-size: 12px; font-weight: 700; color: var(--accent); }
.ft-vp-row + .ft-vp-row { padding-top: 0; }
.ft-vp-row.last { padding-bottom: 10px; }
/* ⚠️ NÚMERO DE DINHEIRO NÃO QUEBRA LINHA: sem isto o flex partia “US$ 1,00” em duas
   linhas (“US$” / “1,00”) e a conta deixava de ler como conta. ⛔ Vale para todos os
   andares — valor cortado no meio é o pior defeito possível numa tela de transferência. */
.ft-vp-v b, .ft-vp-v em, .ft-vp-n, .ft-vp-n b, .ft-vp-n em, .ft-vp-ping, .ft-vp-l { white-space: nowrap; }
/* ⚠️ a taxa é a MESMA escala dos µPING dos outros andares (2026-08-26, Tony), então tem o
   MESMO corpo: 10px. Ela vinha em 11,5px — o corpo dos valores em dólar — e um número de
   PING maior que os outros PING sugeria hierarquia que não existe. ⛔ NÃO dimensionar por
   linha: o corpo diz a ESCALA (dólar decide, µPING confere), nunca a posição. */
.ft-vp-row .ft-vp-n { margin-left: auto; flex: none; display: flex; align-items: baseline; gap: 7px; font-size: 10px; color: var(--text-dim); }
/* ⚠️ a coluna de µPING alinha com a do saldo (mesmo tom, mesmo corpo): é o que faz o
   primeiro e o último andar lerem como a MESMA conta. */
.ft-vp-n em { font-style: normal; font-size: 10px; color: var(--text-dim); }
.ft-vp-row .ft-vp-n b { font-weight: 650; font-size: 12.5px; color: var(--text); }
.ft-vp-row .dep-pix-spin { flex: none; border-color: color-mix(in oklab, var(--text) 22%, transparent); border-top-color: oklch(0.84 0.16 88); }
/* falta grana: o andar do “fica” vira o aviso E a porta — ⛔ nunca um diálogo */
.ft-vp-row.short .ft-vp-l { color: oklch(0.78 0.13 62); }
.ft-vp-row.short .ft-vp-n button { border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ft-ping-x { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); opacity: .55; cursor: pointer; }
.ft-ping-x:hover { opacity: 1; }
/* 💵 no modo valor a barra tem UM CTA largo em vez de campo + aviãozinho: o rótulo diz o que
   sai do cofre, e ícone nenhum diz isso. ⚠️ Mesma altura do botão redondo, para a doca não
   pular de geometria ao trocar o tipo da transação. */
.ft-cbtn.send.wide { flex: 1; width: auto; min-width: 0; height: 44px; padding: 0 18px; border-radius: 22px; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; }
.ft-cbtn.send.wide.off { opacity: .45; }
.ft-bx { line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word; }
/* lápis sobre a foto (self) — edita foto/capa na x-bio */
.ft-face-edit { position: relative; display: inline-block; width: fit-content; border-radius: 50%; text-decoration: none; }
.ft-face-edit .esc-face { display: block; }
.ft-face-pen { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; border: 2.5px solid var(--bg-elev); box-shadow: 0 2px 8px oklch(0 0 0 / .3); }
.ft-face-edit:hover .ft-face-pen { background: var(--accent-strong); }
/* link para o editor da x-bio dentro da nota do Meu registro */
.ft-bio-edit { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 650; color: var(--accent); text-decoration: none; }
.ft-bio-edit:hover { text-decoration: underline; }
/* pílula "saiba mais" do Meu registro — brilha até ser clicada */
.ft-sys-learn { border: 0; cursor: pointer; font: inherit; animation: ft-learn-glow 2.2s ease-in-out infinite; }
.ft-sys-learn u { text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* 🔒 O BALÃO DO SIGILO (V10, 05/09/2026) — MODIFICADOR, ⛔ não regra nova. O `.ft-sys` é pílula de
   9px MAIÚSCULA com `letter-spacing`, desenhada para "5 DE SETEMBRO"; a frase do E2E tem ~110
   caracteres e um cadeado. Jogada ali como está, sai ilegível no telefone.
   ✅ O que este modificador muda: caixa (sai a maiúscula), tamanho, entrelinha, largura máxima e
      o alinhamento do cadeado. ✅ O que HERDA: pílula, cor, borda, centralização e a variante
      `.theme-dark`. ⛔ NÃO duplicar a regra inteira — foi assim que espelho virou dívida aqui. */
/* ⚠️ 08/09 · MENOS LINHAS, MESMA PÍLULA (Tony): 11.5 → **10.5px** e 30 → **34em** de largura.
   O texto é longo por natureza (~110 caracteres) e quebrava em 4 linhas na gaveta; corpo menor +
   caixa mais larga tiram uma linha inteira sem mexer no vocabulário. ⛔ NÃO descer de 10.5px:
   é aviso jurídico e precisa ser legível — abaixo disso vira letra miúda de contrato. */
.ft-sys-e2e { max-width: 34em; padding: 9px 15px; font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.45; text-align: center; text-wrap: pretty; }
.ft-sys-e2e-ic { display: inline-flex; vertical-align: -1px; margin-right: 5px; }
/* 🐞 O BRILHO NÃO RESPEITAVA MOVIMENTO REDUZIDO (V10, 05/09/2026): o `.ft-sys-learn` animava
   `infinite` sem guarda nenhuma, e esta casa protege isso em 22 lugares. Duas linhas, e conserta
   o balão novo E o velho (o do cartório). ⚠️ Sem animação a pílula continua clicável e sublinhada
   — o "saiba mais" é a affordance, o brilho é o convite. ⛔ NÃO tirar o `cursor:pointer` junto. */
@media (prefers-reduced-motion: reduce) { .ft-sys-learn { animation: none } }
@keyframes ft-learn-glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--warm, oklch(0.75 0.12 85)) 0%, transparent); } 50% { box-shadow: 0 0 12px 2px color-mix(in oklab, oklch(0.75 0.12 85) 45%, transparent); } }
/* chip sha256 nas notas do "Meu registro" — a digital da nota */
.ft-b .ft-bh { font-size: 8.5px; letter-spacing: .04em; opacity: .55; margin-right: 7px; }
/* disco com foto (canal oficial) — mesma geometria do disco de iniciais */
.ft-disc.img { background: #0b0c10; overflow: hidden; }
.ft-disc.img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
/* canal oficial: mão única — nota fixa no lugar do compositor */
.ft-oneway { position: sticky; bottom: -32px; margin: 0 -16px -32px; padding: 16px; text-align: center; font-size: 10px; letter-spacing: .05em; color: var(--text-dim); background: var(--bg-base); border-top: 1px solid var(--border-soft); }
/* mensagem de sistema centralizada (data, avisos) — pílula neutra no meio */
.ft-sys { align-self: center; margin: 6px 0 2px; padding: 4px 12px; border-radius: 999px; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: oklch(0.5 0.06 85); background: oklch(0.75 0.1 85 / .14); border: 1px solid oklch(0.72 0.1 85 / .3); }
.theme-dark .ft-sys { color: oklch(0.8 0.08 85); background: oklch(0.7 0.1 85 / .12); border-color: oklch(0.7 0.1 85 / .25); }
/* ⚡ RECARGA DE BATERIA (L2) — a carga que se manda pelo + da conversa (2026-08-26).
   ⚠️ SEM DÓLAR aqui: bateria é moeda de máquina e se lê em unidades PING (proibição do
      frame 19 do catálogo da fita). O MEDIDOR antes→depois é o que substitui o número
      grande em US$ do `.ft-bp`.
   ⛔ NÃO reusar `.ft-bp` para carga: são duas camadas (cofre × bateria), e a régua visual
      do produto é essa — cifrão só onde o valor chega no COFRE. Um cartão só apagaria a
      fronteira que o ledger existe para manter. */
.ft-att-ic.sm { width: 30px; height: 30px; }
.ft-bbat { align-self: flex-start; display: flex; flex-direction: column; gap: 5px; margin-top: 3px; padding: 10px 13px 11px; border-radius: 14px; background: color-mix(in oklab, oklch(0.72 0.15 86) 15%, transparent); border: 1px solid color-mix(in oklab, oklch(0.72 0.15 86) 32%, transparent); }
.ft-b.out .ft-bbat { align-self: flex-end; }
.ft-bbat-k { font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: oklch(0.52 0.13 80); }
.theme-dark .ft-bbat-k { color: oklch(0.86 0.13 86); }
.ft-bbat-n { font-size: 10.5px; letter-spacing: .02em; color: var(--text-mute); }
.ft-bbat-n b { font-size: 21px; font-weight: 750; letter-spacing: -.02em; color: var(--text); margin-right: 5px; }
.ft-bbat-sh { height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--text) 13%, transparent); overflow: hidden; }
.ft-bbat-sh i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, oklch(0.74 0.17 150), oklch(0.66 0.16 152)); }
.ft-bbat-d { display: flex; justify-content: space-between; gap: 10px; font-size: 9.5px; letter-spacing: .02em; color: var(--text-dim); }
/* a linha da doca: a bateria escolhida, com × para trocar — sem input, a carga é cheia.
   ⚠️ No ACENTO, como o disco: na doca o que se lê é a CATEGORIA do que vai sair (valor). */
.ft-bat-row { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.ft-bat-row-m { flex: 1; min-width: 0; line-height: 1.25; }
.ft-bat-row-m b { display: block; font-size: 13px; font-weight: 600; }
.ft-bat-row-m em { display: block; font-style: normal; font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
/* a folha das baterias da outra parte — irmã do `.ft-att`, mesmo alvo de 56px */
.ft-batsh { position: relative; z-index: 91; margin: 0 0 10px; padding: 7px; border-radius: 14px; border: 1px solid var(--border-soft); background: var(--bg-elev); box-shadow: 0 14px 40px rgba(0, 0, 0, .28); }
.ft-batsh-sub { margin: -1px 9px 8px; font-size: 11.5px; line-height: 1.45; color: var(--text-mute); }
.ft-batsh-r { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 9px 11px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ft-batsh-r:hover:not(:disabled) { background: color-mix(in oklab, var(--text) 9%, transparent); }
.ft-batsh-r.on { background: color-mix(in oklab, var(--accent) 13%, transparent); }
.ft-batsh-r.off { opacity: .45; cursor: default; }
.ft-batsh-m { flex: 1; min-width: 0; }
.ft-batsh-m strong { display: block; font-size: 14px; font-weight: 600; }
.ft-batsh-sh { display: block; height: 6px; margin: 6px 0 5px; border-radius: 3px; background: color-mix(in oklab, var(--text) 13%, transparent); overflow: hidden; }
.ft-batsh-sh i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, oklch(0.82 0.17 88), oklch(0.78 0.16 86)); }
.ft-batsh-m em { display: block; font-style: normal; font-size: 10.5px; color: var(--text-dim); }
.ft-batsh-a { flex: none; text-align: right; }
.ft-batsh-a b { display: block; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ft-batsh-a i { display: block; font-style: normal; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; }
.ft-batsh-none { margin: 4px 10px 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-mute); }
/* ⚡ V33 · OS PACOTES DE RECARGA — o passo 2 da folha (Tony: "pra parecer mais com recarga de
   celular pré-pago"). ⛔ SEM campo e SEM teclado: a proibição de 26/08 protege contra **digitar**,
   e pacote se TOCA. Os degraus saem do `PING_LADDER`, a mesma escada dos ajustes.
   ⚠️ Cada chip mostra **em que % a bateria fica** — é o que torna a sobrecarga visível ANTES do
      ato. ⛔ NÃO esconder o >100%: ele é legítimo ("a carga pode exceder a capacidade sem limite")
      e é justamente o que um pacote grande produz.
   ⚠️ `auto-fit` com mínimo de 72px: a fileira se reorganiza no telefone sem nenhum `@media`. */
.ft-batpk { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; padding: 2px 4px 4px; }
.ft-batpk-c { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 8px 6px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-base); color: var(--text); font: inherit; cursor: pointer; transition: border-color .14s, background .14s; }
.ft-batpk-c:hover { border-color: color-mix(in oklab, var(--accent) 55%, transparent); background: color-mix(in oklab, var(--accent) 8%, transparent); }
.ft-batpk-c b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ft-batpk-c em { font-style: normal; font-size: 10.5px; letter-spacing: .04em; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* ⚠️ "Completar" é o PRIMEIRO chip e o único destacado — é o ato mais comum e o único que a
   interface calcula sozinha. ⛔ NÃO é um limite: os pacotes ao lado podem passar do tamanho. */
.ft-batpk-c.fill { grid-column: 1 / -1; flex-direction: row; gap: 8px; border-color: color-mix(in oklab, var(--accent) 45%, transparent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.ft-batpk-c.fill b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.ft-batpk-c.fill em { font-size: 13px; font-weight: 700; color: var(--text); }
.ft-batsh-back { flex: none; margin: -2px 6px 0 -2px; padding: 0 5px; border: 0; border-radius: 6px; background: none; color: var(--text-dim); font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.ft-batsh-back:hover { background: color-mix(in oklab, var(--text) 10%, transparent); color: var(--text); }
/* vistos do ciclo de entrega: relógio → ✓ → ✓✓ N disp. */
.ft-tick { display: inline-flex; align-items: center; gap: 4px; opacity: .85; }
.ft-tick em { font-style: normal; font-size: 9px; letter-spacing: .03em; }
.ft-tick.wait em { opacity: .9; }
.ft-b.out .ft-tick.dl { color: oklch(0.4 0.13 155); }
.theme-dark .ft-b.out .ft-tick.dl { color: oklch(0.85 0.13 155); }
.ft-b.out .ft-tick.srv { color: oklch(0.42 0.11 82); }
.theme-dark .ft-b.out .ft-tick.srv { color: oklch(0.87 0.12 90); }
.ft-b.in .ft-tick { display: none; }
/* varredura marca-texto no ✓✓ (mesmo gesto do recibo da fita corporativa);
   .amber = estacionada no servidor (entregue, aguardando a outra parte baixar) */
.ft-hl-sweep { --hl: oklch(0.78 0.16 150 / 0.5); padding: 1px 4px; margin-right: -4px; background-image: linear-gradient(101deg, transparent 1.5%, var(--hl) 2.5%, var(--hl) 95%, transparent 97.5%); background-repeat: no-repeat; background-size: 0% 82%; background-position: 0 60%; animation: ftSweep .5s ease-out .1s forwards; border-radius: 3px; }
.ft-hl-sweep.amber { --hl: oklch(0.85 0.16 95 / 0.55); }
/* 🖍 amarelo de CANETA (ESC-86): mais saturado que o âmbar de aviso — é o gesto de quem
   passa a caneta e fecha o assunto, não alerta do sistema. */
.ft-hl-sweep.yellow { --hl: oklch(0.88 0.17 95 / 0.6); }
.theme-dark .ft-hl-sweep { --hl: oklch(0.62 0.15 150 / 0.4); }
.theme-dark .ft-hl-sweep.amber { --hl: oklch(0.68 0.13 90 / 0.42); }
.theme-dark .ft-hl-sweep.yellow { --hl: oklch(0.9 0.18 95 / .72) }
.ft-hl-sweep.blue { --hl: color-mix(in oklab, var(--accent) 30%, transparent); }
.ft-b.out .ft-tick.sig { color: oklch(0.35 0.1 250); }
/* 💵 #posição na corrente: o carimbo do VALOR. ⚠️ Corpo maior que os outros carimbos e
   tabular, porque é NÚMERO DE REGISTRO — a pessoa vai comparar com o extrato e ditar por
   telefone. ⛔ NÃO usar o verde do "baixado": entrega e ordenação são coisas diferentes,
   e a cor é metade do que ensina isso. */
.ft-tick.seq em { font-size: 10.5px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* 🧾 O FECHO DE DESPACHO na tira do produto (2026-08-27). Segunda frase da ata, e ela é
   SUBORDINADA: o ato é o que a pessoa fez, o fecho é o que aconteceu com o pacote. Mesma
   serifa e mesmo corpo, tom mais claro — ⛔ NÃO em mono nem em caixa alta: é prosa, não campo.
   ⚠️ Sem filete entre as duas: são um parágrafo de ata em duas frases, não duas seções. */
.ft-roll-fecho { font-family: var(--serif, Georgia, "Times New Roman", serif); font-size: 12px; line-height: 1.5; text-align: justify; hyphens: auto; margin-top: -2px; opacity: .78; }
.ft-roll-desc .ata-marca { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; }
.ft-roll-desc .ata-cit { font-style: italic; }
/* ⚓ ancorado: o MESMO número, mais o glifo. ⛔ NÃO trocar a cor ao ancorar — a altura é a
   mesma; o que muda é contra quem ela vale, e isso o glifo diz sem gritar. */
.ft-tick.seq.anc { gap: 4px; }
.ft-tick.seq.anc svg { opacity: .8; }
/* ⛔ RECUSADO tem cara PRÓPRIA, nem a do falhou (rede, se espera) nem a do ordenado. Âmbar de
   impedimento: não é erro do app nem decisão da contraparte — é o ledger dizendo não. */
.ft-b.out .ft-tick.vrej { color: oklch(0.62 0.16 42); }
.theme-dark .ft-b.out .ft-tick.vrej { color: oklch(0.78 0.14 45); }
.ft-b.out .ft-tick.seq { color: oklch(0.38 0.12 250); }
.theme-dark .ft-b.out .ft-tick.seq { color: oklch(0.86 0.11 250); }
.theme-dark .ft-b.out .ft-tick.sig { color: #fff; }
@keyframes ftSweep { to { background-size: 100% 82%; } }
@media (prefers-reduced-motion: reduce) { .ft-hl-sweep { animation: none; background-size: 100% 82%; } }
/* tooltip: quais dispositivos baixaram */
.ft-devtip { position: relative; cursor: default; }
.ft-devtip-pop { display: none; position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 30; white-space: pre; padding: 8px 11px; border-radius: 10px; font-size: 10px; line-height: 1.7; color: var(--text); background: var(--bg-elev); border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); box-shadow: 0 10px 24px -14px oklch(0.2 0.02 280 / .5); }
.ft-devtip:hover .ft-devtip-pop, .ft-devtip:focus .ft-devtip-pop { display: block; }
/* cancelar dentro da janela de arrependimento: botão vermelho sob o balão;
   cancelar DEVOLVE o texto/valor para a caixa (nada se perde) */
.ft-cancel { align-self: flex-end; margin: -2px 2px 0; padding: 6px 14px; border-radius: 999px; border: 1px solid oklch(0.6 0.19 25 / .45); background: none; color: oklch(0.55 0.19 25); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.ft-cancel:hover { background: oklch(0.6 0.19 25 / .08); border-color: oklch(0.6 0.19 25 / .7); }
/* disco do destinatário no título do chat */
.ft-disc.hd { display: inline-grid; vertical-align: middle; margin-right: 9px; }
/* título do chat = link para a identidade (área toda tocável) */
.ft-ident-lnk { display: inline-flex; align-items: center; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 0; margin: 0; }
.ft-ident-lnk:hover { opacity: .8; }
/* Identidade dentro da carteira: layout canônico esc-* (escritorio.css é a
   fonte única — o wallet.jsx INJETA a folha se a página não a tiver; ver
   contrato no topo de wallet.jsx). Aqui só o MAPEAMENTO de tokens. */
.set-sheet { --esc-ok: var(--set-on); }
.set-sheet-body .esc-xb { margin: -12px -16px 12px; }
.ft-idph { background: oklch(0.88 0.06 var(--h)); color: oklch(0.4 0.12 var(--h)); }
/* métrica que não existe no canal oficial (Aviso só tem OK): traço, sem cor */
.ft-na b { color: var(--text-dim) !important; font-weight: 400; }
.theme-dark .ft-idph { background: oklch(0.35 0.08 var(--h)); color: oklch(0.85 0.08 var(--h)); }
/* contador do fim da fita: invisível até 80% do limite */
.ft-cnt { position: sticky; bottom: 46px; margin: 0 4px 4px; font-size: 9.5px; letter-spacing: .04em; color: var(--text-dim); text-align: right; }
.ft-cbtn:disabled { opacity: .4; cursor: default; }
/* tecla-moeda do anexo: $ de texto; selecionada = moeda azul, $ branco */
.ft-coin > span { font-size: 19px; font-weight: 700; line-height: 1; }
.ft-coin.send { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
.ft-coin.send:hover { color: #fff; }
/* Adicionar conexão: pílula azul no cabeçalho + rota fitaAdd */
.ft-add { flex: none; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 650; letter-spacing: -.01em; cursor: pointer; }
.ft-add:hover { background: color-mix(in oklab, var(--accent) 88%, black); }
.ft-add.wide { width: 100%; padding: 13px 16px; font-size: 14px; margin-top: 2px; }
.ft-add:disabled { opacity: .45; cursor: default; }
.ft-add-lead { margin: 4px 2px 16px; font-size: 13.5px; line-height: 1.55; color: var(--text-mute); }
.ft-add-sent { margin: 16px 2px; font-size: 12px; color: oklch(0.55 0.14 155); }
.ft-req { padding: 14px 4px; }
.ft-req-note { margin: 12px 2px 0; font-size: 12px; line-height: 1.55; color: var(--text-dim); }
/* Transferir PING: cartão do destinatário, aviso 90 dias, valor 2 andares, recibo */
.ft-tr-hero { display: grid; place-items: center; margin: 10px 0 6px; color: var(--text-mute); }
.ft-tr-coin { font: 700 15px/1 var(--font-mono, ui-monospace, monospace); fill: currentColor; opacity: .8; }
.ft-tr-bolt { transform-origin: 111px 48px; animation: ftBolt 2.4s ease-in-out infinite; filter: drop-shadow(0 0 7px color-mix(in oklab, var(--accent) 55%, transparent)); }
@keyframes ftBolt { 0%, 100% { transform: scale(1); opacity: 1 } 8% { transform: scale(1.14); opacity: 1 } 16% { transform: scale(1) } 50% { opacity: .85 } }
.ft-tr-arc { animation: ftArc 1.6s linear infinite; }
.ft-tr-arc.a2 { animation-duration: 2.2s; animation-direction: reverse; }
@keyframes ftArc { to { stroke-dashoffset: -18 } }
@media (prefers-reduced-motion: reduce) { .ft-tr-bolt, .ft-tr-arc { animation: none } }
.ft-tr-card { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; padding: 13px 15px; border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); border-radius: 16px; background: var(--bg-elev); }
.ft-tr-card-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ft-tr-card-m strong { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.ft-tr-card-m .mono { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }
.ft-tr-badge { flex: none; white-space: nowrap; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: oklch(0.5 0.13 155); background: oklch(0.62 0.17 155 / .13); border: 1px solid oklch(0.62 0.17 155 / .3); }
.ft-tr-note { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 14px; padding: 13px 15px; border-radius: 16px; font-size: 12.5px; line-height: 1.5; color: var(--text-mute); background: oklch(0.75 0.14 80 / .1); border: 1px solid oklch(0.7 0.14 80 / .35); }
.ft-tr-note strong { font-size: 13px; color: var(--text); }
.ft-tr-amt { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; padding: 18px 16px; border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); border-radius: 18px; background: color-mix(in oklab, var(--accent) 7%, var(--bg-elev)); }
.ft-tr-cur { font-size: 15px; font-weight: 700; color: var(--accent); }
.ft-tr-amt input { width: 150px; border: 0; background: none; color: var(--text); font: inherit; font-size: 34px; font-weight: 750; letter-spacing: -.02em; outline: none; }
.ft-tr-amt input::placeholder { color: var(--text-dim); }
.ft-tr-grains { flex-basis: 100%; text-align: center; font-size: 10.5px; color: var(--text-dim); }
.ft-tr-done { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 8px; text-align: center; }
.ft-tr-check { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: oklch(0.55 0.15 155); background: oklch(0.62 0.17 155 / .13); border: 1px solid oklch(0.62 0.17 155 / .35); }
.ft-tr-done-t { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.ft-tr-amt-chip { align-self: center; align-items: center; white-space: nowrap; }
.ft-tr-done-k { font-size: 12px; color: var(--text-mute); }
.ft-tr-done .ft-add.wide { margin-top: 10px; }
/* ═══ V16 · ENVIAR — a porta única (hub de dois grupos + 4 modalidades) ═══════════
   🔑 A divisão interno/externo é ESTRUTURAL: dois <section>, rótulo mono + natureza, divisor.
   ⚠️ Nomes conferidos com grep antes de escrever (regra da V15): nenhum `.ev-` existia. */
/* V16 · o botão "Enviar" leva a seta do gesto (mesma linguagem de traço das cinco): rótulo
   sozinho num cabeçalho com dois botões não diz que É a ação de saída. */
.ft-add svg { flex: none; }
/* ícone + rótulo: a pílula ganha gap e mais lado esquerdo (07/09) — colados, os dois viravam
   uma mancha só. ⚠️ O `inline-flex` é o que faz o gap valer: sem ele, o SVG flutuava. */
.ft-add:has(svg) { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 8px 15px; }
.ft-add.wide:has(svg) { display: flex; justify-content: center; }
.ev-hub { display: flex; flex-direction: column; gap: 12px; padding: 0; }
.ev-grp { display: flex; flex-direction: column; gap: 8px; }
.ev-grp-h { display: flex; align-items: baseline; gap: 10px; padding: 0 4px; flex-wrap: wrap; }
.ev-grp-h b { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ev-grp.out .ev-grp-h b { color: var(--text-mute); }
.ev-grp-h span { font-size: 12px; color: var(--text-dim); }
.ev-sep { border: 0; height: 1px; margin: 0; background: color-mix(in oklab, var(--text) 12%, transparent); }
.ev-list { display: flex; flex-direction: column; gap: 12px; }
.ev-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 16px 14px 16px 12px; border: 1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius: 16px; background: var(--bg-elev); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ev-item:hover { border-color: color-mix(in oklab, var(--text) 28%, transparent); }
.ev-item:focus-visible, .ev-item.focus:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
/* ⚠️ O PING é o mais comum, mas a tela ⛔ NÃO o ANUNCIA (etiqueta "mais comum" saiu em 07/09,
   revisão do Tony): rótulo que ranqueia opções briga com INTERNO/EXTERNO, que é a informação
   real. O atalho é o autoFocus; o realce é só a moldura, discreta. */
.ev-item.focus { border-color: color-mix(in oklab, var(--accent) 34%, transparent); }
.ev-item .ev-art { flex: none; color: var(--text-mute); }
.ev-item.focus .ev-art, .ev-item:hover .ev-art { color: var(--text); }
.ev-item-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-item-m strong { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.ev-item-m > span { font-size: 11.5px; line-height: 1.4; color: var(--text-dim); }
.ev-item-c { flex: none; color: var(--text-dim); }
.ev-pend { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid color-mix(in oklab, var(--text) 10%, transparent); }
/* 📧 a MINIATURA DO E-MAIL dentro da bolha: para · assunto · recado · o botão que o e-mail leva.
   ⚠️ É a única tela onde se vê o que a outra pessoa vai ver. Herda a bolha (`.ft-b.out`), então
   ⛔ não repetir cor nem raio aqui — só a folha branca de dentro e a hierarquia do e-mail. */
.ev-mail { display: flex; flex-direction: column; gap: 7px; max-width: 260px; padding: 11px 12px; border-radius: 12px; background: color-mix(in oklab, var(--bg-base) 88%, transparent); border: 1px solid color-mix(in oklab, var(--text) 12%, transparent); }
.ev-mail-h { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-mail-s { font-size: 13px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; color: var(--text); }
.ev-mail-b { font-size: 12px; line-height: 1.5; color: var(--text-mute); white-space: pre-wrap; }
.ev-mail-b.none { font-style: italic; opacity: .65; }
.ev-mail-cta { align-self: flex-start; margin-top: 1px; padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: #fff; background: var(--accent); }
/* 📤 V17 · o glifo da modalidade DENTRO do disco do frame (fichas 27-29) — reusa a família da
   V16 (`EvArt`), ⛔ nenhum desenho novo. ⚠️ O traço se REESCREVE aqui: em 17px a arte de viewBox
   64×48 cai para escala 0,27, e o 1.6 herdado viraria 0,43px — subpixel, a mesma lição do
   quadrante (07/09). ⛔ NÃO descer deste tamanho nem confiar no traço herdado. */
.ft-disc.sm .ev-art { width: 21px; height: 16px; stroke-width: 4.4; }
/* o resumo que leva ao quadrante — ⛔ NÃO é lista (a lista mora no quadrante da tela anterior) */
.ev-psum { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius: 15px; background: var(--bg-elev); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ev-psum:hover { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.ev-psum-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-psum-m strong { font-size: 13px; font-weight: 650; }
.ev-psum-m > span { font-size: 11.5px; color: var(--text-dim); }
/* a linha do quadrante: modalidade no disco, destino no nome, prazo no lado */
.ft-disc.ev { color: var(--text-mute); background: color-mix(in oklab, var(--text) 5%, transparent); }
/* 🐞 O GLIFO ERA MANCHA A 375px (07/09): a arte de viewBox 64×48 em 30px cai para escala 0,47 e
   o traço de 1.6 vira 0,75px efetivo — subpixel. A família foi provada a 44px, e este slot
   estava 30% abaixo do piso. Sobe para 36px e o traço se REESCREVE em CSS (a propriedade herda
   e nenhum filho declara a sua), voltando a ~1,2px na tela. ⛔ NÃO descer deste tamanho. */
.ft-disc.ev .ev-art { width: 36px; height: 27px; stroke-width: 2.1; }
.ft-row-ev .ft-name { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.25; font-size: 13px; }
.ft-row-flat { cursor: default; }
.ft-row-flat:hover { background: none; }
.ft-when.soon { color: oklch(0.62 0.16 45); font-weight: 650; }
.ft-sec-n { margin-left: 8px; font-weight: 500; letter-spacing: .02em; text-transform: none; opacity: .8; }
.ev-hero { display: grid; place-items: center; margin: 8px 0 4px; color: var(--text-mute); }
.ev-say { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; color: var(--text); background: color-mix(in oklab, var(--accent) 9%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent); }
.ev-say.ev-quote { font-style: italic; }
.ev-chk { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in oklab, var(--text) 14%, transparent); cursor: pointer; }
.ev-chk input { margin: 3px 0 0; accent-color: var(--accent); flex: none; width: 16px; height: 16px; }
.ev-chk span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-chk strong { font-size: 13px; font-weight: 650; }
.ev-chk small { font-size: 11.5px; line-height: 1.45; color: var(--text-mute); }
/* a busca do diretório: lista de semelhanças com a FIANÇA na linha (o preço antes de esbarrar) */
.ev-hits-k { margin: 12px 2px 8px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.ev-busy { display: flex; align-items: center; gap: 8px; }
.ev-spin { flex: none; width: 11px; height: 11px; border: 1.6px solid color-mix(in oklab, currentColor 30%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: evSpin .8s linear infinite; }
@keyframes evSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ev-spin { animation-duration: 2.4s; } }
.ev-hits { display: flex; flex-direction: column; gap: 8px; margin: 0 0 4px; }
.ev-hit { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 60px; padding: 11px 13px; border: 1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius: 15px; background: var(--bg-elev); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ev-hit:hover { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.ev-hit .ft-tr-card-m { flex: 1; min-width: 0; }
.ev-hit-b { flex: none; white-space: nowrap; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--text); background: color-mix(in oklab, var(--text) 8%, transparent); }
.ev-hit-b.conn { color: var(--accent); background: color-mix(in oklab, var(--accent) 13%, transparent); }
.ev-doc-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--text-mute); background: color-mix(in oklab, var(--text) 7%, transparent); }
.ev-hit-doc { min-height: 58px; }
.ev-swap { flex: none; border: 0; background: none; padding: 4px 2px; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.ev-bond { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin: 2px 0 12px; padding: 13px 15px; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--text) 14%, transparent); }
.ev-bond-k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); align-self: center; }
.ev-bond-v { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; white-space: nowrap; }
.ev-bond-v b { font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.ev-bond-v em { font-style: normal; font-size: 10.5px; color: var(--text-dim); }
.ev-bond p { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-mute); }
.ev-bond p.ev-bond-s { font-weight: 650; }
.ev-bond-s.ok { color: oklch(0.55 0.14 155); }
.ev-bond-s.short { color: oklch(0.62 0.16 45); }
/* 🚪 PORTA ABERTA — a variante da régua ZERO (V19). Verde de "nada a pagar", ⛔ não o âmbar
   de atenção: não há o que conferir nem saldo que possa faltar. E o cartão ⛔ NÃO traz a
   coluna de valor — "0 PING" é exatamente o que esta variante existe para não dizer. */
.ev-bond.free { grid-template-columns: minmax(0, 1fr); border-color: oklch(0.7 0.16 152 / 0.45); background: oklch(0.7 0.16 152 / 0.08); }
.ev-bond.free .ev-bond-k { color: oklch(0.55 0.14 155); }
.theme-dark .ev-bond.free .ev-bond-k { color: oklch(0.78 0.16 152); }
.ev-field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 12px; }
.ev-field-k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); padding: 0 2px; }
.ev-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-pill { white-space: nowrap; min-height: 36px; padding: 7px 13px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.ev-pill.on { border-color: var(--accent); color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); font-weight: 650; }
.ev-ta { width: 100%; box-sizing: border-box; min-height: 74px; padding: 11px 13px; border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); border-radius: 14px; background: var(--bg-elev); color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.ev-ta:focus { outline: none; border-color: var(--accent); }
.ev-ta::placeholder { color: var(--text-mute); }
.ev-count { align-self: flex-end; font-size: 10.5px; color: var(--text-dim); }
.ev-count.near { color: oklch(0.62 0.16 45); }
.ev-back { margin: 0 2px 14px; }
.ev-camp { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; padding: 14px 15px; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--text) 14%, transparent); }
.ev-camp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ev-camp-h strong { font-size: 14px; font-weight: 650; display: inline-flex; align-items: center; gap: 8px; }
.ev-hub-ic { width: 28px; height: 28px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 2px 4px color-mix(in oklab, var(--text) 30%, transparent); }
.ev-camp-h .mono { font-size: 11px; color: var(--text-dim); }
.ev-camp-bar { height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--text) 10%, transparent); overflow: hidden; }
.ev-camp-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.ev-camp-n { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); }
.ev-camp-n b { color: var(--text); font-weight: 700; white-space: nowrap; }
.ev-camp-url { display: block; padding: 8px 10px; border-radius: 10px; font-size: 11.5px; background: color-mix(in oklab, var(--text) 5%, transparent); color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-share { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-camp-bio { border-color: color-mix(in oklab, var(--accent) 30%, transparent); background: var(--accent-bg); }
.ev-bio-who { gap: 10px; justify-content: flex-start; align-items: center; }
.ev-bio-idcol { display: flex; flex-direction: column; gap: 2px; }
.ev-bio-namelnk { background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
.ev-bio-namelnk strong { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent); text-underline-offset: 2px; }
.ev-bio-bal { font-size: 12px; font-weight: 600; color: var(--text-dim); display: inline-flex; align-items: center; gap: 3px; }
.ev-bio-bolt { flex: none; color: var(--accent); }
.ev-bio-pic { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.ev-bio-pic-fb { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink, #fff); font-size: 14px; font-weight: 700; }
.ev-bio-air { color: var(--text); }
.ev-bio-air b { font-weight: 700; }
.ev-camp-free { opacity: 0.92; }
.ev-aff-note { font-size: 12px; line-height: 1.5; color: var(--text-mute); margin: 0; }
.ev-aff-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ev-aff-badge { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; background: color-mix(in oklab, var(--text) 8%, transparent); color: var(--text-mute); }
.ev-aff-badge.comm { background: var(--accent-bg); color: var(--accent); }
.ev-aff-badge.air { background: oklch(0.72 0.17 150 / 0.16); color: oklch(0.6 0.15 154); }
.ev-sh { flex: 1 1 auto; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--text) 16%, transparent); background: none; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.ev-sh:hover { border-color: var(--accent); color: var(--accent); }
.ev-sh.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ev-sh.primary:hover { color: #fff; background: color-mix(in oklab, var(--accent) 88%, black); }
.ev-lnk { margin-top: 6px; align-self: flex-start; border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }

/* ═══ ESC-45 V1 · MINUTAS — estante de documentos do dispositivo ═══════════
   A prosa vem de take-prose.css (.take-prose): aqui só mapeamos os --tp-* da
   FOLHA CLARA dentro do estúdio/gaveta escura, e o chrome da estante. */
/* ═══ ESC-52 · UM BALDE POR MARCA ═════════════════════════════════
   A marca registrada (.NAMEXX) tem chat próprio: placa QUADRADA de
   cantos arredondados (marca é pessoa jurídica — disco redondo é
   gente). Dentro, a "pasta": grade de 2 colunas com a folha vista de
   longe, como ícone extra-grande do explorador de arquivos. */
.mn-plate { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; overflow: hidden; background: var(--bg-elev); border: 1px solid var(--border-soft); }
.mn-plate img { width: 100%; height: 100%; object-fit: cover; }
.mn-plate.sm { width: 34px; height: 34px; border-radius: 9px; }
.mn-hd-brand { display: flex; align-items: center; gap: 9px; }
/* placa PADRÃO da marca sem logo: sinete discreto, nunca a cara de gente (ESC-52). */
.mn-plate.ph { color: var(--text-dim); }
.mn-hd-nm { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.mn-hd-nm b { font-weight: 600; }
.mn-hd-nm em { font-style: normal; font-size: .56rem; letter-spacing: .12em; opacity: .5; }
.mn-pasta { display: inline-flex; align-items: center; gap: 6px; }
.mn-pasta.on { background: var(--accent); color: #fff; border-color: var(--accent); }
/* ESC-53 · ESTÚDIO DE CRIAÇÃO: tela dedicada, SEM rolagem — a escrita
   ocupa o que sobra entre o cabeçalho do arquivo e o rodapé de ação. */
.mn-shelf.studio { height: 100%; min-height: 0; overflow: hidden; }
/* ⚠️ O RODAPÉ DA FOLHA-MÃE NÃO VALE NO ESTÚDIO (2026-08-11): `.set-sheet-body`
   reserva 32px embaixo para a última linha de uma lista ROLADA não colar na
   borda — certo lá, morto aqui: o estúdio tem altura fixa e não rola, então
   esse respiro virava uma faixa vazia sob "Registrar" (46px com o padding do
   compositor) e roubava altura da caixa de texto, que é quem devia crescer.
   ⛔ NÃO tirar o padding do `.set-sheet-body` em geral — ele serve as ~20 rotas
      roláveis da gaveta. O cancelamento é SÓ onde o filho é o estúdio. */
.set-sheet-body:has(> .mn-shelf.studio) { padding-bottom: 0; }
/* ⚠️ sem a margem negativa do rodapé (herdada da barra sticky): dentro do
   estúdio de altura fixa ela deixava o composer 32px mais alto que o pai
   recortado e comia a linha de ação (Publicar ficava inalcançável).
   ⚠️ E SEM FILETE NO TOPO (2026-08-11): a borda existe na regra base porque na
   CONVERSA o compositor é uma barra que flutua sobre as mensagens e precisa se
   separar delas. No estúdio ele é a tela inteira, logo abaixo do cabeçalho do
   balde — que JÁ tem o seu filete. Duas linhas coladas, uma delas redundante. */
/* 📏 O RESPIRO DO TOPO ERA GRANDE DEMAIS (Tony, 02/09): 12px daqui + 2px do `.mn-file` +
   o `padding` do corpo da gaveta somavam uma faixa vazia entre o cabecalho e o ícone do arquivo.
   ⚠️ Cortado só o TOPO (12 → 4): o de baixo segura a linha de ação ("Registrar") longe da borda
   do aparelho, e ⛔ encurtar os dois de uma vez faz o botão encostar no gesto de voltar do iOS. */
.mn-shelf.studio .mn-comp { position: static; flex: 1; min-height: 0; margin: 0 -16px 0; padding: 4px 16px 14px; border-top: 0; box-shadow: none; }
.mn-shelf.studio .mn-comp-b { flex: none; }
/* a caixa de texto É o resto: com a faixa morta removida, tudo que sobra entre
   a barra de formatação e a linha de ação vira área de escrita.
   ⚠️ `min-height: 0` é obrigatório, não cosmético: item de flex não encolhe
      abaixo do conteúdo por padrão, e qualquer mínimo em `lh` aqui empurra a
      linha de ação ("Registrar") para FORA da tela em aparelho baixo. */
.mn-shelf.studio .mn-ed { flex: 1; min-height: 0; }
/* ══ MODO EDITOR PARA WEB · A PÁGINA ROLA, NÃO A CAIXA ══════════════════
   As regras acima montam um app de CELULAR: altura fixa, nada rola, e o texto
   rola DENTRO da caixa. Certo na gaveta estreita; péssimo para redigir cinco
   páginas no desktop — vira uma janelinha com barra própria, exatamente o que
   a comparação com o Google Docs mostrou (2026-08-11).
   Em tela cheia o modelo INVERTE, como todo editor de documento da web: a caixa
   CRESCE com o conteúdo (altura via JS, `mn-grow`) e quem rola é a página. A
   barra de formatação gruda no alto e a linha de ação no pé — as duas seguem o
   autor pelas cinco páginas.
   ⚠️ A COLUNA TEM MEDIDA: 1100px de gaveta com texto de ponta a ponta dá linha
      longa demais para ler. `--mn-web` é a largura do papel, centrada — o resto
      é mesa, como no Docs.
   ⚠️ SÓ vale com `.mn-full` (>750px): no celular a gaveta É a tela e o modelo
      de altura fixa continua sendo o certo. ⛔ NÃO aplicar sem o `.mn-full`. */
.set-sheet.mn-full { --mn-web: 700px; }
.set-sheet.mn-full .set-sheet-body { overflow-y: auto; }
.set-sheet.mn-full .mn-shelf.studio { height: auto; min-height: 100%; overflow: visible; }
.set-sheet.mn-full .mn-shelf.studio .mn-comp { flex: none; }
.set-sheet.mn-full .mn-shelf.studio .mn-ed { flex: none; min-height: 0; }
/* a caixa segue a altura que o JS mede — sem barra própria */
.set-sheet.mn-full .mn-shelf.studio .mn-body { height: auto; overflow: hidden; }
/* barra de formatação e linha de ação acompanham a rolagem */
.set-sheet.mn-full .mn-comp .md-tb { position: sticky; top: 0; z-index: 6; background: var(--bg-base); }
.set-sheet.mn-full .mn-comp-b { position: sticky; bottom: 0; z-index: 6; background: var(--bg-base); box-shadow: 0 -8px 18px -12px rgba(0,0,0,.5); }
/* o papel no meio da mesa — e a COLUNA É DO CONTAINER, nunca dos filhos.
   ⚠️ Capar cada filho com `max-width` + `margin-inline: auto` parece equivalente
      e NÃO É (2026-08-11): margem automática num item de coluna flex MATA o
      `stretch` — o `.mn-comp` virou fit-content (461px de 913 disponíveis) e
      arrastou todo o resto para dentro dessa largura, dando os 550px medidos na
      tela. Pior: cabeçalho do arquivo e barra de formatação, sendo fit-content,
      centralizaram cada um na SUA largura — o ícone flutuando no meio.
      A mesma lição já estava anotada na imersão; aqui ela se repetiu.
   ⛔ NÃO voltar a capar filho a filho. O compositor recebe o respiro lateral e
      TUDO dentro dele ganha a mesma coluna de graça, alinhado à esquerda. */
.set-sheet.mn-full .mn-shelf.studio > .mn-comp { max-width: none; margin-inline: -16px; padding-inline: max(16px, calc((100% - var(--mn-web)) / 2)); }
.mn-shelf.studio .mn-body { height: 100%; min-height: 0; max-height: none; resize: none; overflow: auto; }
.mn-file { display: flex; align-items: center; gap: 11px; padding: 0 2px 8px; }
.mn-file-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in oklab, var(--text) 6%, transparent); color: var(--text-mute); }
.mn-file-ic.xd { width: auto; height: auto; border-radius: 0; background: none; }
/* ⚠️ O NOME VOLTOU A ESTA LINHA (2026-08-31): `ícone + nome` na 1ª linha lê como NOME DE
   ARQUIVO — que é o que a nota de 11/08 já pedia (a aba de um editor de texto). O que aquela
   nota proibia era o nome solto como TÍTULO impresso na folha, e isso segue proibido.
   ⛔ NÃO tirar o nome de junto do ícone: separado, ele volta a ser título. */
.mn-file-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; justify-content: center; }
/* ⚠️ `nowrap` + reticências: nome de arquivo NUNCA quebra em duas linhas — quebrando, ele
   empurra a legenda e a caixa dança a cada palavra digitada. ⛔ NÃO trocar por `wrap`. */
/* ⚠️ ESPECIFICIDADE: `.mn-file-m .mn-file-n` (0-2-0) porque `.mn-file-m span` logo abaixo é
   0-1-1 e VENCIA `.mn-file-n` — o nome saía com `.66rem` e `opacity:.55`, isto é, com a veste
   da LEGENDA. ⛔ NÃO baixar a especificação de volta; ⛔ não mexer no `.mn-file-m span`, que é
   quem veste a linha de baixo (contagem · estado). */
.mn-file-m .mn-file-n { font-size: .72rem; font-weight: 620; line-height: 1.35; letter-spacing: 0; color: #fff; opacity: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* vazio: presente, mas apagado — o par ícone+nome existe desde o 1º toque, então nada salta
   quando o autor começa a digitar. */
.mn-file-m .mn-file-n.off { font-weight: 500; opacity: .38; }
.mn-file-m strong { font-size: .94rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-file-m span { font-size: .66rem; letter-spacing: .02em; opacity: .55; }
.mn-file-rev { font-weight: 600; color: oklch(0.52 0.14 155); opacity: 1; }
/* ✍️ ESC-166 · O SELETOR DE AUTORIA (02/09).
   ⚠️ Na ficha o botão é DISCRETO — informa antes de convidar: quem não vai trocar a autoria não
      deve ser interrompido por ela. ⛔ NÃO dar cor de ação a um seletor que, na maioria dos
      documentos, só confirma o padrão.
   ⚠️ O estado ANÔNIMO, sim, tem cor (âmbar): é o único que muda o que o documento AFIRMA, e
      passar por ele sem ver seria selar autoria de menos sem perceber.
   ⚠️ `opacity: 1` explícito: `.mn-file-m span` (0-1-1) veste a linha da legenda com `.55` e
      alcançaria o rótulo aqui dentro — o mesmo tropicão do nome do arquivo, documentado acima. */
/* ✍️ ESC-166 · O CABEÇALHO COMO SELETOR DE AUTORIA (02/09).
   ⚠️ O chevron é o que diz "isto abre" — sem ele o cabeçalho parece só um título com foto, e
      ninguém descobre que a autoria se troca ali. ⛔ NÃO remover "por limpeza".
   ⚠️ O vulto do anônimo usa `currentColor` com opacidade, não uma cor própria: ele tem de ler
      como AUSÊNCIA de retrato, e cor própria o transformaria num personagem. */
.mn-hd-au { cursor: pointer; }
.mn-hd-au-c { flex: none; margin-left: 1px; opacity: .5; }
.mn-hd-au:hover .mn-hd-au-c { opacity: .9; }
.ft-disc.anon { background: color-mix(in oklab, var(--text) 12%, transparent); color: var(--text-mute); }
.ft-disc.hd.img.br img { border-radius: 7px; }
.mn-file-au { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 4px; padding: 3px 7px 3px 8px; border: 1px solid var(--border-soft); border-radius: 99px; background: color-mix(in oklab, var(--text) 4%, transparent); color: var(--text-mute); font-family: "Geist Mono", ui-monospace, monospace; font-size: 10.5px; line-height: 1; cursor: pointer; }
.mn-file-au span { font-size: 10.5px; letter-spacing: .02em; opacity: 1; }
.mn-file-au:hover { color: var(--text); border-color: color-mix(in oklab, var(--text) 24%, transparent); }
.mn-file-au.anon { color: oklch(0.78 0.13 78); border-color: color-mix(in oklab, oklch(0.78 0.13 78) 42%, transparent); background: color-mix(in oklab, oklch(0.78 0.13 78) 10%, transparent); }
/* a folha da escolha: decisão irreversível não se toma em popover de canto — porquê no minutas.jsx */
.mn-au-wrap { position: fixed; inset: 0; z-index: 4200; display: grid; place-items: center; padding: 18px; background: rgba(4,8,18,.62); backdrop-filter: blur(3px); }
.mn-au { width: 100%; max-width: 380px; padding: 16px 15px 13px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--bg-elev); box-shadow: 0 26px 60px -24px rgba(0,0,0,.7); }
.mn-au-t { margin: 0 0 11px; font-size: .84rem; font-weight: 650; color: var(--text); }
.mn-au-o { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 11px; margin: 0 0 7px; border: 1px solid var(--border-soft); border-radius: 11px; background: transparent; color: inherit; text-align: left; cursor: pointer; min-height: 52px; }
.mn-au-o:hover { border-color: color-mix(in oklab, var(--text) 26%, transparent); }
.mn-au-o.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 9%, transparent); }
.mn-au-o.anon.on { border-color: oklch(0.78 0.13 78); background: color-mix(in oklab, oklch(0.78 0.13 78) 11%, transparent); }
.mn-au-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in oklab, var(--text) 7%, transparent); color: var(--text-mute); }
.mn-au-ic.brand { color: oklch(0.8 0.11 84); }
.mn-au-ic.anon { color: oklch(0.78 0.13 78); }
.mn-au-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mn-au-tx b { font-size: .86rem; font-weight: 640; color: var(--text); }
.mn-au-tx em { font-style: normal; font-size: .72rem; line-height: 1.4; color: var(--text-mute); text-wrap: pretty; }
.mn-au-ck { flex: none; color: var(--accent); font-weight: 700; }
.mn-au-n { margin: 9px 2px 0; font-size: .7rem; line-height: 1.5; color: var(--text-mute); text-wrap: pretty; }
.theme-dark .mn-file-rev { color: oklch(0.78 0.14 155); }
.mn-file-dr { font-weight: 600; color: oklch(0.58 0.19 25); opacity: 1; }
.theme-dark .mn-file-dr { color: oklch(0.7 0.18 25); }
.mn-list { container-type: inline-size; }
/* ⚠️ NÃO usar CSS columns aqui: o fluxo enche a coluna 1 e depois a 2, então
   com número ÍMPAR o buraco cai sempre no mesmo lado e a leitura desanda.
   Grid preenche em Z — esquerda→direita, linha a linha, como quadrinho — e o
   vão fica no fim, onde é sobra e não buraco. */
.mn-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 18px 15px; padding: 4px 2px 8px; }
.mn-tile { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mn-tile-sheet { position: relative; display: block; container-type: inline-size; aspect-ratio: 1 / 1.414; overflow: hidden; border-radius: 3px; background: #fff; box-shadow: 0 1px 2px rgba(20, 16, 8, .18), 0 10px 22px -12px rgba(20, 16, 8, .5); transition: transform .12s ease, box-shadow .12s ease; }
.mn-tile:hover .mn-tile-sheet { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20, 16, 8, .2), 0 16px 30px -12px rgba(20, 16, 8, .55); }
.mn-tile:active .mn-tile-sheet { transform: scale(.985); }
/* A miniatura NÃO usa transform: scale() — `calc(100cqw/430)` é comprimento,
   não número, e o navegador descarta a regra inteira (bug de 2026-08-08).
   Escala de verdade é TIPOGRÁFICA: a prosa da folha é toda em em sobre
   --md-size, então basta medir a fonte em cqw e o papel inteiro encolhe
   proporcional — inclusive quando a coluna muda de largura. */
.mn-tile-zoom { position: absolute; inset: 0; box-sizing: border-box; padding: 11% 9.5%; overflow: hidden; pointer-events: none; }
.mn-tile-zoom .mn-paper { width: 100%; height: 100%; box-sizing: border-box; padding: 0; border-radius: 0; box-shadow: none; background: none; --md-size: 2.85cqw; --md-gutter: 0em; }
.mn-tile-zoom .mn-paper > p, .mn-tile-zoom .mn-paper ol, .mn-tile-zoom .mn-paper ul, .mn-tile-zoom .mn-paper h2, .mn-tile-zoom .mn-paper h3, .mn-tile-zoom .mn-paper blockquote { margin-left: 0; margin-right: 0; max-width: 100%; }
/* o frontispício da miniatura é o MESMO da folha — só encolhido. Centrado,
   com filete e estado, como o documento aberto. */
.mn-tile-zoom .mn-hd { margin: 0 0 4.6cqw; text-align: center; }
/* take-prose mede em rem — na miniatura vira cqw, senão a capitular engole
   o ladrilho ("estourado", 2026-08-09). Capitular fora: de longe é mancha. */
.mn-tile-zoom .mn-paper.take-prose { font-size: 2.9cqw; }
.mn-tile-zoom .mn-paper.take-prose p, .mn-tile-zoom .mn-paper.take-prose li, .mn-tile-zoom .mn-paper.take-prose blockquote { font-size: 2.9cqw; line-height: 1.65; }
.mn-tile-zoom .mn-paper.take-prose h2 { font-size: 3.8cqw; }
.mn-tile-zoom .mn-paper.take-prose h3 { font-size: 3.2cqw; }
.mn-tile-zoom .mn-paper.take-prose p::first-letter { float: none; font-size: inherit; padding: 0; margin: 0; color: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
.mn-tile-zoom .mn-dn { max-width: 100%; margin: 0 0 2.4cqw; font-size: 4.2cqw; line-height: 1.24; letter-spacing: .01em; text-align: center; }
.mn-tile-zoom .mn-kick { margin: 0 0 2.2cqw; font-size: 2.3cqw; letter-spacing: .3em; text-align: center; }
.mn-tile-zoom .mn-hd { padding-bottom: 3cqw; border-bottom: 1px solid var(--md-line, rgba(27,26,23,.14)); }
.mn-tile-zoom .mn-tb { margin: 0 0 3cqw; text-align: center; }
.mn-tile-zoom .mn-tb img { max-width: 34cqw; max-height: 9cqw; }
.mn-tile-zoom .mn-tb-seal { width: 7.4cqw; height: 7.4cqw; border-radius: 1.3cqw; }
.mn-tile-zoom .mn-tb.lock { justify-content: center; gap: 2.4cqw; }
.mn-tile-zoom .mn-tb-w { font-size: 2.9cqw; letter-spacing: .26em; }
.mn-tile-zoom .minuta-doc h1 { margin: 1.4em 0 .7em; font-size: 1.5em; }
/* ⚠️ UMA SÓ DEFINIÇÃO (2026-08-12, Tony viu o botão ilegível): havia QUATRO
   `.mn-btn.del` empilhadas de edições sucessivas — a primeira punha fundo vermelho
   SÓLIDO, as seguintes trocavam só a COR DO TEXTO para vermelho escuro. Resultado:
   texto vermelho escuro sobre fundo vermelho, ilegível. ⛔ NÃO adicionar outra
   regra `.mn-btn.del`: edite ESTA. Regra de perigo repetida é como se perde
   contraste sem ninguém notar — e este é o botão que NÃO pode ser tocado por acidente
   nem ficar impossível de ler quando é mesmo a intenção.
   Repouso: contorno de perigo, texto claro (o estúdio é sempre escuro, seção 4 do
   CLAUDE.md). Habilitado + hover: fundo sólido, texto branco. */
.mn-btn.del { background: transparent; border-color: oklch(0.58 0.19 25); color: oklch(0.78 0.14 25); }
.mn-btn.del:hover:not(:disabled) { background: oklch(0.58 0.19 25); border-color: oklch(0.58 0.19 25); color: #fff; }
.mn-btn.del:not(:disabled) { background: oklch(0.46 0.16 25); color: #fff; }
.mn-btn.del:disabled, .mn-btn.del[disabled] { background: transparent; color: oklch(0.62 0.09 25); opacity: .5; cursor: default; }
.mn-lnk.del { margin-left: 14px; color: oklch(0.58 0.19 25); opacity: .8; }
.mn-lnk.del:hover { opacity: 1; }
.mn-tile.draft .mn-tile-sheet { box-shadow: 0 0 0 2px oklch(0.58 0.19 25), 0 10px 22px -12px rgba(20, 16, 8, .5); }
.mn-tile-tag { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 4px 9px; border-radius: 0 6px 0 4px; background: oklch(0.58 0.19 25); color: #fff; font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; }
/* o estado fala a língua do balão: ✓✓ com varredura marca-texto verde
   para registrado, relógio para o que só existe neste aparelho. */
/* o painel ocupa o PÉ da folha: a página continua atrás, apagando por
   baixo de um véu — o documento não é recortado, ele mergulha no painel. */
/* ESC-54 · BARRA DO MODO IMERSÃO: nasce com a troca de skin. Fica sobre a
   folha, discreta — o documento é o assunto, a barra é serviço. */
/* ⚠️ a barra é IRMÃ da área de rolagem no flex do .mn-imm — não flutua por
   cima da folha. Assim o papel começa exatamente onde o cabeçalho termina e
   nada passa por baixo dele ao rolar. */
.mn-imm-bar { flex: none; position: relative; z-index: 5; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 58px; padding: env(safe-area-inset-top, 0px) 16px 0; background: #fbf9f4; border-bottom: 1px solid #e6dfd0; }
/* ⚠️ O NOME DO ARQUIVO VIVE AQUI, NO CHROME (2026-08-11) — nunca estampado na
   folha: papel leva o título que o AUTOR escreveu (`# Título`), a barra leva o
   nome do arquivo, igual à barra de título de um editor de texto.
   ⚠️ `margin-right:auto` é o que mantém skin+× à direita sem tocar no
      `justify-content:flex-end` da barra. ⚠️ `min-width:0` é obrigatório para o
      ellipsis funcionar dentro de flex. */
.mn-imm-bar .mn-imm-n { flex: 1; min-width: 0; margin: 0 auto 0 0; font-family: "EB Garamond", Georgia, serif; font-size: .95rem; font-weight: 500; color: #3a352c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-imm-bar .mn-imm-x { position: static; width: 34px; height: 34px; border-color: #ded7c8; background: #fff; box-shadow: none; }
.mn-skin { position: relative; display: flex; align-items: center; gap: 9px; }
.mn-skin-l { font-size: .62rem; letter-spacing: .04em; color: #8a8175; }
.mn-skin-b { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(30,26,18,.16); background: rgba(255,255,255,.9); color: #2c2820; font: inherit; font-size: .68rem; font-weight: 600; cursor: pointer; }
.mn-skin-b:hover, .mn-skin-b.on { border-color: rgba(30,26,18,.4); }
.mn-skin-b svg { opacity: .55; }
.mn-skin-m { position: absolute; top: calc(100% + 7px); right: 0; z-index: 6; min-width: 172px; padding: 5px; border-radius: 12px; border: 1px solid rgba(30,26,18,.12); background: #fff; box-shadow: 0 14px 38px -10px rgba(20,16,8,.34); }
.mn-skin-i { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-radius: 8px; background: none; color: #2c2820; font: inherit; font-size: .74rem; text-align: left; cursor: pointer; }
.mn-skin-i:hover { background: rgba(30,26,18,.05); }
.mn-skin-i.on { font-weight: 600; }
/* a skin Take veste a folha com a prosa editorial — take-prose.css já é
   token-driven (CLAUDE.md §1), então basta mapear os tokens no papel. */
/* ⚠️ o accent é o COBALTO EDITORIAL do Decode (hue 260, decode.css) — não
   invente um tom "parecido": a skin promete a cara do take, e cor é a
   primeira coisa que se reconhece nela. */
.mn-paper.take-prose { --accent: oklch(0.55 0.22 260); --accent-strong: oklch(0.45 0.24 260); --accent-soft: oklch(0.80 0.10 260); --accent-bg: oklch(0.96 0.04 260); --bg-elev: #f7f5f0; --border-soft: rgba(30,26,18,.14); --text: #23201a; --text-mute: #55503f; --text-dim: #8a8175; color: var(--text); }
.mn-paper.take-prose .mn-dn { font-family: "Instrument Serif", Georgia, serif; font-variant: normal; letter-spacing: -.01em; }
/* ⚠️ o frontispício NÃO é prosa: kicker e meta são <p> dentro de .mn-hd e
   herdavam o justificado + margens de parágrafo do take. Aqui só re-afirmamos
   o que é chrome do papel — nenhuma regra de prosa sai de take-prose.css. */
.mn-paper.take-prose .mn-hd p { text-align: center; text-indent: 0; }
.mn-paper.take-prose .mn-hd p::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0; padding: 0; font-weight: inherit; }
.mn-paper.take-prose .mn-kick { margin: 0 0 10px; }
.mn-paper.take-prose .mn-meta { margin: 0; }
/* ⚠️ NÃO zerar as margens do cabeçalho aqui: em imersão quem alinha tudo é a
   MEDIDA DE LEITURA (--md-measure, com margin auto). Zerar o recuo pinava o
   cabeçalho à esquerda e criava três alinhamentos na mesma página. */
.mn-tile-panel { position: absolute; left: 0; right: 0; bottom: 17px; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 24px 9% 9px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.86) 26%, #fff 50%); color: oklch(0.44 0.12 155); }
/* tema escuro: a folha é clara — sem um fio branco ela some no fundo (2026-08-09) */
.theme-dark .mn-tile-sheet { box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 10px 22px -12px rgba(0, 0, 0, .75); }
.theme-dark .mn-tile:hover .mn-tile-sheet { box-shadow: 0 0 0 1px #fff, 0 16px 30px -12px rgba(0, 0, 0, .8); }
.theme-dark .mn-tile.draft .mn-tile-sheet { box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 3px oklch(0.58 0.19 25), 0 10px 22px -12px rgba(0, 0, 0, .75); }
/* a mancha do painel é BRANCA em qualquer veste (decisão do Tony,
   2026-08-09) — papel de etiqueta; o degradê é curto (~2px). */
.mn-tile-sheet:has(.mn-paper.skin-cyber) .mn-tile-panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(28% - 1px), #fff calc(28% + 1px)); }
.mn-tile-panel.draft { color: oklch(0.55 0.19 25); }
.theme-dark .mn-tile-panel.draft { color: oklch(0.68 0.18 25); }
.mn-tile-st { display: flex; align-items: center; gap: 5px; font-size: .6rem; letter-spacing: .01em; }
.mn-tile-st svg { flex: none; }
.mn-tile-st em { font-style: normal; font-weight: 650; }
.mn-tile-st .ft-hl-sweep { display: inline-flex; padding: 1px 2px; }
.mn-tile-sub { font-size: .54rem; letter-spacing: .02em; color: oklch(0.55 0.02 90); }
/* ⚠️ ESC-69 · quem tem a vez, no painel do ladrilho: bronze da custódia, acima da
   fita azul da corrente (uma é custódia, a outra é linhagem). Nome em negrito,
   prazo em peso normal — é uma frase, não dois dados soltos. */
.mn-tile-vez { display: block; margin-top: 4px; font-size: .54rem; line-height: 1.4; letter-spacing: .02em; color: oklch(0.5 0.1 74); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-tile-vez strong { font-weight: 700; }
.theme-dark .mn-tile-vez { color: oklch(0.82 0.11 82); }
.mn-tile-vez.over { font-style: italic; }
.mn-tile-vez.done { opacity: .55; text-decoration: line-through; }
/* ⛓ A CORRENTE, EM UM LUGAR SÓ (2026-08-12). A contagem estava no painel E como
   `rev 2` na legenda — a mesma informação duas vezes, com vocabulários
   diferentes. Aqui é a casa dela, com o ícone de elos: é quantidade e conexão,
   um degrau mais discreta que o estado (que é veredito).
   ⚠️ É FITA COLADA NA BASE DO PAPEL, fora do fluxo da etiqueta (Tony, 12/08):
      empilhada dentro dela, disputava o mesmo ar do estado e a distribuição
      ficava ruim. Como fita, ela sela a base do ladrilho e o painel volta a
      ter só duas linhas — cada coisa com o seu espaço.
   ⚠️ O AZUL É A COR DA CORRENTE — ícone E texto juntos. É o azul de sistema da
      gaveta, o mesmo do 📁 no cabeçalho do balde: ambos falam de ORGANIZAÇÃO do
      acervo, não de estado do papel. ⛔ NÃO usar bronze aqui: bronze é a cor do
      X-DOC (o documento em si) e verde é veredito de conferência — a corrente
      não é nem um nem outro. */
.mn-tile-revs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 5px; height: 17px; background: #E8F1FE; color: #0060DF; font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; }
.mn-tile-revs em { font-style: normal; font-weight: 650; letter-spacing: .06em; }
.mn-tile-revs svg { display: block; flex: none; width: 9px; height: 9px; }
/* 🌱 a muda do "plantado" ocupa a mesma caixa do glifo SVG (9px, sem herdar a linha da fonte,
   que empurraria a altura da fita). ⛔ NÃO aumentar: aqui ela é glifo de estado, não enfeite. */
.mn-tile-emo{flex:none;font-size:9px;line-height:1}
.mn-tile-revs.many { background: #D6E6FD; font-weight: 650; }
/* rascunho: o degrau ANTES da corrente começar — mesma fita, tom vermelho do
   não-selado (o mesmo do `.mn-tile-panel.draft`). ⚠️ Vermelho aqui NÃO é erro:
   é "ainda não existe prova", que é exatamente o que um rascunho é. */
.mn-tile-revs.draft { background: #FDECEA; color: oklch(0.5 0.19 25); }
.mn-tile-revs.draft em { font-weight: 650; }
/* rascunho DE corrente existente: as duas verdades na mesma fita — o vermelho
   do não-selado manda no fundo (o que está na tela é rascunho), e a parte da
   corrente fica em azul, porque as versões registradas são fato à parte. */
.mn-tile-revs.draft .mn-tile-revs-x { opacity: .4; }
.mn-tile-revs.draft em.n { color: #0060DF; }
.mn-tile-revs.draft svg + em ~ svg { color: #0060DF; }
/* 👁 ESC-115 · A FITA DO LADRILHO NA CAIXA DE RECEBIDOS diz o ESTADO DE LEITURA, não a
   contagem de versões (contar as versões de um documento alheio expõe quantas vezes quem
   mandou revisou o próprio livro). Um tom por FATO, todos já no vocabulário da casa:
   pendente = o azul neutro da corrente · lido = o verde do veredito · pulou = o âmbar do
   X-DOC (adiado, segue na fila) · ignorou = o vermelho da pendência encerrada.
   ⛔ NÃO usar o verde em "pulou" nem o azul em "lido": aqui o tom É a informação. */
.mn-tile-revs.st-lido { background: #E6F4EC; color: oklch(0.44 0.12 155); }
.mn-tile-revs.st-pulou { background: #FBF0DC; color: oklch(0.45 0.1 72); }
/* ✍️ ESC-144 · recusou compartilha o vermelho do ignorou (decisão negativa encerrada, sem a
   bolinha: não pisca porque não pende) — o RÓTULO carrega a diferença ("recusou assinar" tem
   motivo e aviso; "ignorou" é descarte). ⛔ NÃO dar um 3º vermelho: o tom é o eixo do estado. */
.mn-tile-revs.st-ignorou,.mn-tile-revs.st-recusou { background: #FDECEA; color: oklch(0.5 0.19 25); }
/* 📇 ESC-145 · estados do INSTRUMENTO (caixa da medalha): em vigor herda o verde do lido
   (contrato valendo é a boa notícia da estante); vencido usa o âmbar do pulou (pede olhar,
   não pende de ninguém — SEM bolinha); rescindido é neutro (encerrado sem drama). O carimbo
   de vigência SOBREPÕE o de ato via classe extra — a última classe vence no mesmo seletor. */
.mn-tile-revs.st-vigor { background: #E6F4EC; color: oklch(0.44 0.12 155); }
.mn-tile-revs.st-vencido { background: #FBF0DC; color: oklch(0.45 0.1 72); }
.mn-tile-revs.st-vencido::before,.mn-tile-revs.st-rescindido::before,.mn-tile-revs.st-aguarda::before,.mn-tile-revs.st-recusou::before { display: none; }
.mn-tile-revs.st-rescindido { background: #EFEFF2; color: oklch(0.46 0.012 270); }
/* filtros da prateleira + linha de receita */
.mn-fil-w { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 7px; margin: 2px 2px 4px; }
.mn-fil { display: flex; flex-wrap: wrap; gap: 6px; }
.mn-fil-c { appearance: none; border: 1px solid var(--border-soft, #d9d4c8); background: transparent; color: var(--text-dim, #6b675e); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; cursor: pointer; }
.mn-fil-c:hover { border-color: var(--accent, #b98a2f); color: var(--text, #2a2721); }
.mn-fil-c.on { background: var(--accent, #b98a2f); border-color: var(--accent, #b98a2f); color: #fffdf6; }
/* 📇 ESC-146 · o mini-dashboard da caixa da medalha: dinheiro grande (mensal), projetado ao
   lado, contagens embaixo. Token-driven — herda o tema da gaveta. */
.mn-dash { grid-column: 1 / -1; border: 1px solid var(--border-soft, #d9d4c8); border-radius: 11px; padding: 12px 14px; margin: 2px 2px 6px; display: flex; flex-direction: column; gap: 7px; background: linear-gradient(180deg, oklch(0.85 0.06 88 / .08), transparent 70%); }
.mn-dash-money { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mn-dash-big { font-size: 1.12rem; font-weight: 650; letter-spacing: .01em; color: var(--text, #2a2721); }
.mn-dash-big em { font-style: normal; font-size: .66rem; color: var(--text-dim, #6b675e); margin-left: 2px; }
.mn-dash-proj { font-size: .72rem; color: var(--text-dim, #6b675e); }
.mn-dash-proj i { font-style: normal; opacity: .75; }
/* 📇 ESC-149 · o crachá de contagem vive no chip (zero não aparece) */
.mn-fil-n { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 999px; font-size: .56rem; line-height: 1.5; background: var(--border-soft, #d9d4c8); color: var(--text, #2a2721); }
.mn-fil-c.on .mn-fil-n { background: oklch(1 0 0 / .28); color: inherit; }
/* o painel de vigência dentro da placa (MinutaSigners) */
.mn-vg { border-top: 1px solid var(--border-soft, #d9d4c8); margin-top: 12px; padding-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.mn-vg-h { font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim, #6b675e); }
.mn-vg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-vg-f { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mn-vg-f > span { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim, #6b675e); }
.mn-vg-i { width: 100%; box-sizing: border-box; border: 1px solid var(--border-soft, #d9d4c8); border-radius: 7px; background: var(--bg-elev, #fff); color: var(--text, #2a2721); font-size: .78rem; padding: 7px 8px; }
.mn-vg-i:focus { outline: none; border-color: var(--accent, #b98a2f); }
.mn-vg-t { display: flex; align-items: center; gap: 8px; font-size: .78rem; cursor: pointer; }
.mn-vg-t input { accent-color: var(--accent, #b98a2f); }
.mn-vg-eq { font-size: .68rem; color: var(--text-dim, #6b675e); margin-top: -3px; }
.mn-vg-cur { display: flex; gap: 4px; align-items: flex-end; }
/* ⚠️ pílula NÃO selecionada com --text-mute, nunca --text-dim: o diálogo da placa é
   superfície tingida, e text-dim é calibrado contra o fundo da página (contrato do 🔤). */
.mn-vg-cb { appearance: none; border: 1px solid color-mix(in oklab, var(--text, #2a2721) 26%, transparent); background: transparent; color: var(--text-mute, #4c483e); font-size: .64rem; padding: 7px 9px; border-radius: 7px; cursor: pointer; }
/* ⚠️ "on" com texto = --bg-base, nunca #fffdf6 fixo: no tema escuro --text é CLARO e o
   texto fixo claro sumia dentro da pílula acesa (2026-08-23, Tony: "pago" ilegível). */
.mn-vg-cb.on { background: var(--text, #2a2721); border-color: var(--text, #2a2721); color: var(--bg-base, #fffdf6); }
.mn-vg-resc { appearance: none; align-self: flex-start; border: 1px solid oklch(0.5 0.19 25 / .45); background: transparent; color: oklch(0.5 0.19 25); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; cursor: pointer; }
.mn-vg-resc:hover { background: #FDECEA; }
/* 🔌 ESC-175 (2026-08-24, Tony no comentário: "é o que liga e desliga o contrato — marca
   visual mais forte"). O estado .on é o botão de RELIGAR: verde da bateria, SÓLIDO — o par
   liga/desliga fica vermelho-contorno (desligar) × verde-cheio (religar), nunca cinza.
   ⛔ NÃO voltar o .on para border-soft/text-dim: apagado lia-se como desabilitado. */
.mn-vg-resc.on { border-color: oklch(0.52 0.13 148); background: oklch(0.52 0.13 148); color: #fff; }
.mn-vg-resc.on:hover { background: oklch(0.46 0.13 148); border-color: oklch(0.46 0.13 148); }
.theme-dark .mn-vg-resc.on { background: oklch(0.68 0.15 147); border-color: oklch(0.68 0.15 147); color: oklch(0.2 0.03 150); }
.theme-dark .mn-vg-resc.on:hover { background: oklch(0.75 0.16 147); border-color: oklch(0.75 0.16 147); }
.theme-dark .mn-vg-resc:not(.on):hover { background: oklch(0.3 0.07 25 / .35); }
.mn-vg-note { font-size: .62rem; line-height: 1.5; color: var(--text-dim, #6b675e); margin: 0; }
/* ✕ ESC-152 · o destaque da recusa na placa: quem + quando, e a justificativa como citação.
   O vermelho é o mesmo eixo do carimbo st-recusou. ⛔ NÃO usar --text-dim sobre o tinto. */
/* ✕ ESC-153 · a linha do recusante: verbo vermelho, linha SEM o esmaecido de pendente
   (recusa é resposta dada, não espera) e a citação da justificativa dentro da linha. */
.mn-sgl-sim { margin-top: 6px; align-self: flex-start; display: inline-block; font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border: 1px dashed var(--border-soft, #d9d4c8); border-radius: 999px; color: var(--text-dim, #6b675e); cursor: pointer; }
.mn-sgl-sim:hover { border-color: var(--accent, #b98a2f); color: var(--accent, #b98a2f); }
.mn-sgl-sim.ref { margin-left: 6px; }
.mn-sgl-sim.ref:hover { border-color: oklch(0.5 0.19 25); color: oklch(0.5 0.19 25); }
.mn-sgl-r.ref { opacity: 1; }
.mn-sgl-r.ref .mn-sgl-m > i { color: oklch(0.5 0.19 25); }
.mn-sgl-m .mn-ref-why { margin-top: 6px; }
.mn-ref-why { margin: 0; padding: 9px 12px; border-radius: 9px; background: #FDECEA; color: oklch(0.32 0.09 25); font-size: .8rem; line-height: 1.55; font-style: italic; }
.mn-vg-note.solo { border-top: 1px solid var(--border-soft, #d9d4c8); margin-top: 12px; padding-top: 12px; }
.mn-tile-revs.st-pendente { background: #EFEFF2; color: oklch(0.46 0.012 270); }
/* 🔴 PENDENTE E PULOU PISCAM (2026-08-19, Tony: "igual tem na frente da hora no chat").
   O ponto é a MESMA linguagem do `.ft-led` da lista de conversas — vermelho da
   pendência, `mmIsleBlink`. Aqui ele NÃO substitui o glifo nem a palavra: soma,
   porque o glifo diz o que aconteceu e o ponto diz que ainda cobra algo.
   ⚠️ Só nas duas baixas que seguem pendentes: `lido` e `ignorou` estão FECHADAS —
   ponto piscando em assunto encerrado é o alarme que virou paisagem.
   ⛔ NÃO trocar o âmbar do "pulou" pelo vermelho: o tom diz o estado, o ponto diz a
   pendência — são dois eixos, e juntá-los apagaria a diferença entre adiar e encerrar. */
.mn-tile-revs.st-pendente::before,.mn-tile-revs.st-pulou::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 999px; background: oklch(0.60 0.21 25); box-shadow: 0 0 0 2px oklch(0.60 0.21 25 / 0.22); animation: mmIsleBlink 1.15s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mn-tile-revs.st-pendente::before,.mn-tile-revs.st-pulou::before { animation: none; } }
.mn-tile-n { display: block; margin: 9px 2px 1px; font-size: .82rem; font-weight: 550; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mn-tile-m { display: block; margin: 0 2px; font-size: .58rem; letter-spacing: .04em; opacity: .5; }
/* ⚠️ ESC-74 · ⋮ da face: canto INFERIOR direito da folha, longe do selo de estado
   (canto superior) — os dois eixos não competem. Chip escuro porque a folha é
   clara em qualquer skin. ⛔ NÃO pôr ação destrutiva direto aqui: abre menu. */
/* ⚠️ CANTO SUPERIOR ESQUERDO, NÃO O INFERIOR (2026-08-12): em baixo o ⋮ caía na
   COSTURA do painel branco com a fita de estado — um controle atravessando "fato
   de cápsula" lê como artefato. Aqui ele fica sobre a folha limpa e em diagonal
   com o selo de estado (`.mn-tile-modo`, top/right): os dois eixos se separam por
   posição, não por sorte. ⛔ NÃO mover para baixo: painel e fita moram lá. */
/* ✒ A LINHA DO ASSINANTE (ESC-72 · 2026-08-13): entre o cabeçalho do cofre e os
   documentos. ⚠️ É informação de IDENTIDADE, não de ação — fica discreta quando
   está completa e acende quando falta, porque aí é um convite. */
.mn-sg { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: color-mix(in oklab, var(--text) 3%, transparent); color: inherit; text-align: left; cursor: pointer; }
.mn-sg:hover { border-color: color-mix(in oklab, var(--text) 26%, transparent); }
.mn-sg-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in oklab, var(--text) 8%, transparent); opacity: .7; }
.mn-sg-m { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mn-sg-m em { font-style: normal; font-size: .54rem; letter-spacing: .06em; text-transform: uppercase; opacity: .5; }
.mn-sg-m strong { font-size: .74rem; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ O METAL É PALAVRA, NÃO PINTURA (2026-08-13): ouro JÁ é o veredito de conferência
   e bronze É a cor do X-DOC. Pintar o chip com a cor do metal reintroduziria a
   confusão permissão/veredito que o projeto já fechou. Então: todos os níveis usam a
   MESMA tinta neutra, e o que distingue é o NOME. ⛔ NÃO dourar o chip de Ouro. */
.mn-lv { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; letter-spacing: .05em; color: oklch(0.47 0.21 288); }
.theme-dark .mn-lv { color: oklch(0.74 0.14 288); }
.mn-lv svg { display: block; flex: none; }
.mn-sg-m em { display: flex; align-items: center; gap: 5px; }
.mn-sg-m i { font-style: normal; font-size: .56rem; opacity: .55; margin-top: 1px; }
.mn-sg-lv { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 10px; font-size: .62rem; }
.mn-sg-lv b { font-size: .72rem; letter-spacing: .04em; }
.mn-sg-lv span { opacity: .55; }
.mn-sg-go { flex: none; font-size: .56rem; letter-spacing: .04em; opacity: .5; }
/* ⚠️ falta identificação: bronze do X-DOC, tracejado — pendência, NUNCA erro
   vermelho: não ter preenchido ainda não é falha de ninguém. */
.mn-sg.empty { border-style: dashed; border-color: oklch(0.62 0.11 78 / .7); background: oklch(0.62 0.11 78 / .06); }
.mn-sg.empty .mn-sg-ic { background: oklch(0.62 0.11 78 / .18); color: oklch(0.72 0.12 80); opacity: 1; }
.mn-sg.empty .mn-sg-m strong { font-weight: 600; }
/* ✒ O TEMA DO ASSINANTE É VIOLETA (2026-08-13, Tony pediu uma cor de marcação).
   Cada família de sentido tem sua cor — bronze é X-DOC, ouro é veredito, azul é
   corrente, vermelho é não-selado — e IDENTIDADE ganha a sua: violeta.
   ⚠️ Uma cor SÓ para todos os níveis (metal é palavra, nunca pintura).
   ⛔ NÃO usar este violeta fora do vocabulário de identidade/assinatura. */
.mn-sg-dlg { --sgac: oklch(0.47 0.21 288); max-width: 460px; }
.theme-dark .mn-sg-dlg { --sgac: oklch(0.7 0.15 288); }
.mn-sg-dlg .ft-pv-lead { margin-bottom: 4px; }
/* a escada viva: três degraus, preenchidos até o nível do RASCUNHO do formulário */
.mn-sg-steps { display: flex; gap: 6px; margin: 4px 0 8px; }
.mn-sg-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
/* medalha por ganhar = grayscale; alcançada = cor do metal; atual cresce um passo */
.mn-sg-step svg { display: block; filter: grayscale(1); opacity: .38; transition: filter .25s, opacity .25s, transform .25s; }
.mn-sg-step.on svg { filter: none; opacity: 1; }
.mn-sg-step.cur svg { transform: scale(1.14); }
.mn-sg-step i { width: 100%; }
.mn-sg-step i { display: block; height: 4px; border-radius: 999px; background: color-mix(in oklab, var(--text) 14%, transparent); }
.mn-sg-step.on i { background: var(--sgac); }
.mn-sg-step em { font-style: normal; font-size: .54rem; letter-spacing: .07em; text-transform: uppercase; opacity: .4; }
.mn-sg-step.on em { opacity: .7; }
.mn-sg-step.cur em { opacity: 1; color: var(--sgac); font-weight: 700; }
.mn-sg-lv b { color: var(--sgac); }
.mn-sg-dot { flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--sgac); }
.mn-sg-ok { margin-left: auto; color: var(--sgac); font-weight: 900; }
.mn-sg-dlg .mn-sg-i:focus { outline: none; border-color: var(--sgac); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sgac) 20%, transparent); }
.mn-sg-hint.ok { color: oklch(0.72 0.15 150); opacity: 1; }
.mn-sg-sn { flex: 1 1 100%; display: flex; align-items: center; gap: 7px; font-size: .58rem; opacity: .7; cursor: pointer; }
.mn-sg-sn input { accent-color: var(--sgac, oklch(0.72 0.13 295)); }
.mn-sg-i:disabled { opacity: .45; }
input[type="date"].mn-sg-i { color-scheme: dark; }
.mn-sg-hint.bad { color: oklch(0.68 0.16 25); opacity: 1; }
.mn-sg-dlg .mn-btn.go { border-color: var(--sgac); background: var(--sgac); color: #fff; }
.mn-sg-dlg .mn-btn.go:hover { filter: brightness(1.1); }
.mn-sg-sec { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 7px; }
.mn-sg-sl { display: flex; align-items: center; gap: 7px; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.mn-sg-row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.mn-sg-row .mn-sg-f.cep { flex: 1 1 60%; }
.mn-sg-row .mn-sg-f.num { flex: 1 1 28%; }
.mn-sg-hint { flex: 1 1 100%; font-style: normal; font-size: .54rem; opacity: .55; }
.mn-sg-f { display: flex; flex-direction: column; gap: 3px; }
.mn-sg-f > span { font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sgac, oklch(0.47 0.21 288)); opacity: .92; }
.mn-sg-f > span .mn-sg-opt { font-weight: 400; font-style: normal; text-transform: none; letter-spacing: .02em; opacity: .75; }
.mn-sg-i { width: 100%; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--bg-elev); color: inherit; font: inherit; font-size: 16px; }
/* ✒ SELETOR DE PAÍS PRÓPRIO (2026-08-13): o pop-up nativo é janela do SISTEMA —
   abriu translúcido 2× apesar do CSS, e option não aceita bandeira. Fundo LITERAL
   opaco (o estúdio é sempre escuro, seção 4 do CLAUDE.md). ⛔ NÃO voltar a <select>. */
/* ✒ MINHAS ASSINATURAS · as 3 alturas (ESC-76) */
.mn-sigs { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 22px; }
.mn-sigs-alt { display: flex; flex-direction: column; gap: 10px; padding: 13px 13px 14px; border: 1px solid var(--border-soft); border-radius: 13px; background: color-mix(in oklab, var(--text) 3%, transparent); }
.mn-sigs-row { display: flex; gap: 12px; align-items: flex-start; }
.mn-sigs-wide { width: 100%; }
.mn-sigs-wide .mn-sga-l { max-height: none; }
/* a medalha PENDURA no quadrante (Tony, 13/08): a fita nasce no y=0 do SVG e o
   SVG alinha no TETO do frame — overflow do wrapper fica visible para o corpo
   da medalha respirar embaixo sem esticar o quadrante. */
.mn-sigs-med { flex: none; display: grid; place-items: center; align-items: start; width: 64px; height: 64px; border-radius: 15px; background: color-mix(in oklab, var(--text) 6%, transparent); }
.mn-sigs-med svg { display: block; }
.mn-sigs-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mn-sigs-m > strong { font-size: .9rem; letter-spacing: -.01em; }
.mn-sigs-m > p { margin: 0; font-size: .62rem; line-height: 1.55; opacity: .6; text-wrap: pretty; }
/* dispositivos da Bronze: ATUAL em violeta (identidade), PROTEGIDA neutra com
   cadeado, Encerrar no vermelho de ação destrutiva — só nas sessões novas. */
.mn-devl { display: flex; flex-direction: column; }
.mn-dev { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.mn-dev + .mn-dev { border-top: 1px solid color-mix(in oklab, var(--text) 8%, transparent); }
.mn-dev-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mn-dev-m strong { font-size: .76rem; }
.mn-dev-m i { font-style: normal; font-size: .56rem; opacity: .5; }
.mn-dev-b { flex: none; padding: 3px 9px; border-radius: 999px; font-size: .5rem; letter-spacing: .07em; }
.mn-dev-b.cur { background: color-mix(in oklab, oklch(0.47 0.21 288) 16%, transparent); color: oklch(0.42 0.21 288); }
.mn-dev-b.prot { background: color-mix(in oklab, var(--text) 8%, transparent); opacity: .75; }
.mn-dev-mng { align-self: flex-start; margin-top: 8px; font-size: .58rem; letter-spacing: .03em; color: inherit; opacity: .55; text-decoration: none; }
.mn-dev-mng:hover { opacity: .9; text-decoration: underline; }
/* ══ 👑 OUTORGA DE DISPOSITIVO — frame 26 (V11) ═══════════════════════════════════════
   Ficha: `Frames da Fita - Fonte da Verdade.html#f-outorga`. Componentes: outorga-dispositivo.jsx.
   ⚠️ O CARTÃO FRIO **HERDA** o `.ft-tp-rcpt` (a grade `em`/`b`, mono, uma linha por campo) e só
      acrescenta o que falta a ele como BLOCO SOLTO: moldura própria, porque aqui ele não está
      dentro da faixa do dispositivo. ⛔ NÃO redeclarar a grade — herdar é a ordem V11 (R9).
   ⚠️ O valor sobe para 11px: no recibo 9.5px é rodapé de prova, aqui é o DADO que decide se a
      pessoa reconhece a tentativa. ⛔ NÃO nivelar por baixo. */
.out-card { margin-top: 4px; padding: 11px 13px; border: 1px solid color-mix(in oklab, var(--text) 13%, transparent); border-radius: 14px; background: var(--bg-base); font-size: 11px; row-gap: 5px; }
.out-card em { font-size: 9.5px; align-self: center; }
/* 👑 a badge do rei: primeira linha, as duas colunas, discreta — ⛔ não é selo de destaque,
   é uma qualificação de quem está lendo. */
.out-crown { grid-column: 1 / -1; justify-self: start; margin-bottom: 3px; padding: 3px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 600; letter-spacing: .05em; color: var(--text-mute); background: color-mix(in oklab, var(--text) 8%, transparent); white-space: nowrap; }
/* 🔒 o cadeado do IP: alvo de LEITURA, não de toque — `role="img"` + `aria-label` no JSX. */
.out-ip { display: inline-flex; align-items: center; gap: 5px; }
.out-lock { display: inline-flex; color: var(--text-dim); }
.out-left { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* 🧾 o carimbo que ocupa o LUGAR da ação (no-op, ou guarda da regra do REI): texto, ⛔ nunca
   botão travado — botão morto ensina que a ligação entre os aparelhos é frouxa. */
.out-noop { margin: 2px 0 0; padding: 9px 12px; border-radius: 12px; background: color-mix(in oklab, var(--text) 6%, transparent); color: var(--text-mute); font-size: 11px; line-height: 1.5; text-wrap: pretty; }
.out-note { color: var(--text-mute) !important; opacity: 1 !important; }
/* 🏷 OS TRÊS ESTADOS na família de badge que já existia (`.mn-dev-b`): amarela · verde · cinza.
   ⚠️ Cada uma tem par no escuro — a `.cur` e a `.prot` nasceram sem, e um dia isso vai cobrar. */
/* ⚠️ OS TRÊS ESTADOS SERVEM AOS DOIS VOCABULÁRIOS: `.mn-dev-b` (o cartão da altura Bronze) e
   `.dev-badge` (a linha de Configurações da conta, que é A tela de dispositivos). Um seletor
   duplo, ⛔ não duas cópias de cor: badge amarela que envelhece num lado é o R5 na veste. */
.mn-dev-b.pend, .dev-badge.pend { background: color-mix(in oklab, oklch(0.6 0.13 70) 18%, transparent); color: oklch(0.44 0.12 70); }
.mn-dev-b.ok, .dev-badge.ok { background: color-mix(in oklab, oklch(0.5 0.15 150) 16%, transparent); color: oklch(0.4 0.13 150); }
.mn-dev-b.down, .dev-badge.down { background: color-mix(in oklab, var(--text) 9%, transparent); color: var(--text-dim); }
.theme-dark .mn-dev-b.pend, .theme-dark .dev-badge.pend { color: oklch(0.86 0.15 85); }
.theme-dark .mn-dev-b.ok, .theme-dark .dev-badge.ok { color: oklch(0.82 0.15 152); }
/* ⚠️ A LINHA PODE QUEBRAR: badge + linha de estado não cabem sempre em 375px. */
.mn-dev { flex-wrap: wrap; }
.set-row-glyph.devs { color: var(--text-mute); background: color-mix(in oklch, var(--text) 8%, transparent); }
.mn-sigs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mn-sigs-chip { padding: 4px 9px; border: 1px solid var(--border-soft); border-radius: 999px; font-size: .56rem; letter-spacing: .03em; opacity: .8; }
.mn-sigs-none { margin: 0; font-size: .6rem; color: oklch(0.68 0.16 25); opacity: .9; }
.mn-sigs-add { align-self: flex-start; }
/* o caderno de assinaturas (picker e página) */
.mn-sga-l { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; max-height: 46vh; overflow: auto; -webkit-overflow-scrolling: touch; }
.mn-sga { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--border-soft); border-radius: 11px; cursor: pointer; }
.mn-sga:hover { border-color: color-mix(in oklab, var(--text) 30%, transparent); }
.mn-sga.on { border-color: var(--sgac, oklch(0.47 0.21 288)); background: color-mix(in oklab, oklch(0.47 0.21 288) 8%, transparent); }
.mn-sga-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mn-sga-m strong { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-sga-m i { font-style: normal; font-size: .56rem; opacity: .55; }
.mn-sga-k { flex: none; padding: 3px 7px; border-radius: 6px; background: color-mix(in oklab, var(--text) 8%, transparent); font-size: .5rem; letter-spacing: .06em; opacity: .75; }
.mn-sga-ed { flex: none; font-size: .56rem; opacity: .55; cursor: pointer; }
.mn-sga-ed:hover { opacity: 1; }
/* PF | Empresa no editor */
.mn-sg-cvs { display: flex; flex-wrap: wrap; gap: 5px; }
.mn-sg-cv { padding: 7px 11px; border: 1px solid var(--border-soft); border-radius: 999px; background: transparent; color: inherit; font-size: .6rem; letter-spacing: .02em; cursor: pointer; }
.mn-sg-cv:hover { border-color: color-mix(in oklab, currentColor 40%, transparent); }
.mn-sg-cv.none { border-style: dashed; opacity: .8; }
.mn-sg-cv.none.on { border-style: solid; opacity: 1; }
.mn-sg-cv.on { border-color: var(--sgac, oklch(0.47 0.21 288)); background: color-mix(in oklab, var(--sgac, oklch(0.47 0.21 288)) 14%, transparent); font-weight: 700; }
.mn-sg-kseg { display: flex; gap: 6px; margin: 10px 0 2px; }
.mn-sg-kbtn { flex: 1; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: transparent; color: inherit; font-size: .62rem; letter-spacing: .04em; cursor: pointer; }
.mn-sg-kbtn.on { border-color: var(--sgac, oklch(0.47 0.21 288)); color: var(--sgac, oklch(0.47 0.21 288)); font-weight: 700; }
.mn-btn-ic { display: inline-flex; align-items: center; gap: 7px; }
.mn-btn-ic svg { display: block; flex: none; }
.mn-sg-delask { margin: 8px 0 0; font-size: .58rem; opacity: .7; }
.mn-sg-delask b { color: oklch(0.72 0.14 25); cursor: pointer; }
.set-row-glyph.sigs svg { display: block; }
.mn-sg-pw { position: relative; }
.mn-sg-pb { display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer; }
.mn-sg-pb > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-sg-ch { flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .5; }
.mn-flag { flex: none; font-style: normal; font-size: 1.02rem; line-height: 1; }
.mn-sg-pscrim { position: fixed; inset: 0; z-index: 8; }
.mn-sg-pl { color: oklch(0.96 0.005 280); position: absolute; z-index: 9; left: 0; right: 0; top: calc(100% + 4px); display: flex; flex-direction: column; gap: 1px; padding: 4px; border-radius: 10px; border: 1px solid var(--border-soft); background: #141a24; box-shadow: 0 14px 30px rgba(0, 0, 0, .5); max-height: 250px; overflow: auto; -webkit-overflow-scrolling: touch; }
.mn-sg-pq { position: sticky; top: 0; z-index: 2; width: 100%; margin: 0 0 3px; padding: 8px 10px; border: 1px solid color-mix(in oklab, oklch(0.96 0.005 280) 22%, transparent); border-radius: 7px; background: #141a24; color: oklch(0.96 0.005 280); font-size: 16px; }
.mn-sg-pq:focus { outline: none; border-color: var(--sgac, oklch(0.47 0.21 288)); }
.mn-sg-pi { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: oklch(0.96 0.005 280); font: inherit; font-size: .8rem; text-align: left; cursor: pointer; }
.mn-sg-pi:hover { background: color-mix(in oklab, oklch(0.96 0.005 280) 12%, transparent); }
.mn-sg-pi.on { background: color-mix(in oklab, var(--sgac, oklch(0.72 0.13 295)) 14%, transparent); }
.mn-sg-pi .mn-sg-ok { margin-left: auto; }
.mn-sg-i:focus { outline: none; border-color: var(--accent); }
.mn-tile-dots { position: absolute; z-index: 4; left: 4px; top: 4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: rgba(20, 16, 8, .42); cursor: pointer; }
.mn-tile-dots:hover { background: rgba(20, 16, 8, .1); color: rgba(20, 16, 8, .8); }
.mn-tile-dots svg { display: block; }
.mn-tile-menu { position: absolute; z-index: 6; left: 4px; top: 34px; display: flex; flex-direction: column; min-width: 158px; padding: 4px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-elev); box-shadow: 0 8px 22px rgba(20, 16, 8, .22); }
.mn-tile-menu-i { display: block; padding: 8px 10px; border-radius: 7px; font-size: .68rem; letter-spacing: .01em; text-align: left; cursor: pointer; }
.mn-tile-menu-i:hover { background: color-mix(in oklab, var(--text) 8%, transparent); }
.mn-tile-menu-i.del { color: oklch(0.52 0.19 25); }
.theme-dark .mn-tile-menu-i.del { color: oklch(0.78 0.14 25); }
.mn-tile-modo { position: absolute; z-index: 3; top: 7px; right: 7px; display: grid; place-items: center; filter: drop-shadow(0 1px 2px rgba(20, 16, 8, .35)); }
@container (min-width: 760px) { .mn-grid { grid-template-columns: repeat(3, 1fr); } }
.mn-shelf { display: flex; flex-direction: column; min-height: 100%; }
.mn-list { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; padding: 12px 2px 16px; }
.mn-empty { margin: 6px 6px 0; font-size: .84rem; line-height: 1.6; opacity: .55; text-wrap: pretty; }
.mn-sum { display: flex; align-items: center; gap: 6px; }
.mn-sum svg { flex: none; opacity: .5; }
.mn-disc { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: color-mix(in oklab, var(--text) 92%, transparent); color: var(--bg-elev); }
/* 🌱 ESC-107 · o balde "Documentos recebidos" não é gente nem marca — véu dourado do
   X-DOC (mesmo tom das outras 5 superfícies), nunca o quadrado escuro genérico. */
/* 📦 ESC-114 · A CAIXA DE SISTEMA NÃO USA MOLDURA (2026-08-19, Tony: "que o DOC tenha a
   altura exata da foto de perfil, pra mostrar que é uma caixa de sistema diferenciada —
   não é um usuário"). O glifo do X-DOC ocupa os 44px inteiros, sem fundo nem raio: disco
   redondo = gente · placa quadrada = marca (ESC-52) · documento inteiro = caixa do
   sistema. ⛔ NÃO devolver o quadrado de fundo: ele fazia a caixa parecer um avatar. */
.mn-disc.seed { background: none; border-radius: 0; color: oklch(0.45 0.1 72); }
/* 🗎 A CAIXA DE SISTEMA PROJETA SOMBRA (2026-08-19, Tony): o glifo é uma FOLHA DE PAPEL, e
   papel apoiado tem sombra — avatar não. Então a sombra reforça a distinção em vez de ser
   enfeite. Vai no SVG (drop-shadow segue o recorte do papel, inclusive a dobra da ponta);
   ⛔ NÃO usar box-shadow no `span`, que desenharia um retângulo em volta — exatamente o
   quadrado que acabamos de tirar. */
.mn-disc.seed svg { filter: drop-shadow(0 1.5px 2px oklch(0.2 0.02 80 / .28)); transition: filter .18s ease; }
/* no escuro a sombra some no fundo: o que dá relevo é um HALO quente, não preto */
.theme-dark .mn-disc.seed svg { filter: drop-shadow(0 1px 3px oklch(0.62 0.11 78 / .3)); }
.ft-row:hover .mn-disc.seed svg { filter: drop-shadow(0 2.5px 4px oklch(0.2 0.02 80 / .34)); }
.theme-dark .ft-row:hover .mn-disc.seed svg { filter: drop-shadow(0 2px 5px oklch(0.72 0.12 80 / .42)); }
.mn-disc.sm { width: 30px; height: 30px; border-radius: 10px; }
/* 🗎 no cabeçalho a caixa de sistema segue a mesma lei da lista (2026-08-19): o papel ocupa
   a altura INTEIRA do chip, sem moldura nem raio — o quadrado escuro fazia a caixa parecer
   um avatar de 30px com um selo dentro. */
.mn-disc.sm.seed { background: none; border-radius: 0; }
.ft-row:hover .mn-disc.seed { color: oklch(0.56 0.12 76); }
/* ⚠️ ORDEM E ESPECIFICIDADE, o 4º tropeço deste projeto (2026-08-19): esta regra vem
   DEPOIS do `.mn-disc.seed{background:none}` e é hover — ganhava, e a caixa de sistema
   virava um quadrado branco no passe do mouse. O `:not(.seed)` exclui na FONTE em vez de
   pedir outra regra mais forte depois. ⛔ NÃO consertar somando `!important`. */
.ft-row:hover .mn-disc:not(.seed) { background: var(--text); }
.mn-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--text); font: inherit; cursor: pointer; transition: transform .09s ease, border-color .12s; }
.mn-card:hover { border-color: color-mix(in oklab, var(--text) 32%, transparent); }
.mn-card:active { transform: scale(.99); }
.mn-card-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
.mn-card-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mn-card-m strong { font-size: .93rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-card-m span { font-size: .7rem; opacity: .55; }
.mn-card-h { letter-spacing: .04em; opacity: .4 !important; }
.mn-card-go { flex: none; opacity: .35; }
/* ══ A CORRENTE ⛓ — um elo por versão ═══════════════════════════════════════
   Tela intermediária de um documento com mais de uma versão. Cartão por elo,
   ligados pelo DESENHO do elo entre eles: a metáfora do produto (cada selo
   inclui o anterior) vira coisa que se vê, não jargão que se lê.
   ⚠️ O elo é feito de dois anéis de CSS sobrepostos — nada de imagem: ele muda
      de cor com o tema junto do resto.
   ⚠️ O último elo não tem corrente pendurada embaixo (`:last-of-type`), senão a
      corrente pareceria continuar para um elo que não existe. */
.mn-chain { display: flex; flex-direction: column; align-items: stretch; padding: 4px 0 18px; }
.mn-ch-cap { display: flex; align-items: flex-start; gap: 6px; margin: 0 2px 14px; font-size: .62rem; line-height: 1.5; opacity: .5; text-wrap: pretty; }
.mn-ch-cap-ic { flex: none; display: block; margin-top: 1px; color: #007AFF; }
.theme-dark .mn-ch-cap-ic { color: #0A84FF; }
.mn-ch-cap-ic svg { display: block; }
/* ⛓ rodapé da cápsula: a MESMA fita do ladrilho, agora com o hash — aqui a
   corrente se lê elo por elo, e o hash é o que faz cada elo ser aquele elo.
   ⚠️ `min-width: 0` + ellipsis: hash é longo e NÃO se quebra em duas linhas
      (viraria parágrafo de ruído); corta no fim, que é onde ninguém confere. */
.mn-ch-hash { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 5px; height: 18px; padding: 0 10px; background: #E8F1FE; color: #0060DF; font-size: .5rem; letter-spacing: .04em; }
.mn-ch-hash svg { display: block; flex: none; width: 9px; height: 9px; }
.mn-ch-hash em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-weight: 600; }
.mn-ch-hash.draft { background: #FDECEA; color: oklch(0.5 0.19 25); text-transform: uppercase; letter-spacing: .06em; }
.mn-ch-row { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 15px 24px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--bg-elev); color: var(--text); text-align: left; cursor: pointer; overflow: hidden; transition: border-color .16s, transform .16s; }
.mn-ch-row:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--border-soft)); transform: translateY(-1px); }
.mn-ch-row.draft { border-style: dashed; }
/* ⚠️ O AR LATERAL DO ASSET JÁ VEM RECORTADO no viewBox do `mnDocIc` — uma caixa
   quadrada aqui somava respiro em cima de respiro e roubava largura do título
   (2026-08-11). A caixa segue a folha, que é mais alta que larga. */
/* ✨ SOMBRA NO GLIFO DA CORRENTE (2026-08-20, Tony). Vai no SVG, não na caixa: a caixa é
   um retângulo de 44×56 e a folha tem canto dobrado — sombra na caixa desenharia um
   retângulo flutuando atrás de um recorte que não é retangular.
   ⚠️ `drop-shadow` segue o alfa do desenho, então a sombra tem a forma da folha. É o MESMO
      recurso que o kicker da folha do manual já usa (`.xd-kk-ic svg`).
   ⚠️ Curta e para baixo: o elo é um ladrilho de lista, não um objeto elevado — sombra longa
      aqui faria cada elo parecer um cartão solto e a corrente perderia a leitura de fita.
   ⛔ NÃO usar `box-shadow`: pinta a caixa, não o glifo. */
.mn-ch-ic { flex: none; display: grid; place-items: center; width: 44px; height: 56px; }
.mn-ch-ic svg { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .26)); }
/* no escuro a sombra preta desaparece no fundo — o que dá relevo ali é um halo de luz baixa */
.theme-dark .mn-ch-ic svg { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)) drop-shadow(0 0 6px oklch(0.8 0.11 84 / .14)); }
.mn-ch-ic.draft { border-radius: 10px; outline: 1px dashed color-mix(in oklab, var(--text) 26%, transparent); outline-offset: 1px; }
.mn-ch-m { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mn-ch-n { font-size: .92rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.mn-ch-l { font-size: .68rem; opacity: .8; }
.mn-ch-d { font-size: .66rem; opacity: .5; }
/* o elo: dois anéis entrelaçados, centrados entre um cartão e o seguinte.
   ⚠️ AZUL DA CORRENTE, não `--accent` (2026-08-12): os elos herdavam o bronze
      do tema e ficavam falando a língua do X-DOC (o documento) quando o que
      eles desenham é a LIGAÇÃO entre elos. Agora ícone, fita do hash e elo
      usam o mesmo azul — um vocabulário só, de ponta a ponta. */
.mn-ch-link { display: grid; justify-content: center; padding: 3px 0; }
.mn-ch-link i { display: block; width: 11px; height: 17px; border: 2px solid #0060DF; border-radius: 999px; }
.theme-dark .mn-ch-link i { border-color: #0A84FF; }
/* elo PARTIDO: a revisão de baixo não continua a de cima (dado antigo, gravado
   antes da trava do ESC-69). Vermelho do não-selado e anéis afastados — a
   corrente se vê rompida ali. ⚠️ nunca esconder: linhagem torta que parece reta
   é o pior defeito possível num produto de prova. */
/* ⛓ ABRIR A PONTA: ação no pé da corrente, traço pontilhado porque é CONVITE e
   não elo selado — nada aqui foi gravado ainda. Azul da corrente, que é o
   vocabulário de linhagem (bronze é o documento, ouro é veredito). */
/* ⛓ MINI PERFIL DE QUEM TEM A VEZ — no pé da cápsula liberada, abaixo do hash.
   Bronze do X-DOC (é fato de custódia, não linhagem: linhagem é o azul da fita).
   ⚠️ Vencido, esmaece o relógio e engrossa a frase — NUNCA vermelho de erro:
      vencer prazo não é falha, é estado que abre uma ação. */
/* ⚠️ FAIXA HORIZONTAL DE DUAS LINHAS (2026-08-12, Tony: "ficou feia"). Era grade
   de 3 colunas com disco pequeno e o relógio como badge na ponta direita — o
   número ficava solto, longe da frase que ele qualifica, e o disco não ancorava
   nada. Agora: foto ALTA cobrindo as duas linhas (nome em cima, prazo embaixo) e o
   número de volta DENTRO da frase, que é onde se lê. */
/* ⚠️ FAIXA NA BASE, COMO O HASH (2026-08-12, Tony: "ainda espremida"). O miolo da
   cápsula é `display:flex`, então o mini perfil entrava como TERCEIRA COLUNA e
   comprimia o título numa tira de 5 palavras. Agora é absoluta na base — logo
   acima da fita azul do hash — e ocupa a largura inteira. A cápsula reserva o
   espaço com `.held`, senão a faixa cobriria a legenda.
   ⛔ NÃO pôr nada novo no fluxo do miolo: vira coluna e rouba o título. */
.mn-ch-who { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; align-items: center; gap: 13px; padding: 8px 15px; border-top: 1px solid color-mix(in oklab, oklch(0.62 0.11 78) 26%, transparent); background: oklch(0.62 0.11 78 / .07); }
.mn-ch-row.held { padding-bottom: 78px; }
/* ⛓ CIRCULAÇÃO: pilha miúda de rostos na base do elo. ⚠️ Altura FIXA (4 + contador)
   — a lista nunca faz o elo crescer. Cinza neutro de propósito: não é custódia
   (bronze), não é linhagem (azul), não é veredito (ouro) — é registro de envio.
   ⛔ NÃO rótulo de posse: é "quem eu mandei", não "quem tem". */
.mn-ch-recv { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; align-items: center; gap: 7px; padding: 6px 15px; border-top: 1px solid color-mix(in oklab, var(--text) 9%, transparent); }
.mn-ch-row.recv:not(.held) { padding-bottom: 48px; }
.mn-ch-row.recv.held .mn-ch-recv { bottom: 78px; border-bottom: 1px solid color-mix(in oklab, var(--text) 9%, transparent); }
.mn-ch-row.recv.held { padding-bottom: 108px; }
.mn-ch-pile { display: flex; flex: none; }
.mn-ch-av { display: grid; place-items: center; width: 17px; height: 17px; margin-left: -5px; border-radius: 999px; border: 1.5px solid var(--bg-elev); background: oklch(0.62 0.13 var(--h, 250) / .3); color: oklch(0.35 0.1 var(--h, 250)); font-size: .42rem; font-weight: 700; overflow: hidden; }
.mn-ch-av:first-child { margin-left: 0; }
.mn-ch-av.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-ch-av.more { background: color-mix(in oklab, var(--text) 14%, transparent); color: var(--text); font-size: .4rem; }
.theme-dark .mn-ch-av { color: oklch(0.9 0.08 var(--h, 250)); }
.mn-ch-recv em { font-style: normal; font-size: .52rem; letter-spacing: .02em; opacity: .55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⛓ CIRCULAÇÃO · pilha de rostos no pé do miolo da cápsula (ESC-71).
   ⚠️ 4 rostos + contador e ALTURA FIXA: a cápsula não pode crescer com o número de
      pessoas — documento de 50 destinatários tem o mesmo tamanho de um de 2.
   ⚠️ Rostos SOBREPOSTOS (margin negativa): diz "grupo" num relance, e cabe em
      qualquer largura. ⛔ NÃO empilhar em linha reta com gap — estoura no celular.
   ⚠️ Cinza neutro: circulação é registro LOCAL, não prova. Bronze é custódia,
      azul é corrente, ouro é veredito — nada disso se aplica aqui. */
/* ⚠️ FAIXA, NÃO CHIP (2026-08-12, Tony): fato de cápsula se lê em faixa — largura
   inteira, mesmo lugar em toda cápsula, o que permite comparar elos de relance.
   Absoluta na base (o miolo é flex: filho no fluxo viraria coluna e espremeria o
   título, como já aconteceu com o titular). Sobe quando há titular. */
.mn-ch-circ { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-top: 1px solid color-mix(in oklab, var(--text) 8%, transparent); background: color-mix(in oklab, var(--text) 3%, transparent); cursor: pointer; }
.mn-ch-circ:hover { background: color-mix(in oklab, var(--text) 7%, transparent); }
.mn-ch-row.circ { padding-bottom: 60px; }
.mn-ch-row.held.circ { padding-bottom: 120px; }
.mn-ch-row.held .mn-ch-circ { bottom: 78px; }
.mn-disc.xs.more { display: grid; place-items: center; background: color-mix(in oklab, var(--text) 14%, transparent); color: inherit; font-size: .46rem; letter-spacing: 0; }
.mn-ch-circ-f { display: inline-flex; align-items: center; }
.mn-ch-circ-f > * { margin-right: -6px; box-shadow: 0 0 0 1.5px var(--bg-elev); }
.mn-ch-circ-f > *:last-child { margin-right: 0; }
.mn-disc.xs { width: 18px; height: 18px; font-size: .5rem; }
/* ⚠️ O ANEL DIZ O ESTADO (2026-08-12, Tony: "tem que diferenciar visto de
   assinado"). Ciência é "eu vi"; assinatura é "eu concordo e me obrigo" — atos
   juridicamente diferentes, então símbolos diferentes.
   • assinou   → anel OURO (a cor do veredito, e só ela ganha o ✓)
   • ciência   → anel cinza (leu, não se obrigou)
   • sem resposta → sem anel, rosto esmaecido
   ⛔ NÃO dar ✓ a quem só deu ciência: num litígio a lista diria que trinta pessoas
      assinaram quando trinta apenas leram. */
.mn-circ-w { position: relative; display: block; border-radius: 999px; }
.mn-circ-w.st-sig { box-shadow: 0 0 0 2px oklch(0.72 0.14 85); }
.mn-circ-w.st-sig::after { content: "\2713"; position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 9px; height: 9px; border-radius: 999px; background: oklch(0.72 0.14 85); color: #1a1408; font-size: 6px; font-weight: 900; line-height: 1; }
.mn-circ-w.st-ack { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--text) 34%, transparent); }
.mn-circ-w.st-ed { box-shadow: 0 0 0 2px oklch(0.62 0.11 78); }
.mn-circ-w.st-none { opacity: .5; }

/* na folha, o verbo herda o mesmo peso do anel */
.mn-circ-m em.sig { color: oklch(0.52 0.1 82); opacity: 1; font-weight: 600; }
.theme-dark .mn-circ-m em.sig { color: oklch(0.82 0.13 86); }
.mn-circ-m em.none { opacity: .45; }

.mn-ch-circ em { font-style: normal; font-size: .54rem; letter-spacing: .03em; opacity: .62; white-space: nowrap; }
/* a folha de presença */
.mn-circ-l { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow: auto; margin: 4px 0 8px; -webkit-overflow-scrolling: touch; }
.mn-circ-i { display: flex; align-items: center; gap: 10px; padding: 7px 4px; }
.mn-circ-i + .mn-circ-i { border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.mn-circ-m { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mn-circ-m strong { font-size: .78rem; }
/* ⚠️ VISTO ≠ ASSINATURA (ESC-71): assinatura é declaração de vontade — ganha peso,
   ouro do selo e rúbrica. Visto é ciência — tique discreto, sem peso. "Recebeu"
   é ausência de ato: cinza, quase apagado, que é exatamente o que ele é.
   ⛔ NÃO nivelar: sugeriria que alguém se obrigou quando só confirmou que leu. */
.mn-circ-m em { display: flex; align-items: center; gap: 4px; font-style: normal; font-size: .56rem; opacity: .55; }
.mn-act-ic { display: inline-flex; flex: none; }
.mn-act-ic svg { display: block; }
.mn-circ-m em.sig { opacity: 1; font-weight: 650; color: oklch(0.52 0.1 78); letter-spacing: .01em; }
.mn-circ-m em.ack { opacity: .8; color: oklch(0.5 0.06 200); }
.mn-circ-m em.ed { opacity: .85; color: oklch(0.5 0.1 250); }
.mn-circ-m em.none { opacity: .42; }
.theme-dark .mn-circ-m em.sig { color: oklch(0.84 0.12 84); }
.theme-dark .mn-circ-m em.ack { color: oklch(0.78 0.07 200); }
.theme-dark .mn-circ-m em.ed { color: oklch(0.8 0.1 252); }
.mn-ch-who.mine { border-top-color: color-mix(in oklab, oklch(0.58 0.19 25) 22%, transparent); background: oklch(0.58 0.19 25 / .05); }
.mn-ch-who.mine .mn-disc.ini { background: oklch(0.62 0.13 250 / .2); color: oklch(0.45 0.13 250); }
.theme-dark .mn-ch-who.mine .mn-disc.ini { color: oklch(0.86 0.11 250); background: oklch(0.62 0.13 250 / .28); }
.mn-ch-who-m em { white-space: normal; }
.mn-ch-who .mn-disc { flex: none; width: 38px; height: 38px; margin: 0 3px; border-radius: 11px; overflow: hidden; background: color-mix(in oklab, oklch(0.62 0.11 78) 22%, transparent); }
.mn-ch-who .mn-disc.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* sem foto: iniciais na cor da conexão — o MESMO disco da lista de conversas, para
   a pessoa ser reconhecida de relance (disco cinza vazio a faria parecer estranha) */
.mn-ch-who .mn-disc.ini { display: grid; place-items: center; background: oklch(0.62 0.13 var(--h, 32) / .22); color: oklch(0.45 0.13 var(--h, 32)); font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.theme-dark .mn-ch-who .mn-disc.ini { color: oklch(0.86 0.11 var(--h, 32)); background: oklch(0.62 0.13 var(--h, 32) / .3); }
.mn-ch-who-m { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; text-align: left; }
.mn-ch-who-m strong { font-size: .76rem; letter-spacing: -.01em; line-height: 1.35; }
.mn-ch-who-m em { font-style: normal; font-size: .56rem; line-height: 1.4; opacity: .72; }
/* o número de dias, dentro da frase: negrito no tom do X-DOC, sem moldura */
.mn-ch-who-m em b { font-weight: 700; color: oklch(0.48 0.1 74); }
.theme-dark .mn-ch-who-m em b { color: oklch(0.84 0.11 82); }
/* 🌱 ESC-105 · a faixa diz o ENVIO, não a custódia: sem "tem a vez" não há estado de
   prazo correndo/vencido para pintar. `.over` e `.done` saíram com a doutrina. */
.mn-ch-who.sent .mn-ch-who-m em { font-weight: 500; opacity: .82; }
/* ⚠️ AÇÃO DESTRUTIVA NÃO DISPUTA ATENÇÃO (ESC-74): texto pequeno, sem moldura, por
   último. Vermelho só no hover — botão vermelho permanente vira ruído e a pessoa
   para de ler o aviso. */
.mn-ch-drop { display: block; width: 100%; margin: 14px 0 0; padding: 9px; border: 0; border-radius: 10px; background: transparent; color: color-mix(in oklab, var(--text) 52%, transparent); font-size: .6rem; letter-spacing: .04em; cursor: pointer; }
.mn-ch-drop:hover { background: oklch(0.58 0.19 25 / .08); color: oklch(0.55 0.18 25); }
.mn-drop-keep { margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; background: color-mix(in oklab, var(--text) 5%, transparent); font-size: .6rem; line-height: 1.55; opacity: .8; text-wrap: pretty; }
.mn-drop-l { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; font-size: .6rem; letter-spacing: .03em; opacity: .8; }
.mn-drop-i { padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--bg-elev); color: inherit; font-size: 16px; letter-spacing: .01em; }
.mn-drop-i:focus { outline: none; border-color: oklch(0.58 0.19 25 / .7); }
.mn-btn.drop { border-color: oklch(0.58 0.19 25); color: oklch(0.55 0.18 25); }
.mn-btn.drop:not(:disabled):hover { background: oklch(0.58 0.19 25); color: #fff; }
.mn-btn.drop:disabled { opacity: .4; }
/* ⚠️ REMOVER é destrutivo e irreversível: fica por ÚLTIMO, em texto, sem peso de
   botão — ⛔ NÃO competir com as ações normais da corrente. Vermelho só no hover:
   antes disso é só uma saída discreta. */
.mn-ch-del { display: block; width: 100%; margin: 14px 0 2px; padding: 9px; border: 0; border-radius: 10px; background: transparent; color: color-mix(in oklab, var(--text) 55%, transparent); font-size: .6rem; letter-spacing: .04em; cursor: pointer; }
.mn-ch-del:hover { background: oklch(0.58 0.19 25 / .08); color: oklch(0.52 0.18 25); }
.theme-dark .mn-ch-del:hover { color: oklch(0.76 0.15 25); }
/* o alvo, desenhado no diálogo: o risco é apagar o documento ERRADO */
.mn-del-tg { display: flex; align-items: center; gap: 11px; margin: 2px 0 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: color-mix(in oklab, var(--text) 3%, transparent); }
.mn-del-ic { flex: none; display: grid; place-items: center; width: 34px; }
.mn-del-ic svg { width: 100%; height: auto; display: block; }
.mn-del-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mn-del-m strong { font-size: .84rem; line-height: 1.25; }
.mn-del-m em { font-style: normal; font-size: .56rem; opacity: .6; }
/* ⚠️ ESC-74 · remover: ÚLTIMO no pé da corrente, discreto, cor de perigo só no
   hover — é saída de emergência, não caminho. ⛔ NÃO dar destaque de ação
   principal a um ato irreversível. */
.mn-ch-wipe { display: block; width: 100%; margin: 10px 0 0; padding: 9px; border: 0; border-radius: 10px; background: transparent; color: color-mix(in oklab, var(--text) 45%, transparent); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.mn-ch-wipe:hover { background: oklch(0.58 0.19 25 / .09); color: oklch(0.52 0.19 25); }
.theme-dark .mn-ch-wipe:hover { color: oklch(0.76 0.15 25); }
.mn-wipe-l { display: block; margin: 12px 0 5px; font-size: .6rem; opacity: .7; }
.mn-wipe-l b { display: block; margin-top: 2px; font-size: .74rem; opacity: 1; }
/* ⚠️ REMOVER é ação rara e local: texto simples no pé, sem moldura, sem cor de
   perigo no repouso — só no hover. Botão vermelho vistoso convida ao acidente. */
.mn-ch-del { display: block; width: 100%; margin: 14px 0 0; padding: 9px; border: 0; border-radius: 10px; background: transparent; color: var(--text-dim); font-size: .6rem; letter-spacing: .04em; cursor: pointer; }
.mn-ch-del:hover { background: oklch(0.58 0.19 25 / .08); color: oklch(0.52 0.19 25); }
.theme-dark .mn-ch-del:hover { color: oklch(0.74 0.16 25); }
.mn-del-note { margin: 0 0 10px; font-size: .6rem; line-height: 1.55; opacity: .6; text-wrap: pretty; }
.mn-del-l { display: block; margin: 4px 0 5px; font-size: .6rem; opacity: .7; }
.mn-del-l b { color: var(--text); }
/* 🌱 ESC-105: `.mn-ch-open` (abrir ponta) saiu — mandar é semear, pela porta do `+`.
   🐞 E havia um `.theme-dark` ÓRFÃO aqui, grudado neste comentário: o seletor virava
      `.theme-dark .mn-ch-wipe` e o botão remover ficava SEM ESTILO no tema claro.
   ⚠️ ESC-74 · remover: ÚLTIMO no pé da corrente, discreto, cor de perigo só no
   hover — é saída de emergência, não caminho. ⛔ NÃO dar destaque de ação
   principal a um ato irreversível. */
.mn-ch-wipe { display: block; width: 100%; margin: 10px 0 0; padding: 9px; border: 0; border-radius: 10px; background: transparent; color: color-mix(in oklab, var(--text) 45%, transparent); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.mn-ch-wipe:hover { background: oklch(0.58 0.19 25 / .09); color: oklch(0.52 0.19 25); }
.theme-dark .mn-ch-wipe:hover { color: oklch(0.76 0.15 25); }
.mn-wipe-l { display: block; margin: 12px 0 5px; font-size: .6rem; opacity: .7; }
.mn-wipe-l b { display: block; margin-top: 2px; font-size: .74rem; opacity: 1; }
/* lista de conexões do diálogo — rola, porque conexão não cabe em 6 chips */
/* 🌱 ESC-105 · o combinado é OPCIONAL: entra por um link discreto, não por um seletor
   que o autor precisa despachar. ⛔ NÃO dar peso de ação principal — o CTA é mandar. */
.mn-pz-add { display: block; width: 100%; margin: 10px 0 2px; padding: 10px; border: 1px dashed color-mix(in oklab, var(--text) 26%, transparent); border-radius: 10px; background: transparent; color: color-mix(in oklab, var(--text) 62%, transparent); font-size: .62rem; letter-spacing: .04em; cursor: pointer; }
.mn-pz-add:hover { border-color: color-mix(in oklab, var(--text) 44%, transparent); color: var(--text); }
.mn-pz-off { display: block; margin: 8px 0 0; padding: 0; border: 0; background: transparent; color: color-mix(in oklab, var(--text) 52%, transparent); font-size: .58rem; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mn-pz-off:hover { color: var(--text); }
.mn-pick-l { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow: auto; margin: 4px 0 2px; -webkit-overflow-scrolling: touch; }
.mn-pick-c { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.mn-pick-c:hover { border-color: var(--accent); }
.mn-pick-m { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mn-pick-m strong { font-size: .78rem; }
.mn-pick-m em { font-style: normal; font-size: .56rem; opacity: .55; }
/* elo até um RASCUNHO: pendente, não partido — nada foi selado ainda, então não
   há o que "não continuar". Neutro e tracejado. ⛔ NÃO usar o vermelho da fratura. */
.mn-ch-link.pend i { border-color: color-mix(in oklab, var(--text) 28%, transparent); border-style: dashed; }
.mn-ch-link.cut { gap: 5px; }
.mn-ch-link.cut i { border-color: oklch(0.58 0.19 25); border-style: dashed; height: 11px; }
/* ⚠️ a legenda da fratura mora NO ELO (2026-08-12): dentro da cápsula ela caiu
   sobre as faixas de circulação e de vez — as três são absolutas e disputavam a
   mesma base. Aqui há espaço livre, e é onde a fratura de fato acontece. */
.mn-ch-link.cut { flex-direction: row; align-items: center; gap: 4px; display: flex; justify-content: center; }
.mn-ch-link.cut em { font-style: normal; font-size: .52rem; letter-spacing: .03em; color: oklch(0.62 0.17 25); white-space: nowrap; }
.mn-ch-link i + i { margin-top: -6px; }
.mn-chain > *:last-child.mn-ch-link { display: none; }
/* a caixa que FABRICA documento: nome + corpo + publicar */
.mn-comp { position: sticky; bottom: -32px; z-index: 3; flex: none; margin-top: auto; display: flex; flex-direction: column; gap: 8px; margin: 0 -16px -32px; padding: 11px 16px 16px; background: var(--bg-base); border-top: 1px solid var(--border-soft); }
.mn-name { width: 100%; padding: 10px 13px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--text); font: inherit; font-size: .92rem; font-weight: 600; }
.mn-body { width: 100%; min-height: 84px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--text); font: inherit; font-size: .88rem; line-height: 1.6; resize: none; }
.mn-name:focus, .mn-body:focus { outline: none; border-color: var(--accent); }
/* ⚠️ NOME SUGERIDO É VALOR, NÃO DICA (2026-08-11): quando o título vem do próprio
   texto, ele entra no canon ao registrar — então se lê em TINTA CHEIA, com um
   selo dizendo de onde veio. Cinza de placeholder num valor que vai ser SELADO é
   a interface mentindo: o autor só descobria depois, no documento salvo.
   ⛔ NÃO igualar ao cinza do `namePh` — aquele sim é dica de campo vazio.
   ⚠️ Ao FOCAR o campo o texto volta ao cinza: dali em diante é dica do que
      digitar, e tinta cheia pareceria conteúdo que o Backspace não apaga. */
.mn-name-w { position: relative; display: flex; align-items: center; }
/* 🐞 O TEXTO ERA CORTADO ANTES DA BORDA (31/08): os 88px de reserva existiam SEMPRE, mas o selo
   `.mn-name-tag` só aparece com o campo VAZIO — digitando, o autor batia num muro invisível a
   88px do fim. ⚠️ A reserva agora acompanha o selo (`:has`), com um respiro normal sem ele.
   ⛔ NÃO voltar a reservar espaço incondicionalmente para algo condicional. */
.mn-name-w .mn-name { flex: 1; min-width: 0; padding-right: 13px; }
.mn-name-w:has(.mn-name-tag) .mn-name { padding-right: 88px; }
.mn-name.sug::placeholder { color: var(--text); opacity: .92; -webkit-text-fill-color: var(--text); }
.mn-name.sug:focus::placeholder { color: var(--text-dim); opacity: .5; -webkit-text-fill-color: var(--text-dim); }
.mn-name-tag { position: absolute; right: 11px; pointer-events: none; padding: 2px 7px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 16%, transparent); color: color-mix(in oklab, var(--accent) 72%, var(--text)); font-size: .58rem; letter-spacing: .04em; }
.mn-name-w:focus-within .mn-name-tag { opacity: .3; }
/* ══ A CAIXA COM ESPELHO: a formatação se vê enquanto se escreve ═══════════
   `.mn-ed` é a moldura (borda, fundo, cantos). Dentro dela, dois irmãos exatamente
   sobrepostos: o `.md-mirror` pinta o dialeto e o `.mn-body` (texto transparente,
   cursor visível) recebe a digitação.
   ⚠️ A REGRA DOS DOIS É UMA SÓ, de propósito: qualquer diferença de fonte,
      tamanho, entrelinha ou padding faz o espelho quebrar linha em outro ponto e
      o cursor descola da pintura. ⛔ NÃO separar em dois blocos de CSS — a
      próxima mão mexe num e esquece o outro.
   ⚠️ Isso vale também para a regra de 16px do toque (mais abaixo): o espelho
      está na mesma lista. */
.mn-ed { position: relative; width: 100%; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-elev); overflow: hidden; }
.mn-ed:focus-within { border-color: var(--accent); }
.mn-ed .mn-body, .mn-ed .md-mirror { box-sizing: border-box; width: 100%; margin: 0; padding: 11px 13px; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: .88rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: break-word; letter-spacing: normal; word-spacing: normal; font-kerning: none; font-variant-ligatures: none; }
/* ⚠️ `letter-spacing` / `word-spacing` EXPLÍCITOS: o navegador zera essas duas
   em campos de formulário (regra de UA), mas o espelho é uma `div` e HERDA o
   -0.08px da tipografia da gaveta — 5px de deriva por linha, o bastante para o
   clique cair uma letra fora. Kerning e ligaduras desligados pela mesma razão:
   o textarea não as aplica, o espelho aplicaria. ⛔ NÃO remover "porque está
   igual": o valor herdado vem de fora deste bloco e pode mudar sem aviso. */
/* ⚠️ A LARGURA ÚTIL DOS DOIS TEM DE SER A MESMA — E SÓ UMA CORREÇÃO CUIDA
   DISSO (2026-08-11). O textarea é `overflow: auto`: quando o texto passa da
   altura, ele ganha barra própria e PERDE ~16px de largura útil; o espelho é
   `overflow: hidden` e não perde nada. A partir daí os dois quebram linha em
   pontos diferentes e o desencontro CRESCE texto abaixo — o autor clica no
   travessão, o cursor pousa no meio de outra palavra, e copiar devolve trecho
   trocado (bug real: selecionou "p!!rópria largura —" e copiou "ada um na sua
   p!!r"). O clique segue o textarea REAL; os olhos seguem a pintura.
   A correção é o `padding-right` do espelho com `--mn-sb` (medido em JS, logo
   abaixo). ⛔ NÃO somar `scrollbar-gutter: stable` a ela: as duas reservam o
      MESMO espaço e o Chrome conta a calha DUAS vezes no espelho (29px de padding
      contra 13px do campo) — foi assim que este bug nasceu, com duas correções
      empilhadas. Uma só, sempre. */
/* ⚠️ `overflow-wrap` e `word-break` TÊM DE SER IDÊNTICOS nos dois — já estão na
   regra combinada acima. A largura ÚTIL também: quando o campo ganha barra de
   rolagem, ele encolhe e o espelho não — por isso o `padding-right` do espelho é
   corrigido em JS (ver o efeito de `--mn-sb` em minutas.jsx). */
.mn-ed .md-mirror { position: absolute; inset: 0; overflow: hidden; color: var(--text); pointer-events: none; }
/* ⚠️ A BARRA DE ROLAGEM DO TEXTAREA TEM DE EXISTIR NO ESPELHO TAMBÉM
   (2026-08-11). O `<textarea>` ganha barra própria quando o texto passa da
   altura; o espelho é `overflow: hidden` e não ganha. Resultado: 16px a mais de
   largura útil na pintura — as linhas quebravam em pontos DIFERENTES, e o
   deslocamento crescia texto abaixo. O sintoma não parece de layout: o autor
   clicava no travessão, o cursor pousava no meio de outra palavra e a cópia saia
   com trecho trocado (o clique segue o textarea REAL, os olhos seguem a
   pintura). `--mn-sb` é medido em JS e devolve exatamente esse espaço.
   ⛔ NÃO trocar por `scrollbar-gutter: stable`: o Safari só passou a suportar
      isso há pouco, e é justamente o navegador onde o X-DOC é mais usado. */
.mn-ed .md-mirror { padding-right: calc(13px + var(--mn-sb, 0px)); }
.mn-ed .mn-body { position: relative; display: block; min-height: 84px; resize: none; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--text); }
/* ⚠️ o placeholder viria transparente junto com o texto — devolve a cor dele */
.mn-ed .mn-body::placeholder { color: var(--text-dim); -webkit-text-fill-color: var(--text-dim); opacity: 1; }
/* ⚠️ seleção TRANSLÚCIDA: opaca, ela taparia a pintura do espelho e o trecho
   selecionado ficaria em branco */
.mn-ed .mn-body::selection { background: color-mix(in oklab, var(--accent) 32%, transparent); }
/* ══ o dialeto pintado — ⛔ NADA AQUI MUDA MÉTRICA ═══════════════════════
   Negrito de verdade (`font-weight`) e monoespaçada trocam a largura dos glifos;
   tamanho de título troca a altura da linha. Qualquer um faria o espelho quebrar
   linha em outro ponto que o textarea — e o cursor andaria fora da pintura.
   Por isso: negrito FALSO por sombra, itálico por incLINAÇÃO sintetizada (que
   preserva as larguras), código por FUNDO, título por peso falso. */
.md-h-mk { opacity: .28; }
.md-h-b, .md-h-hd { text-shadow: .4px 0 0 currentColor, -.4px 0 0 currentColor; }
/* ⚠️ OS TRÊS NÍVEIS SE DISTINGUEM POR TINTA, NÃO POR TAMANHO (2026-08-11).
   Tamanho real na caixa é impossível: num `<textarea>` a fonte é uma só, e o
   cursor é posicionado pelas métricas DELE — glifo maior no espelho poria o
   traço do cursor atrás das letras. Então a hierarquia se lê pelo PESO e pela
   presença da cor: quanto mais forte, maior o título. Os tamanhos de verdade
   estão a um toque, no "Ver folha". */
.md-h-h1 { color: var(--text); text-shadow: .5px 0 0 currentColor, -.5px 0 0 currentColor; }
.md-h-h2 { color: color-mix(in oklab, var(--text) 90%, var(--accent)); text-shadow: .32px 0 0 currentColor, -.32px 0 0 currentColor; }
.md-h-h3 { color: color-mix(in oklab, var(--text) 76%, var(--accent)); text-shadow: .16px 0 0 currentColor, -.16px 0 0 currentColor; }
/* o marcador do título já diz o nível pela contagem de cerquilhas — fica apagado
   em todos, para a diferença vir do texto e não do sinal */
/* ⚠️ `oblique` SINTETIZADO, NÃO `italic` (2026-08-11): a itálica de verdade é
   outro desenho de fonte, com avanços próprios — mudaria a quebra de linha do
   espelho em relação ao campo. A inclinação preserva as larguras. */
/* ⚠️ itálico por OBLIQUE sintetizada, e a família da página carrega só o romano
   (Geist 400–900, sem eixo itálico) — o navegador inclina o próprio glifo e as
   larguras de avanço ficam idênticas. ⛔ NÃO trocar por `font-style: italic`
   nem carregar a face itálica: face diferente = métrica diferente = espelho
   desencontrado do textarea. */
.md-h-i { font-style: oblique 11deg; }
.md-h-s { text-decoration: line-through; opacity: .7; }
.md-h-c { border-radius: 3px; background: color-mix(in oklab, var(--accent) 16%, transparent); color: color-mix(in oklab, var(--accent) 65%, var(--text)); }
.md-h-lk { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.md-h-dv { color: color-mix(in oklab, var(--accent) 55%, var(--text-dim)); }
/* o filete da citação é `absolute` — fora do fluxo, logo não empurra o texto */
.md-h-q { position: relative; color: var(--text-mute); }
.md-h-q::before { content: ""; position: absolute; left: -7px; top: .18em; bottom: .18em; width: 2px; border-radius: 2px; background: color-mix(in oklab, var(--accent) 65%, transparent); }
/* ⚠️ 16px EM CAMPO DE TOQUE — SENÃO O SAFARI DO iPHONE DÁ ZOOM (2026-08-11).
   O iOS aplica zoom automático ao focar QUALQUER campo com fonte < 16px, e a
   página inteira sai do lugar: o autor tocava para escrever o documento e
   perdia a visão geral da folha. Não é bug de layout, é regra do sistema — a
   única saída honesta é respeitar o mínimo.
   ⛔ NÃO "resolver" com `user-scalable=no` / `maximum-scale=1` no viewport: isso
      tira do usuário o zoom por pinça na página TODA — troca um incômodo por uma
      barreira de acessibilidade (e o iOS 10+ ignora, então nem funciona).
   ⚠️ Escopado em `pointer: coarse`: no desktop a densidade fica como estava.
   ⚠️ Campo NOVO na gaveta nasce coberto pelos seletores genéricos abaixo —
      mantenha-os assim em vez de listar classe a classe. */
@media (pointer: coarse) {
  .set-sheet input[type="text"], .set-sheet input[type="search"], .set-sheet input[type="email"],
  .set-sheet input[type="tel"], .set-sheet input[type="number"], .set-sheet input[type="password"],
  .set-sheet input:not([type]), .set-sheet textarea,
  .mn-name, .mn-seg-i { font-size: 16px; }
  /* ⚠️ O CAMPO E O ESPELHO SOBEM JUNTOS, NA MESMA DECLARAÇÃO (2026-08-11).
     Estavam separados — `.mn-body` na lista genérica acima e `.mn-ed .md-mirror`
     ao lado — e a lista genérica PERDIA em especificidade para `.mn-ed .mn-body`
     (0,2,0) da regra combinada lá acima; media query não soma especificidade.
     Resultado: o espelho ia a 16px e o campo ficava em .88rem — e isso explodia
     em DOIS bugs de uma vez no iPhone: (1) abaixo de 16px o Safari dá ZOOM ao
     focar, (2) com tamanhos diferentes as métricas divergem e o cursor pousa
     longe da pintura, "baralhando" a escrita.
     ⛔ NUNCA declarar tamanho de um sem o outro: eles só funcionam se
        compartilharem TODA métrica. Mesma declaração = impossível divergir.
     ⚠️ Precisa dos DOIS níveis (`.mn-ed .x`) para bater a regra combinada. */
  .mn-ed .mn-body, .mn-ed .md-mirror { font-size: 16px; }
}
/* ══ barra de formatação do X-DOC (MnToolbar) — irmã da barra do take ═══════
   Mesmo vocabulário `.md-tb` da barra do take, para as duas serem a MESMA
   coisa aos olhos de quem usa as duas telas.
   ⚠️ ESCOPADA em `.mn-comp` de propósito: styles.css é carregada em ~52
      páginas, inclusive a do estúdio do take, que tem as PRÓPRIAS regras
      `.md-tb` inline. Sem o escopo, uma folha pisaria na outra dependendo da
      ordem de carga — e a barra do take mudaria sozinha. ⛔ NÃO tirar o
      `.mn-comp` da frente destes seletores.
   ⚠️ DOIS ANDARES É O NORMAL aqui (o estúdio é estreito): a barra quebra ENTRE
      grupos e nunca dentro de um — `H1 H2` numa linha e `H3` na outra separaria
      irmãos que se leem juntos. Por isso cada grupo é um flex que não quebra.
   ⚠️ Alvo de toque 34×32 igual à do take; grude no topo ao rolar o texto longo. */
.mn-comp .md-tb { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 4px; padding: 5px 6px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--bg-elev); position: sticky; top: 0; z-index: 4; }
.mn-comp .md-tb-g { display: flex; flex: none; gap: 2px; }
/* o separador é do GRUPO, não um elemento — assim ele some sozinho quando o
   grupo cai para o começo da segunda linha (filete solto na margem é sujeira) */
.mn-comp .md-tb-g + .md-tb-g { margin-left: 5px; padding-left: 7px; border-left: 1px solid color-mix(in oklab, var(--text) 13%, transparent); }
.mn-comp .md-tb-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 32px; padding: 0 7px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--text-mute); cursor: pointer; transition: background .12s, color .12s; }
.mn-comp .md-tb-btn:hover { background: color-mix(in oklab, var(--text) 10%, transparent); color: var(--text); }
.mn-comp .md-tb-btn:active { transform: translateY(.5px); }
/* ACESO = a linha do cursor JÁ é isto. Sem este estado o autor lê `## ` no texto
   e traduz sozinho — exatamente o que a barra existe para evitar. */
.mn-comp .md-tb-btn.on { background: color-mix(in oklab, var(--accent) 22%, transparent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); color: var(--text); }
.mn-comp .md-tb-t { font-weight: 800; line-height: 1; }
/* ══ SELETOR DE TAMANHO (padrão Gmail) ══════════════════════════════
   Substituiu os botões H1/H2/H3: nome por extenso no gatilho, e cada opção
   desenhada NO SEU TAMANHO dentro do menu — escolhe-se pelo olho.
   ⚠️ O gatilho tem largura fixa: com o rótulo variando ("Normal" → "Enorme") a
      barra inteira reflui e os botões dançam de lugar a cada clique. */
.mn-comp .md-tb-sz { position: relative; flex: none; }
.mn-comp .md-tb-szb { width: 96px; min-width: 0; justify-content: space-between; gap: 4px; padding: 0 8px; font-size: .76rem; font-weight: 600; }
.mn-comp .md-tb-szn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ O MENU VIVE NO `document.body` (portal) e é `fixed`: dentro do estúdio ele
   caia no `overflow: hidden` da tela dedicada, e aí NENHUMA direção servia —
   para baixo cobria a área de escrita inteira (menu de 189px sobre caixa de
   139px), para cima o recorte decepava 41px e "Normal" — a opção que DESFAZ o
   título — ficava 21% visível e inclicável.
   A posição vem do retângulo do gatilho (`place`, em minutas.jsx), preferindo
   abrir PARA CIMA, que é onde não cobre a prosa.
   ⛔ NÃO voltar a `absolute` nem encolher as linhas para caber: 44px é alvo de
      toque mínimo, não folga de layout.
   ⚠️ Fora do `.mn-comp`, o menu NÃO herda o escopo da barra — por isso estes
      seletores são globais e a caixa carrega `.mn-comp` na própria classe. */
.md-tb-menu { position: fixed; z-index: 3000; inset: auto; margin: 0; min-width: 176px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-elev); box-shadow: 0 18px 44px rgba(0,0,0,.42); }
.md-tb-menu .md-tb-mi { display: flex; align-items: center; min-height: 44px; padding: 4px 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font-family: inherit; line-height: 1.15; text-align: left; cursor: pointer; }
.md-tb-menu .md-tb-mi:hover { background: color-mix(in oklab, var(--text) 10%, transparent); }
.md-tb-menu .md-tb-mi.on { background: color-mix(in oklab, var(--accent) 20%, transparent); }
/* ➕ O MENU "INSERIR" (2026-08-31) — nome à esquerda, TOKEN em mono à direita.
   ⚠️ O token não é enfeite: o `.MD` fica à vista de propósito (ficha X-DOC §7.1). A Forja
      devolve markdown, e o menu ENSINA o dialeto em vez de escondê-lo — quem usa duas vezes
      aprende a digitar e para de precisar do menu. ⛔ NÃO trocar por ícone.
   ⚠️ Global como o `.md-tb-menu`: o menu é portal para o `body` e NÃO herda o `.mn-comp` da
      barra. ⛔ NÃO escopar. */
/* 🔗 O POPOVER DE LINK (2026-08-31) — o padrão do Gmail: campos, não dialeto.
   ⚠️ Global como o `.md-tb-menu`: é portal para o `body` e não herda o `.mn-comp`. ⛔ NÃO escopar.
   ⚠️ `font-size: 16px` nos campos NÃO é escolha de tipografia: abaixo disso o iOS DÁ ZOOM ao
      focar o input e desloca a tela inteira — com o popover `fixed`, ele sai do lugar. */
.md-tb-lnk { min-width: 268px; gap: 10px; padding: 14px; }
.md-tb-lkt { margin: 0; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.md-tb-lksel { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-mute); }
.md-tb-lksel b { color: var(--text); font-weight: 600; }
.md-tb-lksel i { font-style: normal; opacity: .65; }
.md-tb-lkf { display: flex; flex-direction: column; gap: 5px; }
.md-tb-lkf > span { font-size: 11.5px; color: var(--text-mute); }
/* ⚠️ 44px, não 40 (ciclo de 31/08): 44 é o alvo mínimo de toque, e estes controles vivem num
   popover à beira da tela, onde o dedo erra mais. ⛔ NÃO reduzir para "caber melhor". */
.md-tb-lkf input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--bg-base); color: var(--text); font-family: inherit; font-size: 16px; }
.md-tb-lkf input:focus { outline: none; border-color: var(--accent); }
/* a prévia do rótulo do QR: o que o leitor vai ler embaixo do quadrado, dito ANTES de inserir.
   ⚠️ O estado `bad` não é enfeite — é a recusa da lista branca aparecendo cedo. */
.md-tb-lkq { margin: -2px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-mute); overflow-wrap: anywhere; }
.md-tb-lkq.hint { opacity: .7; }
.md-tb-lkq.bad { color: oklch(0.62 0.19 26); }
.md-tb-lkn { float: right; margin-left: 10px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; opacity: .7; font-weight: 400; }
.theme-dark .md-tb-lkq.bad { color: oklch(0.74 0.16 28); }
.md-tb-lkb { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.md-tb-lkb button { min-height: 44px; padding: 0 15px; border-radius: 9px; border: 1px solid var(--border-soft); background: none; color: var(--text-mute); font-family: inherit; font-size: 13.5px; cursor: pointer; }
.md-tb-lkb .md-tb-lko { border-color: transparent; background: var(--accent); color: #fff; font-weight: 600; }
.md-tb-lkb .md-tb-lko:disabled { opacity: .4; cursor: default; }
/* 😀 O SELETOR DE EMOJI DENTRO DO EDITOR DE X-DOC (31/08).
   ⚠️ Envelope do PORTAL: a folha do seletor é `absolute; inset:0` e se ancora no ancestral
      POSICIONADO mais próximo — perfeito na fita (a moldura do telefone), destrutivo no
      compositor, onde o ancestral é uma caixa pequena: o `max-height:74%` virava 74% de quase
      nada e a grade saía CORTADA AO MEIO. Aqui o envelope é `fixed`, então a folha volta a
      medir a TELA. ⛔ NÃO mexer no `.ft-asksh-wrap`: ele está certo para o host dele.
   ⚠️ Global, não escopado em `.mn-comp`: é portal para o `body` e não herda o escopo do editor. */
.mn-emo{position:fixed;inset:0;z-index:4000}
.md-tb-insm { min-width: 232px; }
.md-tb-menu .md-tb-insi { justify-content: space-between; gap: 12px; font-size: 14px; }
/* 🎨 o glifo do item: mesmo traço fino da fileira, em coluna fixa para os nomes alinharem.
   ⚠️ `flex:none` + largura fixa — sem isso cada nome começa num x diferente e a lista vira
   escada. ⛔ NÃO deixar o ícone crescer com o texto. */
.md-tb-insi-ic { flex: none; display: grid; place-items: center; width: 20px; opacity: .72; }
.md-tb-insi-ic svg { display: block; }
.md-tb-insn { flex: 1; }
.md-tb-instk { flex: none; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: var(--text-dim); background: color-mix(in oklab, var(--text) 8%, transparent); padding: 3px 7px; border-radius: 6px; white-space: nowrap; }
.mn-comp-b { display: flex; align-items: center; gap: 10px; }
/* ➡️ O "Registrar" ENCOSTA À DIREITA (31/08). ⚠️ Quem empurrava era o `margin-left:auto` do
   contador de palavras, que saiu daqui no mesmo dia — o botão ficou colado no "Descartar",
   dois destinos opostos lado a lado. O empurrão agora é do próprio botão, que é quem sempre
   fecha a linha. ⛔ NÃO devolver a tarefa a um vizinho: o dia em que ele sair, o botão desliza
   de novo e ninguém liga uma coisa à outra. */
/* 🕶 o diálogo do anônimo: parágrafos seguintes mais apertados que o primeiro (é uma explicação
   em três passos, não três blocos soltos), e o aviso do ENVIO em âmbar — ⚠️ âmbar, não vermelho:
   não é erro nem perigo, é um limite do que o produto entrega. ⛔ NÃO usar a cor de falha. */
.mn-dlg .mn-dlg-p2 { margin-top: 8px; }
.mn-dlg-warn { margin: 13px 0 0; padding: 9px 11px; border-radius: 9px; border: 1px solid color-mix(in oklab, oklch(0.72 0.14 75) 40%, transparent); background: color-mix(in oklab, oklch(0.72 0.14 75) 11%, transparent); font-size: .78rem; line-height: 1.5; color: oklch(0.82 0.09 78); text-wrap: pretty; }
.mn-comp-b .mn-btn.go { margin-left: auto; }
.mn-cnt { margin-left: auto; font-size: .68rem; opacity: .42; }
.mn-lnk { background: none; border: 0; padding: 4px 2px; color: var(--text); opacity: .6; font: inherit; font-size: .74rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mn-lnk:hover { opacity: 1; }
.mn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--border-soft); background: transparent; color: var(--text); font: inherit; font-size: .82rem; cursor: pointer; }
.mn-btn:hover { border-color: color-mix(in oklab, var(--text) 40%, transparent); }
/* 👁 A VARIANTE CINZA (01/09): fundo sólido discreto, para o "Ver folha" ler como BOTÃO sem
   competir com o "Registrar", que é o ato irreversível e o único preenchido com o acento.
   ⚠️ `aria-pressed` pinta um pouco mais forte quando a prévia está aberta — o botão é um
   ALTERNADOR, e alternador tem de dizer em que estado está. ⛔ NÃO usar o acento aqui: dois
   botões com a mesma cor na mesma linha desfazem a hierarquia entre olhar e selar. */
.mn-btn.ghost { border-color: transparent; background: color-mix(in oklab, var(--text) 9%, transparent); color: var(--text); font-weight: 500; }
.mn-btn.ghost:hover { background: color-mix(in oklab, var(--text) 15%, transparent); border-color: transparent; }
.mn-btn.ghost[aria-pressed="true"] { background: color-mix(in oklab, var(--text) 17%, transparent); }
.mn-btn.go { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.mn-btn.go:hover { filter: brightness(1.08); }
/* 🔗 o elo do "Registrar": discreto por decisão — ver o comentário no minutas.jsx.
   ⚠️ `flex:none` para o glifo nunca ser espremido quando o rótulo é longo em outro idioma. */
/* 🖥 O CANTO DO CABEÇALHO NO COMPOSITOR: tela cheia no largo, X no estreito (31/08).
   ⚠️ Os DOIS botões existem no DOM e o CSS escolhe — ⛔ não decidir isto em JS aqui: o
      `matchMedia` de 750px já vive na `MinutaShelf`, e um segundo limiar em JS divergiria do
      primeiro no dia em que alguém mudasse um só.
   ⚠️ Abaixo de 750px a gaveta JÁ ocupa a tela: "expandir" não expandiria nada, e ali o X é o
      único jeito de fechar a gaveta inteira (o "‹" só volta um nível). ⛔ NÃO tirar o X do
      estreito. */
/* 📋 o campo do bloco de copiar é TEXTAREA — multilinha por definição.
   ⚠️ `font-family` mono e `white-space: pre`: o autor tem de VER a indentação que colou, porque
      é ela que vai para o documento. ⛔ NÃO usar fonte de texto aqui.
   ⚠️ `resize: vertical` e nada de altura fixa grande: o pop-up é `fixed` e cresce para cima ou
      para baixo pelo `placeAt` — caixa alta demais nasceria fora da tela no telefone. */
.md-tb-lkta { width: 100%; box-sizing: border-box; min-height: 96px; max-height: 40vh; padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--bg-base); color: var(--text); font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; line-height: 1.55; resize: vertical; }
.md-tb-lkta:focus { outline: none; border-color: var(--accent); }
/* 📤 O PAINEL DE ENCAMINHAR DO BALDE ANÔNIMO (03/09).
   ⚠️ Ele OCUPA o lugar do painel de estado ("Registrado só neste aparelho"), então herda a
      altura dele — ⛔ não dar altura própria: o ladrilho é um grid e um painel mais alto que o
      vizinho desalinha a fileira inteira.
   ⚠️ `span role="button"`, ⛔ NUNCA `<button>`: o ladrilho já é um botão e aninhar é HTML
      inválido (mesmo contrato do ESC-139 e do menu do ladrilho). */
.mn-tile-fwd { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 10px; border: 1px solid color-mix(in oklab, var(--accent) 42%, transparent); border-radius: 9px; background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.mn-tile-fwd:hover { background: color-mix(in oklab, var(--accent) 20%, transparent); border-color: color-mix(in oklab, var(--accent) 62%, transparent); }
.mn-tile-fwd em { font-style: normal; font-size: .74rem; font-weight: 640; letter-spacing: .01em; }
/* 📮 o pop-up: portal para o `body`, porque o ladrilho vive dentro de `overflow` (lição do
   menu do `+`, 11/08 — folha `fixed` ali era decepada). */
.mn-fwd-w { position: fixed; inset: 0; z-index: 4200; display: grid; place-items: center; padding: 18px; background: rgba(6,10,20,.62); backdrop-filter: blur(3px); }
.mn-fwd { width: 100%; max-width: 372px; max-height: 82vh; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 14px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--bg-elev); box-shadow: 0 20px 60px -20px rgba(0,0,0,.6); }
.mn-fwd-t { margin: 0; font-size: 1rem; font-weight: 680; color: var(--text); }
.mn-fwd-d { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--text-mute); text-wrap: pretty; }
.mn-fwd-all { align-self: flex-start; padding: 4px 0; border: 0; background: none; color: var(--accent); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.mn-fwd-l { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 0 -4px; padding: 0 4px; }
/* ⚠️ 48px de alvo: é lista de TOQUE e cada erro aqui manda um documento para a pessoa errada.
   ⛔ NÃO apertar para caber mais contatos na tela. */
.mn-fwd-c { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border: 1px solid transparent; border-radius: 10px; background: none; color: inherit; text-align: left; cursor: pointer; }
.mn-fwd-c:hover { background: color-mix(in oklab, var(--text) 6%, transparent); }
.mn-fwd-c.on { border-color: color-mix(in oklab, var(--accent) 50%, transparent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.mn-fwd-f { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; overflow: hidden; font-size: 12px; font-weight: 700; color: #fff; background: oklch(0.62 0.15 var(--h, 32)); }
.mn-fwd-f img { width: 100%; height: 100%; object-fit: cover; }
.mn-fwd-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mn-fwd-n b { font-size: .88rem; font-weight: 620; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ O @handle É DESAMBIGUADOR, NÃO METADADO (03/09, achado na verificação): estava em
   `--text-dim` (2.98:1, abaixo de AA) — e o nome TRUNCA nesta lista ("Caio Nogueira de
   Albuquerque…"), então dois contatos de prefixo parecido só se distinguem pelo handle.
   🔑 A incoerência que me condenou: o comentário dos 48px, três linhas acima, nomeia o risco
      ("cada erro aqui manda um documento para a pessoa errada") — e o campo que mitiga esse
      risco estava no tom mais fraco do diálogo. ⛔ Não se pode declarar um risco e enfraquecer
      a informação que o evita.
   ⚠️ `--text-mute` (6.21:1) já está NESTE diálogo, no aviso — ⛔ sem token novo, e ⛔ sem mexer
      no `--text-dim` global: ele serve dezenas de lugares onde 2.98 basta porque o texto é
      REDUNDANTE. Aqui não é: é o único jeito de saber para quem vai. */
.mn-fwd-n i { font-size: .68rem; font-style: normal; color: var(--text-mute); }
.mn-fwd-k { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; color: var(--accent); }
.mn-fwd-none { margin: 6px 0; font-size: .78rem; color: var(--text-dim); }
/* ⚠️ ALVO DE TOQUE NO RODAPÉ DO DIÁLOGO (03/09): o `.mn-lnk` do projeto é ação de TEXTO
   terciária e nasce com 23px de altura — aceitável numa fileira de composição, pequeno demais
   num modal de telefone, ao lado de um primário de 36px e logo abaixo de uma lista cujos alvos
   são de 48px. ⛔ NÃO mexer no `.mn-lnk` global: ele serve dezenas de lugares onde 23px está
   certo. O alvo cresce só AQUI, por escopo. */
.mn-fwd-b .mn-lnk { min-height: 44px; padding: 0 12px; }
.mn-fwd-b { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 4px; border-top: 1px solid var(--border-soft); }
/* ✅ o recibo é efêmero e discreto — ⛔ nada de diálogo de sucesso: quem acabou de encaminhar
   sabe o que fez, e modal ali atrapalha quem vai encaminhar o próximo. */
.mn-fwd-ok { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 4300; margin: 0; padding: 9px 15px; border-radius: 99px; background: color-mix(in oklab, var(--accent) 88%, #000); color: #fff; font-size: .76rem; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); animation: mnFwdOk .2s ease; }
@keyframes mnFwdOk { from { opacity: 0; transform: translate(-50%, 6px); } }
.mn-hd-full { display: none; }
@media (min-width: 750px) { .mn-hd-full { display: inline-flex; } .mn-hd-x { display: none; } }
.mn-hd-full[aria-pressed="true"] { color: var(--accent); }
.mn-btn-ic { flex: none; opacity: .82; margin-left: -2px; }
.mn-btn:disabled { opacity: .35; cursor: default; filter: none; }
.mn-dlg-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* ESC-61 · O ESTADO DE CIRCULAÇÃO — o seletor do ATO de registrar (vai sob o
   hash, por isso vive no diálogo de registro e não numa preferência).
   Duas leituras, símbolo + mancha, iguais ao ícone do arquivo: LACRADO é tinta
   cheia com cadeado dourado; ABERTO é folha clara com lápis dourado.
   ⚠️ NUNCA trocar o cadeado pelo disco de conferência: cadeado é PERMISSÃO
   (escolha do autor, sob o hash); disco é VEREDITO (apurado por quem confere). */
.mn-mode { --xdoc: oklch(0.72 0.13 85); display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.mn-mode-l { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; opacity: .5; }
.mn-mode-o { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border-soft); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.mn-mode-o:hover { border-color: color-mix(in oklab, var(--text) 32%, transparent); }
.mn-mode-o.on { border-color: color-mix(in oklab, var(--text) 55%, transparent); background: color-mix(in oklab, var(--text) 5%, transparent); }
.mn-mode-ic { flex: none; display: grid; place-items: center; width: 30px; height: 34px; border-radius: 4px; border: 1px solid color-mix(in oklab, var(--text) 22%, transparent); color: color-mix(in oklab, var(--text) 50%, transparent); }
.mn-mode-o.lacrado.on .mn-mode-ic { background: var(--text); border-color: var(--text); color: var(--xdoc); }
.mn-mode-o.aberto.on .mn-mode-ic { background: var(--bg-elev); border-color: var(--text); color: var(--xdoc); }
.mn-mode-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mn-mode-m strong { font-size: .86rem; font-weight: 600; }
.mn-mode-m em { font-style: normal; font-size: .68rem; line-height: 1.45; opacity: .6; text-wrap: pretty; }
/* quem pode continuar a corrente: declaração do ato (`segue:` sob o hash) */
.mn-seg { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.mn-seg-l { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; opacity: .5; }
.mn-seg-i { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-soft); background: transparent; color: var(--text); font: inherit; font-size: .8rem; }
.mn-seg-i:focus { outline: none; border-color: color-mix(in oklab, var(--text) 45%, transparent); }
.mn-seg-w { display: flex; flex-wrap: wrap; gap: 6px; }
.mn-seg-c { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-soft); background: transparent; color: var(--text); font: inherit; font-size: .66rem; cursor: pointer; opacity: .7; }
.mn-seg-c:hover { opacity: 1; }
.mn-seg-c.on { border-color: var(--text); background: color-mix(in oklab, var(--text) 8%, transparent); opacity: 1; font-weight: 600; }
/* ESC-69 · aviso do mutex: fato de custódia, no bronze do X-DOC. ⚠️ nunca vermelho
   de erro — a ponta estar com o outro não é falha, é a vez dele. */
.mn-held { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 0; padding: 9px 11px; border-radius: 10px; border: 1px dashed oklch(0.62 0.11 78 / .7); background: oklch(0.62 0.11 78 / .07); font-size: .62rem; line-height: 1.5; text-wrap: pretty; }
.mn-held strong { display: block; margin-bottom: 2px; font-size: .68rem; letter-spacing: .02em; }
.mn-seg-note { margin: 0; font-size: .62rem; line-height: 1.55; opacity: .5; text-wrap: pretty; }
/* ESC-63 · prazo da custódia: mesma família visual da sucessão (as duas são
   declarações do mesmo ato, sob o mesmo hash) — só um degrau abaixo. */
/* RIGOR DA ASSINATURA · lista vertical do diálogo de registrar */
/* ✍️ ESC-98 · o interruptor "assinar agora" no passo de rigor: peça de decisão, não campo —
   marca de conferido + explicação do que muda no envio. Discreto: a decisão principal do passo
   é o METAL, e este é o complemento que já vem certo por padrão. */
.mn-rig-me{display:flex;align-items:center;gap:11px;width:100%;margin:2px 0 4px;padding:11px 13px;border:1px solid var(--border-soft);border-radius:14px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .14s,background .14s}
.mn-rig-me.on{border-color:color-mix(in oklab,var(--accent) 46%,transparent);background:color-mix(in oklab,var(--accent) 7%,transparent)}
.mn-rig-me-c{flex:none;display:grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--border);border-radius:6px;color:#fff}
.mn-rig-me.on .mn-rig-me-c{border-color:var(--accent);background:var(--accent)}
.mn-rig-me-m{display:flex;flex-direction:column;gap:2px;min-width:0}
.mn-rig-me-m strong{font-size:13.5px;font-weight:650;letter-spacing:-.01em}
.mn-rig-me-m em{font-style:normal;font-size:11px;line-height:1.45;color:var(--text-dim)}
.mn-rig-l { display: flex; flex-direction: column; gap: 6px; }
.mn-rig-c { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: 11px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mn-rig-c:hover { border-color: color-mix(in oklab, var(--text) 30%, transparent); }
.mn-rig-c.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); }
.mn-rig-n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in oklab, var(--text) 8%, transparent); font-size: .62rem; font-weight: 700; }
.mn-rig-c.on .mn-rig-n { background: var(--accent); color: #1a1408; }
/* quando o chip carrega ÍCONE (olho/medalha), nada de fundo — a medalha já é a cor */
/* o nível exigido dentro do botão "Ler e assinar" — medalha + metal, separados do
   verbo por um ponto de respiro. ⚠️ o kicker RECADO nomeia a MENSAGEM; a
   exigência é do documento e mora no ATO. */
/* o kicker do frame fala a EXIGÊNCIA quando há documento: medalha + metal.
   ⚠️ sem margem negativa: o pill centra por flex — hack de margem foi o que
   desalinhou a cápsula. */
.ft-tp-tag { display: inline-flex; align-items: center; justify-content: center; }
.ft-tag-lv { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.ft-tag-lv svg { display: block; flex: none; }
/* ✒ pane do OURO na cerimônia (ESC-76): coluna, cartão empilhado, recusa declarada */
.ms-bar-m.legal { display: flex; flex-direction: column; gap: 9px; align-items: stretch; text-align: left; }
.ms-bar-m.legal > strong { font-size: .82rem; }
.ms-bar-m.legal > em { font-style: normal; font-size: .6rem; line-height: 1.55; opacity: .6; }
.ms-legal-box { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid color-mix(in oklab, currentColor 20%, transparent); border-radius: 10px; font-size: .72rem; }
.ms-legal-box b { font-size: .84rem; letter-spacing: -.01em; }
.ms-legal-box > span { opacity: .85; }
.ms-legal-box i { font-style: normal; font-size: .62rem; opacity: .6; }
.ms-bar-m.legal .mn-sga-l { max-height: 220px; }
.ms-legal-b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-legal-b .ms-go { flex: 1 1 auto; }
.ms-legal-x { padding: 9px 14px; border: 1px solid color-mix(in oklab, currentColor 32%, transparent); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .66rem; cursor: pointer; }
.ms-legal-x:hover { border-color: currentColor; }
.ms-legal-no { margin-top: 2px; padding: 9px 11px; border: 1px dashed color-mix(in oklab, currentColor 28%, transparent); border-radius: 9px; background: transparent; color: inherit; font: inherit; font-size: .6rem; line-height: 1.55; opacity: .75; cursor: pointer; text-align: left; }
.ms-legal-no:hover { opacity: 1; }
.ms-imm .mn-sg-dlg { --sgac: oklch(0.7 0.15 288); }
.ms-imm .mn-sg-dlg .mn-btn { background: transparent; color: inherit; border: 1px solid color-mix(in oklab, currentColor 36%, transparent); }
.ms-imm .mn-sg-dlg .mn-btn:hover { border-color: currentColor; }
.ms-imm .mn-sg-dlg .mn-btn.go, .ms-imm .mn-sg-dlg .mn-btn.go:hover { background: oklch(0.55 0.19 288); border-color: oklch(0.55 0.19 288); color: #fff; }
.mn-rig-n.ic, .mn-rig-c.on .mn-rig-n.ic { width: 26px; height: 26px; background: transparent; color: inherit; }
.mn-rig-n.ic svg { display: block; }
.mn-rig-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mn-rig-m strong { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: .76rem; letter-spacing: -.01em; }
.mn-rig-m strong .sug { font-style: normal; font-weight: 400; font-size: .5rem; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px dashed color-mix(in oklab, var(--accent) 60%, transparent); color: var(--accent); }
.mn-rig-m > em { font-style: normal; font-size: .6rem; line-height: 1.45; opacity: .55; text-wrap: pretty; }
.mn-pz { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; padding-top: 11px; border-top: 1px dashed color-mix(in oklab, var(--text) 12%, transparent); }
/* ESC-64 · campo de sucessão recusando apelido: aviso, não erro fatal — quem
   digitou um @ ainda vai corrigir. ⚠️ não usar vermelho de destruição. */
.mn-seg-i.bad { border-color: oklch(0.62 0.14 45); background: oklch(0.62 0.14 45 / .06); }
/* o estado impresso no selo, e a linha do INSTRUMENTO (as duas partes
   assinaram o MESMO teor). ⚠️ main é derivado a cada leitura, nunca gravado. */
.mn-seal .mn-modo { letter-spacing: .05em; }
/* ESC-63 · prazo/retomada no selo: fato de custódia, em bronze do X-DOC — nunca
   verde (veredito de conferência) nem vermelho (não é erro, é estado). */
.mn-seal .mn-prazo { letter-spacing: .04em; color: oklch(0.5 0.1 72); }
.mn-seal .mn-main { margin-top: 4px; font-weight: 600; letter-spacing: .06em; color: oklch(0.5 0.1 72); }
/* devolver: ação de CUSTÓDIA, em bronze do X-DOC — nunca o verde do selo,
   que é veredito de conferência */
.mn-btn.back, .mn-imm .mn-btn.back { border-color: oklch(0.62 0.11 78); color: oklch(0.45 0.1 72); font-weight: 600; }
.mn-btn.back:hover { background: oklch(0.62 0.11 78 / .12); }
/* 🌱 ESC-105: "Retomar a edição" (`.mn-btn.take`) saiu — não há caneta a retomar,
   cada livro tem o seu escrevente e o autor nunca a perdeu. ⛔ NÃO ressuscitar. */
/* cartão do documento: estado ao lado do kicker; instrumento fechado em ouro */
.ft-doc-modo { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; letter-spacing: .1em; opacity: .75; }
.ft-doc-modo svg, .ms-pick-modo svg { display: block; }
.ft-doc-modo.aberto, .ms-pick-modo.aberto { color: oklch(0.62 0.12 80); opacity: 1; }
.ft-doc.open { border-color: oklch(0.64 0.12 80 / .45); }
/* ESC-66 · prazo vencido: o cartão avisa com o traço, não com alarme. ⚠️ NUNCA
   vermelho de erro — vencer prazo não é falha de ninguém, é estado que abre uma
   ação (o autor pode retomar). Traçado, como o botão de retomar na folha. */
/* ⛓ CLIPE: o cartão do X-DOC no compositor — mesmo objeto do chat, um degrau
   menor, com o × de tirar. Herda TUDO de `.ft-doc` (moldura, kicker, tipografia)
   e só aperta o espaço e o ícone. ⚠️ fica sobre o dock, então a largura é a da
   caixa de texto, nunca a da bolha. */
.ft-doc.clip { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 8px; padding: 8px 8px 8px 10px; text-align: left; cursor: default; }
.ft-doc.clip .ft-doc-ic { flex: none; width: 40px; }
.ft-doc.clip .ft-doc-ic svg { width: 100%; height: auto; display: block; }
.ft-doc.clip .ft-doc-m { flex: 1; min-width: 0; gap: 1px; }
.ft-doc.clip .ft-doc-m strong { font-size: .82rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ft-doc.clip .ft-doc-m .mono { font-size: .56rem; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-doc.clip .xd-k { font-size: .54rem; }
.ft-doc-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: inherit; opacity: .55; cursor: pointer; }
.ft-doc-x:hover { opacity: 1; background: color-mix(in oklab, currentColor 10%, transparent); }
.ft-doc-x svg { display: block; }
/* removido do cofre: o cartão continua legível (o teor está na conversa) mas perde
   o destaque — não pede mais nada de ninguém. ⚠️ nunca vermelho: apagar a própria
   cópia não é erro nem perda de prova. */
.ft-doc.wiped { opacity: .72; }
.ft-doc.wiped .ft-doc-ic { filter: grayscale(1); opacity: .8; }
.ft-doc.pz-over { border-style: dashed; border-color: oklch(0.62 0.11 78 / .75); }
.ft-doc.main { border-color: oklch(0.68 0.12 82 / .55); }
/* ⚠️ O ÍCONE DO ARQUIVO NÃO RECEBE COR DE INTERFACE (ESC-61): ele carrega a
   PERMISSÃO (cadeado/lápis dourado sobre folha preta/branca), nunca o veredito
   nem o verbo. Quem pinta o estado é a BORDA do cartão e a linha de ação. */
.ft-doc.main .ft-doc-st { color: oklch(0.5 0.1 72); font-weight: 600; }
.theme-dark .ft-doc.main .ft-doc-st { color: oklch(0.8 0.12 84); }
.ms-pick-modo { display: inline-flex; align-items: center; gap: 4px; font-size: .6rem; letter-spacing: .06em; opacity: .6; }
/* a revisão que CONTINUA um elo recebido — a corrente atravessa autores */
.mn-file-cont { font-size: .6rem; letter-spacing: .04em; font-weight: 600; color: oklch(0.58 0.11 76); }
/* A FOLHA — creme dentro do escuro. A PROSA vem de minuta-doc.css
   (.minuta-doc): aqui só mapeamos os --md-* e o frontispício/selo. */
.mn-paper { container-type: inline-size; --md-ink: #1b1a17; --md-dim: #7c7568; --md-line: #ddd5c6; --md-size: 17px;
  background: #fff; color: var(--md-ink); padding: 24px 14px 30px 13px; }
.mn-paper-prev { margin-top: 8px; border-radius: 4px; }
/* frontispício: marca, título em versalete, filete duplo fino */
/* RASCUNHO = folha em branco (decisão de produto, 2026-08-08): enquanto não
   publicou, nada do frontispício é verdade — não há selo, autor impresso nem
   revisão. O nome vive no campo do compositor, como no editor de texto; a
   folha só ganha frontispício quando VIRA documento (MinutaPaper). */
/* ESC-51 · TIMBRE: a marca de quem assina, no alto da folha. Na folha ela é
   imagem do papel; no compositor é um slot tocável (chrome do app). */
.mn-tb { margin: 0 0 16px; text-align: center; }
.mn-tb-w { font-family: "EB Garamond", Georgia, serif; font-variant: small-caps; font-weight: 500; font-size: 15px; letter-spacing: .34em; color: var(--md-ink, currentColor); }
.mn-tb-row .mn-tb-w { font-size: 13px; letter-spacing: .26em; }
.mn-tb.lock { display: flex; align-items: center; justify-content: center; gap: 11px; }
.mn-tb-seal { width: 34px; height: 34px; border-radius: 6px; object-fit: contain; }
.mn-tb-row .mn-tb-seal { width: 26px; height: 26px; }
.mn-tb img { max-width: 190px; max-height: 62px; object-fit: contain; }
.mn-tb-row { display: flex; align-items: center; gap: 11px; }
.mn-tb-slot { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 116px; min-height: 46px; padding: 7px 13px; border-radius: 10px; border: 1px dashed var(--border-soft); background: transparent; color: var(--text); font: inherit; font-size: .7rem; cursor: pointer; }
.mn-tb-slot { cursor: default; }
.mn-tb-none { opacity: .5; }
.mn-tb-row.has .mn-tb-slot { border-style: solid; padding: 5px 9px; background: var(--bg-elev); }
.mn-tb-slot img { max-width: 132px; max-height: 40px; object-fit: contain; }
.mn-tb-m { flex: 1; min-width: 0; display: flex; gap: 12px; font-size: .62rem; line-height: 1.5; opacity: .5; }
.mn-tb-m em { font-style: normal; }
.mn-tb-m button { padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mn-tb-m button:hover { opacity: 1; color: var(--accent); }
.mn-hd { margin: 0 0 28px; text-align: center; }
.mn-kick { margin: 0 0 10px; font-family: "EB Garamond", Georgia, serif; font-size: .8rem; font-variant: small-caps; letter-spacing: .3em; color: var(--md-dim); text-align: center; }
.mn-dn { max-width: 94%; margin: 0 auto 12px; font-family: "EB Garamond", "Iowan Old Style", Georgia, serif; font-size: 1.58rem; line-height: 1.24; font-weight: 500; font-variant: small-caps; letter-spacing: .05em; text-align: center; text-wrap: balance; color: var(--md-ink); }
.mn-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; margin: 0; padding-top: 11px; border-top: 1px solid var(--md-line); font-family: "EB Garamond", Georgia, serif; font-size: .82rem; font-variant: small-caps; letter-spacing: .1em; text-align: center; color: var(--md-dim); }
.mn-meta b { color: var(--md-ink); font-weight: 600; }
.mn-st { display: block; margin: 4px 0 0; font-family: "EB Garamond", Georgia, serif; font-size: .78rem; font-variant: small-caps; letter-spacing: .14em; color: var(--md-dim); text-align: center; }
/* ESC-59 · a linha de REGISTRO: autoria, data, revisão e estado moram no PÉ,
   com o selo — são metadado de cartório, não frontispício. O topo é do TIPO. */
.mn-reg { margin: 0 0 17px; font-size: .66rem; line-height: 1.65; letter-spacing: .02em; color: var(--md-dim); }
.mn-reg b { display: block; font-weight: 600; color: var(--md-ink); }
/* ESC-61 · mini-perfil do emissor: placa quadrada (marca é pessoa jurídica,
   ESC-52) + nome clicável para a x-bio. O link é conveniência, não prova. */
.mn-reg .mn-reg-p { display: flex; align-items: center; gap: 11px; }
.mn-reg .mn-reg-face { display: block; flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1px solid var(--md-line, rgba(27,26,23,.14)); }
.mn-reg .mn-reg-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mn-reg .mn-reg-nm { display: block; font-weight: 600; color: var(--md-ink); }
.mn-reg .mn-reg-det { display: block; font-weight: 400; font-style: normal; color: var(--md-dim); }
.mn-reg-p a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in oklab, currentColor 35%, transparent); }
.mn-reg-p a:hover { border-bottom-color: currentColor; }

/* selo: o hash é técnico — aqui o mono é certo, em caixa discreta */
.mn-seal { margin: 34px 0 0; padding-top: 14px; border-top: 1px solid var(--md-line); display: flex; flex-direction: column; gap: 5px; text-align: left; }
.mn-seal em { font-family: "EB Garamond", Georgia, serif; font-style: normal; font-size: .8rem; font-variant: small-caps; letter-spacing: .14em; color: var(--md-dim); }
/* ESC-55 · o selo ganha endereço: hash à esquerda, QR à direita. O QR
   leva ao registro público do hash — existência no tempo, nunca o teor. */
.mn-seal { display: flex; gap: 22px; align-items: flex-start; }
.mn-seal-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mn-seal-q { flex: none; width: 92px; text-align: center; text-decoration: none; color: var(--md-dim); }
.mn-seal-q svg { display: block; width: 92px; height: 92px; border-radius: 3px; }
.mn-seal-q .mono { display: block; margin-top: 5px; font-size: .54rem; line-height: 1.4; letter-spacing: .04em; }
.mn-seal-q:hover .mono { color: var(--md-ink); }
@media (max-width: 460px) { .mn-seal { gap: 14px; } .mn-seal-q, .mn-seal-q svg { width: 74px; } .mn-seal-q svg { height: 74px; } }
.mn-salt { display: block; }
.mn-salt b { letter-spacing: .14em; font-weight: 600; color: var(--md-ink); }
.mn-seal code { font-size: .66rem; line-height: 1.75; word-break: break-all; letter-spacing: .01em; color: var(--md-ink); }
.mn-seal span { font-size: .6rem; letter-spacing: .04em; color: var(--md-dim); }
.mn-imm .mn-acts, .mn-imm .mn-renote { box-sizing: border-box; max-width: min(100%, var(--md-measure, 640px)); margin-left: auto; margin-right: auto; }
.mn-imm .mn-btn { border-color: #d9d3c6; color: #1b1a17; }
.mn-imm .mn-btn.go { border-color: #1b1a17; background: #1b1a17; color: #fff; }
.mn-imm .mn-renote { color: #7c7568; }
.mn-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.mn-read .mn-btn { border-color: #d9d3c6; color: #1b1a17; }
.mn-read .mn-btn.go { border-color: #1b1a17; background: #1b1a17; color: #fff; }
.mn-renote { margin: 12px 0 26px; font-size: .66rem; line-height: 1.6; color: #7c7568; text-wrap: pretty; }
/* 🌱 ESC-106 · a nota vira PORTA para a corrente quando é o único caminho para
   continuar editando — reset de botão para ler igual ao texto, dourar no hover
   é o mesmo vocabulário de affordance do resto do X-DOC. */
button.mn-renote.link { display: block; width: 100%; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
button.mn-renote.link:hover { color: oklch(0.5 0.1 74); text-decoration: underline; text-underline-offset: 2px; }

/* modo IMERSÃO da minuta: a folha ocupa a tela inteira, X flutuante e
   barra de rolagem fina (desktop). Ler documento não divide atenção. */
.mn-imm { position: fixed; inset: 0; z-index: 1200; width: 100vw; height: 100vh; box-sizing: border-box; background: #fff; display: flex; flex-direction: column; overflow-x: hidden; animation: mnImmIn .16s ease-out; }
@keyframes mnImmIn { from { opacity: 0; transform: translateY(8px); } }
.mn-imm-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mn-imm .mn-paper { box-sizing: border-box; width: 100%; max-width: 800px; margin: 0 auto; padding: 30px 20px 60px 22px; }
@media (min-width: 860px) { .mn-imm .mn-paper { padding: 52px 0 80px; } }
/* MEDIDA de leitura: nenhum bloco passa de ~72 caracteres, mesmo com a folha
   em 800px — linha longa demais faz o olho perder o retorno. */
.mn-imm .minuta-doc { --md-size: 18px; --md-measure: 640px; }
.mn-imm .mn-paper { --md-measure: 640px; }
/* ⚠️ A COLUNA DA IMERSÃO É UMA SÓ, E QUEM A DEFINE É O CONTAINER (2026-08-11).
   Duas tentativas erradas antes desta, nesta ordem:
   1. `margin-left/right: auto` em cada filho + `max-width` por bloco: com
      larguras diferentes, cada bloco CENTRAVA por conta própria — o h1, mais
      largo, centrava em outra posição e saía desalinhado do texto.
   2. `display: grid` no container: alinhou, mas item de grid **NÃO COLAPSA
      MARGEM** — todo espaço vertical passou a SOMAR (parágrafo 18+12.6 = 31px
      onde deviam ser 18), e a folha ficou cheia de vãos.
   Agora: fluxo normal (margens colapsam como em qualquer texto) e a coluna vem
   do `padding-inline` do container — o máximo entre a goteira e a sobra dos
   lados. A folha continua larga; a máncha, centrada.
   ⛔ NÃO centrar bloco por bloco com `auto`, nem pôr grid/flex aqui.
   ⚠️ 3ª correção (2026-08-11): a centragem NÃO pode sair de `calc((100% - medida)
      / 2)` no padding. Porcentagem de padding resolve contra o CONTAINER, mas o
      `max-width` limita o ELEMENTO — os dois brigam: em tela larga o cálculo
      pedia 460px de respiro de cada lado numa folha de 800, e a máncha era
      esmagada a ~230px, quebrando "recomenda-\nção" no meio da palavra. A folha
      é dimensionada pela MEDIDA (`--md-measure` + goteiras) e centrada por
      `margin-inline: auto`; o padding é fixo. Previsível em qualquer largura. */
.mn-imm .minuta-doc, .mn-imm .mn-paper.take-prose { max-width: min(800px, calc(var(--md-measure) + 2 * var(--_gut, 2.2rem))); margin-inline: auto; padding-inline: var(--_gut, 2.2rem); }
.mn-imm .minuta-doc > *, .mn-imm .mn-paper.take-prose > * { box-sizing: border-box; min-width: 0; max-width: 100%; }
.mn-imm .mn-hd, .mn-imm .mn-seal { box-sizing: border-box; max-width: min(100%, var(--md-measure)); margin-left: auto; margin-right: auto; }
.mn-imm .minuta-doc hr { max-width: 190px; }
.mn-imm-x { position: fixed; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #ddd7c9; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); color: #1b1a17; cursor: pointer; }
/* na cerimônia não existe barra — o nome flutua sobre a folha, espelhando o ×
   do outro canto. ⚠️ max-width deixa o × sempre alcançável em tela estreita. */
.ms-imm-n { position: fixed; top: 14px; left: 16px; z-index: 2; max-width: calc(100% - 86px); margin: 0; padding: 7px 13px; border-radius: 999px; border: 1px solid #ddd7c9; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); font-family: "EB Garamond", Georgia, serif; font-size: .9rem; font-weight: 500; color: #3a352c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-imm-x:hover { background: #1b1a17; border-color: #1b1a17; color: #fff; }
.mn-scroll { scrollbar-width: thin; scrollbar-color: #c9c2b2 transparent; }
.mn-scroll::-webkit-scrollbar { width: 9px; }
.mn-scroll::-webkit-scrollbar-track { background: transparent; }
.mn-scroll::-webkit-scrollbar-thumb { background: #cfc8b8; border-radius: 99px; border: 2.5px solid #fff; }
.mn-scroll::-webkit-scrollbar-thumb:hover { background: #a89f8b; }

/* ═══ ESC-45 V1b · ASSINAR A MINUTA ═══════════════════════════════
   Clipe no compositor, cartão do documento na bolha, qualificação
   das partes no composer da estante e a CERIMÔNIA (ler até o fim +
   "Li e assino" + código de 6 dígitos). A folha continua vindo de
   minuta-doc.css — aqui é só o chrome do ato. */
/* qualificação das partes no composer da estante */
.mn-cp-t { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; border-radius: 10px; border: 1px dashed var(--border-soft); background: transparent; color: var(--text); font: inherit; font-size: .68rem; text-align: left; cursor: pointer; }
.mn-cp-t:hover { border-color: color-mix(in oklab, var(--text) 35%, transparent); }
.mn-cp-t svg { flex: none; opacity: .55; transition: transform .15s; }
.mn-cp-t em { margin-left: auto; font-style: normal; font-size: .62rem; opacity: .55; }
.mn-cp-t.ok em { color: oklch(0.62 0.13 150); opacity: 1; }
.mn-cp { display: flex; flex-direction: column; gap: 11px; padding: 11px 11px 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-elev); }
.mn-cp-f { display: flex; flex-direction: column; gap: 6px; }
.mn-cp-l { font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; opacity: .55; }
.mn-cp-f input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--bg-base); color: var(--text); font: inherit; font-size: .8rem; }
.mn-cp-f input:focus { outline: none; border-color: var(--accent); }
.mn-cp-row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 6px; }
/* botão da carteira no campo do contratante — discreto: é atalho, não ação principal */
.mn-cp-me { margin-left: auto; padding: 2px 8px; border: 1px dashed color-mix(in oklab, var(--accent) 60%, transparent); border-radius: 999px; background: transparent; color: var(--accent); font-size: .54rem; letter-spacing: .03em; cursor: pointer; }
.mn-cp-me:hover { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.mn-cp-l { display: flex; align-items: center; gap: 8px; }
.mn-cp-note { margin: 0; font-size: .56rem; letter-spacing: .05em; text-transform: uppercase; opacity: .4; }
.mn-cp-miss { margin: -2px 2px 0; font-size: .64rem; color: var(--accent); }
/* ESC-50 · FORJA DE DOCUMENTO — o botão brilhante abaixo da caixa de
   texto e o painel do fluxo BYOAI (tipo → matéria → prompt → colar).
   Chrome próprio (.fd*) porque a Forja do take mora no estúdio escuro;
   aqui o painel pertence à gaveta e herda os tokens dela. */
.mn-forja { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 14%, transparent), color-mix(in oklab, var(--accent) 6%, transparent)); color: var(--text); font: inherit; cursor: pointer; box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 40%, transparent); animation: mnForjaGlow 2.8s ease-in-out infinite; transition: transform .09s; }
.mn-forja:hover { border-color: var(--accent); }
.mn-forja:active { transform: scale(.985); }
.mn-forja b { font-size: .86rem; font-weight: 650; letter-spacing: .01em; }
.mn-forja em { font-style: normal; font-size: .64rem; opacity: .6; }
@keyframes mnForjaGlow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 32%, transparent); } 50% { box-shadow: 0 0 16px 2px color-mix(in oklab, var(--accent) 26%, transparent); } }
@media (prefers-reduced-motion: reduce) { .mn-forja { animation: none; } }
.fd { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; background: var(--bg-base); color: var(--text); animation: fdIn .2s ease-out; }
@keyframes fdIn { from { opacity: 0; transform: translateY(10px); } }
.fd-bar { flex: none; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 800px; margin: 0 auto; box-sizing: border-box; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; border-bottom: 1px solid var(--border-soft); }
.fd-bar strong { flex: 1; text-align: center; font-size: .84rem; font-weight: 600; letter-spacing: .02em; }
.fd-back { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 4px; border: 0; background: none; color: inherit; font: inherit; font-size: .76rem; opacity: .7; cursor: pointer; }
.fd-back:hover { opacity: 1; }
.fd-step { flex: none; width: 34px; text-align: right; font-size: .6rem; opacity: .45; }
.fd-scroll { flex: 1; min-height: 0; width: 100%; overflow: auto; }
.fd-scroll > div { max-width: 800px; margin: 0 auto; padding: 20px 16px 26px; }
.fd-scroll h2 { margin: 0 0 4px; font-size: 1.12rem; font-weight: 650; letter-spacing: -.01em; }
.fd-lead { margin: 0 0 18px; font-size: .78rem; line-height: 1.5; opacity: .6; text-wrap: pretty; }
.fd-cards { display: flex; flex-direction: column; gap: 10px; }
.fd-card { display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: left; padding: 15px 15px 16px; border-radius: 14px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--text); font: inherit; cursor: pointer; transition: transform .09s, border-color .12s; }
.fd-card:hover { border-color: color-mix(in oklab, var(--accent) 55%, transparent); }
.fd-card:active { transform: scale(.99); }
.fd-card-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in oklab, var(--accent) 12%, transparent); font-size: 19px; }
.fd-card-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fd-card-m strong { font-size: .92rem; font-weight: 650; }
.fd-card-m span { font-size: .74rem; line-height: 1.5; opacity: .62; text-wrap: pretty; }
.fd-card-m em { margin-top: 2px; font-style: normal; font-size: .56rem; letter-spacing: .16em; opacity: .45; }
.fd-soon { margin: 16px 2px 0; font-size: .62rem; line-height: 1.6; opacity: .42; }
.fd-build, .fd-res { display: flex; flex-direction: column; gap: 15px; }
.fd-f { display: flex; flex-direction: column; gap: 6px; }
.fd-f-l { display: flex; align-items: baseline; gap: 8px; font-size: .76rem; font-weight: 600; }
.fd-f-l em { font-style: normal; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; opacity: .4; font-weight: 400; }
.fd-f input, .fd-f textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--text); font: inherit; font-size: .82rem; line-height: 1.55; resize: vertical; }
.fd-f input:focus, .fd-f textarea:focus { outline: none; border-color: var(--accent); }
.fd-f-h { font-style: normal; font-size: .66rem; line-height: 1.5; opacity: .45; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fd-chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border-soft); background: transparent; color: var(--text); font: inherit; font-size: .74rem; cursor: pointer; }
.fd-chip.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); font-weight: 600; }
.fd-note, .fd-warn { margin: 4px 0 0; font-size: .62rem; line-height: 1.65; opacity: .45; }
.fd-prompt { max-height: 300px; overflow: auto; margin: 0; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-elev); font-size: .66rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.fd-copyfail { margin: -6px 0 0; font-size: .64rem; line-height: 1.55; color: var(--accent); }
.fd-row { display: flex; align-items: center; gap: 12px; }
.fd-ias { display: flex; gap: 8px; margin-left: auto; }
.fd-ia { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-elev); }
.fd-ia:hover { border-color: var(--accent); }
.fd-ia img { width: 19px; height: 19px; }
.fd-foot { flex: none; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 800px; margin: 0 auto; box-sizing: border-box; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border-soft); background: var(--bg-base); }
.fd-foot:empty { display: none; }
.fd-foot-i { flex: 1; font-size: .62rem; line-height: 1.5; opacity: .5; }
.fd-go { flex: none; padding: 11px 18px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer; transition: transform .09s, opacity .15s; }
.fd-go:hover:not(:disabled) { transform: translateY(-1px); }
.fd-go:disabled { opacity: .3; cursor: default; }
.fd-ghost { flex: 1; text-align: left; padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; font-size: .74rem; opacity: .6; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fd-ghost:hover { opacity: 1; }

.mn-types { display: flex; flex-wrap: wrap; gap: 5px; }
.mn-type { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-soft); background: transparent; color: var(--text); font: inherit; font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; opacity: .7; transition: opacity .12s, border-color .12s; }
.mn-type:hover { opacity: 1; border-color: color-mix(in oklab, var(--text) 35%, transparent); }
.mn-type.on { background: var(--text); border-color: var(--text); color: var(--bg-base, #fff); opacity: 1; }
/* o clipe e a barra de anexo do compositor */
.ft-cbtn.ft-attb svg { display: block; }
.ft-docbar .ft-qbar-m em { letter-spacing: .1em; }
/* cartão do documento DENTRO da bolha — a bolha é tecla (ESC-42), o
   cartão para a propagação e abre a folha/cerimônia */
/* 📄 A CÁPSULA É NEUTRA E SE OPÕE AO TEMA (2026-08-16, Tony corrigiu: "não seria melhor
   inverter?"). Era `currentColor 7%` — azul na bolha que sai, cinza na que chega: a mesma peça
   mudando de família de cor conforme a direção. Minha 1ª versão clareava sempre, e aí ela quase
   desaparecia dentro da bolha CINZA da mensagem recebida.
   A regra certa: o véu se opõe ao TEMA, não à bolha — no claro ESCURECE, no escuro CLAREIA.
   Como as duas bolhas de um tema estão do mesmo lado da luz, um só valor serve para ambas.
   E a doutrina que isso firma:
     · o FUNDO pertence à BOLHA — véu neutro, que se opõe ao tema e sobrevive a paletas novas;
     · o CONTORNO e o GLIFO pertencem à CATEGORIA — âmbar no X-DOC, azul no valor.
   ⚠️ O contorno é 1px: área mínima, não briga com a bolha, e dá o reconhecimento PERIFÉRICO —
      rolando a conversa você vê "aqui tem documento" antes de ler o rótulo (2026-08-16, Tony
      viu a cápsula de VALOR ao lado, que já tinha borda azul: as duas irmãs seguiam leis
      diferentes). ⛔ NÃO deixar as duas cápsulas com tratamentos distintos de novo.
   ⛔ NÃO voltar a pintar com `currentColor`: a cápsula passaria a mentir sobre categoria. */
/* ⚠️ padding esquerdo menor (2026-08-17, Tony): o selo é a âncora visual do cartão e ganha
   presença encostando mais na borda; o texto mantém o respiro pelo `gap`. */
/* ✳ A CÁPSULA É CINZA E DOURA NO TOQUE (2026-08-17, Tony): em repouso ela não compete com o
   kicker nem com a linha de estado; no hover o ouro do X-DOC responde e diz "este bloco é o
   documento". ⛔ NÃO deixar dourado em repouso: conversa com vários documentos virava parede de
   ouro, e aí a cor deixa de destacar. */
.ft-doc { display: flex; align-items: flex-start; gap: 11px; width: 100%; min-width: 220px; box-sizing: border-box; margin: 2px 0 4px; padding: 9px 11px 10px 7px; border: 1px solid var(--cap-bd, color-mix(in oklab, oklch(0.62 0.11 78) 55%, transparent)); border-radius: 12px; background: var(--cap-bg, oklch(0 0 0 / .07)); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .09s ease, border-color .12s; }
.theme-dark .ft-doc { --cap-bg: oklch(1 0 0 / .1); --cap-bd: color-mix(in oklab, oklch(0.8 0.11 84) 52%, transparent); }
.ft-doc{--cap-bd:oklch(0 0 0 / .13)}
.theme-dark .ft-doc{--cap-bd:oklch(1 0 0 / .16)}
.ft-doc:active { transform: scale(.985); }
.ft-doc-ic { flex: none; display: grid; place-items: center; }
/* o anexo é ARQUIVO a 96px (ESC-61): folha e texto centrados um no outro */
.ft-doc { align-items: center; gap: 12px; }
/* ⏳ OS TRÊS PONTOS ANDAM (2026-08-17, Tony): pendência parada parece estado final. A reticência
   crescendo diz "isto ainda está acontecendo" sem uma palavra a mais.
   ⚠️ CSS puro com `steps()`: um timer em JS por cartão custaria render a cada 400ms numa lista
   longa. ⚠️ Os pontos vêm de `::after` — o texto do kicker fica limpo para leitor de tela e para
   busca. ⛔ NÃO animar o kicker de estado FINAL (assinado, recusa): ali não há espera.
   ⚠️ `prefers-reduced-motion`: quem pediu menos movimento recebe os três pontos parados. */
/* ⏳ PENDÊNCIA QUE SE VÊ (2026-08-17, Tony): spinner dourado girando + reticência crescendo.
   ⚠️ Os pontos são três <b> com OPACIDADE animada — animar `content` em keyframe é não-padrão
   (parou de rodar quando o ::after virou inline-block) e ainda refluía o cartão a cada 400ms.
   Com elementos fixos o espaço já está reservado. ⛔ NÃO voltar a animar `content`.
   ⚠️ Dourado é a cor do metal do selo: mesma pendência, mesma família. */
/* ⚠️ O KICKER PENDENTE É TODO DOURADO (2026-08-17, Tony): o texto ficava no cinza do tipo enquanto
   spinner e pontos eram ouro — três cores para um fato só. Pendência de assinatura é assunto de
   METAL, e o metal pinta a linha inteira. ⛔ NÃO deixar o rótulo em cinza neutro aqui. */
/* ⚠️ contraste do ouro por tema (2026-08-17, Tony): no claro o dourado desce (mais escuro, mais
   legível sobre a bolha clara); no escuro ele sobe. Mesma matiz, luminosidade oposta ao fundo. */
.xd-k.wait{display:inline-flex;align-items:center;gap:5px;opacity:1}
/* ⚠️ spinner e pontos herdam do kicker (`currentColor`): um só lugar define o ouro do estado. */
.xd-sp{flex:none;width:9px;height:9px;border:1.5px solid color-mix(in oklab,currentColor 32%,transparent);border-top-color:currentColor;border-radius:50%;animation:xdSpin .85s linear infinite}
@keyframes xdSpin{to{transform:rotate(360deg)}}
.xd-d{display:inline-flex;gap:1.5px;font-style:normal;margin-left:-2px}
.xd-d b{width:2.5px;height:2.5px;border-radius:50%;background:currentColor;opacity:.18;animation:xdDot 1.4s ease-in-out infinite}
.xd-d b:nth-child(2){animation-delay:.18s}
.xd-d b:nth-child(3){animation-delay:.36s}
@keyframes xdDot{0%,70%,100%{opacity:.18}25%{opacity:1}}
@media(prefers-reduced-motion:reduce){.xd-sp,.xd-d b{animation:none}.xd-d b{opacity:.5}}
}
.ft-doc-m em.xd-k { color: oklch(0.52 0.09 76); opacity: .95; }
/* ⚠️ TODO KICKER DE X-DOC É DOURADO (2026-08-17, Tony: "algumas situações não usam a cor"):
   "RECUSA REGISTRADA" e "X-DOC ASSINADO" saíam no cinza-oliva antigo enquanto os pendentes eram
   ouro — a mesma etiqueta em duas cores conforme o desfecho. O ouro é do X-DOC, não do estado;
   quem conta o desfecho é a linha de estado (verde assinado, apagado recusa). */
/* ⚠️ O KICKER NASCE NO CINZA DO METADADO E DOURA NO HOVER (2026-08-17, Tony): em repouso a
   etiqueta é informação de leitura, igual a "faltam você e Bia Duarte"; o ouro entra junto com a
   borda quando a pessoa aponta o cartão. ⛔ NÃO deixar ouro em repouso: numa conversa com vários
   documentos o olho não sabia mais onde olhar. */
.ft-doc-m em.xd-k{color:oklch(0.34 0.01 270);opacity:1;transition:color .14s}
.theme-dark .ft-doc-m em.xd-k{color:oklch(0.9 0.008 270)}
.ft-doc:hover .ft-doc-m em.xd-k{color:oklch(0.62 0.11 78)}
.theme-dark .ft-doc:hover .ft-doc-m em.xd-k{color:oklch(0.8 0.11 84)}
/* 🐞 a regra ANTIGA do dourado sobrou aqui e vencia por ordem (2026-08-17): no tema escuro o
   kicker nascia ouro em vez do cinza-claro do metadado. ⛔ NÃO deixar resíduo de cor abaixo da
   regra nova — a última ganha com a mesma especificidade. */
.ms-pick-i .mn-card-ic { width: auto; height: auto; background: none; border-radius: 0; }
/* ⚠️ A CÁPSULA PENDENTE USA A BORDA DA BOLHA (2026-08-17, Tony): o azul do acento competia com a
   linha de estado (vermelha) e com o kicker — três cores num cartão que já tem selo colorido. E
   azul aqui é a cor de VALOR neste produto, não de documento.
   Doutrina que isso fecha: em repouso a cápsula é NEUTRA; o único evento de cor é o hover, que
   doura. ⛔ NÃO pintar a borda por estado: quem conta o estado é a linha de estado. */
.ft-doc.todo { border-color: var(--cap-bd); }
/* ESC-60: convite não usa a cor da obrigação — festa não é intimação */
.ft-doc.rsvp { border-color: oklch(0.62 0.16 320 / .5); }
.ft-doc.rsvp .ft-doc-st { color: oklch(0.55 0.16 320); }
.ft-doc.signed { border-color: oklch(0.62 0.13 150 / .42); }
/* 🐞 O HOVER PERDIA PARA AS CLASSES DE ESTADO (2026-08-17, Tony: "o mouse está em cima e não
   doura"). `.ft-doc:hover` estava ANTES de `.todo`/`.signed`/`.rsvp` no arquivo e, com a mesma
   especificidade, a última regra ganha — a borda voltava à cor do estado.
   ⚠️ Agora vem DEPOIS e com peso próprio (`.ft-doc.ft-doc:hover`): vence qualquer estado sem
   depender da ordem de quem escrever a seguir. ⛔ NÃO mover para cima: quem depende de ordem
   quebra na próxima regra que alguém acrescentar. */
/* ⚠️ O TOM É O DA FAMÍLIA DO ANEXO (2026-08-17, Tony): `oklch(0.62 0.11 78)` — o mesmo dos discos
   do menu `+`. Um só ouro para X-DOC em todo lugar. ⛔ NÃO inventar hex paralelo. */
/* ⚠️ o hover DOURA a borda e ACENDE o véu (2026-08-17, Tony): a cápsula "levanta" um pouco do
   fundo da bolha, o que reforça que ela é um objeto dentro do recado — não parte do texto.
   ⛔ NÃO exagerar o contraste: a folha do documento é preta e o véu forte a deixaria flutuando. */
.ft-doc.ft-doc:hover { border-color: oklch(0.62 0.11 78); --cap-bg: oklch(0 0 0 / .15); }
.theme-dark .ft-doc.ft-doc:hover { border-color: oklch(0.8 0.11 84); --cap-bg: oklch(1 0 0 / .19); }
.ft-doc-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ft-doc-m em { font-style: normal; font-size: .54rem; letter-spacing: .16em; text-transform: uppercase; opacity: .55; }
/* 📄 O NOME PODE OCUPAR 3 LINHAS (2026-08-17, Tony): é a única coisa que diz QUAL documento, e
   o que distingue papéis da mesma corrente mora no fim do nome ("— direção de arte", "— versão
   aprovada pelo cliente"). Cortar em 2 linhas sumia justamente com a parte que diferencia.
   ⚠️ As outras linhas do cartão são curtas (palavras · versão · estado), então o espaço existe.
   ⛔ NÃO liberar sem limite: nome de 8 linhas afogaria a linha de estado, que é a que pede ação. */
.ft-doc-m strong { font-size: .86rem; line-height: 1.3; font-weight: 650; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* 📄 A LINHA DE METADADO É LEGÍVEL, NÃO SUSSURRO (2026-08-17, Tony): ela carrega quem assinou e
   quem falta (ESC-98) e o tamanho da leitura (ESC-100) — dado que a pessoa usa para DECIDIR, e
   `opacity: .55` sobre cinza deixava isso quase invisível. Tom próprio: quase preto no claro,
   quase branco no escuro. ⛔ NÃO voltar a apagar por opacidade — se merece estar no cartão,
   merece ser lido. */
.ft-doc-m > span.mono { font-size: .62rem; opacity: 1; color: oklch(0.34 0.01 270); }
.theme-dark .ft-doc-m > span.mono { color: oklch(0.9 0.008 270); }
.ft-doc-st { margin-top: 3px; font-size: .66rem; }
/* 🔴 O QUE ESPERA ATO DE VOCÊ É VERMELHO (2026-08-17, Tony): "aguarda sua leitura", "aguarda a
   sua assinatura" — é pendência sua, e pendência não pinta da mesma cor de tudo que é tocável.
   O azul do acento dizia só "isto é um link"; o vermelho diz "isto está esperando".
   ⚠️ Vale para `.todo` (o que falta), NUNCA para `.signed` nem para `.rsvp`: ato cumprido é
   verde, e convite tem cor própria — festa não é intimação (ESC-60). ⛔ NÃO estender o vermelho
   a estado neutro: se tudo é urgente, nada é. */
/* ⚠️ mesmo vermelho do "Ignorar" do frame (`.ft-tp-b.no`) — o app já tem UM vermelho de
   decisão, e pendência usa esse, não um tom novo. ⛔ NÃO introduzir vermelho paralelo. */
/* 🐞 O VERMELHO SAÍA LAVADO (2026-08-17, Tony: "ainda muito soft"): a linha de estado tem a
   classe `mono`, e `.ft-doc-m > span.mono` a deixa com `opacity: .55` — a cor estava certa, a
   transparência é que comia a força. ⛔ NÃO tentar compensar escurecendo a cor: o problema não
   era o tom, e um vermelho quase preto pareceria erro de sistema.
   ⚠️ Opacidade 1 e peso 700: pendência é a única linha do cartão que precisa saltar. */
.ft-doc.todo .ft-doc-st { color: oklch(0.53 0.22 26); font-weight: 700; opacity: 1; }
.theme-dark .ft-doc.todo .ft-doc-st { color: oklch(0.72 0.2 26); }
.ft-doc.todo .ft-doc-st i { opacity: .8; font-weight: 500; }
.ft-doc.signed .ft-doc-st { color: oklch(0.6 0.12 150); font-weight: 600; }
.ft-doc-st i { font-style: normal; font-weight: 400; opacity: .7; }
/* o clipe: escolher a minuta publicada */
.ms-pick-l { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 320px; overflow: auto; }
.ms-pick-i { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--text); font: inherit; cursor: pointer; transition: transform .09s, border-color .12s; }
.ms-pick-i:hover:not(:disabled) { border-color: color-mix(in oklab, var(--text) 32%, transparent); }
.ms-pick-i:active:not(:disabled) { transform: scale(.99); }
.ms-pick-i:disabled { cursor: default; opacity: .6; }
/* ⛓ O ANEXO É O BALDE (2026-08-12): a grade de 2 colunas dentro do diálogo, com
   rolagem só no corpo — cabeçalho e legenda ficam fixos, senão o autor perde o
   título ao rolar e não sabe mais em que passo está.
   ⚠️ A grade NÃO é clonada: é o mesmo `MinutaGrid` da estante, e por isso os
      ladrilhos herdam capa, painel e fita sem uma linha de CSS própria. */
.ft-pv.ms-pick.wide { width: min(92vw, 560px); display: flex; flex-direction: column; max-height: min(82vh, 720px); }
.ms-pick-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 2px 4px 4px; }
.ms-pick-body .mn-grid { padding: 0; }
/* chips de balde: a placa da x-bio + o nome, na mesma escada dos chips de prazo */
.ms-pick-bk { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ms-pick-bk-c { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 1px solid var(--border-soft); background: transparent; color: inherit; font-size: .62rem; letter-spacing: .03em; cursor: pointer; }
.ms-pick-bk-c.on { border-color: var(--accent); color: var(--accent); }
/* ⚠️ ESCOPADA no chip (2026-08-13): esta regra era `.mn-plate.sm` solta e, sendo a
   ÚLTIMA da folha, encolhia a placa do CABEÇALHO do cofre para 17px — o mesmo bug de
   duplicata do `.mn-btn.del`. ⛔ NÃO soltar `.mn-plate.sm` de novo: escope no host. */
.ms-pick-bk-c .mn-plate.sm { width: 17px; height: 17px; border-radius: 5px; }
.ms-pick-bk-c .mn-plate.sm img { border-radius: 5px; }
.ms-pick-bk-c .mn-plate.sm.ph { color: var(--text-dim); }
.ms-pick-in{flex:none;display:grid;place-items:center;width:17px;height:17px;color:var(--text-dim)}
.ms-pick-bk-c.on .ms-pick-in{color:var(--accent)}
.ms-pick-body .mn-chain { padding: 0 0 4px; }
/* ladrilho barrado pelo canon: existe na grade, não se toca. ⚠️ mostrar e
   explicar — escondido, o autor procuraria o documento achando que sumiu. */
.mn-tile.off { cursor: default; opacity: .55; }
.mn-tile.off .mn-tile-sheet { filter: grayscale(.55); }
.mn-tile-sub.note { color: oklch(0.52 0.11 76); opacity: .95; }
.theme-dark .mn-tile-sub.note { color: oklch(0.8 0.11 82); }
/* ‹ do cabeçalho do diálogo: volta um passo (corrente → balde) sem fechar */
.ft-pv-head .mn-btn.back-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; margin-right: 2px; border-radius: 8px; }
.ft-pv-head .mn-btn.back-ic svg { display: block; }
/* aberto liberado para outra pessoa: existe na lista mas não se anexa aqui —
   mostrar e explicar é melhor que esconder (o autor procuraria o documento). */
.ms-pick-i.off { border-style: dashed; }
.ms-pick-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-pick-m strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-pick-m span { font-size: .64rem; opacity: .55; }
.ms-pick-m em { font-style: normal; font-size: .62rem; color: var(--accent); }
/* A CERIMÔNIA — folha clara + balcão escuro fixo embaixo */
.ms-imm:not(.view) .mn-paper { padding-bottom: 190px; }
.ms-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 15px max(18px, calc((100% - 680px) / 2)) calc(15px + env(safe-area-inset-bottom, 0px)); background: #17150f; color: #efe9db; box-shadow: 0 -12px 34px rgba(20, 16, 8, .28); animation: msBarIn .22s ease-out; }
@keyframes msBarIn { from { transform: translateY(100%); } }
.ms-bar-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ms-bar-m strong { font-size: .88rem; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.ms-bar-m strong b { font-weight: 700; }
.ms-bar-m > em { font-style: normal; font-size: .64rem; letter-spacing: .04em; opacity: .55; }
.ms-bar-m.done strong { color: #bfe6b4; }
.ms-prog { display: block; width: 100%; height: 3px; margin-bottom: 5px; border-radius: 99px; background: rgba(244, 239, 228, .16); overflow: hidden; }
.ms-prog i { display: block; height: 100%; border-radius: 99px; background: #e8dfc4; transition: width .18s ease-out; }
.ms-go { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 20px; border-radius: 999px; border: 0; background: #f4efe4; color: #17150f; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; transition: transform .09s, opacity .15s; }
.ms-go:hover:not(:disabled) { transform: translateY(-1px); }
.ms-go:active:not(:disabled) { transform: scale(.97); }
.ms-go:disabled { opacity: .3; cursor: default; }
/* ESC-60: "não vou" é RESPOSTA legítima, não recusa — peso visual menor que
   o sim, mas nunca aparência de erro ou de botão perigoso. */
.ms-go.ghost { background: transparent; color: #d8d2c4; border: 1px solid rgba(244, 239, 228, .3); }
.ms-go.ghost:hover { border-color: rgba(244, 239, 228, .6); color: #fff; }
.ms-otp { width: 200px; margin-top: 2px; padding: 4px 0 6px; border: 0; border-bottom: 2px solid rgba(244, 239, 228, .3); border-radius: 0; background: transparent; color: #f4efe4; font-size: 1.5rem; letter-spacing: .42em; text-indent: .1em; }
.ms-otp:focus { outline: none; border-color: #f4efe4; }
.ms-otp.err { border-color: #ff937d; color: #ffb7a6; animation: msShake .3s; }
@keyframes msShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.ms-err { font-style: normal; font-size: .64rem; color: #ffb7a6; }
.ms-otp-r { display: flex; gap: 18px; margin-top: 5px; }
.ms-lnk { padding: 2px 0; background: none; border: 0; color: inherit; opacity: .6; font: inherit; font-size: .66rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ms-lnk:hover { opacity: 1; }
/* o código "chegando" no canal verificado — notificação do aparelho */
.ms-sms { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1300; display: flex; align-items: center; gap: 11px; max-width: min(92vw, 400px); padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: #101010; color: #f2efe8; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 18px 44px rgba(0, 0, 0, .45); animation: msSmsIn .34s cubic-bezier(.2, .9, .3, 1.18); }
@keyframes msSmsIn { from { opacity: 0; transform: translate(-50%, -18px); } }
.ms-sms:active { transform: translate(-50%, 1px); }
.ms-sms-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #f4efe4; color: #111; font-size: 15px; }
.ms-sms-m { display: flex; flex-direction: column; gap: 1px; }
.ms-sms-m em { font-style: normal; font-size: .58rem; letter-spacing: .06em; opacity: .6; white-space: nowrap; }
.ms-sms-m b { font-size: 1.06rem; letter-spacing: .2em; }
.ms-sms-tap { flex: none; max-width: 74px; font-size: .56rem; line-height: 1.4; text-align: right; opacity: .5; }
/* o carimbo: o bloco de assinatura ESTAMPA na folha */
.ms-stamp .md-sig { animation: msStamp .55s cubic-bezier(.2, 1.5, .4, 1); transform-origin: 50% 30%; }
@keyframes msStamp { 0% { opacity: 0; transform: scale(1.45) rotate(-5deg); } 62% { opacity: 1; transform: scale(.97) rotate(.6deg); } 100% { transform: none; } }


/* ESC-52 · placar de documentos: a cor é o estado (rascunho pendura,
   registrado é ato feito, assinado é ato completo). Zero fica cinza. */
.esc-rel-c.is-draft b { color: oklch(0.58 0.19 25); }
.esc-rel-c.is-reg b { color: var(--accent); }
.esc-rel-c.is-ok b { color: oklch(0.52 0.14 155); }
.theme-dark .esc-rel-c.is-draft b { color: oklch(0.72 0.17 25); }
.theme-dark .esc-rel-c.is-ok b { color: oklch(0.78 0.14 155); }

/* 👤 a carinha de quem escreve no chip do balde pessoal: DISCO (gente), nunca
   placa quadrada (marca) — ESC-52. */
.ms-pick-me{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:8.5px;font-weight:700;letter-spacing:.02em;color:#fff;font-family:var(--font-mono,ui-monospace,monospace)}
.ms-pick-me.pic{overflow:hidden;background:var(--bg-elev)}
.ms-pick-me.pic img{width:100%;height:100%;object-fit:cover;display:block}

/* 🐇 O QUE A OUTRA PARTE FEZ COM O RECADO (ESC-86): "pulou" no tom do acento — é
   trabalho vivo na fila dela; "ignorou" em tom apagado — decisão legítima, não erro.
   ⛔ NÃO pintar "ignorou" de vermelho: o app registra o fato, não julga a pessoa. */
/* ══ ESC-87 · PERGUNTA COM OPÇÕES no rodapé da bolha ═══════════════════════════
   Linhas separadas por FILETE, rótulo no acento, sem cor de fundo e sem ícone: lê como
   formulário em papel, não como app de bot. ⛔ NÃO virar chip colorido — o tom notarial
   é o que faz a bolha parecer prova.
   Grade: 2 por linha quando os rótulos são curtos (`.ft-ask` puro), empilhado no
   `.wide`. Alvo de 44px em qualquer caso. */
/* 🔘 AS OPÇÕES SÃO O PÉ DA BOLHA (2026-08-14, Tony trouxe o layout do WhatsApp): vêm
   DEPOIS da hora e encostam nas três bordas — bloco solto dentro da bolha parecia anexo,
   emendado parece parte do recado. Empilhado e de largura cheia sempre (ver wallet.jsx).
   ⚠️ Os raios de baixo COPIAM os da bolha, inclusive o canto do rabinho (6px), senão a
   emenda vaza um filete claro no canto. ⛔ NÃO pôr gap: emenda é hairline, não vão. */
/* ⏳ ESC-94 · A BAIXA PELO BALÃO: os verbos do frame no pé do recado que espera decisão.
   ⚠️ Vocabulário do CARTÃO DE OPÇÕES (mesma emenda, mesmo filete, mesma altura de toque):
   as duas coisas são "o que fazer com este recado", e vocabulário repetido é o que faz a
   segunda vez parecer óbvia. ⛔ NÃO inventar chip colorido: aqui é papel, não app de bot. */
/* 🔴 a linha-resumo dos pendentes sem conversa: mesma caixa das conexões, mas o disco é o
   carretel da fita — não é pessoa, é a fila. ⛔ NÃO dar carinha: seria fingir um contato. */
.ft-row-tape .ft-tape-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--border-soft);color:var(--accent)}
.ft-row-tape .ft-name{font-weight:650}
/* ⏱ o seletor da janela de arrependimento, ao lado do Cancelar (ESC-95): discreto e do mesmo
   material do botão vermelho, sem competir com ele — o ato urgente é cancelar, não configurar. */
.ft-comp-undo{display:flex;gap:8px;align-items:stretch}
.ft-comp-undo .ft-undo{flex:1}
.ft-hold{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:62px;padding:0 10px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev);color:var(--text-mute);cursor:pointer;transition:color .14s,border-color .14s}
.ft-hold:hover{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 45%,transparent)}
.ft-hold em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:-.01em}
/* ✍️ a barra da recusa: mesma família da citação, tom de decisão negativa (sem vermelho de erro
   — recusar é legítimo). ⛔ NÃO usar --danger: não é falha, é vontade. */
.ft-qbar-no{border-left-color:var(--text-dim)}
.ft-qbar-no .ft-qbar-m em{color:var(--text-mute)}
.ft-pend{display:flex;margin:7px -12px -7px;border-top:1px solid var(--border-soft);overflow:hidden;border-radius:0 0 15px 5px}
.ft-pend-b svg{flex:none;margin-right:6px;vertical-align:-2px}
.ft-pend-b{display:inline-flex;align-items:center;justify-content:center;flex:1;min-height:44px;padding:0 10px;border:0;border-left:1px solid var(--border-soft);background:transparent;color:var(--text-mute);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .13s,color .13s}
.ft-pend-b:first-child{border-left:0}
.ft-pend-b.go{color:var(--accent)}
.ft-pend-b:hover{background:color-mix(in oklab,var(--accent) 9%,transparent)}
.ft-pend-b:active{background:color-mix(in oklab,var(--accent) 16%,transparent)}
.ft-ask{display:flex;flex-direction:column;margin:7px -12px -7px;border-top:1px solid var(--border-soft);overflow:hidden;border-radius:0 0 15px 5px}
.ft-b.out .ft-ask{border-radius:0 0 5px 15px}
/* ⚠️ na MINHA bolha as opções são só registro (não se responde a própria pergunta): fundo
   transparente para o rabinho não descolar de cor, e filete no tom do acento. */
/* ⚠️ O FILETE ENTRE OPÇÕES PRECISA APARECER (2026-08-15, Tony: "senti falta de uma linha
   separando um botão de outro"): a 26% do acento ele sumia dentro da bolha azul, e a lista
   virava um bloco de texto centralizado. 42% é o mínimo que separa sem virar tabela.
   ⛔ NÃO tirar o filete: sem ele ninguém vê onde um alvo de toque acaba e o outro começa. */
.ft-b.out .ft-ask,.ft-b.out .ft-ask-b,.ft-b.out .ft-ask-f{background:transparent;border-color:color-mix(in oklab,var(--accent) 42%,transparent)}
.ft-b.in .ft-ask-b,.ft-b.in .ft-ask-f{border-color:color-mix(in oklab,var(--text) 16%,transparent)}
.ft-b.out .ft-ask-b{color:inherit;opacity:.92;cursor:default;font-weight:600}
.ft-ask-b:first-child{border-top:0}
/* 📋 ESC-88 · ACIMA DE 4 OPÇÕES: a tecla que abre a gaveta. Mesmo corpo do botão comum —
   a diferença é o ícone de lista e o tom do acento (é navegação, não escolha). */
.ft-ask-b.more{color:var(--accent);font-weight:600}
.ft-ask-b.on+.ft-ask-b.more{font-weight:500;color:var(--text-dim)}
/* a gaveta sobe de dentro da conversa (não é modal de app: é uma folha que sobe) */
/* ⚠️ z ACIMA DO DOCK DO COMPOSITOR (2026-08-15, achado na verificação): `.set-subview`
   tem z-index auto e NÃO cria contexto de empilhamento, então o `z-index:92` do
   `.ft-dock` compete direto no contexto do `.set-sheet` — com z:40 o compositor pintava
   por cima e a última opção ficava inclicável (`elementFromPoint` caía no textarea).
   ⛔ NÃO baixar deste patamar sem conferir todos os docks.
   ⚠️ E o véu usa o MESMO literal do `.set-sheet-backdrop`: não existe token `--bg` neste
   projeto (são `--bg-base`/`--bg-elev`), e o color-mix com token inexistente cai fora
   silenciosamente — a gaveta ficava sem escurecer e sem sombra. */
.ft-asksh-wrap{position:absolute;inset:0;z-index:120;display:flex;align-items:flex-end;background:oklch(0.2 0.03 270 / 0.45);animation:ftAshIn .16s ease-out}
.ft-asksh{width:100%;max-height:74%;display:flex;flex-direction:column;background:var(--bg-elev);border-top:1px solid var(--border-soft);border-radius:14px 14px 0 0;box-shadow:0 -14px 40px oklch(0.2 0.03 270 / 0.34);animation:ftAshUp .2s cubic-bezier(.22,1,.36,1)}
@keyframes ftAshIn{from{opacity:0}to{opacity:1}}
@keyframes ftAshUp{from{transform:translateY(14px)}to{transform:translateY(0)}}
.ft-asksh-h{display:flex;align-items:flex-start;gap:10px;padding:14px 14px 11px;border-bottom:1px solid var(--border-soft)}
.ft-asksh-h strong{flex:1;font-size:.9rem;font-weight:600;line-height:1.35;text-wrap:pretty}
.ft-asksh-x{flex:none;width:30px;height:30px;display:grid;place-items:center;border:0;background:transparent;color:var(--text-dim);cursor:pointer;border-radius:8px}
.ft-asksh-x:hover{background:var(--border-soft);color:var(--text)}
.ft-asksh-l{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.ft-asksh-b{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:12px 15px;border:0;border-bottom:1px solid var(--border-soft);background:transparent;color:var(--text);font:inherit;font-size:.88rem;text-align:left;cursor:pointer}
.ft-asksh-b:hover{background:color-mix(in oklab,var(--accent) 7%,transparent)}
.ft-asksh-b.on{color:var(--ask);font-weight:600}
/* ⚠️ recusada fica APAGADA, nunca escondida: a conversa é prova */
.ft-asksh-b.off{opacity:.42;cursor:default}
.ft-asksh-b.off:hover{background:transparent}
.ft-asksh-f{padding:9px 15px 13px;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);font-style:normal}
/* ☰ o botão do frame que abre a gaveta: ícone e rótulo na mesma linha */
.ft-tp-b svg{flex:none;margin-right:6px;vertical-align:-2px}
/* 🌱 O EMOJI DA SEMENTE no botão "Abrir semente" (2026-08-21): mesma métrica do ícone SVG
   (mesma folga à direita, mesma linha de base), senão o rótulo dança em relação aos outros
   dois verbos do frame. ⚠️ `line-height:1` porque emoji herda a caixa da fonte e empurraria
   a altura do botão. ⛔ NÃO usar `font-size` maior que o rótulo: aqui ele é ícone, não peça
   de decoração. */
.ft-tp-emo{flex:none;margin-right:6px;font-size:15px;line-height:1}
.ft-tp-b{display:inline-flex;align-items:center;justify-content:center}
.ft-askrow-n{font-size:.62rem;letter-spacing:.04em;color:var(--text-dim);font-style:normal;align-self:center}
.ft-ask-b{border-top:1px solid var(--border-soft);min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 10px;border:0;background:var(--bg-elev);color:var(--accent);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;text-align:center}
.ft-ask-b:hover{background:color-mix(in oklch,var(--accent) 8%,var(--bg-elev))}
/* 🟢 A ESCOLHIDA CARIMBA EM VERDE (2026-08-16, Tony): é a MESMA cor do disco "Pergunta com
   opções" no menu do + — a família da pergunta acompanha o objeto do começo ao fim, do momento
   de montar até o carimbo da resposta. As recusadas morrem no cinza (mas legíveis).
   ⚠️ Token próprio (`--ask`) e não `--accent`: azul é a cor de VALOR neste produto, e a resposta
   escolhida não é dinheiro. ⛔ NÃO reusar o acento aqui.
   ⚠️ Vale nas três superfícies do mesmo fato: cartão inline, gaveta e o rodapé "RESPONDIDA". */
.ft-ask{--ask:oklch(0.52 0.13 152)}
.theme-dark .ft-ask,.theme-dark .ft-asksh{--ask:oklch(0.74 0.15 152)}
.ft-asksh{--ask:oklch(0.52 0.13 152)}
.ft-ask-b.on{color:var(--ask);font-weight:700}
.ft-ask-b.on svg{flex:none}
/* ⚠️ recusada fica APAGADA MAS LEGÍVEL: consentimento exige saber o que foi recusado.
   ⛔ NÃO usar display:none nem opacity abaixo de .5. */
.ft-ask-b.off{color:var(--text-dim);font-weight:400;opacity:.62;cursor:default}
.ft-ask-b:disabled{cursor:default}
.ft-ask-f{border-top:1px solid var(--border-soft);background:var(--bg-elev);padding:6px 10px 7px;font-style:normal;font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-dim);text-align:center}
.ft-ask.done .ft-ask-f{color:var(--ask)}
/* editor das opções, acima do compositor — mesma família da linha do valor */
.ft-askrow{display:flex;flex-direction:column;gap:7px;padding:9px 12px;border-top:1px solid var(--border-soft);background:var(--bg-elev)}
.ft-askrow-t{display:flex;align-items:baseline;gap:8px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}
.ft-askrow-t em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.72}
/* ⚠️ COLUNA ÚNICA (2026-08-15, Tony): duas por linha davam ~130px por rótulo, e o campo
   cortava a partir de "Pacote fech…" — o editor precisa mostrar o rótulo INTEIRO, porque é
   ele que vai para o botão. E a bolha empilha (ESC-88), então o editor em grade prometia um
   arranjo que o resultado não tem. ⛔ NÃO voltar a 2 colunas: o editor espelha a bolha. */
.ft-askrow-g{display:grid;grid-template-columns:1fr;gap:6px}
.ft-askrow-g input{min-height:36px;padding:7px 9px;border:1px solid var(--border-soft);border-radius:7px;background:var(--bg);color:var(--text);font:inherit;font-size:.85rem}
.ft-askrow-g input:focus{outline:0;border-color:var(--accent)}
.ft-askrow-a{display:flex;align-items:center;gap:8px}
.ft-askrow-a button{border:0;background:none;color:var(--accent);font:inherit;font-size:11px;cursor:pointer;padding:2px 0}
.ft-askrow-x{margin-left:auto;color:var(--text-dim) !important;font-size:15px !important}
/* 🏅 A MEDALHA USA A BORDA DOS OUTROS X-DOC (2026-08-16, Tony): as três portas mandam o MESMO
   objeto, então o anel é o mesmo — o que distingue é o glifo, não a moldura. ⛔ NÃO dar cor de
   anel própria: pareceria uma quarta natureza de anexo.
   ⚠️ Só o preenchimento é mais quente (é o metal): a medalha é o vocabulário do Bronze/Prata/Ouro. */
.ft-att-ic.sig{border:1.5px solid oklch(0.62 0.11 78);color:oklch(0.62 0.11 78);background:color-mix(in oklab,#d9a13a 13%,transparent)}
/* 🟢 A PERGUNTA COM OPÇÕES É VERDE (Tony): ela não é papel nem dinheiro — é conversa que se
   responde num toque, e verde é a cor de quem responde. ⛔ NÃO reusar o azul do PING: ali o azul
   fala de valor, e duas coisas diferentes na mesma cor confundem o slot. */
/* 🟢 UM SÓ VERDE, DOIS TONS (2026-08-16, Tony: "o tom ficou o mesmo nos dois temas?"). O disco
   do menu estava com valor FIXO — no tema escuro ele ficava fundo demais contra a folha escura,
   enquanto o carimbo da resposta já tinha variante. Agora os dois leem o MESMO token, e o token
   é que muda com o tema. ⛔ NÃO escrever oklch cru em peça nova da pergunta: nasce sem o par. */
.ft-att-ic.ask{--ask:oklch(0.52 0.13 152);border:1.5px solid var(--ask);color:var(--ask);background:color-mix(in oklab,var(--ask) 12%,transparent)}
.theme-dark .ft-att-ic.ask{--ask:oklch(0.74 0.15 152)}
/* 🖍 "PULOU" TAMBÉM É GRIFO — TINTA AZUL (2026-08-15, Tony: "cria a animação da caneta
   passando no pulou"). Os dois carimbos de ato da outra parte passam a ser da mesma
   família: caneta amarela em "ignorou" (assunto fechado) e AZUL em "pulou" (segue na fila).
   Grifado, eles leem como a mesma CLASSE de fato, separados só pela tinta.
   ⚠️ Usa a variante `.ft-hl-sweep.blue` que já existia. ⛔ NÃO escrever gradiente próprio.
   ⚠️ O texto escurece sobre a tinta: azul de acento sobre azul de caneta não tem contraste. */
.ft-tick.skip{color:var(--accent)}
.ft-tick.skip.ft-hl-sweep{color:oklch(0.42 0.13 258)}
.theme-dark .ft-tick.skip.ft-hl-sweep{color:oklch(0.93 0.03 258)}
.ft-tick.skip svg{transform:translateY(.5px)}
/* 🖍 O GRIFO É A CANETA QUE JÁ EXISTE (`.ft-hl-sweep.yellow`, definida junto com as
   outras variantes lá em cima). ⛔ NÃO escrever gradiente próprio aqui: havia um com hex
   cru fora da paleta oklch, geometria diferente de todos os outros grifos do app e tema
   escuro em duplicidade. Aqui fica só a cor do texto, derivada de token. */
/* 👁 "lido" (ESC-100): olho aberto no tom do acento — é fato bom, o documento cumpriu o que
   foi mandado fazer. ⛔ NÃO usar o amarelo do grifo: aquele é de assunto encerrado sem resposta. */
.ft-tick.read{color:var(--accent)}
.ft-tick.ign{color:var(--text)}

/* 🔴 ESC-90 · A LUZ PISCA QUANDO UMA BAIXA VOLTA ATRÁS. Aqui o vermelho é legítimo — é
   erro do ENVIO, não decisão de ninguém (⛔ o "ignorou" continua em grifo amarelo, ESC-86).
   ⚠️ Pisca 6s e para: alarme que não apaga vira paisagem. */
.ft-luz.fail .mm-isle-luz i{background:var(--danger);box-shadow:0 0 0 3px color-mix(in oklab,var(--danger) 26%,transparent);animation:ftLuzFail .9s steps(1,end) infinite}
@keyframes ftLuzFail{0%,49%{opacity:1}50%,100%{opacity:.22}}
/* ✕ recado que não saiu: a bolha fica, marcada — o texto não se perde num erro de rede */
.ft-tick.fail{color:var(--danger)}

/* ⏲ ESC-91 · TENTANDO ENVIAR: tom do acento (o aparelho está trabalhando POR você), nunca
   vermelho — vermelho é só para quando a fila desiste. ⛔ NÃO usar barra de progresso:
   o que se espera é a rede voltar, e isso não tem percentual. */
.ft-tick.retry{color:var(--accent)}
.ft-tick.retry svg{animation:ftSpin 2.4s linear infinite}
@keyframes ftSpin{to{transform:rotate(360deg)}}
.ft-prev-rt{flex:none;display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--accent)}
.ft-prev-rt svg{animation:ftSpin 2.4s linear infinite}

/* ⌛ ESC-93 · destinatário não encontrado: 90 dias no servidor sem nenhum aparelho baixar.
   Tom apagado com filete de perigo — é fato ruim, mas não é falha de quem mandou; o
   alarme vermelho cheio seria acusar o autor de um problema que não é dele.
   ⛔ NÃO esconder a bolha: o texto fica, só o carimbo muda. */
.ft-tick.nodest{color:var(--danger);opacity:.85}

/* ═══ ESC-91 · MODELOS DE PERGUNTA E SELETOR DE EMOJI ══════════════════════════════════
   ⚠️ Reusa o chassi da gaveta de opções (`.ft-asksh-wrap`): mesma subida de baixo, mesmo
   véu, mesmo z acima do dock. ⛔ NÃO criar segunda gaveta com geometria própria — duas
   gavetas divergem no primeiro conserto. */
/* o emoji no rótulo do botão: tamanho de texto, nunca de ícone — ele acompanha a palavra */
.ft-ask-e{font-style:normal;font-weight:400;margin-right:6px;font-size:1.04em;line-height:1}
.ft-tp-e{font-size:15px;line-height:1;margin-right:7px}
/* ── a linha do editor: disco de emoji + rótulo + tirar ─────────────────────────────── */
.ft-askrow-r{display:flex;align-items:center;gap:7px}
.ft-askrow-r input{flex:1;min-width:0}
.ft-askrow-e{flex:none;display:grid;place-items:center;width:34px;height:34px;border:1px dashed var(--border-soft);border-radius:9px;background:transparent;color:var(--text-dim);font-size:17px;line-height:1;cursor:pointer;transition:border-color .14s,color .14s}
.ft-askrow-e:hover{border-color:var(--accent);color:var(--accent)}
/* ⚠️ escolhido vira borda SÓLIDA: tracejado é convite de vaga, sólido é conteúdo posto */
.ft-askrow-e.on{border-style:solid;border-color:color-mix(in oklab,var(--accent) 40%,transparent)}
.ft-askrow-d{flex:none;width:26px;height:26px;border:0;border-radius:7px;background:transparent;color:var(--text-dim);font-size:17px;line-height:1;cursor:pointer}
.ft-askrow-d:hover{color:var(--danger,oklch(.62 .2 25));background:color-mix(in oklab,var(--text) 7%,transparent)}
/* ── o seletor de emoji ─────────────────────────────────────────────────────────────── */
.ft-emo{max-height:70%}
.ft-emo-clr{margin-left:auto;margin-right:8px;border:0;background:transparent;color:var(--text-dim);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.ft-emo-clr:hover{color:var(--accent)}
.ft-emo-q{margin:0 14px 8px;padding:9px 12px;border:1px solid var(--border-soft);border-radius:10px;background:var(--bg-base);color:var(--text);font:inherit;font-size:13px;outline:none}
.ft-emo-q:focus{border-color:color-mix(in oklab,var(--accent) 50%,transparent)}
/* ⚠️ as abas são os grupos canônicos do Unicode, na ordem do teclado do telefone */
/* ⚠️ `flex:none` NA FILA DE ABAS (2026-08-15, Tony: "as abas estão com defeito estético"):
   a folha é coluna flex e a grade cresce, então a fila era ESPREMIDA — os glifos apareciam
   cortados ao meio. Item de flex encolhe por padrão; quem tem altura própria precisa dizer.
   ⛔ NÃO resolver com `height` fixa: o corte volta em outro corpo de fonte. */
.ft-emo-tabs{flex:none;display:flex;align-items:center;gap:2px;padding:0 12px 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.ft-emo-tabs::-webkit-scrollbar{display:none}
.ft-emo-tab{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-bottom:2px solid transparent;background:transparent;font-size:17px;line-height:1.35;cursor:pointer;opacity:.55;transition:opacity .14s,border-color .14s}
.ft-emo-tab:hover{opacity:.9}
.ft-emo-tab.on{opacity:1;border-bottom-color:var(--accent)}
/* ⚠️ grade automática: o número de colunas segue a largura, e o alvo nunca fica menor que
   34px — abaixo disso o dedo erra de emoji e o autor manda o botão errado. */
.ft-emo-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:2px;padding:0 12px 14px;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* ── barra de rolagem discreta ─────────────────────────────────────────────────────────
   ⚠️ A barra do sistema traz SETAS e 15px de calha cinza — dentro de uma folha de 340px ela
   compete com a grade e denuncia "caixa de HTML". Aqui: 8px, sem setas, calha invisível e
   polegar no tom do texto, que aparece no hover. ⛔ NÃO esconder a barra: sem ela ninguém
   descobre que há mais emoji abaixo. */
.ft-emo-grid{scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--text) 22%,transparent) transparent}
.ft-emo-grid::-webkit-scrollbar{width:8px;height:8px}
.ft-emo-grid::-webkit-scrollbar-track{background:transparent}
.ft-emo-grid::-webkit-scrollbar-button{display:none;width:0;height:0}
.ft-emo-grid::-webkit-scrollbar-thumb{border:2px solid transparent;background-clip:padding-box;border-radius:99px;background-color:color-mix(in oklab,var(--text) 20%,transparent)}
.ft-emo-grid:hover::-webkit-scrollbar-thumb{background-color:color-mix(in oklab,var(--text) 32%,transparent)}
.ft-emo-b{aspect-ratio:1;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;font-size:21px;line-height:1;cursor:pointer}
.ft-emo-b:hover{background:color-mix(in oklab,var(--text) 9%,transparent)}
.ft-emo-b.on{background:color-mix(in oklab,var(--accent) 22%,transparent)}
.ft-emo-non{display:block;padding:22px 14px;text-align:center;font-style:normal;font-size:12px;color:var(--text-dim)}
/* ── o livro de fórmulas ────────────────────────────────────────────────────────────── */
.ft-tpl-i{display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--border-soft)}
.ft-tpl-i:last-child{border-bottom:0}
.ft-tpl-go{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding:13px 6px 13px 16px;border:0;background:transparent;text-align:left;cursor:pointer}
.ft-tpl-go:hover{background:color-mix(in oklab,var(--accent) 8%,transparent)}
.ft-tpl-go b{font-weight:600;font-size:13.5px;color:var(--text);line-height:1.4}
/* ⚠️ os botões do modelo aparecem como CHIPS: escolher pelo título obriga a lembrar o que
   tem dentro, e ninguém lembra. ⛔ NÃO reduzir a lista de títulos. */
.ft-tpl-ops{display:flex;flex-wrap:wrap;gap:5px}
.ft-tpl-ops i{font-style:normal;font-size:11px;padding:3px 8px;border:1px solid var(--border-soft);border-radius:999px;color:var(--text-mute);white-space:nowrap}
.ft-tpl-x{flex:none;width:42px;border:0;background:transparent;color:var(--text-dim);cursor:pointer}
.ft-tpl-x:hover{color:var(--danger,oklch(.62 .2 25));background:color-mix(in oklab,var(--text) 6%,transparent)}
.ft-tpl-non{display:block;padding:26px 16px;text-align:center;font-style:normal;font-size:12px;color:var(--text-dim)}

/* 👤 ESC-115 · o mini perfil de quem mandou, no ladrilho do recebido — ocupa a linha
   que era dos ✓✓ + "Guardado". Disco REDONDO: é gente (ESC-52). */
/* 👤 ESC-121 · O DISCO CRESCE E GANHA DUAS LINHAS (2026-08-19, Tony). Nome sozinho é
   ambíguo — dois "Bia" na federação são duas pessoas, e o @endereço é o que resolve.
   ⚠️ 26px (era 17px): com DUAS linhas ao lado, o disco de 17px ficava menor que o bloco
      de texto e a linha lia desalinhada. Agora ele encosta nas duas.
   ⛔ NÃO passar de 26px: acima disso o disco compete com o selo do documento, que é o
      assunto do ladrilho — quem mandou é contexto, não manchete. */
.mn-tile-from{display:flex;align-items:center;gap:7px;min-width:0;margin:0 0 3px}
.mn-tile-from-m{display:flex;flex-direction:column;gap:0;min-width:0;line-height:1.25}
/* o @endereço: mono, um degrau mais apagado que o nome — hierarquia sem virar ruído */
.mn-tile-from-m i{font-style:normal;font-size:.53rem;letter-spacing:.02em;color:#96907f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ⚠️ O "…" SÓ CORTA SE O BLOCO PUDER ENCOLHER (2026-08-19, Tony: nome grande quebrando
   em duas linhas). O ellipsis já estava aqui e não cortava: dentro de um flex, o item
   tem `min-width:auto` e cresce até caber a palavra inteira — quem quebrava a linha era
   o BLOCO, não o texto. ⛔ NÃO tirar o `min-width:0` do `.mn-tile-from-m`: é ele que
   autoriza o encolhimento, e sem ele todo `text-overflow` desta coluna vira decoração. */
.mn-tile-from em{display:block;font-style:normal;font-size:.58rem;letter-spacing:.01em;color:#7c7568;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* ⚠️ O NOME PESA, A PREPOSIÇÃO NÃO (2026-08-19): "de" é cola, quem importa é a pessoa.
   ⛔ NÃO subir o tamanho junto do peso: o nome de quem mandou é CONTEXTO do ladrilho,
      não a manchete — quem é manchete ali é o documento. */
.mn-tile-from em b{font-weight:600;color:#3d3833}
.mn-tile-from-m i{display:block;min-width:0}
.mn-tile-face{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:999px;overflow:hidden;font-family:ui-monospace,Menlo,monospace;font-size:.58rem;font-weight:700;letter-spacing:.02em}
.mn-tile-face.img img{width:100%;height:100%;object-fit:cover;display:block}
.mn-tile-face.ini{background:oklch(0.62 0.12 var(--h,32));color:#fff}

/* 📖 ESC-118 · O MANUAL EM HIPERFOCO DENTRO DA GAVETA: a folha real num iframe
   same-origin, ocupando o corpo da subview inteiro. O cabeçalho da gaveta (com o "‹")
   fica por fora, então o retorno é o mesmo de qualquer nível. ⛔ NÃO dar borda nem
   raio: a folha É a tela aqui, não um cartão dentro dela. */
.mn-man{display:block;width:100%;height:100%;min-height:60vh;border:0;background:var(--bg-base)}
/* 📖 EM HIPERFOCO A FOLHA ENCOSTA NA BORDA (2026-08-19, Tony: "está ficando uma margem que
   denuncia que ele não está integrado ao layout"). O corpo da subview tem respiro para
   listas e cartões; a folha do manual é a TELA, então o `:has()` zera o padding só quando
   ela está dentro — sem uma classe extra que alguém precisaria lembrar de pôr.
   ⛔ NÃO resolver com margem negativa: quebraria no primeiro ajuste de padding do host. */
.set-sheet-body:has(> .mn-man){padding:0;overflow:hidden;position:relative}
/* ⏳ O AVISO DE CARGA DA MOLDURA (2026-08-30, Tony: "tá ficando muito tempo nessa tela preta").
   ⚠️ A página emoldurada compila Babel no navegador, então entre o toque e o 1º paint há
      segundos de nada. Tela preta parada não se lê como espera, se lê como travamento.
   ⚠️ O véu cobre só o CORPO, não o cabeçalho: o `<` tem de continuar clicável enquanto carrega —
      espera de que não se pode desistir é armadilha. (Daí o `position:relative` na regra acima,
      e ⛔ não usar `.set-subview` como âncora: ele inclui o cabeçalho.)
   ⚠️ O iframe começa TRANSPARENTE (`.loading`) e não `display:none`: escondido, alguns
      navegadores atrasam o layout interno e o `onLoad` chega mais tarde ainda.
   ⛔ NÃO trocar por barra de progresso: não existe percentual aqui, e barra falsa é pior que
      espera honesta. */
.mn-man-load{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;background:var(--bg-base);pointer-events:none}
.mn-man-load .dep-pix-spin{width:22px;height:22px;border-width:2.5px}
.mn-man-load-t{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
.mn-man.loading{opacity:0}
/* 🦊 A MOLDURA BLOQUEADA (V32.2) — quando o navegador se recusa a aninhar a folha (o
   `X-Frame-Options` do host do preview, visto no Firefox), a gaveta diz o que houve e oferece a
   aba própria, em vez de servir a página de erro do navegador.
   ⚠️ Cobre o iframe INTEIRO: a página de erro fica ATRÁS, ⛔ não ao lado — duas explicações do
      mesmo problema é pior que uma.
   ⛔ NÃO usar `display:none` no iframe: isso ABORTA a carga em vários navegadores, e a medição do
      `frSettle` deixaria de funcionar na próxima abertura. Ele fica montado e invisível. */
.mn-man.failed{opacity:0;pointer-events:none}
.mn-man-fail{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:34px 26px;text-align:center;background:var(--bg-base)}
.mn-man-fail-t{margin:0;font-size:15px;font-weight:600;color:var(--text);text-wrap:pretty}
.mn-man-fail-d{margin:0;max-width:34ch;font-size:12.5px;line-height:1.6;color:var(--text-mute);text-wrap:pretty}
.mn-man-fail .set-sub-cta{margin-top:6px;text-decoration:none}
.mn-man{transition:opacity .18s ease}
@media (prefers-reduced-motion: reduce){.mn-man-load .dep-pix-spin{animation-duration:2s}.mn-man{transition:none}}

/* ══ 📡 ESC-122 · SEM REDE, A BAIXA NÃO LIQUIDA — E A UX AVISA ═══════════════════════
   (2026-08-19, Tony: "o usuário tem que ser avisado na UX que é um estado de escutar a
   fita online".) Passar a fita offline continua PERMITIDO — ler e decidir não precisa de
   internet, e o selo é offline por design. O que não pode é a tela deixar a pessoa achar
   que resolveu: a luz da caixa segue LIQUIDAÇÃO (o aviso entrou no registro), então ela
   fica acesa até a conexão voltar.
   ⚠️ Âmbar, não vermelho: não é erro nem pendência da pessoa — é a rede que falta. O
      vermelho desta casa é pendência de ATO (`.ft-led`), e usar o mesmo tom aqui faria
      "sem rede" parecer culpa de quem está lendo.
   ⛔ NÃO esconder a faixa quando a fita está vazia: é justamente ali que a pessoa vê "0
      pendências" e conclui, errado, que tudo saiu. */
.ft-netoff{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:11px 13px;border:1px solid color-mix(in oklab,oklch(0.72 0.14 75) 42%,transparent);border-radius:12px;background:color-mix(in oklab,oklch(0.72 0.14 75) 11%,var(--bg-elev))}
.ft-netoff-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:color-mix(in oklab,oklch(0.72 0.14 75) 22%,transparent);color:oklch(0.46 0.11 68)}
.ft-netoff-m{display:flex;flex-direction:column;gap:2px;min-width:0}
.ft-netoff-m strong{font-size:.8rem;font-weight:600;color:oklch(0.4 0.1 66)}
/* ⚠️ COR EXPLÍCITA, NÃO O TOKEN GENÉRICO (2026-08-19, verificador): `--text-dim` é
   calibrado contra o fundo da PÁGINA, e esta faixa é uma superfície TINGIDA (âmbar 11%
   no `--bg-elev`) — o token chegava a 3,28:1 no claro e 2,57:1 no escuro. Mesma classe do
   defeito que este projeto já pagou ("opacity sobre --text-dim é dimming DUPLO"): ali a
   causa era o opacity, aqui é o tingimento, o resultado é idêntico.
   ⚠️ Os vizinhos passavam justamente porque receberam cor da família âmbar (o `strong` a
      7,84:1, o ícone a 5,58:1) — este `em` era o único ainda no token e o único sem
      override de tema escuro. E é ELE que carrega a mensagem toda.
   ⛔ NÃO consertar subindo a fonte: 11,52px teria de virar 24px para valer a exceção de
      texto grande — a frase é longa, não caberia. */
.ft-netoff-m em{font-style:normal;font-size:.72rem;line-height:1.5;color:oklch(0.42 0.05 68);text-wrap:pretty}
.theme-dark .ft-netoff-m em{color:oklch(0.82 0.05 80)}
.theme-dark .ft-netoff-m strong{color:oklch(0.85 0.11 80)}
.theme-dark .ft-netoff-ic{color:oklch(0.85 0.11 80)}
/* 📡 o rótulo do ladrilho em espera: mantém o tom do ESTADO (lido é lido) e só acrescenta
   "· aviso a caminho". ⛔ NÃO pintar de vermelho: o estado não regrediu, a entrega atrasou. */
.mn-tile-revs.waitnet{background:color-mix(in oklab,oklch(0.72 0.14 75) 17%,transparent);color:oklch(0.42 0.1 66)}
.theme-dark .mn-tile-revs.waitnet{color:oklch(0.86 0.1 80)}
/* ⚠️ ESC-137c · o aviso de re-selagem no interruptor de assinar antes: é ALERTA, não legenda
   — vem depois da sublinha e usa o âmbar do sistema. ⛔ NÃO usar --text-dim: quem precisa ler
   isto está a um toque de mandar um documento sem a própria assinatura. */
.mn-rig-me-m .warn{display:block;margin-top:5px;color:var(--warn,oklch(.78 .13 75));font-size:11.5px;line-height:1.4}

/* ══ 🏅 ESC-138 · A RODA DE ASSINATURAS na capa do ladrilho (2026-08-21) ═══════════════
   Ocupa a MESMA faixa do mini-perfil (`.mn-tile-from`) na caixa da medalha, e responde outra
   pergunta: não "de quem veio", e sim "quem assinou".
   ⚠️ ESCALA PARA CENTENAS por construção: discos sobrepostos com cap de 4 + chip "+N". Nunca
      `flex-wrap` aqui — a faixa da capa tem altura fixa, e envolver empurraria o título do
      documento. ⛔ NÃO subir o cap: 5 discos de 26px já encostam no contador em 320px.
   ⚠️ O disco que FALTA é fantasma (tracejado, esmaecido), não ausente: é o que faz o cartão
      dizer "contrato de dois, um assinou" num relance. ⛔ NÃO usar vermelho: falta de
      assinatura não é erro, é o estado normal de quem acabou de receber. */
.mn-tile-sg{display:flex;flex-direction:column;gap:6px;padding:10px 12px 2px}
.mn-tile-sg-l{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim)}
.mn-tile-sg-r{display:flex;align-items:center}
.mn-tile-sg-d{flex:none;width:26px;height:26px;aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  border:2px solid var(--bg-elev);margin-left:-7px;background:var(--bg-base)}
.mn-tile-sg-d:first-child{margin-left:0}
.mn-tile-sg-d img{width:100%;height:100%;object-fit:cover;display:block}
.mn-tile-sg-d.ini{font-size:10px;font-weight:700;letter-spacing:.02em;
  background:oklch(.62 .13 var(--h,32));color:oklch(.99 .01 var(--h,32))}
/* fantasma: quem ainda não assinou */
.mn-tile-sg-d.pend{border-style:dashed;border-color:var(--border-soft);opacity:.5}
.mn-tile-sg-d.pend img{filter:grayscale(1)}
.mn-tile-sg-more{flex:none;height:26px;min-width:26px;padding:0 6px;margin-left:-7px;border-radius:13px;
  display:grid;place-items:center;font-size:10.5px;font-weight:700;
  border:2px solid var(--bg-elev);background:var(--bg-base);color:var(--text-dim)}
.mn-tile-sg-n{margin-left:auto;font-size:11px;font-style:normal;color:var(--text-dim)}

/* ══ 🏅 ESC-139 · A BASE DE METAL DA FOLHA (2026-08-21, Tony: "gostei da textura! o que
   precisa é expandir esse metal dourado para toda a base da folha — em baixo bordas
   arredondadas, em cima quadradas para seguir a continuidade da folha; e a faixa de status
   deve ser uma faixa DENTRO da base de metal").
   A 1ª tentativa foi uma pilha dourada FLUTUANDO sobre o papel: virou etiqueta colada. Aqui o
   ouro é a BASE em que a folha se apoia — ocupa a largura inteira, encosta no fundo, e o
   carimbo (LIDO · PENDENTE) é uma faixa dentro dela.
   ⚠️ TOPO RETO, BASE ARREDONDADA: o corte reto em cima é o que faz o metal parecer continuação
      da folha e não um cartão sobreposto. Embaixo não precisa de raio próprio — o
      `.mn-tile-sheet` já é `overflow:hidden` com `border-radius:3px`, então a base herda
      EXATAMENTE o canto do papel. ⛔ NÃO dar raio próprio aqui: divergiria do papel no dia em
      que o raio da folha mudar.
   ⚠️ Só na caixa da medalha (`.mn-tile.sig`): a base de metal é o que a ASSINATURA significa —
      documento guardado. ⛔ NÃO estender ao lacrado nem ao aberto, senão não diz mais nada.
   ⚠️ O ouro é FUNDO, nunca tinta sobre branco (não passa de 2:1), e o lustro é FIXO: a grade
      mostra 4 ladrilhos, e 4 brilhos animados viram cassino. */
/* ⚠️ A BASE SAI 1px PARA FORA DA FOLHA (2026-08-21, Tony: "truque estético — se você colocar o
   metal 1px saindo para fora da folha em cada lado, vai parecer que a folha está DENTRO dele,
   uma estante premium onde o contrato está colocado"). É por isso que o `.mn-tile-sheet` deixa
   de recortar (`overflow:visible`) e a base ganha o raio de baixo por conta própria: quem
   define o canto agora é o METAL, não o papel. ⛔ NÃO devolver `overflow:hidden` ao sheet — o
   1px seria decepado e a peça vira de novo um adesivo alinhado com a borda. */
/* ⚠️ QUEM RECUA É O PAPEL, NÃO O METAL (2026-08-21, Tony com zoom: "a folha está rente com a
   de metal, não existe 1px distinguível na largura"). Empurrar a base 1px para FORA não
   aparecia — ela cresce contra a borda do ladrilho e o olho não tem referência para comparar.
   Estreitar a FOLHA cria o degrau visível: o papel fica encaixado, com o metal aparecendo de
   cada lado — que é a leitura de estante que o Tony pediu (e a opção que ele preferiu).
   ⚠️ O recuo é do `.mn-tile-zoom` (o papel), com o `.mn-tile-sheet` continuando a recortar —
   assim o metal ocupa a largura toda e só o papel encolhe. ⛔ NÃO estreitar o `.mn-tile-sheet`:
   ele é a caixa inteira, e encolher tudo junto reproduz o rente. */
/* ══ ✨ ESC-140 · DUAS ÁREAS CLICÁVEIS, DOIS HOVERS (2026-08-21, Tony: "quando o mouse estiver
   em cima da folha branca do DOC deve brilhar (externo); quando estiver em cima da placa de
   metal ela deve reluzir (interno)").
   O ladrilho da medalha tem DOIS destinos: a folha abre o documento, a placa abre a lista de
   assinaturas. Um hover só para os dois mentiria sobre onde o clique vai cair.
   ⚠️ A FOLHA brilha para FORA: sobe 2px e a sombra cresce — o gesto de tirar da estante.
      (É o hover que o ladrilho já tinha; aqui ele só passa a valer para o papel.)
   ⚠️ A PLACA reluz para DENTRO: o lustro do gradiente ANDA (`background-position`) e o brilho
      interno acende. Ela não se move — placa presa na estante não salta, e mover só a base
      descolaria o papel que está encaixado nela.
   ⛔ NÃO deixar o hover do `.mn-tile` elevar a folha quando o mouse está na placa: o cartão
      inteiro subiria por causa de um alvo interno, e o usuário perde a noção do que clicou.
   ⚠️ O gradiente ganha `background-size:220%` para ter para onde deslizar — com 100% o
      `background-position` não muda nada. */
.mn-tile.sig:has(.mn-tile-panel:hover):hover .mn-tile-sheet{transform:none;
  box-shadow:0 1px 2px oklch(.2 .02 60/.18),0 10px 22px -12px oklch(.2 .02 60/.5)}
/* a folha, quando o mouse está NELA: o brilho externo de sempre (o `.mn-tile:hover` cuida) */

/* ⚠️ A FOLHA É VAZADA — O DEGRAU É CONTRA O FUNDO, NÃO DENTRO DO CARTÃO (2026-08-21, Tony:
   "você só colou uma tira dourada ao redor da folha, enquanto eu imaginava uma folha vazada;
   como a folha fica 1px menor de cada lado, o fundo escuro ia ficar com um degrau quando ela
   chegasse na altura do metal").
   Duas tentativas erradas antes: (1) empurrar a base 1px para FORA — cresce contra a borda do
   ladrilho, sem referência para o olho; (2) pintar o `.mn-tile-sheet` de ouro e recuar o papel
   — vira tira dourada DENTRO da mesma silhueta, e por isso continuava rente.
   O que resolve é a SILHUETA ficar diferente: o papel 1px mais estreito, o fundo da página
   aparecendo nesses 2px, e a base de metal na largura CHEIA. Aí o degrau existe de verdade —
   o metal se projeta para fora do papel e a parede escura desenha o ressalto.
   ⛔ NÃO pôr fundo (branco OU ouro) no `.mn-tile-sheet`: qualquer preenchimento ali refaz a
      silhueta única e mata o vazado. O branco pertence ao PAPEL (`.mn-tile-zoom`).
   ⚠️ A sombra também é do papel, não da caixa — senão ela desenha a silhueta antiga. */
.mn-tile.sig .mn-tile-sheet{background:none;box-shadow:none;overflow:visible}
/* ⚠️ 1px, NÃO 2 (2026-08-21, Tony: "aí exagerou um pouco, a medida certa é só 1px"): com 2px o
   ressalto vira uma moldura visível e o papel parece menor que o cartão; com 1px ele é só o
   fio de sombra que diz "a folha está encaixada". ⛔ NÃO aumentar para "ficar mais claro". */
/* 🐞 O CANTO QUE "ESTRAGAVA" A BASE ERA O DO PAPEL (2026-08-21, Tony 3×). O painel e o carimbo
   já estavam arredondados — o `elementFromPoint` no canto devolvia o `.mn-tile-sheet`, prova de
   que os dois recuavam certo. Só que o `.mn-tile-zoom` vai de `inset:0` até o fundo com o canto
   INFERIOR quadrado, e é o branco dele que aparecia atrás do arredondado dos outros dois.
   ⚠️ TODA CAMADA que chega ao rodapé precisa do MESMO raio — papel, painel e carimbo. Uma só
   quadrada estraga as três. ⛔ NÃO arredondar só quem "parece" estar na frente. */
.mn-tile.sig .mn-tile-zoom{left:1px;right:1px;background:#fff;border-radius:6px;
  box-shadow:0 1px 2px oklch(.2 .02 60/.18),0 10px 22px -12px oklch(.2 .02 60/.5)}
/* ⚠️ QUEM FECHA A PEÇA É A BASE, ENTÃO O RAIO É DELA (2026-08-21, Tony: "só deixar a borda de
   baixo arredondada, igual ao topo da folha"). Com o `.mn-tile-sheet` em `overflow:visible`
   (o vazado exige isso), ninguém recorta mais — o canto inferior tem de vir do próprio metal.
   ⚠️ São DOIS elementos empilhados: o painel de ouro e, dentro dele, a faixa do carimbo no
   rodapé. O raio vai nos dois, senão o quadrado de um aparece atrás do arredondado do outro.
   ⚠️ 3px = o mesmo raio do topo da folha (`.mn-tile-sheet{border-radius:3px}`), que é o que o
   Tony pediu. ⛔ NÃO usar um raio próprio aqui: divergiria do topo no dia em que ele mudar. */
/* 🐞 O RAIO NÃO PEGAVA PORQUE O SELETOR ESTAVA DECLARADO DE NOVO MAIS ABAIXO (2026-08-21,
   Tony 2×: "as bases ainda não estão arredondadas"). O bloco do painel adiante trazia
   `border-radius:0` — mesma especificidade, ordem manda, e o zero ganhava.
   ⚠️ Ao mexer no CSS do X-DOC, procure se o seletor não reaparece adiante: este bloco cresceu
   por camadas. ⛔ NÃO resolver com `!important`: esconde o motivo e o próximo conserto erra. */
/* 🐞 `background-size`/`-position` DEPOIS do shorthand `background` (2026-08-21): declarados
   antes, o shorthand os reseta para `auto` / `0% 0%` e o lustro não tinha para onde deslizar —
   o relume simplesmente não acontecia. ⛔ NÃO misturar shorthand e longhand na ordem errada. */
/* 📐 v3c/v3d (2026-08-23, Tony: "respiro sobre o carimbo" + "denivelamento quando não está
   em vigor — tudo na mesma altura"): padding-bottom IGUAL (30px) em TODA placa da medalha, e
   o carimbo em bottom:8px em TODAS — no vigor a bateria ocupa os 8px; fora dele fica o trilho
   de metal vazio, a MESMA silhueta. ⛔ NÃO condicionar padding/bottom ao .vg-on: foi isso que
   desnivelou as placas (9px de diferença aparecia no TOPO, porque o painel cresce para cima). */
.mn-tile.sig .mn-tile-panel{bottom:0;padding:12px 8% 30px;border-radius:0 0 6px 6px;overflow:hidden;
  transition:background-position .45s ease,box-shadow .2s ease,filter .2s ease;
  background:linear-gradient(118deg,oklch(.93 .07 88) 0%,oklch(.88 .11 85) 34%,oklch(.97 .05 92) 52%,oklch(.86 .12 82) 70%,oklch(.91 .08 86) 100%);
  border-top:1px solid oklch(.78 .11 80);
  box-shadow:0 1px 0 oklch(1 0 0/.5) inset,0 -3px 10px oklch(.55 .09 78/.16);
  color:oklch(.28 .05 75);background-size:220% 100%;background-position:38% 0}
/* a faixa de assinaturas é CONTEÚDO da base, não uma pastilha em cima dela */
/* 🐞 OS DISCOS INVADIAM O CARIMBO (2026-08-21, Tony): o `.mn-tile-revs` é ABSOLUTO no rodapé
   (17px), então ele não empurra nada — o padding de 9px não dava conta e as fotos entravam por
   baixo da faixa de status. O rodapé do conteúdo reserva a altura da faixa + folga.
   ⛔ NÃO diminuir o disco para caber: o rosto é a informação da capa. */
.mn-tile-sg{cursor:pointer;background:none;border:0;margin:0;padding:0 0 23px;
  color:oklch(.26 .05 74);transition:opacity .12s}
/* ✨ o relume: o lustro desliza pela placa e a luz interna acende. ⛔ NÃO usar `opacity` (o
   metal esmaece em vez de reluzir) nem `transform` (a placa está presa na estante). */
.mn-tile.sig .mn-tile-panel:hover{background-position:70% 0;filter:saturate(1.12) brightness(1.05);
  box-shadow:0 1px 0 oklch(1 0 0/.85) inset,0 0 22px oklch(.95 .09 90/.55) inset}
/* 🥇 ESC-150 · SÓ CONTRATO ATIVO É OURO (2026-08-22, Tony). Fora do vigor o metal vira prata
   fosca — troca-se o GRADIENTE e o lustro continua deslizando no hover (background-position
   não é sobrescrito). ⚠️ DEPOIS da regra de hover de propósito: no mesmo peso (0,3,1), a
   última vence — apagado continua apagado sob o mouse, sem o brilho dourado interno.
   ⛔ NÃO usar `filter` aqui: mataria o vermelho da pendência e o verde do carimbo dentro
   da faixa. ⛔ NÃO escurecer o texto além disso: o painel apagado ainda se lê. */
/* ✨ ESC-151 · O ATIVO RELUZ SOZINHO de tempo em tempo (2026-08-22, Tony): uma faixa de luz
   varre o ouro a cada ~7s — passa em ~1,2s e descansa o resto do ciclo (brilho constante
   vira ruído; o raro é que parece vivo). Vive num ::after próprio para NÃO disputar o
   `background-position` do relume de hover (animação venceria a transição e o hover morreria).
   ⚠️ Só no `.vg-on`: o fosco não reluz — o brilho é o privilégio do que está valendo.
   ⚠️ `pointer-events:none` (a placa é clicável) e o painel já tem `overflow:hidden`. */
.mn-tile.sig.vg-on .mn-tile-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 42%,oklch(1 0 0/.42) 50%,transparent 58%) no-repeat;background-size:240% 100%;background-position:-170% 0;animation:mnShine 7s ease-in-out infinite}
@keyframes mnShine{0%{background-position:-170% 0}17%{background-position:170% 0}100%{background-position:170% 0}}
@media (prefers-reduced-motion: reduce){.mn-tile.sig.vg-on .mn-tile-panel::after{animation:none}}
.mn-tile.sig:not(.vg-on) .mn-tile-panel{background-image:linear-gradient(105deg,oklch(0.8 0.008 88),oklch(0.72 0.008 88) 38%,oklch(0.87 0.006 88) 55%,oklch(0.7 0.008 88));color:oklch(0.34 0.012 88);box-shadow:0 1px 0 oklch(1 0 0/.5) inset,0 -3px 10px oklch(0.4 0.01 88/.14)}
.mn-tile-sg:hover{opacity:1}
.mn-tile.sig .mn-tile-panel{cursor:pointer}
.mn-tile-sg:active{transform:translateY(1px)}
.mn-tile-sg .mn-tile-sg-l,.mn-tile-sg .mn-tile-sg-n{color:oklch(.33 .06 72)}
/* aro claro nos discos para destacarem do ouro */
.mn-tile-sg .mn-tile-sg-d,.mn-tile-sg .mn-tile-sg-more{border-color:oklch(.97 .03 90)}
.mn-tile-sg .mn-tile-sg-more{background:oklch(.97 .03 90);color:oklch(.38 .06 72)}
.mn-tile-sg .mn-tile-sg-d.pend{border-color:oklch(.72 .08 78);opacity:.62}
/* ⚠️ o carimbo vira faixa DENTRO do metal: fundo próprio sai, fica só o filete que a separa.
   ⛔ NÃO deixar o azul/verde de fundo — sobre ouro ele voltaria a parecer etiqueta colada. */
.mn-tile.sig .mn-tile-revs{background:oklch(.86 .09 84/.55);color:oklch(.30 .06 72);border-radius:0 0 6px 6px;
  border-top:1px solid oklch(.79 .1 80)}
/* 🔋 o carimbo é faixa do MEIO em TODA placa da medalha (v3d): raio de fechamento é do clip
   do painel; sob o carimbo, bateria (vigor) ou trilho vazio (demais) — mesma altura sempre. */
.mn-tile.sig .mn-tile-revs{bottom:8px;border-radius:0}
.mn-tile.sig .mn-tile-revs .mn-tile-emo{filter:saturate(.9)}

/* ── a lista dos assinantes ─────────────────────────────────────────────────────────────
   ⚠️ Rola em Y com `max-height`: é a peça que precisa aguentar CENTENAS de assinaturas, e
      aqui rolar é legítimo (é uma lista, não uma faixa de capa). */
.mn-sgl-dlg{max-width:440px}
.mn-sgl-l{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow:auto;margin:2px 0 4px}
.mn-sgl-r{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 4px;border-bottom:1px solid var(--border-soft)}
.mn-sgl-r:last-child{border-bottom:0}
.mn-sgl-r.pend{opacity:.62}
.mn-sgl-f{flex:none;width:34px;height:34px;aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--bg-base)}
.mn-sgl-f img{width:100%;height:100%;object-fit:cover;display:block}
.mn-sgl-f.ini{font-size:12px;font-weight:700;background:oklch(.62 .13 var(--h,32));color:oklch(.99 .01 var(--h,32))}
.mn-sgl-r.pend .mn-sgl-f{border:1px dashed var(--border-soft)}
.mn-sgl-r.pend .mn-sgl-f img{filter:grayscale(1)}
.mn-sgl-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mn-sgl-m strong{font-size:13.5px;line-height:1.3}
.mn-sgl-m i,.mn-sgl-m u{font-style:normal;text-decoration:none;font-size:11px;color:var(--text-dim);line-height:1.35}
.mn-sgl-lv{flex:none;display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim);margin-left:auto}
/* no estreito o meio força largura mínima e a medalha embrulha para a linha de baixo,
   alinhada sob o texto (44px = foto+gap) */
.mn-sgl-m{min-width:150px}
.mn-sgl-r>.mn-sgl-lv{padding-left:0}
.mn-sgl-r .mn-sgl-lv:last-child{margin-left:auto}
.mn-sgl-lv em{font-style:normal}

/* ══ ✍️ ESC-160 · A VIA DE IGUAL TEOR (cartão-entrega do ciclo que fecha) ══════════════
   Metal APAGADO (prata fosca) enquanto a via não confirmou chegada; DOURADO quando o laço
   fecha. Reusa a linguagem de metal do ladrilho (ESC-150), agora dentro do balão do chat.
   ⛔ NÃO usar cadeado/medalha de estado: o metal É o estado. ⚠️ O apagado NUNCA diz "em
   vigor" — é "ainda não protegido" (ESC-161). */
.ft-doc.via{position:relative;overflow:hidden;border:none;background-image:linear-gradient(105deg,oklch(.8 .008 88),oklch(.72 .008 88) 38%,oklch(.87 .006 88) 55%,oklch(.7 .008 88));color:oklch(.3 .02 85);box-shadow:0 1px 0 oklch(1 0 0/.5) inset,0 -3px 10px oklch(.4 .01 88/.14);transition:background-image .6s ease,box-shadow .6s ease,filter .6s ease}
/* ⚠️ ESC-160b · contraste: no dourado o texto é MARROM-ESCURO (>=4.5:1), nunca o branco/cinza
   claro que sumia. O kicker e o estado herdam o mesmo escuro. */
.ft-doc.via .xd-k{color:oklch(.42 .05 78);opacity:1}
.ft-doc.via strong{color:oklch(.26 .02 85)}
.ft-doc.via .ft-doc-st{color:oklch(.38 .03 80)}
.ft-doc.via.closed{background-image:linear-gradient(105deg,oklch(.9 .075 92),oklch(.82 .1 86) 34%,oklch(.96 .05 95) 52%,oklch(.8 .1 84));box-shadow:0 1px 0 oklch(1 0 0/.9) inset,0 0 22px oklch(.95 .1 90/.55) inset,0 6px 18px -8px oklch(.7 .12 82/.55)}
.ft-doc.via.closed strong{color:oklch(.24 .05 74)}
.ft-doc.via.closed .xd-k{color:oklch(.46 .12 72)}
.ft-doc.via.closed .ft-doc-st{color:oklch(.36 .07 74)}
.ft-doc.via.closed .ft-doc-ic{filter:saturate(1.12) brightness(1.03)}
/* ✨ o brilho passando: uma faixa de luz que varre a cápsula fechada (o "passando um brilho") */
.ft-via-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 34%,oklch(1 0 0/.55) 48%,transparent 62%);background-size:260% 100%;background-position:150% 0;opacity:0}
.ft-doc.via.closed .ft-via-shine{opacity:1;animation:ftViaShine 3.4s ease-in-out infinite}
@keyframes ftViaShine{0%{background-position:150% 0}60%,100%{background-position:-150% 0}}
@media (prefers-reduced-motion:reduce){.ft-doc.via.closed .ft-via-shine{animation:none;opacity:0}}
/* 🥇 os dois rostos: 1 disco (V) no apagado vira 2 (V V) quando fecha — o par de igual teor */
.ft-via-r{display:flex;align-items:center;gap:9px;margin:1px 0 1px}
.ft-via-faces{display:flex}
.ft-via-f{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 10px/1 Geist,-apple-system,sans-serif;color:#fff;background:oklch(.56 .13 var(--h));border:2px solid oklch(.93 .06 92);margin-left:-7px;box-shadow:0 1px 3px oklch(.3 .05 80/.45)}
.ft-via-f:first-child{margin-left:0}
.ft-via-r i{font-style:normal;font-size:.7rem;color:oklch(.42 .05 78)}

/* ✨ ESC-160c v2 · confete que IRROMPE da cápsula (não cai da barra): partículas radiais a
   partir de um ponto fixo no centro do cartão-via, como o burst do Airdrop. Autolimpa 1,8s. */
.ft-burst{position:fixed;width:0;height:0;pointer-events:none;z-index:9999}
.ft-burst i{position:absolute;left:0;top:0;width:9px;height:13px;margin:-6px 0 0 -4px;border-radius:2px;opacity:1;box-shadow:0 1px 2px rgba(40,30,10,.28);animation:ftBurst var(--d,1s) cubic-bezier(.15,.7,.3,1) forwards}
@keyframes ftBurst{0%{transform:rotate(var(--a,0)) translateY(0) scale(.5);opacity:1}70%{opacity:1}100%{transform:rotate(var(--a,0)) translateY(calc(var(--dist,120px) * -1)) rotate(340deg) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.ft-burst{display:none}}

/* ⏳ ESC-163 · o prazo da oferta no diálogo do rigor — pílulas mono; zero = sem prazo.
   ✒ O rótulo é NEGRITO no violeta do assinante (2026-08-24, Tony: "negrito com tom de azul") —
   o mesmo oklch 288 do ESC-169; o "azul" da casa É esse violeta, ⛔ não inventar azul novo. */
.mn-rig-val{display:flex;flex-direction:column;gap:7px;margin:12px 2px 0}
.mn-rig-val>em{font-style:normal;font-weight:700;font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:oklch(0.74 0.14 288)}
body:not(.theme-dark) .mn-rig-val>em{color:oklch(0.47 0.21 288)}
.mn-rig-val-l{display:flex;gap:6px;flex-wrap:wrap}
.mn-rig-vb{padding:5px 11px;border:1px solid var(--border-soft,#3a382f);border-radius:999px;background:none;color:var(--text-mute,#b9b3a4);font-size:.66rem;letter-spacing:.03em;cursor:pointer}
.mn-rig-vb.on{border-color:var(--accent,#d9a13a);color:var(--accent,#d9a13a);background:color-mix(in oklab,var(--accent,#d9a13a) 12%,transparent)}
.mn-rig-val-d{font-style:normal;font-size:.62rem;line-height:1.5;color:var(--text-dim,#8d8778)}
/* a barra da oferta caída na cerimônia: âmbar de aviso — decisão encerrada não pisca */
.ms-bar-m.exp strong{color:oklch(0.78 0.13 65)}
.ms-bar-m.exp em{color:oklch(0.66 0.06 70)}

/* 📜 ESC-165 · o extrato do dashboard (toque abre) — linha: nome · estado · ±valor */
.mn-dash.tap{cursor:pointer}
.mn-dash.tap:hover{border-color:color-mix(in oklab,oklch(0.62 0.11 78) 45%,transparent)}
.mn-dash-ext{display:flex;flex-direction:column;gap:6px;margin-top:4px;padding-top:9px;border-top:1px dashed var(--border-soft,#d9d4c8)}
.mn-dash-ext-r{display:flex;align-items:baseline;gap:9px;font-size:.68rem}
.mn-dash-ext-r b{font-weight:500;color:var(--text,#2a2721);min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-dash-ext-r i{font-style:normal;flex:none;font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:oklch(0.5 0.12 155)}
.mn-dash-ext-r i.ag{color:var(--text-dim,#6b675e)}
.mn-dash-ext-r em{font-style:normal;flex:none;font-weight:600;color:var(--text,#2a2721)}
.mn-dash-ext-r em.out{color:oklch(0.5 0.19 25)}
.theme-dark .mn-dash-ext-r i{color:oklch(0.76 0.13 158)}
.theme-dark .mn-dash-ext-r em.out{color:oklch(0.72 0.16 28)}

/* 💱 ESC-165e · o carimbo nunca quebra em duas linhas: curto por regra, reticências por garantia */
.mn-tile-revs em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* 🔋 ESC-167 v3 · a BATERIA de vigência na BASE do metal (Tony: "verde, como bateria
   enchendo, embaixo"): faixa colada sobre o carimbo de estado (bottom = 17px, a altura dele),
   células verdes enchendo com o decorrido, brilho de carga. QUENTE (últimos 20% ou ≤30d sem
   renovação) vira âmbar. Perpétuo: trilho verde suave com brilho varrendo + title ∞.
   ⚠️ pointer-events:none — a placa embaixo é clicável (ESC-154). ⛔ NUNCA redeclarar
   `position` do painel.
   🔄 v3b (Tony): a bateria é o RODAPÉ da peça (bottom:0) e o carimbo sobe para cima dela —
   só nos ladrilhos COM bateria (.vg-on): nos demais o carimbo continua fechando a base.
   O raio inferior vem do CLIP do painel (overflow:hidden), nunca da bateria. */
.mn-vbar{position:absolute;left:0;right:0;bottom:0;height:8px;z-index:2;background:oklch(0.22 0.02 150/.6);box-shadow:inset 0 1px 2px rgba(0,0,0,.55),inset 0 -1px 0 oklch(1 0 0/.1);overflow:hidden;pointer-events:none}
.mn-vbar b{display:block;height:100%;max-width:100%;background:repeating-linear-gradient(90deg,oklch(0.7 0.19 145) 0 7px,oklch(0.79 0.2 147) 7px 8px);box-shadow:0 0 9px 1px oklch(0.78 0.2 145/.65);border-radius:0 2px 2px 0}
.mn-vbar.hot b{background:repeating-linear-gradient(90deg,oklch(0.68 0.15 58) 0 7px,oklch(0.78 0.15 62) 7px 8px);box-shadow:0 0 9px 1px oklch(0.74 0.16 58/.65)}
.mn-vbar.inf{background:linear-gradient(90deg,oklch(0.45 0.09 148/.6),oklch(0.55 0.11 148/.6))}
.mn-vbar.inf::after{content:"";position:absolute;inset:0;width:38%;background:linear-gradient(90deg,transparent,oklch(0.85 0.17 147/.85),transparent);animation:mnVbarInf 2.8s linear infinite}
@keyframes mnVbarInf{0%{transform:translateX(-110%)}100%{transform:translateX(290%)}}
@media (prefers-reduced-motion:reduce){.mn-vbar.inf::after{animation:none;opacity:0}}

/* 📅 ESC-168b · o aviso do início futuro na placa — verde da bateria, mesma informação */
.mn-vg-start{margin:-4px 0 0;font-size:.66rem;letter-spacing:.03em;color:oklch(0.62 0.14 148)}
.theme-dark .mn-vg-start{color:oklch(0.75 0.16 147)}

/* ✒ ESC-169 · A 2ª COR DA PLACA É O VIOLETA DO ASSINANTE (2026-08-23, Tony: "pega o tom de
   azul de destaque do formulário da assinatura Ouro e põe no INÍCIO/FIM e onde couber uma
   segunda cor"). É o MESMO violeta do cofre (--sgac, .mn-lv oklch 288) — a placa gere o
   instrumento ASSINADO, então a cor de marcação é a da identidade de quem assina.
   ⛔ NÃO inventar azul novo; ⛔ NÃO pintar o que já tem cor semântica (rescindir vermelho,
   início-futuro verde-bateria, recusa tinta). Par claro/escuro idêntico ao .mn-lv. */
.mn-vg-h{color:oklch(0.47 0.21 288)}
.mn-vg-f>span.mono{color:oklch(0.47 0.21 288);opacity:.88}
.mn-vg-t input[type="checkbox"]{accent-color:oklch(0.47 0.21 288)}
.theme-dark .mn-vg-h{color:oklch(0.74 0.14 288)}
.theme-dark .mn-vg-f>span.mono{color:oklch(0.74 0.14 288)}

/* ♾ ESC-170 · o check do prazo indeterminado: pílula ∞ ao lado do FIM — marcada, o campo
   apaga (a informação é "não há fim", não "fim vazio"). Violeta do assinante quando ativa. */
.mn-vg-f.off{opacity:.45}
.mn-vg-inf{display:inline-flex;align-items:center;justify-content:center;gap:6px;align-self:flex-end;flex:0 1 auto;padding:7px 12px;border-radius:999px;border:1px solid oklch(0.47 0.21 288/.35);cursor:pointer;font-size:.66rem;letter-spacing:.03em;color:oklch(0.47 0.21 288);user-select:none}
.mn-vg-inf input{position:absolute;opacity:0;pointer-events:none}
.mn-vg-inf b{font-weight:700;font-size:.9rem;line-height:1}
.mn-vg-inf.on{background:oklch(0.47 0.21 288/.12);border-color:oklch(0.47 0.21 288/.75)}
.theme-dark .mn-vg-inf{color:oklch(0.74 0.14 288);border-color:oklch(0.74 0.14 288/.4)}
.theme-dark .mn-vg-inf.on{background:oklch(0.74 0.14 288/.16);border-color:oklch(0.74 0.14 288/.8)}

/* ∅ ESC-172 · trilho vazio e parado: datas em branco — a calha nua, sem carga nem brilho */
.mn-vbar.nil{background:oklch(0.3 0.025 78/.45)}

/* 🔄 ESC-173 · renovado automaticamente: bateria CHEIA com o brilho varrendo por cima do ouro */
.mn-vbar.ren{overflow:hidden}
.mn-vbar.ren b{background:linear-gradient(90deg,#8f6510,#d9a13a 55%,#ffe184);box-shadow:0 0 8px 1px oklch(0.82 0.12 86/.7)}
.mn-vbar.ren::after{content:"";position:absolute;inset:0;width:38%;background:linear-gradient(90deg,transparent,oklch(0.99 0.05 95/.85),transparent);animation:mnVbarInf 2.4s linear infinite}
@media (prefers-reduced-motion:reduce){.mn-vbar.ren::after{animation:none;opacity:0}}

/* 📊 ESC-174 · a prévia viva da vigência na placa: a MESMA .mn-vbar do ladrilho, mas em fluxo
   (o trilho do ladrilho é absolute na costura — aqui vira pílula relativa) + rótulo mono. */
.mn-vg-live{display:flex;align-items:center;gap:9px;margin:-2px 0 2px}
.mn-vg-live .mn-vbar{position:relative;inset:auto;flex:1;height:6px;border-radius:999px;overflow:hidden}
.mn-vg-live .mn-vbar b{border-radius:999px}
.mn-vg-live>span{flex:none;font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim)}
.mn-vg-live .mn-vbar.hot+span{color:oklch(0.62 0.15 55)}
.mn-vg-live .mn-vbar.ren+span,.mn-vg-live .mn-vbar.inf+span{color:oklch(0.62 0.11 84)}
.theme-dark .mn-vg-live .mn-vbar.ren+span,.theme-dark .mn-vg-live .mn-vbar.inf+span{color:oklch(0.8 0.1 86)}

/* 🔌 ESC-174b · prévia rescindida: rótulo em tinta de recusa, trilho nu */
.mn-vg-live .mn-vbar.nil+span{color:var(--text-dim)}

/* 🔌 ESC-176 · prévia rescindida em TINTA: trilho nu + rótulo vermelho; ∞ travada apaga */
.mn-vg-live .mn-vbar.res{background:oklch(0.3 0.025 78/.45)}
.mn-vg-live .mn-vbar.res+span{color:oklch(0.5 0.19 25)}
.theme-dark .mn-vg-live .mn-vbar.res+span{color:oklch(0.68 0.19 25)}
.mn-vg-inf.off{opacity:.4;pointer-events:none}

/* 🔌 ESC-176c · a data do ATO de rescindir, embaixo do botão — tinta, nunca no campo FIM */
.mn-vg-resc-at{margin:-4px 0 0;font-size:.66rem;letter-spacing:.03em;color:oklch(0.5 0.19 25)}
.theme-dark .mn-vg-resc-at{color:oklch(0.68 0.19 25)}

/* ⏳ ESC-163b · a oferta com prazo no cartão da bolha: kicker expirado em tinta; linha de
   validade sob o nome (correndo = dim, vencida = tinta). */
.ft-doc .xd-k.exp{color:oklch(0.55 0.19 25)}
.ft-doc .xd-until{display:block;font-size:.6rem;letter-spacing:.04em;color:var(--text-dim)}
.ft-doc .xd-until.exp{color:oklch(0.55 0.19 25)}