/* PulseBoard Fusion V10 — multicolor analytics system */
:root{
  --an-teal:68,216,203;
  --an-blue:106,171,255;
  --an-violet:181,127,255;
  --an-coral:255,132,150;
  --an-orange:255,168,95;
  --an-green:127,205,123;
  --an-gold:245,199,105;
  --an-red:255,109,109;
  --an-ink:#07141e;
  --an-panel:#0d202b;
  --an-panel-2:#102a37;
  --an-line:rgba(207,239,240,.14);
}

body.theme-posts,
body.theme-analytics{
  --accent:rgb(var(--an-teal));
  --accent-rgb:var(--an-teal);
  color-scheme:dark;
  background:
    radial-gradient(circle at 92% 4%,rgba(var(--an-violet),.13),transparent 28rem),
    radial-gradient(circle at 8% 30%,rgba(var(--an-blue),.1),transparent 32rem),
    linear-gradient(145deg,#06121b,#081b26 48%,#07141d)!important;
}

body[data-page="posts-studio"] #analyticsZone,
body[data-page="analytics"] .analytics-main{
  --tone:var(--an-teal);
}

body[data-page="posts-studio"] #analyticsZone{
  position:relative;
  padding-top:clamp(24px,4vw,54px);
  padding-bottom:clamp(34px,5vw,72px);
  isolation:isolate;
}
body[data-page="posts-studio"] #analyticsZone::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border:1px solid var(--an-line);
  background:
    linear-gradient(120deg,rgba(var(--an-teal),.055),transparent 36%),
    linear-gradient(300deg,rgba(var(--an-blue),.05),transparent 34%),
    rgba(5,17,25,.54);
}

body[data-page="posts-studio"] #analyticsZone .section-head,
body[data-page="analytics"] .analytics-hero{
  border-color:rgba(var(--an-teal),.28)!important;
}
body[data-page="posts-studio"] #analyticsZone .section-head{
  align-items:end;
  gap:clamp(18px,3vw,44px);
  padding:0 0 22px;
  border-top:0!important;
  border-bottom:1px solid rgba(var(--an-teal),.22);
}
body[data-page="posts-studio"] #analyticsZone .section-head h2{
  margin:.45rem 0 0;
  font-size:clamp(2rem,4.5vw,4.8rem);
  line-height:.92;
  letter-spacing:-.055em;
}
body[data-page="posts-studio"] #analyticsZone .section-head>p{
  max-width:42rem;
  margin:0;
  color:rgba(223,239,241,.72);
  line-height:1.65;
}

.analytics-hero,
.post-analytics-hero{
  position:relative;
  overflow:hidden;
  border-radius:18px!important;
  border:1px solid rgba(var(--an-teal),.26)!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(var(--an-violet),.22),transparent 22rem),
    radial-gradient(circle at 68% 100%,rgba(var(--an-blue),.16),transparent 28rem),
    linear-gradient(135deg,rgba(12,43,54,.98),rgba(7,23,34,.98) 58%,rgba(21,20,45,.94))!important;
  box-shadow:0 28px 80px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.analytics-hero::after,
.post-analytics-hero::after{
  content:"";
  position:absolute;
  width:240px;height:240px;
  right:-110px;bottom:-130px;
  border-radius:50%;
  border:36px solid rgba(var(--an-teal),.08);
  box-shadow:0 0 0 34px rgba(var(--an-blue),.035);
  pointer-events:none;
}
.analytics-hero h1,
.post-analytics-hero h2{
  max-width:16ch!important;
  color:#f4fbfb!important;
  letter-spacing:-.05em;
  text-wrap:balance;
}
.analytics-hero p,
.post-analytics-hero p{color:rgba(229,244,245,.76)!important;max-width:66ch}
.analytics-hero__actions{position:relative;z-index:1;max-width:360px}
.analytics-hero__actions .button,
.analytics-hero__actions .ghost-button{
  min-height:44px;
  padding:12px 15px!important;
  border-radius:10px!important;
}
.analytics-hero__actions .button{background:linear-gradient(135deg,rgb(var(--an-teal)),rgb(var(--an-blue)))!important}
.analytics-hero__actions .ghost-button:nth-child(3n+1){border-color:rgba(var(--an-violet),.38)!important}
.analytics-hero__actions .ghost-button:nth-child(3n+2){border-color:rgba(var(--an-orange),.38)!important}
.analytics-hero__actions .ghost-button:nth-child(3n){border-color:rgba(var(--an-green),.38)!important}
.analytics-badge{
  border-radius:9px!important;
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(213,240,241,.13)!important;
}
.analytics-badge:nth-child(6n+1){color:rgb(var(--an-teal))}
.analytics-badge:nth-child(6n+2){color:rgb(var(--an-blue))}
.analytics-badge:nth-child(6n+3){color:rgb(var(--an-green))}
.analytics-badge:nth-child(6n+4){color:rgb(var(--an-violet))}
.analytics-badge:nth-child(6n+5){color:rgb(var(--an-orange))}
.analytics-badge:nth-child(6n){color:rgb(var(--an-coral))}

.analytics-kpis{gap:12px!important}
.analytics-kpi,
.analytics-mini-card,
.analytics-chart-card,
.analytics-panel{
  --metric:var(--an-teal);
  position:relative;
  overflow:hidden;
  border-radius:14px!important;
  border:1px solid rgba(var(--metric),.22)!important;
  background:
    linear-gradient(145deg,rgba(var(--metric),.11),transparent 42%),
    linear-gradient(180deg,rgba(16,42,55,.96),rgba(7,22,32,.96))!important;
  box-shadow:0 16px 44px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.analytics-kpi::before,
.analytics-mini-card::before,
.analytics-chart-card::before,
.analytics-panel::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,rgb(var(--metric)),rgba(var(--metric),.12));
}
.analytics-kpi:nth-child(8n+1),.analytics-mini-card:nth-child(8n+1),.analytics-chart-card:nth-child(8n+1){--metric:var(--an-teal)}
.analytics-kpi:nth-child(8n+2),.analytics-mini-card:nth-child(8n+2),.analytics-chart-card:nth-child(8n+2){--metric:var(--an-blue)}
.analytics-kpi:nth-child(8n+3),.analytics-mini-card:nth-child(8n+3),.analytics-chart-card:nth-child(8n+3){--metric:var(--an-violet)}
.analytics-kpi:nth-child(8n+4),.analytics-mini-card:nth-child(8n+4),.analytics-chart-card:nth-child(8n+4){--metric:var(--an-orange)}
.analytics-kpi:nth-child(8n+5),.analytics-mini-card:nth-child(8n+5),.analytics-chart-card:nth-child(8n+5){--metric:var(--an-green)}
.analytics-kpi:nth-child(8n+6),.analytics-mini-card:nth-child(8n+6),.analytics-chart-card:nth-child(8n+6){--metric:var(--an-coral)}
.analytics-kpi:nth-child(8n+7),.analytics-mini-card:nth-child(8n+7),.analytics-chart-card:nth-child(8n+7){--metric:var(--an-gold)}
.analytics-kpi:nth-child(8n),.analytics-mini-card:nth-child(8n),.analytics-chart-card:nth-child(8n){--metric:var(--an-red)}
.analytics-kpi span:first-child,
.analytics-mini-card span:first-child{color:rgba(var(--metric),.93)!important}
.analytics-kpi strong,
.analytics-mini-card strong{color:#f3fbfb!important}
.analytics-kpi{min-height:112px;padding:18px 18px 17px!important}
.analytics-kpi strong{font-size:clamp(1.65rem,2.8vw,2.45rem)!important}

.analytics-layout{gap:16px!important}
.analytics-column{gap:16px!important}
.analytics-panel{padding:clamp(18px,2.2vw,28px)!important}
.analytics-panel:nth-child(3n+1){--metric:var(--an-teal)}
.analytics-panel:nth-child(3n+2){--metric:var(--an-blue)}
.analytics-panel:nth-child(3n){--metric:var(--an-violet)}
.analytics-panel__head{padding-bottom:16px;border-bottom:1px solid rgba(var(--metric),.16)}
.analytics-panel__head h2,.analytics-panel__head h3{color:#f2fafa!important;letter-spacing:-.025em}
.analytics-chart-note{color:rgba(220,238,240,.64)!important;max-width:46rem}
.analytics-chart-grid{gap:14px!important}
.analytics-chart-card{padding:17px!important;min-width:0}
.analytics-chart-card h3{color:#f5fbfb!important}
.analytics-chart{max-width:100%;overflow:visible}
.analytics-chart text{font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.analytics-legend span{color:rgba(226,241,242,.74)!important}
.analytics-note,.analytics-note-box,.analytics-empty{
  border-radius:10px!important;
  border:1px dashed rgba(var(--an-teal),.22)!important;
  background:rgba(7,22,32,.72)!important;
  color:rgba(222,239,240,.72)!important;
}
.analytics-row{
  min-width:0;
  padding:13px 0!important;
  border-color:rgba(207,239,240,.1)!important;
}
.analytics-row>div{min-width:0}
.analytics-row strong{color:#eff9f9!important;overflow-wrap:anywhere}
.analytics-row span{color:rgba(216,235,237,.58)!important;overflow-wrap:anywhere}
.analytics-row em{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:8px;
  color:rgb(var(--metric))!important;
  background:rgba(var(--metric),.09);
  border:1px solid rgba(var(--metric),.16);
}
.analytics-side .analytics-panel:nth-child(4n+1){--metric:var(--an-blue)}
.analytics-side .analytics-panel:nth-child(4n+2){--metric:var(--an-orange)}
.analytics-side .analytics-panel:nth-child(4n+3){--metric:var(--an-green)}
.analytics-side .analytics-panel:nth-child(4n){--metric:var(--an-violet)}
body[data-page="analytics"] .analytics-column:last-child .analytics-panel:nth-child(4n+1){--metric:var(--an-blue)}
body[data-page="analytics"] .analytics-column:last-child .analytics-panel:nth-child(4n+2){--metric:var(--an-orange)}
body[data-page="analytics"] .analytics-column:last-child .analytics-panel:nth-child(4n+3){--metric:var(--an-green)}
body[data-page="analytics"] .analytics-column:last-child .analytics-panel:nth-child(4n){--metric:var(--an-violet)}
body[data-page="analytics"] .analytics-column:last-child .analytics-table,
body[data-page="posts-studio"] .analytics-side .analytics-rank-list{
  max-height:430px;
  overflow:auto;
  padding-right:8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--metric),.44) transparent;
}

/* Make long source hosts readable and compact. */
#trafficSourcesTable .analytics-row strong{
  max-width:42ch;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Prevent excessively tall charts while keeping them sharp and responsive. */
.analytics-chart-card .analytics-chart{
  min-height:180px;
  max-height:245px;
}
.analytics-donut-wrap .analytics-chart{min-height:190px;max-height:220px}

/* Manager intro: concise and easier to scan. */
body[data-page="manager"] .manager-hero h1{max-width:18ch!important;text-wrap:balance}
body[data-page="manager"] .manager-hero p{max-width:52ch!important}

@media (min-width:1500px){
  body[data-page="analytics"] .analytics-chart-grid,
  body[data-page="posts-studio"] #analyticsZone .analytics-chart-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .analytics-chart-card .analytics-chart{min-height:160px;max-height:215px}
}
@media (max-width:1180px){
  .analytics-layout{grid-template-columns:1fr!important}
  .analytics-hero__actions{max-width:none;justify-content:flex-start!important}
}
@media (max-width:760px){
  body[data-page="posts-studio"] #analyticsZone .section-head{align-items:start}
  .analytics-hero,.post-analytics-hero{padding:20px 18px!important}
  .analytics-hero h1,.post-analytics-hero h2{max-width:none!important}
  .analytics-hero__actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%}
  .analytics-hero__actions>*{width:100%;justify-content:center}
  .analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .analytics-chart-grid,.analytics-mini-grid{grid-template-columns:1fr!important}
}
@media (max-width:480px){
  .analytics-kpis{grid-template-columns:1fr!important}
  .analytics-hero__actions{grid-template-columns:1fr!important}
  .analytics-kpi{min-height:92px}
}