:root {
  color-scheme:light dark;
  --bg:#f5f2ed;
  --surface:#fffdf9;
  --ink:#242421;
  --muted:#66625b;
  --line:#d8d5cf;
  --accent:#ac451f;
  --on-accent:#fff;
  --tint:#ac451f12;
  --error:#9d2929;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  background:var(--bg);
  color:var(--ink);
  --safe-top:max(env(safe-area-inset-top),var(--tg-safe-area-inset-top,0px),var(--tg-content-safe-area-inset-top,0px));
  --safe-bottom:max(env(safe-area-inset-bottom),var(--tg-safe-area-inset-bottom,0px),var(--tg-content-safe-area-inset-bottom,0px))
}

@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#22292e;
    --surface:#2c343b;
    --ink:#f4f1e9;
    --muted:#b6bfc5;
    --line:#465159;
    --accent:#ffae69;
    --on-accent:#261c13;
    --tint:#ffae6914;
    --error:#ffacac
  }
}

:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#22292e;
  --surface:#2c343b;
  --ink:#f4f1e9;
  --muted:#b6bfc5;
  --line:#465159;
  --accent:#ffae69;
  --on-accent:#261c13;
  --tint:#ffae6914;
  --error:#ffacac
}

:root[data-theme="light"] {
  color-scheme:light
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

button,input,select,textarea {
  font:inherit
}

button,a,input,summary,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button,a {
  touch-action:manipulation
}

button {
  cursor:pointer
}

button:disabled {
  opacity:.5;
  cursor:default
}

button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:4px
}

a {
  color:var(--accent);
  text-underline-offset:4px
}

button {
  min-height:44px;
  border:0;
  color:inherit;
  background:none;
  padding:10px 6px;
  line-height:1.4
}

h1 {
  font-size:clamp(28px,5vw,34px);
  line-height:1.13;
  letter-spacing:-.035em;
  margin:4px 0 12px;
  font-weight:700
}

h2 {
  font-size:20px;
  line-height:1.3;
  margin:0 0 10px
}

p {
  font-size:15px;
  line-height:1.6;
  margin:0 0 16px;
  overflow-wrap:anywhere
}

svg {
  display:block
}

.icon {
  width:20px;
  height:20px;
  flex-shrink:0
}

svg.icon,svg.brand-mark {
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

.app-shell {
  max-width:1120px;
  margin:auto;
  min-height:100dvh;
  padding-top:var(--safe-top);
  display:flex;
  flex-direction:column
}

.topbar {
  padding:24px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:12px
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--ink)
}

.brand strong {
  font-size:12px;
  letter-spacing:.075em;
  text-transform:uppercase;
  display:block
}

.brand small {
  font-size:11px;
  color:var(--muted);
  display:block;
  margin-top:5px
}

.brand-mark {
  width:26px;
  height:26px;
  color:var(--accent)
}

.icon-button {
  display:grid;
  place-items:center;
  width:44px;
  flex-shrink:0
}

main {
  padding:40px 32px 48px;
  flex:1;
  outline:0;
  min-width:0
}

.navigation {
  display:flex;
  gap:8px;
  border-top:1px solid var(--line);
  padding:8px 16px calc(8px + var(--safe-bottom));
  background:var(--bg)
}

.navigation a {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex:1;
  min-height:48px;
  text-decoration:none;
  color:var(--muted);
  font-size:13px
}

.navigation a[aria-current="page"] {
  color:var(--accent);
  font-weight:600
}

.kicker {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--accent);
  font-weight:650;
  margin-bottom:8px
}

.muted {
  color:var(--muted);
  font-size:13px;
  line-height:1.55
}

.primary,.secondary {
  width:100%;
  border-radius:14px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  text-align:center;
  padding:15px 14px;
  font-weight:650;
  margin-top:12px
}

.primary {
  background:var(--accent);
  color:var(--on-accent)
}

.secondary {
  border:1px solid var(--line);
  font-weight:500
}

.text-button {
  color:var(--accent)
}

.back {
  margin:-10px 0 16px
}

.card {
  padding:22px;
  background:var(--surface);
  border-radius:20px;
  border:1px solid var(--line);
  margin-top:22px
}

.card p:last-child {
  margin-bottom:0
}

.guest-notice {
  margin:22px 0 0;
  padding:14px 16px;
  border-left:3px solid var(--accent);
  background:var(--tint);
  border-radius:0 12px 12px 0;
  color:var(--ink)
}

.confirmation {
  width:min(calc(100% - 32px),440px);
  padding:24px;
  border:1px solid var(--line);
  border-radius:20px;
  color:var(--ink);
  background:var(--surface);
  box-shadow:0 20px 60px #0004
}

.confirmation::backdrop {
  background:#0008
}

.confirmation h2 {
  margin-bottom:8px
}

.confirmation-actions {
  display:flex;
  gap:12px;
  margin-top:24px
}

.confirmation-actions .primary,.confirmation-actions .secondary {
  flex:1;
  width:auto;
  margin:0
}

.resume {
  border-bottom:1px solid var(--line);
  padding-bottom:24px;
  margin-bottom:26px
}

.empty {
  padding:30px 0 12px
}

.empty-emblem {
  color:var(--muted);
  width:66px;
  height:66px;
  margin:8px 0 24px
}

.radar {
  width:100%;
  height:auto;
  max-height:265px;
  margin:6px auto
}

.radar .grid {
  fill:none;
  stroke:var(--line);
  stroke-width:1
}

.radar .area {
  fill:var(--tint);
  stroke:var(--accent);
  stroke-width:2.5
}

.radar .point {
  fill:var(--accent)
}

.radar text {
  font-size:11px;
  fill:var(--muted)
}

.values {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px;
  margin:10px 0 12px
}

.values>div {
  display:flex;
  gap:8px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:10px 0
}

.values dt {
  display:flex;
  align-items:center;
  gap:7px;
  flex:1;
  font-size:13px
}

.values .icon {
  width:16px;
  height:16px;
  color:var(--muted)
}

.values dd {
  font-size:16px;
  font-weight:650;
  margin:0;
  font-variant-numeric:tabular-nums
}

details {
  font-size:13px;
  line-height:1.6;
  color:var(--muted)
}

summary {
  cursor:pointer;
  min-height:44px;
  padding:12px 0
}

details p {
  font-size:14px
}

.steps {
  display:flex;
  list-style:none;
  padding:0;
  gap:7px;
  margin:20px 0 26px
}

.steps li {
  height:5px;
  flex:1;
  background:var(--line);
  border-radius:3px
}

.steps .done {
  background:var(--accent)
}

.steps .current {
  background:var(--accent);
  opacity:.45
}

.question {
  font-size:23px;
  line-height:1.45;
  letter-spacing:-.015em;
  margin:20px 0;
  white-space:pre-wrap
}

.recorder {
  text-align:center;
  padding:26px 18px;
  background:var(--surface);
  border-radius:20px;
  margin:24px 0 12px
}

.mic-disc {
  width:76px;
  height:76px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--tint);
  color:var(--accent);
  margin:0 auto 16px
}

.mic-disc .icon {
  width:29px;
  height:29px
}

.recording .mic-disc {
  box-shadow:0 0 0 2px var(--accent)
}

.timer {
  font-size:28px;
  font-variant-numeric:tabular-nums;
  font-weight:650;
  letter-spacing:.02em
}

.recorder audio {
  display:block;
  width:100%;
  margin:16px 0
}

.utilities {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.utilities button {
  font-size:14px;
  color:var(--muted)
}

.menu {
  border-top:1px solid var(--line);
  padding-top:10px
}

.menu button {
  display:block;
  width:100%;
  text-align:left
}

.history-row {
  padding:22px 0;
  border-bottom:1px solid var(--line)
}

.history-row h2 {
  font-size:18px
}

.history-row p {
  margin-bottom:6px
}

.focus-row {
  display:flex;
  gap:14px;
  align-items:center;
  text-align:left;
  width:100%;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}

.focus-row .icon {
  color:var(--accent)
}

.focus-row span {
  flex:1
}

.notice,.error {
  margin:18px 24px 0;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:13px;
  font-size:14px;
  line-height:1.5;
  overflow-wrap:anywhere
}

.error {
  color:var(--error)
}

.error button {
  display:block;
  color:inherit;
  font-weight:600;
  text-decoration:underline
}

.notice p,.error p {
  margin:0;
  font-size:14px
}

.field {
  display:block;
  margin:22px 0
}

.field>span {
  display:block;
  font-size:14px;
  margin-bottom:8px
}

input:not([type="checkbox"]),select {
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px;
  color:var(--ink);
  min-height:48px
}

input[type="checkbox"] {
  width:20px;
  height:20px;
  flex-shrink:0;
  accent-color:var(--accent)
}

.choice {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.6;
  margin:14px 0
}

.terms,.transcript {
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

.consent-document {
  padding:16px 0;
  border-bottom:1px solid var(--line)
}

.consent-document h2 {
  font-size:18px
}

.skip-link {
  position:absolute;
  left:12px;
  top:-100px;
  z-index:10;
  padding:12px;
  background:var(--surface)
}

.skip-link:focus {
  top:12px
}

[hidden] {
  display:none!important
}

.spin {
  width:28px;
  height:28px;
  border:2px solid var(--line);
  border-top-color:var(--accent);
  border-radius:50%;
  margin:12px auto 18px;
  animation:rotate 1s linear infinite
}

@keyframes rotate {
  to {
    transform:rotate(360deg)
  }
}

@media(prefers-reduced-motion:reduce) {
  .spin {
    animation:none
  }
}

/* Shared surfaces keep the existing theme tokens in both colour modes. */
.home-grid { display:grid; gap:24px; margin-top:32px }
.home-grid .card { margin:0; min-width:0 }
.next-practice { border-top:3px solid var(--accent) }
.next-practice .primary { margin-top:24px }
.practice-position { font-size:14px; font-weight:650; margin:24px 0 0 }
.practice-guide {
  list-style:none;
  counter-reset:practice-step;
  border-top:1px solid var(--line);
  padding:22px 0 0;
  margin:28px 0 0;
  display:grid;
  gap:14px
}
.practice-guide li { counter-increment:practice-step; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; line-height:1.5 }
.practice-guide li::before { content:counter(practice-step, decimal-leading-zero); color:var(--accent); font-size:11px; font-weight:650; font-variant-numeric:tabular-nums }
.strength-card .empty { padding:16px 0 4px }
.strength-card .empty-emblem { width:88px; height:88px; padding:18px; color:var(--accent); background:var(--tint); border-radius:22px; margin:8px 0 24px }
.strength-card>h2 { font-size:23px; letter-spacing:-.02em }
.history-shortcut { margin-top:32px; padding:24px 0; border-top:1px solid var(--line) }
.history-shortcut>.icon { color:var(--accent); margin-bottom:12px }
.history-shortcut h2 { font-size:16px; margin-bottom:4px }
.history-shortcut p { margin-bottom:0 }
.history-shortcut .text-button { margin-top:8px }
.icon-button { border:1px solid var(--line); border-radius:50%; background:var(--surface) }
.history-row { padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--surface); margin-top:16px }
.focus-row { gap:16px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); margin-top:12px }
.focus-row span:last-child { flex:0 }
.recorder { border:1px solid var(--line) }
@media(hover:hover) {
  .primary:hover:not(:disabled) { filter:brightness(.94) }
  .secondary:hover:not(:disabled),.focus-row:hover:not(:disabled),.icon-button:hover { background:var(--tint) }
  .text-button:hover:not(:disabled) { text-decoration:underline; text-underline-offset:4px }
}
@media(max-width:699px) {
  .topbar { padding:20px 24px }
  main { padding:28px 24px 32px }
  .home-grid { gap:20px; margin-top:24px }
  .navigation { position:sticky; bottom:0; z-index:2 }
  .navigation a[aria-current="page"] { background:var(--tint); border-radius:12px }
}

@media(min-width:700px) {
  .navigation {
    order:-1;
    justify-content:flex-start;
    border-top:0;
    border-bottom:1px solid var(--line);
    padding:0 32px;
    gap:28px
  }
  .topbar { order:-2; border-bottom:0 }
  .navigation a { flex:0 0 auto; padding:8px 0; border-bottom:2px solid transparent }
  .navigation a[aria-current="page"] { border-bottom-color:var(--accent) }
  main:not([data-screen="home"]) { width:min(100%, 720px); align-self:center }
  .home-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start }
  .next-practice h2 { max-width:14ch; font-size:32px; line-height:1.2; letter-spacing:-.025em }
  .next-practice { padding:32px }
  .strength-card { padding:28px }
  .home-grid .card { height:100% }
  .history-shortcut { display:flex; align-items:center; gap:20px }
  .history-shortcut>div { flex:1 }
  .history-shortcut .text-button { flex-shrink:0 }

}

@media(max-width:360px) {
  main {
    padding:24px 16px
  }
  .topbar {
    padding:16px
  }
  .notice,.error {
    margin-left:16px;
    margin-right:16px
  }
  .card {
    padding:18px
  }
  .values {
    gap:0 10px
  }
  .values dt {
    font-size:12px
  }
  .question {
    font-size:21px
  }
}

/* Long recordings share the main app typography and card surfaces. */
.recordings-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.recordings-header h2 { flex: 1 0 100%; }
.recordings-header input { max-width: 100%; }
.recording-card { border-top: 1px solid var(--line, #88919955); margin-top: 24px; padding-top: 20px; overflow-wrap: anywhere; }
.recording-card-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.recording-card-heading h3 { margin: 0; }
.recording-card button { margin: 8px 8px 0 0; }
.recording-card progress { width: min(100%, 360px); margin-right: 12px; }
.recording-revisions { border-top: 1px solid var(--line, #88919955); margin-top: 20px; padding-top: 12px; }
.recording-revision-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }
.recording-revision-row p { margin: 6px 0; }
.recording-transcript { max-height: 55vh; overflow: auto; margin: 20px 0; }
.transcript-time { font-variant-numeric: tabular-nums; color: var(--muted, #67717c); }
.transcript-segment.uncertain { border-left: 3px solid #c29343; padding-left: 12px; }
.recording-state { font-size: .9rem; color: var(--muted, #67717c); }

.recording-editor-row { margin: 20px 0; }
.recording-editor-row textarea, .recording-editor-row select { display: block; width: 100%; margin: 8px 0; }
.recording-editor-row label { display: flex; align-items: center; }
.recording-editor-row input[type="checkbox"] { width: auto; }
.recording-report details { margin: 16px 0; }
.recording-observation { border-left: 2px solid #88919966; margin: 16px 0; padding-left: 16px; }
.recording-observation blockquote { margin: 8px 0; }

/* Local resume review shares the app card system and never renders untrusted text as HTML. */
.resumes-panel { display:grid; gap:20px; margin-top:24px; }
.resumes-header h2, .resume-list h2, .resume-upload h2, .resume-consent h2 { margin-top:0; }
.resume-row, .resume-finding { border-top:1px solid var(--line); padding:18px 0; overflow-wrap:anywhere; }
.resume-row h3, .resume-finding h3 { margin:0 0 8px; }
.resume-row .text-button { margin-top:4px; }
.resume-detail { border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:24px; overflow-wrap:anywhere; }
.resume-detail > h2 { margin-top:0; }
.resume-editor textarea { box-sizing:border-box; display:block; min-height:260px; resize:vertical; width:100%; }
.resume-editor .primary { margin-top:12px; }
.resume-finding blockquote { border-left:3px solid var(--accent); margin:12px 0; padding-left:14px; white-space:pre-wrap; }
.resume-correction, .resume-question { background:var(--tint); border-radius:10px; margin-top:12px; padding:14px; }
.resume-correction h3, .resume-question h3 { font-size:14px; margin:0 0 6px; }
.resume-correction p, .resume-question p { margin:0; }
.resume-upload input { display:block; margin:14px 0; max-width:100%; }
.resume-consent .choice { margin-bottom:14px; }