/* Trainer UI — same dark palette as /admin and /dashboard. */
:root { --bg:#0f172a; --panel:#1e293b; --panel-2:#273449; --line:#334155; --text:#e2e8f0; --muted:#94a3b8; --accent:#f97316; --ok:#22c55e; --err:#ef4444; --warn:#eab308; }
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--text); }
header { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--line); gap:12px; flex-wrap:wrap; }
header h1 { font-size:18px; margin:0; } header .sub { color:var(--muted); font-size:13px; }
.links { display:flex; align-items:center; gap:6px; }
.links a, button.link { color:var(--accent); background:none; border:none; text-decoration:none; font-size:14px; padding:6px 10px; cursor:pointer; border-radius:6px; }
.links button.link.active { background:var(--panel-2); color:var(--text); }
main { padding:20px 24px; max-width:1000px; margin:0 auto; }
main.center, .panel.center { text-align:center; padding-top:60px; }
main.narrow { max-width:560px; padding-top:40px; }
.panel.auth p.muted { margin:0 0 14px; font-size:14px; } .panel.auth .hint { margin-top:14px; line-height:1.5; }
.userbar { color:var(--muted); font-size:13px; margin-right:8px; } .userbar strong { color:var(--text); }
.loading { color:var(--muted); padding:40px; text-align:center; }
code { font-family: ui-monospace, Menlo, monospace; font-size:12px; background:#0b1220; padding:1px 5px; border-radius:4px; }
.muted { color:var(--muted); } .hint { color:var(--muted); font-size:12px; } .error { color:var(--err); font-size:13px; } .error.big { font-size:15px; }
.row { display:flex; align-items:center; } .row.gap { gap:10px; margin-top:12px; } .row.wrap { flex-wrap:wrap; }
.ok { color:var(--ok); } .warn { color:var(--warn); } .err { color:var(--err); }

.panel { background:var(--panel); border-radius:12px; padding:18px 20px; margin-bottom:16px; }
.panel h2 { font-size:15px; margin:0 0 10px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px 18px; } .grid.top { margin-top:14px; }
.field { display:flex; flex-direction:column; gap:5px; } .field.wide, .hint.wide { grid-column: 1 / -1; }
.label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
input[type=text], input[type=number], input[type=email], input[type=password], textarea { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#0b1220; color:var(--text); font-size:14px; font-family:inherit; }
textarea { resize:vertical; line-height:1.45; }
input:focus, textarea:focus { outline:none; border-color:var(--accent); }
input[readonly] { color:var(--muted); }
.toggle { display:flex; align-items:flex-start; gap:10px; font-size:13px; cursor:pointer; margin-top:14px; color:var(--muted); } .toggle input { margin-top:3px; }

button { font-family:inherit; font-size:14px; border-radius:8px; cursor:pointer; border:1px solid transparent; padding:9px 14px; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--accent); color:#fff; font-weight:600; } button.primary.big { padding:12px 22px; font-size:16px; }
button.secondary { background:var(--panel-2); color:var(--text); border-color:var(--line); }

/* cards */
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }
.cards.small { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.card { display:flex; flex-direction:column; gap:6px; text-align:left; background:var(--panel-2); border:2px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--text); }
.card .muted { font-size:13px; line-height:1.35; } .card .meta { font-size:12px; color:var(--muted); }
.card.selected { border-color:var(--accent); background:#2b2418; }
.group { margin-bottom:12px; } .group-label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 6px; }
.badge { align-self:flex-start; padding:2px 8px; border-radius:999px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.badge.easy, .chip.easy { background:#14532d; color:#bbf7d0; } .badge.medium, .chip.medium { background:#713f12; color:#fef08a; } .badge.hard, .chip.hard { background:#7f1d1d; color:#fecaca; }
.chip { border:2px solid transparent; border-radius:999px; padding:7px 14px; } .chip.selected { border-color:#fff; }
.persona-brief { margin-top:12px; font-size:14px; line-height:1.45; } .persona-brief p { margin:4px 0; }

/* call */
.call-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.timer { font-family: ui-monospace, Menlo, monospace; font-size:18px; color:var(--muted); } .timer.over { color:var(--err); }
.status { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); margin:10px 0; }
.dot { width:10px; height:10px; border-radius:50%; background:#64748b; }
.dot.listening { background:var(--ok); } .dot.speaking { background:var(--accent); animation: pulse 1s infinite; } .dot.thinking { background:var(--warn); }
@keyframes pulse { 50% { transform: scale(1.4); } }
.transcript { list-style:none; padding:0; margin:0 0 12px; max-height:360px; min-height:120px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.transcript li { padding:10px 12px; border-radius:12px; font-size:15px; max-width:85%; line-height:1.4; }
.transcript li.agent { background:var(--panel-2); align-self:flex-start; }
.transcript li.user { background:#1d3b2a; align-self:flex-end; }
.checklist { margin:6px 0 0; padding-left:20px; color:var(--muted); font-size:13px; line-height:1.5; }
/* checklist + objection hints (setup preparation and call) */
.prep { margin-top:12px; }
.tip-block { margin-top:12px; } .tip-block > .label { display:block; margin-bottom:4px; }
.tip-block ul { margin:4px 0 0; padding-left:20px; font-size:13px; line-height:1.5; color:#cbd5e1; } .tip-block p { margin:4px 0 0; font-size:13px; line-height:1.5; color:#cbd5e1; }
.tip-card { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:8px; background:var(--panel-2); }
.tip-card h4 { margin:0; font-size:14px; } .tip-card h4 .muted { font-weight:400; font-size:13px; }
.tip-card .tip-block { margin-top:8px; }
.tip-quote { font-style:italic; padding-left:10px; border-left:2px solid var(--accent); }
.traps li::marker { color:var(--err); }

/* result */
.result-head { margin-bottom:12px; }
.score-row { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.score { width:120px; height:120px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; border:6px solid var(--line); flex-shrink:0; }
.score.ok { border-color:var(--ok); } .score.warn { border-color:var(--warn); } .score.err { border-color:var(--err); }
.score .num { font-size:36px; font-weight:700; line-height:1; } .score .lvl { font-size:11px; color:var(--muted); margin-top:6px; text-align:center; }
.score-text { flex:1; min-width:240px; font-size:15px; line-height:1.5; } .score-text p { margin:0 0 8px; } .goal { font-weight:600; }
.metrics { display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; font-size:13px; color:var(--muted); } .metrics strong { color:var(--text); }
.criterion { margin-bottom:14px; } .crit-head { display:flex; gap:12px; align-items:baseline; } .crit-score { margin-left:auto; font-weight:600; }
.bar { height:8px; background:#0b1220; border-radius:999px; margin:6px 0; overflow:hidden; } .fill { height:100%; border-radius:999px; background:var(--warn); }
.fill.s1 { background:var(--err); width:4% !important; } .fill.s2 { background:#f97316; } .fill.s4 { background:#84cc16; } .fill.s5 { background:var(--ok); }
.criterion p { margin:0; font-size:14px; line-height:1.5; color:#cbd5e1; }
.evidence { color:var(--muted); font-size:13px; margin-left:6px; }
.lineref { background:#0b1220; border:1px solid var(--line); color:var(--accent); font-size:12px; padding:1px 7px; border-radius:999px; margin:0 4px; vertical-align:middle; }
.two { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.points { margin:0; padding-left:20px; font-size:14px; line-height:1.5; } .points li { margin-bottom:8px; }
.points.ok li::marker { color:var(--ok); } .points.warn li::marker { color:var(--warn); } .points.err li::marker { color:var(--err); }
.better { color:#cbd5e1; font-style:italic; font-size:13px; margin-top:3px; padding-left:10px; border-left:2px solid var(--line); }
.flags { border-left:4px solid var(--err); }
table { border-collapse:collapse; width:100%; font-size:14px; } th { text-align:left; color:var(--muted); font-weight:500; font-size:12px; text-transform:uppercase; padding:6px 8px; }
td { padding:7px 8px; border-top:1px solid var(--line); vertical-align:top; }
.pill { padding:2px 8px; border-radius:999px; font-size:12px; } .pill.ok { background:#14532d; color:#bbf7d0; } .pill.warn { background:#713f12; color:#fef08a; } .pill.err { background:#7f1d1d; color:#fecaca; }
.next { border-left:4px solid var(--accent); }
.lines { list-style:none; padding:0; margin:0; font-size:14px; line-height:1.5; }
.lines li { padding:6px 8px; border-radius:8px; display:flex; gap:8px; } .lines li.hl { background:#3b2d12; }
.lines .n { color:var(--muted); width:26px; flex-shrink:0; font-family: ui-monospace, Menlo, monospace; font-size:12px; padding-top:2px; }
.lines .ts { color:var(--muted); width:38px; flex-shrink:0; font-family: ui-monospace, Menlo, monospace; font-size:12px; padding-top:2px; }
.lines .who { color:var(--muted); flex-shrink:0; } .lines li.user .who { color:#86efac; }
.table-wrap { overflow-x:auto; } .history tbody tr { cursor:pointer; } .history tbody tr:hover td { background:var(--panel-2); }
.score-cell strong { font-size:16px; }

@media (max-width: 720px) { main { padding:14px; } header { padding:12px 14px; } .two { grid-template-columns: 1fr; } .transcript li { max-width:100%; } }

/* objection picker (setup) */
.obj-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:8px; }
.obj { display:flex; align-items:center; gap:10px; text-align:left; padding:8px 10px; border:1px solid #334155; border-radius:10px; background:#0f172a; color:inherit; cursor:pointer; }
.obj:hover { border-color:#64748b; } .obj.selected { border-color:#38bdf8; background:#0c2a3a; }
.obj-num { width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:#38bdf8; color:#0f172a; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; visibility:hidden; }
.obj.selected .obj-num { visibility:visible; }
.obj-body { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; } .obj-body .muted { font-size:12px; }
/* four steps (result) */
.four-steps { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid #1e293b; font-size:13px; }
.step-avg { padding:2px 8px; border-radius:999px; } .step-avg.ok { background:#14532d; color:#bbf7d0; } .step-avg.warn { background:#713f12; color:#fef08a; } .step-avg.err { background:#7f1d1d; color:#fecaca; }
.objection-card { border:1px solid #1e293b; border-radius:10px; padding:12px; margin-bottom:12px; }
.obj-head { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin:8px 0; }
.step { border-radius:8px; padding:8px 6px; text-align:center; background:#1e293b; }
.step.ok { background:#14532d; color:#bbf7d0; } .step.warn { background:#713f12; color:#fef08a; } .step.err { background:#7f1d1d; color:#fecaca; }
.step-mark { font-size:20px; font-weight:700; line-height:1; } .step-label { font-size:12px; margin-top:4px; } .step-ref { margin-top:2px; }
.better-step { font-weight:600; }
@media (max-width: 600px) { .steps { grid-template-columns:repeat(2, 1fr); } }