/* SocialPrimeBR Design System v72
   Camada compartilhada e intencionalmente carregada após os estilos legados. */

:root {
  --spb-canvas: #0b0f15;
  --spb-surface: #121821;
  --spb-elevated: #181f2b;
  --spb-line: #232a36;
  --spb-heading: #f2f4f7;
  --spb-copy: #d7dce5;
  --spb-muted: #98a2b3;
  --spb-accent: #2ea7ff;
  --spb-accent-hover: #168fe4;
  --spb-success: #18b26a;
  --spb-warning: #f59e0b;
  --spb-danger: #ef5b5b;
  --spb-content: 1280px;
  --spb-sidebar: 244px;
  color-scheme: dark;
}

html[data-spb-theme="light"] {
  color-scheme: light;
  --spb-canvas: #f5f7fa;
  --spb-surface: #ffffff;
  --spb-elevated: #eef2f7;
  --spb-line: #d7dde6;
  --spb-heading: #101828;
  --spb-copy: #344054;
  --spb-muted: #667085;
  --spb-accent: #087ecb;
  --spb-accent-hover: #066ba9;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg-base, var(--spb-canvas)) !important;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  background: var(--bg-base, var(--spb-canvas)) !important;
  color: var(--text-base, var(--spb-copy)) !important;
  font-family: var(--font-body, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: 14px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-heading, var(--spb-heading)) !important;
  font-family: var(--font-heading, Inter, "Segoe UI", Arial, sans-serif) !important;
  letter-spacing: -0.025em !important;
}

h1 { font-size: clamp(24px, 2.4vw, 30px) !important; line-height: 1.16 !important; }
h2 { line-height: 1.25 !important; }
p { text-wrap: pretty; }
a { color: var(--primary, var(--spb-accent)); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--primary, var(--spb-accent)) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

::selection {
  background: color-mix(in srgb, var(--primary, var(--spb-accent)) 34%, transparent);
  color: var(--text-heading, var(--spb-heading));
}

/* Shell */
.app-layout {
  min-height: 100dvh !important;
  background: var(--bg-base, var(--spb-canvas)) !important;
}

#sidebarContainer {
  position: relative;
  z-index: 40;
}

.sidebar {
  width: var(--spb-sidebar) !important;
  padding: 18px 14px !important;
  background: var(--sidebar-bg, var(--spb-surface)) !important;
  border-right: 1px solid var(--sidebar-border, var(--spb-line)) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.sidebar-logo {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 44px !important;
  padding: 2px 2px 16px !important;
  border-bottom: 1px solid var(--border, var(--spb-line)) !important;
}

.sidebar-logo .logo-icon,
.login-hero .hero-logo .logo-icon,
.login-mobile-brand .logo-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid color-mix(in srgb, var(--primary, var(--spb-accent)) 58%, white 8%) !important;
  border-radius: 8px !important;
  background: var(--logo-bg, var(--primary, var(--spb-accent))) !important;
  color: var(--logo-text, white) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.sidebar-logo .logo-icon::after,
.login-hero .hero-logo .logo-icon::after {
  display: none !important;
}

.sidebar-logo h2,
.login-hero .hero-logo h2 {
  overflow: hidden !important;
  margin: 0 !important;
  color: var(--text-heading, var(--spb-heading)) !important;
  background: none !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: -0.035em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  -webkit-text-fill-color: currentColor !important;
}

.sidebar-actions {
  display: flex !important;
  gap: 4px !important;
}

.sidebar-actions :where(button, .notif-button),
.btn-theme-toggle.theme-icon-toggle {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-color: transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text-muted, var(--spb-muted)) !important;
}

.sidebar-nav {
  inset: 78px 14px auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.sidebar-nav a {
  position: relative !important;
  min-height: 42px !important;
  padding: 0 11px !important;
  gap: 11px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--sidebar-text, var(--spb-muted)) !important;
  font-size: 13px !important;
  font-weight: 550 !important;
}

.sidebar-nav a svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.8 !important;
}

.sidebar-nav a:hover {
  background: var(--bg-hover, var(--spb-elevated)) !important;
  border-color: var(--border, var(--spb-line)) !important;
  color: var(--text-heading, var(--spb-heading)) !important;
  transform: none !important;
}

.sidebar-nav a.active {
  background: var(--sidebar-active, var(--spb-elevated)) !important;
  border-color: color-mix(in srgb, var(--primary, var(--spb-accent)) 24%, var(--border, var(--spb-line))) !important;
  color: var(--text-heading, var(--spb-heading)) !important;
  box-shadow: none !important;
}

.sidebar-nav a.active::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 9px;
  width: 3px;
  height: 24px;
  border-radius: 0 3px 3px 0;
  background: var(--primary, var(--spb-accent));
}

.sidebar-nav a.active svg { color: var(--primary, var(--spb-accent)) !important; }

.sidebar-plan {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 16px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 14px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid var(--border, var(--spb-line)) !important;
  border-radius: 10px !important;
  background: var(--bg-panel, var(--spb-surface)) !important;
  box-shadow: none !important;
}

.sidebar-plan p {
  margin-bottom: 4px !important;
  color: var(--text-muted, var(--spb-muted)) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

.sidebar-plan strong {
  color: var(--text-heading, var(--spb-heading)) !important;
  font-size: 14px !important;
}

.sidebar-usage {
  margin-top: 10px !important;
  padding: 9px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--border, var(--spb-line)) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.btn-upgrade {
  min-height: 38px !important;
  margin-top: 10px !important;
  border: 1px solid var(--border-strong, var(--spb-line)) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text-base, var(--spb-copy)) !important;
}

.main-content {
  width: auto !important;
  min-height: 100dvh !important;
  margin-left: var(--spb-sidebar) !important;
  padding: 28px clamp(22px, 3vw, 44px) 48px !important;
  background: var(--bg-base, var(--spb-canvas)) !important;
}

.main-content > * {
  width: 100% !important;
  max-width: var(--spb-content) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.page-header {
  min-height: 64px !important;
  margin-bottom: 22px !important;
  padding: 0 0 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border, var(--spb-line)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-header::before { display: none !important; }
.page-header h1 { margin: 0 !important; }
.page-header p { margin-top: 5px !important; color: var(--text-muted, var(--spb-muted)) !important; font-size: 13px !important; }

/* Superfícies e controles */
:where(.card, .data-card, .stat-card, .settings-card, .profile-card, .calendar-card, .agenda-panel, .plan-card, .metric-card, .settings-tabs, .publisher-panel, .publish-card, .schedule-card, .sorteio-card, .admin-card, .legal-document) {
  border: 1px solid var(--border, var(--spb-line)) !important;
  border-radius: 10px !important;
  background: var(--bg-panel, var(--spb-surface)) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

:where(.card, .data-card, .stat-card, .settings-card, .profile-card, .calendar-card, .agenda-panel):hover {
  border-color: var(--border-strong, var(--spb-line)) !important;
  box-shadow: none !important;
  transform: none !important;
}

.data-cards {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

.data-card {
  min-height: 118px !important;
  padding: 17px 18px !important;
}

.data-card-label {
  color: var(--text-muted, var(--spb-muted)) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.data-card-value {
  margin-top: 8px !important;
  color: var(--text-heading, var(--spb-heading)) !important;
  background: none !important;
  font-size: 30px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}

.data-card-sub { color: var(--text-muted, var(--spb-muted)) !important; font-size: 11px !important; }

.dashboard-agenda-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.dashboard-agenda-layout > * {
  min-width: 0 !important;
  margin: 0 !important;
}

.calendar-card,
.agenda-panel { padding: 18px !important; }
.calendar-header { margin-bottom: 14px !important; }
.calendar-header h2, .agenda-panel h2 { font-size: 15px !important; }
.calendar-header button {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  border: 1px solid var(--border, var(--spb-line)) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text-base, var(--spb-copy)) !important;
}

.calendar-days { gap: 5px !important; }
.calendar-days > * {
  min-height: 42px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: var(--bg-base, var(--spb-canvas)) !important;
}
.calendar-days > *.selected,
.calendar-days > *.active,
.calendar-day.selected {
  border-color: var(--primary, var(--spb-accent)) !important;
  background: color-mix(in srgb, var(--primary, var(--spb-accent)) 12%, var(--bg-base, var(--spb-canvas))) !important;
  color: var(--text-heading, var(--spb-heading)) !important;
}

.agenda-list { gap: 8px !important; max-height: 420px !important; }
.agenda-item,
.schedule-item {
  min-height: 58px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border, var(--spb-line)) !important;
  border-radius: 8px !important;
  background: var(--bg-base, var(--spb-canvas)) !important;
}

:where(button, .btn, [role="button"]) {
  min-height: 42px;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-weight: 650 !important;
}

.btn {
  padding: 0 15px !important;
  border-width: 1px !important;
  box-shadow: none !important;
}

.btn-sm { min-height: 38px !important; padding: 0 12px !important; font-size: 12px !important; }

.btn-primary,
.login-btn,
.btn-upgrade-inline {
  border: 1px solid var(--primary, var(--spb-accent)) !important;
  background: var(--primary, var(--spb-accent)) !important;
  color: #07111c !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.login-btn:hover,
.btn-upgrade-inline:hover {
  border-color: var(--spb-accent-hover) !important;
  background: var(--spb-accent-hover) !important;
  filter: none !important;
  transform: none !important;
}

.btn-secondary,
.btn-ghost,
.google-btn {
  border: 1px solid var(--border-strong, var(--spb-line)) !important;
  background: transparent !important;
  color: var(--text-base, var(--spb-copy)) !important;
}

.btn-secondary:hover,
.btn-ghost:hover,
.google-btn:hover {
  background: var(--bg-elevated, var(--spb-elevated)) !important;
  color: var(--text-heading, var(--spb-heading)) !important;
  transform: none !important;
}

.btn-danger { background: transparent !important; border: 1px solid color-mix(in srgb, var(--spb-danger) 60%, transparent) !important; color: #ff8a8a !important; }

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea, select) {
  min-height: 44px !important;
  border: 1px solid var(--border, var(--spb-line)) !important;
  border-radius: 8px !important;
  background: var(--bg-base, var(--spb-canvas)) !important;
  color: var(--text-base, var(--spb-copy)) !important;
  box-shadow: none !important;
}

:where(input, textarea, select)::placeholder { color: color-mix(in srgb, var(--text-muted, var(--spb-muted)) 72%, transparent) !important; }
:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus { border-color: var(--primary, var(--spb-accent)) !important; box-shadow: none !important; }

.modal-backdrop {
  padding: 20px !important;
  background: rgba(3, 7, 12, .66) !important;
  backdrop-filter: blur(10px) saturate(.78) !important;
}

.schedule-date-modal {
  background: rgba(3, 7, 12, .66) !important;
  backdrop-filter: blur(10px) saturate(.78) !important;
}

body.spb-overlay-open { overflow: hidden !important; }
.spb-focus-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: none;
  border: 0;
  background: rgba(3, 7, 12, .62);
  opacity: 0;
  backdrop-filter: blur(10px) saturate(.76);
  transition: opacity 150ms ease;
}
.spb-focus-backdrop.open { display: block; opacity: 1; }
.notif-dropdown.notif-portal {
  z-index: 2147483000 !important;
  border-color: var(--border-strong, var(--spb-line)) !important;
  background: var(--bg-panel, var(--spb-surface)) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .52) !important;
}

@media (min-width: 901px) {
  .notif-dropdown.notif-portal {
    left: calc(var(--spb-sidebar) + 12px) !important;
    right: auto !important;
    top: 18px !important;
    bottom: 18px !important;
    width: min(390px, calc(100vw - var(--spb-sidebar) - 36px)) !important;
    max-width: calc(100vw - var(--spb-sidebar) - 36px) !important;
  }
}

@media (max-width: 900px) {
  .notif-dropdown.notif-portal {
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 82px !important;
    width: auto !important;
    max-width: none !important;
  }
  .mobile-more-menu.open { isolation: isolate; }
  .mobile-more-menu.open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(3, 7, 12, .62);
    backdrop-filter: blur(10px) saturate(.76);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spb-focus-backdrop { transition: none; }
}

:where(.modal-card, .modal-content) {
  border: 1px solid var(--border-strong, var(--spb-line)) !important;
  border-radius: 12px !important;
  background: var(--bg-elevated, var(--spb-elevated)) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .38) !important;
}

.settings-tabs {
  display: flex !important;
  gap: 4px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 18px !important;
  padding: 4px !important;
  overflow-x: auto !important;
}

.settings-tab {
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--text-muted, var(--spb-muted)) !important;
  white-space: nowrap !important;
}

.settings-tab.active {
  background: var(--bg-elevated, var(--spb-elevated)) !important;
  color: var(--text-heading, var(--spb-heading)) !important;
  box-shadow: inset 0 0 0 1px var(--border, var(--spb-line)) !important;
}

/* Autenticação e documentos */
body.login-page {
  display: grid !important;
  min-height: 100dvh !important;
  place-items: center !important;
  padding: 28px !important;
}

.login-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .86fr) !important;
  align-items: stretch !important;
  width: min(1080px, 100%) !important;
  max-width: none !important;
  gap: 0 !important;
}

.login-hero,
.login-card {
  border: 1px solid var(--border, var(--spb-line)) !important;
  border-radius: 0 !important;
  background: var(--bg-panel, var(--spb-surface)) !important;
  box-shadow: none !important;
}

.login-hero {
  justify-content: center !important;
  padding: clamp(40px, 5vw, 64px) !important;
  border-radius: 12px 0 0 12px !important;
  border-right: 0 !important;
}

.login-card {
  justify-content: center !important;
  min-height: 620px !important;
  padding: clamp(32px, 4vw, 52px) !important;
  border-radius: 0 12px 12px 0 !important;
}

.login-hero .hero-logo { margin-bottom: 46px !important; }
.login-hero h1 { max-width: 430px; font-size: clamp(32px, 3.2vw, 44px) !important; line-height: 1.08 !important; }
.login-hero h1 span,
.login-mobile-intro h2 span { color: var(--primary, var(--spb-accent)) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.login-hero p { max-width: 470px; color: var(--text-muted, var(--spb-muted)) !important; }
.login-hero ul li { color: var(--text-muted, var(--spb-muted)) !important; }
.login-hero ul li::before { color: var(--primary, var(--spb-accent)) !important; }

.login-card .welcome { margin-bottom: 5px !important; }
.login-card h1 { margin-bottom: 5px !important; font-size: 22px !important; }
.login-card #subtitle { margin-bottom: 22px !important; }
.login-card .input-group { margin-bottom: 15px !important; }
.login-card .input-group label { margin-bottom: 6px !important; color: var(--text-muted, var(--spb-muted)) !important; font-size: 12px !important; font-weight: 550 !important; }
.login-card .input-group input { min-height: 46px !important; padding: 0 12px !important; }
.login-btn, .google-btn { min-height: 46px !important; }
.toggle-pwd, #forgotPwdBtn, .register-link button { color: var(--primary, var(--spb-accent)) !important; }
.toggle-pwd { min-height: 36px !important; }
.divider { margin: 17px 0 !important; }
.register-link { margin-top: 17px !important; }
.register-link button { min-height: 34px !important; padding: 0 4px !important; }
.terms-text { max-width: 420px; margin: 12px auto 0 !important; font-size: 12px !important; line-height: 1.55 !important; }
.terms-text a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 4px 2px;
  color: var(--primary, var(--spb-accent)) !important;
}
.login-mobile-brand, .login-mobile-intro { display: none; }

.login-page > .login-card {
  width: min(460px, 100%) !important;
  min-height: 0 !important;
  border-radius: 12px !important;
}

.terms-card,
.privacy-card,
.error-card {
  width: min(780px, 100%) !important;
  padding: clamp(24px, 5vw, 46px) !important;
  border: 1px solid var(--border, var(--spb-line)) !important;
  border-radius: 12px !important;
  background: var(--bg-panel, var(--spb-surface)) !important;
  box-shadow: none !important;
}

.terms-card :where(p, li),
.privacy-card :where(p, li) { color: var(--text-muted, var(--spb-muted)) !important; font-size: 14px !important; }
.terms-card a, .privacy-card a { color: var(--primary, var(--spb-accent)) !important; }

/* Responsividade */
@media (max-width: 1100px) {
  .data-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dashboard-agenda-layout { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  :root { --spb-sidebar: 0px; }

  body:not(.login-page) { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; }

  .sidebar {
    position: fixed !important;
    inset: auto 0 0 !important;
    display: block !important;
    width: 100% !important;
    height: calc(68px + env(safe-area-inset-bottom)) !important;
    padding: 6px 8px env(safe-area-inset-bottom) !important;
    border: 0 !important;
    border-top: 1px solid var(--sidebar-border, var(--spb-line)) !important;
    background: color-mix(in srgb, var(--sidebar-bg, var(--spb-surface)) 96%, transparent) !important;
    backdrop-filter: blur(16px) !important;
  }

  .sidebar-logo, .sidebar-plan { display: none !important; }
  .sidebar-nav {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    width: 100% !important;
    height: 60px !important;
  }

  .sidebar-nav a,
  .mobile-more-button {
    display: none !important;
  }

  .sidebar-nav a[data-mobile-primary="true"],
  .sidebar-nav .mobile-more-button {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 5px 2px !important;
    gap: 3px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--text-muted, var(--spb-muted)) !important;
    font-size: 10px !important;
  }

  .sidebar-nav a.active { color: var(--primary, var(--spb-accent)) !important; box-shadow: none !important; }
  .sidebar-nav a.active::before { display: none !important; }
  .sidebar-nav a svg, .mobile-more-button svg { width: 20px !important; height: 20px !important; }

  .main-content {
    margin-left: 0 !important;
    padding: 20px 16px 32px !important;
  }

  .page-header { align-items: flex-start !important; gap: 14px !important; }

  body.login-page { display: block !important; padding: 0 !important; }
  .login-wrapper { display: block !important; width: 100% !important; }
  .login-hero { display: none !important; }
  .login-card {
    width: 100% !important;
    min-height: 100dvh !important;
    padding: 24px 22px 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .login-mobile-brand {
    display: flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin-bottom: 28px !important;
    gap: 9px !important;
    color: var(--text-heading, var(--spb-heading)) !important;
    text-decoration: none !important;
  }

  .login-mobile-brand strong { font-size: 15px !important; letter-spacing: -.03em; }
  .login-mobile-intro { display: block !important; margin-bottom: 25px !important; }
  .login-mobile-intro h2 { max-width: 330px; margin: 0 0 10px !important; font-size: 28px !important; line-height: 1.12 !important; }
  .login-mobile-intro p { max-width: 390px; margin: 0 !important; color: var(--text-muted, var(--spb-muted)) !important; font-size: 13px !important; }
  .terms-text a { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .login-page > .login-card { min-height: 100dvh !important; padding-top: 48px !important; }
}

@media (max-width: 620px) {
  .main-content { padding-right: 13px !important; padding-left: 13px !important; }
  .page-header { min-height: 0 !important; margin-bottom: 17px !important; padding-bottom: 15px !important; }
  .page-header h1 { font-size: 24px !important; }
  .page-header > div:last-child { width: 100%; }
  .page-header > div:last-child .btn { flex: 1; }
  .data-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .data-card { min-height: 102px !important; padding: 14px !important; }
  .data-card-value { font-size: 25px !important; }
  .calendar-card, .agenda-panel, .card { padding: 15px !important; }
  .calendar-days > * { min-height: 38px !important; }
  .modal-backdrop { padding: 10px !important; }
  .settings-tabs { width: 100% !important; }
  .settings-tab { flex: 1 0 auto !important; }
  .terms-card, .privacy-card, .error-card { border-right: 0 !important; border-left: 0 !important; border-radius: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Publicar: seleção de destinos, editor e agenda */
body.ui-qa-mode #sidebarContainer { display: none !important; }
body.ui-qa-mode .main-content { margin-left: 0 !important; }
.spb-step-actions { display: none !important; }

.publicar-main .destinations-layout {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: 12px !important;
}

.publicar-main .destination-pane {
  min-height: 172px !important;
  padding: 16px !important;
  border-radius: 10px !important;
  background: var(--bg-elevated, var(--spb-raised)) !important;
}

.destination-pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.destination-pane-head .section-kicker { margin-bottom: 4px !important; }
.destination-pane-head strong { color: var(--text-heading, var(--spb-heading)); font-size: 13px; }

.publicar-main .profile-select {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}

.publicar-main .profile-chip {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 10px !important;
  gap: 9px;
  border-radius: 9px !important;
  background: var(--bg-base, var(--spb-bg)) !important;
  color: var(--text-base, var(--spb-heading)) !important;
  text-align: left;
}

.publicar-main .profile-chip:hover { border-color: var(--border-hover, #344054) !important; }
.publicar-main .profile-chip.selected {
  border-color: var(--primary, var(--spb-accent)) !important;
  background: color-mix(in srgb, var(--primary, var(--spb-accent)) 8%, var(--bg-base, var(--spb-bg))) !important;
}

.profile-chip > .social-icon-svg { width: 24px !important; height: 24px !important; }
.profile-chip-copy { display: grid; min-width: 0; gap: 2px; }
.profile-chip-copy strong { overflow: hidden; color: var(--text-heading, var(--spb-heading)); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.profile-chip-copy small { color: var(--text-muted, var(--spb-muted)); font-size: 11px; }
.profile-chip-state {
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--bg-subtle, var(--spb-surface));
  color: var(--text-muted, var(--spb-muted));
  font-size: 10px;
  font-weight: 700;
}
.profile-chip.selected .profile-chip-state { background: var(--primary, var(--spb-accent)); color: #06111a; }
.profile-chip-empty { display: flex !important; grid-column: 1 / -1; color: var(--text-muted, var(--spb-muted)) !important; }

.publicar-main .channel-grid { gap: 8px !important; }
.publicar-main .channel-row {
  display: grid !important;
  grid-template-columns: 34px minmax(112px, .36fr) minmax(0, 1fr);
  align-items: center;
  padding: 10px !important;
  gap: 10px !important;
  border: 1px solid var(--border, var(--spb-line));
  border-radius: 9px !important;
  background: var(--bg-base, var(--spb-bg)) !important;
}

.channel-network-copy { display: grid; min-width: 0; gap: 2px; }
.channel-network-copy strong { color: var(--text-heading, var(--spb-heading)); font-size: 12px; }
.channel-network-copy small { color: var(--text-muted, var(--spb-muted)); font-size: 10px; }
.publicar-main .channel-options { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px !important; width: 100%; }
.publicar-main .channel-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 52px;
  padding: 8px 9px !important;
  gap: 8px;
  border-radius: 8px !important;
  background: var(--bg-elevated, var(--spb-raised)) !important;
  text-align: left;
}

.publicar-main .channel-btn.selected {
  border-color: var(--primary, var(--spb-accent)) !important;
  background: color-mix(in srgb, var(--primary, var(--spb-accent)) 8%, var(--bg-elevated, var(--spb-raised))) !important;
}
.channel-format-copy { display: grid; min-width: 0; gap: 2px; }
.channel-format-copy strong { color: var(--text-heading, var(--spb-heading)); font-size: 12px; }
.channel-format-copy small { overflow: hidden; color: var(--text-muted, var(--spb-muted)); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.publicar-main .channel-short {
  flex: 0 0 auto;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--bg-base, var(--spb-bg));
  color: var(--text-muted, var(--spb-muted));
  font-size: 9px;
  font-weight: 750;
}
.publicar-main .channel-btn.selected .channel-short { background: var(--primary, var(--spb-accent)); color: #06111a; }
.publicar-main .channel-status-note { grid-column: 2 / -1; }
.publicar-main .channel-empty { min-height: 92px; padding: 14px; border: 1px dashed var(--border, var(--spb-line)); color: var(--text-muted, var(--spb-muted)); }

.caption-editor {
  position: relative;
  overflow: visible;
  border: 1px solid var(--border, var(--spb-line));
  border-radius: 10px;
  background: var(--bg-base, var(--spb-bg));
}
.caption-editor:focus-within { border-color: var(--primary, var(--spb-accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, var(--spb-accent)) 15%, transparent); }
.caption-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 6px 8px;
  gap: 8px;
  border-bottom: 1px solid var(--border, var(--spb-line));
}
.caption-editor-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.caption-tool {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted, var(--spb-muted));
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.caption-tool:hover, .caption-tool[aria-expanded="true"] { border-color: var(--border, var(--spb-line)); background: var(--bg-elevated, var(--spb-raised)); color: var(--text-base, var(--spb-heading)); }
.caption-tool:disabled { opacity: .4; cursor: default; }
.caption-tool-muted { margin-left: auto; }
.caption-editor-input {
  width: 100%;
  min-height: 205px;
  max-height: 420px;
  overflow: auto;
  padding: 14px;
  color: var(--text-base, var(--spb-heading));
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  outline: none;
}
.caption-editor-input:empty::before { color: var(--text-muted, var(--spb-muted)); content: attr(data-placeholder); pointer-events: none; }
.caption-emoji-picker {
  position: absolute;
  z-index: 20;
  top: 43px;
  left: 8px;
  display: grid;
  grid-template-columns: repeat(4, 38px);
  padding: 8px;
  gap: 4px;
  border: 1px solid var(--border, var(--spb-line));
  border-radius: 9px;
  background: var(--bg-panel, var(--spb-surface));
  box-shadow: 0 16px 32px rgba(0, 0, 0, .34);
}
.caption-emoji-picker[hidden] { display: none; }
.caption-emoji-picker button { width: 38px; height: 38px; border: 0; border-radius: 7px; background: transparent; font-size: 19px; cursor: pointer; }
.caption-emoji-picker button:hover { background: var(--bg-elevated, var(--spb-raised)); }

.empty-state-icon {
  display: grid !important;
  place-items: center !important;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px !important;
  line-height: 1 !important;
}
.empty-state-icon .ui-inline-icon {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  vertical-align: 0 !important;
}
.empty-state-icon .ui-inline-icon svg { display: block; width: 36px !important; height: 36px !important; }

.publicar-main .slot-item {
  grid-template-columns: 34px 110px minmax(250px, 1fr) auto !important;
  min-height: 78px;
  padding: 10px 12px !important;
  gap: 10px !important;
  align-items: start !important;
  border-radius: 10px !important;
  background: var(--bg-base, var(--spb-bg)) !important;
}
.publicar-main .slot-number,
.publicar-main .slot-date-overview,
.publicar-main .slot-remove-btn { margin-top: 18px; }
.slot-date-overview { display: grid; gap: 2px; }
.slot-date-overview strong { color: var(--text-heading, var(--spb-heading)); font-size: 12px; text-transform: capitalize; }
.slot-date-overview small { color: var(--text-muted, var(--spb-muted)); font-size: 10px; }
.slot-datetime-field { display: grid; min-width: 0; gap: 5px; }
.slot-datetime-field label { color: var(--text-muted, var(--spb-muted)); font-size: 10px; font-weight: 700; }
.slot-datetime-field input { width: 100% !important; height: 44px !important; }
.slot-remove-btn { min-height: 44px !important; }

@media (max-width: 1160px) {
  .publicar-main .profile-select { grid-template-columns: 1fr; }
  .publicar-main .channel-row { grid-template-columns: 34px minmax(96px, .28fr) minmax(0, 1fr); }
  .publicar-main .channel-options { grid-template-columns: 1fr; }
  .publicar-main .slot-item { grid-template-columns: 34px 100px minmax(210px, 1fr) auto !important; }
}

@media (max-width: 900px) {
  .spb-step-actions { display: flex !important; }
}

@media (max-width: 820px) {
  .publicar-main .destinations-layout { grid-template-columns: 1fr !important; }
  .publicar-main .profile-select { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .publicar-main .channel-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .publicar-main .slot-item { grid-template-columns: 34px minmax(0, 1fr) auto !important; }
  .slot-date-overview { align-self: center; }
  .publicar-main .slot-number,
  .publicar-main .slot-date-overview,
  .publicar-main .slot-remove-btn { margin-top: 0; }
  .slot-datetime-field { grid-column: 1 / -1; grid-row: 2; }
  .slot-remove-btn { grid-column: 3; grid-row: 1; }
}

@media (max-width: 560px) {
  .destination-pane-head { align-items: stretch; flex-direction: column; }
  .destination-pane-head .btn { width: 100%; }
  .publicar-main .profile-select, .publicar-main .channel-options { grid-template-columns: 1fr; }
  .publicar-main .channel-row { grid-template-columns: 32px minmax(0, 1fr); }
  .publicar-main .channel-options, .publicar-main .channel-status-note { grid-column: 1 / -1; }
  .caption-editor-toolbar { align-items: flex-start; }
  .caption-editor-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .caption-tool { min-height: 44px; }
  .caption-tool-muted { min-width: 58px; }
  .caption-editor-input { min-height: 230px; }
  .publicar-main .slot-item { grid-template-columns: 32px minmax(0, 1fr) !important; }
  .publicar-main .slot-item > .slot-number { grid-column: 1 !important; grid-row: 1 !important; }
  .publicar-main .slot-item > .slot-date-overview { grid-column: 2 !important; grid-row: 1 !important; }
  .publicar-main .slot-item > .slot-datetime-field { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  .publicar-main .slot-item > .slot-remove-btn { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100%; }
}