:root { --violet:#7653ed; --ink:#29253d; --muted:#736e84; --line:#e3e0eb; --soft:#f5f3fb; --green:#2da879; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#fdfcff; font-family:"Manrope","Avenir Next",sans-serif; }
button,select { font:inherit; }
.screening-shell { min-height:590px; padding:clamp(26px,6vw,54px); display:grid; }
.view { display:none; align-self:center; max-width:720px; width:100%; margin:auto; }
.view.active { display:block; animation:enter .5s cubic-bezier(.16,1,.3,1) both; }
.centered { text-align:center; }
.eyebrow { margin:0 0 14px; color:var(--violet); font-size:10px; font-weight:800; letter-spacing:.18em; }
h1 { margin:0; font-size:clamp(28px,5vw,42px); line-height:1.08; letter-spacing:-.045em; }
.lead { max-width:590px; margin:18px 0 28px; color:var(--muted); font-size:15px; line-height:1.65; }
.centered .lead { margin-left:auto; margin-right:auto; }
.intro-mark { display:flex; gap:5px; height:34px; align-items:flex-end; margin-bottom:26px; }
.intro-mark span { display:block; width:7px; border-radius:4px; background:var(--violet); }
.intro-mark span:nth-child(1){height:16px}.intro-mark span:nth-child(2){height:32px}.intro-mark span:nth-child(3){height:23px}
.quick-facts { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:25px; }
.quick-facts span { padding:9px 12px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-size:11px; }
.quick-facts b { color:var(--violet); margin-right:5px; }
.consent { display:flex; align-items:flex-start; gap:12px; padding:17px; margin-bottom:24px; border:1px solid var(--line); background:var(--soft); border-radius:12px; color:#514c64; font-size:12px; line-height:1.5; cursor:pointer; }
.consent input { accent-color:var(--violet); margin-top:2px; }
button { border:0; cursor:pointer; border-radius:9px; padding:13px 18px; font-size:12px; font-weight:800; transition:transform .18s ease,opacity .18s ease,background .18s ease; }
button:hover:not(:disabled){transform:translateY(-1px)} button:disabled{opacity:.38;cursor:not-allowed}
.primary { color:#fff; background:var(--violet); }.primary span{margin-left:20px}.secondary{color:var(--ink);background:var(--soft);border:1px solid var(--line)}
.device-field { display:flex; flex-direction:column; gap:8px; color:var(--muted); font-size:11px; font-weight:700; }
select { width:100%; padding:13px; border:1px solid var(--line); color:var(--ink); background:#fff; border-radius:9px; }
.meter { height:70px; margin:24px 0 8px; display:flex; align-items:center; gap:6px; }
.meter i { width:10px; height:18px; border-radius:9px; background:#ded9ec; transition:height .1s,background .1s; }
.meter i.active { background:var(--violet); height:48px; }.hint{color:var(--muted);font-size:11px}.actions{display:flex;justify-content:space-between;margin-top:30px}
.orbit { width:62px;height:62px;margin:0 auto 28px;position:relative;animation:spin 2s linear infinite}.orbit i{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--violet)}.orbit i:nth-child(1){top:0;left:25px}.orbit i:nth-child(2){right:2px;bottom:8px;opacity:.6}.orbit i:nth-child(3){left:2px;bottom:8px;opacity:.3}
.live-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line); }.live-header h1{font-size:25px}.live-actions{display:flex;align-items:center;gap:12px}.live-actions time{font-size:12px;font-weight:800;color:var(--green)}#end{padding:9px 12px;color:#a13c4c;background:#fbecef}
.conversation-grid { display:grid; grid-template-columns:190px 1fr; min-height:300px; border-bottom:1px solid var(--line); }.voice-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-right:1px solid var(--line)}.voice-panel strong{font-size:13px}.voice-panel span{font-size:10px;color:var(--muted);margin-top:4px}
.voice-bars{height:90px;display:flex;align-items:center;gap:6px;margin-bottom:20px}.voice-bars i{width:7px;height:16px;border-radius:7px;background:var(--violet);transition:height .1s}.voice-bars.speaking i:nth-child(1){height:42px}.voice-bars.speaking i:nth-child(2){height:68px}.voice-bars.speaking i:nth-child(3){height:84px}.voice-bars.speaking i:nth-child(4){height:58px}.voice-bars.speaking i:nth-child(5){height:34px}
.transcript-panel{padding:24px}.panel-label{margin:0 0 18px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.15em}#transcript{height:238px;overflow:auto;scrollbar-width:thin}.empty{color:#aaa5b6;font-size:12px}.segment{margin:0 0 15px;font-size:13px;line-height:1.5}.segment b{display:block;color:var(--violet);font-size:9px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px}.segment.candidate b{color:var(--green)}
.mic-footer{display:flex;align-items:center;justify-content:space-between;padding-top:17px}.mic-footer>div{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:700}.mini-meter{display:flex;align-items:center;gap:3px;height:25px}.mini-meter i{width:4px;height:7px;background:#cdc8da;border-radius:4px}.mini-meter i.active{height:20px;background:var(--green)}
.complete-mark,.error-mark{width:64px;height:64px;margin:0 auto 24px;display:grid;place-items:center;border-radius:50%;font-size:26px}.complete-mark{color:#fff;background:var(--green)}.error-mark{color:#a13c4c;background:#fbecef}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:620px){.screening-shell{padding:25px 20px}.conversation-grid{grid-template-columns:1fr}.voice-panel{min-height:145px;border-right:0;border-bottom:1px solid var(--line)}.voice-bars{height:55px;margin-bottom:10px}.transcript-panel{padding:18px}#transcript{height:190px}.live-header{align-items:flex-start}.live-actions{flex-direction:column;align-items:flex-end}.mic-footer{gap:12px}.quick-facts{display:grid}.actions{gap:12px}.actions button{flex:1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}