* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --background: #070707;
  --sidebar: #0b0b0b;
  --panel: #101010;
  --panel-light: #151515;
  --border: #222;
  --border-light: #2b2b2b;
  --text: #f5f5f5;
  --muted: #777;
  --muted-light: #999;
  --accent: #e84393;
  --accent-dark: #a62968;
  --green: #35d07f;
  --red: #ff5c69;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--text);
  font-family: "Inter", sans-serif;
  min-height: 100vh;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app {
  min-height: 100vh;
}

/* SIDEBAR */

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 245px;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 30px;
}

.brand-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ff7849, #e84393, #794cff);
  font-weight: 800;
  font-size: 17px;
}

.brand strong {
  display: block;
  font-size: 15px;
  letter-spacing: 1.5px;
}

.brand span {
  color: var(--muted);
  font-size: 11px;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: #777;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: 0.2s;
}

.menu-item span {
  width: 20px;
  text-align: center;
}

.menu-item:hover {
  background: #121212;
  color: #ddd;
}

.menu-item.active {
  background: #181818;
  color: white;
  border-left: 2px solid var(--accent);
}

.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #555;
  border-radius: 50%;
}

.status-dot.online {
  background: var(--green);
  box-shadow: 0 0 12px rgba(53, 208, 127, 0.5);
}

.connection-status strong {
  display: block;
  font-size: 12px;
}

.connection-status span {
  color: var(--muted);
  font-size: 10px;
}

/* MAIN */

.main {
  margin-left: 245px;
  min-height: 100vh;
  padding: 0 38px 60px;
}

.header {
  min-height: 105px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.header h1 {
  font-size: 22px;
  margin-bottom: 6px;
}

.header p {
  color: var(--muted);
  font-size: 12px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.connect-button {
  border: 0;
  background: white;
  color: #050505;
  padding: 12px 19px;
  font-weight: 700;
  font-size: 12px;
}

.connect-button:hover {
  background: #ddd;
}

.instagram-account {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ff7849, #e84393, #794cff);
  font-weight: 800;
}

.instagram-account strong {
  display: block;
  font-size: 12px;
}

.instagram-account span {
  color: var(--muted);
  font-size: 10px;
}

.mobile-brand {
  display: none;
}

.hidden {
  display: none !important;
}

/* PAGES */

.page {
  display: none;
  padding-top: 30px;
}

.page.active-page {
  display: block;
}

.period-bar,
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.period-bar strong {
  display: block;
  font-size: 15px;
  margin-bottom: 5px;
}

.period-bar span,
.section-heading p {
  color: var(--muted);
  font-size: 11px;
}

.period-bar select {
  background: var(--panel);
  border: 1px solid var(--border-light);
  color: #bbb;
  padding: 10px 14px;
  outline: none;
}

.section-heading h2 {
  font-size: 18px;
  margin-bottom: 6px;
}

/* MÉTRICAS */

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.metric-card {
  min-height: 128px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.metric-label {
  color: var(--muted-light);
  font-size: 11px;
}

.metric-value {
  font-size: 23px;
  margin: 18px 0 9px;
}

.positive {
  color: var(--green) !important;
}

.negative {
  color: var(--red) !important;
}

.metric-card > span:last-child {
  font-size: 10px;
}

/* PAINÉIS */

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 22px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.panel-header strong {
  display: block;
  font-size: 13px;
}

.panel-header span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 5px;
}

.chart-total {
  font-size: 20px !important;
}

.chart {
  height: 245px;
  position: relative;
  overflow: hidden;
}

.chart-lines {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chart-lines span {
  display: block;
  border-top: 1px solid #1c1c1c;
}

.line-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.area {
  fill: url(#chartFill);
}

.highlights {
  display: flex;
  flex-direction: column;
}

.highlight {
  padding: 17px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.highlight:last-child {
  border-bottom: 0;
}

.highlight span {
  color: var(--muted);
  font-size: 11px;
}

.highlight strong {
  font-size: 14px;
}

/* REELS */

.reels-panel {
  margin-bottom: 20px;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
}

.reel-row {
  display: grid;
  grid-template-columns: 50px minmax(180px, 2fr) repeat(4, 1fr) 1.3fr;
  align-items: center;
  gap: 15px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.reel-row:hover {
  background: #131313;
}

.reel-thumb {
  width: 42px;
  height: 42px;
  background: #222;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #777;
}

.reel-name strong {
  display: block;
  font-size: 11px;
}

.reel-name span {
  color: var(--muted);
  font-size: 9px;
}

.reel-stat span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  margin-bottom: 4px;
}

.reel-stat strong {
  font-size: 11px;
}

.performance-badge {
  font-size: 10px;
  padding: 7px 9px;
  text-align: center;
}

.performance-badge.good {
  background: rgba(53, 208, 127, 0.08);
  color: var(--green);
}

.performance-badge.bad {
  background: rgba(255, 92, 105, 0.08);
  color: var(--red);
}

.performance-badge.normal {
  background: #191919;
  color: #aaa;
}

/* CONTEÚDOS */

.search-box input {
  width: 230px;
  background: var(--panel);
  border: 1px solid var(--border-light);
  color: white;
  padding: 11px 13px;
  outline: none;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.content-card {
  background: var(--panel);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: 0.2s;
}

.content-card:hover {
  border-color: #444;
  transform: translateY(-2px);
}

.content-cover {
  height: 220px;
  background:
    radial-gradient(circle at 70% 20%, rgba(232,67,147,.25), transparent 35%),
    linear-gradient(145deg, #202020, #0c0c0c);
  display: grid;
  place-items: center;
  color: #666;
  font-size: 12px;
  letter-spacing: 2px;
}

.content-body {
  padding: 16px;
}

.content-body > span {
  color: var(--muted);
  font-size: 9px;
}

.content-body h3 {
  font-size: 12px;
  margin: 7px 0 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.content-stats div span {
  display: block;
  color: var(--muted);
  font-size: 8px;
  margin-bottom: 4px;
}

.content-stats strong {
  font-size: 10px;
}

/* PERFORMANCE */

.performance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 15px;
}

.performance-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 24px;
}

.performance-card.best {
  border-top: 2px solid var(--accent);
}

.performance-card > span {
  color: var(--muted);
  font-size: 10px;
}

.performance-card > strong {
  display: block;
  font-size: 26px;
  margin: 18px 0 3px;
}

.performance-card p {
  color: var(--muted);
  font-size: 9px;
  margin-bottom: 17px;
}

.performance-card small {
  color: var(--green);
  font-size: 9px;
}

.comparison-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center;
  gap: 15px;
  padding: 17px 0;
  border-top: 1px solid var(--border);
}

.comparison-item strong {
  font-size: 11px;
}

.comparison-item span {
  font-size: 10px;
  color: var(--muted);
}

/* HISTÓRICO */

.history-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.history-header {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.history-row:last-child {
  border-bottom: 0;
}

/* CONTA */

.account-panel {
  max-width: 700px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 30px;
}

.profile-big {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--border);
}

.profile-avatar {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ff7849, #e84393, #794cff);
  font-weight: 800;
  font-size: 20px;
}

.profile-big strong {
  display: block;
  font-size: 15px;
}

.profile-big span {
  color: var(--muted);
  font-size: 10px;
}

.account-info {
  margin: 20px 0;
}

.account-info div {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.account-info span {
  color: var(--muted);
}

.danger-button {
  background: rgba(255, 92, 105, 0.08);
  border: 1px solid rgba(255, 92, 105, 0.2);
  color: var(--red);
  padding: 11px 16px;
  font-size: 10px;
}

/* MODAL */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(5px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal {
  width: min(850px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #0d0d0d;
  border: 1px solid #292929;
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
}

.modal-close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 32px;
  height: 32px;
  background: #191919;
  border: 1px solid #333;
  color: white;
  font-size: 20px;
  z-index: 2;
}

.modal-reel-cover {
  min-height: 500px;
  background:
    radial-gradient(circle at 50% 30%, rgba(232,67,147,.28), transparent 30%),
    linear-gradient(150deg, #242424, #080808);
  display: grid;
  place-items: center;
  color: #777;
  letter-spacing: 3px;
  font-size: 11px;
}

.modal-content {
  padding: 45px 35px 30px;
}

.modal-date {
  color: var(--muted);
  font-size: 9px;
}

.modal-content h2 {
  margin: 8px 0 25px;
  font-size: 18px;
}

.modal-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.modal-metrics div {
  background: #131313;
  border: 1px solid var(--border);
  padding: 15px;
}

.modal-metrics span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  margin-bottom: 8px;
}

.modal-metrics strong {
  font-size: 15px;
}

.result-box {
  margin-top: 20px;
  border-left: 2px solid var(--accent);
  background: #131313;
  padding: 18px;
}

.result-box span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  margin-bottom: 7px;
}

.result-box strong {
  font-size: 12px;
}

/* MOBILE NAV */

.mobile-nav {
  display: none;
}

/* RESPONSIVO */

@media (max-width: 1200px) {

  .metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .content-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

@media (max-width: 900px) {

  body {
    padding-bottom: 70px;
  }

  .sidebar {
    display: none;
  }

  .main {
    margin-left: 0;
    padding: 0 18px 35px;
  }

  .header {
    min-height: 92px;
  }

  .mobile-brand {
    display: block;
    color: var(--accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 5px;
  }

  .header h1 {
    font-size: 18px;
  }

  .header p {
    display: none;
  }

  .instagram-account {
    display: none !important;
  }

  .connect-button {
    padding: 10px 13px;
    font-size: 9px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .content-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .performance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reel-row {
    grid-template-columns: 45px 1fr 1fr 1fr;
  }

  .reel-row .mobile-hide {
    display: none;
  }

  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background: #090909;
    border-top: 1px solid #222;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    z-index: 50;
  }

  .mobile-nav-item {
    border: 0;
    background: transparent;
    color: #666;
    font-size: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .mobile-nav-item span {
    font-size: 16px;
  }

  .mobile-nav-item.active {
    color: white;
  }

  .modal {
    grid-template-columns: 1fr;
  }

  .modal-reel-cover {
    min-height: 220px;
  }

}

@media (max-width: 600px) {

  .main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .metric-card {
    min-height: 112px;
    padding: 15px;
  }

  .metric-value {
    font-size: 19px;
  }

  .period-bar {
    align-items: flex-end;
  }

  .period-bar select {
    max-width: 145px;
    font-size: 9px;
  }

  .panel {
    padding: 16px;
  }

  .chart {
    height: 190px;
  }

  .content-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .content-cover {
    height: 170px;
  }

  .content-body {
    padding: 12px;
  }

  .performance-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .performance-card {
    padding: 17px;
  }

  .performance-card > strong {
    font-size: 21px;
  }

  .section-heading {
    align-items: flex-end;
  }

  .search-box input {
    width: 145px;
    font-size: 9px;
  }

  .history-panel {
    overflow-x: auto;
  }

  .history-row {
    min-width: 620px;
  }

  .comparison-list {
    overflow-x: auto;
  }

  .comparison-item {
    min-width: 600px;
  }

  .reel-row {
    grid-template-columns: 40px 1fr 1fr;
  }

  .reel-row .tablet-hide {
    display: none;
  }

  .modal-content {
    padding: 25px 18px;
  }

}

/* AUTH + LIVE EFFECTS */
.app-locked { display: none !important; }
.auth-shell { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; overflow: hidden; background: #050505; padding: 22px; }
.auth-shell.hidden { display: none; }
.auth-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(110px); opacity: .18; pointer-events: none; animation: glowFloat 8s ease-in-out infinite alternate; }
.auth-glow-a { background: var(--accent); top: -160px; left: -120px; }
.auth-glow-b { background: #6f42ff; bottom: -190px; right: -120px; animation-delay: -3s; }
.auth-card { position: relative; width: min(440px, 100%); background: rgba(14,14,14,.92); border: 1px solid #2a2a2a; padding: 34px; box-shadow: 0 30px 100px rgba(0,0,0,.55); animation: authEnter .55s cubic-bezier(.2,.8,.2,1); }
.auth-card:before { content:""; position:absolute; inset:0 0 auto 0; height:2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:36px; }
.auth-brand strong { display:block; letter-spacing:1.5px; font-size:15px; }
.auth-brand span { display:block; color:var(--muted); font-size:10px; margin-top:2px; }
.auth-copy { margin-bottom:24px; }
.auth-kicker { color:var(--accent); font-weight:800; letter-spacing:1.8px; font-size:9px; }
.auth-copy h1 { font-size:25px; margin:8px 0; }
.auth-copy p { color:var(--muted-light); font-size:11px; line-height:1.6; }
.auth-form { display:grid; gap:14px; }
.auth-form label { display:grid; gap:7px; color:#aaa; font-size:10px; font-weight:600; }
.auth-form input { width:100%; background:#0a0a0a; border:1px solid #292929; color:#fff; padding:14px 15px; outline:none; transition:.2s; }
.auth-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,67,147,.08); }
.auth-primary { border:0; background:#fff; color:#050505; font-weight:800; padding:14px; margin-top:4px; transition:.2s; }
.auth-primary:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(255,255,255,.1); }
.auth-primary:disabled { opacity:.55; cursor:wait; transform:none; }
.auth-switch { width:100%; border:0; background:transparent; color:var(--accent); padding:14px 0 0; font-size:10px; font-weight:700; }
.auth-message { min-height:17px; margin-top:12px; color:var(--red); font-size:10px; text-align:center; line-height:1.5; }
.logout-button, .sync-button { border:1px solid #292929; background:#101010; color:#aaa; padding:11px 13px; font-size:10px; transition:.2s; }
.logout-button:hover, .sync-button:hover { color:#fff; border-color:#444; transform:translateY(-1px); }
.sync-button { color:var(--green); }
.sync-button .sync-icon { display:inline-block; margin-right:5px; }
.sync-button.syncing .sync-icon { animation:spin .8s linear infinite; }
.live-status { position:fixed; right:22px; bottom:22px; z-index:150; display:flex; align-items:center; gap:10px; background:#111; border:1px solid #292929; padding:12px 15px; box-shadow:0 12px 40px rgba(0,0,0,.42); animation:toastIn .25s ease; }
.live-status.hidden { display:none; }
.live-status span { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(53,208,127,.4); animation:pulseDot 1.4s infinite; }
.live-status strong { font-size:10px; font-weight:600; }
.toast { position:fixed; left:50%; bottom:25px; z-index:200; transform:translate(-50%,25px); opacity:0; pointer-events:none; background:#111; border:1px solid #2b2b2b; color:#fff; padding:12px 18px; font-size:10px; box-shadow:0 15px 50px rgba(0,0,0,.5); transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error { border-color:rgba(255,92,105,.4); color:#ff8b94; }
.empty-state { grid-column:1/-1; min-height:120px; display:grid; place-items:center; align-content:center; gap:8px; color:#555; border:1px dashed #252525; background:#0b0b0b; }
.empty-state span { font-size:22px; animation:pulseSoft 2s infinite; }
.empty-state strong { font-size:10px; font-weight:600; }
.reveal { animation:reveal .38s ease both; }
.metric-card, .panel, .performance-card, .account-panel { transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.metric-card:hover, .performance-card:hover { transform:translateY(-3px); border-color:#343434; box-shadow:0 12px 32px rgba(0,0,0,.18); }
.panel:hover, .account-panel:hover { border-color:#2d2d2d; }
.content-cover.has-image, .reel-thumb.has-image, .modal-reel-cover.has-image { background-size:cover !important; background-position:center !important; }
.content-cover { position:relative; overflow:hidden; }
.content-cover .cover-shade { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.35),transparent 55%); opacity:.7; transition:.25s; }
.content-card:hover .content-cover { transform:none; }
.content-card:hover .cover-shade { opacity:.25; }
.content-card .content-cover { transition:filter .3s ease; }
.content-card:hover .content-cover { filter:brightness(1.08); }
.history-live .empty-state { margin-top:12px; }
.status-dot.online { animation:pulseDot 1.8s infinite; }

@keyframes authEnter { from{opacity:0;transform:translateY(18px) scale(.985)} to{opacity:1;transform:none} }
@keyframes glowFloat { from{transform:translate3d(-15px,-10px,0) scale(.95)} to{transform:translate3d(25px,20px,0) scale(1.08)} }
@keyframes reveal { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes pulseDot { 0%{box-shadow:0 0 0 0 rgba(53,208,127,.35)} 70%{box-shadow:0 0 0 8px rgba(53,208,127,0)} 100%{box-shadow:0 0 0 0 rgba(53,208,127,0)} }
@keyframes pulseSoft { 50%{opacity:.35;transform:scale(.94)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes toastIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

@media(max-width:900px){
  .auth-card{padding:27px 21px}.auth-copy h1{font-size:22px}.logout-button{display:none}.sync-button{padding:10px}.live-status{right:12px;bottom:78px}.header-actions{gap:7px}
}
.instagram-login-button { width: 100%; display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; letter-spacing:.1px; }
.instagram-login-mark { font-size:19px; line-height:1; }
.auth-security { margin-top:16px; color:#666; font-size:9px; line-height:1.55; text-align:center; }
.spin { display:inline-block; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* AJUSTE: atualização silenciosa + Conteúdos sem rolagem lateral */
html, body { max-width: 100%; overflow-x: hidden; }
.main { min-width: 0; max-width: calc(100vw - 245px); overflow-x: hidden; }
.page, .section, .panel { min-width: 0; }

/* Nas sincronizações automáticas, nada reaparece/pisca. */
.silent-refresh .reveal { animation: none !important; }
.silent-refresh .content-card,
.silent-refresh .metric-card,
.silent-refresh .performance-card,
.silent-refresh .panel { transition: none !important; }

/* Conteúdos: grade vertical responsiva, nunca maior que a tela. */
.content-grid {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
  overflow: visible;
}
.content-card { min-width: 0; width: 100%; overflow: hidden; }
.content-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #090909;
}
.content-cover.has-image { background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; }
.content-body h3 { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; min-height: 34px; }
.content-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.content-stats div { min-width: 0; }

@media (max-width: 900px) {
  .main { max-width: 100%; }
  .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .content-grid { grid-template-columns: 1fr; }
  .content-cover { aspect-ratio: 4 / 5; }
}

/* PERFIL REAL + PAINEL PROFISSIONAL + INSIGHTS */
.account-avatar,.profile-avatar,.pro-avatar{background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:50%;overflow:hidden;flex:0 0 auto}
.account-avatar.has-profile,.profile-avatar.has-profile,.pro-avatar.has-profile{border:1px solid #383838;background-color:#111}
.content-tools{display:flex;gap:10px;align-items:center;min-width:0}.content-sort{height:36px;background:#0d0d0d;color:#aaa;border:1px solid #292929;padding:0 12px;outline:none;font-size:10px}.content-sort:focus{border-color:var(--accent)}
.pro-profile{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:12px}.pro-identity{display:flex;align-items:center;gap:14px;min-width:210px}.pro-avatar{width:62px;height:62px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#7447ff);font-weight:800;font-size:20px}.pro-identity strong{display:block;font-size:16px}.pro-identity span{display:block;color:var(--muted);font-size:10px;margin-top:5px}.pro-counts{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));width:min(720px,100%);border-left:1px solid #252525}.pro-counts div{padding:8px 18px;border-right:1px solid #252525}.pro-counts span,.pro-metrics span,.pro-summary span{display:block;color:var(--muted);font-size:9px;margin-bottom:7px}.pro-counts strong{font-size:18px}.pro-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.pro-metrics article{border:1px solid #292929;background:#101010;padding:18px;min-height:100px}.pro-metrics strong{font-size:21px}.pro-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pro-summary>div{background:#0c0c0c;border:1px solid #222;padding:16px;min-width:0}.pro-summary strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pro-summary small{display:block;color:var(--green);font-size:9px;margin-top:7px}.modal-insights-extra{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.modal-insights-extra>div{background:#0d0d0d;border:1px solid #242424;padding:13px}.modal-insights-extra span{display:block;color:var(--muted);font-size:9px;margin-bottom:6px}.modal-insights-extra strong{font-size:13px}.instagram-open{display:block;margin-top:12px;border:1px solid #2b2b2b;padding:12px;text-align:center;color:#fff;text-decoration:none;font-size:10px;transition:.2s}.instagram-open:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:900px){.pro-profile{align-items:flex-start;flex-direction:column}.pro-counts{border-left:0;grid-template-columns:repeat(2,1fr)}.pro-counts div{border:1px solid #252525}.pro-metrics{grid-template-columns:repeat(2,1fr)}.pro-summary{grid-template-columns:1fr}.content-tools{width:100%;flex-wrap:wrap}.content-sort,.search-box{flex:1 1 160px}.search-box input{width:100%!important}}

/* ===== SOFT-IG RED / PREMIUM V2 ===== */
:root{--background:#030303;--sidebar:#070303;--panel:#0b0707;--panel-light:#110909;--border:#2a1111;--border-light:#451717;--text:#fff7f7;--muted:#806c6c;--muted-light:#b99b9b;--accent:#ff1717;--accent-dark:#8d0000;--green:#39e58c;--red:#ff3030}
body{background:radial-gradient(circle at 70% -15%,rgba(160,0,0,.13),transparent 28%),#030303}
.sidebar{background:linear-gradient(180deg,#090303 0%,#050303 100%);border-right-color:#2b0d0d;box-shadow:18px 0 55px rgba(0,0,0,.38)}
.site-logo{padding:0;background:#050000!important;border:1px solid #4d1010;overflow:hidden;box-shadow:0 0 18px rgba(255,0,0,.18)}
.site-logo img{width:100%;height:100%;display:block;object-fit:contain}
.menu-item{position:relative;border:1px solid transparent;color:#887777;overflow:hidden}
.menu-item:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,0,0,.09),transparent 72%);opacity:0;transition:.25s}
.menu-item:hover{background:#100707;color:#fff;border-color:#351111;transform:translateX(2px)}
.menu-item:hover:before,.menu-item.active:before{opacity:1}
.menu-item.active{background:#120707;color:#fff;border:1px solid #5b1717;border-left:2px solid #ff2020;box-shadow:inset 8px 0 22px rgba(255,0,0,.08),0 0 20px rgba(255,0,0,.05)}
.menu-icon{width:22px!important;height:22px;display:grid;place-items:center;color:#a74b4b;transition:.25s}
.menu-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.menu-icon svg rect{fill:none}.menu-item.active .menu-icon,.menu-item:hover .menu-icon{color:#ff3838;filter:drop-shadow(0 0 5px rgba(255,0,0,.45))}
.header{border-bottom-color:#2a1111}.header h1,.section-heading h2{letter-spacing:-.45px}.header h1:after{content:"";display:block;width:30px;height:2px;margin-top:7px;background:#f01818;box-shadow:0 0 10px rgba(255,0,0,.55)}
.connect-button,.auth-primary{background:linear-gradient(135deg,#ff2525,#a40000);color:#fff;border:1px solid #ff3b3b;box-shadow:0 8px 26px rgba(180,0,0,.22);transition:.25s}.connect-button:hover,.auth-primary:hover{background:linear-gradient(135deg,#ff3b3b,#c40000);box-shadow:0 0 28px rgba(255,0,0,.28);transform:translateY(-1px)}
.sync-button{border-color:#4b1515;color:#ff5656}.sync-button:hover{border-color:#ff2525;background:#150707;box-shadow:0 0 16px rgba(255,0,0,.12)}
.metric-card,.panel,.performance-card,.account-panel,.pro-metrics article,.pro-summary>div{background:linear-gradient(145deg,#0d0909,#080606);border-color:#2b1515}
.metric-card:hover,.performance-card:hover,.pro-metrics article:hover,.pro-summary>div:hover{border-color:#7c2020;box-shadow:0 10px 34px rgba(0,0,0,.35),0 0 22px rgba(255,0,0,.07);transform:translateY(-3px)}
.metric-card{position:relative;overflow:hidden}.metric-card:after,.pro-metrics article:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#e31b1b,transparent);opacity:.45}
.metric-value,.pro-metrics strong,.pro-counts strong{font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,30,30,.10)}
.line-chart polyline,.line-chart path{stroke:#f21d1d!important}.chart-fill{fill:rgba(190,0,0,.14)!important}
.account-avatar,.profile-avatar,.pro-avatar{background-color:#050000!important;background-size:contain!important;background-position:center!important;border:1px solid #681c1c!important;box-shadow:0 0 18px rgba(255,0,0,.12)}
.pro-profile{padding:22px!important;background:linear-gradient(120deg,#0c0707,#070505 62%,#130606)!important;border-color:#401515!important;box-shadow:0 15px 50px rgba(0,0,0,.22)}
.pro-avatar{width:78px;height:78px}.pro-identity strong{font-size:18px}.pro-counts{border-left-color:#3c1616}.pro-counts div{border-right-color:#3c1616;position:relative}.pro-counts div:after{content:"";position:absolute;left:18px;bottom:0;width:28px;height:1px;background:#d51d1d;box-shadow:0 0 8px rgba(255,0,0,.5)}
.pro-metrics{gap:12px}.pro-metrics article{position:relative;overflow:hidden;min-height:112px;padding:20px}.pro-metrics article:hover strong{color:#ffeded}.pro-summary{gap:12px}.pro-summary small{color:#ff4848!important}.panel-header strong{color:#fff}.positive{color:#35d07f!important;text-shadow:0 0 10px rgba(53,208,127,.16)}
.content-card{border-color:#2d1515;background:#090606;transition:.28s ease}.content-card:hover{border-color:#7a2020;box-shadow:0 12px 34px rgba(0,0,0,.4),0 0 24px rgba(255,0,0,.07);transform:translateY(-3px)}
.content-cover{background-color:#050303}.content-sort,.search-box input{background:#090606!important;border-color:#321515!important}.content-sort:focus,.search-box input:focus{border-color:#d62020!important;box-shadow:0 0 0 2px rgba(255,0,0,.06)}
.modal{border-color:#5b1a1a!important;box-shadow:0 25px 90px rgba(0,0,0,.7),0 0 50px rgba(255,0,0,.08)}.modal-close:hover{color:#ff3030;border-color:#ff3030}
.auth-shell{background:radial-gradient(circle at 18% 12%,rgba(170,0,0,.2),transparent 30%),radial-gradient(circle at 88% 88%,rgba(90,0,0,.16),transparent 35%),#030303}.auth-card{border-color:#481515;box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 60px rgba(255,0,0,.06)}.auth-kicker{color:#ff3838}.auth-glow{background:#a00000!important;opacity:.16!important}
.status-dot.online{background:#ff2525;box-shadow:0 0 12px rgba(255,0,0,.6);animation:redPulse 1.8s infinite}@keyframes redPulse{0%{box-shadow:0 0 0 0 rgba(255,20,20,.35)}70%{box-shadow:0 0 0 8px rgba(255,20,20,0)}100%{box-shadow:0 0 0 0 rgba(255,20,20,0)}}
.page.active-page{animation:pageRedIn .38s cubic-bezier(.2,.8,.2,1)}@keyframes pageRedIn{from{opacity:.2;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:900px){.pro-avatar{width:70px;height:70px}.menu-item:hover{transform:none}}

/* ===== READABILITY / TYPOGRAPHY V3 ===== */
:root{
  --text:#fffafa;
  --muted:#c7a9a9;
  --muted-light:#ead0d0;
}
body{
  font-weight:600;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
strong,b,h1,h2,h3,h4,h5,h6,.metric-value,.pro-counts strong,.pro-metrics strong{
  font-weight:800!important;
}
button,input,select,textarea{font-weight:700}

/* Sidebar */
.brand strong{font-size:16px;font-weight:800!important}
.brand span{font-size:12px;color:#d0b6b6;font-weight:700}
.menu-item{font-size:13px;font-weight:750;color:#c2aaaa}
.menu-item.active,.menu-item:hover{color:#fff}
.connection-status strong{font-size:12px;font-weight:800!important}
.connection-status span{font-size:11px;color:#c9adad;font-weight:700}

/* Headers and supporting copy */
.header h1{font-size:23px;font-weight:800!important}
.header p,.section-heading p,.period-bar span{font-size:12px;color:#d0b7b7;font-weight:650;line-height:1.5}
.section-heading h2{font-size:19px;font-weight:800!important}
.period-bar strong{font-size:16px;font-weight:800!important}
.instagram-account strong{font-size:12px;font-weight:800!important}
.instagram-account span{font-size:11px;color:#d1b6b6;font-weight:700}

/* Cards / panels */
.metric-label{font-size:12px;color:#e0c2c2;font-weight:750}
.metric-value{font-size:25px;line-height:1.1}
.metric-card>span:last-child{font-size:11px;font-weight:750}
.panel-header strong{font-size:14px;font-weight:800!important}
.panel-header span{font-size:11px;color:#d2b8b8;font-weight:700;line-height:1.45}
.highlight span{font-size:11px;color:#cfb2b2;font-weight:700}
.highlight strong{font-size:15px;font-weight:800!important}

/* Reels / contents */
.reel-name strong{font-size:12px;line-height:1.35;font-weight:800!important}
.reel-name span{font-size:10px;color:#c9adad;font-weight:700}
.reel-stat span{font-size:10px;color:#d0b3b3;font-weight:700}
.reel-stat strong{font-size:12px;font-weight:800!important}
.performance-badge{font-size:10px;font-weight:800}
.content-body>span{font-size:10px;color:#cdb0b0;font-weight:700}
.content-body h3{font-size:12px;font-weight:800!important;line-height:1.5}
.content-stats div span{font-size:9px;color:#d0b3b3;font-weight:700}
.content-stats strong{font-size:11px;font-weight:800!important}
.content-sort,.search-box input{font-size:11px;color:#f2dede;font-weight:700}

/* Performance */
.performance-card>span{font-size:11px;color:#d2b6b6;font-weight:750}
.performance-card>strong{font-size:28px;font-weight:800!important}
.performance-card p{font-size:10px;color:#d0b4b4;font-weight:700}
.performance-card small{font-size:10px;font-weight:800}
.comparison-item strong{font-size:12px;font-weight:800!important}
.comparison-item span{font-size:11px;color:#d5baba;font-weight:700}

/* History */
.history-row{font-size:12px;font-weight:700}
.history-header{font-size:10px;color:#d1b5b5;font-weight:800;letter-spacing:.35px}

/* Account / pro */
.profile-big strong{font-size:16px;font-weight:800!important}
.profile-big span{font-size:11px;color:#ceb1b1;font-weight:700}
.account-info div{font-size:12px;font-weight:700}
.account-info span{color:#d0b4b4;font-weight:700}
.pro-identity strong{font-size:19px!important;font-weight:800!important}
.pro-identity span{font-size:11px!important;color:#d3b6b6!important;font-weight:750}
.pro-counts span,.pro-metrics span,.pro-summary span{font-size:10px!important;color:#d5baba!important;font-weight:750;line-height:1.35}
.pro-counts strong{font-size:20px!important}
.pro-metrics strong{font-size:23px!important}
.pro-summary strong{font-size:12px!important;font-weight:800!important}
.pro-summary small{font-size:10px!important;font-weight:800}

/* Modal / reel insights */
.modal-date{font-size:10px;color:#ceb2b2;font-weight:700}
.modal-content h2{font-size:19px;font-weight:800!important;line-height:1.35}
.modal-metrics span,.modal-insights-extra span{font-size:10px!important;color:#d2b6b6!important;font-weight:750}
.modal-metrics strong{font-size:16px;font-weight:800!important}
.modal-insights-extra strong{font-size:14px;font-weight:800!important}
.result-box span{font-size:10px;color:#d2b5b5;font-weight:750}
.result-box strong{font-size:13px;font-weight:800!important}
.instagram-open{font-size:11px;font-weight:800}

/* Auth */
.auth-brand strong{font-size:16px;font-weight:800!important}
.auth-brand span{font-size:11px;color:#d2b8b8;font-weight:700}
.auth-kicker{font-size:10px;font-weight:800}
.auth-copy h1{font-size:27px;font-weight:800!important}
.auth-copy p{font-size:12px;color:#dec5c5;font-weight:650}
.auth-form label{font-size:11px;color:#e0caca;font-weight:750}
.auth-message,.auth-security{font-size:10px;font-weight:700;color:#c5aaaa}

/* Improve dense table readability */
.comparison-list,.history-panel,.reels-list{line-height:1.45}
.positive,.negative{font-weight:800!important}

@media(max-width:900px){
  .menu-item{font-size:12px}
  .metric-label{font-size:11px}
  .metric-value{font-size:22px}
  .header h1{font-size:21px}
}


/* PERFORMANCE STATUS COLORS — semantic colors */
.positive{color:#35d07f!important;text-shadow:0 0 10px rgba(53,208,127,.16)}
.negative{color:#ff3b47!important;text-shadow:0 0 10px rgba(255,59,71,.14)}
.performance-badge.good{color:#35d07f!important;background:rgba(53,208,127,.08)!important;border:1px solid rgba(53,208,127,.15)}
.performance-badge.bad{color:#ff3b47!important;background:rgba(255,59,71,.08)!important;border:1px solid rgba(255,59,71,.15)}
.performance-badge.normal{color:#d4caca!important;background:#151010!important;border:1px solid #2a2020}

/* Painel Profissional v2 — hierarquia, legibilidade e responsividade */
#profissional{overflow-x:hidden}.pro-hero{position:relative;overflow:hidden;min-height:132px}.pro-hero:before{content:"";position:absolute;width:280px;height:280px;right:-120px;top:-160px;background:radial-gradient(circle,rgba(220,20,20,.16),transparent 68%);pointer-events:none}.pro-id-copy{min-width:0}.pro-id-copy strong{overflow-wrap:anywhere}.pro-id-copy small{display:block;margin-top:8px;color:#ff7777;font-size:10px;font-weight:800;letter-spacing:.02em}.pro-block-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:24px 2px 12px}.pro-block-title strong{display:block;font-size:15px}.pro-block-title span{display:block;margin-top:5px;color:#d0b8b8;font-size:10px;font-weight:700}.pro-block-title>small{color:#ff7373;font-size:10px;font-weight:800;white-space:nowrap}.pro-primary article{min-width:0;min-height:132px;display:flex;flex-direction:column;justify-content:center}.pro-primary article>strong{font-size:28px!important;line-height:1.05;overflow-wrap:anywhere}.pro-primary article>small{display:block;margin-top:10px;color:#c5aaaa;font-size:9px;font-weight:700;line-height:1.45}.pro-averages{margin:12px 0}.pro-average-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #2c1515}.pro-average-strip>div{min-width:0;padding:18px 20px;border-right:1px solid #2c1515}.pro-average-strip>div:last-child{border-right:0}.pro-average-strip span{display:block;color:#d3b8b8;font-size:10px;font-weight:800}.pro-average-strip strong{display:block;margin-top:8px;font-size:20px;font-weight:850;overflow-wrap:anywhere}.pro-reading{margin-top:12px}.pro-highlights{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pro-highlight-card{appearance:none;width:100%;min-width:0;display:grid;grid-template-columns:82px minmax(0,1fr);gap:14px;align-items:center;padding:12px;background:linear-gradient(145deg,#0d0808,#080606);border:1px solid #2b1515;color:#fff;text-align:left;cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.pro-highlight-card:hover{transform:translateY(-2px);border-color:#8d2525;box-shadow:0 10px 30px rgba(0,0,0,.32),0 0 20px rgba(255,0,0,.07)}.pro-highlight-thumb{width:82px;height:82px;background:#090909 center/contain no-repeat;border:1px solid #321818}.pro-highlight-copy{min-width:0}.pro-highlight-copy span{display:block;color:#d4b6b6!important;font-size:9px!important;font-weight:800}.pro-highlight-copy strong{display:block;margin-top:5px;font-size:11px!important;line-height:1.4;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}.pro-highlight-copy b{display:inline-block;margin-top:8px;color:#ff5252;font-size:16px;font-weight:900}.pro-highlight-copy small{display:inline-block;margin-left:6px;color:#c7aaaa!important;font-size:9px!important;font-weight:700}.pro-counts strong{overflow-wrap:anywhere}.pro-counts span{white-space:normal}.pro-profile,.pro-metrics,.pro-average-strip,.pro-summary{max-width:100%}
@media(max-width:1100px){.pro-primary{grid-template-columns:repeat(2,minmax(0,1fr))}.pro-counts{grid-template-columns:repeat(2,minmax(0,1fr))}.pro-average-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.pro-average-strip>div:nth-child(2){border-right:0}.pro-average-strip>div:nth-child(-n+2){border-bottom:1px solid #2c1515}}
@media(max-width:700px){.pro-hero{padding:18px!important}.pro-identity{width:100%}.pro-avatar{width:66px!important;height:66px!important}.pro-counts{width:100%;gap:8px}.pro-counts div{padding:13px!important}.pro-primary{grid-template-columns:1fr}.pro-primary article{min-height:108px}.pro-average-strip{grid-template-columns:1fr}.pro-average-strip>div{border-right:0!important;border-bottom:1px solid #2c1515}.pro-average-strip>div:last-child{border-bottom:0}.pro-highlights{grid-template-columns:1fr!important}.pro-highlight-card{grid-template-columns:72px minmax(0,1fr)}.pro-highlight-thumb{width:72px;height:72px}.pro-block-title{align-items:flex-start;flex-direction:column;gap:7px}.pro-block-title>small{white-space:normal}.pro-reading .panel-header,.pro-averages .panel-header{align-items:flex-start}.pro-reading .panel-header span,.pro-averages .panel-header span{white-space:normal}}
/* v3 Painel Profissional: somente dados da conta */
.pro-id-copy b{display:block;margin-top:3px;font-size:12px;color:#ff4b4b;font-weight:850}.account-counts{grid-template-columns:repeat(3,minmax(110px,1fr))!important}.pro-about{margin:12px 0}.pro-about-grid{display:grid;grid-template-columns:2fr 1fr;gap:0;border-top:1px solid #2c1515}.pro-about-grid>div{padding:18px 20px;min-width:0}.pro-about-grid>div+div{border-left:1px solid #2c1515}.pro-about-grid span{display:block;color:#d5baba;font-size:10px;font-weight:800;margin-bottom:8px}.pro-about-grid p,.pro-about-grid a{margin:0;color:#fff;font-size:13px;font-weight:750;line-height:1.55;overflow-wrap:anywhere;text-decoration:none}.pro-about-grid a[href]{color:#ff6b6b}.pro-note{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:16px 18px}.pro-note strong{white-space:nowrap}.pro-note span{color:#cdb7b7;font-size:10px;font-weight:700;line-height:1.5}.account-insights article>strong{font-size:30px!important}
@media(max-width:700px){#profissional{padding-bottom:26px}.account-only{gap:16px}.account-counts{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px}.account-counts div{padding:12px 8px!important;text-align:center}.account-counts span{font-size:9px!important}.account-counts strong{font-size:18px!important}.pro-id-copy strong{font-size:17px!important}.pro-id-copy b{font-size:11px}.pro-about-grid{grid-template-columns:1fr}.pro-about-grid>div+div{border-left:0;border-top:1px solid #2c1515}.pro-about-grid>div{padding:15px}.account-insights{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}.account-insights article{min-height:118px!important;padding:15px!important}.account-insights article>strong{font-size:24px!important}.account-insights article>small{font-size:9px!important}.pro-note{flex-direction:column}.pro-note strong{white-space:normal}}
@media(max-width:420px){.account-counts{grid-template-columns:1fr 1fr 1fr!important}.account-counts div{padding:10px 5px!important}.account-counts strong{font-size:16px!important}.account-insights{grid-template-columns:1fr!important}.account-insights article{min-height:98px!important}.pro-avatar{width:60px!important;height:60px!important}.pro-identity{gap:11px!important}}

/* ===== PAINEL PROFISSIONAL V5 — PERFIL + CONTA ===== */
#profissional{overflow-x:hidden;max-width:100%}.pro-v5-profile{padding:26px 28px!important;position:relative;overflow:hidden;background:radial-gradient(circle at 92% 0,rgba(210,18,30,.13),transparent 34%),linear-gradient(145deg,#0c0909,#070606)!important}.pro-v5-top{display:flex;align-items:center;gap:18px}.pro-v5-avatar{width:92px;height:92px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:#050000 center/contain no-repeat;border:1px solid #711b24;box-shadow:0 0 30px rgba(220,20,35,.12);font-size:24px;font-weight:900;overflow:hidden}.pro-v5-headcopy{min-width:0}.pro-v5-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pro-v5-name-row strong{font-size:22px!important;line-height:1.15;overflow-wrap:anywhere}.pro-v5-connected{font-size:9px!important;font-weight:900!important;color:#55d98a!important;border:1px solid rgba(85,217,138,.28);background:rgba(85,217,138,.06);padding:5px 8px}.pro-v5-headcopy>b{display:block;color:#ff4b58;font-size:13px;margin-top:5px}.pro-v5-headcopy>span{display:block;color:#c9b4b4;font-size:10px;font-weight:800;margin-top:5px}.pro-v5-counts{display:grid;grid-template-columns:repeat(3,minmax(0,150px));gap:0;margin:22px 0 0 110px}.pro-v5-counts>div{padding:0 24px;border-left:1px solid #32181b}.pro-v5-counts>div:first-child{padding-left:0;border-left:0}.pro-v5-counts strong{display:block;font-size:22px!important;line-height:1}.pro-v5-counts span{display:block;margin-top:7px;color:#cbb6b6;font-size:10px;font-weight:800}.pro-v5-bio{margin:22px 0 0 110px;max-width:760px}.pro-v5-bio p{margin:0;color:#fff;font-size:12px;font-weight:750;line-height:1.6;white-space:pre-line}.pro-v5-bio a{display:inline-flex;align-items:center;gap:7px;margin-top:8px;color:#ff5965;text-decoration:none;font-size:11px;font-weight:850;max-width:100%}.pro-v5-bio a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;flex:0 0 auto}.pro-v5-bio a span{overflow-wrap:anywhere}.pro-v5-bio a.is-empty{color:#8f7d7d;pointer-events:none}.pro-v5-sync{display:block;margin:18px 0 0 110px;color:#8f7d7d;font-size:9px;font-weight:750}.pro-v5-section-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:28px 2px 12px}.pro-v5-section-title strong{display:block;font-size:17px!important}.pro-v5-section-title span{display:block;margin-top:5px;color:#bca5a5;font-size:10px;font-weight:750}.pro-v5-section-title em{font-style:normal;font-size:9px;font-weight:900;color:#ff5360;letter-spacing:.08em;border:1px solid #42171b;padding:7px 9px}.pro-v5-insights{display:grid;grid-template-columns:minmax(260px,1.15fr) 2fr;padding:0!important;overflow:hidden}.pro-v5-mainmetric{min-width:0;padding:30px;border-right:1px solid #351619;background:radial-gradient(circle at 20% 20%,rgba(225,29,46,.10),transparent 58%)}.pro-v5-mainmetric>span,.pro-v5-side-metrics span{display:block;color:#cdb5b5;font-size:10px;font-weight:850}.pro-v5-mainmetric>strong{display:block;margin-top:12px;font-size:44px!important;line-height:1;color:#fff;text-shadow:0 0 24px rgba(225,29,46,.14);overflow-wrap:anywhere}.pro-v5-mainmetric>small,.pro-v5-side-metrics small{display:block;margin-top:10px;color:#927f7f;font-size:9px;font-weight:700;line-height:1.45}.pro-v5-side-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.pro-v5-side-metrics>div{min-width:0;padding:30px 22px;border-left:1px solid #281315}.pro-v5-side-metrics>div:first-child{border-left:0}.pro-v5-side-metrics strong{display:block;margin-top:12px;font-size:25px!important;overflow-wrap:anywhere}.pro-v5-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr);gap:12px;margin-top:12px}.pro-v5-evolution,.pro-v5-growth{padding:20px!important;min-width:0}.pro-v5-cardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.pro-v5-cardhead strong{display:block;font-size:13px!important}.pro-v5-cardhead span{display:block;margin-top:4px;color:#a89191;font-size:9px;font-weight:750}.pro-v5-cardhead>span{color:#ff5b67;margin:0;white-space:nowrap}.pro-v5-chart{height:160px;margin-top:16px;overflow:hidden}.pro-v5-chart svg{display:block;width:100%;height:100%;overflow:visible}.pro-v5-line{fill:none;stroke:#e11d2e;stroke-width:3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(225,29,46,.35))}.pro-v5-area{fill:url(#proAreaGrad)}.pro-v5-chart-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#786767;font-size:8px;font-weight:750}.pro-v5-chart-foot b{color:#bba2a2;font-size:8px}.pro-v5-growth-number{padding:22px 0;border-bottom:1px solid #2b1517}.pro-v5-growth-number span{display:block;color:#bca5a5;font-size:9px;font-weight:800}.pro-v5-growth-number strong{display:block;margin-top:8px;font-size:32px!important}.pro-v5-growth-number small{display:block;margin-top:6px;color:#8f7c7c;font-size:9px;font-weight:700}.pro-v5-growth-row{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #211113}.pro-v5-growth-row:last-child{border-bottom:0}.pro-v5-growth-row span{color:#9f8989;font-size:9px;font-weight:750}.pro-v5-growth-row b{font-size:11px}.pro-v5-accountinfo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px;padding:0!important;overflow:hidden}.pro-v5-accountinfo>div{padding:16px 20px;border-left:1px solid #2b1517;min-width:0}.pro-v5-accountinfo>div:first-child{border-left:0}.pro-v5-accountinfo span{display:block;color:#8f7c7c;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.pro-v5-accountinfo strong{display:block;margin-top:6px;font-size:10px!important;overflow-wrap:anywhere}.negative{color:#ff4d5b!important;text-shadow:0 0 10px rgba(255,77,91,.16)}
@media(max-width:900px){.pro-v5-insights{grid-template-columns:1fr}.pro-v5-mainmetric{border-right:0;border-bottom:1px solid #351619}.pro-v5-grid{grid-template-columns:1fr}.pro-v5-side-metrics>div{padding:22px 18px}.pro-v5-mainmetric>strong{font-size:38px!important}}
@media(max-width:700px){#profissional{padding-bottom:30px}.pro-v5-profile{padding:20px 16px!important}.pro-v5-top{align-items:flex-start;gap:13px}.pro-v5-avatar{width:76px;height:76px}.pro-v5-name-row strong{font-size:18px!important}.pro-v5-counts{margin:20px 0 0;grid-template-columns:repeat(3,1fr);border-top:1px solid #2c1517;padding-top:16px}.pro-v5-counts>div{padding:0 10px;text-align:center}.pro-v5-counts>div:first-child{padding-left:10px}.pro-v5-counts strong{font-size:19px!important}.pro-v5-counts span{font-size:9px}.pro-v5-bio{margin:18px 0 0}.pro-v5-bio p{font-size:11px}.pro-v5-sync{margin:14px 0 0}.pro-v5-section-title{align-items:flex-start}.pro-v5-mainmetric{padding:24px 18px}.pro-v5-mainmetric>strong{font-size:36px!important}.pro-v5-side-metrics{grid-template-columns:1fr 1fr}.pro-v5-side-metrics>div{padding:18px 15px;border-top:1px solid #281315}.pro-v5-side-metrics>div:nth-child(3){grid-column:1/-1}.pro-v5-side-metrics strong{font-size:21px!important}.pro-v5-chart{height:135px}.pro-v5-accountinfo{grid-template-columns:1fr}.pro-v5-accountinfo>div{border-left:0;border-top:1px solid #2b1517}.pro-v5-accountinfo>div:first-child{border-top:0}}
@media(max-width:420px){.pro-v5-avatar{width:66px;height:66px}.pro-v5-name-row{gap:6px}.pro-v5-connected{padding:4px 6px}.pro-v5-headcopy>b{font-size:11px}.pro-v5-counts>div{padding:0 5px!important}.pro-v5-counts strong{font-size:17px!important}.pro-v5-counts span{font-size:8px}.pro-v5-side-metrics{grid-template-columns:1fr}.pro-v5-side-metrics>div:nth-child(3){grid-column:auto}.pro-v5-mainmetric>strong{font-size:32px!important}.pro-v5-section-title em{font-size:8px}.pro-v5-chart-foot b{display:none}}

/* V7 — Painel profissional menos quadrado, mais editorial/premium */
#profissional .panel{border:0!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(18,8,9,.92),rgba(5,5,5,.96))!important;box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025)}
.pro-v5-profile{border-radius:24px!important;padding:30px 34px!important;background:radial-gradient(circle at 8% 0,rgba(229,25,43,.13),transparent 30%),radial-gradient(circle at 92% 10%,rgba(229,25,43,.08),transparent 26%),linear-gradient(135deg,#0d0809,#050505)!important}
.pro-v5-avatar{border:2px solid rgba(225,29,46,.5)!important;box-shadow:0 0 0 7px rgba(225,29,46,.035),0 14px 35px rgba(0,0,0,.35)!important}
.pro-v5-connected{border:0!important;border-radius:999px;background:rgba(53,208,127,.09)!important;padding:6px 10px!important}
.pro-v5-counts>div{border:0!important;padding:0 30px!important;position:relative}.pro-v5-counts>div+div:before{content:"";position:absolute;left:0;top:10%;height:80%;width:1px;background:linear-gradient(transparent,rgba(225,29,46,.28),transparent)}
.pro-v5-bio{padding-top:18px;border-top:1px solid rgba(255,255,255,.055);max-width:850px}.pro-v5-bio p{font-size:13px!important;line-height:1.72!important}.pro-v5-bio a{border-radius:999px;padding:7px 11px;background:rgba(225,29,46,.07)}
.pro-v5-section-title{margin-top:32px!important}.pro-v5-section-title em{border:0!important;border-radius:999px!important;background:rgba(225,29,46,.08);padding:8px 11px!important}
.pro-v5-insights{border-radius:22px!important;display:grid!important;grid-template-columns:minmax(300px,1.05fr) 2fr!important;background:radial-gradient(circle at 12% 30%,rgba(225,29,46,.10),transparent 34%),#080606!important}
.pro-v5-mainmetric{border:0!important;padding:34px!important}.pro-v5-mainmetric>strong{font-size:48px!important;letter-spacing:-.035em}.pro-v5-side-metrics>div{border:0!important;padding:34px 25px!important;position:relative}.pro-v5-side-metrics>div+div:before{content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.08),transparent)}
.pro-v5-grid{gap:16px!important}.pro-v5-evolution,.pro-v5-growth{border-radius:22px!important;padding:24px!important}.pro-v5-growth-number,.pro-v5-growth-row{border-color:rgba(255,255,255,.055)!important}
.pro-v5-accountinfo{border-radius:18px!important;background:#080707!important}.pro-v5-accountinfo>div{border:0!important;position:relative}.pro-v5-accountinfo>div+div:before{content:"";position:absolute;left:0;top:25%;height:50%;width:1px;background:rgba(255,255,255,.06)}
.pro-diagnostic{margin-top:16px;padding:18px 22px;border-radius:16px;background:rgba(225,29,46,.045);border:1px dashed rgba(225,29,46,.28);font-size:11px;line-height:1.65;color:#d7c7c7}.pro-diagnostic>div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.pro-diagnostic strong{font-size:12px}.pro-diagnostic span,.pro-diagnostic small{color:#9f8d8d}.pro-diagnostic p{margin:9px 0 0}.pro-diagnostic b{color:#fff}.pro-diagnostic i{font-style:normal;color:#ff5965;font-weight:800}
@media(max-width:900px){.pro-v5-insights{grid-template-columns:1fr!important}.pro-v5-side-metrics{border-top:1px solid rgba(255,255,255,.055)}.pro-v5-mainmetric{padding:28px!important}.pro-v5-side-metrics>div{padding:24px 18px!important}}
@media(max-width:700px){#profissional .panel{border-radius:16px!important}.pro-v5-profile{padding:20px 17px!important}.pro-v5-counts>div{padding:0 9px!important}.pro-v5-bio{padding-top:15px}.pro-v5-mainmetric>strong{font-size:39px!important}.pro-v5-side-metrics{grid-template-columns:1fr 1fr!important}.pro-v5-side-metrics>div:nth-child(3){grid-column:1/-1}.pro-v5-side-metrics>div+div:before{display:none}.pro-v5-side-metrics>div{border-top:1px solid rgba(255,255,255,.045)!important}.pro-v5-accountinfo>div+div:before{display:none}.pro-diagnostic{border-radius:14px;padding:15px}}
@media(max-width:420px){.pro-v5-side-metrics{grid-template-columns:1fr!important}.pro-v5-side-metrics>div:nth-child(3){grid-column:auto}.pro-v5-mainmetric{padding:23px 18px!important}.pro-v5-mainmetric>strong{font-size:36px!important}.pro-v5-profile{border-radius:18px!important}}

/* V9 — linguagem visual premium global: fluida, arredondada e responsiva */
:root{--soft-radius:22px;--soft-radius-sm:15px;--soft-surface:rgba(18,10,11,.82);--soft-line:rgba(255,255,255,.065);--soft-red:#ff263d;--soft-shadow:0 18px 55px rgba(0,0,0,.26)}
body{background:radial-gradient(circle at 78% -10%,rgba(160,0,18,.09),transparent 30%),#050505}
.panel,.metric-card,.performance-card,.account-panel,.period-bar,.pro-v5-profile,.pro-v5-insights,.pro-v5-evolution,.pro-v5-growth,.pro-v5-accountinfo{border:1px solid var(--soft-line)!important;border-radius:var(--soft-radius)!important;background:linear-gradient(145deg,rgba(20,10,11,.92),rgba(9,9,9,.96))!important;box-shadow:var(--soft-shadow);overflow:hidden;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.panel:hover,.metric-card:hover,.performance-card:hover{transform:translateY(-2px);border-color:rgba(255,38,61,.2)!important;box-shadow:0 22px 60px rgba(0,0,0,.34)}
.metrics-grid{gap:12px}.metric-card{padding:22px!important}.metric-card:before,.performance-card:before{display:none!important}.metric-label,.pro-v5-mainmetric>span,.pro-v5-side-metrics span{letter-spacing:.01em!important;color:#d8c8ca!important}.metric-value{letter-spacing:-.045em}
.period-bar{padding:18px 20px!important;margin-bottom:16px}.period-bar select,.content-sort,.search-box input{border-radius:13px!important;border:1px solid var(--soft-line)!important;background:rgba(255,255,255,.035)!important}
.dashboard-grid,.performance-grid,.pro-v5-grid{gap:14px!important}.highlights{gap:0!important}.highlight{border:0!important;border-bottom:1px solid var(--soft-line)!important;padding:16px 2px!important}.highlight:last-child{border-bottom:0!important}
.section-heading{margin-bottom:20px}.section-heading h2{font-size:24px;letter-spacing:-.03em}.section-heading p,.panel-header span{color:#927f82!important}
.content-grid{gap:16px!important}.content-grid>article,.reels-list>article{border-radius:18px!important;overflow:hidden;border-color:var(--soft-line)!important;transition:transform .25s ease,box-shadow .25s ease}.content-grid>article:hover,.reels-list>article:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(0,0,0,.32)}
.performance-card{padding:24px!important}.performance-card.best{background:linear-gradient(145deg,rgba(48,8,13,.78),rgba(10,9,9,.96))!important}
.pro-v5-profile{padding:26px!important}.pro-v5-avatar,.profile-avatar,.account-avatar{border-radius:50%!important}.pro-v5-connected{border-radius:999px!important}.pro-v5-section-title em{border-radius:999px!important;padding:7px 11px!important;background:rgba(255,38,61,.08)!important;border:1px solid rgba(255,38,61,.15)!important}
.pro-v5-insights{padding:0!important;display:grid!important;grid-template-columns:1.35fr 3fr!important}.pro-v5-mainmetric{padding:28px!important;background:linear-gradient(135deg,rgba(105,0,14,.17),transparent)!important}.pro-v5-side-metrics{padding:12px 8px!important}.pro-v5-mainmetric>span,.pro-v5-side-metrics span{cursor:help}.pro-v5-mainmetric>strong{font-size:42px!important}.pro-v5-side-metrics strong{font-size:25px!important}.pro-v5-side-metrics>div{padding:18px!important}.pro-v5-evolution,.pro-v5-growth{padding:24px!important}.pro-v5-accountinfo{padding:4px 18px!important}.pro-v5-accountinfo>div{padding:17px!important}
.history-panel{padding:10px 18px!important}.history-row{border-bottom:1px solid var(--soft-line)!important}.history-row:last-child{border-bottom:0!important}
.account-panel{padding:28px!important}.account-info{border-radius:18px!important;background:rgba(255,255,255,.018)!important;border:1px solid var(--soft-line)!important;overflow:hidden}.danger-button,.sync-button,.connect-button,.text-button{border-radius:12px!important;transition:transform .2s ease,filter .2s ease}.danger-button:hover,.sync-button:hover,.connect-button:hover,.text-button:hover{transform:translateY(-1px);filter:brightness(1.12)}
.modal{border-radius:24px!important;border:1px solid var(--soft-line)!important;box-shadow:0 30px 90px rgba(0,0,0,.6)!important}.modal-close{border-radius:50%!important}
.page.active-page{animation:softPageIn .36s cubic-bezier(.2,.8,.2,1)}@keyframes softPageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){.pro-v5-insights{grid-template-columns:1fr!important}.pro-v5-mainmetric{border-bottom:1px solid var(--soft-line)}.pro-v5-side-metrics{grid-template-columns:repeat(3,1fr)!important}.panel:hover,.metric-card:hover,.performance-card:hover{transform:none}}
@media(max-width:700px){:root{--soft-radius:18px}.main{padding-left:14px!important;padding-right:14px!important}.page{padding-bottom:92px}.metrics-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}.metric-card{padding:18px!important;min-width:0}.metric-value{font-size:27px!important}.dashboard-grid,.performance-grid,.pro-v5-grid{grid-template-columns:1fr!important}.performance-grid{gap:10px!important}.performance-card{padding:19px!important}.pro-v5-profile{padding:20px!important}.pro-v5-insights{border-radius:20px!important}.pro-v5-mainmetric{padding:22px!important}.pro-v5-mainmetric>strong{font-size:36px!important}.pro-v5-side-metrics{grid-template-columns:1fr 1fr!important;padding:5px!important}.pro-v5-side-metrics>div{padding:16px!important}.pro-v5-side-metrics>div:nth-child(3){grid-column:1/-1}.pro-v5-evolution,.pro-v5-growth{padding:19px!important}.pro-v5-accountinfo{display:block!important;padding:6px 18px!important}.pro-v5-accountinfo>div{padding:14px 0!important;border-bottom:1px solid var(--soft-line)}.pro-v5-accountinfo>div:last-child{border-bottom:0}.content-tools{width:100%;display:grid!important;grid-template-columns:1fr!important;gap:9px}.content-sort,.search-box,.search-box input{width:100%!important}.history-panel{overflow-x:auto}.history-row{min-width:610px}.account-panel{padding:20px!important}.account-info{grid-template-columns:1fr 1fr!important}.modal{width:calc(100% - 22px)!important;max-height:88vh!important;border-radius:20px!important}.section-heading h2{font-size:22px}}
@media(max-width:430px){.metrics-grid{grid-template-columns:1fr!important}.pro-v5-side-metrics{grid-template-columns:1fr!important}.pro-v5-side-metrics>div:nth-child(3){grid-column:auto}.account-info{grid-template-columns:1fr!important}}

/* =========================================================
   V10 — ESTRUTURA PREMIUM / MENOS CAIXAS / MAIS HIERARQUIA
   ========================================================= */
:root{
  --v10-surface:rgba(18,10,11,.72);
  --v10-surface-2:rgba(12,8,9,.58);
  --v10-line:rgba(255,255,255,.075);
  --v10-line-red:rgba(255,35,55,.18);
  --v10-text:#fff7f7;
  --v10-muted:#bdaeb0;
  --v10-red:#ff253b;
  --v10-radius:24px;
}

/* Containers maiores: uma superfície, informação dentro dela */
.period-bar,
.metrics-grid,
.performance-grid,
.pro-v5-insights,
.pro-v5-accountinfo{
  border:1px solid var(--v10-line)!important;
  border-radius:var(--v10-radius)!important;
  background:linear-gradient(135deg,rgba(22,10,12,.88),rgba(7,7,8,.92))!important;
  box-shadow:0 18px 50px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.018)!important;
}

/* DASHBOARD: métricas passam a ser uma única faixa, sem seis caixas */
.metrics-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:0!important;
  padding:8px 10px!important;
  overflow:hidden!important;
}
.metric-card{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  min-height:118px!important;
  padding:18px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  position:relative!important;
}
.metric-card:not(:last-child):after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  right:0!important;
  top:22px!important;
  bottom:22px!important;
  width:1px!important;
  height:auto!important;
  left:auto!important;
  background:linear-gradient(180deg,transparent,var(--v10-line-red),transparent)!important;
  opacity:1!important;
}
.metric-card:hover{transform:none!important;background:rgba(255,255,255,.018)!important;box-shadow:none!important}
.metric-label{color:#f6e8ea!important;font-size:12px!important;font-weight:800!important;line-height:1.35!important}
.metric-value{font-size:30px!important;line-height:1.05!important;margin:9px 0 8px!important}
.metric-card>span:last-child{color:#8f7f82!important;font-size:10px!important;font-weight:700!important}

/* Os blocos de conteúdo permanecem como superfícies, mas mais leves */
.panel,.account-panel{
  border-color:var(--v10-line)!important;
  background:linear-gradient(145deg,rgba(15,9,10,.78),rgba(7,7,8,.88))!important;
  box-shadow:0 16px 48px rgba(0,0,0,.2)!important;
}
.dashboard-grid{grid-template-columns:minmax(0,1.9fr) minmax(260px,.85fr)!important;gap:18px!important}
.chart-panel{padding:24px!important}.chart{border-radius:18px!important;overflow:hidden!important;background:rgba(255,255,255,.012)!important}
.highlights .highlight{padding:17px 0!important}.highlights .highlight span{color:var(--v10-muted)!important}.highlights .highlight strong{font-size:16px!important}

/* DESEMPENHO: quatro resultados dentro de uma faixa única */
.performance-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  padding:8px!important;
  margin-bottom:18px!important;
}
.performance-card{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:20px!important;
  min-height:150px!important;
  position:relative!important;
}
.performance-card:not(:last-child):after{content:"";position:absolute;right:0;top:20px;bottom:20px;width:1px;background:linear-gradient(180deg,transparent,var(--v10-line-red),transparent)}
.performance-card:hover{transform:none!important;background:rgba(255,255,255,.018)!important;box-shadow:none!important}
.performance-card>span{color:#f6e8ea!important;font-weight:800!important}.performance-card>p{color:var(--v10-muted)!important}

/* PAINEL PROFISSIONAL: perfil mais editorial, sem aparência de formulário */
.pro-v5-profile{
  border:0!important;
  border-bottom:1px solid var(--v10-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:18px 8px 28px!important;
  overflow:visible!important;
}
.pro-v5-top{align-items:center!important}.pro-v5-avatar{width:82px!important;height:82px!important;border-radius:50%!important;box-shadow:0 0 0 4px rgba(255,36,55,.07),0 0 28px rgba(255,35,55,.13)!important}
.pro-v5-name-row strong{font-size:23px!important}.pro-v5-counts{margin-left:98px!important;margin-top:12px!important;max-width:460px!important;border:0!important;background:transparent!important}
.pro-v5-counts>div{padding:7px 22px 7px 0!important}.pro-v5-counts>div+div{border-left:1px solid var(--v10-line)!important;padding-left:22px!important}
.pro-v5-bio{margin-left:98px!important;max-width:760px!important;border:0!important;background:transparent!important;padding:10px 0 0!important}
.pro-v5-bio p{font-size:13px!important;line-height:1.65!important;color:#eee3e4!important}.pro-v5-bio a{margin-top:7px!important;display:inline-flex!important;width:auto!important;padding:7px 11px!important;border-radius:999px!important;background:rgba(255,35,55,.07)!important;border:1px solid rgba(255,35,55,.13)!important}
.pro-v5-sync{margin-left:98px!important;margin-top:12px!important;color:#7f7275!important}
.pro-v5-section-title{margin-top:28px!important;margin-bottom:12px!important}.pro-v5-section-title strong{font-size:20px!important}.pro-v5-section-title span{color:var(--v10-muted)!important}

/* Métricas da conta: exatamente a estrutura combinada, uma linha única */
.pro-v5-insights{display:grid!important;grid-template-columns:1.35fr 1fr 1fr 1fr!important;gap:0!important;padding:8px 10px!important}
.pro-v5-mainmetric,.pro-v5-side-metrics>div{border:0!important;background:transparent!important;box-shadow:none!important;padding:22px!important;min-height:130px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
.pro-v5-mainmetric{position:relative!important}.pro-v5-mainmetric:after,.pro-v5-side-metrics>div:not(:last-child):after{content:"";position:absolute;right:0;top:23px;bottom:23px;width:1px;background:linear-gradient(180deg,transparent,var(--v10-line-red),transparent)}
.pro-v5-side-metrics{display:contents!important}.pro-v5-side-metrics>div{position:relative!important}
.pro-v5-mainmetric>span,.pro-v5-side-metrics span{font-size:12px!important;font-weight:850!important;color:#f6e8ea!important}.pro-v5-mainmetric>strong{font-size:39px!important;letter-spacing:-.055em!important}.pro-v5-side-metrics strong{font-size:26px!important}.pro-v5-mainmetric small,.pro-v5-side-metrics small{color:var(--v10-muted)!important;font-size:10px!important;margin-top:6px!important}

/* Evolução e crescimento parecem uma seção única, não duas caixas desconectadas */
.pro-v5-grid{
  display:grid!important;
  grid-template-columns:minmax(0,2.15fr) minmax(265px,.8fr)!important;
  gap:0!important;
  border:1px solid var(--v10-line)!important;
  border-radius:var(--v10-radius)!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,rgba(15,9,10,.72),rgba(7,7,8,.86))!important;
  box-shadow:0 16px 48px rgba(0,0,0,.2)!important;
  margin-top:18px!important;
}
.pro-v5-evolution,.pro-v5-growth{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;margin:0!important}
.pro-v5-growth{border-left:1px solid var(--v10-line)!important}.pro-v5-evolution{padding:24px!important}.pro-v5-growth{padding:24px!important}
.pro-v5-chart{background:linear-gradient(180deg,rgba(255,35,55,.018),transparent)!important;border-radius:18px!important}

/* Rodapé técnico fica discreto, como metadado */
.pro-v5-accountinfo{margin-top:14px!important;box-shadow:none!important;background:rgba(255,255,255,.014)!important}.pro-v5-accountinfo>div{padding:14px 18px!important}.pro-v5-accountinfo span{color:#817477!important}.pro-v5-accountinfo strong{font-size:11px!important}

/* Conteúdos: premium, arredondado, sem parecer grade rígida */
.content-grid{gap:18px!important}.content-card{border-radius:24px!important;border:1px solid var(--v10-line)!important;background:linear-gradient(145deg,rgba(17,10,11,.82),rgba(8,8,9,.92))!important;box-shadow:0 16px 44px rgba(0,0,0,.22)!important;overflow:hidden!important;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease!important}.content-card:hover{transform:translateY(-5px)!important;border-color:rgba(255,35,55,.18)!important;box-shadow:0 24px 55px rgba(0,0,0,.3),0 0 26px rgba(255,35,55,.055)!important}.content-cover{border-radius:22px 22px 0 0!important}.content-body{padding:17px 18px 20px!important}.content-body h3{line-height:1.45!important}

/* Histórico: tabela dentro de uma superfície só */
.history-panel{padding:8px 18px 18px!important}.history-row{border-bottom:1px solid var(--v10-line)!important}.history-row:last-child{border-bottom:0!important}.history-header{color:#8e8082!important;background:transparent!important}

/* Conta: cartão único mais editorial */
.account-panel{border-radius:var(--v10-radius)!important;padding:26px!important}.profile-big{padding-bottom:22px!important;border-bottom:1px solid var(--v10-line)!important}.account-info{gap:0!important;margin-top:8px!important}.account-info>div{border:0!important;background:transparent!important;padding:18px!important}.account-info>div+div{border-left:1px solid var(--v10-line)!important}

/* Tooltips nativos ficam apoiados pelo cursor de ajuda */
[title*="Meta"],[title*="alcance" i],[title*="conteúdo" i],[title*="interação" i],[title*="salv" i]{cursor:help}

/* Animações mais refinadas */
.page.active-page>.period-bar,.page.active-page>.metrics-grid,.page.active-page>.section-heading,.page.active-page>.performance-grid,.page.active-page>.pro-v5-profile,.page.active-page>.pro-v5-section-title,.page.active-page>.pro-v5-insights,.page.active-page>.pro-v5-grid,.page.active-page>.pro-v5-accountinfo{animation:v10Rise .42s cubic-bezier(.2,.75,.25,1) both}
.page.active-page>*:nth-child(2){animation-delay:.035s}.page.active-page>*:nth-child(3){animation-delay:.07s}.page.active-page>*:nth-child(4){animation-delay:.105s}
@keyframes v10Rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* MOBILE / ANDROID: layout próprio e legível */
@media(max-width:900px){
  .metrics-grid{grid-template-columns:repeat(3,1fr)!important}.metric-card:nth-child(3n):after{display:none!important}.metric-card:nth-child(n+4){border-top:1px solid var(--v10-line)!important}
  .performance-grid{grid-template-columns:repeat(2,1fr)!important}.performance-card:nth-child(2):after{display:none!important}.performance-card:nth-child(n+3){border-top:1px solid var(--v10-line)!important}
  .pro-v5-insights{grid-template-columns:1fr 1fr!important}.pro-v5-mainmetric{grid-column:1/-1!important;border-bottom:1px solid var(--v10-line)!important}.pro-v5-mainmetric:after{display:none!important}.pro-v5-side-metrics{display:contents!important}.pro-v5-side-metrics>div{border-top:0!important}.pro-v5-side-metrics>div:nth-child(2):after{display:none!important}.pro-v5-side-metrics>div:nth-child(3){grid-column:1/-1!important;border-top:1px solid var(--v10-line)!important}.pro-v5-side-metrics>div:nth-child(3):after{display:none!important}
  .pro-v5-grid{grid-template-columns:1fr!important}.pro-v5-growth{border-left:0!important;border-top:1px solid var(--v10-line)!important}
  .dashboard-grid{grid-template-columns:1fr!important}
}
@media(max-width:700px){
  :root{--v10-radius:20px}
  .period-bar{padding:16px!important}.period-bar>div span{font-size:11px!important}.period-bar select{max-width:150px!important}
  .metrics-grid{grid-template-columns:repeat(2,1fr)!important;padding:6px!important}.metric-card:nth-child(3n):after{display:block!important}.metric-card:nth-child(2n):after{display:none!important}.metric-card:nth-child(n+3){border-top:1px solid var(--v10-line)!important}.metric-card{min-height:104px!important;padding:15px!important}.metric-value{font-size:27px!important}
  .performance-grid{grid-template-columns:1fr 1fr!important}.performance-card{min-height:136px!important;padding:16px!important}
  .pro-v5-profile{padding:6px 2px 24px!important}.pro-v5-avatar{width:70px!important;height:70px!important}.pro-v5-name-row strong{font-size:19px!important}.pro-v5-counts,.pro-v5-bio,.pro-v5-sync{margin-left:0!important}.pro-v5-counts{margin-top:18px!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;width:100%!important;max-width:none!important}.pro-v5-counts>div{padding:10px 12px!important;text-align:center!important}.pro-v5-counts>div+div{padding-left:12px!important}.pro-v5-bio{padding-top:14px!important}.pro-v5-bio p{font-size:12px!important}.pro-v5-sync{display:block!important;margin-top:14px!important}
  .pro-v5-insights{grid-template-columns:1fr!important;padding:5px!important}.pro-v5-mainmetric{grid-column:auto!important}.pro-v5-side-metrics>div,.pro-v5-side-metrics>div:nth-child(3){grid-column:auto!important;border-top:1px solid var(--v10-line)!important}.pro-v5-side-metrics>div:after{display:none!important}.pro-v5-mainmetric,.pro-v5-side-metrics>div{min-height:auto!important;padding:18px!important}.pro-v5-mainmetric>strong{font-size:36px!important}.pro-v5-side-metrics strong{font-size:24px!important}
  .pro-v5-grid{border-radius:20px!important}.pro-v5-evolution,.pro-v5-growth{padding:18px!important}.pro-v5-chart{min-height:180px!important}
  .pro-v5-accountinfo{display:block!important}.pro-v5-accountinfo>div+div{border-top:1px solid var(--v10-line)!important}
  .content-grid{grid-template-columns:1fr!important}.content-card{border-radius:20px!important}.content-cover{border-radius:19px 19px 0 0!important}
  .account-info{grid-template-columns:1fr!important}.account-info>div+div{border-left:0!important;border-top:1px solid var(--v10-line)!important}
}

/* V11 — hierarquia sem repetição + identidade movida para Conta */
.page-context{margin:0 0 20px;color:#927f82;font-size:12px;font-weight:650;line-height:1.55}
.content-intro{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 20px}
.content-intro>p{margin:0;color:#927f82;font-size:12px;font-weight:650;line-height:1.55}
.account-panel{max-width:none!important}
.account-profile{display:grid;grid-template-columns:76px minmax(0,1fr);gap:20px;align-items:start;padding:4px 0 26px;border-bottom:1px solid var(--v10-line)}
.account-profile-avatar{width:76px!important;height:76px!important;border-radius:50%!important;background-size:cover;background-position:center;box-shadow:0 0 0 3px #12090a,0 0 0 4px rgba(240,24,24,.45),0 12px 32px rgba(0,0,0,.35)}
.account-profile-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.account-profile-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.account-profile-name-row>strong{font-size:20px;letter-spacing:-.025em}
.account-connected-badge{font-size:9px;font-weight:850;color:#39e58c;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.28);border-radius:999px;padding:5px 8px}.account-connected-badge.is-off{color:#a58f92;border-color:#33272a;background:#100d0e}
.account-profile-copy>b{margin-top:3px;color:#ff3344;font-size:12px}.account-profile-copy>span{margin-top:4px;color:#a18c8f;font-size:10px;font-weight:750}
.account-social-counts{display:flex;align-items:stretch;margin:20px 0 14px}.account-social-counts>div{min-width:105px;padding:0 24px;border-left:1px solid var(--v10-line)}.account-social-counts>div:first-child{padding-left:0;border-left:0}.account-social-counts strong{display:block;font-size:19px}.account-social-counts span{display:block;margin-top:4px;color:#a18c8f;font-size:9px;font-weight:750}
.account-bio{max-width:720px;margin:0 0 10px;color:#f3e9ea;font-size:12px;font-weight:650;line-height:1.6;white-space:pre-line}
.account-website{display:inline-flex;align-items:center;gap:7px;color:#ff3344;text-decoration:none;font-size:11px}.account-website.is-empty{color:#6f6264;pointer-events:none}
.account-subtitle{display:flex;flex-direction:column;gap:3px;padding:24px 0 8px}.account-subtitle strong{font-size:13px}.account-subtitle span{font-size:9px;color:#927f82;font-weight:650}
#conta .account-info{margin-top:0!important}
@media(max-width:700px){.content-intro{align-items:stretch;flex-direction:column}.account-profile{grid-template-columns:58px minmax(0,1fr);gap:14px;padding-bottom:20px}.account-profile-avatar{width:58px!important;height:58px!important}.account-profile-name-row>strong{font-size:17px}.account-social-counts{width:100%;margin-top:17px}.account-social-counts>div{min-width:0;flex:1;padding:0 12px}.account-social-counts strong{font-size:17px}.account-bio{font-size:11px}.account-info{grid-template-columns:1fr!important}.account-info>div+div{border-left:0!important;border-top:1px solid var(--v10-line)!important}}


/* V13 — gráfico do Dashboard alinhado ao Painel Profissional */
.dashboard-chart-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;padding:0 2px;color:#75686a;font-size:9px;font-weight:750}
.dashboard-chart-foot strong{color:#d8c6c8;font-size:9px;font-weight:800}
.chart-panel .chart{background:linear-gradient(180deg,rgba(255,35,55,.018),transparent)!important}
.chart-panel .line-chart .line{stroke:#ff2038!important;stroke-width:3!important;fill:none!important;filter:drop-shadow(0 0 5px rgba(255,32,56,.18))}
.chart-panel .line-chart .area{fill:rgba(190,0,18,.15)!important;stroke:none!important}
@media(max-width:700px){.dashboard-chart-foot{font-size:8px}.dashboard-chart-foot strong{font-size:8px}.chart-panel .chart{min-height:190px}}

/* V16 — MOBILE PREMIUM: composição própria para Android/iPhone */
@media (max-width:700px){
  body{padding-bottom:64px!important}
  .main{padding:0 14px 28px!important}
  .page{padding-bottom:76px!important}

  /* Header compacto, com conta visível */
  .header{min-height:112px!important;padding:18px 0 14px!important;align-items:flex-start!important;gap:10px!important}
  .mobile-brand{font-size:9px!important;letter-spacing:2.4px!important;margin:0 0 7px!important}
  .header h1{font-size:23px!important;line-height:1.05!important;margin:0!important}
  .header h1:after{width:30px!important;margin-top:8px!important}
  .header p{display:none!important}
  .header-actions{display:flex!important;align-items:center!important;gap:7px!important;margin-top:3px!important}
  .instagram-account{display:flex!important;max-width:116px!important;gap:7px!important;min-width:0!important}
  .instagram-account .account-avatar{width:28px!important;height:28px!important;min-width:28px!important;font-size:8px!important;border-radius:50%!important}
  .instagram-account>div:last-child{min-width:0!important}
  .instagram-account strong{display:block!important;max-width:80px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:8px!important}
  .instagram-account span{display:block!important;font-size:7px!important;white-space:nowrap!important;color:#9d888b!important}
  .sync-button{padding:9px 10px!important;font-size:8px!important;border-radius:11px!important;white-space:nowrap!important}

  /* Hierarquia e respiro */
  .page-context{font-size:10px!important;line-height:1.45!important;margin-bottom:14px!important}
  .section-heading{margin-bottom:13px!important}.section-heading h2{font-size:18px!important}.section-heading p{font-size:9px!important}
  .period-bar{padding:14px!important;margin-bottom:12px!important;gap:10px!important;align-items:center!important}
  .period-bar strong{font-size:15px!important}.period-bar>div span{font-size:9px!important;line-height:1.35!important}
  .period-bar select{width:auto!important;max-width:138px!important;padding:10px 28px 10px 10px!important;font-size:9px!important}

  /* Dashboard: seis métricas compactas 2x3 */
  .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;padding:4px 10px!important}
  .metric-card{min-height:92px!important;padding:14px 10px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
  .metric-card:nth-child(odd){border-right:1px solid var(--v10-line)!important}
  .metric-card:nth-child(n+3){border-top:1px solid var(--v10-line)!important}
  .metric-card:after{display:none!important}
  .metric-label{font-size:9px!important;line-height:1.25!important;min-height:23px!important}
  .metric-value{font-size:25px!important;line-height:1!important;margin:7px 0!important}
  .metric-card>span:last-child{font-size:8px!important}

  /* Gráfico */
  .chart-panel{padding:16px!important}.chart-panel .panel-header{margin-bottom:10px!important}
  .chart-panel .panel-header strong{font-size:13px!important}.chart-panel .panel-header span{font-size:8px!important;line-height:1.35!important}
  .chart-panel .chart{min-height:150px!important;height:150px!important;border-radius:14px!important}
  .dashboard-chart-foot{margin-top:7px!important}
  .highlights{padding:5px 14px!important}.highlight{padding:12px 0!important}.highlight span{font-size:8px!important}.highlight strong{font-size:12px!important}

  /* Conteúdos recentes: linha limpa, sem badge vertical */
  .reels-panel{padding:16px!important}.reels-panel .panel-header{align-items:flex-start!important;margin-bottom:8px!important}
  .reel-row{grid-template-columns:46px minmax(0,1fr) auto!important;gap:10px!important;padding:13px 0!important;align-items:center!important}
  .reel-thumb{width:46px!important;height:52px!important;border-radius:9px!important;background-size:cover!important;background-position:center!important}
  .reel-name{min-width:0!important}.reel-name strong{font-size:11px!important;line-height:1.3!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.reel-name span{font-size:8px!important;margin-top:4px!important;display:block!important}
  .reel-stat{min-width:58px!important;text-align:right!important}.reel-stat span{font-size:7px!important}.reel-stat strong{font-size:13px!important}
  .reel-row .tablet-hide,.reel-row .mobile-hide{display:none!important}
  .performance-badge{grid-column:2/4!important;justify-self:start!important;width:auto!important;min-width:0!important;padding:5px 8px!important;font-size:8px!important;line-height:1.2!important;border-radius:999px!important;margin-top:-4px!important}

  /* Desempenho */
  .performance-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;padding:5px 10px!important}
  .performance-card{min-height:124px!important;padding:15px 10px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
  .performance-card:nth-child(odd){border-right:1px solid var(--v10-line)!important}.performance-card:nth-child(n+3){border-top:1px solid var(--v10-line)!important}.performance-card:after{display:none!important}
  .performance-card>span{font-size:10px!important;line-height:1.35!important}.performance-card>strong{font-size:27px!important;margin:10px 0 5px!important}.performance-card p{font-size:9px!important;line-height:1.3!important}.performance-card small{font-size:9px!important;line-height:1.35!important}

  /* Conta compacta */
  .account-panel{padding:17px!important}.account-profile{grid-template-columns:54px minmax(0,1fr)!important;gap:12px!important;padding-bottom:17px!important}
  .account-profile-avatar{width:54px!important;height:54px!important}.account-profile-name-row{gap:6px!important}.account-profile-name-row>strong{font-size:15px!important;line-height:1.15!important}.account-connected-badge{font-size:7px!important;padding:4px 6px!important}.account-profile-copy>b{font-size:10px!important}.account-profile-copy>span{font-size:8px!important}
  .account-social-counts{margin:13px 0 10px!important}.account-social-counts>div{padding:0 9px!important}.account-social-counts strong{font-size:15px!important}.account-social-counts span{font-size:7px!important}.account-bio{font-size:10px!important;line-height:1.45!important}.account-website{font-size:9px!important}
  .account-subtitle{padding:17px 0 7px!important}.account-info>div{padding:13px!important}.account-info span{font-size:9px!important}.account-info strong{font-size:10px!important}

  /* Painel profissional */
  .pro-v5-profile{padding:16px!important}.pro-v5-avatar{width:56px!important;height:56px!important}.pro-v5-name-row strong{font-size:15px!important}.pro-v5-counts{margin-top:13px!important}.pro-v5-counts>div{padding:8px 5px!important}.pro-v5-counts strong{font-size:16px!important}.pro-v5-counts span{font-size:7px!important}
  .pro-v5-mainmetric,.pro-v5-side-metrics>div{padding:15px!important}.pro-v5-mainmetric>strong{font-size:30px!important}.pro-v5-side-metrics strong{font-size:20px!important}.pro-v5-chart{min-height:145px!important;height:145px!important}

  /* Barra inferior: TODAS as 6 seções */
  .mobile-nav{height:61px!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;background:rgba(7,6,6,.97)!important;border-top:1px solid #321416!important;box-shadow:0 -10px 35px rgba(0,0,0,.38)!important;padding:2px max(4px,env(safe-area-inset-right)) max(2px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))!important;backdrop-filter:blur(16px)!important}
  .mobile-nav-item{min-width:0!important;padding:4px 1px!important;gap:3px!important;font-size:6.5px!important;font-weight:750!important;letter-spacing:-.02em!important;color:#75696b!important}
  .mobile-nav-item .menu-icon{width:17px!important;height:17px!important;display:block!important}.mobile-nav-item .menu-icon svg{width:17px!important;height:17px!important;stroke:currentColor!important;fill:none!important;stroke-width:1.7!important}
  .mobile-nav-item.active{color:#fff!important}.mobile-nav-item.active .menu-icon{color:#ff3b46!important;filter:drop-shadow(0 0 6px rgba(255,30,45,.25))}
  .live-status{bottom:69px!important;right:10px!important;padding:8px 10px!important;font-size:8px!important}
}

@media(max-width:380px){
  .main{padding-left:10px!important;padding-right:10px!important}.header{min-height:106px!important}.instagram-account{max-width:96px!important}.instagram-account strong{max-width:62px!important}.sync-button{padding:8px!important}.mobile-nav-item{font-size:6px!important}.metric-value{font-size:23px!important}
}

/* V17 — MOBILE FIT: sem corte, sem rolagem lateral, escala premium */
@media (max-width:700px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  *,*:before,*:after{box-sizing:border-box!important}
  .app,.main,.page,.panel,.header,.header-actions,.period-bar,.metrics-grid,.dashboard-grid,.performance-grid,.reels-panel,.account-panel,#profissional{min-width:0!important;max-width:100%!important}
  .main{width:100%!important;padding:0 12px 22px!important;margin:0!important;overflow-x:hidden!important}
  .page{width:100%!important;overflow-x:hidden!important;padding-bottom:78px!important}
  .panel{width:100%!important;border-radius:16px!important;overflow:hidden!important}

  .header{min-height:96px!important;padding:14px 0 12px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important}
  .header h1{font-size:21px!important}.header-actions{max-width:178px!important;justify-content:flex-end!important}
  .instagram-account{max-width:100px!important}.instagram-account span{display:none!important}.sync-button{padding:8px 9px!important;font-size:7.5px!important}

  .period-bar{display:grid!important;grid-template-columns:minmax(0,1fr) 126px!important;padding:12px!important}
  .period-bar strong{font-size:14px!important}.period-bar select{width:126px!important;max-width:126px!important;min-width:0!important}

  .metrics-grid{width:100%!important;padding:3px 6px!important}
  .metric-card{min-width:0!important;min-height:82px!important;padding:12px 8px!important}
  .metric-label{font-size:8px!important;min-height:20px!important;overflow-wrap:anywhere!important}
  .metric-value{font-size:22px!important;margin:5px 0!important}.metric-card>span:last-child{font-size:7px!important}

  .dashboard-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:100%!important}
  .chart-panel,.highlights{min-width:0!important;width:100%!important}
  .chart-panel{padding:13px!important}.chart-panel .chart{height:132px!important;min-height:132px!important;width:100%!important;overflow:hidden!important}
  .chart svg,.chart canvas{max-width:100%!important;width:100%!important}

  .reels-panel{padding:13px!important}.reel-row{width:100%!important;grid-template-columns:42px minmax(0,1fr) 54px!important;gap:8px!important}
  .reel-thumb{width:42px!important;height:48px!important}.reel-name strong{font-size:10px!important}.reel-stat{min-width:0!important;width:54px!important}.performance-badge{max-width:100%!important;white-space:normal!important}

  .performance-grid{width:100%!important;padding:3px 6px!important}
  .performance-card{min-width:0!important;min-height:108px!important;padding:12px 8px!important;overflow:hidden!important}
  .performance-card>span{font-size:9px!important;overflow-wrap:anywhere!important}.performance-card>strong{font-size:23px!important;margin:7px 0 4px!important}.performance-card p,.performance-card small{font-size:8px!important;overflow-wrap:anywhere!important}

  .account-panel{padding:14px!important}.account-profile{grid-template-columns:48px minmax(0,1fr)!important;gap:10px!important}.account-profile-avatar{width:48px!important;height:48px!important}.account-profile-name-row>strong{font-size:14px!important;overflow-wrap:anywhere!important}.account-social-counts{width:100%!important}.account-social-counts>div{min-width:0!important;padding:0 6px!important}.account-bio,.account-website{overflow-wrap:anywhere!important;word-break:break-word!important}

  .pro-v5-profile,.pro-v5-insights,.pro-v5-evolution,.pro-v5-growth,.pro-v5-accountinfo{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .pro-v5-top{min-width:0!important}.pro-v5-avatar{width:50px!important;height:50px!important}.pro-v5-headcopy{min-width:0!important}.pro-v5-name-row strong{font-size:14px!important;overflow-wrap:anywhere!important}.pro-v5-counts{width:100%!important}.pro-v5-mainmetric>strong{font-size:27px!important}.pro-v5-chart{height:128px!important;min-height:128px!important;max-width:100%!important}

  .history-panel{overflow:hidden!important}.history-row{min-width:0!important;width:100%!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}.history-row>*{min-width:0!important;overflow-wrap:anywhere!important}

  .mobile-nav{width:100%!important;max-width:100vw!important;height:64px!important;overflow:hidden!important}
  .mobile-nav-item{overflow:hidden!important;font-size:6px!important}.mobile-nav-item span:last-child{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}
@media(max-width:390px){
  .main{padding-left:9px!important;padding-right:9px!important}.header-actions{max-width:158px!important}.instagram-account{max-width:88px!important}.instagram-account .account-avatar{width:24px!important;height:24px!important;min-width:24px!important}.instagram-account strong{max-width:58px!important;font-size:7px!important}.sync-button{padding:7px!important}.period-bar{grid-template-columns:minmax(0,1fr) 112px!important}.period-bar select{width:112px!important}.metric-value{font-size:20px!important}.performance-card>strong{font-size:21px!important}
}

/* V18 — refinamento exclusivo dos cabeçalhos mobile */
@media (max-width:700px){
  .header{
    min-height:78px!important;
    padding:11px 0 10px!important;
    grid-template-columns:minmax(112px,.72fr) minmax(0,1.28fr)!important;
    gap:10px!important;
    align-items:center!important;
  }
  .header>div:first-child{min-width:0!important}
  .mobile-brand{font-size:9px!important;letter-spacing:.24em!important;margin-bottom:5px!important}
  .header h1{font-size:18px!important;line-height:1.05!important;letter-spacing:-.035em!important;margin:0!important}
  .header h1:after{width:30px!important;height:2px!important;margin-top:8px!important}
  .header #pageSubtitle{font-size:8px!important;line-height:1.25!important;margin-top:7px!important;max-width:190px!important;color:#9a878a!important}

  .header-actions{width:100%!important;max-width:none!important;min-width:0!important;gap:7px!important;justify-content:flex-end!important;align-items:center!important}
  .instagram-account{display:flex!important;flex:1 1 auto!important;max-width:145px!important;min-width:0!important;gap:6px!important;align-items:center!important}
  .instagram-account .account-avatar{width:25px!important;height:25px!important;min-width:25px!important}
  .instagram-account>div:last-child{min-width:0!important;max-width:112px!important}
  .instagram-account strong{display:block!important;max-width:112px!important;font-size:8.5px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .instagram-account span{display:none!important}
  .sync-button{flex:0 0 auto!important;padding:7px 9px!important;min-height:31px!important;font-size:7.5px!important;border-radius:11px!important;white-space:nowrap!important}
  .sync-button .sync-icon{font-size:9px!important}

  /* títulos internos das páginas: menos altos e mais limpos */
  .section-heading{margin:16px 0 9px!important}
  .section-heading strong,.section-heading h2{font-size:15px!important;line-height:1.15!important}
  .section-heading span,.section-heading p{font-size:8px!important;line-height:1.35!important;margin-top:3px!important}
  .page-context{font-size:9px!important;line-height:1.4!important;margin-bottom:13px!important}
  .content-intro{margin-bottom:12px!important}
  .content-intro>p{font-size:9px!important;line-height:1.4!important}
  .account-subtitle strong{font-size:14px!important}
  .account-subtitle span{font-size:8px!important}
  .pro-v5-section-title{margin-top:17px!important;margin-bottom:8px!important}
  .pro-v5-section-title strong{font-size:15px!important}
  .pro-v5-section-title span{font-size:8px!important}
}

@media (max-width:390px){
  .header{grid-template-columns:minmax(100px,.68fr) minmax(0,1.32fr)!important;gap:7px!important}
  .header h1{font-size:17px!important}
  .header #pageSubtitle{display:none!important}
  .instagram-account{max-width:128px!important}
  .instagram-account>div:last-child,.instagram-account strong{max-width:96px!important}
  .instagram-account strong{font-size:8px!important}
  .sync-button{padding:7px 8px!important;font-size:7px!important}
}


/* V19 — sincronização 100% silenciosa */
#liveStatus { display:none !important; }
.silent-refresh *, .silent-refresh *::before, .silent-refresh *::after {
  animation-duration:0s !important;
  animation-delay:0s !important;
  transition-duration:0s !important;
}


/* V20 — identificação empresarial e central legal */
.auth-legal{margin-top:18px;padding-top:15px;border-top:1px solid #2b1719;text-align:center;color:#8f7d80;font-size:9px;line-height:1.6}.auth-legal>strong{color:#d9c9cb;font-size:9px}.auth-legal div{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:7px}.auth-legal a{color:#ff5966;text-decoration:none;font-weight:800}.auth-legal a:hover{text-decoration:underline}.legal-panel{background:linear-gradient(145deg,#10090a,#080808);border:1px solid #2d191b;padding:30px;max-width:900px}.legal-kicker{color:#ff343f;font-size:9px;font-weight:900;letter-spacing:.18em}.legal-panel h2{font-size:28px;margin:8px 0}.legal-panel>p{color:#a99598;font-size:12px;max-width:650px}.legal-company{display:grid;grid-template-columns:180px 1fr;margin:26px 0;border-top:1px solid #2b1b1d}.legal-company span,.legal-company strong{padding:14px 0;border-bottom:1px solid #2b1b1d}.legal-company span{color:#8d7b7e;font-size:10px}.legal-company strong{color:#fff;font-size:11px}.legal-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.legal-links a{display:grid;gap:6px;padding:18px;border:1px solid #33191c;background:#0b0808;text-decoration:none;transition:.2s}.legal-links a:hover{border-color:#7b2028;transform:translateY(-2px)}.legal-links strong{color:#fff;font-size:11px}.legal-links span{color:#927f82;font-size:9px;line-height:1.5}@media(max-width:700px){.legal-panel{padding:18px}.legal-panel h2{font-size:21px}.legal-company{grid-template-columns:1fr}.legal-company span{padding-bottom:3px;border-bottom:0}.legal-company strong{padding-top:2px}.legal-links{grid-template-columns:1fr}.mobile-nav{grid-template-columns:repeat(7,minmax(0,1fr))!important}}


/* V21 — identidade empresarial pública e rastreável para verificações externas */
.public-business-identity{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:7px 14px;background:rgba(3,3,3,.94);border-top:1px solid #251719;color:#8c7b7e;font-size:8px;line-height:1.35;backdrop-filter:blur(12px)}
.public-business-identity strong{color:#bcaeb0;font-weight:700}.public-business-identity nav{display:flex;gap:9px;margin-left:4px}.public-business-identity a{color:#ba6269;text-decoration:none;font-weight:700}.public-business-identity a:hover{text-decoration:underline;color:#ff5966}.noscript-legal{max-width:760px;margin:40px auto;padding:24px;color:#eee;background:#0b0808;border:1px solid #2b1719}.noscript-legal a{color:#ff5966}
@media(max-width:700px){.public-business-identity{position:static;padding:8px 12px;font-size:7px;gap:5px}.public-business-identity nav{width:100%;justify-content:center;margin-left:0}.auth-shell{min-height:calc(100dvh - 56px)}}


/* V22 — interface premium geométrica
   Mantém a paleta e os gráficos; elimina arredondamentos e refina movimentos. */
:root {
  --premium-ease: cubic-bezier(.22, 1, .36, 1);
  --premium-fast: 180ms;
  --premium-medium: 420ms;
  --premium-slow: 680ms;
}

/* Geometria totalmente quadrada em todos os componentes da interface.
   A especificidade elevada neutraliza os !important das versões anteriores. */
html body #mainApp *,
html body #mainApp *::before,
html body #mainApp *::after,
html body #authShell *,
html body #authShell *::before,
html body #authShell *::after,
html body #reelModal *,
html body #reelModal *::before,
html body #reelModal *::after,
html body .public-business-identity,
html body .public-business-identity *,
html body .noscript-legal,
html body .noscript-legal * {
  border-radius: 0 !important;
}

/* Entrada principal mais precisa, sem alterar cores ou conteúdo. */
@keyframes premiumPageIn {
  0% { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(5px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes premiumPanelIn {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.992); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes premiumAuthIn {
  0% { opacity: 0; transform: translate3d(0, 20px, 0) scale(.985); filter: blur(7px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes premiumModalIn {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.975); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes premiumLineSweep {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

.page.active-page {
  animation: premiumPageIn var(--premium-slow) var(--premium-ease) both !important;
}

.page.active-page > .period-bar,
.page.active-page > .metrics-grid,
.page.active-page > .dashboard-grid,
.page.active-page > .reels-panel,
.page.active-page > .content-intro,
.page.active-page > .content-grid,
.page.active-page > .page-context,
.page.active-page > .performance-grid,
.page.active-page > .panel,
.page.active-page > .pro-v5-section-title,
.page.active-page > .pro-v5-insights,
.page.active-page > .pro-v5-grid,
.page.active-page > .account-panel,
.page.active-page > .legal-panel {
  animation: premiumPanelIn var(--premium-slow) var(--premium-ease) both !important;
}

.page.active-page > :nth-child(2) { animation-delay: 55ms !important; }
.page.active-page > :nth-child(3) { animation-delay: 105ms !important; }
.page.active-page > :nth-child(4) { animation-delay: 155ms !important; }
.page.active-page > :nth-child(5) { animation-delay: 205ms !important; }

.auth-card { animation: premiumAuthIn 760ms var(--premium-ease) both; }

/* Superfícies com profundidade controlada e resposta tátil. */
.panel,
.metric-card,
.performance-card,
.content-card,
.account-panel,
.legal-panel,
.auth-card,
.period-bar,
.pro-v5-insights,
.pro-v5-grid,
.reel-row,
.legal-links a {
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    transform var(--premium-medium) var(--premium-ease),
    border-color var(--premium-medium) ease,
    box-shadow var(--premium-medium) ease,
    background-color var(--premium-medium) ease !important;
}

@media (hover:hover) and (pointer:fine) {
  .content-card:hover,
  .reel-row:hover,
  .legal-links a:hover {
    transform: translate3d(0, -4px, 0) !important;
  }

  .metric-card:hover,
  .performance-card:hover {
    transform: translate3d(0, -2px, 0) !important;
  }

  button:hover,
  select:hover,
  input:hover,
  .account-website:hover,
  .instagram-open:hover {
    transform: translate3d(0, -1px, 0);
  }
}

button,
select,
input,
a,
.menu-item,
.mobile-nav-item {
  transition:
    transform var(--premium-fast) var(--premium-ease),
    opacity var(--premium-fast) ease,
    color var(--premium-fast) ease,
    background-color var(--premium-fast) ease,
    border-color var(--premium-fast) ease,
    box-shadow var(--premium-fast) ease !important;
}

button:active,
.menu-item:active,
.mobile-nav-item:active,
.content-card:active,
.reel-row:active {
  transform: translate3d(0, 1px, 0) scale(.992) !important;
  transition-duration: 70ms !important;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

/* Indicadores ativos entram como uma linha técnica, mantendo a cor existente. */
.menu-item.active::after,
.mobile-nav-item.active::after {
  transform-origin: left center;
  animation: premiumLineSweep var(--premium-medium) var(--premium-ease) both;
}

/* Modal quadrado com entrada firme e overlay suave. */
.modal-overlay {
  transition: opacity 260ms ease, visibility 260ms ease !important;
}

.modal-overlay.open .modal {
  animation: premiumModalIn 460ms var(--premium-ease) both;
}

/* Elementos carregados dinamicamente recebem movimento escalonado. */
.reveal {
  animation: premiumPanelIn 560ms var(--premium-ease) both !important;
}

.reel-row:nth-child(2), .content-card:nth-child(2), .comparison-item:nth-child(2) { animation-delay: 45ms !important; }
.reel-row:nth-child(3), .content-card:nth-child(3), .comparison-item:nth-child(3) { animation-delay: 90ms !important; }
.reel-row:nth-child(4), .content-card:nth-child(4), .comparison-item:nth-child(4) { animation-delay: 135ms !important; }
.reel-row:nth-child(5), .content-card:nth-child(5), .comparison-item:nth-child(5) { animation-delay: 180ms !important; }

/* Respeita a preferência do sistema e evita movimento durante sincronização silenciosa. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* V24 — divisórias luminosas das métricas
   Linhas curtas e graduais preservam a faixa única sem cortar o painel. */
html body #mainApp .metrics-grid .metric-card::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  right: 0 !important;
  left: auto !important;
  top: 27% !important;
  bottom: 27% !important;
  width: 1px !important;
  height: auto !important;
  background: linear-gradient(180deg, transparent 0%, var(--v10-line-red) 28%, var(--v10-red) 50%, var(--v10-line-red) 72%, transparent 100%) !important;
  opacity: .82 !important;
  box-shadow: 0 0 5px rgba(255,37,59,.42), 0 0 13px rgba(255,37,59,.2) !important;
  pointer-events: none !important;
}

html body #mainApp .metrics-grid .metric-card:last-child::after {
  display: none !important;
}

html body #mainApp .metrics-grid .metric-card::before {
  content: "" !important;
  display: none !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  bottom: auto !important;
  left: 16% !important;
  right: 16% !important;
  width: auto !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, var(--v10-line-red) 28%, var(--v10-red) 50%, var(--v10-line-red) 72%, transparent 100%) !important;
  opacity: .72 !important;
  box-shadow: 0 0 5px rgba(255,37,59,.36), 0 0 12px rgba(255,37,59,.16) !important;
  pointer-events: none !important;
}

@media (max-width:900px) {
  html body #mainApp .metrics-grid .metric-card::after { display: block !important; }
  html body #mainApp .metrics-grid .metric-card:nth-child(3n)::after { display: none !important; }
  html body #mainApp .metrics-grid .metric-card:nth-child(n+4)::before { display: block !important; }
}

@media (max-width:700px) {
  html body #mainApp .metrics-grid .metric-card::after { display: none !important; }
  html body #mainApp .metrics-grid .metric-card:nth-child(odd)::after { display: block !important; }
  html body #mainApp .metrics-grid .metric-card:nth-child(n+3)::before { display: block !important; }
}

/* V25 — hover estável das faixas de métricas
   Sem deslocamento físico: resposta luminosa rápida, sem disputa com a animação de entrada. */
html body #mainApp .metrics-grid .metric-card {
  transition: background-color 145ms ease, filter 145ms ease !important;
  will-change: auto !important;
}

html body #mainApp .metrics-grid .metric-card:hover {
  background: rgba(255,255,255,.018) !important;
  box-shadow: none !important;
  filter: brightness(1.045) !important;
}

html body #mainApp .metrics-grid .metric-card:active {
  filter: brightness(1.075) !important;
}

html body #mainApp .metrics-grid .metric-card::after,
html body #mainApp .metrics-grid .metric-card::before {
  transition: opacity 145ms ease, box-shadow 145ms ease !important;
}

html body #mainApp .metrics-grid .metric-card:hover::after,
html body #mainApp .metrics-grid .metric-card:hover::before {
  opacity: 1 !important;
  box-shadow: 0 0 6px rgba(255,37,59,.48), 0 0 15px rgba(255,37,59,.22) !important;
}

/* V26 — hover premium uniforme e sem saltos
   Seções permanecem imóveis; apenas luz, borda e profundidade respondem ao cursor. */
html body #mainApp .panel,
html body #mainApp .performance-card,
html body #mainApp .content-card,
html body #mainApp .account-panel,
html body #mainApp .legal-panel,
html body #mainApp .period-bar,
html body #mainApp .pro-v5-insights,
html body #mainApp .pro-v5-grid,
html body #mainApp .pro-v5-evolution,
html body #mainApp .pro-v5-growth,
html body #mainApp .pro-v5-accountinfo,
html body #mainApp .reel-row,
html body #mainApp .comparison-item,
html body #mainApp .legal-links a {
  will-change: auto !important;
  transition:
    border-color 175ms ease,
    box-shadow 220ms ease,
    background-color 175ms ease,
    opacity 175ms ease !important;
}

@media (hover:hover) and (pointer:fine) {
  html body #mainApp .panel:hover,
  html body #mainApp .performance-card:hover,
  html body #mainApp .content-card:hover,
  html body #mainApp .account-panel:hover,
  html body #mainApp .legal-panel:hover,
  html body #mainApp .period-bar:hover,
  html body #mainApp .pro-v5-insights:hover,
  html body #mainApp .pro-v5-grid:hover,
  html body #mainApp .pro-v5-evolution:hover,
  html body #mainApp .pro-v5-growth:hover,
  html body #mainApp .pro-v5-accountinfo:hover,
  html body #mainApp .reel-row:hover,
  html body #mainApp .comparison-item:hover,
  html body #mainApp .legal-links a:hover {
    transform: none !important;
    border-color: rgba(255,38,61,.27) !important;
    box-shadow:
      0 18px 48px rgba(0,0,0,.26),
      0 0 0 1px rgba(255,38,61,.035),
      0 0 22px rgba(255,38,61,.055) !important;
  }

  html body #mainApp .reel-row:hover,
  html body #mainApp .comparison-item:hover,
  html body #mainApp .legal-links a:hover {
    background-color: rgba(255,255,255,.018) !important;
  }
}

html body #mainApp .panel:active,
html body #mainApp .performance-card:active,
html body #mainApp .content-card:active,
html body #mainApp .account-panel:active,
html body #mainApp .legal-panel:active,
html body #mainApp .period-bar:active,
html body #mainApp .reel-row:active,
html body #mainApp .comparison-item:active {
  transform: none !important;
}

/* V27 — métricas em cards independentes e realmente animados */
@keyframes premiumMetricIn {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.965); }
  65% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.006); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

html body #mainApp .metrics-grid {
  gap: 12px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #mainApp .metrics-grid .metric-card {
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 126px !important;
  padding: 20px !important;
  border: 1px solid var(--v10-line) !important;
  background: linear-gradient(145deg,rgba(15,9,10,.9),rgba(7,7,8,.96)) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.016) !important;
  filter: none !important;
  transform: translate3d(0,0,0) scale(1);
  will-change: transform !important;
  transition:
    transform 360ms var(--premium-ease),
    border-color 240ms ease,
    box-shadow 360ms ease,
    background-color 240ms ease !important;
}

html body #mainApp .metrics-grid .metric-card > * {
  position: relative;
  z-index: 3;
}

/* Glow inferior permanente: identifica o card sem dividi-lo. */
html body #mainApp .metrics-grid .metric-card::after,
html body #mainApp .metrics-grid .metric-card:last-child::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 1 !important;
  left: 12% !important;
  right: 12% !important;
  top: auto !important;
  bottom: 0 !important;
  width: auto !important;
  height: 1px !important;
  background: linear-gradient(90deg,transparent,var(--v10-line-red),var(--v10-red),var(--v10-line-red),transparent) !important;
  opacity: .58 !important;
  box-shadow: 0 0 7px rgba(255,37,59,.32), 0 0 16px rgba(255,37,59,.13) !important;
  transition: opacity 240ms ease, box-shadow 240ms ease !important;
}

/* Reflexo que percorre o card ao receber o cursor. */
html body #mainApp .metrics-grid .metric-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: -35% auto -35% -58% !important;
  width: 36% !important;
  height: auto !important;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent) !important;
  opacity: 0 !important;
  transform: skewX(-18deg) translate3d(0,0,0) !important;
  transition: transform 720ms var(--premium-ease), opacity 180ms ease !important;
  pointer-events: none !important;
}

.page.active-page .metrics-grid .metric-card {
  animation: premiumMetricIn 620ms var(--premium-ease) both !important;
}
.page.active-page .metrics-grid .metric-card:nth-child(2) { animation-delay: 55ms !important; }
.page.active-page .metrics-grid .metric-card:nth-child(3) { animation-delay: 110ms !important; }
.page.active-page .metrics-grid .metric-card:nth-child(4) { animation-delay: 165ms !important; }
.page.active-page .metrics-grid .metric-card:nth-child(5) { animation-delay: 220ms !important; }
.page.active-page .metrics-grid .metric-card:nth-child(6) { animation-delay: 275ms !important; }

@media (hover:hover) and (pointer:fine) {
  html body #mainApp .metrics-grid .metric-card:hover {
    transform: translate3d(0,-6px,0) scale(1.012) !important;
    border-color: rgba(255,38,61,.34) !important;
    background: linear-gradient(145deg,rgba(19,10,12,.94),rgba(8,8,9,.98)) !important;
    box-shadow: 0 24px 52px rgba(0,0,0,.34), 0 0 25px rgba(255,38,61,.075) !important;
    filter: none !important;
  }
  html body #mainApp .metrics-grid .metric-card:hover::before {
    opacity: 1 !important;
    transform: skewX(-18deg) translate3d(470%,0,0) !important;
  }
  html body #mainApp .metrics-grid .metric-card:hover::after {
    opacity: 1 !important;
    box-shadow: 0 0 9px rgba(255,37,59,.48), 0 0 21px rgba(255,37,59,.2) !important;
  }
}

html body #mainApp .metrics-grid .metric-card:active {
  transform: translate3d(0,-2px,0) scale(.994) !important;
  transition-duration: 90ms !important;
}

@media (max-width:900px) {
  html body #mainApp .metrics-grid { gap: 10px !important; }
  html body #mainApp .metrics-grid .metric-card { min-height: 112px !important; }
}

@media (max-width:700px) {
  html body #mainApp .metrics-grid { gap: 8px !important; padding: 0 !important; }
  html body #mainApp .metrics-grid .metric-card {
    min-height: 98px !important;
    padding: 14px 12px !important;
  }
}

/* V28 — sistema premium animado aplicado ao painel inteiro */
@keyframes premiumBlockIn {
  0% { opacity: 0; transform: translate3d(0,16px,0) scale(.978); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

/* Desempenho: quatro cards independentes. */
html body #mainApp .performance-grid {
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body #mainApp .performance-grid .performance-card {
  border: 1px solid var(--v10-line) !important;
  background: linear-gradient(145deg,rgba(15,9,10,.9),rgba(7,7,8,.96)) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.016) !important;
  overflow: hidden !important;
}

html body #mainApp .performance-grid .performance-card::after {
  left: 12% !important;
  right: 12% !important;
  top: auto !important;
  bottom: 0 !important;
  width: auto !important;
  height: 1px !important;
  background: linear-gradient(90deg,transparent,var(--v10-line-red),var(--v10-red),var(--v10-line-red),transparent) !important;
  opacity: .55 !important;
  box-shadow: 0 0 8px rgba(255,37,59,.25) !important;
}

/* Métricas profissionais e evolução também deixam de ser uma faixa rígida. */
html body #mainApp .pro-v5-insights {
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body #mainApp .pro-v5-mainmetric,
html body #mainApp .pro-v5-side-metrics > div {
  border: 1px solid var(--v10-line) !important;
  background: linear-gradient(145deg,rgba(15,9,10,.9),rgba(7,7,8,.96)) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.2) !important;
  overflow: hidden !important;
}

html body #mainApp .pro-v5-mainmetric::after,
html body #mainApp .pro-v5-side-metrics > div::after {
  left: 14% !important;
  right: 14% !important;
  top: auto !important;
  bottom: 0 !important;
  width: auto !important;
  height: 1px !important;
  background: linear-gradient(90deg,transparent,var(--v10-line-red),var(--v10-red),var(--v10-line-red),transparent) !important;
  opacity: .5 !important;
  box-shadow: 0 0 8px rgba(255,37,59,.22) !important;
}

html body #mainApp .pro-v5-grid {
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body #mainApp .pro-v5-evolution,
html body #mainApp .pro-v5-growth {
  border: 1px solid var(--v10-line) !important;
  background: linear-gradient(145deg,rgba(15,9,10,.88),rgba(7,7,8,.95)) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.2) !important;
}

/* Linhas e sub-blocos ganham identidade própria. */
html body #mainApp .reels-list {
  display: grid !important;
  gap: 8px !important;
}

html body #mainApp .reel-row,
html body #mainApp .comparison-item,
html body #mainApp .highlights .highlight,
html body #mainApp .history-live .history-row,
html body #mainApp .account-info > div,
html body #mainApp .legal-links a {
  position: relative !important;
  border: 1px solid var(--v10-line) !important;
  background: rgba(255,255,255,.012) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.14) !important;
}

html body #mainApp .reel-row { padding: 12px !important; }
html body #mainApp .comparison-list,
html body #mainApp .highlights,
html body #mainApp .history-live { display: grid !important; gap: 8px !important; }
html body #mainApp .highlights .highlight { padding: 15px !important; }
html body #mainApp .history-live .history-row { padding: 14px !important; }

/* Movimento compartilhado: GPU, curva suave e sem mudança brusca. */
html body #mainApp .panel,
html body #mainApp .performance-card,
html body #mainApp .content-card,
html body #mainApp .account-panel,
html body #mainApp .legal-panel,
html body #mainApp .period-bar,
html body #mainApp .pro-v5-mainmetric,
html body #mainApp .pro-v5-side-metrics > div,
html body #mainApp .pro-v5-evolution,
html body #mainApp .pro-v5-growth,
html body #mainApp .reel-row,
html body #mainApp .comparison-item,
html body #mainApp .highlights .highlight,
html body #mainApp .history-live .history-row,
html body #mainApp .account-info > div,
html body #mainApp .legal-links a {
  transform: translate3d(0,0,0) scale(1);
  backface-visibility: hidden !important;
  will-change: transform !important;
  transition:
    transform 360ms var(--premium-ease),
    border-color 240ms ease,
    box-shadow 360ms ease,
    background-color 240ms ease !important;
}

@media (hover:hover) and (pointer:fine) {
  html body #mainApp .panel:hover,
  html body #mainApp .performance-card:hover,
  html body #mainApp .content-card:hover,
  html body #mainApp .account-panel:hover,
  html body #mainApp .legal-panel:hover,
  html body #mainApp .period-bar:hover,
  html body #mainApp .pro-v5-mainmetric:hover,
  html body #mainApp .pro-v5-side-metrics > div:hover,
  html body #mainApp .pro-v5-evolution:hover,
  html body #mainApp .pro-v5-growth:hover,
  html body #mainApp .reel-row:hover,
  html body #mainApp .comparison-item:hover,
  html body #mainApp .highlights .highlight:hover,
  html body #mainApp .history-live .history-row:hover,
  html body #mainApp .account-info > div:hover,
  html body #mainApp .legal-links a:hover {
    transform: translate3d(0,-5px,0) scale(1.008) !important;
    border-color: rgba(255,38,61,.32) !important;
    box-shadow: 0 23px 48px rgba(0,0,0,.3), 0 0 24px rgba(255,38,61,.065) !important;
  }
}

html body #mainApp .performance-card:active,
html body #mainApp .content-card:active,
html body #mainApp .reel-row:active,
html body #mainApp .comparison-item:active,
html body #mainApp .highlights .highlight:active,
html body #mainApp .history-live .history-row:active,
html body #mainApp .legal-links a:active {
  transform: translate3d(0,-1px,0) scale(.994) !important;
  transition-duration: 90ms !important;
}

/* Entradas escalonadas dos grupos internos. */
.page.active-page .performance-card,
.page.active-page .content-card,
.page.active-page .pro-v5-mainmetric,
.page.active-page .pro-v5-side-metrics > div,
.page.active-page .reel-row,
.page.active-page .comparison-item,
.page.active-page .highlights .highlight,
.page.active-page .history-live .history-row,
.page.active-page .legal-links a {
  animation: premiumBlockIn 560ms var(--premium-ease) both !important;
}

.page.active-page :is(.performance-card,.content-card,.reel-row,.comparison-item,.highlight,.history-row,.legal-links a):nth-child(2) { animation-delay: 55ms !important; }
.page.active-page :is(.performance-card,.content-card,.reel-row,.comparison-item,.highlight,.history-row,.legal-links a):nth-child(3) { animation-delay: 110ms !important; }
.page.active-page :is(.performance-card,.content-card,.reel-row,.comparison-item,.highlight,.history-row,.legal-links a):nth-child(4) { animation-delay: 165ms !important; }
.page.active-page :is(.performance-card,.content-card,.reel-row,.comparison-item,.highlight,.history-row,.legal-links a):nth-child(5) { animation-delay: 220ms !important; }

@media (max-width:900px) {
  html body #mainApp .performance-grid,
  html body #mainApp .pro-v5-insights,
  html body #mainApp .pro-v5-grid { gap: 10px !important; }
}

@media (max-width:700px) {
  html body #mainApp .performance-grid,
  html body #mainApp .pro-v5-insights,
  html body #mainApp .pro-v5-grid { gap: 8px !important; padding: 0 !important; }
  html body #mainApp .reel-row { padding: 10px !important; }
}

/* V29 — Painel Profissional estável
   O hover nunca move a grade nem altera o espaço ocupado pelos cards vizinhos. */
@keyframes premiumProfessionalFade {
  0% { opacity: 0; filter: blur(4px); }
  100% { opacity: 1; filter: blur(0); }
}

html body #mainApp .pro-v5-insights,
html body #mainApp .pro-v5-grid,
html body #mainApp .pro-v5-mainmetric,
html body #mainApp .pro-v5-side-metrics > div,
html body #mainApp .pro-v5-evolution,
html body #mainApp .pro-v5-growth {
  transform: none !important;
}

.page.active-page .pro-v5-mainmetric,
.page.active-page .pro-v5-side-metrics > div,
.page.active-page .pro-v5-evolution,
.page.active-page .pro-v5-growth {
  animation: premiumProfessionalFade 520ms var(--premium-ease) both !important;
}
.page.active-page .pro-v5-side-metrics > div:nth-child(1) { animation-delay: 55ms !important; }
.page.active-page .pro-v5-side-metrics > div:nth-child(2) { animation-delay: 110ms !important; }
.page.active-page .pro-v5-side-metrics > div:nth-child(3) { animation-delay: 165ms !important; }
.page.active-page .pro-v5-evolution { animation-delay: 110ms !important; }
.page.active-page .pro-v5-growth { animation-delay: 165ms !important; }

html body #mainApp .pro-v5-insights,
html body #mainApp .pro-v5-grid {
  transition: none !important;
  will-change: auto !important;
}

html body #mainApp .pro-v5-mainmetric,
html body #mainApp .pro-v5-side-metrics > div,
html body #mainApp .pro-v5-evolution,
html body #mainApp .pro-v5-growth {
  will-change: auto !important;
  transition:
    transform 340ms var(--premium-ease),
    border-color 180ms ease,
    box-shadow 240ms ease,
    background-color 180ms ease !important;
}

@media (hover:hover) and (pointer:fine) {
  html body #mainApp .pro-v5-insights:hover,
  html body #mainApp .pro-v5-grid:hover,
  html body #mainApp .pro-v5-mainmetric:hover,
  html body #mainApp .pro-v5-side-metrics > div:hover,
  html body #mainApp .pro-v5-evolution:hover,
  html body #mainApp .pro-v5-growth:hover {
    transform: translate3d(0,-5px,0) !important;
  }

  html body #mainApp .pro-v5-mainmetric:hover,
  html body #mainApp .pro-v5-side-metrics > div:hover,
  html body #mainApp .pro-v5-evolution:hover,
  html body #mainApp .pro-v5-growth:hover {
    border-color: rgba(255,38,61,.34) !important;
    box-shadow:
      0 18px 42px rgba(0,0,0,.28),
      0 0 0 1px rgba(255,38,61,.04),
      0 0 24px rgba(255,38,61,.075) !important;
  }
}

html body #mainApp .pro-v5-mainmetric:active,
html body #mainApp .pro-v5-side-metrics > div:active,
html body #mainApp .pro-v5-evolution:active,
html body #mainApp .pro-v5-growth:active {
  transform: translate3d(0,-1px,0) !important;
  transition-duration: 90ms !important;
}

/* V31 — molduras externas dos gráficos totalmente quadradas
   Nenhuma regra interna do SVG ou da área de plotagem é alterada. */
html body #mainApp .chart-panel,
html body #mainApp #profissional .pro-v5-evolution,
html body #mainApp #profissional .pro-v5-growth,
html body #mainApp #profissional .pro-v5-grid {
  border-radius: 0 !important;
  clip-path: none !important;
}

html body #mainApp .chart-panel::before,
html body #mainApp .chart-panel::after,
html body #mainApp #profissional .pro-v5-evolution::before,
html body #mainApp #profissional .pro-v5-evolution::after,
html body #mainApp #profissional .pro-v5-growth::before,
html body #mainApp #profissional .pro-v5-growth::after {
  border-radius: 0 !important;
}

/* V32 — rodapés redundantes removidos de dentro do painel
   A identidade empresarial permanece no HTML e continua visível antes do login. */
html body #mainApp .sidebar-bottom {
  display: none !important;
}

html body.panel-open .public-business-identity {
  display: none !important;
}

html body.panel-open #mainApp,
html body.panel-open #mainApp .main {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* V33 — Conteúdos quadrados, íntegros e sem recortes */
html body #mainApp #conteudos .content-grid {
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr)) !important;
  align-items: start !important;
}

html body #mainApp #conteudos .content-card {
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
}

/* A mídia ocupa um quadrado e usa contain: a imagem inteira sempre aparece. */
html body #mainApp #conteudos .content-cover,
html body #mainApp #conteudos .content-cover.has-image {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

html body #mainApp #conteudos .content-body {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html body #mainApp #conteudos .content-body h3 {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

html body #mainApp #conteudos .content-stats {
  width: 100% !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  align-items: start !important;
}

html body #mainApp #conteudos .content-stats div,
html body #mainApp #conteudos .content-stats span,
html body #mainApp #conteudos .content-stats strong {
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

@media (max-width:900px) {
  html body #mainApp #conteudos .content-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:600px) {
  html body #mainApp #conteudos .content-grid {
    grid-template-columns: 1fr !important;
  }
}

/* V34 — acesso premium, centralizado e profissional */
html body #authShell {
  padding: 28px !important;
}

html body #authShell .auth-card {
  width: min(500px,100%) !important;
  padding: 42px 42px 34px !important;
  border: 1px solid rgba(255,38,61,.32) !important;
  background: linear-gradient(155deg,rgba(17,11,12,.97),rgba(7,7,8,.985)) !important;
  box-shadow:
    0 38px 110px rgba(0,0,0,.68),
    0 0 0 1px rgba(255,255,255,.012) inset,
    0 0 54px rgba(255,20,40,.065) !important;
  overflow: hidden !important;
}

html body #authShell .auth-card::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 13% auto 13% !important;
  width: auto !important;
  height: 1px !important;
  background: linear-gradient(90deg,transparent,#ff253b,transparent) !important;
  box-shadow: 0 0 10px rgba(255,37,59,.38),0 0 24px rgba(255,37,59,.14) !important;
}

html body #authShell .auth-brand {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 0 0 30px !important;
  text-align: center !important;
}

html body #authShell .auth-brand .site-logo {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  border: 1px solid rgba(255,38,61,.4) !important;
  background: rgba(255,25,45,.035) !important;
  box-shadow:
    0 0 0 7px rgba(255,25,45,.025),
    0 0 30px rgba(255,20,40,.13),
    0 18px 35px rgba(0,0,0,.4) !important;
  overflow: hidden !important;
  animation: premiumAuthLogo 3.8s ease-in-out infinite !important;
}

html body #authShell .auth-brand .site-logo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

@keyframes premiumAuthLogo {
  0%,100% { box-shadow:0 0 0 7px rgba(255,25,45,.025),0 0 24px rgba(255,20,40,.1),0 18px 35px rgba(0,0,0,.4); }
  50% { box-shadow:0 0 0 9px rgba(255,25,45,.04),0 0 38px rgba(255,20,40,.18),0 18px 35px rgba(0,0,0,.4); }
}

html body #authShell .auth-brand > div:last-child {
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
}

html body #authShell .auth-brand strong {
  font-size: 21px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: .12em !important;
}

html body #authShell .auth-brand span {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
  letter-spacing: .08em !important;
}

html body #authShell .auth-copy {
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 24px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,38,61,.12) !important;
  text-align: center !important;
}

html body #authShell .auth-kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 25px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(255,38,61,.2) !important;
  background: rgba(255,38,61,.035) !important;
  font-size: 8px !important;
  letter-spacing: .2em !important;
}

html body #authShell .auth-copy h1 {
  margin: 14px 0 10px !important;
  font-size: clamp(25px,4vw,31px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}

html body #authShell .auth-copy p {
  max-width: 380px !important;
  margin: 0 auto !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
}

html body #authShell .auth-primary {
  position: relative !important;
  z-index: 2 !important;
  min-height: 52px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,80,90,.75) !important;
  font-size: 11px !important;
  letter-spacing: .015em !important;
  box-shadow: 0 14px 34px rgba(175,0,15,.26),inset 0 1px rgba(255,255,255,.12) !important;
}

@media (hover:hover) and (pointer:fine) {
  html body #authShell .auth-primary:hover {
    transform: translate3d(0,-3px,0) !important;
    box-shadow:0 20px 42px rgba(175,0,15,.34),0 0 28px rgba(255,20,40,.16),inset 0 1px rgba(255,255,255,.15) !important;
  }
}

html body #authShell .auth-security {
  max-width: 360px !important;
  margin: 16px auto 0 !important;
  line-height: 1.6 !important;
}

html body #authShell .auth-message {
  min-height: 0 !important;
  margin-top: 12px !important;
}

html body #authShell .auth-message:empty {
  display: none !important;
}

html body #authShell .auth-legal {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 22px !important;
  padding-top: 20px !important;
}

@media (max-width:600px) {
  html body #authShell { padding: 14px !important; align-items: center !important; }
  html body #authShell .auth-card { padding: 28px 20px 24px !important; }
  html body #authShell .auth-brand { margin-bottom: 22px !important; gap: 11px !important; }
  html body #authShell .auth-brand .site-logo { width: 64px !important; height: 64px !important; min-width: 64px !important; }
  html body #authShell .auth-brand strong { font-size: 18px !important; }
  html body #authShell .auth-copy { padding-top: 20px !important; }
  html body #authShell .auth-copy h1 { font-size: 25px !important; }
  html body #authShell .auth-primary { min-height: 49px !important; }
}

/* Reflexo interno somente nas quatro métricas, sem movimentar o card. */
html body #mainApp .pro-v5-mainmetric::before,
html body #mainApp .pro-v5-side-metrics > div::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: -35% auto -35% -58% !important;
  width: 34% !important;
  height: auto !important;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent) !important;
  opacity: 0 !important;
  transform: skewX(-18deg) translate3d(0,0,0) !important;
  transition: transform 720ms var(--premium-ease), opacity 180ms ease !important;
  pointer-events: none !important;
}

html body #mainApp .pro-v5-mainmetric > *,
html body #mainApp .pro-v5-side-metrics > div > * {
  position: relative;
  z-index: 2;
}

@media (hover:hover) and (pointer:fine) {
  html body #mainApp .pro-v5-mainmetric:hover::before,
  html body #mainApp .pro-v5-side-metrics > div:hover::before {
    opacity: 1 !important;
    transform: skewX(-18deg) translate3d(485%,0,0) !important;
  }
}

/* V37 — ação única de desconexão centralizada */
html body #mainApp .account-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--v10-line) !important;
}

@media (max-width:600px) {
  html body #mainApp .account-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  html body #mainApp .danger-button {
    width: 100% !important;
  }
}

/* V38 — progresso visível apenas na atualização manual */
html body #liveStatus.manual-sync {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  height: 100% !important;
  padding: 24px !important;
  border: 0 !important;
  background: rgba(3,3,3,.78) !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
}

html body #liveStatus.manual-sync::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(360px,calc(100% - 36px)) !important;
  height: 104px !important;
  transform: translate(-50%,-50%) !important;
  border: 1px solid rgba(255,38,61,.38) !important;
  background: linear-gradient(145deg,rgba(18,10,11,.98),rgba(7,7,8,.99)) !important;
  box-shadow: 0 26px 75px rgba(0,0,0,.58),0 0 28px rgba(255,38,61,.075) !important;
}

html body #liveStatus.manual-sync > span,
html body #liveStatus.manual-sync > strong {
  position: relative !important;
  z-index: 2 !important;
}

html body #liveStatus.manual-sync > span {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(255,255,255,.14) !important;
  border-top-color: var(--v10-red) !important;
  background: transparent !important;
  box-shadow: 0 0 12px rgba(255,38,61,.18) !important;
  animation: spin .72s linear infinite !important;
}

html body #liveStatus.manual-sync > strong {
  color: #f8edef !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .015em !important;
}

html body #mainApp #syncNow:disabled {
  cursor: wait !important;
  opacity: .72 !important;
}

/* V40 — correção exclusivamente de gesto no Android.
   Não altera dimensões, espaçamentos, grades ou aparência. */
@media (max-width:900px) and (pointer:coarse) {
  html,
  body,
  #mainApp,
  #mainApp .main,
  #mainApp .page,
  #mainApp .mobile-nav,
  #mainApp .mobile-nav-item {
    touch-action: pan-y !important;
  }

  #mainApp #profissional,
  #mainApp #profissional *,
  #mainApp #profissional *::before,
  #mainApp #profissional *::after,
  #mainApp #legal,
  #mainApp #legal *,
  #mainApp #legal *::before,
  #mainApp #legal *::after {
    touch-action: pan-y !important;
  }

  html,
  body {
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Todas as seções usam o mesmo scroll raiz do Dashboard. `clip`, ao
     contrário de `hidden`, não cria um segundo contêiner vertical. */
  #mainApp .main,
  #mainApp .page,
  #mainApp #dashboard,
  #mainApp #conteudos,
  #mainApp #desempenho,
  #mainApp #profissional,
  #mainApp #historico,
  #mainApp #conta,
  #mainApp #legal {
    overflow-x: clip !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
  }

  #mainApp .page *,
  #mainApp .page *::before,
  #mainApp .page *::after {
    touch-action: pan-y !important;
  }

  /* O Android simula hover no primeiro toque. Impedir deslocamentos enquanto
     o dedo rola evita que cards capturem ou interrompam o gesto. */
  #mainApp .page *:hover,
  #mainApp .page *:active {
    transform: none !important;
  }
}

/* V43 — comparativo mobile sem rolagem lateral.
   Cada conteúdo vira um cartão independente e as métricas permanecem
   totalmente visíveis dentro de pequenos blocos quadrados. */
@media (max-width:700px) {
  html body #mainApp #desempenho .comparison-list {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  html body #mainApp #desempenho .comparison-item {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: linear-gradient(145deg,rgba(17,12,13,.96),rgba(7,7,8,.98)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body #mainApp #desempenho .comparison-item > strong {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    padding: 2px 2px 11px !important;
    border-bottom: 1px solid rgba(255,38,61,.28) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body #mainApp #desempenho .comparison-item > span {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 9px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    background: rgba(255,255,255,.025) !important;
    box-sizing: border-box !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body #mainApp #desempenho .comparison-item > span:last-child {
    grid-column: 1 / -1 !important;
    min-height: 44px !important;
  }
}