*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f4fbff;
  --surface: #ffffff;
  --surface-alt: #e9f6ff;
  --table-head: #e4f1f8;
  --table-row: #f2f8fb;
  --border: #7ea9c4;
  --text: #16364e;
  --text-muted: #5c7b93;
  --blue: #005ea8;
  --cyan: #27a7e8;
  --green: #2f9e44;
  --lime: #a6ce39;
  --amber: #b68500;
  --red: #b42318;
  --grey: #64748b;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
html { font-size: 14px; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at top right, rgba(39,167,232,.14), transparent 28%), radial-gradient(circle at top left, rgba(166,206,57,.14), transparent 24%), linear-gradient(180deg, #fbfeff 0%, var(--bg) 100%);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); }
header { background: rgba(255,255,255,.94); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; }
.header-inner { max-width: 1500px; margin: 0 auto; padding: .65rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 1rem; color: inherit; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 52px; width: auto; display: block; }
.header-title { display: flex; flex-direction: column; }
.brand-kicker { color: var(--cyan); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
header h1 { font-size: .98rem; font-weight: 700; white-space: nowrap; }
.header-sub { font-size: .72rem; color: var(--text-muted); }
nav { display: flex; gap: .4rem; flex-wrap: wrap; }
.nav-btn, .repo-link, .resource-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); border-radius: 999px; padding: .3rem .85rem; cursor: pointer; font-size: .82rem; transition: border-color .15s, color .15s, background .15s, transform .15s; }
.nav-btn:hover, .repo-link:hover, .resource-btn:hover { border-color: var(--cyan); color: var(--text); background: var(--surface-alt); transform: translateY(-1px); text-decoration: none; }
.nav-btn.active { border-color: var(--blue); color: var(--text); background: linear-gradient(135deg, rgba(39,167,232,.12), rgba(166,206,57,.14)); }
main { flex: 1; max-width: 1500px; width: 100%; margin: 0 auto; padding: 1.5rem; }
.intro-panel { margin-bottom: 1.25rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(135deg, rgba(39,167,232,.16), rgba(166,206,57,.12)), var(--surface); box-shadow: 0 10px 24px rgba(0,94,168,.06); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.intro-panel p { max-width: 78rem; font-size: .9rem; line-height: 1.6; }
.intro-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.intro-actions label { font-size: .82rem; color: var(--text-muted); }
select, input { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: .42rem .65rem; font-size: .82rem; }
footer { border-top: 1px solid var(--border); text-align: center; padding: .65rem; font-size: .78rem; color: var(--text-muted); }
#loading { color: var(--text-muted); padding: 2rem 0; }
.view-title { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.view-sub { color: var(--text-muted); font-size: .82rem; margin-bottom: 1.25rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat-card, .recipe-card, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 24px rgba(23,63,95,.07); }
.stat-card { padding: 1rem; }
.stat-number { font-size: 1.65rem; font-weight: 800; color: var(--blue); }
.stat-label { color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1rem; }
.recipe-card { padding: 1rem; border-top: 4px solid var(--grey); position: relative; overflow: hidden; }
.recipe-card.style-tutorial { border-top-color: var(--cyan); }
.recipe-card.style-easy { border-top-color: var(--green); }
.recipe-card.style-advanced { border-top-color: var(--amber); }
.recipe-card.style-regional { border-top-color: #7c3aed; }
.recipe-card h3 { font-size: .98rem; margin-bottom: .35rem; }
.recipe-path { color: var(--text-muted); font-family: var(--mono); font-size: .72rem; overflow-wrap: anywhere; }
.recipe-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: .75rem 0; }
.chip, .status { display: inline-flex; align-items: center; border-radius: 999px; padding: .16rem .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.chip { background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-muted); }
.status-passed { background: var(--green); border: 1px solid #1f7a36; color: #fff; }
.status-failed { background: #d92d20; border: 1px solid var(--red); color: #fff; }
.status-timeout, .status-missing-result, .status-incomplete { background: #fff2c2; border: 1px solid var(--amber); color: #7a5600; }
.status-submitted { background: #dff0fb; border: 1px solid var(--blue); color: #0d5b90; }
.status-not-run { background: #e5e7eb; border: 1px dashed var(--border); color: #475569; }
.status-disabled { background: #cfd4da; border: 1px solid var(--grey); color: #111827; }
.muted { color: var(--text-muted); }
.recipe-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 24px rgba(23,63,95,.07); }
.recipe-table th, .recipe-table td { padding: .68rem .75rem; border-bottom: 1px solid #d7e8f2; text-align: left; vertical-align: top; }
.recipe-table th { background: var(--table-head); font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.recipe-table tr:nth-child(even) td { background: var(--table-row); }
.recipe-table tr:last-child td { border-bottom: 0; }
.recipe-table code { font-size: .74rem; }
.panel { padding: 1rem; margin-bottom: 1rem; }
.style-bars { display: grid; gap: .7rem; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 48px; gap: .75rem; align-items: center; }
.bar-track { height: 10px; border-radius: 999px; background: #dbeafe; overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--lime)); }
.detail-list { display: grid; gap: .75rem; }
.detail-item { padding: .8rem; border: 1px solid #d7e8f2; border-radius: 12px; background: #fbfeff; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: .5rem; margin-top: .55rem; font-size: .82rem; }
@media (max-width: 800px) { header h1 { white-space: normal; } .brand-logo { height: 42px; } .recipe-table { font-size: .82rem; } .hide-small { display: none; } }