/* Linguagem visual do FluxoWhatsApp para todas as superfícies. */
:root {
  --ink: #090b0c;
  --surface: #131719;
  --surface-raised: #1a2022;
  --surface-hover: #242b2d;
  --line: #343e40;
  --line-soft: #293133;
  --text: #f6f4eb;
  --muted: #b6c0bd;
  --accent: #ffdb45;
  --accent-soft: #ffe782;
  --danger: #ff877d;
  --radius: 16px;
  --shadow: 0 20px 60px #0005;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--text); }
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 3px;
}
button:disabled { opacity: .55; }
::selection { background: #f7d747; color: #111410; }

/* Navegação: marca, seções e ações têm pesos visuais diferentes. */
.topbar { height: 76px; min-height: 76px; background: #0b0e0f; border-bottom-color: #2c3436; }
.brand { font-size: 19px; letter-spacing: -.045em; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; background: var(--accent); color: #11130d; box-shadow: 0 0 0 5px #ffdb4512, 0 12px 30px #ffdb451b; }
.brand small { border-left: 1px solid #4a514b; padding-left: 15px; color: #b1bcb9; }
.workspace-label { color: #b2bcb9; }
.tabs { height: 58px; background: #101415; gap: 3px; scrollbar-width: thin; scrollbar-color: #515d58 transparent; }
.tab { font-size: 13px; font-weight: 700; color: #b0bab7; padding: 0 17px; transition: color .18s, background .18s; }
.tab:hover { color: var(--text); background: #ffffff08; }
.tab.active { color: var(--accent); }
.tab.active:after { height: 3px; left: 17px; right: 17px; }
.flow-controls { background: #161b1d; border-bottom-color: #3d4748; }
.flow-controls .eyebrow { font-size: 10px; color: #b2bcb8; }
.flow-controls .header-field select, .flow-controls .flow-name-wrap input { height: 40px; border-radius: 9px; background: #0d1213; border-color: #4c5859; }
.flow-controls .header-field select:hover, .flow-controls .flow-name-wrap input:hover { border-color: #788682; }
.flow-controls #new-flow { min-height: 40px; height: 40px; }
.flow-controls-actions { gap: 10px; }
.save-status { font-size: 12px; }
.button { min-height: 40px; padding: 10px 15px; border-radius: 10px; font-size: 12px; transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s; }
.button.primary { background: var(--accent); color: #17180e; box-shadow: 0 6px 20px #ffdb451e; }
.button.primary:hover { background: var(--accent-soft); box-shadow: 0 8px 26px #ffdb4534; transform: translateY(-1px); }
.button.ghost { background: #202728; border-color: #465251; }
.button.ghost:hover { background: #2a3434; border-color: #87948a; }
.field input, .field textarea, .field select, .option-row input, .option-row select,
.member-admin-form input:not([type="checkbox"]), .member-admin-form textarea,
.member-admin-form select, .member-admin-invite input, .member-admin-upload input,
.member-editor-dialog input, .member-editor-dialog textarea, .member-editor-dialog select {
  background: #0e1516; border-color: #53605b; color: var(--text);
}
.field input:focus, .field textarea:focus, .field select:focus,
.option-row input:focus, .option-row select:focus { box-shadow: 0 0 0 3px #ffdb4525; }
.field label, .member-admin-form label { color: #e8ebe1; }
.toggle-wrap { min-height: 40px; padding: 7px 10px; border-radius: 10px; }

/* Cabeçalhos e cartões do painel, incluindo as visões de administrador. */
.content-shell, .simulator-shell { background: radial-gradient(circle at 86% -12%, #ffe15510, transparent 35%), #0c1011; }
.content-shell { padding: clamp(28px, 3.5vw, 52px) clamp(20px, 4vw, 68px) 88px; }
.section-intro { max-width: 880px; margin-bottom: 25px; }
.section-intro .eyebrow { margin-bottom: 11px; }
.section-intro h1 { font-size: clamp(29px, 2.7vw, 42px); line-height: 1.1; margin: 0 0 10px; letter-spacing: -.05em; }
.section-intro h2 { font-size: clamp(22px, 2vw, 30px); letter-spacing: -.035em; }
.section-intro p { max-width: 72ch; font-size: 14px; line-height: 1.6; color: var(--muted); }
.eyebrow { color: var(--accent); font-size: 10px; letter-spacing: .17em; font-weight: 800; }
.account-banner { border-radius: 18px; padding: 26px 30px; background: linear-gradient(110deg,#222a27,#171d1d 65%,#292719); border: 1px solid #59614d; border-left: 4px solid var(--accent); box-shadow: var(--shadow); }
.dash-card, .plan-card, .activity-card, .setting-card, .member-admin-sidebar, .member-admin-card, .member-admin-head {
  background: #171d1e; border: 1px solid #3c4746; border-radius: var(--radius); box-shadow: 0 12px 32px #0002;
}
.dash-card { padding: 23px; border-top: 1px solid #3c4746; position: relative; overflow: hidden; }
.dash-card:before { content: ""; position: absolute; inset: 0 auto auto 0; width: 56px; height: 3px; background: var(--accent); border-radius: 0 0 4px 0; }
.dash-card strong { font-size: clamp(27px, 2.8vw, 39px); letter-spacing: -.05em; }
.dash-card span, .dash-card small, .setting-card p, .member-admin-card > p { color: var(--muted); }
.setting-card, .activity-card { padding: 24px; }
.setting-card h2, .activity-card h2 { font-size: 18px; line-height: 1.25; letter-spacing: -.025em; }
.setting-card h3 { font-size: 17px; }
.settings-grid, .activity-grid, .support-grid { gap: 18px; }
.admin-area { margin-top: 52px; padding-top: 35px; border-top: 1px solid var(--line); }
.admin-section-nav { overflow-x: auto; scrollbar-width: thin; }
.admin-section-nav button { min-height: 46px; white-space: nowrap; font-size: 13px; }
.account-row { padding: 18px 20px; background: #171d1e; border: 1px solid #3c4746; border-radius: 13px; }
.account-row strong { font-size: 14px; }
.account-row small { font-size: 12px; color: var(--muted); line-height: 1.5; }
.support-grid > .setting-card { background: #171d1e; border-color: #3c4746; padding: 24px; }
.support-item, .conversation-choice, .event, .member-space-choice { background: #101516; border-color: #374343; border-radius: 11px; }
.conversation-choice.selected, .member-space-choice.selected { border-color: var(--accent); background: #2b2b1c; }
.support-empty, .empty-list { color: var(--muted); }
.setting-result, .url-box, .flow-map-row, .info-strip { background: #0e1415; border-color: #3c4946; color: #e0e5dc; }
.setting-icon, .sim-guide-icon { background: #343520; color: var(--accent); border-radius: 10px; }
.member-admin-layout { gap: 20px; }
.member-admin-toolbar { margin: 25px 0; }
.member-admin-sidebar { position: sticky; top: 18px; }
.member-admin-head { padding: 24px; }
.member-admin-card { padding: 24px; }
.member-admin-item, .member-admin-file, .member-admin-member { border-top-color: #394544; }

/* Editor: painel de ferramentas nítido, prancheta escura e modal legível. */
.editor-shell.active { height: calc(100vh - 210px); }
.palette { background: #111718; border-right-color: #3a4545; padding: 25px 15px; }
.palette-heading { padding: 0 5px; }
.palette h2 { font-size: 19px; }
.palette-help { color: var(--muted); font-size: 12px; }
.palette-group { margin: 22px 0; }
.palette-group-title { font-size: 10px; letter-spacing: .14em; color: #aeb8b4; }
.palette-item { min-height: 58px; background: #1b2324; border: 1px solid #344042; border-radius: 11px; padding: 9px 10px; }
.palette-item:hover { background: #273031; border-color: #bcae62; }
.palette-item small { font-size: 11px; color: #abb9b3; }
.palette-icon { border-radius: 9px; }
.canvas-wrap { background-color: #0d1112; background-image: radial-gradient(#3d493f 1px, transparent 1px), linear-gradient(90deg,#ffffff06 1px,transparent 1px), linear-gradient(#ffffff06 1px,transparent 1px); }
.canvas-toolbar { top: 20px; left: 20px; padding: 9px 10px; border-radius: 12px; background: #172020f2; border-color: #56605a; box-shadow: 0 16px 35px #0009; }
.canvas-control { min-height: 34px; border-radius: 8px; }
.canvas-legend { border-radius: 10px; }
.inspector-dialog, .conversation-dialog, .confirm-dialog { border-color: #687165; border-radius: 18px; background: #171e1e; box-shadow: 0 30px 90px #000c; }
.inspector-dialog-bar, .inspector-dialog-foot, .conversation-dialog-head, .conversation-dialog-foot { background: #202828; }
.inspector-dialog-foot { min-height: 65px; }
.conversation-dialog-body { background: #171e1e; }
.node { box-shadow: 0 14px 35px #0009; }

/* A prévia é a peça principal do simulador. */
.simulator-shell { padding: clamp(28px, 3.5vw, 52px) clamp(20px, 4vw, 68px) 80px; }
.simulator-shell .section-intro { max-width: 1100px; margin: 0 auto 25px; }
.simulator-layout { align-items: start; }
.sim-guide { padding-top: 18px; }
.sim-guide h2 { font-size: clamp(22px, 2vw, 29px); letter-spacing: -.035em; }
.sim-guide-card, .payment-sim-actions { border-radius: 13px; background: #1a2222; border-color: #43504a; }
.phone { border-color: #55605a; box-shadow: 0 35px 75px #000c, 0 0 0 1px #9da79855; }
.phone-header { background: #f7f7f3; }
.chat { background: #eae7de; }
.chat-form input { font-size: 16px; }

/* Entrada e cadastro: a marca aparece sem distrair do formulário. */
.login-shell { grid-template-columns: minmax(420px, 1.03fr) minmax(390px, .97fr); }
.login-feature { padding: clamp(32px, 3.8vw, 64px); background: radial-gradient(circle at 90% 10%,#ffdb4523,transparent 32%), linear-gradient(140deg,#0f1516,#1e2725 63%,#121817); border-right-color: #394640; }
.login-feature:before { background-size: 28px 28px; opacity: .55; }
.login-feature:after { width: 560px; height: 560px; right: -180px; bottom: -200px; border-color: #e2c6384a; box-shadow: 0 0 0 52px #e6bd250b,0 0 0 110px #e6bd2508; }
.login-brand { font-size: 22px; }
.login-brand .brand-mark { width: 44px; height: 44px; }
.login-feature-copy { max-width: 610px; }
.login-feature-copy h1 { font-size: clamp(44px, 4.5vw, 74px); max-width: 12ch; line-height: 1.03; letter-spacing: -.065em; }
.login-feature-copy p { font-size: 17px; color: #c7d1ca; }
.login-explore { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 0; color: var(--accent); font-size: 13px; font-weight: 750; text-decoration: none; border-bottom: 1px solid #ffdb4570; }
.login-explore:hover { color: #fff0a0; border-bottom-color: currentColor; }
.login-feature-footer { padding-top: 22px; border-top: 1px solid #85916d55; color: #c8d1c3; }
.login-form-side { background: radial-gradient(circle at 85% 5%,#aa903511,transparent 34%), #0c1112; }
.login-card { width: min(100%, 440px); padding: 26px 0; }
.login-symbol { width: 48px; height: 48px; border-radius: 13px; margin-bottom: 29px; }
.login-card h2 { font-size: clamp(29px, 3vw, 36px); letter-spacing: -.045em; }
.login-card > p { font-size: 14px; line-height: 1.55; margin-bottom: 25px; color: var(--muted); }
.login-card form label { font-size: 13px; color: #e6eae1; }
.login-card form input { min-height: 48px; font-size: 16px; background: #1a2222; border: 1px solid #53605b; }
.login-card form input::placeholder { color: #a0aca4; }
.login-password button { min-height: 32px; }
.login-submit { min-height: 48px; font-size: 14px; }
.login-help { font-size: 12px; color: #b5c0b8; border-top-color: #39453f; }
.login-help a { color: var(--accent); }
.terms-check { color: #dce5d7; }
.login-card form .terms-check input { width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; margin-top: 2px; }

/* Área de membros e documentos legais: a mesma marca em uma leitura mais calma. */
.public-header { max-width: none; min-height: 76px; padding: 14px clamp(20px,4vw,68px); background: #0b0e0f; border-bottom-color: #34403e; }
.public-brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 19px; letter-spacing: -.035em; color: var(--text); }
.public-brand::first-letter { color: var(--accent); }
.public-header nav { gap: 4px; }
.public-header nav a, .public-header nav button { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 12px; color: #cbd3cb; text-decoration: none; border-radius: 8px; font-weight: 650; }
.public-header nav a:hover, .public-header nav button:hover { color: var(--accent); background: #ffffff0c; }
.public-footer { max-width: none; margin-top: 65px; padding: 26px clamp(20px,4vw,68px); border-top-color: #34403e; background: #0d1213; }
.public-footer span { margin-right: auto; color: var(--text); font-weight: 750; }
.public-footer a { color: #c2ccc4; }
.member-shell { max-width: 1320px; padding: 42px clamp(20px,4vw,68px) 70px; }
.member-hero { min-height: 330px; background: linear-gradient(120deg,#1d2624,#171d1d); border-color: #4b5850; border-radius: 20px; box-shadow: var(--shadow); }
.member-cover { min-height: 330px; }
.member-hero-copy { padding: clamp(28px,5vw,64px); }
.member-hero h1 { font-size: clamp(33px,4vw,55px); max-width: 16ch; letter-spacing: -.05em; }
.member-hero p { font-size: 15px; line-height: 1.65; color: #c2ccc4; }
.member-section-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-top: 48px; }
.member-section-head h2 { font-size: clamp(25px,2.5vw,32px); letter-spacing: -.035em; }
.member-grid { gap: 20px; }
.member-card { background: #171e1e; border-color: #3b4843; border-radius: 16px; box-shadow: 0 14px 35px #0003; transition: border-color .2s, transform .2s, box-shadow .2s; }
.member-card:hover { border-color: #b6a448; transform: translateY(-3px); box-shadow: 0 21px 42px #0005; }
.member-media { background: #0c1313; min-height: 190px; }
.member-card-body { padding: 21px; }
.member-card-body h3 { font-size: 17px; letter-spacing: -.02em; }
.member-card-body p { color: var(--muted); }
.member-auth, .legal-request { background: #171e1e; border-color: #46524b; border-radius: 17px; box-shadow: 0 15px 38px #0003; }
.member-auth { padding: 32px; }
.member-auth h1, .member-auth h2 { font-size: 27px; letter-spacing: -.035em; }
.member-auth form, .legal-request form { gap: 11px; }
.member-auth input, .legal-request input, .legal-request textarea, .legal-request select { min-height: 46px; font-size: 16px; background: #0d1414; border-color: #59675d; }
.member-auth button, .legal-request button { min-height: 44px; border-radius: 9px; background: var(--accent); }
.member-support { border-top-color: var(--line); }
.legal-shell { max-width: 1080px; padding: 45px clamp(20px,4vw,68px) 70px; }
.legal-lead { padding: 18px 0 32px; border-bottom-color: var(--line); }
.legal-lead h1 { max-width: 17ch; letter-spacing: -.05em; }
.legal-lead p { font-size: 15px; line-height: 1.65; }
.legal-section { padding: 27px 0; border-bottom-color: var(--line); }
.legal-section h2 { font-size: 21px; letter-spacing: -.025em; }
.legal-section p { font-size: 14px; line-height: 1.75; color: #c0cbc3; }
.legal-request { margin-top: 38px; padding: clamp(22px,3vw,36px); }
.legal-request h2 { font-size: 23px; letter-spacing: -.03em; }
.cookie-notice { border-radius: 14px; box-shadow: 0 24px 70px #000b; }

@media (max-width: 1250px) {
  .editor-shell.active { height: calc(100vh - 265px); }
}
@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-feature { min-height: 265px; padding: 26px 30px; }
  .login-feature-copy h1 { max-width: 20ch; font-size: 38px; }
  .login-form-side { padding: 34px 24px 60px; }
  .member-admin-sidebar { position: static; }
}
@media (max-width: 700px) {
  .topbar { height: 64px; min-height: 64px; padding: 0 15px; }
  .brand { font-size: 16px; }
  .brand-mark { width: 35px; height: 35px; }
  .top-actions .button { min-height: 36px; }
  .tabs { height: 54px; padding: 0 8px; }
  .tab { padding: 0 13px; }
  .tab.active:after { left: 13px; right: 13px; }
  .flow-controls { padding: 12px 15px; }
  .flow-controls-actions { row-gap: 9px; }
  .flow-controls-actions .button { min-height: 40px; }
  .editor-shell.active, .editor-shell.active.palette-collapsed { height: calc(100dvh - 350px); min-height: 440px; }
  .canvas-toolbar { top: 10px; left: 10px; }
  .canvas-legend { display: none; }
  .section-intro h1 { font-size: 30px; }
  .setting-card, .activity-card, .support-grid > .setting-card, .member-admin-card, .member-admin-head { padding: 19px; }
  .admin-area { margin-top: 38px; }
  .account-row { padding: 16px; }
  .login-feature { min-height: 230px; }
  .login-feature-copy h1 { font-size: 34px; }
  .login-card { padding: 5px 0; }
  .public-header { align-items: flex-start; gap: 5px; }
  .public-header nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .public-header nav a { white-space: nowrap; }
  .member-shell, .legal-shell { padding-top: 25px; }
  .member-cover { min-height: 190px; }
  .member-hero-copy { padding: 27px; }
  .member-auth { padding: 22px; }
  .public-footer span { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Navegação lateral e densidade de trabalho do painel. */
:root {
  --sidebar-width: 244px;
  --chrome: #080a0b;
  --card: #121617;
  --card-hover: #1a2020;
  --card-border: #303839;
}
body { background: #080a0b; }
.topbar {
  position: sticky; top: 0; z-index: 60; height: 76px; min-height: 76px;
  padding: 0 24px 0 18px; gap: 18px; background: #090b0c;
  border-bottom: 1px solid #2a3031; box-shadow: 0 4px 22px #0004;
}
.brand { width: calc(var(--sidebar-width) - 8px); flex: 0 0 calc(var(--sidebar-width) - 8px); font-size: 17px; }
.brand small { display: none; }
.brand-mark { width: 39px; height: 39px; border-radius: 11px; }
.header-location { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.header-location strong { font-size: 17px; letter-spacing: -.025em; line-height: 1.15; }
.header-location small { color: #9ca7a5; font-size: 11px; }
.top-actions { gap: 10px; }
.top-actions .button { min-height: 39px; }
.privacy-toggle { display: inline-flex; align-items: center; gap: 8px; color: #eee9ce; border: 1px solid #5a5231; background: #242519; }
.privacy-toggle:hover { background: #32301d; border-color: #c5a536; }
.privacy-toggle[aria-pressed="true"] { color: #15170c; background: var(--accent); border-color: var(--accent); }
.privacy-icon { font-size: 15px; line-height: 1; }
.sidebar-toggle { display: none; }
.sidebar-scrim { display: none; }
.tabs {
  position: fixed; z-index: 50; top: 76px; bottom: 0; left: 0;
  width: var(--sidebar-width); height: auto; padding: 22px 11px 14px;
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  overflow-y: auto; overflow-x: hidden; background: #0b0e0f;
  border-right: 1px solid #2d3637; border-bottom: 0;
  scrollbar-color: #46504b transparent; scrollbar-width: thin;
}
.sidebar-section-label { padding: 7px 12px 10px; color: #87908a; font-size: 9px; line-height: 1.3; font-weight: 850; letter-spacing: .17em; }
.sidebar-divider { margin-top: 19px; padding-top: 18px; border-top: 1px solid #263031; }
.tab {
  width: 100%; min-height: 45px; padding: 8px 11px; border: 1px solid transparent;
  border-radius: 10px; display: flex; align-items: center; gap: 12px;
  color: #bbc3bd; font-size: 12px; font-weight: 710; text-align: left;
  white-space: normal; transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.tab:hover { color: #fff9df; background: #1a2020; transform: translateX(2px); }
.tab.active { color: var(--accent); background: #282717; border-color: #71652b; }
.tab.active:after { content: ""; width: 5px; height: 5px; top: 50%; bottom: auto; left: auto; right: 11px; transform: translateY(-50%); border-radius: 50%; background: var(--accent); }
.tab-icon { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 7px; background: #1b2221; color: #c5d0c3; font-size: 18px; font-weight: 600; }
.tab.active .tab-icon { color: #15170b; background: var(--accent); }
.sidebar-bottom { display: grid; grid-template-columns: 32px 1fr; column-gap: 8px; row-gap: 2px; align-items: center; margin-top: auto; padding: 14px 10px 10px; border-top: 1px solid #293333; }
.sidebar-bottom-icon { grid-row: span 2; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: #343019; color: var(--accent); font-size: 20px; }
.sidebar-bottom strong { color: #f2f0e3; font-size: 11px; }
.sidebar-bottom small { color: #929d99; font-size: 10px; line-height: 1.4; }
.flow-controls, #main-content, .app-legal-links, .privacy-banner { margin-left: var(--sidebar-width); }
.flow-controls { padding: 14px clamp(18px, 2.5vw, 36px); background: #111516; border-bottom: 1px solid #303839; }
.flow-controls .header-field select, .flow-controls .flow-name-wrap input { border-color: #424e4b; background: #090d0e; }
.flow-controls-actions { gap: 8px; }
.privacy-banner { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 24px; color: #17170f; background: #ffdb45; font-size: 12px; font-weight: 750; }
.privacy-banner[hidden] { display: none; }

/* Página inicial: próxima ação à vista, dados em blocos previsíveis. */
.content-shell, .simulator-shell { background: #0a0d0e; }
.content-shell { min-height: calc(100dvh - 76px); padding: clamp(25px, 3vw, 43px) clamp(22px, 3vw, 47px) 70px; }
.section-intro { max-width: none; margin-bottom: 26px; }
.section-intro h1 { font-size: clamp(31px, 2.8vw, 41px); font-weight: 820; letter-spacing: -.055em; }
.section-intro p { color: #a9b4af; }
.dashboard-intro { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.dashboard-intro .button { min-height: 45px; padding-inline: 22px; font-size: 13px; }
.dashboard-shell { padding: clamp(25px, 3vw, 43px) clamp(22px, 3vw, 47px) 70px; }
.account-banner {
  max-width: none; min-height: 134px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border: 1px solid #5b5432; border-left: 3px solid var(--accent); border-radius: 16px;
  background: radial-gradient(circle at 95% 15%, #ffdb4516, transparent 28%), linear-gradient(110deg,#171b18,#111616 70%);
  box-shadow: 0 12px 33px #0004; padding: 23px 26px;
}
.account-banner h2 { margin: 8px 0 6px; font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -.035em; }
.account-banner p { margin: 0; color: #b7c2b5; font-size: 12px; }
.account-banner-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: 0 0 auto; }
.account-banner-actions .button { min-width: 174px; min-height: 42px; }
.account-banner-actions .button span { margin-left: 10px; color: var(--accent); }
.account-pill { white-space: nowrap; border-radius: 999px; padding: 8px 12px; font-size: 11px; font-weight: 800; }
.dashboard-cards { max-width: none; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 17px 0 34px; }
.dash-card, .plan-card, .activity-card, .setting-card, .member-admin-sidebar, .member-admin-card, .member-admin-head {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 16px;
  box-shadow: 0 11px 30px #0003;
}
.dash-card { min-height: 158px; padding: 20px 22px; border-top: 1px solid var(--card-border); transition: border-color .2s, background .2s, transform .2s; }
.dash-card:hover { background: var(--card-hover); border-color: #706433; transform: translateY(-2px); }
.dash-card:before { content: "ϟ"; position: static; width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 9px; background: #292b1a; color: var(--accent); font-size: 18px; }
.dash-card:nth-child(2):before { content: "◇"; }
.dash-card:nth-child(3):before { content: "↗"; }
.dash-card:nth-child(4):before { content: "◎"; }
.dash-card span { display: block; color: #adb7b0; font-size: 12px; font-weight: 650; }
.dash-card strong { margin: 7px 0 3px; font-size: clamp(26px, 2.4vw, 36px); color: #f8f6ec; line-height: 1.12; }
.dash-card small { color: #87958f; font-size: 11px; }
.plan-area { max-width: none; }
.plan-area .section-intro { margin-bottom: 18px; }
.plan-area .section-intro h2 { margin: 7px 0 5px; font-size: clamp(23px, 2.2vw, 30px); letter-spacing: -.035em; }
.plan-area .section-intro p { max-width: 70ch; line-height: 1.6; }
.plan-grid { max-width: 920px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; min-height: 270px; padding: 26px; }
.plan-card-featured { border-color: #b29b3d; background: linear-gradient(140deg,#22251a,#151b1a 68%); }
.plan-card-monthly { background: #131719; }
.plan-card .plan-name { color: #f4f2e7; font-size: 15px; font-weight: 800; }
.plan-card .plan-badge { align-self: flex-start; margin: 0 0 14px; padding: 5px 9px; border-radius: 999px; background: #ffdb45; color: #1b1b11; font-size: 10px; font-weight: 850; letter-spacing: .07em; }
.plan-card > strong { margin: 15px 0 10px; color: #f9f8ed; font-size: clamp(31px, 2.7vw, 39px); letter-spacing: -.045em; }
.plan-card-featured > strong { color: var(--accent); }
.plan-card > strong small { margin-left: 3px; color: #c8d0c2; font-size: 14px; letter-spacing: 0; }
.plan-card p { margin: 0 0 22px; color: #b7c2bb; font-size: 12px; line-height: 1.6; }
.plan-card .plan-intro-price { margin-top: auto; margin-bottom: 14px; padding: 10px 12px; border: 1px solid #786b37; border-radius: 9px; background: #272719; color: #f5eab4; font-weight: 750; }
.plan-card .checkout-button { width: 100%; min-height: 45px; margin-top: auto; }
.intro-offer { max-width: 920px; margin: 14px 0 0; padding: 15px 18px; border: 1px solid #726333; border-radius: 12px; background: #25251a; color: #eee8cf; font-size: 12px; line-height: 1.6; }
.intro-offer strong { color: var(--accent); }
.intro-offer span { white-space: nowrap; font-weight: 800; }
.admin-area { margin-top: 43px; padding-top: 33px; }
.admin-area .dashboard-cards { grid-template-columns: repeat(4,minmax(0,1fr)); }
.admin-section-nav { gap: 7px; margin-top: 22px; border-bottom-color: #303839; }
.admin-section-nav button { border-radius: 8px 8px 0 0; }
.admin-section-nav button.active { background: #282717; }
.admin-customer-layout { grid-template-columns: minmax(260px,310px) minmax(0,1fr); }
.account-row { min-height: 84px; border-radius: 12px; background: #131919; }
.account-row:hover { border-color: #6d6136; }
.account-actions .button { min-height: 36px; }
.setting-card, .activity-card, .member-admin-card { padding: 23px; }
.settings-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.support-grid > .setting-card:first-child { grid-column: 1 / -1; }
.support-grid > .setting-card { background: var(--card); }
.setting-icon { width: 38px; height: 38px; }
.setting-card h2 { margin-top: 4px; }
.setting-card p { line-height: 1.6; }
.setting-card .button { min-height: 40px; }
.url-box, .setting-result, .flow-map-row, .info-strip { border-radius: 10px; }
.member-admin-sidebar, .member-admin-head, .member-admin-card { border-color: var(--card-border); }
:is(button, a, input, textarea, select, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.button, .tab, .palette-item, .canvas-control { touch-action: manipulation; }

/* Editor: ferramentas compactas, tela ampla e controles legíveis. */
.editor-shell.active { height: calc(100dvh - 173px); min-height: 550px; grid-template-columns: 246px minmax(0,1fr); }
.editor-shell.active.palette-collapsed { grid-template-columns: 0 minmax(0,1fr); }
.palette { padding: 18px 11px 22px; background: #0d1112; border-right: 1px solid #323b3c; }
.palette-heading { align-items: center; }
.palette h2 { font-size: 17px; }
.palette-help { padding-bottom: 13px; margin-bottom: 10px; font-size: 11px; }
.palette-search { background: #171d1e; border-color: #394344; }
.palette-group { margin: 17px 0; }
.palette-group-title { padding-bottom: 6px; border-bottom: 1px solid #293334; color: #9aa69f; }
.palette-item { min-height: 53px; margin: 5px 0; border-color: #2c3637; background: #141a1b; box-shadow: none; }
.palette-item:hover { background: #202828; border-color: #9c8a43; }
.palette-item .plus { color: var(--accent); }
.canvas-wrap { background-color: #0b0e0f; background-image: radial-gradient(#303832 .8px,transparent .8px), linear-gradient(90deg,#ffffff04 1px,transparent 1px),linear-gradient(#ffffff04 1px,transparent 1px); }
.canvas-toolbar { background: #151a1bf2; border-color: #4e5852; }
.canvas-control:hover { border-color: #ac9845; }
.inspector-dialog, .conversation-dialog, .confirm-dialog { background: #151a1b; border: 1px solid #626b59; }
.inspector-dialog-bar, .inspector-dialog-foot, .conversation-dialog-head, .conversation-dialog-foot { background: #1d2424; }
.confirm-dialog .button.primary, .inspector-dialog-foot .button.primary { min-height: 42px; }

/* A apresentação protege apenas dados. Menus, ações e contexto continuam legíveis. */
.privacy-mode :is(
  #flow-select, #flow-name, #flow-instance, #connection-instance,
  #new-instance-name, #mp-payer-email, #meta-pixel-id, #meta-waba-id,
  #saas-webhook-url, #mp-webhook-url, #webhook-url,
  #account-banner h2, #dashboard-cards .dash-card strong,
  #admin-stats .dash-card strong, #account-list .account-row > div:first-child,
  #flow-map .flow-map-row strong, #flow-map .map-flow,
  #sim-flow-name, #sim-contact, #chat .bubble-text,
  #chat .poll-head, #chat .media-detail, #chat .media-caption,
  #chat .mp-pix-bubble strong, #chat .mp-pix-bubble code,
  #inbound-list .event-head span:first-child, #inbound-list .event-body,
  #outbound-list .event-head span:first-child, #outbound-list .event-body,
  #payments-list .event-head span:first-child, #payments-list .event-body,
  #pixel-events-list .event-head span:first-child,
  #ticket-list .support-item-head strong,
  #ticket-list .ticket-meta, #ticket-list .support-item > p,
  #conversation-list .conversation-choice strong,
  #conversation-list .conversation-choice span,
  #conversation-detail .conversation-detail-head strong,
  #conversation-detail .conversation-detail-head small,
  #conversation-detail .conversation-message p,
  #member-space-list .member-space-choice strong,
  #member-admin-detail .member-admin-head h2,
  #member-admin-detail .member-admin-item strong,
  #member-admin-detail .member-admin-item p,
  #member-admin-detail .member-admin-thumb,
  #member-admin-detail .member-admin-file span,
  #member-admin-detail .member-admin-member strong,
  #knowledge-list .support-item strong,
  #knowledge-list .support-item p,
  #sim-input, #human-message-form input, #human-message-form textarea,
  #member-invite-result input, #qr-image,
  #delete-flow-name, #reset-account-name, #grant-account-name
) { filter: blur(7px); user-select: none; }
.privacy-mode .node :is(.node-title, .node-body, .option-name) { filter: blur(7px); }
.privacy-mode :is(#mp-access-token, #mp-webhook-secret, #meta-access-token, #saas-token, #saas-secret, #captcha-site-key, #captcha-secret-key) { filter: blur(7px); }

@media (max-width: 1250px) {
  .brand { width: 225px; flex-basis: 225px; }
  .flow-controls { align-items: flex-start; flex-direction: column; }
  .flow-controls-primary, .flow-controls-actions { width: 100%; }
  .editor-shell.active { height: calc(100dvh - 225px); }
  .admin-area .dashboard-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1000px) {
  .admin-customer-layout, .admin-settings-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .header-location small { display: none; }
}
@media (max-width: 900px) {
  .topbar { padding: 0 16px; }
  .brand { width: auto; flex: 0 1 auto; }
  .sidebar-toggle { display: grid; place-items: center; width: 40px; height: 40px; order: -1; flex: 0 0 40px; border: 1px solid #43504a; border-radius: 9px; background: #1a2020; color: var(--accent); font-size: 21px; }
  .tabs { top: 76px; transform: translateX(-105%); transition: transform .22s; box-shadow: 18px 0 50px #0008; }
  .sidebar-open .tabs { transform: translateX(0); }
  .sidebar-open .sidebar-scrim { display: block; position: fixed; z-index: 45; inset: 76px 0 0; background: #0009; }
  .flow-controls, #main-content, .app-legal-links, .privacy-banner { margin-left: 0; }
  .editor-shell.active { min-width: 0; }
  .dashboard-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .topbar { height: 64px; min-height: 64px; gap: 9px; padding: 0 12px; }
  .sidebar-toggle { width: 36px; height: 36px; flex-basis: 36px; }
  .tabs { top: 64px; width: min(272px,calc(100vw - 36px)); }
  .sidebar-open .sidebar-scrim { inset: 64px 0 0; }
  .brand { font-size: 14px; gap: 6px; }
  .brand-light { display: none; }
  .brand-mark { width: 32px; height: 32px; font-size: 21px; }
  .header-location { display: none; }
  .top-actions { gap: 7px; }
  .top-actions .button { min-height: 35px; padding: 7px 9px; font-size: 11px; }
  .privacy-toggle { gap: 5px; }
  .privacy-toggle #privacy-toggle-label { display: none; }
  .privacy-banner { min-height: 48px; padding: 8px 15px; }
  .dashboard-intro { align-items: flex-start; flex-direction: column; }
  .dashboard-intro .button { align-self: stretch; }
  .dashboard-cards, .admin-area .dashboard-cards { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: 240px; }
  :is(input, textarea, select) { font-size: 16px; }
  .account-banner { align-items: flex-start; flex-direction: column; padding: 20px; }
  .account-banner-actions { width: 100%; align-items: stretch; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
  .support-grid { grid-template-columns: 1fr; }
  .support-grid > .setting-card:first-child { grid-column: auto; }
  .editor-shell.active, .editor-shell.active.palette-collapsed { height: calc(100dvh - 365px); min-height: 440px; }
  .flow-controls { padding: 11px 14px; }
  .flow-controls-actions { display: flex; flex-wrap: wrap; }
  .flow-controls #save-button { grid-column: auto; }
}