/* CSN companion additions to the HSG portal design system */
.hero { background:
    radial-gradient(1100px 380px at 85% 120%, rgba(6,148,162,.38), transparent 60%),
    linear-gradient(115deg, rgba(16,19,64,.98) 0%, rgba(35,36,125,.96) 45%, rgba(46,47,166,.92) 100%);
  position: relative; overflow: hidden; }
.hero:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; opacity: .22;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0 120 L0 78 L90 52 L170 70 L260 30 L340 64 L430 40 L520 72 L610 22 L700 58 L790 44 L880 70 L970 34 L1060 60 L1140 48 L1200 66 L1200 120 Z' fill='%23ffffff'/></svg>") bottom / 100% 100% no-repeat; }
.hero-inner { position: relative; z-index: 2; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.tot td { background: var(--royal-light); font-weight: 700; }
.synth { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: #fdf2e3; color: var(--warn); border: 1px solid #f3d7a8; border-radius: 999px; padding: 3px 11px; margin-bottom: 10px; }
.public { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: #e6f6ef; color: var(--accent); border: 1px solid #bfe6d4; border-radius: 999px; padding: 3px 11px; margin-bottom: 10px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 6px; }
.kpi { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--royal); border-radius: 10px; padding: 12px 14px; }
.kpi .v { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; color: var(--royal); line-height: 1.1; }
.kpi .k { font-size: 12px; color: var(--slate); margin-top: 3px; }
.controls > div { min-width: 0; }
.controls output { display: block; font-size: 12.5px; color: var(--royal); font-weight: 600; margin-top: 3px; }
.heat td { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; padding: 7px 10px; border: 1px solid #fff; }
.heat th { font-size: 12px; }
.step { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.step .n { width: 30px; height: 30px; border-radius: 8px; background: var(--royal); color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.step .t b { display: block; font-size: 15px; }
.step .t span { font-size: 13.5px; color: var(--slate); }
.step .v { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); white-space: nowrap; text-align: right; }
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 18px; }
.flow .box { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--royal); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: var(--slate); }
.flow .box b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 3px; }
.src { font-size: 12px; color: var(--slate); margin-top: 10px; }
.src a { color: var(--royal); }
@media (max-width: 720px) { .step { grid-template-columns: 30px 1fr; } .step .v { grid-column: 2; text-align: left; } }
.table-scroll table { min-width: 560px; }
.grid2 > *, .grid3 > * { min-width: 0; }

.nav-inner { gap: 18px; }
.nav-links { gap: 15px; }
.nav-links a { font-size: 13.5px; }
.brand span { margin-left: 6px; }
#gradeMap { min-width: 0; }
@media (max-width: 720px) {
  .nav-inner { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .brand { font-size: 14px; white-space: normal; }
  .nav-links { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding-bottom: 4px; }
  .nav-links a { white-space: nowrap; }
  .chart-wrap, .card { padding: 18px 16px; }
  .section { padding-left: 16px; padding-right: 16px; }
}
.controls select, .controls input[type=range] { max-width: 100%; }