/* DOV blue/cyan anchors the interface; magenta is a restrained active accent. */
.login-main{max-width:680px;margin:6vh auto;padding:20px}
.login-card{padding:clamp(24px,5vw,48px)}
.login-error{color:var(--danger)}
.login-error:empty{display:none}
.login-button{display:inline-flex;align-items:center;min-height:48px;padding:12px 20px;background:var(--accent);color:var(--primary-ink);border-radius:10px;text-decoration:none;font-weight:600}
.login-button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.history-filters{display:flex;flex-wrap:wrap;gap:16px;align-items:end}
.history-filters label{display:grid;gap:6px;flex:1 1 140px}
.history-filters input{font:inherit;color:var(--ink);background:var(--input);border:1px solid var(--control-line);padding:10px;border-radius:8px;min-width:0;width:100%}
.history-list{display:grid;gap:12px}
.history-call{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:10px;padding:16px}
.history-call p{margin:4px 0}
.history-pagination{display:flex;align-items:center;gap:16px;margin-top:16px}
.view-navigation{display:flex;gap:8px;margin-bottom:28px;border-bottom:1px solid var(--line);padding-bottom:12px}
.view-navigation button{min-height:44px}
.view-navigation button[aria-pressed="true"]{background:var(--soft);color:var(--ink);box-shadow:inset 0 -3px 0 var(--highlight)}
.history-panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,4vw,36px)}
.history-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.history-heading h1{margin:6px 0 12px}
.history-heading p{margin:0}
.history-call>div{min-width:0;overflow-wrap:anywhere}
.history-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.history-actions a{color:var(--accent);padding:12px 0;min-height:44px}
.history-call-id{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted)}
.review-mode{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;background:var(--soft);border:2px solid var(--accent);border-radius:14px;padding:20px 24px;margin-bottom:24px}
.review-mode h2{margin:4px 0 8px}
.review-mode p{margin:0}
.review-mode button,#review-practice-bottom{min-height:48px}
.review-agent{font-weight:600;color:var(--accent)}
:root{
  color-scheme:light;
  --ink:#182e49; --muted:#536580; --accent:#285a9f;
  --line:#d8e2f0; --paper:#f3f6fb; --surface:#ffffff;
  --card:#edf3fb; --soft:#eaf1fa; --avatar:#dbe8fa;
  --avatar-ink:#234c88; --input:#ffffff; --control-line:#8397b3;
  --primary-ink:#ffffff; --danger:#9b304b; --danger-line:#b67081;
  --turn:#edf2fa; --prospect-turn:#e5f2f7; --focus:#b80b5f;
  --highlight:#b80b5f; --brand-blue:#2c5596; --brand-cyan:#39adcb; --brand-magenta:#e50070}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e6effc; --muted:#acbdd5; --accent:#69cbed;
  --line:#30445f; --paper:#0c1729; --surface:#142238;
  --card:#192b43; --soft:#213753; --avatar:#294563;
  --avatar-ink:#b5e7fa; --input:#101e32; --control-line:#6f87a5;
  --primary-ink:#0d253c; --danger:#ffb2c3; --danger-line:#b9788b;
  --turn:#21344d; --prospect-turn:#173b4b; --focus:#ff82b7;
  --highlight:#ff82b7}
*{
  box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.55 "Segoe UI",Arial,sans-serif}
.topbar{
  position:relative; min-height:106px; padding:16px 5%;
  display:flex; flex-wrap:wrap; gap:18px; align-items:center;
  justify-content:space-between; border-bottom:1px solid var(--line);
  background:var(--surface)}
.topbar::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan) 66%,var(--brand-magenta))}
.brand{
  display:flex; gap:14px; align-items:center; min-width:0;
  color:var(--ink); text-decoration:none}
.brand-logo-frame{
  display:grid; place-items:center; flex:none; padding:7px 10px;
  background:#ffffff; border:1px solid #d8e2f0; border-radius:10px}
.brand-logo-frame img{ display:block; width:76px; height:auto; }
.brand-copy{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.brand-name{ font-size:12px; font-weight:700; letter-spacing:1px; color:var(--accent); }
.product-name{ font-size:21px; line-height:1.25; font-weight:650; letter-spacing:-.4px; }
.private,.eyebrow,.tag{
  font-size:11px; letter-spacing:1.6px; font-weight:700}
.private{
  color:var(--muted);
  letter-spacing:.5px}
main{
  max-width:1176px;
  margin:auto;
  padding:44px 30px 20px}
.intro{
  margin-bottom:30px}
.eyebrow{
  color:var(--accent);
  margin:0 0 8px}
h1{
  font-size:38px;
  line-height:1.15;
  letter-spacing:-1.4px;
  font-weight:650;
  margin:0 0 12px}
h2{
  font-size:26px;
  letter-spacing:-.6px;
  line-height:1.25;
  margin:20px 0 12px}
h3{
  font-size:17px;
  margin:0 0 14px}
.intro>p:last-child{
  margin:0;
  color:var(--muted)}
.workspace{
  display:grid;
  grid-template-columns:350px minmax(0,1fr);
  gap:24px;
  align-items:start}
.prospect-card,.session-card{
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  padding:30px;
  box-shadow:0 5px 20px #182e4905}
.prospect-card{
  background:var(--card)}
.card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px}
.tag{
  letter-spacing:1px;
  font-size:10px;
  color:var(--muted);
  border:1px solid var(--control-line);
  border-radius:5px;
  padding:3px 7px}
.avatar{
  margin-top:26px;
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--avatar);
  color:var(--avatar-ink);
  font-size:23px;
  font-weight:600}
.prospect-card h2{
  margin-bottom:3px}
.city{
  margin:0 0 26px;
  color:var(--muted)}
.fact{
  border-top:1px solid var(--line);
  padding:17px 0;
  display:flex;
  flex-direction:column;
  gap:6px}
.fact>span,.fact>label{
  font-size:12px;
  color:var(--muted)}
.fact strong{
  font-size:18px}
.fact select{
  width:100%;
  background:var(--input)}
.muted{
  color:var(--muted);
  font-size:14px}
.fine{
  font-size:12px;
  color:var(--muted);
  line-height:1.6}
.session-card{
  min-height:484px}
.timer{
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  font-size:23px;
  letter-spacing:2px}
.connection{
  padding:15px 18px;
  background:var(--soft);
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  margin-top:26px}
.recording{
  font-size:12px;
  color:var(--muted);
  overflow-wrap:anywhere}
.readiness-chips{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:25px}
.readiness-chips span{
  background:var(--card);
  padding:7px 10px;
  border-radius:7px;
  font-size:12px}
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:25px 0 16px}
button{
  border:1px solid transparent;
  border-radius:9px;
  background:var(--accent);
  color:var(--primary-ink);
  font:600 14px "Segoe UI",Arial,sans-serif;
  cursor:pointer;
  padding:13px 21px}
button:hover:not(:disabled){
  filter:brightness(.93)}
button:disabled{
  opacity:.58;
  cursor:not-allowed}
button.secondary{
  background:var(--surface);
  color:var(--ink);
  border-color:var(--control-line)}
button.quiet{
  background:transparent;
  color:var(--accent);
  font-size:12px;
  padding:12px 8px}
button.danger{
  background:var(--surface);
  color:var(--danger);
  border-color:var(--danger-line)}
button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px}
.prospect-card>button{
  width:100%;
  margin-top:8px}
select{
  padding:10px;
  border:1px solid var(--control-line);
  border-radius:7px;
  color:var(--ink);
  font:inherit;
  font-size:14px;
  max-width:100%}
.setup{
  margin-top:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px}
.setup>summary{
  padding:17px 23px;
  cursor:pointer;
  font-size:14px;
  font-weight:600}
.setup>summary span{
  font-weight:400;
  color:var(--muted);
  font-size:12px;
  margin-left:14px}
.setup-body{
  padding:10px 24px 24px}
.setup-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px}
.setup-grid p,.diagnostics{
  font-size:12px;
  color:var(--muted)}
.setup-grid label{
  display:flex;
  flex-direction:column;
  font-size:13px;
  gap:7px}
.diagnostics{
  border-top:1px solid var(--line);
  padding-top:15px;
  margin-top:8px}
.diagnostics summary{
  cursor:pointer}
audio{
  max-width:100%;
  height:38px;
  margin-top:10px}
pre{
  white-space:pre-wrap;
  font:13px/1.6 "Segoe UI",sans-serif;
  padding:10px 24px;
  max-height:240px;
  overflow:auto}
.playback{
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  margin:20px 0}
.playback audio{
  flex:1;
  min-width:180px;
  margin:0}
.transcript-heading{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px}
.transcript-heading label{
  font-size:11px;
  color:var(--muted)}
.conversation{
  max-height:430px;
  overflow:auto;
  padding-right:8px}
.turn{
  overflow-wrap:anywhere;
  max-width:91%;
  padding:12px 16px;
  background:var(--turn);
  border-radius:12px;
  margin:0 0 12px}
.turn.prospect{
  margin-left:auto;
  background:var(--prospect-turn)}
.turn strong{
  font-size:11px;
  letter-spacing:.7px;
  text-transform:uppercase}
.turn p{
  margin:5px 0 0;
  font-size:14px}
.turn small{
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:7px}
footer{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:34px;
  font-size:11px;
  color:var(--muted)}
[hidden]{
  display:none!important}
@media(max-width:780px){
  main{
  padding:28px 18px}
.topbar{
  padding:16px 18px}
.private{
  display:none}
.workspace{
  grid-template-columns:1fr}
.prospect-card,.session-card{
  padding:24px}
.avatar{
  float:right;
  margin-top:18px}
.setup-grid{
  grid-template-columns:1fr;
  gap:20px}
h1{
  font-size:30px}
.setup>summary span{
  display:block;
  margin:3px 0 0}
footer{
  flex-direction:column}
.session-card{
  min-height:0}
}


.live-visibility { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 13px; }
.live-visibility button { padding: 7px 16px; min-width: 62px; }
.live-visibility button[aria-checked="true"] { background: var(--accent); color: var(--primary-ink); }
.live-preview { padding: 20px 24px; }
.live-preview .conversation { max-height: 240px; }

.header-tools { display:flex; align-items:center; gap:18px; }
.theme-toggle { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.theme-toggle button { background:transparent; color:var(--muted); padding:7px 10px; font-size:12px; }
.theme-toggle button[aria-pressed="true"] { background:var(--soft); color:var(--ink); box-shadow:inset 0 -2px 0 var(--highlight); }
.roleplay-setup { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; margin-bottom:16px; }
.roleplay-setup summary { cursor:pointer; font-size:13px; font-weight:600; }
.roleplay-setup .fact { padding:12px 0; }
.review-scenario { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; }
.review-scenario strong { display:block; font-size:20px; }
.review-scenario p { margin:6px 0 0; }
select { background:var(--input); }
@media(max-width:480px){
  .topbar{gap:12px;}
  .brand{gap:10px;}
  .brand-logo-frame{padding:5px 8px;}
  .brand-logo-frame img{width:60px;}
  .brand-name{font-size:11px;letter-spacing:.6px;}
  .product-name{font-size:18px;}
  .header-tools{margin-left:auto;gap:6px;}
  .theme-toggle button{padding:8px 12px;}
}

.turn strong { color:var(--accent); }