:root {
  --ink: #1A1A1A;
  --muted: #7A7A7A;
  --line: #E8ECEC;
  --paper: #F0F4F4;
  --green: #1C7070;
  --mint: #DFF5F5;
  --blue: #1C7070;
  --accent: #28BBBB;
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(40,187,187,.10), transparent 26rem),
    var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.topbar {
  height: 76px;
  background: #fff;
  border-bottom: 4px solid #28BBBB;
  box-shadow: 0 2px 10px rgba(28,112,112,.14);
}
.cobrand-logo { gap: 18px; height: 52px; }
.mw-logo { display: block; width: 205px; max-height: 38px; object-fit: contain; }
.brand-divider { width: 1px; height: 34px; background: #C9CFCF; }
.blizzard-logo { display: block; width: 92px; height: 43px; object-fit: contain; }
.user-area { color: #4A4A4A; }
.user-area a, .link-button { color: #1C7070; font-weight: 700; }

.shell { max-width: 1120px; padding-top: 38px; }
.eyebrow { color: #1C7070; letter-spacing: .14em; }
.hero {
  padding: 27px 30px;
  background: #fff;
  border: 1px solid #E8ECEC;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(28,112,112,.06);
}
.hero h1, .page-head h1 { font-size: 38px; color: #1A1A1A; }
.date-note { border-color: #28BBBB; }
.date-note strong { color: #1C7070; }

.tabs { gap: 4px; border-bottom-color: #C9CFCF; }
.tabs a { border-bottom-width: 3px; }
.tabs a:hover { color: #1C7070; }
.tabs a.active { color: #1C7070; border-color: #28BBBB; }
.tabs span { background: #DFF5F5; color: #1C7070; }
.report-filters {
  display: flex;
  align-items: end;
  gap: 12px;
  padding: 16px 18px;
  margin: -10px 0 24px;
  background: #fff;
  border: 1px solid #E8ECEC;
  border-radius: 10px;
}
.report-filters label { display: grid; gap: 4px; margin: 0; color: #7A7A7A; font-size: 11px; }
.report-filters input { min-width: 150px; padding: 8px 10px; }
.report-filters button { padding: 9px 15px; background: #28BBBB; color: #fff; font-weight: 700; }
.report-filters > a { padding: 8px 4px; color: #1C7070; text-decoration: none; font-weight: 700; }

.report-grid { gap: 20px; }
.report-card, .panel {
  border-color: #E8ECEC;
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(28,112,112,.06);
}
.report-card {
  position: relative;
  overflow: hidden;
  padding: 25px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.report-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: #28BBBB;
}
.report-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(28,112,112,.10); }
.report-card h2 { color: #1A1A1A; }
.pill { background: #DFF5F5; color: #1C7070; }
.period { border-color: #E8ECEC; }
.actions a, .button { border-color: #28BBBB; color: #1C7070; }
.actions .primary-link, .button, .primary { background: #28BBBB; color: #fff; border-color: #28BBBB; }
.actions a:hover, .button:hover, .primary:hover { filter: brightness(.95); }
.file-pending { align-self: center; color: #7A7A7A; font-size: 12px; }

.login-wrap { gap: 68px; }
.login-copy h1 { color: #1A1A1A; }
.login-copy h1::after {
  content: "";
  display: block;
  width: 74px;
  height: 5px;
  margin-top: 24px;
  border-radius: 3px;
  background: #28BBBB;
}
.login-panel { border-top: 5px solid #28BBBB; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(40,187,187,.18);
  border-color: #28BBBB;
}
.empty { border-color: #A3DFDF; }
.viewer-head h1 { color: #1A1A1A; }
.back-link { color: #1C7070; }
.report-frame { border-color: #C9CFCF; box-shadow: 0 8px 26px rgba(28,112,112,.08); }

@media(max-width:760px) {
  .topbar { height: 68px; }
  .hero { padding: 22px; }
  .hero h1, .page-head h1 { font-size: 32px; }
  .cobrand-logo { gap: 10px; }
  .mw-logo { width: 145px; }
  .blizzard-logo { width: 66px; }
  .report-filters { align-items: stretch; flex-direction: column; }
  .report-filters > span { display: none; }
}