.test-topbar { align-items: flex-end; }
.emergency-top { min-height: 34px; padding: 6px 12px; border-radius: 999px; }
.direct-open-notice { margin: 14px clamp(12px, 3vw, 46px) 0; padding: 11px 14px; border: 1px solid rgba(255, 198, 109, .5); border-radius: 12px; color: #ffe0ab; background: rgba(255, 198, 109, .08); font-size: 13px; }
.test-layout { max-width: 1580px; margin: 0 auto; padding: 22px clamp(12px, 3vw, 46px) 70px; display: grid; gap: 18px; }
.overview-panel { background: linear-gradient(145deg, rgba(18, 42, 49, .96), rgba(12, 27, 34, .96)); }
.progress-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.progress-track { height: 12px; overflow: hidden; border-radius: 99px; background: #071218; border: 1px solid var(--line); }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--cyan)); transition: width .25s ease; }
.progress-row strong { min-width: 100px; text-align: right; font-size: 13px; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.summary-grid article { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 16, 21, .55); }
.summary-grid span { display: block; color: var(--muted); font-size: 12px; }
.summary-grid strong { display: block; margin-top: 3px; font-size: 24px; }
.summary-grid article:nth-child(1) strong { color: var(--mint); }
.summary-grid article:nth-child(2) strong { color: var(--amber); }
.summary-grid article:nth-child(3) strong { color: var(--red); }
.safety-note { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(255, 198, 109, .42); border-radius: 12px; color: #ffe0ab; background: rgba(255, 198, 109, .07); font-size: 13px; }
.connect-strip { display: grid; grid-template-columns: minmax(210px, 1fr) auto auto; gap: 10px; align-items: end; }
.test-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 16px; }
.test-grid.compact-tests { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.test-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #0b1920; transition: border-color .2s, background .2s; }
.test-card[data-status="pass"] { border-color: rgba(82, 227, 182, .48); background: rgba(26, 72, 62, .22); }
.test-card[data-status="check"] { border-color: rgba(255, 198, 109, .5); background: rgba(91, 67, 25, .18); }
.test-card[data-status="fail"] { border-color: rgba(255, 102, 120, .62); background: rgba(93, 34, 46, .24); }
.test-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.test-title > span { font-weight: 850; }
.test-status { flex: none; padding: 4px 8px; border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, .05); font-size: 10px; }
.test-card[data-status="pass"] .test-status { color: var(--mint); background: rgba(82, 227, 182, .1); }
.test-card[data-status="check"] .test-status { color: var(--amber); background: rgba(255, 198, 109, .1); }
.test-card[data-status="fail"] .test-status { color: #ff9ba7; background: rgba(255, 102, 120, .1); }
.test-card p { min-height: 44px; margin: 9px 0 11px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.test-card > button { width: 100%; }
.test-card > small { display: block; min-height: 32px; margin-top: 9px; color: #77919b; font-size: 11px; line-height: 1.45; }
.test-card button.running { color: var(--amber); border-color: rgba(255, 198, 109, .5); }
.judge-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.judge-row button:first-child { border-color: rgba(82, 227, 182, .35); }
.judge-row button:last-child { border-color: rgba(255, 102, 120, .35); }
.section-guide { margin: -7px 0 4px; color: var(--muted); font-size: 13px; }
.live-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; }
.live-grid article { min-height: 102px; display: flex; flex-direction: column; justify-content: center; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); }
.live-grid span { color: var(--muted); font-size: 11px; }
.live-grid strong { overflow: hidden; margin: 6px 0 2px; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.live-grid small { overflow: hidden; color: #77919b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.color-swatch { width: 100%; height: 25px; margin-top: 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; }
.color-swatch.red { background: #ff0000; }
.color-swatch.blue { background: #0000ff; }
.color-swatch.green { background: #00ff00; }
.motor-settings { display: grid; grid-template-columns: 1fr 150px 150px; align-items: end; gap: 12px; padding: 13px; border: 1px solid rgba(255, 198, 109, .3); border-radius: 13px; background: rgba(255, 198, 109, .05); }
.safe-check { min-height: 44px; color: #ffe0ab; font-weight: 750; }
.inline-settings { display: grid; grid-template-columns: minmax(110px, 1fr) 1.2fr; gap: 8px; align-items: end; }
.inline-settings label { color: var(--muted); font-size: 11px; }
.inline-settings input { margin-top: 4px; padding: 8px; }
.ai-workspace { display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: 12px; }
.camera-test { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 13px; background: #030709; }
.camera-test video { width: 100%; height: 100%; object-fit: cover; display: none; }
#cameraPlaceholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; color: #67808a; text-align: center; }
.ai-output { min-height: 150px; max-height: 300px; overflow: auto; padding: 14px; border: 1px solid var(--line); border-radius: 13px; color: #bad1d5; background: #071218; line-height: 1.6; white-space: pre-wrap; }

@media (max-width: 1200px) {
  .test-topbar { align-items: flex-start; flex-direction: column; }
  .test-topbar .top-status { justify-content: flex-start; }
  .test-grid.compact-tests { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .live-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 850px) {
  .test-grid, .test-grid.compact-tests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motor-settings { grid-template-columns: 1fr 1fr; }
  .safe-check { grid-column: 1 / -1; }
  .ai-workspace { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .test-layout { padding: 12px; }
  .test-topbar { position: static; align-items: flex-start; }
  .summary-grid, .test-grid, .test-grid.compact-tests, .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connect-strip, .motor-settings { grid-template-columns: 1fr; }
  .safe-check { grid-column: auto; }
  .header-actions { width: 100%; }
  .header-actions button { flex: 1; }
}
@media print {
  body { color: #111; background: #fff; }
  .topbar { position: static; color: #111; background: #fff; }
  .nav-link, button, .connect-strip, .camera-test, #logOutput { display: none !important; }
  .test-layout { display: block; max-width: none; padding: 0; }
  .panel, .test-card, .live-grid article, .summary-grid article { break-inside: avoid; color: #111; background: #fff; box-shadow: none; }
  .panel { margin-bottom: 12px; }
  .test-card p, .test-card small, .section-guide, .live-grid span, .live-grid small { color: #444; }
  .ai-workspace { grid-template-columns: 1fr; }
}