:root { color-scheme: dark; font-family: system-ui, "Microsoft JhengHei", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #0d110e; color: #e4eae6; }
a { color: inherit; text-decoration: none; }
.test-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.test-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid #29352e; background: #101612; position: sticky; top: 0; z-index: 5; }
.test-brand small { display: block; color: #718078; font-size: 10px; letter-spacing: .12em; }
.test-brand strong { display: block; margin-top: 2px; font-size: 15px; }
.test-top-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.test-link, .test-tab, button { border: 1px solid #405148; background: #172019; color: #dfe7e2; border-radius: 8px; padding: 7px 10px; font-size: 11px; cursor: pointer; }
.test-link:hover, .test-tab:hover, button:hover { background: #202c24; }
.test-link.primary, .test-tab.active { background: #203027; border-color: #587062; color: #f0f4f1; }
.test-main { width: min(1200px, calc(100% - 24px)); margin: 0 auto; padding: 18px 0 28px; }
.test-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.test-intro h1 { margin: 0 0 5px; font-size: 21px; }
.test-intro p { margin: 0; color: #89978f; font-size: 12px; line-height: 1.6; max-width: 760px; }
.test-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 9px; scrollbar-width: thin; }
.test-tab { flex: 0 0 auto; }
.test-frame-wrap { border: 1px solid #344139; border-radius: 11px; overflow: hidden; background: #0f1511; min-height: calc(100vh - 170px); }
.test-frame { width: 100%; height: calc(100vh - 170px); min-height: 620px; border: 0; display: block; background: #0d110e; }
.tool-page { width: min(980px, calc(100% - 28px)); margin: 0 auto; padding: 20px 0 30px; }
.tool-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tool-page h1 { margin: 0 0 6px; font-size: 20px; }
.tool-page p { color: #93a098; line-height: 1.65; font-size: 12px; }
.tool-card { border: 1px solid #344139; background: #111713; border-radius: 10px; padding: 12px; }
pre { white-space: pre-wrap; border: 1px solid #344139; background: #111713; padding: 14px; border-radius: 10px; line-height: 1.65; min-height: 220px; overflow: auto; }
.good { color: #adc8b4; } .bad { color: #d4aaaa; }
@media (max-width: 760px) {
  .test-topbar, .test-intro, .tool-page-head { align-items: flex-start; flex-direction: column; }
  .test-main { width: min(100% - 16px, 1200px); padding-top: 10px; }
  .test-frame, .test-frame-wrap { min-height: calc(100vh - 210px); height: calc(100vh - 210px); }
}