:root {
  color-scheme: dark;
  --bg: #07110f;
  --panel: rgba(16, 31, 27, .82);
  --line: rgba(173, 239, 209, .13);
  --text: #edf8f3;
  --muted: #91a69d;
  --green: #67f5ad;
  --amber: #ffca68;
  --red: #ff6b73;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 78% 5%, rgba(44, 177, 120, .15), transparent 30%),
    linear-gradient(135deg, #06100d 0%, #091613 55%, #07100e 100%);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
}
.shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 54px 0 70px; position: relative; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.eyebrow { color: var(--green); font: 700 12px/1.3 ui-monospace, monospace; letter-spacing: .2em; }
h1 { font-size: clamp(40px, 7vw, 78px); line-height: 1.02; letter-spacing: -.055em; margin: 14px 0 20px; max-width: 760px; }
h1 span { color: #9db0a7; }
.subhead { color: var(--muted); max-width: 620px; font-size: 16px; line-height: 1.8; }
.status-card { display: flex; align-items: center; gap: 14px; min-width: 230px; border: 1px solid var(--line); padding: 17px 20px; border-radius: 16px; background: rgba(7, 17, 15, .65); }
.status-card small { display: block; color: var(--muted); margin-top: 5px; }
.pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(103,245,173,.1), 0 0 20px var(--green); animation: breathe 2s infinite; }
.auth-panel { display:grid; grid-template-columns:auto minmax(220px,1fr) auto auto; align-items:center; gap:12px; border:1px solid var(--line); border-radius:14px; padding:13px 16px; margin-bottom:18px; background:rgba(9,22,18,.65); }
.auth-panel div { display:flex; flex-direction:column; gap:3px; }.auth-panel small { color:var(--muted); }.auth-panel input { padding:10px 12px; }.auth-panel button { min-height:40px; }.auth-panel > span { color:var(--green); font-size:12px; min-width:64px; }
.privacy-panel { display:flex; align-items:center; gap:12px; border:1px solid rgba(103,245,173,.18); border-radius:12px; padding:10px 14px; margin:-8px 0 18px; background:rgba(103,245,173,.04); font-size:12px; }
.privacy-panel strong { color:var(--green); white-space:nowrap; }.privacy-panel span { color:var(--muted); line-height:1.5; }
.live-validation-panel { border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin-bottom:18px; background:rgba(9,22,18,.8); }
.live-validation-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.live-validation-heading > div { display:flex; flex-direction:column; gap:4px; }.live-validation-heading small { color:var(--muted); }
.live-validation-heading > span { color:var(--amber); border:1px solid rgba(255,202,104,.25); background:rgba(255,202,104,.08); padding:6px 10px; border-radius:99px; font-size:11px; }
.live-validation-heading > span.active { color:var(--green); border-color:rgba(103,245,173,.25); background:rgba(103,245,173,.08); }
.live-validation-paths { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }.live-validation-paths span { color:var(--amber); border:1px solid rgba(255,202,104,.2); border-radius:9px; padding:8px 10px; font-size:12px; }.live-validation-paths span.pass { color:var(--green); border-color:rgba(103,245,173,.25); background:rgba(103,245,173,.05); }
.live-validation-panel p { color:var(--muted); margin:12px 0 0; font-size:12px; line-height:1.65; white-space:pre-line; }
@keyframes breathe { 50% { opacity: .5; transform: scale(.85); } }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: 18px; background: rgba(9, 22, 18, .65); }
.metrics article { padding: 20px 24px; border-right: 1px solid var(--line); }
.metrics article:last-child { border: 0; }
.metrics span { color: var(--muted); font-size: 12px; display: block; margin-bottom: 8px; }
.metrics strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.accuracy-strip { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:1px; margin-bottom:18px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--line); }
.accuracy-strip article, .accuracy-strip > p { margin:0; padding:17px 22px; background:rgba(9,22,18,.96); }
.accuracy-strip span, .accuracy-strip small { display:block; color:var(--muted); font-size:11px; }
.accuracy-strip strong { display:block; margin:6px 0; font-size:22px; font-variant-numeric:tabular-nums; }
.accuracy-strip > p { color:var(--muted); font-size:12px; line-height:1.6; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.accuracy-strip > p strong { display:inline; margin:0; color:var(--text); font-size:14px; }
.asr-health { padding:22px; margin-bottom:18px; }
.asr-health-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
.asr-health-heading h2 { margin:4px 0 0; font-size:18px; }
.asr-health-state { border:1px solid var(--line); border-radius:999px; padding:7px 11px; color:var(--muted); font-size:11px; white-space:nowrap; }
.asr-health-state.pass { color:var(--green); border-color:rgba(103,245,173,.3); background:rgba(103,245,173,.08); }
.asr-health-state.attention { color:var(--amber); border-color:rgba(255,202,104,.3); background:rgba(255,202,104,.08); }
.asr-health-state.error { color:var(--red); border-color:rgba(255,110,122,.32); background:rgba(255,110,122,.08); }
.asr-health-summary { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:15px; overflow:hidden; }
.asr-health-summary article { padding:15px 17px; border-right:1px solid var(--line); background:rgba(4,13,11,.34); }
.asr-health-summary article:last-child { border-right:0; }
.asr-health-summary span, .asr-health-summary small { display:block; color:var(--muted); font-size:11px; line-height:1.5; }
.asr-health-summary strong { display:block; margin:5px 0; font-size:23px; font-variant-numeric:tabular-nums; }
.asr-health-detail, .asr-health-note { color:var(--muted); font-size:12px; line-height:1.7; }
.asr-health-detail { margin:15px 0 10px; }
.asr-health-note { margin:12px 0 0; }
.asr-profile-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:9px; }
.asr-profile { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:rgba(4,13,11,.28); min-width:0; }
.asr-profile strong, .asr-profile small { display:block; }
.asr-profile strong { font-size:12px; overflow-wrap:anywhere; }
.asr-profile small { margin-top:6px; color:var(--muted); font-size:11px; line-height:1.55; }
.workspace { display: grid; grid-template-columns: 1.35fr .8fr; gap: 18px; margin-bottom: 18px; }
.panel { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 24px 70px rgba(0,0,0,.18); backdrop-filter: blur(18px); }
.simulator, .decision-panel, .history { padding: 25px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.panel-title > div { display: flex; align-items: center; gap: 11px; }
.panel-title h2 { font-size: 17px; margin: 0; }
.step { color: var(--green); font: 700 11px ui-monospace, monospace; border: 1px solid rgba(103,245,173,.24); padding: 5px 7px; border-radius: 7px; }
.badge { color: var(--green); background: rgba(103,245,173,.08); border: 1px solid rgba(103,245,173,.16); padding: 6px 9px; border-radius: 99px; font-size: 11px; }
label { display: block; color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.row { display: flex; gap: 10px; }
input, textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: rgba(3,10,8,.65); padding: 13px 14px; outline: none; font: inherit; }
input:focus, textarea:focus { border-color: rgba(103,245,173,.55); box-shadow: 0 0 0 3px rgba(103,245,173,.08); }
button { border: 0; border-radius: 11px; padding: 0 18px; color: #082015; background: var(--green); font-weight: 700; cursor: pointer; white-space: nowrap; }
button:hover { filter: brightness(1.08); transform: translateY(-1px); }
button:disabled { opacity: .45; cursor: wait; transform: none; }
.conversation { min-height: 150px; max-height: 280px; overflow: auto; margin: 20px 0; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(3,10,8,.38); }
.conversation.empty { display: grid; place-items: center; color: var(--muted); }
.bubble { width: fit-content; max-width: 84%; margin: 9px 0; border-radius: 14px 14px 14px 3px; padding: 10px 13px; background: rgba(255,255,255,.06); color: #cbdad3; font-size: 14px; line-height: 1.55; }
.bubble.assistant { margin-left: auto; border-radius: 14px 14px 3px 14px; background: rgba(103,245,173,.11); color: #c9f5df; }
.bubble small { display: block; opacity: .55; margin-bottom: 3px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.speech-box { border-top: 1px solid var(--line); padding-top: 18px; }
.speech-box textarea { min-height: 58px; }
.accent { min-width: 100px; }
.quick-examples { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.quick-examples button { color: var(--muted); background: transparent; border: 1px solid var(--line); font-size: 11px; padding: 7px 10px; }
.hidden { display: none !important; }
.decision-empty { min-height: 330px; display: grid; place-content: center; text-align: center; color: var(--muted); }
.radar { width: 100px; height: 100px; border: 1px solid rgba(103,245,173,.2); border-radius: 50%; margin: 0 auto 18px; position: relative; background: radial-gradient(circle, rgba(103,245,173,.16), transparent 60%); }
.radar::after, .radar::before { content:""; position:absolute; inset:16px; border: 1px solid rgba(103,245,173,.15); border-radius: 50%; }
.radar::after { inset: 34px; }
.radar i { position:absolute; width:5px; height:5px; background:var(--green); border-radius:50%; box-shadow:0 0 8px var(--green); animation: blink 2s infinite; }
.radar i:nth-child(1) { top:22px; left:47px; }.radar i:nth-child(2) { top:58px; left:25px; animation-delay:.5s }.radar i:nth-child(3) { top:67px; left:69px; animation-delay:1s }
@keyframes blink { 50% { opacity:.15; } }
.probability-label { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 10px; color: var(--muted); }
.probability-label strong { font-size: 34px; color: var(--text); }
.meter { height: 8px; background: rgba(255,255,255,.07); border-radius: 99px; overflow: hidden; margin-bottom: 25px; }
.meter i { display: block; height: 100%; width: 50%; background: var(--amber); border-radius: inherit; transition: width .4s, background .4s; }
.action-card { display:flex; gap:13px; align-items:center; border: 1px solid rgba(255,202,104,.18); background: rgba(255,202,104,.07); border-radius: 14px; padding: 15px; }
.action-card > span { width:38px; height:38px; border-radius:10px; background:rgba(255,202,104,.14); display:grid; place-items:center; font-weight:900; }
.action-card p { color:var(--muted); margin:5px 0 0; font-size:12px; line-height:1.5; }
.action-card.safe { border-color:rgba(103,245,173,.2); background:rgba(103,245,173,.07); }.action-card.spam { border-color:rgba(255,107,115,.2); background:rgba(255,107,115,.07); }
.evidence h3 { margin:25px 0 11px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.evidence ul { margin:0; padding:0; list-style:none; }.evidence li { border-top:1px solid var(--line); padding:10px 0; font-size:13px; color:#bfd0c7; }
.feedback-box { border-top:1px solid var(--line); margin-top:18px; padding-top:16px; }
.feedback-box > span { display:block; color:var(--muted); font-size:12px; margin-bottom:9px; }
.feedback-box > div { display:flex; gap:7px; flex-wrap:wrap; }
.feedback-box button { color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--line); padding:8px 10px; font-size:11px; }
.feedback-box small { display:block; color:var(--green); margin-top:9px; min-height:15px; }
.history { padding-bottom: 10px; }
.muted { color: var(--muted); font-size: 11px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; } th { color:var(--muted); font-size:11px; text-align:left; font-weight:500; padding:0 12px 12px; } td { padding:13px 12px; border-top:1px solid var(--line); color:#c4d3cc; } .no-data { text-align:center; color:var(--muted); padding:30px; }
.status-pill { display:inline-block; padding:5px 8px; border-radius:99px; font-size:10px; font-weight:700; }.status-pill.rejected { color:var(--red); background:rgba(255,107,115,.1); }.status-pill.transferred { color:var(--green); background:rgba(103,245,173,.1); }.status-pill.screening { color:var(--amber); background:rgba(255,202,104,.1); }
.history-review-actions { display:flex; gap:5px; }
.history-review-actions button { min-height:30px; padding:5px 8px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--text); font-size:10px; }
.delete-call { min-height:30px; padding:5px 9px; border:1px solid rgba(255,107,115,.28); background:rgba(255,107,115,.08); color:var(--red); font-size:10px; }
.reviewed-label { color:var(--green); white-space:nowrap; }
.review-origin { display:block; width:max-content; max-width:150px; margin-bottom:6px; padding:3px 6px; border-radius:6px; color:var(--muted); background:rgba(255,255,255,.05); font-size:9px; line-height:1.35; white-space:normal; }
.review-origin.real { color:var(--green); background:rgba(103,245,173,.09); }
.review-origin.simulation, .review-origin.legacy { color:var(--amber); background:rgba(255,202,104,.08); }
@media (max-width: 800px) { .hero { align-items:flex-start; flex-direction:column; }.auth-panel { grid-template-columns:1fr; }.privacy-panel { align-items:flex-start; flex-direction:column; }.live-validation-heading, .asr-health-heading { align-items:flex-start; flex-direction:column; }.metrics { grid-template-columns:1fr 1fr; }.metrics article:nth-child(2) { border-right:0; }.metrics article:nth-child(-n+2) { border-bottom:1px solid var(--line); }.accuracy-strip, .asr-health-summary { grid-template-columns:1fr; }.asr-health-summary article { border-right:0; border-bottom:1px solid var(--line); }.asr-health-summary article:last-child { border-bottom:0; }.workspace { grid-template-columns:1fr; }.row { flex-direction:column; } button { min-height:44px; }.shell { padding-top:30px; } }