/* The Final Test — styles. Theme-aware via [data-theme-active="dark"]. */

#final-test { max-width: 46rem; margin: 1.5rem auto; }

/* progress */
.ft-progress { margin-bottom: 1.25rem; }
.ft-bar {
  height: 8px; border-radius: 999px;
  background: rgba(128,128,128,.2); overflow: hidden;
}
.ft-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #6b8cff, #59c274);
  transition: width .3s ease;
}
.ft-count { margin-top: .4rem; font-size: 85%; opacity: .7; }

/* card */
.ft-card {
  border: 1px solid rgba(128,128,128,.25);
  border-radius: 12px;
  padding: 1.25rem 1.4rem 1.4rem;
  background: rgba(128,128,128,.04);
}
.ft-meta { font-size: 78%; text-transform: uppercase; letter-spacing: .04em; opacity: .6; margin-bottom: .5rem; }
.ft-q { font-size: 112%; line-height: 1.5; margin-bottom: .5rem; }
.ft-q code, .ft-explain code, .ft-review-ans code {
  font-family: 'SFMono-Regular', Consolas, monospace; font-size: 92%;
  background: rgba(128,128,128,.15); padding: .05em .35em; border-radius: 4px;
}
.ft-code {
  background: rgba(128,128,128,.12); border-radius: 8px;
  padding: .7rem .9rem; overflow-x: auto; margin: .6rem 0 .9rem;
  font-family: 'SFMono-Regular', Consolas, monospace; font-size: 90%; line-height: 1.45;
}

/* options */
.ft-options { list-style: none; margin: .5rem 0 0; padding: 0; }
.ft-opt {
  border: 1.5px solid rgba(128,128,128,.28); border-radius: 9px;
  margin: .5rem 0; transition: border-color .12s, background .12s;
}
.ft-opt label { display: flex; align-items: baseline; gap: .6rem; padding: .6rem .8rem; cursor: pointer; margin: 0; }
.ft-opt:hover { border-color: rgba(107,140,255,.6); }
.ft-opt.sel { border-color: #6b8cff; background: rgba(107,140,255,.1); }
.ft-opt.locked label { cursor: default; }
.ft-opt.locked:hover { border-color: rgba(128,128,128,.28); }
.ft-opt.correct { border-color: #3ea760; background: rgba(62,167,96,.14); }
.ft-opt.wrong { border-color: #e4574c; background: rgba(228,87,76,.12); }
.ft-opt-text code { font-size: 92%; }

/* text input */
.ft-input-wrap { margin-top: .6rem; }
.ft-input {
  width: 100%; box-sizing: border-box; padding: .6rem .8rem;
  border: 1.5px solid rgba(128,128,128,.35); border-radius: 9px;
  font-family: 'SFMono-Regular', Consolas, monospace; font-size: 100%;
  background: transparent; color: inherit;
}
.ft-input:focus { outline: none; border-color: #6b8cff; }
.ft-input-wrap.ok .ft-input { border-color: #3ea760; }
.ft-input-wrap.bad .ft-input { border-color: #e4574c; }
.ft-correct-note { margin-top: .4rem; font-size: 90%; }

.ft-nudge { animation: ft-nudge .35s; }
@keyframes ft-nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* feedback */
.ft-feedback { margin-top: 1rem; padding: .7rem .9rem; border-radius: 9px; font-size: 96%; }
.ft-feedback.ok { background: rgba(62,167,96,.14); border: 1px solid rgba(62,167,96,.4); }
.ft-feedback.bad { background: rgba(228,87,76,.12); border: 1px solid rgba(228,87,76,.4); }
.ft-explain { margin-top: .4rem; opacity: .9; line-height: 1.5; }

/* actions / buttons */
.ft-actions { margin-top: 1.2rem; }
.ft-btn {
  font: inherit; font-size: 96%; padding: .55rem 1.1rem; border-radius: 9px;
  border: 1.5px solid transparent; cursor: pointer;
}
.ft-btn-primary { background: #4f6ef2; color: #fff; }
.ft-btn-primary:hover { background: #405ce0; }
.ft-btn-ghost { background: transparent; border-color: rgba(128,128,128,.4); color: inherit; margin-top: 1rem; }
.ft-btn-ghost:hover { border-color: #6b8cff; }

/* result screen */
.ft-result { text-align: center; padding: 1.5rem 0; }
.ft-score { font-size: 340%; font-weight: 700; line-height: 1; }
.ft-score span { font-size: 45%; font-weight: 400; opacity: .55; }
.ft-score.small { font-size: 200%; }
.ft-verdict { margin: .8rem 0 1.6rem; font-size: 110%; opacity: .85; }
.ft-share { max-width: 34rem; margin: 0 auto 1rem; text-align: left; }
.ft-share label { display: block; font-size: 82%; opacity: .7; margin-bottom: .35rem; }
.ft-share-row { display: flex; gap: .5rem; }
.ft-link {
  flex: 1; padding: .5rem .7rem; border-radius: 8px; font-family: monospace; font-size: 85%;
  border: 1.5px solid rgba(128,128,128,.35); background: transparent; color: inherit;
}
.ft-copy { white-space: nowrap; background: transparent; border: 1.5px solid rgba(128,128,128,.4); color: inherit; }
.ft-share-note { font-size: 80%; opacity: .6; margin-top: .4rem; }

/* review */
.ft-review-head { text-align: center; margin-bottom: 1.5rem; }
.ft-review-head p { opacity: .8; }
.ft-review-item {
  border: 1px solid rgba(128,128,128,.22); border-left-width: 4px;
  border-radius: 8px; padding: .9rem 1.1rem; margin: .8rem 0;
}
.ft-review-item.ok { border-left-color: #3ea760; }
.ft-review-item.bad { border-left-color: #e4574c; }
.ft-review-ans { margin-top: .5rem; font-size: 95%; }
.ft-you { color: #e4574c; }
.ft-badlink { padding: .6rem .9rem; border-radius: 8px; background: rgba(228,87,76,.12); margin-bottom: 1rem; font-size: 90%; }

/* Easter egg: shake the whole page for a second at exactly 67. */
.ft-shake { animation: ft-shake .5s cubic-bezier(.36,.07,.19,.97) 2; }
@keyframes ft-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

[data-theme-active="dark"] .ft-card { background: rgba(255,255,255,.03); }
[data-theme-active="dark"] .ft-btn-primary { background: #5b78ff; }