:root {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    #f4f7fb;

  color:
    #132238;
}

* {
  box-sizing:
    border-box;
}

body {
  margin: 0;
  min-width: 320px;
}

a {
  color:
    #2457d6;
}

button,
input {
  font: inherit;
}

.topbar {
  min-height: 74px;
  padding:
    14px
    clamp(20px, 4vw, 54px);

  display: flex;
  align-items: center;
  justify-content:
    space-between;
  gap: 24px;

  background:
    #ffffff;

  border-bottom:
    1px solid #e2e8f0;
}

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

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;

  display: grid;
  place-items: center;

  font-weight: 800;
  letter-spacing: -.04em;

  color:
    #ffffff;

  background:
    #2457d6;
}

.brand-name {
  font-weight: 800;
  font-size: 18px;
}

.brand-sub {
  margin-top: 2px;

  font-size: 12px;

  color:
    #708096;
}

.audit-form {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 13px;
  font-weight: 600;
}

.audit-form input {
  width: 76px;
  padding: 9px 10px;

  border:
    1px solid #cfd8e5;

  border-radius: 8px;

  background:
    #ffffff;
}

.audit-form button {
  padding: 10px 14px;

  border: 0;
  border-radius: 8px;

  color:
    #ffffff;

  background:
    #132238;

  cursor: pointer;
}

.shell {
  width:
    min(1440px, calc(100% - 36px));

  margin:
    30px auto 70px;
}

.hidden {
  display: none !important;
}

.state-card,
.section,
.score-card,
.audit-card {
  background:
    #ffffff;

  border:
    1px solid #e1e8f0;

  border-radius: 16px;

  box-shadow:
    0 8px 24px
    rgba(31, 45, 61, .04);
}

.state-card {
  padding: 28px;
}

.error {
  color:
    #a52727;

  border-color:
    #efcaca;
}

.hero-grid {
  display: grid;

  grid-template-columns:
    minmax(250px, 330px)
    minmax(0, 1fr);

  gap: 20px;
}

.score-card {
  padding: 28px;

  text-align: center;
}

.audit-card {
  padding:
    28px 32px;
}

.eyebrow {
  margin-bottom: 8px;

  font-size: 11px;
  line-height: 1.4;

  font-weight: 800;

  letter-spacing: .12em;

  text-transform: uppercase;

  color:
    #738298;
}

.score-ring {
  --score: 0deg;

  width: 176px;
  height: 176px;

  margin:
    24px auto 14px;

  padding: 13px;

  border-radius: 50%;

  background:
    conic-gradient(
      #2457d6 var(--score),
      #e7edf5 0
    );
}

.score-ring.good {
  background:
    conic-gradient(
      #27846c var(--score),
      #e7edf5 0
    );
}

.score-ring.fair {
  background:
    conic-gradient(
      #aa741d var(--score),
      #e7edf5 0
    );
}

.score-ring.poor {
  background:
    conic-gradient(
      #b94141 var(--score),
      #e7edf5 0
    );
}

.score-inner {
  width: 100%;
  height: 100%;

  border-radius: 50%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background:
    #ffffff;
}

.score-inner strong {
  font-size: 42px;
  line-height: 1;

  letter-spacing: -.045em;
}

.score-inner span {
  margin-top: 7px;

  color:
    #7b899b;

  font-size: 12px;
}

.score-label {
  font-size: 14px;
  font-weight: 700;
}

.audit-card h1 {
  margin:
    8px 0 5px;

  font-size:
    clamp(25px, 3vw, 38px);

  letter-spacing:
    -.035em;
}

.site-url {
  display: inline-block;

  margin-bottom: 28px;

  font-size: 14px;

  word-break:
    break-all;
}

.stat-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.stat-grid div {
  padding: 16px;

  border-radius: 12px;

  background:
    #f6f8fb;
}

.stat-grid span,
.metric-card span,
.category-meta,
.muted {
  color:
    #77869a;

  font-size: 12px;
}

.stat-grid strong {
  display: block;

  margin-top: 5px;

  font-size: 22px;
}

.section {
  margin-top: 20px;
  padding: 24px;
}

.section-heading {
  margin-bottom: 18px;

  display: flex;
  align-items: flex-end;
  justify-content:
    space-between;
  gap: 20px;
}

.section h2 {
  margin: 0;

  font-size: 20px;

  letter-spacing:
    -.02em;
}

.category-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.category-card {
  padding: 18px;

  border:
    1px solid #e5eaf1;

  border-radius: 12px;
}

.category-name {
  min-height: 36px;

  font-size: 13px;
  font-weight: 700;
}

.category-score {
  margin-top: 15px;

  font-size: 27px;
  line-height: 1;

  font-weight: 800;

  letter-spacing: -.04em;
}

.category-score.excellent {
  color:
    #2457d6;
}

.category-score.good {
  color:
    #27846c;
}

.category-score.fair {
  color:
    #9a681b;
}

.category-score.poor {
  color:
    #b94141;
}

.category-meta {
  margin-top: 6px;
}

.progress {
  height: 5px;

  margin-top: 14px;

  overflow: hidden;

  border-radius: 99px;

  background:
    #e9edf3;
}

.progress span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    #2457d6;
}

.two-column {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 20px;
}

.stack {
  display: grid;
  gap: 10px;
}

.issue-card {
  padding: 16px;

  border:
    1px solid #e5eaf1;

  border-radius: 12px;
}

.issue-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.issue-card h3 {
  margin:
    11px 0 5px;

  font-size: 15px;
}

.issue-card p {
  margin: 0;

  color:
    #718096;

  font-size: 12px;
}

.badge {
  display: inline-flex;

  padding: 4px 7px;

  border-radius: 99px;

  font-size: 10px;
  font-weight: 800;

  text-transform: uppercase;
}

.severity-critical,
.severity-high {
  color:
    #9d2929;

  background:
    #fce8e8;
}

.severity-medium {
  color:
    #915c0e;

  background:
    #fff3d6;
}

.severity-low {
  color:
    #456078;

  background:
    #eaf0f5;
}

.severity-info,
.severity-opportunity {
  color:
    #335d92;

  background:
    #e8f0fb;
}

.check-id {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 11px;

  color:
    #6e7d90;
}

.loss {
  margin-left: auto;

  font-size: 12px;

  color:
    #a43737;
}

.empty {
  padding: 18px;

  border:
    1px dashed #d9e0e9;

  border-radius: 12px;

  color:
    #7d8998;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;

  border-collapse:
    collapse;

  font-size: 13px;
}

th,
td {
  padding:
    12px 10px;

  text-align: left;

  border-bottom:
    1px solid #edf0f4;
}

th {
  color:
    #718096;

  font-size: 11px;

  text-transform:
    uppercase;

  letter-spacing:
    .06em;
}

td:last-child,
th:last-child {
  text-align: right;
}

.metric-grid {
  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap: 10px;
}

.metric-card {
  min-height: 98px;

  padding: 15px;

  display: flex;
  flex-direction: column;
  justify-content:
    space-between;

  border:
    1px solid #e5eaf1;

  border-radius: 12px;
}

.metric-card strong {
  margin-top: 12px;

  font-size: 22px;

  letter-spacing:
    -.03em;
}

@media (
  max-width: 1050px
) {

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

  .metric-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (
  max-width: 760px
) {

  .topbar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .hero-grid,
  .two-column {
    grid-template-columns:
      1fr;
  }

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

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

@media (
  max-width: 500px
) {

  .shell {
    width:
      min(100% - 22px, 1440px);
  }

  .category-grid,
  .metric-grid {
    grid-template-columns:
      1fr;
  }

  .audit-form {
    width: 100%;
  }

  .audit-form button {
    flex: 1;
  }
}

.logout-button {
  padding: 10px 14px;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #ffffff;
  color: #425268;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      145deg,
      #f3f6fb,
      #eaf0f8
    );
}

.login-shell {
  width:
    min(440px, calc(100% - 32px));
}

.login-card {
  padding: 34px;
  background: #ffffff;
  border:
    1px solid #dfe6ef;
  border-radius: 18px;
  box-shadow:
    0 20px 55px
    rgba(31,45,61,.09);
}

.login-brand {
  margin-bottom: 32px;
}

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

.login-heading p {
  margin: 8px 0 26px;
  color: #718096;
}

#login-form {
  display: grid;
  gap: 17px;
}

#login-form label {
  display: grid;
  gap: 7px;
  color: #415168;
  font-size: 13px;
  font-weight: 700;
}

#login-form input {
  width: 100%;
  padding: 12px 13px;
  border:
    1px solid #cfd8e5;
  border-radius: 9px;
  outline: none;
}

#login-form input:focus {
  border-color: #2457d6;
  box-shadow:
    0 0 0 3px
    rgba(36,87,214,.10);
}

#login-form button {
  margin-top: 5px;
  padding: 12px 15px;
  border: 0;
  border-radius: 9px;
  background: #2457d6;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.login-error {
  padding: 11px 12px;
  border-radius: 8px;
  background: #fce8e8;
  color: #982d2d;
  font-size: 13px;
}

@media (max-width: 760px) {
  .logout-button {
    width: 100%;
  }
}