:root {
  --ink:#142033;
  --muted:#6d7890;
  --line:#dfe5ee;
  --surface:#fff;
  --page:#f4f7fb;
  --navy:#102a43;
  --blue:#2877d4;
  --green:#0e9f6e;
  --red:#d44f55;
  --gold:#f2b134;
}

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
}

.shell {
  max-width:1440px;
  padding:36px 30px 52px;
  margin:auto;
}

.top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:26px;
}

.brand {
  display:flex;
  align-items:center;
  margin:0 0 12px;
}

.brand img {
  width:158px;
  height:auto;
  display:block;
}

h1 {
  margin:0;
  font-size:31px;
  letter-spacing:-.035em;
}

h2 {
  margin:0;
  font-size:18px;
}

.sub, .source, .note, .status, .session span {
  color:var(--muted);
}

.sub { margin:8px 0 0; }

.period {
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 15px;
  font-weight:650;
}

.period select {
  border:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-weight:750;
  margin-top:4px;
}

.stats {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-bottom:26px;
}

.card, .panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
}

.card {
  padding:17px;
}

.card label {
  display:block;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  margin-bottom:8px;
}

.card strong {
  display:block;
  font-size:25px;
  min-height:31px;
}

.card small {
  display:block;
  color:var(--muted);
  margin-top:7px;
}

.content {
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:20px;
}

.panel { padding:23px; }

.heading, .metric-title, .rep-head {
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.heading {
  align-items:baseline;
  margin-bottom:18px;
}

.toolbar { display:flex; gap:8px; }

.toolbar button, .btn {
  font:inherit;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:8px 14px;
  cursor:pointer;
}

.toolbar button.active, .btn-primary {
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}

.rank {
  display:grid;
  grid-template-columns:42px 1fr 100px;
  gap:12px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}

.medal {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#91a0b5;
  color:#fff;
  font-weight:750;
}

.m1 { background:var(--gold); }
.m2 { background:#93a4bb; }
.m3 { background:#c47b3d; }

.rep-head, .metric-title { font-weight:700; }
.rep-sub, .metric-label { color:var(--muted); font-size:12px; }

.bar, .track {
  overflow:hidden;
  background:#e8edf4;
  border-radius:99px;
}

.bar {
  height:9px;
  margin-top:9px;
}

.fill {
  height:100%;
  background:#3991e9;
  border-radius:99px;
}

.value {
  text-align:right;
  font-weight:750;
}

.metric { margin-bottom:22px; }
.metric-title { margin-bottom:9px; }
.metric-title span { color:var(--muted); }

.track {
  display:flex;
  height:28px;
  border-radius:7px;
}

.seg { height:100%; min-width:2px; }

.legend {
  display:flex;
  gap:12px;
  color:var(--muted);
  font-size:12px;
  margin-top:9px;
}

.dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:5px;
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

th, td {
  padding:13px 10px;
  border-bottom:1px solid var(--line);
}

th {
  color:var(--muted);
  text-align:left;
  font-weight:650;
}

.num { text-align:right; white-space:nowrap; }
.pct { color:var(--green); font-weight:750; }
.cancel { color:var(--red); font-weight:700; }

.session {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-top:14px;
}

.gate {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px 20px;
}

.gate-card {
  width:100%;
  max-width:412px;
  padding:32px 30px 28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 18px 44px -28px rgba(16,42,67,.4);
}

.gate-card .brand {
  justify-content:center;
  margin-bottom:22px;
}

.gate-card h1, .gate-card .sub { text-align:center; }

.field { margin-bottom:15px; }

.field label {
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:650;
}

.field input {
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  font:inherit;
}

.btn-primary {
  width:100%;
  padding:13px 16px;
  border-radius:9px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}

.gate-links {
  margin-top:16px;
  font-size:13px;
}

.gate-links a {
  color:var(--blue);
  font-weight:600;
  cursor:pointer;
}

.gate-message {
  margin:0 0 16px;
  padding:11px 13px;
  border-radius:9px;
  font-size:13px;
}

.gate-message.error {
  background:#fdf0f1;
  color:#8f2b30;
}

.gate-message.notice {
  background:#eef5fd;
  color:#1a4f8c;
}

.gate-foot {
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

@media (max-width:1000px) {
  .stats { grid-template-columns:repeat(3,1fr); }
  .content { grid-template-columns:1fr; }
}

@media (max-width:600px) {
  .shell { padding:24px 16px; }
  .top { display:block; }
  .period { display:inline-block; margin-top:17px; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .rank { grid-template-columns:28px 1fr 65px; }
}
/* Final layout fixes */
.rank {
  grid-template-columns:42px minmax(0, 1fr) 150px;
}

.rep-head .metric-value {
  text-align:right;
  white-space:nowrap;
}

.metric-label {
  display:block;
  margin-bottom:2px;
}

.value {
  min-width:150px;
  white-space:nowrap;
}

@media (max-width:800px) {
  .top {
    flex-direction:column;
  }

  .top > div:last-child {
    width:100%;
  }

  .session {
    justify-content:flex-start;
  }

  .rank {
    grid-template-columns:32px minmax(0, 1fr);
  }

  .rank .value {
    grid-column:2;
    text-align:left;
  }
}
/* Keep the reporting controls clean and together */
.top > div:last-child {
  min-width: 300px;
}

.period {
  display: inline-block;
  min-width: 220px;
  margin-bottom: 10px;
}

.session {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  white-space: nowrap;
}

.session span {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 310px;
}

@media (max-width: 800px) {
  .top {
    display: block;
  }

  .top > div:last-child {
    min-width: 0;
    margin-top: 20px;
  }

  .session {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}