/* ======================================================================
   TS → JS 预览器 · 独立设计（极简双栏 / 校样对照主题）
   浅色 = 纸白 + TS 品牌蓝；深色 = 午夜蓝钢
   ====================================================================== */
.ts{
  --ink:#1c2733; --sub:#54677a; --faint:#8fa2b4;
  --bg:#f2f5f8; --card:#ffffff; --card2:#eaf0f6; --line:#d4dfe9; --line2:#e2eaf2;
  --pri:#3178c6; --pri-2:#5aa9e6; --pri-soft:#dcecfa; --pri-ink:#1d5a9e;
  --pane:#1e2936; --pane-ink:#d7e5f4;
  --ok:#1a7f4e; --err:#c0392b; --warn:#b7791f;
  --r:12px;
  --shadow:0 1px 2px rgba(28,39,51,.05),0 12px 30px rgba(28,39,51,.09);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px;line-height:1.75;
  background:
    linear-gradient(180deg, rgba(49,120,198,.06), transparent 240px),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .ts{
  --ink:#e3ebf3; --sub:#94a8bc; --faint:#5f7488;
  --bg:#0d141c; --card:#141c26; --card2:#1a2531; --line:#29394b; --line2:#213040;
  --pri:#5aa9e6; --pri-2:#8ac4f0; --pri-soft:rgba(90,169,230,.13); --pri-ink:#bfe0f7;
  --pane:#0a1016; --pane-ink:#cfe3f5;
  --ok:#4ade80; --err:#f87171; --warn:#fbbf24;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px rgba(0,0,0,.5);
}
.ts *{box-sizing:border-box;}
.ts-wrap{max-width:1180px;margin:0 auto;}
.ts textarea,.ts pre,.ts code{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}

.ts-hero{margin-top:22px;display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 24px;box-shadow:var(--shadow);}
.ts-badge{flex:none;width:52px;height:52px;border-radius:12px;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:17px;font-family:Consolas,monospace;}
.ts-hero h1{margin:0;font-size:clamp(20px,3vw,26px);font-weight:900;color:var(--pri-ink);}
.ts-hero p{margin:2px 0 0;color:var(--sub);font-size:14px;max-width:780px;}
.ts-hero p b{color:var(--pri-ink);}
.ts-st{margin-left:auto;font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card2);color:var(--sub);white-space:nowrap;}
.ts-st.load{color:var(--warn);border-color:var(--warn);}
.ts-st.ready{color:var(--ok);border-color:var(--ok);}
.ts-st.fail{color:var(--err);border-color:var(--err);}

.ts-desk{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;}
@media (max-width:940px){.ts-desk{grid-template-columns:1fr;}}
.ts-pane{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;}
.ts-pane header{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line2);font-size:12.5px;font-weight:900;letter-spacing:.06em;color:var(--sub);flex-wrap:wrap;}
.ts-pane header b{color:var(--pri-ink);}
.ts-pane select{border:1px solid var(--line);border-radius:7px;background:var(--card2);color:var(--ink);font-size:12px;padding:3px 8px;font-weight:700;}
.ts-in{flex:1;min-height:380px;width:100%;border:none;outline:none;resize:vertical;padding:14px 16px;font-size:13px;line-height:1.7;background:var(--card);color:var(--ink);}
.ts-out{flex:1;min-height:380px;margin:0;padding:14px 16px;font-size:13px;line-height:1.7;background:var(--pane);color:var(--pane-ink);overflow:auto;white-space:pre;}
.ts-diag{padding:10px 14px;border-top:1px solid var(--line2);font-size:12.5px;line-height:1.7;max-height:150px;overflow:auto;background:var(--card2);color:var(--err);display:none;white-space:pre-wrap;}
.ts-diag.show{display:block;}
.ts-diag .w{color:var(--warn);}
.ts-msg{font-size:13px;font-weight:700;min-height:20px;margin-top:10px;}
.ts-msg.ok{color:var(--ok);}
.ts-msg.err{color:var(--err);}
.ts-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.ts-btn{border:none;background:var(--pri);color:#fff;border-radius:9px;padding:8px 16px;font-size:13px;font-weight:800;cursor:pointer;}
.ts-btn:hover{background:var(--pri-2);}
.ts-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1.5px solid var(--line);}
.ts-btn-ghost:hover{border-color:var(--pri);}
.ts-btn:disabled{opacity:.55;cursor:wait;}

.ts-faq{margin-top:32px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;box-shadow:var(--shadow);}
.ts-faq h2{margin:0 0 10px;font-size:19px;font-weight:900;color:var(--pri-ink);}
.ts-faq h3{margin:16px 0 4px;font-size:15px;font-weight:800;}
.ts-faq p{margin:0;color:var(--sub);font-size:14px;}
.ts-faq p b{color:var(--ink);}

/* ---------- 扩展：代码片段预设 + 三目标对比 ---------- */
.ts-extra{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;}
@media (max-width:960px){.ts-extra{grid-template-columns:1fr;}}
.ts-extra-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);min-width:0;}
.ts-extra-col h2{margin:0 0 6px;font-size:14px;font-weight:900;color:var(--pri-ink);letter-spacing:.06em;}
.ts-hint{margin:0 0 10px;font-size:12.5px;color:var(--sub);}
.ts-presets{display:flex;flex-wrap:wrap;gap:8px;}
.ts-preset{border:1px solid var(--line);background:var(--card2);color:var(--ink);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;cursor:pointer;}
.ts-preset:hover{border-color:var(--pri);color:var(--pri-ink);}
.ts-viz{overflow-x:auto;}
.ts-viz svg{display:block;width:100%;min-width:520px;height:auto;}
.ts-viz-empty{border:1px dashed var(--line);border-radius:var(--r);color:var(--faint);font-size:13px;text-align:center;padding:30px 12px;}

/* ---------- 扩展：诊断报告 ---------- */
.ts-report{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);}
.ts-report-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ts-report-head h2{margin:0;font-size:14px;font-weight:900;color:var(--pri-ink);letter-spacing:.06em;}
.ts-report-btns{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.ts-mini{border:1px solid var(--line);background:var(--card2);color:var(--pri-ink);border-radius:7px;padding:3px 10px;font-size:12px;font-weight:800;cursor:pointer;}
.ts-mini:hover{border-color:var(--pri);}
.ts-issues{margin-top:10px;display:flex;flex-direction:column;gap:8px;}
.ts-sum{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--sub);}
.ts-sum-t{margin-left:auto;font-weight:700;}
.ts-lv{display:inline-block;border-radius:999px;padding:1px 9px;font-size:11px;font-weight:800;white-space:nowrap;}
.ts-lv.lv-err{background:rgba(192,57,43,.12);color:var(--err);}
.ts-lv.lv-warn{background:rgba(183,121,31,.14);color:var(--warn);}
.ts-lv.lv-info{background:var(--pri-soft);color:var(--pri-ink);}
.ts-issue{border:1px solid var(--line2);border-left:4px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--card2);}
.ts-issue.lv-err{border-left-color:var(--err);}
.ts-issue.lv-warn{border-left-color:var(--warn);}
.ts-issue.lv-info{border-left-color:var(--pri);}
.ts-issue-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.ts-loc{font-size:12px;color:var(--sub);font-weight:700;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}
.ts-code{font-size:11.5px;color:var(--faint);font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}
.ts-issue-msg{font-size:13px;color:var(--ink);margin-top:2px;word-break:break-word;}
.ts-issue-fix{font-size:12.5px;color:var(--sub);margin-top:2px;word-break:break-word;}
.ts-issue-fix b{color:var(--pri-ink);}
.ts-empty{border:1px dashed var(--line);border-radius:8px;color:var(--faint);font-size:13px;padding:20px 12px;text-align:center;}
.ts-empty.ok{border-color:var(--ok);color:var(--ok);}
:root[data-theme="dark"] .ts-lv.lv-err{background:rgba(248,113,113,.14);}
:root[data-theme="dark"] .ts-lv.lv-warn{background:rgba(251,191,36,.14);}