:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background:#151320;
  color:#f1eef8;
  --app-bg:#151320;
  --surface:#211e2e;
  --surface-2:#1a1826;
  --line:#352f45;
  --line-soft:#2b2639;
  --text-dim:#b4abc6;
  --accent:#8f7aef;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
}
* { box-sizing:border-box; }
/* label/.hero-form trazem display proprio, que vencia o atributo hidden e deixava caixas vazias na tela. */
[hidden] { display:none !important; }
html { min-height:100%; scroll-padding-top:calc(92px + var(--safe-top)); }
body {
  margin:0;
  background:radial-gradient(circle at 84% -6%,#2f2446 0,transparent 36rem),radial-gradient(circle at 6% 10%,#241f3a 0,transparent 32rem),var(--app-bg);
  min-height:100vh;
  min-height:100dvh;
  padding-left:var(--safe-left);
  padding-right:var(--safe-right);
  padding-bottom:var(--safe-bottom);
}
body::before {
  content:"";
  position:fixed;
  z-index:9999;
  top:0;
  left:0;
  right:0;
  height:var(--safe-top);
  background:var(--app-bg);
  pointer-events:none;
}
header, main { width:min(1340px,94vw); margin:auto; }
header { display:flex; align-items:center; justify-content:space-between; padding:calc(40px + var(--safe-top)) 0 24px; scroll-margin-top:calc(92px + var(--safe-top)); }
main { padding-bottom:calc(28px + var(--safe-bottom)); }
section, [id] { scroll-margin-top:calc(96px + var(--safe-top)); }
.actions,.section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.panel > .section-heading { margin-bottom:14px; }
.panel > .section-heading h2 { margin-bottom:0; }
.layout { display:grid; grid-template-columns:252px minmax(0,1fr); gap:18px; align-items:start; }
.section-nav { position:sticky; top:calc(18px + var(--safe-top)); display:grid; gap:4px; padding:12px; background:var(--surface); border:1px solid var(--line-soft); border-radius:18px; box-shadow:0 8px 24px #0000002e; max-height:calc(100dvh - 36px - var(--safe-top)); overflow:auto; scrollbar-width:none; -ms-overflow-style:none; }
.section-nav::-webkit-scrollbar { width:0; height:0; }
.section-nav-item { display:grid; gap:2px; justify-items:start; text-align:left; width:100%; padding:10px 12px; border-radius:10px; background:transparent; border:1px solid transparent; color:var(--text-dim); font-weight:600; }
.section-nav-item:hover { background:#2a2538; color:#f5f2fb; filter:none; }
.section-nav-item.active { background:#2e2744; border-color:#4b4172; color:#fff; box-shadow:inset 3px 0 0 var(--accent); }
.section-nav-group { font-size:.62rem; letter-spacing:.18em; color:#b48fd8; font-weight:700; }
.section-nav-title { font-size:.92rem; line-height:1.25; }
.section-stage > .panel { margin-bottom:0; }
.section-stage > .panel[hidden] { display:none; }
.actions form { margin:0; }
h1 { margin:.15rem 0; font-size:clamp(2rem,6vw,4.4rem); line-height:.95; letter-spacing:-.06em; }
h2 { margin-top:0; }
.eyebrow { color:#c98fdd; letter-spacing:.22em; font-weight:700; font-size:.74rem; }
.panel,.status { background:var(--surface); border:1px solid var(--line-soft); border-radius:18px; padding:22px; margin-bottom:18px; box-shadow:0 8px 24px #0000002e; }
.status { display:flex; gap:12px; flex-wrap:wrap; padding:14px 18px; }
.pill { border-radius:999px; padding:7px 12px; background:#2a2538; border:1px solid var(--line); font-size:.84rem; color:#e0dbec; }
.ok { color:#72efb3; } .bad { color:#ff9b9b; } .warn { color:#ffd27a; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
label { display:flex; flex-direction:column; gap:7px; color:var(--text-dim); font-size:.86rem; font-weight:500; }
input,textarea,select,button { font:inherit; border-radius:10px; border:1px solid var(--line); padding:11px 13px; background:#1b1828; color:#fff; transition:border-color .2s,background .2s; }
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--accent); background:#221e33; box-shadow:0 0 0 3px #8f7aef26; }
textarea { resize:vertical; }
button { cursor:pointer; border:0; font-weight:600; background:linear-gradient(135deg,#9a7df2,#c878c8); color:#fff; }
button:hover { filter:brightness(1.12); }
button.secondary { background:#272234; border:1px solid var(--line); color:#e6e1f1; font-weight:600; }
button.danger { background:#3a1b2b; color:#ffb2c8; align-self:center; }
.button-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border-radius:10px; padding:11px 13px; color:#fff; font-weight:800; background:linear-gradient(135deg,#ff4fb8,#7a5cff); }
.button-link.secondary { background:#251d31; border:1px solid #59456d; }
form > label, fieldset { margin-top:14px; }
fieldset { border:0; padding:0; display:flex; gap:18px; }
.check { display:inline-flex; flex-direction:row; align-items:center; }
.cards { display:grid; gap:10px; }
.card { display:grid; grid-template-columns:1fr auto; gap:12px; padding:15px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line-soft); }
.card p { margin:.35rem 0; color:var(--text-dim); }
.card-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.history-card { grid-template-columns:104px minmax(0,1fr) minmax(210px,254px); align-items:start; }
.post-thumb { width:84px; height:104px; border-radius:10px; object-fit:cover; background:#2a2438; border:1px solid var(--line); }
.post-thumb.empty { display:grid; place-items:center; color:#a79ebb; font-size:.72rem; text-align:center; padding:8px; }
.library-card { grid-template-columns:100px 1fr auto; align-items:center; }
.library-card img { width:88px; height:110px; object-fit:cover; border-radius:9px; background:#21182a; }
.library-actions { display:grid; gap:8px; justify-items:end; min-width:150px; }
.library-actions .retry-button { margin-top:0; }
.history-schedule { width:min(360px,100%); margin:16px 0; }
.meta { color:#9f93ad; font-size:.82rem; }
.error { color:#ff9b9b !important; white-space:pre-wrap; overflow-wrap:anywhere; min-width:0; }
.error.compact { font-size:.76rem; margin-top:.55rem; }
#form-result { margin-left:12px; }
.goal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0; }
.goal-card { background:#100c17; border:1px solid #30243b; border-radius:12px; padding:14px; }
.goal-card > div:first-child { display:flex; justify-content:space-between; gap:10px; }
.goal-card span { color:#aaa0b8; font-size:.82rem; }
.progress { height:7px; background:#281f31; border-radius:999px; margin-top:12px; overflow:hidden; }
.progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ff4fb8,#7a5cff); }
.reminders { display:grid; gap:8px; margin:14px 0; }
.notice { border-left:3px solid #7a5cff; background:#17101f; border-radius:8px; padding:10px 12px; color:#d7cfe1; }
.notice.warning { border-color:#ffba6b; }.notice.info { border-color:#82b7ff; }.notice.ok { border-color:#72efb3; }
.suggestions { display:flex; flex-wrap:wrap; gap:8px; }
.suggestion { display:flex; flex-direction:column; align-items:flex-start; gap:3px; background:#17101f; border:1px solid #463456; }
.suggestion span { color:#aaa0b8; font-size:.78rem; }
.platform-statuses { display:grid; gap:6px; margin:9px 0; min-width:0; }
.platform-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 8px; min-width:0; }
.platform-row .pill { max-width:100%; overflow-wrap:anywhere; }
.platform-row .error { flex:1 0 100%; margin:2px 0 0; font-size:.78rem; }
.platform-row button { padding:6px 9px; font-size:.76rem; }
.retry-mini { width:30px; height:30px; display:inline-grid; place-items:center; border-radius:999px; padding:0 !important; background:#2b2237; border:1px solid #59456d; color:#ffd27a; }
.retry-button { width:100%; margin-top:8px; padding:9px 10px; font-size:.84rem; background:linear-gradient(135deg,#ff8a4f,#7a5cff); }
.retry-actions { display:grid; gap:8px; margin-top:8px; }
.inline-retry { display:flex; flex-wrap:wrap; }
.inline-retry .retry-button { width:auto; min-width:150px; }
.tiktok-pending-card { grid-template-columns:minmax(0,1fr) 220px; align-items:start; }
.pending-actions { display:grid; gap:8px; align-content:center; }
.pending-actions button,.pending-actions .button-link { width:100%; padding:9px 10px; font-size:.82rem; }
.audience-card { align-items:center; }
.audience-actions { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; max-width:390px; }
.audience-actions button,.audience-actions .button-link { padding:8px 10px; font-size:.78rem; }
.audience-toolbar { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0 16px; }
.audience-toolbar label { min-width:180px; margin:0; }
.audience-tags { display:inline-block; margin-top:8px; color:#ffd27a; font-size:.78rem; }
.outreach-campaign { grid-template-columns:1fr; }
.outreach-list { margin-top:12px; }
.outreach-recipient { background:#17101f; }
.consent { margin:14px 0; }
.consent a { color:#fc82d5; }
.media-preview { margin:14px 0; min-height:80px; display:grid; place-items:center; border:1px dashed #493959; border-radius:12px; overflow:hidden; }
.media-preview img,.media-preview video { display:block; width:min(100%,360px); max-height:420px; object-fit:contain; }
.commercial-detail[hidden] { display:none; }
.rule-form { display:grid; grid-template-columns:180px 1fr; gap:12px; align-items:end; margin:18px 0; }
.rule-form .wide { grid-column:1/-1; }
.toggle { flex-direction:row; align-items:center; }
.toggle input { width:18px; height:18px; }
body.login-page {
  padding:0;
  background:var(--app-bg);
}
body.login-page::before { display:none; }
.login-split { display:grid; grid-template-columns:1.05fr 1fr; min-height:100vh; min-height:100dvh; }

/* Brand side: slow-drifting neon orbs behind the wordmark. */
.login-brand { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:calc(32px + var(--safe-top)) 48px calc(28px + var(--safe-bottom)) max(48px,var(--safe-left)); background:#0b0812; }
.neon-field { position:absolute; inset:0; pointer-events:none; }
.neon-field .orb { position:absolute; border-radius:999px; filter:blur(70px); opacity:.55; mix-blend-mode:screen; }
.orb-1 { width:420px; height:420px; left:-10%; top:8%; background:#ff4fb8; animation:drift-1 17s ease-in-out infinite alternate; }
.orb-2 { width:380px; height:380px; right:-8%; top:34%; background:#7a5cff; animation:drift-2 21s ease-in-out infinite alternate; }
.orb-3 { width:300px; height:300px; left:28%; bottom:-12%; background:#36d6ff; opacity:.4; animation:drift-3 25s ease-in-out infinite alternate; }
.neon-grid { position:absolute; inset:0; background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(circle at 40% 45%,#000 0,transparent 72%); }
@keyframes drift-1 { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(70px,60px,0) scale(1.14); } }
@keyframes drift-2 { from { transform:translate3d(0,0,0) scale(1.08); } to { transform:translate3d(-60px,-70px,0) scale(.92); } }
@keyframes drift-3 { from { transform:translate3d(0,0,0); } to { transform:translate3d(90px,-50px,0); } }
.login-brand > * { position:relative; z-index:1; }
.login-home { align-self:flex-start; text-decoration:none; color:#cfc6da; font-size:.85rem; font-weight:700; padding:9px 14px; border-radius:999px; border:1px solid #3c2d4a; background:#140f1dcc; }
.login-home:hover { color:#fff; border-color:#7a5cff; }
.login-brand-inner { width:min(440px,100%); margin:auto; }
.login-logo { margin:10px 0 0; font-size:clamp(3rem,6vw,4.6rem); line-height:.9; letter-spacing:-.05em; font-weight:900; color:#fff; text-shadow:0 0 28px #ff4fb866,0 0 70px #7a5cff4d; }
.login-logo span { color:#fc82d5; }
.login-rule { display:block; width:88px; height:4px; border-radius:999px; margin:18px 0 26px; background:linear-gradient(90deg,#ff4fb8,#7a5cff); box-shadow:0 0 18px #ff4fb8aa; }
.login-feed { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.login-feed li { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; padding:13px 15px; border-radius:14px; background:#140f1dcc; border:1px solid #2e2438; backdrop-filter:blur(6px); }
.login-feed strong { display:block; font-size:.95rem; }
.login-feed p { margin:2px 0 0; color:#a295b5; font-size:.82rem; }
.feed-icon { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:1rem; }
.feed-icon.ok { background:#10351f; color:#72efb3; }
.feed-icon.live { background:#3a2410; color:#ffd27a; }
.feed-icon.new { background:#1b1b3d; color:#9fb4ff; }
.feed-tag { color:#6c6080; font-size:.72rem; font-weight:700; }
.login-foot { margin:0; color:#5d5272; font-size:.76rem; letter-spacing:.06em; }

/* Access side */
.login-access { display:grid; place-items:center; padding:calc(32px + var(--safe-top)) max(40px,var(--safe-right)) calc(32px + var(--safe-bottom)) 40px; background:radial-gradient(circle at 85% 12%,#2a1138 0,transparent 24rem),#09070e; border-left:1px solid #241a31; }
body.login-page .login-shell { width:min(420px,100%); margin:0; }
body.login-page .login-shell h2 { font-size:clamp(1.8rem,3.4vw,2.4rem); margin:0 0 8px; }
.login-sub { margin:0 0 28px; color:#a295b5; font-size:.95rem; }
body.login-page .login-form { display:grid; gap:18px; margin:0; }
body.login-page .login-form label { margin:0; gap:8px; font-weight:700; color:#e4dcf2; font-size:.85rem; }
.field-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.field { position:relative; display:flex; align-items:center; }
.field-icon { position:absolute; left:13px; color:#7b6e8d; font-size:.95rem; pointer-events:none; }
body.login-page .login-form .field input { width:100%; min-height:50px; padding:11px 46px; border-radius:12px; background:#120d1a; border:1px solid #30253f; font-weight:500; }
body.login-page .login-form .field input:focus { outline:none; border-color:#ff4fb8; box-shadow:0 0 0 3px #ff4fb826; }
.field-button { position:absolute; right:6px; min-height:38px; padding:0 10px; background:transparent; border:0; color:#7b6e8d; font-size:1rem; }
.field-button:hover { color:#fc82d5; filter:none; }
.login-submit { width:100%; min-height:50px; margin-top:4px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:9px; box-shadow:0 12px 30px #ff4fb833; }
body.login-page .login-link { color:#fc82d5; text-decoration:none; font-weight:700; font-size:.8rem; }
body.login-page .login-link:hover { color:#fff; }
body.login-page .login-note { margin:26px 0 0; text-align:center; color:#a295b5; font-size:.85rem; }
.login-meta { margin:14px 0 0; text-align:center; color:#5d5272; font-size:.74rem; }
.login-meta a { color:#8b7ca3; }
@media (prefers-reduced-motion:reduce) { .neon-field .orb { animation:none; } }
@media (max-width:900px) {
  .login-split { grid-template-columns:1fr; }
  .login-brand { min-height:46vh; padding:calc(24px + var(--safe-top)) 24px 24px; }
  .login-brand-inner { margin:26px 0 0; }
  .login-access { border-left:0; border-top:1px solid #241a31; padding:32px 24px calc(32px + var(--safe-bottom)); }
  .login-feed li:nth-child(n+3) { display:none; }
}
@media (max-width:620px) {
  header {
    align-items:flex-start;
    gap:18px;
    flex-direction:column;
    padding-top:calc(26px + var(--safe-top));
  }
  header .actions { width:100%; flex-wrap:wrap; }
  header .actions button { min-height:44px; }
  .card,.library-card,.history-card,.tiktok-pending-card { grid-template-columns:minmax(0,1fr); }
  .library-card img,.post-thumb { width:100%; height:220px; }
  .audience-actions { justify-content:flex-start; max-width:none; }
  .pending-actions { grid-template-columns:1fr; }
  .panel,.status { border-radius:16px; padding:18px; }
  input,textarea,select,button,.button-link { min-height:44px; }
}
@media (max-width:900px) {
  .layout { grid-template-columns:1fr; }
  .section-nav { position:static; overflow-x:auto; grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr); overflow-x:auto; max-height:none; scroll-snap-type:x proximity; }
  .section-nav-item { scroll-snap-align:start; min-height:56px; }
  .section-nav-item.active { box-shadow:inset 0 -3px 0 #fc82d5; }
}
@media (max-width:720px) { .goal-grid { grid-template-columns:1fr; } .rule-form { grid-template-columns:1fr; } .rule-form .wide { grid-column:auto; } .section-heading { align-items:flex-start; } }

/* First-paint splash: hidden as soon as the panel has real data. */
.app-splash { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; background:#09070e; overflow:hidden; transition:opacity .45s ease, visibility .45s ease; }
.app-splash.hidden { opacity:0; visibility:hidden; }
.app-splash-field { position:absolute; inset:0; pointer-events:none; }
.app-splash-field .orb { position:absolute; border-radius:999px; filter:blur(70px); opacity:.45; mix-blend-mode:screen; }
.app-splash-field .orb-1 { width:320px; height:320px; left:-10%; top:10%; background:#ff4fb8; animation:drift-1 14s ease-in-out infinite alternate; }
.app-splash-field .orb-2 { width:300px; height:300px; right:-10%; bottom:4%; background:#7a5cff; animation:drift-2 18s ease-in-out infinite alternate; }
.app-splash-inner { position:relative; z-index:1; text-align:center; }
.app-splash-logo { width:88px; height:88px; margin:0 auto 18px; border-radius:24px; display:grid; place-items:center; font-size:2.3rem; font-weight:950; letter-spacing:-.08em; color:#fff; background:linear-gradient(135deg,#19102b,#ff4fba 48%,#7b55ff); box-shadow:0 18px 60px #0009; animation:pulse 2.4s ease-out infinite; }
.app-splash-inner strong { display:block; font-size:2rem; font-weight:900; letter-spacing:-.05em; text-shadow:0 0 30px #ff4fb84d; }
.app-splash-inner strong span { color:#fc82d5; }
.app-splash-inner p { margin:10px 0 0; color:#a295b5; font-size:.9rem; }
.app-splash .bar { width:168px; height:4px; margin:22px auto 0; border-radius:999px; background:#241a31; overflow:hidden; }
.app-splash .bar i { display:block; width:40%; height:100%; border-radius:999px; background:linear-gradient(90deg,#ff4fb8,#7a5cff); animation:slide 1.2s ease-in-out infinite; }
@keyframes pulse { 0% { box-shadow:0 18px 60px #0009,0 0 0 0 #ff4fb866; } 70% { box-shadow:0 18px 60px #0009,0 0 0 26px #ff4fb800; } 100% { box-shadow:0 18px 60px #0009,0 0 0 0 #ff4fb800; } }
@keyframes slide { 0% { transform:translateX(-110%); } 100% { transform:translateX(260%); } }
@media (prefers-reduced-motion:reduce) { .app-splash-field .orb, .app-splash-logo, .app-splash .bar i { animation:none; } }

/* Menu de conta no cabecalho: o perfil saiu da lista lateral e o Sair mora aqui dentro. */
.account { position:relative; }
.account-button { display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 7px; border-radius:999px; background:#272234; border:1px solid var(--line); color:#ece7f6; font-weight:600; font-size:.9rem; }
.account-button:hover { background:#312a42; filter:none; }
.account-button[aria-expanded="true"] { border-color:#7d68f0; }
.avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:999px; background:linear-gradient(135deg,#9a7df2,#c878c8); color:#fff; font-weight:700; font-size:.9rem; }
.avatar.lg { width:56px; height:56px; font-size:1.5rem; }
.account-caret { color:#a79bbd; font-size:1rem; line-height:1; }
.account-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:50; min-width:232px; padding:8px; border-radius:14px; background:#262134; border:1px solid var(--line); box-shadow:0 16px 36px #0000004d; display:grid; gap:2px; }
.account-menu[hidden] { display:none; }
.account-head { margin:0; padding:10px 12px 12px; display:grid; gap:2px; border-bottom:1px solid var(--line); }
.account-head strong { font-size:.95rem; }
.account-head span { color:#9d92b3; font-size:.78rem; word-break:break-all; }
.account-menu form { margin:0; }
.account-item { width:100%; text-align:left; padding:10px 12px; border-radius:10px; background:transparent; border:0; color:#ddd5ea; font-weight:500; font-size:.9rem; }
.account-item:hover { background:#322b45; filter:none; }
.account-item.danger { color:#ff9fb6; }

/* Perfil: resumo da conta ao lado do formulario, em vez de campos soltos. */
.profile-grid { display:grid; grid-template-columns:minmax(220px,280px) minmax(0,1fr); gap:20px; align-items:start; }
.profile-card { display:grid; justify-items:start; gap:8px; padding:20px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line-soft); }
.profile-card strong { font-size:1.15rem; }
.profile-facts { margin:12px 0 0; display:grid; gap:12px; width:100%; }
.profile-facts div { display:grid; gap:2px; }
.profile-facts dt { color:#8f84a6; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.profile-facts dd { margin:0; color:var(--text-dim); font-size:.86rem; line-height:1.45; }
.profile-form { display:grid; gap:14px; padding:20px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line-soft); }
.profile-form h3 { margin:0; font-size:1rem; }
.profile-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.profile-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; }
.profile-actions button { min-height:44px; padding:0 20px; }
#profile-result:empty { display:none; }
@media (max-width:900px) { .profile-grid { grid-template-columns:1fr; } .profile-pair { grid-template-columns:1fr; } }
@media (max-width:620px) { .account { width:100%; } .account-button { width:100%; justify-content:flex-start; } .account-menu { left:0; right:auto; width:100%; } }

.pending-thumb { width:100%; height:230px; border-radius:12px; object-fit:cover; background:#2a2438; border:1px solid var(--line); }
.pending-thumb.empty { display:grid; place-items:center; height:120px; color:#a79ebb; font-size:.76rem; text-align:center; padding:10px; }
@media (max-width:620px) { .pending-thumb { height:260px; } }