:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #241a3f;
  background: #f6f3ff;
  line-height: 1.6;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: #5740b5; }
a:focus-visible { outline: 3px solid #5740b5; outline-offset: 4px; }
.site-header {
  max-width: 68rem;
  margin: auto;
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand { color: inherit; font-size: 1.25rem; font-weight: 750; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.page { max-width: 48rem; margin: 3rem auto; padding: 0 1.5rem; }
.card { padding: clamp(1.5rem, 5vw, 3rem); background: white; border-radius: 1.5rem; }
h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.2; margin: .75rem 0 1rem; }
p { max-width: 38rem; }
.eyebrow { font-weight: 700; color: #5740b5; }
.button {
  display: inline-block;
  padding: .75rem 1.25rem;
  margin-top: 1rem;
  border-radius: .75rem;
  background: #5740b5;
  color: white;
  font-weight: 700;
  text-decoration: none;
}
.button:hover { background: #44318f; }
.reference { overflow-wrap: anywhere; color: #625a75; font-size: .875rem; }
.skip-link { position: absolute; top: -5rem; left: 1rem; padding: .5rem; background: white; }
.skip-link:focus { top: 1rem; }
.auth-card { max-width: 32rem; margin: auto; }
.auth-form { display: grid; gap: .65rem; margin: 1.5rem 0; }
.auth-form input { width: 100%; box-sizing: border-box; border: 1px solid #8d839f;
  border-radius: .5rem; padding: .75rem; font: inherit; }
button { padding: .7rem 1rem; border: 0; border-radius: .5rem; background: #5740b5;
  color: white; font: inherit; cursor: pointer; }
button:hover { background: #44318f; }
:focus-visible { outline: 3px solid #8b63ee; outline-offset: 3px; }
.inline-form { margin: 0; }
.page { max-width: 72rem; }
.form-card { max-width: 40rem; margin: auto; }
.heading-row, .actions, .filters, .pagination { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.heading-row { justify-content: space-between; }
.actions { margin: 1rem 0; }
.filters { margin: 1.5rem 0; align-items: end; }
.filters label { display: grid; gap: .4rem; }
select, .filters input, .code-input { border: 1px solid #8d839f; border-radius: .5rem; padding: .65rem; font: inherit; max-width: 100%; }
.code-input { width: 100%; box-sizing: border-box; }
.table-scroll { overflow-x: auto; margin: 1rem 0; }
.table-scroll a { display: inline-block; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .85rem; border-bottom: 1px solid #ded9e8; vertical-align: top; }
caption { text-align: left; padding: .75rem 0; color: #625a75; }
.notice { padding: 1rem; border-radius: .6rem; background: #efebfb; }
.notice.error { background: #ffe8e5; color: #7c241a; }
.details { display: grid; grid-template-columns: minmax(6rem, 1fr) 3fr; gap: .8rem; overflow-wrap: anywhere; }
.details dt { font-weight: 700; } .details dd { margin: 0; }
.section-gap { margin-top: 1.5rem; }
.compact-form { max-width: 30rem; }
.account-row { padding: 1rem 0; border-bottom: 1px solid #ded9e8; }
.empty-state { padding: 2rem 0; }
[hidden] { display: none !important; }
#practice-room textarea { width: 100%; box-sizing: border-box; font: inherit; border: 1px solid #8d839f; border-radius: .5rem; padding: .8rem; }
#timer { font-size: 2rem; font-variant-numeric: tabular-nums; font-weight: 700; }
#practice-room details { margin: 1rem 0; }
#practice-room details label { margin-left: .6rem; }
#transcript { overflow-wrap: anywhere; }
button:disabled { cursor: wait; opacity: .6; }
.metric-grid, .score-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,12rem),1fr)); gap: 1rem; margin: 1.5rem 0; }
.metric, .score-grid > div { padding: 1rem; background: #f6f3ff; border: 1px solid #e7e0f6; border-radius: .8rem; }
.metric dt { font-size: .9rem; font-weight: 650; }
.metric dd { font-size: 1.8rem; font-weight: 750; margin: .35rem 0; overflow-wrap: anywhere; }
.metric p { font-size: .85rem; margin: 0; color: #625a75; }
.score-grid dd { margin: .3rem 0; font-weight: 700; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,24rem),1fr)); gap: 1rem; }
.trend-figure { margin: 1rem 0; min-width: 0; }
.trend-figure figcaption { font-weight: 650; }
.trend-figure svg { display: block; width: 100%; height: auto; }
.trend-figure text { fill: #625a75; font: 12px system-ui,sans-serif; }
.chart-axis { fill: none; stroke: #c9c0da; stroke-width: 1; }
.chart-line { fill: none; stroke: #5740b5; stroke-width: 2.5; }
.chart-point { fill: #5740b5; }
.block { display: block; }
.preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
.transcript { padding-left: 1.5rem; }
.transcript li { padding: 1rem 0; border-bottom: 1px solid #ded9e8; }
@media (max-width: 36rem) { .details { grid-template-columns: 1fr; gap: .35rem; } .details dd { margin-bottom: .7rem; } .filters label, .filters input { width: 100%; box-sizing: border-box; } }
@media (max-width: 30rem) { .page { margin-top: 1rem; } }