:root { color-scheme: light; --ink:#172422; --muted:#687875; --line:#dce5e2; --teal:#087f73; --teal-dark:#075e57; --green:#218563; --blue:#2d6db5; --amber:#c87924; --red:#c64a4a; --surface:#fff; --bg:#f3f7f6; font-family:"Microsoft YaHei","Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); }
button, textarea, select { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
.lab-header { height:68px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; background:#10201f; color:#fff; border-bottom:1px solid #263a37; }
.brand,.header-actions,.brand>div,.section-heading,.side-heading,.result-head,.assistant-head,.record-actions,.level-row { display:flex; align-items:center; }
.brand { gap:12px; }.brand img { width:36px; height:36px; object-fit:contain; }.brand>div { align-items:flex-start; flex-direction:column; gap:2px; }.brand b { font-size:16px; }.brand span { font-size:11px; color:#a7bbb7; }
.header-actions { gap:14px; }.health-summary { display:flex; align-items:center; gap:7px; font-size:12px; color:#c8d6d3; }.health-summary i,.assistant-head span i { width:7px; height:7px; border-radius:50%; background:#d6a04c; }.health-summary.ok i,.assistant-head span i { background:#4ed09b; box-shadow:0 0 0 4px #4ed09b20; }
.icon-button { width:36px; height:36px; border:1px solid var(--line); background:#fff; color:#52625f; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; text-decoration:none; }.lab-header .icon-button { background:#1b302e; color:#d9e5e2; border-color:#34504c; }.icon-button svg { width:17px; height:17px; }
.lab-shell { max-width:1500px; margin:0 auto; padding:24px 28px 36px; }
.metric-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 18px; background:#fff; border:1px solid var(--line); border-radius:7px; }
.metric-strip>div { min-height:76px; padding:14px 18px; border-right:1px solid var(--line); display:grid; grid-template-columns:1fr auto; align-content:center; gap:4px 12px; }
.metric-strip>div:last-child { border-right:0; }
.metric-strip span { color:var(--muted); font-size:11px; }
.metric-strip b { grid-row:1/3; grid-column:2; align-self:center; font-size:23px; color:#173b36; font-variant-numeric:tabular-nums; }
.metric-strip small { color:#899692; font-size:10px; }
.corpus-workspace { margin-bottom:18px; background:#fff; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.system-tabs { height:56px; display:grid; grid-template-columns:repeat(3,1fr); background:#edf2f1; border-bottom:1px solid var(--line); }
.system-tabs button { position:relative; min-width:0; padding:0 18px; border:0; border-right:1px solid #dbe4e2; background:transparent; color:#5b6966; display:flex; align-items:center; justify-content:center; gap:9px; font-weight:700; }
.system-tabs button:last-child { border-right:0; }
.system-tabs button svg { width:17px; }
.system-tabs button b { min-width:28px; padding:2px 6px; border-radius:4px; background:#dde7e4; color:#64736f; font:600 10px ui-monospace,Consolas,monospace; }
.system-tabs button.active { background:#fff; color:var(--teal-dark); }
.system-tabs button.active::after { content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:3px; background:var(--teal); }
.system-tabs button.active b { background:#dbefea; color:var(--teal-dark); }
.corpus-toolbar { min-height:94px; padding:15px 18px; display:grid; grid-template-columns:minmax(220px,1fr) minmax(220px,340px) 170px 140px auto; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.corpus-title span { color:var(--teal); font-size:10px; font-weight:700; }
.corpus-title h2 { margin:3px 0 2px; font-size:16px; }
.corpus-title p { margin:0; color:var(--muted); font-size:10px; }
.search-field { height:40px; position:relative; display:flex; align-items:center; }
.search-field svg { position:absolute; left:11px; width:15px; color:#7d8b88; }
.search-field input,.corpus-toolbar select { width:100%; height:40px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); outline:none; }
.search-field input { padding:0 12px 0 35px; }
.corpus-toolbar select { padding:0 9px; font-size:12px; }
.search-field input:focus,.corpus-toolbar select:focus { border-color:#65aa9f; box-shadow:0 0 0 3px #0c8d7d12; }
.phrase-table { min-height:260px; }
.phrase-table-head,.phrase-row { display:grid; grid-template-columns:90px 170px minmax(0,1fr) 100px; align-items:center; gap:12px; }
.phrase-table-head { height:34px; padding:0 18px; background:#f7f9f8; color:#7d8a87; font-size:10px; font-weight:700; text-transform:uppercase; border-bottom:1px solid var(--line); }
.phrase-list { height:260px; overflow:auto; }
.phrase-row { width:100%; min-height:48px; padding:7px 18px; border:0; border-bottom:1px solid #edf1f0; background:#fff; color:var(--ink); text-align:left; }
.phrase-row:hover { background:#f4f9f7; }
.phrase-row.active { background:#eaf5f2; box-shadow:inset 3px 0 var(--teal); }
.phrase-row .phrase-id { color:#6d7c79; font:600 11px ui-monospace,Consolas,monospace; }
.phrase-row .phrase-category { color:#667572; font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.phrase-row .phrase-text { font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.phrase-status { justify-self:start; padding:3px 7px; border-radius:4px; background:#eef2f1; color:#778581; font-size:10px; white-space:nowrap; }
.phrase-status.passed { background:#e3f3eb; color:#267458; }
.phrase-status.failed { background:#fae8e7; color:#a34444; }
.phrase-status.skipped { background:#fff2dd; color:#9a671e; }
.corpus-footer { min-height:48px; padding:7px 18px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.corpus-footer>div { display:flex; gap:7px; }
.secondary-button.compact { min-height:32px; padding:0 10px; font-size:11px; }
.secondary-button.compact svg { width:14px; }
.control-band { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:20px; }.control-copy>span,.section-heading>div>span,.side-heading>div>span { color:var(--teal); font-size:11px; font-weight:700; text-transform:uppercase; }.control-copy h1 { margin:5px 0 4px; font-size:25px; letter-spacing:0; }.control-copy p { margin:0; font-size:13px; color:var(--muted); }
.mode-control { display:grid; grid-template-columns:repeat(3,minmax(130px,1fr)); background:#e6eeec; padding:4px; border-radius:7px; gap:3px; }.mode-control button { min-height:42px; padding:0 15px; border:0; border-radius:5px; background:transparent; color:#50615e; display:flex; align-items:center; justify-content:center; gap:7px; font-weight:600; }.mode-control button svg { width:16px; }.mode-control button.active { background:#fff; color:var(--teal-dark); box-shadow:0 1px 4px #17352f1c; }
.test-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; }.test-main { min-width:0; display:grid; gap:18px; }.recorder-surface,.results-section,.assistant-panel,.history-panel,.check-panel { background:var(--surface); border:1px solid var(--line); border-radius:7px; }.recorder-surface,.results-section { padding:20px; }.section-heading,.side-heading { justify-content:space-between; }.section-heading h2,.side-heading h2 { margin:3px 0 0; font-size:17px; letter-spacing:0; }.timer { font:600 17px ui-monospace,Consolas,monospace; color:#34433f; }
.wave-stage { height:170px; margin-top:16px; position:relative; overflow:hidden; background:#10201f; border-radius:6px; }#waveform { width:100%; height:100%; display:block; }.wave-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; color:#8da5a0; font-size:12px; }.wave-placeholder svg { width:34px; height:34px; }.wave-placeholder[hidden] { display:none; }
.level-row { gap:10px; margin:10px 0 15px; font-size:11px; color:var(--muted); }.level-track { height:5px; flex:1; background:#e5ecea; overflow:hidden; border-radius:3px; }.level-track i { display:block; width:0; height:100%; background:var(--green); transition:width .08s linear; }.level-row b { width:48px; text-align:right; color:#586865; font-family:ui-monospace,monospace; }
.record-actions { gap:9px; }.record-button,.secondary-button,.icon-text-button,.verdict button { border-radius:6px; min-height:40px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent; font-weight:700; }.record-button { background:var(--teal); color:#fff; min-width:145px; }.record-button.recording { background:var(--red); }.record-button svg,.secondary-button svg,.icon-text-button svg,.verdict button svg { width:16px; }.secondary-button,.icon-text-button { background:#fff; border-color:var(--line); color:#42524f; }.record-actions select { min-width:190px; height:40px; border:1px solid var(--line); border-radius:6px; padding:0 9px; color:#42524f; background:#fff; }.record-actions button:disabled,.icon-text-button:disabled,.verdict button:disabled { opacity:.45; cursor:not-allowed; }
.reference-row { margin-top:18px; padding-top:16px; border-top:1px solid #e8eeec; }.reference-row label { display:block; font-size:12px; font-weight:700; margin-bottom:7px; }.reference-row label small { font-weight:400; color:var(--muted); margin-left:6px; }.reference-row textarea { width:100%; resize:vertical; min-height:64px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; color:var(--ink); line-height:1.6; outline:none; }.reference-row textarea:focus { border-color:#65aa9f; box-shadow:0 0 0 3px #0c8d7d12; }.sample-actions { display:flex; gap:7px; margin-top:8px; flex-wrap:wrap; }.sample-actions button,.assistant-commands button { border:1px solid #d8e4e1; background:#f7faf9; color:#52635f; border-radius:5px; padding:6px 9px; font-size:11px; }.privacy-note { display:flex; gap:6px; align-items:center; color:#71807d; margin:13px 0 0; font-size:11px; }.privacy-note svg { width:14px; color:var(--green); }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:15px; }.result-panel { border:1px solid var(--line); border-radius:6px; padding:16px; min-width:0; }.result-panel.inactive { opacity:.42; }.result-head { position:relative; gap:10px; }.result-head>div:nth-child(2) { display:flex; flex-direction:column; gap:2px; }.result-head b { font-size:14px; }.result-head span { font-size:11px; color:var(--muted); }.provider-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:6px; }.provider-icon svg { width:17px; }.provider-icon.aliyun { color:var(--blue); background:#eaf3fc; }.provider-icon.jenasi { color:var(--teal); background:#e3f4f0; }.provider-dot { position:absolute; right:2px; width:8px; height:8px; border-radius:50%; background:#b9c4c1; }.result-panel.working .provider-dot { background:var(--amber); box-shadow:0 0 0 4px #c879241b; }.result-panel.done .provider-dot { background:var(--green); }.result-panel.error .provider-dot { background:var(--red); }
.transcript { min-height:104px; margin:14px 0; padding:12px; background:#f6f9f8; border-left:3px solid #b9ceca; color:#253330; line-height:1.8; font-size:14px; overflow-wrap:anywhere; }.transcript span { color:#93a19e; }.transcript .partial { color:#83938f; }.metrics { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #e7eeec; padding-top:13px; }.metrics div { padding:0 8px; border-right:1px solid #e7eeec; }.metrics div:first-child { padding-left:0; }.metrics div:last-child { border:0; }.metrics span,.metrics b { display:block; }.metrics span { color:var(--muted); font-size:10px; white-space:nowrap; }.metrics b { margin-top:4px; font-size:14px; }
.verdict { margin-top:14px; background:#edf6f3; border:1px solid #d5e9e3; padding:13px 14px; display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px; border-radius:6px; }.verdict-icon { width:38px; height:38px; display:grid; place-items:center; background:#fff; border-radius:6px; color:var(--teal); }.verdict-icon svg { width:19px; }.verdict span,.verdict b,.verdict p { display:block; }.verdict span { font-size:10px; color:var(--teal-dark); font-weight:700; }.verdict b { margin-top:2px; font-size:13px; }.verdict p { margin:3px 0 0; font-size:11px; color:var(--muted); }.verdict button { min-height:36px; background:var(--teal-dark); color:#fff; }
.side-column { display:grid; align-content:start; gap:18px; }.assistant-panel,.history-panel,.check-panel { padding:16px; }.assistant-head { gap:10px; }.assistant-avatar { width:42px; height:42px; background:#e6f3ef; border-radius:50%; display:grid; place-items:center; }.assistant-avatar img { width:28px; height:28px; object-fit:contain; }.assistant-head>div:nth-child(2) { display:flex; flex-direction:column; flex:1; }.assistant-head b { font-size:13px; }.assistant-head span { margin-top:3px; font-size:10px; color:var(--muted); display:flex; align-items:center; gap:5px; }.assistant-message { margin:14px 0 10px; padding:11px 12px; background:#f1f6f4; border-radius:5px; font-size:12px; color:#455652; line-height:1.65; }.assistant-commands { display:flex; gap:6px; flex-wrap:wrap; }
.side-heading>div:last-child { display:flex; gap:5px; }.history-list { margin-top:12px; max-height:335px; overflow:auto; }.empty-state { padding:35px 0; display:flex; align-items:center; flex-direction:column; gap:8px; color:#94a39f; font-size:11px; }.empty-state svg { width:25px; }.history-item { width:100%; display:grid; grid-template-columns:1fr auto; gap:5px 12px; padding:10px 3px; border:0; border-bottom:1px solid #e8eeec; background:#fff; text-align:left; }.history-item b { font-size:12px; color:#263531; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.history-item time,.history-item span { font-size:10px; color:var(--muted); }.history-item strong { grid-row:1/3; grid-column:2; align-self:center; color:var(--teal-dark); font-size:12px; }
.check-list { margin-top:12px; }.check-list>div { height:37px; display:grid; align-items:center; grid-template-columns:9px 1fr auto; gap:8px; border-bottom:1px solid #edf1f0; font-size:11px; }.check-list i { width:7px; height:7px; border-radius:50%; background:#b9c5c2; }.check-list i.ok { background:var(--green); }.check-list i.error { background:var(--red); }.check-list b { color:var(--muted); font-weight:500; }
.toast-region { position:fixed; right:22px; bottom:22px; display:grid; gap:8px; z-index:20; }.toast { max-width:360px; padding:11px 14px; background:#172a27; color:#fff; border-radius:6px; box-shadow:0 8px 24px #0a17152b; font-size:12px; }.toast.error { background:#8b3030; }
@media (max-width:1050px) { .test-layout { grid-template-columns:1fr; }.side-column { grid-template-columns:1fr 1fr; }.assistant-panel { grid-column:1/-1; } }
@media (max-width:1180px) { .corpus-toolbar { grid-template-columns:1fr 1fr 150px 130px; }.corpus-title { grid-column:1/-1; }.corpus-toolbar .icon-text-button { grid-column:4; } }
@media (max-width:720px) { .lab-header { padding:0 14px; }.health-summary { display:none; }.lab-shell { padding:18px 12px 28px; }.control-band { align-items:stretch; flex-direction:column; }.control-copy h1 { font-size:21px; }.mode-control { grid-template-columns:1fr; }.mode-control button { min-height:38px; }.result-grid,.side-column { grid-template-columns:1fr; }.assistant-panel { grid-column:auto; }.metrics { grid-template-columns:1fr 1fr; gap:12px 0; }.metrics div:nth-child(2) { border:0; }.verdict { grid-template-columns:38px 1fr; }.verdict button { grid-column:1/-1; }.record-actions { flex-wrap:wrap; }.record-actions select { flex:1; min-width:150px; }.wave-stage { height:135px; } }
@media (max-width:720px) {
  .metric-strip { grid-template-columns:1fr 1fr; }
  .metric-strip>div:nth-child(2) { border-right:0; }
  .metric-strip>div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .metric-strip b { font-size:18px; }
  .system-tabs { height:auto; grid-template-columns:1fr; }
  .system-tabs button { min-height:46px; justify-content:flex-start; border-right:0; border-bottom:1px solid var(--line); }
  .system-tabs button.active::after { inset:7px auto 7px 0; width:3px; height:auto; }
  .corpus-toolbar { grid-template-columns:1fr 1fr; }
  .corpus-title,.search-field { grid-column:1/-1; }
  .corpus-toolbar .icon-text-button { grid-column:auto; }
  .phrase-table-head { display:none; }
  .phrase-list { height:330px; }
  .phrase-row { grid-template-columns:74px 1fr auto; gap:5px 8px; }
  .phrase-row .phrase-category { grid-column:2; grid-row:1; }
  .phrase-row .phrase-text { grid-column:1/-1; grid-row:2; }
  .phrase-status { grid-column:3; grid-row:1; }
}