/* ============================================================================
   OSHA 30 CONSTRUCTION — PRACTICE EXAM
   Aesthetic: "Industrial Safety Console" — high-visibility yellow + safety
   orange on dark asphalt, hazard-tape accents, placard cards, inspection
   stamps, field-meter typography.
   ============================================================================ */

/* ----------------------------- Design tokens ---------------------------- */
:root {
  /* surfaces */
  --bg:        #14151a;
  --bg-2:      #191b21;
  --surface:   #1e212a;
  --surface-2: #252934;
  --surface-3: #2d323e;
  --line:      #333845;
  --line-soft: #2a2e39;

  /* high-vis brand */
  --hi:    #ffd21e;   /* safety yellow  */
  --hi-d:  #e6b800;   /* yellow pressed */
  --orange:#ff7a1a;   /* safety orange  */
  --ok:    #34d399;   /* safety green   */
  --ok-d:  #0f3d30;
  --bad:   #ff5b52;   /* warning red    */
  --bad-d: #401715;

  /* ink */
  --ink:    #14151a;  /* dark text on yellow */
  --text:   #f1f3f6;
  --muted:  #9aa2b1;
  --muted-2:#6c7484;

  /* type */
  --display: "Oswald", "Arial Narrow", "Haettenschweiler", sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* hazard tape */
  --tape: repeating-linear-gradient(-45deg,
            var(--hi) 0 16px, #14151a 16px 32px);

  --radius: 6px;
  --shadow: 0 18px 40px -22px rgba(0,0,0,.8);
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--text);
  background:
    radial-gradient(900px 500px at 82% -8%, rgba(255,122,26,.12), transparent 60%),
    radial-gradient(820px 480px at 6% 0%, rgba(255,210,30,.10), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* faint engineered dot-grid texture over everything */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.025) 1px, transparent 1.4px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--hi); color: var(--ink); }

/* ------------------------------- Top bar -------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(14px, 4vw, 34px);
  background: rgba(20,21,26,.82);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--line-soft);
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--text);
}
.brand-icon { color: var(--hi); display: inline-flex; filter: drop-shadow(0 2px 6px rgba(255,210,30,.35)); }
.brand-text {
  font-family: var(--display);
  font-weight: 700; font-size: 1.32rem; letter-spacing: .04em;
  display: inline-flex; align-items: baseline; gap: 6px; line-height: 1;
}
.brand-text strong { color: var(--ink); background: var(--hi); padding: 1px 6px; border-radius: 3px; }
.brand-text em {
  font-style: normal; font-size: .62rem; letter-spacing: .32em;
  color: var(--muted); font-family: var(--mono); align-self: center;
  margin-left: 2px;
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
.hud {
  font-family: var(--mono); font-size: .76rem; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 100px;
  background: var(--surface);
}
.hud-sep { color: var(--muted-2); }
.hud-mode { color: var(--hi); text-transform: uppercase; letter-spacing: .08em; }
.hud-score { color: var(--ok); }

.hazard-strip { height: 6px; background: var(--tape); opacity: .9; }

/* --------------------------------- Layout ------------------------------- */
#app {
  position: relative; z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 46px) clamp(14px, 4vw, 34px) 60px;
}
.view { animation: viewIn .4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.section-label {
  font-family: var(--mono);
  font-size: .76rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
  margin: 38px 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.section-label::before {
  content: ""; width: 14px; height: 14px; background: var(--hi);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* --------------------------------- Hero --------------------------------- */
.hero { padding: 18px 0 8px; }
.kicker {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin: 0 0 14px;
}
.hero-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5rem); line-height: .96; letter-spacing: .005em;
  margin: 0 0 18px; text-transform: uppercase;
}
.hero-title .hl {
  color: var(--ink);
  background: linear-gradient(180deg, var(--hi), var(--hi-d));
  padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  box-shadow: 0 6px 22px -8px rgba(255,210,30,.6);
}
.hero-sub { max-width: 60ch; color: var(--muted); font-size: 1.06rem; margin: 0 0 22px; }
.hero-sub strong { color: var(--text); }
.hero-meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px;
  padding: 0; margin: 0; font-family: var(--mono); font-size: .82rem; color: var(--muted);
}
.hero-meta li { display: inline-flex; align-items: baseline; gap: 7px; }
.hero-meta li + li { position: relative; }
.hero-meta b { color: var(--hi); font-size: 1.18rem; font-weight: 600; }

/* ------------------------------ Mode cards ------------------------------ */
.mode-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.mode-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; gap: 8px;
  padding: 22px 20px 18px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  animation: cardIn .5s both;
}
.mode-grid .mode-card:nth-child(1) { animation-delay: .04s; }
.mode-grid .mode-card:nth-child(2) { animation-delay: .10s; }
.mode-grid .mode-card:nth-child(3) { animation-delay: .16s; }
.mode-grid .mode-card:nth-child(4) { animation-delay: .22s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.mode-card::after { /* hazard hover accent */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--tape); transform: translateY(-6px); transition: transform .2s ease;
}
.mode-card:hover, .mode-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--hi); border-left-color: var(--hi);
  box-shadow: var(--shadow);
  outline: none;
}
.mode-card:hover::after, .mode-card:focus-visible::after { transform: none; }
.mode-card--exam { border-left-color: var(--orange); }
.mode-card--exam:hover { border-color: var(--orange); }
.mode-card--exam .mode-num { color: rgba(255,122,26,.16); -webkit-text-stroke: 1px rgba(255,122,26,.4); }
.mode-card--exam .mode-go { color: var(--orange); }

.mode-num {
  font-family: var(--display); font-weight: 700; font-size: 3.1rem; line-height: .8;
  color: rgba(255,210,30,.12); -webkit-text-stroke: 1px rgba(255,210,30,.42);
  margin-bottom: 4px;
}
.mode-name { font-family: var(--display); font-weight: 600; font-size: 1.42rem; letter-spacing: .02em; text-transform: uppercase; }
.mode-desc { color: var(--muted); font-size: .92rem; flex: 1; }
.mode-go { font-family: var(--mono); font-size: .82rem; color: var(--hi); margin-top: 6px; letter-spacing: .02em; }

/* ------------------------------- Dashboard ------------------------------ */
.dash { display: grid; gap: 16px; }
.stat-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.tile-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.tile-value { font-family: var(--display); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--text); }
.tile-value--sm { font-size: 1.06rem; font-family: var(--body); font-weight: 600; line-height: 1.2; }
.tile--good { border-top-color: var(--ok); }
.tile--good .tile-value { color: var(--ok); }
.tile--bad { border-top-color: var(--bad); }
.tile--bad .tile-value { color: var(--bad); }

.topic-board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 20px; }
.topic-board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.topic-board-head h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: .03em; text-transform: uppercase; }

.topic-bars { display: flex; flex-direction: column; gap: 11px; }
.bar-row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.bar-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bar-name { font-size: .9rem; font-weight: 500; }
.bar-name .tag {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; margin-left: 8px; vertical-align: middle;
}
.tag-best { background: rgba(52,211,153,.16); color: var(--ok); }
.tag-worst { background: rgba(255,91,82,.16); color: var(--bad); }
.bar-num { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.bar-track { height: 9px; background: var(--surface-3); border-radius: 100px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 100px; width: 0; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.empty-note { color: var(--muted-2); font-size: .9rem; margin: 14px 2px 0; }

/* -------------------------------- Buttons ------------------------------- */
.btn {
  font-family: var(--mono); font-weight: 600; font-size: .86rem; letter-spacing: .04em;
  border-radius: var(--radius); border: 1px solid transparent;
  padding: 12px 20px; transition: transform .12s ease, background .15s ease, border-color .15s, color .15s, opacity .15s;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-solid { background: var(--hi); color: var(--ink); }
.btn-solid:not(:disabled):hover { background: var(--hi-d); box-shadow: 0 8px 22px -10px rgba(255,210,30,.7); }
.btn-outline { background: transparent; border-color: var(--hi); color: var(--hi); }
.btn-outline:hover { background: rgba(255,210,30,.08); }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); border-color: var(--line); }
.btn-sm { padding: 9px 15px; font-size: .8rem; }
.btn-xs { padding: 6px 11px; font-size: .72rem; }
.btn-exit { padding: 8px 14px; }
:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }

/* ----------------------------- Resume banner ---------------------------- */
.resume-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(255,122,26,.14), rgba(255,210,30,.06));
  border: 1px solid var(--line); border-left: 3px solid var(--orange);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 22px;
}
.resume-info { display: flex; align-items: center; gap: 12px; font-size: .94rem; }
.resume-flag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  background: var(--orange); color: var(--ink); padding: 3px 8px; border-radius: 3px;
}
.resume-actions { display: flex; gap: 8px; }

/* ------------------------------ Progress -------------------------------- */
.progress-wrap { margin: 4px 0 22px; }
.progress-meter {
  height: 12px; border-radius: 100px; background: var(--surface-3);
  border: 1px solid var(--line); overflow: hidden; position: relative;
}
.progress-meter::before { /* fill */
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%);
  background: linear-gradient(90deg, var(--orange), var(--hi));
  transition: width .45s cubic-bezier(.3,.8,.3,1);
}
.progress-meter::after { /* segment ticks */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(4% - 2px), rgba(20,21,26,.55) calc(4% - 2px) 4%);
  pointer-events: none;
}
.progress-text {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--mono); font-size: .8rem; color: var(--muted);
}
.progress-score { color: var(--hi); }

/* ----------------------------- Question card ---------------------------- */
.qcard {
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 3.5vw, 34px);
  box-shadow: var(--shadow);
}
.qcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.topic-chip {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--hi); color: var(--ink); font-weight: 600;
  padding: 5px 11px; border-radius: 100px;
}
.q-index { font-family: var(--display); font-weight: 700; font-size: 2.4rem; line-height: .7; color: rgba(255,255,255,.07); -webkit-text-stroke: 1px rgba(255,255,255,.14); }
.qtext { font-size: clamp(1.18rem, 2.4vw, 1.5rem); font-weight: 600; line-height: 1.35; margin: 0 0 22px; letter-spacing: -.01em; }

.options { display: flex; flex-direction: column; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font-size: 1rem; line-height: 1.4;
  transition: border-color .15s, background .15s, transform .1s;
}
.option:not(:disabled):hover { border-color: var(--hi); transform: translateX(3px); }
.option-letter {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; font-size: .92rem;
  background: var(--surface-3); border-radius: 5px; color: var(--muted);
  transition: background .15s, color .15s;
}
.option-body { flex: 1; }
.option-mark { flex: none; font-weight: 700; font-size: 1.1rem; opacity: 0; transition: opacity .2s; }

.option.is-selected { border-color: var(--hi); background: rgba(255,210,30,.07); }
.option.is-selected .option-letter { background: var(--hi); color: var(--ink); }

.option.is-correct { border-color: var(--ok); background: rgba(52,211,153,.10); }
.option.is-correct .option-letter { background: var(--ok); color: var(--ink); }
.option.is-correct .option-mark { opacity: 1; color: var(--ok); }
.option.is-wrong { border-color: var(--bad); background: rgba(255,91,82,.10); }
.option.is-wrong .option-letter { background: var(--bad); color: #fff; }
.option.is-wrong .option-mark { opacity: 1; color: var(--bad); }
.option.is-correct.pulse { animation: okpulse .5s ease; }
@keyframes okpulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5);} 100%{box-shadow:0 0 0 14px rgba(52,211,153,0);} }
.option:disabled { cursor: default; }
.option.dimmed { opacity: .5; }

/* ------------------------------- Feedback ------------------------------- */
.feedback {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: 18px; padding: 16px 18px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--bg-2);
  animation: fbIn .35s ease both;
}
@keyframes fbIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.feedback.ok { border-color: rgba(52,211,153,.45); }
.feedback.no { border-color: rgba(255,91,82,.45); }
.feedback-stamp {
  flex: none; font-family: var(--display); font-weight: 700; font-size: 1.04rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 8px 12px; border-radius: 4px;
  border: 2.5px solid currentColor; transform: rotate(-7deg);
  align-self: center; white-space: nowrap;
  animation: stampIn .35s cubic-bezier(.2,1.4,.4,1) both;
}
.feedback.ok .feedback-stamp { color: var(--ok); }
.feedback.no .feedback-stamp { color: var(--bad); }
@keyframes stampIn { 0%{opacity:0; transform: rotate(-7deg) scale(1.7);} 60%{opacity:1;} 100%{transform: rotate(-7deg) scale(1);} }
.feedback-verdict { margin: 0 0 4px; font-weight: 700; font-size: 1rem; }
.feedback.ok .feedback-verdict { color: var(--ok); }
.feedback.no .feedback-verdict { color: var(--bad); }
.feedback-explain { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.55; }
.feedback-explain b { color: var(--text); }

.qnav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }

/* -------------------------------- Results ------------------------------- */
.result-head { text-align: center; padding: 18px 0 8px; }
.result-stamp {
  display: inline-block; font-family: var(--display); font-weight: 700;
  font-size: 2.4rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 26px; border: 4px solid currentColor; border-radius: 8px;
  transform: rotate(-6deg); margin-bottom: 22px;
  animation: stampIn .45s cubic-bezier(.2,1.4,.4,1) both;
}
.result-stamp.pass { color: var(--ok); }
.result-stamp.fail { color: var(--bad); }
.result-mode { font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; color: var(--muted); margin: 0 0 6px; }
.result-score { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.result-score-big { font-family: var(--display); font-weight: 700; font-size: clamp(3.4rem, 11vw, 6rem); line-height: .9; color: var(--hi); }
.result-score-frac { font-family: var(--mono); color: var(--muted); font-size: .92rem; }
.result-msg { max-width: 52ch; margin: 16px auto 0; color: var(--muted); }
.result-breakdown { margin-top: 30px; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }

/* -------------------------------- Review -------------------------------- */
.review-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.review-filter, .review-actions { display: flex; gap: 8px; }
.chip-toggle {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .04em;
  padding: 7px 13px; border-radius: 100px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted);
}
.chip-toggle.is-active { background: var(--hi); color: var(--ink); border-color: var(--hi); }
.review-list { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.rev-card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--bad); border-radius: var(--radius); padding: 16px 18px;
}
.rev-card.correct { border-left-color: var(--ok); }
.rev-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rev-num { font-family: var(--mono); font-size: .74rem; color: var(--muted-2); }
.rev-q { font-weight: 600; margin: 0 0 12px; font-size: 1.04rem; line-height: 1.4; }
.rev-opt { display: flex; gap: 9px; padding: 7px 10px; border-radius: 5px; font-size: .92rem; align-items: baseline; }
.rev-opt + .rev-opt { margin-top: 4px; }
.rev-opt .rl { font-family: var(--mono); font-weight: 600; color: var(--muted); flex: none; }
.rev-opt.correct { background: rgba(52,211,153,.12); color: var(--text); }
.rev-opt.correct .rl { color: var(--ok); }
.rev-opt.chosen-wrong { background: rgba(255,91,82,.12); }
.rev-opt.chosen-wrong .rl { color: var(--bad); }
.rev-tagline { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; margin-left: auto; }
.rev-opt.correct .rev-tagline { color: var(--ok); }
.rev-opt.chosen-wrong .rev-tagline { color: var(--bad); }
.rev-explain { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .92rem; }
.rev-explain b { color: var(--text); }

/* --------------------------------- Modal -------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10,11,14,.72); backdrop-filter: blur(4px); animation: viewIn .2s both; }
.modal-card {
  position: relative; width: min(620px, 100%); max-height: 84vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); animation: modalIn .28s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-head {
  position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .03em; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 1.7rem; line-height: 1; padding: 0 4px; }
.modal-close:hover { color: var(--text); }
.topic-picker { padding: 16px 20px 22px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.topic-pick {
  text-align: left; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; color: var(--text);
  display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, transform .12s;
}
.topic-pick:hover { border-color: var(--hi); transform: translateY(-2px); }
.tp-name { font-weight: 600; font-size: .94rem; line-height: 1.25; }
.tp-meta { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.tp-acc { color: var(--hi); }
.tp-bar { height: 5px; background: var(--surface-3); border-radius: 100px; overflow: hidden; }
.tp-bar span { display: block; height: 100%; border-radius: 100px; }

/* -------------------------------- Footer -------------------------------- */
.site-foot {
  position: relative; z-index: 1; border-top: 1px solid var(--line-soft);
  padding: 22px clamp(14px,4vw,34px); max-width: var(--maxw); margin: 20px auto 0;
}
.site-foot p { margin: 0; color: var(--muted-2); font-size: .8rem; line-height: 1.6; max-width: 80ch; }
.site-foot strong { color: var(--muted); }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 600px) {
  .hud { display: none; }
  .brand-text em { display: none; }
  .hero-title { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .qcard-top .q-index { font-size: 1.8rem; }
  .option { font-size: .96rem; padding: 13px 13px; }
  .feedback { flex-direction: column; gap: 10px; }
  .feedback-stamp { align-self: flex-start; }
  .qnav { flex-direction: row; }
  .result-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.hidden, [hidden] { display: none !important; }