:root{
  --bg:#0b0d14;
  --bg-2:#0d1019;
  --panel:#11141e;
  --panel-2:#141824;
  --border:rgba(255,255,255,.08);

  --text:#f8fafc;
  --muted:#8fa3bf;
  --muted-2:#617592;

  --gold:#67e8f9;
  --gold-soft:rgba(34,211,238,.14);

  --instagram:#f472b6;
  --instagram-soft:rgba(244,114,182,.14);

  --facebook:#60a5fa;
  --facebook-soft:rgba(96,165,250,.14);

  --positive:#43d6a3;
  --warning:#f59e0b;
  --danger:#ff7b8a;

  --radius:20px;
  --radius-sm:13px;

  --shadow:0 16px 45px rgba(0,0,0,.22);
}


*{
  box-sizing:border-box;
}


html{
  min-height:100%;
  background:var(--bg);
}


body{
  margin:0;

  min-height:100vh;

  font-family:
    "Plus Jakarta Sans",
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:var(--text);

  background:
    radial-gradient(
      circle at 5% 0%,
      rgba(81,126,255,.10),
      transparent 25%
    ),
    radial-gradient(
      circle at 95% 10%,
      rgba(34,211,238,.07),
      transparent 23%
    ),
    var(--bg);
}



/* ============================================================
   BACKGROUND ESTÁVEL ENTRE VISTAS
   O gradiente fica preso ao viewport e deixa de variar
   com a altura total da página.
============================================================ */

body{
  background-attachment:fixed;
  background-size:100vw 100vh;
  background-repeat:no-repeat;
}



button,
input,
select{
  font:inherit;
}


button{
  cursor:pointer;
}


.hidden{
  display:none !important;
}


/* ============================================================
   LOADING
============================================================ */

.loading-screen,
.error-screen{
  position:fixed;
  inset:0;
  z-index:9999;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:24px;

  background:var(--bg);
}


.loading-logo,
.brand-mark{
  display:flex;
  align-items:center;
  justify-content:center;

  color:#0b0d14;

  font-weight:900;

  background:
    linear-gradient(
      135deg,
      #fff0b0,
      var(--gold)
    );

  box-shadow:
    0 0 35px rgba(34,211,238,.18);
}


.loading-logo{
  width:68px;
  height:68px;

  border-radius:22px;

  font-size:24px;
}


.loading-title{
  margin-top:22px;

  font-size:24px;
  font-weight:850;
}


.loading-text{
  margin-top:11px;

  color:var(--muted);
  font-size:13px;
}


.loading-bar{
  width:220px;
  height:4px;

  margin-top:22px;

  overflow:hidden;

  border-radius:999px;

  background:rgba(255,255,255,.07);
}


.loading-bar span{
  display:block;

  width:40%;
  height:100%;

  border-radius:inherit;

  background:var(--gold);

  animation:loading 1.25s ease-in-out infinite;
}


@keyframes loading{
  0%{
    transform:translateX(-100%);
  }

  100%{
    transform:translateX(350%);
  }
}


/* ============================================================
   ERROR
============================================================ */

.error-card{
  width:min(460px,100%);

  padding:34px;

  text-align:center;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--panel);

  box-shadow:var(--shadow);
}


.error-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:54px;
  height:54px;

  margin:0 auto 18px;

  border-radius:50%;

  color:#fff;

  font-size:25px;
  font-weight:900;

  background:var(--danger);
}


.error-card h2{
  margin:0 0 10px;

  font-size:22px;
}


.error-card p{
  margin:0 0 22px;

  color:var(--muted);

  line-height:1.5;
}


.error-card button{
  padding:11px 18px;

  border:0;
  border-radius:12px;

  font-weight:800;

  color:#0b0d14;
  background:var(--gold);
}


/* ============================================================
   TOPBAR
============================================================ */

.topbar{
  position:sticky;
  top:0;
  z-index:50;

  display:flex;
  align-items:center;
  justify-content:space-between;

  min-height:82px;

  padding:
    14px
    max(24px,calc((100vw - 1440px) / 2));

  border-bottom:1px solid var(--border);

  background:rgba(11,13,20,.92);

  backdrop-filter:blur(18px);
}


.brand{
  display:flex;
  align-items:center;
  gap:14px;
}


.brand-mark{
  width:46px;
  height:46px;

  flex:0 0 auto;

  border-radius:15px;

  font-size:17px;
}


.brand-kicker{
  margin-bottom:2px;

  color:var(--gold);

  font-size:10px;
  font-weight:850;
  letter-spacing:.16em;
}


.brand h1{
  margin:0;

  font-size:21px;
  letter-spacing:-.025em;
}


.topbar-status{
  display:flex;
  align-items:center;
  gap:12px;
}


.quality-badge,
.last-data{
  display:flex;
  align-items:center;
  gap:8px;

  min-height:38px;

  padding:0 13px;

  border:1px solid var(--border);
  border-radius:999px;

  background:rgba(255,255,255,.025);

  font-size:12px;
}


.quality-badge{
  color:#c8f8e8;
}


.status-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--positive);

  box-shadow:
    0 0 0 4px rgba(67,214,163,.10);
}


.quality-badge.bad{
  color:#ffd5da;
}


.quality-badge.bad .status-dot{
  background:var(--danger);
}


.last-data span{
  color:var(--muted);
}


.last-data strong{
  color:#fff;
}


/* ============================================================
   SHELL
============================================================ */

.shell{
  width:min(1440px,100%);

  margin:0 auto;

  padding:24px;
}


/* ============================================================
   TABS
============================================================ */

.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:18px;
}


.manage-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:42px;

  padding:0 15px;

  border:1px solid rgba(34,211,238,.22);
  border-radius:12px;

  color:var(--gold);

  font-size:11px;
  font-weight:850;

  text-decoration:none;

  background:rgba(34,211,238,.06);
}


.manage-link:hover{
  background:rgba(34,211,238,.12);
}


.tabs{
  display:inline-flex;

  gap:5px;

  padding:5px;

  border:1px solid var(--border);
  border-radius:15px;

  background:rgba(255,255,255,.025);
}


.tab-button{
  min-height:38px;

  padding:0 15px;

  border:0;
  border-radius:11px;

  color:var(--muted);

  font-size:13px;
  font-weight:750;

  background:transparent;
}


.tab-button:hover{
  color:#fff;

  background:rgba(255,255,255,.04);
}


.tab-button.active{
  color:#0b0d14;

  background:var(--gold);
}


/* ============================================================
   FILTERS
============================================================ */

.filters-card{
  margin-bottom:20px;

  padding:18px;

  border:1px solid var(--border);
  border-radius:var(--radius);

  background:var(--panel);

  box-shadow:var(--shadow);
}


.filters-title{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;

  margin-bottom:16px;
}


.filters-title strong{
  display:block;

  margin-top:3px;

  font-size:15px;
}


.section-kicker{
  display:block;

  color:var(--gold);

  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}


.reset-button{
  padding:8px 11px;

  border:1px solid var(--border);
  border-radius:10px;

  color:var(--muted);

  font-size:11px;
  font-weight:750;

  background:transparent;
}


.reset-button:hover{
  color:#fff;
  border-color:rgba(255,255,255,.16);
}


.filters-grid{
  display:grid;

  grid-template-columns:
    repeat(8,minmax(0,1fr));

  gap:11px;
}


.filters-grid label{
  display:block;
}


.filters-grid label > span{
  display:block;

  margin-bottom:6px;

  color:var(--muted);

  font-size:10px;
  font-weight:750;
}


.filters-grid input,
.filters-grid select{
  width:100%;
  height:42px;

  padding:0 11px;

  border:1px solid var(--border);
  border-radius:11px;

  outline:none;

  color:#edf4ff;
  background:#0b1930;
}


.filters-grid input:focus,
.filters-grid select:focus{
  border-color:rgba(34,211,238,.46);
}


/* ============================================================
   PANELS
============================================================ */

.tab-panel{
  display:none;
}


.tab-panel.active{
  display:block;
}


.panel{
  min-width:0;

  padding:20px;

  border:1px solid var(--border);
  border-radius:var(--radius);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018),
      transparent
    ),
    var(--panel);

  box-shadow:var(--shadow);
}


.panel-wide{
  grid-column:span 2;
}


.panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:15px;

  margin-bottom:18px;
}


.panel-header h2{
  margin:4px 0 0;

  font-size:17px;
  letter-spacing:-.02em;
}


.panel-note{
  color:var(--muted);

  font-size:11px;
}


.dashboard-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:16px;
}


/* ============================================================
   KPI
============================================================ */

.kpi-grid{
  display:grid;

  grid-template-columns:
    repeat(6,minmax(0,1fr));

  gap:12px;

  margin-bottom:16px;
}


.kpi{
  position:relative;

  min-height:128px;

  padding:17px;

  overflow:hidden;

  border:1px solid var(--border);
  border-radius:18px;

  background:var(--panel);

  box-shadow:var(--shadow);
}


.kpi::after{
  content:"";

  position:absolute;
  right:-35px;
  top:-45px;

  width:105px;
  height:105px;

  border-radius:50%;

  background:rgba(34,211,238,.04);
}


.kpi-label{
  position:relative;
  z-index:1;

  color:var(--muted);

  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}


.kpi-value{
  position:relative;
  z-index:1;

  margin-top:9px;

  font-size:29px;
  font-weight:900;
  letter-spacing:-.04em;
}


.kpi-sub{
  position:relative;
  z-index:1;

  margin-top:7px;

  color:var(--muted-2);

  font-size:10px;
  line-height:1.4;
}


.kpi.gold{
  border-color:rgba(34,211,238,.18);
}


.kpi.instagram{
  border-color:rgba(244,114,182,.18);
}


.kpi.facebook{
  border-color:rgba(96,165,250,.18);
}


/* ============================================================
   CHART
============================================================ */

.chart-wrap{
  position:relative;

  height:330px;
}


.chart-wrap canvas{
  display:block;

  width:100%;
  height:100%;
}


.chart-legend{
  display:flex;
  flex-wrap:wrap;
  gap:13px;

  font-size:11px;
  color:var(--muted);
}


.legend-item{
  display:flex;
  align-items:center;
  gap:6px;
}


.legend-dot{
  width:8px;
  height:8px;
  border-radius:50%;
}


.legend-dot.instagram{
  background:var(--instagram);
}


.legend-dot.facebook{
  background:var(--facebook);
}


/* ============================================================
   RETENTION
============================================================ */

.retention-group + .retention-group{
  margin-top:22px;
}


.retention-group-title{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:12px;

  font-size:12px;
  font-weight:850;
}


.platform-pill{
  display:inline-flex;
  align-items:center;

  min-height:25px;

  padding:0 9px;

  border-radius:999px;

  font-size:10px;
  font-weight:800;
}


.platform-pill.instagram{
  color:#ffd6f5;
  background:var(--instagram-soft);
}


.platform-pill.facebook{
  color:#d7e9ff;
  background:var(--facebook-soft);
}


.retention-row{
  display:grid;

  grid-template-columns:
    30px 1fr 62px;

  align-items:center;

  gap:9px;

  margin-top:9px;
}


.retention-label{
  color:var(--muted);
  font-size:10px;
  font-weight:850;
}


.retention-track{
  height:25px;

  overflow:hidden;

  border-radius:8px;

  background:rgba(255,255,255,.035);
}


.retention-fill{
  height:100%;

  min-width:2px;

  border-radius:inherit;
}


.retention-fill.instagram{
  background:
    linear-gradient(
      90deg,
      rgba(244,114,182,.55),
      var(--instagram)
    );
}


.retention-fill.facebook{
  background:
    linear-gradient(
      90deg,
      rgba(96,165,250,.50),
      var(--facebook)
    );
}


.retention-value{
  text-align:right;

  font-size:10px;
  font-weight:800;
}


.retention-value span{
  display:block;

  color:var(--muted-2);

  font-size:9px;
  font-weight:650;
}


/* ============================================================
   PLATFORM COMPARISON
============================================================ */

.platform-card{
  padding:15px;

  border:1px solid var(--border);
  border-radius:15px;

  background:rgba(255,255,255,.018);
}


.platform-card + .platform-card{
  margin-top:11px;
}


.platform-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;
}


.platform-card-total{
  margin-top:11px;

  font-size:27px;
  font-weight:900;
  letter-spacing:-.035em;
}


.platform-stats{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:8px;

  margin-top:13px;
}


.platform-stat{
  padding-top:10px;

  border-top:1px solid var(--border);
}


.platform-stat span{
  display:block;

  color:var(--muted-2);

  font-size:9px;
}


.platform-stat strong{
  display:block;

  margin-top:4px;

  font-size:12px;
}


/* ============================================================
   RANKINGS
============================================================ */

.ranking-item{
  display:grid;

  grid-template-columns:
    28px 1fr auto;

  align-items:center;

  gap:10px;

  min-height:47px;

  border-bottom:1px solid rgba(255,255,255,.055);
}


.ranking-item:last-child{
  border-bottom:0;
}


.ranking-position{
  color:var(--gold);

  font-size:11px;
  font-weight:900;
}


.ranking-main{
  min-width:0;
}


.ranking-title{
  overflow:hidden;

  color:#e8f0fb;

  font-size:11px;
  font-weight:750;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.ranking-sub{
  margin-top:3px;

  color:var(--muted-2);

  font-size:9px;
}


.ranking-value{
  text-align:right;

  font-size:12px;
  font-weight:850;
}


/* ============================================================
   TABLES
============================================================ */

.table-scroll{
  width:100%;

  overflow:auto;

  border:1px solid var(--border);
  border-radius:14px;
}


table{
  width:100%;

  border-collapse:collapse;

  min-width:900px;
}


th,
td{
  padding:12px 13px;

  border-bottom:1px solid rgba(255,255,255,.055);

  text-align:left;

  white-space:nowrap;
}


th{
  position:sticky;
  top:0;
  z-index:2;

  color:var(--muted);

  background:#0e1d36;

  font-size:9px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase;
}


td{
  color:#dbe7f7;

  font-size:11px;
}


tbody tr:hover{
  background:rgba(255,255,255,.018);
}


tbody tr:last-child td{
  border-bottom:0;
}


.table-theme{
  display:block;

  max-width:360px;

  overflow:hidden;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.metric-up{
  color:var(--positive);
}


.metric-down{
  color:var(--danger);
}


.metric-neutral{
  color:var(--muted);
}


/* ============================================================
   EMPTY
============================================================ */

.empty-state{
  padding:30px 10px;

  text-align:center;

  color:var(--muted);

  font-size:12px;
}


/* ============================================================
   FOOTER
============================================================ */

.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:25px 2px 8px;

  color:var(--muted-2);

  font-size:10px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width:1180px){

  .filters-grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr));
  }

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

}


@media(max-width:820px){

  .topbar{
    position:relative;

    align-items:flex-start;

    padding:14px 16px;
  }

  .topbar-status{
    flex-direction:column;
    align-items:flex-end;

    gap:7px;
  }

  .quality-badge,
  .last-data{
    min-height:31px;

    padding:0 10px;

    font-size:10px;
  }

  .shell{
    padding:16px;
  }

  .tabs{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    width:100%;
  }

  .tab-button{
    padding:0 7px;
    font-size:11px;
  }

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

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

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

  .panel-wide{
    grid-column:auto;
  }

  .chart-wrap{
    height:275px;
  }

}


@media(max-width:520px){

  .brand-mark{
    width:41px;
    height:41px;

    border-radius:13px;
  }

  .brand h1{
    font-size:17px;
  }

  .brand-kicker{
    font-size:8px;
  }

  .topbar-status{
    display:none;
  }

  .filters-title{
    align-items:flex-start;
  }

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

  .kpi{
    min-height:113px;
    padding:14px;
  }

  .kpi-value{
    font-size:24px;
  }

  .panel{
    padding:15px;
  }

  .panel-header h2{
    font-size:15px;
  }

  .platform-stats{
    grid-template-columns:1fr;
  }

  .footer{
    flex-direction:column;
    align-items:flex-start;
  }

}


/* ============================================================
   V9 — FILTROS / GESTÃO / CONSISTÊNCIA
============================================================ */

.filter-info{
  margin-top:13px;

  color:var(--muted-2);

  font-size:9px;
  line-height:1.5;
}


.period-status{
  display:inline-flex;
  align-items:center;

  min-height:23px;

  padding:0 8px;

  border-radius:999px;

  font-size:8px;
  font-weight:850;
}


.period-status.complete{
  color:#c9f8e7;

  background:rgba(67,214,163,.09);
}


.period-status.partial{
  color:#ffe5ad;

  background:rgba(245,158,11,.10);
}


.period-status.filtered{
  color:#d9e5f5;

  background:rgba(255,255,255,.055);
}


@media(max-width:820px){

  .toolbar{
    align-items:stretch;
    flex-direction:column;
  }

  .manage-link{
    width:100%;
  }

}


/* ============================================================
   V9.2 — CONCEITO DE PERÍODO
============================================================ */

.filter-info{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  margin-top:14px;
  padding-top:13px;

  border-top:
    1px solid rgba(255,255,255,.055);
}


.filter-concept{
  display:flex;
  align-items:flex-start;

  gap:9px;

  max-width:720px;
}


.filter-concept strong{
  flex:0 0 auto;

  color:#67e8f9;

  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}


.filter-concept span{
  color:#7186a4;

  font-size:9px;
  line-height:1.55;
}


.filter-period-summary{
  flex:0 0 auto;

  padding:7px 10px;

  border:
    1px solid rgba(34,211,238,.16);

  border-radius:9px;

  color:#dbe6f5;

  font-size:9px;
  font-weight:750;

  background:
    rgba(34,211,238,.045);
}


@media(max-width:900px){

  .filter-info{
    align-items:stretch;
    flex-direction:column;
  }


  .filter-period-summary{
    width:100%;
  }

}


/* ============================================================
   V9.3 — HEADER / ESTADO / INTERVALO BD
============================================================ */

.topbar-right{
  display:flex;
  align-items:center;

  gap:24px;

  margin-left:auto;
}


.topbar-right .topbar-status{
  display:flex;
  align-items:center;

  gap:10px;

  margin:0;
}


.data-range{
  white-space:nowrap;
}


.data-range span{
  color:var(--muted);
}


.data-range strong{
  color:#fff;
}


@media(max-width:1100px){

  .topbar-right{
    gap:14px;
  }


  .quality-badge,
  .data-range{
    font-size:10px;
  }

}


@media(max-width:820px){

  .topbar-right{
    margin-left:auto;
  }

}


@media(max-width:600px){

  .topbar-right{
    gap:0;
  }


  .topbar-right .topbar-status{
    display:none;
  }

}


/* ============================================================
   KPI AUDIÊNCIA V1
============================================================ */

.audience-kpi-section{
  margin-top:22px;
  margin-bottom:22px;
}


.audience-kpi-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:16px;

  margin-bottom:12px;
}


.audience-kpi-heading h2{
  margin:4px 0 0;

  font-size:17px;
  letter-spacing:-.02em;
}


.audience-kpi-note{
  color:var(--muted-2);

  font-size:9px;
}


.audience-kpi-grid{
  margin-bottom:0;
}


.audience-kpi-grid .kpi{
  min-height:120px;
}


.audience-positive{
  color:var(--positive);
}


.audience-negative{
  color:var(--danger);
}


.audience-neutral{
  color:var(--muted);
}


@media(max-width:820px){

  .audience-kpi-heading{
    align-items:flex-start;
    flex-direction:column;
  }

}


.audience-growth-positive .kpi-value{
  color:var(--positive);
}


.audience-growth-negative .kpi-value{
  color:var(--danger);
}



/* ============================================================
   KPI AUDIÊNCIA V2
============================================================ */

.audience-kpi-grid{
  grid-template-columns:
    repeat(5,minmax(0,1fr));
}


@media(max-width:1180px){

  .audience-kpi-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


@media(max-width:820px){

  .audience-kpi-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:520px){

  .audience-kpi-grid{
    grid-template-columns:1fr;
  }

}


/* ============================================================
   FILTROS RECOLHÍVEIS V1
============================================================ */

.filters-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}


.filters-collapse-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;

  margin-left:auto;
}


.filters-summary{
  max-width:620px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--muted);

  font-size:10px;
}


.filters-toggle{
  min-height:36px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  padding:0 13px;

  border:1px solid var(--border);
  border-radius:10px;

  color:var(--text);

  background:rgba(255,255,255,.025);

  font-size:10px;
  font-weight:800;
}


.filters-toggle:hover{
  background:rgba(255,255,255,.055);
}


.filters-toggle-icon{
  font-size:11px;
  transition:transform .18s ease;
}


.filters-toggle[aria-expanded="true"]
.filters-toggle-icon{
  transform:rotate(180deg);
}


.filters-body{
  overflow:hidden;

  max-height:1000px;
  opacity:1;

  margin-top:18px;

  transition:
    max-height .22s ease,
    opacity .16s ease,
    margin-top .22s ease;
}


.filters-body.collapsed{
  max-height:0;
  opacity:0;

  margin-top:0;

  pointer-events:none;
}


@media(max-width:900px){

  .filters-title{
    flex-direction:column;
  }


  .filters-collapse-actions{
    width:100%;

    justify-content:space-between;

    margin-left:0;
  }


  .filters-summary{
    flex:1 1 auto;
  }

}


@media(max-width:600px){

  .filters-collapse-actions{
    align-items:stretch;
    flex-direction:column;
  }


  .filters-summary{
    max-width:none;

    white-space:normal;
    line-height:1.45;
  }


  .filters-toggle{
    width:100%;
  }

}


/* ============================================================
   FILTROS TOOLBAR V3
============================================================ */

.toolbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:10px;

  margin-left:auto;
}


.filters-toolbar-toggle{
  cursor:pointer;
}


.filters-toolbar-toggle.active{
  color:#0b0d14;

  border-color:var(--gold);

  background:var(--gold);
}


/* O painel inteiro desaparece */

#filters-panel.filters-panel-hidden{
  display:none !important;
}


/* Quando abre, conserva exactamente o card original */

#filters-panel:not(.filters-panel-hidden){
  display:block;
  animation:
    filtersPanelOpenV3 .15s ease;
}


@keyframes filtersPanelOpenV3{

  from{
    opacity:0;
    transform:translateY(-4px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}


/* Elementos antigos deixam de existir visualmente */

.filters-collapse-actions,
.filters-summary,
#filters-toggle{
  display:none !important;
}


@media(max-width:820px){

  .toolbar-actions{
    width:100%;

    display:grid;

    grid-template-columns:
      1fr 1fr;

    margin-left:0;
  }


  .toolbar-actions .manage-link{
    width:100%;
  }

}


@media(max-width:480px){

  .toolbar-actions{
    grid-template-columns:1fr;
  }

}


/* ============================================================
   BRANDING MARIA HELENA V1
============================================================ */


/* ------------------------------------------------------------
   FOTO MARIA HELENA — HEADER
------------------------------------------------------------ */

.brand-mark.brand-mark-photo{
  padding:0;

  overflow:hidden;

  border-radius:14px;

  background:transparent;
}


.brand-mark.brand-mark-photo img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center 24%;
}


/* ------------------------------------------------------------
   LOGO VERMELHO MH — LOGIN / LOADING
------------------------------------------------------------ */

.mh-red-logo{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
}


.login-mark .mh-red-logo, .auth-mark .mh-red-logo, .auth-logo .mh-red-logo, .loading-mark .mh-red-logo, .loading-logo .mh-red-logo, .loader-mark .mh-red-logo, .loader-logo .mh-red-logo, .splash-mark .mh-red-logo, .splash-logo .mh-red-logo {
  width:100%;
  height:100%;

  object-fit:contain;
}


/* Header mobile */

@media(max-width:520px){

  .brand-mark.brand-mark-photo{
    border-radius:12px;
  }

}


/* ============================================================
   LOADER GO-CONTACT STYLE V2
============================================================ */

.loading-screen{
  position:fixed !important;
  inset:0 !important;

  z-index:9999 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:24px !important;

  background:
    radial-gradient(
      circle at 50% 22%,
      rgba(59,130,246,.16),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #071226 0%,
      #0a1327 100%
    ) !important;

  color:#eef5ff !important;
}


.loading-screen.hidden{
  display:none !important;
}


.stories-go-loader-inner{
  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:12px;

  text-align:center;
}


.stories-go-loader-ring{
  position:relative;

  width:146px;
  height:146px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  background:
    rgba(2,6,23,.35);

  box-shadow:
    0 25px 80px rgba(0,0,0,.38),
    0 0 40px rgba(56,189,248,.12);
}


/* anel exterior azul */

.stories-go-loader-ring::before{
  content:"";

  position:absolute;
  inset:0;

  border-radius:999px;

  border:
    4px solid rgba(56,189,248,.16);

  border-top-color:#38bdf8;
  border-right-color:#3b82f6;

  animation:
    storiesGoSpinOuter .9s linear infinite;

  filter:
    drop-shadow(
      0 0 10px rgba(56,189,248,.38)
    );
}


/* segundo anel verde */

.stories-go-loader-ring::after{
  content:"";

  position:absolute;
  inset:13px;

  border-radius:999px;

  border:
    3px solid rgba(34,197,94,.12);

  border-bottom-color:
    rgba(34,197,94,.55);

  border-left-color:
    rgba(34,197,94,.35);

  animation:
    storiesGoSpinInner 1.25s linear infinite reverse;
}


.stories-go-loader-ring img{
  position:relative;

  z-index:2;

  width:94px;
  height:94px;

  display:block;

  object-fit:contain;

  background:transparent;

  border:0;

  box-shadow:none;

  filter:none;
}


.stories-go-loader-title{
  margin-top:8px;

  color:#eef5ff;

  font-size:22px;
  font-weight:850;

  letter-spacing:.01em;
}


.stories-go-loader-subtitle{
  color:#aebfe0;

  font-size:14px;
  font-weight:650;
}


@keyframes storiesGoSpinOuter{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }

}


@keyframes storiesGoSpinInner{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }

}


@media(max-width:720px){


  .stories-go-loader-ring{
    width:132px;
    height:132px;
  }


  .stories-go-loader-ring img{
    width:84px;
    height:84px;
  }


  .stories-go-loader-title{
    font-size:19px;
  }


  .stories-go-loader-subtitle{
    font-size:13px;
  }

}

/* ============================================================
   DASHBOARD STORYS — HEADER MOBILE COM PASSWORD
   ============================================================ */

@media (max-width: 700px){

  /* Header passa a ter duas linhas */
  .topbar,
  .dashboard-header,
  header{
    min-height:auto !important;
  }


  /* Contentor principal do topo */
  .topbar-inner,
  .header-inner,
  .dashboard-header-inner{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    align-items:stretch !important;
  }


  /* Bloco da marca */
  .brand,
  .brand-block,
  .header-brand{
    width:100% !important;
    min-width:0 !important;
  }


  /* zona direita do header */
  .top-actions,
  .header-actions,
  .user-actions{
    width:100% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:10px !important;

    flex-wrap:nowrap !important;
  }


  /* bloco nome + role */
  .user-info,
  .session-user,
  .header-user,
  .user-meta{
    min-width:0 !important;
    flex:1 1 auto !important;
  }


  /* nome */
  .user-name,
  .session-user-name,
  .header-user-name{
    max-width:180px !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    font-size:12px !important;
  }


  /* role */
  .user-role,
  .session-user-role,
  .header-user-role{
    font-size:9px !important;
    line-height:1.2 !important;
  }

}


/* ============================================================
   MOBILE MUITO ESTREITO
   ============================================================ */

@media (max-width: 430px){

  .top-actions,
  .header-actions,
  .user-actions{
    gap:7px !important;
  }


  .user-name,
  .session-user-name,
  .header-user-name{
    max-width:130px !important;
  }

}


/* ============================================================
   RETENTION TOOLTIP V1
============================================================ */

.retention-row-tooltip{
  position:relative;
  cursor:default;
  outline:none;
}


.retention-tooltip{
  position:absolute;

  z-index:40;

  left:50%;
  bottom:calc(100% + 10px);

  min-width:220px;
  max-width:260px;

  padding:12px 13px;

  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;

  background:rgba(11,13,20,.98);

  box-shadow:
    0 12px 30px rgba(0,0,0,.28);

  color:var(--text);

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transform:
    translateX(-50%)
    translateY(4px);

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility .14s ease;
}


.retention-row-tooltip:hover
.retention-tooltip,

.retention-row-tooltip:focus
.retention-tooltip,

.retention-row-tooltip:focus-within
.retention-tooltip{
  opacity:1;
  visibility:visible;

  transform:
    translateX(-50%)
    translateY(0);
}


.retention-tooltip-platform{
  display:flex;
  align-items:center;

  gap:7px;

  margin-bottom:7px;

  font-size:11px;
}


.retention-tooltip-dot{
  width:8px;
  height:8px;

  flex:0 0 8px;

  border-radius:50%;
}


.retention-tooltip-dot.instagram{
  background:var(--instagram);
}


.retention-tooltip-dot.facebook{
  background:var(--facebook);
}


.retention-tooltip-value{
  margin-bottom:6px;

  color:#fff;

  font-size:14px;
  font-weight:850;
}


.retention-tooltip-line{
  margin-top:4px;

  color:var(--muted);

  font-size:10px;
  line-height:1.35;
}


.retention-tooltip-line strong{
  color:#fff;
}


.retention-tooltip-change{
  margin-top:6px;

  font-size:10px;
  font-weight:850;
}


.retention-tooltip-change.positive{
  color:var(--positive);
}


.retention-tooltip-change.negative{
  color:var(--danger);
}


.retention-tooltip-change.neutral{
  color:var(--muted);
}


@media(max-width:700px){

  .retention-tooltip{
    min-width:205px;
    max-width:230px;

    left:50%;
  }

}


body.auth-pending #app {
  visibility:hidden !important;
}


/*
  Mantém o fundo normal da aplicação e evita
  qualquer salto de layout durante o arranque.
*/

body.auth-pending{
  overflow:hidden;
}



/* ============================================================
   D3A — STORIES NO GRÁFICO
============================================================ */

.chart-wrap{
  position:relative;
}


.evolution-media-tooltip{
  position:absolute;
  z-index:30;

  width:
    min(
      350px,
      calc(100% - 16px)
    );

  padding:11px;

  border:
    1px solid
    rgba(34,211,238,.28);

  border-radius:14px;

  background:
    rgba(11,13,20,.97);

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.46);

  backdrop-filter:
    blur(10px);
}


.evolution-media-tooltip-hidden{
  display:none !important;
}


.evolution-media-tooltip-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:14px;

  margin-bottom:9px;
}


.evolution-media-tooltip-head span{
  display:block;

  margin-bottom:3px;

  color:#67e8f9;

  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}


.evolution-media-tooltip-head strong{
  display:block;

  color:#eef5ff;

  font-size:11px;
  font-weight:850;
}


.evolution-media-tooltip-head small{
  color:#7589a7;
  font-size:8px;
}


.evolution-media-tooltip-items{
  display:flex;
  gap:7px;

  overflow-x:auto;

  padding:
    1px
    1px
    4px;
}


.evolution-story-thumb{
  position:relative;

  flex:
    0
    0
    56px;

  width:56px;
  height:100px;

  padding:0;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:8px;

  background:#09172c;

  color:#8092ae;

  cursor:default;
}


.evolution-story-thumb.loaded{
  cursor:zoom-in;

  transition:
    transform .15s ease,
    border-color .15s ease;
}


.evolution-story-thumb.loaded:hover{
  transform:
    translateY(-2px)
    scale(1.04);

  border-color:
    rgba(34,211,238,.65);
}


.evolution-story-thumb img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}


.evolution-story-thumb > span{
  position:absolute;

  left:4px;
  bottom:4px;

  padding:3px 5px;

  border-radius:5px;

  background:
    rgba(3,9,20,.82);

  color:#fff;

  font-size:8px;
  font-weight:900;
}


.evolution-story-thumb.loading,
.evolution-story-thumb.missing{
  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:3px;
}


.evolution-story-thumb strong{
  font-size:10px;
}


.evolution-story-thumb small{
  font-size:6px;
  text-align:center;
}


.evolution-story-thumb.missing{
  opacity:.55;
}


@media(max-width:700px){

  .evolution-media-tooltip{
    width:
      min(
        310px,
        calc(100% - 16px)
      );
  }


  .evolution-media-tooltip-head small{
    display:none;
  }


  .evolution-story-thumb{
    width:52px;
    height:92px;

    flex-basis:52px;
  }

}



/* ============================================================
   D3E — TOOLTIP ÚNICO: MÉTRICAS + STORIES
============================================================ */

.evolution-media-tooltip{
  width:
    min(
      370px,
      calc(100% - 16px)
    );
}


.evolution-unified-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:9px;
}


.evolution-unified-head
.evolution-media-tooltip-date{
  color:#eef5ff;

  font-size:11px;
  font-weight:850;
}


.evolution-unified-metrics{
  padding:
    10px
    11px;

  margin-bottom:11px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:10px;

  background:
    rgba(3,10,24,.34);
}


.evolution-unified-platform{
  display:flex;
  align-items:center;

  gap:7px;

  margin-bottom:6px;
}


.evolution-unified-dot{
  display:block;

  width:8px;
  height:8px;

  flex:none;

  border-radius:50%;
}


.evolution-unified-platform-name{
  color:#f4f7fb;

  font-size:11px;
  font-weight:800;
}


.evolution-unified-value{
  margin-bottom:4px;

  color:#ffffff;

  font-size:14px;
  font-weight:900;
}


.evolution-unified-change{
  font-size:10px;
  font-weight:850;
}


.evolution-unified-change.positive{
  color:#4ade80;
}


.evolution-unified-change.negative{
  color:#fb7185;
}


.evolution-unified-change.neutral{
  color:#94a3b8;
}


.evolution-media-tooltip-head-stories{
  align-items:center;

  margin-bottom:8px;
}


.evolution-media-tooltip-head-stories
span{
  margin:0;

  color:#67e8f9;

  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}


.evolution-media-tooltip-head-stories
small{
  margin-left:auto;
}


@media(max-width:700px){

  .evolution-media-tooltip{
    width:
      min(
        330px,
        calc(100% - 16px)
      );
  }

}