/* Shared visual primitives used only by stats pages.
 * Keep shell/navigation rules in webapp_shell.css. */
/* Stats-only design tokens. */
:root{
  --stats-bg:#090909;
  --stats-surface:#131313;
  --stats-surface-2:#171717;
  --stats-surface-3:#1b1b1b;
  --stats-line:rgba(255,255,255,.065);
  --stats-line-strong:rgba(255,255,255,.11);
  --stats-text:#f3f3f3;
  --stats-muted:#898989;
  --stats-dim:#5e5e5e;
  --stats-yellow:#f2c94c;
  --stats-green:#4fd07d;
  --stats-blue:#66aef0;
  --stats-red:#ef6275;
  --stats-purple:#a987ef;
  --stats-cyan:#65c7ce;
  --stats-pink:#d979aa;
  --stats-radius:14px;
  --stats-radius-sm:14px;
  --stats-gap:14px;
  --stats-pad:18px;
}

body.mgram-stats-page .mgram-v2-content-inner{container:mgram-stats-content / inline-size}
body.mgram-stats-page .mgram-v2-content .stats-shell{padding-bottom:24px}

/* Shared stats component contract: one construction and one visual system for every tab. */
body.mgram-stats-page .card{
  min-width:0;
  background:var(--stats-surface);
  border:0;
  border-radius:var(--stats-radius);
  box-shadow:none;
}
body.mgram-stats-page .stats-panel{
  min-width:0;
  padding:16px 18px;
  background:#111;
  border:0;
  border-radius:var(--stats-radius);
  box-shadow:none;
}
body.mgram-stats-page .block-icon{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  flex:none;
  color:#727272;
}
body.mgram-stats-page .block-icon svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
  stroke:none;
}
body.mgram-stats-page .block-icon svg.legacy-stroke-icon{
  fill:none;
  stroke:currentColor;
  stroke-width:2.05;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.mgram-stats-page .stats-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 16px;
  min-width:0;
}
body.mgram-stats-page .stats-section-head>.stats-section-title{
  display:grid;
  grid-template-columns:15px minmax(0,1fr);
  align-items:center;
  column-gap:9px;
  row-gap:4px;
  min-width:0;
}
body.mgram-stats-page .stats-section-title .block-icon{
  width:15px;
  height:15px;
  color:#727272;
}
body.mgram-stats-page .stats-section-title .block-icon svg{
  width:15px;
  height:15px;
  stroke-width:1.9;
}
body.mgram-stats-page .stats-section-head>.stats-section-title>div{display:contents}
body.mgram-stats-page .stats-section-head>.stats-section-title h2{
  grid-column:2;
  margin:0;
  color:#d8d8d8;
  font-size:13.5px;
  line-height:1.1;
  font-weight:620;
}
body.mgram-stats-page .stats-section-head>.stats-section-title p{
  grid-column:1/-1;
  margin:0;
  color:#727272;
  font-size:10.5px;
  line-height:1.3;
  font-weight:500;
}
body.mgram-stats-page .stats-section-meta{
  flex:none;
  color:#727272;
  font-size:10.5px;
  line-height:1;
  font-weight:550;
  white-space:nowrap;
}
body.mgram-stats-page .stats-kpi-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:10px;
  min-width:0;
  background:transparent;
}
body.mgram-stats-page .stats-kpi-card{
  min-width:0;
  padding:11px 13px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:#121212;
  border:0;
  border-radius:var(--stats-radius);
  box-shadow:none;
}
body.mgram-stats-page .metric-card-head{display:flex;align-items:center;min-width:0}
body.mgram-stats-page .metric-card-title{display:flex;align-items:center;gap:7px;min-width:0}
body.mgram-stats-page .metric-card-title .block-icon{
  width:17px;height:17px;display:grid;place-items:center;flex:none;color:#727272
}
body.mgram-stats-page .metric-card-title .block-icon svg{
  width:17px;height:17px;stroke-width:1.85
}
body.mgram-stats-page .metric-card-title h2{
  margin:0;
  min-width:0;
  color:#bdbdbd;
  font-size:12px;
  line-height:1.15;
  font-weight:580;
  white-space:normal;
  overflow-wrap:anywhere;
}
body.mgram-stats-page .metric-value{
  margin-top:8px;
  color:#f0f0f0;
  font-size:24px;
  line-height:.95;
  font-weight:650;
  letter-spacing:-.04em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
body.mgram-stats-page .metric-context{
  display:block;
  margin-top:5px;
  max-height:2.5em;
  color:#727272;
  font-size:10.5px;
  line-height:1.25;
  font-weight:500;
  overflow:hidden;
  white-space:normal;
  overflow-wrap:anywhere;
}
body.mgram-stats-page .stats-kpi-card.good .block-icon{color:var(--stats-green)}
body.mgram-stats-page .stats-kpi-card.blue .block-icon{color:var(--stats-blue)}
body.mgram-stats-page .stats-kpi-card.bad .block-icon{color:var(--stats-red)}
body.mgram-stats-page .stats-kpi-card.yellow .block-icon{color:var(--stats-yellow)}
body.mgram-stats-page .stats-kpi-card.cyan .block-icon{color:var(--stats-cyan)}
body.mgram-stats-page .stats-kpi-card.purple .block-icon{color:var(--stats-purple)}
body.mgram-stats-page .stats-segment-bar{
  height:8px;
  display:flex;
  overflow:hidden;
  border-radius:999px;
  background:#1b1b1b;
}
body.mgram-stats-page .stats-segment-bar i{display:block;height:100%;min-width:0}
body.mgram-stats-page .stats-segment-bar .ready{background:var(--stats-green)}
body.mgram-stats-page .stats-segment-bar .reserve{background:#4a4a4a}
body.mgram-stats-page .stats-segment-bar .blocked{background:var(--stats-red)}
body.mgram-stats-page .stats-module-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
body.mgram-stats-page .stats-module-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
body.mgram-stats-page .stats-module-grid>div{min-width:0}
body.mgram-stats-page .stats-module-grid b{
  display:block;
  color:#e8e8e8;
  font-size:18px;
  line-height:1;
  font-weight:650;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
body.mgram-stats-page .stats-module-grid span{
  display:block;
  margin-top:5px;
  min-width:0;
  color:#727272;
  font-size:9.5px;
  line-height:1.2;
  overflow-wrap:anywhere;
  word-break:normal;
}
body.mgram-stats-page .stats-section-foot{
  margin-top:13px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.05);
  color:#727272;
  font-size:9.5px;
  line-height:1.25;
}
body.mgram-stats-page .stats-section-foot b{color:#aaa;font-weight:620}
body.mgram-stats-page .stats-section-foot .up{color:var(--stats-green)}
body.mgram-stats-page .stats-section-foot .down{color:var(--stats-red)}
body.mgram-stats-page .stats-section-foot.align-right{text-align:right}
body.mgram-stats-page .stats-data-grid{display:grid;gap:10px 14px;min-width:0}
body.mgram-stats-page .stats-data-list{display:grid;gap:10px;min-width:0}
body.mgram-stats-page .stats-data-row{min-width:0}
body.mgram-stats-page .stats-data-head{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  margin-bottom:6px;
}
body.mgram-stats-page .stats-data-leading{
  width:22px;
  height:15px;
  display:grid;
  place-items:center;
  flex:none;
  overflow:hidden;
  border-radius:4px;
  background:#202020;
  color:#aaa;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font-size:9.5px;
  line-height:1;
  font-weight:700;
}
body.mgram-stats-page .stats-data-leading img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
body.mgram-stats-page .stats-data-label{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#c9c9c9;
  font-size:10.5px;
  line-height:1.1;
  font-weight:580;
}
body.mgram-stats-page .stats-data-value{
  flex:none;
  color:#8a8a8a;
  font-size:10.5px;
  line-height:1;
  font-weight:540;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
body.mgram-stats-page .stats-data-note{
  margin-top:5px;
  color:#666666;
  font-size:9.5px;
  line-height:1;
  text-align:right;
  white-space:nowrap;
}
body.mgram-stats-page .stats-subsection-title{
  margin:0 0 8px;
  color:#727272;
  font-size:9.5px;
  line-height:1;
  font-weight:580;
}
body.mgram-stats-page .rail{
  position:relative;
  height:4px;
  overflow:hidden;
  border-radius:99px;
  background:#272727;
}
body.mgram-stats-page .rail>i{
  display:block;
  width:var(--p,0%);
  height:100%;
  border-radius:inherit;
  background:#767676;
}
body.mgram-stats-page .rail.green>i{background:var(--stats-green)}
body.mgram-stats-page .rail.blue>i{background:var(--stats-blue)}
body.mgram-stats-page .rail.red>i{background:var(--stats-red)}
body.mgram-stats-page .rail.yellow>i{background:var(--stats-yellow)}
body.mgram-stats-page .rail.purple>i{background:var(--stats-purple)}
body.mgram-stats-page .rail.cyan>i{background:var(--stats-cyan)}
body.mgram-stats-page .rail.pink>i{background:var(--stats-pink)}
body.mgram-stats-page .chart-box{position:relative;min-width:0;height:220px}
body.mgram-stats-page .chart-box canvas{display:block;width:100%!important;height:100%!important}

@container mgram-stats-content (min-width:1090px){
  body.mgram-stats-page .stats-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  body.mgram-stats-page .stats-kpi-card{padding:12px 14px}
  body.mgram-stats-page .metric-value{font-size:26px}
  body.mgram-stats-page .chart-box{height:228px}
}
@container mgram-stats-content (max-width:840px){
  body.mgram-stats-page .stats-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container mgram-stats-content (max-width:680px){
  body.mgram-stats-page .stats-shell{--stats-radius:14px;--stats-radius-sm:14px;--stats-gap:10px;--stats-pad:15px}
  body.mgram-stats-page .stats-panel{padding:14px}
  body.mgram-stats-page .stats-section-head{margin-bottom:14px}
  body.mgram-stats-page .stats-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body.mgram-stats-page .stats-kpi-card{padding:10px}
  body.mgram-stats-page .metric-card-title{gap:6px}
  body.mgram-stats-page .metric-card-title .block-icon,
  body.mgram-stats-page .metric-card-title .block-icon svg{width:15px;height:15px}
  body.mgram-stats-page .metric-card-title h2{font-size:12px}
  body.mgram-stats-page .metric-value{margin-top:9px;font-size:22px}
  body.mgram-stats-page .metric-context{margin-top:4px;font-size:9.5px}
  body.mgram-stats-page .chart-box{height:185px}
  body.mgram-stats-page .stats-module-grid,
  body.mgram-stats-page .stats-module-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}
}
@container mgram-stats-content (max-width:310px){
  body.mgram-stats-page .stats-kpi-grid{grid-template-columns:1fr}
  body.mgram-stats-page .stats-kpi-card{padding:9px}
  body.mgram-stats-page .metric-card-title h2{font-size:10.5px}
  body.mgram-stats-page .metric-value{font-size:20px}
  body.mgram-stats-page .metric-context{font-size:9.5px}
  body.mgram-stats-page .stats-module-grid,
  body.mgram-stats-page .stats-module-grid-4{grid-template-columns:1fr;gap:9px}
}


/* GEO: full country names wrap to a second line instead of being cut (2026-11-09) */
body.mgram-stats-page .audience-geo .stats-data-label{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;hyphens:auto;line-height:1.2}