/* ── «Данные для тестов» (test-profile.js) ────────────────────────────────────
   Статусная строка под кнопками автопилота и ручного режима, карточка на
   странице резюме в кабинете и форма-модалка. Токены страницы те же, что у
   гайда (test-guide.css): --card, --card2, --text, --muted, --faint, --line,
   --line2, --purple, --blue, --green, --amber, --soft, --hover, --ease.      */

body.overflow-hidden{overflow:hidden}

/* ── статусная строка ──────────────────────────────────────────────────── */
.tp-host{flex:1 0 100%;display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;min-height:0}
.tp-host:empty{display:none}
.tp-host .tp-status.muted{color:var(--faint);font-size:14px}
.tp-chip.off{background:var(--card2);color:var(--faint)}
.tp-link{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--purple);
  cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  transition:text-decoration-color .15s var(--ease),color .15s var(--ease)}
.tp-link:hover{text-decoration-color:currentColor}
.tp-link:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:4px}
.tp-link.strong{color:var(--text);text-decoration-color:var(--line2)}
.tp-link.strong:hover{color:var(--purple);text-decoration-color:currentColor}
.tp-host .tg-help{width:26px;height:26px;margin-left:-2px}
.tp-host .tg-help svg{width:14px;height:14px}

/* ── карточка в кабинете (страница резюме) ─────────────────────────────── */
.tp-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin-top:16px}
.tp-card:empty{display:none}
.tp-card .sk-ic{width:40px;height:40px;border-radius:var(--r-xs,10px)}
.tp-card .sk-txt{display:flex;flex-direction:column;gap:9px;padding:2px 0}
.tp-card .sk-btn{width:112px;height:36px;border-radius:var(--r-xs,10px)}
.tp-card .ic{width:40px;height:40px;border-radius:var(--r-xs,10px);background:var(--soft);color:var(--purple);
  display:grid;place-items:center;flex:none}
.tp-card .ic svg{width:20px;height:20px}
.tp-card h3{font-size:16px;font-weight:600;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tp-card p{color:var(--muted);font-size:14px;line-height:1.55;margin:5px 0 0;max-width:60ch}
.tp-card .tp-meter{margin-top:10px;max-width:320px}
.tp-card .act{display:flex;align-items:center;gap:8px}
@media(max-width:640px){
  .tp-card{grid-template-columns:auto minmax(0,1fr)}
  .tp-card .act{grid-column:2;justify-content:flex-start}
}

/* ── шкала «заполнено» ─────────────────────────────────────────────────── */
.tp-meter{display:flex;flex-direction:column;gap:6px}
.tp-bar{height:5px;border-radius:5px;background:var(--line2);overflow:hidden}
.tp-bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--blue),var(--purple));
  transition:width .5s var(--ease)}
.tp-meter-txt{font-size:14px;color:var(--muted);line-height:1.5}
.tp-meter-txt b{color:var(--text);font-weight:600}

/* ── форма ─────────────────────────────────────────────────────────────── */
.tpf{position:fixed;inset:0;z-index:10011;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}
.tpf.show{opacity:1;pointer-events:auto}
.tpf-back{position:absolute;inset:0;background:rgba(8,10,18,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tpf-card{position:relative;z-index:1;width:100%;max-width:580px;max-height:min(92vh,760px);display:flex;flex-direction:column;
  background:var(--card2);border:1px solid var(--line2);border-radius:var(--r,16px);box-shadow:0 30px 90px rgba(0,0,0,.45);
  overflow:hidden;transform:translateY(10px) scale(.985);transition:transform .28s var(--ease)}
.tpf.show .tpf-card{transform:none}
.tpf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 14px}
.tpf-kicker{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}
.tpf-head h2{font-family:var(--fd,'Unbounded',sans-serif);font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:8px 0 0}
.tpf-x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--muted);
  background:var(--card);border:1px solid var(--line);cursor:pointer}
.tpf-x svg{width:16px;height:16px}
.tpf-x:hover{color:var(--text);background:var(--hover,rgba(255,255,255,.04))}
.tpf-body{padding:4px 24px 20px;overflow:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:18px;
  scrollbar-width:thin}
.tpf-lead{color:var(--muted);font-size:15px;line-height:1.6;margin:0}

.tpf-sk{height:12px;border-radius:6px;background:var(--card);margin-top:10px}
.tpf-sk.w60{width:60%}.tpf-sk.w80{width:80%}
.tpf-err{color:var(--red);font-size:15px;padding:14px 0}

/* тумблер «проходить тесты» */
.tpf-switch{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-radius:var(--r-sm,12px);
  background:var(--card);border:1px solid var(--line);cursor:pointer}
.tpf-switch input{position:absolute;opacity:0;width:0;height:0}
.tpf-track{position:relative;flex:none;width:42px;height:24px;border-radius:24px;background:var(--line2);margin-top:1px;
  transition:background .2s var(--ease)}
.tpf-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .22s var(--ease)}
.tpf-switch input:checked+.tpf-track{background:linear-gradient(135deg,var(--blue),var(--purple))}
.tpf-switch input:checked+.tpf-track .tpf-knob{transform:translateX(18px)}
.tpf-switch input:focus-visible+.tpf-track{outline:2px solid var(--purple);outline-offset:3px}
.tpf-switch-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.tpf-switch-txt b{font-size:15px;font-weight:600;color:var(--text)}
.tpf-switch-txt small{font-size:14px;color:var(--muted);line-height:1.5}

/* группы и поля */
.tpf-group{display:flex;flex-direction:column;gap:14px;transition:opacity .25s var(--ease)}
.tpf-group.dim{opacity:.5}
.tpf-gtitle{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.tpf-field{display:flex;flex-direction:column;gap:7px}
.tpf-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:15px;font-weight:600;color:var(--text)}
.tpf-hint{font-size:13px;font-weight:400;color:var(--faint)}
.tpf-input{width:100%;font:inherit;font-size:15px;color:var(--text);background:var(--card);border:1px solid var(--line2);
  border-radius:var(--r-xs,10px);padding:10px 12px;outline:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.tpf-input::placeholder{color:var(--faint)}
.tpf-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--soft)}
textarea.tpf-input{resize:vertical;min-height:58px;line-height:1.5}
.tpf-num{position:relative;max-width:240px}
.tpf-num .tpf-input{padding-right:34px}
.tpf-unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--faint);pointer-events:none}

.tpf-opts{display:flex;flex-wrap:wrap;gap:7px}
.tpf-opt{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border-radius:20px;
  font-size:14px;font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--line2);cursor:pointer;
  transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease),transform .12s var(--ease)}
.tpf-opt:hover{border-color:var(--purple);color:var(--text)}
.tpf-opt:active{transform:scale(.97)}
.tpf-opt input{position:absolute;opacity:0;width:0;height:0}
.tpf-opt.on{background:var(--soft);border-color:var(--purple);color:var(--purple)}
.tpf-opt:has(input:focus-visible){outline:2px solid var(--purple);outline-offset:2px}

/* подвал: шкала и кнопки */
.tpf-foot{padding:14px 24px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px;background:var(--card2)}
.tpf-actions{display:flex;gap:8px;flex-wrap:wrap}
.tpf-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:var(--r-xs,10px);
  font:inherit;font-size:15px;font-weight:600;border:1px solid transparent;transition:.15s;cursor:pointer}
.tpf-btn:active{transform:scale(.975)}
.tpf-btn:disabled{opacity:.6;cursor:default}
.tpf-btn:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.tpf-primary{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;min-width:130px}
.tpf-primary:hover{filter:brightness(1.09)}
.tpf-ghost{background:transparent;color:var(--muted)}
.tpf-ghost:hover{color:var(--text);background:var(--hover,rgba(255,255,255,.04))}

/* ── телефон ───────────────────────────────────────────────────────────── */
@media(max-width:640px){
  .tpf{padding:0;align-items:flex-end}
  .tpf-card{max-width:none;max-height:94vh;border-radius:20px 20px 0 0;border-bottom:0}
  .tpf-head{padding:18px 18px 12px}
  .tpf-body{padding:4px 18px 16px}
  .tpf-foot{padding:12px 18px calc(16px + env(safe-area-inset-bottom))}
  .tpf-actions .tpf-btn{flex:1 1 auto}
  .tpf-num{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .tpf,.tpf-card,.tp-bar i,.tpf-knob,.tpf-track,.tpf-group{transition:none}
}