:root {
  --brand-primary:#1877F2; --brand-primary-hover:#0F5FD0; --brand-light:#5AA2FF;
  --navy-primary:#0B1B3F; --navy-secondary:#12275A; --navy-deep:#06112B;
  --surface-main:#FFFFFF; --surface-soft:#F2F5FA; --surface-image:#E3EAF6;
  --text-secondary:#5C6D8D; --text-disabled:#A5B1CB;
  --bg:var(--surface-soft); --card:var(--surface-main); --text:var(--navy-primary);
  --muted:var(--text-secondary); --line:rgba(11,27,63,.10);
  --primary:var(--brand-primary); --primary-text:#fff;
  --ok:#166534; --ok-bg:#e8f7ee; --warn:#854d0e; --warn-bg:#fff5da;
  --bad:#b91c1c; --bad-bg:#fef0f0;
  --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-2xl:28px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --font-family:'Poppins',sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.65 var(--font-family);
}

a { color: inherit; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-10); }

/* Navegação compartilhada */
.app-shell { padding-left: 248px; }
.top { background: var(--card); border-right: 1px solid var(--line); }
.app-shell .top { position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 20; overflow-y:auto; }
.top-in { display: flex; flex-direction: column; padding: 36px 20px 24px; height: 100%; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 0 8px; }
.brand-mark { display: grid; place-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--navy-primary); color: white; font-size: 24px; font-weight: 600; letter-spacing: -2px; grid-auto-flow: column; }
.brand-mark span { color: var(--brand-light); }
.brand-copy { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.5px; }
.brand-copy small { display: block; font-size: 10px; color: var(--muted); font-weight: 400; letter-spacing: .25px; margin-top: 4px; }
.nav-label { color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 1.6px; padding: 0 16px; margin: 48px 0 12px; }
.top nav { display: flex; flex-direction: column; gap: 8px; }
.top nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 16px; border-radius: var(--radius-lg); text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 500; transition: background .15s, color .15s; }
.top nav a:hover { background: var(--bg); color: var(--text); }
.top nav a.on { background: #eaf2ff; color: var(--brand-primary-hover); }
.sidebar-bottom { margin-top: auto; padding-top: 32px; }
.sidebar-note { display: block; padding: 20px; border-radius: var(--radius-xl); background: var(--navy-primary); color: #d4e5ff; font-size: 12px; line-height: 1.8; }
.sidebar-note strong { color: white; font-weight: 500; }
.logout { display: flex; gap: 12px; align-items: center; margin: 20px 12px 0; color: var(--muted); text-decoration: none; font-size: 12px; }
.workspace-bar { min-height: 80px; padding: 20px 40px; border-bottom: 1px solid var(--line); background: var(--card); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; }
.workspace-bar strong { color: var(--text); font-weight: 500; }
.bar-divider { margin: 0 12px; color: #a5b1cb; }
.user-chip { display: flex; align-items: center; gap: 8px; color: var(--text); }
.user-dot { width: 8px; height: 8px; border-radius: 100%; background: var(--brand-primary); }
.guest-shell .top { border: 0; background: transparent; }
.guest-shell .top-in { align-items: center; padding: 40px 20px 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; background: var(--navy-primary); color: white; border-radius: 10px; }
.skip-link:focus { top: 12px; }
main { padding-top: 40px !important; padding-bottom: 40px !important; min-height: calc(100vh - 156px); }
h1 { font-size: clamp(26px, 2.5vw, 36px); font-weight: 500; letter-spacing: -1.2px; line-height: 1.2; margin: 0 0 20px; }
h2 { font-size: 18px; font-weight: 500; letter-spacing: -.4px; margin: 0 0 16px; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 32px; }
.head h1 { margin: 0; }
.muted { color: var(--muted); font-size: 14px; }
.foot { padding-top: 20px; padding-bottom: 24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:11px; color:var(--muted); }

/* Cartões */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 24px; margin-bottom: 20px; overflow-x: auto; }
.card.narrow { max-width: 460px; margin: 24px auto; padding: 32px; }
.card.empty { text-align: center; color: var(--muted); padding: 36px 18px; }
.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.prose h2 { margin-top: 24px; }

/* Formulários */
label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 500; }
input, select, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; color: var(--text);
  font: inherit; font-weight: 400;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
input[type=radio] { display: inline; width: auto; margin: 0 6px 0 0; padding: 0; }
input.small { display: inline-block; width: 140px; margin: 0; padding: 7px 10px; }
textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0 0 14px; }
legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 6px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { margin: 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); font-weight: 400; cursor: pointer; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.row label { flex: 1 1 180px; margin-bottom: 0; }
form.inline { display: inline-flex; gap: 6px; align-items: center; }
label + .muted, .choices + .muted, .current-media + .muted { margin-top: -6px; }

/* Botões */
.btn {
  display: inline-block; padding: 11px 20px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: #fff; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s;
}
.btn:hover { background: var(--bg); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); font-weight: 600; }
.btn.primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.btn:active { transform: translateY(1px); }
.btn[aria-busy=true] { cursor: progress; }
.btn.danger { color: var(--bad); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Avisos */
.alert { padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 14px; font-size: 15px; }
.alert.ok { background: var(--ok-bg); color: var(--ok); }
.alert.error { background: var(--bad-bg); color: var(--bad); }

/* Agenda */
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.filters select { margin: 0; width: auto; }
.tabs { display: flex; flex-wrap:wrap; gap: 8px; padding: 4px; background: var(--surface-image); border-radius: 14px; }
.tabs a { padding: 7px 12px; border-radius: var(--radius-md); text-decoration: none; color: var(--muted); font-size: 15px; }
.tabs a.on { background: var(--card); border: 1px solid var(--line); color: var(--text); font-weight: 600; }
.tabs a span { display:inline-grid; place-items:center; min-width:24px; margin-left:8px; padding:1px 6px; border-radius:6px; background:var(--bg); font-size:11px; color:var(--muted); font-weight:500; }

.post { display: flex; gap: 16px; }
.thumb { flex: 0 0 96px; width: 96px; height: 96px; border-radius: var(--radius-md); overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.post .body { flex: 1; min-width: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.when { margin: 4px 0; font-size: 15px; }
.caption { margin: 6px 0; color: var(--muted); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.err { margin: 6px 0; color: var(--bad); font-size: 14px; overflow-wrap: anywhere; }
.post .actions { margin-top: 10px; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.badge.scheduled { background: #eaf2ff; color: var(--brand-primary-hover); }
.badge.processing, .badge.publishing { background: var(--warn-bg); color: var(--warn); }
.badge.published { background: var(--ok-bg); color: var(--ok); }
.badge.failed { background: var(--bad-bg); color: var(--bad); }

.current-media { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.current-media img, .current-media .vid { width: 72px; height: 72px; border-radius: var(--radius-md); object-fit: cover; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }

/* Tabelas */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 13px; color: var(--muted); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
td.actions { display: table-cell; text-align: right; white-space: normal; }
td.actions form { margin:4px 0 4px 8px; flex-wrap:wrap; justify-content:flex-end; }
td.actions .small { width:110px; font-size:12px; }
td.actions .btn { padding:9px 12px; font-size:12px; }

@media (max-width: 560px) {
  .post { gap: 12px; }
  .thumb { flex-basis: 72px; width: 72px; height: 72px; }
  .head { flex-wrap: wrap; }
  td.actions { white-space: normal; }
  td.actions form { margin: 4px 0 0; }
}

/* Prévias e ordenação dos carrosséis */
.media-preview { margin: 20px 0; }
.media-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
.media-card { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--card); }
.media-card[draggable=true] { cursor: grab; }
.media-card.dragging { opacity: .45; border-color: var(--primary); }
.media-position { display: block; font-size: 13px; margin-bottom: 6px; }
.media-open { display: block; width: 100%; aspect-ratio: 1; border: 0; padding: 0; border-radius: 6px; overflow: hidden; cursor: zoom-in; background: var(--bg); }
.media-open img, .media-open video { width: 100%; height: 100%; object-fit: contain; display: block; }
.media-name { display: block; margin: 6px 0; font-size: 12px; overflow-wrap: anywhere; color: var(--muted); }
.media-controls { display: flex; gap: 4px; }
.media-controls .btn { flex: 1; min-width: 0; padding: 7px 3px; font-size: 12px; }
.btn:disabled { opacity: .4; cursor: default; }
.media-open:focus-visible, .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
#media-dialog { color: var(--text); font-family: var(--font-family); width: min(94vw, 900px); max-height: 94vh; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
#media-dialog::backdrop { background: rgb(0 0 0 / .7); }
.media-dialog-head, .media-dialog-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.media-stage { margin: 12px 0; display: flex; justify-content: center; background: var(--bg); }
.media-stage img, .media-stage video { max-width: 100%; max-height: 68vh; object-fit: contain; }
[hidden] { display: none !important; }
@media (max-width: 380px) { .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hierarquia editorial e adaptações */
.eyebrow { display:block; margin-bottom:12px; color:var(--brand-primary-hover); font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; }
.page-description { margin:12px 0 0; color:var(--muted); font-size:13px; max-width:600px; }
.head h1 em { color:var(--brand-primary); font-style:normal; }
a:focus-visible, button:focus-visible { outline:2px solid var(--brand-primary); outline-offset:4px; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
input[type=file] { background:var(--bg); border-style:dashed; padding:20px; }
input::file-selector-button { border:1px solid var(--line); border-radius:8px; background:white; padding:8px 12px; font:inherit; color:var(--text); margin-right:12px; cursor:pointer; }
.choice:has(input:checked) { background:#eaf2ff; border-color:var(--primary); }
.thumb { width:112px; height:128px; flex-basis:112px; }
.thumb img { object-fit:contain; }
.post .body { padding:4px 0; }
.post strong { font-weight:600; }
.post .actions { margin-top:16px; }
.media-grid { gap:16px; }
.media-card { border-radius:14px; padding:12px; }
.media-controls .btn { min-height:40px; }
.card.empty { padding:56px 24px; border-style:dashed; }
@media (max-width:1100px) {
  .app-shell { padding-left:208px; }
  .app-shell .top { width:208px; }
  .top-in { padding:28px 12px 20px; }
  .wrap { padding-left:24px; padding-right:24px; }
  .workspace-bar { padding-left:24px; padding-right:24px; }
  .sidebar-note { padding:16px; }
}
@media (max-width:760px) {
  .app-shell { padding-left:0; }
  .app-shell .top { position:static; width:100%; border-right:0; border-bottom:1px solid var(--line); }
  .top-in { padding:20px 16px 12px; }
  .brand { padding:0 4px; }
  .brand-mark { width:40px; height:40px; font-size:22px; }
  .nav-label,.sidebar-note { display:none; }
  .top nav { flex-direction:row; flex-wrap:wrap; gap:4px; margin-top:20px; }
  .top nav a { padding:10px 12px; min-height:44px; gap:8px; font-size:12px; }
  .top nav svg { width:16px; height:16px; }
  .sidebar-bottom { margin:12px 0 0; padding:0; }
  .logout { margin:0 12px; font-size:11px; }
  .logout svg { width:16px; height:16px; }
  .workspace-bar { min-height:56px; padding:16px 20px; font-size:11px; }
  .wrap { padding-left:20px; padding-right:20px; }
  main { padding-top:28px !important; min-height:60vh; }
  .head { align-items:flex-start; gap:20px; margin-bottom:24px; }
  .card { padding:20px; }
  .card.narrow { padding:24px; }
  .filters { gap:16px; }
  .tabs { width:100%; }
  .tabs a { flex:1; padding:8px; text-align:center; font-size:12px; }
  .tabs a span { margin-left:4px; }
  .filters form,.filters select { width:100%; }
  .thumb { width:80px; height:104px; flex-basis:80px; }
  .when { font-size:12px; }
  .meta { gap:6px; }
  .meta strong { font-size:13px; overflow-wrap:anywhere; }
  .badge { font-size:10px; }
  .media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .media-card { padding:8px; }
  .media-controls .btn { font-size:11px; }
  .post .actions .btn { padding:9px 12px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }

.message-label { margin-top:24px; }
.invite-share { border-color:rgba(24,119,242,.35); }
.connect-steps { padding-left:20px; margin:24px 0; color:var(--muted); }
.connect-steps li { margin:12px 0; padding-left:4px; }
.connect-card .btn { width:100%; text-align:center; }
.connect-card h1 { font-size:30px; }

/* Caixa de entrada */
.inbox-toolbar { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.inbox-toolbar form { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.inbox-toolbar label { margin:0; }
.inbox-toolbar .muted { flex-basis:100%; font-size:12px; }
.inbox-grid { display:grid; grid-template-columns:minmax(220px, .7fr) minmax(0,1.8fr); gap:20px; align-items:start; }
.thread-list { padding:20px; }
.thread-link { display:flex; flex-direction:column; gap:4px; text-decoration:none; padding:14px 12px; border-radius:10px; margin-bottom:8px; overflow-wrap:anywhere; font-size:12px; }
.thread-link:hover,.thread-link.on { background:#eaf2ff; color:var(--brand-primary-hover); }
.thread-link small { color:var(--muted); font-size:10px; }
.conversation { min-height:460px; }
.conversation-empty { padding:80px 12px; text-align:center; }
.message-history { display:flex; flex-direction:column; align-items:flex-start; gap:16px; max-height:520px; overflow-y:auto; padding:16px 0; margin-bottom:20px; }
.message-bubble { max-width:90%; border-radius:14px 14px 14px 4px; padding:12px 16px; background:var(--bg); overflow-wrap:anywhere; }
.message-bubble.mine { align-self:flex-end; background:#eaf2ff; border-radius:14px 14px 4px 14px; }
.message-author { color:var(--brand-primary-hover); font-size:10px; font-weight:600; }
.message-bubble p { margin:4px 0 8px; white-space:pre-wrap; font-size:13px; }
.message-bubble time { font-size:10px; color:var(--muted); }
.webhook-settings summary { cursor:pointer; font-weight:500; }
.webhook-settings input { font-size:12px; }
@media(max-width:1000px) { .inbox-grid { grid-template-columns:1fr; } .thread-list { max-height:360px; overflow-y:auto; } }
@media(max-width:760px) { .inbox-toolbar form,.inbox-toolbar label,.inbox-toolbar select { width:100%; } .message-bubble { max-width:96%; } }