:root {
  --green-900: #0f3b2a; --green-700: #1a5c42; --green-100: #e6f0ea;
  --marigold: #f2a516; --marigold-dark: #8a5a00; --marigold-100: #fdf1d8;
  --ink: #1c2421; --muted: #55625d; --paper: #fbfaf6; --card: #ffffff;
  --line: #d9e2dc; --error: #a32020; --error-bg: #fbe9e9;
  --radius: 14px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       color: var(--ink); background: var(--paper); }
header { background: var(--green-900); color: #fff; padding: 16px; }
header .inner, main { max-width: 860px; margin: 0 auto; }
header .inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
header h1 { margin: 0; font-size: 1.35rem; }
header h1 span { color: var(--marigold); }
header p { margin: 4px 0 0; color: #cfe0d6; font-size: .95rem; }
.account { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.account button { padding: 6px 12px; font-size: .9rem; background: transparent; color: #fff; border-color: var(--marigold); }
main { padding: 20px 16px 64px; }
[hidden] { display: none !important; }

.rail { display: flex; list-style: none; padding: 0; margin: 0 0 22px; gap: 8px; counter-reset: s; }
.rail li { flex: 1; counter-increment: s; font-size: .9rem; color: var(--muted);
           border-top: 5px solid var(--line); padding-top: 8px; }
.rail li::before { content: counter(s) ". "; font-weight: 700; }
.rail li.done { border-color: var(--green-700); color: var(--green-700); }
.rail li[aria-current="step"] { border-color: var(--marigold); color: var(--ink); font-weight: 600; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card + .card { margin-top: 18px; }
.narrow { max-width: 480px; margin: 0 auto; }
h2 { color: var(--green-900); margin-top: 0; }
h3 { color: var(--green-700); margin-bottom: 6px; }
label, .label { display: block; font-weight: 600; margin: 16px 0 6px; }
.hint { font-weight: 400; color: var(--muted); font-size: .9rem; }
input[type=text], input[type=email], input[type=password], input[type=url], select, textarea {
  width: 100%; font: inherit; padding: 10px 12px; border: 1.5px solid #b9c7bf; border-radius: 10px;
  background: #fff; color: var(--ink); }
textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 18px 0 0; }
input[type=file] { font: inherit; max-width: 100%; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
button, .btn { font: inherit; font-weight: 600; border-radius: 10px; padding: 11px 20px; cursor: pointer;
  border: 2px solid var(--green-900); text-decoration: none; display: inline-block; }
.primary { background: var(--green-900); color: #fff; }
.primary:hover { background: var(--green-700); }
.secondary { background: #fff; color: var(--green-900); }
.danger { background: #fff; color: var(--error); border-color: var(--error); }
.small { padding: 6px 12px; font-size: .9rem; }
button:disabled { opacity: .55; cursor: not-allowed; }
.linkish { background: none; border: none; padding: 0; color: var(--green-700); text-decoration: underline; font-weight: 500; }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.choice { display: block; border: 2px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; margin: 0; font-weight: 400; }
.choice:has(input:checked) { border-color: var(--green-700); background: var(--green-100); }
.choice:has(input:focus-visible) { outline: 3px solid var(--marigold); outline-offset: 2px; }
.choice input { margin-right: 6px; }
.choice strong { color: var(--green-900); }
.choice span { display: block; color: var(--muted); font-size: .9rem; margin-top: 2px; }

.consent { background: var(--green-100); border-radius: 10px; padding: 12px 14px; margin-top: 16px; font-size: .92rem; }
.consent h3 { margin-top: 0; font-size: 1rem; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; margin-top: 10px; }
.check input { margin-top: 5px; width: 18px; height: 18px; flex: none; }

.tabs { display: flex; margin-bottom: 8px; border-bottom: 2px solid var(--line); }
.tabs button { border: none; border-bottom: 4px solid transparent; border-radius: 0; background: none;
               color: var(--muted); padding: 10px 16px; margin-bottom: -2px; }
.tabs button[aria-selected="true"] { color: var(--green-900); border-bottom-color: var(--marigold); }

/* Interview */
.stage { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; }
.persona { text-align: center; color: var(--muted); font-size: .85rem; }
.persona svg { width: 110px; height: 110px; display: block; margin: 0 auto 4px; }
.persona.speaking .mouth { animation: talk .35s ease-in-out infinite alternate; transform-origin: 60px 78px; }
@keyframes talk { from { transform: scaleY(.4); } to { transform: scaleY(1.2); } }
.qpanel { display: flex; gap: 18px; align-items: flex-start; background: var(--marigold-100);
          border-inline-start: 8px solid var(--marigold); border-radius: var(--radius); padding: 20px; }
.qnum { flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--green-900);
        color: var(--marigold); display: grid; place-items: center; font-size: 2rem; font-weight: 800; }
.qtext { font-size: 1.25rem; font-weight: 600; margin: 0; }
.qof { color: var(--marigold-dark); font-weight: 700; font-size: .85rem; text-transform: uppercase;
       letter-spacing: .06em; margin: 0 0 4px; }
.fit { display: inline-block; background: var(--green-100); color: var(--green-900); border-radius: 999px;
       padding: 4px 12px; font-size: .9rem; margin-bottom: 14px; }
.mic { display: inline-flex; align-items: center; gap: 8px; }
.mic.recording { background: var(--error); border-color: var(--error); color: #fff; }
.mic .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.mic.recording .dot { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* Preparing */
.steps { list-style: none; padding: 0; }
.steps li { padding: 8px 0 8px 34px; position: relative; color: var(--muted); }
.steps li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 16px; height: 16px;
  border-radius: 50%; border: 3px solid var(--line); }
.steps li.active { color: var(--ink); font-weight: 600; }
.steps li.active::before { border-color: var(--line); border-top-color: var(--green-700); animation: spin 1s linear infinite; }
.steps li.done { color: var(--green-700); }
.steps li.done::before { background: var(--green-700); border-color: var(--green-700); }

.msg { border-radius: 10px; padding: 10px 14px; margin-top: 14px; }
.msg.error { background: var(--error-bg); color: var(--error); border: 1px solid #e7b9b9; }
.msg.info { background: var(--green-100); color: var(--green-900); }
.spinner { display: inline-block; width: 1em; height: 1em; border: 3px solid var(--line);
           border-top-color: var(--green-700); border-radius: 50%; animation: spin 1s linear infinite;
           vertical-align: -3px; margin-inline-end: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner, .steps li.active::before, .mic.recording .dot, .persona.speaking .mouth { animation: none; }
}

/* Profile */
.list { list-style: none; padding: 0; margin: 0; }
.list > li { border-top: 1px solid var(--line); padding: 14px 0; }
.list > li:first-child { border-top: none; }
.meta { color: var(--muted); font-size: .9rem; }
.tag { display: inline-block; background: var(--green-100); color: var(--green-900); border-radius: 999px;
       padding: 1px 10px; font-size: .8rem; margin-inline-end: 4px; }
.tag.warn { background: var(--marigold-100); color: var(--marigold-dark); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.gaplist { margin: 6px 0 0; padding-inline-start: 20px; font-size: .92rem; }

.report h2 { border-bottom: 3px solid var(--marigold); padding-bottom: 4px; margin-top: 28px; }
.report h2:first-child { margin-top: 0; }
.report a { color: var(--green-700); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 600px) {
  .grid2 { grid-template-columns: 1fr; }
  .stage { grid-template-columns: 1fr; }
  .persona svg { width: 72px; height: 72px; }
  .qpanel { flex-direction: column; gap: 10px; }
  .qnum { width: 56px; height: 56px; font-size: 1.5rem; }
  .rail li { font-size: .8rem; }
  .card { padding: 16px; }
}

/* Module 1: analysis */
.fitbox { display: flex; gap: 16px; align-items: center; margin: 8px 0 12px; }
.fitnum { flex: none; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
          background: var(--green-900); color: var(--marigold); font-size: 1.8rem; font-weight: 800; }
.bars { list-style: none; padding: 0; margin: 0; }
.bars li { margin: 10px 0; }
.bar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 4px 0; }
.bar span { display: block; height: 100%; background: var(--green-700); }
.plan li { margin: 10px 0; }
.plan .meta { display: block; }

/* Module 3: preparation */
.trainsteps { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trainsteps li button { font-size: .85rem; padding: 6px 12px; background: #fff; color: var(--green-900); }
.trainsteps li button[aria-current="step"] { border-color: var(--marigold); background: var(--marigold-100); }
.trainsteps .st { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.feedback { border: 2px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 16px; }
.feedback.ready { border-color: var(--green-700); background: var(--green-100); }
.feedback.try_again { border-color: var(--marigold); background: var(--marigold-100); }
.feedback h3 { margin-top: 0; }
.journey .actions .primary { margin-inline-end: 4px; }

/* Interview panel */
.panelrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag.panel { background: var(--marigold-100); color: var(--marigold-dark); }

/* Preparation phases */
.phases { list-style: none; padding: 0; display: flex; gap: 8px; margin: 6px 0 16px; counter-reset: ph; }
.phases li { flex: 1; counter-increment: ph; border-top: 4px solid var(--line); padding-top: 6px;
             font-size: .85rem; color: var(--muted); }
.phases li::before { content: counter(ph) ". "; font-weight: 700; }
.phases li.done { border-color: var(--green-700); color: var(--green-700); }
.phases li.current { border-color: var(--marigold); color: var(--ink); font-weight: 600; }