:root {
  color-scheme: dark;
  --bg: #02070e;
  --shell: #06101d;
  --panel: rgba(5, 16, 29, 0.86);
  --panel-strong: rgba(7, 21, 38, 0.96);
  --border: rgba(93, 156, 226, 0.22);
  --border-hot: rgba(0, 145, 255, 0.55);
  --text: #f2f7ff;
  --muted: #8793a8;
  --blue: #008dff;
  --blue-2: #1ac9ff;
  --orange: #ff9e18;
  --green: #19d35c;
  --red: #ff3b42;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.48);
  --font-display: "ChadGPT Display", "Avenir Next Condensed", "Arial Black", "Impact", system-ui, sans-serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@font-face {
  font-family: "ChadGPT Display";
  src: url("assets/fonts/exo2-black-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 900;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 75% 14%, rgba(0, 128, 255, 0.18), transparent 35%),
    radial-gradient(circle at 24% 82%, rgba(255, 122, 24, 0.12), transparent 28%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
}

a {
  color: inherit;
  text-decoration: none;
}

.desktop-frame {
  width: min(100vw, 1900px);
  min-height: 100vh;
  margin: 0 auto;
  border: 1px solid rgba(70, 116, 178, 0.32);
  border-radius: 10px;
  background: #020811;
  box-shadow: var(--shadow);
  overflow: visible;
}

.app-shell {
  display: grid;
  grid-template-columns: 310px 1fr;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 18px;
  border-right: 1px solid rgba(65, 111, 169, 0.32);
  background:
    linear-gradient(180deg, rgba(6, 19, 35, 0.96), rgba(2, 9, 18, 0.98)),
    repeating-linear-gradient(0deg, transparent 0 36px, rgba(65, 144, 255, 0.04) 37px 38px);
}

.brand {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 10px 18px;
  border-bottom: 1px solid rgba(65, 111, 169, 0.2);
}

.brand-shield {
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 0 16px rgba(0, 141, 255, 0.42));
}

.brand-word {
  font-family: var(--font-display);
  font-size: 35px;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  transform: skewX(-4deg) scaleX(0.96);
  transform-origin: left center;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.24);
}

.brand-word span {
  color: var(--blue);
}

.side-nav {
  display: grid;
  gap: 9px;
}

.side-nav a {
  min-height: 49px;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #99a4b8;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.side-nav a.active,
.side-nav a:hover {
  color: #fff;
  border-color: rgba(0, 132, 255, 0.42);
  background: linear-gradient(90deg, rgba(0, 111, 255, 0.82), rgba(0, 111, 255, 0.12));
  box-shadow: inset 0 0 18px rgba(0, 145, 255, 0.22);
}

.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  color: currentColor;
}

.icon::before,
.icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: .82;
}

.icon::after {
  display: none;
}

.icon.home::before { clip-path: polygon(50% 5%, 94% 39%, 83% 39%, 83% 94%, 61% 94%, 61% 62%, 39% 62%, 39% 94%, 17% 94%, 17% 39%, 6% 39%); }
.icon.bars::before { clip-path: polygon(5% 80%, 22% 80%, 22% 95%, 5% 95%, 5% 80%, 38% 50%, 55% 50%, 55% 95%, 38% 95%, 38% 50%, 72% 18%, 89% 18%, 89% 95%, 72% 95%); }
.icon.trend::before { clip-path: polygon(5% 78%, 35% 48%, 51% 64%, 86% 20%, 95% 28%, 52% 82%, 35% 66%, 15% 86%); }
.icon.trophy::before { clip-path: polygon(25% 8%, 75% 8%, 75% 22%, 94% 22%, 94% 43%, 73% 62%, 60% 62%, 60% 77%, 78% 77%, 78% 91%, 22% 91%, 22% 77%, 40% 77%, 40% 62%, 27% 62%, 6% 43%, 6% 22%, 25% 22%); }
.icon.ball::before { border-radius: 50%; clip-path: circle(48% at 50% 50%); }
.icon.pie::before { border-radius: 50%; clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%); }
.icon.group::before { clip-path: polygon(19% 44%, 35% 44%, 46% 58%, 46% 89%, 8% 89%, 8% 58%, 19% 44%, 35% 12%, 51% 44%, 61% 44%, 73% 58%, 73% 89%, 43% 89%, 43% 58%, 52% 44%, 68% 12%, 85% 44%, 94% 58%, 94% 89%, 70% 89%, 70% 58%, 80% 44%); }

.side-stat,
.sidebar blockquote {
  border: 1px solid rgba(88, 130, 186, 0.22);
  border-radius: 6px;
  background: rgba(3, 12, 23, 0.72);
}

.side-stat {
  display: grid;
  gap: 5px;
  padding: 17px 22px;
  margin-top: auto;
}

.side-stat span {
  color: #909bad;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.side-stat strong {
  margin-bottom: 7px;
  color: #cfd8e9;
  font-size: 15px;
  font-weight: 600;
}

.sidebar blockquote {
  margin: 0;
  padding: 24px 21px;
}

.sidebar blockquote p {
  margin: 0 0 10px;
  color: #f0f4fb;
  font-size: 18px;
  font-style: italic;
  line-height: 1.35;
}

.sidebar blockquote cite {
  display: block;
  color: var(--blue-2);
  font-size: 16px;
  font-style: italic;
  font-weight: 800;
  text-align: right;
}

.main {
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(3, 12, 23, 0.08), rgba(3, 12, 23, 0.86)),
    radial-gradient(circle at 62% 20%, rgba(0, 117, 255, 0.12), transparent 34%);
}

.top-nav {
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 30px;
  padding: 0 24px 0 32px;
  border-bottom: 1px solid rgba(72, 119, 180, 0.22);
  background: rgba(2, 8, 15, 0.76);
  backdrop-filter: blur(18px);
}

.top-nav nav {
  display: flex;
  gap: 38px;
  align-self: stretch;
  align-items: center;
}

.top-nav nav a {
  height: 100%;
  display: grid;
  place-items: center;
  border-bottom: 3px solid transparent;
  color: #8f98aa;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.top-nav nav a.active,
.top-nav nav a:hover {
  color: var(--blue-2);
  border-bottom-color: var(--blue);
}

.rank-chip,
.profile-chip {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rank-gem,
.rank-emblem {
  display: inline-block;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(0, 157, 255, 0.7));
}

.rank-gem {
  width: 62px;
  height: 62px;
}

.rank-chip small,
.rank-chip em,
.profile-chip em {
  display: block;
  color: #8994a8;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rank-chip small {
  display: block;
}

.rank-chip strong,
.profile-chip strong {
  display: block;
  color: #eef5ff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bot-avatar {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(0, 161, 255, 0.45);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, #00b7ff 0 6%, transparent 7%),
    radial-gradient(circle at 35% 42%, #00b7ff 0 5%, transparent 6%),
    radial-gradient(circle at 65% 42%, #00b7ff 0 5%, transparent 6%),
    linear-gradient(180deg, #121b2b, #02070f);
  box-shadow: inset 0 0 20px rgba(0, 157, 255, 0.28), 0 0 18px rgba(0, 157, 255, 0.18);
}

.profile-chip em {
  color: #38ec69;
}

.hero {
  position: relative;
  min-height: 438px;
  padding: 44px 32px 28px;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.18) contrast(1.08);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 8, 15, 0.95) 0%, rgba(2, 8, 15, 0.46) 34%, rgba(2, 8, 15, 0.05) 100%),
    linear-gradient(180deg, rgba(2, 8, 15, 0.12), rgba(2, 8, 15, 0.9) 92%);
}

.hero-copy,
.progress-card {
  position: relative;
  z-index: 1;
}

.hero-copy {
  margin-left: 24px;
  width: min(620px, 58vw);
}

.hero-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(54px, 6vw, 95px);
  font-style: italic;
  font-weight: 900;
  line-height: .92;
  letter-spacing: 0;
  color: #f7f8fb;
  transform: skewX(-4deg) scaleX(0.96);
  transform-origin: left center;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.hero-copy h1 span {
  color: var(--blue);
}

.hero-copy p {
  margin: 15px 0 0;
  color: #d8deeb;
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 800;
  font-style: italic;
  line-height: 1.08;
}

.panel {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(6, 18, 33, 0.94), rgba(3, 11, 21, 0.86));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.panel h2 {
  margin: 0 0 18px;
  color: var(--blue-2);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.progress-card {
  width: min(420px, 48vw);
  padding: 14px 20px 16px;
  margin-top: 22px;
  margin-left: 24px;
}

.progress-card h2 {
  margin-bottom: 10px;
  font-size: 16px;
}

.progress-layout {
  display: grid;
  grid-template-columns: 148px 1fr;
  align-items: center;
  gap: 18px;
}

.ring,
.donut {
  --progress: 0;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(var(--blue) calc(var(--progress) * 1%), rgba(96, 126, 164, 0.22) 0),
    radial-gradient(circle, rgba(0, 144, 255, 0.1), rgba(2, 8, 15, 0.68));
}

.ring {
  width: 140px;
  height: 140px;
}

.ring::before,
.donut::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 9px solid rgba(81, 106, 139, 0.22);
  border-radius: 50%;
  background: #07111f;
}

.ring div,
.donut-label {
  position: relative;
  z-index: 1;
}

.ring strong {
  display: block;
  color: #fff;
  font-size: 30px;
  font-weight: 950;
  text-align: center;
}

.ring span,
.donut span {
  display: block;
  color: var(--blue-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.metric-list {
  display: grid;
  gap: 4px;
  margin: 0;
}

.metric-list div {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 8px;
  align-items: center;
}

.metric-list div::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  color: var(--orange);
  clip-path: polygon(50% 0, 63% 31%, 96% 35%, 71% 55%, 80% 90%, 50% 72%, 20% 90%, 29% 55%, 4% 35%, 37% 31%);
}

.metric-list div:nth-child(2)::before,
.metric-list div:nth-child(4)::before {
  color: var(--blue);
}

.metric-list dt {
  color: #8d98ac;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.metric-list dd {
  grid-column: 2;
  margin: -2px 0 0;
  color: #eaf1ff;
  font-size: 20px;
  font-weight: 900;
}

.metric-list div:nth-child(2) dd,
.metric-list div:nth-child(4) dd {
  color: var(--orange);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr .92fr 1.27fr 1.2fr;
  gap: 12px;
  margin-top: -24px;
  padding: 0 24px 0;
  position: relative;
  z-index: 2;
}

.dashboard-grid .panel {
  min-width: 0;
  min-height: 268px;
  padding: 18px 20px;
}

.rank-panel h2 {
  display: flex;
  align-items: center;
  gap: 2px;
}

.estimate-mark {
  color: #ff9d18;
  font-size: 1em;
  line-height: 1;
  margin-left: 1px;
  vertical-align: baseline;
}

.rank-body {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 120px;
}

.rank-emblem {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
}

.rank-body > div {
  min-width: 0;
}

.rank-body strong {
  display: block;
  color: #6eb1ff;
  font-size: clamp(21px, 1.45vw, 27px);
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
}

.rank-body span {
  color: #d7deeb;
  font-size: 21px;
  font-weight: 800;
  text-transform: uppercase;
}

.rank-progress {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 18px;
  color: #9aa6ba;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rank-progress strong {
  color: #55b6ff;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.rank-meter {
  --rank-progress: 0%;
  margin-top: 13px;
}

.rank-meter-track {
  height: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 139, 255, 0.18);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(11, 42, 70, 0.82), rgba(4, 22, 40, 0.9)),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(95, 141, 197, 0.18) calc(25% - 1px) 25%);
}

.rank-meter-track span {
  display: block;
  width: var(--rank-progress);
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #008bff, #24d8ff);
  box-shadow: 0 0 13px rgba(0, 157, 255, 0.66);
}

.rank-meter-scale {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
  color: #9aa6ba;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rank-meter-scale span:last-child {
  color: #55b6ff;
  text-align: right;
}

.milestones {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.milestones li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 31px;
  border-bottom: 1px solid rgba(86, 132, 190, 0.12);
}

.milestones i {
  width: 22px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: #7cff00;
}

.milestones li.pending i {
  color: #6d788b;
}

.milestones li.active i {
  color: var(--blue);
  box-shadow: 0 0 16px rgba(0, 145, 255, 0.72);
}

.milestones strong {
  color: #dce5f2;
  font-size: 13px;
  text-transform: uppercase;
  white-space: nowrap;
}

.milestones small {
  display: block;
  margin-top: 1px;
  color: #858fa3;
  font-size: 11px;
}

.milestones span {
  color: #78ff00;
  font-size: 16px;
  font-weight: 900;
}

.milestones li.active span {
  color: var(--blue-2);
}

.milestones li.pending span {
  color: #9ba4b5;
}

.line-chart {
  width: 100%;
  height: 154px;
  display: block;
  overflow: visible;
}

.grid-lines line {
  stroke: rgba(93, 132, 181, 0.16);
  stroke-width: 1;
}

.axis-text,
.axis-title {
  fill: #8f9aaf;
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.axis-title {
  fill: var(--blue-2);
  font-size: 18px;
}

.area-path {
  fill: url(#lineFill);
}

.line-path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 4;
  filter: drop-shadow(0 0 8px rgba(0, 145, 255, 0.8));
}

.point-layer circle {
  fill: #7bd8ff;
  stroke: #005cbd;
  stroke-width: 3;
}

.chart-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.chart-stats div {
  min-width: 0;
  padding: 8px 7px;
  border-left: 1px solid rgba(86, 132, 190, 0.18);
}

.chart-stats span {
  display: block;
  color: #8f9aaf;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chart-stats strong {
  display: block;
  margin-top: 4px;
  color: var(--blue-2);
  font-size: 17px;
  font-weight: 950;
}

.reference-body {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.percentile-donut {
  width: 142px;
  height: 142px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(5, 16, 29, 1) 0 48%, transparent 49%),
    conic-gradient(var(--blue) calc(var(--value) * 1%), #13263d 0);
  box-shadow: inset 0 0 0 13px rgba(18, 42, 66, 0.9), 0 0 22px rgba(0, 141, 255, 0.18);
}

.percentile-label {
  width: calc(100% - 46px);
  max-width: 92px;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.percentile-label strong {
  color: #fff;
  font-size: 29px;
  font-weight: 950;
  line-height: .95;
  white-space: nowrap;
}

.percentile-label span {
  color: #fff;
  max-width: 100%;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.03em;
  line-height: 1.05;
  text-transform: uppercase;
}

.reference-legend {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.reference-legend li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 7px;
  color: #cfd8e8;
  font-size: 13px;
}

.reference-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.reference-legend .red { background: #ff3d45; }
.reference-legend .violet { background: #7b38ff; }
.reference-legend .blue { background: #126fff; }
.reference-legend .cyan { background: #1bbdff; }
.reference-legend .gold { background: #ff9d18; }
.reference-legend .silver { background: #a9b2c2; }

.reference-panel p {
  margin: 14px 0 0 160px;
  color: #7f8aa0;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.reference-panel a {
  color: #a8dfff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 24px 0;
}

.metrics-strip article {
  min-height: 100px;
  padding: 19px 22px;
  border: 1px solid rgba(88, 130, 186, 0.2);
  border-radius: 7px;
  background: rgba(3, 12, 23, 0.72);
}

.metrics-strip span {
  display: block;
  color: #8f9aaf;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.metrics-strip strong {
  display: block;
  margin-top: 10px;
  color: #eaf3ff;
  font-size: 24px;
  font-weight: 950;
}

.status-bar {
  min-height: 106px;
  display: grid;
  grid-template-columns: 1.1fr .85fr .8fr;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  padding: 16px 28px 18px;
  border-top: 1px solid rgba(72, 119, 180, 0.2);
  background: rgba(2, 8, 15, 0.85);
}

.status-bar div,
.estimate-footnote {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8793a8;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-bar div + div {
  border-left: 1px solid rgba(109, 141, 184, 0.32);
  padding-left: 32px;
}

.estimate-footnote {
  justify-content: flex-end;
  min-height: auto;
  grid-column: 1 / -1;
  margin: -8px 0 0;
  color: #ff9d18;
  font-size: 12px;
}

.status-bar strong {
  color: #eaf1ff;
  font-size: 16px;
}

.status-bar div:first-child strong {
  color: var(--green);
}

.status-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 13px rgba(25, 211, 92, 0.8);
}

@media (max-width: 1380px) {
  .app-shell {
    grid-template-columns: 92px 1fr;
  }

  .sidebar {
    padding-inline: 12px;
  }

  .brand-word,
  .side-nav a span + *,
  .side-stat,
  .sidebar blockquote {
    display: none;
  }

  .brand {
    justify-content: center;
    padding-inline: 0;
  }

  .side-nav a {
    justify-content: center;
    padding: 0;
    gap: 0;
    font-size: 0;
  }

  .side-nav .icon {
    width: 26px;
    height: 26px;
  }

  .brand-shield {
    width: 56px;
    height: 56px;
    padding: 0;
  }

  .top-nav nav {
    gap: 18px;
  }

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

  .chart-stats strong {
    font-size: 16px;
  }
}

@media (max-width: 1600px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .desktop-frame {
    border-radius: 0;
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    display: none;
  }

  .top-nav {
    height: auto;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 16px;
  }

  .top-nav nav {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 20px;
  }

  .top-nav nav a {
    min-height: 42px;
    white-space: nowrap;
  }

  .rank-chip,
  .profile-chip {
    display: none;
  }

  .hero {
    min-height: 580px;
    padding: 28px 16px;
  }

  .hero-copy,
  .progress-card {
    width: auto;
    margin-left: 0;
  }

  .hero-copy {
    max-width: 460px;
  }

  .progress-card {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 26px;
  }

  .progress-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .metric-list {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-grid,
  .metrics-strip,
  .status-bar {
    grid-template-columns: 1fr;
    padding-inline: 16px;
  }

  .dashboard-grid {
    margin-top: 0;
  }

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

  .status-bar div + div {
    border-left: 0;
    border-top: 1px solid rgba(109, 141, 184, 0.25);
    padding-left: 0;
    padding-top: 14px;
  }
}

@media (max-width: 520px) {
  .hero-copy h1 {
    font-size: 52px;
  }

  .metric-list,
  .chart-stats,
  .reference-body {
    grid-template-columns: 1fr;
  }

  .reference-panel p {
    margin-left: 0;
  }
}