*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Ensure the hidden attribute always wins over explicit display rules
   (e.g. .landing uses display:flex, which would otherwise override [hidden]). */
[hidden] { display: none !important; }

:root {
  --bg:          oklch(0.975 0.003 265);
  --card:        #ffffff;
  --card-alt:    oklch(0.995 0.001 265);
  --hairline:    oklch(0.92 0.004 265);
  --hairline-soft: oklch(0.955 0.003 265);
  --text:        oklch(0.22 0.012 265);
  --text-2:      oklch(0.5 0.01 265);
  --text-3:      oklch(0.58 0.01 265);
  --brand:       oklch(0.55 0.15 285);
  --brand-hover: oklch(0.48 0.16 285);
  --link:        oklch(0.5 0.13 265);
  --ring-track:  oklch(0.93 0.004 265);
  --amber:       oklch(0.72 0.14 70);
  --shadow:      0 1px 2px oklch(0.6 0.01 265 / 0.04);
  --pass-bg:     oklch(0.95 0.03 155);
  --pass-fg:     oklch(0.5 0.14 155);
  --fail-bg:     oklch(0.95 0.03 25);
  --fail-fg:     oklch(0.58 0.17 25);
  --warn-bg:     oklch(0.96 0.05 75);
  --warn-fg:     oklch(0.55 0.13 75);
  --na-fg:       oklch(0.62 0.008 265);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.mono { font-family: 'JetBrains Mono', monospace; }

.page { max-width: 920px; margin: 0 auto; padding: 40px 24px 80px; }

/* ── Landing ─────────────────────────────────────────────────────── */
.landing {
  min-height: 62vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 20px 0;
}
.landing-title {
  font-size: 52px; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05; color: oklch(0.2 0.012 265); max-width: 760px;
}
.landing-intro {
  font-size: 19px; line-height: 1.55; color: var(--text-2);
  margin-top: 22px; max-width: 720px; text-wrap: pretty;
}
.url-form { display: flex; gap: 14px; width: 100%; max-width: 820px; margin-top: 40px; }
.url-input {
  flex: 1; border: 1px solid oklch(0.88 0.004 265); border-radius: 13px;
  padding: 18px 22px; font-family: 'JetBrains Mono', monospace; font-size: 16px;
  color: var(--text); background: #fff; outline: none; box-shadow: var(--shadow);
}
.url-input:focus { border-color: var(--brand); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-primary {
  flex: none; border: none; background: var(--brand); color: #fff;
  border-radius: 13px; padding: 0 34px; min-height: 56px;
  font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s;
}
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:disabled { opacity: .65; cursor: not-allowed; }
.btn-primary.btn-sm, .btn-outline.btn-sm {
  min-height: 0; padding: 9px 18px; border-radius: 9px; font-size: 14px;
}
.btn-outline {
  border: 1px solid var(--brand); background: transparent; color: var(--brand);
  font-family: inherit; font-weight: 700; cursor: pointer; transition: background .15s;
}
.btn-outline:hover { background: oklch(0.55 0.15 285 / 0.07); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid oklch(0.88 0.004 265); background: #fff; color: var(--text-2);
  border-radius: 8px; padding: 7px 13px; font-family: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; transform-origin: center; }

.error-box {
  background: var(--fail-bg); border: 1px solid oklch(0.85 0.06 25);
  color: var(--fail-fg); border-radius: 10px; padding: 14px 18px; margin-top: 22px;
  max-width: 820px; width: 100%; font-size: 14px;
}

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 18px; box-shadow: var(--shadow);
}

/* ── Report top actions ──────────────────────────────────────────── */
.report-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }

/* ── Score / header card ─────────────────────────────────────────── */
.score-card { display: flex; gap: 34px; align-items: flex-start; padding: 34px 36px; }
.score-ring-wrap { display: flex; flex-direction: column; align-items: center; flex: none; }
.overall-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 12px;
}
.score-ring-inner { position: relative; width: 150px; height: 150px; }
.score-ring { display: block; }
.score-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-label span { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text); }
.score-label small { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--text-3); margin-top: 2px; }

.score-meta { flex: 1; min-width: 0; padding-top: 4px; }
.score-meta h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.22; color: oklch(0.2 0.012 265); }
.score-url { display: inline-block; margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--link); text-decoration: none; word-break: break-all; }
.score-url:hover { text-decoration: underline; }

.chip-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.rating-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px;
  background: var(--pass-bg); color: var(--pass-fg);
}
.rating-chip .rating-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.page-type-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.page-type-label { font-size: 14px; font-weight: 600; color: var(--text-2); }
.page-type-select {
  min-width: 280px; border: 1px solid oklch(0.9 0.004 265); border-radius: 9px;
  padding: 9px 13px; font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--text); background: var(--card-alt); cursor: pointer; outline: none;
}
.page-type-select:focus { border-color: var(--brand); }
.page-type-warning {
  font-size: 13px; color: var(--warn-fg); background: var(--warn-bg);
  border: 1px solid oklch(0.88 0.07 75); border-radius: 8px; padding: 8px 12px; margin-top: 12px;
}

/* ── Quick Wins ──────────────────────────────────────────────────── */
.quick-wins { overflow: hidden; margin-top: 28px; }
.qw-accent { height: 3px; background: var(--amber); }
.quick-wins-body { padding: 30px 34px; }
.qw-title-row { display: flex; align-items: center; gap: 11px; }
.qw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
.quick-wins h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.qw-subtitle { font-size: 14.5px; color: var(--text-2); margin-top: 7px; margin-left: 20px; }
#quickWinList { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.qw-item {
  display: flex; gap: 16px; border: 1px solid var(--hairline-soft);
  border-radius: 13px; padding: 20px 22px; background: var(--card-alt);
}
.qw-num {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  background: var(--amber); color: #fff; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.qw-content { min-width: 0; }
.qw-label { font-size: 16px; font-weight: 700; color: var(--text); }
.qw-fix { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin-top: 6px; text-wrap: pretty; }

/* ── Categories ──────────────────────────────────────────────────── */
.categories { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.category-card {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow);
}
.category-card.na-category { background: oklch(0.98 0.002 265); border-color: oklch(0.93 0.003 265); }

.cat-header { display: flex; align-items: center; gap: 18px; padding: 22px 28px; cursor: pointer; }
.cat-header.not-clickable { cursor: default; }
.cat-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cat-header h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; flex: none; }
.cat-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--ring-track); overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: 999px; transition: width .6s ease; }
.cat-count { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; flex: none; }
.cat-na-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--na-fg); flex: none; }
.cat-chevron { color: var(--text-3); flex: none; transition: transform .2s ease; }
.cat-chevron.open { transform: rotate(180deg); }

.checks-list { border-top: 1px solid oklch(0.94 0.003 265); }
.check-row { display: flex; gap: 15px; padding: 20px 28px; border-bottom: 1px solid var(--hairline-soft); }
.check-row:last-child { border-bottom: none; }
.check-icon {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; margin-top: 1px;
}
.check-icon.pass { background: var(--pass-bg); color: var(--pass-fg); }
.check-icon.fail { background: var(--fail-bg); color: var(--fail-fg); }
.check-icon.warn { background: var(--warn-bg); color: var(--warn-fg); }
.check-icon.na   { background: oklch(0.94 0.003 265); color: var(--na-fg); }
.check-body { flex: 1; min-width: 0; }
.check-label { font-size: 15.5px; font-weight: 700; color: var(--text); }
.check-detail { font-size: 14px; line-height: 1.55; color: var(--text-2); margin-top: 4px; }
.check-list { list-style: none; margin: 8px 0 0 0; padding: 0; }
.check-list li { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.item-thumb { width: 34px; height: 34px; flex: none; object-fit: cover; border-radius: 5px; border: 1px solid var(--hairline); background: #fff; }
.item-thumb.broken { background: var(--ring-track) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/16px no-repeat; }
.item-url { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.4; color: var(--text-2); word-break: break-all; }
.more-btn { margin-top: 8px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand); background: none; border: none; padding: 0; cursor: pointer; }
.more-btn:hover { text-decoration: underline; }
.check-fix-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); margin-top: 10px; }
.check-fix { font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.55; color: var(--link); margin-top: 4px; }
.check-pts { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; flex: none; }
.check-pts.pass { color: var(--pass-fg); }
.check-pts.fail { color: var(--fail-fg); }
.check-pts.warn { color: var(--warn-fg); }
.check-pts.na   { color: var(--na-fg); }

@media (max-width: 640px) {
  .landing-title { font-size: 34px; }
  .landing-intro { font-size: 16px; }
  .url-form { flex-direction: column; }
  .btn-primary { padding: 16px 24px; }
  .score-card { flex-direction: column; align-items: center; text-align: center; }
  .score-meta { text-align: left; width: 100%; }
  .report-actions { flex-wrap: wrap; }
}