@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root { --violet:#7653ed; --ink:#28243c; --muted:#6f6a83; --line:#dedbea; --surface:#fbfbfe; --wash:#f0f1f8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:"Manrope",sans-serif; background:radial-gradient(circle at 10% 15%,rgba(118,83,237,.08) 1px,transparent 1.5px) 0 0/28px 28px,linear-gradient(135deg,#f4f4fa,#edeef7 48%,#f4f4fa); }
.topbar { height:58px; padding:0 clamp(24px,5vw,64px); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:2; background:rgba(244,244,250,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.tp-mark { width:34px; height:34px; display:grid; place-items:center; color:#fff; background:var(--violet); border-radius:6px 14px 6px 14px; font-size:12px; font-weight:800; letter-spacing:-1px; }
.top-actions { display:flex; gap:8px; }
.top-actions button,.language-control { border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:7px; padding:7px 10px; font:600 12px inherit; }
.language-control { display:flex; align-items:center; gap:5px; }
.language-control select { border:0; padding:0; color:inherit; background:transparent; font:inherit; cursor:pointer; }
main { width:min(1080px,calc(100% - 32px)); margin:30px auto 56px; }
.identity-strip { display:grid; grid-template-columns:1.1fr 1fr 1fr; overflow:hidden; border:1px solid var(--violet); border-radius:16px; background:rgba(118,83,237,.07); }
.identity-strip div { padding:18px 22px; display:flex; flex-direction:column; gap:5px; border-right:1px solid rgba(118,83,237,.35); }
.identity-strip div:last-child { border:0; }
small,.identity-strip span { font-size:12px; color:var(--muted); }
.identity-strip strong { font-size:14px; }
.progress-panel,.interview-card { margin-top:18px; background:rgba(251,251,254,.87); border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 30px rgba(57,48,92,.05); }
.progress-panel { padding:22px clamp(18px,4vw,38px) 28px; }
.progress-label { display:flex; justify-content:space-between; font-size:13px; }
.progress-track { height:7px; margin-top:12px; background:#e6e3ef; border-radius:99px; overflow:hidden; }
.progress-track span { display:block; width:40%; height:100%; background:var(--violet); }
.steps { display:grid; grid-template-columns:repeat(5,1fr); list-style:none; margin:34px 0 30px; padding:0; }
.steps li { text-align:center; color:#9993a9; position:relative; font-size:11px; font-weight:600; }
.steps li:not(:last-child)::after { content:""; position:absolute; height:2px; background:var(--line); top:16px; left:55%; width:90%; z-index:0; }
.steps li.done:not(:last-child)::after { background:var(--violet); }
.steps b { position:relative; z-index:1; width:34px; height:34px; margin:0 auto 12px; border:2px solid var(--line); background:var(--surface); display:grid; place-items:center; border-radius:50%; }
.steps .done b { color:#fff; background:var(--violet); border-color:var(--violet); }
.steps .active { color:var(--violet); }
.steps .active b { border-color:var(--violet); box-shadow:0 0 0 5px rgba(118,83,237,.12); }
.steps span { display:block; padding:0 6px; }
.stage-note { display:flex; align-items:center; gap:16px; padding:17px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.stage-icon { width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:var(--violet); background:rgba(118,83,237,.1); font-size:22px; }
.stage-note h1 { margin:0; font-size:15px; }
.stage-note p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.interview-card { display:grid; grid-template-columns:280px 1fr; min-height:590px; overflow:hidden; }
.interview-heading { padding:34px 28px; color:#f7f5ff; background:var(--violet); }
.eyebrow { margin:0 0 18px; font-size:10px; font-weight:800; letter-spacing:.16em; }
.interview-heading h2 { margin:0 0 14px; font-size:27px; line-height:1.15; letter-spacing:-.03em; }
.interview-heading p:last-child { font-size:13px; line-height:1.7; color:#e8e3ff; }
iframe { width:100%; height:100%; min-height:590px; border:0; background:#fff; }
footer { text-align:center; padding:20px; color:var(--muted); font-size:11px; }
@media(max-width:760px){ .identity-strip{grid-template-columns:1fr}.identity-strip div{border-right:0;border-bottom:1px solid rgba(118,83,237,.25)}.steps span{font-size:9px}.interview-card{grid-template-columns:1fr}.interview-heading{padding:24px}.interview-heading h2{font-size:22px} }